@astryxdesign/lab 0.0.0-bootstrap.0 → 0.1.2-canary.04e71b2

package/src/CodeEditor/CodeEditor.tsx

@@ -0,0 +1,466 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file CodeEditor.tsx
+ * @input Uses React, StyleX, theme tokens, CSS Custom Highlight API
+ * @output Exports CodeEditor component and CodeEditorProps
+ * @position Core implementation; editable code input (lab/experimental)
+ *
+ * SYNC: When modified, update:
+ * - /packages/lab/src/CodeEditor/index.ts (exports if types change)
+ * - /packages/lab/src/CodeBlock/tokenizer.ts (shared tokenizer)
+ * - /packages/lab/src/CodeBlock/highlightStyles.ts (::highlight rules)
+ */
+
+'use client';
+
+import {useEffect, useLayoutEffect, useRef, useCallback, useState} from 'react';
+import type {BaseProps} from '@astryxdesign/core';
+import * as stylex from '@stylexjs/stylex';
+import {
+  colorVars,
+  spacingVars,
+  radiusVars,
+  textSizeVars,
+  typographyVars,
+  typeScaleVars,
+  borderVars,
+} from '@astryxdesign/core/theme/tokens.stylex';
+import {mergeProps} from '@astryxdesign/core/utils';
+import {
+  tokenize,
+  tokenizeAsync,
+  SYNC_TOKENIZE_THRESHOLD,
+} from '@astryxdesign/core/CodeBlock';
+import type {TokenLine} from '@astryxdesign/core/CodeBlock';
+import {themeProps} from '@astryxdesign/core/utils';
+import {
+  ensureHighlightStyles,
+  applyHighlightRangesFlat,
+} from '@astryxdesign/core/CodeBlock';
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+const styles = stylex.create({
+  root: {
+    position: 'relative',
+    display: 'flex',
+    borderRadius: radiusVars['--radius-element'],
+    backgroundColor: colorVars['--color-background-muted'],
+    border: `${borderVars['--border-width']} solid ${colorVars['--color-border']}`,
+    overflow: 'hidden',
+  },
+  rootFocused: {
+    borderColor: colorVars['--color-accent'],
+    boxShadow: `0 0 0 1px ${colorVars['--color-accent']}`,
+  },
+  gutter: {
+    flexShrink: 0,
+    paddingBlock: spacingVars['--spacing-3'],
+    paddingInlineStart: spacingVars['--spacing-4'],
+    paddingInlineEnd: spacingVars['--spacing-3'],
+    textAlign: 'end',
+    userSelect: 'none',
+    color: colorVars['--color-text-disabled'],
+    borderRight: `${borderVars['--border-width']} solid ${colorVars['--color-border']}`,
+  },
+  gutterLine: {
+    fontFamily: typographyVars['--font-family-code'],
+    lineHeight: typeScaleVars['--text-code-leading'],
+  },
+  editorContainer: {
+    display: 'flex',
+    flex: 1,
+    overflow: 'auto',
+  },
+  editor: {
+    display: 'block',
+    minHeight: '3em',
+    paddingBlock: spacingVars['--spacing-3'],
+    paddingInline: spacingVars['--spacing-4'],
+    margin: 0,
+    fontFamily: typographyVars['--font-family-code'],
+    color: colorVars['--color-text-primary'],
+    tabSize: 2,
+    whiteSpace: 'pre',
+    wordBreak: 'normal',
+    overflowWrap: 'normal',
+    outline: 'none',
+    caretColor: colorVars['--color-text-primary'],
+    lineHeight: typeScaleVars['--text-code-leading'],
+  },
+  placeholder: {
+    position: 'absolute',
+    top: spacingVars['--spacing-3'],
+    left: spacingVars['--spacing-4'],
+    color: colorVars['--color-text-disabled'],
+    fontFamily: typographyVars['--font-family-code'],
+    lineHeight: typeScaleVars['--text-code-leading'],
+    pointerEvents: 'none',
+    userSelect: 'none',
+  },
+  sizeSm: {
+    fontSize: textSizeVars['--font-size-sm'],
+  },
+  sizeMd: {
+    fontSize: textSizeVars['--font-size-base'],
+  },
+  gutterSm: {
+    fontSize: textSizeVars['--font-size-sm'],
+  },
+  gutterMd: {
+    fontSize: textSizeVars['--font-size-base'],
+  },
+});
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+export interface CodeEditorProps extends Omit<
+  BaseProps<HTMLDivElement>,
+  'onChange'
+> {
+  /** Ref forwarded to the root element */
+  ref?: React.Ref<HTMLDivElement>;
+  /** Controlled value */
+  value: string;
+  /** Change handler */
+  onChange: (value: string) => void;
+  /** Language for highlighting. @default "plaintext" */
+  language?: string;
+  /** Show line numbers. @default false */
+  hasLineNumbers?: boolean;
+  /** Read-only mode. @default false */
+  isReadOnly?: boolean;
+  /** Placeholder when empty */
+  placeholder?: string;
+  /** Max height before scrolling */
+  maxHeight?: number | string;
+  /** Text size. @default "md" */
+  size?: 'sm' | 'md';
+  /** Custom tokenizer */
+  tokenizer?: (code: string, language: string) => TokenLine[];
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function hasHighlightAPI(): boolean {
+  return (
+    typeof CSS !== 'undefined' &&
+    'highlights' in CSS &&
+    typeof Highlight !== 'undefined'
+  );
+}
+
+const AUTO_CLOSE_PAIRS: Record<string, string> = {
+  '(': ')',
+  '[': ']',
+  '{': '}',
+  '"': '"',
+  "'": "'",
+  '`': '`',
+};
+
+let editorInstanceCounter = 0;
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+/**
+ * An editable code input using contentEditable="plaintext-only".
+ *
+ * Uses CSS Custom Highlight API for syntax coloring. Supports
+ * auto-indent, tab insertion, and bracket auto-closing.
+ *
+ * @example
+ * ```tsx
+ * const [code, setCode] = useState('');
+ * <CodeEditor
+ *   value={code}
+ *   onChange={setCode}
+ *   language="typescript"
+ *   hasLineNumbers
+ * />
+ * ```
+ */
+export function CodeEditor({
+  value,
+  onChange,
+  language = 'plaintext',
+  hasLineNumbers = false,
+  isReadOnly = false,
+  placeholder,
+  maxHeight,
+  size = 'md',
+  tokenizer: customTokenizer,
+  xstyle,
+  className,
+  style,
+  ref,
+  ...props
+}: CodeEditorProps) {
+  const editorRef = useRef<HTMLElement>(null);
+  const [instanceId] = useState(() => ++editorInstanceCounter);
+  const [focused, setFocused] = useState(false);
+  const isComposingRef = useRef(false);
+
+  const lines = value.split('\n');
+
+  // Sync textContent with controlled value
+  useLayoutEffect(() => {
+    const el = editorRef.current;
+    if (!el) {
+      return;
+    }
+    if (el.textContent !== value) {
+      el.textContent = value;
+    }
+  }, [value]);
+
+  // Ensure styles are always injected
+  useLayoutEffect(() => {
+    ensureHighlightStyles();
+  }, []);
+
+  // Apply CSS Custom Highlight API ranges — small code
+  useLayoutEffect(() => {
+    if (value.length >= SYNC_TOKENIZE_THRESHOLD) {
+      return;
+    }
+    if (!hasHighlightAPI()) {
+      return;
+    }
+
+    const el = editorRef.current;
+    if (!el) {
+      return;
+    }
+
+    const tok = customTokenizer ?? tokenize;
+    const tokens = tok(value, language);
+    if (tokens.length === 0) {
+      return;
+    }
+
+    return applyHighlightRangesFlat(el, tokens);
+  }, [value, language, customTokenizer, instanceId]);
+
+  // Apply CSS Custom Highlight API ranges — large code (async)
+  useEffect(() => {
+    if (value.length < SYNC_TOKENIZE_THRESHOLD) {
+      return;
+    }
+    if (!hasHighlightAPI()) {
+      return;
+    }
+
+    const el = editorRef.current;
+    if (!el) {
+      return;
+    }
+
+    const abortController = new AbortController();
+    let cleanup: (() => void) | undefined;
+
+    tokenizeAsync(value, language, abortController.signal).then(tokens => {
+      if (abortController.signal.aborted) {
+        return;
+      }
+      if (tokens.length === 0) {
+        return;
+      }
+      cleanup = applyHighlightRangesFlat(el, tokens);
+    });
+
+    return () => {
+      abortController.abort();
+      cleanup?.();
+    };
+  }, [value, language, customTokenizer, instanceId]);
+
+  const handleInput = useCallback(() => {
+    if (isComposingRef.current) {
+      return;
+    }
+    const el = editorRef.current;
+    if (!el) {
+      return;
+    }
+    const newValue = el.textContent ?? '';
+    onChange(newValue);
+  }, [onChange]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLDivElement>) => {
+      if (isReadOnly) {
+        return;
+      }
+
+      // Tab key: insert 2 spaces
+      if (e.key === 'Tab') {
+        e.preventDefault();
+        const sel = window.getSelection();
+        if (!sel || sel.rangeCount === 0) {
+          return;
+        }
+        const range = sel.getRangeAt(0);
+        range.deleteContents();
+        const textNode = document.createTextNode('  ');
+        range.insertNode(textNode);
+        range.setStartAfter(textNode);
+        range.setEndAfter(textNode);
+        sel.removeAllRanges();
+        sel.addRange(range);
+        const el = editorRef.current;
+        if (el) {
+          onChange(el.textContent ?? '');
+        }
+        return;
+      }
+
+      // Enter key: preserve indentation
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        const sel = window.getSelection();
+        if (!sel || sel.rangeCount === 0) {
+          return;
+        }
+
+        const el = editorRef.current;
+        if (!el) {
+          return;
+        }
+        const fullText = el.textContent ?? '';
+
+        // Find cursor offset
+        const range = sel.getRangeAt(0);
+        const preCaretRange = range.cloneRange();
+        preCaretRange.selectNodeContents(el);
+        preCaretRange.setEnd(range.startContainer, range.startOffset);
+        const cursorOffset = preCaretRange.toString().length;
+
+        // Find current line and its indentation
+        const beforeCursor = fullText.slice(0, cursorOffset);
+        const lastNewline = beforeCursor.lastIndexOf('\n');
+        const currentLine = beforeCursor.slice(lastNewline + 1);
+        const indent = currentLine.match(/^(\s*)/)?.[1] ?? '';
+
+        // Insert newline + indent
+        const insertText = '\n' + indent;
+        range.deleteContents();
+        const textNode = document.createTextNode(insertText);
+        range.insertNode(textNode);
+        range.setStartAfter(textNode);
+        range.setEndAfter(textNode);
+        sel.removeAllRanges();
+        sel.addRange(range);
+        onChange(el.textContent ?? '');
+        return;
+      }
+
+      // Auto-close brackets and quotes
+      const closeChar = AUTO_CLOSE_PAIRS[e.key];
+      if (closeChar) {
+        const sel = window.getSelection();
+        if (!sel || sel.rangeCount === 0) {
+          return;
+        }
+        const range = sel.getRangeAt(0);
+
+        // Only auto-close if no text is selected
+        if (!range.collapsed) {
+          return;
+        }
+
+        e.preventDefault();
+        const textNode = document.createTextNode(e.key + closeChar);
+        range.deleteContents();
+        range.insertNode(textNode);
+        // Place cursor between the pair
+        range.setStart(textNode, 1);
+        range.setEnd(textNode, 1);
+        sel.removeAllRanges();
+        sel.addRange(range);
+        const el = editorRef.current;
+        if (el) {
+          onChange(el.textContent ?? '');
+        }
+      }
+    },
+    [isReadOnly, onChange],
+  );
+
+  const handleCompositionStart = useCallback(() => {
+    isComposingRef.current = true;
+  }, []);
+
+  const handleCompositionEnd = useCallback(() => {
+    isComposingRef.current = false;
+    handleInput();
+  }, [handleInput]);
+
+  const sizeStyle = size === 'sm' ? styles.sizeSm : styles.sizeMd;
+  const gutterSizeStyle = size === 'sm' ? styles.gutterSm : styles.gutterMd;
+  const showPlaceholder = placeholder && value === '';
+
+  const containerStyle: React.CSSProperties | undefined = maxHeight
+    ? {maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight}
+    : undefined;
+
+  return (
+    <div
+      ref={ref}
+      {...mergeProps(
+        themeProps('codeeditor', {size, language}),
+        stylex.props(styles.root, focused && styles.rootFocused, xstyle),
+        className,
+        style,
+      )}
+      {...props}>
+      <div {...stylex.props(styles.editorContainer)} style={containerStyle}>
+        {hasLineNumbers && (
+          <div
+            {...stylex.props(styles.gutter, gutterSizeStyle)}
+            aria-hidden="true">
+            {lines.map((_, i) => (
+              <div key={i} {...stylex.props(styles.gutterLine)}>
+                {i + 1}
+              </div>
+            ))}
+          </div>
+        )}
+        <div style={{position: 'relative', flex: 1}}>
+          {showPlaceholder && (
+            <div {...stylex.props(styles.placeholder, sizeStyle)}>
+              {placeholder}
+            </div>
+          )}
+          <code
+            ref={editorRef}
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            contentEditable={isReadOnly ? false : ('plaintext-only' as any)}
+            role="textbox"
+            aria-multiline="true"
+            aria-readonly={isReadOnly}
+            spellCheck={false}
+            onInput={handleInput}
+            onKeyDown={handleKeyDown}
+            onFocus={() => setFocused(true)}
+            onBlur={() => setFocused(false)}
+            onCompositionStart={handleCompositionStart}
+            onCompositionEnd={handleCompositionEnd}
+            {...stylex.props(styles.editor, sizeStyle)}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+CodeEditor.displayName = 'CodeEditor';

package/src/CodeEditor/index.ts

@@ -0,0 +1,8 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file CodeEditor component barrel export
+ */
+
+export {CodeEditor} from './CodeEditor';
+export type {CodeEditorProps} from './CodeEditor';

package/src/Radial/RadialArea.tsx

@@ -0,0 +1,103 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file RadialArea.tsx
+ * @output Renders a spider/radar polygon for a dataset
+ */
+
+import {useMemo} from 'react';
+import {useRadial} from './RadialContext';
+
+export interface RadialAreaProps {
+  /** Key identifying which dataset row to plot (matches a value in data) */
+  dataKey: string;
+  /** Fill color */
+  color: string;
+  /** Fill opacity (default: 0.2) */
+  opacity?: number;
+  /** Stroke width (default: 2) */
+  strokeWidth?: number;
+  /** Show dots at vertices */
+  dots?: boolean;
+  /** Dot radius */
+  dotRadius?: number;
+}
+
+/**
+ * Spider/radar polygon. Reads axis definitions and scales from radial context.
+ * Each axis value is normalized to [0,1] within its domain, then mapped to radius.
+ *
+ * @example
+ * ```
+ * <RadialArea dataKey="modelA" color={colors[0]} dots />
+ * ```
+ */
+export function RadialArea({
+  dataKey,
+  color,
+  opacity = 0.2,
+  strokeWidth = 2,
+  dots = false,
+  dotRadius = 4,
+}: RadialAreaProps) {
+  const {cx, cy, data, axes, angleByAxis, radiusScale, axisDomains} =
+    useRadial();
+
+  const points = useMemo(() => {
+    if (!axes || !angleByAxis || !radiusScale || !axisDomains) {
+      return [];
+    }
+
+    // Find the data row matching this key
+    // dataKey matches a value in the first non-axis field, or we use the index
+    const datum =
+      data.find(d => {
+        // Check if any string field matches dataKey
+        return Object.values(d).some(v => v === dataKey);
+      }) ?? data[0];
+
+    if (!datum) {
+      return [];
+    }
+
+    return axes.map(key => {
+      const angle = angleByAxis.get(key);
+      const domain = axisDomains.get(key);
+      if (angle == null || !domain) {
+        return {x: cx, y: cy, key};
+      }
+      const raw = typeof datum[key] === 'number' ? (datum[key] as number) : 0;
+      const [min, max] = domain;
+      const t = max > min ? (raw - min) / (max - min) : 0;
+      const r = radiusScale(Math.max(0, Math.min(1, t)));
+      return {
+        x: cx + Math.cos(angle) * r,
+        y: cy + Math.sin(angle) * r,
+        key,
+      };
+    });
+  }, [cx, cy, data, dataKey, axes, angleByAxis, radiusScale, axisDomains]);
+
+  if (points.length === 0) {
+    return null;
+  }
+
+  const pathPoints = points.map(p => `${p.x},${p.y}`).join(' ');
+
+  return (
+    <g>
+      <polygon
+        points={pathPoints}
+        fill={color}
+        fillOpacity={opacity}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinejoin="round"
+      />
+      {dots &&
+        points.map(p => (
+          <circle key={p.key} cx={p.x} cy={p.y} r={dotRadius} fill={color} />
+        ))}
+    </g>
+  );
+}

package/src/Radial/RadialAxis.tsx

@@ -0,0 +1,60 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file RadialAxis.tsx
+ * @output Renders axis labels at each spider vertex
+ */
+
+import {useRadial} from './RadialContext';
+
+export interface RadialAxisProps {
+  /** Label offset from the outer ring in pixels (default: 16) */
+  labelOffset?: number;
+}
+
+/**
+ * Axis labels positioned at each spider chart vertex.
+ *
+ * @example
+ * ```
+ * <RadialAxis />
+ * ```
+ */
+export function RadialAxis({labelOffset = 16}: RadialAxisProps) {
+  const {cx, cy, radius, axes, angleByAxis} = useRadial();
+
+  if (!axes || !angleByAxis) {
+    return null;
+  }
+
+  return (
+    <g>
+      {axes.map(key => {
+        const angle = angleByAxis.get(key);
+        if (angle == null) {
+          return null;
+        }
+        const x = cx + Math.cos(angle) * (radius + labelOffset);
+        const y = cy + Math.sin(angle) * (radius + labelOffset);
+
+        // Determine text anchor based on position
+        const isRight = Math.cos(angle) > 0.1;
+        const isLeft = Math.cos(angle) < -0.1;
+        const anchor = isRight ? 'start' : isLeft ? 'end' : 'middle';
+
+        return (
+          <text
+            key={key}
+            x={x}
+            y={y}
+            textAnchor={anchor}
+            dominantBaseline="central"
+            fill="var(--color-text-secondary)"
+            fontSize={12}>
+            {key}
+          </text>
+        );
+      })}
+    </g>
+  );
+}

package/src/Radial/RadialChart.doc.mjs

@@ -0,0 +1,16 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../core/src/docs-types').ComponentDoc} */
+
+export const docs = {
+  name: 'RadialChart',
+  displayName: 'Radial Chart',
+  group: 'Radial',
+  category: 'Data Visualization',
+
+  usage: {
+    description: '',
+  },
+
+  props: [],
+};