format all templates with similar rules as main project (#51)

* format all templates with similar rules as main project

* add pre-commit with ruff and codespell

* run without uv for now

---------

Co-authored-by: Masen Furer <m_github@0x26.net>

.codespellrc

@@ -0,0 +1,4 @@
+[codespell]
+skip = *.csv
+ignore-words-list = 
+    chanel

.deploy/temporary_db.py

@@ -1,6 +1,5 @@
-
-
 # reflex-dev/templates:.deploy/temporary_db.py to create default reflex.db when deployed
 import reflex as rx
+
 rx.utils.prerequisites.check_db_initialized() or rx.Model.alembic_init()
 rx.Model.migrate(autogenerate=True)

.github/workflows/pre-commit.yml

@@ -0,0 +1,19 @@
+name: pre-commit
+
+on:
+  pull_request:
+    branches: ['main']
+
+jobs:
+  pre-commit:
+    timeout-minutes: 30
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-python@v4
+        with:
+          python-version: '3.12'
+
+      - run: |
+          pip install pre-commit
+          pre-commit run --all-files

.pre-commit-config.yaml

@@ -0,0 +1,16 @@
+fail_fast: true
+
+repos:
+  - repo: /~https://github.com/charliermarsh/ruff-pre-commit
+    rev: v0.8.5
+    hooks:
+      - id: ruff-format
+        args: ["."]
+      - id: ruff
+        args: ["--fix", "--exit-non-zero-on-fix"]
+
+  - repo: /~https://github.com/codespell-project/codespell
+    rev: v2.3.0
+    hooks:
+      - id: codespell
+        args: ["."]

ai_image_gen/ai_image_gen/ai_image_gen.py

@@ -1,4 +1,5 @@
 import reflex as rx
+
 from . import styles
 
 # Import all the pages.

ai_image_gen/ai_image_gen/backend/generation.py

@@ -1,11 +1,13 @@
+import asyncio
+import datetime
+import os
+from enum import Enum
+
 import reflex as rx
 import replicate
-from enum import Enum
 import requests
-import datetime
-import os
+
 from .options import OptionsState
-import asyncio
 
 DEFAULT_IMAGE = "/default.webp"
 API_TOKEN_ENV_VAR = "REPLICATE_API_TOKEN"

ai_image_gen/ai_image_gen/backend/options.py

@@ -1,5 +1,7 @@
-import reflex as rx
 import random
+
+import reflex as rx
+
 from ..components.prompt_list import prompt_list
 from ..components.styles_preset import styles_preset
 
@@ -87,4 +89,4 @@ def selected_style_prompt(self) -> str:
     @rx.var(cache=False)
     def dimensions_str(self) -> str:
         width, height = self.selected_dimensions
-        return f"{width} × {height}"
+        return f"{width} x {height}"

ai_image_gen/ai_image_gen/components/options_ui.py

@@ -1,7 +1,8 @@
 import reflex as rx
+
 from .. import styles
-from ..backend.options import OptionsState
 from ..backend.generation import GeneratorState
+from ..backend.options import OptionsState
 
 
 def sidebar_header() -> rx.Component:
@@ -280,7 +281,7 @@ def style_selector() -> rx.Component:
     return rx.vstack(
         rx.hstack(
             rx.icon("palette", size=17, color=rx.color("indigo", 9)),
-            rx.text(f"Style", size="3"),
+            rx.text("Style", size="3"),
             rx.spacer(),
             rx.cond(
                 OptionsState.selected_style,

ai_image_gen/ai_image_gen/components/prompt_list.py

@@ -7,10 +7,10 @@
     "a blue eye white dragon, yugioh card game art, battlefield background, bright art masterpiece artstation. 8 k, sharp high quality artwork in style of jose daniel cabrera pena and greg rutkowski, concept art by tooth wu, blizzard warcraft artwork, hearthstone card game artwork, yugioh artwork",
     "stylish cute wonderwoman  portrait hd sharp 3d model vray render with mix of kate beckinsale and scarlett johansson in Pixar squareenix GTA  game anime manga style trending on artstation pixiv skeb",
     "master chief from halo holding a sword, d & d, fantasy, portrait, highly detailed, headshot, digital painting, trending on artstation, concept art, sharp focus, illustration, art by artgerm and greg rutkowski and magali villeneuve",
-    "nenufar and koi carp, colorful, blue backgroung,clean, joyful, intricate, elegant, volumetric lighting, digital painting, highly detailed, artstation, sharp focus, illustration, concept art, ruan jia, steve mccurry",
+    "nenufar and koi carp, colorful, blue background,clean, joyful, intricate, elegant, volumetric lighting, digital painting, highly detailed, artstation, sharp focus, illustration, concept art, ruan jia, steve mccurry",
     "futuristic synthwave megaman X portrait, sci-fi steampunk, fantasy, intricate, elegant, highly detailed, digital painting, artstation, concept art, smooth, sharp focus, illustration, art by artgerm and greg rutkowski and alphonse mucha",
     "winston the ape from overwatch, square brim glasses, future armor, character portrait, portrait, close up, concept art, intricate details, highly detailed, vintage sci - fi poster, retro future, in the style of chris foss, rodger dean, moebius, michael whelan, and gustave dore",
-    "a ultradetailed beautiful concept art of a strange and discreet human, hiding his face with an intricate wooden mask of an owl, concept art, high resolution 4 k, by tom bagshaw, greg rutkowski, charli bowater and artgeem",
+    "a ultradetailed beautiful concept art of a strange and discrete human, hiding his face with an intricate wooden mask of an owl, concept art, high resolution 4 k, by tom bagshaw, greg rutkowski, charli bowater and artgeem",
     "an aztec warrior, fantasy, intricate, elegant, highly detailed, digital painting, artstation, concept art, smooth, sharp focus, illustration, edge highlights, beautiful light and shadows, art by krenz cushart and greg rutkowski and sachin teng and sergey kolesov and ruan jia and heng z",
     "Henry Cavill as a Greek god, gorgeous, amazing, muscular, fit, very muscular male body, intricate, highly detailed, digital painting, artstation, concept art, sharp focus, illustration, art by greg rutkowski and alphonse mucha",
     "a photorealistic dramatic fantasy render of a japanese tengu by wlop, artgerm, greg rutkowski, alphonse mucha, beautiful dynamic dramatic dark moody lighting, shadows, cinematic atmosphere, artstation, concept design art, octane render, 8 k",
@@ -56,16 +56,16 @@
     "portrait of armored knight as an animated pixar character smiling, male, medium shot, fantasy, helm, intricate, cinematic lighting, digital painting, artstation, concept art, smooth, sharp focus, art by artgerm and greg rutkowski and disney, detailed textures, award winning portrait studio lighting by jessica rossier and brian froud and gaston bussiere ",
     "brad pitt as bob ross, 8 k, trending on artstation",
     "An llustration of a studio of a painter studio, soft fall colors, gouache, animated film, illustration, soft colors, pixar, sharp focus, hyperdetailed, trending on artstation, 8k by anton fadeev",
-    "cursed zelda ruins landscape vista photography by Carr Clifton & Galen Rowell, 16K resolution, Landscape veduta photo by Dustin Lefevre, 8k resolution, detailed landscape painting by Ivan Shishkin, DeviantArt, Flickr, rendered in Enscape::8 –iw 10 –no blur, blurry, bokeh, dirty, eyes, face, figure, hair, human, man, noisy, oversharpened, paint flecks, people, person, scratches, skin, text, too dark, too sharp, unclear, underexposed, undeveloped, watermark, woman –w 768 –h 512 –hd –uplight",
+    "cursed zelda ruins landscape vista photography by Carr Clifton & Galen Rowell, 16K resolution, Landscape veduta photo by Dustin Lefevre, 8k resolution, detailed landscape painting by Ivan Shishkin, DeviantArt, Flickr, rendered in Enscape::8 -iw 10 -no blur, blurry, bokeh, dirty, eyes, face, figure, hair, human, man, noisy, oversharpened, paint flecks, people, person, scratches, skin, text, too dark, too sharp, unclear, underexposed, undeveloped, watermark, woman -w 768 -h 512 -hd -uplight",
     "A grand city in the year 2100, atmospheric, hyper realistic, 8k, epic composition, cinematic, octane render, artstation landscape vista photography by Carr Clifton & Galen Rowell, 16K resolution, Landscape veduta photo by Dustin Lefevre & tdraw, 8k resolution, detailed landscape painting by Ivan Shishkin, DeviantArt, Flickr, rendered in Enscape, Miyazaki, Nausicaa Ghibli, Breath of The Wild, 4k detailed post processing, artstation, rendering by octane, unreal engine —ar 16:9",
     "futuristic nighttime cyberpunk New York City skyline landscape vista photography by Carr Clifton & Galen Rowell, 16K resolution, Landscape veduta photo by Dustin Lefevre & tdraw, 8k resolution, detailed landscape painting by Ivan Shishkin, DeviantArt, Flickr, rendered in Enscape, Miyazaki, Nausicaa Ghibli, Breath of The Wild, 4k detailed post processing, atmospheric, hyper realistic, 8k, epic composition, cinematic, artstation —ar 16:9",
     "octane rendered character portrait of mitsurugi, 3 d, octane render, depth of field, unreal engine 5, concept art, vibrant colors, glow, trending on artstation, ultra high detail, ultra realistic, cinematic lighting, focused, 8 k",
     "clear portrait of a superhero concept between spiderman and batman, cottagecore!!, background hyper detailed, character concept, full body, dynamic pose, intricate, highly detailed, digital painting, artstation, concept art, smooth, sharp focus, illustration, art by artgerm and greg rutkowski and alphonse mucha",
     "a cute magical flying dog, fantasy art drawn by disney concept artists, golden colour, high quality, highly detailed, elegant, sharp focus, concept art, character concepts, digital painting, mystery, adventure",
     "a portrait of Hellboy by Greg Rutkowski, trending on artstation, framed art, concept art, fantasy art",
     "Portrait of nathalile Portman, dramatic lighting, illustration by greg rutkowski, yoji shinkawa, 4k, digital art, concept art, trending on artstation",
-    "Thor portrait photo of a asia old warrior chief, tribal panther make up, blue on red, side profile, looking away, serious eyes, 50mm portrait photography, hard rim lighting photography–beta –ar 2:3 –beta –upbeta –beta –upbeta –beta –upbeta",
-    "a fantasy island with large volumetric magical portal and a man standing Infront of it in the clouds and a sky background with a rainbow light, by Cyril Rolando, a castle painted by sana takeda, rtx reflections, very high intricate details, digital anime art, medium shot, mid - shot, composition by ilya kuvshinov, lighting by greg rutkowski",
+    "Thor portrait photo of a asia old warrior chief, tribal panther make up, blue on red, side profile, looking away, serious eyes, 50mm portrait photography, hard rim lighting photography-beta -ar 2:3 -beta -upbeta -beta -upbeta -beta -upbeta",
+    "a fantasy island with large volumetric magical portal and a man standing in front of it in the clouds and a sky background with a rainbow light, by Cyril Rolando, a castle painted by sana takeda, rtx reflections, very high intricate details, digital anime art, medium shot, mid - shot, composition by ilya kuvshinov, lighting by greg rutkowski",
     "a painting of a tree in the middle of a field, a detailed matte painting by Shin Yun-bok, a detailed matte painting by Andreas Rocha, concept art by Ismail Inceoglu,  featured on pixiv, plein air, official art, detailed painting, storybook illustration, trending on Artstation, fantasy art, 2d game art, matte painting, unreal engine 5",
     "ultra realistic photo portrait of Scarlett Leithold cosmic energy, colorful, painting burst, beautiful symmetrical face, nonchalant kind look, realistic round eyes, tone mapped, intricate, elegant, highly detailed, digital painting, artstation, concept art, smooth, sharp focus, illustration, dreamy magical atmosphere, art by artgerm and greg rutkowski and alphonse mucha, 4k, 8k",
     "Beautiful anime painting of solarpunk summer chill day, by tim okamura, victor nizovtsev, greg rutkowski, noah bradley. trending on artstation, 8k, masterpiece, graffiti paint, fine detail, full of color, intricate detail, golden ratio illustration",

ai_image_gen/ai_image_gen/components/react_zoom.py

@@ -3,7 +3,6 @@
 # Imported from /~https://github.com/picklelo/reflex-image-zoom
 
 import reflex as rx
-from reflex.utils import imports
 
 
 class ImageZoom(rx.Component):
@@ -19,13 +18,5 @@ class ImageZoom(rx.Component):
     # This is normally used when components don't have curly braces around them when importing.
     is_default = True
 
-    # def _get_imports(self) -> imports.ImportDict:
-    #     return imports.merge_imports(
-    #         super()._get_imports(),
-    #         {
-    #             "": {imports.ImportVar(tag="react-medium-image-zoom/dist/styles.css")},
-    #         },
-    #     )
-
 
 image_zoom = ImageZoom.create

ai_image_gen/ai_image_gen/pages/__init__.py

@@ -1 +1,3 @@
-from .index import index
+from .index import index
+
+__all__ = ["index"]

ai_image_gen/ai_image_gen/pages/index.py

@@ -1,12 +1,12 @@
 import reflex as rx
-from ..views.sidebar import sidebar
-from ..views.mobile_ui import mobile_ui
-from ..components.options_ui import mobile_header
-from ..backend.generation import GeneratorState, CopyLocalState, copy_script
 from reflex_img_comparison_slider import img_comparison_slider
-from ..components.react_zoom import image_zoom
-from typing import Union
+
 from .. import styles
+from ..backend.generation import CopyLocalState, GeneratorState, copy_script
+from ..components.options_ui import mobile_header
+from ..components.react_zoom import image_zoom
+from ..views.mobile_ui import mobile_ui
+from ..views.sidebar import sidebar
 
 
 def _image_ui() -> rx.Component:

ai_image_gen/ai_image_gen/styles.py

@@ -40,4 +40,4 @@
     rx.icon: {
         "stroke_width": "1.75px",
     },
-}
+}

ai_image_gen/ai_image_gen/views/mobile_ui.py

@@ -1,6 +1,14 @@
 import reflex as rx
+
 from .. import styles
-from ..components.options_ui import prompt_input, size_selector, output_selector, style_selector, advanced_options, generate_button
+from ..components.options_ui import (
+    advanced_options,
+    generate_button,
+    output_selector,
+    prompt_input,
+    size_selector,
+    style_selector,
+)
 
 
 def mobile_ui():

ai_image_gen/ai_image_gen/views/sidebar.py

@@ -1,13 +1,14 @@
 import reflex as rx
+
 from .. import styles
 from ..components.options_ui import (
-    sidebar_header,
+    advanced_options,
+    generate_button,
+    output_selector,
     prompt_input,
+    sidebar_header,
     size_selector,
-    output_selector,
     style_selector,
-    advanced_options,
-    generate_button,
 )
 
 

ai_image_gen/rxconfig.py

@@ -2,4 +2,4 @@
 
 config = rx.Config(
     app_name="ai_image_gen",
-)
+)

api_admin_panel/api_admin_panel/api_admin_panel.py

@@ -1,4 +1,5 @@
 import reflex as rx
+
 from api_admin_panel.pages import *
 
 

api_admin_panel/api_admin_panel/components/output.py

@@ -1,8 +1,8 @@
 import reflex as rx
+import reflex_chakra as rc
 
-from api_admin_panel.states.queries import QueryAPI
 from api_admin_panel.components.drawer import render_drawer
-import reflex_chakra as rc
+from api_admin_panel.states.queries import QueryAPI
 
 
 def create_table_header(title: str):

api_admin_panel/api_admin_panel/components/query.py

@@ -1,9 +1,9 @@
 import reflex as rx
+import reflex_chakra as rc
 
 from api_admin_panel.states.base import BaseState
-from api_admin_panel.states.queries import QueryState, QueryAPI
+from api_admin_panel.states.queries import QueryAPI, QueryState
 from api_admin_panel.styles import text
-import reflex_chakra as rc
 
 
 def item_title(title: str):
@@ -154,7 +154,6 @@ def form_request_item():
 
 def render_query_form():
     return rx.vstack(
-        # form_request_item(),
         form_item(
             "Headers", QueryState.headers, form_item_entry, QueryState.add_header
         ),

api_admin_panel/api_admin_panel/pages/__init__.py

@@ -1 +1,3 @@
 from .dashboard import dashboard
+
+__all__ = ["dashboard"]

api_admin_panel/api_admin_panel/pages/dashboard.py

@@ -3,8 +3,8 @@
 import reflex as rx
 
 from api_admin_panel.components.navbar import render_navbar
-from api_admin_panel.components.query import render_query_component
 from api_admin_panel.components.output import render_output
+from api_admin_panel.components.query import render_query_component
 from api_admin_panel.states.queries import QueryAPI
 
 
@@ -14,6 +14,7 @@ def dashboard() -> rx.Component:
 
     Returns:
         The UI for the dashboard page.
+
     """
     return rx.vstack(
         render_navbar(),

api_admin_panel/api_admin_panel/states/base.py

@@ -2,7 +2,6 @@
 
 
 class BaseState(rx.State):
-
     query_component_toggle: str = "none"
 
     is_request: str = "New Request"

api_admin_panel/api_admin_panel/states/queries.py

@@ -1,7 +1,8 @@
 import uuid
+
 import httpx
-from api_admin_panel.states.base import BaseState
 
+from api_admin_panel.states.base import BaseState
 
 # test URL: str = https://jsonplaceholder.typicode.com/posts
 # test URL: str = https://jsonplaceholder.typicode.com/todos

ci_template/cijob/backend/table_state.py

@@ -1,6 +1,8 @@
-import reflex as rx
-from typing import Union, List
 import csv
+from pathlib import Path
+from typing import List
+
+import reflex as rx
 
 
 class Item(rx.Base):
@@ -89,7 +91,7 @@ def last_page(self):
         self.offset = (self.total_pages - 1) * self.limit
 
     def load_entries(self):
-        with open("data.csv", mode="r", encoding="utf-8") as file:
+        with Path("data.csv").open(encoding="utf-8") as file:
             reader = csv.DictReader(file)
             self.items = [Item(**row) for row in reader]
             self.total_items = len(self.items)

ci_template/cijob/cijob.py

@@ -1,11 +1,10 @@
 """Welcome to Reflex!."""
 
 # Import all the pages.
-from .pages import *
-from . import styles
-
 import reflex as rx
 
+from . import styles
+from .pages import *
 
 # Create the app.
 app = rx.App(

ci_template/cijob/components/navbar.py

@@ -1,9 +1,9 @@
 """Navbar component for the app."""
 
-from .. import styles
-
 import reflex as rx
 
+from .. import styles
+
 
 def menu_item_icon(icon: str) -> rx.Component:
     return rx.icon(icon, size=20)
@@ -18,6 +18,7 @@ def menu_item(text: str, url: str) -> rx.Component:
 
     Returns:
         rx.Component: The menu item component.
+
     """
     # Whether the item is active.
     active = (rx.State.router.page.path == url.lower()) | (
@@ -76,6 +77,7 @@ def navbar_footer() -> rx.Component:
 
     Returns:
         The navbar footer component.
+
     """
     return rx.hstack(
         rx.link(
@@ -170,8 +172,8 @@ def navbar() -> rx.Component:
 
     Returns:
         The navbar component.
-    """
 
+    """
     return rx.el.nav(
         rx.hstack(
             # The logo.