From 02ee94ce821d10e8d9b5d145c9a84f60bf5227aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thomas=20Brand=C3=A9ho?= Date: Sun, 5 Jan 2025 15:02:33 -0800 Subject: [PATCH] fix spelling errors (#1158) --- .codespellrc | 3 ++ .github/workflows/codespell.yml | 15 +++++++++ README.md | 2 +- blog/2024-09-21-reflex-v060.md | 2 +- blog/2024-09-25-using-ag-grid-in-reflex.md | 2 +- ...24-11-19-microsoft-azure-authentication.md | 2 +- case-studies/ansa.md | 2 +- docs/api-reference/event_triggers.md | 2 +- docs/api-routes/overview.md | 2 +- docs/assets/upload_and_download_files.md | 2 +- docs/components/rendering_iterables.md | 2 +- docs/getting_started/dashboard_tutorial.md | 4 +-- docs/hosting/deploy-quick-start.md | 2 +- docs/library/data-display/moment.md | 6 ++-- docs/library/disclosure/accordion.md | 2 +- docs/library/dynamic-rendering/match.md | 2 +- docs/library/graphing/charts/barchart.md | 2 +- .../library/graphing/charts/radialbarchart.md | 2 +- docs/library/media/image.md | 4 +-- docs/library/overlay/alert_dialog.md | 2 +- docs/library/tables-and-data-grids/table.md | 2 +- docs/pages/dynamic_routing.md | 2 +- docs/styling/overview.md | 2 +- docs/styling/theming.md | 2 +- docs/vars/var-operations.md | 2 +- docs/wrapping-react/example.md | 2 +- docs/wrapping-react/guide.md | 2 +- docs/wrapping-react/more-wrapping-examples.md | 2 +- errors.md | 2 +- pcweb/components/docpage/navbar/navbar.py | 2 +- pcweb/components/docpage/sidebar/state.py | 7 ++-- pcweb/pages/changelog.py | 3 +- pcweb/pages/docs/component.py | 30 +++++++++-------- pcweb/pages/docs/source.py | 32 ++++++++++--------- pcweb/pages/faq.py | 2 +- templates/customer-app.md | 2 +- 36 files changed, 92 insertions(+), 66 deletions(-) create mode 100644 .codespellrc create mode 100644 .github/workflows/codespell.yml diff --git a/.codespellrc b/.codespellrc new file mode 100644 index 0000000000..03230466e6 --- /dev/null +++ b/.codespellrc @@ -0,0 +1,3 @@ +[codespell] +skip = *.csv, *.json +ignore-words-list = selectin \ No newline at end of file diff --git a/.github/workflows/codespell.yml b/.github/workflows/codespell.yml new file mode 100644 index 0000000000..97728373e9 --- /dev/null +++ b/.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 \ No newline at end of file diff --git a/README.md b/README.md index 35bfb0b125..a99c6ef639 100644 --- a/README.md +++ b/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 diff --git a/blog/2024-09-21-reflex-v060.md b/blog/2024-09-21-reflex-v060.md index 5a91d638de..326d9c4c07 100644 --- a/blog/2024-09-21-reflex-v060.md +++ b/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 diff --git a/blog/2024-09-25-using-ag-grid-in-reflex.md b/blog/2024-09-25-using-ag-grid-in-reflex.md index c1d07564ff..21b395be8f 100644 --- a/blog/2024-09-25-using-ag-grid-in-reflex.md +++ b/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 diff --git a/blog/2024-11-19-microsoft-azure-authentication.md b/blog/2024-11-19-microsoft-azure-authentication.md index 56682cee52..d32a72bce7 100644 --- a/blog/2024-11-19-microsoft-azure-authentication.md +++ b/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. diff --git a/case-studies/ansa.md b/case-studies/ansa.md index 3c8fb4d5de..fd2f70e536 100644 --- a/case-studies/ansa.md +++ b/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. ``` diff --git a/docs/api-reference/event_triggers.md b/docs/api-reference/event_triggers.md index e59864d1ce..3f49d13a05 100644 --- a/docs/api-reference/event_triggers.md +++ b/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 diff --git a/docs/api-routes/overview.md b/docs/api-routes/overview.md index 24834ea9c9..0e0c80b748 100644 --- a/docs/api-routes/overview.md +++ b/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 diff --git a/docs/assets/upload_and_download_files.md b/docs/assets/upload_and_download_files.md index 777fc3ea71..92d0ab3001 100644 --- a/docs/assets/upload_and_download_files.md +++ b/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. diff --git a/docs/components/rendering_iterables.md b/docs/components/rendering_iterables.md index 6130a83cf5..58ae87c108 100644 --- a/docs/components/rendering_iterables.md +++ b/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 diff --git a/docs/getting_started/dashboard_tutorial.md b/docs/getting_started/dashboard_tutorial.md index 035944329c..4d00a60649 100644 --- a/docs/getting_started/dashboard_tutorial.md +++ b/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. diff --git a/docs/hosting/deploy-quick-start.md b/docs/hosting/deploy-quick-start.md index baa0baae36..d8aa47bef3 100644 --- a/docs/hosting/deploy-quick-start.md +++ b/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. diff --git a/docs/library/data-display/moment.md b/docs/library/data-display/moment.md index 8a1963e514..b8b46076c6 100644 --- a/docs/library/data-display/moment.md +++ b/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", ) ``` diff --git a/docs/library/disclosure/accordion.md b/docs/library/disclosure/accordion.md index fe6e0b2b11..4a2a9eda9b 100644 --- a/docs/library/disclosure/accordion.md +++ b/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. diff --git a/docs/library/dynamic-rendering/match.md b/docs/library/dynamic-rendering/match.md index 9b510506d7..2336c6ce3e 100644 --- a/docs/library/dynamic-rendering/match.md +++ b/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 diff --git a/docs/library/graphing/charts/barchart.md b/docs/library/graphing/charts/barchart.md index 8d11f3f1f2..dd5de4efa3 100644 --- a/docs/library/graphing/charts/barchart.md +++ b/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 = [ diff --git a/docs/library/graphing/charts/radialbarchart.md b/docs/library/graphing/charts/radialbarchart.md index 1a6e02d571..136105967d 100644 --- a/docs/library/graphing/charts/radialbarchart.md +++ b/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" diff --git a/docs/library/media/image.md b/docs/library/media/image.md index 611c4534c7..d11c50c290 100644 --- a/docs/library/media/image.md +++ b/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 diff --git a/docs/library/overlay/alert_dialog.md b/docs/library/overlay/alert_dialog.md index 00470bda64..6316a6ee74 100644 --- a/docs/library/overlay/alert_dialog.md +++ b/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): diff --git a/docs/library/tables-and-data-grids/table.md b/docs/library/tables-and-data-grids/table.md index 19bf86adf0..02efb62a52 100644 --- a/docs/library/tables-and-data-grids/table.md +++ b/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`.) diff --git a/docs/pages/dynamic_routing.md b/docs/pages/dynamic_routing.md index 6a3629e6b5..8472ae91a0 100644 --- a/docs/pages/dynamic_routing.md +++ b/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`? diff --git a/docs/styling/overview.md b/docs/styling/overview.md index 03de843f48..3961a83023 100644 --- a/docs/styling/overview.md +++ b/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 = { diff --git a/docs/styling/theming.md b/docs/styling/theming.md index c6226fac43..069f3f7e50 100644 --- a/docs/styling/theming.md +++ b/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( diff --git a/docs/vars/var-operations.md b/docs/vars/var-operations.md index 6ca7a40792..d7b219f358 100644 --- a/docs/vars/var-operations.md +++ b/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 , 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 , 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): diff --git a/docs/wrapping-react/example.md b/docs/wrapping-react/example.md index 1279fab4b6..fc69adc2c7 100644 --- a/docs/wrapping-react/example.md +++ b/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 diff --git a/docs/wrapping-react/guide.md b/docs/wrapping-react/guide.md index ddacb46f68..6083b9e137 100644 --- a/docs/wrapping-react/guide.md +++ b/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"; diff --git a/docs/wrapping-react/more-wrapping-examples.md b/docs/wrapping-react/more-wrapping-examples.md index 55a623d05d..3dd3c5a5df 100644 --- a/docs/wrapping-react/more-wrapping-examples.md +++ b/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 diff --git a/errors.md b/errors.md index d65f3621c9..d22ab9c9bb 100644 --- a/errors.md +++ b/errors.md @@ -159,7 +159,7 @@ error_message( error_code="TypeError: Invalid var passed for prop href, expected type , 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 diff --git a/pcweb/components/docpage/navbar/navbar.py b/pcweb/components/docpage/navbar/navbar.py index 02894540ee..b0cb17c29d 100644 --- a/pcweb/components/docpage/navbar/navbar.py +++ b/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) diff --git a/pcweb/components/docpage/sidebar/state.py b/pcweb/components/docpage/sidebar/state.py index 95e0cf3296..534cbf88d1 100644 --- a/pcweb/components/docpage/sidebar/state.py +++ b/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 \ No newline at end of file + return self._sidebar_index diff --git a/pcweb/pages/changelog.py b/pcweb/pages/changelog.py index 83bb11361e..3342d71c07 100644 --- a/pcweb/pages/changelog.py +++ b/pcweb/pages/changelog.py @@ -5,6 +5,7 @@ from pcweb.components.webpage.comps import h1_title from pcweb.flexdown import markdown_with_shiki + def change( date: str, version: str, description: str, points: list[str], link: str ) -> rx.Component: @@ -362,7 +363,7 @@ def changelog_content(): change( "2024-02-26", "v0.4.2", - "Syncronize local storage between tabs", + "Synchronize local storage between tabs", [ "Tuple type annotations are now respected index-wise", "Substates are serialized individually", diff --git a/pcweb/pages/docs/component.py b/pcweb/pages/docs/component.py index e9f378482f..fcab20edc1 100644 --- a/pcweb/pages/docs/component.py +++ b/pcweb/pages/docs/component.py @@ -151,7 +151,11 @@ def get_props(self) -> list[Prop]: if parent_cls != rx.Component and parent_cls != BaseHTML: parent_props = Source(component=parent_cls).get_props() # filter out the props that have been overridden in the parent class. - props += [prop for prop in parent_props if prop.name not in {p.name for p in props}] + props += [ + prop + for prop in parent_props + if prop.name not in {p.name for p in props} + ] return props @@ -579,7 +583,9 @@ def prop_docs( style=get_code_style( "red" if default_value == "False" - else "green" if default_value == "True" else "gray" + else "green" + if default_value == "True" + else "gray" ), class_name="code-style leading-normal text-nowrap", ), @@ -604,7 +610,7 @@ def prop_docs( "description": "Function or event handler called when focus has left the element (or left some element inside of it). For example, it is called when the user clicks outside of a focused text input." }, "on_change": { - "description": "Function or event handler called when the value of an element has changed. For example, it is called when the user types into a text input each keystoke triggers the on change." + "description": "Function or event handler called when the value of an element has changed. For example, it is called when the user types into a text input each keystroke triggers the on change." }, "on_click": { "description": "Function or event handler called when the user clicks on an element. For example, it’s called when the user clicks on a button." @@ -810,15 +816,11 @@ def prop_docs( "is_server_side_group": { "description": "The is_server_side_group event handler is called when the group is server-side." }, - "get_server_side_group_key": { - "description": "Get the server side group key." - }, + "get_server_side_group_key": {"description": "Get the server side group key."}, "is_server_side_group_open_by_default": { "description": "Event handler to check if the server-side group is open by default." }, - "get_child_count": { - "description": "Event handler to get the child count." - }, + "get_child_count": {"description": "Event handler to get the child count."}, "on_selection_changed": { "description": "The on_selection_changed event handler is called when the selection changes." }, @@ -833,8 +835,7 @@ def prop_docs( }, "is_server_side_group": { "description": "The is_server_side_group event handler is called to check if the group is server-side." - } - + }, } @@ -899,7 +900,9 @@ def generate_props(src, component, comp): print(f"Failed to create component {component.__name__}, error: {e}") comp = rx.fragment() - interactive_component = docdemobox(comp) if not isinstance(comp, Fragment) else "", + interactive_component = ( + docdemobox(comp) if not isinstance(comp, Fragment) else "", + ) return rx.vstack( interactive_component, rx.scroll_area( @@ -1087,6 +1090,7 @@ def multi_docs(path, comp, component_list, title): active_class_name = "font-small bg-slate-2 p-2 text-slate-11 rounded-xl shadow-large w-28 cursor-default border border-slate-4 text-center" non_active_class_name = "font-small w-28 transition-color hover:text-slate-11 text-slate-9 p-2 text-center" + def links(current_page, ll_doc_exists, path): path = str(path).rstrip("/") if ll_doc_exists: @@ -1102,7 +1106,7 @@ def links(current_page, ll_doc_exists, path): rx.box( rx.text("Low Level"), class_name=non_active_class_name ), - href=path+ "/low", + href=path + "/low", underline="none", ), class_name="bg-slate-3 rounded-[1.125rem] p-2 gap-2 flex items-center justify-center", diff --git a/pcweb/pages/docs/source.py b/pcweb/pages/docs/source.py index 390da18c24..b024c24623 100644 --- a/pcweb/pages/docs/source.py +++ b/pcweb/pages/docs/source.py @@ -175,24 +175,26 @@ def format_field(field): type_str = type_.__name__ if hasattr(type_, "__name__") else str(type_) if default: type_str += f" = {default}" - return rx.code( - field["prop"].name, - ": ", - type_str, - class_name="code-style" - ) + return rx.code(field["prop"].name, ": ", type_str, class_name="code-style") + table_header_class_name = ( "font-small text-slate-12 text-normal w-auto justify-start pl-4 font-bold" ) + def format_fields(headers, fields): return ( rx.scroll_area( rx.table.root( rx.table.header( rx.table.row( - *[rx.table.column_header_cell(header, class_name=table_header_class_name) for header in headers] + *[ + rx.table.column_header_cell( + header, class_name=table_header_class_name + ) + for header in headers + ] ) ), rx.table.body( @@ -201,7 +203,10 @@ def format_fields(headers, fields): rx.table.cell( format_field(field), ), - rx.table.cell(markdown(field["description"]), class_name="font-small text-slate-11"), + rx.table.cell( + markdown(field["description"]), + class_name="font-small text-slate-11", + ), ) for field in fields ], @@ -217,17 +222,14 @@ def generate_docs(title: str, s: Source): class_fields = s.get_class_fields() return rx.box( h1_comp(text=title.title()), - rx.code( - s.get_name(), - class_name="code-style text-[18px]" - ), + rx.code(s.get_name(), class_name="code-style text-[18px]"), rx.divider(), markdown(s.get_overview()), ( rx.box( h2_comp(text="Class Fields"), format_fields(["Prop", "Description"], class_fields), - oveflow="auto", + overflow="auto", ) if class_fields else rx.fragment() @@ -257,14 +259,14 @@ def generate_docs(title: str, s: Source): rx.table.cell( rx.code( field["name"] + field["signature"], - class_name="code-style" + class_name="code-style", ), white_space="normal", ), rx.table.cell( field["description"], white_space="normal", - class_name="font-small text-slate-11 text-nowrap" + class_name="font-small text-slate-11 text-nowrap", ), ) for field in s.get_methods() diff --git a/pcweb/pages/faq.py b/pcweb/pages/faq.py index a031cf04ff..c52b99b510 100644 --- a/pcweb/pages/faq.py +++ b/pcweb/pages/faq.py @@ -30,7 +30,7 @@ ), }, { - "Q": "Whats the status on hosting?", + "Q": "What's the status on hosting?", "A": rx.text( "Our hosting service is in alpha! See more details in our ", doclink("deployment guide", href=hosting.deploy_quick_start.path), diff --git a/templates/customer-app.md b/templates/customer-app.md index 9fc3781fc7..299e6cc8cc 100644 --- a/templates/customer-app.md +++ b/templates/customer-app.md @@ -31,7 +31,7 @@ reflex run ## Setting an external Database -It is also possibe to set an external database so that your data is not lost every time the app closes and so you can deploy your app and maintain data. +It is also possible to set an external database so that your data is not lost every time the app closes and so you can deploy your app and maintain data. In the `rxconfig.py` file we accept a `DATABASE_URL` environment variable.