diff --git a/packages/cli/bin/designsystemet.ts b/packages/cli/bin/designsystemet.ts index d872240439..0a0ee61285 100644 --- a/packages/cli/bin/designsystemet.ts +++ b/packages/cli/bin/designsystemet.ts @@ -1,9 +1,10 @@ #!/usr/bin/env node -import { Argument, program } from '@commander-js/extra-typings'; +import { Argument, Command, program } from '@commander-js/extra-typings'; import chalk from 'chalk'; -import migrations from './../src/migrations/index.js'; -import { run } from './../src/tokens/build.js'; +import migrations from '../src/migrations/index.js'; +import { run } from '../src/tokens/build.js'; +import { makeInitCommand } from '../src/init/index.js'; program.name('Designsystemet').description('CLI for working with Designsystemet'); @@ -52,4 +53,6 @@ program } }); +program.addCommand(makeInitCommand(new Command('init'))); + await program.parseAsync(process.argv); diff --git a/packages/cli/package.json b/packages/cli/package.json index 482e74c138..6c8c0fef01 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -48,6 +48,7 @@ "@commander-js/extra-typings": "^12.0.1", "@tokens-studio/sd-transforms": "^0.16.1", "chalk": "^5.3.0", + "change-case": "^5.3.0", "chroma-js": "^2.4.2", "commander": "^12.0.0", "fast-glob": "^3.3.2", @@ -55,6 +56,7 @@ "jscodeshift": "^0.15.2", "object-hash": "^3.0.0", "postcss": "^8.4.38", + "prompts": "^2.4.0", "ramda": "^0.29.1", "rimraf": "^5.0.5", "style-dictionary": "^4.0.0-prerelease.34" @@ -65,6 +67,7 @@ "@types/jscodeshift": "^0.11.11", "@types/node": "^20.12.7", "@types/object-hash": "^3", + "@types/prompts": "^2.4.9", "@types/ramda": "^0.29.9", "fs-extra": "^11.2.0", "tsup": "^8.1.0", diff --git a/packages/create-tokens/src/createTokensPackage.ts b/packages/cli/src/init/createTokensPackage.ts similarity index 76% rename from packages/create-tokens/src/createTokensPackage.ts rename to packages/cli/src/init/createTokensPackage.ts index 6a2ee00d3d..ed51019313 100644 --- a/packages/create-tokens/src/createTokensPackage.ts +++ b/packages/cli/src/init/createTokensPackage.ts @@ -1,28 +1,16 @@ import path from 'node:path'; import fs from 'node:fs/promises'; -import { bold, dim, red, green } from 'kleur'; +import chalk from 'chalk'; import type { Choice, Options } from 'prompts'; import prompts from 'prompts'; -import packageJsonTemplate from '../template/template-files/package.json'; - +import packageJsonTemplate from './template/template-files/package.json'; import generateMetadata from './generateMetadataJson.js'; import generateThemes from './generateThemesJson.js'; -import { - toGeneratedCssFileName, - normalizeTokenSetName, - toValidPackageName, -} from './utils.js'; +import { toGeneratedCssFileName, normalizeTokenSetName, toValidPackageName } from './utils.js'; import { nextStepsMarkdown } from './nextStepsMarkdown.js'; -const DEFAULT_FILES_PATH = path.join(__dirname, '../template/default-files'); - -const TOKEN_TEMPLATE_FILES_PATH = path.join( - __dirname, - '../template/template-files/design-tokens', -); - const MODES = ['Light', 'Dark', 'Contrast'] as const; export type Mode = (typeof MODES)[number]; @@ -45,12 +33,17 @@ interface ThemeAnswers { const promptOptions: Options = { onCancel: () => { - console.log(`${red('✖')} Operation cancelled`); + console.log(`${chalk.red('✖')} Operation cancelled`); process.exit(); }, }; export async function createTokensPackage(targetDir: string) { + // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment + const DIRNAME: string = import.meta.dirname || __dirname; + const DEFAULT_FILES_PATH = path.join(DIRNAME, './template/default-files'); + const TOKEN_TEMPLATE_FILES_PATH = path.join(DIRNAME, './template/template-files/design-tokens'); + const TARGET_DIR = path.resolve(process.cwd(), targetDir); const initialPackageName = toValidPackageName(path.basename(TARGET_DIR)); @@ -82,8 +75,7 @@ export async function createTokensPackage(targetDir: string) { { title: 'Ignore', value: 'ignore', - description: - 'Keep directory as is. Files may be overwritten with new output.', + description: 'Keep directory as is. Files may be overwritten with new output.', }, { title: 'Exit', @@ -134,7 +126,7 @@ export async function createTokensPackage(targetDir: string) { ←/→/[space]: Toggle selection a: Toggle all enter/return: Complete answer -${green('◉')} Light ${dim('- This is the default mode, and cannot be disabled')}`, +${chalk.green('◉')} Light ${chalk.dim('- This is the default mode, and cannot be disabled')}`, onState: (obj: { value: Choice[] }) => { obj.value.unshift({ title: 'Light', value: 'Light', selected: true }); }, @@ -180,25 +172,19 @@ ${green('◉')} Light ${dim('- This is the default mode, and cannot be disable console.log( ` Will now create the following: - ${bold('Package name')}: ${packageName} - ${bold('Directory')}: ${TARGET_DIR} - ${bold('Tokens directory')}: ${TOKENS_TARGET_DIR} - ${bold('Themes')}: ${themes.join(', ')} - ${bold('Default theme')}: ${defaultTheme} - ${bold('Color modes')}: ${modes.join(', ')} + ${chalk.bold('Package name')}: ${packageName} + ${chalk.bold('Directory')}: ${TARGET_DIR} + ${chalk.bold('Tokens directory')}: ${TOKENS_TARGET_DIR} + ${chalk.bold('Themes')}: ${themes.join(', ')} + ${chalk.bold('Default theme')}: ${defaultTheme} + ${chalk.bold('Color modes')}: ${modes.join(', ')} `, ); if (directoryAction === 'clean') { - console.log( - bold().red(`Warning: Contents of ${TARGET_DIR} will be deleted`), - ); + console.log(chalk.bold.red(`Warning: Contents of ${TARGET_DIR} will be deleted`)); } if (directoryAction === 'ignore') { - console.log( - bold().yellow( - `Warning: Existing files in ${TARGET_DIR} may be overwritten`, - ), - ); + console.log(chalk.bold.yellow(`Warning: Existing files in ${TARGET_DIR} may be overwritten`)); } const res = await prompts( @@ -223,10 +209,7 @@ Will now create the following: recursive: true, }); if (tokensDir !== 'design-tokens') { - await fs.rename( - path.join(TARGET_DIR, 'design-tokens'), - path.join(TOKENS_TARGET_DIR), - ); + await fs.rename(path.join(TARGET_DIR, 'design-tokens'), path.join(TOKENS_TARGET_DIR)); } try { @@ -239,20 +222,14 @@ Will now create the following: for (const mode of modes.map(normalizeTokenSetName)) { // Copy the global file for the color mode await fs.cp( - path.join( - TOKEN_TEMPLATE_FILES_PATH, - `primitives/colors/${mode}/global.json`, - ), + path.join(TOKEN_TEMPLATE_FILES_PATH, `primitives/colors/${mode}/global.json`), path.join(TOKENS_TARGET_DIR, `primitives/colors/${mode}/global.json`), { recursive: true }, ); // Create theme primitives for the color mode const template = await fs.readFile( - path.join( - TOKEN_TEMPLATE_FILES_PATH, - `primitives/colors/${mode}/theme-template.json`, - ), + path.join(TOKEN_TEMPLATE_FILES_PATH, `primitives/colors/${mode}/theme-template.json`), ); await fs.writeFile( path.join(TOKENS_TARGET_DIR, `primitives/colors/${mode}/${theme}.json`), @@ -261,9 +238,7 @@ Will now create the following: } // Create main theme token set - const template = await fs.readFile( - path.join(TOKEN_TEMPLATE_FILES_PATH, `themes/theme-template.json`), - ); + const template = await fs.readFile(path.join(TOKEN_TEMPLATE_FILES_PATH, `themes/theme-template.json`)); await fs.writeFile( path.join(TOKENS_TARGET_DIR, `themes/${theme}.json`), template.toString('utf-8').replaceAll('', theme), @@ -282,29 +257,18 @@ Will now create the following: // Configure package.json file packageJsonTemplate.name = packageName; - packageJsonTemplate.main = packageJsonTemplate.main.replace( - '', - toGeneratedCssFileName(defaultTheme), - ); - await fs.writeFile( - path.join(TARGET_DIR, 'package.json'), - JSON.stringify(packageJsonTemplate, undefined, 2), - ); + packageJsonTemplate.main = packageJsonTemplate.main.replace('', toGeneratedCssFileName(defaultTheme)); + await fs.writeFile(path.join(TARGET_DIR, 'package.json'), JSON.stringify(packageJsonTemplate, undefined, 2)); const readmePath = path.join(TARGET_DIR, 'README.md'); const currentReadme = await fs.readFile(readmePath); await fs.writeFile( readmePath, - [ - currentReadme.toString('utf-8'), - nextStepsMarkdown(themes, modes, tokensDir, packageName), - ].join('\n'), + [currentReadme.toString('utf-8'), nextStepsMarkdown(themes, modes, tokensDir, packageName)].join('\n'), ); console.log('🎉 Files successfully generated!'); - console.log( - `Read about the next steps in the generated README at ${readmePath}`, - ); + console.log(`Read about the next steps in the generated README at ${readmePath}`); } function isValidThemeName(themes: string[], value: string): true | string { diff --git a/packages/create-tokens/src/generateMetadataJson.ts b/packages/cli/src/init/generateMetadataJson.ts similarity index 100% rename from packages/create-tokens/src/generateMetadataJson.ts rename to packages/cli/src/init/generateMetadataJson.ts diff --git a/packages/create-tokens/src/generateThemesJson.ts b/packages/cli/src/init/generateThemesJson.ts similarity index 100% rename from packages/create-tokens/src/generateThemesJson.ts rename to packages/cli/src/init/generateThemesJson.ts diff --git a/packages/cli/src/init/index.ts b/packages/cli/src/init/index.ts new file mode 100644 index 0000000000..4a1ed86566 --- /dev/null +++ b/packages/cli/src/init/index.ts @@ -0,0 +1,13 @@ +import { Argument, type Command } from '@commander-js/extra-typings'; + +import { createTokensPackage } from './createTokensPackage'; + +export function makeInitCommand(command: Command) { + return command + .showHelpAfterError() + .description('create an initial token structure for Designsystemet') + .addArgument(new Argument('', 'Target directory for the generated code')) + .action(async (targetDir) => { + await createTokensPackage(targetDir); + }); +} diff --git a/packages/create-tokens/src/nextStepsMarkdown.ts b/packages/cli/src/init/nextStepsMarkdown.ts similarity index 100% rename from packages/create-tokens/src/nextStepsMarkdown.ts rename to packages/cli/src/init/nextStepsMarkdown.ts diff --git a/packages/create-tokens/template/default-files/.gitignore b/packages/cli/src/init/template/default-files/.gitignore similarity index 100% rename from packages/create-tokens/template/default-files/.gitignore rename to packages/cli/src/init/template/default-files/.gitignore diff --git a/packages/create-tokens/template/default-files/README.md b/packages/cli/src/init/template/default-files/README.md similarity index 100% rename from packages/create-tokens/template/default-files/README.md rename to packages/cli/src/init/template/default-files/README.md diff --git a/packages/create-tokens/template/default-files/design-tokens/README.md b/packages/cli/src/init/template/default-files/design-tokens/README.md similarity index 100% rename from packages/create-tokens/template/default-files/design-tokens/README.md rename to packages/cli/src/init/template/default-files/design-tokens/README.md diff --git a/packages/create-tokens/template/default-files/design-tokens/primitives/globals.json b/packages/cli/src/init/template/default-files/design-tokens/primitives/globals.json similarity index 100% rename from packages/create-tokens/template/default-files/design-tokens/primitives/globals.json rename to packages/cli/src/init/template/default-files/design-tokens/primitives/globals.json diff --git a/packages/create-tokens/template/default-files/design-tokens/primitives/typography/default.json b/packages/cli/src/init/template/default-files/design-tokens/primitives/typography/default.json similarity index 100% rename from packages/create-tokens/template/default-files/design-tokens/primitives/typography/default.json rename to packages/cli/src/init/template/default-files/design-tokens/primitives/typography/default.json diff --git a/packages/create-tokens/template/default-files/design-tokens/semantic/color.json b/packages/cli/src/init/template/default-files/design-tokens/semantic/color.json similarity index 100% rename from packages/create-tokens/template/default-files/design-tokens/semantic/color.json rename to packages/cli/src/init/template/default-files/design-tokens/semantic/color.json diff --git a/packages/create-tokens/template/default-files/design-tokens/semantic/style.json b/packages/cli/src/init/template/default-files/design-tokens/semantic/style.json similarity index 100% rename from packages/create-tokens/template/default-files/design-tokens/semantic/style.json rename to packages/cli/src/init/template/default-files/design-tokens/semantic/style.json diff --git a/packages/create-tokens/template/prettier.config.mjs b/packages/cli/src/init/template/prettier.config.mjs similarity index 100% rename from packages/create-tokens/template/prettier.config.mjs rename to packages/cli/src/init/template/prettier.config.mjs diff --git a/packages/create-tokens/template/template-files/design-tokens/primitives/colors/contrast/global.json b/packages/cli/src/init/template/template-files/design-tokens/primitives/colors/contrast/global.json similarity index 100% rename from packages/create-tokens/template/template-files/design-tokens/primitives/colors/contrast/global.json rename to packages/cli/src/init/template/template-files/design-tokens/primitives/colors/contrast/global.json diff --git a/packages/create-tokens/template/template-files/design-tokens/primitives/colors/contrast/theme-template.json b/packages/cli/src/init/template/template-files/design-tokens/primitives/colors/contrast/theme-template.json similarity index 100% rename from packages/create-tokens/template/template-files/design-tokens/primitives/colors/contrast/theme-template.json rename to packages/cli/src/init/template/template-files/design-tokens/primitives/colors/contrast/theme-template.json diff --git a/packages/create-tokens/template/template-files/design-tokens/primitives/colors/dark/global.json b/packages/cli/src/init/template/template-files/design-tokens/primitives/colors/dark/global.json similarity index 100% rename from packages/create-tokens/template/template-files/design-tokens/primitives/colors/dark/global.json rename to packages/cli/src/init/template/template-files/design-tokens/primitives/colors/dark/global.json diff --git a/packages/create-tokens/template/template-files/design-tokens/primitives/colors/dark/theme-template.json b/packages/cli/src/init/template/template-files/design-tokens/primitives/colors/dark/theme-template.json similarity index 100% rename from packages/create-tokens/template/template-files/design-tokens/primitives/colors/dark/theme-template.json rename to packages/cli/src/init/template/template-files/design-tokens/primitives/colors/dark/theme-template.json diff --git a/packages/create-tokens/template/template-files/design-tokens/primitives/colors/light/global.json b/packages/cli/src/init/template/template-files/design-tokens/primitives/colors/light/global.json similarity index 100% rename from packages/create-tokens/template/template-files/design-tokens/primitives/colors/light/global.json rename to packages/cli/src/init/template/template-files/design-tokens/primitives/colors/light/global.json diff --git a/packages/create-tokens/template/template-files/design-tokens/primitives/colors/light/theme-template.json b/packages/cli/src/init/template/template-files/design-tokens/primitives/colors/light/theme-template.json similarity index 100% rename from packages/create-tokens/template/template-files/design-tokens/primitives/colors/light/theme-template.json rename to packages/cli/src/init/template/template-files/design-tokens/primitives/colors/light/theme-template.json diff --git a/packages/create-tokens/template/template-files/design-tokens/themes/theme-template.json b/packages/cli/src/init/template/template-files/design-tokens/themes/theme-template.json similarity index 100% rename from packages/create-tokens/template/template-files/design-tokens/themes/theme-template.json rename to packages/cli/src/init/template/template-files/design-tokens/themes/theme-template.json diff --git a/packages/create-tokens/template/template-files/package.json b/packages/cli/src/init/template/template-files/package.json similarity index 100% rename from packages/create-tokens/template/template-files/package.json rename to packages/cli/src/init/template/template-files/package.json diff --git a/packages/create-tokens/src/utils.ts b/packages/cli/src/init/utils.ts similarity index 100% rename from packages/create-tokens/src/utils.ts rename to packages/cli/src/init/utils.ts diff --git a/packages/create-tokens/index.js b/packages/create-tokens/index.js index 741b50aa1e..db70185c12 100755 --- a/packages/create-tokens/index.js +++ b/packages/create-tokens/index.js @@ -2,4 +2,4 @@ import { require } from 'tsx/cjs/api'; -require('./src/bin/create-tokens.ts', import.meta.url); +require('./src/create-tokens.ts', import.meta.url); diff --git a/packages/create-tokens/package.json b/packages/create-tokens/package.json index cb309828db..2fc62e1e2e 100644 --- a/packages/create-tokens/package.json +++ b/packages/create-tokens/package.json @@ -20,14 +20,7 @@ }, "dependencies": { "@commander-js/extra-typings": "^12.0.1", - "change-case": "^5.3.0", "commander": "^12.0.0", - "kleur": "^3.0.3", - "prompts": "^2.4.0", "tsx": "^4.11.2" - }, - "devDependencies": { - "@tokens-studio/types": "^0.4.0", - "@types/prompts": "^2.4.9" } } diff --git a/packages/create-tokens/src/bin/create-tokens.ts b/packages/create-tokens/src/bin/create-tokens.ts deleted file mode 100644 index 1719b62d03..0000000000 --- a/packages/create-tokens/src/bin/create-tokens.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { Argument, program } from '@commander-js/extra-typings'; - -import { createTokensPackage } from '../createTokensPackage'; - -program - .name('npm create @digdir/tokens') - .description( - 'CLI tool to create an initial token structure for Designsystemet', - ); - -program - .addArgument( - new Argument('', 'Target directory for the generated code'), - ) - .action(async (targetDir) => { - await createTokensPackage(targetDir); - }); - -program.showHelpAfterError(); - -void program.parseAsync(process.argv); diff --git a/packages/create-tokens/src/create-tokens.ts b/packages/create-tokens/src/create-tokens.ts new file mode 100644 index 0000000000..6a846132bd --- /dev/null +++ b/packages/create-tokens/src/create-tokens.ts @@ -0,0 +1,8 @@ +import { program } from '@commander-js/extra-typings'; + +import { makeInitCommand } from '../../cli/src/init'; + +program.name('npm create @digdir/tokens'); +makeInitCommand(program); + +void program.parseAsync(process.argv); diff --git a/packages/create-tokens/tsconfig.json b/packages/create-tokens/tsconfig.json index 04f45c2126..4a72d22da5 100644 --- a/packages/create-tokens/tsconfig.json +++ b/packages/create-tokens/tsconfig.json @@ -4,5 +4,5 @@ "composite": false }, "rootDir": "./src", - "include": ["src", "template"] + "include": ["src"] } diff --git a/yarn.lock b/yarn.lock index c5f87ccfe7..57aa96335b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2285,12 +2285,7 @@ __metadata: resolution: "@digdir/create-tokens@workspace:packages/create-tokens" dependencies: "@commander-js/extra-typings": "npm:^12.0.1" - "@tokens-studio/types": "npm:^0.4.0" - "@types/prompts": "npm:^2.4.9" - change-case: "npm:^5.3.0" commander: "npm:^12.0.0" - kleur: "npm:^3.0.3" - prompts: "npm:^2.4.0" tsx: "npm:^4.11.2" bin: create-tokens: index.js @@ -2380,8 +2375,10 @@ __metadata: "@types/jscodeshift": "npm:^0.11.11" "@types/node": "npm:^20.12.7" "@types/object-hash": "npm:^3" + "@types/prompts": "npm:^2.4.9" "@types/ramda": "npm:^0.29.9" chalk: "npm:^5.3.0" + change-case: "npm:^5.3.0" chroma-js: "npm:^2.4.2" commander: "npm:^12.0.0" fast-glob: "npm:^3.3.2" @@ -2390,6 +2387,7 @@ __metadata: jscodeshift: "npm:^0.15.2" object-hash: "npm:^3.0.0" postcss: "npm:^8.4.38" + prompts: "npm:^2.4.0" ramda: "npm:^0.29.1" rimraf: "npm:^5.0.5" style-dictionary: "npm:^4.0.0-prerelease.34"