@tripie-pyotato/design-system 0.0.0

package/src/components/Switch/switch.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { useEffect } from 'react';
+import { useAppTheme } from '../../hooks';
+import { useCycle } from '../../hooks/useCycle';
+import Switch from './Switch';
+
+const meta: Meta<typeof Switch> = {
+  title: 'tripie-ui/Switch',
+  component: Switch,
+  tags: ['autodocs'],
+  argTypes: {},
+  decorators: [
+    (story, context) => {
+      const { mode, setMode } = useAppTheme();
+      const selectedTheme = context.globals.theme || mode;
+
+      useEffect(() => {
+        setMode(selectedTheme);
+      }, [selectedTheme]);
+
+      return <div className={`${context.globals.theme}`}>{story()}</div>;
+    },
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: 'Particle',
+  render: () => {
+    const [current, cycle] = useCycle('off', 'on');
+    return <Switch current={current} cycle={cycle} text={current} />;
+  },
+};

package/src/components/Switch/variants.ts

@@ -0,0 +1,34 @@
+import COLORS from '../../shared/colors';
+import { MotionProps } from '../../shared/wrappers/motion-wrapper';
+
+export const SWITCH_VARIANTS = {
+  BACKGROUND: {
+    off: () => ({
+      backgroundColor: COLORS[40],
+      borderColor: COLORS[400],
+    }),
+    on: () => ({
+      backgroundColor: COLORS[50],
+      borderColor: COLORS[50],
+    }),
+  } as MotionProps['variants'],
+  BUTTON: {
+    off: () => ({
+      x: '150%',
+      backgroundColor: COLORS[40],
+    }),
+    on: () => ({
+      x: '30%',
+      backgroundColor: COLORS[50],
+    }),
+  } as MotionProps['variants'],
+  TEXT: {
+    off: () => ({
+      x: '0%',
+    }),
+    on: () => ({
+      x: '200%',
+      color: COLORS[50],
+    }),
+  } as MotionProps['variants'],
+};

package/src/components/Text/Text.tsx

@@ -0,0 +1,158 @@
+import { ReactNode } from 'react';
+import { Container } from '..';
+
+import { classNames, Motion, MotionProps } from '../../shared/wrappers';
+import TripieContainer from '../TripieContainer/TripieContainer';
+import Style from './text.module.scss';
+import { VARIANTS } from './variants';
+
+const cx = classNames.bind(Style);
+
+export interface TextProps {
+  size?: 'default' | 'h0' | 'h1' | 'h2' | 'h3' | 'h4' | 'text' | 'small' | 'tiny';
+  bold?: boolean;
+  children: ReactNode;
+  className?: string;
+}
+
+const Text = ({ children, className, size = 'default', bold = false, ...props }: Readonly<TextProps>) => {
+  const splitText = `${children}`.split('\n').map((sentence, index) => {
+    return (
+      <span className={cx('text', bold ? 'bold' : '', size, className)} key={index + sentence} {...props}>
+        {sentence}
+      </span>
+    );
+  });
+  return <>{splitText}</>;
+};
+
+const AccentedText = ({ children, className, bold, size = 'default', ...props }: Readonly<TextProps>) => {
+  return (
+    <span className={cx('text', 'accented', size, bold ? 'bold' : '', className)} {...props}>
+      {children}
+    </span>
+  );
+};
+
+export const FlickText = ({
+  children,
+  className,
+}: Readonly<{
+  children: ReactNode;
+  className?: string;
+}>) => {
+  return (
+    <Motion.Span className={cx('flick', className)} variants={VARIANTS['TEXT']}>
+      {children}
+    </Motion.Span>
+  );
+};
+
+export const FlickText2 = ({
+  children,
+  className,
+}: Readonly<{
+  children: ReactNode;
+  className?: string;
+}>) => {
+  return (
+    <Motion.Span className={cx('flick', className)} variants={VARIANTS['FLICK_TEXT']}>
+      {children}
+    </Motion.Span>
+  );
+};
+
+const AnimatedText = ({
+  children,
+  className,
+  disabled = false,
+  otherChild = children,
+  withBorder = false,
+  animate = 'rest',
+  action
+}: Readonly<{
+  children: ReactNode;
+  disabled?: boolean;
+  otherChild?: ReactNode;
+  className?: string;
+  withBorder?: boolean;
+  animate?: 'rest' | 'hover';
+  action?:()=>void;
+}>) => {
+  return (
+    <Motion.Div
+      className={cx('animated-text', withBorder && 'with-border', className)}
+      initial="rest"
+      whileHover={disabled ? 'rest' : 'hover'}
+      whileTap={disabled ? 'rest' : 'hover'}
+      animate={animate}
+      onTap={action}
+    >
+      <FlickText2>{children}</FlickText2>
+      <Container applyMargin="top"> </Container>
+      <FlickText2 className={cx('hovered')}>{otherChild}</FlickText2>
+    </Motion.Div>
+  );
+};
+
+const JumpingText = ({
+  children,
+  className,
+}: Readonly<{
+  children: string;
+  className?: string;
+}>) => {
+  return (
+    <TripieContainer className={cx('box')} margin="none">
+      {children.split('').map((item: string, index: number) => (
+        <Motion.Span
+          key={index + item}
+          className={cx('box', className)}
+          animate={{ y: [-5, 0] }}
+          transition={{
+            delay: index * 0.1,
+            duration: 0.5,
+            repeat: Infinity,
+            repeatType: 'reverse',
+          }}
+        >
+          {item}
+        </Motion.Span>
+      ))}
+    </TripieContainer>
+  );
+};
+
+const SlidingText = ({
+  children,
+  className,
+  transition,
+  animate = 'fly',
+  duration = 5,
+}: Readonly<{
+  children: ReactNode;
+  className?: string;
+  animate?: 'rest' | 'fly';
+  transition?: MotionProps['animationProps']['transition'];
+  duration?: number;
+}>) => {
+  return (
+    <Motion.Div
+      className={cx(className)}
+      initial="rest"
+      animate={animate}
+      transition={transition}
+      variants={VARIANTS.SLIDE(duration)}
+    >
+      {children}
+    </Motion.Div>
+  );
+};
+
+Text.Accented = AccentedText;
+Text.Slide = SlidingText;
+Text.Animated = AnimatedText;
+Text.Flick = FlickText;
+Text.Jump = JumpingText;
+
+export default Text;

package/src/components/Text/index.ts

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

package/src/components/Text/text.module.scss

@@ -0,0 +1,84 @@
+@use '../../base/' as *;
+@use '../../functions/' as *;
+@use '../../generator/' as *;
+@use '../../mixins/' as *;
+@use '../TripieButton/Animated/animated-button.module' as *;
+@use '../../mixins.scss' as *;
+
+@use 'sass:map';
+
+.text {
+  @include word-wrap;
+  font-size: font-size(text);
+  &[aria-selected='false'] {
+    color: color(default, 500);
+  }
+  &[aria-selected='true'] {
+    color: color(default, 900);
+  }
+  color: inherit;
+}
+
+.flick {
+  z-index: 30;
+  width: fit-content;
+  height: 3rem;
+}
+
+.min {
+  min-width: 9rem;
+}
+
+.dim {
+  color: color(default, 500);
+}
+
+.primary {
+  color: color(primary, 900);
+}
+
+.secondary {
+  color: color(primary, 600);
+}
+
+.gray {
+  color: color(default, 800);
+}
+.danger {
+  color: color(danger, 600);
+}
+.warning {
+  color: color(warning, 300);
+}
+.emphasize {
+  color: color(primary, 700);
+}
+.box {
+  & > span {
+    position: relative;
+    display: inline-block;
+  }
+}
+
+.accented {
+  @include accented;
+  font-size: inherit;
+}
+
+.animated-text {
+  overflow-y: hidden;
+  color: inherit;
+  display: inline-flex;
+  height: 2rem;
+  flex-direction: column;
+  &:hover{
+    cursor: pointer;
+  }
+}
+.small {
+  font-size: 0.8rem;
+}
+
+.bold {
+  font-weight: font-weight(bold);
+}

package/src/components/Text/text.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useEffect } from 'react';
+import { useAppTheme } from '../../hooks';
+import Text from './Text';
+
+const meta: Meta<typeof Text> = {
+  title: 'tripie-ui/Typography/Text',
+  tags: ['autodocs'],
+  component: Text,
+  decorators: [
+    (story, context) => {
+      const { mode, setMode } = useAppTheme();
+      const selectedTheme = context.globals.theme || mode;
+
+      useEffect(() => {
+        setMode(selectedTheme);
+      }, [selectedTheme]);
+
+      return <div className={`${context.globals.theme}`}>{story()}</div>;
+    },
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: 'Default',
+  args: {
+    children: 'default 기본',
+  },
+};
+
+export const Accented: Story = {
+  name: 'Text.Accented',
+  render: () => <Text.Accented>accented text</Text.Accented>,
+};
+export const Animated: Story = {
+  name: 'Text.Animated',
+  render: () => <Text.Animated otherChild={'other text'}>animated text</Text.Animated>,
+};
+
+export const JumpingText: Story = {
+  name: 'Text.Jump',
+  render: () => <Text.Jump>jumping text</Text.Jump>,
+};
+
+export const SlidingText: Story = {
+  name: 'Text.Slide',
+  render: () => <Text.Slide>sliding text</Text.Slide>,
+};

package/src/components/Text/variants.ts

@@ -0,0 +1,53 @@
+import { MotionProps } from '../../shared/wrappers/motion-wrapper';
+
+export const VARIANTS = {
+  FLICK_TEXT: {
+    rest: {
+      opacity: 1,
+      y: '0',
+    },
+    hover: {
+      opacity: 1,
+      y: '-3rem',
+      transition: {
+        bounce: 0,
+      },
+    },
+  },
+  TEXT: {
+    rest: {
+      opacity: 1,
+      y: '2rem',
+    },
+    hover: {
+      opacity: 1,
+      y: '-2rem',
+      transition: {
+        bounce: 0,
+      },
+    },
+  },
+
+  TITLE: (restY: number, hoverY: number) => ({
+    rest: { opacity: 1, y: restY, duration: 0.5 },
+    hover: {
+      opacity: 1,
+      y: hoverY,
+      transition: {
+        duration: 0.5,
+      },
+    },
+  }),
+  SLIDE: (duration: number) =>
+    ({
+      rest: () => ({}),
+      fly: () => ({
+        translateX: '100vw',
+        transition: {
+          repeat: Infinity,
+          duration: duration,
+          bounce: 1,
+        },
+      }),
+    }) as MotionProps['variants'],
+};

package/src/components/TextFill/TextFillAnimation.tsx

@@ -0,0 +1,87 @@
+import { classNames, Motion, MotionProps } from '../../shared/wrappers';
+
+import { ReactNode } from 'react';
+import { InView } from 'react-intersection-observer';
+import COLORS from '../../shared/colors';
+
+import { CustomAnimationProps } from '../TripieCard';
+import TripieContainer from '../TripieContainer/TripieContainer';
+import Style from './text-fill-animation.module.scss';
+
+const cx = classNames.bind(Style);
+
+const TextFillAnimation = ({
+  text,
+  baseColor,
+  endColor = COLORS[0],
+  duration = 1,
+  delay = 0,
+  replays = true,
+}: Partial<CustomAnimationProps>) => {
+  return (
+    <InView>
+      {({ inView, ref }) => (
+        <TripieContainer margin="none" className={cx('animation', baseColor == null ? 'default' : '')} ref={ref}>
+          <span className={cx('wrap')}>
+            {text}
+            <Motion.Span
+              className={cx('text')}
+              style={
+                {
+                  color: baseColor ?? endColor,
+                } as MotionProps['motionStyle']
+              }
+              animate={inView ? 'visible' : 'hidden'}
+              initial={{ width: '0%' }}
+              variants={{
+                visible: { width: '100%' },
+                hidden: { width: '0%' },
+              }}
+              transition={{ baseColor, endColor, duration, delay, replays }}
+            >
+              {text}
+            </Motion.Span>
+          </span>
+        </TripieContainer>
+      )}
+    </InView>
+  );
+};
+
+const TitleTextFillAnimation = ({
+  children,
+  repeat = 1,
+  duration = 1,
+}: Readonly<{
+  children: ReactNode;
+  repeat?: number;
+  duration?: number;
+}>) => {
+  return (
+    <InView>
+      {({ inView, ref }) => (
+        <div className={cx('animation', 'pre-title', 'default')} ref={ref}>
+          <span className={cx('wrap')}>
+            {children}
+            <Motion.Span
+              className={cx('text', 'title')}
+              animate={inView ? 'visible' : 'hidden'}
+              initial={{ width: '0%' }}
+              variants={{
+                visible: { width: '100%' },
+                hidden: { width: '0%' },
+              }}
+              transition={{ repeat, duration }}
+            >
+              {children}
+            </Motion.Span>
+          </span>
+        </div>
+      )}
+    </InView>
+  );
+};
+
+TextFillAnimation.Title = TitleTextFillAnimation;
+
+export default TextFillAnimation;

package/src/components/TextFill/index.ts

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

package/src/components/TextFill/text-fill-animation.module.scss

@@ -0,0 +1,37 @@
+@use '../../variables' as *;
+
+.title {
+  font-weight: bold;
+  background: linear-gradient(to top, $theme-600 2%, $theme-50);
+  background-clip: text;
+  color: transparent;
+  background-repeat: no-repeat;
+  background-size: 100%;
+  font-size: 55px;
+}
+
+.pre-title {
+  font-weight: bold;
+  font-size: 55px;
+}
+
+.animation {
+  width: '100%';
+  white-space: 'nowrap';
+}
+.default {
+  color: $theme-600;
+}
+.wrap {
+  position: relative;
+  display: inline-block;
+  text-wrap: nowrap;
+}
+.text {
+  position: absolute;
+  overflow: hidden;
+  top: 0;
+  left: 0;
+  width: 0%;
+  white-space: nowrap;
+}

package/src/components/TextFill/text-fill-animation.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { useEffect } from 'react';
+
+import { useAppTheme } from '../../hooks';
+import COLORS from '../../shared/colors';
+import TextFillAnimation from './TextFillAnimation';
+
+const meta: Meta<typeof TextFillAnimation> = {
+  title: 'tripie-ui/TextFillAnimation',
+  component: TextFillAnimation,
+  tags: ['autodocs'],
+  argTypes: {},
+  parameters: {
+    docs: {
+      description: {
+        component: '텍스트 색상이 채워지는 애니메이션 효과를 지닌 컴포넌트입니다.',
+      },
+    },
+  },
+  decorators: [
+    (story, context) => {
+      const { mode, setMode } = useAppTheme();
+      const selectedTheme = context.globals.theme || mode;
+
+      useEffect(() => {
+        setMode(selectedTheme);
+      }, [selectedTheme]);
+
+      return <div className={`${context.globals.theme}`}>{story()}</div>;
+    },
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: 'Default',
+  render: () => <TextFillAnimation text={'Text fill animation'} />,
+};
+
+export const CustomStart_COLORS40: Story = {
+  name: 'TextFillAnimation.START_#858585',
+  render: () => <TextFillAnimation text={'Text fill animation'} baseColor={COLORS['40']} />,
+};
+
+export const CustomEnd_COLORS40: Story = {
+  name: 'TextFillAnimation.END_#858585',
+  render: () => <TextFillAnimation text={'Text fill animation'} endColor={COLORS['40']} />,
+};
+
+export const CustomStart_COLORS50End_COLOR40: Story = {
+  name: 'TextFillAnimation.START_#d3ffca.END_#858585',
+  render: () => <TextFillAnimation text={'Text fill animation'} baseColor={COLORS['50']} endColor={COLORS['40']} />,
+};
+
+export const TitleTextFillAnimation: Story = {
+  name: 'TextFillAnimation.Title',
+  render: () => <TextFillAnimation.Title repeat={Infinity}>Title text fill animation</TextFillAnimation.Title>,
+};

package/src/components/TextUnderlineAnimation/TextUnderlineAnimation.tsx

@@ -0,0 +1,37 @@
+import { ReactNode } from 'react';
+
+import { classNames, Motion, MotionProps } from '../../shared/wrappers';
+
+import Divider from '../Divider';
+import Style from './text-underline.module.scss';
+import { TEXT_UNDERLINE_VARIANTS } from './variants';
+
+const cx = classNames.bind(Style);
+
+const TextUnderLineAnimation = ({
+  children,
+  onClick,
+  className,
+}: {
+  children: ReactNode;
+  onClick?: () => void;
+  className?: string;
+}) => {
+  return (
+    <Motion.Div
+      className={cx('wrap', className)}
+      onClick={onClick}
+      variants={TEXT_UNDERLINE_VARIANTS}
+      whileHover={'open'}
+      whileTap={'open'}
+    >
+      {children}
+      <Divider
+        variants={TEXT_UNDERLINE_VARIANTS.DIVIDER as unknown as MotionProps['variants']}
+        className={cx('divider')}
+      />
+    </Motion.Div>
+  );
+};
+
+export default TextUnderLineAnimation;

package/src/components/TextUnderlineAnimation/index.ts

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

package/src/components/TextUnderlineAnimation/text-underline-animation.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { useEffect } from 'react';
+import { useAppTheme } from '../../hooks';
+import TextUnderlineAnimation from './TextUnderlineAnimation';
+
+const meta: Meta<typeof TextUnderlineAnimation> = {
+  title: 'tripie-ui/TextUnderlineAnimation',
+  component: TextUnderlineAnimation,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: '호버 시 텍스트 밑줄 애니메이션이 동작하는 컴포넌트입니다.',
+      },
+    },
+  },
+  argTypes: {},
+  decorators: [
+    (story, context) => {
+      const { mode, setMode } = useAppTheme();
+      const selectedTheme = context.globals.theme || mode;
+
+      useEffect(() => {
+        setMode(selectedTheme);
+      }, [selectedTheme]);
+
+      return <div className={`${context.globals.theme}`}>{story()}</div>;
+    },
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: 'TextUnderlineAnimation',
+  args: { children: 'hover to activate text underline animation' },
+};