theme generator arguments

Author: PatrikMatiasko

package.json

@@ -28,11 +28,9 @@
     "build-storybook": "storybook build",
     "deploy-storybook": "storybook-to-ghpages --dry-run",
     "icons:create": "npx @svgr/cli --config-file ./config/.svgrrc.js  -d ./src/components/Atomic/Icon/components ./src/components/Atomic/Icon/assets",
-    ":generate:theme:raw": "NODE_ENV=production BABEL_ENV=production babel ./src/components/Atomic/_theme/ -d build/lib/theme --extensions .ts,.js,.tsx,.jsx,",
-    ":generate:theme:colors": "NODE_ENV=production BABEL_ENV=production babel ./src/components/Atomic/_utils/colors.ts --out-file build/lib/_utils/colors.js --extensions .ts,.js,.tsx,.jsx,",
     ":generate:theme:build": "node ./scripts/build.theme.js",
     ":generate:theme:clean": "rimraf ./build/lib",
-    ":generate:theme": "npm-run-all :generate:theme:raw :generate:theme:colors :generate:theme:build :generate:theme:clean"
+    ":generate:theme": "npm-run-all :generate:theme:build :generate:theme:clean"
   },
   "dependencies": {
     "@babel/core": "^7.22.15",

scripts/build.theme.js

@@ -1,37 +1,101 @@
 const fs = require('fs-extra')
 const path = require('path')
-const themes = ['plgd']
+const yargs = require('yargs')
+const { promisify } = require('util')
+const childProcess = require('child_process')
 
-if (process.env.NODE_ENV !== 'production') {
-    themes.push('siemens')
-}
+const exec = promisify(childProcess.exec)
 
-const packagePath = process.cwd()
-const buildPath = path.join(packagePath, './build')
+async function run(argv) {
+    const { themes, verbose } = argv
 
-const generalTheme = {
-    defaultTheme: 'plgd',
-    themes: [],
-}
+    const env = {
+        NODE_ENV: 'production',
+        BABEL_ENV: 'production',
+    }
+
+    const extensions = '--extensions .ts,.js,.tsx,.jsx'
+    const cwd = path.resolve(__dirname, '../')
+
+    // build theme babel
+    const commandThemeBabel = `babel ./src/components/Atomic/_theme/ -d build/lib/theme ${extensions}`
+    const { stderr, stdout } = await exec(commandThemeBabel, {
+        env: { ...process.env, ...env },
+        cwd,
+    })
+
+    if (stderr) {
+        throw new Error(`'${commandThemeBabel}' failed with \n${stderr}`)
+    }
+
+    if (verbose && stdout) {
+        console.log(stdout)
+    }
+
+    // build theme color
+    const commandThemeColors = `babel ./src/components/Atomic/_utils/colors.ts --out-file build/lib/_utils/colors.js ${extensions}`
+    const { stderrColor, stdoutColor } = await exec(commandThemeColors, {
+        env: { ...process.env, ...env },
+        cwd,
+    })
 
-const buildThemePath = path.join(buildPath, 'theme')
-const publicThemePath = path.join(buildPath, '..', '..', '..', 'public', 'theme')
+    if (stderrColor) {
+        throw new Error(`'${commandThemeColors}' failed with \n${stderrColor}`)
+    }
 
-fs.ensureDirSync(buildThemePath)
-fs.ensureDirSync(publicThemePath)
+    if (verbose && stdoutColor) {
+        console.log(stdoutColor)
+    }
 
-themes.forEach((theme) => {
-    const buildThemeSourcePath = path.join(buildPath, 'lib', 'theme', theme)
-    const buildColorsSourcePath = path.join(buildPath, 'lib', '_utils', 'colors.js')
+    const buildPath = path.join(cwd, './build')
 
-    const d = require(buildThemeSourcePath)
-    const colors = require(buildColorsSourcePath)
+    const generalTheme = {
+        defaultTheme: themes[0],
+        themes: [],
+    }
 
-    fs.writeJsonSync(path.join(buildThemePath, `${theme}.json`), { ...d.default, colorPalette: colors.uiColorMap[theme] })
+    const buildThemePath = path.join(buildPath, 'theme')
+    const publicThemePath = path.join(buildPath, '..', '..', '..', 'public', 'theme')
 
-    generalTheme.themes.push({
-        [theme]: { ...d.default, colorPalette: colors.uiColorMap[theme] },
+    fs.ensureDirSync(buildThemePath)
+    fs.ensureDirSync(publicThemePath)
+
+    themes.forEach((theme) => {
+        const buildThemeSourcePath = path.join(buildPath, 'lib', 'theme', theme)
+        const buildColorsSourcePath = path.join(buildPath, 'lib', '_utils', 'colors.js')
+
+        const d = require(buildThemeSourcePath)
+        const colors = require(buildColorsSourcePath)
+
+        fs.writeJsonSync(path.join(buildThemePath, `${theme}.json`), { ...d.default, colorPalette: colors.uiColorMap[theme] })
+
+        generalTheme.themes.push({
+            [theme]: { ...d.default, colorPalette: colors.uiColorMap[theme] },
+        })
     })
-})
 
-fs.writeJsonSync(path.join(publicThemePath, `theme.json`), generalTheme)
+    fs.writeJsonSync(path.join(publicThemePath, `theme.json`), generalTheme)
+
+    if (verbose) {
+        console.log('Theme generated!')
+    }
+}
+
+yargs
+    .command({
+        command: '$0',
+        description: 'build theme file',
+        builder: (command) =>
+            command
+                .option('themes', {
+                    description: 'Themes array of names.',
+                    type: 'array',
+                    default: ['plgd'],
+                })
+                .option('verbose', { type: 'boolean', default: true }),
+        handler: run,
+    })
+    .help()
+    .strict(true)
+    .version(false)
+    .parse()

src/components/Atomic/_theme/index.ts

@@ -3,6 +3,8 @@ import lGet from 'lodash/get'
 
 export type ThemeType = Partial<typeof plgd>
 
+export const defaultTheme = 'plgd'
+
 export function get(from: object, key: string, def?: any): any {
     const g = lGet(from, `colors.${key}`, def)
     return g === '' ? def : g