feat(ui-kit): 섀도우 스타일, 스토리북 추가 (#21)

ui-kit/.storybook/main.js

@@ -1,10 +1,16 @@
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+
 module.exports = {
-  "stories": [
-    "../src/**/*.stories.mdx",
-    "../src/**/*.stories.@(ts|tsx)"
+  stories: [
+    '../src/**/*.stories.mdx',
+    '../src/**/*.stories.@(ts|tsx)',
   ],
-  "addons": [
-    "@storybook/addon-essentials",
-    "@storybook/preset-create-react-app"
-  ]
+  addons: [
+    '@storybook/addon-essentials',
+    '@storybook/preset-create-react-app',
+  ],
+  webpackFinal: async (config) => {
+    config.resolve.plugins.push(new TsconfigPathsPlugin({}));
+    return config;
+  },
 }

ui-kit/package.json

@@ -82,6 +82,7 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^3.1.8",
     "rollup-plugin-typescript2": "^0.29.0",
-    "sass": "^1.29.0"
+    "sass": "^1.29.0",
+    "tsconfig-paths-webpack-plugin": "^3.3.0"
   }
 }

ui-kit/src/sass/utils/_index.scss

@@ -1,3 +1,4 @@
 @import './font';
 @import './font-weights';
 @import './typography';
+@import './shadows';

ui-kit/src/sass/utils/_shadows.scss

@@ -0,0 +1,18 @@
+@mixin shadow($shadow-level, $offset-y, $blur-radius) {
+  $shadow: '0px #{$offset-y} #{$blur-radius} rgba(0, 0, 0, 0.1)';
+
+  :root {
+    --lubycon-shadow-#{$shadow-level}: #{$shadow};
+  }
+
+  .lubycon-shadow--#{$shadow-level} {
+    box-shadow: #{$shadow};
+    box-shadow: var(--lubycon-shadow-#{$shadow-level});
+  }
+}
+
+@include shadow(1, 2px, 5px);
+@include shadow(2, 3px, 5px);
+@include shadow(3, 6px, 10px);
+@include shadow(4, 8px, 12px);
+@include shadow(5, 24px, 48px);

ui-kit/src/components/Button/index.stories.tsx → ui-kit/src/stories/Button.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Button from './index';
+import Button from 'components/Button';
 import { Meta } from '@storybook/react/types-6-0';
 
 export default {

ui-kit/src/stories/Shadows.stories.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Meta } from '@storybook/react/types-6-0';
+import clxs from 'classnames';
+import Text from 'components/Text';
+
+export default {
+  title: 'Lubycon UI Kit/Shadows',
+} as Meta;
+
+const shadows = ['0px', '2px 드랍다운', '3px 버튼, 카드', '6px 토스트', '8px 탭', '24px 모달 팝업'];
+
+export const Default = () => {
+  return (
+    <ul style={{ margin: 0, padding: 0 }}>
+      {shadows.map((shadow, index) => (
+        <li key={index} style={{ listStyle: 'none', marginBottom: 30 }}>
+          <div
+            className={clxs([`lubycon-shadow--${index}`])}
+            style={{
+              display: 'flex',
+              alignItems: 'flex-end',
+              height: 80,
+              borderRadius: 8,
+              backgroundColor: '#fcfcfd',
+              padding: 34,
+            }}
+          >
+            <Text typography="content2">{shadow}</Text>
+          </div>
+        </li>
+      ))}
+    </ul>
+  );
+};

ui-kit/src/components/Text/index.stories.tsx → ui-kit/src/stories/Text.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import Text from './index';
+import Text from 'components/Text';
 import { Meta } from '@storybook/react/types-6-0';
-import { typographys, Typographys, FontWeights, fontWeights } from './types';
+import { typographys, Typographys, FontWeights, fontWeights } from 'components/Text/types';
 
 export default {
   title: 'Lubycon UI Kit/Text',

yarn.lock

@@ -5090,7 +5090,7 @@ ccount@^1.0.0:
   resolved "https://registry.yarnpkg.com/ccount/-/ccount-1.1.0.tgz#246687debb6014735131be8abab2d93898f8d043"
   integrity sha512-vlNK021QdI7PNeiUh/lKkC/mNHHfV0m/Ad5JoI0TYtlBnJAslM/JIkm/tGC88bkLIwO6OQ5uV6ztS6kVAtCDlg==
 
-chalk@2.4.2, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.2, chalk@^2.4.1, chalk@^2.4.2:
+chalk@2.4.2, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.3.2, chalk@^2.4.1, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
   integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
@@ -7035,7 +7035,7 @@ endent@^2.0.1:
     fast-json-parse "^1.0.3"
     objectorarray "^1.0.4"
 
-enhanced-resolve@^4.3.0:
+enhanced-resolve@^4.0.0, enhanced-resolve@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.3.0.tgz#3b806f3bfafc1ec7de69551ef93cca46c1704126"
   integrity sha512-3e87LvavsdxyoCfGusJnrZ5G8SLPOFeHSNpZI/ATL9a5leXo2k0w6MKnbqhdBad9qTobSfB20Ld7UmgoNbAZkQ==
@@ -17025,7 +17025,16 @@ ts-pnp@1.2.0, ts-pnp@^1.1.6:
   resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
   integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==
 
-tsconfig-paths@^3.9.0:
+tsconfig-paths-webpack-plugin@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/tsconfig-paths-webpack-plugin/-/tsconfig-paths-webpack-plugin-3.3.0.tgz#a7461723c20623ca9148621a5ce36532682ad2ff"
+  integrity sha512-MpQeZpwPY4gYASCUjY4yt2Zj8yv86O8f++3Ai4o0yI0fUC6G1syvnL9VuY71PBgimRYDQU47f12BEmJq9wRaSw==
+  dependencies:
+    chalk "^2.3.0"
+    enhanced-resolve "^4.0.0"
+    tsconfig-paths "^3.4.0"
+
+tsconfig-paths@^3.4.0, tsconfig-paths@^3.9.0:
   version "3.9.0"
   resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.9.0.tgz#098547a6c4448807e8fcb8eae081064ee9a3c90b"
   integrity sha512-dRcuzokWhajtZWkQsDVKbWyY+jgcLC5sqJhg2PSgf4ZkH2aHPvaOY8YWGhmjb68b5qqTfasSsDO9k7RUiEmZAw==