feat(react-icons): modularized Icons (#831)

* chore: Deprecated Icon component * feat: Added icon generation script * feat: Generated modularized icons * feat: Added modularized icons demo * feat: Run icon generation script before react build * feat: Added @tonic-ui/react-icons * chore: Removed @trendmicro/tmicon and bump version to 2.0.0 * chore: Changed package description * chore: Updated react-icons readme * feat: Added doNoEdit helper * feat: refine the generate-icons script and move `tmicon` to `devDependencies` * chore: pin the version to `1.37.0` for the `@trendmicro/tmicon` dependency * feat: update `react-icons` package configuration * feat: follow Tonic UI coding style and naming convention --------- Co-authored-by: cheton <[email protected]>
trendmicro-frontend · Mar 5, 2024 · acffa1b · acffa1b
1 parent 2695b3c
commit acffa1b
Show file tree

Hide file tree

Showing 453 changed files with 16,436 additions and 669 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -107,6 +107,9 @@ jobs:
       - codecov/upload:
           file: ./packages/react-hooks/coverage/lcov.info
           flags: react-hooks
+      - codecov/upload:
+          file: ./packages/react-icons/coverage/lcov.info
+          flags: react-icons
       - codecov/upload:
           file: ./packages/react-lab/coverage/lcov.info
           flags: react-lab
@@ -177,6 +180,9 @@ jobs:
       - codecov/upload:
           file: ./packages/react-hooks/coverage/lcov.info
           flags: react-hooks
+      - codecov/upload:
+          file: ./packages/react-icons/coverage/lcov.info
+          flags: react-icons
       - codecov/upload:
           file: ./packages/react-lab/coverage/lcov.info
           flags: react-lab
@@ -253,6 +259,9 @@ jobs:
       - codecov/upload:
           file: ./packages/react-hooks/coverage/lcov.info
           flags: react-hooks
+      - codecov/upload:
+          file: ./packages/react-icons/coverage/lcov.info
+          flags: react-icons
       - codecov/upload:
           file: ./packages/react-lab/coverage/lcov.info
           flags: react-lab

diff --git a/packages/react-icons/.eslintignore b/packages/react-icons/.eslintignore
@@ -0,0 +1,3 @@
+build
+dist
+node_modules
diff --git a/packages/react-icons/.eslintrc.js b/packages/react-icons/.eslintrc.js
@@ -0,0 +1,23 @@
+module.exports = {
+  extends: 'trendmicro',
+  parser: '@babel/eslint-parser',
+  env: {
+    browser: true,
+    node: true,
+    jest: true,
+  },
+  globals: {
+    'globalThis': 'readonly',
+  },
+  plugins: [
+    '@babel',
+    'react-hooks',
+  ],
+  rules: {
+    'camelcase': ['error', { 'allow': ['^DEPRECATED_'] }],
+    'react/jsx-no-bind': 2,
+    'react/prop-types': 0,
+    'react-hooks/rules-of-hooks': 'error', // Checks rules of Hooks
+    'react-hooks/exhaustive-deps': 'error', // Checks effect dependencies
+  },
+};
diff --git a/packages/react-icons/.gitignore b/packages/react-icons/.gitignore
@@ -0,0 +1,3 @@
+/build
+/coverage
+/dist
diff --git a/packages/react-icons/.npmignore b/packages/react-icons/.npmignore
@@ -0,0 +1,2 @@
+package-lock.json
+yarn.lock
diff --git a/packages/react-icons/LICENSE b/packages/react-icons/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020-present Trend Micro Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/react-icons/README.md b/packages/react-icons/README.md
@@ -0,0 +1,13 @@
+# @tonic-ui/react-icons
+
+React Tonic UI Icons library.
+
+## Installation
+
+```sh
+// with npm
+npm install @tonic-ui/react-icons
+
+// with yarn
+yarn add @tonic-ui/react-icons
+```
diff --git a/packages/react-icons/babel.config.js b/packages/react-icons/babel.config.js
@@ -0,0 +1,20 @@
+const plugins = [];
+if (process.env.NODE_ENV === 'test') {
+  // Enable async/await for jest
+  plugins.push('@babel/plugin-transform-runtime');
+}
+
+module.exports = {
+  extends: '@trendmicro/babel-config',
+  plugins: [
+    ...plugins,
+    '@emotion/babel-plugin',
+  ],
+  presets: [
+    '@babel/preset-env',
+    ['@babel/preset-react', {
+      'runtime': 'automatic',
+      'importSource': '@emotion/react',
+    }],
+  ],
+};
diff --git a/packages/react-icons/package.json b/packages/react-icons/package.json
@@ -0,0 +1,66 @@
+{
+  "name": "@tonic-ui/react-icons",
+  "version": "1.37.0",
+  "description": "React Tonic UI Icons library.",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "generate-icons": "node scripts/generate-icons.mjs",
+    "build": "yarn generate-icons && cross-env PACKAGE_NAME=index INPUT=src CJS_OUTPUT_DIRECTORY=dist/cjs ESM_OUTPUT_DIRECTORY=dist/esm rollup --config rollup.config.mjs",
+    "clean": "del build coverage dist",
+    "lint": "eslint --ext .js,.jsx,.mjs .",
+    "pre-push": "bash -c 'echo -e \"=> \\e[1;33m$npm_package_name\\e[0m\"' && yarn run build && yarn run lint && yarn run test",
+    "prepublish": "yarn run build",
+    "test": "exit 0"
+  },
+  "dependencies": {
+    "@emotion/react": "11.x",
+    "@tonic-ui/react": "^1.7.0"
+  },
+  "devDependencies": {
+    "@babel/plugin-transform-runtime": "^7.24.0",
+    "@babel/preset-env": "^7.24.0",
+    "@babel/preset-react": "^7.23.3",
+    "@emotion/babel-plugin": "^11.11.0",
+    "@trendmicro/babel-config": "^1.0.2",
+    "@trendmicro/tmicon": "1.37.0",
+    "cross-env": "^7.0.3",
+    "del-cli": "^5.0.0",
+    "eslint": "^8.25.0",
+    "eslint-config-trendmicro": "^3.0.0",
+    "eslint-plugin-import": "latest",
+    "eslint-plugin-jsx-a11y": "latest",
+    "eslint-plugin-react": "latest",
+    "eslint-plugin-react-hooks": "latest",
+    "react": "^16.14.0 || ^17 || ^18",
+    "react-dom": "^16.14.0 || ^17 || ^18",
+    "rollup": "^3"
+  },
+  "peerDependencies": {
+    "react": "^16.14.0 || ^17 || ^18",
+    "react-dom": "^16.14.0 || ^17 || ^18"
+  },
+  "author": "Zachary Legros",
+  "homepage": "https://github.com/trendmicro-frontend/tonic-ui",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/trendmicro-frontend/tonic-ui.git",
+    "directory": "packages/react-icons"
+  },
+  "bugs": {
+    "url": "https://github.com/trendmicro-frontend/tonic-ui/issues"
+  },
+  "keywords": [
+    "icons",
+    "react",
+    "tonic-ui"
+  ]
+}
diff --git a/packages/react-icons/rollup.config.mjs b/packages/react-icons/rollup.config.mjs
@@ -0,0 +1,44 @@
+import path from 'path';
+import { babel } from '@rollup/plugin-babel';
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+
+const packageName = process.env.PACKAGE_NAME;
+
+const input = process.env.INPUT || path.resolve(__dirname, 'src', 'index.js');
+
+const cjsOutputDirectory = process.env.CJS_OUTPUT_DIRECTORY || path.resolve(__dirname, 'dist', 'cjs');
+const esmOutputDirectory = process.env.ESM_OUTPUT_DIRECTORY || path.resolve(__dirname, 'dist', 'esm');
+
+const isExternal = id => !id.startsWith('.') && !id.startsWith('/');
+
+export default [
+  {
+    input,
+    output: {
+      file: path.join(cjsOutputDirectory, `${packageName}.js`),
+      format: 'cjs',
+
+      // https://rollupjs.org/guide/en/#changed-defaults
+      // https://rollupjs.org/guide/en/#outputinterop
+      interop: 'auto',
+    },
+    external: isExternal,
+    plugins: [
+      nodeResolve(),
+      babel({ babelHelpers: 'bundled' }),
+    ],
+  },
+  {
+    input,
+    output: {
+      dir: esmOutputDirectory,
+      format: 'esm',
+      preserveModules: true,
+    },
+    external: isExternal,
+    plugins: [
+      nodeResolve(),
+      babel({ babelHelpers: 'bundled' }),
+    ],
+  }
+];
diff --git a/packages/react-icons/scripts/generate-icons.mjs b/packages/react-icons/scripts/generate-icons.mjs
@@ -0,0 +1,113 @@
+import * as tmicon from '@trendmicro/tmicon';
+import * as url from 'node:url';
+import * as path from 'node:path';
+import * as fs from 'node:fs';
+import { promisify } from 'node:util';
+
+const __filename = url.fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const outputDirectory = path.resolve(__dirname, '../src/icons');
+
+const renderIconComponentFile = ({
+  svgIdentifier,
+  svgElements,
+  viewBox,
+}) => `
+// AUTO-GENERATED BY "scripts/generate-icons.mjs"
+// DO NOT MODIFY THIS FILE
+
+import React, { forwardRef } from 'react';
+import { SVGIcon } from '@tonic-ui/react';
+import { useIconStyle } from '../styles';
+
+const ${svgIdentifier} = forwardRef((
+  {
+    spin = false,
+    sx,
+    ...rest
+  },
+  ref,
+) => {
+  const styleProps = useIconStyle({ spin });
+  return (
+    <SVGIcon
+      ref={ref}
+      viewBox="${viewBox}"
+      sx={[
+        styleProps,
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+      {...rest}
+    >
+      ${svgElements}
+    </SVGIcon>
+  );
+});
+
+${svgIdentifier}.displayName = '${svgIdentifier}';
+
+export default ${svgIdentifier};
+`.trimStart();
+
+const renderIndexFile = ({ defaultImports }) => `
+// AUTO-GENERATED BY "scripts/generate-icons.mjs"
+// DO NOT MODIFY THIS FILE
+
+${defaultImports.map(defaultImport => (`export { default as ${defaultImport} } from './${defaultImport}';`)).join('\n')}
+`.trimStart();
+
+function kebabCaseToCapitalizedCamelCase(str) {
+  return str
+    .split('-')
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join('');
+}
+
+const iconDefinitions = tmicon.icons.reduce((acc, { name, paths, viewBox }) => {
+  return {
+    ...acc,
+    [name]: {
+      svgIdentifier: `${kebabCaseToCapitalizedCamelCase(name)}Icon`,
+      svgElements: `<g>${paths.map((path, idx) => `<path key="${name}-${idx}" d="${path}" />`)}</g>`,
+      viewBox,
+    },
+  };
+}, {});
+
+function walk(fn) {
+  return Promise.all(
+    Object.keys(iconDefinitions).map((svgIdentifier) => {
+      const iconDef = iconDefinitions[svgIdentifier];
+      return fn({ svgIdentifier, ...iconDef });
+    })
+  );
+}
+
+async function generateIcons() {
+  // generate icon component files
+  await walk(async ({ svgIdentifier, svgElements, viewBox }) => {
+    const file = path.resolve(outputDirectory, `${svgIdentifier}.js`);
+    const data = renderIconComponentFile({ svgIdentifier, svgElements, viewBox });
+    await promisify(fs.writeFile)(file, data);
+  });
+
+  // generate index.js file
+  const defaultImports = Object.keys(iconDefinitions)
+    .map((key) => iconDefinitions[key].svgIdentifier)
+    .sort();
+  const file = path.resolve(outputDirectory, 'index.js');
+  const data = renderIndexFile({ defaultImports });
+  await promisify(fs.writeFile)(file, data);
+}
+
+// check if the output directory exists and create it if not
+try {
+  fs.accessSync(outputDirectory);
+} catch (err) {
+  fs.mkdirSync(outputDirectory);
+}
+
+// clean up the output directory
+fs.readdirSync(outputDirectory).forEach((file) => fs.unlinkSync(path.resolve(outputDirectory, file)));
+
+generateIcons();
diff --git a/packages/react-icons/src/icons/AddCircleOIcon.js b/packages/react-icons/src/icons/AddCircleOIcon.js
@@ -0,0 +1,34 @@
+// AUTO-GENERATED BY "scripts/generate-icons.mjs"
+// DO NOT MODIFY THIS FILE
+
+import React, { forwardRef } from 'react';
+import { SVGIcon } from '@tonic-ui/react';
+import { useIconStyle } from '../styles';
+
+const AddCircleOIcon = forwardRef((
+  {
+    spin = false,
+    sx,
+    ...rest
+  },
+  ref,
+) => {
+  const styleProps = useIconStyle({ spin });
+  return (
+    <SVGIcon
+      ref={ref}
+      viewBox="0 0 16 16"
+      sx={[
+        styleProps,
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+      {...rest}
+    >
+      <g><path key="add-circle-o-0" d="M9 7h3v2h-3v3h-2v-3h-3v-2h3v-3h2v3zM16 8c0 4.4-3.6 8-8 8s-8-3.6-8-8 3.6-8 8-8 8 3.6 8 8zM14.5 8c0-3.6-2.9-6.5-6.5-6.5s-6.5 2.9-6.5 6.5 2.9 6.5 6.5 6.5 6.5-2.9 6.5-6.5z" /></g>
+    </SVGIcon>
+  );
+});
+
+AddCircleOIcon.displayName = 'AddCircleOIcon';
+
+export default AddCircleOIcon;