feat(tokens): adds index-generator (#1204)

* feat: adds index-generator * fix: file namings
deven-org · Jan 13, 2025 · 09ea9b7 · 09ea9b7
1 parent baafea8
commit 09ea9b7
Show file tree

Hide file tree

Showing 29 changed files with 118 additions and 101 deletions.
diff --git a/.gitignore b/.gitignore
@@ -16,8 +16,8 @@ packages/js-example-app/src/assets/index.html
 packages/ui-library/src/foundation/_tokens-generated/mjs_modules/*
 packages/ui-library/src/foundation/_tokens-generated/module_declarations/*
 
-# packages/ui-library/src/foundation/_tokens-generated/index.*.generated.ts
-packages/ui-library/src/foundation/_tokens-generated/index.Dunkel_value.generated.ts
-packages/ui-library/src/foundation/_tokens-generated/index.Licht_value.generated.ts
-packages/ui-library/src/foundation/_tokens-generated/index.themes.ts
+packages/ui-library/src/foundation/_tokens-generated/*.generated.ts
+# packages/ui-library/src/foundation/_tokens-generated/index.Dunkel_value.generated.ts
+# packages/ui-library/src/foundation/_tokens-generated/index.Licht_value.generated.ts
+# packages/ui-library/src/foundation/_tokens-generated/index.themes.ts
 
diff --git a/packages/figma-design-tokens/config/buildpaths.mjs b/packages/figma-design-tokens/config/buildpaths.mjs
@@ -1,4 +1,5 @@
 export const buildpaths = {
   mjs_modules: '../ui-library/src/foundation/_tokens-generated/mjs_modules/',
   modul_declarations: '../ui-library/src/foundation/_tokens-generated/module_declarations/',
+  _tg: '../ui-library/src/foundation/_tokens-generated/',
 };
diff --git a/packages/figma-design-tokens/config/generate-index-files.mjs b/packages/figma-design-tokens/config/generate-index-files.mjs
@@ -17,16 +17,6 @@ const convertToCamelCase = (item) => {
   return convertedString;
 };
 
-/*
-const cssFiles = files
-  .filter((item) => item.endsWith('generated.scss') && item.startsWith('_'))
-  .map((item) => item.replace('.scss', '').replace('_', ''))
-  .map((item) => `@use './${item}';`);
-
-console.log(chalk.magentaBright('👷 creates foundation/_tokens-generated/index.generated.scss... \n'));
-fs.writeFileSync(`../ui-library/src/foundation/_tokens-generated/index.generated.scss`, cssFiles.join('\n'), 'utf-8');
-*/
-
 themes.array.map((theme) => {
   console.log('\n==============================================');
   console.log(`\nProcessing: [${theme}]`);

diff --git a/packages/figma-design-tokens/config/generate-iterator.mjs b/packages/figma-design-tokens/config/generate-iterator.mjs
@@ -0,0 +1,79 @@
+import fs from 'fs';
+import themes from './themes_generated.cjs';
+import { buildpaths } from './buildpaths.mjs';
+
+// # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #
+// Template for the generated file
+// # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #
+
+const fileTemplate = `import { makeIterator, joinCss } from '../../utils/css-in-ts/make-token-part-iterator.js';
+{{imports}}
+
+export const componentTokenTree = {
+{{componentTree}}
+};
+
+export const semanticTokenTree = {
+{{semanticTree}}
+};
+
+export const ComponentThemeIterator = (
+  renderFunction: (
+    theme: keyof typeof componentTokenTree,
+    cmp: typeof componentTokenTree.{{firstTheme}},
+    css: typeof joinCss,
+  ) => string,
+) => {
+  const it = makeIterator<typeof componentTokenTree>();
+
+  return it(componentTokenTree, renderFunction);
+};
+
+export const SemanticThemeIterator = (
+  renderFunction: (
+    theme: keyof typeof semanticTokenTree,
+    sem: typeof semanticTokenTree.{{firstTheme}},
+    css: typeof joinCss,
+  ) => string,
+) => {
+  const it = makeIterator<typeof semanticTokenTree>();
+
+  return it(semanticTokenTree, renderFunction);
+};`;
+
+// # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #
+// Generate imports, component tree, and semantic tree dynamically. Then fill the template.
+// # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #
+
+const imports = themes.array
+  .map((theme) => {
+    const prefix = theme.split('_')[0];
+    return `import { tokens as cmp${prefix} } from './mjs_modules/__component-tokens.${theme}.generated.mjs';\nimport { tokens as sem${prefix} } from './mjs_modules/__semantic-tokens.${theme}.generated.mjs';`;
+  })
+  .join('\n');
+
+const componentTree = themes.array
+  .map((theme) => {
+    const prefix = theme.split('_')[0];
+    return `  ${theme}: cmp${prefix}.cmp`;
+  })
+  .join(',\n');
+
+const semanticTree = themes.array
+  .map((theme) => {
+    const prefix = theme.split('_')[0];
+    return `  ${theme}: sem${prefix}.sem`;
+  })
+  .join(',\n');
+
+// Fill the template with the generated content
+const fileContent = fileTemplate
+  .replace('{{imports}}', imports)
+  .replace('{{componentTree}}', componentTree)
+  .replace('{{semanticTree}}', semanticTree)
+  .replace(/{{firstTheme}}/g, themes.array[0]);
+
+// Write the generated content to a new file
+fs.writeFileSync(`${buildpaths._tg}/iterator.generated.ts`, fileContent, 'utf-8');
+
+console.log('File generated successfully!');
diff --git a/packages/figma-design-tokens/package.json b/packages/figma-design-tokens/package.json
@@ -5,7 +5,8 @@
   "scripts": {
     "style-dictionary": "node ./config/style-dictionary.config.mjs",
     "generate-index-files": "node ./config/generate-index-files.mjs",
-    "tokens:generate": "node ./config/style-dictionary.config.mjs && yarn generate-index-files "
+    "start-index-generator": "node ./config/generate-iterator.mjs",
+    "tokens:generate": "node ./config/style-dictionary.config.mjs && yarn generate-index-files && yarn start-index-generator"
   },
   "author": "",
   "license": "MIT",

diff --git a/packages/ui-library/src/components/button-group/index.css.ts b/packages/ui-library/src/components/button-group/index.css.ts
@@ -1,12 +1,10 @@
-import { ComponentThemeIterator } from "../../foundation/_tokens-generated/index.pseudo.generated.js";
+import { ComponentThemeIterator } from "../../foundation/_tokens-generated/iterator.generated.js";
 import { css } from "../../utils/css-in-ts/nested-typesafe-css-literals.js";
 
-
 export const staticStyles = css`
   ${ComponentThemeIterator((theme, cmp, css) => {
     const { buttongroup } = cmp;
 
-
     return css`
       .blr-button-group.${theme} {
         display: flex;

diff --git a/packages/ui-library/src/components/button-icon/index.css.ts b/packages/ui-library/src/components/button-icon/index.css.ts
@@ -1,5 +1,5 @@
 import { css } from "../../utils/css-in-ts/nested-typesafe-css-literals.js";
-import { ComponentThemeIterator, SemanticThemeIterator } from "../../foundation/_tokens-generated/index.pseudo.generated.js";
+import { ComponentThemeIterator, SemanticThemeIterator } from "../../foundation/_tokens-generated/iterator.generated.js";
 
 export const styleCustom = css`
   .focus-layer {

diff --git a/packages/ui-library/src/components/button-text/index.css.ts b/packages/ui-library/src/components/button-text/index.css.ts
@@ -1,4 +1,4 @@
-import { ComponentThemeIterator, SemanticThemeIterator } from "../../foundation/_tokens-generated/index.pseudo.generated.js";
+import { ComponentThemeIterator, SemanticThemeIterator } from "../../foundation/_tokens-generated/iterator.generated.js";
 import { css } from "../../utils/css-in-ts/nested-typesafe-css-literals.js";
 
 export const styleCustom = css`
@@ -101,23 +101,23 @@ export const styleCustom = css`
 
       .flex-container.${theme} {
         &.xs {
-          gap: ${buttontext.container.itemspacing.xs}
+          gap: ${buttontext.container.itemspacing.xs};
         }
 
         &.sm {
-          gap: ${buttontext.container.itemspacing.sm}
+          gap: ${buttontext.container.itemspacing.sm};
         }
 
         &.md {
-          gap: ${buttontext.container.itemspacing.md}
+          gap: ${buttontext.container.itemspacing.md};
         }
 
         &.lg {
-          gap: ${buttontext.container.itemspacing.lg}
+          gap: ${buttontext.container.itemspacing.lg};
         }
 
         &.xl {
-          gap: ${buttontext.container.itemspacing.xl}
+          gap: ${buttontext.container.itemspacing.xl};
         }
       }
     `;

diff --git a/packages/ui-library/src/components/checkbox/index.css.ts b/packages/ui-library/src/components/checkbox/index.css.ts
@@ -1,4 +1,4 @@
-import { ComponentThemeIterator, SemanticThemeIterator } from "../../foundation/_tokens-generated/index.pseudo.generated.js";
+import { ComponentThemeIterator, SemanticThemeIterator } from "../../foundation/_tokens-generated/iterator.generated.js";
 import { css } from "../../utils/css-in-ts/nested-typesafe-css-literals.js";
 
 export const staticStyles = css`

diff --git a/packages/ui-library/src/components/counter/index.css.ts b/packages/ui-library/src/components/counter/index.css.ts
@@ -1,4 +1,4 @@
-import { ComponentThemeIterator } from "../../foundation/_tokens-generated/index.pseudo.generated.js";
+import { ComponentThemeIterator } from "../../foundation/_tokens-generated/iterator.generated.js";
 import { css } from "../../utils/css-in-ts/nested-typesafe-css-literals.js";
 
 export const staticStyles = css`

diff --git a/packages/ui-library/src/components/divider/index.css.ts b/packages/ui-library/src/components/divider/index.css.ts
@@ -1,4 +1,4 @@
-import { ComponentThemeIterator } from "../../foundation/_tokens-generated/index.pseudo.generated.js";
+import { ComponentThemeIterator } from "../../foundation/_tokens-generated/iterator.generated.js";
 import { css } from "../../utils/css-in-ts/nested-typesafe-css-literals.js";
 
 export const staticStyles = css`

diff --git a/packages/ui-library/src/components/form-caption-group/index.css.ts b/packages/ui-library/src/components/form-caption-group/index.css.ts
@@ -1,4 +1,4 @@
-import { ComponentThemeIterator, SemanticThemeIterator } from "../../foundation/_tokens-generated/index.pseudo.generated.js";
+import { ComponentThemeIterator, SemanticThemeIterator } from "../../foundation/_tokens-generated/iterator.generated.js";
 import { css } from "../../utils/css-in-ts/nested-typesafe-css-literals.js";
 
 export const staticStyles = css`

diff --git a/packages/ui-library/src/components/form-caption/index.css.ts b/packages/ui-library/src/components/form-caption/index.css.ts
@@ -1,5 +1,5 @@
 import { css } from "../../utils/css-in-ts/nested-typesafe-css-literals.js";
-import { ComponentThemeIterator } from "../../foundation/_tokens-generated/index.pseudo.generated.js";
+import { ComponentThemeIterator } from "../../foundation/_tokens-generated/iterator.generated.js";
 
 export const staticStyles = css`
   ${ComponentThemeIterator((theme, cmp, css) => {

diff --git a/packages/ui-library/src/components/icon/index.css.ts b/packages/ui-library/src/components/icon/index.css.ts
@@ -1,6 +1,6 @@
 import { css } from "../../utils/css-in-ts/nested-typesafe-css-literals.js";
 
-import { ComponentThemeIterator } from "../../foundation/_tokens-generated/index.pseudo.generated.js";
+import { ComponentThemeIterator } from "../../foundation/_tokens-generated/iterator.generated.js";
 
 /*
   the full class is used by "ignoreSize" attribute, so that consumers can take care about sizing

diff --git a/packages/ui-library/src/components/input-field-number/index.css.ts b/packages/ui-library/src/components/input-field-number/index.css.ts
@@ -1,4 +1,4 @@
-import { SemanticThemeIterator, ComponentThemeIterator } from "../../foundation/_tokens-generated/index.pseudo.generated.js";
+import { SemanticThemeIterator, ComponentThemeIterator } from "../../foundation/_tokens-generated/iterator.generated.js";
 import { css } from "../../utils/css-in-ts/nested-typesafe-css-literals.js";
 
 export const staticBaseStyles = css`

diff --git a/packages/ui-library/src/components/input-field-text/index.css.ts b/packages/ui-library/src/components/input-field-text/index.css.ts
@@ -1,6 +1,6 @@
 import { css } from "../../utils/css-in-ts/nested-typesafe-css-literals.js";
 
-import { SemanticThemeIterator } from "../../foundation/_tokens-generated/index.pseudo.generated.js";
+import { SemanticThemeIterator } from "../../foundation/_tokens-generated/iterator.generated.js";
 
 import * as semanticTokenTypes from "../../foundation/_tokens-generated/module_declarations/__semantic-tokens.Licht_value.generated.js";
 

diff --git a/packages/ui-library/src/components/loader/index.css.ts b/packages/ui-library/src/components/loader/index.css.ts
@@ -1,4 +1,4 @@
-import { ComponentThemeIterator } from "../../foundation/_tokens-generated/index.pseudo.generated.js";
+import { ComponentThemeIterator } from "../../foundation/_tokens-generated/iterator.generated.js";
 import { css } from "../../utils/css-in-ts/nested-typesafe-css-literals.js";
 
 export const staticStyles = css`
@@ -42,8 +42,8 @@ export const staticStyles = css`
         border-style: solid;
         box-sizing: border-box;
         animation: rotation 1s linear infinite;
-        
-        &.default { 
+
+        &.default {
           border-color: ${loader.background.bordercolor.default};
           border-bottom-color: ${loader.foreground.bordercolor.default};
         }
@@ -66,7 +66,7 @@ export const staticStyles = css`
         }
 
         &.lg {
-          width:  calc(${loader.container.size.lg} - (${loader.container.padding.lg} * 2));
+          width: calc(${loader.container.size.lg} - (${loader.container.padding.lg} * 2));
           height: calc(${loader.container.size.lg} - (${loader.container.padding.lg} * 2));
           border-width: ${loader.background.borderwidth.lg};
         }

diff --git a/packages/ui-library/src/components/radio-group/index.css.ts b/packages/ui-library/src/components/radio-group/index.css.ts
@@ -1,5 +1,5 @@
 import { css } from "../../utils/css-in-ts/nested-typesafe-css-literals.js";
-import { ComponentThemeIterator } from "../../foundation/_tokens-generated/index.pseudo.generated.js";
+import { ComponentThemeIterator } from "../../foundation/_tokens-generated/iterator.generated.js";
 
 export const staticStyles = css`
   .blr-legend {

diff --git a/packages/ui-library/src/components/radio/index.css.ts b/packages/ui-library/src/components/radio/index.css.ts
@@ -1,6 +1,6 @@
 import { css } from "../../utils/css-in-ts/nested-typesafe-css-literals.js";
 
-import { ComponentThemeIterator } from "../../foundation/_tokens-generated/index.pseudo.generated.js";
+import { ComponentThemeIterator } from "../../foundation/_tokens-generated/iterator.generated.js";
 
 export const staticStyles = css`
   ${ComponentThemeIterator((theme, cmp, css) => {

diff --git a/packages/ui-library/src/components/select/index.css.ts b/packages/ui-library/src/components/select/index.css.ts
@@ -1,6 +1,6 @@
 import { css } from "../../utils/css-in-ts/nested-typesafe-css-literals.js";
 
-import { SemanticThemeIterator } from "../../foundation/_tokens-generated/index.pseudo.generated.js";
+import { SemanticThemeIterator } from "../../foundation/_tokens-generated/iterator.generated.js";
 import type * as semanticTokenTypes from "../../foundation/_tokens-generated/module_declarations/__semantic-tokens.Licht_value.generated.js";
 import { ThemeType } from "../../foundation/_tokens-generated/index.themes.js";
 

diff --git a/packages/ui-library/src/components/tab-bar-item/index.css.ts b/packages/ui-library/src/components/tab-bar-item/index.css.ts
@@ -1,4 +1,4 @@
-import { ComponentThemeIterator } from "../../foundation/_tokens-generated/index.pseudo.generated.js";
+import { ComponentThemeIterator } from "../../foundation/_tokens-generated/iterator.generated.js";
 import { css } from "../../utils/css-in-ts/nested-typesafe-css-literals.js";
 
 export const staticStyles = css`

diff --git a/packages/ui-library/src/components/tab-bar/index.css.ts b/packages/ui-library/src/components/tab-bar/index.css.ts
@@ -1,4 +1,4 @@
-import { ComponentThemeIterator } from "../../foundation/_tokens-generated/index.pseudo.generated.js";
+import { ComponentThemeIterator } from "../../foundation/_tokens-generated/iterator.generated.js";
 import { css } from "../../utils/css-in-ts/nested-typesafe-css-literals.js";
 
 export const staticStyles = css`

diff --git a/packages/ui-library/src/components/textarea/index.css.ts b/packages/ui-library/src/components/textarea/index.css.ts
@@ -1,5 +1,5 @@
 import { css } from "../../utils/css-in-ts/nested-typesafe-css-literals.js";
-import { SemanticThemeIterator, ComponentThemeIterator } from "../../foundation/_tokens-generated/index.pseudo.generated.js";
+import { SemanticThemeIterator, ComponentThemeIterator } from "../../foundation/_tokens-generated/iterator.generated.js";
 
 export const staticStyles = css`
   :host {

diff --git a/packages/ui-library/src/components/toggle-switch/index.css.ts b/packages/ui-library/src/components/toggle-switch/index.css.ts
@@ -1,5 +1,5 @@
 import { css } from "../../utils/css-in-ts/nested-typesafe-css-literals.js";
-import { ComponentThemeIterator, SemanticThemeIterator } from "../../foundation/_tokens-generated/index.pseudo.generated.js";
+import { ComponentThemeIterator, SemanticThemeIterator } from "../../foundation/_tokens-generated/iterator.generated.js";
 
 export const staticStyles = css`
   .blr-label-toggleswitch {

diff --git a/packages/ui-library/src/components/tooltip/index.css.ts b/packages/ui-library/src/components/tooltip/index.css.ts
@@ -1,4 +1,4 @@
-import { ComponentThemeIterator } from "../../foundation/_tokens-generated/index.pseudo.generated.js";
+import { ComponentThemeIterator } from "../../foundation/_tokens-generated/iterator.generated.js";
 import { css } from "../../utils/css-in-ts/nested-typesafe-css-literals.js";
 
 export const staticStyles = css`

diff --git a/packages/ui-library/src/foundation/_tokens-generated/index.pseudo.generated.ts b/packages/ui-library/src/foundation/_tokens-generated/index.pseudo.generated.ts
diff --git a/packages/ui-library/src/foundation/_tokens-generated/index.themes.ts b/packages/ui-library/src/foundation/_tokens-generated/index.themes.ts
@@ -0,0 +1,2 @@
+export const Themes = ['Licht_value', 'Dunkel_value'] as const;
+export type ThemeType = (typeof Themes)[number];
diff --git a/packages/ui-library/src/foundation/semantic-tokens/action.css.ts b/packages/ui-library/src/foundation/semantic-tokens/action.css.ts
@@ -1,4 +1,4 @@
-import { SemanticThemeIterator } from "../../foundation/_tokens-generated/index.pseudo.generated.js";
+import { SemanticThemeIterator } from "../_tokens-generated/iterator.generated.js";
 import { css } from "../../utils/css-in-ts/nested-typesafe-css-literals.js";
 
 export const staticActionStyles = css`

diff --git a/packages/ui-library/src/foundation/semantic-tokens/form.css.ts b/packages/ui-library/src/foundation/semantic-tokens/form.css.ts
@@ -1,6 +1,6 @@
 import { css } from "../../utils/css-in-ts/nested-typesafe-css-literals.js";
 
-import { SemanticThemeIterator, ComponentThemeIterator } from "../_tokens-generated/index.pseudo.generated.js";
+import { SemanticThemeIterator, ComponentThemeIterator } from "../_tokens-generated/iterator.generated.js";
 
 export const staticBaseStyles = css`
   .blr-form-element {
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export const Themes = ['Licht_value', 'Dunkel_value'] as const;
		export type ThemeType = (typeof Themes)[number];