@elastic/distillate 0.0.0 → 0.1.0

package/docs/playground/src/lib/format_css.test.ts

@@ -0,0 +1,41 @@
+/*
+ * 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 { formatCss } from './format_css';
+
+describe('formatCss', () => {
+  it('expands a minified rule into indented lines', () => {
+    expect(formatCss('.a{color:red;padding:8px}')).toBe(
+      ['.a {', '  color:red;', '  padding:8px;', '}'].join('\n')
+    );
+  });
+
+  it('nests at-rule blocks', () => {
+    const input = '@media (min-width:400px){.a{color:red}}';
+    expect(formatCss(input)).toBe(
+      [
+        '@media (min-width:400px) {',
+        '  .a {',
+        '    color:red;',
+        '  }',
+        '}',
+      ].join('\n')
+    );
+  });
+
+  it('leaves braces inside string literals untouched', () => {
+    expect(formatCss('.a{content:"}"}')).toBe(
+      ['.a {', '  content:"}";', '}'].join('\n')
+    );
+  });
+
+  it('returns an empty string for empty input', () => {
+    expect(formatCss('')).toBe('');
+  });
+});

package/docs/playground/src/lib/format_css.ts

@@ -0,0 +1,71 @@
+/*
+ * 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 const formatCss = (css: string): string => {
+  if (!css) {
+    return '';
+  }
+  const lines: string[] = [];
+  let current = '';
+  let depth = 0;
+  let quote: '"' | "'" | null = null;
+
+  const indent = (level: number): string => '  '.repeat(Math.max(level, 0));
+  const flush = (level: number): void => {
+    const trimmed = current.trim();
+    if (trimmed) {
+      lines.push(indent(level) + trimmed);
+    }
+    current = '';
+  };
+
+  for (let i = 0; i < css.length; i += 1) {
+    const char = css[i];
+
+    if (quote) {
+      current += char;
+      if (char === quote && css[i - 1] !== '\\') {
+        quote = null;
+      }
+      continue;
+    }
+
+    if (char === '"' || char === "'") {
+      quote = char;
+      current += char;
+      continue;
+    }
+
+    if (char === '{') {
+      current += ' {';
+      flush(depth);
+      depth += 1;
+      continue;
+    }
+
+    if (char === '}') {
+      if (current.trim()) {
+        current += ';';
+      }
+      flush(depth);
+      depth -= 1;
+      lines.push(indent(depth) + '}');
+      continue;
+    }
+
+    if (char === ';') {
+      current += ';';
+      flush(depth);
+      continue;
+    }
+
+    current += char;
+  }
+
+  flush(depth);
+  return lines.join('\n');
+};

package/docs/playground/src/main.tsx

@@ -0,0 +1,25 @@
+/*
+ * 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 { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import { App } from './app';
+import { mountChromeStyles } from './setup/chrome';
+
+const root = document.getElementById('root');
+if (!root) {
+  throw new Error('Missing #root');
+}
+
+mountChromeStyles(document);
+
+createRoot(root).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

package/docs/playground/src/setup/chrome.test.ts

@@ -0,0 +1,47 @@
+/*
+ * 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 { distillery, ui } from './chrome';
+
+describe('playground chrome stylesheet', () => {
+  const css = distillery.renderStyles(distillery.stylesheetCollector());
+
+  it('emits theme vars on :root with the playground prefix, not the snippet prefix', () => {
+    expect(css).toContain(':root{');
+    expect(css).toContain('--pg-color-accent:');
+    expect(css).not.toContain('--dstl-');
+  });
+
+  it('emits readable chrome classes and nested chrome selectors', () => {
+    expect(css).toContain(`.${ui.handles.shell.readableName}{`);
+    expect(css).toContain(
+      `.${ui.handles.segmented.readableName} button[aria-pressed='true']`
+    );
+    expect(css).toContain('@media (min-width:800px)');
+    expect(css).toContain('grid-area:source');
+    expect(css).toContain('grid-area:output');
+    expect(css).toContain(`.${ui.handles.dockOutput.readableName}{`);
+    expect(css).toContain('box-sizing:border-box');
+    expect(css).toMatch(
+      new RegExp(
+        `\\.${ui.handles.editor.readableName} \\[data-pg-monaco\\]\\{[^}]*background:var\\(--pg-color-code\\)`
+      )
+    );
+    expect(css).toContain('@media (min-width:1100px)');
+    expect(css).toMatch(
+      new RegExp(
+        `\\.${ui.handles.cssOut.readableName}\\{[^}]*background:var\\(--pg-color-bg\\)`
+      )
+    );
+    expect(css).toContain(`.${ui.handles.cssStats.readableName}{`);
+    expect(css).toContain(`.${ui.handles.tokenTable.readableName} code{`);
+    expect(css).toContain(`.${ui.handles.swatch.readableName}[data-active]{`);
+    expect(css).toContain(`.${ui.handles.dockSource.readableName}{`);
+  });
+});

package/docs/playground/src/setup/chrome.ts

@@ -0,0 +1,365 @@
+/*
+ * 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 {
+  cq,
+  createDistillery,
+  type Distillery,
+  lightDark,
+  type StyleHandle,
+  type TokensOf,
+} from '@elastic/distillate';
+import { createDomSink, createEmotion } from '@elastic/distillate/emotion';
+
+const sansStack = 'system-ui, -apple-system, "Segoe UI", sans-serif';
+const monoStack = 'ui-monospace, SFMono-Regular, Menlo, Monaco, monospace';
+
+const chromeTheme = {
+  color: {
+    bg: lightDark('#f4f6f8', '#0f1218'),
+    panel: lightDark('#ffffff', '#171b24'),
+    ink: lightDark('#1b1e28', '#e6e8f0'),
+    muted: lightDark('#5a6472', '#9aa4b6'),
+    line: lightDark('#dce2ea', '#2b3242'),
+    accent: lightDark('#0b64dd', '#7aa7ff'),
+    danger: lightDark('#b42318', '#ff8a80'),
+    code: lightDark('#0f141c', '#0b0e14'),
+  },
+  space: {
+    s: cq('8px', '2cqi'),
+    m: cq('16px', '4cqi'),
+    l: cq('24px', '6cqi'),
+  },
+  radius: {
+    s: cq('8px', '8px'),
+    m: cq('12px', '12px'),
+  },
+  font: {
+    sans: sansStack,
+    mono: monoStack,
+  },
+};
+
+export type ChromeTokens = TokensOf<typeof chromeTheme>;
+
+export const distillery: Distillery<ChromeTokens> = createDistillery({
+  prefix: 'pg',
+  themeScope: ':root',
+  theme: chromeTheme,
+});
+
+const barHeight = '40px';
+const controlHeight = '28px';
+
+export const ui = distillery.createStyleModule('ui', (t) => ({
+  shell: t.css`
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+    overflow: hidden;
+  `,
+  top: t.css`
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    height: ${barHeight};
+    flex: 0 0 ${barHeight};
+    padding: 0 12px;
+    background: ${t.tokens.color.panel};
+    border-block-end: 1px solid ${t.tokens.color.line};
+    h1 {
+      margin: 0;
+      font-size: 0.95rem;
+      font-weight: 600;
+      letter-spacing: -0.02em;
+      line-height: 1;
+    }
+  `,
+  brand: t.css`
+    color: ${t.tokens.color.accent};
+    text-decoration: none;
+    font-weight: 600;
+    font-size: 0.85rem;
+    line-height: 1;
+  `,
+  layout: t.css`
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+    display: grid;
+    gap: 1px;
+    background: ${t.tokens.color.line};
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: minmax(16rem, 42vh) minmax(0, 1fr);
+    grid-template-areas:
+      'source'
+      'output';
+    @media (min-width: 800px) {
+      grid-template-columns: minmax(18rem, 32rem) minmax(0, 1fr);
+      grid-template-rows: minmax(0, 1fr);
+      grid-template-areas: 'source output';
+    }
+    @media (min-width: 1100px) {
+      grid-template-columns: minmax(24rem, 40rem) minmax(0, 1fr);
+    }
+  `,
+  dockSource: t.css`
+    grid-area: source;
+    display: grid;
+    grid-template-rows: minmax(0, 1fr) minmax(16rem, 38%);
+    min-width: 0;
+    min-height: 0;
+    gap: 1px;
+    background: ${t.tokens.color.line};
+    > * {
+      min-height: 0;
+    }
+  `,
+  dockOutput: t.css`
+    grid-area: output;
+    display: grid;
+    grid-template-rows: minmax(0, 1fr) minmax(8rem, 28%);
+    min-width: 0;
+    min-height: 0;
+    gap: 1px;
+    background: ${t.tokens.color.line};
+    > * {
+      min-height: 0;
+    }
+  `,
+  dockPreview: t.css`
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+  `,
+  dockCss: t.css`
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+  `,
+  panel: t.css`
+    background: ${t.tokens.color.panel};
+    overflow: hidden;
+    min-width: 0;
+    min-height: 0;
+  `,
+  toolbar: t.css`
+    display: flex;
+    flex-wrap: nowrap;
+    gap: ${t.tokens.space.s};
+    align-items: center;
+    height: ${barHeight};
+    flex: 0 0 ${barHeight};
+    padding: 0 12px;
+    overflow-x: auto;
+    border-block-end: 1px solid ${t.tokens.color.line};
+    h2 {
+      margin: 0;
+      font-size: 0.8rem;
+      font-weight: 600;
+      line-height: 1;
+      flex: 1;
+      white-space: nowrap;
+    }
+  `,
+  segmented: t.css`
+    display: inline-flex;
+    height: ${controlHeight};
+    border: 1px solid ${t.tokens.color.line};
+    border-radius: ${t.tokens.radius.s};
+    overflow: hidden;
+    flex: 0 0 auto;
+    button {
+      font: inherit;
+      font-size: 0.8rem;
+      line-height: 1;
+      background: transparent;
+      color: ${t.tokens.color.ink};
+      border: 0;
+      height: 100%;
+      padding: 0 10px;
+      cursor: pointer;
+      &[aria-pressed='true'] {
+        background: ${t.tokens.color.accent};
+        color: #fff;
+      }
+    }
+  `,
+  ghost: t.css`
+    font: inherit;
+    font-size: 0.8rem;
+    line-height: 1;
+    background: transparent;
+    color: ${t.tokens.color.ink};
+    border: 0;
+    height: ${controlHeight};
+    padding: 0 10px;
+    cursor: pointer;
+    margin-left: auto;
+    flex: 0 0 auto;
+  `,
+  snippetSelect: t.css`
+    display: inline-flex;
+    gap: 6px;
+    align-items: center;
+    height: ${controlHeight};
+    color: ${t.tokens.color.muted};
+    font-size: 0.8rem;
+    line-height: 1;
+    flex: 0 0 auto;
+    white-space: nowrap;
+    select {
+      font: inherit;
+      font-size: 0.8rem;
+      line-height: 1;
+      color: ${t.tokens.color.ink};
+      height: ${controlHeight};
+      padding: 0 8px;
+      cursor: pointer;
+      border: 1px solid ${t.tokens.color.line};
+      border-radius: ${t.tokens.radius.s};
+      background: ${t.tokens.color.panel};
+    }
+  `,
+  tokens: t.css`
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+  `,
+  editor: t.css`
+    display: flex;
+    flex-direction: column;
+    [data-pg-monaco] {
+      flex: 1 1 auto;
+      min-height: 0;
+      width: 100%;
+      color-scheme: dark;
+      background: ${t.tokens.color.code};
+    }
+  `,
+  cssOut: t.css`
+    flex: 1 1 auto;
+    min-height: 0;
+    width: 100%;
+    color-scheme: light;
+    background: ${t.tokens.color.bg};
+  `,
+  cssStats: t.css`
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: center;
+    margin: 0;
+    padding: 6px 12px;
+    border-block-end: 1px solid ${t.tokens.color.line};
+    color: ${t.tokens.color.muted};
+    font-size: 0.75rem;
+    line-height: 1.3;
+    flex: 0 0 auto;
+    a {
+      color: ${t.tokens.color.accent};
+      text-decoration: none;
+      margin-left: auto;
+    }
+  `,
+  previewHost: t.css`
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: auto;
+  `,
+  tokenPanel: t.css`
+    flex: 1 1 auto;
+    min-height: 0;
+    padding: 8px 12px 12px;
+    overflow: auto;
+  `,
+  tokenTable: t.css`
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.75rem;
+    th,
+    td {
+      text-align: left;
+      padding: 5px 10px 5px 0;
+      vertical-align: middle;
+    }
+    th {
+      color: ${t.tokens.color.muted};
+      font-weight: 600;
+    }
+    code {
+      font-family: ${t.tokens.font.mono};
+      font-size: 0.75rem;
+    }
+  `,
+  tokenValue: t.css`
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: center;
+    color: ${t.tokens.color.muted};
+    font-family: ${t.tokens.font.mono};
+  `,
+  swatch: t.css`
+    width: 14px;
+    height: 14px;
+    border-radius: 3px;
+    border: 1px solid ${t.tokens.color.line};
+    flex: 0 0 auto;
+    &[data-active] {
+      outline: 2px solid ${t.tokens.color.accent};
+      outline-offset: 1px;
+    }
+  `,
+  callout: t.css`
+    margin: 10px;
+    padding: 10px 12px;
+    border: 1px solid ${t.tokens.color.danger};
+    border-radius: ${t.tokens.radius.s};
+    color: ${t.tokens.color.danger};
+    pre {
+      margin: ${t.tokens.space.s} 0 0;
+      white-space: pre-wrap;
+      font-size: 12px;
+    }
+  `,
+}));
+
+const chromeEmotion = createEmotion(distillery);
+
+const installChromeGlobals = (): void =>
+  chromeEmotion.injectGlobal`
+    :root {
+      color-scheme: light dark;
+      font-family: ${distillery.tokens.font.sans};
+      background: ${distillery.tokens.color.bg};
+      color: ${distillery.tokens.color.ink};
+    }
+    * {
+      box-sizing: border-box;
+    }
+    html,
+    body,
+    #root {
+      margin: 0;
+      height: 100%;
+    }
+  `;
+
+installChromeGlobals();
+
+/** Readable class names for chrome handles. */
+export const cx = (...handles: readonly StyleHandle[]): string =>
+  handles.map((handle) => handle.readableName).join(' ');
+
+/** Flushes the chrome stylesheet into `document`. Safe to call once at boot. */
+export const mountChromeStyles = (document: Document): void => {
+  createEmotion(distillery, { sink: createDomSink({ document }) });
+};

package/docs/playground/src/setup/monaco_env.ts

@@ -0,0 +1,64 @@
+/*
+ * 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/features/register.all.js';
+
+import { editor } from 'monaco-editor/editor.js';
+import EditorWorker from 'monaco-editor/editor/editor.worker.js?worker';
+import CssWorker from 'monaco-editor/language/css/css.worker.js?worker';
+import TsWorker from 'monaco-editor/language/typescript/ts.worker.js?worker';
+
+export const SOURCE_THEME = 'distillate-code';
+export const CSS_THEME = 'distillate-css';
+
+const SOURCE_BG = '#0f141c';
+const SOURCE_FG = '#e6e8f0';
+const CSS_BG = '#f4f6f8';
+const CSS_FG = '#1b1e28';
+
+const installMonacoWorkers = (): void => {
+  self.MonacoEnvironment = {
+    getWorker: (_workerId: string, label: string): Worker => {
+      if (label === 'typescript' || label === 'javascript') {
+        return new TsWorker();
+      }
+      if (label === 'css') {
+        return new CssWorker();
+      }
+      return new EditorWorker();
+    },
+  };
+};
+
+let monacoReady = false;
+
+/** Installs workers and playground themes. Call once before creating an editor. */
+export const ensureMonaco = (): void => {
+  if (monacoReady) {
+    return;
+  }
+  monacoReady = true;
+  installMonacoWorkers();
+  editor.defineTheme(SOURCE_THEME, {
+    base: 'vs-dark',
+    inherit: true,
+    rules: [],
+    colors: {
+      'editor.background': SOURCE_BG,
+      'editor.foreground': SOURCE_FG,
+    },
+  });
+  editor.defineTheme(CSS_THEME, {
+    base: 'vs',
+    inherit: true,
+    rules: [],
+    colors: {
+      'editor.background': CSS_BG,
+      'editor.foreground': CSS_FG,
+    },
+  });
+};

package/docs/playground/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "isolatedModules": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": ["vite/client"],
+    "paths": {
+      "@elastic/distillate": ["../../src/index.ts"],
+      "@elastic/distillate/emotion": ["../../src/emotion.ts"],
+      "@elastic/distillate/testing": ["../../src/testing.ts"]
+    }
+  },
+  "include": ["src", "vite.config.ts", "vitest.config.ts"]
+}

package/docs/playground/vite.config.ts

@@ -0,0 +1,37 @@
+/*
+ * 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 react from '@vitejs/plugin-react';
+import { fileURLToPath } from 'node:url';
+import { defineConfig } from 'vite';
+
+const src = (relative: string): string =>
+  fileURLToPath(new URL(relative, import.meta.url));
+
+export default defineConfig({
+  base: process.env.PLAYGROUND_BASE ?? '/',
+  plugins: [react()],
+  worker: {
+    format: 'es',
+  },
+  resolve: {
+    alias: [
+      {
+        find: '@elastic/distillate/testing',
+        replacement: src('../../src/testing.ts'),
+      },
+      {
+        find: '@elastic/distillate/emotion',
+        replacement: src('../../src/emotion.ts'),
+      },
+      {
+        find: '@elastic/distillate',
+        replacement: src('../../src/index.ts'),
+      },
+    ],
+  },
+});

package/docs/playground/vitest.config.ts

@@ -0,0 +1,35 @@
+/*
+ * 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 { fileURLToPath } from 'node:url';
+import { defineConfig } from 'vitest/config';
+
+const src = (relative: string): string =>
+  fileURLToPath(new URL(relative, import.meta.url));
+
+export default defineConfig({
+  resolve: {
+    alias: [
+      {
+        find: '@elastic/distillate/testing',
+        replacement: src('../../src/testing.ts'),
+      },
+      {
+        find: '@elastic/distillate/emotion',
+        replacement: src('../../src/emotion.ts'),
+      },
+      {
+        find: '@elastic/distillate',
+        replacement: src('../../src/index.ts'),
+      },
+    ],
+  },
+  test: {
+    environment: 'node',
+    include: ['src/**/*.test.ts'],
+  },
+});