@tripie-pyotato/design-system 0.0.0

package/jest.setup.cjs

@@ -0,0 +1,4 @@
+require('@tripie-pyotato/jest/polyfills');
+require('@tripie-pyotato/jest').setup.dom();
+
+module.exports = {};

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@tripie-pyotato/design-system",
+  "version": "0.0.0",
+  "description": "트리피에 사용되는 디자인 시스템",
+  "main": "index.js",
+  "exports": {
+    "./global": [
+      "./src/global.scss"
+    ],
+    "./shared": [
+      "./src/shared.scss"
+    ],
+    ".": [
+      "./src/index.ts",
+      "./src/index.tsx"
+    ],
+    "./*": [
+      "./src/*.tsx",
+      "./src/*.ts",
+      "./src/*/index.ts"
+    ],
+    "./*/*": [
+      "./src/*/*.tsx",
+      "./src/*/*.ts"
+    ],
+    "./styles": "./src/styles/index.scss"
+  },
+  "scripts": {
+    "build:pkg": "tsc",
+    "lint": "eslint '**/*.{js,jsx,ts,tsx}'",
+    "lint:fix": "pnpm run lint --fix",
+    "generate:component": "turbo gen react-component",
+    "test": "vitest",
+    "test:watch": "vitest --watch",
+    "clean": "rm -rf ./node_modules && rm -rf ./.turbo && rm -rf ./dist && rm -rf ./.next"
+  },
+  "devDependencies": {
+    "@storybook/react": "^8.2.6",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.4.3",
+    "@tripie-pyotato/jest": "workspace:*",
+    "@turbo/gen": "^2.0.11",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^20.11.24",
+    "@types/react": "^18.3.3",
+    "@vitejs/plugin-react": "^4.3.4",
+    "babel-jest": "^29.7.0",
+    "csstype": "^3.1.3",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.7.0",
+    "msw": "^2.2.10",
+    "next": "15.0.0-rc.0",
+    "react": "^18.3.1",
+    "ts-jest": "^29.2.4",
+    "vitest": "^3.0.6"
+  },
+  "dependencies": {
+    "classnames": "^2.5.1",
+    "framer": "^2.4.1",
+    "framer-motion": "^11.11.17",
+    "postcss": "^8",
+    "react-dom": "^18.3.1",
+    "react-intersection-observer": "9.13.1",
+    "sass": "^1.81.0",
+    "usehooks-ts": "^3.1.0"
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "src/*",
+        "src/*/index"
+      ]
+    }
+  },
+  "peerDependencies": {
+    "next": "*",
+    "react": "*"
+  }
+}

package/setupTests.mjs

@@ -0,0 +1,39 @@
+import '@testing-library/jest-dom';
+import '../design-system/src';
+import '../design-system/src/shared/colors';
+
+// import { setupServer } from 'msw/node';
+
+// import { handlers } from '@/__mocks__/handlers';
+
+/* msw */
+// export const server = setupServer(...handlers);
+
+// beforeAll(() => {
+//   server.listen();
+// });
+
+afterEach(() => {
+  // server.resetHandlers();
+  vi.clearAllMocks();
+});
+
+afterAll(() => {
+  vi.resetAllMocks();
+  // server.close();
+});
+
+// https://github.com/vitest-dev/vitest/issues/821
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(), // deprecated
+    removeListener: vi.fn(), // deprecated
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })),
+});

package/src/base/_breakpoint.scss

@@ -0,0 +1,15 @@
+@use "sass:map";
+
+// The breakpoints to use for the project.
+$config-breakpoint: () !default;
+$config-breakpoint: map.deep-merge(
+  (
+    "xs": 320px,
+    "sm": 768px,
+    "md": 900px,
+    "lg": 1024px,
+    "xl": 1280px,
+    "xxl": 1440px,
+  ),
+  $config-breakpoint
+);

package/src/base/_colors.scss

@@ -0,0 +1,98 @@
+@use 'sass:map';
+
+// Main theme colors map.
+$colors: () !default;
+$colors: map.deep-merge(
+  (
+    'default': (
+      50: #fafafa,
+      100: #f4f4f5,
+      200: #e4e4e7,
+      300: #d4d4d8,
+      400: #a1a1aa,
+      500: #71717a,
+      600: #52525b,
+      700: #3f3f46,
+      800: #27272a,
+      900: #18181b,
+    ),
+    'primary': (
+      50: #e6f1fe,
+      100: #cce3fd,
+      200: #99c7fb,
+      300: #66aaf9,
+      400: #338ef7,
+      500: #006fee,
+      600: #005bc4,
+      700: #004493,
+      800: #002e62,
+      900: #001731,
+    ),
+    'secondary': (
+      50: #f2eafa,
+      100: #e4d4f4,
+      200: #c9a9e9,
+      300: #ae7ede,
+      400: #9353d3,
+      500: #7828c8,
+      600: #6020a0,
+      700: #481878,
+      800: #301050,
+      900: #180828,
+    ),
+    'success': (
+      50: #e8faf0,
+      100: #d1f4e0,
+      200: #a2e9c1,
+      300: #74dfa2,
+      400: #45d483,
+      500: #17c964,
+      600: #12a150,
+      700: #0e793c,
+      800: #095028,
+      900: #095028,
+    ),
+    'warning': (
+      50: #fefce8,
+      100: #fdedd3,
+      200: #fbdba7,
+      300: #f9c97c,
+      400: #f7b750,
+      500: #f5a524,
+      600: #c4841d,
+      700: #936316,
+      800: #62420e,
+      900: #312107,
+    ),
+    'danger': (
+      50: #fee7ef,
+      100: #fdd0df,
+      200: #faa0bf,
+      300: #f871a0,
+      400: #f54180,
+      500: #f31260,
+      600: #c20e4d,
+      700: #920b3a,
+      800: #610726,
+      900: #310413,
+    ),
+    'shadow': (
+      50: 0 4px 8px #0000001a,
+      100: 0 6px 6px #0000001a,
+    ),
+    'themes': (
+      40: #858585,
+      50: #d3ffca,
+      100: #102b1f,
+      200: #0f0f0f,
+      300: #d3ffca40,
+      400: #232323,
+      500: #080807,
+      600: #22261e,
+      700: #141712,
+      800: #333333,
+      100000: #08080700,
+    ),
+  ),
+  $colors
+);

package/src/base/_config.scss

@@ -0,0 +1,33 @@
+@use "sass:map";
+
+$settings: () !default;
+$settings: map.deep-merge(
+  (
+    // The prefix to use for all CSS variables.
+    "prefix": null,
+    // The paths to use for the images, icons and fonts.
+    // "paths":
+    //   (
+    //     "images": "./static/images",
+    //     "icons": "./static/icons",
+    //     "fonts": "./static/fonts",
+    //   )
+    "paths":
+      (
+        "images": "/static/images",
+        "icons": "/static/icons",
+        "fonts": "/static/fonts",
+      )
+  ),
+  $settings
+);
+
+// We use this value to prefix our CSS variables. The only difference to the default prefix value that we add the '-' suffix.
+$internal-prefix: if(
+  map.get($settings, prefix),
+  map.get($settings, prefix) + "-",
+  ""
+);
+
+// This is the list of all generated keyframes to avoid duplicates.
+$included-animations: (move-background);

package/src/base/_font-size.scss

@@ -0,0 +1,17 @@
+@use 'sass:map';
+
+$config-font-size: () !default;
+$config-font-size: map.deep-merge(
+  (
+    'default': 16px,
+    'h0': 2.25rem,
+    'h1': 2rem,
+    'h2': 1.625rem,
+    'h3': 1.375rem,
+    'h4': 1.25rem,
+    'text': 1rem,
+    'small': 0.875rem,
+    'tiny': 0.75rem,
+  ),
+  $config-font-size
+);

package/src/base/_font-stack.scss

@@ -0,0 +1,27 @@
+@use 'sass:map';
+
+$config-font-stack: () !default;
+$config-font-stack: map.deep-merge(
+  (
+    'default': (
+      'MaruBuri',
+      'system-ui',
+      '-apple-system',
+      'Segoe UI',
+      'Roboto',
+      'Ubuntu',
+      'Cantarell',
+      'Noto Sans',
+      sans-serif,
+      'BlinkMacSystemFont',
+      'Segoe UI',
+      'Helvetica',
+      'Arial',
+      sans-serif,
+      'Apple Color Emoji',
+      'Segoe UI Emoji',
+      'Segoe UI Symbol',
+    ),
+  ),
+  $config-font-stack
+);

package/src/base/_font-weight.scss

@@ -0,0 +1,23 @@
+@use 'sass:map';
+
+/** default 아래의 스타일들은 root element 에 적용
+ base, medium은 regular의 alias
+*/
+$config-font-weight: () !default;
+$config-font-weight: map.deep-merge(
+  (
+    'default': 400,
+    'thin': 100,
+    'extra-light': 200,
+    'light': 300,
+    'regular': 400,
+    'normal': 400,
+    'base': 400,
+    'medium': 500,
+    'semi-bold': 600,
+    'bold': 700,
+    'extra-bold': 800,
+    'black': 900,
+  ),
+  $config-font-weight
+);

package/src/base/_letter-spacing.scss

@@ -0,0 +1,12 @@
+@use "sass:map";
+
+$config-letter-spacing: () !default;
+$config-letter-spacing: map.deep-merge(
+  (
+    "default": 0,
+    "h1": 0,
+    "h2": 0,
+    "text": 0,
+  ),
+  $config-letter-spacing
+);

package/src/base/_line-height.scss

@@ -0,0 +1,12 @@
+@use "sass:map";
+
+$config-line-height: () !default;
+$config-line-height: map.deep-merge(
+  (
+    "default": 1.5,
+    "h1": 1.5,
+    "h2": 1.5,
+    "text": 1.5,
+  ),
+  $config-line-height
+);

package/src/base/_motion.scss

@@ -0,0 +1,35 @@
+@use "sass:map";
+
+/**
+기본 애니메이션 동작 정의
+ease-in : [주요 쓰임] 화면에서 요소 제거
+ease-out: [주요 쓰임] 화면에 요소 추가 혹은 유저 인풋에 따라 화면 상의 요소 변화 시
+*/
+
+$config-motion-timing: () !default;
+$config-motion-timing: map.deep-merge(
+  (
+    "ease-in": cubic-bezier(0.25, 0, 1, 1),
+    "ease-out": cubic-bezier(0, 0, 0.25, 1),
+    "standard": cubic-bezier(0.5, 0, 0.1, 1),
+    "excite": cubic-bezier(0.18, 0.67, 0.6, 1.22),
+    "overshoot": cubic-bezier(0.07, 0.28, 0.32, 1.22),
+    "anticipate": cubic-bezier(0.38, -0.4, 0.88, 0.65),
+    "linear": cubic-bezier(0.25, 0.25, 0.75, 0.75),
+  ),
+  $config-motion-timing
+);
+
+$config-motion-duration: () !default;
+$config-motion-duration: map.deep-merge(
+  (
+    "none": 0ms,
+    "fast": 100ms,
+    "standard": 200ms,
+    "base": 250ms,
+    "slow": 300ms,
+    "slower": 400ms,
+    "slowest": 500ms,
+  ),
+  $config-motion-duration
+);

package/src/base/_shape.scss

@@ -0,0 +1,19 @@
+@use "sass:map";
+
+/**
+border-radius 설정
+*/
+$config-shape: () !default;
+$config-shape: map.deep-merge(
+  (
+    "default": 0,
+    "circle": 50%,
+    "square": 0,
+    "sm": 4px,
+    "md": 8px,
+    "lg": 10px,
+    "xl": 12px,
+    "xxl": 14px,
+  ),
+  $config-shape
+);

package/src/base/_space.scss

@@ -0,0 +1,58 @@
+@use "sass:map";
+
+$config-space: () !default;
+$config-space: map.deep-merge(
+  (
+    "default": 0,
+    "none": 0,
+    "xs": 2px,
+    "sm": 4px,
+    "md": 8px,
+    "lg": 12px,
+    "xl": 16px,
+    "2xl": 22px,
+    "3xl": 36px,
+    "4xl": 48px,
+    "5xl": 80px,
+    "6xl": 120px,
+    "7xl": 224px,
+    "8xl": 288px,
+    "9xl": 384px,
+    0: 0,
+    1: 4px,
+    2: 8px,
+    3: 12px,
+    4: 14px,
+    5: 16px,
+    6: 20px,
+    7: 24px,
+    8: 28px,
+    9: 32px,
+    10: 36px,
+    11: 40px,
+    12: 44px,
+    13: 48px,
+    14: 52px,
+    15: 56px,
+    16: 60px,
+    17: 64px,
+    18: 68px,
+    19: 72px,
+    20: 80px,
+    21: 96px,
+    22: 112px,
+    23: 128px,
+    24: 144px,
+    25: 160px,
+    26: 176px,
+    27: 192px,
+    28: 208px,
+    29: 224px,
+    30: 240px,
+    31: 256px,
+    32: 288px,
+    33: 320px,
+    34: 384px,
+  ),
+  $config-space
+);

package/src/base/_theme.scss

@@ -0,0 +1,97 @@
+@use 'sass:map';
+
+// 추가 테마 컬러
+$config-theme: () !default;
+$config-theme: map.deep-merge(
+  (
+    'dark': (
+      'default': (
+        50: #18181b,
+        100: #27272a,
+        200: #3f3f46,
+        300: #52525b,
+        400: #71717a,
+        500: #a1a1aa,
+        600: #d4d4d8,
+        700: #e4e4e7,
+        800: #f4f4f5,
+        900: #fafafa,
+      ),
+      'primary': (
+        50: #001731,
+        100: #002e62,
+        200: #004493,
+        300: #005bc4,
+        400: #006fee,
+        500: #338ef7,
+        600: #66aaf9,
+        700: #99c7fb,
+        800: #cce3fd,
+        900: #e6f1fe,
+      ),
+      'secondary': (
+        50: #180828,
+        100: #301050,
+        200: #481878,
+        300: #6020a0,
+        400: #7828c8,
+        500: #9353d3,
+        600: #ae7ede,
+        700: #c9a9e9,
+        800: #e4d4f4,
+        900: #f2eafa,
+      ),
+      'success': (
+        50: #095028,
+        100: #095028,
+        200: #0e793c,
+        300: #12a150,
+        400: #17c964,
+        500: #45d483,
+        600: #74dfa2,
+        700: #a2e9c1,
+        800: #d1f4e0,
+        900: #e8faf0,
+      ),
+      'warning': (
+        50: #312107,
+        100: #62420e,
+        200: #936316,
+        300: #c4841d,
+        400: #f5a524,
+        500: #f7b750,
+        600: #f9c97c,
+        700: #fbdba7,
+        800: #fdedd3,
+        900: #fefce8,
+      ),
+      'danger': (
+        50: #310413,
+        100: #610726,
+        200: #920b3a,
+        300: #c20e4d,
+        400: #f31260,
+        500: #f54180,
+        600: #f871a0,
+        700: #faa0bf,
+        800: #fdd0df,
+        900: #fee7ef,
+      ),
+      'shadow': (
+        50: 0 4px 8px rgb(253 252 252 / 22%),
+        100: 0 6px 6px rgb(253 252 252 / 22%),
+      ),
+      'themes': (
+        50: #d3ffca,
+        100: #102b1f,
+        200: #0f0f0f,
+        300: #d3ffca40,
+        400: #232323,
+        500: #080807,
+        600: #22261e,
+        700: #141712,
+      ),
+    ),
+  ),
+  $config-theme
+);

package/src/base/_z-index.scss

@@ -0,0 +1,44 @@
+@use "sass:map";
+
+/**
+z-index 설정으로 엘리먼트 간에 겹칠 때 순서 지정
+
+deep : 맨 뒤로
+hide : 스크린에서 숨기기
+base : 기본 z-index
+masked: 기본 숨겨진 엘리먼트 
+mask :  엘리먼트 숨기기 위한 기본 z-index 
+sticky:  sticky 인터페이스용 기본 
+fixed:  고정된 엘리먼트 인터페이스용 기본 
+overlays: 모달, popup overlay, 백드롭용 
+loader : 스피너, overlay 앞에 보여줄 때 
+modal : overlay 위, 다른 요소 위에 보여지지만 popup 아래  
+popup :  모달, overlay 위에 보여질 popup 요소
+dropdown : 드랍다운 메뉴용
+notification : toast나 알림 메시지용   
+tool-tip :  Tooltip과 popover용 
+above-all : 맨 앞으로  
+*/
+
+$config-z-index: () !default;
+$config-z-index: map.deep-merge(
+  (
+    "deep": -999999,
+    "hide": -1,
+    "base": 0,
+    "default": 1,
+    "masked": 100,
+    "mask": 200,
+    "sticky": 300,
+    "fixed": 400,
+    "overlay": 500,
+    "loader": 600,
+    "modal": 700,
+    "popup": 750,
+    "dropdown": 800,
+    "notification": 900,
+    "tooltip": 950,
+    "above-all": 999999,
+  ),
+  $config-z-index
+);

package/src/base/index.scss

@@ -0,0 +1,13 @@
+@forward "breakpoint";
+@forward "colors";
+@forward "font-size";
+@forward "font-weight";
+@forward "shape";
+@forward "theme";
+@forward "z-index";
+@forward "config";
+@forward "motion";
+@forward "letter-spacing";
+@forward "font-stack";
+@forward "line-height";
+@forward "space";