add codespell to pre-commit (#4559)

.github/actions/setup_build_env/action.yml

@@ -6,7 +6,7 @@
 #
 # Exit conditions:
 # - Python of version `python-version` is ready to be invoked as `python`.
-# - Poetry of version `poetry-version` is ready ot be invoked as `poetry`.
+# - Poetry of version `poetry-version` is ready to be invoked as `poetry`.
 # - If `run-poetry-install` is true, deps as defined in `pyproject.toml` will have been installed into the venv at `create-venv-at-path`.
 
 name: 'Setup Reflex build environment'

.pre-commit-config.yaml

@@ -11,6 +11,12 @@ repos:
         args: ["--fix", "--exit-non-zero-on-fix"]
         exclude: '^integration/benchmarks/'
 
+  - repo: https://github.com/codespell-project/codespell
+    rev: v2.3.0
+    hooks:
+      - id: codespell
+        args: ["reflex"]
+
   # Run pyi check before pyright because pyright can fail if pyi files are wrong.
   - repo: local
     hooks:

CODE_OF_CONDUCT.md

@@ -5,7 +5,7 @@
 We as members, contributors, and leaders pledge to make participation in our
 community a harassment-free experience for everyone, regardless of age, body
 size, visible or invisible disability, ethnicity, sex characteristics, gender
-identity and expression, level of experience, education, socio-economic status,
+identity and expression, level of experience, education, socioeconomic status,
 nationality, personal appearance, race, religion, or sexual identity
 and orientation.
 

README.md

@@ -249,7 +249,7 @@ We welcome contributions of any size! Below are some good ways to get started in
 -   **GitHub Discussions**: A great way to talk about features you want added or things that are confusing/need clarification.
 -   **GitHub Issues**: [Issues](https://github.com/reflex-dev/reflex/issues) are an excellent way to report bugs. Additionally, you can try and solve an existing issue and submit a PR.
 
-We are actively looking for contributors, no matter your skill level or experience. To contribute check out [CONTIBUTING.md](https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md)
+We are actively looking for contributors, no matter your skill level or experience. To contribute check out [CONTRIBUTING.md](https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md)
 
 
 ## All Thanks To Our Contributors:

docker-example/production-app-platform/Dockerfile

@@ -27,7 +27,7 @@ FROM python:3.13 as init
 
 ARG uv=/root/.local/bin/uv
 
-# Install `uv` for faster package boostrapping
+# Install `uv` for faster package bootstrapping
 ADD --chmod=755 https://astral.sh/uv/install.sh /install.sh
 RUN /install.sh && rm /install.sh
 

docker-example/production-compose/Dockerfile

@@ -6,7 +6,7 @@ FROM python:3.13 as init
 
 ARG uv=/root/.local/bin/uv
 
-# Install `uv` for faster package boostrapping
+# Install `uv` for faster package bootstrapping
 ADD --chmod=755 https://astral.sh/uv/install.sh /install.sh
 RUN /install.sh && rm /install.sh
 

pyproject.toml

@@ -101,3 +101,7 @@ lint.pydocstyle.convention = "google"
 [tool.pytest.ini_options]
 asyncio_default_fixture_loop_scope = "function"
 asyncio_mode = "auto"
+
+[tool.codespell]
+skip = "docs/*,*.html,examples/*, *.pyi"
+ignore-words-list = "te, TreeE"

reflex/.templates/jinja/web/utils/context.js.jinja2

@@ -28,7 +28,7 @@ export const state_name = "{{state_name}}"
 
 export const exception_state_name = "{{const.frontend_exception_state}}"
 
-// Theses events are triggered on initial load and each page navigation.
+// These events are triggered on initial load and each page navigation.
 export const onLoadInternalEvent = () => {
     const internal_events = [];
 

reflex/components/core/banner.py

@@ -241,7 +241,7 @@ def create(cls, *children, **props) -> Icon:
             size=props.pop("size", 32),
             z_index=props.pop("z_index", 9999),
             position=props.pop("position", "fixed"),
-            bottom=props.pop("botton", "33px"),
+            bottom=props.pop("bottom", "33px"),
             right=props.pop("right", "33px"),
             animation=LiteralVar.create(f"{pulse_var} 1s infinite"),
             **props,

reflex/components/core/breakpoints.py

@@ -58,7 +58,7 @@ def create(
 
         Args:
             custom: Custom mapping using CSS values or variables.
-            initial: Styling when in the inital width
+            initial: Styling when in the initial width
             xs: Styling when in the extra-small width
             sm: Styling when in the small width
             md: Styling when in the medium width

reflex/components/datadisplay/code.py

@@ -445,7 +445,7 @@ def create(
                 dark=Theme.one_dark,
             )
 
-        # react-syntax-highlighter doesnt have an explicit "light" or "dark" theme so we use one-light and one-dark
+        # react-syntax-highlighter doesn't have an explicit "light" or "dark" theme so we use one-light and one-dark
         # themes respectively to ensure code compatibility.
         if "theme" in props and not isinstance(props["theme"], Var):
             props["theme"] = getattr(Theme, format.to_snake_case(props["theme"]))  # type: ignore

reflex/components/datadisplay/dataeditor.py

@@ -219,7 +219,7 @@ class DataEditor(NoSSRComponent):
     # The minimum width a column can be resized to.
     min_column_width: Var[int]
 
-    # Determins the height of each row.
+    # Determines the height of each row.
     row_height: Var[int]
 
     # Kind of row markers.

reflex/components/datadisplay/dataeditor.pyi

@@ -291,7 +291,7 @@ class DataEditor(NoSSRComponent):
             max_column_auto_width: The maximum width a column can be automatically sized to.
             max_column_width: The maximum width a column can be resized to.
             min_column_width: The minimum width a column can be resized to.
-            row_height: Determins the height of each row.
+            row_height: Determines the height of each row.
             row_markers: Kind of row markers.
             row_marker_start_index: Changes the starting index for row markers.
             row_marker_width: Sets the width of row markers in pixels, if unset row markers will automatically size.

reflex/components/el/elements/metadata.py

@@ -81,7 +81,7 @@ class Title(Element):
     tag = "title"
 
 
-# Had to be named with an underscore so it doesnt conflict with reflex.style Style in pyi
+# Had to be named with an underscore so it doesn't conflict with reflex.style Style in pyi
 class StyleEl(Element):
     """Display the style element."""
 

reflex/components/plotly/plotly.py

@@ -149,10 +149,10 @@ class Plotly(NoSSRComponent):
     # Fired when a plot element is hovered over.
     on_hover: EventHandler[_event_points_data_signature]
 
-    # Fired after the plot is layed out (zoom, pan, etc).
+    # Fired after the plot is laid out (zoom, pan, etc).
     on_relayout: EventHandler[no_args_event_spec]
 
-    # Fired while the plot is being layed out.
+    # Fired while the plot is being laid out.
     on_relayouting: EventHandler[no_args_event_spec]
 
     # Fired after the plot style is changed.
@@ -167,7 +167,7 @@ class Plotly(NoSSRComponent):
     # Fired while dragging a selection.
     on_selecting: EventHandler[_event_points_data_signature]
 
-    # Fired while an animation is occuring.
+    # Fired while an animation is occurring.
     on_transitioning: EventHandler[no_args_event_spec]
 
     # Fired when a transition is stopped early.

reflex/components/plotly/plotly.pyi

@@ -130,13 +130,13 @@ class Plotly(NoSSRComponent):
             on_deselect: Fired when a selection is cleared (via double click).
             on_double_click: Fired when the plot is double clicked.
             on_hover: Fired when a plot element is hovered over.
-            on_relayout: Fired after the plot is layed out (zoom, pan, etc).
-            on_relayouting: Fired while the plot is being layed out.
+            on_relayout: Fired after the plot is laid out (zoom, pan, etc).
+            on_relayouting: Fired while the plot is being laid out.
             on_restyle: Fired after the plot style is changed.
             on_redraw: Fired after the plot is redrawn.
             on_selected: Fired after selecting plot elements.
             on_selecting: Fired while dragging a selection.
-            on_transitioning: Fired while an animation is occuring.
+            on_transitioning: Fired while an animation is occurring.
             on_transition_interrupted: Fired when a transition is stopped early.
             on_unhover: Fired when a hovered element is no longer hovered.
             style: The style of the component.

reflex/components/radix/primitives/slider.py

@@ -34,7 +34,7 @@ def on_value_event_spec(
 
 
 class SliderRoot(SliderComponent):
-    """The Slider component comtaining all slider parts."""
+    """The Slider component containing all slider parts."""
 
     tag = "Root"
     alias = "RadixSliderRoot"

reflex/components/radix/themes/layout/center.pyi

@@ -150,7 +150,7 @@ class Center(Flex):
         Args:
             *children: Child components.
             as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
-            direction: How child items are layed out: "row" | "column" | "row-reverse" | "column-reverse"
+            direction: How child items are laid out: "row" | "column" | "row-reverse" | "column-reverse"
             align: Alignment of children along the main axis: "start" | "center" | "end" | "baseline" | "stretch"
             justify: Alignment of children along the cross axis: "start" | "center" | "end" | "between"
             wrap: Whether children should wrap when they reach the end of their container: "nowrap" | "wrap" | "wrap-reverse"

reflex/components/radix/themes/layout/flex.py

@@ -22,7 +22,7 @@ class Flex(elements.Div, RadixThemesComponent):
     # Change the default rendered element for the one passed as a child, merging their props and behavior.
     as_child: Var[bool]
 
-    # How child items are layed out: "row" | "column" | "row-reverse" | "column-reverse"
+    # How child items are laid out: "row" | "column" | "row-reverse" | "column-reverse"
     direction: Var[Responsive[LiteralFlexDirection]]
 
     # Alignment of children along the main axis: "start" | "center" | "end" | "baseline" | "stretch"

reflex/components/radix/themes/layout/flex.pyi

@@ -153,7 +153,7 @@ class Flex(elements.Div, RadixThemesComponent):
         Args:
             *children: Child components.
             as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
-            direction: How child items are layed out: "row" | "column" | "row-reverse" | "column-reverse"
+            direction: How child items are laid out: "row" | "column" | "row-reverse" | "column-reverse"
             align: Alignment of children along the main axis: "start" | "center" | "end" | "baseline" | "stretch"
             justify: Alignment of children along the cross axis: "start" | "center" | "end" | "between"
             wrap: Whether children should wrap when they reach the end of their container: "nowrap" | "wrap" | "wrap-reverse"

reflex/components/radix/themes/layout/grid.py

@@ -27,7 +27,7 @@ class Grid(elements.Div, RadixThemesComponent):
     # Number of rows
     rows: Var[Responsive[str]]
 
-    # How the grid items are layed out: "row" | "column" | "dense" | "row-dense" | "column-dense"
+    # How the grid items are laid out: "row" | "column" | "dense" | "row-dense" | "column-dense"
     flow: Var[Responsive[LiteralGridFlow]]
 
     # Alignment of children along the main axis: "start" | "center" | "end" | "baseline" | "stretch"

reflex/components/radix/themes/layout/grid.pyi

@@ -184,7 +184,7 @@ class Grid(elements.Div, RadixThemesComponent):
             as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
             columns: Number of columns
             rows: Number of rows
-            flow: How the grid items are layed out: "row" | "column" | "dense" | "row-dense" | "column-dense"
+            flow: How the grid items are laid out: "row" | "column" | "dense" | "row-dense" | "column-dense"
             align: Alignment of children along the main axis: "start" | "center" | "end" | "baseline" | "stretch"
             justify: Alignment of children along the cross axis: "start" | "center" | "end" | "between"
             spacing: Gap between children: "0" - "9"

reflex/components/radix/themes/layout/spacer.pyi

@@ -150,7 +150,7 @@ class Spacer(Flex):
         Args:
             *children: Child components.
             as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
-            direction: How child items are layed out: "row" | "column" | "row-reverse" | "column-reverse"
+            direction: How child items are laid out: "row" | "column" | "row-reverse" | "column-reverse"
             align: Alignment of children along the main axis: "start" | "center" | "end" | "baseline" | "stretch"
             justify: Alignment of children along the cross axis: "start" | "center" | "end" | "between"
             wrap: Whether children should wrap when they reach the end of their container: "nowrap" | "wrap" | "wrap-reverse"

reflex/components/radix/themes/layout/stack.pyi

@@ -126,7 +126,7 @@ class Stack(Flex):
             spacing: Gap between children: "0" - "9"
             align: Alignment of children along the main axis: "start" | "center" | "end" | "baseline" | "stretch"
             as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
-            direction: How child items are layed out: "row" | "column" | "row-reverse" | "column-reverse"
+            direction: How child items are laid out: "row" | "column" | "row-reverse" | "column-reverse"
             justify: Alignment of children along the cross axis: "start" | "center" | "end" | "between"
             wrap: Whether children should wrap when they reach the end of their container: "nowrap" | "wrap" | "wrap-reverse"
             access_key: Provides a hint for generating a keyboard shortcut for the current element.
@@ -258,7 +258,7 @@ class VStack(Stack):
 
         Args:
             *children: The children of the stack.
-            direction: How child items are layed out: "row" | "column" | "row-reverse" | "column-reverse"
+            direction: How child items are laid out: "row" | "column" | "row-reverse" | "column-reverse"
             spacing: Gap between children: "0" - "9"
             align: Alignment of children along the main axis: "start" | "center" | "end" | "baseline" | "stretch"
             as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
@@ -393,7 +393,7 @@ class HStack(Stack):
 
         Args:
             *children: The children of the stack.
-            direction: How child items are layed out: "row" | "column" | "row-reverse" | "column-reverse"
+            direction: How child items are laid out: "row" | "column" | "row-reverse" | "column-reverse"
             spacing: Gap between children: "0" - "9"
             align: Alignment of children along the main axis: "start" | "center" | "end" | "baseline" | "stretch"
             as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.

reflex/components/recharts/cartesian.py

@@ -42,7 +42,7 @@ class Axis(Recharts):
     # The width of axis which is usually calculated internally.
     width: Var[Union[str, int]]
 
-    # The height of axis, which can be setted by user.
+    # The height of axis, which can be set by user.
     height: Var[Union[str, int]]
 
     # The type of axis 'number' | 'category'
@@ -60,7 +60,7 @@ class Axis(Recharts):
     # Allow the axis has duplicated categorys or not when the type of axis is "category". Default: True
     allow_duplicated_category: Var[bool]
 
-    # The range of the axis. Work best in conjuction with allow_data_overflow. Default: [0, "auto"]
+    # The range of the axis. Work best in conjunction with allow_data_overflow. Default: [0, "auto"]
     domain: Var[List]
 
     # If set false, no axis line will be drawn. Default: True