@tripie-pyotato/design-system 0.0.0

package/src/components/TripieContainer/tripie-container.stories.tsx

@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useEffect } from 'react';
+import { useAppTheme } from '../../hooks';
+import TripieContainer from './TripieContainer';
+
+const meta: Meta<typeof TripieContainer> = {
+  title: 'tripie-ui/Container',
+  component: TripieContainer,
+  tags: ['autodocs'],
+  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: 'Margin-Default',
+  args: {
+    children: 'default container',
+  },
+};
+
+export const PreserveWhiteSpace: Story = {
+  name: 'PreserveWhiteSpace',
+  args: {
+    children: 'preserve white space =true 설정 시 \n 줄바꿈 이스케이프 문자열 줄바꿈이 유지됩니다.',
+    preserveWhiteSpace: true,
+  },
+};
+
+export const AllDefault: Story = {
+  name: 'Margin-m',
+  args: {
+    children: 'MarginAll m container',
+    margin: 'm',
+  },
+};
+
+export const AllXsm: Story = {
+  name: 'Margin-xm',
+  args: {
+    children: 'm container',
+    margin: 'xsm',
+  },
+};
+
+export const AllSm: Story = {
+  name: 'Margin-sm',
+  args: {
+    children: 'sm container',
+
+    margin: 'sm',
+  },
+};
+
+export const AllL: Story = {
+  name: 'Margin-l',
+  args: {
+    children: ' l container',
+    margin: 'l',
+  },
+};
+
+export const AllXl: Story = {
+  name: 'Margin-xl',
+  args: {
+    children: ' xl container',
+    margin: 'xl',
+  },
+};

package/src/components/TripieIcon/Icon.tsx

@@ -0,0 +1,242 @@
+'use client';
+import { classNames, Motion, MotionProps } from '../../shared/wrappers';
+
+import { useRouter } from 'next/navigation';
+import { ReactNode } from 'react';
+import Style from './icon.module.scss';
+
+import { ICON_RESOURCE } from '../../shared/resource';
+import { ICON_VARIANTS } from './variants';
+
+const cx = classNames.bind(Style);
+
+export type MotionSlideUpProps = Partial<MotionProps['animationProps']> & { children?: ReactNode; className?: string };
+
+export type Transport = 'WALK' | 'TRAM' | 'TRAIN' | 'SHIP' | 'BUS' | 'FLAG' | 'CAR';
+
+export type IconProps = {
+  className?: string;
+  withBorder?: boolean;
+  onTapStart?: () => void;
+  animate?: MotionProps['animationProps']['animate'];
+  variants?: MotionProps['variants'];
+  src?: string;
+  transition?: MotionProps['animationProps']['transition'];
+  onTap?: () => void;
+  sizes?: 'large' | 'icon';
+};
+
+const Icon = ({
+  className,
+  onTapStart,
+  src = ICON_RESOURCE('ARROW'),
+  animate,
+  sizes = 'icon',
+  variants = ICON_VARIANTS.DEFAULT,
+  transition,
+}: Readonly<IconProps>) => {
+  return (
+    <Motion.Img
+      onTapStart={onTapStart}
+      className={cx(sizes, className)}
+      variants={variants}
+      transition={transition}
+      animate={animate}
+      src={src}
+      alt={`${src} icon`}
+    />
+  );
+};
+
+export type NavigationDirection = { direction?: 'back' | 'front'; disabled?: boolean; navigateUrl?: string };
+export type NavigationIconProps = IconProps & NavigationDirection;
+
+const NavigateIcon = ({
+  className,
+  direction = 'back',
+  src,
+  sizes = 'icon',
+  animate,
+  disabled,
+  onTapStart,
+  navigateUrl,
+  variants = ICON_VARIANTS.NAVIGATE(direction),
+  transition,
+}: Readonly<NavigationIconProps>) => {
+  const navigate = useRouter();
+
+  const onNavigate = ({ direction }: NavigationDirection) => {
+    if (navigateUrl != null) {
+      return navigate.replace(navigateUrl);
+    }
+    direction === 'back' ? navigate.back() : navigate.forward();
+  };
+
+  return (
+    <Motion.Button
+      disabled={disabled}
+      onTapStart={() => {
+        onTapStart != null ? onTapStart() : onNavigate({ direction });
+      }}
+      whileTap={'hover'}
+      whileHover={'hover'}
+      className={cx(sizes, className)}
+      variants={variants}
+      transition={transition}
+      initial={'closed'}
+      animate={animate}
+    >
+      <img src={ICON_RESOURCE('ARROW')} alt={src + '버튼'} className={cx('icon-image')} />
+    </Motion.Button>
+  );
+};
+
+const RefreshIcon = ({ className, onTapStart, animate, transition, sizes = 'icon' }: Readonly<IconProps>) => {
+  return (
+    <Motion.Div
+      onTapStart={onTapStart}
+      whileTap={'hover'}
+      whileHover={'hover'}
+      className={cx(sizes, className)}
+      variants={ICON_VARIANTS.REFRESH('undo')}
+      transition={transition}
+      initial={'closed'}
+      animate={animate}
+    >
+      <img src={ICON_RESOURCE('REFRESH')} alt={'새로고침 버튼'} className={cx('icon-image')} />
+    </Motion.Div>
+  );
+};
+
+const PlaneIcon = ({ className, sizes = 'icon' }: Readonly<IconProps>) => {
+  return (
+    <Motion.Img
+      variants={ICON_VARIANTS.PLANE}
+      animate={'fly'}
+      initial={'rotate'}
+      src={ICON_RESOURCE('PLANE')}
+      alt={'plane icon'}
+      className={cx(sizes, 'plane', className)}
+    />
+  );
+};
+
+const CloudIcon = ({ index = 0, sizes = 'icon' }: { index: number; sizes?: IconProps['sizes'] }) => {
+  return (
+    <Motion.Img
+      variants={ICON_VARIANTS.CLOUD}
+      initial={{
+        opacity: `${0.2}`,
+        translateX: `${80 * (Math.random() * (index + 1))}vw`,
+        translateY: `${Math.random() * 100}px`,
+      }}
+      animate={{ translateX: '-100vw' }}
+      transition={{ decelerate: 2, repeat: Infinity, duration: 35, bounce: 0, delay: index * 0.1 }}
+      src={ICON_RESOURCE('CLOUD')}
+      className={cx(sizes)}
+      alt={'cloud icon'}
+    />
+  );
+};
+
+const LoadingIcon = ({ className, sizes = 'icon' }: Readonly<IconProps>) => {
+  return (
+    <Motion.Img
+      animate={{ rotate: '360deg' }}
+      transition={{ repeat: Infinity, duration: 10, bounce: 0 }}
+      src={ICON_RESOURCE('LOADING')}
+      className={cx(sizes, className)}
+      alt={'loading icon'}
+    />
+  );
+};
+
+const CursorIcon = ({
+  hovered = '',
+  className,
+  transition,
+  sizes = 'icon',
+}: Readonly<IconProps> & { hovered?: string }) => {
+  return (
+    <Motion.Img
+      variants={ICON_VARIANTS.CURSOR}
+      src={ICON_RESOURCE('CURSOR')}
+      initial={'initial'}
+      animate={hovered}
+      transition={transition}
+      alt={'cursor icon'}
+      className={cx(sizes, className)}
+    />
+  );
+};
+
+const ScrollIcon = ({
+  hovered = '',
+  className,
+  next = true,
+  transition,
+  onTapStart,
+  sizes = 'icon',
+}: Readonly<IconProps> & {
+  hovered?: string;
+  next?: boolean;
+}) => {
+  return (
+    <Motion.Img
+      variants={ICON_VARIANTS.SCROLL(next)}
+      onTapStart={onTapStart}
+      src={ICON_RESOURCE('NEXT')}
+      initial={'initial'}
+      animate={hovered}
+      alt={'next icon'}
+      transition={transition}
+      className={cx(sizes, next ? 'next' : 'prev', className)}
+    />
+  );
+};
+
+const TransportIcon = ({
+  active = false,
+  type = 'FLAG',
+  className,
+  sizes = 'icon',
+}: Readonly<IconProps> & {
+  active?: boolean;
+  type?: Transport;
+}) => {
+  return (
+    <Motion.Img
+      animate={active ? { rotate: [0, 10, -10, 0] } : { rotate: 0 }}
+      transition={active ? { repeat: Infinity, repeatType: 'loop', duration: 0.8, ease: 'easeInOut' } : {}}
+      className={cx(sizes, className)}
+      src={ICON_RESOURCE(type)}
+      alt={`${type} 아이콘`}
+    />
+  );
+};
+
+const XIcon = ({ className, sizes = 'icon' }: Readonly<IconProps>) => {
+  return <Motion.Img className={cx(sizes, className)} src={ICON_RESOURCE('X')} alt={`X 아이콘`} />;
+};
+
+const CheckIcon = ({ className, sizes = 'icon' }: Readonly<IconProps>) => {
+  return <Motion.Img className={cx(sizes, className)} src={ICON_RESOURCE('CHECK')} alt={`체크 아이콘`} />;
+};
+
+const AuthIcon = ({ className, sizes = 'icon', src = ICON_RESOURCE('GITHUB') }: Readonly<IconProps>) => {
+  return <Motion.Img className={cx(sizes, className)} variants={ICON_VARIANTS.ROTATE} src={src} alt={`oauth 아이콘`} />;
+};
+
+Icon.Navigate = NavigateIcon;
+Icon.Refresh = RefreshIcon;
+Icon.Plane = PlaneIcon;
+Icon.Cloud = CloudIcon;
+Icon.Loading = LoadingIcon;
+Icon.Transport = TransportIcon;
+Icon.Cursor = CursorIcon;
+Icon.Scroll = ScrollIcon;
+Icon.X = XIcon;
+Icon.Auth = AuthIcon;
+Icon.Check = CheckIcon;
+
+export default Icon;

package/src/components/TripieIcon/icon-transport.stories.tsx

@@ -0,0 +1,108 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useEffect } from 'react';
+
+import { useAppTheme } from '../../hooks';
+import Icon from './Icon';
+
+const meta: Meta<typeof Icon> = {
+  title: 'tripie-ui/Icon/Transport',
+  component: Icon,
+  tags: ['autodocs'],
+  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 TransportIcon: Story = {
+  name: 'Icon.Transport',
+  render: () => <Icon.Transport />,
+};
+
+export const TransportBusIcon: Story = {
+  name: 'Icon.Transport.Bus',
+  render: () => <Icon.Transport type={'BUS'} />,
+};
+
+export const TransportActiveBusIcon: Story = {
+  name: 'Icon.Transport.Bus.Active',
+  render: () => <Icon.Transport active={true} type={'BUS'} />,
+};
+
+export const TransportCarIcon: Story = {
+  name: 'Icon.Transport.Car',
+  render: () => <Icon.Transport type={'CAR'} />,
+};
+
+export const TransportActiveCarIcon: Story = {
+  name: 'Icon.Transport.Car.Active',
+  render: () => <Icon.Transport active={true} type={'CAR'} />,
+};
+
+export const TransportFlagIcon: Story = {
+  name: 'Icon.Transport.Flag',
+  render: () => <Icon.Transport type={'FLAG'} />,
+};
+
+export const TransportActiveFlagIcon: Story = {
+  name: 'Icon.Transport.Flag.Active',
+  render: () => <Icon.Transport active={true} type={'FLAG'} />,
+};
+
+export const TransportShipIcon: Story = {
+  name: 'Icon.Transport.Ship',
+  render: () => <Icon.Transport type={'SHIP'} />,
+};
+
+export const TransportActiveShipIcon: Story = {
+  name: 'Icon.Transport.Ship.Active',
+  render: () => <Icon.Transport active={true} type={'SHIP'} />,
+};
+
+export const TransportTrainIcon: Story = {
+  name: 'Icon.Transport.Train',
+  render: () => <Icon.Transport type={'TRAIN'} />,
+};
+
+export const TransportActiveTrainIcon: Story = {
+  name: 'Icon.Transport.Train.Active',
+  render: () => <Icon.Transport active={true} type={'TRAIN'} />,
+};
+
+export const TransportTramIcon: Story = {
+  name: 'Icon.Transport.Tram',
+  render: () => <Icon.Transport type={'TRAM'} />,
+};
+
+export const TransportActiveTramIcon: Story = {
+  name: 'Icon.Transport.Tram.Active',
+  render: () => <Icon.Transport active={true} type={'TRAM'} />,
+};
+
+export const TransportWalkIcon: Story = {
+  name: 'Icon.Transport.Walk',
+  render: () => <Icon.Transport type={'WALK'} />,
+};
+
+export const TransportActiveWalkIcon: Story = {
+  name: 'Icon.Transport.Walk.Active',
+  render: () => <Icon.Transport active={true} type={'WALK'} />,
+};

package/src/components/TripieIcon/icon.module.scss

@@ -0,0 +1,35 @@
+@mixin sizes($size: 'default') {
+  background-color: inherit;
+  border: none;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+
+  @if ($size == 'default') {
+    width: 1rem;
+    height: 1rem;
+  } @else if($size == 'large') {
+    height: 2rem;
+    width: 2rem;
+  }
+}
+
+.icon {
+  @include sizes('default');
+}
+.plane {
+  @include sizes('default');
+  position: absolute;
+  top: 50%;
+  z-index: 600;
+}
+
+.large {
+  @include sizes('large');
+}
+
+.icon-image {
+  min-width: 1rem;
+  min-height: 1rem;
+}

package/src/components/TripieIcon/icon.stories.tsx

@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useEffect } from 'react';
+
+import { useAppTheme } from '../../hooks';
+import Icon from './Icon';
+
+const meta: Meta<typeof Icon> = {
+  title: 'tripie-ui/Icon',
+  component: Icon,
+  tags: ['autodocs'],
+  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: 'Icon.Default',
+};
+
+export const LargeNavigateIcon: Story = {
+  name: 'Icon.Navigate.Large',
+  render: () => <Icon.Navigate sizes="large" />,
+};
+
+export const NavigateIcon: Story = {
+  name: 'Icon.Navigate',
+  render: () => <Icon.Navigate />,
+};
+
+export const RefreshIcon: Story = {
+  name: 'Icon.Refresh',
+  render: () => <Icon.Refresh />,
+};
+
+export const PlaneIcon: Story = {
+  name: 'Icon.Plane',
+  render: () => <Icon.Plane />,
+};
+
+export const CloudIcon: Story = {
+  name: 'Icon.Cloud',
+  render: () => <Icon.Cloud index={0} />,
+};
+
+export const CursorIcon: Story = {
+  name: 'Icon.Cursor',
+  render: () => <Icon.Cursor />,
+};
+
+export const ScrollIcon: Story = {
+  name: 'Icon.Scroll',
+  render: () => <Icon.Scroll />,
+};
+
+export const XIcon: Story = {
+  name: 'Icon.X',
+  render: () => <Icon.X />,
+};
+export const CheckIcon: Story = {
+  name: 'Icon.Check',
+  render: () => <Icon.Check />,
+};

package/src/components/TripieIcon/index.ts

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