@fragments-sdk/viewer 0.2.1 → 0.2.4

package/src/components/LandingPage.tsx

@@ -1,420 +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) => {
-    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/PropsTable.tsx

@@ -1,111 +0,0 @@
-import { useMemo } from 'react';
-import type { PropDefinition } from '@fragments-sdk/core';
-import { DataTable, createColumns, Badge, Text, Stack } from '@fragments-sdk/ui';
-import { WarningIcon } from './Icons.js';
-
-interface PropsTableProps {
-  props: Record<string, PropDefinition>;
-}
-
-interface PropRow {
-  name: string;
-  required: boolean;
-  type: string;
-  values?: string[];
-  default: unknown;
-  description: string;
-  constraints?: string[];
-}
-
-export function PropsTable({ props }: PropsTableProps) {
-  const propEntries = Object.entries(props);
-
-  const data = useMemo<PropRow[]>(() =>
-    propEntries.map(([name, prop]) => ({
-      name,
-      required: !!prop.required,
-      type: prop.type,
-      values: prop.values,
-      default: prop.default,
-      description: prop.description,
-      constraints: prop.constraints,
-    })),
-    [propEntries]
-  );
-
-  const columns = useMemo(() => createColumns<PropRow>([
-    {
-      key: 'name',
-      header: 'Prop',
-      cell: (row) => (
-        <Text font="mono" size="sm" weight="medium">
-          {row.name}
-          {row.required && <span style={{ color: 'var(--color-danger, #ef4444)', marginLeft: '2px' }}>*</span>}
-        </Text>
-      ),
-    },
-    {
-      key: 'type',
-      header: 'Type',
-      cell: (row) => {
-        if (row.type === 'enum' && row.values && row.values.length > 0) {
-          return (
-            <Stack direction="row" gap="xs" style={{ flexWrap: 'wrap' }}>
-              {row.values.map((value, index) => (
-                <span key={value} style={{ display: 'inline-flex', alignItems: 'center' }}>
-                  <Badge size="sm">{value}</Badge>
-                  {index < row.values!.length - 1 && <Text size="xs" color="tertiary" style={{ margin: '0 4px' }}>|</Text>}
-                </span>
-              ))}
-            </Stack>
-          );
-        }
-        return <Text font="mono" size="xs" color="secondary">{row.type}</Text>;
-      },
-    },
-    {
-      key: 'default',
-      header: 'Default',
-      cell: (row) => {
-        if (row.default !== undefined) {
-          return <Text font="mono" size="xs" color="secondary">{String(row.default)}</Text>;
-        }
-        return <Text color="tertiary">&mdash;</Text>;
-      },
-    },
-    {
-      key: 'description',
-      header: 'Description',
-      cell: (row) => (
-        <Stack gap="xs">
-          <Text size="sm" color="secondary">{row.description}</Text>
-          {row.constraints && row.constraints.length > 0 && (
-            <Stack gap="xs">
-              {row.constraints.map((constraint, index) => (
-                <Stack key={index} direction="row" gap="xs" align="start" style={{ fontSize: '12px', color: 'var(--color-warning, #f59e0b)' }}>
-                  <WarningIcon style={{ width: 12, height: 12, marginTop: '2px', flexShrink: 0 }} />
-                  <span>{constraint}</span>
-                </Stack>
-              ))}
-            </Stack>
-          )}
-        </Stack>
-      ),
-    },
-  ]), []);
-
-  if (propEntries.length === 0) return null;
-
-  return (
-    <section id="props" style={{ scrollMarginTop: '96px' }}>
-      <Text as="h2" size="md" weight="semibold" style={{ marginBottom: '16px' }}>Props</Text>
-      <DataTable
-        columns={columns}
-        data={data}
-        size="sm"
-        bordered
-        getRowId={(row) => row.name}
-      />
-    </section>
-  );
-}

package/src/components/RelationsSection.tsx

@@ -1,88 +0,0 @@
-import { useState } from 'react';
-import type { ComponentRelation } from '@fragments-sdk/core';
-import { getRelationshipConfig } from '../constants/ui.js';
-import { ChevronRightIcon } from './Icons.js';
-
-interface RelationsSectionProps {
-  relations: ComponentRelation[];
-  onNavigate?: (componentName: string) => void;
-}
-
-export function RelationsSection({ relations, onNavigate }: RelationsSectionProps) {
-  if (relations.length === 0) return null;
-
-  return (
-    <section id="relations" style={{ scrollMarginTop: '96px' }}>
-      <h2 style={{ fontSize: '16px', fontWeight: 600, color: 'var(--text-primary)', marginBottom: '16px' }}>Related Components</h2>
-      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: '12px' }}>
-        {relations.map((relation, index) => (
-          <RelationButton key={index} relation={relation} onNavigate={onNavigate} />
-        ))}
-      </div>
-    </section>
-  );
-}
-
-function RelationButton({ relation, onNavigate }: { relation: ComponentRelation; onNavigate?: (componentName: string) => void }) {
-  const config = getRelationshipConfig(relation.relationship);
-  const [hovered, setHovered] = useState(false);
-
-  return (
-    <button
-      onClick={() => onNavigate?.(relation.component)}
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
-      style={{
-        textAlign: 'left',
-        padding: '16px',
-        borderRadius: '12px',
-        border: `1px solid ${hovered ? 'var(--border-strong)' : 'var(--border)'}`,
-        background: 'var(--bg-elevated)',
-        transition: 'all 150ms',
-        cursor: 'pointer',
-        outline: 'none',
-      }}
-    >
-      <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '6px' }}>
-        <span style={{
-          fontSize: '13px',
-          fontWeight: 500,
-          color: hovered ? 'var(--color-accent)' : 'var(--text-primary)',
-          transition: 'color 150ms',
-        }}>
-          {relation.component}
-        </span>
-        <span style={{
-          fontSize: '10px',
-          fontWeight: 500,
-          padding: '2px 6px',
-          borderRadius: '4px',
-          background: config.bgColor ?? 'var(--bg-tertiary)',
-          color: config.textColor ?? 'var(--text-secondary)',
-        }}>
-          {config.label}
-        </span>
-      </div>
-      {relation.note && (
-        <p style={{ fontSize: '13px', color: 'var(--text-secondary)', lineHeight: 1.6, margin: 0 }}>{relation.note}</p>
-      )}
-      <div style={{
-        marginTop: '8px',
-        display: 'flex',
-        alignItems: 'center',
-        fontSize: '12px',
-        color: hovered ? 'var(--text-secondary)' : 'var(--text-tertiary)',
-        transition: 'color 150ms',
-      }}>
-        <span>View component</span>
-        <ChevronRightIcon style={{
-          width: '12px',
-          height: '12px',
-          marginLeft: '4px',
-          transform: hovered ? 'translateX(2px)' : 'translateX(0)',
-          transition: 'transform 150ms',
-        }} />
-      </div>
-    </button>
-  );
-}