@vettvangur/design-system 0.0.21 → 1.0.0

package/dist/generate-razor-Dq9lRRvR.js

@@ -0,0 +1,501 @@
+#!/usr/bin/env node
+import { promises } from 'node:fs';
+import path from 'node:path';
+import { p as parseColors, a as parseTypography, i as inputsSpec } from './inputs-RHH3YuXh.js';
+import chalk from 'chalk';
+import { readFigma } from './generate-tailwind-Dri2RfD_.js';
+import 'node:url';
+import 'node:process';
+import 'node:fs/promises';
+import 'fs';
+import 'path';
+import 'os';
+import 'crypto';
+
+/**
+ * Return a list of button names from an exporter payload.
+ * @param {{components?: Record<string, any>}} payload
+ * @param {{stripPrefix?: boolean, sort?: boolean}} opts
+ * @returns {string[]}
+ */
+function parseButtons(payload, {
+  stripPrefix = false,
+  sort = true
+} = {}) {
+  const src = payload?.components || {};
+  let names = Object.keys(src).filter(k => k.startsWith('button-'));
+  if (stripPrefix) names = names.map(k => k.slice('button-'.length));
+  if (sort) names.sort();
+  console.log('BUTTONS', names);
+  return names;
+}
+
+// core/razor/generate-razor.mjs
+const CWD = process.cwd();
+const OUT_DIR = path.resolve(CWD, '../Vettvangur.Site/Views/Partials/DesignSystem');
+const FILE_COLORS = path.join(OUT_DIR, 'Colors.cshtml');
+const FILE_TYPO = path.join(OUT_DIR, 'Typography.cshtml');
+const FILE_BUTTONS = path.join(OUT_DIR, 'Buttons.cshtml');
+const FILE_INPUTS = path.join(OUT_DIR, 'Inputs.cshtml');
+const FILE_RICHTEXT = path.join(OUT_DIR, 'Richtext.cshtml');
+const FILE_Table = path.join(OUT_DIR, 'Tables.cshtml');
+const tag = chalk.cyan('[design-system]');
+async function generateRazor() {
+  console.log(`${tag} generating razor files...`);
+  await promises.mkdir(OUT_DIR, {
+    recursive: true
+  });
+  const figma = await readFigma();
+  const [colors, typography, buttons] = await Promise.all([parseColors(), parseTypography(), parseButtons(figma)]);
+
+  // Colors
+  if (colors?.length) {
+    await promises.writeFile(FILE_COLORS, renderColors(colors), 'utf8');
+    log(FILE_COLORS, colors.length);
+  }
+
+  // Typography (one file)
+  if ((typography?.headlines?.length ?? 0) + (typography?.bodies?.length ?? 0) > 0) {
+    await promises.writeFile(FILE_TYPO, renderTypography(typography), 'utf8');
+    log(FILE_TYPO, (typography.headlines?.length ?? 0) + (typography.bodies?.length ?? 0));
+  }
+
+  // Buttons
+  if (buttons?.length) {
+    await promises.writeFile(FILE_BUTTONS, renderButtons(buttons), 'utf8');
+    log(FILE_BUTTONS, buttons.length);
+  }
+
+  // Inputs
+  const hasAnyInputs = Object.values(inputsSpec).some(v => Array.isArray(v) && v.length);
+  if (hasAnyInputs) {
+    await promises.writeFile(FILE_INPUTS, renderInputs(inputsSpec), 'utf8');
+    log(FILE_INPUTS, countInputs(inputsSpec));
+  }
+
+  // Richtext & Tables (static demos)
+  await promises.writeFile(FILE_RICHTEXT, renderRichtext(), 'utf8');
+  log(FILE_RICHTEXT, 1);
+  await promises.writeFile(FILE_Table, renderRichtextTables(), 'utf8');
+  log(FILE_Table, 1);
+  console.log(`${tag} great success!`);
+}
+
+/* -------------------- RENDERERS -------------------- */
+
+function renderColors(colors) {
+  const items = colors.map(({
+    title,
+    color
+  }) => `
+            <div class="styleguide-color">
+                <span class="styleguide-color__label label">${h(title)}</span>
+                <div class="styleguide-color__swatch" style="background: ${a(color)};"></div>
+                <div class="styleguide-color__info">
+                    <span class="styleguide-color__info-hex label">${h(color)}</span>
+                </div>
+            </div>`).join('\n');
+  return `@* Auto-generated — do not edit by hand *@
+<section class="styleguide-colors styleguide-spacing">
+  <div class="container">
+    <vv-headline
+      identifier="styleguide__headline",
+      modifier="headline-h1",
+      text="Colors" 
+    />
+
+    <div class="styleguide-colors-grid grid grid--gap">
+${items}
+    </div>
+  </div>
+</section>
+`;
+}
+function renderTypography({
+  headlines = [],
+  bodies = []
+}) {
+  const headlineItems = headlines.map(hItem => {
+    const mod = classToModifier(hItem.class, 'headline');
+    const info = infoBlocks(hItem);
+    return `
+      <div class="styleguide-typography__item grid grid--gap">
+        <span class="styleguide-typography__item-name">${h(hItem.title)}</span>
+        <vv-headline
+          identifier="styleguide__headline"
+          modifier="${a(mod)}"
+          text="The quick brown fox jumps over the lazy dog."
+        />
+        ${info ? renderInfo(info) : ''}
+      </div>`;
+  }).join('\n');
+  const bodyItems = bodies.map(b => {
+    const info = infoBlocks(b);
+    return `
+      <div class="styleguide-typography__item grid grid--gap">
+        <span class="styleguide-typography__item-name">${h(b.title)}</span>
+        <p class="${a(b.class)} styleguide-typography__item-example">
+          The quick brown fox jumps over the lazy dog.
+        </p>
+        ${info ? renderInfo(info) : ''}
+      </div>`;
+  }).join('\n');
+  return `@* Auto-generated — do not edit by hand *@
+<section class="styleguide-typography styleguide-spacing">
+  <div class="container">
+    <vv-headline
+      identifier="styleguide__headline"
+      modifier="headline-h1"
+      text="Typography"
+    />
+
+    ${headlines.length ? `
+    <div class="styleguide-typography__group grid grid--gap">
+      <vv-headline
+        identifier="styleguide__headline"
+        modifier="headline-3"
+        text="Headlines"
+      />
+      <div class="styleguide-typography__list grid grid--gap">
+        ${headlineItems}
+      </div>
+    </div>` : ''}
+
+    ${bodies.length ? `
+    <div class="styleguide-typography__group grid grid--gap">
+      <vv-headline
+        identifier="styleguide__headline"
+        modifier="headline-3"
+        text="Body text"
+      />
+      <div class="styleguide-typography__list grid grid--gap">
+        ${bodyItems}
+      </div>
+    </div>` : ''}
+  </div>
+</section>
+`;
+}
+function renderInfo(info) {
+  const {
+    base,
+    desktop,
+    mobile
+  } = info;
+  return `
+      <div class="styleguide-typography__info">
+        ${base ? `
+        <div class="styleguide-typography__info-item">
+          <span>Base</span>
+          <span><strong>${h(base)}</strong></span>
+        </div>` : ''}
+        ${desktop ? `
+        <div class="styleguide-typography__info-item">
+          <span>Desktop</span>
+          <span><strong>${h(desktop)}</strong></span>
+        </div>` : ''}
+        ${mobile ? `
+        <div class="styleguide-typography__info-item">
+          <span>Mobile</span>
+          <span><strong>${h(mobile)}</strong></span>
+        </div>` : ''}
+      </div>`;
+}
+function renderButtons(buttons) {
+  const items = buttons.map(b => {
+    const label = pickButtonText(b);
+    return `
+    <div class="styleguide__button-wrap">
+      <vv-button
+        identifier="styleguide__button"
+        modifier="${a(b)}"
+        type="@ButtonType.Button"
+        text="${a(label)}"
+      />
+    </div>`;
+  }).join('\n');
+  return `@* Auto-generated — do not edit by hand *@
+<section class="styleguide-buttons styleguide-spacing">
+  <div class="container">
+    <vv-headline
+      identifier="styleguide__headline",
+      modifier="headline-h1",
+      text="Buttons"    
+    />
+
+    <div class="grid grid--gap">
+${items}
+    </div>
+  </div>
+</section>
+`;
+}
+function pickButtonText(modifier) {
+  const m = (modifier || '').toLowerCase();
+
+  // intent-based overrides
+  if (/\b(danger|destructive|error|delete|remove)\b/.test(m)) return 'Delete';
+  if (/\b(success|confirm|ok|apply|save)\b/.test(m)) return 'Confirm';
+  if (/\b(warn|warning|alert)\b/.test(m)) return 'Proceed with Caution';
+  if (/\b(primary|cta|proceed|next)\b/.test(m)) return 'Continue';
+  if (/\b(secondary|ghost|tertiary|neutral)\b/.test(m)) return 'Learn More';
+  if (/\b(buy|checkout|pay|purchase|cart)\b/.test(m)) return 'Buy Now';
+  if (/\b(download|install|get)\b/.test(m)) return 'Download';
+  if (/\b(subscribe|signup|register)\b/.test(m)) return 'Subscribe';
+  if (/\b(login|signin)\b/.test(m)) return 'Sign In';
+  if (/\b(contact|email|message)\b/.test(m)) return 'Contact Us';
+
+  // size-only or shape-only variants keep a neutral verb
+  if (/\b(xs|sm|md|lg|xl|square|pill|round|circle|wide|tall)\b/.test(m)) return seededPick(m, ['Continue', 'Details', 'Open', 'Select', 'View', 'Explore', 'Try', 'Start']);
+
+  // icon-only hints (still provide text for a11y)
+  if (/\b(icon|only|icon-only)\b/.test(m)) return 'Open';
+
+  // default: deterministic pick
+  return seededPick(m, DEFAULT_WORDS);
+}
+const DEFAULT_WORDS = ['Continue', 'Details', 'Select', 'Open', 'Start', 'Try', 'Explore', 'Next', 'View', 'Confirm', 'Apply', 'Proceed', 'Get Quote', 'Book Now', 'Add to Cart', 'Learn More', 'Download', 'Subscribe'];
+
+// Deterministic selection from a list based on the modifier string
+function seededPick(seed, list) {
+  let h = 0;
+  for (let i = 0; i < seed.length; i++) h = h * 131 + seed.charCodeAt(i) >>> 0;
+  return list[h % list.length];
+}
+function renderInputs(spec) {
+  const {
+    inputs = [],
+    selects = [],
+    checkboxes = [],
+    radios = [],
+    textareas = []
+  } = spec;
+  const inputsPartials = inputs.map(i => `
+      <vv-input
+        id="${a(i.id || '')}"
+        label="${a(i.Label ?? i.label ?? 'Input')}"
+        placeholder="${a(i.placeholder ?? 'Input placeholder')}"
+        is-disabled="${bool(i.isDisabled)}"
+        is-readonly="${bool(i.isReadonly)}"
+        is-error="${bool(i.isError)}"
+      />
+      `).join('\n');
+  const selectsPartials = selects.map(s => `
+      <vv-select
+        id="${a(s.id || '')}"
+        label="${a(s.Label ?? 'Select')}"
+        options="@selectOptions"
+        is-disabled="${bool(s.isDisabled)}"
+        is-readOnly="${bool(s.isReadonly)}"
+        is-error="${bool(s.isError)}"
+      />
+`).join('\n');
+  const checkboxRows = checkboxes.map(c => `
+      <div class="input-group">
+        <vv-selection
+          id="${a(c.id || '')}"
+          label="${a(c.Label ?? c.label ?? 'Checkbox')}"
+          type="@HTMLInputType.Checkbox"
+          is-disabled="${bool(c.isDisabled)}"
+          is-error="${bool(c.isError)}"
+        />
+      </div>
+      `).join('\n');
+  const radioRows = radios.map(r => `
+      <div class="input-group">
+        <vv-selection
+          id="${a(r.id || '')}"
+          type="@HTMLInputType.Radio"
+          name="${a(r.Name ?? r.name ?? 'prettyradio')}"
+          label="${a(r.Label ?? r.label ?? 'Radio')}"
+          is-disabled="${bool(r.isDisabled)}"
+          is-error="${bool(r.isError)}"
+        />
+      </div>`).join('\n');
+  const textareasPartials = textareas.map(t => `
+      <vv-textarea
+        id="${a(t.id || '')}"
+        label="${a(t.Label ?? 'Textarea')}"
+        placeholder="${a(t.placeholder ?? 'Textarea placeholder')}"
+        is-disabled="${bool(t.isDisabled)}"
+        is-readonly="${bool(t.isReadonly)}"
+        is-error="${bool(t.isError)}"
+      />
+      `).join('\n');
+  return `@* Auto-generated — do not edit by hand *@
+@{
+  var selectOptions = new Dictionary<string, string>() {
+    { "option1", "Option value" },
+    { "option2", "Option value" },
+    { "option3", "Option value" },
+    { "option4", "Option value" },
+    { "option5", "Option value" },
+    { "option6", "Option value" },
+  };
+}
+
+<section class="styleguide-inputs styleguide-spacing">
+  <div class="container">
+    <vv-headline
+      identifier="styleguide__headline",
+      modifier="headline-h1",
+      text="Inputs"    
+    />
+
+    <div class="styleguide-inputs__scrollitem grid grid--gap grid--align-start">
+${inputsPartials}
+${selectsPartials}
+${checkboxRows}
+${radioRows}
+${textareasPartials}
+    </div>
+  </div>
+</section>
+`;
+}
+
+/* ------------ Richtext (static demo) ------------ */
+function renderRichtext() {
+  return `@* Auto-generated — do not edit by hand *@
+<section class="w-full">
+  <vv-headline
+    identifier="styleguide__headline",
+    modifier="headline-h1",
+    text="Richtext"    
+  />
+
+  <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>
+`;
+}
+function renderRichtextTables() {
+  return `@* Auto-generated — do not edit by hand *@
+<section class="w-full">
+  <vv-headline
+    identifier="styleguide__headline",
+    modifier="headline-h1",
+    text="Tables"    
+  />
+
+  <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>
+`;
+}
+
+/* -------------------- HELPERS -------------------- */
+function infoBlocks(item) {
+  const base = pair(item.size, item.lineheight);
+  const desktop = item?.config?.desktop ? pair(item.config.desktop.size, item.config.desktop.lineHeight) : '';
+  const mobile = item?.config?.mobile ? pair(item.config.mobile.size, item.config.mobile.lineHeight) : '';
+  if (!base && !desktop && !mobile) {
+    return '';
+  }
+  return {
+    base,
+    desktop,
+    mobile
+  };
+}
+function pair(size, lh) {
+  if (!size && !lh) {
+    return '';
+  }
+  return `Size: ${size ?? '-'} / Line height: ${lh ?? '-'}`;
+}
+function classToModifier(cls = '', prefix = 'headline') {
+  // Accept:
+  //  - "headline-h1" (preferred)
+  //  - "headline1"   (legacy)
+  //  - "headline_1"  (legacy)
+  // Always return "headline-h1".
+  const re = new RegExp(`^${prefix}[-_]?h?(\\d+)$`, 'i');
+  const m = re.exec(cls.trim());
+  if (m) return `${prefix}-h${m[1]}`;
+  return cls; // do not mutilate unknown strings
+}
+function countInputs(spec) {
+  return ['inputs', 'selects', 'checkboxes', 'radios', 'textareas'].reduce((sum, k) => sum + (spec[k]?.length || 0), 0);
+}
+function a(s = '') {
+  return String(s).replaceAll('"', '&quot;');
+}
+function h(s = '') {
+  return String(s).replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;');
+}
+function bool(v) {
+  return v ? 'true' : 'false';
+}
+function log(file, n) {
+  const name = path.basename(file);
+  console.log(`${tag} ✅ ${name} (${n})`);
+}
+
+export { generateRazor as default };