Implement responsive local state management for immediate user feedback

app-examples/gallery-state/.gitignore

@@ -0,0 +1,5 @@
+*.db
+*.py[cod]
+*.web
+.web
+__pycache__/

app-examples/gallery-state/gallery/gallery.py

@@ -0,0 +1,108 @@
+"""Welcome to Nextpy! This file outlines the steps to create a basic app."""
+import csv
+import nextpy as xt
+from gallery import styles
+from .templates import template
+
+image_urls: list[str] = []
+image_urls_csv = "assets/image_urls.csv"
+with open(image_urls_csv, "r", newline="\n") as file:
+    csv_reader = csv.reader(file)
+    for row in csv_reader:
+        if len(row) > 0:
+            url = row[0].strip()
+            image_urls.append(url)
+
+
+border_radius = ("0.375rem",)
+box_shadow = ("0px 0px 0px 1px rgba(84, 82, 95, 0.14)",)
+border = "1px solid #F4F3F6"
+text_color = "black"
+accent_text_color = "#1A1060"
+accent_color = "#F5EFFE"
+
+
+def add_item(category):
+    return xt.vstack(
+        xt.link(
+            xt.image(
+                src=category,
+                height="100%",
+                width="100%",
+                fit="cover",
+            ),
+            height=["92vw", "15em", "15em", "15em", "15em"],
+            width=["92vw", "15em", "15em", "15em", "15em"],
+            href=f"{category}",
+        ),
+        box_shadow="lg",
+        bg_color="white",
+        _hover={
+            "box_shadow": "rgba(38, 57, 77, .3) 0px 20px 30px -10px",
+        },
+        class_name = 'm-auto'
+    )
+
+
+def component_grid():
+    return xt.box(
+        xt.responsive_grid(
+            xt.foreach(image_urls, add_item),
+            columns=[1, 2, 3, 4, 5],
+            gap=2,
+        ),
+    )
+
+
+def gallery_with_no_sidebar():
+    return xt.box(
+        xt.vstack(
+            component_grid(),
+            align_items="stretch",
+            min_height="80vh",
+            margin_bottom="2em",
+            overflow="hidden",
+        ),
+        class_name="w-max",
+        flex_direction="column",
+        overflow="hidden",
+        position="relative",
+    )
+
+class State(xt.State):
+    count: int = 0
+    message: str = ""
+
+    def increment(self):
+        self.count += 1
+        if self.count == 10:
+            self.message = "Count is 10!"
+
+    def decrement(self):
+        self.count -= 1
+        if self.count < 10:
+            self.message = ""
+
+
+@template(route="/", title="GALLERY")
+def gallery() -> xt.Component:
+    return xt.vstack(
+        xt.vstack(
+            xt.text(State.message, font_size="2em", text_color="white"),
+            xt.input(value=State.message, on_change=State.set_message),
+            xt.divider(),
+            align_items="center",
+        ),
+        margin_top="2em",
+        height="100%",
+        position="relative",
+        overflow_x="hidden",
+    )
+
+
+# Add state and page to the app.
+app = xt.App(
+    stylesheets=[
+        "https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,700&family=Inter&display=swap",]
+)
+

app-examples/gallery-state/gallery/styles/__init__.py

@@ -0,0 +1,3 @@
+from .styles import *
+from .colors import *
+from .fonts import *

app-examples/gallery-state/gallery/styles/colors.py

@@ -0,0 +1,94 @@
+colors = {
+    "white": "#FFFFFF",
+    "red": {
+        50: "#FFF1F1",
+        100: "#FFDADA",
+        200: "#FFADAD",
+        300: "#FF7070",
+        400: "#FF3838",
+        500: "#FF0000",
+        600: "#DB0000",
+        700: "#8B0000",
+        800: "#420000",
+        900: "#140000",
+    },
+    "orange": {
+        50: "#FFF8F1",
+        100: "#FFECDA",
+        200: "#FFD1B1",
+        300: "#FFAB7D",
+        400: "#FF7C3F",
+        500: "#FF4F00",
+        600: "#DB3D00",
+        700: "#8B1F00",
+        800: "#4C0A00",
+        900: "#170000",
+    },
+    "green": {
+        50: "#F3FFFA",
+        100: "#CEFFEE",
+        200: "#9BFFDD",
+        300: "#57FFC5",
+        400: "#00FFA8",
+        500: "#00D98F",
+        600: "#00A86E",
+        700: "#00734C",
+        800: "#00402A",
+        900: "#00170F",
+    },
+    "blue": {
+        50: "#F3F7FE",
+        100: "#DEEAFD",
+        200: "#BED5FA",
+        300: "#97BBF5",
+        400: "#6B9EED",
+        500: "#2678EB",
+        600: "#2C61B5",
+        700: "#1A4589",
+        800: "#0C2755",
+        900: "#030F23",
+    },
+    "violet": {
+        50: "#F5EFFE",
+        100: "#D5C2FB",
+        200: "#AD9BF8",
+        300: "#9580F7",
+        400: "#7E69E0",
+        500: "#5646ED",
+        600: "#2B199C",
+        700: "#20117E",
+        800: "#1A1060",
+        900: "#03030B",
+    },
+    "indigo": {
+        50: "#FAF8FB",
+        100: "#EAE4FD",
+        200: "#DACEEE",
+        300: "#AA9EC3",
+        400: "#82799E",
+        500: "#696287",
+        600: "#494369",
+        700: "#342E5C",
+        800: "#1F1944",
+        900: "#110F1F",
+    },
+    "gray": {
+        50: "#FEFDFF",
+        100: "#F4F3F6",
+        200: "#CDCCD1",
+        300: "#B3B2B9",
+        400: "#97959F",
+        500: "#777583",
+        600: "#5C5B66",
+        700: "#3E3E44",
+        800: "#242528",
+        900: "31A1A1D",
+    },
+}
+
+text_colors = {
+    "docs": {
+        "header": colors["indigo"][800],
+        "body": colors["indigo"][700],
+    }
+}

app-examples/gallery-state/gallery/styles/fonts.py

@@ -0,0 +1,6 @@
+font_weights = {
+    "bold": "800",
+    "heading": "700",
+    "subheading": "600",
+    "section": "600",
+}