create-davepi-ui 0.1.0

package/templates/default/src/widgets/SwitchWidget.tsx

@@ -0,0 +1,20 @@
+import { Switch } from '@/components/ui/switch';
+import type { WidgetComponentProps } from './types';
+
+export function SwitchWidget({
+  value,
+  onChange,
+  disabled,
+  id,
+  name,
+}: WidgetComponentProps<boolean | undefined>) {
+  return (
+    <Switch
+      id={id}
+      name={name}
+      checked={value ?? false}
+      onCheckedChange={(next) => onChange(next)}
+      disabled={disabled}
+    />
+  );
+}

package/templates/default/src/widgets/TagInput.tsx

@@ -0,0 +1,83 @@
+import { useState, type KeyboardEvent } from 'react';
+import { X } from 'lucide-react';
+import { Input } from '@/components/ui/input';
+import type { WidgetComponentProps } from './types';
+
+/**
+ * Comma-delimited / Enter-delimited tag input. Backing value is a string
+ * array. Empty state renders just the input; values render as chips with
+ * an X to remove.
+ */
+export function TagInput({
+  value,
+  onChange,
+  onBlur,
+  disabled,
+  readOnly,
+  id,
+  name,
+  placeholder,
+}: WidgetComponentProps<string[] | undefined>) {
+  const tags = value ?? [];
+  const [pending, setPending] = useState('');
+
+  function commit(raw: string) {
+    const next = raw.trim();
+    if (!next) return;
+    if (tags.includes(next)) return;
+    onChange([...tags, next]);
+    setPending('');
+  }
+
+  function remove(index: number) {
+    onChange(tags.filter((_, i) => i !== index));
+  }
+
+  function handleKey(e: KeyboardEvent<HTMLInputElement>) {
+    if (e.key === 'Enter' || e.key === ',') {
+      e.preventDefault();
+      commit(pending);
+    } else if (e.key === 'Backspace' && pending === '' && tags.length) {
+      e.preventDefault();
+      remove(tags.length - 1);
+    }
+  }
+
+  return (
+    <div className="flex flex-wrap items-center gap-1 rounded-md border border-input bg-background p-1">
+      {tags.map((t, i) => (
+        <span
+          key={`${t}:${i}`}
+          className="inline-flex items-center gap-1 rounded-sm bg-secondary px-2 py-0.5 text-xs text-secondary-foreground"
+        >
+          {t}
+          {!readOnly && !disabled ? (
+            <button
+              type="button"
+              aria-label={`Remove ${t}`}
+              className="rounded-sm hover:bg-muted"
+              onClick={() => remove(i)}
+            >
+              <X className="h-3 w-3" />
+            </button>
+          ) : null}
+        </span>
+      ))}
+      <Input
+        id={id}
+        name={name}
+        value={pending}
+        disabled={disabled}
+        readOnly={readOnly}
+        placeholder={tags.length ? undefined : (placeholder ?? 'Add tag…')}
+        className="h-7 flex-1 border-0 bg-transparent p-0 shadow-none focus-visible:ring-0"
+        onChange={(e) => setPending(e.target.value)}
+        onKeyDown={handleKey}
+        onBlur={() => {
+          commit(pending);
+          onBlur?.();
+        }}
+      />
+    </div>
+  );
+}

package/templates/default/src/widgets/TextAreaWidget.tsx

@@ -0,0 +1,27 @@
+import { Textarea } from '@/components/ui/textarea';
+import type { WidgetComponentProps } from './types';
+
+export function TextAreaWidget({
+  value,
+  onChange,
+  onBlur,
+  disabled,
+  readOnly,
+  id,
+  name,
+  placeholder,
+}: WidgetComponentProps<string | undefined>) {
+  return (
+    <Textarea
+      id={id}
+      name={name}
+      value={value ?? ''}
+      onChange={(e) => onChange(e.target.value)}
+      onBlur={onBlur}
+      disabled={disabled}
+      readOnly={readOnly}
+      placeholder={placeholder}
+      rows={4}
+    />
+  );
+}

package/templates/default/src/widgets/TextInput.tsx

@@ -0,0 +1,32 @@
+import { Input } from '@/components/ui/input';
+import type { WidgetComponentProps } from './types';
+
+/**
+ * Single-line text widget. Used for plain String fields.
+ *
+ * @example
+ * <TextInput spec={spec} value={value ?? ''} onChange={onChange} />
+ */
+export function TextInput({
+  value,
+  onChange,
+  onBlur,
+  disabled,
+  readOnly,
+  id,
+  name,
+  placeholder,
+}: WidgetComponentProps<string | undefined>) {
+  return (
+    <Input
+      id={id}
+      name={name}
+      value={value ?? ''}
+      onChange={(e) => onChange(e.target.value)}
+      onBlur={onBlur}
+      disabled={disabled}
+      readOnly={readOnly}
+      placeholder={placeholder}
+    />
+  );
+}

package/templates/default/src/widgets/UrlInput.tsx

@@ -0,0 +1,27 @@
+import { Input } from '@/components/ui/input';
+import type { WidgetComponentProps } from './types';
+
+export function UrlInput({
+  value,
+  onChange,
+  onBlur,
+  disabled,
+  readOnly,
+  id,
+  name,
+  placeholder,
+}: WidgetComponentProps<string | undefined>) {
+  return (
+    <Input
+      id={id}
+      name={name}
+      type="url"
+      value={value ?? ''}
+      onChange={(e) => onChange(e.target.value || undefined)}
+      onBlur={onBlur}
+      disabled={disabled}
+      readOnly={readOnly}
+      placeholder={placeholder ?? 'https://…'}
+    />
+  );
+}

package/templates/default/src/widgets/registry.ts

@@ -0,0 +1,51 @@
+import type { ComponentType } from 'react';
+import type { WidgetKind } from '@davepi/ui-core';
+import type { WidgetComponentProps } from './types';
+
+import { TextInput } from './TextInput';
+import { TextAreaWidget } from './TextAreaWidget';
+import { NumberInput } from './NumberInput';
+import { SwitchWidget } from './SwitchWidget';
+import { DateInput } from './DateInput';
+import { EnumSelect } from './EnumSelect';
+import { TagInput } from './TagInput';
+import { EmailInput } from './EmailInput';
+import { UrlInput } from './UrlInput';
+import { CurrencyInput } from './CurrencyInput';
+import { JsonEditor } from './JsonEditor';
+import { MultiRelationPicker, RelationPicker } from './RelationPicker';
+import { FileUploaderStub } from './FileUploaderStub';
+
+/**
+ * Maps every `WidgetKind` to its React implementation.
+ *
+ * Override at runtime by passing a custom registry to `<ResourceForm>`.
+ * Unknown kinds fall back to `TextInput` rather than throwing — the UI
+ * stays functional even if a future widget hint isn't recognised yet.
+ */
+export const widgetRegistry: Record<WidgetKind, ComponentType<WidgetComponentProps<any>>> = {
+  TextInput,
+  TextArea: TextAreaWidget,
+  NumberInput,
+  Switch: SwitchWidget,
+  DatePicker: DateInput,
+  EnumSelect,
+  TagInput,
+  EmailInput,
+  UrlInput,
+  CurrencyInput,
+  RelationPicker,
+  MultiRelationPicker,
+  FileUploader: FileUploaderStub,
+  JsonEditor,
+  RichTextEditor: TextAreaWidget,
+};
+
+export function resolveWidgetComponent(
+  kind: WidgetKind,
+  overrides?: Partial<typeof widgetRegistry>
+): ComponentType<WidgetComponentProps<any>> {
+  return overrides?.[kind] ?? widgetRegistry[kind] ?? TextInput;
+}
+
+export type { WidgetComponentProps } from './types';

package/templates/default/src/widgets/types.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+import type { WidgetSpec } from '@davepi/ui-core';
+
+/**
+ * Contract every davepi-ui widget implements.
+ *
+ * Widgets are *controlled* — they receive a value + onChange so they can
+ * plug into react-hook-form via the Controller render prop. Errors come
+ * from RHF and are presented inline by the parent FormField wrapper.
+ */
+export interface WidgetComponentProps<T = unknown> {
+  spec: WidgetSpec;
+  value: T;
+  onChange: (next: T) => void;
+  onBlur?: () => void;
+  disabled?: boolean;
+  readOnly?: boolean;
+  id?: string;
+  name?: string;
+  /** Field-level validation error message. */
+  error?: string;
+  /** Auxiliary helper text rendered below the field. */
+  description?: ReactNode;
+  /** Placeholder rendered inside the input where supported. */
+  placeholder?: string;
+}

package/templates/default/tailwind.config.ts

@@ -0,0 +1,54 @@
+import type { Config } from 'tailwindcss';
+
+const config: Config = {
+  darkMode: ['class'],
+  content: ['./index.html', './src/**/*.{ts,tsx}'],
+  theme: {
+    container: {
+      center: true,
+      padding: '2rem',
+      screens: { '2xl': '1400px' },
+    },
+    extend: {
+      colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+    },
+  },
+  plugins: [],
+};
+
+export default config;

package/templates/default/tsconfig.json

@@ -0,0 +1,40 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitOverride": true,
+    "forceConsistentCasingInFileNames": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "jsx": "react-jsx",
+    "outDir": "dist",
+    "rootDir": "src",
+    "noEmit": true,
+    "allowImportingTsExtensions": false,
+    "types": [
+      "vite/client"
+    ],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    }
+  },
+  "include": [
+    "src/**/*"
+  ]
+}

package/templates/default/vite.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'node:path';
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+  server: {
+    port: 5173,
+    strictPort: false,
+  },
+});

package/templates/pinned-versions.json

@@ -0,0 +1,5 @@
+{
+  "@davepi/ui-core": "^0.1.1",
+  "@davepi/ui-mcp": "^0.1.1",
+  "@davepi/ui-react": "^0.1.1"
+}