@vettvangur/design-system 0.0.1

package/dist/generate-razor-nGTa0EVW.js

@@ -0,0 +1,335 @@
+#!/usr/bin/env node
+import { promises } from 'node:fs';
+import path from 'node:path';
+import 'node:url';
+import { p as parseColors, a as parseTypography, b as parseButtons, i as inputsSpec } from './inputs-CQVgm9Do.js';
+import 'node:process';
+
+// core/razor/generate-razor.mjs
+const CWD = process.cwd();
+
+// Target folder for partials (cwd = vettvangur-styleguide)
+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');
+async function generateRazor() {
+  await promises.mkdir(OUT_DIR, {
+    recursive: true
+  });
+  const [colors, typography, buttons] = await Promise.all([parseColors(),
+  // [{ title, color, class }]
+  parseTypography(),
+  // { bodies: [...], headlines: [...] }
+  parseButtons() // [{ title, class, text }]
+  ]);
+
+  // Colors
+  if (colors?.length) {
+    await promises.writeFile(FILE_COLORS, renderColors(colors), 'utf8');
+    log(FILE_COLORS, colors.length);
+  }
+
+  // Typography (one file: headlines + bodies)
+  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));
+  }
+}
+
+/* -------------------- RENDERERS -------------------- */
+
+// Colors
+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">
+\t\t<partial name="Cerebrum/Components/Headline" view-data="@(new ViewDataDictionary(ViewData)
+\t\t{{ "headlineData", new Headline {
+\t\t\tIdentifier = "styleguide__headline",
+\t\t\tModifier = "headline1",
+\t\t\tText = "Colors"
+\t\t}}})" />
+
+        <div class="styleguide-colors-grid grid grid--gap">
+${items}
+        </div>
+    </div>
+</section>
+`;
+}
+
+// Typography (headlines + bodies)
+function renderTypography({
+  headlines = [],
+  bodies = []
+}) {
+  const headlineItems = headlines.map(hItem => {
+    const mod = classToModifier(hItem.class, 'headline'); // "headline-3" -> "headline3"
+    const info = infoBlocks(hItem); // text with desktop/mobile pairs
+    return `
+        <div class="styleguide-typography__item grid grid--gap">
+            <span class="styleguide-typography__item-name">${hItem.title}</span>
+
+            <partial name="Cerebrum/Components/Headline" 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="Cerebrum/Components/Headline" 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>`;
+}
+
+// Buttons (using your Button partial)
+function renderButtons(buttons) {
+  const items = buttons.map(b => {
+    // Map our utility classes directly into Modifier (your partial handles class string)
+    const modifier = b.class;
+    return `
+            <div class="styleguide__button-wrap">
+                <partial name="Cerebrum/Components/Button" view-data="@(new ViewDataDictionary(ViewData)
+                {{ "buttonData", new Button {
+                    Modifier = "${a(modifier)}",
+                    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">
+\t\t<partial name="Cerebrum/Components/Headline" view-data="@(new ViewDataDictionary(ViewData)
+\t\t{{ "headlineData", new Headline {
+\t\t\tIdentifier = "styleguide__headline",
+\t\t\tModifier = "headline1",
+\t\t\tText = "Buttons"
+\t\t}}})" />
+
+        <div class="grid grid--gap">
+${items}
+        </div>
+    </div>
+</section>
+`;
+}
+
+// Inputs (using your MVC partials exactly like your example)
+function renderInputs(spec) {
+  const {
+    inputs = [],
+    selects = [],
+    checkboxes = [],
+    radios = [],
+    textareas = []
+  } = spec;
+  const inputsPartials = inputs.map(i => `
+\t\t\t<partial name="Cerebrum/Components/Inputs/Input" view-data="@(new ViewDataDictionary(ViewData)
+\t\t\t{{ "inputData", new Input {
+\t\t\t\tId = "${a(i.id || '')}",
+\t\t\t\tLabel = "${a(i.Label ?? i.label ?? 'Input')}",
+\t\t\t\tPlaceholder = "${a(i.placeholder ?? 'Input placeholder')}",
+\t\t\t\tIsDisabled = ${bool(i.isDisabled)},
+\t\t\t\tIsReadOnly = ${bool(i.isReadOnly)},
+\t\t\t\tIsError = ${bool(i.isError)}
+\t\t\t}}})" />`).join('\n');
+  const selectsPartials = selects.map(s => `
+\t\t\t<partial name="Cerebrum/Components/Inputs/Select" view-data="@(new ViewDataDictionary(ViewData)
+\t\t\t{{ "selectData", new Select {
+\t\t\t\tId = "${a(s.id || '')}",
+\t\t\t\tLabel = "${a(s.Label ?? 'Select')}",
+\t\t\t\tOptions = selectOptions,
+\t\t\t\tIsDisabled = ${bool(s.isDisabled)},
+\t\t\t\tIsReadOnly = ${bool(s.isReadOnly)},
+\t\t\t\tIsError = ${bool(s.isError)}
+\t\t\t}}})" />`).join('\n');
+  const checkboxRows = checkboxes.map(c => `
+\t\t\t<div class="input-group">
+\t\t\t\t<partial name="Cerebrum/Components/Inputs/Selection" view-data="@(new ViewDataDictionary(ViewData)
+\t\t\t\t{{ "selectionData", new Selection {
+\t\t\t\t\tId = "${a(c.id || '')}",
+\t\t\t\t\tLabel = "${a(c.Label ?? c.label ?? 'Checkbox')}",
+\t\t\t\t\tType = "checkbox",
+\t\t\t\t\tIsDisabled = ${bool(c.isDisabled)},
+\t\t\t\t\tIsError = ${bool(c.isError)}
+\t\t\t\t}}})" />
+\t\t\t</div>`).join('\n');
+  const radioRows = radios.map(r => `
+\t\t\t<div class="input-group">
+\t\t\t\t<partial name="Cerebrum/Components/Inputs/Selection" view-data="@(new ViewDataDictionary(ViewData)
+\t\t\t\t{{ "selectionData", new Selection {
+\t\t\t\t\tId = "${a(r.id || '')}",
+\t\t\t\t\tType = "radio",
+\t\t\t\t\tName = "${a(r.Name ?? r.name ?? 'prettyradio')}",
+\t\t\t\t\tLabel = "${a(r.Label ?? r.label ?? 'Radio')}",
+\t\t\t\t\tIsDisabled = ${bool(r.isDisabled)},
+\t\t\t\t\tIsError = ${bool(r.isError)}
+\t\t\t\t}}})" />
+\t\t\t</div>`).join('\n');
+  const textareasPartials = textareas.map(t => `
+\t\t\t<partial name="Cerebrum/Components/Inputs/Textarea" view-data="@(new ViewDataDictionary(ViewData)
+\t\t\t{{ "textareaData", new Textarea {
+\t\t\t\tId = "${a(t.id || '')}",
+\t\t\t\tLabel = "${a(t.Label ?? 'Textarea')}",
+\t\t\t\tPlaceholder = "${a(t.placeholder ?? 'Textarea placeholder')}",
+\t\t\t\tIsDisabled = ${bool(t.isDisabled)},
+\t\t\t\tIsReadOnly = ${bool(t.isReadOnly)},
+\t\t\t\tIsError = ${bool(t.isError)}
+\t\t\t}}})" />`).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">
+\t\t<partial name="Cerebrum/Components/Headline" view-data="@(new ViewDataDictionary(ViewData)
+\t\t{{ "headlineData", new Headline {
+\t\t\tIdentifier = "styleguide__headline",
+\t\t\tModifier = "headline1",
+\t\t\tText = "Inputs"
+\t\t}}})" />
+
+        <div class="styleguide-inputs__scrollitem grid grid--gap grid--align-start">
+${inputsPartials}
+${selectsPartials}
+${checkboxRows}
+${radioRows}
+${textareasPartials}
+        </div>
+    </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') {
+  // "headline-3" -> "headline3", "headline-10" -> "headline10"
+  const m = new RegExp(`^${prefix}[-_]?(\\d+)$`).exec(cls);
+  if (m) {
+    return `${prefix}${m[1]}`;
+  }
+  // fallback: strip dashes (so "body-1" becomes "body1" if you ever need it)
+  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';
+} // ← add this
+function log(file, n) {
+  console.log(`✓ Wrote ${path.relative(process.cwd(), file)} (${n})`);
+}
+
+export { generateRazor as default };