@liner-fe/prism 1.1.3 → 1.1.5

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

@@ -0,0 +1,152 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button, ButtonProps } from '.';
+
+const meta: Meta<typeof Button> = {
+  title: 'Components/Button',
+  component: Button,
+  args: {
+    children: 'Button',
+    level: 'primary',
+    align: 'center',
+    size: 'cta',
+    disabled: false,
+  },
+  argTypes: {
+    children: {
+      control: {
+        type: 'text',
+      },
+      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: {
+    level: 'primary',
+    align: 'center',
+    size: 'cta',
+    disabled: false,
+  },
+
+  render: args => <Button {...args}>{args.children}</Button>,
+};
+
+const LEVELS: ButtonProps['level'][] = [
+  'primary',
+  'secondary',
+  'tertiary',
+  'quaternary',
+  'quinary',
+  'negative',
+  'inverse',
+];
+
+/**
+ * level별 버튼
+ */
+export const Level: Story = {
+  render: args => (
+    <>
+      {LEVELS.map(level => (
+        <Button {...args} level={level} key={level}>
+          {level}
+        </Button>
+      ))}
+    </>
+  ),
+};
+
+const ALIGN_OPTIONS: ButtonProps['align'][] = ['center', 'spaceBetween'];
+
+/**
+ * align별 버튼
+ */
+export const Align: Story = {
+  render: args => (
+    <>
+      {ALIGN_OPTIONS.map(align => (
+        <Button {...args} align={align} key={align}>
+          {align}
+        </Button>
+      ))}
+    </>
+  ),
+};
+
+const SIZE_OPTIONS: ButtonProps['size'][] = ['cta', 'l', 'm', 's'];
+
+/**
+ * size별 버튼
+ */
+export const Size: Story = {
+  render: args => (
+    <>
+      {SIZE_OPTIONS.map(size => (
+        <Button {...args} size={size} key={size}>
+          {size}
+        </Button>
+      ))}
+    </>
+  ),
+};
+
+/**
+ * 버튼의 비활성화 상태
+ */
+export const Disabled: Story = {
+  render: args => (
+    <Button {...args} disabled>
+      Disabled
+    </Button>
+  ),
+};

package/src/components/Button/index.tsx

@@ -0,0 +1,93 @@
+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 buttonVariants = cva(style.button, {
+  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.m,
+      s: style.s,
+    },
+  },
+});
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+  align?: 'center' | 'spaceBetween';
+  level?: 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'quinary' | 'negative' | 'inverse';
+  size?: 'cta' | 'l' | 'm' | 's';
+  // isLoading?: boolean;
+  // leftIcon?: ReactNode;
+  // rightIcon?: ReactNode;
+}
+
+/**
+ * 버튼 컴포넌트
+ */
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ asChild, level = 'primary', align = 'center', size = 'cta', ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <>
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <g clip-path="url(#clip0_1060_5432)">
+            <path
+              d="M10.8333 7H6.66667C6.29848 7 6 7.29848 6 7.66667V16.3333C6 16.7015 6.29848 17 6.66667 17H12.3368C12.1891 16.6891 12.0859 16.3531 12.0354 16H7V8H10.3333L11.3333 9.33333H17V12.3368C17.3748 12.5149 17.7129 12.7576 18 13.0505V9C18 8.63181 17.7015 8.33333 17.3333 8.33333H11.8333L10.8333 7Z"
+              fill="#1E1E1F"
+            />
+            <path
+              d="M15.0829 18.1665V16.0833H13V15.0833H15.0829V13H16.0829V15.0833H18.1665V16.0833H16.0829V18.1665H15.0829Z"
+              fill="#1E1E1F"
+            />
+          </g>
+          <defs>
+            <clipPath id="clip0_1060_5432">
+              <path
+                d="M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4V20C24 22.2091 22.2091 24 20 24H4C1.79086 24 0 22.2091 0 20V4Z"
+                fill="white"
+              />
+            </clipPath>
+          </defs>
+        </svg>
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <g clip-path="url(#clip0_1060_5433)">
+            <path d="M11.1667 10.1667L11.1667 16.1667H10.1667L10.1667 10.1667H11.1667Z" fill="#1E1E1F" />
+            <path d="M13.8333 16.1667V10.1667H12.8333V16.1667H13.8333Z" fill="#1E1E1F" />
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M14.3333 7.66667V6C14.3333 5.63181 14.0348 5.33333 13.6667 5.33333H10.3333C9.96513 5.33333 9.66666 5.63181 9.66666 6V7.66667H6.16666V8.66667H7.0909L7.94487 18.0604C7.97609 18.4037 8.264 18.6667 8.6088 18.6667H15.3912C15.736 18.6667 16.0239 18.4037 16.0551 18.0604L16.9091 8.66667H17.8333V7.66667H14.3333ZM10.6667 6.33333V7.66667H13.3333V6.33333H10.6667ZM15.905 8.66667H8.09503L8.91321 17.6667H15.0868L15.905 8.66667Z"
+              fill="#1E1E1F"
+            />
+          </g>
+          <defs>
+            <clipPath id="clip0_1060_5433">
+              <path
+                d="M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4V20C24 22.2091 22.2091 24 20 24H4C1.79086 24 0 22.2091 0 20V4Z"
+                fill="white"
+              />
+            </clipPath>
+          </defs>
+        </svg>
+      </>
+    );
+    // return <Comp className={clsx(buttonVariants({ level, align, size }))} ref={ref} {...props} />;
+  }
+);

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

@@ -0,0 +1,134 @@
+// @import "../../../../design-token/global.css";
+// @use "../../../../design-token/global.css" as *;
+
+.button {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+
+  font-size: normal;
+  font-weight: var(--lp-pri-font-weight-700);
+  line-height: 130%; // TODO: 토큰
+  color: var(--inverse-label-static-primary);
+  background: var(--lp-pri-achromatic-white); // TODO: 토큰
+  overflow: hidden;
+
+  cursor: pointer;
+  // color: var(--brand-container-mid);
+
+  &:disabled {
+    background: var(--neutral-container-mid);
+    color: var(--neutral-label-tertiary);
+    cursor: not-allowed;
+  }
+}
+
+// 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;
+}

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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,29 @@
+// 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

@@ -0,0 +1,38 @@
+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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,17 @@
+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

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

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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,13 @@
+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

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

package/src/utils/object.ts

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