@fragments-sdk/ui 0.2.3 → 0.4.0

package/src/components/CodeBlock/index.tsx

@@ -0,0 +1,385 @@
+'use client';
+
+import * as React from 'react';
+import { useState, useCallback, useEffect } from 'react';
+import { codeToHtml } from 'shiki';
+import { TabsRoot, TabsList, Tab, TabsPanel } from '../Tabs';
+import styles from './CodeBlock.module.scss';
+import '../../styles/globals.scss';
+
+export type CodeBlockLanguage =
+  | 'tsx'
+  | 'typescript'
+  | 'javascript'
+  | 'bash'
+  | 'css'
+  | 'scss'
+  | 'json'
+  | 'html';
+
+export interface CodeBlockProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Code string to display */
+  code: string;
+  /** Programming language for syntax highlighting */
+  language?: CodeBlockLanguage;
+  /** Show copy button */
+  showCopy?: boolean;
+  /** Optional title above code block (external label) */
+  title?: string;
+  /** Optional filename shown in header bar inside code block */
+  filename?: string;
+  /** Show line numbers */
+  showLineNumbers?: boolean;
+  /** Highlight specific lines (e.g., [1, 3, '5-7']) */
+  highlightLines?: (number | string)[];
+}
+
+function CopyIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+    </svg>
+  );
+}
+
+function CheckIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <polyline points="20 6 9 17 4 12" />
+    </svg>
+  );
+}
+
+function escapeHtml(str: string): string {
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;');
+}
+
+/**
+ * Remove common leading whitespace from all lines (dedent).
+ * This handles template literals that have extra indentation from code formatting.
+ */
+function dedent(str: string): string {
+  const lines = str.split('\n');
+
+  // Find the minimum indentation (ignoring empty lines)
+  let minIndent = Infinity;
+  for (const line of lines) {
+    if (line.trim() === '') continue;
+    const match = line.match(/^(\s*)/);
+    if (match) {
+      minIndent = Math.min(minIndent, match[1].length);
+    }
+  }
+
+  // If no indentation found, return as-is
+  if (minIndent === Infinity || minIndent === 0) {
+    return str;
+  }
+
+  // Remove the common indentation from all lines
+  return lines
+    .map(line => line.slice(minIndent))
+    .join('\n');
+}
+
+/**
+ * Parse highlight lines specification into a Set of line numbers.
+ * Supports: [1, 3, '5-7'] -> Set {1, 3, 5, 6, 7}
+ */
+function parseHighlightLines(
+  highlightLines?: (number | string)[]
+): Set<number> {
+  const lines = new Set<number>();
+  if (!highlightLines) return lines;
+
+  for (const spec of highlightLines) {
+    if (typeof spec === 'number') {
+      lines.add(spec);
+    } else if (typeof spec === 'string') {
+      const rangeMatch = spec.match(/^(\d+)-(\d+)$/);
+      if (rangeMatch) {
+        const start = parseInt(rangeMatch[1], 10);
+        const end = parseInt(rangeMatch[2], 10);
+        for (let i = start; i <= end; i++) {
+          lines.add(i);
+        }
+      } else {
+        const num = parseInt(spec, 10);
+        if (!isNaN(num)) {
+          lines.add(num);
+        }
+      }
+    }
+  }
+
+  return lines;
+}
+
+/**
+ * Add line numbers and highlight classes to Shiki HTML output.
+ */
+function processShikiHtml(
+  html: string,
+  showLineNumbers: boolean,
+  highlightLines: Set<number>
+): string {
+  if (!showLineNumbers && highlightLines.size === 0) {
+    return html;
+  }
+
+  // Extract the code content from Shiki output
+  // Shiki outputs: <pre class="shiki ..."><code>...lines...</code></pre>
+  const codeMatch = html.match(/<code[^>]*>([\s\S]*?)<\/code>/);
+  if (!codeMatch) return html;
+
+  const codeContent = codeMatch[1];
+  const lines = codeContent.split('\n');
+
+  // Process each line
+  const processedLines = lines.map((line, index) => {
+    const lineNum = index + 1;
+    const isHighlighted = highlightLines.has(lineNum);
+    const lineClass = isHighlighted ? 'line highlighted' : 'line';
+
+    if (showLineNumbers) {
+      return `<span class="${lineClass}"><span class="line-number">${lineNum}</span>${line}</span>`;
+    }
+    return `<span class="${lineClass}">${line}</span>`;
+  });
+
+  // Reconstruct the HTML
+  return html.replace(
+    /<code[^>]*>[\s\S]*?<\/code>/,
+    `<code>${processedLines.join('\n')}</code>`
+  );
+}
+
+const CodeBlockBase = React.forwardRef<HTMLDivElement, CodeBlockProps>(
+  function CodeBlock(
+    {
+      code,
+      language = 'tsx',
+      showCopy = true,
+      title,
+      filename,
+      showLineNumbers = false,
+      highlightLines,
+      className,
+      ...htmlProps
+    },
+    ref
+  ) {
+    const [copied, setCopied] = useState(false);
+    const [highlightedHtml, setHighlightedHtml] = useState<string>('');
+    const [isLoading, setIsLoading] = useState(true);
+
+    const trimmedCode = dedent(code.trim());
+    const highlightSet = parseHighlightLines(highlightLines);
+
+    // Apply syntax highlighting
+    useEffect(() => {
+      let cancelled = false;
+      setIsLoading(true);
+
+      codeToHtml(trimmedCode, {
+        lang: language,
+        theme: 'one-dark-pro',
+      })
+        .then((html) => {
+          if (!cancelled) {
+            const processed = processShikiHtml(
+              html,
+              showLineNumbers,
+              highlightSet
+            );
+            setHighlightedHtml(processed);
+            setIsLoading(false);
+          }
+        })
+        .catch((err) => {
+          if (process.env.NODE_ENV !== 'production') {
+            console.error('Syntax highlighting failed:', err);
+          }
+          if (!cancelled) {
+            // Fallback to plain text
+            setHighlightedHtml(
+              `<pre class="shiki"><code>${escapeHtml(trimmedCode)}</code></pre>`
+            );
+            setIsLoading(false);
+          }
+        });
+
+      return () => {
+        cancelled = true;
+      };
+    }, [trimmedCode, language, showLineNumbers, highlightSet.size]);
+
+    const handleCopy = useCallback(async () => {
+      try {
+        await navigator.clipboard.writeText(trimmedCode);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+      } catch (err) {
+        if (process.env.NODE_ENV !== 'production') {
+          console.error('Failed to copy:', err);
+        }
+      }
+    }, [trimmedCode]);
+
+    const classNames = [
+      styles.container,
+      showLineNumbers && styles.withLineNumbers,
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ');
+
+    const wrapperClasses = [
+      styles.wrapper,
+      filename && styles.hasHeader,
+    ].filter(Boolean).join(' ');
+
+    return (
+      <div ref={ref} {...htmlProps} className={classNames}>
+        {title && <div className={styles.title}>{title}</div>}
+        <div className={wrapperClasses}>
+          {filename && (
+            <div className={styles.header}>
+              <span className={styles.filename}>{filename}</span>
+            </div>
+          )}
+          {showCopy && (
+            <button
+              type="button"
+              onClick={handleCopy}
+              className={`${styles.copyButton} ${copied ? styles.copied : ''}`}
+              aria-label={copied ? 'Copied!' : 'Copy code'}
+            >
+              {copied ? (
+                <>
+                  <CheckIcon className={styles.icon} />
+                  <span>Copied!</span>
+                </>
+              ) : (
+                <>
+                  <CopyIcon className={styles.icon} />
+                  <span>Copy</span>
+                </>
+              )}
+            </button>
+          )}
+          {isLoading ? (
+            <div className={styles.loading}>
+              <pre>
+                <code>{trimmedCode}</code>
+              </pre>
+            </div>
+          ) : (
+            <div
+              className={styles.codeContainer}
+              dangerouslySetInnerHTML={{ __html: highlightedHtml }}
+            />
+          )}
+        </div>
+      </div>
+    );
+  }
+);
+
+// ============================================
+// Tabbed Code Block
+// ============================================
+
+export interface CodeBlockTab {
+  /** Label shown in the tab */
+  label: string;
+  /** Code string to display */
+  code: string;
+  /** Programming language for syntax highlighting */
+  language?: CodeBlockLanguage;
+}
+
+export interface TabbedCodeBlockProps {
+  /** Array of code tabs */
+  tabs: CodeBlockTab[];
+  /** Default selected tab (by label) */
+  defaultTab?: string;
+  /** Show copy button */
+  showCopy?: boolean;
+  /** Show line numbers */
+  showLineNumbers?: boolean;
+  /** Additional class name */
+  className?: string;
+}
+
+function TabbedCodeBlock({
+  tabs,
+  defaultTab,
+  showCopy = true,
+  showLineNumbers = false,
+  className,
+}: TabbedCodeBlockProps) {
+  const defaultValue = defaultTab || tabs[0]?.label || '';
+
+  return (
+    <div className={className}>
+      <TabsRoot defaultValue={defaultValue}>
+        <TabsList variant="pills">
+          {tabs.map((tab) => (
+            <Tab key={tab.label} value={tab.label}>
+              {tab.label}
+            </Tab>
+          ))}
+        </TabsList>
+        {tabs.map((tab) => (
+          <TabsPanel key={tab.label} value={tab.label} flush className={styles.tabbedPanel}>
+            <CodeBlockBase
+              code={tab.code}
+              language={tab.language}
+              showCopy={showCopy}
+              showLineNumbers={showLineNumbers}
+            />
+          </TabsPanel>
+        ))}
+      </TabsRoot>
+    </div>
+  );
+}
+
+// ============================================
+// Export compound component
+// ============================================
+
+export const CodeBlock = Object.assign(CodeBlockBase, {
+  Tabbed: TabbedCodeBlock,
+});
+
+export { TabbedCodeBlock };

package/src/components/ColorChip/ColorChip.module.scss

@@ -0,0 +1,165 @@
+@use '../../tokens/variables' as *;
+@use '../../tokens/mixins' as *;
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  gap: var(--fui-space-2, $fui-space-2);
+
+  &.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+}
+
+// Size variants
+.sizeSm {
+  gap: var(--fui-space-0-5, $fui-space-0-5);
+
+  .swatch {
+    width: $fui-touch-sm;
+    height: $fui-touch-sm;
+  }
+
+  .label {
+    font-size: var(--fui-font-size-xs, $fui-font-size-xs);
+  }
+
+  .hexInput {
+    font-size: var(--fui-font-size-xs, $fui-font-size-xs);
+    width: 60px;
+  }
+
+  .lockButton {
+    width: $fui-icon-lg;
+    height: $fui-icon-lg;
+
+    svg {
+      width: var(--fui-font-size-xs, $fui-font-size-xs);
+      height: var(--fui-font-size-xs, $fui-font-size-xs);
+    }
+  }
+}
+
+.sizeMd {
+  .swatch {
+    width: $fui-touch-sm;
+    height: $fui-touch-sm;
+  }
+
+  .label {
+    font-size: var(--fui-font-size-sm, $fui-font-size-sm);
+  }
+
+  .hexInput {
+    font-size: var(--fui-font-size-xs, $fui-font-size-xs);
+    width: 70px;
+  }
+}
+
+.swatch {
+  @include button-reset;
+  @include interactive-base;
+  flex-shrink: 0;
+  border: 1px solid var(--fui-border, $fui-border);
+  border-radius: var(--fui-radius-sm, $fui-radius-sm);
+
+  &:hover:not(:disabled) {
+    border-color: var(--fui-border-strong, $fui-border-strong);
+    transform: scale(1.05);
+  }
+
+  &:focus-visible {
+    @include focus-ring;
+  }
+}
+
+.label {
+  flex: 1;
+  color: var(--fui-text-primary, $fui-text-primary);
+  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
+  white-space: nowrap;
+}
+
+.hexInput {
+  @include interactive-base;
+  padding: var(--fui-space-1, $fui-space-1) var(--fui-space-2, $fui-space-2);
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--fui-radius-sm, $fui-radius-sm);
+  font-family: var(--fui-font-mono, $fui-font-mono);
+  color: var(--fui-text-secondary, $fui-text-secondary);
+  text-transform: lowercase;
+
+  &:hover:not(:disabled):not(:focus) {
+    background-color: var(--fui-bg-hover, $fui-bg-hover);
+  }
+
+  &:focus {
+    @include focus-ring;
+    background-color: var(--fui-bg-elevated, $fui-bg-elevated);
+    border-color: var(--fui-border-strong, $fui-border-strong);
+    color: var(--fui-text-primary, $fui-text-primary);
+  }
+}
+
+.lockButton {
+  @include button-reset;
+  @include interactive-base;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: $fui-touch-sm;
+  height: $fui-touch-sm;
+  border-radius: var(--fui-radius-sm, $fui-radius-sm);
+  color: var(--fui-text-tertiary, $fui-text-tertiary);
+
+  &:hover:not(:disabled) {
+    background-color: var(--fui-bg-hover, $fui-bg-hover);
+    color: var(--fui-text-secondary, $fui-text-secondary);
+  }
+
+  &:focus-visible {
+    @include focus-ring;
+  }
+
+  &.locked {
+    color: var(--fui-color-accent, $fui-color-accent);
+  }
+}
+
+.positioner {
+  z-index: 100;
+  outline: none;
+}
+
+.popup {
+  background-color: var(--fui-bg-elevated, $fui-bg-elevated);
+  border: 1px solid var(--fui-border, $fui-border);
+  border-radius: var(--fui-radius-lg, $fui-radius-lg);
+  box-shadow: var(--fui-shadow-md, $fui-shadow-md);
+  padding: var(--fui-space-2, $fui-space-2);
+
+  // react-colorful styling overrides
+  :global(.react-colorful) {
+    width: $fui-colorpicker-size;
+    height: $fui-colorpicker-size;
+  }
+
+  :global(.react-colorful__saturation) {
+    border-radius: var(--fui-radius-md, $fui-radius-md);
+    margin-bottom: var(--fui-space-2, $fui-space-2);
+  }
+
+  :global(.react-colorful__hue) {
+    height: $fui-colorpicker-hue-height;
+    border-radius: var(--fui-radius-sm, $fui-radius-sm);
+  }
+
+  :global(.react-colorful__pointer) {
+    width: $fui-colorpicker-pointer-size;
+    height: $fui-colorpicker-pointer-size;
+    border: $fui-colorpicker-pointer-border solid white;
+    box-shadow: var(--fui-shadow-sm, $fui-shadow-sm);
+  }
+}

package/src/components/ColorChip/index.tsx

@@ -0,0 +1,157 @@
+'use client';
+
+import * as React from 'react';
+import { HexColorPicker } from 'react-colorful';
+import { Popover as BasePopover } from '@base-ui/react/popover';
+import styles from './ColorChip.module.scss';
+import '../../styles/globals.scss';
+
+export interface ColorChipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  /** Color value in hex format */
+  value: string;
+  /** Callback when color changes */
+  onChange?: (color: string) => void;
+  /** Label for the color */
+  label?: string;
+  /** Show the hex value */
+  showHex?: boolean;
+  /** Size variant */
+  size?: 'sm' | 'md';
+  /** Whether the chip is locked (won't change on palette generation) */
+  locked?: boolean;
+  /** Callback when lock state changes */
+  onLockChange?: (locked: boolean) => void;
+  /** Disable editing */
+  disabled?: boolean;
+}
+
+export const ColorChip = React.forwardRef<HTMLDivElement, ColorChipProps>(
+  function ColorChip(
+    {
+      value,
+      onChange,
+      label,
+      showHex = true,
+      size = 'md',
+      locked = false,
+      onLockChange,
+      disabled = false,
+      className,
+      ...htmlProps
+    },
+    ref
+  ) {
+    const [inputValue, setInputValue] = React.useState(value);
+    const [isEditing, setIsEditing] = React.useState(false);
+
+    // Sync input when value changes externally
+    React.useEffect(() => {
+      setInputValue(value);
+    }, [value]);
+
+    const handleColorChange = (color: string) => {
+      setInputValue(color);
+      onChange?.(color);
+    };
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const newValue = e.target.value;
+      setInputValue(newValue);
+
+      // Only update if valid hex
+      if (/^#[0-9A-Fa-f]{6}$/.test(newValue)) {
+        onChange?.(newValue);
+      }
+    };
+
+    const handleInputBlur = () => {
+      setIsEditing(false);
+      // Reset to valid value on blur if invalid
+      if (!/^#[0-9A-Fa-f]{6}$/.test(inputValue)) {
+        setInputValue(value);
+      }
+    };
+
+    const handleInputKeyDown = (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter') {
+        (e.target as HTMLInputElement).blur();
+      }
+      if (e.key === 'Escape') {
+        setInputValue(value);
+        (e.target as HTMLInputElement).blur();
+      }
+    };
+
+    const handleLockClick = (e: React.MouseEvent) => {
+      e.stopPropagation();
+      onLockChange?.(!locked);
+    };
+
+    const classes = [
+      styles.wrapper,
+      styles[`size${size.charAt(0).toUpperCase() + size.slice(1)}`],
+      disabled && styles.disabled,
+      className,
+    ].filter(Boolean).join(' ');
+
+    return (
+      <div ref={ref} {...htmlProps} className={classes}>
+        <BasePopover.Root>
+          <BasePopover.Trigger
+            className={styles.swatch}
+            style={{ backgroundColor: value }}
+            disabled={disabled}
+            aria-label={label ? `Edit ${label} color` : 'Edit color'}
+          />
+          <BasePopover.Portal>
+            <BasePopover.Positioner side="bottom" align="start" sideOffset={4} className={styles.positioner}>
+              <BasePopover.Popup className={styles.popup}>
+                <HexColorPicker color={value} onChange={handleColorChange} />
+              </BasePopover.Popup>
+            </BasePopover.Positioner>
+          </BasePopover.Portal>
+        </BasePopover.Root>
+
+        {label && <span className={styles.label}>{label}</span>}
+
+        {showHex && (
+          <input
+            type="text"
+            value={inputValue}
+            onChange={handleInputChange}
+            onBlur={handleInputBlur}
+            onFocus={() => setIsEditing(true)}
+            onKeyDown={handleInputKeyDown}
+            disabled={disabled}
+            className={styles.hexInput}
+            spellCheck={false}
+            aria-label={label ? `${label} hex value` : 'Hex value'}
+          />
+        )}
+
+        {onLockChange && (
+          <button
+            type="button"
+            onClick={handleLockClick}
+            className={[styles.lockButton, locked && styles.locked].filter(Boolean).join(' ')}
+            disabled={disabled}
+            aria-label={locked ? 'Unlock color' : 'Lock color'}
+            aria-pressed={locked}
+          >
+            {locked ? (
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                <rect width="18" height="11" x="3" y="11" rx="2" ry="2" />
+                <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+              </svg>
+            ) : (
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                <rect width="18" height="11" x="3" y="11" rx="2" ry="2" />
+                <path d="M7 11V7a5 5 0 0 1 9.9-1" />
+              </svg>
+            )}
+          </button>
+        )}
+      </div>
+    );
+  }
+);