@liner-fe/prism 1.1.19 → 1.1.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liner-fe/prism",
-  "version": "1.1.19",
+  "version": "1.1.21",
   "packageManager": "yarn@3.6.0",
   "scripts": {
     "dev": "next dev",
@@ -8,6 +8,7 @@
     "lint": "next lint",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
+    "appendCSS": "ts-node './scripts/index.ts'",
     "build": "bundler build --tsconfig ./tsconfig.build.json && tsc --project tsconfig.build.json",
     "build:package": "yarn build",
     "prepack": "yarn build"
@@ -48,6 +49,7 @@
     "sass": "^1.77.6",
     "sass-loader": "^14.2.1",
     "storybook": "^8.1.7",
+    "ts-node": "^10.9.2",
     "typescript": "^5.1.6",
     "typescript-plugin-css-modules": "^5.1.0"
   },
@@ -57,19 +59,9 @@
   },
   "main": "./lib/index.cjs",
   "types": "./lib/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./lib/index.d.ts",
-      "import": "./lib/index.mjs",
-      "require": "./lib/index.cjs"
-    },
-    "./index.css": "./index.css",
-    "./package.json": "./package.json"
-  },
+  "module": "./lib/index.mjs",
   "files": [
-    "lib",
-    "src",
-    "index.css"
+    "lib"
   ],
   "maintainers": [
     {

package/index.css

@@ -1,138 +0,0 @@
-/* index.css */
-._button_1jmfl_1 {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  font-style: normal;
-  font-size: var(--lp-pri-font-size-16);
-  font-weight: var(--lp-pri-font-weight-700);
-  line-height: 130%;
-  overflow: hidden;
-  cursor: pointer;
-}
-._button_1jmfl_1:disabled {
-  background: var(--neutral-container-mid);
-  color: var(--neutral-label-tertiary);
-  cursor: not-allowed;
-}
-._default_1jmfl_20 {
-  color: var(--inverse-label-static-primary);
-  background: var(--lp-pri-achromatic-white);
-}
-._text_1jmfl_25 {
-  background: none;
-  color: var(--inverse-label-static-primary);
-  font-size: var(--lp-pri-font-size-13);
-  font-weight: var(--lp-pri-font-weight-500);
-}
-._text_1jmfl_25:not(:disabled):hover {
-  text-decoration: underline;
-  text-underline-offset: 0.2rem;
-}
-._icon_1jmfl_36 {
-  background: none;
-}
-._primary_1jmfl_40 {
-  background: #4058ff;
-}
-._primary_1jmfl_40:not(:disabled):hover {
-  background: #3346cc;
-}
-._secondary_1jmfl_47 {
-  background: var(--inverse-container-high);
-}
-._secondary_1jmfl_47:not(:disabled):hover {
-  background: #121212;
-}
-._tertiary_1jmfl_54 {
-  background: rgba(109, 109, 112, 0.0784313725);
-  color: var(--neutral-label-primary);
-}
-._tertiary_1jmfl_54:not(:disabled):hover {
-  background: #ebebeb;
-}
-._quaternary_1jmfl_62 {
-  color: var(--neutral-label-primary);
-  border: 1px solid var(--neutral-border-overlay-normal);
-}
-._quaternary_1jmfl_62:not(:disabled):hover {
-  background: #f5f5f5;
-}
-._quaternary_1jmfl_62:disabled {
-  background: var(--neutral-container-mid);
-  color: var(--neutral-label-tertiary);
-  opacity: 0.4;
-}
-._quinary_1jmfl_75 {
-  color: rgba(109, 109, 112, 0.8);
-}
-._quinary_1jmfl_75:not(:disabled):hover {
-  background: #f5f5f5;
-}
-._quinary_1jmfl_75:disabled {
-  background: var(--neutral-container-mid);
-  color: var(--neutral-label-tertiary);
-  opacity: 0.4;
-}
-._negative_1jmfl_87 {
-  background: var(--function-negative);
-}
-._negative_1jmfl_87:not(:disabled):hover {
-  background: #af1b1c;
-}
-._inverse_1jmfl_94 {
-  color: var(--neutral-label-primary);
-}
-._inverse_1jmfl_94:not(:disabled):hover {
-  background: #f5f5f5;
-}
-._cta_1jmfl_101 {
-  border-radius: 8px;
-  padding: 13.5px 12px;
-  font-size: var(--lp-pri-font-size-16);
-  min-width: 129px;
-  max-height: 48px;
-}
-._l_1jmfl_109 {
-  border-radius: 6px;
-  padding: 10.5px 8px;
-  font-size: var(--lp-pri-font-size-15);
-  min-width: 107px;
-  max-height: 40px;
-}
-._m_1jmfl_117 {
-  border-radius: 6px;
-  padding: 7px 6px;
-  font-size: var(--lp-pri-font-size-14);
-  font-weight: var(--lp-pri-font-weight-500);
-  min-width: 91px;
-  max-height: 32px;
-}
-._s_1jmfl_47 {
-  border-radius: 6px;
-  padding: 3.5px 6px;
-  font-size: var(--lp-pri-font-size-13);
-  font-weight: var(--lp-pri-font-weight-500);
-  min-width: 89px;
-  max-height: 24px;
-}
-._align-center_1jmfl_135 {
-  justify-content: center;
-}
-._align-space-between_1jmfl_139 {
-  justify-content: space-between;
-}
-._inverse-primary_1jmfl_143 {
-  color: var(--inverse-label-static-primary);
-}
-._neutral-primary_1jmfl_147 {
-  color: rgba(109, 109, 112, 0.8);
-  opacity: 0.8;
-}
-._inverse-static-primary_1jmfl_152 {
-  color: var(--inverse-label-static-primary);
-}
-/*! For license information please see index.css.LEGAL.txt */
-/*# sourceMappingURL=index.css.map */

package/src/Configure.mdx

@@ -1,32 +0,0 @@
-import { Meta } from '@storybook/blocks';
-import Image from 'next/image';
-
-import Styling from './assets/design-token-cover.png';
-
-<Meta title="Liner 디자인 시스템 온보딩 문서" />
-
-<div className="sb-container">
-  <div className='sb-section-title'>
-    # Liner Design System에 오신 것을 환영합니다.
-
-    Liner Design System은 지속가능한 방식으로 디자인의 구성요소를 만듭니다.
-
-  </div>
-  <div>
-    <div>
-      <Image
-        src={Styling}
-        alt="A wall of logos representing different styling technologies"
-        width={200}
-        height={0}
-        style={{ width: '100%', height: 'auto', borderRadius: "10px" }}
-      />
-    </div>
-  </div>
-
-<h2 style={{ marginTop: '40px' }}>developer Guide</h2>
-
-    `npm i @liner-fe/design-token`
-
-  <p>마지막 수정자: 엘리엇 (2024. 06. 13)</p>
-</div>

package/src/components/Button/index.stories.tsx

@@ -1,213 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Button, ButtonProps, DefaultButton, DefaultButtonProps, IconButton, TextButton, TextButtonProps } from '.';
-
-const meta: Meta<typeof DefaultButton> = {
-  title: 'Components/Button',
-  component: DefaultButton,
-  args: {
-    children: 'Button',
-    as: 'default',
-    asChild: false,
-    level: 'primary',
-    align: 'center',
-    size: 'cta',
-    disabled: false,
-  },
-  argTypes: {
-    children: {
-      control: {
-        type: 'text',
-      },
-      description: '버튼 안에 표시할 컨텐츠',
-    },
-    as: {
-      options: ['default', 'text', 'icon'],
-      control: {
-        type: 'inline-radio',
-      },
-      description: '버튼의 종류를 설정합니다. 스토리북에서는 동작하지 않습니다',
-    },
-    asChild: {
-      control: {
-        type: 'boolean',
-        default: false,
-      },
-      description: '버튼을 부모 태그의 자식 요소로 사용할 때 사용합니다.',
-    },
-    level: {
-      options: ['primary', 'secondary', 'tertiary', 'quaternary', 'quinary', 'negative', 'inverse'],
-      control: {
-        type: 'select',
-      },
-      description: '버튼의 레벨을 설정합니다.',
-    },
-    align: {
-      options: ['center', 'spaceBetween'],
-      control: {
-        type: 'inline-radio',
-      },
-      description: '버튼 안의 컨텐츠의 정렬 방식을 설정합니다.',
-    },
-    size: {
-      options: ['cta', 'l', 'm', 's'],
-      control: {
-        type: 'inline-radio',
-      },
-      description: '버튼의 크기를 설정합니다.',
-    },
-    disabled: {
-      control: {
-        type: 'boolean',
-        default: false,
-      },
-      description: '버튼의 비활성화 여부를 설정합니다.',
-    },
-  },
-  decorators: [
-    Story => (
-      <article
-        style={{
-          display: 'flex',
-          gap: '10px',
-          flexWrap: 'wrap',
-          alignItems: 'flex-end',
-        }}
-      >
-        <Story />
-      </article>
-    ),
-  ],
-  tags: ['autodocs'],
-};
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-/**
- * 기본 버튼
- */
-export const Default: Story = {
-  args: {
-    as: 'default',
-    level: 'primary',
-    align: 'center',
-    size: 'cta',
-    disabled: false,
-  },
-
-  render: args => <DefaultButton {...args}>{args.children}</DefaultButton>,
-};
-
-/**
- *  종류별 버튼
- */
-export const AS: Story = {
-  render: args => (
-    <>
-      <Button as="default">Default</Button>
-      <Button as="text" level="neutralPrimary">
-        Text
-      </Button>
-      {/* <Button as="icon">Icon</Button> */}
-    </>
-  ),
-};
-
-const DEFAULT_LEVEL_OPTIONS: Extract<ButtonProps, DefaultButtonProps>['level'][] = [
-  'primary',
-  'secondary',
-  'tertiary',
-  'quaternary',
-  'quinary',
-  'negative',
-  'inverse',
-];
-
-/**
- * Default 버튼 타입 - level 종류
- */
-export const DefaultLevel: Story = {
-  render: args => (
-    <>
-      {DEFAULT_LEVEL_OPTIONS.map(level => (
-        <Button {...args} level={level} key={level}>
-          {level}
-        </Button>
-      ))}
-    </>
-  ),
-};
-
-const DEFAULT_ALIGN_OPTIONS: Extract<ButtonProps, DefaultButtonProps>['align'][] = ['center', 'spaceBetween'];
-
-/**
- * Default 버튼 - align 종류
- */
-export const DefaultAlign: Story = {
-  render: args => (
-    <>
-      {DEFAULT_ALIGN_OPTIONS.map(align => (
-        <Button {...args} align={align} key={align}>
-          {align}
-        </Button>
-      ))}
-    </>
-  ),
-};
-
-const DEFAULT_SIZE_OPTIONS: Extract<ButtonProps, DefaultButtonProps>['size'][] = ['cta', 'l', 'm', 's'];
-
-/**
- * Default 버튼 - size 종류
- */
-export const DefaultSize: Story = {
-  render: args => (
-    <>
-      {DEFAULT_SIZE_OPTIONS.map(size => (
-        <Button {...args} size={size} key={size}>
-          {size}
-        </Button>
-      ))}
-    </>
-  ),
-};
-
-const TEXT_LEVEL_OPTIONS: Extract<ButtonProps, TextButtonProps>['level'][] = [
-  'inversePrimary',
-  'neutralPrimary',
-  'inverseStaticPrimary',
-];
-
-/**
- * Text 버튼 - level 종류
- */
-export const TextLevel: Story = {
-  render: args => (
-    <div
-      style={{
-        display: 'flex',
-        width: '100%',
-        height: '50px',
-        gap: '2rem',
-        background: '#444444',
-      }}
-    >
-      {TEXT_LEVEL_OPTIONS.map(level => (
-        <Button as="text" level={level} key={level}>
-          {level}
-        </Button>
-      ))}
-    </div>
-  ),
-};
-
-/**
- * Default 버튼 - 비활성화 상태
- */
-export const Disabled: Story = {
-  render: args => (
-    <Button {...args} disabled>
-      Disabled
-    </Button>
-  ),
-};

package/src/components/Button/index.tsx

@@ -1,121 +0,0 @@
-import { ButtonHTMLAttributes, forwardRef } from 'react';
-
-import style from './style.module.scss';
-import { VariantProps, cva } from 'class-variance-authority';
-import { Slot } from '@radix-ui/react-slot';
-import clsx from 'clsx';
-
-const defaultButtonVariants = cva([style.button, style.default], {
-  variants: {
-    level: {
-      primary: style.primary,
-      secondary: style.secondary,
-      tertiary: style.tertiary,
-      quaternary: style.quaternary,
-      quinary: style.quinary,
-      negative: style.negative,
-      inverse: style.inverse,
-    },
-    align: {
-      center: style['align-center'],
-      spaceBetween: style['align-space-between'],
-    },
-    size: {
-      cta: style.cta,
-      l: style.l,
-      m: style.button,
-      s: style.s,
-    },
-  },
-});
-const textButtonVariants = cva([style.button, style.text], {
-  variants: {
-    level: {
-      inversePrimary: style['inverse-primary'],
-      neutralPrimary: style['neutral-primary'],
-      inverseStaticPrimary: style['inverse-static-primary'],
-    },
-  },
-});
-const iconButtonVariants = cva([style.button, style.icon], {
-  variants: {
-    level: {
-      primary: style.primary,
-      secondary: style.secondary,
-      tertiary: style.tertiary,
-      quaternary: style.quaternary,
-      quinary: style.quinary,
-      negative: style.negative,
-    },
-    weight: {
-      //
-    },
-  },
-});
-
-interface CommonButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  as?: 'default' | 'text' | 'icon';
-  asChild?: boolean;
-}
-export interface DefaultButtonProps extends CommonButtonProps, VariantProps<typeof defaultButtonVariants> {
-  as?: 'default';
-  asChild?: boolean;
-  level?: 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'quinary' | 'negative' | 'inverse';
-  size?: 'cta' | 'l' | 'm' | 's';
-  align?: 'center' | 'spaceBetween';
-  // isLoading?: boolean;
-  // leftIcon?: ReactNode;
-  // rightIcon?: ReactNode;
-}
-export interface TextButtonProps extends CommonButtonProps, VariantProps<typeof textButtonVariants> {
-  as: 'text';
-  asChild?: boolean;
-  level?: 'inversePrimary' | 'neutralPrimary' | 'inverseStaticPrimary';
-}
-export interface IconButtonProps extends CommonButtonProps, VariantProps<typeof iconButtonVariants> {
-  as: 'icon';
-  asChild?: boolean;
-  // weight
-}
-export type ButtonProps = DefaultButtonProps | TextButtonProps | IconButtonProps;
-
-/**
- * 버튼 컴포넌트
- */
-export const DefaultButton = forwardRef<HTMLButtonElement, DefaultButtonProps>(
-  ({ as = 'default', asChild = false, level = 'primary', align = 'center', size = 'cta', ...rest }, ref) => {
-    const Comp = asChild ? Slot : 'button';
-
-    return <Comp {...rest} className={clsx(defaultButtonVariants({ level, align, size }))} ref={ref} />;
-  }
-);
-
-export const TextButton = forwardRef<HTMLButtonElement, TextButtonProps>(
-  ({ as = 'text', asChild = false, level = 'inversePrimary', ...rest }, ref) => {
-    const Comp = asChild ? Slot : 'button';
-
-    return <Comp {...rest} className={clsx(textButtonVariants({ level }))} ref={ref} />;
-  }
-);
-
-export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>((props, ref) => {
-  const Comp = props.asChild ? Slot : 'button';
-
-  return <Comp {...props} className={clsx(iconButtonVariants({ level: props.level }))} ref={ref} />;
-});
-
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
-  const Comp = props.asChild ? Slot : 'button';
-
-  switch (props.as) {
-    case 'default':
-    case undefined:
-      const { as, asChild, level = 'primary', align = 'center', size = 'cta', ...rest } = props;
-      return <Comp {...rest} className={clsx(defaultButtonVariants({ level, align, size }))} ref={ref} />;
-    case 'text':
-      const { as: textAs, asChild: textAsChild, level: textLevel = 'inversePrimary', ...textRest } = props;
-      return <Comp {...textRest} className={clsx(textButtonVariants({ level: textLevel }))} ref={ref} />;
-    // case 'icon':
-    //   return <Comp {...props} className={clsx(iconButtonVariants({ level: props.level }))} ref={ref} />;
-  }
-});

package/src/components/Button/style.module.scss

@@ -1,170 +0,0 @@
-.button {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-
-  font-style: normal;
-  font-size: var(--lp-pri-font-size-16);
-  font-weight: var(--lp-pri-font-weight-700);
-  line-height: 130%; // TODO: 토큰
-  overflow: hidden;
-
-  cursor: pointer;
-
-  &:disabled {
-    background: var(--neutral-container-mid);
-    color: var(--neutral-label-tertiary);
-    cursor: not-allowed;
-  }
-}
-
-// as
-.default {
-  color: var(--inverse-label-static-primary);
-  background: var(--lp-pri-achromatic-white); // TODO: 토큰
-  // color: var(--brand-container-mid);
-}
-.text {
-  background: none;
-  color: var(--inverse-label-static-primary);
-  font-size: var(--lp-pri-font-size-13);
-  font-weight: var(--lp-pri-font-weight-500);
-
-  &:not(:disabled):hover {
-    text-decoration: underline;
-    text-underline-offset: 0.2rem;
-  }
-}
-.icon {
-  background: none;
-}
-
-// DefaultButton - level
-.primary {
-  background: #4058ff; // TODO: 토큰 업데이트 (색상 다름)
-
-  &:not(:disabled):hover {
-    // TODO: 토큰으로 변환
-    background: #3346cc;
-  }
-}
-.secondary {
-  background: var(--inverse-container-high);
-
-  &:not(:disabled):hover {
-    // TODO: 토큰으로 변환
-    background: #121212;
-  }
-}
-.tertiary {
-  background: #6d6d7014;
-  color: var(--neutral-label-primary);
-
-  &:not(:disabled):hover {
-    // TODO: 토큰으로 변환
-    background: #ebebeb;
-  }
-}
-.quaternary {
-  // TODO: 토큰 업데이트 neutral/border/overlay/normal
-  color: var(--neutral-label-primary);
-  border: 1px solid var(--neutral-border-overlay-normal);
-
-  &:not(:disabled):hover {
-    // TODO: 토큰으로 변환
-    background: #f5f5f5;
-  }
-
-  &:disabled {
-    background: var(--neutral-container-mid);
-    color: var(--neutral-label-tertiary);
-    opacity: 0.4;
-  }
-}
-.quinary {
-  // color: var(--neutral-label-secondary);
-  color: #6d6d70cc; // TODO: 토큰 업데이트
-
-  &:not(:disabled):hover {
-    // TODO: 토큰으로 변환
-    background: #f5f5f5;
-  }
-  &:disabled {
-    background: var(--neutral-container-mid);
-    color: var(--neutral-label-tertiary);
-    opacity: 0.4;
-  }
-}
-.negative {
-  // TODO: funtion/container/negative
-  background: var(--function-negative);
-
-  &:not(:disabled):hover {
-    // TODO: 토큰으로 변환
-    background: #af1b1c;
-  }
-}
-.inverse {
-  // TODO: neutral/label/static/primary
-  color: var(--neutral-label-primary);
-
-  &:not(:disabled):hover {
-    // TODO: 토큰으로 변환
-    background: #f5f5f5;
-  }
-}
-
-// size
-.cta {
-  border-radius: 8px; // TODO: 토큰
-  padding: 13.5px 12px; // TODO: 토큰
-  font-size: var(--lp-pri-font-size-16);
-  min-width: 129px;
-  max-height: 48px;
-}
-.l {
-  border-radius: 6px; // TODO: 토큰
-  padding: 10.5px 8px; // TODO: 토큰
-  font-size: var(--lp-pri-font-size-15);
-  min-width: 107px;
-  max-height: 40px;
-}
-.m {
-  border-radius: 6px; // TODO: 토큰
-  padding: 7px 6px; // TODO: 토큰
-  font-size: var(--lp-pri-font-size-14);
-  font-weight: var(--lp-pri-font-weight-500);
-  min-width: 91px;
-  max-height: 32px;
-}
-.s {
-  border-radius: 6px; // TODO: 토큰
-  padding: 3.5px 6px; // TODO: 토큰
-  font-size: var(--lp-pri-font-size-13);
-  font-weight: var(--lp-pri-font-weight-500);
-  min-width: 89px;
-  max-height: 24px;
-}
-
-// align
-.align-center {
-  justify-content: center;
-}
-.align-space-between {
-  justify-content: space-between;
-}
-
-// TextButton - level
-.inverse-primary {
-  color: var(--inverse-label-static-primary); // TODO: 토큰 업데이트 (색상 다름)
-}
-.neutral-primary {
-  // color: var(--neutral-label-secondary); // TODO: 토큰 업데이트 (색상 다름)
-  color: #6d6d70cc;
-  opacity: 0.8;
-}
-.inverse-static-primary {
-  color: var(--inverse-label-static-primary);
-}

package/src/design-token/border-radius/index.mdx

@@ -1,8 +0,0 @@
-import { Canvas, Meta } from '@storybook/blocks';
-import * as SizeStories from './index.stories.ts';
-
-<Meta of={SizeStories} />
-
-<div>
-  <h1>Design Token: Border Radius 개발자 가이드</h1>
-</div>

package/src/design-token/border-radius/index.stories.ts

@@ -1,17 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Color } from './index';
-
-const meta = {
-  title: 'DesignToken/BorderRadius',
-  component: Color,
-  parameters: {
-    layout: 'fullscreen',
-  },
-  tags: ['!autodocs'],
-} satisfies Meta<typeof Color>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const All: Story = {};

package/src/design-token/border-radius/index.tsx

@@ -1,29 +0,0 @@
-// import { radius } from '@liner-fe/design-token';
-
-import { objectToArray } from '../../utils/object';
-
-export const Color = () => (
-  <div style={{ display: 'flex', gap: '20px', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
-    {/* {objectToArray(radius).map(([key, value]) => {
-      return (
-        <div
-          style={{
-            backgroundColor: '#ededed',
-            borderRadius: `${value}px`,
-            width: '150px',
-            height: '150px',
-            justifyContent: 'center',
-            display: 'flex',
-            alignItems: 'center',
-            flexDirection: 'column',
-            gap: '12px',
-            fontWeight: 'bold',
-          }}
-        >
-          <div>{key}</div>
-          <div style={{ fontSize: '12px' }}>{value}px</div>
-        </div>
-      );
-    })} */}
-  </div>
-);

package/src/design-token/color/index.mdx

@@ -1,38 +0,0 @@
-import { Canvas, Meta } from '@storybook/blocks';
-import * as SizeStories from './index.stories.ts';
-
-<Meta of={SizeStories} />
-
-<div>
-  <h1>Design Token: Color 개발자 가이드</h1>
-</div>
-
-primitve, system로 위계가 나뉩니다.
-
-```ts
-const color = {
-  primitive,
-  system,
-};
-```
-
-primitive는 원시 값(hex값과 같은 실제 값)을 매핑 하고 있습니다. system은 시멘틱한 네이밍으로 primitive를 매핑하고 있습니다.
-
-그래서 대부분의 경우에는 system값을 사용해야하며, 불가피하게 primitive 값을 사용할 때는 프론트엔드 플래닛에 공유해주시길 바랍니다.
-
-<h2>스타일링 라이브러리</h2>
-
-<h3>CSS, SCSS</h3>
-
-플랫폼: liner-space
-
-<h3>CSS-in-js</h3>
-
-플랫폼: liner-web, liner-be
-
-<h3>React Native</h3>
-
-플랫폼: liner-mobile
-확인하지 않음
-
-<h2>DarkMode를 구현하는 방법</h2>

package/src/design-token/color/index.stories.ts

@@ -1,28 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Color } from './index';
-import { color } from '@liner-fe/design-token';
-
-const meta = {
-  title: 'DesignToken/Color',
-  component: Color,
-  parameters: {
-    layout: 'fullscreen',
-  },
-  tags: ['!autodocs'],
-} satisfies Meta<typeof Color>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const System: Story = {
-  args: {
-    type: 'system',
-  },
-};
-
-export const Primitive: Story = {
-  args: {
-    type: 'primitive',
-  },
-};

package/src/design-token/color/index.tsx

@@ -1,28 +0,0 @@
-import { useEffect } from 'react';
-
-interface IProps {
-  type: 'primitive' | 'system';
-}
-
-export const Color = ({ type }: IProps) => {
-  // const { toggleTheme } = useDarkTheme();
-
-  return (
-    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px', justifyContent: 'center', margin: '20px 0' }}>
-      {/* <div>
-        <button onClick={toggleTheme}>Dark theme</button>
-        {document.documentElement.getAttribute('color-theme')}
-      </div>
-
-      {objectToArray(type === 'primitive' ? color.color.primitive : color.color.system).map(([key, value]) => (
-        <div
-          key={key}
-          style={{ width: 200, height: 250, border: '1px solid #ededed', borderRadius: 10, textAlign: 'center' }}
-        >
-          <div style={{ backgroundColor: value, height: 150, borderRadius: '10px 10px 0 0' }}></div>
-          {key} {value}
-        </div>
-      ))} */}
-    </div>
-  );
-};

package/src/design-token/opacity/index.mdx

@@ -1,8 +0,0 @@
-import { Canvas, Meta } from '@storybook/blocks';
-import * as SizeStories from './index.stories.ts';
-
-<Meta of={SizeStories} />
-
-<div>
-  <h1>Design Token: Opacity 개발자 가이드</h1>
-</div>

package/src/design-token/opacity/index.stories.ts

@@ -1,17 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Opacity } from './index';
-
-const meta = {
-  title: 'DesignToken/Opacity',
-  component: Opacity,
-  parameters: {
-    layout: 'fullscreen',
-  },
-  tags: ['!autodocs'],
-} satisfies Meta<typeof Opacity>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const All: Story = {};

package/src/design-token/opacity/index.tsx

@@ -1 +0,0 @@
-export const Opacity = () => <div></div>;

package/src/design-token/size/index.mdx

@@ -1,8 +0,0 @@
-import { Canvas, Meta } from '@storybook/blocks';
-import * as SizeStories from './index.stories.ts';
-
-<Meta of={SizeStories} />
-
-<div>
-  <h1>Design Token: Size 개발자 가이드</h1>
-</div>

package/src/design-token/size/index.stories.ts

@@ -1,17 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Size } from './index';
-
-const meta = {
-  title: 'DesignToken/Size',
-  component: Size,
-  parameters: {
-    layout: 'fullscreen',
-  },
-  tags: ['!autodocs'],
-} satisfies Meta<typeof Size>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const All: Story = {};

package/src/design-token/size/index.tsx

@@ -1,23 +0,0 @@
-import { objectToArray } from '@/utils/object';
-
-export const Size = () => (
-  <div>
-    {/* {objectToArray(size).map(([key, value]) => {
-      return (
-        <div
-          style={{
-            backgroundColor: '#ededed',
-            width: `${value}px`,
-            height: `${value}px`,
-            justifyContent: 'center',
-            display: 'flex',
-            alignItems: 'center',
-            flexDirection: 'column',
-            gap: '12px',
-            fontWeight: 'bold',
-          }}
-        ></div>
-      );
-    })} */}
-  </div>
-);

package/src/design-token/typography/index.mdx

@@ -1,8 +0,0 @@
-import { Canvas, Meta } from '@storybook/blocks';
-import * as SizeStories from './index.stories.ts';
-
-<Meta of={SizeStories} />
-
-<div>
-  <h1>Design Token: Typography 개발자 가이드</h1>
-</div>

package/src/design-token/typography/index.stories.ts

@@ -1,17 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Typography } from './index';
-
-const meta = {
-  title: 'DesignToken/Typography',
-  component: Typography,
-  parameters: {
-    layout: 'fullscreen',
-  },
-  tags: ['!autodocs'],
-} satisfies Meta<typeof Typography>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const All: Story = {};

package/src/design-token/typography/index.tsx

@@ -1,13 +0,0 @@
-export const Typography = () => (
-  <div>
-    {/* {objectToArray(font.size).map(([key, value]) => (
-      <div>
-        {key} {value}
-      </div>
-    ))} */}
-
-    {/* <p style={{ fontSize: '16px', fontWeight: 500, fontFamily: 'pretendard', lineHeight: 26 }}>Blah Blah</p>
-
-    <Display type={'accent'}>Blah Blah</Display> */}
-  </div>
-);

package/src/index.ts

@@ -1,2 +0,0 @@
-export * from './utils/object';
-export * from './components/Button';

package/src/utils/object.ts

@@ -1,3 +0,0 @@
-export const objectToArray = <T extends Record<string, any>>(obj: T) => {
-  return Object.entries(obj);
-};