@elastic/distillate 0.0.0 → 0.1.0

package/docs/playground/src/app/monaco_source_editor.tsx

@@ -0,0 +1,132 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import 'monaco-editor/languages/definitions/typescript/register.js';
+
+import { type ReactNode, useEffect, useRef } from 'react';
+import { editor, Uri } from 'monaco-editor/editor.js';
+import {
+  ModuleKind,
+  ModuleResolutionKind,
+  ScriptTarget,
+  typescriptDefaults,
+} from 'monaco-editor/languages/features/typescript/register.js';
+
+import type { PlaygroundMode } from '../lib/compile';
+import { extraLibSource, PLAYGROUND_EXTRA_LIB_PATH } from '../lib/editor_lib';
+import { ensureMonaco, SOURCE_THEME } from '../setup/monaco_env';
+
+const MODEL_URI = 'file:///playground.ts';
+
+let monacoReady = false;
+
+const ensureSourceLanguage = (): void => {
+  if (monacoReady) {
+    return;
+  }
+  monacoReady = true;
+  ensureMonaco();
+  typescriptDefaults.setCompilerOptions({
+    target: ScriptTarget.ESNext,
+    module: ModuleKind.ESNext,
+    moduleResolution: ModuleResolutionKind.NodeJs,
+    lib: ['es2022', 'dom'],
+    strict: true,
+    noEmit: true,
+    allowNonTsExtensions: true,
+  });
+  typescriptDefaults.setDiagnosticsOptions({
+    noSemanticValidation: false,
+    noSyntaxValidation: false,
+    diagnosticCodesToIgnore: [1108],
+  });
+};
+
+const syncExtraLib = (mode: PlaygroundMode): void => {
+  typescriptDefaults.setExtraLibs([
+    { content: extraLibSource(mode), filePath: PLAYGROUND_EXTRA_LIB_PATH },
+  ]);
+};
+
+interface MonacoSourceEditorProps {
+  readonly mode: PlaygroundMode;
+  readonly source: string;
+  readonly onSourceChange: (source: string) => void;
+}
+
+export const MonacoSourceEditor = ({
+  mode,
+  source,
+  onSourceChange,
+}: MonacoSourceEditorProps): ReactNode => {
+  const hostRef = useRef<HTMLDivElement>(null);
+  const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
+  const onSourceChangeRef = useRef(onSourceChange);
+  onSourceChangeRef.current = onSourceChange;
+
+  useEffect(() => {
+    const host = hostRef.current;
+    if (!host) {
+      return;
+    }
+    const initialMode = mode;
+    const initialSource = source;
+    ensureSourceLanguage();
+    syncExtraLib(initialMode);
+    const uri = Uri.parse(MODEL_URI);
+    const existing = editor.getModel(uri);
+    const model =
+      existing ?? editor.createModel(initialSource, 'typescript', uri);
+    if (existing && existing.getValue() !== initialSource) {
+      existing.setValue(initialSource);
+    }
+    const instance = editor.create(host, {
+      model,
+      theme: SOURCE_THEME,
+      automaticLayout: true,
+      minimap: { enabled: false },
+      fontSize: 13,
+      fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, monospace',
+      lineHeight: 20,
+      tabSize: 2,
+      insertSpaces: true,
+      scrollBeyondLastLine: false,
+      wordWrap: 'off',
+      padding: { top: 12, bottom: 12 },
+      fixedOverflowWidgets: true,
+      ariaLabel: 'Playground source',
+      renderLineHighlight: 'line',
+      overviewRulerLanes: 0,
+      hideCursorInOverviewRuler: true,
+      scrollbar: { verticalScrollbarSize: 10, horizontalScrollbarSize: 10 },
+    });
+    editorRef.current = instance;
+    const sub = instance.onDidChangeModelContent(() => {
+      onSourceChangeRef.current(instance.getValue());
+    });
+    return () => {
+      sub.dispose();
+      instance.dispose();
+      editorRef.current = null;
+      model.dispose();
+    };
+  }, []);
+
+  useEffect(() => {
+    syncExtraLib(mode);
+  }, [mode]);
+
+  useEffect(() => {
+    const instance = editorRef.current;
+    if (!instance || instance.getValue() === source) {
+      return;
+    }
+    instance.setValue(source);
+  }, [source]);
+
+  return <div ref={hostRef} data-pg-monaco="" />;
+};

package/docs/playground/src/app/preview_panel.tsx

@@ -0,0 +1,99 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { type ReactNode, useEffect, useRef } from 'react';
+
+import type { CompileError, CompileSuccess } from '../lib/compile';
+import { cx, ui } from '../setup/chrome';
+
+import type { PreviewTheme } from './types';
+
+const { handles: h } = ui;
+
+const stageLabel: Record<CompileError['stage'], string> = {
+  transform: 'Syntax error',
+  evaluate: 'Runtime error',
+  render: 'Render error',
+};
+
+export interface PreviewPanelProps {
+  readonly display: CompileSuccess | null;
+  readonly error: CompileError | null;
+  readonly theme: PreviewTheme;
+  readonly onThemeChange: (theme: PreviewTheme) => void;
+}
+
+export const PreviewPanel = ({
+  display,
+  error,
+  theme,
+  onThemeChange,
+}: PreviewPanelProps): ReactNode => {
+  return (
+    <section className={cx(h.panel, h.dockPreview)}>
+      {error ? (
+        <div className={h.callout.readableName} role="alert">
+          <strong>{stageLabel[error.stage]}</strong>
+          <pre>{error.message}</pre>
+        </div>
+      ) : null}
+      <div className={h.toolbar.readableName}>
+        <h2>Preview</h2>
+        <div
+          className={h.segmented.readableName}
+          role="group"
+          aria-label="Preview color scheme">
+          <button
+            type="button"
+            aria-pressed={theme === 'light'}
+            onClick={() => onThemeChange('light')}>
+            Light
+          </button>
+          <button
+            type="button"
+            aria-pressed={theme === 'dark'}
+            onClick={() => onThemeChange('dark')}>
+            Dark
+          </button>
+        </div>
+      </div>
+      <PreviewHost
+        html={display?.previewHtml ?? ''}
+        readableCss={display?.readableCss ?? ''}
+        {...{ theme }}
+      />
+    </section>
+  );
+};
+
+interface PreviewHostProps {
+  readonly html: string;
+  readonly readableCss: string;
+  readonly theme: PreviewTheme;
+}
+
+const PreviewHost = ({
+  html,
+  readableCss,
+  theme,
+}: PreviewHostProps): ReactNode => {
+  const hostRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const host = hostRef.current;
+    if (!host) {
+      return;
+    }
+    const shadow = host.shadowRoot ?? host.attachShadow({ mode: 'open' });
+    shadow.innerHTML =
+      `<style>:host{color-scheme:${theme};display:block;height:100%;background:${theme === 'dark' ? '#0B1628' : '#FFFFFF'};box-sizing:border-box}[data-pg-stage]{min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box}</style>` +
+      `<style>${readableCss}</style>` +
+      `<div data-pg-stage="">${html}</div>`;
+  }, [html, readableCss, theme]);
+
+  return <div ref={hostRef} className={h.previewHost.readableName} />;
+};

package/docs/playground/src/app/tokens_panel.tsx

@@ -0,0 +1,117 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import type { ReactNode } from 'react';
+
+import {
+  demoTokenCatalog,
+  type DemoTokenCatalogEntry,
+} from '../lib/demo_environment';
+import { cx, ui } from '../setup/chrome';
+
+import type { PreviewTheme } from './types';
+
+const { handles: h } = ui;
+
+const looksLikeCssColor = (value: string): boolean =>
+  /^#|^rgba?\(|^hsla?\(|^oklch\(|^lab\(/i.test(value.trim());
+
+export interface TokensPanelProps {
+  readonly theme: PreviewTheme;
+}
+
+export const TokensPanel = ({ theme }: TokensPanelProps): ReactNode => (
+  <section className={cx(h.panel, h.tokens)}>
+    <div className={h.toolbar.readableName}>
+      <h2>Tokens</h2>
+    </div>
+    <div className={h.tokenPanel.readableName}>
+      <table className={h.tokenTable.readableName}>
+        <thead>
+          <tr>
+            <th>Token</th>
+            <th>Value</th>
+          </tr>
+        </thead>
+        <tbody>
+          {demoTokenCatalog.map((entry) => (
+            <tr key={entry.access}>
+              <td>
+                <code>{entry.access}</code>
+              </td>
+              <td>
+                <TokenValue {...{ entry, theme }} />
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  </section>
+);
+
+interface TokenValueProps {
+  readonly entry: DemoTokenCatalogEntry;
+  readonly theme: PreviewTheme;
+}
+
+const TokenValue = ({ entry, theme }: TokenValueProps): ReactNode => {
+  if (entry.kind === 'scale') {
+    return (
+      <span className={h.tokenValue.readableName}>
+        {entry.value}
+        {entry.cq !== entry.value ? ` · .cq ${entry.cq}` : null}
+      </span>
+    );
+  }
+
+  const showSwatches =
+    looksLikeCssColor(entry.light) || looksLikeCssColor(entry.dark);
+  const same = entry.light === entry.dark;
+
+  return (
+    <span className={h.tokenValue.readableName}>
+      {showSwatches ? (
+        <>
+          <ColorSwatch
+            color={entry.light}
+            active={theme === 'light'}
+            scheme="light"
+          />
+          {same ? null : (
+            <ColorSwatch
+              color={entry.dark}
+              active={theme === 'dark'}
+              scheme="dark"
+            />
+          )}
+        </>
+      ) : null}
+      {same ? entry.light : `${entry.light} / ${entry.dark}`}
+    </span>
+  );
+};
+
+interface ColorSwatchProps {
+  readonly color: string;
+  readonly active: boolean;
+  readonly scheme: PreviewTheme;
+}
+
+const ColorSwatch = ({
+  color,
+  active,
+  scheme,
+}: ColorSwatchProps): ReactNode => (
+  <span
+    className={h.swatch.readableName}
+    data-active={active ? '' : undefined}
+    title={`${scheme} ${color}`}
+    aria-label={`${scheme} ${color}`}
+    style={{ background: color }}
+  />
+);

package/docs/playground/src/app/types.ts

@@ -0,0 +1,10 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export type PreviewTheme = 'light' | 'dark';
+
+export type CssTab = 'readable' | 'compact' | 'artifact';

package/docs/playground/src/examples/snippets.test.ts

@@ -0,0 +1,28 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { describe, expect, it } from 'vitest';
+
+import { snippetById, snippetCatalog, snippets } from './snippets';
+
+describe('snippet catalog', () => {
+  it('lists the same ids and labels in both modes', () => {
+    const meta = (mode: 'emotion' | 'native') =>
+      snippets[mode].map(({ id, label }) => ({ id, label }));
+    expect(meta('emotion')).toEqual(meta('native'));
+    expect(snippets.emotion.map(({ id }) => id)).toEqual(
+      snippetCatalog.map(({ id }) => id)
+    );
+  });
+
+  it('loads both authoring modes from one snippet id', () => {
+    const bundle = snippetById('tree-shake');
+    expect(bundle?.id).toBe('tree-shake');
+    expect(bundle?.source.emotion).toContain('css`');
+    expect(bundle?.source.native).toContain('createStyleModule');
+  });
+});