@fragments-sdk/viewer 0.2.1

package/src/components/LandingPage.tsx

@@ -0,0 +1,420 @@
+import { useForm, Controller } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { useState, useRef, useEffect } from 'react';
+import { HexColorPicker } from 'react-colorful';
+import { Box, Button, Input, Toggle, Stack, Text, Card, Field, Separator, Select } from '@fragments-sdk/ui';
+import { generateColorScheme, type ColorSchemeType } from '../utils/colorSchemes.js';
+import { ChevronDownIcon } from './Icons.js';
+
+const formSchema = z.object({
+  projectName: z.string().min(2, 'Project name must be at least 2 characters'),
+  componentName: z.string().min(2, 'Component name must be at least 2 characters'),
+  description: z.string().optional(),
+  headlessLibrary: z.enum(['radix', 'base-ui']),
+  colorSchemeType: z.enum(['monochromatic', 'complementary', 'analogous', 'triadic', 'split-complementary', 'tetradic']),
+  primaryColor: z.string().regex(/^#[0-9A-Fa-f]{6}$/, 'Must be a valid hex color'),
+  darkMode: z.boolean(),
+  borderRadius: z.enum(['none', 'sm', 'md', 'lg', 'full']),
+});
+
+export type LandingFormData = z.infer<typeof formSchema>;
+
+interface LandingPageProps {
+  onSubmit?: (data: LandingFormData) => void;
+}
+
+const SCHEME_OPTIONS: Array<{
+  value: ColorSchemeType;
+  label: string;
+  description: string;
+  colorCount: number;
+}> = [
+  { value: 'monochromatic', label: 'Monochromatic', description: 'Variations of a single hue', colorCount: 5 },
+  { value: 'complementary', label: 'Complementary', description: 'Two opposite colors', colorCount: 2 },
+  { value: 'analogous', label: 'Analogous', description: 'Three adjacent colors', colorCount: 3 },
+  { value: 'triadic', label: 'Triadic', description: 'Three evenly spaced colors', colorCount: 3 },
+  { value: 'split-complementary', label: 'Split Complementary', description: 'Base + two adjacent to complement', colorCount: 3 },
+  { value: 'tetradic', label: 'Tetradic (Square)', description: 'Four evenly spaced colors', colorCount: 4 },
+];
+
+function getSchemeKeyColors(baseColor: string, type: ColorSchemeType): string[] {
+  const fullPalette = generateColorScheme(baseColor, type);
+
+  switch (type) {
+    case 'monochromatic':
+      return fullPalette;
+    case 'complementary':
+      return [fullPalette[1], fullPalette[3]];
+    case 'analogous':
+      return [fullPalette[0], fullPalette[2], fullPalette[4]];
+    case 'triadic':
+      return [fullPalette[0], fullPalette[2], fullPalette[4]];
+    case 'split-complementary':
+      return [fullPalette[0], fullPalette[2], fullPalette[4]];
+    case 'tetradic':
+      return [fullPalette[0], fullPalette[1], fullPalette[2], fullPalette[3]];
+    default:
+      return fullPalette;
+  }
+}
+
+export function LandingPage({ onSubmit }: LandingPageProps) {
+  const [showColorPicker, setShowColorPicker] = useState(false);
+  const colorPickerRef = useRef<HTMLDivElement>(null);
+
+  const {
+    register,
+    handleSubmit,
+    watch,
+    control,
+    setValue,
+    formState: { errors, isSubmitting },
+  } = useForm<LandingFormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      projectName: '',
+      componentName: '',
+      description: '',
+      headlessLibrary: 'radix',
+      colorSchemeType: 'monochromatic',
+      primaryColor: '#10a37f',
+      darkMode: true,
+      borderRadius: 'md',
+    },
+  });
+
+  const primaryColor = watch('primaryColor');
+  const colorSchemeType = watch('colorSchemeType');
+
+  const currentPalette = getSchemeKeyColors(primaryColor, colorSchemeType);
+  const currentScheme = SCHEME_OPTIONS.find(s => s.value === colorSchemeType);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (colorPickerRef.current && !colorPickerRef.current.contains(event.target as Node)) {
+        setShowColorPicker(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const handleFormSubmit = (data: LandingFormData) => {
+    onSubmit?.(data);
+  };
+
+  return (
+    <Box background="primary" style={{ minHeight: '100vh' }}>
+      <div style={{ maxWidth: '672px', margin: '0 auto', padding: '64px 24px' }}>
+        {/* Header */}
+        <Stack direction="column" gap="sm" style={{ marginBottom: '48px' }}>
+          <Text as="h1" size="xl" weight="semibold">Create Component</Text>
+          <Text color="secondary">Configure your component settings below.</Text>
+        </Stack>
+
+        <form onSubmit={handleSubmit(handleFormSubmit)}>
+          <Stack direction="column" gap="lg">
+            {/* Project Name */}
+            <Field>
+              <Field.Label>Project Name</Field.Label>
+              <Field.Control>
+                <Input
+                  {...register('projectName')}
+                  placeholder="my-design-system"
+                  style={errors.projectName ? { boxShadow: '0 0 0 1px #ef4444' } : {}}
+                />
+              </Field.Control>
+              {errors.projectName && (
+                <Field.Error>{errors.projectName.message}</Field.Error>
+              )}
+            </Field>
+
+            {/* Component Name */}
+            <Field>
+              <Field.Label>Component Name</Field.Label>
+              <Field.Control>
+                <Input
+                  {...register('componentName')}
+                  placeholder="Button"
+                  style={errors.componentName ? { boxShadow: '0 0 0 1px #ef4444' } : {}}
+                />
+              </Field.Control>
+              {errors.componentName && (
+                <Field.Error>{errors.componentName.message}</Field.Error>
+              )}
+            </Field>
+
+            {/* Description */}
+            <Field>
+              <Field.Label>Description</Field.Label>
+              <Field.Control>
+                <textarea
+                  {...register('description')}
+                  rows={2}
+                  placeholder="A brief description of the component"
+                  style={{
+                    width: '100%',
+                    padding: '12px 16px',
+                    borderRadius: '12px',
+                    fontSize: '14px',
+                    backgroundColor: 'var(--bg-tertiary)',
+                    color: 'var(--text-primary)',
+                    border: '1px solid transparent',
+                    outline: 'none',
+                    transition: 'all 150ms',
+                    resize: 'none',
+                  }}
+                  onFocus={(e) => { e.currentTarget.style.boxShadow = '0 0 0 1px var(--border-strong)'; }}
+                  onBlur={(e) => { e.currentTarget.style.boxShadow = 'none'; }}
+                />
+              </Field.Control>
+            </Field>
+
+            <Separator />
+
+            {/* Headless Library */}
+            <Field>
+              <Field.Label>Headless Library</Field.Label>
+              <Field.Control>
+                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' }}>
+                  {[
+                    { value: 'radix', label: 'Radix UI', desc: 'Accessible primitives' },
+                    { value: 'base-ui', label: 'Base UI', desc: 'Hooks-first approach' },
+                  ].map((lib) => (
+                    <label
+                      key={lib.value}
+                      style={{
+                        display: 'flex',
+                        flexDirection: 'column',
+                        padding: '16px',
+                        borderRadius: '12px',
+                        cursor: 'pointer',
+                        transition: 'all 150ms',
+                        border: watch('headlessLibrary') === lib.value
+                          ? '1px solid var(--color-accent)'
+                          : '1px solid var(--border)',
+                        backgroundColor: watch('headlessLibrary') === lib.value
+                          ? 'rgba(16, 163, 127, 0.05)'
+                          : 'transparent',
+                      }}
+                    >
+                      <input
+                        type="radio"
+                        {...register('headlessLibrary')}
+                        value={lib.value}
+                        style={{ position: 'absolute', width: '1px', height: '1px', overflow: 'hidden', clip: 'rect(0,0,0,0)' }}
+                      />
+                      <Text size="sm" weight="medium">{lib.label}</Text>
+                      <Text size="xs" color="tertiary" style={{ marginTop: '2px' }}>{lib.desc}</Text>
+                    </label>
+                  ))}
+                </div>
+              </Field.Control>
+            </Field>
+
+            <Separator />
+
+            {/* Color Scheme */}
+            <Field>
+              <Field.Label>Color Scheme</Field.Label>
+              <Field.Control>
+                <Stack direction="column" gap="md">
+                  {/* Primary Color */}
+                  <Stack direction="row" align="center" gap="md">
+                    <div style={{ position: 'relative' }} ref={colorPickerRef}>
+                      <button
+                        type="button"
+                        onClick={() => setShowColorPicker(!showColorPicker)}
+                        style={{
+                          width: '48px',
+                          height: '48px',
+                          borderRadius: '8px',
+                          border: '1px solid var(--border)',
+                          cursor: 'pointer',
+                          backgroundColor: primaryColor,
+                        }}
+                      />
+                      {showColorPicker && (
+                        <div style={{
+                          position: 'absolute',
+                          top: '56px',
+                          left: 0,
+                          zIndex: 50,
+                          padding: '12px',
+                          borderRadius: '12px',
+                          backgroundColor: 'var(--bg-elevated)',
+                          border: '1px solid var(--border)',
+                          boxShadow: 'var(--shadow-lg)',
+                        }}>
+                          <Controller
+                            name="primaryColor"
+                            control={control}
+                            render={({ field }) => (
+                              <HexColorPicker color={field.value} onChange={field.onChange} />
+                            )}
+                          />
+                          <Input
+                            value={primaryColor}
+                            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setValue('primaryColor', e.target.value)}
+                            size="sm"
+                            style={{ width: '100%', marginTop: '12px', fontFamily: 'monospace' }}
+                          />
+                        </div>
+                      )}
+                    </div>
+                    <div style={{ flex: 1 }}>
+                      <Input
+                        value={primaryColor}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setValue('primaryColor', e.target.value)}
+                        style={{ fontFamily: 'monospace' }}
+                      />
+                    </div>
+                  </Stack>
+
+                  {/* Scheme Type Dropdown */}
+                  <Select
+                    value={colorSchemeType}
+                    onValueChange={(value: string) => setValue('colorSchemeType', value as ColorSchemeType)}
+                  >
+                    <Select.Trigger>
+                      <Stack direction="row" align="center" gap="sm">
+                        <div style={{ display: 'flex', gap: '2px' }}>
+                          {getSchemeKeyColors(primaryColor, colorSchemeType).map((color, i) => (
+                            <div
+                              key={i}
+                              style={{ width: '16px', height: '16px', borderRadius: '2px', backgroundColor: color }}
+                            />
+                          ))}
+                        </div>
+                        <span>{currentScheme?.label}</span>
+                        <Text as="span" color="tertiary">-- {currentScheme?.description}</Text>
+                      </Stack>
+                    </Select.Trigger>
+                    <Select.Content>
+                      {SCHEME_OPTIONS.map((scheme) => (
+                        <Select.Item key={scheme.value} value={scheme.value}>
+                          <Stack direction="row" align="center" gap="sm">
+                            <div style={{ display: 'flex', gap: '2px', flexShrink: 0 }}>
+                              {getSchemeKeyColors(primaryColor, scheme.value).map((color, i) => (
+                                <div
+                                  key={i}
+                                  style={{ width: '20px', height: '20px', borderRadius: '2px', backgroundColor: color }}
+                                />
+                              ))}
+                            </div>
+                            <div>
+                              <Text size="sm">{scheme.label}</Text>
+                              <Text size="xs" color="tertiary">{scheme.description}</Text>
+                            </div>
+                          </Stack>
+                        </Select.Item>
+                      ))}
+                    </Select.Content>
+                  </Select>
+
+                  {/* Current Palette Preview */}
+                  <div>
+                    <div style={{ display: 'flex', gap: '6px' }}>
+                      {currentPalette.map((color, i) => (
+                        <div
+                          key={i}
+                          style={{
+                            flex: 1,
+                            height: '48px',
+                            borderRadius: '8px',
+                            transition: 'background-color 150ms',
+                            backgroundColor: color,
+                          }}
+                        />
+                      ))}
+                    </div>
+                    <Text size="xs" color="tertiary" style={{ marginTop: '8px' }}>
+                      {currentScheme?.colorCount} color {currentScheme?.label.toLowerCase()} palette
+                    </Text>
+                  </div>
+                </Stack>
+              </Field.Control>
+            </Field>
+
+            <Separator />
+
+            {/* Style Options */}
+            <Stack direction="column" gap="lg">
+              {/* Border Radius */}
+              <Stack direction="row" align="center" justify="between">
+                <div>
+                  <Text size="sm">Border Radius</Text>
+                  <Text size="xs" color="tertiary" style={{ marginTop: '2px' }}>Component corner style</Text>
+                </div>
+                <div style={{
+                  display: 'flex',
+                  gap: '4px',
+                  backgroundColor: 'var(--bg-tertiary)',
+                  padding: '4px',
+                  borderRadius: '8px',
+                }}>
+                  {(['none', 'sm', 'md', 'lg', 'full'] as const).map((radius) => (
+                    <label
+                      key={radius}
+                      style={{
+                        padding: '6px 12px',
+                        fontSize: '12px',
+                        fontWeight: 500,
+                        borderRadius: '6px',
+                        cursor: 'pointer',
+                        transition: 'all 150ms',
+                        color: watch('borderRadius') === radius ? 'var(--text-primary)' : 'var(--text-tertiary)',
+                        backgroundColor: watch('borderRadius') === radius ? 'var(--bg-primary)' : 'transparent',
+                        boxShadow: watch('borderRadius') === radius ? 'var(--shadow-sm)' : 'none',
+                      }}
+                    >
+                      <input
+                        type="radio"
+                        {...register('borderRadius')}
+                        value={radius}
+                        style={{ position: 'absolute', width: '1px', height: '1px', overflow: 'hidden', clip: 'rect(0,0,0,0)' }}
+                      />
+                      {radius}
+                    </label>
+                  ))}
+                </div>
+              </Stack>
+
+              {/* Dark Mode */}
+              <Stack direction="row" align="center" justify="between">
+                <div>
+                  <Text size="sm">Dark Mode</Text>
+                  <Text size="xs" color="tertiary" style={{ marginTop: '2px' }}>Include dark theme styles</Text>
+                </div>
+                <Controller
+                  name="darkMode"
+                  control={control}
+                  render={({ field }) => (
+                    <Toggle
+                      checked={field.value}
+                      onCheckedChange={field.onChange}
+                    />
+                  )}
+                />
+              </Stack>
+            </Stack>
+
+            <Separator />
+
+            {/* Submit */}
+            <Button
+              type="submit"
+              variant="primary"
+              size="lg"
+              fullWidth
+              disabled={isSubmitting}
+            >
+              {isSubmitting ? 'Creating...' : 'Create Component'}
+            </Button>
+          </Stack>
+        </form>
+      </div>
+    </Box>
+  );
+}

package/src/components/Layout.tsx

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+import { DocsPageShell } from '../shared/DocsPageShell';
+
+interface LayoutProps {
+  leftSidebar: ReactNode;
+  header: ReactNode;
+  children: ReactNode;
+  aside?: ReactNode;
+}
+
+export function Layout({ leftSidebar, header, children, aside }: LayoutProps) {
+  return (
+    <DocsPageShell
+      header={header}
+      sidebar={leftSidebar}
+      sidebarWidth="260px"
+      sidebarCollapsible="icon"
+      sidebarAriaLabel="Preview sidebar"
+      mainAriaLabel="Preview content"
+      mainPadding="none"
+      aside={aside}
+      asideWidth="240px"
+    >
+      {children}
+    </DocsPageShell>
+  );
+}