@fragments-sdk/cli 0.2.2

package/src/viewer/components/LandingPage.tsx

@@ -0,0 +1,441 @@
+import { useForm, Controller } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { useState, useRef, useEffect } from 'react';
+import clsx from 'clsx';
+import { HexColorPicker } from 'react-colorful';
+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;
+}
+
+// Scheme options with color counts
+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 },
+];
+
+// Get the key colors for a scheme (not all variations, just the distinct hues)
+function getSchemeKeyColors(baseColor: string, type: ColorSchemeType): string[] {
+  const fullPalette = generateColorScheme(baseColor, type);
+
+  switch (type) {
+    case 'monochromatic':
+      return fullPalette; // All 5 variations
+    case 'complementary':
+      return [fullPalette[1], fullPalette[3]]; // Base and complement
+    case 'analogous':
+      return [fullPalette[0], fullPalette[2], fullPalette[4]]; // -30°, base, +30°
+    case 'triadic':
+      return [fullPalette[0], fullPalette[2], fullPalette[4]]; // 0°, 120°, 240°
+    case 'split-complementary':
+      return [fullPalette[0], fullPalette[2], fullPalette[4]]; // Base, +150°, +210°
+    case 'tetradic':
+      return [fullPalette[0], fullPalette[1], fullPalette[2], fullPalette[3]]; // 0°, 90°, 180°, 270°
+    default:
+      return fullPalette;
+  }
+}
+
+export function LandingPage({ onSubmit }: LandingPageProps) {
+  const [showColorPicker, setShowColorPicker] = useState(false);
+  const [showSchemeDropdown, setShowSchemeDropdown] = useState(false);
+  const colorPickerRef = useRef<HTMLDivElement>(null);
+  const schemeDropdownRef = 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');
+
+  // Generate current palette based on selected color and scheme
+  const currentPalette = getSchemeKeyColors(primaryColor, colorSchemeType);
+  const currentScheme = SCHEME_OPTIONS.find(s => s.value === colorSchemeType);
+
+  // Close dropdowns when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (colorPickerRef.current && !colorPickerRef.current.contains(event.target as Node)) {
+        setShowColorPicker(false);
+      }
+      if (schemeDropdownRef.current && !schemeDropdownRef.current.contains(event.target as Node)) {
+        setShowSchemeDropdown(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const handleFormSubmit = (data: LandingFormData) => {
+    console.log('Form submitted:', data);
+    onSubmit?.(data);
+  };
+
+  return (
+    <div className="min-h-screen bg-[--bg-primary]">
+      <div className="max-w-2xl mx-auto px-6 py-16">
+        {/* Header */}
+        <div className="mb-12">
+          <h1 className="text-2xl font-semibold text-primary mb-2">
+            Create Component
+          </h1>
+          <p className="text-secondary">
+            Configure your component settings below.
+          </p>
+        </div>
+
+        <form onSubmit={handleSubmit(handleFormSubmit)} className="space-y-8">
+          {/* Project Name */}
+          <div>
+            <label className="block text-sm text-primary mb-2">
+              Project Name
+            </label>
+            <input
+              {...register('projectName')}
+              placeholder="my-design-system"
+              className={clsx(
+                'w-full px-4 py-3 rounded-xl text-sm',
+                'bg-[--bg-tertiary] text-primary placeholder:text-tertiary',
+                'border border-transparent',
+                'focus:outline-none focus:ring-1 focus:ring-[--border-strong]',
+                'transition-all',
+                errors.projectName && 'ring-1 ring-red-500'
+              )}
+            />
+            {errors.projectName && (
+              <p className="mt-2 text-xs text-red-400">{errors.projectName.message}</p>
+            )}
+          </div>
+
+          {/* Component Name */}
+          <div>
+            <label className="block text-sm text-primary mb-2">
+              Component Name
+            </label>
+            <input
+              {...register('componentName')}
+              placeholder="Button"
+              className={clsx(
+                'w-full px-4 py-3 rounded-xl text-sm',
+                'bg-[--bg-tertiary] text-primary placeholder:text-tertiary',
+                'border border-transparent',
+                'focus:outline-none focus:ring-1 focus:ring-[--border-strong]',
+                'transition-all',
+                errors.componentName && 'ring-1 ring-red-500'
+              )}
+            />
+            {errors.componentName && (
+              <p className="mt-2 text-xs text-red-400">{errors.componentName.message}</p>
+            )}
+          </div>
+
+          {/* Description */}
+          <div>
+            <label className="block text-sm text-primary mb-2">
+              Description
+            </label>
+            <textarea
+              {...register('description')}
+              rows={2}
+              placeholder="A brief description of the component"
+              className={clsx(
+                'w-full px-4 py-3 rounded-xl text-sm resize-none',
+                'bg-[--bg-tertiary] text-primary placeholder:text-tertiary',
+                'border border-transparent',
+                'focus:outline-none focus:ring-1 focus:ring-[--border-strong]',
+                'transition-all'
+              )}
+            />
+          </div>
+
+          <div className="h-px bg-[--border]" />
+
+          {/* Headless Library */}
+          <div>
+            <label className="block text-sm text-primary mb-4">
+              Headless Library
+            </label>
+            <div className="grid grid-cols-2 gap-3">
+              {[
+                { value: 'radix', label: 'Radix UI', desc: 'Accessible primitives' },
+                { value: 'base-ui', label: 'Base UI', desc: 'Hooks-first approach' },
+              ].map((lib) => (
+                <label
+                  key={lib.value}
+                  className={clsx(
+                    'flex flex-col p-4 rounded-xl cursor-pointer transition-all',
+                    'border',
+                    watch('headlessLibrary') === lib.value
+                      ? 'border-[--color-accent] bg-[--color-accent]/5'
+                      : 'border-[--border] hover:border-[--border-strong]'
+                  )}
+                >
+                  <input
+                    type="radio"
+                    {...register('headlessLibrary')}
+                    value={lib.value}
+                    className="sr-only"
+                  />
+                  <span className="text-sm font-medium text-primary">{lib.label}</span>
+                  <span className="text-xs text-tertiary mt-0.5">{lib.desc}</span>
+                </label>
+              ))}
+            </div>
+          </div>
+
+          <div className="h-px bg-[--border]" />
+
+          {/* Color Scheme */}
+          <div>
+            <label className="block text-sm text-primary mb-4">
+              Color Scheme
+            </label>
+
+            <div className="space-y-4">
+              {/* Primary Color */}
+              <div className="flex items-center gap-4">
+                <div className="relative" ref={colorPickerRef}>
+                  <button
+                    type="button"
+                    onClick={() => setShowColorPicker(!showColorPicker)}
+                    className="w-12 h-12 rounded-lg border border-[--border] hover:border-[--border-strong] transition-colors"
+                    style={{ backgroundColor: primaryColor }}
+                  />
+                  {showColorPicker && (
+                    <div className="absolute top-14 left-0 z-50 p-3 rounded-xl bg-[--bg-elevated] border border-[--border] shadow-xl">
+                      <Controller
+                        name="primaryColor"
+                        control={control}
+                        render={({ field }) => (
+                          <HexColorPicker color={field.value} onChange={field.onChange} />
+                        )}
+                      />
+                      <input
+                        type="text"
+                        value={primaryColor}
+                        onChange={(e) => setValue('primaryColor', e.target.value)}
+                        className="w-full mt-3 px-3 py-2 rounded-lg text-xs font-mono bg-[--bg-tertiary] text-primary border border-transparent focus:outline-none focus:ring-1 focus:ring-[--border-strong]"
+                      />
+                    </div>
+                  )}
+                </div>
+                <div className="flex-1">
+                  <input
+                    type="text"
+                    value={primaryColor}
+                    onChange={(e) => setValue('primaryColor', e.target.value)}
+                    className="w-full px-4 py-3 rounded-xl text-sm font-mono bg-[--bg-tertiary] text-primary border border-transparent focus:outline-none focus:ring-1 focus:ring-[--border-strong]"
+                  />
+                </div>
+              </div>
+
+              {/* Custom Scheme Type Dropdown */}
+              <div className="relative" ref={schemeDropdownRef}>
+                <button
+                  type="button"
+                  onClick={() => setShowSchemeDropdown(!showSchemeDropdown)}
+                  className={clsx(
+                    'w-full px-4 py-3 rounded-xl text-sm text-left',
+                    'bg-[--bg-tertiary] text-primary',
+                    'border border-transparent',
+                    'focus:outline-none focus:ring-1 focus:ring-[--border-strong]',
+                    'flex items-center justify-between',
+                    showSchemeDropdown && 'ring-1 ring-[--border-strong]'
+                  )}
+                >
+                  <div className="flex items-center gap-3">
+                    {/* Mini palette preview */}
+                    <div className="flex gap-0.5">
+                      {getSchemeKeyColors(primaryColor, colorSchemeType).map((color, i) => (
+                        <div
+                          key={i}
+                          className="w-4 h-4 rounded-sm first:rounded-l last:rounded-r"
+                          style={{ backgroundColor: color }}
+                        />
+                      ))}
+                    </div>
+                    <span>{currentScheme?.label}</span>
+                    <span className="text-tertiary">— {currentScheme?.description}</span>
+                  </div>
+                  <ChevronDownIcon className={clsx('w-4 h-4 text-tertiary transition-transform', showSchemeDropdown && 'rotate-180')} />
+                </button>
+
+                {showSchemeDropdown && (
+                  <div className="absolute top-full left-0 right-0 mt-2 z-40 py-2 rounded-xl bg-[--bg-elevated] border border-[--border] shadow-xl">
+                    {SCHEME_OPTIONS.map((scheme) => {
+                      const schemeColors = getSchemeKeyColors(primaryColor, scheme.value);
+                      const isSelected = colorSchemeType === scheme.value;
+
+                      return (
+                        <button
+                          key={scheme.value}
+                          type="button"
+                          onClick={() => {
+                            setValue('colorSchemeType', scheme.value);
+                            setShowSchemeDropdown(false);
+                          }}
+                          className={clsx(
+                            'w-full px-4 py-3 text-left flex items-center gap-3',
+                            'hover:bg-[--bg-hover] transition-colors',
+                            isSelected && 'bg-[--bg-tertiary]'
+                          )}
+                        >
+                          {/* Color preview swatches */}
+                          <div className="flex gap-0.5 shrink-0">
+                            {schemeColors.map((color, i) => (
+                              <div
+                                key={i}
+                                className="w-5 h-5 rounded-sm first:rounded-l last:rounded-r"
+                                style={{ backgroundColor: color }}
+                              />
+                            ))}
+                          </div>
+                          <div className="flex-1 min-w-0">
+                            <div className="flex items-center gap-2">
+                              {isSelected && <span className="text-[--color-accent]">✓</span>}
+                              <span className={clsx('text-sm', isSelected ? 'text-primary font-medium' : 'text-primary')}>
+                                {scheme.label}
+                              </span>
+                            </div>
+                            <span className="text-xs text-tertiary">{scheme.description}</span>
+                          </div>
+                        </button>
+                      );
+                    })}
+                  </div>
+                )}
+              </div>
+
+              {/* Current Palette Preview */}
+              <div>
+                <div className="flex gap-1.5">
+                  {currentPalette.map((color, i) => (
+                    <div
+                      key={i}
+                      className="flex-1 h-12 rounded-lg first:rounded-l-xl last:rounded-r-xl transition-colors"
+                      style={{ backgroundColor: color }}
+                    />
+                  ))}
+                </div>
+                <p className="text-xs text-tertiary mt-2">
+                  {currentScheme?.colorCount} color {currentScheme?.label.toLowerCase()} palette
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <div className="h-px bg-[--border]" />
+
+          {/* Style Options */}
+          <div className="space-y-6">
+            {/* Border Radius */}
+            <div className="flex items-center justify-between">
+              <div>
+                <span className="text-sm text-primary">Border Radius</span>
+                <p className="text-xs text-tertiary mt-0.5">Component corner style</p>
+              </div>
+              <div className="flex gap-1 bg-[--bg-tertiary] p-1 rounded-lg">
+                {(['none', 'sm', 'md', 'lg', 'full'] as const).map((radius) => (
+                  <label
+                    key={radius}
+                    className={clsx(
+                      'px-3 py-1.5 text-xs font-medium rounded-md cursor-pointer transition-all',
+                      watch('borderRadius') === radius
+                        ? 'bg-[--bg-primary] text-primary shadow-sm'
+                        : 'text-tertiary hover:text-secondary'
+                    )}
+                  >
+                    <input
+                      type="radio"
+                      {...register('borderRadius')}
+                      value={radius}
+                      className="sr-only"
+                    />
+                    {radius}
+                  </label>
+                ))}
+              </div>
+            </div>
+
+            {/* Dark Mode */}
+            <div className="flex items-center justify-between">
+              <div>
+                <span className="text-sm text-primary">Dark Mode</span>
+                <p className="text-xs text-tertiary mt-0.5">Include dark theme styles</p>
+              </div>
+              <label className="relative cursor-pointer">
+                <input
+                  type="checkbox"
+                  {...register('darkMode')}
+                  className="sr-only peer"
+                />
+                <div className="w-11 h-6 bg-[--bg-tertiary] rounded-full peer-checked:bg-[--color-accent] transition-colors" />
+                <div className="absolute left-0.5 top-0.5 w-5 h-5 bg-white rounded-full shadow transition-transform peer-checked:translate-x-5" />
+              </label>
+            </div>
+          </div>
+
+          <div className="h-px bg-[--border]" />
+
+          {/* Submit */}
+          <button
+            type="submit"
+            disabled={isSubmitting}
+            className={clsx(
+              'w-full py-3 px-6 rounded-xl text-sm font-medium transition-all',
+              'bg-[--color-accent] text-white',
+              'hover:brightness-110',
+              'focus:outline-none focus:ring-2 focus:ring-[--color-accent] focus:ring-offset-2 focus:ring-offset-[--bg-primary]',
+              'disabled:opacity-50 disabled:cursor-not-allowed'
+            )}
+          >
+            {isSubmitting ? 'Creating...' : 'Create Component'}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}

package/src/viewer/components/Layout.tsx

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+
+interface LayoutProps {
+  leftSidebar: ReactNode;
+  children: ReactNode;
+}
+
+export function Layout({ leftSidebar, children }: LayoutProps) {
+  return (
+    <div className="flex h-screen overflow-hidden bg-[--bg-primary]">
+      {/* Left Sidebar */}
+      <aside className="hidden md:flex md:w-56 lg:w-64 flex-col border-r border-[--border] bg-[--bg-secondary] flex-shrink-0">
+        {leftSidebar}
+      </aside>
+
+      {/* Main Content - Full width */}
+      <main className="flex-1 flex flex-col overflow-hidden min-w-0">
+        {children}
+      </main>
+    </div>
+  );
+}