Merge branch 'main' into pr-1266

Author: LineIndent

.github/workflows/repository_dispatch.yml

@@ -0,0 +1,186 @@
+---
+company: Autodesk
+description: "Streamlining Complex Workflows: Why Autodesk Chose Reflex Over Streamlit for Scalable, Python-Based Solutions"
+domain: "https://autodesk.com"
+founded: "San Francisco, 1982"
+investors: "NASDAQ"
+stats: [
+    {
+        "metric": "Company projects completed with Reflex",
+        "value": "4"
+    },
+    {
+        "metric": "Time saved on each project with Reflex",
+        "value": "25%"
+    },
+    {
+        "metric": "Cost saved as 1 person can do the job of 2 with Reflex",
+        "value": "50%"
+    }
+]
+meta: [
+  {
+    "name": "keywords",
+    "content": "
+      autodesk web app,
+      python web app for construction,
+      reflex vs streamlit,
+      python react for data management,
+      reflex autodesk case study,
+      python data visibility,
+      python workflow automation,
+      python and react components,
+      autodesk consulting tools,
+      python web apps for enterprise,
+      scalable python web apps,
+      self-hosted python web apps,
+      python web apps,
+      react with python,
+      web app framework python,
+      web app python,
+    "
+  }
+]
+---
+
+```python exec
+import reflex as rx
+from reflex_image_zoom import image_zoom
+from pcweb.pages.docs import library
+```
+
+<!-- ```python eval
+rx.vstack(
+    image_zoom(rx.image(src="/case_studies/bayesline_app.png", border_radius="10px", alt="Bayesline App")),
+    rx.text("Bayesline App built with Reflex"),
+    width="100%",
+)
+``` -->
+
+
+Meet Autodesk a globally recognized leader in design and engineering software, known for its innovative solutions that empower professionals across industries to bring their creative visions to life. Autodesk has established itself as a trusted partner for millions of users worldwide, helping them achieve greater efficiency, precision, and creativity in their projects.
+
+In addition to its flagship offerings like AutoCAD, Revit, Maya, and Fusion 360, Autodesk serves a wide range of industries, including architecture, manufacturing, construction, and media.
+
+
+
+## Struggling with Data Visibility and Manual Workflows
+
+Autodesk Consulting provides support to customers to enable data-centric workflows, and integrating systems with custom app development leveraging Autodesk Platform Services.
+
+Autodesk consults for a wide variety of companies that need a better way to move data and manage their digital project delivery in a way that is easily visible for all stakeholders to see the progress. Up until now, many relied on legacy, disconnected workflows using spreadsheets or other 3rd party systems, disjoint from where the live project data is stored.
+
+These companies hired Autodesk Consulting to help them move their data more efficiently and visibly to create insights. The main parts that they needed help with were:
+
+- **Document Management**: This feature helps construction teams organize, store, and share important documents (e.g., blueprints, contracts, plans, [3D designs and 2D drawings data](https://tutorials.autodesk.io/tutorials/simple-viewer/)) efficiently in a Common Data Environment.
+- **RFI (Request for Information)**: RFIs are formal requests used during construction to clarify aspects of a project. Autodesk Build allows users to manage and track these RFIs within the platform.
+
+Autodesk was looking to build an app for its clients to exchange information between design and construction. These companies wanted automated workflows to migrate RFI submissions and handle the repetitive, time-consuming and error prone actions like document uploads, data entry, attachments and comment logs for collaboration.
+
+Paolo Serra, a Principal Implementation Consultant at Autodesk, was tasked with this project. Paolo is a Python developer and was looking for a web based solution. He didn’t want to use React and Javascript, but still wanted to build a production grade web app.
+
+```md quote
+- name: Paolo
+- role: Principal Implementation Consultant
+It normally requires multiple people to get an app up and there was a lack of resources available in the time frame we needed.
+```
+
+The solution had to be cloud based, to connect to existing systems and they only had 60 days to deliver it all. 
+
+Failure to deliver the value and results, due to contract obligations, could lead to court litigations, financial losses, damaged reputation and losing the customer. And as Consulting services are available for high-end customers in the context of Enterprise Business Agreements, there was a lot at stake.
+
+
+
+## Why Existing Solutions Fell Short for Autodesk’s Needs
+
+Paolo explored other Python web app frameworks like Mesop and FastUI, but neither supported React—a requirement for all Autodesk products to ensure consistent styling with Autodesk certified React components. Company policy mandates building on Weave, a local company fork of the Material UI React library.
+
+He explored Streamlit, Taipy and Dash, but didn’t like the way they looked and again did not have an easy way to use the required React components. He wanted to focus on business logic not low level implementation details.
+
+```md quote
+- name: Paolo
+- role: Principal Implementation Consultant
+Reflex gave us the freedom to create a product that could meet our business needs compared to streamlit to name one.
+```
+
+## Enabling Rapid Development with Reflex and Custom Components
+
+Reflex’s React wrapping feature allowed Paolo to integrate the Weave React component library—a company requirement—directly into his app.
+
+```md quote
+- name: Paolo
+- role: Principal Implementation Consultant
+Wrapping the React component in Reflex allowed us to catch and prevent common issues, enforce standardization and raise more descriptive errors. The result is that instead of days it takes hours to be productive with the same design system.
+```
+
+Their team was able to leverage reusable high level components to build out UI with clean code including:
+
+- A custom wrapped Treeview component to show the file directory
+- A wrapped ModelViewer React component to view and collaborate on 2D drawings and 3D models via Autodesks Platform Services Viewer
+- A table component to show and filter the data
+
+The team was able to:
+
+- Connect to different data sources using Python code they already had available
+- Hook the app up with Autodesk auth
+- Self-host their reflex app with their internal infrastructure, deploying to Azure
+
+
+```md quote
+- name: Paolo
+- role: Principal Implementation Consultant
+I am able to wear all the caps at once: Solution Architecture, UI/UX, front-end and back-end.
+```
+
+
+
+
+## Why Autodesk chose Reflex
+
+
+Paolo and his team chose Reflex to develop a production-ready web app fully in Python. Reflex offered several key advantages, including:
+
+* Allowing Autodesk to achieve more with fewer resources, significantly reducing overall costs
+
+```md quote
+- name: Paolo
+- role: Principal Implementation Consultant
+One person the can do the job of two with Reflex, so it cut our cost in half.
+```
+
+* Rapid prototyping, ensuring faster, more collaborative development
+
+```md quote
+- name: Paolo
+- role: Principal Implementation Consultant
+The time from ideation to prototype is shorter than traditional web dev, which is a massive win when you need to get to shared understanding of the product you are building.
+```
+
+* Saving Autodesk 25% on project timelines, delivering results faster and impressing clients.
+
+```md quote
+- name: Paolo
+- role: Principal Implementation Consultant
+A couple of weeks of work can be skimmed off the estimate for an average 60 day project by using Reflex meaning we were able to focus on exceeding customer expectations.
+```
+
+* The ability to wrap their local react library, which was a company requirement, and create reusable high-level components
+
+* Future proofing their code by writing it in Python
+
+
+
+### From One Project to Four
+
+Paolo and his team have now worked on three other projects for different customers with Reflex:
+
+1. A content management service to entirely redesign the way in which their consulting is delivered, from an in person experience to an online digital platform for consulting
+2. An information registry project with digital delivery of artifacts
+3. An analysis component dashboard which understands insights into what is happening in a companies local data, draws conclusions, and link to all the relevant Autodesk services
+
+
+```md quote
+- name: Paolo
+- role: Principal Implementation Consultant
+Everything I was able to accomplish was because of the framework and unparalleled support and promptness of the Reflex team.
+```

case-studies/autodesk.md

@@ -142,9 +142,70 @@ rx.button(
 )
 ```
 
+## rx.SessionStorage
+
+Represents a state Var that is stored in sessionStorage in the browser. Similar to localStorage, but the data is cleared when the page session ends (when the browser/tab is closed). Currently only supports string values.
+
+Parameters
+
+- `name`: The name of the storage key on the client side.
+
+```python
+class SessionStorageState(rx.State):
+    # session storage with default settings
+    s1: str = rx.SessionStorage()
+
+    # session storage with custom settings
+    s2: str = rx.SessionStorage("s2 default")
+    s3: str = rx.SessionStorage(name="s3")
+```
+
+### Session Persistence
+
+SessionStorage data is cleared when the page session ends. A page session lasts as long as the browser is open and survives page refreshes and restores, but is cleared when the tab or browser is closed.
+
+Unlike LocalStorage, SessionStorage is isolated to the tab/window in which it was created, so it's not shared with other tabs/windows of the same origin.
+
+## rx.remove_session_storage
+
+Remove a session storage item from the client's browser.
+
+Parameters
+
+- `key`: The key to remove from session storage.
+
+```python
+rx.button(
+    'Remove Session Storage',
+    on_click=rx.remove_session_storage('key'),
+)
+```
+
+This event can also be returned from an event handler:
+
+```python
+class SessionStorageState(rx.State):
+    ...
+    def logout(self):
+        return rx.remove_session_storage('session_storage_state.s1')
+```
+
+## rx.clear_session_storage()
+
+Clear all session storage items from the client's browser. This may affect other
+apps running in the same domain or libraries within your app that use session
+storage.
+
+```python
+rx.button(
+    'Clear all Session Storage',
+    on_click=rx.clear_session_storage(),
+)
+```
+
 # Serialization Strategies
 
-If a non-trivial data structure should be stored in a `Cookie` or `LocalStorage` var it needs to be serialized before and after storing it. It is recommended to use a dataclass for the data which provides simple serialization helpers and works recursively in complex object structures.
+If a non-trivial data structure should be stored in a `Cookie`, `LocalStorage`, or `SessionStorage` var it needs to be serialized before and after storing it. It is recommended to use a dataclass for the data which provides simple serialization helpers and works recursively in complex object structures.
 
 ```python demo exec
 import reflex as rx
@@ -234,3 +295,39 @@ def app_settings_example():
         ),
     )
 ```
+
+# Comparison of Storage Types
+
+Here's a comparison of the different client-side storage options in Reflex:
+
+| Feature | rx.Cookie | rx.LocalStorage | rx.SessionStorage |
+|---------|-----------|----------------|------------------|
+| Persistence | Until cookie expires | Until explicitly deleted | Until browser/tab is closed |
+| Storage Limit | ~4KB | ~5MB | ~5MB |
+| Sent with Requests | Yes | No | No |
+| Accessibility | Server & Client | Client Only | Client Only |
+| Expiration | Configurable | Never | End of session |
+| Scope | Configurable (domain, path) | Origin (domain) | Tab/Window |
+| Syncing Across Tabs | No | Yes (with sync=True) | No |
+| Use Case | Authentication, Server-side state | User preferences, App state | Temporary session data |
+
+# When to Use Each Storage Type
+
+## Use rx.Cookie When:
+- You need the data to be accessible on the server side (cookies are sent with HTTP requests)
+- You're handling user authentication
+- You need fine-grained control over expiration and scope
+- You need to limit the data to specific paths in your app
+
+## Use rx.LocalStorage When:
+- You need to store larger amounts of data (up to ~5MB)
+- You want the data to persist indefinitely (until explicitly deleted)
+- You need to share data between different tabs/windows of your app
+- You want to store user preferences that should be remembered across browser sessions
+
+## Use rx.SessionStorage When:
+- You need temporary data that should be cleared when the browser/tab is closed
+- You want to isolate data to a specific tab/window
+- You're storing sensitive information that shouldn't persist after the session ends
+- You're implementing per-session features like form data, shopping carts, or multi-step processes
+- You want to persist data for a state after Redis expiration (for server-side state that needs to survive longer than Redis TTL)

docs/api-reference/browser_storage.md

@@ -12,19 +12,21 @@ Usage: reflex [OPTIONS] COMMAND [ARGS]...
   Reflex CLI to create, run, and deploy apps.
 
 Options:
-  -v, --version  Get the Reflex version.
-  --help         Show this message and exit.
+  --version  Show the version and exit.
+  --help     Show this message and exit.
 
 Commands:
-  db           Subcommands for managing the database schema.
-  demo         Run the demo app.
-  deploy       Deploy the app to the Reflex hosting service.
-  deployments  Subcommands for managing the Deployments.
-  export       Export the app to a zip file.
-  init         Initialize a new Reflex app in the current directory.
-  login        Authenticate with Reflex hosting service.
-  logout       Log out of access to Reflex hosting service.
-  run          Run the app in the current directory.
+  cloud      The Hosting CLI.
+  component  CLI for creating custom components.
+  db         Subcommands for managing the database schema.
+  deploy     Deploy the app to the Reflex hosting service.
+  export     Export the app to a zip file.
+  init       Initialize a new Reflex app in the current directory.
+  login      Authenticate with experimental Reflex hosting service.
+  logout     Log out of access to Reflex hosting service.
+  rename     Rename the app in the current directory.
+  run        Run the app in the current directory.
+  script     Subcommands for running helper scripts.
 ```
 
 ## Init
@@ -88,3 +90,39 @@ You can export your app's frontend and backend to zip files using the `reflex ex
 The frontend is a compiled NextJS app, which can be deployed to a static hosting service like Github Pages or Vercel.
 However this is just a static build, so you will need to deploy the backend separately.
 See the self-hosting guide for more information.
+
+## Rename
+
+The `reflex rename` command allows you to rename your Reflex app. This updates the app name in the configuration files.
+
+```bash
+$ reflex rename --help
+Usage: reflex rename [OPTIONS] NEW_NAME
+
+  Rename the app in the current directory.
+
+Options:
+  --loglevel [debug|default|info|warning|error|critical]
+                                  The log level to use.
+  --help                          Show this message and exit.
+```
+
+## Cloud
+
+The `reflex cloud` command provides access to the Reflex Cloud hosting service. It includes subcommands for managing apps, projects, secrets, and more.
+
+For detailed documentation on Reflex Cloud and deployment, see the [Cloud Quick Start Guide](https://reflex.dev/docs/hosting/deploy-quick-start/).
+
+## Script
+
+The `reflex script` command provides access to helper scripts for Reflex development.
+
+```bash
+$ reflex script --help
+Usage: reflex script [OPTIONS] COMMAND [ARGS]...
+
+  Subcommands for running helper scripts.
+
+Options:
+  --help  Show this message and exit.
+```