@vettvangur/design-system 0.0.1

package/dist/generate-razor-BLNML3CC.js

@@ -0,0 +1,441 @@
+#!/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');
+
+// default export now takes a namespace (e.g. 'Cerebrum', 'MMS')
+async function generateRazor(ns = 'UmbracoStarter') {
+  // helpers to build partial paths with the namespace
+  const P = p => `${ns}/Components/${p}`; // e.g. "Cerebrum/Components/Headline"
+  const HeadlinePartial = P('Headline');
+  const ButtonPartial = P('Button');
+  const InputPartial = P('Inputs/Input');
+  const SelectPartial = P('Inputs/Select');
+  const SelectionPartial = P('Inputs/Selection');
+  const TextareaPartial = P('Inputs/Textarea');
+  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, HeadlinePartial), '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, HeadlinePartial), 'utf8');
+    log(FILE_TYPO, (typography.headlines?.length ?? 0) + (typography.bodies?.length ?? 0));
+  }
+
+  // Buttons
+  if (buttons?.length) {
+    await promises.writeFile(FILE_BUTTONS, renderButtons(buttons, HeadlinePartial, ButtonPartial), '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, HeadlinePartial, {
+      InputPartial,
+      SelectPartial,
+      SelectionPartial,
+      TextareaPartial
+    }), 'utf8');
+    log(FILE_INPUTS, countInputs(inputsSpec));
+  }
+
+  // Richtext & Tables (static demos)
+  await promises.writeFile(FILE_RICHTEXT, renderRichtext(HeadlinePartial), 'utf8');
+  log(FILE_RICHTEXT, 1);
+  await promises.writeFile(FILE_Table, renderRichtextTables(HeadlinePartial), 'utf8');
+  log(FILE_Table, 1);
+}
+
+/* -------------------- RENDERERS -------------------- */
+
+function renderColors(colors, HeadlinePartial) {
+  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">
+    <partial name="${HeadlinePartial}" view-data="@(new ViewDataDictionary(ViewData)
+    {{ "headlineData", new Headline {
+      Identifier = "styleguide__headline",
+      Modifier = "headline1",
+      Text = "Colors"
+    }}})" />
+
+    <div class="styleguide-colors-grid grid grid--gap">
+${items}
+    </div>
+  </div>
+</section>
+`;
+}
+function renderTypography({
+  headlines = [],
+  bodies = []
+}, HeadlinePartial) {
+  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>
+
+      <partial name="${HeadlinePartial}" view-data="@(new ViewDataDictionary(ViewData)
+      {{ "headlineData", new Headline {
+        Identifier = "styleguide-typography__item-example",
+        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">
+    <partial name="${HeadlinePartial}" view-data="@(new ViewDataDictionary(ViewData)
+    {{ "headlineData", new Headline {
+      Identifier = "styleguide__headline",
+      Modifier = "headline1",
+      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, HeadlinePartial, ButtonPartial) {
+  const items = buttons.map(b => `
+    <div class="styleguide__button-wrap">
+      <partial name="${ButtonPartial}" view-data="@(new ViewDataDictionary(ViewData)
+      {{ "buttonData", new 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">
+    <partial name="${HeadlinePartial}" view-data="@(new ViewDataDictionary(ViewData)
+    {{ "headlineData", new Headline {
+      Identifier = "styleguide__headline",
+      Modifier = "headline1",
+      Text = "Buttons"
+    }}})" />
+
+    <div class="grid grid--gap">
+${items}
+    </div>
+  </div>
+</section>
+`;
+}
+function renderInputs(spec, HeadlinePartial, parts) {
+  const {
+    InputPartial,
+    SelectPartial,
+    SelectionPartial,
+    TextareaPartial
+  } = parts;
+  const {
+    inputs = [],
+    selects = [],
+    checkboxes = [],
+    radios = [],
+    textareas = []
+  } = spec;
+  const inputsPartials = inputs.map(i => `
+      <partial name="${InputPartial}" view-data="@(new ViewDataDictionary(ViewData)
+      {{ "inputData", new HTMLInput {
+        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 => `
+      <partial name="${SelectPartial}" view-data="@(new ViewDataDictionary(ViewData)
+      {{ "selectData", new 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">
+        <partial name="${SelectionPartial}" view-data="@(new ViewDataDictionary(ViewData)
+        {{ "selectionData", new Selection {
+          Id = "${a(c.id || '')}",
+          Label = "${a(c.Label ?? c.label ?? 'Checkbox')}",
+          Type = InputType.Checkbox,
+          IsDisabled = ${bool(c.isDisabled)},
+          IsError = ${bool(c.isError)}
+        }}})" />
+      </div>`).join('\n');
+  const radioRows = radios.map(r => `
+      <div class="input-group">
+        <partial name="${SelectionPartial}" view-data="@(new ViewDataDictionary(ViewData)
+        {{ "selectionData", new Selection {
+          Id = "${a(r.id || '')}",
+          Type = InputType.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 => `
+      <partial name="${TextareaPartial}" view-data="@(new ViewDataDictionary(ViewData)
+      {{ "textareaData", new 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">
+    <partial name="${HeadlinePartial}" view-data="@(new ViewDataDictionary(ViewData)
+    {{ "headlineData", new Headline {
+      Identifier = "styleguide__headline",
+      Modifier = "headline1",
+      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(HeadlinePartial) {
+  return `@* Auto-generated — do not edit by hand *@
+<section class="w-full">
+  <partial name="${HeadlinePartial}" view-data="@(new ViewDataDictionary(ViewData)
+  {{ "headlineData", new Headline {
+    Identifier = "styleguide__headline",
+    Modifier = "headline-1 mb-[60px]",
+    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(HeadlinePartial) {
+  return `@* Auto-generated — do not edit by hand *@
+<section class="w-full">
+  <partial name="${HeadlinePartial}" view-data="@(new ViewDataDictionary(ViewData)
+  {{ "headlineData", new Headline {
+    Identifier = "styleguide__headline",
+    Modifier = "headline-1 mb-20",
+    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(`✓ Wrote ${path.relative(process.cwd(), file)} (${n})`);
+}
+
+export { generateRazor as default };