@tripie-pyotato/design-system 0.0.0

package/src/mixins/_transition.scss

@@ -0,0 +1,90 @@
+@use "sass:map";
+@use "sass:meta";
+@use "sass:list";
+@use "../base/" as *;
+@use "../functions/" as *;
+
+/// animation 관련 transition 정의
+/// @param {string} $property : transition 적용할 프로퍼티
+/// @param {string} $duration : transition 지속시간
+/// @param {string} $timing-function : transition speed curve
+/// @param {string} $delay : transition 딜레이
+/// @return {string} : transition 정의 리턴
+/// @throws {error} : duration이나 timing-function이 $config-motion-duration에 없을 경우
+@mixin transition(
+  $property: all,
+  $duration: base,
+  $timing-function: standard,
+  $delay: none
+) {
+  $transition: ();
+  $will-change: ();
+
+  @for $i from 1 through list.length($property) {
+    @for $j from 0 to (list.length($property)) - (list.length($duration)) {
+      $duration: list.join($duration, list.nth($duration, -1));
+    }
+
+    @for $j from 0 to (list.length($property)) - (list.length($timing-function))
+    {
+      $timing-function: list.join(
+        $timing-function,
+        list.nth($timing-function, -1)
+      );
+    }
+
+    @for $j from 0 to (list.length($property)) - (list.length($delay)) {
+      $delay: list.join($delay, list.nth($delay, -1));
+    }
+
+    $property-value: list.nth($property, $i);
+    $duration-value: map.get($config-motion-duration, list.nth($duration, $i));
+    $timing-value: map.get(
+      $config-motion-timing,
+      list.nth($timing-function, $i)
+    );
+    $delay-value: map.get($config-motion-duration, list.nth($delay, $i));
+
+    @if not $duration-value {
+      $duration-attempt: list.nth($duration, $i);
+
+      @if meta.type-of($value: $duration-attempt) == number {
+        $duration-value: strip-unit($duration-attempt) * 1ms;
+      } @else {
+        @error "Duration variant `#{list.nth($duration, $i)}` not found. Available variants: #{$config-motion-duration}";
+      }
+    }
+
+    @if not $timing-value {
+      $timing-function-attempt: list.nth($timing-function, $i);
+
+      @if meta.type-of($value: $timing-function-attempt) == string {
+        $timing-value: $timing-function-attempt;
+      } @else {
+        @error "Timing-function variant `#{list.nth($timing-function, $i)}` not found. Available variants: #{$config-motion-timing}";
+      }
+    }
+
+    @if not $delay-value {
+      $delay-attempt: list.nth($delay, $i);
+
+      @if meta.type-of($value: $delay-attempt) == number {
+        $delay-value: strip-unit($delay-attempt) * 1ms;
+      } @else {
+        @error "Delay variant `#{list.nth($delay, $i)}` not found. Available variants: #{$config-motion-duration}";
+      }
+    }
+
+    $transition: list.append(
+      $transition,
+      ($property-value $duration-value $timing-value $delay-value),
+      $separator: comma
+    );
+    $will-change: list.append($will-change, $property-value, $separator: comma);
+  }
+
+  @if $property != all {
+    will-change: $will-change;
+  }
+  transition: $transition;
+}

package/src/mixins/_z-index.scss

@@ -0,0 +1,12 @@
+@use "../functions/" as *;
+
+/// z-index 설정 믹스인
+/// @param {string} $layer : `$z-indexes` 맵의 값
+/// @param {boolean} $important : `!important` 추가 여부
+@mixin z-index($layer: default, $important: false) {
+  @if $important == true {
+    z-index: z($layer) !important;
+  } @else {
+    z-index: z($layer);
+  }
+}

package/src/mixins/index.scss

@@ -0,0 +1,14 @@
+@forward "color";
+@forward "skeleton";
+@forward "text";
+@forward "z-index";
+@forward "shape";
+@forward "border";
+@forward "clear";
+@forward "positioning";
+@forward "pseudo";
+@forward "transition";
+@forward "normalize";
+@forward "reset";
+@forward "media";
+@forward "default";

package/src/mixins.scss

@@ -0,0 +1,275 @@
+@use 'sass:math';
+@use 'sass:map';
+@use 'variables' as *;
+
+$background-gradients: (
+  '0': $background-gradient-0,
+  '1': $background-gradient-1,
+  '2': $background-gradient-2,
+  '3': $background-gradient-3,
+  '4': $background-gradient-4,
+  '5': $background-gradient-5,
+  '6': $background-gradient-6,
+  '7': $background-gradient-7,
+  '8': $background-gradient-8,
+);
+
+@mixin background($variant) {
+  align-content: flex-start;
+  align-items: flex-start;
+  display: inline-flex;
+  flex: none;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  height: min-content;
+  justify-content: center;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+  width: -moz-available; /* WebKit-based browsers will ignore this. */
+  width: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
+  padding: 100px 0 50px;
+
+  background: map.get($background-gradients, $variant); // ✅ FIXED
+
+  @if $variant == '2' {
+    padding: 100px 0;
+  }
+}
+
+@mixin accented {
+  color: $theme-50;
+}
+
+@mixin with-border {
+  padding: 10px 25px;
+  font-size: 0.8rem;
+  border: 1px solid $border-accent;
+  border-radius: 8px;
+  opacity: 1;
+}
+
+@mixin card {
+  border: 1px solid $theme-400;
+  align-content: flex-start;
+  align-items: flex-start;
+  align-self: stretch;
+  border-radius: 10px;
+  display: inline-flex;
+  flex: 1 0 0px;
+  flex-direction: column;
+  gap: 50px;
+  height: auto;
+  justify-content: center;
+  overflow: hidden;
+  padding: 40px;
+  position: relative;
+  width: 1px;
+
+  @media (max-width: 809px) {
+    align-self: unset;
+    flex: none;
+    height: min-content;
+    padding: 35px;
+  }
+}
+
+@mixin flexbox($direction: row, $align: center, $justify: center, $gap: 15px) {
+  display: inline-flex;
+  width: 100%;
+  flex-basis: auto;
+
+  flex-direction: $direction;
+  align-items: $align;
+  justify-content: $justify;
+  gap: $gap;
+  flex-wrap: nowrap;
+}
+
+@mixin grid($item-count: 5) {
+  display: grid;
+  grid-gap: 10px;
+
+  @if ($item-count == 5) {
+    @media (min-width: 998px) {
+      grid-template-columns: repeat(6, 1fr);
+      grid-template-rows: repeat(2, 1fr);
+
+      & > div {
+        grid-column: span 2;
+        grid-row: span 1;
+      }
+      & > div:nth-child(4),
+      & > div:nth-child(5) {
+        grid-column: span 3;
+        grid-row: span 1;
+      }
+    }
+  } @else {
+    @media (min-width: 998px) {
+      grid-auto-flow: column;
+    }
+  }
+
+  @media (max-width: 998px) {
+    grid-auto-flow: row;
+  }
+}
+
+@mixin flex {
+  display: inline-flex;
+  justify-content: center;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+
+@mixin list-wrap {
+  display: inline-flex;
+  gap: 1rem;
+
+  @media (min-width: 998px) {
+    flex-direction: row;
+  }
+
+  @media (max-width: 998px) {
+    flex-direction: column;
+    flex-wrap: wrap;
+  }
+}
+
+@mixin background-static {
+  background-repeat: repeat;
+  background-position: left top;
+  background-size: 128px auto;
+  background-image: url('/noise.png');
+  filter: brightness(50%);
+}
+
+@mixin chip {
+  min-width: fit-content;
+  padding: 1rem;
+}
+
+@mixin button-chip {
+  min-width: fit-content;
+  padding: 1rem;
+}
+
+@mixin grid-wrap {
+  display: grid;
+  justify-content: center;
+  gap: 1rem;
+  width: 100%;
+  list-style: none;
+  grid-template-columns: repeat(4, 1fr);
+  padding: 0;
+  margin: 0;
+
+  @media (max-width: 880px) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  @media (max-width: 730px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  @media (max-width: 480px) {
+    grid-template-columns: repeat(1, 1fr);
+  }
+
+  @media (min-width: 1300px) {
+    grid-template-columns: repeat(6, 1fr);
+  }
+}
+
+@mixin submit-button {
+  width: 100%;
+  min-height: 3rem;
+}
+
+@mixin submit-button-long-text {
+  @media (max-width: 400px) {
+    & > span {
+      transform: translateY(1.5rem);
+    }
+  }
+}
+
+.flex {
+  @include flex;
+}
+
+@mixin flex-items {
+  display: inline-flex;
+  justify-content: flex-start;
+  overflow-x: scroll;
+  flex-wrap: nowrap;
+  gap: 1rem;
+  width: 100%;
+  list-style: none;
+  padding: 0;
+}
+
+@mixin map-marker($variant) {
+  display: inline-flex;
+  border-radius: 100%;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 0.5rem;
+
+  $colors: (
+    'restaurant': red,
+    'hotel': rgb(59, 74, 211),
+    'attraction': orange,
+    'selected': inherit,
+  );
+
+  // background-color: map-get($colors, $variant, orange); // DART부터는 map.get 사용
+  background-color: map.get($colors, $variant) or orange;
+}
+
+@mixin scroll {
+  // 스크롤 바 스타일
+  overflow-y: scroll;
+  position: relative;
+  height: 100%;
+}
+// 스크롤 바 스타일
+@mixin visible-scroll($visible-scroll: true) {
+  @if $visible-scroll == true {
+    /* Firefox */
+    scrollbar-color: $theme-50 $theme-100000;
+    scrollbar-width: thin;
+    /* WebKit (Chrome, Safari, Edge) */
+    ::-webkit-scrollbar {
+      width: 2px;
+      height: 2px;
+    }
+    ::-webkit-scrollbar-track {
+      background: transparent;
+    }
+    ::-webkit-scrollbar-thumb {
+      background: $theme-50;
+      border-radius: 2px;
+    }
+    ::-webkit-scrollbar-thumb:hover {
+      background: $theme-50;
+    }
+  } @else {
+    scrollbar-width: none; /* Firefox */
+    /* Hide scrollbar for Edge and IE */
+    -ms-overflow-style: none;
+    ::-webkit-scrollbar {
+      /* Chrome, Safari */
+      display: none;
+    }
+  }
+}
+
+@mixin flex-text {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.2rem;
+  @media (max-width: 300px) {
+    align-items: baseline;
+  }
+}

package/src/shared/colors.ts

@@ -0,0 +1,18 @@
+// 인라인으로 반드시 전해야할 스타일이나 프롭스로 써야할 경우에 상수로 참조
+export const COLORS = {
+  0: '#ffffff',
+  30: '#d5ffcc40',
+  40: '#858585',
+  50: '#d3ffca',
+  100: '#102b1f',
+  200: '#0f0f0f',
+  300: '#d3ffca40',
+  400: '#232323',
+  500: '#080807',
+  600: '#22261e',
+  700: '#141712',
+  800: '#333333',
+  100000: '#08080700',
+};
+
+export default COLORS;

package/src/shared/index.ts

@@ -0,0 +1,3 @@
+export * from './colors';
+export * from './resource';
+export * from './variants';

package/src/shared/resource.ts

@@ -0,0 +1,26 @@
+export const PLACEHOLDER = 'https://placehold.co/600x600?text=NO IMAGE';
+export const LOADING_IMG = 'https://placehold.co/600x600?text=LOADING';
+
+export const ICON_URL = '/icons';
+export const RESOURCE = {
+  ARROW: '/arrow.png',
+  CHECK: '/check.png',
+  X: '/x.png',
+  REFRESH: '/refresh.png',
+  PLANE: '/plane.png',
+  CLOUD: '/cloud.png',
+  LOADING: '/loading.png',
+  TRAM: '/tram.png',
+  TRAIN: '/train.png',
+  WALK: '/walk.png',
+  SHIP: '/ship.png',
+  BUS: '/bus.png',
+  CAR: '/car.png',
+  FLAG: '/flag.png',
+  CURSOR: '/cursor.png',
+  NEXT: '/next.png',
+  KAKAO: '/kakao.png',
+  GITHUB: '/github.png',
+};
+
+export const ICON_RESOURCE = (key: keyof typeof RESOURCE) => ICON_URL + RESOURCE[key];

package/src/shared/variants.ts

@@ -0,0 +1,68 @@
+import { MotionProps } from './wrappers/motion-wrapper';
+
+import COLORS from './colors';
+
+type Variant = MotionProps['variants'][string];
+
+const GLOW_VARIANT = {
+  rest: { boxShadow: 'none' } as Variant,
+  glow: {
+    boxShadow: [`-2px 0px 10px 0px ${COLORS[50]}`, `2px 0px 10px 0px ${COLORS[50]}`, `0px 2px 10px 0px ${COLORS[50]}`],
+    transition: {
+      ease: 'circInOut',
+    },
+  } as Variant,
+};
+
+const SHINE_VARIANT = {
+  rest: { boxShadow: 'none' } as Variant,
+  selected: {
+    backgroundColor: COLORS[100],
+    borderColor: COLORS[300],
+  } as Variant,
+  shine: { backgroundColor: COLORS[100], borderColor: COLORS[300] } as Variant,
+};
+
+const ACCORDIAN_VARIANTS = {
+  DETAILS: {
+    closed: () => ({
+      height: '0%',
+      opacity: 0,
+    }),
+    open: () => ({
+      transform: {
+        height: '100%',
+      },
+      transition: {
+        duration: 2,
+        bounce: 0,
+        damping: 2,
+        stiffness: 10,
+      },
+    }),
+  },
+  BUTTON: {
+    closed: () => ({}),
+    open: () => ({
+      rotate: '45deg',
+      transition: {
+        duration: 0.5,
+        bounce: 0,
+      },
+    }),
+  } as MotionProps['variants'],
+  DIVIDER: {
+    closed: () => ({
+      backgroundColor: COLORS[400],
+    }),
+    open: () => ({
+      backgroundColor: COLORS[50],
+      transition: {
+        duration: 0.5,
+        bounce: 0,
+      },
+    }),
+  } as MotionProps['variants'],
+};
+
+export { ACCORDIAN_VARIANTS, GLOW_VARIANT, SHINE_VARIANT };

package/src/shared/wrappers/classNames.ts

@@ -0,0 +1,2 @@
+import classNames from 'classnames/bind';
+export default classNames;

package/src/shared/wrappers/index.tsx

@@ -0,0 +1,4 @@
+import classNames from './classNames';
+import Motion, { MotionProps } from './motion-wrapper';
+// Type error: Re-exporting a type when 'isolatedModules' is enabled requires using 'export type'.
+export { classNames, Motion, type MotionProps };

package/src/shared/wrappers/motion-wrapper.tsx

@@ -0,0 +1,27 @@
+import { AnimationProps, motion, MotionStyle, SVGMotionProps, Variant, Variants } from 'framer-motion';
+
+export type MotionVariant = Variant;
+export type MotionVariants = Variants;
+export type MotionAnimationProps = AnimationProps;
+export type MotionStyleProps = MotionStyle;
+export type MotionSVGProps = SVGMotionProps<SVGPathElement>;
+
+export interface MotionProps {
+  variants: Variants;
+  animationProps: AnimationProps;
+  motionStyle: MotionStyle;
+  svgProps: SVGMotionProps<SVGPathElement>;
+}
+
+export const Motion = {
+  Div: motion.div,
+  Button: motion.button,
+  Section: motion.section,
+  Span: motion.span,
+  Li: motion.li,
+  Ul: motion.ul,
+  Img: motion.img,
+  Path: motion.path,
+  Nav: motion.nav,
+};
+export default Motion;

package/src/styles/index.scss

@@ -0,0 +1,2 @@
+@forward '../mixins.scss';
+@forward '../variables.scss';

package/src/typings.d.ts

@@ -0,0 +1,5 @@
+// declare module '*.module.scss';
+declare module '*.module.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}

package/src/variables.scss

@@ -0,0 +1,31 @@
+$theme-40: var(--themes-color-40);
+$theme-50: var(--themes-color-50);
+$theme-100: var(--themes-color-100);
+$theme-200: var(--themes-color-200);
+$theme-300: var(--themes-color-300);
+$theme-400: var(--themes-color-400);
+$theme-500: var(--themes-color-500);
+$theme-600: var(--themes-color-600);
+$theme-700: var(--themes-color-700);
+$theme-800: var(--themes-color-800);
+$theme-100000: var(--themes-color-100000);
+
+$border-accent: #d5ffcc40;
+$bottom-shade: #08070700;
+$shadow-tint: rgb(8, 7, 7);
+
+$background-gradient-0: radial-gradient(50% 50% at 0% 0%, $theme-600 0%, $theme-500 100%);
+$background-gradient-1: radial-gradient(
+  50% 39.900000000000006% at 50% 55.800000000000004%,
+  var(--themes-color-700) 0%,
+  var(--themes-color-500) 100%
+);
+$background-gradient-2: radial-gradient(75% 100% at 100% 0%, $theme-600 0%, $theme-500 100%);
+$background-gradient-3: radial-gradient(50% 50% at 50% 50%, $theme-700 0%, $theme-500 100%);
+$background-gradient-4: radial-gradient(75% 50% at 0% 100%, $theme-600 0%, $theme-500 100%);
+$background-gradient-5: radial-gradient(75% 50% at 0% 0%, $theme-600 0%, $theme-500 100%);
+
+$background-gradient-6: radial-gradient(50% 50% at 50% 50%, $theme-700 0%, $shadow-tint 100%);
+$background-gradient-7: radial-gradient(75% 50% at 100% 100%, $theme-600 0%, $bottom-shade 100%);
+
+$background-gradient-8: radial-gradient(50% 50% at 0% 0%, $theme-600 0%, $theme-500 100%);

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "rootDir": ".",
+    "outDir": "./dist",
+    "jsx": "preserve",
+    "baseUrl": "./src",
+    "paths": {
+      "@components/*": ["components/*"]
+    }
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    "../../typings",
+    "jest.setup.cjs",
+    "~/*.ts",
+    "~/*.tsx",
+    "src/shared/wrappers/index.tsz"
+  ],
+  "exclude": ["dist"]
+}

package/turbo/generators/config.ts

@@ -0,0 +1,30 @@
+import type { PlopTypes } from '@turbo/gen';
+
+// Learn more about Turborepo Generators at https://turbo.build/repo/docs/core-concepts/monorepos/code-generation
+
+export default function generator(plop: PlopTypes.NodePlopAPI): void {
+  // A simple generator to add a new React component to the internal UI library
+  plop.setGenerator('react-component', {
+    description: 'Adds a new react component',
+    prompts: [
+      {
+        type: 'input',
+        name: 'name',
+        message: 'What is the name of the component?',
+      },
+    ],
+    actions: [
+      {
+        type: 'add',
+        path: 'src/{{kebabCase name}}.tsx',
+        templateFile: 'templates/component.hbs',
+      },
+      {
+        type: 'append',
+        path: 'package.json',
+        pattern: /"exports": {(?<insertion>)/g,
+        template: '    "./{{kebabCase name}}": "./src/{{kebabCase name}}.tsx",',
+      },
+    ],
+  });
+}

package/turbo/generators/templates/component.hbs

@@ -0,0 +1,8 @@
+export const {{ pascalCase name }} = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <div>
+      <h1>{{ pascalCase name }} Component</h1>
+      {children}
+    </div>
+  );
+};

package/vite.config.mjs

@@ -0,0 +1,25 @@
+import path from 'path';
+
+import react from '@vitejs/plugin-react';
+// import eslint from 'vite-plugin-eslint';
+import { defineConfig } from 'vitest/config';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    react(),
+    // eslint({ exclude: ['/virtual:/**', 'node_modules/**'] })
+  ],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: path.resolve(__dirname, '') + '/setupTests.mjs',
+    css: true,
+    // deps: {
+    //   registerNodeLoader: false, // https://stackoverflow.com/questions/73309769/how-to-test-a-react-app-with-framer-motion-using-vitest
+    // },
+  },
+  resolve: {
+    alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }],
+  },
+});