Recent Releases of https://github.com/rio-labs/rio

https://github.com/rio-labs/rio - Rio 0.11

We've released version 0.11, bringing significant improvements, enhanced customization, and better documentation! This update refines Rioโ€™s core functionality, making it more powerful and user-friendly.

Improved rio.Popup :art:

The rio.Popup component has been revamped to give you more control and flexibility. Now, you can build fully custom popups, including multi-select variations and different styles. Additionally, rio.Popup now supports:

  • user_closable and modal properties, just like dialogs.
  • A new mode: "dropdown", allowing popups to behave like rio.Dropdowns.
  • The ability to construct custom dropdowns using pure Python and rio.Components. Tutorial

This enhancement enables more intuitive and dynamic user interactions in your apps.

Added Dynamic Routes ๐ŸŒ

Rio now supports FastAPI-style dynamic routes, allowing you to define pages with segments in curly braces. These segments match any value and are passed to your component as keyword arguments. For example, visiting /foo will display "You're currently on foo".

``python @rio.page( # Notice the{segment}in the URL. The matched segment will be # passed to the component as thesegment` parameter. url_segment="{segment}", ) class MyPage(rio.Component): # This parameter will be taken from the URL segment: str

def build(self) -> rio.Component:
    return rio.Text(
        f"You're currently on {self.segment}",
        justify="center",
    )

```

You can also match multiple segments using {pattern:path}. Query parameters are supported and can be accessed in your components. Rio can parse various parameter types, including int, float, bool, and typing.Literal.

For more control, you can access the active URL from self.session.active_page_url and run custom logic.

Have a look at our guide for Dynamic Routes

Component Zoo ๐Ÿงฉ

To make Rio even better, weโ€™re working on a Component Zoo - a place where we can share and showcase custom-built components. This initiative will make it easier to reuse and integrate powerful UI elements across projects.

Core Improvements :gear:

We've made several under-the-hood upgrades to improve usability and performance:

  • Component.force_refresh is now synchronous, eliminating the need for async calls.
  • rio.ImageFill now supports tile fill mode.
  • Colors now use Oklab instead of RGB for more perceptually accurate color representation.
  • Breaking Change: rio.Color.hex now returns a 6-digit hex code instead of an 8-digit one. Use rio.Color.hexa for the previous behavior.
  • Breaking Change: rio.Color.GREY is now rio.Color.GRAY.
  • rio.Drawer now sizes itself to fit both the anchor and the drawer content.
  • Dialogs now apply a default style.

More Styling Options & Enhancements :art:

Weโ€™ve made styling even more powerful:

  • More cell styling options in rio.Table.
  • New input box styles: "rounded" and "pill".
  • Gradient stops can now be specified as colors, with Rio automatically inferring their position (breaking change: stops must be ordered now).
  • Themes now support a header_font parameter.

Better Platform Awareness ๐Ÿ“Š

We've exposed additional platform information to improve UI adaptability:

  • rio.Session.screen_width
  • rio.Session.screen_height
  • rio.Session.pixels_per_font_height
  • rio.Session.scroll_bar_size
  • rio.Session.primary_pointer_type

These enhancements make it easier to build responsive and adaptive interfaces.

Improved Mobile Experience ๐Ÿ“ฑ

  • Dragging is now much smoother, improving touch interactions.
  • rio.run now also works when using as_fastapi, making it more seamless to integrate with FastAPI.

Revamped Templates :file_folder:

Weโ€™ve updated and improved several templates, including:

  • Crypto Dashboard
  • Multipage App
  • To-Do App

These templates now offer a cleaner UI, better structure, and improved performance.

Brand Icons :performing_arts:

We've added icons for common brands, making it easier to integrate recognizable branding into your Rio applications.

Up Next :rocket:

We're continuously improving Rio! Some upcoming features include:

  • More enhancements to rio.Table, including styling individual cells and inserting custom Rio components into them.
  • Further documentation improvements, ensuring clearer navigation, more how-tos, and practical examples.
  • Custom HTML componentsโ€”we're laying the groundwork for a powerful API that enables deeper customization.

Install ๐Ÿ› ๏ธ

Get the latest version from PyPI:

sh pip install --upgrade rio-ui

We canโ€™t wait to see what you build with these new features! :rocket:

- Python
Published by Sn3llius 12 months ago

https://github.com/rio-labs/rio - Rio 0.10.6

We've released version 0.10.6, focusing on stability and bug fixes rather than large overhauls. But that's not to say there nothing has changedโ€”there are still some exciting improvements!

Improved rio run ๐ŸŒ

One of the great things about Rio is how rio run auto-detects changes to your project and reloads the page. This feature has been further refined:

rio run now reloads all packages in the project folder, not just the main module. If your project is split into multiple sub-projects, all of them will be kept up-to-date automatically. Packages within virtual environments are exempt from this to avoid unnecessary reloads and keep everything responsive.

Youโ€™ve long been able to load Rio apps as FastAPI apps with the as_fastapi() method:

```python app = rio.App(...)

fastapiapp = app.asfastapi()

fastapiapp.addroute(...) ```

Previously, rio run would still execute the original app, not fastapi_app, which meant any custom routes you added were left out. To host such an app, youโ€™d need to rely on other servers, like uvicorn, sacrificing the Rio dev tools.

This limitation is gone! rio run will now prioritize Rio apps converted to FastAPI, hosting those first. If none are found, it will fall back to the standard Rio app. Now you can enjoy custom routes and middlewares without losing any of the dev tools.

Better Tables ๐Ÿ“Š

rio.Table has received some much-needed attention. We realize that many of you are using Rio for data-science applications and just how important tables are in that context. While we still consider them experimental for now, tables now look much nicer than before and we've laid the groundwork for more improvements to come. Watch this space!

Up Next ๐Ÿšง

Even with the table improvements in this release, thereโ€™s more in store. Weโ€™re working on styling for individual cells, sorting, inserting arbitrary Rio components into cells, and much more.

Our documentation is also getting a full revamp. We've invested time in enhancing the API docs, and now itโ€™s time to bring the rest of the docs up to speed with improved navigation, more how-tos, and examples for common tasks.

Finally, custom HTML components are still in development. Much of the groundwork is in place, and weโ€™re actively shaping the public API.

Install ๐Ÿ› ๏ธ

Get it from PyPI: pip install --upgrade rio-ui ๐ŸŒŠ

- Python
Published by mad-moo over 1 year ago

https://github.com/rio-labs/rio - Rio 0.10

It's been two months since the previous release, and 0.10 is a big one. The team has been busy, and we've got a lot to cover. Let's dive into the highlights of this release.

Major Highlights ๐ŸŒŸ

Reworked Routing ๐Ÿ—บ๏ธ

Rio now automatically detects your app's pages! Instead of specifying each page during app creation simply place your Python files in the "pages" directory and annotate components with @rio.page(...). Rio will scan the directory and add all annotated components to your app.

This change simplifies page management and follows our philosophy of making Rio user-friendly. If this does not work for you (for example, because you want to add pages dynamically) the old system absolutely still works and isn't going anywhere.

A new kind of page has also been added: rio.Redirect allows to to add a page to your app that will immediately redirect to another page. This has always been possible with page guards, but the new system is more explicit and more convenient.

Page guards have also received a small update. Previously they were passed multiple parameters which cluttered up their signature. We've changed this to a single rio.GuardEvent object that contains all the information you need. This allows us to add more information in the future without breaking existing code.

To round it all out, any app with two or more pages will now have a default navigation added. This will help you get around during development and can easily be replaced by assigning your own navigation to the app's build callback. Learn more here.

Improved Parameter Naming ๐Ÿท๏ธ

We've seen some confusion around the naming of parameters in previous releases and have taken this opportunity to make several changes to clarify parameter names. The most prominent change are the width and height parameters.

Previously these would either accept a single number, or the literal "grow" to indicate that a component would like additional space. This has now been split into two values instead:

  • min_width and min_height control the minimum size of a component. This allows you to force components to be larger than they would be based on their content.

  • grow_x and grow_y correspond to the previous width="grow" and height="grow" respectively. As before, these will cause components to be prioritized when superfluous space is available.

To upgrade to the new system just apply a few simple replacements:

  • width=123 -> min_width=123
  • width="grow" -> grow_x=True
  • height=123 -> min_height=123
  • height="grow" -> grow_y=True

That's it! Even better, the old parameters will continue to work for now, and emit a warning in the terminal to remind you to update your code.

Other name changes include:

  • rio.Text.wrap has been renamed to rio.Text.overflow. This avoids the confusing case of wrap="ellipsize".

  • rio.Session.file_chooser is now rio.Session.pick_file

  • rio.Page is now rio.ComponentPage. This is to avoid confusion with the lowercase @rio.page decorator.

  • rio.Page.page_url is now called rio.ComponentPage.url_segment. This makes it clearer that only one segment should be specified, and not the entire URL.

  • The plain style of rio.Button is now called plain-text. This separates it clearly from the new colored-text style.

Again, all old names will continue to work for the near future. We recommend slowly switching to the new names as you work on your app.

Dialogs ๐Ÿ—จ๏ธ

Dialogs have finally arrived! These have been often requested and for good reason. They're a great way to ask users for input, confirm actions, or just display information in a way that doesn't require a new page.

The easiest way to do so is using the show_yes_no_dialog method available in the session. In just a few lines of code you can ask users a simple yes/no question and wait for them to respond

py ice_cream_lover = await self.session.show_yes_no_dialog( title="This is a Dialog", text="Do you like ice cream?", )

Of course, you can also provide completely custom content. This is a little more involved, so check out the documentation of rio.Session.show_custom_dialog for a full example.

We're also working on another convenience function that will allow you to create dialogs with arbitrary buttons, without having to create your own component. The API for this one is still unclear, so it will drop in a future release.

(If you're coming from a pre-release rather than the previous stable version, please note that dialogs have moved from rio.Component to rio.Session.)

Support for Base URLs ๐ŸŒ

Rio now has experimental support for custom base URLs. This means you can host your Rio app in a subdirectory of your domain, such as mysite.com/myapp. This can be useful if you're hosting multiple apps on the same domain, or if you maybe want to create an admin-cockpit for your server that isn't the main application for users to see.

You can set the URL in the rio run command:

sh python -m rio run --base-url=https://mysite.com/myapp

Remember that this is experimental for now, so please let us know if you run into any issues.

Authentication Example ๐Ÿ”’

We've added a new example / template to Rio that demonstrates how to implement a login system. It shows how to securely store and verify passwords, and how to use sessions to keep users logged in.

This initial version stores all passwords locally using SQLite. Support for OAuth is in the works.

You can create a project based on this template in just one line:

sh rio new --template authentication

API Changes ๐Ÿšจ

  • guards: Previously, multiple parameters were passed, cluttering their signature. This has been changed to a single rio.GuardEvent object that encapsulates all necessary information.
  • Several parameter names have been updated but will be deprecated in a future release.

Other Improvements โœจ

  • FilePickerArea: Allows file uploads through drag-and-drop functionality or by selecting files via the file browser option.
  • A Chinese translation of the README has been added by @youweicheng

Up Next: The Road to Stability ๐Ÿšง

You'll have noticed the unusual amount of changes in this release. This is on purpose.

Rio has matured significantly since the initial release. Most of what you'd expect from an app framework has been implemented, and the time has come where we need to stop changing things each release and instead need to start worrying about stability.

This is why we've implemented everything on our backlog that would introduce API changes in this release. It will allow us to keep the API more consistent from now on, with much less changing between releases. Think of it as a sort of "soft stable" in preparation for 1.0, which we expect to reach later this year.

This of course doesn't mean that there won't be any more improvements. We are working on support for custom components, better internal state management and plenty other updates, but we are convinced that stability and reliability need to take center stage now.

This means that we'll be focusing on bug fixes, many, many more automated tests, and documentation improvements. Our website also has several changes lined up to optimize it for mobile, as well as make documentation more accessible.

Install ๐Ÿ› ๏ธ

Get it from pypi: pip install --upgrade rio-ui ๐ŸŒŠ

- Python
Published by Sn3llius over 1 year ago

https://github.com/rio-labs/rio - Rio 0.9.2

After looking into feedback and real-world apps made by the community, we've decided to make some changes to the layouting system. We've completely rewritten how components are laid out internally. This was a large undertaking and has been in the works for several weeks now - and the results are looking great! We're seeing much faster layout times, especially for larger (1000+ component) apps.

No Breaking changes

Improvements:

  • Internal Layout Changes: This was an entirely internal layout change that makes Rio faster.
  • Foundation for Custom Components: These changes pave the way for custom components, a feature we've been wanting to add for a while.
  • rio.Switch: Appearance of rio.Switch has been enhanced for better usability and appearance.

Install ๐Ÿ› ๏ธ

Get it from pypi: pip install --upgrade rio-ui ๐ŸŒŠ

- Python
Published by Sn3llius over 1 year ago

https://github.com/rio-labs/rio - Rio 0.9

I'm not going to say too much because the changelog speaks for itself, but I have to bring special attention to one feature in particular: The dev tools sidebar got a major overhaul in this release, in particular the "component tree" tab. If you ever have trouble with rio's layouting system, the dev tools can now tell you exactly why a component is layouted the way it is, explain how you can make it smaller or larger, and even let you change the size, margin, and alignment of the component on-the-fly. To try it out, open the "Tree" tab in the dev sidebar, select a component, and then click the "Layout" button at the bottom.

Breaking changes

  • Text.justify now defaults to "left"
  • FlowContainer.justify now defaults to "left"
  • rio.Theme.replace method has been removed, since themes are now mutable

New features โœจ

  • Checkbox component as an alternative to rio.Switch #51
  • Experimental Switcher component for animated transitions between different child components
  • FlowContainer now has a convenience spacing parameter which controls both row_spacing and column_spacing at the same time
  • App now takes a dict of meta_tags as input, which are converted to HTML<meta> tags

Improvements:

  • TextInputs now emit the on_change event in real time while the user is typing
  • HTML components now execute embedded <script> nodes
  • rio run no longer opens a browser, since many people found it annoying

Deprecations:

  • rio.Fill and rio.FillLike are slated for removal
  • The display_controls parameter of the CodeBlock component has been renamed to show_controls

Install ๐Ÿ› ๏ธ

Get it from pypi: pip install --upgrade rio-ui ๐ŸŒŠ

- Python
Published by Sn3llius over 1 year ago

https://github.com/rio-labs/rio - Rio 0.8.7

Thanks to all of the feedback and contributions from the community, we're excited to announce the release of Rio 0.8.7! In addition to numerous bug fixes and minor improvements, there are some exciting new features:

New Featuresโœจ

  • rio.Calendar: A versatile calendar component for managing dates. (experimental)
  • rio.DateInput: An intuitive date input field for easy date selection. (experimental)
  • rio.Popup: A customizable popup component for dynamic content display.

Install ๐Ÿ› ๏ธ

Get it from pypi: pip install --upgrade rio-ui ๐ŸŒŠ

- Python
Published by Sn3llius over 1 year ago

https://github.com/rio-labs/rio - Rio 0.5

This is a sizable release, with several quality of life improvements, bugfixes and improvements:

Improvements โœจ

  • rio.Rectangle is now much easier to use. Instead of wrapping up all of the styling components inside of a BoxStyle, you can now pass the fill, corner_radius, and other styles directly to the rectangle.

Breaking Changes

  • rio.Text now has a justify attribute. Previously, align_x controlled both the position of the component itself, and the location of the text inside of the component. With this change, align_x positions the component, while justify controls where the text is placed inside of the component. This should clear up the previous confusion from align_x controlling multiple properties.
  • rio.MardownView has been renamed to rio.Markdown. This brings it in line with our typical naming, since no other components end in View.
  • Another change to rio.Text: multiline was replaced with wrap. ### Install ๐Ÿ› ๏ธ Get it from pypi: pip install --upgrade rio-ui ๐ŸŒŠ

- Python
Published by Sn3llius over 1 year ago

https://github.com/rio-labs/rio - Rio 0.6

We're excited to announce our latest release, Rio 0.6! This is a big one, because it's the first public alpha release.

Improvements โœจ

  • Many components have had their documentation overhauled and improved Rio is now under the open source Apache 2.0 license. While Rio has always been open-source, this license gives you even more freedoms
  • Cards now have a ripple parameter, which adds a neat little effect to the card when it's clicked
  • many, many more internal improvements, everything from refactoring the client side, to performance improvements, to better error messages

Breaking Changes

  • Sliders have been reimplemented from scratch and are now animated. We've also changed the step_size parameter to just step, to match Python functions like range().
  • Theme.from_color has been renamed to Theme.from_colors. Since thisfunction now accepts to many different colors, it wasn't clear which one the name referred to ๐Ÿ™‚

Install ๐Ÿ› ๏ธ

Get it from pypi: pip install --upgrade rio-ui ๐ŸŒŠ

- Python
Published by Sn3llius over 1 year ago

https://github.com/rio-labs/rio - Rio 0.7

Thanks to all of the feedback and contributions from the community, we're excited to announce the release of Rio 0.7! This release includes one of the largest change to layouting system in months, among many other improvements.

Breaking Changes

No changes are needed for your old code.

No more funky yellow stripes ๐ŸŽ‰

Rows and columns have got to be some of the most important components in Rio. Just about every app uses them, and just about every app has had to deal with the funky yellow stripes that appear when too much space is available. This undefined space was meant as a warning system, but after talking to many of you we've decided that it does more harm than good. Starting with Rio 0.7, rows and columns will now pass on all available space to their children. This places them in line with the rest of the layouting system, and hopefully alleviates some of the confusion around them.

New Example: Multipage Website ๐Ÿ“„๐Ÿ“„๐Ÿ“„

Navigation is a common pattern in apps, and Rio now has a new example that illustrates how to implement it. The new "Multipage Website" example comes with three sample pages and a navbar to switch between them. The navbar automatically highlights the current page and allows you to switch between them.

You can set up a project with this template in a single command: rio new --template multipage-website

Thank you to @jjflorian for contributing this example!

Other Improvements โœจ

  • Added a new CodeBlock component that can be used to display code snippets. It's similar to how code blocks in markdown work, and supports syntax highlighting.
  • UserSettings have been migrated to our own dataclass implementation. This allows you to use mutable defaults.
  • Many, many bugfixes, improvements and documentation updates.

New Contributors ๐Ÿค

  • @JJFlorian made the first contribution in #15
  • @shubham-kshetre made the first contribution in #18 and #23

Install ๐Ÿ› ๏ธ

Get it from pypi: pip install --upgrade rio-ui ๐ŸŒŠ

- Python
Published by Sn3llius over 1 year ago

https://github.com/rio-labs/rio - Rio 0.8

It hasn't even been a week since the last announcement, but quite a lot has happened in these few days! Aside from a multitude of bug fixes, there are some neat new features:

New Featuresโœจ

  • rio run now tells you if a newer rio version is available. You'll never miss an update again!
  • Themes now accept a text_color parameter, giving you even more control over the look of your app
  • ProgressBars now have a color parameter

Breaking Changes

There are also some breaking changes in the Banner component:

  • The markup parameter was renamed to markdown for clarity
  • The multiline parameter was removed; banners now always wrap text

Install ๐Ÿ› ๏ธ

Get it from pypi: pip install --upgrade rio-ui ๐ŸŒŠ

- Python
Published by Sn3llius over 1 year ago

https://github.com/rio-labs/rio - Rio 0.8.5

Thanks to all of the feedback and contributions from the community, we're excited to announce the release of Rio 0.8.5! In addition to numerous bug fixes and minor improvements, there are some exciting new features:

New Featuresโœจ

  • HTML Meta Tags: Provide crucial metadata for SEO, helping search engines understand and index your web page content.
  • @rio.event.onwindowsize_change: Allows you to execute specific functions dynamically when the window size changes, enhancing responsive design capabilities.
  • FrostedGlassFill: Creates a frosted glass effect, adding a stylish and modern aesthetic to your application's user interface. (#35 )
  • Session method for reading and writing clipboard: Adds functionality to read from and write to the clipboard within a session. (#1)

New Contributors ๐Ÿค

  • @16amattice made the first contribution in #1 and #35

Install ๐Ÿ› ๏ธ

Get it from pypi: pip install --upgrade rio-ui ๐ŸŒŠ

- Python
Published by Sn3llius over 1 year ago