fix spelling errors (#1158)

.codespellrc

@@ -0,0 +1,3 @@
+[codespell]
+skip = *.csv, *.json
+ignore-words-list = selectin

.github/workflows/codespell.yml

@@ -0,0 +1,15 @@
+name: codespell
+
+on:
+  pull_request:
+    branches: [main]
+
+jobs:
+  codespell:
+    name: Check for spelling errors
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Codespell
+        uses: codespell-project/actions-codespell@v2

README.md

@@ -69,7 +69,7 @@ Below are some good ways to get started in the Reflex community.
  - **Join our Discourse**: Our [forum](https://forum.reflex.dev/) is 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)
 
 ## License
 

blog/2024-09-21-reflex-v060.md

@@ -118,7 +118,7 @@ The application state is reset when you stop a 'reflex run' and start it again.
 
 Since moving our core components to Radix we have now moved Chakra into it's own 3rd party pip package.
 This means that we no longer bundle Chakra with Reflex.
-Instead you can install it seperately.
+Instead you can install it separately.
 
 ```bash
 pip install reflex-chakra

blog/2024-09-25-using-ag-grid-in-reflex.md

@@ -56,7 +56,7 @@ Check out the [open source repo](https://github.com/reflex-dev/reflex-ag-grid) a
 ## What is AG Grid?
 
 [AG Grid](https://www.ag-grid.com) is a feature-rich data grid library designed for displaying and manipulating tabular data in web applications.
-With over a million monthly downloads, and 90% of the Fortune 500 comapnies using it, it's a leading solution for working with tabular data.
+With over a million monthly downloads, and 90% of the Fortune 500 companies using it, it's a leading solution for working with tabular data.
 AG Grid offers a wide array of functionalities including:
 
 - In-place cell editing

blog/2024-11-19-microsoft-azure-authentication.md

@@ -52,7 +52,7 @@ The Microsoft Authentication Library (MSAL) for Python library enables you to si
 
 The values you should get from your Azure portal / SSO team at your company are `client_id`, `client_secret`, and `tenant_id`. These values are unique to your application and company.
 
-It is recommended to retrive these values from environment variables or from a configuration file (they are just hardcoded for the example for simplicity).
+It is recommended to retrieve these values from environment variables or from a configuration file (they are just hardcoded for the example for simplicity).
 
 Next we have to set the `sso_app` variable, which is the client application that will be used to authenticate users.
 

case-studies/ansa.md

@@ -104,7 +104,7 @@ In addition, there were particular technologies like LLMs and Vector Databases t
 ```md quote
 - name: Ryan
 - role: Investor and Head of Data
-I started to feel that with this framework I didn’t know if they could keep up with the pace of new developments with LLMs. They abstract a lot of the backend, so it's difficult to install third party libaries and you don't have full control over the database. For example some of the newer stuff we do with vector databases, embeddings models, or LLMs would be harder to do with this framework as we'd have to move off their native database.
+I started to feel that with this framework I didn’t know if they could keep up with the pace of new developments with LLMs. They abstract a lot of the backend, so it's difficult to install third party libraries and you don't have full control over the database. For example some of the newer stuff we do with vector databases, embeddings models, or LLMs would be harder to do with this framework as we'd have to move off their native database.
 ```
 
 

docs/api-reference/event_triggers.md

@@ -38,7 +38,7 @@ SYNTHETIC_EVENTS = [
     },
     {
         "name": "on_change",
-        "description": "The on_change event handler is called when the value of an element has changed. For example, it’s called when the user types into a text input each keystoke triggers the on change.",
+        "description": "The on_change event handler is called when the value of an element has changed. For example, it’s called when the user types into a text input each keystroke triggers the on change.",
         "state": """class ChangeState(rx.State):
     checked: bool = False
 

docs/api-routes/overview.md

@@ -22,7 +22,7 @@ This is useful for creating a backend API that can be used for purposes other th
 
 ## Reserved Routes
 
-Some routes on the backend are reserved for the runtime of Reflex, and should not be overriden unless you know what you are doing.
+Some routes on the backend are reserved for the runtime of Reflex, and should not be overridden unless you know what you are doing.
 
 ## Ping
 

docs/assets/upload_and_download_files.md

@@ -6,7 +6,7 @@ from pcweb.pages.docs import api_reference
 
 # Files
 
-In addition to any assets you ship with your app, many web app will often need to receive or send files, whether you want to share medias, allow user to import their data, or export some backend data.
+In addition to any assets you ship with your app, many web app will often need to receive or send files, whether you want to share media, allow user to import their data, or export some backend data.
 
 In this section, we will cover all you need to know for manipulating files in Reflex.
 

docs/components/rendering_iterables.md

@@ -53,7 +53,7 @@ The first argument of the `rx.foreach` function is the state var that you want t
 ## For vs Foreach
 
 ```md definition
-# Regualar For Loop
+# Regular For Loop
 * Use when iterating over constants.
 
 # Foreach

docs/getting_started/dashboard_tutorial.md

@@ -715,7 +715,7 @@ Next let's add a form to the app so we can add new users to the table.
 
 ## Using a Form to Add Data 
 
-We build a form using `rx.form`, whick takes several components such as `rx.input` and `rx.select`, which represent the form fields that allow you to add information to submit with the form. Check out the [form]({docs.library.forms.form.path}) docs for more information on form components.
+We build a form using `rx.form`, which takes several components such as `rx.input` and `rx.select`, which represent the form fields that allow you to add information to submit with the form. Check out the [form]({docs.library.forms.form.path}) docs for more information on form components.
 
 The `rx.input` component takes in several props. The `placeholder` prop is the text that is displayed in the input field when it is empty. The `name` prop is the name of the input field, which gets passed through in the dictionary when the form is submitted. The `required` prop is a boolean that determines if the input field is required.
 
@@ -1552,7 +1552,7 @@ One thing you may have noticed about your app is that the graph does not appear
 
 At the beginning of this tutorial we mentioned that the `app.add_page` function is required for every Reflex app. This function is used to add a component to a page. 
 
-The `app.add_page` currently looks like this `app.add_page(index)`. We could change the route that the page renders on by setting the `route` prop such as `route="/custom-route"`, thos would change the route to `http://localhost:3000/custom-route` for this page.
+The `app.add_page` currently looks like this `app.add_page(index)`. We could change the route that the page renders on by setting the `route` prop such as `route="/custom-route"`, this would change the route to `http://localhost:3000/custom-route` for this page.
 
 We can also set a `title` to be shown in the browser tab and a `description` as shown in search results. 
 

docs/hosting/deploy-quick-start.md

@@ -56,7 +56,7 @@ In your project directory (where you would normally run `reflex run`) paste this
 The command is by default interactive. It asks you a few questions for information required for the deployment.
 
 
-1. The first question will compare your `requirements.txt` to your python environment and if they are different then it will ask you if you want to update your `requirements.txt` or to continue with the current one. If they are identical this queston will not appear. To create a `requirements.txt` file, run `pip freeze > requirements.txt`.
+1. The first question will compare your `requirements.txt` to your python environment and if they are different then it will ask you if you want to update your `requirements.txt` or to continue with the current one. If they are identical this question will not appear. To create a `requirements.txt` file, run `pip freeze > requirements.txt`.
 2. The second question will search for a deployed app with the name of your current app, if it does not find one then it will ask if you wish to proceed in deploying your new app.
 3. The third question is optional and will ask you for an app description.
 

docs/library/data-display/moment.md

@@ -76,7 +76,7 @@ rx.moment(MomentState.date_now, format="HH:mm:ss")
 
 ### Offset Date
 
-With the props `add` and `substract`, you can pass an `rx.MomentDelta` object to modify the displayed date without affecting the stored date in your state.
+With the props `add` and `subtract`, you can pass an `rx.MomentDelta` object to modify the displayed date without affecting the stored date in your state.
 
 ```python exec
 add_example = """rx.vstack(
@@ -111,10 +111,10 @@ subtract_example = """rx.vstack(
 rx.tabs(
     rx.tabs.list(
         rx.tabs.trigger("Add", value="add"), 
-        rx.tabs.trigger("Substract", value="substract")
+        rx.tabs.trigger("Subtract", value="subtract")
     ),
     rx.tabs.content(docdemo(add_example, comp=eval(add_example)), value="add"),
-    rx.tabs.content(docdemo(subtract_example, comp=eval(subtract_example)), value="substract"),
+    rx.tabs.content(docdemo(subtract_example, comp=eval(subtract_example)), value="subtract"),
     default_value="add",
 )
 ```

docs/library/disclosure/accordion.md

@@ -142,7 +142,7 @@ rx.accordion.root(
 ### Orientation
 
 We use `orientation` prop to set the orientation of the accordion to `vertical` or `horizontal`. By default, the orientation
-will be set to `vertical`. Note that, the orientation prop wont change the visual orientation but the
+will be set to `vertical`. Note that, the orientation prop won't change the visual orientation but the
 functional orientation of the accordion. This means that for vertical orientation, the up and down arrow keys moves focus between the next or previous item,
 while for horizontal orientation, the left or right arrow keys moves focus between items.
 

docs/library/dynamic-rendering/match.md

@@ -36,7 +36,7 @@ rx.match(
 
 - `condition`: The value to match against.
 - `(case_i, component_i)`: A Tuple of matching cases and their corresponding return components.
-- `default_component`: A special case for the default component when the condition isnt matched by any of the match cases.
+- `default_component`: A special case for the default component when the condition isn't matched by any of the match cases.
 
 Example
 

docs/library/graphing/charts/barchart.md

@@ -151,7 +151,7 @@ def bar_double():
 
 ## Ranged Charts
 
-You can also assign a range in the bar by assiging the data_key in the `rx.recharts.bar` to a list with two elements, i.e. here a range of two temperatures for each date.
+You can also assign a range in the bar by assigning the data_key in the `rx.recharts.bar` to a list with two elements, i.e. here a range of two temperatures for each date.
 
 ```python demo graphing
 range_data = [

docs/library/graphing/charts/radialbarchart.md

@@ -83,7 +83,7 @@ data_radial_bar = [
         "fill": "#d0ed57"
     },
     {
-        "name": "unknow",
+        "name": "unknown",
         "uv": 6.67,
         "pv": 4800,
         "fill": "#ffc658"

docs/library/media/image.md

@@ -17,7 +17,7 @@ This could either be a local path from the assets folder or an external link.
 rx.image(src="/logo.jpg", width="100px", height="auto")
 ```
 
-Image composes a box and can be styled simlarly.
+Image composes a box and can be styled similarly.
 
 ```python demo
 rx.image(
@@ -53,7 +53,7 @@ def image_pil_example():
 
 ```md alert info
 # rx.image only accepts URLs and Pillow Images
-A cv2 image must be covnerted to a PIL image to be passed directly to `rx.image` as a State variable, or saved to the `assets` folder and then passed to the `rx.image` component.
+A cv2 image must be converted to a PIL image to be passed directly to `rx.image` as a State variable, or saved to the `assets` folder and then passed to the `rx.image` component.
 ```
 
 ```md alert info

docs/library/overlay/alert_dialog.md

@@ -243,7 +243,7 @@ This example shows how to control whether the dialog is open or not with state.
 
 `rx.alert_dialog.root` has a prop `open` that can be set to a boolean value to control whether the dialog is open or not.
 
-We toggle this `open` prop with a button oustide of the dialog and the `rx.alert_dialog.cancel` and `rx.alert_dialog.action` buttons inside the dialog.
+We toggle this `open` prop with a button outside of the dialog and the `rx.alert_dialog.cancel` and `rx.alert_dialog.action` buttons inside the dialog.
 
 ```python demo exec
 class AlertDialogState2(rx.State):

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

@@ -235,7 +235,7 @@ class Person:
 
 In this example we sort and filter the data.
 
-The state variable `_people` is set to be a [backend-only variable]({vars.base_vars.path}). This is done incase the variable is very large in order to reduce network traffic and improve performance.
+The state variable `_people` is set to be a [backend-only variable]({vars.base_vars.path}). This is done in case the variable is very large in order to reduce network traffic and improve performance.
 
 For sorting the `rx.select` component is used. The data is sorted based on the attributes of the `Person` class. When a `select` item is selected, as the `on_change` event trigger is hooked up to the `set_sort_value` event handler, the data is sorted based on the state variable `sort_value` attribute selected. (Every base var has a [built-in event handler to set]({events.setters.path}) it's value for convenience, called `set_VARNAME`.)
 

docs/pages/dynamic_routing.md

@@ -12,7 +12,7 @@ and optional catch-all routes, each with detailed examples.
 
 ## Regular Dynamic Routes
 
-Regular dynamic routes in Reflex allow you to match specific segments in a URL dynamically. A regular dynamic route is defined by sqaure brackets in a route string / url pattern. For example `/users/[id]` or `/products/[category]`. These dynamic route arguments can be accesed through a state var. For the examples above they would be `rx.State.id` and `rx.State.category` respectively. 
+Regular dynamic routes in Reflex allow you to match specific segments in a URL dynamically. A regular dynamic route is defined by square brackets in a route string / url pattern. For example `/users/[id]` or `/products/[category]`. These dynamic route arguments can be accessed through a state var. For the examples above they would be `rx.State.id` and `rx.State.category` respectively. 
 
 ```md alert info
 # Why is the state var accessed as `rx.State.id`?

docs/styling/overview.md

@@ -104,7 +104,7 @@ rx.box(
 
 ### Style Prop
 
-Inline styles can also be set with a `style` prop. This is useful for reusing styles betweeen multiple components.
+Inline styles can also be set with a `style` prop. This is useful for reusing styles between multiple components.
 
 ```python exec
 text_style = {

docs/styling/theming.md

@@ -83,7 +83,7 @@ Additionally you can modify the theme of your app through using the `Theme Panel
 
 On a high-level, component `color_scheme` inherits from the color specified in the theme. This means that if you change the theme, the color of the component will also change. Available colors can be found [here](https://www.radix-ui.com/colors).
 
-You can also specifiy the `color_scheme` prop.
+You can also specify the `color_scheme` prop.
 
 ```python demo
 rx.flex(

docs/vars/var-operations.md

@@ -397,7 +397,7 @@ def get_item_error_1():
     )
 ```
 
-In the code above you would expect to index into the first index of the list_1 state var. In fact the code above throws the error: `Invalid var passed for prop value, expected type <class 'int'>, got value of type typing.Any.` This is because the type of the items inside the list have not been clearly defined in the state. To fix this you change the list_1 defintion to `list_1: list[int] = [50, 10, 20]`
+In the code above you would expect to index into the first index of the list_1 state var. In fact the code above throws the error: `Invalid var passed for prop value, expected type <class 'int'>, got value of type typing.Any.` This is because the type of the items inside the list have not been clearly defined in the state. To fix this you change the list_1 definition to `list_1: list[int] = [50, 10, 20]`
 
 ```python demo exec
 class GetItemState1(rx.State):

docs/wrapping-react/example.md

@@ -9,7 +9,7 @@ In this more complex example we will be wrapping `reactflow` a library for build
 
 ## Import
 
-Lets start by importing the library [reactflow](https://www.npmjs.com/package/reactflow). Lets make a seperate file called `reactflow.py` and add the following code:
+Lets start by importing the library [reactflow](https://www.npmjs.com/package/reactflow). Lets make a separate file called `reactflow.py` and add the following code:
 
 ```python
 import refex as rx

docs/wrapping-react/guide.md

@@ -308,7 +308,7 @@ class AnotherColorPicker(rx.Component):
 
 ## Custom Code
 
-Sometimes you may need to add custom code to your component, such as definining constants and functions used. Custom code will be inserted _outside_ of the react component function.
+Sometimes you may need to add custom code to your component, such as defining constants and functions used. Custom code will be inserted _outside_ of the react component function.
 
 ```javascript
 import React from "react";

docs/wrapping-react/more-wrapping-examples.md

@@ -17,7 +17,7 @@ When we see `useState` in React code, it correlates to state variables in your S
 
 Moving to line `26` we see that the `AgCharts` has a prop `options`. In order to use this in Reflex we must wrap this prop. We do this with `options: rx.Var[dict]` in the `AgCharts` component. 
 
-Lines `31` and `32` are rendering the component inside the root element. This can be ingored when we are wrapping a component as it is done in Reflex by creating an `index` function and adding it to the app.
+Lines `31` and `32` are rendering the component inside the root element. This can be ignored when we are wrapping a component as it is done in Reflex by creating an `index` function and adding it to the app.
 
 
 ---md tabs

errors.md

@@ -159,7 +159,7 @@ error_message(
     error_code="TypeError: Invalid var passed for prop href, expected type <class 'str'>, got value {state.my_list.at(i)} of type typing.Any.",
     solution=[
                 h4_comp_error(text="Add a type annotation for list Vars"),
-                rx.text("For certain props, reflex validates type correctness of the variable. Expecially when de-referencing lists and dicts, it is important to supply the correct annotation."),
+                rx.text("For certain props, reflex validates type correctness of the variable. Especially when de-referencing lists and dicts, it is important to supply the correct annotation."),
                 code_block_error(code=
 """class State(rx.State):
     # NO

pcweb/components/docpage/navbar/navbar.py

@@ -60,7 +60,7 @@ def resource_item(text: str, url: str, icon: str):
 
 
 def link_item(name: str, url: str, active_str: str = ""):
-    # If URL doesnt end with a slash, add one
+    # If URL doesn't end with a slash, add one
     router_path = rx.State.router.page.path
     url = url.rstrip("/") + "/"
     active = router_path.contains(active_str)

pcweb/components/docpage/sidebar/state.py

@@ -1,6 +1,5 @@
 """The state of the sidebar component."""
 
-
 from __future__ import annotations
 
 import reflex as rx
@@ -21,17 +20,19 @@ class SideBarBase(Base):
     # The children items.
     children: list[SideBarItem] = []
 
-    # Whether the item is a category. Occurs if a single item is at the top level of the sidebar for asthetics.
+    # Whether the item is a category. Occurs if a single item is at the top level of the sidebar for aesthetics.
     outer = False
 
 
 class SideBarItem(SideBarBase):
     """A single item in the sidebar."""
+
     ...
 
 
 class SideBarSection(SideBarBase):
     """A section in the sidebar."""
+
     ...
 
 
@@ -49,4 +50,4 @@ def sidebar_index(self) -> int:
                 return 1
             else:
                 return 0
-        return self._sidebar_index
+        return self._sidebar_index