test

.github/workflows/chromatic.yml

@@ -0,0 +1,34 @@
+name: 'Chromatic'
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+
+jobs:
+  chromatic:
+    name: Run Chromatic
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: latest
+
+      - name: Install dependencies (skip scripts)
+        run: bun install --frozen-lockfile --ignore-scripts
+
+      - name: Build Storybook
+        run: bun run build-storybook
+
+      - name: Publish to Chromatic
+        uses: chromaui/action@v1
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

.gitignore

@@ -134,3 +134,49 @@ dist
 .yarn/build-state.yml
 .yarn/install-state.gz
 .pnp.*
+
+# moon
+.moon/cache
+.moon/docker
+/storybook-static/assets/axe-h2-o4wQO.js
+/storybook-static/assets/client-C8z_qkuw.js
+/storybook-static/assets/Color-64QXVMR3-BnHVROHa.js
+/storybook-static/sb-addons/storybook-core-server-presets-0/common-manager-bundle.js
+/storybook-static/sb-addons/storybook-core-server-presets-0/common-manager-bundle.js.LEGAL.txt
+/storybook-static/sb-common-assets/favicon.svg
+/storybook-static/favicon.svg
+/storybook-static/sb-common-assets/favicon-wrapper.svg
+/storybook-static/favicon-wrapper.svg
+/storybook-static/assets/formatter-OMEEQ6HG-TaVxovVN.js
+/storybook-static/sb-manager/globals.js
+/storybook-static/sb-manager/globals-runtime.js
+/storybook-static/iframe.html
+/storybook-static/assets/iframe-CpzWy_QA.js
+/storybook-static/assets/iframe-D5glGlJt.css
+/storybook-static/index.html
+/storybook-static/index.json
+/storybook-static/assets/index-CtvkqkAV.js
+/storybook-static/assets/index-CWKIbsqV.js
+/storybook-static/sb-addons/a11y-3/manager-bundle.js
+/storybook-static/sb-addons/chromatic-com-storybook-1/manager-bundle.js
+/storybook-static/sb-addons/docs-2/manager-bundle.js
+/storybook-static/sb-addons/vitest-4/manager-bundle.js
+/storybook-static/sb-addons/chromatic-com-storybook-1/manager-bundle.js.LEGAL.txt
+/storybook-static/assets/matchers-ZRZBO4XZ-DzJb7Mu6.js
+/storybook-static/sb-common-assets/nunito-sans-bold.woff2
+/storybook-static/nunito-sans-bold.woff2
+/storybook-static/sb-common-assets/nunito-sans-bold-italic.woff2
+/storybook-static/nunito-sans-bold-italic.woff2
+/storybook-static/sb-common-assets/nunito-sans-italic.woff2
+/storybook-static/nunito-sans-italic.woff2
+/storybook-static/sb-common-assets/nunito-sans-regular.woff2
+/storybook-static/nunito-sans-regular.woff2
+/storybook-static/assets/preload-helper-PPVm8Dsz.js
+/storybook-static/project.json
+/storybook-static/assets/react-18-wlah-rBw.js
+/storybook-static/sb-manager/runtime.js
+/storybook-static/assets/syntaxhighlighter-DK2ODWXH-DU_eNxWS.js
+/storybook-static/assets/Test.stories-CwKt-SSL.js
+/storybook-static/addon-visual-tests-assets/visual-test-illustration.mp4
+/storybook-static/vite-inject-mocker-entry.js
+/storybook-static/assets/WithTooltip-SK46ZJ2J-DJ-2_a3V.js

.moon/workspace.yml

@@ -0,0 +1,16 @@
+# https://moonrepo.dev/docs/config/workspace
+$schema: 'https://moonrepo.dev/schemas/workspace.json'
+
+# Require a specific version of moon while running commands, otherwise fail.
+# versionConstraint: '>=1.0.0'
+
+# Extend and inherit an external configuration file. Must be a valid HTTPS URL or file system path.
+# extends: './shared/workspace.yml'
+
+# REQUIRED: A map of all projects found within the workspace, or a list or file system globs.
+# When using a map, each entry requires a unique project ID as the map key, and a file system
+# path to the project folder as the map value. File paths are relative from the workspace root,
+# and cannot reference projects located outside the workspace boundary.
+projects:
+  - 'apps/*'
+  - 'packages/*'

.storybook/main.ts

@@ -0,0 +1,17 @@
+import type { StorybookConfig } from "@storybook/nextjs-vite";
+
+const config: StorybookConfig = {
+  "stories": [
+    "../**/*.mdx",
+    "../**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
+  "addons": [
+    '@storybook/addon-interactions',
+    "@storybook/addon-a11y",
+  ],
+  "framework": {
+    "name": "@storybook/nextjs-vite",
+    "options": {}
+  }
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,22 @@
+import type { Preview } from '@storybook/react-webpack5'
+import "../app/globals.css"
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+       color: /(background|color)$/i,
+       date: /Date$/i,
+      },
+    },
+
+    a11y: {
+      // 'todo' - show a11y violations in the test UI only
+      // 'error' - fail CI on a11y violations
+      // 'off' - skip a11y checks entirely
+      test: 'todo'
+    }
+  },
+};
+
+export default preview;

app/Test/page.tsx

@@ -0,0 +1,70 @@
+'use client';
+import { useState } from 'react';
+import { Check, Mail, Settings } from 'lucide-react';
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { Badge } from "@/components/ui/badge";
+
+export default function TestComponent() {
+    const [email, setEmail] = useState('');
+    const [notifications, setNotifications] = useState(false);
+
+    return (
+        <div className="min-h-screen from-slate-50 to-slate-100 p-8 flex items-center justify-center">
+            <Card className="w-full max-w-md">
+                <CardHeader>
+                    <CardTitle className="flex items-center gap-2">
+                        <Settings className="h-5 w-5" />
+                        Test Component
+                    </CardTitle>
+                    <CardDescription>
+                        A simple component for testing purposes
+                    </CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                    <div className="space-y-2">
+                        <Label htmlFor="email" className="flex items-center gap-2">
+                            <Mail className="h-4 w-4" />
+                            Email
+                        </Label>
+                        <Input
+                            id="email"
+                            type="email"
+                            placeholder="test@example.com"
+                            value={email}
+                            onChange={(e: any) => setEmail(e.target.value)}
+                        />
+                    </div>
+
+                    <div className="flex items-center justify-between py-2">
+                        <div className="space-y-0.5">
+                            <Label htmlFor="notifications">Email Notifications</Label>
+                            <p className="text-sm text-muted-foreground">
+                                Receive email updates
+                            </p>
+                        </div>
+                        <Switch
+                            id="notifications"
+                            checked={notifications}
+                            onCheckedChange={setNotifications}
+                        />
+                    </div>
+
+                    {notifications && (
+                        <Badge variant="secondary" className="w-full justify-center">
+                            <Check className="h-3 w-3 mr-1" />
+                            Notifications Enabled
+                        </Badge>
+                    )}
+                </CardContent>
+                <CardFooter className="flex gap-2">
+                    <Button variant="outline" className="flex-1 border-red-300 text-red-600 hover:bg-red-50">Cancel</Button>
+                    <Button className="flex-1 bg-green-900 hover:bg-green-700 text-white">Save</Button>
+                </CardFooter>
+            </Card>
+        </div>
+    );
+}

app/globals.css

@@ -0,0 +1,59 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    :root {
+        --background: 0 0% 100%;
+        --foreground: 222.2 84% 4.9%;
+        --card: 0 0% 100%;
+        --card-foreground: 222.2 84% 4.9%;
+        --popover: 0 0% 100%;
+        --popover-foreground: 222.2 84% 4.9%;
+        --primary: 222.2 47.4% 11.2%;
+        --primary-foreground: 210 40% 98%;
+        --secondary: 210 40% 96%;
+        --secondary-foreground: 222.2 47.4% 11.2%;
+        --muted: 210 40% 96%;
+        --muted-foreground: 215.4 16.3% 46.9%;
+        --accent: 210 40% 96%;
+        --accent-foreground: 222.2 47.4% 11.2%;
+        --destructive: 0 84.2% 60.2%;
+        --destructive-foreground: 210 40% 98%;
+        --border: 214.3 31.8% 91.4%;
+        --input: 214.3 31.8% 91.4%;
+        --ring: 222.2 84% 4.9%;
+        --radius: 0.5rem;
+    }
+
+    .dark {
+        --background: 222.2 84% 4.9%;
+        --foreground: 210 40% 98%;
+        --card: 222.2 84% 4.9%;
+        --card-foreground: 210 40% 98%;
+        --popover: 222.2 84% 4.9%;
+        --popover-foreground: 210 40% 98%;
+        --primary: 210 40% 98%;
+        --primary-foreground: 222.2 47.4% 11.2%;
+        --secondary: 217.2 32.6% 17.5%;
+        --secondary-foreground: 210 40% 98%;
+        --muted: 217.2 32.6% 17.5%;
+        --muted-foreground: 215 20.2% 65.1%;
+        --accent: 217.2 32.6% 17.5%;
+        --accent-foreground: 210 40% 98%;
+        --destructive: 0 62.8% 30.6%;
+        --destructive-foreground: 210 40% 98%;
+        --border: 217.2 32.6% 17.5%;
+        --input: 217.2 32.6% 17.5%;
+        --ring: 212.7 26.8% 83.9%;
+    }
+}
+
+@layer base {
+    * {
+        @apply border-border;
+    }
+    body {
+        @apply bg-background text-foreground;
+    }
+}

app/layout.tsx

@@ -0,0 +1,13 @@
+import './globals.css'
+
+export default function RootLayout({
+                                       children,
+                                   }: {
+    children: React.ReactNode
+}) {
+    return (
+        <html lang="en">
+        <body>{children}</body>
+        </html>
+    )
+}

app/page.tsx

@@ -0,0 +1,6 @@
+// @ts-ignore
+import { redirect } from 'next/navigation';
+
+export default function Home() {
+    redirect('/Test');
+}