@tripie-pyotato/design-system 0.0.0

package/src/functions/_config.scss

@@ -0,0 +1,27 @@
+@use "sass:map";
+@use "../base" as *;
+
+/// $setting 맵으로부토 가능한 값 가져오기
+/// @param {string} $key : 키 이름
+/// @param {string} $group : 그룹 이름
+/// @return {string} : 키에 해당하는 값.
+/// @throws {error} : 키가 없을 경울 리턴
+@function config($key, $group: null) {
+  @if $group {
+    @if not map.has-key($settings, $group) {
+      @error "The #{$group} key name doesn't exist at the $settings map. Available settings keys: #{map.keys($settings)}";
+    }
+
+    @if not map.has-key(map.get($settings, $group), $key) {
+      @error "The #{$key} key name doesn't exist at the #{$group} map. Available settings keys: #{map.keys(map.get($settings, $group))}";
+    }
+
+    @return map.get(map.get($settings, $group), $key);
+  }
+
+  @if not map.has-key($settings, $key) {
+    @error "The #{$key} key name doesn't exist at the $settings map. Available settings keys: #{map.keys($settings)}";
+  }
+
+  @return map.get($settings, $key);
+}

package/src/functions/_shape.scss

@@ -0,0 +1,29 @@
+@use "sass:map";
+@use "sass:meta";
+@use "sass:math";
+@use "../base/" as *;
+
+/// 도형 이름과 그룹에 해당 도형 값 리턴
+/// @param {string} $size : 도형의 크기
+/// @return {number} : 도형의 값
+@function shape($size: default) {
+  $fetched-shape: map.get($config-shape, $size);
+
+  @if meta.type-of($size) == number {
+    @if $size == 0 {
+      @return 0;
+    }
+
+    @if math.is-unitless($size) {
+      @return $size * 1px;
+    } @else {
+      @return $size;
+    }
+  }
+
+  @if meta.type-of($fetched-shape) {
+    @return $fetched-shape;
+  } @else {
+    @error "Shape `#{$size}` not found. Available shapes: #{$config-shape}";
+  }
+}

package/src/functions/_space.scss

@@ -0,0 +1,28 @@
+@use "sass:map";
+@use "sass:meta";
+@use "sass:math";
+@use "../base/" as *;
+
+/// 주어진 space 값에 해당되는 간격을 픽셀로 리턴
+/// @param {string} $space : 필요한 간격
+/// @param {map} $map : 필요한 간격을 찾을 map
+/// @return {number} : $map에서 필요한 간격을 px 단위로 리턴
+@function space($space: default, $map: $config-space) {
+  @if map.has-key($map, $space) {
+    @return map.get($map, $space);
+  }
+
+  @if meta.type-of($space) == number {
+    @if $space == 0 {
+      @return 0;
+    }
+
+    @if math.is-unitless($space) {
+      @return $space * 1px;
+    } @else {
+      @return $space;
+    }
+  } @else {
+    @error "Spacing variant `#{$space}` not found. Available variants: #{$map}";
+  }
+}

package/src/functions/_typography.scss

@@ -0,0 +1,101 @@
+@use "sass:map";
+@use "sass:meta";
+@use "sass:math";
+@use "../base/" as *;
+
+/// 정의했던 font family로부터 폰트 반환
+/// @param {string} $family : font family
+/// @return {string} : 정의했던 font family
+@function font-family($family: default) {
+  $fetched-font-family: map.get($config-font-stack, $family);
+
+  @if meta.type-of($fetched-font-family) {
+    @return $fetched-font-family;
+  } @else {
+    @error "Font family `#{$family}` not found. Available font families: #{$config-font-stack}";
+  }
+}
+
+/// 주어진 범위의 폰트 크기 반환
+/// @param {number} $range : 폰트 크기
+/// @return {number} : 해당 폰트 스타일에 존재하는 폰트 크기
+@function font-size($range) {
+  $fetched-font-size: map.get($config-font-size, $range);
+
+  @if meta.type-of($range) == number {
+    @if $range == 0 {
+      @return 0;
+    }
+
+    @if math.is-unitless($range) {
+      @return $range * 1px;
+    } @else {
+      @return $range;
+    }
+  }
+
+  @if meta.type-of($fetched-font-size) {
+    @return $fetched-font-size;
+  } @else {
+    @error "Font size range `#{$range}` not found. Available font sizes: #{$config-font-size}";
+  }
+}
+
+/// 주어진 폰트 두께에 해당되는 font weight 반환
+/// @param {string} $weight - Font weight.
+/// @return {number} : 정의했던 font weight
+@function font-weight($weight: regular) {
+  $fetched-font-weight: map.get($config-font-weight, $weight);
+
+  @if meta.type-of($weight) == number {
+    @return $weight;
+  }
+
+  @if meta.type-of($fetched-font-weight) {
+    @return $fetched-font-weight;
+  } @else {
+    @error "Font weight `#{$weight}` not found. Available font weights: #{$config-font-weight}";
+  }
+}
+
+/// 주어진 범위의 line height 반환
+/// @param {number} $range : 폰트 스타일 범위
+/// @return {number} : 정의했던 line-height
+@function line-height($range: normal) {
+  $fetched-line-height: map.get($config-line-height, $range);
+
+  @if meta.type-of($range) == number {
+    @return $range;
+  }
+
+  @if meta.type-of($fetched-line-height) {
+    @return $fetched-line-height;
+  } @else {
+    @error "Line height `#{$range}` not found. Available line heights: #{$config-line-height}";
+  }
+}
+
+/// 정의했던 letter spacing에 해당 간격 반환
+/// @param {string} $letter-spacing : 문자 간격
+/// @return {number} : letter-spacing
+@function letter-spacing($letter-spacing: 0) {
+  $fetched-letter-spacing: map.get($config-letter-spacing, $letter-spacing);
+
+  @if meta.type-of($letter-spacing) == number {
+    @if $letter-spacing == 0 {
+      @return 0;
+    }
+
+    @if math.is-unitless($letter-spacing) {
+      @return $letter-spacing * 1px;
+    } @else {
+      @return $letter-spacing;
+    }
+  }
+
+  @if meta.type-of($fetched-letter-spacing) {
+    @return $fetched-letter-spacing;
+  } @else {
+    @error "letter spacing `#{$letter-spacing}` not found. Available letter spacings: #{$config-letter-spacing}";
+  }
+}

package/src/functions/_units.scss

@@ -0,0 +1,66 @@
+@use "sass:math";
+@use "sass:meta";
+@use "typography" as *;
+
+/// css 값의 단위 제거하여
+/// @param {number} $value : 단위를 거할 값
+/// @return {number} : 단위를 제거한 값
+@function strip-unit($value) {
+  @if meta.type-of($value) != "number" {
+    @error "Invalid `#{meta.type-of($value)}` type. Choose a number type instead.";
+  } @else if meta.type-of($value) == "number" and not math.is-unitless($value) {
+    @return math.div($value, ($value * 0 + 1));
+  }
+
+  @return $value;
+}
+
+/// 픽셀 값으로부터 rem값 반환
+/// @param {number} $value : 픽셀 단위의 값
+/// @return {number} : rem으로 변환한 값
+@function remify($value) {
+  $unit: math.unit($value);
+  $default-font-size: font-size("default");
+  $stripped-default: strip-unit($default-font-size);
+
+  @if $value == 0 {
+    @return 0;
+  }
+
+  @if math.is-unitless($value) {
+    @return math.div($value, $stripped-default) * 1rem;
+  } @else if $unit == "rem" {
+    @return $value;
+  } @else if $unit == "px" {
+    @return math.div($value, $default-font-size) * 1rem;
+  } @else {
+    @error "Value must be in px, rem or just a number.";
+  }
+}
+
+/// 픽셀값을 em으로 변환하여 반환. font-size 변경이 없는 요소만 적용가능
+/// @param {number} $value : 변환할 픽셀 값
+/// @return {number} : em으로 변환한 값
+@function em($value) {
+  $unit: math.unit($value);
+  $default-font-size: font-size("default");
+  $stripped-default: strip-unit($default-font-size);
+
+  @if $value == 0 {
+    @return 0;
+  }
+
+  @if math.is-unitless($value) {
+    @return math.div($value, $stripped-default) * 1em;
+  }
+
+  @if $unit == "em" {
+    @return $value;
+  }
+
+  @if $unit == "px" {
+    @return math.div($value, $default-font-size) * 1em;
+  } @else {
+    @error "Value must be in px, em or just a number.";
+  }
+}

package/src/functions/_z-index.scss

@@ -0,0 +1,21 @@
+@use "sass:map";
+@use "sass:meta";
+@use "../base/" as *;
+
+/// config 맵으로부터 z-index 값 반환
+/// @param {string} $layer : `$z-indexes` 맵에서의 값
+/// @return {number} : z-index 값
+/// @throws {Error} : 없는 layer 옵션일 경우
+@function z($layer: default) {
+  $fetched-z-index: map.get($config-z-index, $layer);
+
+  @if meta.type-of($layer) == number {
+    @return $layer;
+  }
+
+  @if meta.type-of($fetched-z-index) {
+    @return $fetched-z-index;
+  } @else {
+    @error "Z-index with such layer `#{$layer}` not found. Available z-indexes: #{$config-z-index}";
+  }
+}

package/src/functions/index.scss

@@ -0,0 +1,8 @@
+@forward "color";
+@forward "z-index";
+@forward "shape";
+@forward "typography";
+@forward "units";
+@forward "space";
+@forward "config";
+@forward "breakpoint";

package/src/generator/_generator.scss

@@ -0,0 +1,21 @@
+@use "../base/" as *;
+@use "../functions/" as *;
+@use "../mixins/" as *;
+
+/// 모든 스타일 생성
+@mixin generate-styles {
+  @include generate-reset;
+  @include generate-normalize;
+
+  @include generate-color-variables;
+
+  @each $key, $value in $config-theme {
+    @include generate-color-variables(
+      $colors: $value,
+      $selector: "[data-theme=#{$key}]:root"
+    );
+  }
+
+  @include generate-default;
+  @include generate-media;
+}

package/src/generator/index.scss

@@ -0,0 +1 @@
+@forward "generator";

package/src/global.scss

@@ -0,0 +1,49 @@
+@use './base/' as *;
+@use './functions/' as *;
+@use './generator/' as *;
+@use './mixins/' as *;
+@use './mixins' as *;
+
+@use 'sass:map';
+
+@include generate-styles;
+
+@font-face {
+  font-family: 'MaruBuri';
+  src:
+    local('MaruBuri'),
+    url('./static/fonts/MaruBuri-Regular.woff2') format('woff2'),
+    url('./static/fonts/MaruBuri-Regular.woff') format('woff'),
+    url('./static/fonts/MaruBuri-Regular.otf') format('otf'),
+    url('./static/fonts/MaruBuri-Regular.eot') format('eot');
+}
+
+html,
+body,
+#root {
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'MaruBuri', sans-serif;
+  scroll-behavior: smooth;
+  font-display: 'swap';
+  @include visible-scroll(true);
+}
+
+button,
+input {
+  font-family: inherit;
+  font-display: swap;
+}
+
+html[data-theme='dark']:root {
+  color: color(default, 800);
+  background-color: color(themes, 500);
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}

package/src/hooks/index.ts

@@ -0,0 +1,3 @@
+export * from './useAppTheme';
+export * from './useCycle';
+export * from './useDrawer';

package/src/hooks/useAppTheme.ts

@@ -0,0 +1,41 @@
+'use client';
+import { useEffect } from 'react';
+import { useLocalStorage, useMediaQuery } from 'usehooks-ts';
+
+const COLOR_SCHEME_QUERY = '(prefers-color-scheme: dark)';
+
+const THEME_MODE = {
+  DARK: 'dark',
+  LIGHT: 'light',
+  OS_DEFAULT: null,
+} as const;
+
+type ThemeMode = (typeof THEME_MODE)[keyof typeof THEME_MODE];
+
+type UseAppThemeOutput = {
+  mode: ThemeMode;
+  toggle: () => void;
+  setMode: (mode: ThemeMode) => void;
+};
+
+export const useAppTheme = (): UseAppThemeOutput => {
+  const isDarkOS = useMediaQuery(COLOR_SCHEME_QUERY);
+  const [themeMode, setThemeMode] = useLocalStorage<ThemeMode>('tripie-app-theme', THEME_MODE.DARK);
+
+  useEffect(() => {
+    const root = document?.documentElement;
+    if (themeMode == null) {
+      root.dataset.theme = isDarkOS ? THEME_MODE.DARK : THEME_MODE.LIGHT;
+    } else {
+      root.dataset.theme = themeMode;
+    }
+  }, [themeMode, isDarkOS]);
+
+  return {
+    mode: themeMode,
+    toggle: () => {
+      setThemeMode(previous => (previous === THEME_MODE.DARK ? THEME_MODE.LIGHT : THEME_MODE.DARK));
+    },
+    setMode: mode => setThemeMode(mode),
+  };
+};

package/src/hooks/useCycle.ts

@@ -0,0 +1,28 @@
+'use client';
+
+import { useState } from 'react';
+
+/**
+ * framer motion의 useCycle과 유사하게
+ * 가능한 스타일 states를 받아, 현재 스타일과 가능한 스타일들을 토글하는 기능을 합니다.
+ * 현재 스타일을 토글 시 인덱스로 가능한 스타일을 직접 접근해서 설정할 수 있습니다.
+ * ex.
+ * const [current, toggle] = useCycle(false,true,'custom');
+ * `current`은 false를 리턴하고, `toggle()`은  current를 true로, `toggle(2)`은'custom'로 설정합니다.
+ */
+export const useCycle = (...states: any[]) => {
+  const [possibleStates] = useState(states);
+
+  const [current, setCurrent] = useState(possibleStates[0]);
+
+  const toggleState = (index?: number) => {
+    if (index != null) {
+      setCurrent(current[index]);
+    } else {
+      const filtered = possibleStates.filter(state => state !== current);
+      setCurrent(filtered[0]);
+    }
+  };
+
+  return [current, toggleState];
+};

package/src/hooks/useDrawer.ts

@@ -0,0 +1,29 @@
+'use client';
+import { useState } from 'react';
+
+const DRAWER_MODE = {
+  OPEN: true,
+  CLOSE: false,
+} as const;
+
+type DrawerMode = (typeof DRAWER_MODE)[keyof typeof DRAWER_MODE];
+
+export type useDrawerOutput = {
+  isOpen: DrawerMode;
+  toggle: () => void;
+  close: () => void;
+  open: () => void;
+};
+
+export const useDrawer = (): useDrawerOutput => {
+  const [isOpen, setIsOpen] = useState<DrawerMode>(DRAWER_MODE.CLOSE);
+
+  return {
+    isOpen,
+    toggle: () => {
+      setIsOpen(previous => !previous);
+    },
+    open: () => setIsOpen(DRAWER_MODE.OPEN),
+    close: () => setIsOpen(DRAWER_MODE.CLOSE),
+  };
+};

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './components';
+export * from './hooks';
+export * from './shared';

package/src/mixins/_border.scss

@@ -0,0 +1,83 @@
+/// 모든 방향의 border mixin
+/// @param {string} $direction : border 옵션 : `all`, `no-top`, `no-bottom`, `no-left`, `no-right`, `top`, `vertical`, `top-left`, `top-right`, `bottom`, `bottom-left`, `bottom-right`, `left`, `horizontal`, `right`.
+/// @param {string} $size : border 크기
+/// @param {string} $style : border 스타일
+/// @param {string} $color : border
+/// @return {mixin} : border mixin
+@mixin border(
+  $direction: all,
+  $size: 1px,
+  $style: solid,
+  $color: currentColor
+) {
+  @if ($direction == "all") or
+    ($direction == "no-top") or
+    ($direction == "no-bottom") or
+    ($direction == "no-left") or
+    ($direction == "no-right")
+  {
+    border: $size $style $color;
+
+    @if $direction == "no-top" {
+      border-top: 0;
+    }
+
+    @if $direction == "no-bottom" {
+      border-bottom: 0;
+    }
+
+    @if $direction == "no-left" {
+      border-left: 0;
+    }
+
+    @if $direction == "no-right" {
+      border-right: 0;
+    }
+  } @else if
+    ($direction == "top") or
+    ($direction == "vertical") or
+    ($direction == "top-left") or
+    ($direction == "top-right")
+  {
+    @if $direction == "vertical" {
+      border-bottom: $size $style $color;
+    }
+
+    @if $direction == "top-left" {
+      border-left: $size $style $color;
+    }
+
+    @if $direction == "top-right" {
+      border-right: $size $style $color;
+    }
+
+    border-top: $size $style $color;
+  } @else if
+    $direction ==
+    "bottom" or
+    $direction ==
+    "bottom-left" or
+    $direction ==
+    "bottom-right"
+  {
+    @if $direction == "bottom-left" {
+      border-left: $size $style $color;
+    }
+
+    @if $direction == "bottom-right" {
+      border-right: $size $style $color;
+    }
+
+    border-bottom: $size $style $color;
+  } @else if $direction == "left" or $direction == "horizontal" {
+    @if $direction == "horizontal" {
+      border-right: $size $style $color;
+    }
+
+    border-left: $size $style $color;
+  } @else if $direction == "right" {
+    border-right: $size $style $color;
+  } @else {
+    @warn "This property does not exist in this property map.";
+  }
+}

package/src/mixins/_clear.scss

@@ -0,0 +1,21 @@
+/// 버튼 기본 스타일 제거한 mixin
+/// @return {mixin} : 버튼 스타일을 제거한 기본 베이스 버튼 mixin
+@mixin clear-btn {
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  background: none;
+  border: 0;
+  outline: inherit;
+  cursor: pointer;
+  background-color: inherit;
+  margin: 0;
+}
+
+/// list 기본 스타일 제거한 mixin
+/// @return {mixin} - list 스타일 제거한 기본 베이스 mixin
+@mixin clear-list {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}

package/src/mixins/_color.scss

@@ -0,0 +1,19 @@
+@use "sass:map";
+@use "../functions/" as *;
+@use "../base/" as *;
+
+/// 컬러 variable 생성
+/// @param {map} $colors : 컬러 맵
+/// @param {string} $selector : selector
+/// @return {string} : 생성된 컬러 variable
+@mixin generate-color-variables($colors: $colors, $selector: ":root") {
+  @each $key, $value in $colors {
+    #{$selector} {
+      @each $name, $color in $value {
+        @if $color {
+          --#{$internal-prefix}#{$key}-color-#{$name}: #{$color};
+        }
+      }
+    }
+  }
+}

package/src/mixins/_default.scss

@@ -0,0 +1,40 @@
+@use "../base/" as *;
+@use "../functions/" as *;
+
+/// 디폴트 믹스인
+/// box-sizing은 border-box로, html 패딩 마진 기본 설정, ios 폰트 크기 변경 방지
+@mixin generate-default {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  html {
+    box-sizing: border-box;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+
+    // prevent iOS font size change
+    -webkit-text-size-adjust: 100%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+    font-family: font-family("default");
+    font-size: font-size("default");
+    font-weight: font-weight("default");
+    line-height: line-height("default");
+    letter-spacing: letter-spacing("default");
+
+    @media (prefers-reduced-motion: no-preference) {
+      scroll-behavior: smooth;
+    }
+  }
+
+  body {
+    min-height: 100vh;
+    padding: 0;
+    margin: 0;
+  }
+}

package/src/mixins/_media.scss

@@ -0,0 +1,26 @@
+@use "../base/" as *;
+@use "../functions/" as *;
+
+@mixin generate-media {
+  img {
+    block-size: auto;
+    display: block;
+    max-inline-size: 100%;
+    max-width: 100%;
+    user-select: none;
+  }
+
+  iframe {
+    block-size: 100%;
+    display: block;
+    inline-size: 100%;
+  }
+
+  figure {
+    margin-inline: 0;
+
+    figcaption {
+      text-align: center;
+    }
+  }
+}