@leafygreen-ui/icon 14.0.0 → 14.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafygreen-ui/icon",
-  "version": "14.0.0",
+  "version": "14.1.1",
   "description": "LeafyGreen UI Kit Icons",
   "main": "./dist/umd/index.js",
   "module": "./dist/esm/index.js",
@@ -18,9 +18,12 @@
     "@svgr/core": "^5.3.1",
     "@types/xml2json": "^0.11.0",
     "commander": "^11.0.0",
+    "rollup": "4.16.1",
     "ts-node": "^10.9.2",
     "xml2json": "^0.12.0",
-    "@leafygreen-ui/lib": "^15.0.0",
+    "p-queue": "^8.1.0",
+    "fs-extra": "11.1.1",
+    "@leafygreen-ui/lib": "^15.2.0",
     "@lg-tools/build": "^0.8.0",
     "@lg-tools/lint": "^3.0.0",
     "@leafygreen-ui/palette": "^5.0.0"
@@ -36,7 +39,8 @@
   },
   "scripts": {
     "prebuild": "ts-node ./scripts/prebuild.ts",
-    "build": "lg-build bundle",
+    "postbuild": "ts-node ./scripts/postbuild.ts",
+    "build": "ts-node ./scripts/build-parallel.ts",
     "tsc": "lg-build tsc",
     "docs": "lg-build docs"
   }

package/rollup.batch.config.mjs

@@ -0,0 +1,19 @@
+import { esmConfig, umdConfig } from '@lg-tools/build/config/rollup.config.mjs';
+
+const DELIMITER = '|';
+
+const iconsEnv = process.env.ICONS || '';
+const iconNames = iconsEnv.split(DELIMITER);
+
+const iconConfigs = [esmConfig, umdConfig].flatMap(config =>
+  iconNames.map(name => ({
+    ...config,
+    input: `src/generated/${name}.tsx`,
+    output: {
+      ...config.output,
+      name: `${name}.js`,
+    },
+  })),
+);
+
+export default iconConfigs;

package/rollup.config.mjs

@@ -3,50 +3,5 @@ import {
   storiesConfig,
   umdConfig,
 } from '@lg-tools/build/config/rollup.config.mjs';
-import fs from 'fs';
-import path from 'path';
 
-/**
- *
- * @returns An array of all generated glyphs
- */
-function getGeneratedFiles() {
-  const directory = path.resolve(process.cwd(), 'src/generated');
-
-  if (!fs.existsSync(directory)) {
-    return [];
-  }
-
-  return fs
-    .readdirSync(directory)
-    .filter(file => /\.tsx?$/.test(file))
-    .map(file => path.resolve(directory, file));
-}
-
-// Create both ESM and UMD builds for each icon
-const iconConfigs = [esmConfig, umdConfig].flatMap(config =>
-  getGeneratedFiles().map(file => ({
-    ...config,
-    input: `src/generated/${path.basename(file)}`,
-    output: {
-      ...config.output,
-      name: `${path.basename(file, path.extname(file))}.js`,
-    },
-  })),
-);
-
-// Until we explicitly code-split the icons, we need to
-// create a separate build for each icon at the `dist` root
-iconConfigs.push(
-  ...getGeneratedFiles().map(file => ({
-    ...umdConfig,
-    input: `src/generated/${path.basename(file)}`,
-    output: {
-      ...umdConfig.output,
-      dir: 'dist',
-      name: `${path.basename(file, path.extname(file))}.js`,
-    },
-  })),
-);
-
-export default [esmConfig, umdConfig, storiesConfig, ...iconConfigs];
+export default [esmConfig, umdConfig, storiesConfig];

package/scripts/build-parallel.ts

@@ -0,0 +1,110 @@
+/* eslint-disable no-console */
+import { exec } from 'child_process';
+import { Command } from 'commander';
+import fs from 'fs';
+import path from 'path';
+
+const ICON_DIR = path.resolve(process.cwd(), 'src/generated');
+
+const iconNames = fs
+  .readdirSync(ICON_DIR)
+  .filter(f => /\.tsx?$/.test(f))
+  .map(f => path.basename(f, path.extname(f)));
+
+const BATCH_SIZE = 10;
+const NUM_WORKERS = 4;
+
+const DELIMITER = '|';
+const ROLLUP_CONFIG_PATH = 'rollup.config.mjs';
+const ROLLUP_BATCH_CONFIG_PATH = 'rollup.batch.config.mjs';
+
+const program = new Command()
+  .description('Split icon files into batches for bundling in parallel')
+  .option('-v, --verbose', 'Enable verbose output', false)
+  .parse();
+
+const options = program.opts();
+
+/** 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 buildExportsAndStories(): Promise<void> {
+  const cmd = `pnpm exec rollup -c ${ROLLUP_CONFIG_PATH}`;
+
+  await new Promise<void>((resolve, reject) => {
+    exec(cmd, error => {
+      if (error) {
+        reject(new Error(`Exports and stories build failed: ${error.message}`));
+      } else {
+        resolve();
+      }
+    });
+  });
+}
+
+/**
+ * Runs the Rollup build command for a batch of icons.
+ */
+async function buildBatch(batch: Array<string>): Promise<void> {
+  const batchArg = batch.join(DELIMITER);
+  const cmd = `pnpm exec rollup -c ${ROLLUP_BATCH_CONFIG_PATH} --environment "ICONS:${batchArg}"`;
+
+  if (options.verbose) {
+    console.log(`Building icon batch: ${batch.join(', ')}`);
+  }
+
+  await new Promise<void>((resolve, reject) => {
+    exec(cmd, error => {
+      if (error) {
+        reject(new Error(`Batch build failed: ${error.message}`));
+      } else {
+        resolve();
+      }
+    });
+  });
+}
+
+/**
+ * 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(
+  batchSize = 10,
+  numWorkers = 4,
+  fullBatch: Array<string>,
+): Promise<void> {
+  const { default: PQueue } = await import('p-queue');
+
+  const queue = new PQueue({ concurrency: numWorkers });
+  const batches = chunkArray(fullBatch, batchSize);
+
+  for (const batch of batches) {
+    queue.add(() => buildBatch(batch));
+  }
+
+  await queue.onIdle();
+}
+
+async function main(): Promise<void> {
+  try {
+    await buildExportsAndStories();
+    await buildAllBatches(BATCH_SIZE, NUM_WORKERS, iconNames);
+    console.log('All icons built successfully (°ロ°) !');
+  } catch (err) {
+    console.error('Build failed:', err);
+    process.exit(1);
+  }
+}
+
+main();

package/scripts/postbuild.ts

@@ -0,0 +1,26 @@
+/* eslint-disable no-console */
+import fs from 'fs-extra';
+import path from 'path';
+
+async function copy(sourceDir: string, targetDir: string): Promise<void> {
+  try {
+    if (!(await fs.pathExists(sourceDir))) {
+      console.error(`Source directory does not exist: ${sourceDir}`);
+      return;
+    }
+
+    console.log(`Copying files from ${sourceDir} to ${targetDir}.`);
+    await fs.copy(sourceDir, targetDir, { overwrite: true });
+    console.log('Copy completed successfully.');
+  } catch (error) {
+    console.error('Error while copying files:', error);
+  }
+}
+
+/**
+ * Keeps backward compatibility for imports like 'leafygreen-ui/icon/dist/MyIconName'.
+ */
+const sourceDir = path.resolve(process.cwd(), 'dist/umd');
+const targetDir = path.resolve(process.cwd(), 'dist');
+
+copy(sourceDir, targetDir);

package/src/Icon.stories.tsx

@@ -14,7 +14,7 @@ import { GlyphName } from './glyphs';
 import Icon, { glyphs, IconProps, Size } from '.';
 
 const meta: StoryMetaType<typeof Icon> = {
-  title: 'Components/Icon',
+  title: 'Components/Display/Icon',
   component: Icon,
   parameters: {
     default: 'LiveExample',

package/src/Icon.tsx

@@ -1,4 +1,7 @@
 import { createIconComponent } from './createIconComponent';
 import { glyphs } from './glyphs';
 
+/**
+ * The LeafyGreen system icons are a clear and concise set of glyphs designed to be minimal in form and express a variety of use-cases for all digital products.
+ */
 export const Icon = createIconComponent(glyphs);

package/src/generated/Shield.tsx

@@ -0,0 +1,39 @@
+/**
+* This is a generated file. Do not modify it manually.
+*
+* @script packages/icon/scripts/prebuild.ts
+* @checksum 897181bb5cef180c6d84010d84103bc0
+*/
+import * as React from "react";
+import { css, cx } from '@leafygreen-ui/emotion';
+import { generateAccessibleProps, sizeMap } from '../glyphCommon';
+import { LGGlyph } from '../types';
+export interface ShieldProps extends LGGlyph.ComponentProps {}
+const Shield = ({
+  className,
+  size = 16,
+  title,
+  ['aria-label']: ariaLabel,
+  ['aria-labelledby']: ariaLabelledby,
+  fill,
+  role = 'img',
+  ...props
+}: ShieldProps) => {
+  const fillStyle = css`
+        color: ${fill};
+      `;
+  const noFlexShrink = css`
+        flex-shrink: 0;
+      `;
+  const accessibleProps = generateAccessibleProps(role, 'Shield', {
+    title,
+    ['aria-label']: ariaLabel,
+    ['aria-labelledby']: ariaLabelledby
+  });
+  return <svg className={cx({
+    [fillStyle]: fill != null
+  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M8.00001 15.0001C10.7303 14.4227 12.9549 12.3761 13.833 9.63371L13.9712 9.20234L14.6795 4.95897C14.7201 4.71585 14.5772 4.47999 14.3447 4.39817C12.1971 3.64242 10.1477 2.5622 8.28968 1.21369C8.11569 1.08742 7.88082 1.08253 7.70399 1.20478L7.59446 1.2805C5.73823 2.56382 3.73939 3.60897 1.64175 4.39348C1.41552 4.47809 1.27832 4.70976 1.31729 4.94814L2.02886 9.30167L2.14042 9.64296C3.0359 12.3823 5.2671 14.4222 8.00001 15.0001ZM7.99977 12.9449C6.11619 12.4083 4.59951 10.9361 3.9669 9.00085L3.90464 8.8104L3.48073 6.21684C3.4435 5.98905 3.56721 5.76581 3.7786 5.67313C5.13339 5.07913 6.44393 4.38092 7.69919 3.58415C7.86827 3.47682 8.08467 3.47835 8.25243 3.58774C9.50741 4.40603 10.8318 5.11469 12.204 5.7004C12.4189 5.79214 12.5455 6.01806 12.507 6.24855L12.0954 8.7139L12.0027 9.0034C11.3839 10.936 9.87631 12.4092 7.99977 12.9449Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M7.12322 8.87421L9.85084 6.14657C10.0461 5.9513 10.3627 5.9513 10.558 6.14657L10.9115 6.50012C11.1068 6.69538 11.1068 7.01197 10.9115 7.20723L7.37793 10.7408C7.1644 10.9544 6.81177 10.9313 6.62783 10.6918L5.10349 8.70704C4.93529 8.48804 4.97648 8.17415 5.19548 8.00595L5.49289 7.77753C5.76665 7.56728 6.15901 7.61876 6.36926 7.89252L7.12322 8.87421Z" fill={'currentColor'} /></svg>;
+};
+Shield.displayName = 'Shield';
+Shield.isGlyph = true;
+export default Shield;

package/src/glyphs/Shield.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.00001 15.0001C10.7303 14.4227 12.9549 12.3761 13.833 9.63371L13.9712 9.20234L14.6795 4.95897C14.7201 4.71585 14.5772 4.47999 14.3447 4.39817C12.1971 3.64242 10.1477 2.5622 8.28968 1.21369C8.11569 1.08742 7.88082 1.08253 7.70399 1.20478L7.59446 1.2805C5.73823 2.56382 3.73939 3.60897 1.64175 4.39348C1.41552 4.47809 1.27832 4.70976 1.31729 4.94814L2.02886 9.30167L2.14042 9.64296C3.0359 12.3823 5.2671 14.4222 8.00001 15.0001ZM7.99977 12.9449C6.11619 12.4083 4.59951 10.9361 3.9669 9.00085L3.90464 8.8104L3.48073 6.21684C3.4435 5.98905 3.56721 5.76581 3.7786 5.67313C5.13339 5.07913 6.44393 4.38092 7.69919 3.58415C7.86827 3.47682 8.08467 3.47835 8.25243 3.58774C9.50741 4.40603 10.8318 5.11469 12.204 5.7004C12.4189 5.79214 12.5455 6.01806 12.507 6.24855L12.0954 8.7139L12.0027 9.0034C11.3839 10.936 9.87631 12.4092 7.99977 12.9449Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.12322 8.87421L9.85084 6.14657C10.0461 5.9513 10.3627 5.9513 10.558 6.14657L10.9115 6.50012C11.1068 6.69538 11.1068 7.01197 10.9115 7.20723L7.37793 10.7408C7.1644 10.9544 6.81177 10.9313 6.62783 10.6918L5.10349 8.70704C4.93529 8.48804 4.97648 8.17415 5.19548 8.00595L5.49289 7.77753C5.76665 7.56728 6.15901 7.61876 6.36926 7.89252L7.12322 8.87421Z" fill="black"/>
+</svg>

package/src/glyphs/index.ts

@@ -142,6 +142,7 @@ import Serverless from './Serverless.svg';
 import Settings from './Settings.svg';
 import ShardedCluster from './ShardedCluster.svg';
 import Shell from './Shell.svg';
+import Shield from './Shield.svg';
 import Shirt from './Shirt.svg';
 import SMS from './SMS.svg';
 import SortAscending from './SortAscending.svg';
@@ -323,6 +324,7 @@ const _glyphs = {
   Settings,
   ShardedCluster,
   Shell,
+  Shield,
   Shirt,
   SortAscending,
   SortDescending,