Merge alpha <- styled-system

.changeset/tall-maps-lick.md

@@ -0,0 +1,5 @@
+---
+"@channel.io/bezier-react": major
+---
+
+Export the css style sheet for the new design system.

.github/CODEOWNERS

@@ -35,7 +35,7 @@
 /packages/bezier-react/src/components/Overlay/ @sungik-choi
 /packages/bezier-react/src/components/ProgressBar/ @Dogdriip
 /packages/bezier-react/src/components/SectionLabel/ @sungik-choi
-/packages/bezier-react/src/components/Spinner/ @quino0627
+/packages/bezier-react/src/components/Spinner/ @sungik-choi
 /packages/bezier-react/src/components/Stack/ @sungik-choi
 /packages/bezier-react/src/components/Status/ @sungik-choi
 /packages/bezier-react/src/components/Tabs/ @sungik-choi

.vscode/settings.json

@@ -1,3 +1,8 @@
 {
-  "eslint.workingDirectories": [{ "mode": "auto" }]
-}
+  "eslint.workingDirectories": [
+    {
+      "mode": "auto"
+    }
+  ],
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

package.json

@@ -27,6 +27,7 @@
     "@channel.io/stylelint-config": "^1.2.0",
     "@commitlint/cli": "^17.6.5",
     "@commitlint/config-conventional": "^17.6.5",
+    "@storybook/addon-styling": "^1.3.2",
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "^7.32.0",
     "eslint-config-bezier": "workspace:*",
@@ -35,7 +36,8 @@
     "stylelint": "^13.13.1",
     "ts-node": "^10.9.1",
     "turbo": "^1.10.3",
-    "typescript": "^4.9.5"
+    "typescript": "^4.9.5",
+    "typescript-plugin-css-modules": "^5.0.1"
   },
   "engines": {
     "node": "18.15.0",

packages/bezier-react/.eslintrc.js

@@ -46,7 +46,7 @@ module.exports = {
             position: 'after',
           },
           {
-            pattern: './**/*.styled',
+            pattern: './**/*.+(styled|scss)',
             group: 'sibling',
             position: 'after',
           },

packages/bezier-react/.storybook/main.js

@@ -16,6 +16,14 @@ module.exports = {
     '@storybook/addon-toolbars',
     '@storybook/addon-docs',
     '@storybook/addon-backgrounds',
+    {
+      name: '@storybook/addon-styling',
+      options: {
+        sass: {
+          implementation: require('sass'),
+        },
+      },
+    },
   ],
   features: {
     postcss: false,

packages/bezier-react/.storybook/preview.js

@@ -12,6 +12,8 @@ import {
 import BezierProvider from '~/src/providers/BezierProvider'
 import { Text } from '~/src/components/Text'
 
+import '~/src/styles/index.scss'
+
 const FoundationKeyword = {
   Light: 'light',
   Dark: 'dark',

packages/bezier-react/package.json

@@ -15,9 +15,16 @@
       "types": "./dist/types/index.d.ts",
       "require": "./dist/cjs/index.js",
       "import": "./dist/esm/index.mjs"
+    },
+    "./style.css": {
+      "require": "./dist/cjs/style.css",
+      "import": "./dist/esm/style.css"
     }
   },
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
   "files": [
     "dist",
     "!dist/*.tsbuildinfo",
@@ -92,6 +99,7 @@
     "@types/react-dom": "^18.2.6",
     "@types/styled-components": "^5.1.26",
     "@types/uuid": "^9.0.2",
+    "autoprefixer": "^10.4.14",
     "babel-loader": "^9.1.2",
     "babel-plugin-styled-components": "^2.1.3",
     "babel-preset-react-app": "^10.0.1",
@@ -108,8 +116,11 @@
     "react-dom": "^18.2.0",
     "rollup": "^3.25.1",
     "rollup-plugin-node-externals": "^6.1.1",
+    "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-visualizer": "^5.9.2",
+    "sass": "^1.63.6",
     "styled-components": "^5.3.11",
+    "the-new-css-reset": "^1.9.0",
     "ts-prune": "^0.10.3",
     "tsconfig": "workspace:*",
     "tsconfig-paths-webpack-plugin": "^4.0.1",

packages/bezier-react/rollup.config.mjs

@@ -8,8 +8,10 @@ import babel from '@rollup/plugin-babel'
 import commonjs from '@rollup/plugin-commonjs'
 import { nodeResolve } from '@rollup/plugin-node-resolve'
 import url from '@rollup/plugin-url'
+import autoprefixer from 'autoprefixer'
 import { defineConfig } from 'rollup'
 import nodeExternals from 'rollup-plugin-node-externals'
+import postcss from 'rollup-plugin-postcss'
 import { visualizer } from 'rollup-plugin-visualizer'
 
 const pkg = JSON.parse(
@@ -33,6 +35,17 @@ const generateConfig = ({
         replacement: rootDir,
       }],
     }),
+    postcss({
+      extract: 'style.css',
+      autoModules: true,
+      modules: {
+        /**
+         * ex. Bezier-Button__Button__1w3e4
+         */
+        generateScopedName: 'Bezier-[folder]__[local]__[hash:base64:5]',
+      },
+      plugins: [autoprefixer()],
+    }),
     /**
      * **IMPORTANT**: Order matters!
      * If you're also using @rollup/plugin-node-resolve, make sure this plugin comes before it in the plugins array

packages/bezier-react/src/components/Button/__snapshots__/Button.test.tsx.snap

@@ -213,21 +213,6 @@ exports[`Button Test > Disabled Test > Button can have disabled attribute 1`] =
 `;
 
 exports[`Button Test > Loading Test > Active prop change Button to hover style 1`] = `
-.c5 {
-  display: inline-block;
-  width: 16px;
-  height: 16px;
-  border-style: solid;
-  border-width: 2px;
-  border-top-color: transparent;
-  border-right-color: inherit;
-  border-bottom-color: inherit;
-  border-left-color: inherit;
-  border-radius: 50%;
-  -webkit-animation: epmXAj 1s infinite linear;
-  animation: epmXAj 1s infinite linear;
-}
-
 .c2 {
   font-size: 1.4rem;
   line-height: 1.8rem;
@@ -355,9 +340,8 @@ exports[`Button Test > Loading Test > Active prop change Button to hover style 1
     class="c4"
   >
     <div
-      class="c5"
+      class="Spinner s"
       data-testid="bezier-react-spinner"
-      size="16"
     />
   </div>
 </button>

packages/bezier-react/src/components/Spinner/Spinner.module.scss

@@ -0,0 +1,60 @@
+@mixin size($size) {
+  width: $size;
+  height: $size;
+}
+
+@layer components {
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  .Spinner {
+    --bezier-spinner-color: inherit;
+
+    display: inline-block;
+    border-style: solid;
+    border-top-color: transparent;
+    border-right-color: var(--bezier-spinner-color);
+    border-bottom-color: var(--bezier-spinner-color);
+    border-left-color: var(--bezier-spinner-color);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+
+    &.xl {
+      @include size(50px);
+      border-width: 4px;
+    }
+
+    &.l,
+    &.m {
+      border-width: 3px;
+    }
+
+    &.l {
+      @include size(24px);
+    }
+
+    &.m {
+      @include size(20px);
+    }
+
+    &.s,
+    &.xs {
+      border-width: 2px;
+    }
+
+    &.s {
+      @include size(16px);
+    }
+
+    &.xs {
+      @include size(12px);
+    }
+  }
+}

packages/bezier-react/src/components/Spinner/Spinner.stories.tsx

@@ -36,4 +36,5 @@ const Template: Story<SpinnerProps> = ({ ...args }) => <Spinner {...args} />
 export const Primary = Template.bind({})
 Primary.args = {
   size: SpinnerSize.M,
+  color: 'bg-black-dark',
 }