fix: Storybook 빌드 에러 수정 (#118)

* fix: tsconfig에서 legacy 디렉토리 exclude하도록 변경

* fix: storybook build error

.yarn/build-state.yml

@@ -3,20 +3,20 @@
 
 # core-js-pure@npm:3.15.2
 "2b9d54bed09edbafda0a9ce9f0deda44bf0efa20a7b5f95fe23989dc8c819b47060dc585fe847db1ac1bd37446f744ace40b4f278c3dd220a77dbead039008ef":
-  eb6857e4683392fba0b68f36b4d0dd0d4b001db6145975b4f11e8b130f9a728f6c9b89615651e2ace03b30a688f37e797ac6290f6fb933c1fe735dea28dc7295
+  69aad89bf5f246e29ef7dd093c93a80ae18b13c246669c34d1888e15f2c1cd72e05661a9e7d2422bb56a13e38868648ad9a0cda9e137b412050a0996bb264246
 
 # core-js@npm:2.6.12
 "0b93d77d31629ea22008e81fc0f5432252f9d8d4985cb82c4253a1aa05054d1dc0f9f59daf4668987876afb8a8adc93e90748dfdcc90cd8312236b6ebc616a70":
-  a19a7eee0bc83fdddf67afd293921ae1be5ee227a98a272300358148f36a54f727d8cc13249a6f93bc11b58494502bbee1fdfaec35d61b9a471a49f085ddaf7e
+  4e812c3b5eae1ee2e41011a4dbcc6ad6938f20233384b1e7bb763d4171966b3c7e6e8ad73bcfcd116941342a08f18dfaa37a411de985b930413c214b3c91f8f6
 
 # core-js@npm:3.15.2
 "6825052e106ce6ce8698952435c5ffbf482aa0c3cb5ecc901d7a0c7e5d39bd3e7df34bb42d53780c9a05ed0f299a233b9d54c689f2f5489bdc46ee55393184f2":
-  85c12cdc1edc9c673fc14fdc5bdb424c63b2dc40a1d040d3b41a25eb0aea321af1b042e2ba27ef39b257970a557e0fc2bba0a4919bd943860d2672880ec55ee3
+  24c37451aa43488548f0ad13d41f98d1daa2005fab2067bb107ca659de7633da2560e4a59f6507e6c7cf530439cb68f4b57b3205eb101b93d15c6fd9ae6fc561
 
 # ejs@npm:2.7.4
 "879ed38a4e6f542ab08c36367888dd2c675bef03e81327d75da644a9795ff2d91c34d3cc00a725a6332b56c51ff7cd6a6c5e8c9f9411e6c41bf42b356e1e2417":
-  2800ae71516d923f0cce751da8b86c87467e806468d8785fef7e5169fab9651e9fd4a2486f17f03c965e2a21201631e9a41a3c2a570d783e6864b45c85337187
+  f3f9f4372164a036af0fce1295bcc52fcc59f4c822bb06ff6e7871e4efd2fd0e199bd1c234592f0494b0080fb34417e015cff6266d2362802b89fa1a2bbf1503
 
 # fsevents@patch:fsevents@npm%3A1.2.13#builtin<compat/fsevents>::version=1.2.13&hash=11e9ea
 "268c0b888ddfb611722b2ffd60f6a12729aed7f4e910e41b46d22ec5d652b177b3680e939f37b6278ca5903c81ec55105f93c7fc0944e125761166786225180b":
-  d807b649214af472bd6a8ddf89c1cfc2161f81fa3791b063e6759e1ed4a4d428d804b4c76c244d717024ba53415ee7b6161a4740d8d3b63ae86086d0341baf2f
+  0e0f75053d908a61aae244491494c388c78ae15af8a897f95e612ed61c56a921df9621399cc5609b1a3fc99d03546f9ebbc1493e7f6915a9c1f70dd2e67c2a87

package.json

@@ -32,7 +32,7 @@
   "scripts": {
     "dev": "yarn start",
     "start": "start-storybook -p 6006 --no-dll --no-manager-cache",
-    "build": "yarn clean && rollup -c && yarn copy && tsc --emitDeclarationOnly -p ./tsconfig.build.json",
+    "build": "yarn clean && rollup -c && yarn copy && tsc --emitDeclarationOnly -p ./tsconfig.json",
     "build-stories": "yarn build-storybook -o ./storybook-static -s ./public --docs",
     "publish-stories": "node ./.storybook/deploy.js",
     "test": "react-scripts test",
@@ -41,7 +41,7 @@
     "copy": "ncp package.json dist/package.json",
     "copy-sass": "ncp src/sass/modules dist/sass",
     "copy-version": "ncp dist/package.json package.json",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit -p ./tsconfig.json"
   },
   "eslintConfig": {
     "extends": [
@@ -120,7 +120,7 @@
     "rollup-plugin-typescript2": "^0.29.0",
     "sass": "^1.29.0",
     "semantic-release": "^17.2.4",
-    "tsconfig-paths-webpack-plugin": "^3.3.0",
+    "tsconfig-paths-webpack-plugin": "^3.5.1",
     "typescript": "^4.0.3",
     "webpack-hot-middleware": "^2.25.0"
   }

src/components/Accordion/index.tsx

@@ -1,10 +1,10 @@
 import { forwardRef, useEffect, useRef, useState } from 'react';
-import { CombineElementProps } from 'src/types/utils';
+import { CombineElementProps } from '../../types/utils';
 import classnames from 'classnames';
 import Icon from '../Icon';
 import Text from '../Text';
-import { colors } from 'src/constants/colors';
-import { useElementSize } from 'src';
+import { colors } from '../../constants/colors';
+import useElementSize from '../../hooks/useElementSize';
 
 type Props = CombineElementProps<
   'div',

src/components/Button/index.tsx

@@ -1,8 +1,8 @@
 import { Ref, forwardRef } from 'react';
 import classnames from 'classnames';
-import { CombineElementProps } from 'src/types/utils';
+import { CombineElementProps } from '../../types/utils';
 import Text from '../Text';
-import { SemanticColor } from 'src/constants/colors';
+import { SemanticColor } from '../../constants/colors';
 
 interface ButtonBaseProps {
   size?: 'small' | 'medium' | 'large';

src/components/Grid/Column.tsx

@@ -1,6 +1,6 @@
-import React, { ElementType, useMemo } from 'react';
+import { ElementType, useMemo, forwardRef } from 'react';
 import { ColumnSize, ColumnResponsive, DEFAULT_ELEMENT } from './types';
-import { OverridableProps } from 'types/OverridableProps';
+import { OverridableProps } from '../../types/OverridableProps';
 import classNames from 'classnames';
 
 const sizes: ColumnResponsive[] = ['xl', 'lg', 'md', 'sm', 'xs'];
@@ -39,4 +39,4 @@ const Column = <T extends React.ElementType = typeof DEFAULT_ELEMENT>(
   );
 };
 
-export default React.forwardRef(Column) as typeof Column;
+export default forwardRef(Column) as typeof Column;

src/components/Grid/Row.tsx

@@ -1,7 +1,7 @@
 import { ElementType, Ref, forwardRef } from 'react';
 import { DEFAULT_ELEMENT } from './types';
 import classnames from 'classnames';
-import { OverridableProps } from 'src/types/OverridableProps';
+import { OverridableProps } from '../../types/OverridableProps';
 
 type BaseAlign = 'flex-start' | 'center' | 'flex-end';
 interface RowBaseProps {

src/components/Icon/index.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useState } from 'react';
 import classnames from 'classnames';
-import { colors } from 'src/constants/colors';
-import { CombineElementProps } from 'src/types/utils';
-import { IconName } from 'src/types/icon';
+import { colors } from '../../constants/colors';
+import { CombineElementProps } from '../../types/utils';
+import { IconName } from '../../types/icon';
 import { fetchIcon, getIconName, getIconType, getIconUrl } from './utils';
 
 const iconCache: Record<string, string> = {};

src/components/LubyconUIKitProvider/index.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import { PortalProvider } from 'contexts/Portal';
-import { OverlayProvider } from 'contexts/Overlay';
+import { PortalProvider } from '../../contexts/Portal';
+import { OverlayProvider } from '../../contexts/Overlay';
 
 interface Props {
   children: ReactNode;

src/components/Skeleton/Circle.tsx

@@ -1,4 +1,4 @@
-import { CombineElementProps } from 'src/types/utils';
+import { CombineElementProps } from '../../types/utils';
 
 type Props = Omit<
   CombineElementProps<

src/components/Skeleton/Rect.tsx

@@ -1,4 +1,4 @@
-import { CombineElementProps } from 'src/types/utils';
+import { CombineElementProps } from '../../types/utils';
 
 type Props = Omit<
   CombineElementProps<

src/components/Skeleton/index.tsx

@@ -1,5 +1,5 @@
-import { CombineElementProps } from 'src/types/utils';
-import { colors } from 'src/constants/colors';
+import { CombineElementProps } from '../../types/utils';
+import { colors } from '../../constants/colors';
 import { useAnimateGradient } from './useAnimateGradient';
 import Rect from './Rect';
 import Circle from './Circle';

src/components/Skeleton/useAnimateGradient.tsx

@@ -1,6 +1,5 @@
-import { useCallback } from 'react';
-import { useState } from 'react';
-import { useAnimationFrame } from 'src/hooks/useAnimationFrame';
+import { useCallback, useState } from 'react';
+import { useAnimationFrame } from '../../hooks/useAnimationFrame';
 
 const gradientDegree = 90;
 

src/components/Text/index.tsx

@@ -1,6 +1,6 @@
 import { ElementType, Ref, forwardRef } from 'react';
 import { DEFAULT_ELEMENT, FontWeights, Typographys } from './types';
-import { OverridableProps } from 'types/OverridableProps';
+import { OverridableProps } from '../../types/OverridableProps';
 import classnames from 'classnames';
 
 interface TextBaseProps {

src/components/Tooltip/TooltipBody.tsx

@@ -1,7 +1,7 @@
 import { forwardRef, Ref } from 'react';
 import classnames from 'classnames';
 import Text from '../Text';
-import { CombineElementProps } from 'src/types/utils';
+import { CombineElementProps } from '../../types/utils';
 
 export type TooltipArrowDirection =
   | 'top-left'

src/components/Tooltip/index.tsx

@@ -1,7 +1,7 @@
-import { cloneElement, ReactElement, useState, useMemo, useCallback } from 'react';
+import { Fragment, cloneElement, ReactElement, useState, useMemo, useCallback } from 'react';
 import { animated, useSpring } from 'react-spring';
-import { Portal } from 'src/contexts/Portal';
-import { CombineElementProps } from 'src/types/utils';
+import { Portal } from '../../contexts/Portal';
+import { CombineElementProps } from '../../types/utils';
 import TooltipBody from './TooltipBody';
 import { OffsetPosition, TooltipElementSize, TooltipPosition } from './types';
 import { getArrowDirection, getTooltipPosition } from './utils';
@@ -48,7 +48,7 @@ const Tooltip = ({ show, children, message, position = 'top-center', ...props }:
   });
 
   return (
-    <>
+    <Fragment>
       {cloneElement(children, {
         ref: childRef,
       })}
@@ -62,7 +62,7 @@ const Tooltip = ({ show, children, message, position = 'top-center', ...props }:
           </TooltipBody>
         </animated.div>
       </Portal>
-    </>
+    </Fragment>
   );
 };
 

src/components/Tooltip/utils.ts

@@ -1,4 +1,4 @@
-import { getAbsoluteOffset } from 'utils/dom';
+import { getAbsoluteOffset } from '../../utils/dom';
 import { TooltipArrowDirection } from './TooltipBody';
 import { OffsetPosition, TooltipElementSize, TooltipPosition } from './types';
 

src/components/TransitionMotion/index.tsx

@@ -1,6 +1,6 @@
-import { CSSProperties, ElementType, PropsWithChildren } from 'react';
+import { Fragment, CSSProperties, ElementType, PropsWithChildren } from 'react';
 import { TransitionKeyProps, useTransition, animated } from 'react-spring';
-import { OverridableProps } from 'src/types/OverridableProps';
+import { OverridableProps } from '../../types/OverridableProps';
 
 type Props<E extends ElementType = 'div'> = OverridableProps<
   E,
@@ -37,15 +37,15 @@ const TransitionMotion = ({
   const Component = animated[as ?? 'div'];
 
   return (
-    <>
+    <Fragment>
       {transitions.map(({ item, key, props }) => {
         return item ? (
           <Component key={key} {...rest} style={{ ...style, ...props }}>
             {children}
           </Component>
         ) : null;
       })}
-    </>
+    </Fragment>
   );
 };
 

src/contexts/Overlay/OverlayContext.tsx

@@ -8,7 +8,7 @@ import {
   useMemo,
 } from 'react';
 import { useContext } from 'react';
-import { Portal } from 'src';
+import { Portal } from '../Portal';
 
 interface OverlayValues {
   addToArea: (overlayId: string, element: ReactNode) => void;

src/contexts/Overlay/useOverlay.tsx

@@ -1,7 +1,5 @@
-import { useCallback } from 'react';
-import { useRef } from 'react';
-import { useMemo } from 'react';
-import { generateID } from 'src/utils';
+import { useCallback, useRef, useMemo } from 'react';
+import { generateID } from '../../utils';
 import { useOverlayArea } from './OverlayContext';
 import StateReacter, { StateReacterControl } from './StateReacter';
 import { OverlayController } from './types';

src/hooks/useElementSize.ts

@@ -11,7 +11,7 @@ const DEFAULT_CASE = {
   height: 0,
 };
 
-function useElementSize(ref: RefObject<HTMLElement>) {
+export function useElementSize(ref: RefObject<HTMLElement>) {
   return useMemo(() => {
     if (!ref.current) {
       return DEFAULT_CASE;

src/stories/Components/Accordion/index.stories.mdx

@@ -1,4 +1,4 @@
-import { Accordion } from 'src';
+import Accordion from '../../../components/Accordion';
 import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
 
 <Meta title="Components/Accordion" components={Accordion} />

src/stories/Components/Grid/data.ts

@@ -1,5 +1,5 @@
 import { CSSProperties } from 'react';
-import { colors } from 'src';
+import { colors } from '../../../constants/colors';
 
 export const columns = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
 export const columnStyle: CSSProperties = {

src/stories/Components/Grid/index.stories.mdx

@@ -1,4 +1,6 @@
-import { Column, Row, Text, colors } from 'src';
+import { Column, Row } from '../../../components/Grid';
+import Text from '../../../components/Text';
+import { colors } from '../../../constants/colors';
 import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
 import { columns, columnStyle } from './data';
 

src/stories/Components/Icons/data.ts

@@ -1,6 +1,6 @@
-import { colors } from 'src';
-import { IconName, LogoIconName } from 'src/types/icon';
-import { IconType } from 'src/components/Icon';
+import { colors } from '../../../constants/colors';
+import { IconName, LogoIconName } from '../../../types/icon';
+import { IconType } from '../../../components/Icon';
 
 export const commonIcons: IconName[] = [
   'accessibility',

src/stories/Components/Icons/index.stories.mdx

@@ -1,7 +1,8 @@
-import { Icon, Text, colors, Row, Column } from 'src';
-import { IconType } from 'src/components/Icon';
+import { Row, Column } from '../../../components/Grid';
+import Text from '../../../components/Text';
+import Icon, { IconType } from '../../../components/Icon';
 import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-import { ColorProperty } from 'src/constants/colors';
+import { colors, ColorProperty } from '../../../constants/colors';
 import { Fragment } from 'react';
 
 <Meta title="Components/Icon" components={Icon} />

src/stories/Components/Modal/Components.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
-import Button from 'components/Button';
+import Button from '../../../components/Button';
 import Modal, { ModalHeader, ModalContent, ModalFooter } from './Modal';
-import { Column } from 'src/components/Grid';
+import { Column } from '../../../components/Grid';
 import { useOverlayModal } from './useOverlayModal';
 
 interface FooterProps {

src/stories/Components/Modal/Modal/ModalContent.tsx

@@ -1,8 +1,8 @@
 import { ReactNode, isValidElement } from 'react';
 import classnames from 'classnames';
-import Text from 'components/Text';
-import { Typographys } from 'components/Text/types';
-import { CombineElementProps } from 'types/utils';
+import Text from '../../../../components/Text';
+import { Typographys } from '../../../../components/Text/types';
+import { CombineElementProps } from '../../../../types/utils';
 
 type ModalContentProps = CombineElementProps<
   'div',

src/stories/Components/Modal/Modal/ModalFooter.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { CombineElementProps } from 'src/types/utils';
+import { CombineElementProps } from '../../../../types/utils';
 import classnames from 'classnames';
 
 type ModalFooterProps = CombineElementProps<

src/stories/Components/Modal/Modal/ModalHeader.tsx

@@ -1,7 +1,7 @@
 import { ReactNode, isValidElement } from 'react';
-import Text from 'components/Text';
-import { Typographys } from 'components/Text/types';
-import { CombineElementProps } from 'src/types/utils';
+import Text from '../../../../components/Text';
+import { Typographys } from '../../../../components/Text/types';
+import { CombineElementProps } from '../../../../types/utils';
 import classnames from 'classnames';
 
 type ModalHeaderProps = CombineElementProps<

src/stories/Components/Modal/Modal/ModalWindow.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import classnames from 'classnames';
-import { CombineElementProps } from 'src/types/utils';
+import { CombineElementProps } from '../../../../types/utils';
 
 type ModalWindowProps = CombineElementProps<
   'div',

src/stories/Components/Modal/Modal/index.tsx

@@ -1,9 +1,9 @@
 import React, { ReactElement, cloneElement, useRef, useCallback, useEffect, Children } from 'react';
 import ModalBackdrop from './ModalBackdrop';
 import ModalWindow from './ModalWindow';
-import { generateID } from 'utils/index';
-import { CombineElementProps } from 'src/types/utils';
-import { TransitionMotion } from 'src';
+import { generateID } from '../../../../utils/index';
+import { CombineElementProps } from '../../../../types/utils';
+import TransitionMotion from '../../../../components/TransitionMotion';
 
 export type ModalProps = CombineElementProps<
   'div',

src/stories/Components/Modal/useOverlayModal.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { useOverlay } from 'src';
+import { useOverlay } from '../../../contexts/Overlay';
 import Modal, { ModalContent } from './Modal';
 
 export function useOverlayModal() {

src/stories/Components/ProgressBar/Components.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useState } from 'react';
-import { Text } from 'src';
+import { useEffect, useState, Fragment } from 'react';
+import Text from '../../../components/Text';
 import { MAX_VALUE, labelPosition } from './data';
 import ProgressBar from './ProgressBar';
 
@@ -57,7 +57,7 @@ export const LabelFormatter = () => {
   }, []);
 
   return (
-    <>
+    <Fragment>
       <ProgressBar
         min={0}
         style={{ marginBottom: 16 }}
@@ -84,6 +84,6 @@ export const LabelFormatter = () => {
         showLabel={true}
         labelFormatter={(value) => `${Math.floor((value / MAX_VALUE) * 100)}%`}
       />
-    </>
+    </Fragment>
   );
 };