@alexgorbatchev/shadcn 0.0.31 → 0.0.32

package/llms/components/data-display/JsonRender.md

@@ -0,0 +1,476 @@
+# JsonRender
+
+Story: @alexgorbatchev/shadcn/components/data-display/JsonRender
+Source: src/components/stories/data-display/JsonRender.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/data-display/JsonRender.stories.tsx)
+
+## Public imports
+
+```tsx
+import { components, componentDefinitions } from "@alexgorbatchev/shadcn/json-render";
+```
+
+## Supporting imports
+
+```tsx
+import { useState, type ReactElement } from "react";
+import { createStateStore, defineCatalog, type Spec } from "@json-render/core";
+import { JSONUIProvider, Renderer, defineRegistry } from "@json-render/react";
+import { schema } from "@json-render/react/schema";
+```
+
+## Default component
+
+```tsx
+JsonExample
+```
+
+## Examples
+
+Storybook CSF excerpts. Default args and render apply unless overridden. Local helpers, fixtures, decorators, and providers may be required; these are reference excerpts, not standalone consumer modules. Interaction tests are omitted.
+
+### Form
+
+```tsx
+{
+    args: {
+        spec: {
+            root: "form",
+            elements: {
+                form: {
+                    type: "Stack",
+                    props: {},
+                    children: [
+                        "input",
+                        "textarea",
+                        "select",
+                        "checkbox",
+                        "radio",
+                        "switch",
+                        "slider",
+                        "toggle",
+                        "toggles",
+                        "buttons",
+                    ],
+                },
+                input: { type: "Input", props: { label: "Name", value: "Ada" } },
+                textarea: { type: "Textarea", props: { label: "Notes", value: "Initial notes" } },
+                select: { type: "Select", props: { label: "Plan", options: ["Free", "Pro"], value: "Free" } },
+                checkbox: { type: "Checkbox", props: { label: "Agree" } },
+                radio: { type: "Radio", props: { label: "Frequency", options: ["Daily", "Weekly"] } },
+                switch: { type: "Switch", props: { label: "Notifications" } },
+                slider: { type: "Slider", props: { label: "Volume", min: 0, max: 10 } },
+                toggle: { type: "Toggle", props: { label: "Bold" } },
+                toggles: {
+                    type: "ToggleGroup",
+                    props: {
+                        type: "multiple",
+                        items: [
+                            { label: "Left", value: "left" },
+                            { label: "Right", value: "right" },
+                        ],
+                    },
+                },
+                buttons: {
+                    type: "ButtonGroup",
+                    props: {
+                        buttons: [
+                            { label: "Day", value: "day" },
+                            { label: "Month", value: "month" },
+                        ],
+                    },
+                },
+            },
+        },
+    }
+}
+```
+
+### Overlays
+
+```tsx
+{
+    args: {
+        spec: {
+            root: "root",
+            elements: {
+                root: {
+                    type: "Stack",
+                    props: {},
+                    children: ["tabs", "accordion", "collapse", "tooltip", "popover", "dropdown"],
+                },
+                tabs: {
+                    type: "Tabs",
+                    props: {
+                        tabs: [
+                            { value: "one", label: "First tab" },
+                            { value: "two", label: "Second tab" },
+                        ],
+                    },
+                },
+                accordion: {
+                    type: "Accordion",
+                    props: {
+                        type: "multiple",
+                        items: [
+                            { title: "Details", content: "Expanded details" },
+                            { title: "More", content: "More details" },
+                        ],
+                    },
+                },
+                collapse: { type: "Collapsible", props: { title: "Expand section", defaultOpen: false }, children: ["text"] },
+                text: { type: "Text", props: { text: "Collapsed content" } },
+                tooltip: { type: "Tooltip", props: { content: "Keyboard help", text: "Help trigger" } },
+                popover: { type: "Popover", props: { trigger: "Show popover", content: "Popover content" } },
+                dropdown: {
+                    type: "DropdownMenu",
+                    props: { label: "Open menu", items: [{ label: "Choose item", value: "item" }] },
+                },
+            },
+        },
+    }
+}
+```
+
+### Display
+
+```tsx
+{
+    args: {
+        spec: {
+            root: "card",
+            elements: {
+                card: {
+                    type: "Card",
+                    props: { title: "Archive", description: "Rendered from JSON", maxWidth: "full" },
+                    children: ["grid", "table", "progress", "spinner", "skeleton", "separator", "carousel"],
+                },
+                grid: {
+                    type: "Grid",
+                    props: { columns: 2 },
+                    children: ["heading", "text", "badge", "alert", "avatar", "image", "link", "button"],
+                },
+                heading: { type: "Heading", props: { text: "Measurements", level: "h2" } },
+                text: { type: "Text", props: { text: "Last updated today", variant: "muted" } },
+                badge: { type: "Badge", props: { text: "Ready", variant: "secondary" } },
+                alert: { type: "Alert", props: { title: "Synced", message: "All records imported", type: "success" } },
+                avatar: { type: "Avatar", props: { name: "Ada Lovelace" } },
+                image: {
+                    type: "Image",
+                    props: {
+                        src: new URL("../fixtures/avatar.svg", import.meta.url).href,
+                        alt: "Profile",
+                        width: 40,
+                        height: 40,
+                    },
+                },
+                link: { type: "Link", props: { label: "Read documentation", href: "#docs" } },
+                button: { type: "Button", props: { label: "Sync records", variant: "secondary" } },
+                table: {
+                    type: "Table",
+                    props: { caption: "Measurements", columns: ["Day", "Score"], rows: [["Monday", "80"]] },
+                },
+                progress: { type: "Progress", props: { value: 50, max: 100, label: "Import progress" } },
+                spinner: { type: "Spinner", props: { size: "md", label: "Loading records" } },
+                skeleton: { type: "Skeleton", props: { width: "100%", height: "20px" } },
+                separator: { type: "Separator", props: {} },
+                carousel: {
+                    type: "Carousel",
+                    props: {
+                        items: [
+                            { title: "First slide", description: "First record" },
+                            { title: "Second slide", description: "Second record" },
+                        ],
+                    },
+                },
+            },
+        },
+    }
+}
+```
+
+### BoundForm
+
+```tsx
+{
+    args: {
+        state: {
+            name: "Ada",
+            notes: "Initial notes",
+            plan: "Free",
+            agree: false,
+            frequency: "Daily",
+            notifications: false,
+            volume: 0,
+            bold: false,
+            position: "left",
+            period: "day",
+        },
+        spec: {
+            root: "root",
+            elements: {
+                root: {
+                    type: "Stack",
+                    props: {},
+                    children: [
+                        "input",
+                        "textarea",
+                        "select",
+                        "checkbox",
+                        "radio",
+                        "switch",
+                        "slider",
+                        "toggle",
+                        "toggles",
+                        "buttons",
+                    ],
+                },
+                input: {
+                    type: "Input",
+                    props: {
+                        label: "Name",
+                        value: { $bindState: "/name" },
+                        checks: [{ type: "required", message: "Name required" }],
+                        validateOn: "change",
+                    },
+                },
+                textarea: {
+                    type: "Textarea",
+                    props: {
+                        label: "Notes",
+                        value: { $bindState: "/notes" },
+                        checks: [{ type: "required", message: "Notes required" }],
+                        validateOn: "blur",
+                    },
+                },
+                select: {
+                    type: "Select",
+                    props: {
+                        label: "Plan",
+                        options: ["Free", "Pro"],
+                        value: { $bindState: "/plan" },
+                        checks: [{ type: "required", message: "Plan required" }],
+                    },
+                },
+                checkbox: {
+                    type: "Checkbox",
+                    props: {
+                        label: "Agree",
+                        checked: { $bindState: "/agree" },
+                        checks: [{ type: "matches", args: { other: true }, message: "Agreement required" }],
+                    },
+                },
+                radio: {
+                    type: "Radio",
+                    props: {
+                        label: "Frequency",
+                        options: ["Daily", "Weekly"],
+                        value: { $bindState: "/frequency" },
+                        checks: [{ type: "required", message: "Frequency required" }],
+                    },
+                },
+                switch: {
+                    type: "Switch",
+                    props: {
+                        label: "Notifications",
+                        checked: { $bindState: "/notifications" },
+                        checks: [{ type: "matches", args: { other: true }, message: "Notification preference required" }],
+                    },
+                },
+                slider: { type: "Slider", props: { label: "Volume", min: 0, max: 10, value: { $bindState: "/volume" } } },
+                toggle: { type: "Toggle", props: { label: "Bold", pressed: { $bindState: "/bold" } } },
+                toggles: {
+                    type: "ToggleGroup",
+                    props: {
+                        type: "multiple",
+                        value: { $bindState: "/position" },
+                        items: [
+                            { label: "Left", value: "left" },
+                            { label: "Right", value: "right" },
+                        ],
+                    },
+                },
+                buttons: {
+                    type: "ButtonGroup",
+                    props: {
+                        selected: { $bindState: "/period" },
+                        buttons: [
+                            { label: "Day", value: "day" },
+                            { label: "Month", value: "month" },
+                        ],
+                    },
+                },
+            },
+        },
+    }
+}
+```
+
+### MissingBoundValues
+
+```tsx
+{
+    args: { ...BoundForm.args, state: {} }
+}
+```
+
+### PaginationAndDialog
+
+```tsx
+{
+    args: {
+        state: { page: 1, show: false, drawer: false },
+        spec: {
+            root: "root",
+            elements: {
+                root: { type: "Stack", props: {}, children: ["pagination", "open", "dialog", "openDrawer", "drawer"] },
+                pagination: { type: "Pagination", props: { page: { $bindState: "/page" }, totalPages: 20 } },
+                open: {
+                    type: "Button",
+                    props: { label: "Open dialog" },
+                    on: { press: { action: "setState", params: { statePath: "/show", value: true } } },
+                },
+                dialog: {
+                    type: "Dialog",
+                    props: { title: "Confirm import", description: "Import your records", openPath: "/show" },
+                },
+                openDrawer: {
+                    type: "Button",
+                    props: { label: "Open drawer" },
+                    on: { press: { action: "setState", params: { statePath: "/drawer", value: true } } },
+                },
+                drawer: {
+                    type: "Drawer",
+                    props: { title: "Archive details", description: "Stored records", openPath: "/drawer" },
+                },
+            },
+        },
+    }
+}
+```
+
+### TypographyAndPlaceholders
+
+```tsx
+{
+    args: {
+        spec: {
+            root: "root",
+            elements: {
+                root: {
+                    type: "Stack",
+                    props: { direction: "horizontal", gap: "lg", align: "center", justify: "between" },
+                    children: [
+                        "small",
+                        "medium",
+                        "large",
+                        "empty",
+                        "placeholder",
+                        "avatar",
+                        "spinner",
+                        "skeleton",
+                        "progress",
+                        "separator",
+                        "table",
+                    ],
+                },
+                small: {
+                    type: "Card",
+                    props: { maxWidth: "sm", centered: true, title: "Small card" },
+                    children: ["h1", "caption", "alert"],
+                },
+                medium: {
+                    type: "Card",
+                    props: { maxWidth: "md", description: "Medium card" },
+                    children: ["h3", "lead", "warning"],
+                },
+                large: { type: "Card", props: { maxWidth: "lg" }, children: ["h4", "code", "info"] },
+                empty: { type: "Card", props: {}, children: ["body", "badge"] },
+                h1: { type: "Heading", props: { text: "Page heading", level: "h1" } },
+                h3: { type: "Heading", props: { text: "Section heading", level: "h3" } },
+                h4: { type: "Heading", props: { text: "Detail heading", level: "h4" } },
+                caption: { type: "Text", props: { text: "Caption", variant: "caption" } },
+                lead: { type: "Text", props: { text: "Lead paragraph", variant: "lead" } },
+                code: { type: "Text", props: { text: "const ready = true", variant: "code" } },
+                body: { type: "Text", props: { text: "Body paragraph" } },
+                badge: { type: "Badge", props: { text: "Default badge" } },
+                alert: { type: "Alert", props: { title: "Import failed", type: "error" } },
+                warning: { type: "Alert", props: { title: "Warning", type: "warning" } },
+                info: { type: "Alert", props: { title: "Default notice" } },
+                placeholder: { type: "Image", props: { src: null, alt: "Missing photograph" } },
+                avatar: { type: "Avatar", props: { name: "", size: "lg" } },
+                spinner: { type: "Spinner", props: { size: "sm" } },
+                skeleton: { type: "Skeleton", props: { rounded: true } },
+                progress: { type: "Progress", props: { value: 20 } },
+                separator: { type: "Separator", props: { orientation: "vertical" } },
+                table: { type: "Table", props: { columns: ["Name"], rows: [["Ada"]] } },
+            },
+        },
+    }
+}
+```
+
+### InitialSelections
+
+```tsx
+{
+    args: {
+        spec: {
+            root: "root",
+            elements: {
+                root: {
+                    type: "Grid",
+                    props: { columns: 1, gap: "sm" },
+                    children: [
+                        "buttons",
+                        "tabs",
+                        "toggles",
+                        "pagination",
+                        "slider",
+                        "accordion",
+                        "image",
+                        "avatar",
+                        "spinner",
+                        "button",
+                    ],
+                },
+                buttons: {
+                    type: "ButtonGroup",
+                    props: {
+                        selected: "month",
+                        buttons: [
+                            { label: "Day view", value: "day" },
+                            { label: "Month view", value: "month" },
+                        ],
+                    },
+                },
+                tabs: {
+                    type: "Tabs",
+                    props: {
+                        value: "second",
+                        tabs: [
+                            { label: "One", value: "first" },
+                            { label: "Two", value: "second" },
+                        ],
+                    },
+                },
+                toggles: { type: "ToggleGroup", props: { value: "", items: [{ label: "Pin", value: "pin" }] } },
+                pagination: { type: "Pagination", props: { totalPages: 3 } },
+                slider: { type: "Slider", props: { value: 20 } },
+                accordion: { type: "Accordion", props: { items: [{ title: "Single details", content: "Single expanded" }] } },
+                image: {
+                    type: "Image",
+                    props: { src: new URL("../fixtures/avatar.svg", import.meta.url).href, alt: "Small profile" },
+                },
+                avatar: {
+                    type: "Avatar",
+                    props: { name: "Ada", size: "sm", src: new URL("../fixtures/avatar.svg", import.meta.url).href },
+                },
+                spinner: { type: "Spinner", props: { size: "lg", label: "Large loader" } },
+                button: { type: "Button", props: { label: "Delete", variant: "danger", disabled: true } },
+            },
+        },
+    }
+}
+```

package/llms/components/feedback/Alert.md

@@ -26,7 +26,7 @@ Alert
 ## Story controls
 
 ```tsx
-{ variant: { control: "select", options: ["default", "destructive"] } }
+{ variant: { control: "select", options: ["default", "destructive", "success", "warning", "info"] } }
 ```
 
 ## Default render
@@ -57,6 +57,22 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
 }
 ```
 
+### Success
+
+```tsx
+{
+    args: { variant: "success" }
+}
+```
+
+### Info
+
+```tsx
+{
+    args: { variant: "info" }
+}
+```
+
 ### Compact
 
 ```tsx
@@ -80,14 +96,14 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
 }
 ```
 
-### CustomColors
+### Warning
 
 ```tsx
 {
-    render: (args) => (<Alert {...args} className="border-warning/30 bg-warning/10 text-warning">
+    render: (args) => (<Alert {...args} variant="warning">
       <TriangleAlertIcon aria-hidden="true"/>
       <AlertTitle>Subscription expires soon</AlertTitle>
-      <AlertDescription className="text-warning">Renew your subscription to keep access.</AlertDescription>
+      <AlertDescription>Renew your subscription to keep access.</AlertDescription>
     </Alert>)
 }
 ```

package/llms/setup.md

@@ -52,6 +52,7 @@ Import shared controls and providers from `@alexgorbatchev/shadcn`. Import the f
 
 | Import path suffix   | Components                                               | Install alongside the package                                                                       |
 | -------------------- | -------------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
+| `/json-render`       | JSON Render component registry and catalog               | `bun add @json-render/core@0.21.1 @json-render/react@0.21.1 embla-carousel-react@^8.6.0`            |
 | `/chart`             | Chart parts, AnalyticsChart, Sparkline, hooks and types  | `bun add recharts@3.8.0 cssesc@3.0.0 es-toolkit@1.52.0`                                             |
 | `/calendar`          | Calendar, CalendarDayButton, DatePicker, DateRangePicker | `bun add @daypicker/react@^10.0.2`                                                                  |
 | `/persian-calendar`  | PersianCalendar                                          | `bun add @daypicker/persian@^10.0.2 @daypicker/react@^10.0.2`                                       |

package/llms.txt

@@ -335,6 +335,7 @@ Generated from the public package exports and Storybook sources.
 - [DataGrid](./llms/components/data-display/DataGrid.md)
 - [DataGridColumnOptions](./llms/components/data-display/DataGridColumnOptions.md)
 - [Item](./llms/components/data-display/Item.md)
+- [JsonRender](./llms/components/data-display/JsonRender.md)
 - [JsonViewer](./llms/components/data-display/JsonViewer.md)
 - [Kbd](./llms/components/data-display/Kbd.md)
 - [Meter](./llms/components/data-display/Meter.md)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alexgorbatchev/shadcn",
-  "version": "0.0.31",
+  "version": "0.0.32",
   "description": "Sharp, monospace React components with compact and comfortable densities.",
   "license": "MIT",
   "repository": {
@@ -1032,6 +1032,14 @@
     "./gantt": {
       "types": "./dist/components/gantt/index.d.ts",
       "import": "./dist/components/gantt/index.js"
+    },
+    "./json-render": {
+      "types": "./dist/components/json-render/index.d.ts",
+      "import": "./dist/components/json-render/index.js"
+    },
+    "./json-render/catalog": {
+      "types": "./dist/components/json-render/catalog.d.ts",
+      "import": "./dist/components/json-render/catalog.js"
     }
   },
   "publishConfig": {
@@ -1085,6 +1093,8 @@
     "@headless-tree/core": "1.8.0",
     "@headless-tree/react": "1.8.0",
     "@hookform/resolvers": "5.9.1",
+    "@json-render/core": "0.21.1",
+    "@json-render/react": "0.21.1",
     "@storybook/addon-a11y": "^10.6.1",
     "@storybook/addon-docs": "^10.6.1",
     "@storybook/addon-vitest": "^10.6.1",
@@ -1166,6 +1176,8 @@
     "@fontsource-variable/jetbrains-mono": "^5.3.0",
     "@headless-tree/core": "^1.8.0",
     "@headless-tree/react": "^1.8.0",
+    "@json-render/core": "0.21.1",
+    "@json-render/react": "0.21.1",
     "@tanstack/react-table": "9.2.8",
     "@tanstack/react-virtual": "^3.14.13",
     "@tiptap/core": "^3.32.0",
@@ -1332,6 +1344,12 @@
     },
     "@types/react-big-calendar": {
       "optional": true
+    },
+    "@json-render/core": {
+      "optional": true
+    },
+    "@json-render/react": {
+      "optional": true
     }
   },
   "packageManager": "bun@1.4.2"