[docs] Add shadcn theme

Author: x0k

apps/docs/package.json

@@ -17,6 +17,7 @@
     "@sjsf/lucide-icons": "workspace:*",
     "@sjsf/form": "workspace:*",
     "@sjsf/skeleton-theme": "workspace:*",
+    "@sjsf/shadcn-theme": "workspace:*",
     "ajv": "catalog:",
     "mermaid": "^11.3.0",
     "svg-pan-zoom": "github:bumbu/svg-pan-zoom"

apps/docs/src/content/docs/_npm-with-themes.astro

@@ -13,6 +13,7 @@ const THEME_PACKAGES = {
   daisyui: "@sjsf/daisyui-theme",
   flowbite: "@sjsf/flowbite-theme",
   skeleton: "@sjsf/skeleton-theme",
+  shadcn: "@sjsf/shadcn-theme",
 } satisfies Record<Theme, string>;
 
 const isBasic = theme === "basic";

apps/docs/src/content/docs/_usage-with-theme.astro

@@ -3,6 +3,7 @@ import { Tabs, TabItem, Code, Card } from "@astrojs/starlight/components";
 import daisyuiStyles from '@sjsf/daisyui-theme/styles.css?inline';
 import flowbiteStyles from '@sjsf/flowbite-theme/styles.css?inline';
 import skeletonStyles from '@sjsf/skeleton-theme/styles.css?inline';
+import shadcnStyles from '@sjsf/shadcn-theme/styles.css?inline';
 
 import type { Theme } from "@/shared";
 import { ShadowHost } from "@/components/shadow";
@@ -11,13 +12,15 @@ import WithBasic from "./_with-basic.svelte";
 import WithSkeleton from "./_with-skeleton.svelte";
 import WithDaisyui from "./_with-daisyui.svelte";
 import WithFlowbite from "./_with-flowbite.svelte";
+import WithShadcn from "./_with-shadcn.svelte";
 
 import schemaCode from "./_schema?raw";
 import validatorCode from './_validator?raw';
 import withBasicCode from "./_with-basic.svelte?raw";
 import withSkeletonCode from "./_with-skeleton.svelte?raw";
 import withDaisyuiCode from "./_with-daisyui.svelte?raw";
 import withFlowbiteCode from "./_with-flowbite.svelte?raw";
+import withShadcnCode from "./_with-shadcn.svelte?raw";
 
 const theme = (Astro.params.theme ?? "basic") as Theme;
 
@@ -26,13 +29,15 @@ const STYLES = {
   daisyui: daisyuiStyles,
   flowbite: flowbiteStyles,
   skeleton: skeletonStyles,
+  shadcn: shadcnStyles
 } satisfies Record<Theme, string>;
 
 const CODE = {
   basic: withBasicCode,
   daisyui: withDaisyuiCode,
   flowbite: withFlowbiteCode,
   skeleton: withSkeletonCode,
+  shadcn: withShadcnCode
 } satisfies Record<Theme, string>;
 ---
 
@@ -59,6 +64,8 @@ const CODE = {
         <WithFlowbite client:only="svelte" />
       ) : theme === "skeleton" ? (
         <WithSkeleton client:only="svelte" />
+      ) : theme === "shadcn" ? (
+        <WithShadcn client:only="svelte" />
       ) : null
     }
   </ShadowHost>

apps/docs/src/content/docs/_with-shadcn.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { Form } from "@sjsf/form";
+  import { translation } from "@sjsf/form/translations/en";
+  import { theme, setThemeContext } from "@sjsf/shadcn-theme";
+  import { components } from '@sjsf/shadcn-theme/default'
+
+  import { astroTheme } from "@/theme.svelte";
+
+  import { schema, uiSchema, initialData } from "./_schema";
+  import { validator } from "./_validator";
+
+  let value = $state(initialData);
+
+  const astro = astroTheme();
+
+  setThemeContext({ components })
+</script>
+
+<Form
+  class="flex flex-col gap-4 {astro.darkOrLight}"
+  bind:value
+  {...theme}
+  {schema}
+  {uiSchema}
+  {validator}
+  {translation}
+  onSubmit={console.log}
+/>
+
+<pre style="padding-top: 1rem;">{JSON.stringify(value, null, 2)}</pre>

apps/docs/src/content/docs/themes/_shadcn-theme.astro

@@ -0,0 +1,11 @@
+---
+import themeStyles from '@sjsf/shadcn-theme/styles.css?inline';
+
+import { ShadowHost } from "@/components/shadow";
+
+import ThemeForm from "./_shadcn-theme.svelte";
+---
+
+<ShadowHost client:only="svelte" style={themeStyles}>
+  <ThemeForm client:only="svelte" />
+</ShadowHost>

apps/docs/src/content/docs/themes/_shadcn-theme.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { theme, setThemeContext } from "@sjsf/shadcn-theme";
+  import { components } from '@sjsf/shadcn-theme/default'
+
+  import { astroTheme } from "@/theme.svelte";
+  import CustomForm from "@/components/custom-form.svelte";
+
+  import { schema, uiSchema } from "./_demo-schema";
+
+  const astro = astroTheme();
+
+  let value = $state();
+
+  setThemeContext({ components })
+</script>
+
+<CustomForm
+  {...theme}
+  bind:value
+  {schema}
+  {uiSchema}
+  novalidate
+  onSubmit={console.log}
+  class="flex flex-col gap-4 {astro.darkOrLight}"
+/>
+
+<pre style="padding-top: 1rem;">{JSON.stringify(value, null, 2)}</pre>

apps/docs/src/content/docs/themes/shadcn.mdx

@@ -0,0 +1,83 @@
+---
+title: Shadcn
+sidebar:
+  order: 4
+---
+
+import { Code, Card, LinkButton, Tabs, TabItem } from '@astrojs/starlight/components';
+
+import Npm from '@/components/npm.astro';
+
+import ShadcnTheme from './_shadcn-theme.astro';
+import shadcnThemeCode from './_shadcn-theme.svelte?raw';
+import demoSchemaCode from './_demo-schema.ts?raw';
+
+## Installation
+
+<Npm pkg="@sjsf/form @sjsf/shadcn-theme" />
+
+:::note
+
+This is `shadcn-svelte@next` based theme.
+
+:::
+
+### Install Shadcn Svelte
+
+<LinkButton href="https://next.shadcn-svelte.com/docs/installation" variant='minimal' target="_blank" icon="external">
+  Installation - shadcn-svelte
+</LinkButton>
+
+### Setup styles
+
+There is two ways to setup styles:
+
+1. Use tailwindcss config
+
+```typescript
+import { THEME_CONTENT } from '@sjsf/shadcn-theme/preset'
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{html,js,svelte,ts}', THEME_CONTENT],
+  // other tailwind config
+  ...
+}
+```
+
+2. Inject prepared styles (not recommended)
+
+```typescript
+// Inject them as you like
+import shadcnStyles from '@sjsf/shadcn-theme/styles.css?inline';
+```
+
+## Components
+
+Since `shadcn-svelte` is not a component library you should provide your components via `setThemeContext`.
+
+```typescript
+import { setThemeContext } from '@sjsf/shadcn-theme';
+
+setThemeContext({ components: { ... } })
+```
+
+However, you can use already prepared component sets or mix them with your own components:
+
+- `@sjsf/shadcn-theme/default`
+- `@sjsf/shadcn-theme/new-york`
+
+## Demo
+
+<Tabs>
+<TabItem label="Form.svelte">
+  <Code code={shadcnThemeCode} lang="svelte" />
+</TabItem>
+<TabItem label="_demo-schema.ts">
+  <Code code={demoSchemaCode} lang="typescript" />
+</TabItem>
+</Tabs>
+
+<Card>
+  <ShadcnTheme />
+</Card>

apps/docs/src/shared.ts

@@ -1,4 +1,4 @@
-export const THEMES = ["basic", "daisyui", "flowbite", "skeleton"] as const;
+export const THEMES = ["basic", "daisyui", "flowbite", "skeleton", "shadcn"] as const;
 
 export type Theme = (typeof THEMES)[number];
 
@@ -7,4 +7,5 @@ export const THEME_TTITLES = {
   daisyui: "DaisyUI",
   flowbite: "Flowbite",
   skeleton: "Skeleton",
+  shadcn: "Shadcn",
 } satisfies Record<Theme, string>;