component-playground | Prototyping

Stats

Actions

Tags

component-playground | Prototyping

Component playground

Одна HTML-страница, на которой каждый компонент отрендерён во всех вариантах. С контролами «слева список → клик → справа сцена с компонентом + рычажки для пропсов».

Структура

playground/
  index.html            ← главный
  components/           ← по файлу на компонент
    button.html
    input.html
    card.html
  data.json             ← список компонентов и их вариантов

Шаблон index.html

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Component playground</title>
  <link rel="stylesheet" href="../tokens.css">
  <style>
    body { display: grid; grid-template-columns: 240px 1fr; height: 100vh; margin: 0; font-family: ui-monospace, monospace; }
    nav { background: #f4f4f4; border-right: 1px solid #ddd; overflow: auto; padding: 16px 0; }
    nav h2 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: #888; padding: 0 16px; margin: 16px 0 8px; }
    nav a { display: block; padding: 6px 16px; color: #333; text-decoration: none; font-size: 13px; }
    nav a:hover { background: #e8e8e8; }
    nav a.active { background: #111; color: #fff; }
    main { display: grid; grid-template-rows: 1fr 200px; height: 100vh; }
    .stage { padding: 32px; overflow: auto; background: #fff; }
    .stage iframe { width: 100%; height: 100%; border: 0; }
    .controls { background: #fafafa; border-top: 1px solid #ddd; padding: 16px; overflow: auto; font-size: 12px; }
    .controls label { display: grid; grid-template-columns: 120px 1fr; gap: 8px; align-items: center; margin-bottom: 8px; }
  </style>
</head>
<body>
  <nav id="nav"></nav>
  <main>
    <div class="stage"><iframe id="frame"></iframe></div>
    <div class="controls" id="controls"></div>
  </main>

<script type="module">
  const data = await fetch('data.json').then(r => r.json());
  const nav = document.getElementById('nav');
  const frame = document.getElementById('frame');
  const ctl = document.getElementById('controls');

  for (const [group, items] of Object.entries(data.groups)) {
    const h = document.createElement('h2'); h.textContent = group; nav.append(h);
    for (const it of items) {
      const a = document.createElement('a');
      a.href = '#' + it.id; a.textContent = it.name;
      a.onclick = e => { e.preventDefault(); load(it); };
      nav.append(a);
    }
  }

  function load(it) {
    document.querySelectorAll('nav a').forEach(a => a.classList.remove('active'));
    document.querySelector(`nav a[href="#${it.id}"]`).classList.add('active');
    frame.src = 'components/' + it.file;
    ctl.innerHTML = '';
    if (it.props) for (const [name, spec] of Object.entries(it.props)) {
      const lab = document.createElement('label');
      lab.append(document.createTextNode(name));
      let input;
      if (spec.type === 'select') {
        input = document.createElement('select');
        for (const o of spec.options) input.append(new Option(o));
      } else if (spec.type === 'bool') {
        input = document.createElement('input'); input.type = 'checkbox';
      } else {
        input = document.createElement('input'); input.value = spec.default || '';
      }
      input.oninput = () => {
        frame.contentWindow.postMessage({ prop: name, value: input.type==='checkbox' ? input.checked : input.value }, '*');
      };
      lab.append(input); ctl.append(lab);
    }
  }
  if (location.hash) {
    const id = location.hash.slice(1);
    for (const items of Object.values(data.groups)) {
      const it = items.find(x => x.id === id); if (it) { load(it); break; }
    }
  }
</script>
</body>
</html>

data.json

{
  "groups": {
    "Foundation": [
      { "id": "tokens", "name": "Tokens", "file": "tokens.html" },
      { "id": "type",   "name": "Typography", "file": "type.html" }
    ],
    "Inputs": [
      { "id": "button", "name": "Button", "file": "button.html",
        "props": {
          "variant": { "type": "select", "options": ["primary","secondary","ghost"] },
          "size":    { "type": "select", "options": ["sm","md","lg"] },
          "loading": { "type": "bool" },
          "label":   { "type": "text", "default": "Click me" }
        }
      }
    ]
  }
}

Компонент-страница (button.html)

<!doctype html>
<style>
  body { display: grid; gap: 16px; padding: 24px; align-content: start; }
  body button { /* реальные стили из системы */ }
</style>
<button id="btn">Click me</button>
<script>
  const btn = document.getElementById('btn');
  window.addEventListener('message', e => {
    const { prop, value } = e.data;
    if (prop === 'label') btn.textContent = value;
    else if (prop === 'loading') btn.dataset.loading = value;
    else btn.dataset[prop] = value;
  });
</script>

Что показывать обязательно

Все варианты × размеры × состояния.
Пустое / disabled / loading / error состояния (см. states-checklist).
В тёмной теме (если есть).
На мобилке (через rezizer).

Антипаттерны

❌ Один gigantic html-файл со всеми компонентами. Невозможно навигировать.
❌ Только default-вариант. Покрытие должно быть полным.
❌ Без контролов — нельзя проверить интерактивные стейты.