create-simone-app 0.1.0

package/templates/fe/base/vitest.config.ts

@@ -0,0 +1,21 @@
+import { defineConfig, mergeConfig } from 'vitest/config'
+
+import viteConfig from './vite.config'
+
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    test: {
+      environment: 'jsdom',
+      globals: false,
+      setupFiles: ['src/test/setup.ts'],
+      include: ['src/**/*.test.{ts,tsx}'],
+      coverage: {
+        provider: 'v8',
+        include: ['src/features/**'],
+        exclude: ['src/**/*.test.{ts,tsx}'],
+        thresholds: { lines: 80, functions: 80, branches: 80, statements: 80 },
+      },
+    },
+  }),
+)

package/templates/fe/variants/features/no-github-ci/variant.json

@@ -0,0 +1 @@
+{ "remove": [".github"] }

package/templates/fe/variants/features/no-msw/src/test/api-mock.ts

@@ -0,0 +1,52 @@
+import { apiClient } from '@/lib/apiClient'
+
+import { listUsers } from './fixtures/users'
+
+/**
+ * Test seam over the HTTP mock without MSW: an axios adapter serves the same fixture.
+ * Feature tests only call `apiMock.*`, identical to the MSW variant.
+ */
+interface Once {
+  status: number
+  body: unknown
+}
+let once: Once | undefined
+
+const axiosLikeError = (config: unknown, status: number, body: unknown) =>
+  Object.assign(new Error(`Request failed with status code ${status}`), {
+    isAxiosError: true,
+    config,
+    response: { data: body, status, statusText: '', headers: {}, config },
+  })
+
+export const installApiMock = () => {
+  apiClient.defaults.adapter = async (config) => {
+    const ok = (data: unknown) => ({
+      data,
+      status: 200,
+      statusText: 'OK',
+      headers: {},
+      config,
+    })
+    if (once) {
+      const { status, body } = once
+      once = undefined
+      if (status >= 400) throw axiosLikeError(config, status, body)
+      return ok(body)
+    }
+    const url = new URL(apiClient.getUri(config), 'http://localhost:3000')
+    if (url.pathname.endsWith('/users')) return ok(listUsers(url))
+    throw axiosLikeError(config, 404, { error: `Not mocked: ${url.pathname}` })
+  }
+}
+
+export const apiMock = {
+  /** Next request answers `status` with `body`. */
+  failOnce: (status: number, body: unknown) => {
+    once = { status, body }
+  },
+  /** Next request answers 200 with `body`. */
+  respondOnce: (body: unknown) => {
+    once = { status: 200, body }
+  },
+}

package/templates/fe/variants/features/no-msw/src/test/setup.ts

@@ -0,0 +1,13 @@
+import '@testing-library/jest-dom/vitest'
+import { cleanup } from '@testing-library/react'
+import { afterEach, beforeAll } from 'vitest'
+
+import { resetStores } from '@/stores'
+
+import { installApiMock } from './api-mock'
+
+beforeAll(() => installApiMock())
+afterEach(() => {
+  resetStores()
+  cleanup()
+})

package/templates/fe/variants/features/no-msw/variant.json

@@ -0,0 +1,4 @@
+{
+  "remove": ["src/test/msw"],
+  "removeDevDependencies": ["msw"]
+}

package/templates/fe/variants/features/no-playwright/.github/workflows/ci.yml

@@ -0,0 +1,19 @@
+name: CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+
+jobs:
+  verify:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: latest
+      - run: bun install --frozen-lockfile
+      - run: bun run rules:check
+      - run: bun run verify
+      - run: bun run build

package/templates/fe/variants/features/no-playwright/variant.json

@@ -0,0 +1,5 @@
+{
+  "remove": ["e2e", "playwright.config.ts"],
+  "removeDevDependencies": ["@playwright/test"],
+  "removeScripts": ["e2e"]
+}

package/templates/fe/variants/state/jotai/docs/agents/state-jotai.md

@@ -0,0 +1,5 @@
+## State: Jotai (client state) — deviation core-rules §7.1
+
+- `src/stores/ui.atoms.ts` → `themeAtom` (persisted), `sidebarOpenAtom`, `tableDensityAtom` + derived `tableCellClassAtom`. Provider-less in the app; `StoreProvider` = Jotai `Provider` for a fresh store per test.
+- The app never imports `jotai`: it uses the seam hooks from `@/stores` — `useTheme()`, `useTableDensity()`, `StoreProvider`, `resetStores()` (ESLint `no-restricted-imports` + `seam.test.ts`).
+- Atoms hold **client** state only; server data lives in TanStack Query. Cross-route state goes in search params.

package/templates/fe/variants/state/jotai/src/stores/index.ts

@@ -0,0 +1,15 @@
+// Barrel: the only import path for state outside src/stores (ESLint no-restricted-imports).
+// Consumers see a stable hook API; variants swap the implementation file.
+export {
+  StoreProvider,
+  TABLE_DENSITIES,
+  resetStores,
+  sidebarOpenAtom,
+  tableCellClassAtom,
+  tableDensityAtom,
+  themeAtom,
+  useTableDensity,
+  useTheme,
+  type TableDensity,
+  type Theme,
+} from './ui.atoms'

package/templates/fe/variants/state/jotai/src/stores/ui.atoms.test.tsx

@@ -0,0 +1,29 @@
+import { act, renderHook } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import { StoreProvider, useTableDensity, useTheme } from '@/stores'
+
+describe('ui atoms (jotai)', () => {
+  it('derives cell classes and toggles density', () => {
+    const { result } = renderHook(() => useTableDensity(), {
+      wrapper: StoreProvider,
+    })
+    expect(result.current).toMatchObject({
+      density: 'comfortable',
+      cellClass: 'px-4 py-3',
+    })
+    act(() => result.current.toggle())
+    expect(result.current).toMatchObject({
+      density: 'compact',
+      cellClass: 'px-2 py-1 text-sm',
+    })
+  })
+
+  it('exposes theme through the seam hook and persists it', () => {
+    const { result } = renderHook(() => useTheme(), { wrapper: StoreProvider })
+    expect(result.current.theme).toBe('light')
+    act(() => result.current.setTheme('dark'))
+    expect(result.current.theme).toBe('dark')
+    expect(localStorage.getItem('ui-theme')).toBe('"dark"')
+  })
+})

package/templates/fe/variants/state/jotai/src/stores/ui.atoms.ts

@@ -0,0 +1,39 @@
+import { Provider, atom, useAtom, useAtomValue } from 'jotai'
+import { atomWithStorage } from 'jotai/utils'
+
+export type Theme = 'light' | 'dark'
+export const TABLE_DENSITIES = ['comfortable', 'compact'] as const
+export type TableDensity = (typeof TABLE_DENSITIES)[number]
+
+// Deviation core-rules §7.1: Jotai for client state; still never server data.
+export const themeAtom = atomWithStorage<Theme>('ui-theme', 'light')
+export const sidebarOpenAtom = atom(true)
+export const tableDensityAtom = atom<TableDensity>('comfortable')
+
+/** Derived: Tailwind classes for table cells at the current density. */
+export const tableCellClassAtom = atom((get) =>
+  get(tableDensityAtom) === 'compact' ? 'px-2 py-1 text-sm' : 'px-4 py-3',
+)
+
+// ---- Seam API consumed by the app (same shape in every state variant) ----
+
+export const useTheme = () => {
+  const [theme, setTheme] = useAtom(themeAtom)
+  return { theme, setTheme }
+}
+
+export const useTableDensity = () => {
+  const [density, setDensity] = useAtom(tableDensityAtom)
+  const cellClass = useAtomValue(tableCellClassAtom)
+  return {
+    density,
+    cellClass,
+    toggle: () => setDensity(density === 'compact' ? 'comfortable' : 'compact'),
+  }
+}
+
+/** Fresh Jotai store per subtree: tests wrap with it, the app can stay provider-less. */
+export const StoreProvider = Provider
+
+/** Isolation comes from StoreProvider; nothing global to reset. */
+export const resetStores = () => undefined

package/templates/fe/variants/state/jotai/variant.json

@@ -0,0 +1,12 @@
+{
+  "dependencies": { "jotai": "^3.0.0" },
+  "agents": ["state-jotai"],
+  "eslint": { "stateLibs": ["jotai"] },
+  "deviations": [
+    {
+      "rule": "core-rules §7.1",
+      "what": "Jotai instead of Zustand for client state",
+      "why": "chosen at scaffold time; atoms stay behind the `@/stores` seam so the rest of the code is identical to the Zustand variant"
+    }
+  ]
+}

package/templates/fe/variants/state/zustand/docs/agents/state-zustand.md

@@ -0,0 +1,5 @@
+## State: Zustand (global client state)
+
+- `src/stores/ui.store.ts` → `useUiStore` (sidebar, theme, table density) with `persist`. Pattern `use<Feature>Store`, typed interface, selectors in components.
+- The app never imports `zustand`: it uses the seam hooks from `@/stores` — `useTheme()`, `useTableDensity()`, `StoreProvider`, `resetStores()` (ESLint `no-restricted-imports` + `seam.test.ts`).
+- Zustand holds **client** state only; server data lives in TanStack Query (core-rules §7). Cross-route state goes in search params.

package/templates/fe/variants/state/zustand/src/stores/index.ts

@@ -0,0 +1,12 @@
+// Barrel: the only import path for state outside src/stores (ESLint no-restricted-imports).
+// Consumers see a stable hook API; variants swap the implementation file.
+export {
+  StoreProvider,
+  TABLE_DENSITIES,
+  resetStores,
+  useTableDensity,
+  useTheme,
+  useUiStore,
+  type TableDensity,
+  type Theme,
+} from './ui.store'

package/templates/fe/variants/state/zustand/src/stores/ui.store.test.ts

@@ -0,0 +1,34 @@
+import { act, renderHook } from '@testing-library/react'
+import { beforeEach, describe, expect, it } from 'vitest'
+
+import { resetStores, useTableDensity, useTheme, useUiStore } from '@/stores'
+
+describe('ui store (zustand)', () => {
+  beforeEach(() => resetStores())
+
+  it('toggles the sidebar', () => {
+    useUiStore.getState().toggleSidebar()
+    expect(useUiStore.getState().sidebarOpen).toBe(false)
+  })
+
+  it('exposes theme through the seam hook and persists it', () => {
+    const { result } = renderHook(() => useTheme())
+    expect(result.current.theme).toBe('light')
+    act(() => result.current.setTheme('dark'))
+    expect(result.current.theme).toBe('dark')
+    expect(localStorage.getItem('ui-storage')).toContain('"theme":"dark"')
+  })
+
+  it('derives table cell classes from the density', () => {
+    const { result } = renderHook(() => useTableDensity())
+    expect(result.current).toMatchObject({
+      density: 'comfortable',
+      cellClass: 'px-4 py-3',
+    })
+    act(() => result.current.toggle())
+    expect(result.current).toMatchObject({
+      density: 'compact',
+      cellClass: 'px-2 py-1 text-sm',
+    })
+  })
+})

package/templates/fe/variants/state/zustand/src/stores/ui.store.ts

@@ -0,0 +1,62 @@
+import type { ReactNode } from 'react'
+
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+
+export type Theme = 'light' | 'dark'
+export const TABLE_DENSITIES = ['comfortable', 'compact'] as const
+export type TableDensity = (typeof TABLE_DENSITIES)[number]
+
+// core-rules §7: Zustand = global client state only (never server data).
+interface UiState {
+  sidebarOpen: boolean
+  theme: Theme
+  tableDensity: TableDensity
+  toggleSidebar: () => void
+  setTheme: (theme: Theme) => void
+  toggleTableDensity: () => void
+}
+
+const initialState = {
+  sidebarOpen: true,
+  theme: 'light' as Theme,
+  tableDensity: 'comfortable' as TableDensity,
+}
+
+export const useUiStore = create<UiState>()(
+  persist(
+    (set) => ({
+      ...initialState,
+      toggleSidebar: () => set((s) => ({ sidebarOpen: !s.sidebarOpen })),
+      setTheme: (theme) => set({ theme }),
+      toggleTableDensity: () =>
+        set((s) => ({
+          tableDensity:
+            s.tableDensity === 'compact' ? 'comfortable' : 'compact',
+        })),
+    }),
+    { name: 'ui-storage' },
+  ),
+)
+
+// ---- Seam API consumed by the app (same shape in every state variant) ----
+
+export const useTheme = () => ({
+  theme: useUiStore((s) => s.theme),
+  setTheme: useUiStore((s) => s.setTheme),
+})
+
+export const useTableDensity = () => {
+  const density = useUiStore((s) => s.tableDensity)
+  const toggle = useUiStore((s) => s.toggleTableDensity)
+  return {
+    density,
+    toggle,
+    cellClass: density === 'compact' ? 'px-2 py-1 text-sm' : 'px-4 py-3',
+  }
+}
+
+/** Zustand stores are global: nothing to provide. Tests isolate through `resetStores()`. */
+export const StoreProvider = ({ children }: { children: ReactNode }) => children
+
+export const resetStores = () => useUiStore.setState(initialState)

package/templates/fe/variants/state/zustand/variant.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": { "zustand": "^5.0.15" },
+  "agents": ["state-zustand"],
+  "eslint": { "stateLibs": ["zustand"] }
+}

package/templates/fe/variants/ui/base-ui/components.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "base-nova",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "menuColor": "default",
+  "menuAccent": "subtle",
+  "registries": {}
+}

package/templates/fe/variants/ui/base-ui/docs/agents/ui-base-ui.md

@@ -0,0 +1,7 @@
+## UI: shadcn on Base UI
+
+- `components.json`: style `base-nova` (Base UI preset of the shadcn v4 CLI), baseColor `neutral`, iconLibrary `lucide`, css `src/index.css`.
+- Components only via `bunx shadcn@latest add <name>`; never edit `src/components/ui/*` by hand (ESLint/Prettier ignore it).
+- UI seam: the UI library touches only `components.json`, `src/components/ui/*`, `src/index.css`. `@base-ui/*` is imported only inside `src/components/ui/` (enforced by `no-restricted-imports`); everything else composes the wrappers (`Button`, `Input`, `Table`, …).
+- `cn()` comes from `@/lib/utils` (shadcn's `cn` package, drop-in for clsx + tailwind-merge).
+- Single CSS file `src/index.css`: Tailwind, tw-animate-css, shadcn/tailwind.css, theme variables. No other `.css`.

package/templates/fe/variants/ui/base-ui/src/components/ui/alert.tsx

@@ -0,0 +1,75 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "cn"
+
+const alertVariants = cva(
+  "group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-action"
+      className={cn("absolute top-2 right-2", className)}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription, AlertAction }

package/templates/fe/variants/ui/base-ui/src/components/ui/button.tsx

@@ -0,0 +1,57 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "cn"
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

package/templates/fe/variants/ui/base-ui/src/components/ui/input.tsx

@@ -0,0 +1,19 @@
+import * as React from "react"
+import { Input as InputPrimitive } from "@base-ui/react/input"
+import { cn } from "cn"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <InputPrimitive
+      type={type}
+      data-slot="input"
+      className={cn(
+        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

package/templates/fe/variants/ui/base-ui/src/components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "cn"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }