@fragments-sdk/viewer 0.2.1 → 0.2.4

package/src/components/UsageSection.tsx

@@ -1,95 +0,0 @@
-import type { FragmentUsage } from '@fragments-sdk/core';
-import { CheckIcon, XIcon, AccessibilityIcon } from './Icons.js';
-
-interface UsageSectionProps {
-  usage: FragmentUsage;
-}
-
-export function UsageSection({ usage }: UsageSectionProps) {
-  const hasWhen = usage.when && usage.when.length > 0;
-  const hasWhenNot = usage.whenNot && usage.whenNot.length > 0;
-  const hasGuidelines = usage.guidelines && usage.guidelines.length > 0;
-  const hasAccessibility = usage.accessibility && usage.accessibility.length > 0;
-
-  if (!hasWhen && !hasWhenNot && !hasGuidelines && !hasAccessibility) {
-    return null;
-  }
-
-  return (
-    <section id="usage" style={{ scrollMarginTop: '96px' }}>
-      <h2 style={{ fontSize: '16px', fontWeight: 600, color: 'var(--text-primary)', marginBottom: '20px' }}>Usage</h2>
-
-      {/* When to use / When not to use */}
-      {(hasWhen || hasWhenNot) && (
-        <div style={{ display: 'grid', gridTemplateColumns: hasWhen && hasWhenNot ? '1fr 1fr' : '1fr', gap: '32px', marginBottom: '32px' }}>
-          {hasWhen && (
-            <div style={{ padding: '16px', borderRadius: '12px', background: 'var(--color-success-bg)', border: '1px solid rgba(16, 163, 127, 0.2)' }}>
-              <h3 style={{ fontSize: '13px', fontWeight: 500, color: 'var(--color-success)', marginBottom: '12px', display: 'flex', alignItems: 'center', gap: '8px' }}>
-                <CheckIcon style={{ width: '16px', height: '16px' }} />
-                When to use
-              </h3>
-              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: '8px' }}>
-                {usage.when!.map((item, index) => (
-                  <li key={index} style={{ fontSize: '13px', color: 'var(--text-primary)', lineHeight: 1.6, display: 'flex', alignItems: 'flex-start', gap: '8px' }}>
-                    <span style={{ color: 'var(--color-success)', marginTop: '6px', fontSize: '12px' }}>&#8226;</span>
-                    <span>{item}</span>
-                  </li>
-                ))}
-              </ul>
-            </div>
-          )}
-
-          {hasWhenNot && (
-            <div style={{ padding: '16px', borderRadius: '12px', background: 'var(--color-danger-bg)', border: '1px solid rgba(239, 68, 68, 0.2)' }}>
-              <h3 style={{ fontSize: '13px', fontWeight: 500, color: 'var(--color-danger)', marginBottom: '12px', display: 'flex', alignItems: 'center', gap: '8px' }}>
-                <XIcon style={{ width: '16px', height: '16px' }} />
-                When not to use
-              </h3>
-              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: '8px' }}>
-                {usage.whenNot!.map((item, index) => (
-                  <li key={index} style={{ fontSize: '13px', color: 'var(--text-primary)', lineHeight: 1.6, display: 'flex', alignItems: 'flex-start', gap: '8px' }}>
-                    <span style={{ color: 'var(--color-danger)', marginTop: '6px', fontSize: '12px' }}>&#8226;</span>
-                    <span>{item}</span>
-                  </li>
-                ))}
-              </ul>
-            </div>
-          )}
-        </div>
-      )}
-
-      {/* Guidelines */}
-      {hasGuidelines && (
-        <div style={{ marginBottom: '24px' }}>
-          <h3 style={{ fontSize: '13px', fontWeight: 500, color: 'var(--text-primary)', marginBottom: '12px' }}>Guidelines</h3>
-          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: '8px' }}>
-            {usage.guidelines!.map((item, index) => (
-              <li key={index} style={{ fontSize: '13px', color: 'var(--text-secondary)', lineHeight: 1.6, display: 'flex', alignItems: 'flex-start', gap: '8px' }}>
-                <span style={{ color: 'var(--color-accent)', marginTop: '6px', fontSize: '12px' }}>&#8226;</span>
-                <span>{item}</span>
-              </li>
-            ))}
-          </ul>
-        </div>
-      )}
-
-      {/* Accessibility */}
-      {hasAccessibility && (
-        <div style={{ padding: '16px', borderRadius: '12px', border: '1px solid var(--border)', background: 'var(--bg-secondary)' }}>
-          <h3 style={{ fontSize: '13px', fontWeight: 500, color: 'var(--text-primary)', marginBottom: '12px', display: 'flex', alignItems: 'center', gap: '8px' }}>
-            <AccessibilityIcon style={{ width: '16px', height: '16px', color: 'var(--text-secondary)' }} />
-            Accessibility
-          </h3>
-          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: '8px' }}>
-            {usage.accessibility!.map((item, index) => (
-              <li key={index} style={{ fontSize: '13px', color: 'var(--text-secondary)', lineHeight: 1.6, display: 'flex', alignItems: 'flex-start', gap: '8px' }}>
-                <span style={{ color: 'var(--text-tertiary)', marginTop: '6px', fontSize: '12px' }}>&#8226;</span>
-                <span>{item}</span>
-              </li>
-            ))}
-          </ul>
-        </div>
-      )}
-    </section>
-  );
-}

package/src/components/VariantTabs.tsx

@@ -1,40 +0,0 @@
-import { Tabs, Stack } from '@fragments-sdk/ui';
-import type { FragmentVariant } from '@fragments-sdk/core';
-import { PlayIcon } from './Icons.js';
-
-interface VariantTabsProps {
-  variants: FragmentVariant[];
-  activeIndex: number;
-  onSelect: (index: number) => void;
-}
-
-export function VariantTabs({ variants, activeIndex, onSelect }: VariantTabsProps) {
-  if (variants.length === 0) return null;
-
-  const activeValue = variants[activeIndex]?.name ?? '';
-
-  return (
-    <Tabs
-      value={activeValue}
-      onValueChange={(value: string | number) => {
-        const index = variants.findIndex(v => v.name === value);
-        if (index >= 0) onSelect(index);
-      }}
-    >
-      <Tabs.List variant="pills">
-        {variants.map((variant) => (
-          <Tabs.Tab key={variant.name} value={variant.name}>
-            <Stack direction="row" align="center" gap="xs" as="span">
-              {variant.name}
-              {variant.hasPlayFunction && (
-                <span style={{ display: 'inline-flex', width: '12px', height: '12px', color: 'var(--color-accent)' }}>
-                  <PlayIcon />
-                </span>
-              )}
-            </Stack>
-          </Tabs.Tab>
-        ))}
-      </Tabs.List>
-    </Tabs>
-  );
-}

package/src/components/ViewportSelector.tsx

@@ -1,172 +0,0 @@
-import { Button, Menu, Stack, Input, Text, Box } from '@fragments-sdk/ui';
-import { VIEWPORT_PRESETS, type ViewportPreset } from '../constants/ui.js';
-import {
-  ViewportIcon,
-  ChevronDownIcon,
-  ResponsiveIcon,
-  DesktopIcon,
-  TabletIcon,
-  MobileIcon,
-  SettingsIcon,
-} from './Icons.js';
-
-// Re-export for consumers
-export type { ViewportPreset };
-
-export interface ViewportSize {
-  width: number | null;
-  height: number | null;
-}
-
-// Viewport presets with display metadata
-const VIEWPORT_PRESETS_UI = Object.entries(VIEWPORT_PRESETS).map(([value, config]) => ({
-  value: value as ViewportPreset,
-  label: config.label,
-  width: config.width,
-}));
-
-function PresetIcon({ preset }: { preset: ViewportPreset }) {
-  const commonStyle = { width: '16px', height: '16px' };
-
-  switch (preset) {
-    case 'desktop':
-      return <DesktopIcon style={commonStyle} />;
-    case 'tablet':
-      return <TabletIcon style={commonStyle} />;
-    case 'mobile':
-      return <MobileIcon style={commonStyle} />;
-    case 'responsive':
-    default:
-      return <ResponsiveIcon style={commonStyle} />;
-  }
-}
-
-interface ViewportSelectorProps {
-  viewport: ViewportPreset;
-  customSize: ViewportSize;
-  onViewportChange: (viewport: ViewportPreset) => void;
-  onCustomSizeChange: (size: ViewportSize) => void;
-}
-
-export function ViewportSelector({
-  viewport,
-  customSize,
-  onViewportChange,
-  onCustomSizeChange,
-}: ViewportSelectorProps) {
-  const currentPreset = VIEWPORT_PRESETS_UI.find(p => p.value === viewport);
-  const isCustomViewport = viewport === 'custom';
-  const displayLabel = viewport === 'custom'
-    ? `${customSize.width || '?'}\u00D7${customSize.height || 'auto'}`
-    : currentPreset?.label || 'Responsive';
-
-  return (
-    <Menu>
-      <Menu.Trigger asChild>
-        <Button variant="ghost" size="sm" title="Viewport size">
-          <Stack direction="row" gap="xs" align="center">
-            <span style={{ display: 'inline-flex', width: '14px', height: '14px' }}>
-              <ViewportIcon />
-            </span>
-            <span>{displayLabel}</span>
-            <span style={{ display: 'inline-flex', width: '12px', height: '12px' }}>
-              <ChevronDownIcon />
-            </span>
-          </Stack>
-        </Button>
-      </Menu.Trigger>
-      <Menu.Content side="bottom" align="end">
-        <Menu.RadioGroup
-          value={isCustomViewport ? 'custom' : viewport}
-          onValueChange={(value: string) => {
-            if (value === 'custom') {
-              onViewportChange('custom');
-              return;
-            }
-            onViewportChange(value as ViewportPreset);
-          }}
-        >
-          {VIEWPORT_PRESETS_UI.map((preset) => (
-            <Menu.RadioItem key={preset.value} value={preset.value}>
-              <Stack direction="row" gap="sm" align="center" justify="between" style={{ width: '100%' }}>
-                <Stack direction="row" gap="sm" align="center">
-                  <PresetIcon preset={preset.value} />
-                  <span>{preset.label}</span>
-                </Stack>
-                {preset.width && (
-                  <Text size="2xs" color="tertiary">
-                    {preset.width}px
-                  </Text>
-                )}
-              </Stack>
-            </Menu.RadioItem>
-          ))}
-        </Menu.RadioGroup>
-
-        <Menu.Separator />
-
-        <Menu.Item onSelect={() => onViewportChange('custom')}>
-          <Stack direction="row" gap="sm" align="center" style={{
-            width: '100%',
-            fontWeight: isCustomViewport ? 600 : 400,
-            color: isCustomViewport ? 'var(--color-accent)' : undefined,
-          }}>
-            <SettingsIcon style={{ width: '16px', height: '16px' }} />
-            Custom size
-          </Stack>
-        </Menu.Item>
-
-        {isCustomViewport && (
-          <div
-            onClick={(e) => e.stopPropagation()}
-            onKeyDown={(e) => e.stopPropagation()}
-          >
-            <Box padding="sm">
-              <Stack gap="sm">
-                <Stack direction="row" gap="sm" align="center">
-                  <Text size="2xs" color="tertiary" style={{ width: '20px' }}>W:</Text>
-                  <Input
-                    type="number"
-                    size="sm"
-                    value={customSize.width != null ? String(customSize.width) : ''}
-                    onChange={(value) => {
-                      const width = value ? parseInt(value, 10) : null;
-                      onCustomSizeChange({ ...customSize, width });
-                      onViewportChange('custom');
-                    }}
-                    placeholder="auto"
-                    style={{ width: '64px' }}
-                  />
-                  <Text size="2xs" color="tertiary">px</Text>
-                </Stack>
-                <Stack direction="row" gap="sm" align="center">
-                  <Text size="2xs" color="tertiary" style={{ width: '20px' }}>H:</Text>
-                  <Input
-                    type="number"
-                    size="sm"
-                    value={customSize.height != null ? String(customSize.height) : ''}
-                    onChange={(value) => {
-                      const height = value ? parseInt(value, 10) : null;
-                      onCustomSizeChange({ ...customSize, height });
-                      onViewportChange('custom');
-                    }}
-                    placeholder="auto"
-                    style={{ width: '64px' }}
-                  />
-                  <Text size="2xs" color="tertiary">px</Text>
-                </Stack>
-              </Stack>
-            </Box>
-          </div>
-        )}
-      </Menu.Content>
-    </Menu>
-  );
-}
-
-// Get viewport width from preset
-export function getViewportWidth(viewport: ViewportPreset, customSize: ViewportSize): number | null {
-  if (viewport === 'custom') return customSize.width;
-  if (viewport === 'responsive') return null;
-  return VIEWPORT_PRESETS[viewport]?.width ?? null;
-}