@tripie-pyotato/design-system 0.2.21 → 0.2.23

package/src/@components/feedback/Toast/{toast.module.scss → Wrap/toast-wrap.module.scss}

@@ -1,13 +1,7 @@
-@use '../../../mixins/backdrop' as *;
-@use '../../../mixins/with-border' as *;
-@use '../../../mixins/z-index' as *;
-@use '../../../variables/tripie-theme' as *;
+@use '../../../../mixins/with-border' as *;
+@use '../../../../mixins/z-index' as *;
+@use '../../../../variables/tripie-theme' as *;
 
-.background {
-  @include backdrop;
-  width: 100vw;
-  height: 100vh;
-}
 .with-border {
   @include with-border;
 }

package/src/@components/index.ts

@@ -8,7 +8,7 @@ export * from './x';
 export { default as AnimatedText } from './data-display/AnimatedText/AnimatedText.client';
 export { default as Carousel } from './data-display/Carousel/Carousel.client';
 export { default as Chip } from './data-display/Chip/Chip.client';
-export { default as TextFillAnimation } from './data-display/TextFill/TextFillAnimation.client';
+export { default as TextFillAnimation } from './data-display/TextFillAnimation';
 export { default as TextUnderLineAnimation } from './data-display/TextUnderlineAnimation';
 export { default as Icon } from './data-display/TripieIcon/Icon.client';
 export { default as Notification } from './feedback/Notification';
@@ -16,7 +16,7 @@ export { default as SplashScreen } from './feedback/SplashScreen/SplashScreen.cl
 export { default as Toast } from './feedback/Toast/Toast.client';
 export { default as Switch } from './inputs/Switch';
 export { default as AnimatedButton } from './inputs/TripieButton/Animated';
-export { default as UnStyledButton } from './inputs/TripieButton/UnStyled';
+export { default as UnstyledButton } from './inputs/TripieButton/Unstyled';
 export { default as NavigationButton } from './navigation/Button';
 export { default as Drawer } from './navigation/Drawer/Drawer.client';
 export { default as Link } from './navigation/Link/Link.client';

package/src/@components/inputs/TripieButton/Flick/flick.module.scss

@@ -1,4 +1,4 @@
-@use '../../../../variables' as *;
+@use '../../../../variables/tripie-theme' as *;
 @use '../../../../mixins/z-index' as *;
 @use '../../../../functions/typography' as *;
 @use '../../../../mixins/margins' as *;
@@ -41,7 +41,6 @@ $btn-font-size-map: (
 
 @each $key, $val in $btn-font-size-map {
   $gap: ($val / 2);
-  // + ($val * 0.125);
 
   .button-gap-#{$key} {
     gap: $gap;

package/src/@components/inputs/TripieButton/{UnStyled/UnStyledButton.client.tsx → Unstyled/UnstyledButton.client.tsx}

@@ -3,11 +3,11 @@
 import { TripieContainerProps } from '@core/layout/TripieContainer';
 import { ButtonHTMLAttributes, DetailedHTMLProps } from 'react';
 import { classNames } from '../../../../wrappers';
-import Style from './unstyled-button.module.scss';
+import Style from './Unstyled-button.module.scss';
 
 const cx = classNames.bind(Style);
 
-const UnStyledButton = ({
+const UnstyledButton = ({
   onclick,
   children,
   name = 'no-style-button',
@@ -49,4 +49,4 @@ const UnStyledButton = ({
   );
 };
 
-export default UnStyledButton;
+export default UnstyledButton;

package/src/@components/inputs/TripieButton/Unstyled/index.ts

@@ -0,0 +1,2 @@
+export * from './UnstyledButton.client';
+export { default } from './UnstyledButton.client';

package/src/@components/inputs/TripieButton/index.ts

@@ -4,6 +4,3 @@ export * from './Button.client';
 export { default as Button } from './Button.client';
 export * from './Flick/Flick.client';
 export { default as FlickTextButton } from './Flick/Flick.client';
-// export { default as Drawer } from './Drawer';
-// export * from './Link';
-// export { default as Link } from './Link';

package/src/@components/inputs/index.ts

@@ -3,4 +3,4 @@ export { default as AccentedButton } from './TripieButton/Accented/Accented.clie
 export { default as AnimatedButton } from './TripieButton/Animated';
 export { default as Button } from './TripieButton/Button.client';
 export { default as FlickTextButton } from './TripieButton/Flick/Flick.client';
-export { default as UnStyledButton } from './TripieButton/UnStyled';
+export { default as UnstyledButton } from './TripieButton/Unstyled';

package/src/@components/navigation/Button/NavigationButton.client.tsx

@@ -3,7 +3,7 @@
 import { useRouter } from 'next/navigation';
 import { Motion, classNames } from 'wrappers';
 
-import Style from './icon.module.scss';
+import Style from './navigation-button.module.scss';
 
 import NavigateIcon, {
   NavigationDirection,

package/src/@components/navigation/Drawer/Drawer.client.tsx

@@ -81,8 +81,9 @@ const Drawer = ({
           zIndex="base"
           margin="none"
           padding="none"
+          fillAvailable={false}
           className={cx(`backdrop-filter-${filter}`, 'drawer-backdrop', 'full', 'max')}
-        ></Container>
+        />
       ) : null}
       <DrawerContent
         {...drawerContent}

package/src/@components/navigation/Drawer/DrawerBody.client.tsx

@@ -16,10 +16,18 @@ const DrawerBody = ({
   content,
   margin = 'none',
   padding = 'none',
+  fillAvailable = false,
   ...props
 }: TripieContainerProps) => {
   return (
-    <TripieContainer zIndex={zIndex} className={cx('drawer', className)} margin={margin} padding={padding} {...props}>
+    <TripieContainer
+      zIndex={zIndex}
+      className={cx('drawer', className)}
+      fillAvailable={fillAvailable}
+      margin={margin}
+      padding={padding}
+      {...props}
+    >
       {children}
     </TripieContainer>
   );

package/src/@components/navigation/Drawer/DrawerContent.client.tsx

@@ -73,8 +73,8 @@ const DrawerContent = ({
           </Card.Description>
         </Card>
       ) : (
-        <TripieContainer margin="none">
-          <TripieContainer margin={margin} {...args}>
+        <TripieContainer margin="none" fillAvailable={false}>
+          <TripieContainer margin={margin} {...args} fillAvailable={false}>
             {children}
           </TripieContainer>
         </TripieContainer>

package/src/@components/navigation/Drawer/drawer-content.module.scss

@@ -0,0 +1,31 @@
+@use '../../../mixins/z-index' as *;
+@use '../../../mixins/backdrop' as *;
+
+@use 'sass:map';
+
+.drawer-content {
+  @include z-index(default);
+  height: -moz-available;
+  height: stretch; // spec has changed
+  height: -webkit-fill-available;
+}
+
+.full {
+  max-width: 100vw;
+  max-height: 100vh;
+  height: stretch; // spec has changed
+  height: -moz-available;
+  height: -webkit-fill-available;
+  width: 100%;
+  overflow: hidden;
+}
+
+.max {
+  height: stretch; // spec has changed
+  height: -moz-available;
+  height: -webkit-fill-available;
+}
+
+$drawer-position-map: (left, top, right, bottom);
+
+$percentage-map: ();

package/src/@components/navigation/Menu/MenuIcon/MenuIcon.client.tsx

@@ -3,7 +3,7 @@ import { classNames, Motion, MotionProps } from '../../../../wrappers';
 
 import { COLORS } from '../../../../shared/colors';
 
-import UnStyledButton from '../../../inputs/TripieButton/UnStyled/UnStyledButton.client';
+import UnstyledButton from '../../../inputs/TripieButton/Unstyled/UnstyledButton.client';
 import Style from './menu.module.scss';
 
 const cx = classNames.bind(Style);
@@ -13,7 +13,7 @@ export const Path = (props: MotionProps['svgProps']) => (
 );
 
 const MenuIcon = ({ toggle }: { toggle: () => void }) => (
-  <UnStyledButton
+  <UnstyledButton
     onclick={() => toggle()}
     className={cx('menu-toggle')}
     padding="sm"
@@ -43,7 +43,7 @@ const MenuIcon = ({ toggle }: { toggle: () => void }) => (
         }}
       />
     </svg>
-  </UnStyledButton>
+  </UnstyledButton>
 );
 
 export default MenuIcon;

package/src/@components/surfaces/Card/Card.client.tsx

@@ -128,6 +128,7 @@ const CardWithImage = ({
   withImageBorder,
   sourceUrl,
   padding = 'none',
+  style,
   cloudinaryUrl = CLOUDINARY_URL(),
   ...args
 }: CardWithImageProps) => {
@@ -136,9 +137,10 @@ const CardWithImage = ({
       withBorder={true}
       padding={padding}
       {...args}
+      style={style}
       className={cx('outer-wrap', `card-size-${sizes}`, className)}
     >
-      <Stack zIndex="default" margin="none" direction="column" className={cx('inner-wrap', className)}>
+      <Stack zIndex="default" margin="none" direction="column" className={cx('inner-wrap')}>
         <TripieContainer margin="none" className={cx('img-wrap')}>
           <TripieContainer margin={cover ? 'none' : 'm'} padding={cover ? 'none' : padding}>
             {sourceUrl == null ? (

package/src/@components/x/Globe/RotatingGlobe.client.tsx

@@ -1,9 +1,9 @@
 'use client';
 
 import dynamic from 'next/dynamic';
-import { ReactNode, useEffect, useRef } from 'react';
+import { ReactNode, useEffect, useRef, useState } from 'react';
 import TripieContainer, { TripieContainerProps } from '../../../@core/layout/TripieContainer';
-import { CLOUDINARY_URL, COLORS, RESOURCE } from '../../../shared';
+import { CLOUDINARY_URL, COLORS, RESOURCE, useInView } from '../../../shared';
 import { GlobeMethods, GlobeProps } from '../../../wrappers/react-globe';
 
 import LoadingIcon from '@components/data-display/TripieIcon/Loading.client';
@@ -21,21 +21,24 @@ const RotatingGlobe = ({
   fallback = <LoadingIcon />,
   backgroundColor = COLORS['100000'],
   hexPolygonColor = () => COLORS[50],
-  globeImageUrl = CLOUDINARY_URL() + 'f_auto,q_auto:good/' + RESOURCE.EARTH,
+  globeImageUrl = CLOUDINARY_URL() + 'f_auto,q_auto/' + RESOURCE.EARTH,
   ...args
 }: GlobeProps & { fallback?: ReactNode } & Pick<TripieContainerProps, 'display'>) => {
   const globeRef = useRef<GlobeMethods>();
+  const { ref, inView } = useInView();
+  const [isRotating, setIsRotating] = useState(false);
 
   // Globe 가 충분히 로드될때까지 초기화 대기
   // React ref 가 아직 undefined인 문제가 있었음. globeRef 가 준비 되기 전 확인하기
   useEffect(() => {
     const interval = setInterval(() => {
-      if (globeRef.current) {
+      if (globeRef.current && !isRotating && inView) {
         const globe = globeRef.current;
         const controls = globe.controls();
         controls.enableZoom = false; // zoom 비활성화
         controls.autoRotate = true; // 자동화
         controls.autoRotateSpeed = 2.5;
+        setIsRotating(true);
 
         clearInterval(interval); // ref가 준비되면 polling mechanism 중단
       }
@@ -44,10 +47,11 @@ const RotatingGlobe = ({
     return () => {
       clearInterval(interval);
     };
-  }, []);
+  }, [inView, isRotating]);
 
   return (
     <TripieContainer
+      ref={ref}
       display={display}
       style={{ minHeight: height, minWidth: width }}
       alignItems="center"

package/src/@core/data-display/ListItem/list-item.module.scss

@@ -1,4 +1,3 @@
-// @use '../../../mixins/flex' as *;
 @use '../../../mixins/margins' as *;
 @use '../../../mixins/paddings' as *;
 @use '../../../mixins/justify-content' as *;
@@ -14,10 +13,6 @@
   display: inline-block;
 }
 
-// .flex {
-//   @include flex;
-// }
-
 @each $direction-key, $direction in $direction-map {
   @each $key, $value in $space-map {
     .margins_#{$key}_to_#{$direction-key} {

package/src/@core/data-display/Text/Text.tsx

@@ -41,7 +41,6 @@ const Text = ({
         className={cx(
           `${!noGapUnderText ? 'not-btn-' : ''}text`,
           bold ? 'bold' : '',
-          // size,
           `font-size-${size}`,
           crossOut ? 'cross' : '',
           `align-items-${alignItems}`,

package/src/@core/data-display/Text/text.module.scss

@@ -9,7 +9,6 @@
 @use '../../../variables/direction-map' as *;
 @use '../../../functions/typography' as *;
 @use '../../../functions/color' as *;
-// @use '../../../mixins/flex' as *;
 @use '../../../mixins/accented' as *;
 @use '../../../mixins/margins' as *;
 @use '../../../mixins/paddings' as *;
@@ -53,7 +52,6 @@
 }
 
 .flex {
-  // @include flex;
   width: fit-content;
 }
 

package/src/@core/layout/Table/table.module.scss

@@ -1,5 +1,4 @@
 @use '../../../variables/tripie-theme' as *;
-@use '../../../variables' as *;
 
 $border-mode-map: (
   none: none,

package/src/base/_config.scss

@@ -6,16 +6,8 @@ $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'
+        'fonts': '/static/fonts',
       )
   ),
   $settings

package/src/base/_motion.scss

@@ -1,35 +1,35 @@
-@use "sass:map";
+// @use "sass:map";
 
-/**
-기본 애니메이션 동작 정의
-ease-in : [주요 쓰임] 화면에서 요소 제거
-ease-out: [주요 쓰임] 화면에 요소 추가 혹은 유저 인풋에 따라 화면 상의 요소 변화 시
-*/
+// /**
+// 기본 애니메이션 동작 정의
+// 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-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
-);
+// $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/index.scss

@@ -1,13 +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";
+@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';

package/src/font.scss

@@ -0,0 +1,40 @@
+@font-face {
+  font-family: maruburi-fallback;
+  src: local('Arial');
+  size-adjust: 97.1598545%;
+  ascent-override: 99.3862276%;
+  descent-override: 39.1085846%;
+  line-gap-override: 0%;
+}
+
+@font-face {
+  font-family: maruburi-fallback-android;
+  src: local('Roboto');
+  size-adjust: 88.6281582%;
+  ascent-override: 108.9078465%;
+  descent-override: 42.8789005%;
+  line-gap-override: 0%;
+}
+@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');
+  /** https://developer.chrome.com/blog/font-fallbacks?utm_source=lighthouse&utm_medium=devtools */
+  font-display: swap;
+}
+
+html,
+body,
+#root {
+  font-family: 'MaruBuri', maruburi-fallback, maruburi-fallback-android, sans-serif;
+}
+
+button,
+input {
+  font-family: inherit;
+  font-display: swap;
+}

package/src/generator/_generator.scss

@@ -1,7 +1,5 @@
-@use '../base/' as *;
-@use '../functions/' as *;
+@use '../base/theme' as *;
 @use '../mixins/' as *;
-@use '../mixins/index.scss' as *;
 
 /// 모든 스타일 생성
 @mixin generate-styles {

package/src/global.scss

@@ -1,39 +1,9 @@
-@use './base/' as *;
 @use './functions/color' as *;
-@use './generator/' as *;
+@use './generator/generator' as *;
 @use './mixins/visible-scroll' as *;
 
 @include generate-styles;
 
-@font-face {
-  font-family: maruburi-fallback;
-  src: local('Arial');
-  size-adjust: 97.1598545%;
-  ascent-override: 99.3862276%;
-  descent-override: 39.1085846%;
-  line-gap-override: 0%;
-}
-
-@font-face {
-  font-family: maruburi-fallback-android;
-  src: local('Roboto');
-  size-adjust: 88.6281582%;
-  ascent-override: 108.9078465%;
-  descent-override: 42.8789005%;
-  line-gap-override: 0%;
-}
-@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');
-  /** https://developer.chrome.com/blog/font-fallbacks?utm_source=lighthouse&utm_medium=devtools */
-  font-display: swap;
-}
-
 html,
 body,
 #root {
@@ -42,17 +12,10 @@ body,
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-  font-family: 'MaruBuri', maruburi-fallback, maruburi-fallback-android, sans-serif;
   scroll-behavior: smooth;
   @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);

package/src/provider/TripieProvider.tsx

@@ -1,6 +1,5 @@
 import Head from 'next/head';
 import { ReactNode } from 'react';
-import { CLOUDINARY_URL } from 'shared';
 
 export default function TripieThemeProvider({
   links,
@@ -12,7 +11,7 @@ export default function TripieThemeProvider({
   return (
     <>
       <Head>
-        <link rel="preload" as="image" href={CLOUDINARY_URL()} />
+        <link rel="preload" as="image" href={'https://res.cloudinary.com/'} />
         {links?.map(link => <link key={link} rel="preload" as="image" href={link} />)}
       </Head>
       {children}

package/tsup.config.ts

@@ -92,7 +92,9 @@ const defaultConfig: Partial<Options> = {
   format: ['cjs', 'esm'],
   clean: true,
   dts: true,
+  // onSuccess: 'node ./scripts/inject-css.js && node ./scripts/inject-use-client.js && node ./scripts/copy-scss.js',
   onSuccess: 'node ./scripts/inject-css.js && node ./scripts/inject-use-client.js',
+  // onSuccess: 'node ./scripts/inject-css.js',
   // onSuccess: 'node ./scripts/inject-use-client.js',
   esbuildPlugins: [
     sassPlugin({
@@ -100,13 +102,17 @@ const defaultConfig: Partial<Options> = {
       // type: 'style',
       type: 'css',
       transform: postcssModules({
-        generateScopedName: '[local]__[hash:base64:5]',
+        // generateScopedName: '[local]__[hash:base64:5]',
         basedir: './dist',
       }),
     }),
+    // sassPlugin({
+    //   filter: /\.scss$/,
+    //   // type: 'style',
+    //   type: 'css',
+    // }),
     sassPlugin({
       filter: /\.scss$/,
-      // type: 'style',
       type: 'css',
     }),
     // esbuildUseClient(),
@@ -138,7 +144,7 @@ export default defineConfig(options => [
         './src/@components/data-display/Chip/index.ts',
         './src/@components/data-display/Divider/index.ts',
         './src/@components/data-display/Image/index.ts',
-        './src/@components/data-display/TextFill/index.ts',
+        './src/@components/data-display/TextFillAnimation/index.ts',
         './src/@components/data-display/Tooltip/index.ts',
         './src/@components/data-display/TextUnderlineAnimation/index.ts',
         './src/@components/data-display/TripieIcon/index.ts',
@@ -153,7 +159,7 @@ export default defineConfig(options => [
         './src/@components/inputs/TripieButton/Accented/index.ts',
         './src/@components/inputs/TripieButton/Animated/index.ts',
         './src/@components/inputs/TripieButton/Flick/index.ts',
-        './src/@components/inputs/TripieButton/UnStyled/index.ts',
+        './src/@components/inputs/TripieButton/Unstyled/index.ts',
         './src/@components/navigation/index.ts',
         './src/@components/navigation/Drawer/index.ts',
         './src/@components/navigation/Button/index.ts',

package/dist/@components/data-display/Image/Image.client copy.cjs

@@ -1 +0,0 @@
-"use strict";