@fragments-sdk/cli 0.10.1 → 0.12.1

package/src/viewer/components/LandingPage.tsx

@@ -1,421 +0,0 @@
-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) => {
-    console.log('Form submitted:', data);
-    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/viewer/components/Layout.tsx

@@ -1,27 +0,0 @@
-import type { ReactNode } from 'react';
-import { DocsPageShell } from '@fragments-sdk/shared';
-
-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>
-  );
-}