@leafygreen-ui/icon 14.4.1 → 14.5.1

package/package.json

@@ -1,18 +1,35 @@
 {
   "name": "@leafygreen-ui/icon",
-  "version": "14.4.1",
+  "version": "14.5.1",
   "description": "LeafyGreen UI Kit Icons",
   "main": "./dist/umd/index.js",
   "module": "./dist/esm/index.js",
-  "types": "./dist/types/src/index.d.ts",
-  "typesVersions": {},
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "types@<=5.0": "./dist/types/ts4.9/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/umd/index.js"
+    },
+    "./dist/*": {
+      "types": "./dist/types/generated/*.d.ts",
+      "import": "./dist/esm/*.js",
+      "require": "./dist/umd/*.js"
+    },
+    "./*": {
+      "types": "./dist/types/generated/*.d.ts",
+      "import": "./dist/esm/*.js",
+      "require": "./dist/umd/*.js"
+    }
+  },
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
     "lodash": "^4.17.21",
-    "@leafygreen-ui/emotion": "^5.0.1"
+    "@leafygreen-ui/emotion": "^5.0.3"
   },
   "devDependencies": {
     "@svgr/core": "^5.3.1",
@@ -23,10 +40,11 @@
     "xml2json": "^0.12.0",
     "p-queue": "^8.1.0",
     "fs-extra": "11.1.1",
-    "@leafygreen-ui/lib": "^15.2.1",
-    "@leafygreen-ui/palette": "^5.0.1",
-    "@lg-tools/build": "^0.8.1",
-    "@lg-tools/lint": "^3.0.1"
+    "@lg-tools/build": "^0.8.3",
+    "@lg-tools/lint": "^3.1.0",
+    "@leafygreen-ui/lib": "^15.4.0",
+    "@lg-tools/storybook-utils": "^0.3.2",
+    "@leafygreen-ui/palette": "^5.0.2"
   },
   "gitHead": "dd71a2d404218ccec2e657df9c0263dc1c15b9e0",
   "homepage": "https://github.com/mongodb/leafygreen-ui/tree/main/packages/icon",
@@ -35,12 +53,12 @@
     "url": "https://github.com/mongodb/leafygreen-ui"
   },
   "bugs": {
-    "url": "https://jira.mongodb.org/projects/PD/summary"
+    "url": "https://jira.mongodb.org/projects/LG/summary"
   },
+  "typesVersions": {},
   "scripts": {
     "prebuild": "ts-node ./scripts/prebuild/index.ts",
-    "build": "ts-node ./scripts/build/index.ts",
-    "postbuild": "ts-node ./scripts/postbuild/index.ts",
+    "build": "ts-node ./scripts/build/build.ts",
     "tsc": "lg-build tsc",
     "docs": "lg-build docs"
   }

package/scripts/build/build-batch.ts

@@ -0,0 +1,67 @@
+/* eslint-disable no-console */
+import { MergedRollupOptions, rollup } from 'rollup';
+
+import { GENERATED_DIR } from './constants';
+
+async function getBatchBuildOptions(
+  batch: Array<string>,
+): Promise<Array<MergedRollupOptions>> {
+  const { constructUMDGlobalName } = await import(
+    '@lg-tools/build/config/utils/constructUMDGlobalName.mjs'
+  );
+
+  const { esmConfig, umdConfig } = await import(
+    '@lg-tools/build/config/rollup.config.mjs'
+  );
+
+  return [
+    // ESM build can take an array of input files
+    {
+      ...esmConfig,
+      input: batch.map(icon => `${GENERATED_DIR}/${icon}.tsx`),
+      output: [esmConfig.output],
+    },
+    // UMD builds need a single input file
+    ...batch.map(iconName => {
+      return {
+        ...umdConfig,
+        input: `${GENERATED_DIR}/${iconName}.tsx`,
+        output: [
+          {
+            ...umdConfig.output,
+            name: constructUMDGlobalName('icon', iconName),
+            dir: `dist/umd`,
+          },
+        ],
+      };
+    }),
+  ];
+}
+
+/**
+ * Runs the Rollup build command for a batch of icons.
+ */
+export async function buildBatch(
+  batch: Array<string>,
+  verbose = false,
+): Promise<void> {
+  try {
+    const rollupConfigs = await getBatchBuildOptions(batch);
+
+    for (const config of rollupConfigs) {
+      const bundle = await rollup(config);
+
+      if (verbose) {
+        console.log(bundle.watchFiles);
+      }
+
+      await Promise.all(config.output.map(bundle.write));
+      await bundle.close();
+    }
+  } catch (e) {
+    console.error(
+      `Error building icon batch including: ${batch.join(', ')}\n`,
+      e,
+    );
+  }
+}

package/scripts/build/build.ts

@@ -0,0 +1,94 @@
+/* eslint-disable no-console */
+import { buildPackage } from '@lg-tools/build';
+import { Command } from 'commander';
+
+import { buildBatch } from './build-batch';
+import { getAllIcons, getChangedIcons } from './compare-checksum';
+import { BATCH_SIZE, NUM_WORKERS } from './constants';
+
+interface BuildIconOptions {
+  verbose?: boolean;
+  force?: boolean;
+}
+
+/**
+ * Splits an array into chunks of a specified size.
+ */
+function chunkArray<T>(arr: Array<T>, size: number): Array<Array<T>> {
+  const chunks: Array<Array<T>> = [];
+
+  for (let i = 0; i < arr.length; i += size) {
+    chunks.push(arr.slice(i, i + size));
+  }
+
+  return chunks;
+}
+
+/**
+ * Runs the Rollup build command for index and story files.
+ */
+async function buildIndex({ verbose }: { verbose?: boolean }): Promise<void> {
+  buildPackage({ direct: true, verbose });
+}
+
+/**
+ * Splits a list into batches, then uses a concurrency-limited queue to
+ * build all batches in parallel. Waits until all batches have finished.
+ */
+async function buildAllBatches({
+  fullBatch,
+  batchSize = 10,
+  numWorkers = 4,
+  verbose = false,
+}: {
+  fullBatch: Array<string>;
+  batchSize: number;
+  numWorkers: number;
+  verbose?: boolean;
+}): Promise<void> {
+  const { default: PQueue } = await import('p-queue');
+
+  const queue = new PQueue({ concurrency: numWorkers });
+  const batches = chunkArray(fullBatch, batchSize);
+
+  verbose && console.log(`Building ${batches.length} batches...`);
+  for (const batch of batches) {
+    queue.add(() => buildBatch(batch, verbose));
+  }
+
+  await queue.onIdle();
+}
+
+/**
+ * Builds the icon assets.
+ * @param options The options for building icons.
+ */
+async function buildIcons(options: BuildIconOptions): Promise<void> {
+  try {
+    const verbose = options.verbose ?? false;
+    const force = options.force ?? false;
+
+    await buildIndex({ verbose });
+
+    const iconsToBuild = force ? getAllIcons() : getChangedIcons();
+
+    verbose && console.log(`Building ${iconsToBuild} icons...`);
+
+    await buildAllBatches({
+      fullBatch: iconsToBuild,
+      batchSize: BATCH_SIZE,
+      numWorkers: NUM_WORKERS,
+      verbose,
+    });
+    console.log('All icons built successfully (°ロ°) !');
+  } catch (err) {
+    console.error('Build failed:', err);
+    process.exit(1);
+  }
+}
+
+new Command()
+  .description('Split icon files into batches for bundling in parallel')
+  .option('-v, --verbose', 'Enable verbose output', false)
+  .action(buildIcons)
+  .parse();

package/scripts/build/compare-checksum.ts

@@ -1,14 +1,37 @@
-import fs from 'fs';
+import fsx from 'fs-extra';
 import path from 'path';
 
-const ICON_DIR = path.resolve(process.cwd(), 'src/generated');
+import { CHECKSUMS_FILE, GENERATED_DIR } from './constants';
 
-const iconNames = fs
-  .readdirSync(ICON_DIR)
-  .filter(f => /\.tsx?$/.test(f))
-  .map(f => path.basename(f, path.extname(f)));
+const ICON_DIR = path.resolve(process.cwd(), GENERATED_DIR);
 
-const CHECKSUMS_FILE = path.resolve(process.cwd(), 'dist/checksums.json');
+/**
+ * Gets a list of all icon names in the generated icons directory.
+ * @returns An array of icon names (without extensions).
+ */
+export function getAllIcons(): Array<string> {
+  const iconNames = fsx
+    .readdirSync(ICON_DIR)
+    .filter(f => /\.tsx?$/.test(f))
+    .map(f => path.basename(f, path.extname(f)));
+  return iconNames;
+}
+
+/**
+ * Gets the file path for the checksums file.
+ * @returns The absolute path to the checksums file.
+ */
+function getChecksumsFilePath(): string {
+  const fullPath = path.resolve(process.cwd(), CHECKSUMS_FILE);
+
+  fsx.ensureDirSync(path.dirname(fullPath));
+
+  if (!fsx.existsSync(fullPath)) {
+    fsx.writeFileSync(fullPath, JSON.stringify({}, null, 2));
+  }
+
+  return fullPath;
+}
 
 /**
  * Loads checksums from the .checksums.json file as an object.
@@ -16,19 +39,19 @@ const CHECKSUMS_FILE = path.resolve(process.cwd(), 'dist/checksums.json');
  */
 function getPrevChecksums(): Record<string, string> {
   try {
-    return JSON.parse(fs.readFileSync(CHECKSUMS_FILE, 'utf-8'));
+    return JSON.parse(fsx.readFileSync(getChecksumsFilePath(), 'utf-8'));
   } catch (err: any) {
     if (err.code === 'ENOENT') {
       // this is normal if the file doesn't exist yet
       return {};
     } else if (err instanceof SyntaxError) {
       console.error(
-        `[compare-checksum] Invalid JSON in checksums file at ${CHECKSUMS_FILE}:`,
+        `[compare-checksum] Invalid JSON in checksums file at ${getChecksumsFilePath()}:`,
         err.message,
       );
     } else {
       console.error(
-        `[compare-checksum] Error reading checksums file at ${CHECKSUMS_FILE}:`,
+        `[compare-checksum] Error reading checksums file at ${getChecksumsFilePath()}:`,
         err,
       );
     }
@@ -39,24 +62,26 @@ function getPrevChecksums(): Record<string, string> {
 
 /** Updates checksums in the .checksums.json file. */
 function saveNewChecksums(checksums: Record<string, string>) {
-  fs.writeFileSync(CHECKSUMS_FILE, JSON.stringify(checksums, null, 2));
+  fsx.writeFileSync(getChecksumsFilePath(), JSON.stringify(checksums, null, 2));
 }
 
 /** Extracts the pre-computed checksum from a generated .tsx file. */
 function extractChecksumFromFile(filePath: string): string | null {
-  const content = fs.readFileSync(filePath, 'utf8');
+  const content = fsx.readFileSync(filePath, 'utf8');
   const match = content.match(/@checksum\s+([a-f0-9]+)/);
   return match ? match[1] : null;
 }
 
-/** Gets list of changed icons by comparing checksums. */
-export function getChangedChecksums(): Array<string> {
+/**
+ * Gets list of changed icon names by comparing checksums.
+ */
+export function getChangedIcons(): Array<string> {
   const prevChecksums = getPrevChecksums();
   const newChecksums: Record<string, string> = {};
 
   const changes: Array<string> = [];
 
-  for (const iconName of iconNames) {
+  for (const iconName of getAllIcons()) {
     const filePath = path.join(ICON_DIR, `${iconName}.tsx`);
     const checksum = extractChecksumFromFile(filePath);
 

package/scripts/build/constants.ts

@@ -0,0 +1,4 @@
+export const BATCH_SIZE = 10;
+export const NUM_WORKERS = 4;
+export const GENERATED_DIR = 'src/generated';
+export const CHECKSUMS_FILE = 'dist/checksums.json';

package/scripts/prebuild/index.ts

@@ -6,8 +6,6 @@ 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';
@@ -119,6 +117,10 @@ function makeFileProcessor(outputDir: string, options?: PrebuildOptions) {
       encoding: 'utf8',
     });
 
+    // Note: must use `require` since svgrrc is a CommonJS module
+    // @ts-ignore - svgrrc is not typed
+    const svgrrc = await require('../../.svgrrc.js');
+
     const processedSVGR = await svgr(
       svgContent,
       {

package/scripts/tsconfig.json

@@ -5,9 +5,6 @@
   },
   "include": [
     "./prebuild/**/*",
-    "./build/**/*",
-    "./postbuild/**/*",
-    "../.svgrrc.js",
-    "../constants.mjs"
+    "./build/**/*"
   ]
 }

package/src/Icon.spec.tsx

@@ -7,8 +7,6 @@ import { toJson } from 'xml2json';
 
 import { typeIs } from '@leafygreen-ui/lib';
 
-import { getChecksum } from '../scripts/prebuild/checksum';
-
 import EditIcon from './generated/Edit';
 import { Size } from './glyphCommon';
 import { isComponentGlyph } from './isComponentGlyph';
@@ -277,43 +275,6 @@ describe('Generated glyphs', () => {
     });
   });
 
-  describe('are up-to-date and not been modified', () => {
-    glyphPaths.forEach(glyphPath => {
-      const baseName = getBaseName(glyphPath);
-
-      test(`${baseName}`, () => {
-        const svgFileContents = fs.readFileSync(glyphPath, {
-          encoding: 'utf8',
-        });
-
-        const generatedFileContents = fs.readFileSync(
-          path.resolve(
-            generatedFilesDirectory,
-            baseNameToGeneratedFilePath[baseName],
-          ),
-          {
-            encoding: 'utf8',
-          },
-        );
-
-        const [, script, checksum, checkedContents] =
-          /^\/\*.*@script ([^\n]*).*@checksum ([^\n]*).*\*\/\n(.*)$/s.exec(
-            generatedFileContents,
-          )!;
-
-        const expectedChecksum = getChecksum(svgFileContents, checkedContents);
-
-        try {
-          expect(checksum).toEqual(expectedChecksum);
-        } catch (error) {
-          throw new Error(
-            `${error}\n\nForgot to re-run script?: \`${script}\``,
-          );
-        }
-      });
-    });
-  });
-
   describe('accessible props handled correctly', () => {
     test('when no prop is supplied, aria-label is genereated', () => {
       render(<EditIcon />);

package/src/Icon.stories.tsx

@@ -1,11 +1,9 @@
-// TODO: Generate Icon props with controls
 import React from 'react';
 import {
   storybookExcludedControlParams,
   StoryMetaType,
-  StoryType,
 } from '@lg-tools/storybook-utils';
-import { StoryFn } from '@storybook/react';
+import { StoryObj } from '@storybook/react';
 
 import { css } from '@leafygreen-ui/emotion';
 import { palette } from '@leafygreen-ui/palette';
@@ -32,7 +30,6 @@ const meta: StoryMetaType<typeof Icon> = {
       options: Object.values(Size),
       defaultValue: Size.Default,
     },
-    glyph: { control: 'none' },
     fill: {
       control: 'color',
     },
@@ -61,45 +58,62 @@ const textStyle = css`
   margin-top: 0.5rem;
 `;
 
-export const Single: StoryType<typeof Icon> = (args: IconProps) => {
-  if (!args.glyph) {
-    args = {
-      ...args,
-      glyph: 'QuestionMarkWithCircle',
-    };
-  }
+export const Single: StoryObj<typeof Icon> = {
+  render: (args: IconProps) => {
+    if (!args.glyph) {
+      args = {
+        ...args,
+        glyph: 'QuestionMarkWithCircle',
+      };
+    }
 
-  return <Icon {...args} />;
+    return <Icon {...args} />;
+  },
+  parameters: { chromatic: { disableSnapshot: true } },
+  argTypes: {
+    glyph: {
+      control: 'select',
+      options: Object.keys(glyphs),
+    },
+  },
 };
 
-Single.argTypes = {
-  glyph: {
-    control: 'select',
-    options: Object.keys(glyphs),
+export const LiveExample: StoryObj<IconProps> = {
+  parameters: {
+    controls: {
+      exclude: [...meta.parameters.controls!.exclude!, 'glyph'],
+    },
   },
+  render: (args: Omit<IconProps, 'glyph'>) => (
+    <div
+      className={css`
+        width: 100%;
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+      `}
+    >
+      {Object.keys(glyphs).map(glyph => {
+        return (
+          <div key={glyph} className={containerStyle}>
+            <Icon {...args} glyph={glyph as GlyphName} />
+            <div className={textStyle}>{glyph}</div>
+          </div>
+        );
+      })}
+    </div>
+  ),
 };
-Single.parameters = { chromatic: { disableSnapshot: true } };
-
-export const LiveExample: StoryFn<IconProps> = (
-  args: Omit<IconProps, 'glyph'>,
-) => (
-  <div
-    className={css`
-      width: 100%;
-      display: grid;
-      grid-template-columns: repeat(4, 1fr);
-    `}
-  >
-    {Object.keys(glyphs).map(glyph => {
-      return (
-        <div key={glyph} className={containerStyle}>
-          <Icon {...args} glyph={glyph as GlyphName} />
-          <div className={textStyle}>{glyph}</div>
-        </div>
-      );
-    })}
-  </div>
-);
 
-export const Error = () => <Icon glyph="glyph-does-not-exist" />;
-Error.parameters = { chromatic: { disableSnapshot: true } };
+export const Generated: StoryObj<typeof Icon> = {
+  parameters: {
+    generate: {
+      args: {
+        glyph: 'Cloud',
+      },
+      combineArgs: {
+        size: Object.values(Size),
+        fill: [palette.gray.base, palette.green.base],
+      },
+    },
+  },
+};

package/src/generated/AIModel.tsx

@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 87849e7d72ab0d60dca256023631a6a1
+* @checksum 1b3d40728665f27a2c0b6039f0387bf8
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';

package/src/generated/ActivityFeed.tsx

@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum e6b1213c24b8870f1fca3f3e3d47b13f
+* @checksum 260808bc7119d3af4c161e80ea57a6c5
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';

package/src/generated/AddFile.tsx

@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 588c47c2397d866df7cfb8fadf47a080
+* @checksum cc1e1cbb6d61f3388205f4e843e3e712
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';

package/src/generated/AllProducts.tsx

@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 921f2b1138e4f9d8ffbea3bb4e12695c
+* @checksum 5c37a6bef3cb4644287c2c3f068f875a
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';

package/src/generated/AnalyticsNode.tsx

@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum e017d01ef6749f8311df52d33ef4cc9c
+* @checksum 9805552df6dff2c768c44ca81aa213c4
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';

package/src/generated/Apps.tsx

@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 1db774668e01399004827a77b14e4ffe
+* @checksum 425e40d61dd5d93e2cee0b03900ae595
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';

package/src/generated/Array.tsx

@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 7d742c430520479ed9c2d780269ae4d2
+* @checksum b3bf0a50a840b53f371336851204c2a5
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';

package/src/generated/ArrowDown.tsx

@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 39e200b919fb835a8b0b10358b27a70e
+* @checksum 80388a72ab7b330b3a6580b0c297fddf
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';

package/src/generated/ArrowLeft.tsx

@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum d5d0803d4d8e66890e37d2241311d1b5
+* @checksum b616058bc8611a0f41a0b72ef9007615
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';

package/src/generated/ArrowRight.tsx

@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum e3869e336bbcf54c6b2f76aa34c8e9e3
+* @checksum 23de185adab4900108b14253a1e923ae
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';

package/src/generated/ArrowUp.tsx

@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum 226adc0e4ba71db777ae5d058d439e2d
+* @checksum 49ee0cf73d7b62b81389b9ff02da9762
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';

package/src/generated/Award.tsx

@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum ca4adced235a7fb5f9c700cd931a0eab
+* @checksum 3b9e32a25f51f7150b52bafd3268e9e7
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';

package/src/generated/Beaker.tsx

@@ -2,7 +2,7 @@
 * This is a generated file. Do not modify it manually.
 *
 * @script packages/icon/scripts/prebuild/index.ts
-* @checksum f290bf6c80174148b58126cfd02ba87c
+* @checksum 672dda640a4f6847536982968cfb0a72
 */
 import * as React from "react";
 import { css, cx } from '@leafygreen-ui/emotion';