@vettvangur/design-system 0.0.1

package/dist/generate-razor-CGhqwpRL.js

@@ -0,0 +1,413 @@
+#!/usr/bin/env node
+import { promises } from 'node:fs';
+import path from 'node:path';
+import { p as parseColors, a as parseTypography, b as parseButtons, i as inputsSpec } from './inputs-CQVgm9Do.js';
+import 'node:url';
+import 'node:process';
+
+// core/razor/generate-razor.mjs
+const CWD = process.cwd();
+const OUT_DIR = path.resolve(CWD, '../Vettvangur.Site/Views/Partials/Styleguide');
+const FILE_COLORS = path.join(OUT_DIR, 'StyleguideColors.cshtml');
+const FILE_TYPO = path.join(OUT_DIR, 'StyleguideTypography.cshtml');
+const FILE_BUTTONS = path.join(OUT_DIR, 'StyleguideButtons.cshtml');
+const FILE_INPUTS = path.join(OUT_DIR, 'StyleguideInputs.cshtml');
+const FILE_RICHTEXT = path.join(OUT_DIR, 'StyleguideRichtext.cshtml');
+const FILE_Table = path.join(OUT_DIR, 'StyleguideTables.cshtml');
+async function generateRazor() {
+  await promises.mkdir(OUT_DIR, {
+    recursive: true
+  });
+  const [colors, typography, buttons] = await Promise.all([parseColors(), parseTypography(), parseButtons()]);
+
+  // 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);
+}
+
+/* -------------------- 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-1",
+      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">${hItem.title}</span>
+
+      <vv-headline
+        identifier="styleguide__headline",
+        modifier="${a(mod)}",
+        text="${a(hItem.title)}"
+      />
+
+      ${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-1",
+      text="Typography"    
+    />
+
+${headlineItems}
+${bodyItems}
+  </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 => `
+    <div class="styleguide__button-wrap">
+      <vv-button
+        identifier="styleguide__button"
+        modifier="${a(b.class)}"
+        type="@ButtonType.Button"
+        text="${a(b.text || b.title)}"
+      />
+    </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-1",
+      text="Buttons"    
+    />
+
+    <div class="grid grid--gap">
+${items}
+    </div>
+  </div>
+</section>
+`;
+}
+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')}"
+        isDisabled="${bool(i.isDisabled)}"
+        isReadOnly="${bool(i.isReadOnly)}"
+        isError="${bool(i.isError)}"
+      />
+      `).join('\n');
+  const selectsPartials = selects.map(s => `
+      <vv-select
+        id="${a(s.id || '')}"
+        label="${a(s.Label ?? 'Select')}"
+        options="@selectOptions"
+        isDisabled="${bool(s.isDisabled)}
+        isReadOnly="${bool(s.isReadOnly)}
+        isError="${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"
+          isDisabled="${bool(c.isDisabled)}"
+          isError="${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')}"
+          isDisabled="${bool(r.isDisabled)}"
+          isError="${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')}"
+        isDisabled=${bool(t.isDisabled)}"
+        isReadOnly="${bool(t.isReadOnly)}"
+        isError="${bool(t.isError)}"
+      />
+      `).join('\n');
+  return `@* Auto-generated — do not edit by hand *@
+@{
+  var selectOptions = new Dictionary<string, dynamic>() {
+    { "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-1",
+      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-1",
+    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-1",
+    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') {
+  const m = new RegExp(`^${prefix}[-_]?(\\d+)$`).exec(cls);
+  if (m) {
+    return `${prefix}${m[1]}`;
+  }
+  return cls.replaceAll('-', '');
+}
+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) {
+  console.log(`✓ ${path.relative(process.cwd(), file)} (${n}) generated successfully`);
+}
+
+export { generateRazor as default };

package/dist/generate-razor-DcAkNKya.js

@@ -0,0 +1,9 @@
+#!/usr/bin/env node
+//import {parseTypography} from '../generators/typography.mjs'
+
+async function generateRazor() {
+  //parseTypography()
+  console.log('GENERATING RAZOR');
+}
+
+export { generateRazor as default };