refactor: ♻️ Conform cli arguments for output

digdir · Dec 11, 2024 · ae96941 · ae96941
1 parent de912ae
commit ae96941
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 24 deletions.
diff --git a/apps/theme/components/TokenModal/TokenModal.tsx b/apps/theme/components/TokenModal/TokenModal.tsx
@@ -35,8 +35,7 @@ export const TokenModal = () => {
    --${colorCliOptions.main} ${setCliColors(colors.main)} \\
    --${colorCliOptions.neutral} "${colors.neutral[0]?.colors.light[8].hex}" \\
    --${colorCliOptions.support} ${setCliColors(colors.support)} \\
-   --theme "${themeName}" \\
-   --write`;
+   --theme "${themeName}"`;
 
   type InfoBoxType = {
     title: string;

diff --git a/packages/cli/bin/designsystemet.ts b/packages/cli/bin/designsystemet.ts
@@ -13,18 +13,19 @@ program.name('designsystemet').description('CLI for working with Designsystemet'
 
 function makeTokenCommands() {
   const tokenCmd = createCommand('tokens');
-  const DEFAULT_TOKENSDIR = './design-tokens';
+  const DEFAULT_TOKENS_DIR = './design-tokens';
+  const DEFAULT_BUILD_DIR = './design-tokens-build';
 
   tokenCmd
     .command('build')
     .description('Build Designsystemet tokens')
-    .option('-t, --tokens <string>', `Path to ${chalk.blue('design-tokens')}`, DEFAULT_TOKENSDIR)
-    .option('-o, --out <string>', `Output directory for built ${chalk.blue('design-tokens')}`, './build')
+    .option('-t, --tokens <string>', `Path to ${chalk.blue('design-tokens')}`, DEFAULT_TOKENS_DIR)
+    .option('-d, --dir <string>', `Output directory for built ${chalk.blue('design-tokens')}`, DEFAULT_BUILD_DIR)
     .option('-p, --preview', 'Generate preview token.ts files', false)
     .option('--verbose', 'Enable verbose output', false)
     .action((opts) => {
-      const tokens = typeof opts.tokens === 'string' ? opts.tokens : DEFAULT_TOKENSDIR;
-      const out = typeof opts.out === 'string' ? opts.out : './dist/tokens';
+      const tokens = typeof opts.tokens === 'string' ? opts.tokens : DEFAULT_TOKENS_DIR;
+      const out = typeof opts.dir === 'string' ? opts.dir : './dist/tokens';
       const preview = opts.preview;
       const verbose = opts.verbose;
       console.log(`Building tokens in ${chalk.green(tokens)}`);
@@ -36,13 +37,14 @@ function makeTokenCommands() {
     .requiredOption(`-m, --${colorCliOptions.main} <name:hex...>`, `Main colors`, parseColorValues)
     .requiredOption(`-s, --${colorCliOptions.support} <name:hex...>`, `Support colors`, parseColorValues)
     .requiredOption(`-n, --${colorCliOptions.neutral} <hex>`, `Neutral hex color`, convertToHex)
-    .option('-w, --write [string]', `Output directory for created ${chalk.blue('design-tokens')}`, DEFAULT_TOKENSDIR)
+    .option('-d, --dir [string]', `Output directory for created ${chalk.blue('design-tokens')}`, DEFAULT_TOKENS_DIR)
+    .option('--dry [boolean]', `Dry run for created ${chalk.blue('design-tokens')}`)
     .option('-f, --font-family <string>', `Font family`, 'Inter')
     .option('--theme <string>', `Theme name`, 'theme')
     .action(async (opts) => {
-      const { theme, fontFamily } = opts;
+      const { theme, fontFamily, dry } = opts;
       console.log(`Creating tokens with options ${chalk.green(JSON.stringify(opts, null, 2))}`);
-      const write = typeof opts.write === 'boolean' ? DEFAULT_TOKENSDIR : opts.write;
+      const write = typeof opts.dir === 'boolean' ? DEFAULT_TOKENS_DIR : opts.dir;
 
       const props = {
         themeName: theme,
@@ -58,8 +60,8 @@ function makeTokenCommands() {
 
       const tokens = createTokens(props);
 
-      if (write) {
-        await writeTokens({ writeDir: write, tokens, themeName: theme, colors: props.colors });
+      if (!dry) {
+        await writeTokens({ outDir: write, tokens, themeName: theme, colors: props.colors });
       }
 
       return Promise.resolve();

diff --git a/packages/cli/package.json b/packages/cli/package.json
@@ -31,21 +31,21 @@
   },
   "scripts": {
     "designsystemet": "tsx ./bin/designsystemet.ts",
-    "build:tokens": "yarn clean:theme && yarn designsystemet tokens build -p -t ../../design-tokens -o ../../packages/theme/brand",
-    "build:tokens:debug": "yarn clean:theme && tsx --inspect-brk ./bin/designsystemet.ts tokens build -p -t ../../design-tokens -o ../../packages/theme/brand",
+    "build:tokens": "yarn clean:theme && yarn designsystemet tokens build -p -t ../../design-tokens -d ../../packages/theme/brand",
+    "build:tokens:debug": "yarn clean:theme && tsx --inspect-brk ./bin/designsystemet.ts tokens build -p -t ../../design-tokens -d ../../packages/theme/brand",
     "build": "tsup && yarn build:types",
     "build:types": "tsc --emitDeclarationOnly --declaration",
-    "test:tokens-create": "yarn designsystemet tokens create -m dominant:#007682 secondary:#ff0000 -n #003333 -s support1:#12404f support2:#0054a6 support3:#942977 -w ./test-tokens-create",
-    "test:tokens-build": "yarn designsystemet tokens build -t ./test-tokens-create -o ./test-tokens-build",
+    "test:tokens-create": "yarn designsystemet tokens create -m dominant:#007682 secondary:#ff0000 -n #003333 -s support1:#12404f support2:#0054a6 support3:#942977 -d ./test-tokens-create",
+    "test:tokens-build": "yarn designsystemet tokens build -t ./test-tokens-create -d ./test-tokens-build",
     "test:tokens-create-and-build": "rimraf test-tokens-create && rimraf test-tokens-build && yarn test:tokens-create && yarn test:tokens-build",
     "test": "yarn test:tokens-create-and-build",
     "clean": "rimraf dist",
     "clean:theme": "yarn workspace @digdir/designsystemet-theme clean",
     "update:template": "tsx ./src/tokens/template.ts",
-    "internal:tokens-create-digdir": "yarn designsystemet tokens create --theme theme -m accent:#0062BA -n #1E2B3C -s brand1:#F45F63 brand2:#E5AA20 brand3:#1E98F5 -w ./internal/design-tokens",
-    "internal:tokens-create-altinn": "yarn designsystemet tokens create --theme theme2 -m accent:#0162BA -n #1E2B3C -s brand1:#0162BA brand2:#3F3161 brand3:#E02F4A -w ./internal/design-tokens",
-    "internal:tokens-create-uutilsynet": "yarn designsystemet tokens create --theme theme3 -m accent:#0162BA -n #1E2B3C -s brand1:#5B60D1 brand2:#FEA769 brand3:#5DA290 -w ./internal/design-tokens",
-    "internal:tokens-create-portal": "yarn designsystemet tokens create --theme theme4 -m accent:#4D107D -n #1E2B3C -s brand1:#A259DC brand2:#DF73E4 brand3:#E86ABF -w ./internal/design-tokens",
+    "internal:tokens-create-digdir": "yarn designsystemet tokens create --theme theme -m accent:#0062BA -n #1E2B3C -s brand1:#F45F63 brand2:#E5AA20 brand3:#1E98F5 -d ./internal/design-tokens",
+    "internal:tokens-create-altinn": "yarn designsystemet tokens create --theme theme2 -m accent:#0162BA -n #1E2B3C -s brand1:#0162BA brand2:#3F3161 brand3:#E02F4A -d ./internal/design-tokens",
+    "internal:tokens-create-uutilsynet": "yarn designsystemet tokens create --theme theme3 -m accent:#0162BA -n #1E2B3C -s brand1:#5B60D1 brand2:#FEA769 brand3:#5DA290 -d ./internal/design-tokens",
+    "internal:tokens-create-portal": "yarn designsystemet tokens create --theme theme4 -m accent:#4D107D -n #1E2B3C -s brand1:#A259DC brand2:#DF73E4 brand3:#E86ABF -d ./internal/design-tokens",
     "internal:tokens-create-all": "yarn internal:tokens-create-digdir && yarn internal:tokens-create-altinn && yarn internal:tokens-create-uutilsynet && yarn internal:tokens-create-portal"
   },
   "dependencies": {

diff --git a/packages/cli/src/tokens/write.ts b/packages/cli/src/tokens/write.ts
@@ -47,15 +47,15 @@ const generateTypographyFile = (
 };
 
 type WriteTokensOptions = {
-  writeDir: string;
+  outDir: string;
   tokens: Tokens;
   themeName: string;
   colors: Colors;
 };
 
 export const writeTokens = async (options: WriteTokensOptions) => {
-  const { writeDir, tokens, themeName, colors } = options;
-  const targetDir = path.resolve(process.cwd(), String(writeDir));
+  const { outDir, tokens, themeName, colors } = options;
+  const targetDir = path.resolve(process.cwd(), String(outDir));
   const $themesPath = path.join(targetDir, '$themes.json');
   const $metadataPath = path.join(targetDir, '$metadata.json');
   let themes = [themeName];
@@ -213,6 +213,6 @@ export const writeTokens = async (options: WriteTokensOptions) => {
   }
 
   console.log(
-    `Finished creating Designsystem design tokens in ${chalk.green(writeDir)} for theme ${chalk.blue(themeName)}`,
+    `Finished creating Designsystem design tokens in ${chalk.green(outDir)} for theme ${chalk.blue(themeName)}`,
   );
 };