@leafygreen-ui/icon 13.2.1 → 13.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafygreen-ui/icon",
-  "version": "13.2.1",
+  "version": "13.3.0",
   "description": "LeafyGreen UI Kit Icons",
   "main": "./dist/index.js",
   "module": "./dist/esm/index.js",
@@ -16,19 +16,19 @@
   "publishConfig": {
     "access": "public"
   },
+  "dependencies": {
+    "lodash": "^4.17.21",
+    "@leafygreen-ui/emotion": "^4.1.1"
+  },
   "devDependencies": {
     "@svgr/core": "^5.3.1",
-    "@types/meow": "^6.0.0",
     "@types/xml2json": "^0.11.0",
-    "meow": "^6.1.0",
+    "commander": "^11.0.0",
     "ts-node": "^10.9.2",
     "xml2json": "^0.12.0",
-    "@leafygreen-ui/lib": "^14.2.0",
-    "@leafygreen-ui/palette": "^4.1.4"
-  },
-  "dependencies": {
-    "lodash": "^4.17.21",
-    "@leafygreen-ui/emotion": "^4.1.0"
+    "@leafygreen-ui/palette": "^4.1.4",
+    "@lg-tools/lint": "^2.1.1",
+    "@leafygreen-ui/lib": "^14.2.0"
   },
   "gitHead": "dd71a2d404218ccec2e657df9c0263dc1c15b9e0",
   "homepage": "https://github.com/mongodb/leafygreen-ui/tree/main/packages/icon",
@@ -40,7 +40,7 @@
     "url": "https://jira.mongodb.org/projects/PD/summary"
   },
   "scripts": {
-    "prebuild": "ts-node ./scripts/prebuild.ts --files",
+    "prebuild": "ts-node ./scripts/prebuild.ts",
     "build": "lg build-package",
     "tsc": "lg build-ts",
     "docs": "lg build-tsdoc"

package/scripts/checksum.ts

@@ -0,0 +1,19 @@
+import { createHash } from 'crypto';
+import fs from 'fs';
+import path from 'path';
+
+export function getChecksum(svgContent: string, processedSVGR: string): string {
+  const scriptPath = path.resolve(__dirname, './prebuild.ts');
+  const scriptContent = fs.readFileSync(scriptPath, 'utf8');
+  const checksumContent = fs.readFileSync(__filename, 'utf8');
+
+  // Calculate the checksum
+  const checksum = createHash('md5')
+    .update(checksumContent)
+    .update(scriptContent)
+    .update(svgContent)
+    .update(processedSVGR)
+    .digest('hex');
+
+  return checksum;
+}

package/scripts/indexTemplate.ts

@@ -0,0 +1,31 @@
+import { FileObject } from './prebuild.types';
+
+export async function indexTemplate(svgFiles: Array<FileObject>) {
+  const imports = svgFiles
+    .map(({ name }) => `import ${name} from './${name}.svg';`)
+    .join('\n');
+
+  const _glyphs = `{
+    ${svgFiles.map(({ name }) => `${name}`).join(',\n')}
+  }`;
+
+  return `
+    import { createGlyphComponent } from '../createGlyphComponent';
+    import { LGGlyph } from '../types';
+
+    // Glyphs
+    ${imports}
+
+    const _glyphs = ${_glyphs} as const;
+
+    export type GlyphName = keyof typeof _glyphs;
+    
+    const glyphKeys = Object.keys(_glyphs) as Array<GlyphName>;
+    
+    export const glyphs = glyphKeys.reduce((acc, name) => {
+      acc[name] = createGlyphComponent(name, _glyphs[name]);
+    
+      return acc;
+    }, {} as Record<GlyphName, LGGlyph.Component>);
+  `;
+}

package/scripts/prebuild.ts

@@ -1,129 +1,99 @@
-const { createHash } = require('crypto');
-const fs = require('fs');
-const path = require('path');
-const { promisify } = require('util');
-const { default: svgr } = require('@svgr/core');
-const meow = require('meow');
-const template = require('./template');
-const svgrrc = require('../.svgrrc');
-
-interface Flags {
-  outDir?: string;
+/* eslint-disable no-console */
+import { formatLG } from '@lg-tools/lint';
+// @ts-expect-error - no types in svgr v5.5
+import { default as svgr } from '@svgr/core';
+import { Command } from 'commander';
+import fs from 'fs';
+import path from 'path';
+
+import svgrrc from '../.svgrrc';
+
+import { getChecksum } from './checksum';
+import { indexTemplate } from './indexTemplate';
+import { FileObject, PrebuildOptions } from './prebuild.types';
+import { svgrTemplate } from './svgrTemplate';
+
+const program = new Command()
+  .description('Process SVG files and generate React components')
+  .option('-o, --outDir <path>', 'Output directory for built SVG components')
+  .option('-v, --verbose', 'Enable verbose output', false)
+  .parse();
+
+const options = program.opts() as PrebuildOptions;
+
+async function buildSvgFiles(options: PrebuildOptions): Promise<void> {
+  const svgFiles: Array<FileObject> = await getSVGFiles(options);
+  const outputDir = await createOutputDirectory(options);
+  const processFile = makeFileProcessor(outputDir, options);
+  options?.verbose && console.log('Processing SVG files...\n');
+  await Promise.all(svgFiles.map(processFile));
+  await createIndexFile(svgFiles, options);
 }
 
-interface FileObject {
-  name: string;
-  path: string;
-}
-
-const usageString = `
-Usage
-  $ ts-node ./prebuild.ts <filename(s)>
-
-Options
-  --outDir, -o  Output directory for built SVG components
-`;
-
-const cliConfig = {
-  flags: {
-    outDir: {
-      type: 'string',
-      alias: 'o',
-    },
-  },
-};
-
-const cli = meow(usageString, cliConfig);
-
-async function buildSvgFiles(
-  input: Array<string>,
-  flags: Flags,
-): Promise<void> {
-  const svgFiles: Array<FileObject> = await (async () => {
-    if (input?.length) {
-      const filteredSvgFiles = input.filter(filterSvgFiles);
-
-      return filteredSvgFiles.map(filePath => ({
-        name: path.basename(filePath, '.svg'),
-        path: path.resolve(process.cwd(), filePath),
-      }));
-    }
-
-    const glyphsDir: string = path.resolve(__dirname, '..', 'src', 'glyphs');
-    const svgFiles = await promisify(fs.readdir)(glyphsDir);
-    const filteredSvgFiles = svgFiles.filter(filterSvgFiles);
-
-    return filteredSvgFiles.map((fileName: string) => ({
-      name: fileName.replace('.svg', ''),
-      path: path.resolve(glyphsDir, fileName),
-    }));
-  })();
-
-  const outputDir = await createOutputDirectory(flags);
-
-  await Promise.all(svgFiles.map(processFile(outputDir)));
-
-  await createIndexFile(svgFiles);
+/**
+ * Get all SVG files from the glyphs directory
+ */
+async function getSVGFiles(
+  options?: PrebuildOptions,
+): Promise<Array<FileObject>> {
+  const glyphsDir = path.resolve(__dirname, '..', 'src', 'glyphs');
+  const filePaths = fs.readdirSync(glyphsDir);
+  const svgFilePaths = filePaths.filter(filterSvgFiles);
+
+  options?.verbose &&
+    console.log(svgFilePaths.length, `SVG files found in ${glyphsDir}`);
+
+  const svgFiles = svgFilePaths.map((fileName: string) => ({
+    name: fileName.replace('.svg', ''),
+    path: path.resolve(glyphsDir, fileName),
+  }));
+
+  return svgFiles;
 }
 
+/**
+ * Filter function to check if a string contains '.svg'
+ */
 function filterSvgFiles(str: string): boolean {
   return str.includes('.svg');
 }
 
-async function createOutputDirectory(flags: Flags) {
-  let outputDir = path.resolve(__dirname, '..', 'src/generated');
-
-  if (flags.outDir) {
-    outputDir = path.resolve(process.cwd(), flags.outDir);
-  }
+/**
+ * Create the output directory if it doesn't exist
+ */
+async function createOutputDirectory(options: PrebuildOptions) {
+  const outputDir = options.outDir
+    ? path.resolve(process.cwd(), options.outDir)
+    : path.resolve(__dirname, '..', 'src/generated');
 
-  const outputDirectoryExists = await promisify(fs.exists)(outputDir);
+  const outputDirectoryExists = fs.existsSync(outputDir);
 
   if (!outputDirectoryExists) {
-    await promisify(fs.mkdir)(outputDir, { recursive: true });
+    options.verbose && console.log(`Creating directory: ${outputDir}`);
+    fs.mkdirSync(outputDir, { recursive: true });
   }
 
+  options.verbose && console.log(`Using output directory: ${outputDir}`);
   return outputDir;
 }
 
-async function indexTemplate(svgFiles: Array<FileObject>) {
-  const imports = svgFiles
-    .map(({ name }) => `import ${name} from './${name}.svg';`)
-    .join('\n');
-
-  const _glyphs = `{
-    ${svgFiles.map(({ name }) => `${name}`).join(',\n')}
-  }`;
-
-  return `
-    import { createGlyphComponent } from '../createGlyphComponent';
-    import { LGGlyph } from '../types';
-
-    // Glyphs
-    ${imports}
-
-    const _glyphs = ${_glyphs} as const;
-
-    export type GlyphName = keyof typeof _glyphs;
-    
-    const glyphKeys = Object.keys(_glyphs) as Array<GlyphName>;
-    
-    export const glyphs = glyphKeys.reduce((acc, name) => {
-      acc[name] = createGlyphComponent(name, _glyphs[name]);
-    
-      return acc;
-    }, {} as Record<GlyphName, LGGlyph.Component>);
-  `;
-}
-
-async function createIndexFile(svgFiles: Array<FileObject>) {
+/**
+ * Create the index file for the generated components
+ */
+async function createIndexFile(
+  svgFiles: Array<FileObject>,
+  options?: PrebuildOptions,
+) {
   const indexPath = path.resolve(__dirname, '..', 'src/glyphs', 'index.ts');
-
+  options?.verbose && console.log('Writing index file...', indexPath);
   const indexContent = await indexTemplate(svgFiles);
-
-  await promisify(fs.writeFile)(indexPath, indexContent, { encoding: 'utf8' });
+  const formattedIndexContent = await formatLG(indexContent, indexPath);
+  fs.writeFileSync(indexPath, formattedIndexContent, { encoding: 'utf8' });
 }
 
+/**
+ * Annotate the generated file with script and checksum information
+ */
 function annotateFileContent(
   script: string,
   checksum: string,
@@ -138,37 +108,48 @@ function annotateFileContent(
 ${moduleCode}`;
 }
 
-function processFile(outputDir: string) {
+/**
+ * Returns an async function that processes a single SVG file
+ */
+function makeFileProcessor(outputDir: string, options?: PrebuildOptions) {
   return async (file: FileObject) => {
-    const fileContent = await promisify(fs.readFile)(file.path, {
+    const svgContent = fs.readFileSync(file.path, {
       encoding: 'utf8',
     });
 
-    const moduleCode = await svgr(
-      fileContent,
+    const processedSVGR = await svgr(
+      svgContent,
       {
         ...svgrrc,
-        template,
+        template: svgrTemplate,
       },
       {
         componentName: file.name,
       },
     );
 
-    const script =
-      './node_modules/.bin/ts-node packages/icon/scripts/prebuild.ts';
+    const scriptPath =
+      'packages/icon/' +
+      path.relative(path.resolve(__dirname, process.cwd()), __filename);
 
-    const checksum = createHash('md5')
-      .update(script)
-      .update(fileContent)
-      .update(moduleCode)
-      .digest('hex');
+    const checksum = getChecksum(svgContent, processedSVGR);
 
-    await promisify(fs.writeFile)(
-      path.resolve(outputDir, `${file.name}.tsx`),
-      annotateFileContent(script, checksum, moduleCode),
+    const outfilePath = path.resolve(outputDir, `${file.name}.tsx`);
+    const annotatedFileContent = annotateFileContent(
+      scriptPath,
+      checksum,
+      processedSVGR,
     );
+
+    if (options?.verbose) {
+      console.log(`Processed ${file.name}.svg`);
+      console.log(`Checksum: ${checksum}`);
+      console.log(`Writing to ${outfilePath}\n`);
+    }
+
+    // We intentionally don't format the generated .tsx files
+    fs.writeFileSync(outfilePath, annotatedFileContent);
   };
 }
 
-buildSvgFiles(cli.input, cli.flags);
+buildSvgFiles(options);

package/scripts/prebuild.types.ts

@@ -0,0 +1,9 @@
+export interface PrebuildOptions {
+  outDir?: string;
+  verbose?: boolean;
+}
+
+export interface FileObject {
+  name: string;
+  path: string;
+}

package/scripts/{template.ts → svgrTemplate.ts}

@@ -19,7 +19,7 @@ interface ASTParts extends Record<string, any> {
   props: string;
 }
 
-module.exports = function template(
+export function svgrTemplate(
   { template }: BabelAPI,
   { state: { componentName } }: SVGROptions,
   { imports, jsx, exports }: ASTParts,
@@ -89,4 +89,4 @@ module.exports = function template(
     jsx: jsx,
     exports: exports,
   });
-};
+}

package/scripts/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@lg-tools/build/config/root.tsconfig.json",
+  "compilerOptions": {
+    "noUnusedLocals": false,
+    "strict": true,
+    "baseUrl": ".",
+  }
+}

package/src/Icon.spec.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { createHash } from 'crypto';
 import fs from 'fs';
 import { axe } from 'jest-axe';
 import path from 'path';
@@ -8,6 +7,8 @@ import { toJson } from 'xml2json';
 
 import { typeIs } from '@leafygreen-ui/lib';
 
+import { getChecksum } from '../scripts/checksum';
+
 import EditIcon from './generated/Edit';
 import { Size } from './glyphCommon';
 import { isComponentGlyph } from './isComponentGlyph';
@@ -300,11 +301,7 @@ describe('Generated glyphs', () => {
             generatedFileContents,
           )!;
 
-        const expectedChecksum = createHash('md5')
-          .update(script)
-          .update(svgFileContents)
-          .update(checkedContents)
-          .digest('hex');
+        const expectedChecksum = getChecksum(svgFileContents, checkedContents);
 
         try {
           expect(checksum).toEqual(expectedChecksum);

package/src/generated/ActivityFeed.tsx

@@ -1,8 +1,8 @@
 /**
 * This is a generated file. Do not modify it manually.
 *
-* @script ./node_modules/.bin/ts-node packages/icon/scripts/prebuild.ts
-* @checksum 710e484afa428e912ba4f64c4b67fe01
+* @script packages/icon/scripts/prebuild.ts
+* @checksum b1462a08eab913e10b9385a55440e940
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';

package/src/generated/AddFile.tsx

@@ -1,8 +1,8 @@
 /**
 * This is a generated file. Do not modify it manually.
 *
-* @script ./node_modules/.bin/ts-node packages/icon/scripts/prebuild.ts
-* @checksum 0b5784a92dc689bd7e6fb60fe62ba250
+* @script packages/icon/scripts/prebuild.ts
+* @checksum 94edbcbd977952688b9a5d82257d4fa3
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';

package/src/generated/AllProducts.tsx

@@ -1,8 +1,8 @@
 /**
 * This is a generated file. Do not modify it manually.
 *
-* @script ./node_modules/.bin/ts-node packages/icon/scripts/prebuild.ts
-* @checksum 9c7685193748f0622060501d20b647da
+* @script packages/icon/scripts/prebuild.ts
+* @checksum 67ed4c533b73b9b1b257b35240dfaff8
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';

package/src/generated/AnalyticsNode.tsx

@@ -1,8 +1,8 @@
 /**
 * This is a generated file. Do not modify it manually.
 *
-* @script ./node_modules/.bin/ts-node packages/icon/scripts/prebuild.ts
-* @checksum a31c1711ca9859701cbae4602be32c4e
+* @script packages/icon/scripts/prebuild.ts
+* @checksum bc0ab82c383fd31eea4164abede50674
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';

package/src/generated/Apps.tsx

@@ -1,8 +1,8 @@
 /**
 * This is a generated file. Do not modify it manually.
 *
-* @script ./node_modules/.bin/ts-node packages/icon/scripts/prebuild.ts
-* @checksum da931e2449f5c7dadff04e5eb0de1c64
+* @script packages/icon/scripts/prebuild.ts
+* @checksum 5d856100c7e247557d0ba97e21ab352d
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';

package/src/generated/Array.tsx

@@ -1,8 +1,8 @@
 /**
 * This is a generated file. Do not modify it manually.
 *
-* @script ./node_modules/.bin/ts-node packages/icon/scripts/prebuild.ts
-* @checksum 7df980367ca0e9404ef8e83ea9998825
+* @script packages/icon/scripts/prebuild.ts
+* @checksum d5134087d2cfe0f3188172858bdbe02d
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';

package/src/generated/ArrowDown.tsx

@@ -1,8 +1,8 @@
 /**
 * This is a generated file. Do not modify it manually.
 *
-* @script ./node_modules/.bin/ts-node packages/icon/scripts/prebuild.ts
-* @checksum 6fe7a2fb33a9317cdb0eb623b4a512f1
+* @script packages/icon/scripts/prebuild.ts
+* @checksum 92fbf01559fe81dbe74fb88c7927657d
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';

package/src/generated/ArrowLeft.tsx

@@ -1,8 +1,8 @@
 /**
 * This is a generated file. Do not modify it manually.
 *
-* @script ./node_modules/.bin/ts-node packages/icon/scripts/prebuild.ts
-* @checksum f58b7f77e7f9e0c2a69696b267c5648e
+* @script packages/icon/scripts/prebuild.ts
+* @checksum ab6295f4bf5903fd581d1f700da3e92b
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';

package/src/generated/ArrowRight.tsx

@@ -1,8 +1,8 @@
 /**
 * This is a generated file. Do not modify it manually.
 *
-* @script ./node_modules/.bin/ts-node packages/icon/scripts/prebuild.ts
-* @checksum c6afd5ce1da7a6b2013f496c87bd1ba4
+* @script packages/icon/scripts/prebuild.ts
+* @checksum f6533dcd9bd5793b72b02125be632550
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';

package/src/generated/ArrowUp.tsx

@@ -1,8 +1,8 @@
 /**
 * This is a generated file. Do not modify it manually.
 *
-* @script ./node_modules/.bin/ts-node packages/icon/scripts/prebuild.ts
-* @checksum fbedd1960b8db8e53e861a106dd0bde5
+* @script packages/icon/scripts/prebuild.ts
+* @checksum 819e62e41a663df9983c700be78f249b
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';

package/src/generated/Beaker.tsx

@@ -1,8 +1,8 @@
 /**
 * This is a generated file. Do not modify it manually.
 *
-* @script ./node_modules/.bin/ts-node packages/icon/scripts/prebuild.ts
-* @checksum 5ac6ebd47ecff6ced573826b1763b0ce
+* @script packages/icon/scripts/prebuild.ts
+* @checksum eb17c76d71695771a1bc6e3c421d237b
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';

package/src/generated/Bell.tsx

@@ -1,8 +1,8 @@
 /**
 * This is a generated file. Do not modify it manually.
 *
-* @script ./node_modules/.bin/ts-node packages/icon/scripts/prebuild.ts
-* @checksum e7569f0858dd2ad021a256a8ddf7741d
+* @script packages/icon/scripts/prebuild.ts
+* @checksum 3bcabd9054dad5769d6088a816079008
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';

package/src/generated/Biometric.tsx

@@ -1,8 +1,8 @@
 /**
 * This is a generated file. Do not modify it manually.
 *
-* @script ./node_modules/.bin/ts-node packages/icon/scripts/prebuild.ts
-* @checksum 6f3784b482d9d43312208d0d3c2ff9a2
+* @script packages/icon/scripts/prebuild.ts
+* @checksum 28181e476135f27a919e10ac176afd9f
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';

package/src/generated/Boolean.tsx

@@ -1,8 +1,8 @@
 /**
 * This is a generated file. Do not modify it manually.
 *
-* @script ./node_modules/.bin/ts-node packages/icon/scripts/prebuild.ts
-* @checksum 6e0debf05432e1898e40f6821a2f0d86
+* @script packages/icon/scripts/prebuild.ts
+* @checksum 0bee3168ba1dd004d4de7fd42e3df0d0
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';

package/src/generated/Building.tsx

@@ -1,8 +1,8 @@
 /**
 * This is a generated file. Do not modify it manually.
 *
-* @script ./node_modules/.bin/ts-node packages/icon/scripts/prebuild.ts
-* @checksum d9bb32cae8b8ecceae5fbadae79efb0c
+* @script packages/icon/scripts/prebuild.ts
+* @checksum aeddf9ec2b27c582e0a08aebc3646212
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';

package/src/generated/Bulb.tsx

@@ -1,8 +1,8 @@
 /**
 * This is a generated file. Do not modify it manually.
 *
-* @script ./node_modules/.bin/ts-node packages/icon/scripts/prebuild.ts
-* @checksum 25ac240d7e0dc31a60013ab9d109a1d3
+* @script packages/icon/scripts/prebuild.ts
+* @checksum 02bf7244c0ddf3650d5b3fc5d17e6190
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';

package/src/generated/Calendar.tsx

@@ -1,8 +1,8 @@
 /**
 * This is a generated file. Do not modify it manually.
 *
-* @script ./node_modules/.bin/ts-node packages/icon/scripts/prebuild.ts
-* @checksum 2e43e49bccc80ca611fb1ebdb9c440f8
+* @script packages/icon/scripts/prebuild.ts
+* @checksum 9e5fd2432147d2f4c3afdf8b2b446847
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';

package/src/generated/Camera.tsx

@@ -1,8 +1,8 @@
 /**
 * This is a generated file. Do not modify it manually.
 *
-* @script ./node_modules/.bin/ts-node packages/icon/scripts/prebuild.ts
-* @checksum 661a0a5de5f9f5067318cd359ad8b746
+* @script packages/icon/scripts/prebuild.ts
+* @checksum 274e44b9d7f7791de831d837f16ce386
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';