@rimelight/ui 0.0.4 → 0.0.6

package/src/components/DynamicShowcase.astro

@@ -0,0 +1,681 @@
+---
+/**
+ * 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>
+