@vettvangur/design-system 0.0.2 → 0.0.4

package/dist/generate-astro-CiBcE5qv.js

@@ -0,0 +1,536 @@
+#!/usr/bin/env node
+import { promises } from 'node:fs';
+import path from 'node:path';
+import process from 'node:process';
+import { p as parseColors, a as parseTypography, i as inputsSpec } from './inputs-BBITK9zz.js';
+import 'node:url';
+
+const CWD = process.cwd();
+
+// Generated components
+const OUT_DIR = path.resolve(CWD, 'src/astrobook/components');
+const OUT_PREVIEW = path.join(OUT_DIR, 'Preview.astro'); // <-- new
+const OUT_COLORS = path.join(OUT_DIR, 'Colors.astro');
+const OUT_BODIES = path.join(OUT_DIR, 'Bodies.astro');
+const OUT_HEADLINES = path.join(OUT_DIR, 'Headlines.astro');
+const OUT_BUTTONS = path.join(OUT_DIR, 'Buttons.astro');
+const OUT_INPUTS = path.join(OUT_DIR, 'Inputs.astro');
+const OUT_RICHTEXT = path.join(OUT_DIR, 'Richtext.astro');
+const OUT_TABLES = path.join(OUT_DIR, 'Tables.astro'); // <-- added
+
+// Story folders
+const ASTROBOOK_DIR = path.resolve(CWD, 'src/astrobook');
+const OUT_DIR_TYPOGRAPHY = path.join(ASTROBOOK_DIR, 'Typography');
+const OUT_DIR_UI = path.join(ASTROBOOK_DIR, 'UI');
+const OUT_DIR_COLORS = path.join(ASTROBOOK_DIR, 'Colors');
+async function generateAstro() {
+  // ensure dirs
+  await promises.mkdir(OUT_DIR, {
+    recursive: true
+  });
+  await promises.mkdir(ASTROBOOK_DIR, {
+    recursive: true
+  });
+  await promises.mkdir(OUT_DIR_TYPOGRAPHY, {
+    recursive: true
+  });
+  await promises.mkdir(OUT_DIR_UI, {
+    recursive: true
+  });
+  await promises.mkdir(OUT_DIR_COLORS, {
+    recursive: true
+  });
+
+  // write Preview.astro (to a FILE, not the folder)
+  await promises.writeFile(OUT_PREVIEW, generatePreview(), 'utf8');
+  console.log(`✓ Wrote ${rel(OUT_PREVIEW)} (Preview)`);
+
+  // write story files
+  await renderStoriesAstro();
+  const [colors, typography, buttons] = await Promise.all([parseColors(), parseTypography()
+  //parseButtons(),
+  ]);
+
+  // Colors -> Colors.astro
+  if (colors?.length) {
+    await promises.writeFile(OUT_COLORS, renderColorsAstro(colors), 'utf8');
+    console.log(`✓ Wrote ${rel(OUT_COLORS)} (${colors.length} swatches)`);
+  } else {
+    console.warn('• No colors parsed — Colors.astro not written');
+  }
+
+  // Bodies -> Bodies.astro
+  if (typography?.bodies?.length) {
+    await promises.writeFile(OUT_BODIES, renderBodiesAstro(typography.bodies), 'utf8');
+    console.log(`✓ Wrote ${rel(OUT_BODIES)} (${typography.bodies.length} bodies)`);
+  } else {
+    console.warn('• No bodies parsed — Bodies.astro not written');
+  }
+
+  // Headlines -> Headlines.astro
+  if (typography?.headlines?.length) {
+    await promises.writeFile(OUT_HEADLINES, renderHeadlinesAstro(typography.headlines), 'utf8');
+    console.log(`✓ Wrote ${rel(OUT_HEADLINES)} (${typography.headlines.length} headlines)`);
+  } else {
+    console.warn('• No headlines parsed — Headlines.astro not written');
+  }
+
+  // Buttons -> Buttons.astro
+  if (buttons?.length) {
+    await promises.writeFile(OUT_BUTTONS, renderButtonsAstro(buttons), 'utf8');
+    console.log(`✓ Wrote ${rel(OUT_BUTTONS)} (${buttons.length} buttons)`);
+  } else {
+    console.warn('• No buttons parsed — Buttons.astro not written');
+  }
+
+  // Inputs -> Inputs.astro
+  const hasAnyInputs = Object.values(inputsSpec).some(arr => Array.isArray(arr) && arr.length);
+  if (hasAnyInputs) {
+    await promises.writeFile(OUT_INPUTS, renderInputsAstro(inputsSpec), 'utf8');
+    console.log(`✓ Wrote ${rel(OUT_INPUTS)} (inputs:${inputsSpec.inputs?.length ?? 0} selects:${inputsSpec.selects?.length ?? 0} ` + `checkboxes:${inputsSpec.checkboxes?.length ?? 0} radios:${inputsSpec.radios?.length ?? 0} textareas:${inputsSpec.textareas?.length ?? 0})`);
+  } else {
+    console.warn('• No input spec items — Inputs.astro not written');
+  }
+
+  // Richtext -> Richtext.astro  (static specimen)
+  await promises.writeFile(OUT_RICHTEXT, renderRichtextAstro(), 'utf8');
+  console.log(`✓ Wrote ${rel(OUT_RICHTEXT)} (Richtext)`);
+
+  // Tables -> Tables.astro  (static specimen)
+  await promises.writeFile(OUT_TABLES, renderTablesAstro(), 'utf8');
+  console.log(`✓ Wrote ${rel(OUT_TABLES)} (Tables)`);
+}
+
+/* ---------- story writers ---------- */
+
+async function renderStoriesAstro() {
+  const storyBody = generateStoryBody();
+  const storyColors = generateStoryColors();
+  const storyHeadline = generateStoryHeadline();
+  const storyButton = generateStoryButtons();
+  const storyInputs = generateStoryInputs();
+  const storyRichtext = generateStoryRichtext();
+  const storyTables = generateStoryTables(); // <-- added
+
+  const FILE_BODY = path.join(OUT_DIR_TYPOGRAPHY, 'Body.stories.ts');
+  const FILE_HEADLINES = path.join(OUT_DIR_TYPOGRAPHY, 'Headlines.stories.ts');
+  const FILE_RICHTEXT = path.join(OUT_DIR_TYPOGRAPHY, 'Richtext.stories.ts');
+  const FILE_BUTTONS = path.join(OUT_DIR_UI, 'Buttons.stories.ts');
+  const FILE_INPUTS = path.join(OUT_DIR_UI, 'Inputs.stories.ts');
+  const FILE_TABLES = path.join(OUT_DIR_UI, 'Tables.stories.ts'); // <-- added
+  const FILE_COLORS = path.join(OUT_DIR_COLORS, 'Colors.stories.ts');
+  await promises.writeFile(FILE_BODY, storyBody, 'utf8');
+  await promises.writeFile(FILE_HEADLINES, storyHeadline, 'utf8');
+  await promises.writeFile(FILE_RICHTEXT, storyRichtext, 'utf8');
+  await promises.writeFile(FILE_BUTTONS, storyButton, 'utf8');
+  await promises.writeFile(FILE_INPUTS, storyInputs, 'utf8');
+  await promises.writeFile(FILE_TABLES, storyTables, 'utf8'); // <-- added
+  await promises.writeFile(FILE_COLORS, storyColors, 'utf8');
+  console.log('✓ Wrote story files:');
+  console.log(`  - ${rel(FILE_BODY)}`);
+  console.log(`  - ${rel(FILE_HEADLINES)}`);
+  console.log(`  - ${rel(FILE_RICHTEXT)}`);
+  console.log(`  - ${rel(FILE_BUTTONS)}`);
+  console.log(`  - ${rel(FILE_INPUTS)}`);
+  console.log(`  - ${rel(FILE_TABLES)}`);
+  console.log(`  - ${rel(FILE_COLORS)}`);
+}
+
+/* ---------- code gens ---------- */
+
+function generatePreview() {
+  return `
+---
+/** Auto-generated - do not edit by hand */
+import '@/styles/main.css'
+import Fonts from '@/components/core/utility/Fonts.astro'
+---
+<Fonts />
+<div class="astrobook-preview bg-background">
+  <slot />
+</div>
+`.trimStart();
+}
+function generateStoryBody() {
+  return `
+// Auto-generated — do not edit by hand
+import Preview from '@/astrobook/components/Preview.astro'
+import Bodies from '@/astrobook/components/Bodies.astro'
+
+export default {
+  title: 'Typography/Body',
+  component: Bodies,
+}
+
+export const Overview = {
+  render: () => Preview({ slots: { default: Bodies({}) } }),
+}
+`.trimStart();
+}
+function generateStoryColors() {
+  return `
+// Auto-generated — do not edit by hand
+import Preview from '@/astrobook/components/Preview.astro'
+import Colors from '@/astrobook/components/Colors.astro'
+
+export default {
+  title: 'Colors',
+  component: Colors,
+}
+
+export const Overview = {
+  render: () => Preview({ slots: { default: Colors({}) } }),
+}
+`.trimStart();
+}
+function generateStoryHeadline() {
+  return `
+// Auto-generated — do not edit by hand
+import Preview from '@/astrobook/components/Preview.astro'
+import Headlines from '@/astrobook/components/Headlines.astro'
+
+export default {
+  title: 'Typography/Headlines',
+  component: Headlines,
+}
+
+export const Overview = {
+  render: () => Preview({ slots: { default: Headlines({}) } }),
+}
+`.trimStart();
+}
+function generateStoryButtons() {
+  return `
+// Auto-generated — do not edit by hand
+import Preview from '@/astrobook/components/Preview.astro'
+import Buttons from '@/astrobook/components/Buttons.astro'
+
+export default {
+  title: 'UI/Buttons',
+  component: Buttons,
+}
+
+export const Overview = {
+  render: () => Preview({ slots: { default: Buttons({}) } }),
+}
+`.trimStart();
+}
+function generateStoryInputs() {
+  return `
+// Auto-generated — do not edit by hand
+import Preview from '@/astrobook/components/Preview.astro'
+import Inputs from '@/astrobook/components/Inputs.astro'
+
+export default {
+  title: 'UI/Inputs',
+  component: Inputs,
+}
+
+export const Overview = {
+  render: () => Preview({ slots: { default: Inputs({}) } }),
+}
+`.trimStart();
+}
+function generateStoryRichtext() {
+  return `
+// Auto-generated — do not edit by hand
+import Preview from '@/astrobook/components/Preview.astro'
+import Richtext from '@/astrobook/components/Richtext.astro'
+
+export default {
+  title: 'Typography/Richtext',
+  component: Richtext,
+}
+
+export const Overview = {
+  render: () => Preview({ slots: { default: Richtext({}) } }),
+}
+`.trimStart();
+}
+function generateStoryTables() {
+  return `
+// Auto-generated — do not edit by hand
+import Preview from '@/astrobook/components/Preview.astro'
+import Tables from '@/astrobook/components/Tables.astro'
+
+export default {
+  title: 'UI/Tables',
+  component: Tables,
+}
+
+export const Overview = {
+  render: () => Preview({ slots: { default: Tables({}) } }),
+}
+`.trimStart();
+}
+
+/* ---------- renderers ---------- */
+
+function renderColorsAstro(colors) {
+  const items = colors.map(({
+    title,
+    color,
+    class: klass
+  }) => {
+    const style = `background:${color};`;
+    return `
+    <div class="flex items-center gap-4 p-3 rounded border border-black/10 bg-white/5">
+      <div class="size-10 rounded shadow-inner ring-1 ring-black/10" style="${style}"></div>
+      <div class="flex flex-col text-sm">
+        <span class="font-medium">${e(title)}</span>
+        <span class="opacity-70">token: <code>--color-${e(klass.replace(/^x-/, ''))}</code></span>
+        <span class="opacity-70">class: <code>${e(klass)}</code></span>
+        <span class="opacity-70">value: <code>${e(color)}</code></span>
+      </div>
+    </div>`.trim();
+  });
+  return `---
+/* Auto-generated — do not edit by hand */
+---
+<div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+${items.join('\n')}
+</div>
+`;
+}
+function renderBodiesAstro(bodies) {
+  const items = bodies.map(b => {
+    const meta = metaText(b.size, b.lineheight, b.config);
+    return `  <p class="${a(b.class)}">${e(b.title)} ${meta}</p>`;
+  });
+  return `---
+/* Auto-generated — do not edit by hand */
+---
+<div class="space-y-4">
+${items.join('\n')}
+</div>
+`;
+}
+function renderHeadlinesAstro(headlines) {
+  const lines = headlines.map(h => {
+    const meta = metaText(h.size, h.lineheight, h.config);
+    return `  <div class="flex items-baseline gap-2">
+    <Headline size="2" text="${a(h.title)}" class="${a(h.class)}" />
+    ${meta}
+  </div>`;
+  });
+  return `---
+/* Auto-generated — do not edit by hand */
+import Headline from '@/components/core/Headline.astro'
+---
+<div class="space-y-4">
+${lines.join('\n')}
+</div>
+`;
+}
+function renderButtonsAstro(buttons) {
+  const lines = buttons.map(b => {
+    const klass = b.class.trim(); // variants already @apply button; don't prepend "button"
+    return `  <div class="flex items-center gap-3">
+    <Button text="${a(b.text)}" modifier="${a(klass)}" />
+    <span class="text-sm opacity-70">${e(b.title)} — <code>${e(klass)}</code></span>
+  </div>`;
+  });
+  return `---
+/* Auto-generated — do not edit by hand */
+import Button from '@/components/core/button/Button.astro'  /* adjust if path differs */
+---
+<div class="space-y-3">
+${lines.join('\n')}
+</div>
+`;
+}
+function renderInputsAstro(spec) {
+  const {
+    inputs = [],
+    selects = [],
+    checkboxes = [],
+    radios = [],
+    textareas = []
+  } = spec;
+  const renderGroup = (title, componentTag, items) => {
+    if (!items?.length) {
+      return '';
+    }
+    const rows = items.map(obj => `    <${componentTag} ${attrs(obj)} />`).join('\n');
+    return `
+  <section>
+    <h3 class="text-sm opacity-70 mb-2">${e(title)}</h3>
+${rows}
+  </section>`;
+  };
+  return `---
+/* Auto-generated — do not edit by hand */
+import Input from '@/components/core/inputs/Input.astro'
+import Select from '@/components/core/inputs/Select.astro'
+import Selection from '@/components/core/inputs/Selection.astro'
+---
+<div class="space-y-8">
+${renderGroup('Inputs', 'Input', inputs)}
+${renderGroup('Selects', 'Select', selects)}
+${renderGroup('Checkboxes', 'Selection', checkboxes)}
+${renderGroup('Radios', 'Selection', radios)}
+${renderGroup('Textareas', 'Select', textareas)}
+</div>
+`;
+}
+function renderRichtextAstro() {
+  return `---
+/* Auto-generated — do not edit by hand */
+import Headline from '@/components/core/Headline.astro'
+---
+<section class="w-full">
+  <Headline
+    text="Richtext"
+    size="1"
+    class="headline-1 mb-[60px]"
+  />
+
+  <div class="richtext">
+    <h1>h1</h1>
+    <h2>h2</h2>
+    <h3>h3</h3>
+    <h4>h4</h4>
+    <h5>h5</h5>
+    <p>
+      Ófróðlegt þorviðar <a href="https://www.vettvangur.is/" target="_blank">látist kærðu</a>, allfeginn því að kaupmanni, <strong>hraðasta</strong> ættleri <em>farminum</em> þuríði brústeinunum konungsþræll grænar. Hólmganga hrísflekkur, lifum skalla-grímur tíkr. Meiðinn hatast oddleifsdóttir, dólglegast dyflini, torfafóstri torfunni rak jarðarmenið stirðir. Býsn hvé ölseljunni gerði, jafnvitur lög vaskligr, sám hvortveggja ófrelsi trúfasti hallkelsdóttur sneri mund guðmundarsonum. Sekum meginmerkurinnar, arfsali allmikilli sjaldgæf. Uggasyni sættu konungsþræll gæs, alþýðuskap orðtækið stokkar, orkar mund ormláðs skrumaði hriflusonar virðak. Biðjum meiðinn keppa, taliðr uggasyni, skerðan manngjarnlega hofgyðja vilk allmikilli. Ógott hirðum samdóma, heimamaðr endilangt, erlingur kaldur gjósa seimþollr hallkell landkaupi. Torfunni tungu-oddur þorviðar gufárós, ævifús sekur tröllskessa, umbanda rétttrúaður bráðan svörfuði nýt íþrótt dalalönd halli. Flyðruness haldnar aðsóknar skerðan, auðhnykkjanda mannvandur smálöndum sauðarhöfðinu ferjunni.
+    </p>
+    <ul>
+      <li>List item</li>
+      <li>List item</li>
+      <li>
+        List item
+        <ul>
+          <li>Nested item</li>
+          <li>Nested item</li>
+          <li>
+            Nested item
+            <ul>
+              <li>Nested even more item</li>
+              <li>Nested even more item</li>
+              <li>Nested even more item</li>
+            </ul>
+          </li>
+        </ul>
+      </li>
+      <li>List item</li>
+    </ul>
+    <ol>
+      <li>List item</li>
+      <li>
+        List item
+        <ol>
+          <li>Nested item</li>
+          <li>Nested item</li>
+          <li>Nested item</li>
+        </ol>
+      </li>
+      <li>List item</li>
+      <li>List item</li>
+    </ol>
+    <p>
+      Ófróðlegt þorviðar <a href="https://www.vettvangur.is/" target="_blank">látist kærðu</a>, allfeginn því að kaupmanni, hraðasta ættleri farminum þuríði brústeinunum konungsþræll grænar. Hólmganga hrísflekkur, lifum skalla-grímur tíkr. Meiðinn hatast oddleifsdóttir, dólglegast dyflini, torfafóstri torfunni rak jarðarmenið stirðir. Býsn hvé ölseljunni gerði, jafnvitur lög vaskligr, sám hvortveggja ófrelsi trúfasti hallkelsdóttur sneri mund guðmundarsonum. Sekum meginmerkurinnar, arfsali allmikilli sjaldgæf. Uggasyni sættu konungsþræll gæs, alþýðuskap orðtækið stokkar, orkar mund ormláðs skrumaði hriflusonar virðak. Biðjum meiðinn keppa, taliðr uggasyni, skerðan manngjarnlega hofgyðja vilk allmikilli. Ógott hirðum samdóma, heimamaðr endilangt, erlingur kaldur gjósa seimþollr hallkell landkaupi. Torfunni tungu-oddur þorviðar gufárós, ævifús sekur tröllskessa, umbanda rétttrúaður bráðan svörfuði nýt íþrótt dalalönd halli. Flyðruness haldnar aðsóknar skerðan, auðhnykkjanda mannvandur smálöndum sauðarhöfðinu ferjunni.
+    </p>
+  </div>
+</section>
+`.trimStart();
+}
+function renderTablesAstro() {
+  return `---
+/* Auto-generated — do not edit by hand */
+import Headline from '@/components/core/Headline.astro'
+---
+<section class="w-full">
+  <Headline
+    text="Tables"
+    size="1"
+    class="headline-1 mb-20"
+  />
+
+  <div class="table">
+    <table class="table__element">
+      <thead>
+        <tr>
+          <th>Head</th>
+          <th>Head</th>
+          <th>Head</th>
+          <th>Head</th>
+          <th>Head</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
+        </tr>
+        <tr>
+          <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
+        </tr>
+        <tr>
+          <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</section>
+`.trimStart();
+}
+
+/* ---------- helpers ---------- */
+
+function attrs(obj = {}) {
+  const parts = [];
+  for (const [key, val] of Object.entries(obj)) {
+    if (val === '' || val === null || val === undefined || val === false) {
+      continue;
+    }
+    if (typeof val === 'string') {
+      parts.push(`${key}="${a(val)}"`);
+    } else if (typeof val === 'number') {
+      parts.push(`${key}={${val}}`);
+    } else if (typeof val === 'boolean') {
+      parts.push(`${key}={true}`);
+    } else {
+      parts.push(`${key}={${JSON.stringify(val)}}`);
+    }
+  }
+  return parts.join(' ');
+}
+function metaText(size, lineheight, config) {
+  const basePair = pair({
+    size,
+    lineHeight: lineheight
+  });
+  const parts = [];
+  if (config?.desktop && (config.desktop.size || config.desktop.lineHeight)) {
+    parts.push(`D: ${pair(config.desktop)}`);
+  }
+  if (config?.mobile && (config.mobile.size || config.mobile.lineHeight)) {
+    parts.push(`M: ${pair(config.mobile)}`);
+  }
+  const label = parts.length ? parts.join(' • ') : basePair;
+  if (!label) {
+    return '';
+  }
+  return `<span class="opacity-60 text-sm">${e(label)}</span>`;
+}
+function pair({
+  size,
+  lineHeight
+} = {}) {
+  const s = size ?? null;
+  const l = lineHeight ?? null;
+  if (!s && !l) {
+    return '';
+  }
+  return `${s ?? '-'} / ${l ?? '-'}`;
+}
+function e(s = '') {
+  return String(s).replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;');
+}
+function a(s = '') {
+  return String(s).replaceAll('"', '&quot;');
+}
+function rel(p) {
+  return path.relative(process.cwd(), p);
+}
+
+export { generateAstro as default };