Fix/generators scripts (#574)

* fix: using cjs files for generator button and input styles scripts

* refactor: updated @atls-ui-generators/icons package

destructured svgr logic to utils
updated @svgr/core version to 8.1.0
updated icon template for esm syntax

* chore: install dependencies

.yarnrc.yml

@@ -9,6 +9,18 @@ enableGlobalCache: true
 globalFolder: ../.yarn/berry
 
 packageExtensions:
+  '@svgr/core@*':
+    dependencies:
+      'prettier': '*'
+      'svgo': '*'
+      '@types/babel__core': '*'
+      '@svgr/plugin-jsx': '*'
+      '@svgr/plugin-svgo': '*'
+      '@svgr/plugin-prettier': '*'
+  '@svgr/babel-plugin-transform-svg-component@*':
+    dependencies:
+      '@babel/template': '*'
+      '@types/babel__template': '*'
   '@types/react@*':
     dependencies:
       scheduler: '0.20.2'

generators/button/package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "main": "./src/index.ts",
   "bin": {
-    "generate-styles": "dist/generator.js"
+    "generate-styles": "dist/generator.cjs"
   },
   "files": [
     "dist"
@@ -21,7 +21,7 @@
     "@atls/prettier-plugin": "0.0.7",
     "@babel/standalone": "7.22.20",
     "camelcase": "6.3.0",
-    "commander": "9.5.0",
+    "commander": "12.1.0",
     "prettier": "2.8.8"
   },
   "devDependencies": {

generators/button/src/generator.ts → generators/button/src/generator.cts

@@ -4,13 +4,11 @@ import { readFileSync }                   from 'fs'
 import { join }                           from 'path'
 import assert                             from 'assert'
 
-import { ButtonAppearanceStyleGenerator } from './style-generators/index.js'
-
 const command = new Command()
   .name('Button styles generator')
   .argument('path <string>', 'Path to save the styles')
   .option('-t, --theme path <string>', 'Path to colors file')
-  .action((path: string, options: Record<string, string>) => {
+  .action(async (path: string, options: Record<string, string>) => {
     assert.ok(options.theme, 'Theme colors path is required')
 
     const colorsFile = readFileSync(join(process.cwd(), options.theme)).toString('utf-8')
@@ -21,6 +19,8 @@ const command = new Command()
     // eslint-disable-next-line no-eval, security/detect-eval-with-expression
     const colors: Record<string, any> = eval(code)
 
+    const { ButtonAppearanceStyleGenerator } = await import('./style-generators/index.js')
+
     const generator = new ButtonAppearanceStyleGenerator(colors)
 
     const genPath = join(process.cwd(), path)

generators/icons/package.json

@@ -19,7 +19,7 @@
     "@atls/config-prettier": "0.0.5",
     "@atls/prettier-plugin": "0.0.7",
     "@babel/standalone": "7.22.20",
-    "@svgr/core": "5.5.0",
+    "@svgr/core": "8.1.0",
     "camelcase": "6.3.0",
     "commander": "9.5.0",
     "fs-extra-promise": "1.0.1",
@@ -28,6 +28,7 @@
     "prettier": "2.8.8"
   },
   "devDependencies": {
+    "@types/babel__core": "7.20.5",
     "@types/babel__standalone": "7.1.7",
     "@types/fs-extra-promise": "1.0.12",
     "@types/prettier": "2.7.3"

generators/icons/src/generator.ts

@@ -7,7 +7,7 @@ import { mkdirSync }    from 'fs'
 import { join }         from 'path'
 import assert           from 'assert'
 
-import { build }        from './svgr'
+import { svgrBuild }    from './utils'
 
 const command = new Command()
   .name('Icons generator')
@@ -41,7 +41,7 @@ const command = new Command()
       replacements = eval(code)
     }
 
-    await build(iconsPath, genPath, replacements)
+    await svgrBuild(iconsPath, genPath, replacements)
 
     // eslint-disable-next-line no-console
     console.log(`Generated into ${genPath}`)

generators/icons/src/get-color-replacement/get-color-replacement.interfaces.ts

@@ -0,0 +1,6 @@
+export interface GetColorReplacementOptions {
+  themePaths?: Array<string>
+  color: string
+}
+
+export type GetColorReplacement = (options: GetColorReplacementOptions) => Record<string, string>

generators/icons/src/get-color-replacement/get-color-replacement.util.ts

@@ -0,0 +1,8 @@
+import type { GetColorReplacement } from './get-color-replacement.interfaces'
+
+export const getColorReplacement: GetColorReplacement = (options) => ({
+  [options.color]: `{(props.color && vars.colors${(options.themePaths || []).reduce(
+    (str, prop) => `${str}.${prop}`,
+    ''
+  )}[props.color]) || props.color || "${options.color}"}`,
+})

generators/icons/src/get-color-replacement/index.ts

@@ -0,0 +1 @@
+export * from './get-color-replacement.util'

generators/icons/src/icons.interfaces.ts

@@ -0,0 +1,17 @@
+import type { Config } from '@svgr/core'
+
+export interface Icon {
+  name: string
+  source: string
+  fileName: string
+}
+
+export interface Source {
+  name: string
+  code: string
+  withReplacement: boolean
+}
+
+export type Replacements = Record<string, Record<string, string>>
+
+export type CreateSvgrTemplate = (withReplacement: boolean) => Config['template']

generators/icons/src/index.ts

@@ -1,2 +1,2 @@
-export * from './get-color-replacement.util'
-export * from './svgr'
+export * from './get-color-replacement'
+export * from './utils'

generators/icons/src/get-color-replacement.test.ts → generators/icons/src/tests/get-color-replacement.test.ts

@@ -1,4 +1,4 @@
-import { getColorReplacement } from './get-color-replacement.util'
+import { getColorReplacement } from '../get-color-replacement'
 
 describe('generators', () => {
   describe('icons', () => {
@@ -8,7 +8,7 @@ describe('generators', () => {
 
         expect(replacement).toEqual(
           expect.objectContaining({
-            '#000000': '{(vars.colors[props.color || 0] || props.color) || "#000000"}',
+            '#000000': '{(props.color && vars.colors[props.color]) || props.color || "#000000"}',
           })
         )
       })
@@ -18,7 +18,8 @@ describe('generators', () => {
 
         expect(replacement).toEqual(
           expect.objectContaining({
-            '#000000': '{(vars.colors.icons[props.color || 0] || props.color) || "#000000"}',
+            '#000000':
+              '{(props.color && vars.colors.icons[props.color]) || props.color || "#000000"}',
           })
         )
       })
@@ -32,7 +33,7 @@ describe('generators', () => {
         expect(replacement).toEqual(
           expect.objectContaining({
             '#000000':
-              '{(vars.colors.icons.primary.some[props.color || 0] || props.color) || "#000000"}',
+              '{(props.color && vars.colors.icons.primary.some[props.color]) || props.color || "#000000"}',
           })
         )
       })

generators/icons/src/utils/compile-icons.util.ts

@@ -0,0 +1,42 @@
+import type { Icon }               from '../icons.interfaces'
+import type { Replacements }       from '../icons.interfaces'
+import type { Source }             from '../icons.interfaces'
+import type { CreateSvgrTemplate } from '../icons.interfaces'
+
+import { transform }               from '@svgr/core'
+
+const createSvgrTemplate: CreateSvgrTemplate = (withReplacement) =>
+  ({ jsx, componentName }, { tpl }) => tpl`
+  import type { IconProps } from '../icons.interfaces.js'
+
+  import React from 'react'
+  import { memo } from 'react'
+
+  ${withReplacement ? `import { vars } from '@atls-ui-admin/theme'` : ''}
+
+  export const ${componentName} = memo((props: IconProps) => (
+    ${jsx}
+  ))
+`
+
+export const compileIcons = async (
+  icons: Array<Icon>,
+  replacements: Replacements
+): Promise<Array<Source>> =>
+  Promise.all(
+    icons.map(async (icon) => ({
+      name: icon.fileName,
+      code: await transform(
+        icon.source.replace(/mask0/g, icon.name),
+        {
+          icon: true,
+          typescript: true,
+          template: createSvgrTemplate(Boolean(replacements[icon.name])),
+          plugins: ['@svgr/plugin-svgo', '@svgr/plugin-jsx', '@svgr/plugin-prettier'],
+          replaceAttrValues: replacements[icon.name] || {},
+        },
+        { componentName: icon.name.replace('50+', 'FiftyPlus') }
+      ),
+      withReplacement: Boolean(replacements[icon.name]),
+    }))
+  )

generators/icons/src/utils/create-files.util.ts

@@ -0,0 +1,39 @@
+import type { Options }    from 'prettier'
+
+import type { Source }     from '../icons.interfaces'
+
+import * as prettierPlugin from '@atls/prettier-plugin'
+import prettierConfig      from '@atls/config-prettier'
+import fs                  from 'fs-extra-promise'
+import path                from 'path'
+import parserBabel         from 'prettier/parser-babel'
+import parserTypescript    from 'prettier/parser-typescript'
+import prettier            from 'prettier/standalone'
+
+const writeSourceFile = async (source: Source, targetDir: string): Promise<void> => {
+  const filename = path.join(targetDir, `${source.name}.tsx`)
+  const config = prettierConfig as Options
+
+  const data = prettier.format(source.code, {
+    ...config,
+    filepath: path.join(targetDir, `${source.name}.tsx`),
+    plugins: [parserTypescript, parserBabel, prettierPlugin],
+  })
+
+  await fs.writeFileAsync(filename, data)
+}
+
+const writeIndexFile = async (sources: Array<Source>, targetDir: string): Promise<void> => {
+  const filename = path.join(targetDir, 'index.ts')
+  const data = `${sources.map((source) => `export * from './${source.name}.js'`).join('\n')}\n`
+
+  await fs.writeFileAsync(filename, data)
+}
+
+export const createFiles = async (sources: Array<Source>, targetDir: string): Promise<void> => {
+  await fs.ensureDir(targetDir)
+
+  await Promise.all(sources.map(async (source) => writeSourceFile(source, targetDir)))
+
+  await writeIndexFile(sources, targetDir)
+}

generators/icons/src/utils/index.ts

@@ -0,0 +1 @@
+export * from './svgr-build.util'