@channel.io/bezier-icons npm package (#1366)

* feat(bezier-icons): npm init

* chore(bezier-react): enhance package.json

* chore(bezier-figma-plugin): enhance package.json

* feat(bezier-icons): add svg assets and scripts

* feat(bezier-icons): set up package, apply path changes

* chore(deps): re-install

* build(bezier-icons): enhance icon generation setting

* feat(bezier-icons): generate icons

* feat(bezier-icons): remove a11y label util

* chore(deps): add @types/react

* feat(bezier-icons): add svgo package and configure optimization setting

* feat(bezier-icons): make createBezierIcon fn to have no side effects

* feat(bezier-react): configure svgr option and refactor & format icon templates

* feat(bezier-icons): generate react icons

* build(bezier-icons): init rollup config

* build(bezier-icons): experiment with build settings

* chore: experiment with build settings

* build(bezier-icons): experiment with build settings

* build(bezier-icons): add Utility Modules

* feat(bezier-icons): remove generated icons

* chore(bezier-react): remove unused js file

fix lint config

* feat(bezier-icons): export icons obj

* feat(bezier-icons): generate type declaration

* build(bezier-react): config npm package

* feat(bezier-icons): add IconName and icons obj type declaration

* build(bezier-icons): clean up dependencies and scripts

* build(bezier-icons): refactor rollup config

* feat(bezier-icons): enhance icon source type

* build(bezier-icons): add jest and test scripts

* build(bezier-icons): npm package settings

* fix(bezier-icons): add missing utils export

* chore(github): add codeowner

* docs(bezier-icons): add README.md

* docs: update README.md

* chore(changeset): add changeset

* build(bezier-icons): change initial version

* docs(bezier-icons): update readme

* feat(bezier-icons): update icons

* chore(bezier-icons): add dev script

* chore: fix release script and make dev script to run storybook

* docs: update readme.md

Author: sungik-choi

.changeset/clever-dragons-grin.md

@@ -0,0 +1,5 @@
+---
+"@channel.io/bezier-icons": minor
+---
+
+First release

.github/CODEOWNERS

@@ -6,6 +6,10 @@
 
 /packages/bezier-figma-plugin/ @sungik-choi
 
+# Owner of bezier-icons
+
+/packages/bezier-icons/ @sungik-choi
+
 # Owner of bezier-react
 
 /packages/bezier-react/src/components/AutoFocus/ @sungik-choi

README.md

@@ -9,6 +9,7 @@
 | Name | Description |
 |---|---|
 | [bezier-react](packages/bezier-react) | React components library that implements Bezier Design System. |
+| [bezier-icons](packages/bezier-icons) | Icon library that implements the Bezier Design System. |
 | [bezier-figma-plugin](packages/bezier-figma-plugin) | Figma plugin that helps build Bezier Design System and increase productivity. |
 
 ## Commands
@@ -34,21 +35,20 @@ yarn build --filter=<workspace>
 ### Run Storybook
 
 ```bash
-yarn storybook
+yarn dev
 ```
 
 ### Other Commands
 
 | Command | Description |
 |---|---|
-| `yarn dev` | Runs Storybook and Builds Figma plugin in watch mode |
 | `yarn test` | Tests all workspaces |
 | `yarn lint` | Lints all workspaces |
-| `yarn typecheck` | Compiles `bezier-react` |
+| `yarn typecheck` | Type checks all workspaces |
 | `yarn clean` | Remove generated files |
 | `yarn update-snapshot` | Update test snapshots of `bezier-react` |
 
-## Contribute
+## Contributing
 
 See [contribution guide](CONTRIBUTING.md).
 

package.json

@@ -7,14 +7,13 @@
   ],
   "scripts": {
     "build": "turbo run build",
-    "dev": "turbo run dev --no-cache --parallel",
+    "dev": "turbo run dev --filter=@channel.io/bezier-react",
     "lint": "turbo run lint",
     "typecheck": "turbo run typecheck",
     "test": "turbo run test",
     "test:ci": "turbo run test:ci",
     "clean": "turbo run clean && rm -rf node_modules .turbo",
-    "release": "turbo run build --filter=@channel.io/bezier-react && changeset publish",
-    "storybook": "yarn workspace @channel.io/bezier-react storybook",
+    "release": "turbo run build --filter='@channel.io/*' && changeset publish",
     "update-snapshot": "yarn workspace @channel.io/bezier-react update-snapshot",
     "pre-commit": "run-s verify lint-staged typecheck test",
     "verify": "ts-node -P ./supports/tsconfig/script.json ./scripts/check-yarn-version.ts",

packages/bezier-figma-plugin/README.md

@@ -18,7 +18,7 @@ Open the Figma desktop app
 Plugins > Development > Import plugin from manifest
 ```
 
-## Contribute
+## Contributing
 
 See [contribution guide](../../CONTRIBUTING.md).
 

packages/bezier-figma-plugin/package.json

@@ -2,7 +2,12 @@
   "name": "bezier-figma-plugin",
   "version": "0.2.1",
   "private": true,
-  "description": "Figma plugin that helps build Bezier Design System and increase productivity.",
+  "description": "Figma plugin that helps build the Bezier design system and increase productivity.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/channel-io/bezier-react",
+    "directory": "packages/bezier-figma-plugin"
+  },
   "scripts": {
     "build": "webpack --mode=production",
     "dev": "webpack --mode=development --watch",

packages/bezier-icons/.eslintignore

@@ -0,0 +1,2 @@
+node_modules
+dist

packages/bezier-icons/.eslintrc.js

@@ -0,0 +1,35 @@
+module.exports = {
+  root: true,
+  extends: ['bezier'],
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: './tsconfig.eslint.json',
+  },
+  rules: {
+    'sort-imports': [
+      'error',
+      {
+        ignoreDeclarationSort: true,
+      },
+    ],
+    'import/order': [
+      'error',
+      {
+        'newlines-between': 'always',
+        alphabetize: { order: 'asc' },
+        groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'],
+        pathGroupsExcludedImportTypes: ['react'],
+        pathGroups: [
+          {
+            pattern: 'react',
+            group: 'external',
+            position: 'before',
+          },
+        ],
+      },
+    ],
+    'react/react-in-jsx-scope': 'off',
+    'react/jsx-props-no-spreading': 'off',
+    '@typescript-eslint/naming-convention': 'off',
+  },
+}

packages/bezier-icons/.lintstagedrc.json

@@ -0,0 +1,3 @@
+{
+  "**/*.(js|ts)?(x)": "yarn lint"
+}

packages/bezier-icons/README.md

@@ -0,0 +1,68 @@
+# Bezier Icons
+
+Bezier Icons is a icon library that implements the Bezier Design System.
+
+## Installation
+
+1. (Recommend) Install `@channel.io/bezier-react` if you haven’t already.
+2. Install `@channel.io/bezier-icons` as a dependency.
+
+### npm
+
+```bash
+npm i @channel.io/bezier-icons
+```
+
+### yarn
+
+```bash
+yarn add @channel.io/bezier-icons
+```
+
+## Usage
+
+All icons are available as individual React components. We recommend using them with the `Icon` component from our `@channel.io/bezier-react` library.
+
+```tsx
+import { Icon } from '@channel.io/bezier-react'
+import { AllIcon } from '@channel.io/bezier-icons'
+
+function Component() {
+  return (
+    <div>
+      <Icon source={AllIcon} />
+    </div>
+  );
+}
+```
+
+You can also use them individually.
+
+```tsx
+import { AllIcon } from '@channel.io/bezier-icons'
+
+function Component() {
+  return (
+    <div>
+      <AllIcon />
+    </div>
+  );
+}
+```
+
+If you need to validate the icon source component, use the utility function `isBezierIcon`.
+
+```tsx
+import { isBezierIcon, AllIcon } from '@channel.io/bezier-icons'
+
+console.log(isBezierIcon(AllIcon)) // true
+console.log(isBezierIcon(<svg />)) // false
+```
+
+## Contributing
+
+See [contribution guide](../../CONTRIBUTING.md).
+
+## Maintainers
+
+This package is mainly contributed by Channel Corp. Although feel free to contribution, or raise concerns!

packages/bezier-icons/babel.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  presets: [
+    '@babel/preset-env',
+    /**
+     * Will use the native built-in instead of trying to polyfill behavior for any plugins that require one.
+     * Remove the helper function for Object.assign.
+     * @see https://babeljs.io/docs/babel-preset-react#usebuiltins
+     */
+    ['@babel/preset-react', { useBuiltIns: true }],
+    ['@babel/preset-typescript', { isTSX: true, allExtensions: true }],
+  ],
+}