@charcoal-ui/icons-cli 4.13.0 → 4.14.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/icons-cli",
-  "version": "4.13.0",
+  "version": "4.14.0-beta.0",
   "license": "Apache-2.0",
   "bin": "./dist/index.js",
   "devDependencies": {
@@ -46,9 +46,12 @@
   "gitHead": "e1ece2e43901ae667afdd5c178040607d939dcd5",
   "scripts": {
     "build": "FORCE_COLOR=1 tsup-node",
-    "build:react": "pnpm svgr ../icon-files/v2/svg/ --out-dir ../icons/src/react/v2 --typescript --ref --no-index --no-svgo &&  OUTPUT_ROOT_DIR=../icons/src/react/v2 pnpm tsx src/v2/transformReact.ts",
-    "build:css": "OUTPUT_ROOT_DIR=../icons/css/v2 pnpm tsx src/v2/transformCSS.ts",
-    "build:uri": "OUTPUT_ROOT_DIR=../icon-files/v2-datauri pnpm tsx src/v2/transformDataUri.ts",
+    "build:react": "pnpm svgr ../icon-files/v2/svg/ --out-dir ../icons/src/react/v2 --typescript --ref --no-index --no-svgo &&  OUTPUT_ROOT_DIR=../icons/src/react/v2 VERSION=v2 pnpm tsx src/v2/transformReact.ts",
+    "build:react-v1": "pnpm svgr ../icon-files/svg/ --out-dir ../icons/src/react/v1 --typescript --ref --no-index --no-svgo &&  OUTPUT_ROOT_DIR=../icons/src/react/v1 VERSION=v1 pnpm tsx src/v2/transformReact.ts",
+    "build:css": "VERSION=v2 SOURCE_ROOT_DIR=../../../icon-files/v2/svg/ OUTPUT_ROOT_DIR=../../../icons/css/v2 pnpm tsx src/v2/transformCSS.ts",
+    "build:css-v1": "VERSION=v1 SOURCE_ROOT_DIR=../../../icon-files/svg/ OUTPUT_ROOT_DIR=../icons/css/v1 pnpm tsx src/v2/transformCSS.ts",
+    "build:uri": "SOURCE_ROOT_DIR=../../../icon-files/v2/svg/ OUTPUT_ROOT_DIR=../icon-files/v2-datauri pnpm tsx src/v2/transformDataUri.ts",
+    "build:uri-v1": "SOURCE_ROOT_DIR=../../../icon-files/svg/ OUTPUT_ROOT_DIR=../icon-files/v1-datauri pnpm tsx src/v2/transformDataUri.ts",
     "typecheck": "tsc --project tsconfig.build.json --pretty --noEmit",
     "clean": "rimraf dist .tsbuildinfo",
     "cli:icons": "./dist/index.js",

package/src/v2/transformCSS.ts

@@ -4,28 +4,58 @@ import { readFile, writeFile, ensureDir } from 'fs-extra'
 import path from 'path'
 import { escape } from 'querystring'
 
-async function main() {
-  mustBeDefined(process.env.OUTPUT_ROOT_DIR, 'OUTPUT_ROOT_DIR')
-  const outDir = process.env.OUTPUT_ROOT_DIR
-  const inputDir = path.join(__dirname, '../../../icon-files/v2/svg')
-  await ensureDir(outDir)
-  const fileNames = await glob('**/*.svg', { cwd: inputDir })
+async function transformV2(filePath: string, fileName: string) {
+  const content = await readFile(filePath, 'utf-8')
+  const [size, variant, name] = fileName.split('/')
+  const cssName = [
+    'charcoal-icon',
+    name.toLowerCase().replace('.svg', '').replaceAll('.', '-'),
+    ...(variant === 'regular' ? [] : [variant]),
+    ...(size === '24' ? [] : [size]),
+  ].join('-')
+  const css = content.includes('<def')
+    ? `
+.${cssName} {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  background: url('data:image/svg+xml;utf8,${escape(content).replace(
+    "'",
+    "\\'"
+  )}');
+  aspect-ratio: 1/1;
+}`
+    : `
+.${cssName} {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  mask-image: url('data:image/svg+xml;utf8,${escape(content).replace(
+    "'",
+    "\\'"
+  )}');
+  mask-size: 100% 100%;
+  background: currentColor;
+  aspect-ratio: 1/1;
+}
+`
+  return {
+    filePath,
+    css,
+    cssName,
+  }
+}
 
-  let classNames: string[] = []
-  const filesWithContent = await Promise.all(
-    fileNames.map(async (fileName) => {
-      const filePath = path.join(inputDir, fileName)
-      const content = await readFile(filePath, 'utf-8')
-      const [size, variant, name] = fileName.split('/')
-      const cssName = [
-        'charcoal-icon',
-        name.replace('.svg', '').replaceAll('.', '-'),
-        ...(variant === 'regular' ? [] : [variant]),
-        ...(size === '24' ? [] : [size]),
-      ].join('-')
-      classNames.push(cssName)
-      const css = content.includes('<def')
-        ? `
+async function transformV1(filePath: string, fileName: string) {
+  const content = await readFile(filePath, 'utf-8')
+  const [size, name] = fileName.split('/')
+  const cssName = [
+    'charcoal-icon-v1',
+    name.toLowerCase().replace('.svg', '').replaceAll('.', '-'),
+    ...(size === '24' ? [] : [size]),
+  ].join('-')
+  const css = content.includes('<def')
+    ? `
 .${cssName} {
   display: inline-block;
   width: 1em;
@@ -36,7 +66,7 @@ async function main() {
   )}');
   aspect-ratio: 1/1;
 }`
-        : `
+    : `
 .${cssName} {
   display: inline-block;
   width: 1em;
@@ -50,12 +80,44 @@ async function main() {
   aspect-ratio: 1/1;
 }
 `
+  return {
+    filePath,
+    css,
+    cssName,
+  }
+}
+
+async function main() {
+  mustBeDefined(process.env.VERSION, 'VERSION')
+  const version = process.env.VERSION
+
+  mustBeDefined(process.env.SOURCE_ROOT_DIR, 'SOURCE_ROOT_DIR')
+  const sourceDir = process.env.SOURCE_ROOT_DIR
+  const inputDir = path.join(__dirname, sourceDir)
 
-      return {
-        filePath,
-        css,
-        cssName,
+  mustBeDefined(process.env.OUTPUT_ROOT_DIR, 'OUTPUT_ROOT_DIR')
+  const outDir = process.env.OUTPUT_ROOT_DIR
+
+  await ensureDir(outDir)
+  const fileNames = await glob('**/*.svg', { cwd: inputDir })
+
+  let classNames: string[] = []
+  const filesWithContent = await Promise.all(
+    fileNames.map(async (fileName) => {
+      const filePath = path.join(inputDir, fileName)
+      if (version == 'v2') {
+        const value = await transformV2(filePath, fileName)
+        classNames.push(value.cssName)
+        return value
       }
+
+      if (version == 'v1') {
+        const value = await transformV1(filePath, fileName)
+        classNames.push(value.cssName)
+        return value
+      }
+
+      throw new Error('VERSION received an unexpected value')
     })
   )
 
@@ -103,7 +165,7 @@ ${classNames
   await writeFile(
     path.join(outDir, 'index.story.tsx'),
     `export default {
-  title: 'Icons/v2/css',
+  title: 'Icons/${version}/css',
   parameters: {
     storyshots: {
       disable: true,

package/src/v2/transformDataUri.ts

@@ -5,9 +5,13 @@ import { mustBeDefined } from '../utils'
 import { escape } from 'querystring'
 
 async function main() {
+  mustBeDefined(process.env.SOURCE_ROOT_DIR, 'SOURCE_ROOT_DIR')
+  const sourceDir = process.env.SOURCE_ROOT_DIR
+  const inputDir = path.join(__dirname, sourceDir)
+
   mustBeDefined(process.env.OUTPUT_ROOT_DIR, 'OUTPUT_ROOT_DIR')
   const outDir = process.env.OUTPUT_ROOT_DIR
-  const inputDir = path.join(__dirname, '../../../icon-files/v2/svg')
+
   await ensureDir(outDir)
   const fileNames = await glob('**/*.svg', { cwd: inputDir })
   const dataUris = await Promise.all(

package/src/v2/transformReact.ts

@@ -7,7 +7,9 @@ import path from 'path'
 
 async function main() {
   mustBeDefined(process.env.OUTPUT_ROOT_DIR, 'OUTPUT_ROOT_DIR')
+  mustBeDefined(process.env.VERSION, 'VERSION')
   const workDir = process.env.OUTPUT_ROOT_DIR
+  const version = process.env.VERSION
 
   const fileNames = await glob('*/**/*.tsx', { cwd: workDir })
   const filesWithContent = await Promise.all(
@@ -29,10 +31,12 @@ async function main() {
   )
   const icons = Object.entries(catalog)
 
-  const iconsPair = icons.map(([iconName, iconPath]) => [
-    iconName,
-    './' + iconPath.replace('.tsx', ''),
-  ])
+  const iconsPair = icons
+    .map(([iconName, iconPath]) => [
+      iconName,
+      './' + iconPath.replace('.tsx', ''),
+    ])
+    .sort((a, b) => (a[1] > b[1] ? 1 : a[1] < b[1] ? -1 : 0))
 
   await writeFile(
     path.join(workDir, 'index.tsx'),
@@ -49,7 +53,7 @@ async function main() {
 import { createGlobalStyle } from 'styled-components'
 
 export default {
-  title: 'Icons/v2/react',
+  title: 'Icons/${version}/react',
   parameters: {
     storyshots: {
       disable: true,