@liner-fe/prism 1.1.4 → 1.1.6

package/src/components/Button/index.tsx

@@ -0,0 +1,50 @@
+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 <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);
+};

package/lib/components/Button/index.jsx

@@ -1,41 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Button = void 0;
-const react_1 = require("react");
-const style_module_scss_1 = __importDefault(require("./style.module.scss"));
-const class_variance_authority_1 = require("class-variance-authority");
-const react_slot_1 = require("@radix-ui/react-slot");
-const clsx_1 = __importDefault(require("clsx"));
-const buttonVariants = (0, class_variance_authority_1.cva)(style_module_scss_1.default.button, {
-    variants: {
-        level: {
-            primary: style_module_scss_1.default.primary,
-            secondary: style_module_scss_1.default.secondary,
-            tertiary: style_module_scss_1.default.tertiary,
-            quaternary: style_module_scss_1.default.quaternary,
-            quinary: style_module_scss_1.default.quinary,
-            negative: style_module_scss_1.default.negative,
-            inverse: style_module_scss_1.default.inverse,
-        },
-        align: {
-            center: style_module_scss_1.default['align-center'],
-            spaceBetween: style_module_scss_1.default['align-space-between'],
-        },
-        size: {
-            cta: style_module_scss_1.default.cta,
-            l: style_module_scss_1.default.l,
-            m: style_module_scss_1.default.m,
-            s: style_module_scss_1.default.s,
-        },
-    },
-});
-/**
- * 버튼 컴포넌트
- */
-exports.Button = (0, react_1.forwardRef)(({ asChild, level = 'primary', align = 'center', size = 'cta', ...props }, ref) => {
-    const Comp = asChild ? react_slot_1.Slot : 'button';
-    return <Comp className={(0, clsx_1.default)(buttonVariants({ level, align, size }))} ref={ref} {...props}/>;
-});

package/lib/index.js

@@ -1 +0,0 @@
-var v=e=>Object.entries(e);import{forwardRef as p}from"react";var r={};import{cva as s}from"class-variance-authority";import{Slot as d}from"@radix-ui/react-slot";import c from"clsx";var u=s(r.button,{variants:{level:{primary:r.primary,secondary:r.secondary,tertiary:r.tertiary,quaternary:r.quaternary,quinary:r.quinary,negative:r.negative,inverse:r.inverse},align:{center:r["align-center"],spaceBetween:r["align-space-between"]},size:{cta:r.cta,l:r.l,m:r.m,s:r.s}}}),z=p(({asChild:e,level:t="primary",align:a="center",size:n="cta",...o},i)=>React.createElement(e?d:"button",{className:c(u({level:t,align:a,size:n})),ref:i,...o}));export{z as Button,v as objectToArray};