@rimelight/ui 0.0.7 → 0.0.8

package/src/components/DynamicShowcase.astro

@@ -1,681 +0,0 @@
----
-/**
- * Dynamic Showcase with Auto-Generated Controls
- *
- * Uses Starwind components for all controls.
- * Shows a single component instance that updates dynamically.
- */
-import Badge from "@rimelight/ui/components/badge/Badge.astro";
-import Button from "@rimelight/ui/components/button/Button.astro";
-import Input from "@rimelight/ui/components/input/Input.astro";
-import Label from "@rimelight/ui/components/label/Label.astro";
-import Switch from "@rimelight/ui/components/switch/Switch.astro";
-import Table from "@rimelight/ui/components/table/Table.astro";
-import TableBody from "@rimelight/ui/components/table/TableBody.astro";
-import TableCell from "@rimelight/ui/components/table/TableCell.astro";
-import TableHead from "@rimelight/ui/components/table/TableHead.astro";
-import TableHeader from "@rimelight/ui/components/table/TableHeader.astro";
-import TableRow from "@rimelight/ui/components/table/TableRow.astro";
-import Select from "@rimelight/ui/components/select/Select.astro";
-import SelectContent from "@rimelight/ui/components/select/SelectContent.astro";
-import SelectItem from "@rimelight/ui/components/select/SelectItem.astro";
-import SelectTrigger from "@rimelight/ui/components/select/SelectTrigger.astro";
-import SelectValue from "@rimelight/ui/components/select/SelectValue.astro";
-import Textarea from "@rimelight/ui/components/textarea/Textarea.astro";
-import Checkbox from "@rimelight/ui/components/checkbox/Checkbox.astro";
-
-export interface PropDef {
-  name: string;
-  type: string;
-  default?: any;
-  description?: string;
-}
-
-export interface DynamicShowcaseProps {
-  /** Unique identifier for this showcase instance */
-  id: string;
-  /** Display name of the component */
-  componentName: string;
-  /** Description of what the component does */
-  description?: string;
-  /** Prop definitions */
-  props: PropDef[];
-  /** Initial prop values */
-  initialProps?: Record<string, any>;
-  /** Additional classes for the preview container */
-  previewClassName?: string;
-}
-
-type Props = DynamicShowcaseProps;
-
-const {
-  id,
-  componentName,
-  description,
-  props,
-  initialProps = {},
-  previewClassName
-} = Astro.props;
-
-// Build initial state
-const initialState: Record<string, { value: any; omitted: boolean }> = {};
-props.forEach(prop => {
-  if (prop.name in initialProps) {
-    initialState[prop.name] = { value: initialProps[prop.name], omitted: false };
-  } else if (prop.default !== undefined) {
-    initialState[prop.name] = { value: prop.default, omitted: false };
-  } else {
-    initialState[prop.name] = { value: undefined, omitted: true };
-  }
-});
-
-function getPropKind(type: string): 'string' | 'number' | 'boolean' | 'enum' | 'array' | 'object' {
-  const lower = type.toLowerCase();
-  if (lower === 'boolean') return 'boolean';
-  if (lower === 'number') return 'number';
-  if (lower.includes('[]')) return 'array';
-  if (lower.startsWith('{') || lower.includes('record')) return 'object';
-  if (lower.includes('|')) return 'enum';
-  return 'string';
-}
-
-function extractEnumValues(type: string): string[] {
-  const matches = type.match(/'([^']+)'|"([^"]+)"/g);
-  if (matches) {
-    return matches.map(m => m.replace(/['"]/g, ''));
-  }
-  return [];
-}
----
-
-<section class="py-12 space-y-12 border-t border-border first:border-t-0" data-showcase={id}>
-  <div class="container space-y-8">
-    <!-- Header -->
-    <div class="space-y-4">
-      <div class="space-y-1">
-        <h2 class="text-3xl font-semibold tracking-tight">{componentName}</h2>
-        {description && <p class="text-muted-foreground text-lg">{description}</p>}
-      </div>
-    </div>
-
-    <!-- Interactive Playground -->
-    <div class="grid lg:grid-cols-2 gap-8">
-      <!-- Controls Panel -->
-      <div class="space-y-6">
-        <div class="flex items-center justify-between">
-          <h3 class="text-sm font-medium text-muted-foreground uppercase tracking-wider">Controls</h3>
-          <Button variant="outline" size="sm" data-action="reset" class="text-xs">Reset</Button>
-        </div>
-
-        <div class="space-y-4" data-controls>
-          {props.map((prop) => {
-            const kind = getPropKind(prop.type);
-            const enumValues = extractEnumValues(prop.type);
-            const state = initialState[prop.name];
-            if (!state) return null;
-            const isOmitted = state.omitted;
-
-            return (
-              <div class="space-y-2 p-4 rounded-lg border border-border bg-card/50" data-prop-control={prop.name}>
-                <div class="flex items-center justify-between gap-md">
-                  <Label class="text-sm font-medium flex items-center gap-md">
-                    {prop.name}
-                    <Badge variant="outline" class="font-mono text-[10px] uppercase">
-                      {prop.type}
-                    </Badge>
-                  </Label>
-                  <div class="flex items-center gap-md">
-                    <Label for={`${id}-omit-${prop.name}`} class="text-xs text-muted-foreground">Omit</Label>
-                    <Switch
-                      id={`${id}-omit-${prop.name}`}
-                      data-prop={prop.name}
-                      checked={isOmitted}
-                      data-state={isOmitted ? 'checked' : 'unchecked'}
-                      size="sm"
-                    />
-                  </div>
-                </div>
-
-                {kind === 'boolean' && (
-                  <div class="flex items-center gap-md">
-                    <Checkbox
-                      id={`${id}-value-${prop.name}`}
-                      data-prop={prop.name}
-                      data-type="boolean"
-                      checked={!!state.value}
-                      disabled={isOmitted}
-                      size="md"
-                    />
-                    <Label for={`${id}-value-${prop.name}`} class="text-sm">
-                      {state.value ? 'True' : 'False'}
-                    </Label>
-                  </div>
-                )}
-
-                {kind === 'string' && (
-                  <Input
-                    id={`${id}-value-${prop.name}`}
-                    data-prop={prop.name}
-                    data-type="string"
-                    value={state.value ?? ''}
-                    placeholder={prop.default ?? `Enter ${prop.name}`}
-                    class="w-full"
-                    disabled={isOmitted}
-                    size="md"
-                  />
-                )}
-
-                {kind === 'number' && (
-                  <Input
-                    id={`${id}-value-${prop.name}`}
-                    data-prop={prop.name}
-                    data-type="number"
-                    type="number"
-                    value={state.value ?? ''}
-                    placeholder={String(prop.default ?? '')}
-                    class="w-full"
-                    disabled={isOmitted}
-                    size="md"
-                  />
-                )}
-
-                {kind === 'enum' && enumValues.length > 0 && (
-                  <div class="w-full" data-prop-control={prop.name}>
-                    <Select
-                      id={`${id}-select-${prop.name}`}
-                      data-prop={prop.name}
-                      data-type="enum"
-                      data-value={state.value ?? ''}
-                      class="w-full"
-                    >
-                      <SelectTrigger size="md">
-                        <SelectValue placeholder="Select..." />
-                      </SelectTrigger>
-                      <SelectContent size="md">
-                        <SelectItem value="">(default)</SelectItem>
-                        {enumValues.map((value) => (
-                          <SelectItem value={value} data-selected={state.value === value ? 'true' : undefined}>
-                            {value}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                  </div>
-                )}
-
-                {kind === 'array' && (
-                  <Textarea
-                    id={`${id}-value-${prop.name}`}
-                    data-prop={prop.name}
-                    data-type="array"
-                    placeholder="JSON array"
-                    class="w-full font-mono text-xs"
-                    disabled={isOmitted}
-                    size="md"
-                  >{state.value != null ? JSON.stringify(state.value, null, 2) : ''}</Textarea>
-                )}
-
-                {kind === 'object' && (
-                  <Textarea
-                    id={`${id}-value-${prop.name}`}
-                    data-prop={prop.name}
-                    data-type="object"
-                    placeholder="JSON object"
-                    class="w-full font-mono text-xs"
-                    disabled={isOmitted}
-                    size="md"
-                  >{state.value != null ? JSON.stringify(state.value, null, 2) : ''}</Textarea>
-                )}
-
-                {prop.description && (
-                  <p class="text-xs text-muted-foreground">{prop.description}</p>
-                )}
-              </div>
-            );
-          })}
-        </div>
-      </div>
-
-      <!-- Preview Panel -->
-      <div class="space-y-4">
-        <h3 class="text-sm font-medium text-muted-foreground uppercase tracking-wider">Preview</h3>
-        <div class:list={[
-          "w-full min-h-[400px] rounded-xl border border-border bg-muted/5 p-6 flex items-center justify-center overflow-auto",
-          previewClassName
-        ]}>
-          <div
-            id={`${id}-preview`}
-            data-preview
-            data-showcase-id={id}
-            data-component-name={componentName}
-            data-initial-props={JSON.stringify(initialState)}
-            class="w-full h-full"
-          >
-            <slot />
-          </div>
-        </div>
-
-        <!-- Active Props JSON -->
-        <div class="rounded-lg border border-border bg-card overflow-hidden">
-          <div class="px-4 py-2 bg-muted/50 border-b border-border flex items-center justify-between">
-            <h4 class="text-xs font-medium text-muted-foreground uppercase tracking-wider">Active Props</h4>
-            <Button variant="ghost" size="sm" data-action="copy" class="h-6 text-xs">Copy</Button>
-          </div>
-          <pre class="p-4 text-xs font-mono text-muted-foreground overflow-x-auto max-h-[300px]">
-            <code data-active-props>{JSON.stringify(
-              Object.fromEntries(
-                Object.entries(initialState)
-                  .filter(([_, v]) => !v.omitted && v.value !== undefined)
-                  .map(([k, v]) => [k, v.value])
-              ), null, 2
-            )}</code>
-          </pre>
-        </div>
-      </div>
-    </div>
-
-    <!-- Prop Reference Table -->
-    {props.length > 0 && (
-      <div>
-        <h3 class="text-sm font-medium text-muted-foreground uppercase tracking-wider mb-4">Prop Reference</h3>
-        <div class="rounded-xl border border-border bg-card overflow-hidden">
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead class="w-[15%]">Prop</TableHead>
-                <TableHead class="w-[15%]">Type</TableHead>
-                <TableHead class="w-[15%]">Default</TableHead>
-                <TableHead>Description</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {props.map((prop) => (
-                <TableRow>
-                  <TableCell class="font-mono text-sm font-medium text-primary">
-                    {prop.name}
-                  </TableCell>
-                  <TableCell>
-                    <Badge variant="outline" class="font-mono text-[10px] uppercase">
-                      {prop.type}
-                    </Badge>
-                  </TableCell>
-                  <TableCell class="font-mono text-xs text-muted-foreground">
-                    {prop.default !== undefined ? String(prop.default) : "—"}
-                  </TableCell>
-                  <TableCell class="text-sm">
-                    {prop.description || "—"}
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </div>
-      </div>
-    )}
-  </div>
-</section>
-
-<script>
-  interface PropState {
-    value: unknown;
-    omitted: boolean;
-  }
-
-  interface CurrentState {
-    [key: string]: PropState;
-  }
-
-  function initShowcase(showcaseEl: HTMLElement) {
-    const id = showcaseEl.dataset.showcase;
-    if (!id) return;
-
-    const controlsContainer = showcaseEl.querySelector('[data-controls]') as HTMLElement | null;
-    const previewContainer = showcaseEl.querySelector('[data-preview]') as HTMLElement | null;
-    const activePropsCode = showcaseEl.querySelector('[data-active-props]') as HTMLElement | null;
-    const resetBtn = showcaseEl.querySelector('[data-action="reset"]') as HTMLElement | null;
-    const copyBtn = showcaseEl.querySelector('[data-action="copy"]') as HTMLElement | null;
-
-    if (!controlsContainer || !previewContainer || !activePropsCode) return;
-
-    // Parse initial state
-    const initialPropsJson = previewContainer.dataset.initialProps;
-    if (!initialPropsJson) return;
-
-    let currentState: CurrentState = JSON.parse(initialPropsJson);
-
-    function getActiveProps(): Record<string, unknown> {
-      const active: Record<string, unknown> = {};
-      Object.entries(currentState).forEach(([key, state]) => {
-        if (!state.omitted && state.value !== undefined) {
-          active[key] = state.value;
-        }
-      });
-      return active;
-    }
-
-    function updateActivePropsDisplay() {
-      if (activePropsCode) {
-        activePropsCode.textContent = JSON.stringify(getActiveProps(), null, 2);
-      }
-    }
-
-    function updatePreview() {
-      updateActivePropsDisplay();
-
-      const activeProps = getActiveProps();
-
-      // Dispatch custom event with new props
-      if (previewContainer) {
-        previewContainer.dispatchEvent(new CustomEvent('showcase:props-update', {
-          detail: { props: activeProps, allProps: currentState }
-        }));
-      }
-    }
-
-    function setPropOmitted(propName: string, omitted: boolean) {
-      if (currentState[propName]) {
-        currentState[propName].omitted = omitted;
-      }
-
-      // Update control disabled state
-      const controlEl = controlsContainer?.querySelector(`[data-prop-control="${propName}"]`) as HTMLElement | null;
-      if (controlEl) {
-        const input = controlEl.querySelector('input, select, textarea, [data-type]') as HTMLElement | null;
-        if (input) {
-          if (omitted) {
-            input.setAttribute('disabled', 'true');
-            input.classList.add('opacity-50');
-          } else {
-            input.removeAttribute('disabled');
-            input.classList.remove('opacity-50');
-          }
-        }
-      }
-    }
-
-    function updatePropValue(propName: string, value: unknown) {
-      if (currentState[propName]) {
-        currentState[propName].value = value;
-      }
-    }
-
-    // Handle omit switch changes
-    controlsContainer?.querySelectorAll('[id^="-omit-"]').forEach(el => {
-      el.addEventListener('starwind-switch:change', (e: Event) => {
-        const customEvent = e as CustomEvent<{ checked: boolean }>;
-        const { checked: isOmitted } = customEvent.detail;
-        const propName = (el as HTMLElement).dataset.prop;
-        if (!propName) return;
-
-        setPropOmitted(propName, isOmitted);
-        updatePreview();
-      });
-    });
-
-    // Handle Input changes (string, number)
-    controlsContainer?.querySelectorAll('[id*="-value-"]').forEach(el => {
-      // Handle text input changes
-      el.addEventListener('input', (e: Event) => {
-        const target = e.target as HTMLInputElement | HTMLTextAreaElement;
-        const propName = (el as HTMLElement).dataset.prop;
-        const type = (el as HTMLElement).dataset.type;
-        if (!propName) return;
-
-        let value: unknown = target.value;
-
-        if (type === 'number') {
-          value = value === '' ? undefined : Number(value);
-        } else if (type === 'array' || type === 'object') {
-          try {
-            value = value === '' ? undefined : JSON.parse(value as string);
-          } catch {
-            // Keep as string if invalid JSON
-          }
-        }
-
-        updatePropValue(propName, value);
-        updatePreview();
-      });
-
-      // Handle checkbox changes (boolean) - Starwind Checkbox
-      el.addEventListener('starwind-checkbox:change', (e: Event) => {
-        const customEvent = e as CustomEvent<{ checked: boolean }>;
-        const { checked } = customEvent.detail;
-        const propName = (el as HTMLElement).dataset.prop;
-        console.log('[Showcase Checkbox] prop:', propName, 'checked:', checked);
-        if (!propName) return;
-
-        updatePropValue(propName, checked);
-        updatePreview();
-      });
-    });
-
-    // Handle Starwind Select changes - listen on the wrapper
-    controlsContainer?.querySelectorAll('[data-prop-control]').forEach((controlEl: Element) => {
-      const selectWrapper = controlEl.querySelector('.starwind-select') as HTMLElement | null;
-      if (selectWrapper) {
-        selectWrapper.addEventListener('starwind-select:change', (e: Event) => {
-          const customEvent = e as CustomEvent<{ value: string }>;
-          const { value } = customEvent.detail;
-          const propName = (controlEl as HTMLElement).dataset.propControl;
-          if (!propName) return;
-
-          updatePropValue(propName, value || undefined);
-          updatePreview();
-        });
-      }
-    });
-
-    // Reset button
-    resetBtn?.addEventListener('click', () => {
-      const freshState: CurrentState = JSON.parse(initialPropsJson);
-      currentState = freshState;
-
-      // Reset all controls
-      Object.keys(freshState).forEach((propName) => {
-        const state = freshState[propName];
-        if (!state) return;
-        const controlEl = controlsContainer?.querySelector(`[data-prop-control="${propName}"]`) as HTMLElement | null;
-        if (!controlEl) return;
-
-        const omitSwitch = controlEl.querySelector('[id^*="-omit-"]') as HTMLElement | null;
-        const valueInput = controlEl.querySelector('[id^*="-value-"]') as HTMLElement | null;
-        const selectWrapper = controlEl.querySelector('.starwind-select') as HTMLElement | null;
-
-        if (omitSwitch) {
-          // Reset Switch component
-          omitSwitch.setAttribute('data-state', state.omitted ? 'checked' : 'unchecked');
-          omitSwitch.setAttribute('aria-checked', state.omitted ? 'true' : 'false');
-          omitSwitch.dispatchEvent(new CustomEvent('starwind-switch:change', {
-            detail: { checked: state.omitted, switchId: omitSwitch.id },
-            bubbles: true
-          }));
-        }
-
-        if (valueInput) {
-          if (valueInput.tagName === 'INPUT' && (valueInput as HTMLInputElement).type === 'checkbox') {
-            // Starwind checkbox
-            (valueInput as HTMLInputElement).checked = !!state.value;
-            valueInput.setAttribute('aria-checked', state.value ? 'true' : 'false');
-            valueInput.dispatchEvent(new CustomEvent('starwind-checkbox:change', {
-              detail: { checked: !!state.value },
-              bubbles: true
-            }));
-          } else if (valueInput.tagName === 'INPUT') {
-            (valueInput as HTMLInputElement).value = String(state.value ?? '');
-          } else if (valueInput.tagName === 'TEXTAREA') {
-            (valueInput as HTMLTextAreaElement).value = state.value !== undefined ? JSON.stringify(state.value, null, 2) : '';
-          }
-        }
-
-        if (selectWrapper) {
-          // Starwind Select - use programmatic select event
-          selectWrapper.dispatchEvent(new CustomEvent('starwind-select:select', {
-            detail: { value: String(state.value ?? ''), selectId: selectWrapper.id },
-            bubbles: true
-          }));
-        }
-
-        if (valueInput || selectWrapper) {
-          const element: HTMLElement = (valueInput || selectWrapper)!;
-          if (state.omitted) {
-            element.setAttribute('disabled', 'true');
-            element.classList.add('opacity-50');
-          } else {
-            element.removeAttribute('disabled');
-            element.classList.remove('opacity-50');
-          }
-        }
-      });
-
-      updatePreview();
-    });
-
-    // Copy button
-    copyBtn?.addEventListener('click', async () => {
-      const text = activePropsCode?.textContent;
-      if (text) {
-        await navigator.clipboard.writeText(text);
-        if (copyBtn) {
-          copyBtn.textContent = 'Copied!';
-          setTimeout(() => {
-            copyBtn.textContent = 'Copy';
-          }, 2000);
-        }
-      }
-    });
-
-    // Initial setup
-    Object.entries(currentState).forEach(([propName, state]) => {
-      if (state.omitted) {
-        setPropOmitted(propName, true);
-      }
-    });
-
-    updateActivePropsDisplay();
-  }
-
-  // Initialize
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', () => {
-      document.querySelectorAll('[data-showcase]').forEach(el => initShowcase(el as HTMLElement));
-    });
-  } else {
-    document.querySelectorAll('[data-showcase]').forEach(el => initShowcase(el as HTMLElement));
-  }
-
-  document.addEventListener('astro:page-load', () => {
-    document.querySelectorAll('[data-showcase]').forEach(el => initShowcase(el as HTMLElement));
-  });
-
-  // Client-side preview renderer - singleton pattern
-  // This script runs once globally, not per-component
-
-  interface ShowcasePreviewAPI {
-    renderers: Map<string, (props: Record<string, unknown>, container: HTMLElement) => void>;
-    registerRenderer: (name: string, renderer: (props: Record<string, unknown>, container: HTMLElement) => void) => void;
-  }
-
-  declare global {
-    interface Window {
-      ShowcasePreview?: ShowcasePreviewAPI;
-    }
-  }
-
-  if (!window.ShowcasePreview) {
-    window.ShowcasePreview = {
-      renderers: new Map<string, (props: Record<string, unknown>, container: HTMLElement) => void>(),
-      registerRenderer: function(name: string, renderer: (props: Record<string, unknown>, container: HTMLElement) => void) {
-        this.renderers.set(name, renderer);
-      }
-    };
-  }
-
-  // Initialize preview handlers
-  function initPreviewHandlers() {
-    // Initialize showcase controls for each showcase section
-    document.querySelectorAll('[data-showcase]').forEach(el => {
-      initShowcase(el as HTMLElement);
-    });
-
-    // Initialize preview containers
-    document.querySelectorAll('div[data-preview]').forEach(el => {
-      if (!el.hasAttribute('data-preview-initialized')) {
-        el.setAttribute('data-preview-initialized', 'true');
-        const componentName = (el as HTMLElement).dataset.componentName;
-        const initialPropsJson = (el as HTMLElement).dataset.initialProps;
-
-        if (componentName && initialPropsJson) {
-          const props: Record<string, PropState> = JSON.parse(initialPropsJson);
-
-          // Look up renderer at event time, not initialization time
-          el.addEventListener('showcase:props-update', (e: Event) => {
-            const newProps = (e as CustomEvent<{ props: Record<string, unknown> }>).detail.props;
-            const renderer = window.ShowcasePreview?.renderers.get(componentName);
-            if (renderer) {
-              renderer(newProps, el as HTMLElement);
-            } else {
-              // Update data attributes
-              Object.entries(newProps).forEach(([key, value]) => {
-                if (value === undefined || value === null) {
-                  el.removeAttribute(`data-${key}`);
-                } else if (typeof value === 'boolean') {
-                  if (value) {
-                    el.setAttribute(`data-${key}`, 'true');
-                  } else {
-                    el.removeAttribute(`data-${key}`);
-                  }
-                } else {
-                  el.setAttribute(`data-${key}`, String(value));
-                }
-              });
-            }
-          });
-
-          // Initial render - look up renderer
-          const renderer = window.ShowcasePreview?.renderers.get(componentName);
-          if (renderer) {
-            renderer(Object.fromEntries(
-              Object.entries(props).filter(([_, v]) => !v.omitted && v.value !== undefined).map(([k, v]) => [k, v.value])
-            ), el as HTMLElement);
-          }
-        }
-      }
-    });
-  }
-
-  // Initialize on load - defer until DOM is ready
-  function initShowcasePreview() {
-    if (document.readyState === 'loading') {
-      document.addEventListener('DOMContentLoaded', () => {
-        initPreviewHandlers();
-      });
-    } else {
-      initPreviewHandlers();
-    }
-  }
-
-  initShowcasePreview();
-  document.addEventListener('astro:page-load', initPreviewHandlers);
-
-  // Export function for page to trigger initial render
-  window.dispatchEvent(new CustomEvent('showcase-preview:ready'));
-</script>
-
-<style>
-  [data-showcase] [data-controls] [disabled] {
-    cursor: not-allowed;
-  }
-
-  [data-showcase] select {
-    cursor: pointer;
-  }
-
-  [data-showcase] select:disabled,
-  [data-showcase] input:disabled,
-  [data-showcase] textarea:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-</style>
-