move docs to use dataclasses (#1072)

docs/api-reference/browser_storage.md

@@ -144,19 +144,18 @@ rx.button(
 
 # 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 `rx.Base` 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` 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.
 
 ```python demo exec
 import reflex as rx
+import dataclasses
 
-
-class AppSettings(rx.Base):
+@dataclasses.dataclass
+class AppSettings:
     theme: str = 'light'
     sidebar_visible: bool = True
     update_frequency: int = 60
-    error_messages: list[str] = []
+    error_messages: list[str] = dataclasses.field(default_factory=list)
 
 
 class ComplexLocalStorageState(rx.State):

docs/components/conditional_rendering.md

@@ -117,7 +117,10 @@ We can also reuse a `cond` component several times by defining it within a funct
 In this example we define the function `render_item`. This function takes in an `item`, uses the `cond` to check if the item `is_packed`. If it is packed it returns the `item_name` with a `✔` next to it, and if not then it just returns the `item_name`.
 
 ```python demo exec
-class ToDoListItem(rx.Base):
+import dataclasses
+
+@dataclasses.dataclass
+class ToDoListItem:
     item_name: str
     is_packed: bool
 

docs/components/rendering_iterables.md

@@ -171,7 +171,10 @@ We can also use `foreach` with the `cond` component.
 In this example we define the function `render_item`. This function takes in an `item`, uses the `cond` to check if the item `is_packed`. If it is packed it returns the `item_name` with a `✔` next to it, and if not then it just returns the `item_name`. We use the `foreach` to iterate over all of the items in the `to_do_list` using the `render_item` function.
 
 ```python demo exec
-class ToDoListItem(rx.Base):
+import dataclasses
+
+@dataclasses.dataclass
+class ToDoListItem:
     item_name: str
     is_packed: bool
 

docs/library/tables-and-data-grids/table.md

@@ -222,7 +222,10 @@ def foreach_table_example():
 It is also possible to define a `class` such as `Person` below and then iterate through this data structure, as a `list[Person]`.
 
 ```python
-class Person(rx.Base):
+import dataclasses
+
+@dataclasses.dataclass
+class Person:
     full_name: str
     email: str
     group: str
@@ -241,8 +244,10 @@ For filtering the `rx.input` component is used. The data is filtered based on th
 `current_people` is an [`rx.var(cache=True)`]({vars.computed_vars.path}). It is a var that is only recomputed when the other state vars it depends on change. This is to ensure that the `People` shown in the table are always up to date whenever they are searched or sorted.
 
 ```python demo exec
+import dataclasses
 
-class Person(rx.Base):
+@dataclasses.dataclass
+class Person:
     full_name: str
     email: str
     group: str

docs/vars/custom_vars.md

@@ -8,7 +8,7 @@ from pcweb.pages.docs import vars
 
 As mentioned in the [vars page]({vars.base_vars.path}), Reflex vars must be JSON serializable.
 
-This means we can support any Python primitive types, as well as lists, dicts, and tuples. However, you can also create more complex var types by inheriting from `rx.Base`.
+This means we can support any Python primitive types, as well as lists, dicts, and tuples. However, you can also create more complex var types by inheriting from `rx.Base` or decorating them as dataclasses with `@dataclasses.dataclass`.
 
 ## Defining a Type
 
@@ -18,8 +18,10 @@ Once defined, we can use it as a state var, and reference it from within a compo
 
 ```python demo exec
 import googletrans
+import dataclasses
 
-class Translation(rx.Base):
+@dataclasses.dataclass
+class Translation:
     original_text: str
     translated_text: str
 

docs/vars/var-operations.md

@@ -466,10 +466,13 @@ def projects_example() -> rx.Component:
     return rx.box(rx.foreach(ProjectsState.projects, project_item))
 ```
 
-The previous example had only a single type for each of the dictionaries `keys` and `values`. For complex multi-type data, you need to use a `Base var`, as shown below.
+The previous example had only a single type for each of the dictionaries `keys` and `values`. For complex multi-type data, you need to use a dataclass, as shown below.
 
 ```python demo exec
-class ActressType(rx.Base):
+import dataclasses
+
+@dataclasses.dataclass
+class ActressType:
     actress_name: str
     age: int
     pages: list[dict[str, str]]

templates/dashboard.md

@@ -5,9 +5,7 @@ author: "Reflex"
 image: "dashboard.webp"
 demo: "https://dashboard-new.reflex.run/"
 source: "https://github.com/reflex-dev/templates/tree/main/dashboard"
-meta: [
-    {"name": "keywords", "content": ""},
-]
+meta: [{ "name": "keywords", "content": "" }]
 ---
 
 The following is a dashboard to interactively display data some data. It is a good starting point for building more complex apps that require data visualization.
@@ -33,12 +31,14 @@ Right now the apps reads from a local CSV file. You can modify this by changing
 Additionally you will want to change the `Item` class to match the data in your CSV file.
 
 ```python
-class Item(rx.Base):
+import dataclasses
+
+@dataclasses.dataclass
+class Item:
     """The item class."""
 
     name: str
     payment: float
     date: str
     status: str
 ```
-