Add icons package (#684)

Co-authored-by: Mark Tate <[email protected]>
Co-authored-by: Davie <[email protected]>

packages/components/package.json

@@ -43,6 +43,7 @@
   "dependencies": {
     "@jpmorganchase/mosaic-store": "^0.1.0-beta.89",
     "@jpmorganchase/mosaic-theme": "^0.1.0-beta.89",
+    "@jpmorganchase/mosaic-icons": "^0.1.0-beta.89",
     "@salt-ds/core": "^1.33.0",
     "@salt-ds/lab": "1.0.0-alpha.50",
     "@vanilla-extract/css": "^1.6.0",

packages/components/src/Icon/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { icons, IconNames } from '@jpmorganchase/mosaic-theme';
+import { icons, IconNames } from '@jpmorganchase/mosaic-icons';
 import classnames from 'clsx';
 
 import styles from './styles.css';

packages/content-editor-plugin/src/components/ActionMenu/ActionMenu.tsx

@@ -1,6 +1,6 @@
 import { Menu, MenuTrigger, MenuPanel, MenuItem } from '@salt-ds/core';
 import { Icon, Button } from '@jpmorganchase/mosaic-components';
-import { IconNames } from '@jpmorganchase/mosaic-theme';
+import { IconNames } from '@jpmorganchase/mosaic-icons';
 
 export type ActionMenuItem = {
   title: string;

packages/icons/README.md

@@ -0,0 +1,15 @@
+# Mosaic Icon Library
+
+`@jpmorganchase/mosaic-icons`contains icons used by the Mosaic.
+
+## Installation
+
+`yarn add @jpmorganchase/mosaic-icons`
+
+## Criteria
+
+The criteria for a component within `@jpmorganchase/mosaic-icons` is
+
+- It can be used outside the Mosaic site with only Mosaic theme dependencies.
+- It **should not** contain any Mosaic Store, NextJS or other site specific dependencies.
+- Should be client-side only components

packages/icons/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@jpmorganchase/mosaic-icons",
+  "description": "Mosaic - Icons",
+  "version": "0.1.0-beta.89",
+  "author": "",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "[email protected]:jpmorganchase/mosaic.git",
+    "directory": "packages/icons"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "style": "./dist/index.css",
+  "exports": {
+    "./index.css": "./dist/index.css",
+    ".": {
+      "style": "./dist/index.css",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "node": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "npm-run-all --parallel build:*",
+    "build:types": "tsc",
+    "build:components": "node  ./scripts/bundle.mjs",
+    "build:icons": "node ./scripts/generateIconTypes.mjs",
+    "clean": "npx del-cli 'dist/**' && find . -type d -empty -delete",
+    "lint": "eslint --ignore-pattern \"**/__tests__/**\"",
+    "dev": "node ./scripts/bundle.mjs watch"
+  },
+  "devDependencies": {
+    "del-cli": "^4.0.1",
+    "typescript": "^5.2.2"
+  },
+  "dependencies": {
+    "@jpmorganchase/mosaic-theme": "^0.1.0-beta.89",
+    "@salt-ds/core": "^1.33.0"
+  },
+  "peerDependencies": {
+    "@types/react": "^18.2.46",
+    "react": "^18.2.0"
+  }
+}

packages/icons/scripts/bundle.mjs

@@ -0,0 +1,57 @@
+import glob from 'fast-glob';
+import esbuild from 'esbuild';
+import { nodeExternalsPlugin } from 'esbuild-node-externals';
+
+const args = process.argv.slice(2);
+const watchEnabled = args[0] === 'watch';
+const packageName = process.env.npm_package_name;
+
+try {
+  const context = await esbuild.context({
+    entryPoints: glob.sync(['src/**/*.ts?(x)', 'src/*.ts?(x)'], {
+      ignore: ['**/__tests__']
+    }),
+    outdir: './dist',
+    bundle: true,
+    sourcemap: false,
+    splitting: true,
+    minify: true,
+    format: 'esm',
+    target: ['es2022'],
+    plugins: [
+      nodeExternalsPlugin(),
+      {
+        name: 'on-end',
+        setup(build) {
+          build.onEnd(({ errors = [] }) => {
+            if (errors.length) {
+              console.error(`build failed for ${packageName}:`, errors);
+            } else {
+              console.log(`build succeeded for ${packageName}:`);
+            }
+          });
+        }
+      }
+    ],
+    external: ['react', 'react-dom']
+  });
+  await context.rebuild();
+  if (watchEnabled) {
+    await context.watch();
+  }
+  await context.serve();
+  context.dispose();
+} catch (e) {
+  if (e.errors && e.errors.length > 0) {
+    console.group(`!!!!!!! ${packageName} build errors !!!!!!!`);
+    console.error(e.errors);
+    console.groupEnd();
+  }
+
+  if (e.warnings && e.warnings.length > 0) {
+    console.group(`!!!!!!! ${packageName} build warnings !!!!!!!`);
+    console.error(e.warnings);
+    console.groupEnd();
+  }
+  process.exit(1);
+}

packages/theme/scripts/buildIcons.mjs → packages/icons/scripts/generateIconTypes.mjs

@@ -9,7 +9,7 @@ try {
   await esbuild.build({
     entryPoints: glob.sync(['../../node_modules/@salt-ds/icons/dist-es/components/*.js']),
     bundle: false,
-    outdir: 'dist',
+    outdir: '.tmp',
     plugins: [saltIconNames]
   });
 } catch (e) {

packages/theme/src/icon/icons.ts → packages/icons/src/index.ts

@@ -1,7 +1,8 @@
-import React from 'react';
+'use client';
+import { FC } from 'react';
 import * as SaltIcons from '@salt-ds/icons';
 import type { IconProps as SaltIconProps } from '@salt-ds/icons';
-import type { saltIconNames } from '../../types/saltIconNames';
+import type { saltIconNames } from '../types/saltIconNames';
 
 const {
   DEFAULT_ICON_SIZE: DEDEFAULT_ICON_SIZE,
@@ -10,7 +11,7 @@ const {
   ...allIcons
 } = SaltIcons;
 
-export type IconMap = Record<string, React.FC<SaltIconProps>>;
+export type IconMap = Record<string, FC<SaltIconProps>>;
 
 /** Add any additional icons here */
 const additionalIcons: IconMap = {};

packages/icons/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.bundle.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist"
+  },
+  "include": ["src"]
+}

packages/theme/package.json

@@ -30,7 +30,6 @@
   "scripts": {
     "build": "npm-run-all --parallel build:*",
     "build:bundle": "node ./scripts/bundle.mjs",
-    "build:icons": "node ./scripts/buildIcons.mjs",
     "build:types": "tsc",
     "clean": "npx del-cli 'dist/**' && find . -type d -empty -delete",
     "lint": "eslint --ignore-pattern \"**/__tests__/**\"",

packages/theme/src/index.ts

@@ -23,7 +23,6 @@ export * from './config';
 export * from './feature';
 export * from './grid';
 export * from './hero';
-export * from './icon';
 export * from './impact';
 export * from './link';
 export * from './list';

yarn.lock

@@ -12389,6 +12389,11 @@ typescript@^5.0.0:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.6.3.tgz#5f3449e31c9d94febb17de03cc081dd56d81db5b"
   integrity sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==
 
+typescript@^5.2.2:
+  version "5.6.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.6.3.tgz#5f3449e31c9d94febb17de03cc081dd56d81db5b"
+  integrity sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==
+
 ufo@^1.5.4:
   version "1.5.4"
   resolved "https://registry.yarnpkg.com/ufo/-/ufo-1.5.4.tgz#16d6949674ca0c9e0fbbae1fa20a71d7b1ded754"