@tripie-pyotato/design-system 0.0.0

package/src/components/TripieButton/MenuToggle/menu-toggle.stories.tsx

@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { useEffect } from 'react';
+import MenuToggle from '.';
+import { useAppTheme } from '../../../hooks';
+
+const meta: Meta<typeof MenuToggle> = {
+  title: 'tripie-ui/Button/Menu/Toggle',
+  component: MenuToggle,
+  tags: ['autodocs'],
+  argTypes: {},
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '네비게이션 토글 버튼, 닫힌 상태에는 버거 아이콘이며 열린 상태에서는 X 모양으로 애니메이션 전환합니다.',
+      },
+    },
+  },
+  decorators: [
+    (story, context) => {
+      const { mode, setMode } = useAppTheme();
+      const selectedTheme = context.globals.theme || mode;
+
+      useEffect(() => {
+        setMode(selectedTheme);
+      }, [selectedTheme]);
+
+      return (
+        <div className={`${context.globals.theme}`} style={{ height: '12rem' }}>
+          {story()}
+        </div>
+      );
+    },
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: 'MenuToggle',
+};
+
+export const OpennedMenu: Story = {
+  name: 'MenuToggle.initalOpen',
+  render: () => {
+    return (
+      <MenuToggle initial={true}>
+        <MenuToggle.List>
+          {Array.from({ length: 3 }, (_, i) => (
+            <MenuToggle.Item key={i}>아이템 {i + 1}</MenuToggle.Item>
+          ))}
+        </MenuToggle.List>
+      </MenuToggle>
+    );
+  },
+};
+
+export const ClosedMenu: Story = {
+  name: 'MenuToggle.initial.Closed',
+  render: () => {
+    return (
+      <MenuToggle initial={false}>
+        <MenuToggle.List>
+          {Array.from({ length: 3 }, (_, i) => (
+            <MenuToggle.Item key={i}>아이템 {i + 1}</MenuToggle.Item>
+          ))}
+        </MenuToggle.List>
+      </MenuToggle>
+    );
+  },
+};

package/src/components/TripieButton/NoStyle/NoStyleButton.spec.tsx

@@ -0,0 +1,50 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { vi } from 'vitest';
+import NoStyleButton from './NoStyleButton';
+
+describe('No Style button Component called', () => {
+  it('버튼 클릭 시 action 함수가 호출된다.', async () => {
+    const actionMock = vi.fn(); // 🔥 Mock function
+
+    render(<NoStyleButton action={actionMock}>button</NoStyleButton>);
+
+    const buttonElement = screen.getByRole('button', { name: /button/i });
+
+    expect(buttonElement).toBeInTheDocument();
+
+    await userEvent.click(buttonElement); // 클릭
+
+    expect(actionMock).toHaveBeenCalled(); // 함수가 호출되었는지 체크
+  });
+
+  it('버튼 호버 시 커서가 pointer가 된다.', async () => {
+    const actionMock = vi.fn(); // 🔥 Mock function
+
+    render(<NoStyleButton action={actionMock}>button</NoStyleButton>);
+
+    const buttonElement = screen.getByRole('button', { name: /button/i });
+
+    expect(buttonElement).toBeInTheDocument();
+
+    await userEvent.hover(buttonElement);
+
+    const style = getComputedStyle(buttonElement);
+
+    expect(style.cursor).toBe('pointer');
+  });
+
+  it('테두리 없는 버튼이 랜더된다.', () => {
+    const actionMock = vi.fn(); // 🔥 Mock function
+
+    render(<NoStyleButton action={actionMock}>button</NoStyleButton>);
+
+    const buttonElement = screen.getByRole('button', { name: /button/i });
+
+    expect(buttonElement).toBeInTheDocument();
+
+    const style = getComputedStyle(buttonElement);
+
+    expect(style.border).toBe('0px');
+  });
+});

package/src/components/TripieButton/NoStyle/NoStyleButton.tsx

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+import { classNames } from '../../../shared/wrappers';
+import Style from './no-style-button.module.scss';
+
+const cx = classNames.bind(Style);
+
+const NoStyleButton = ({
+  action,
+  children,
+  name = 'no-style-button',
+  type = 'button',
+  className,
+}: {
+  action?: () => void | Promise<unknown>;
+  name?: string;
+  children: ReactNode;
+  className?: string;
+  type?: 'submit' | 'reset' | 'button';
+}) => {
+  return (
+    <button type={type} name={name} onClick={action} className={cx('clear-btn', className)}>
+      {children}
+    </button>
+  );
+};
+
+export default NoStyleButton;

package/src/components/TripieButton/NoStyle/index.ts

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

package/src/components/TripieButton/NoStyle/no-style-button.module.scss

@@ -0,0 +1,5 @@
+@use '../../../mixins/clear' as *;
+
+.clear-btn {
+  @include clear-btn;
+}

package/src/components/TripieButton/NoStyle/no-style-button.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { useEffect } from 'react';
+import NoStyleButton from '.';
+import { useAppTheme } from '../../../hooks';
+
+const meta: Meta<typeof NoStyleButton> = {
+  title: 'tripie-ui/Button/NoStyle',
+  component: NoStyleButton,
+  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: 'Button',
+  args: {
+    children: 'Default',
+  },
+};

package/src/components/TripieCard/Card.tsx

@@ -0,0 +1,167 @@
+import { MutableRefObject, ReactNode, RefObject } from 'react';
+import { SHINE_VARIANT } from '../../shared/variants';
+import { classNames, Motion } from '../../shared/wrappers';
+
+import Divider from '../Divider';
+import MotionSlideUp from '../MotionSlideUp/MotionSlideUp';
+import Text from '../Text';
+import TripieContainer from '../TripieContainer/TripieContainer';
+import TripieImage, { ImageSizes } from '../TripieImage';
+import Style from './card.module.scss';
+
+const cx = classNames.bind(Style);
+
+export type CustomAnimationProps = {
+  duration: number;
+  delay: number;
+  replays: boolean;
+  text?: string;
+  endColor?: string;
+  children?: ReactNode;
+  className?: string;
+  baseColor?: string;
+};
+
+const Card = ({ duration, replays, delay = 0.3, children, className }: Partial<CustomAnimationProps>) => {
+  return (
+    <MotionSlideUp
+      delay={delay}
+      duration={duration}
+      replays={replays}
+      className={cx('with-border', 'outer-wrap', className)}
+    >
+      <TripieContainer margin="none" className={cx('noise-contents-contrast')}>
+        {children}
+      </TripieContainer>
+
+      <div className={cx('noise')}></div>
+    </MotionSlideUp>
+  );
+};
+
+const CardContent = ({
+  children,
+  className,
+  ref,
+}: Readonly<{
+  children: ReactNode;
+  className?: string;
+  ref?: MutableRefObject<HTMLDivElement | null>;
+}>) => {
+  return (
+    <TripieContainer margin="none" ref={ref} className={cx('with-border', 'inner-wrap', className)}>
+      {children}
+    </TripieContainer>
+  );
+};
+
+const ClickableCardContent = ({
+  children,
+  ref,
+  className,
+  onClick,
+  selected,
+}: Readonly<{
+  ref?: RefObject<HTMLDivElement>;
+  children: ReactNode;
+  className?: string;
+  onClick?: () => void;
+  selected?: boolean;
+}>) => {
+  return (
+    <Motion.Div
+      ref={ref}
+      whileHover={'shine'}
+      whileTap={'shine'}
+      animate={selected ? 'selected' : 'rest'}
+      variants={SHINE_VARIANT}
+      onClick={onClick}
+      className={cx('chip', 'with-border', 'inner-wrap', className)}
+    >
+      {children}
+    </Motion.Div>
+  );
+};
+
+const CardDescription = ({
+  children,
+  className,
+}: Readonly<{
+  children: ReactNode;
+  className?: string;
+}>) => {
+  return (
+    <TripieContainer margin="none" className={cx('inner-wrap', 'with-description', className)}>
+      {children}
+    </TripieContainer>
+  );
+};
+
+const CardWithImage = ({
+  onClick,
+  src,
+  alt,
+  title,
+  summary,
+  className,
+  sourceUrl,
+  imageSize = 'medium',
+  displaySource = false,
+  withBorder,
+  isFullSize = false, // width 100% card
+  blurDataURL,
+}: {
+  onClick?: () => void;
+  src: string;
+  alt?: string;
+  title?: string;
+  summary?: string;
+  className?: string;
+  sourceUrl?: string;
+  imageSize?: ImageSizes;
+  displaySource?: boolean;
+  withBorder?: boolean;
+  blurDataURL?: string;
+  isFullSize?: boolean;
+}) => {
+  return (
+    <Card.ClickableContent onClick={onClick} className={cx('article-card', isFullSize ? 'full-size' : '', className)}>
+      <TripieContainer margin="none" className={cx('img-wrap')}>
+        {sourceUrl == null || !displaySource ? (
+          <TripieImage
+            blurDataURL={blurDataURL}
+            src={src}
+            sizes={imageSize}
+            alt={alt ?? `${src} 이미지일 수도 있음`}
+            className={cx('thumbnail')}
+            withBorder={withBorder}
+          />
+        ) : (
+          <TripieImage.WithSourceUrl
+            sizes={imageSize}
+            withBorder={withBorder}
+            sourceUrl={sourceUrl}
+            src={src}
+            alt={alt ?? `${src} 이미지일 수도 있음`}
+            className={cx('thumbnail')}
+          />
+        )}
+      </TripieContainer>
+      <TripieContainer>
+        <TripieContainer margin="sm" applyMargin="bottom">
+          <Text className={cx('bold')}>{title}</Text>
+          <Divider />
+        </TripieContainer>
+        {summary}
+      </TripieContainer>
+    </Card.ClickableContent>
+  );
+};
+
+Card.Content = CardContent;
+Card.ClickableContent = ClickableCardContent;
+Card.Description = CardDescription;
+
+Card.WithCoverImage = CardWithImage;
+
+export default Card;

package/src/components/TripieCard/card.module.scss

@@ -0,0 +1,122 @@
+@use '../../variables' as *;
+@use '../../mixins' as *;
+
+@mixin noise-container {
+  position: absolute;
+  border-radius: inherit;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  @include background-static;
+  border: 0;
+  opacity: 0.2;
+  z-index: 0;
+}
+
+@mixin noise-contents-contrast {
+  z-index: 2;
+}
+
+.noise-contents-contrast {
+  @include noise-contents-contrast;
+}
+.with-border {
+  @include with-border;
+  padding: 1.2rem;
+}
+
+.inner-wrap {
+  opacity: 1;
+
+  position: relative;
+  overflow: hidden;
+
+  &.with-description {
+    align-items: flex-start;
+  }
+  &:not(.with-description) {
+    background-color: $theme-500;
+  }
+  z-index: 1;
+}
+
+.outer-wrap {
+  @include with-border;
+  @include flexbox(column);
+  border-radius: 10px;
+  padding: 1.2rem;
+  position: relative;
+  overflow: hidden;
+  min-width: 318px;
+
+  @media (max-width: 450) {
+    min-width: 100%;
+  }
+
+  height: 100%;
+}
+
+.noise {
+  @include noise-container;
+}
+
+.chip {
+  cursor: pointer;
+}
+
+.embedded-card {
+  min-width: 21rem;
+  @media (max-width: 450) {
+    min-width: 17rem;
+  }
+  width: 60%;
+  max-width: 60%;
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+.article-card {
+  padding: 0;
+  justify-content: flex-start;
+  min-width: 12rem;
+  flex-wrap: wrap;
+}
+
+.full-size{
+  width:100%
+}
+
+.thumbnail {
+  width: 100%;
+  height: 16rem;
+  position: relative;
+}
+.bold {
+  font-weight: 700;
+}
+
+// poi-card
+
+.embedded-card-wrap {
+  overflow-x: scroll;
+  height: 100%;
+  align-items: stretch;
+}
+
+.poi-card {
+  min-height: 21rem;
+
+  min-width: 16rem;
+
+  & > div:first-child {
+    height: 12rem;
+    max-height: 8rem; /* Restrict image height */
+    min-height: 8rem; /* Restrict image height */
+  }
+
+  & > div {
+    margin: 0;
+  }
+}

package/src/components/TripieCard/card.stories.tsx

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { useEffect } from 'react';
+import { useAppTheme } from '../../hooks';
+import Card from './Card';
+
+const meta: Meta<typeof Card> = {
+  title: 'tripie-ui/Card',
+  component: Card,
+  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: 'Card',
+  args: {
+    children: 'Default',
+  },
+};
+
+export const CardContent: Story = {
+  name: 'Card.Content',
+
+  render: () => <Card.Content> Card Content</Card.Content>,
+};
+
+export const ClickableCardContent: Story = {
+  name: 'Card.ClickableContent',
+
+  render: () => <Card.ClickableContent>ClickableContent Card Content</Card.ClickableContent>,
+};
+
+export const CardDescription: Story = {
+  name: 'Card.Description',
+  render: () => <Card.Description>Card Description</Card.Description>,
+};
+
+export const CardWithCoverImage: Story = {
+  name: 'Card.WithCoverImage',
+  render: () => (
+    <Card.WithCoverImage
+      src={'https://media.triple.guide/triple-cms/c_fill,f_auto,h_256,w_256/54e3594d-1087-43ff-b760-7231d4103edf.jpeg'}
+      alt={
+        'https://media.triple.guide/triple-cms/c_limit,f_auto,h_2048,w_2048/54e3594d-1087-43ff-b760-7231d4103edf.jpeg의 이미지일 수도 있음'
+      }
+      summary={'대자연부터 감성 카페까지, 인생샷을 남길 수 있는 곳'}
+      title={'여름 제주 인생샷 명소 BEST 7'}
+      withBorder={false}
+    />
+  ),
+};

package/src/components/TripieCard/index.ts

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

package/src/components/TripieContainer/TripieContainer.tsx

@@ -0,0 +1,54 @@
+import { ComponentProps, ReactNode, RefObject } from 'react';
+import { classNames } from '../../shared/wrappers';
+import Style from './tripie-container.module.scss';
+
+export type TripieContainerProps = {
+  margin?: 'xl' | 'l' | 'm' | 'sm' | 'xsm' | 'none';
+  align?: 'left' | 'center' | 'right';
+  children?: ReactNode;
+  refs?: RefObject<HTMLDivElement>;
+  preserveWhiteSpace?: boolean;
+  applyMargin?:
+    | 'top-bottom'
+    | 'top-left-right'
+    | 'left-right-bottom'
+    | 'left-right'
+    | 'all'
+    | 'left'
+    | 'right'
+    | 'top'
+    | 'bottom';
+} & Omit<ComponentProps<'div'>, 'children'>;
+
+const cx = classNames.bind(Style);
+
+const TripieContainer = ({
+  children,
+  className,
+  align = 'left',
+  margin = 'm',
+  applyMargin = 'all',
+  preserveWhiteSpace = false,
+  refs,
+  ...props
+}: TripieContainerProps) => {
+  return (
+    <div
+      ref={refs}
+      className={cx(
+        'layout-fill-available',
+        `align-${align}`,
+        'container',
+        applyMargin,
+        margin,
+        preserveWhiteSpace ? 'preserve-white-space' : '',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default TripieContainer;

package/src/components/TripieContainer/index.ts

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

package/src/components/TripieContainer/tripie-container.module.scss

@@ -0,0 +1,93 @@
+@use '../../functions/' as *;
+@use 'sass:map';
+
+.preserve-white-space {
+  @media (max-width: 470px) {
+    white-space: pre-wrap;
+  }
+}
+
+.layout-fill-available {
+  width: -moz-available;
+  width: -webkit-fill-available;
+  width: stretch; // spec has changed
+}
+
+.align-center {
+  display: inline-flex;
+  justify-content: center;
+  align-content: stretch;
+  flex-wrap: nowrap;
+}
+.align-right {
+  display: inline-flex;
+  justify-content: flex-end;
+  align-content: stretch;
+  flex-wrap: nowrap;
+}
+
+$space-map: (
+  xl: space(4rem),
+  l: space(2rem),
+  m: space(1rem),
+  sm: space(0.6rem),
+  xsm: space(0.2rem),
+);
+
+@mixin margins($direction, $size) {
+  @if ($direction == 'top-bottom') {
+    margin: $size 0;
+  } @else if ($direction == 'left-right') {
+    margin: 0 $size;
+  } @else if ($direction == 'top-left-right') {
+    margin: $size;
+    margin-bottom: 0;
+  } @else if($direction == 'left-right-bottom') {
+    margin: $size;
+    margin-top: 0;
+  } @else if ($direction == 'left') {
+    margin: 0;
+    margin-left: $size;
+  } @else if ($direction == 'right') {
+    margin: 0;
+    margin-right: $size;
+  } @else if ($direction == 'top') {
+    margin: 0;
+    margin-top: $size;
+  } @else if ($direction == 'bottom') {
+    margin: 0;
+    margin-bottom: $size;
+  } @else if ($direction == 'all') {
+    margin: $size;
+  }
+}
+
+@each $key, $value in $space-map {
+  .container.all.#{$key} {
+    @include margins('all', $value);
+  }
+  .container.top-bottom.#{$key} {
+    @include margins('top-bottom', $value);
+  }
+  .container.left-right.#{$key} {
+    @include margins('left-right', $value);
+  }
+  .container.left.#{$key} {
+    @include margins('left', $value);
+  }
+  .container.right.#{$key} {
+    @include margins('right', $value);
+  }
+  .container.top.#{$key} {
+    @include margins('top', $value);
+  }
+  .container.bottom.#{$key} {
+    @include margins('bottom', $value);
+  }
+  .container.top-left-right.#{$key} {
+    @include margins('top-left-right', $value);
+  }
+  .container.left-right-bottom.#{$key} {
+    @include margins('left-right-bottom', $value);
+  }
+}