@tripie-pyotato/design-system 0.0.0

package/src/components/Divider/divider.stories.tsx

@@ -0,0 +1,94 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { useEffect } from 'react';
+import { useAppTheme } from '../../hooks';
+import Divider from './Divider';
+
+const meta: Meta<typeof Divider> = {
+  title: 'tripie-ui/Divider',
+  component: Divider,
+  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: 'Divider.Default',
+  // args: {},
+  render: () => (
+    <>
+      content before
+      <Divider />
+      content after
+    </>
+  ),
+};
+
+export const ArticleDivider1: Story = {
+  name: 'Divider.Article.hr1',
+  render: () => (
+    <>
+      content before
+      <Divider.Article item={{ type: 'hr1' }} />
+      content after
+    </>
+  ),
+};
+
+export const ArticleDivider2: Story = {
+  name: 'Divider.Article.hr2',
+  render: () => (
+    <>
+      content before
+      <Divider.Article item={{ type: 'hr2' }} />
+      content after
+    </>
+  ),
+};
+
+export const ArticleDivider3: Story = {
+  name: 'Divider.Article.hr3',
+  render: () => (
+    <>
+      content before
+      <Divider.Article item={{ type: 'hr3' }} />
+      content after
+    </>
+  ),
+};
+
+export const ArticleDivider4: Story = {
+  name: 'Divider.Article.hr4',
+  render: () => (
+    <>
+      content before
+      <Divider.Article item={{ type: 'hr4' }} />
+      content after
+    </>
+  ),
+};
+
+export const ArticleDivider5: Story = {
+  name: 'Divider.Article.hr5',
+  render: () => (
+    <>
+      content before
+      <Divider.Article item={{ type: 'hr5' }} />
+      content after
+    </>
+  ),
+};

package/src/components/Divider/index.ts

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

package/src/components/Headings/Headings.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import { classNames } from '../../shared/wrappers';
+import Text, { TextProps } from '../Text/Text';
+import Style from './headings.module.scss';
+
+const style = classNames.bind(Style);
+
+const Heading = ({ children, className }: TextProps) => <Text className={style('default', className)}>{children}</Text>;
+
+const H1 = ({ children, className }: TextProps) => {
+  return <h1 className={style('h1', className)}>{children}</h1>;
+};
+
+const H2 = ({ children, className }: TextProps) => {
+  return <h2 className={style('h2', className)}>{children}</h2>;
+};
+
+const H3 = ({ children, className }: TextProps) => {
+  return <h3 className={style('h3', className)}>{children}</h3>;
+};
+
+const H4 = ({ children, className }: TextProps) => {
+  return <h4 className={style('h4', className)}>{children}</h4>;
+};
+const Headline = ({ children, className }: TextProps) => {
+  return <h4 className={style('headline', className)}>{children}</h4>;
+};
+
+Heading.Headline = Headline;
+Heading.H1 = H1;
+Heading.H2 = H2;
+Heading.H3 = H3;
+Heading.H4 = H4;
+
+export default Heading;

package/src/components/Headings/headings.module.scss

@@ -0,0 +1,46 @@
+@use '../../base/' as *;
+@use '../../functions/' as *;
+@use '../../generator/' as *;
+@use '../../mixins/' as *;
+@use '../Text/text.module' as *;
+
+@use 'sass:map';
+
+.headings {
+  @include text-ellipsis(1);
+  @include word-wrap;
+  font-size: font-size(text);
+}
+
+.headline {
+  font-size: font-size(small);
+}
+
+.default {
+  font-size: font-size(default);
+}
+
+.h0 {
+  font-size: font-size(h0);
+}
+
+.h1 {
+  font-size: font-size(h1);
+}
+
+.h2 {
+  font-size: font-size(h2);
+}
+.h3 {
+  font-size: font-size(h3);
+}
+.h4 {
+  font-size: font-size(h4);
+}
+
+.small {
+  font-size: font-size(small);
+}
+.tiny {
+  font-size: font-size(tiny);
+}

package/src/components/Headings/headings.stories.tsx

@@ -0,0 +1,92 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useEffect } from 'react';
+import { useAppTheme } from '../../hooks';
+import Heading from './Headings';
+
+const meta: Meta<typeof Heading> = {
+  title: 'tripie-ui/Typography/Headings',
+  tags: ['autodocs'],
+  component: Heading,
+  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 H1: Story = {
+  name: 'H1',
+  decorators: [
+    story => {
+      return story().type.H1({
+        children: 'Heading 1',
+      });
+    },
+  ],
+};
+
+export const H2: Story = {
+  name: 'H2',
+  decorators: [
+    story => {
+      return story().type.H2({
+        children: 'Heading 2',
+      });
+    },
+  ],
+};
+
+export const H3: Story = {
+  name: 'H3',
+  decorators: [
+    story => {
+      return story().type.H3({
+        children: 'Heading 3',
+      });
+    },
+  ],
+};
+export const H4: Story = {
+  name: 'H4',
+  decorators: [
+    story => {
+      return story().type.H4({
+        children: 'Heading 4',
+      });
+    },
+  ],
+};
+
+export const Headline: Story = {
+  name: 'Headline',
+  decorators: [
+    story => {
+      return story().type.H4({
+        children: 'Headline',
+      });
+    },
+  ],
+};
+
+export const HeadlineSecondary: Story = {
+  name: 'Headline secondary',
+  decorators: [
+    story => {
+      return story().type.H4({
+        children: 'Headline',
+        className: 'secondary',
+      });
+    },
+  ],
+};

package/src/components/Headings/index.ts

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

package/src/components/Link/Link.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import Link from 'next/link';
+import { classNames } from '../../shared/wrappers';
+import Text, { TextProps } from '../Text';
+import Style from './link.module.scss';
+
+const style = classNames.bind(Style);
+
+export interface LinkProps extends React.RefAttributes<HTMLAnchorElement> {
+  href: string;
+  children: string;
+  className?: string;
+  'aria-selected'?: boolean;
+  'aria-disabled'?: boolean;
+  role?: string;
+  size?: TextProps['size'];
+  bold?: TextProps['bold'];
+}
+
+function UnstyledLink({ children, className, href, role, size = 'default', ...props }: Readonly<LinkProps>) {
+  return (
+    <Link href={href} className={style('link', className)} role={role} {...props}>
+      <Text bold={true} size={size}>
+        {children}
+      </Text>
+    </Link>
+  );
+}
+
+export default UnstyledLink;

package/src/components/Link/List.spec.tsx

@@ -0,0 +1,25 @@
+import { render, screen } from '@testing-library/react';
+
+import { beforeAll, describe, expect, it } from 'vitest';
+import UnstyledLink from './Link';
+// describe('basic math', () => {
+//   it('1+1=2', () => {
+//     expect(1 + 1).toBe(2);
+//   });
+// });
+
+describe('UnstyledLink Component', () => {
+  beforeAll(() => {
+    // ✅ Ensure `document` is available before running tests
+    global.document = window.document;
+  });
+
+  it('renders the link with the correct text and href', () => {
+    render(<UnstyledLink href="/home">Go Home</UnstyledLink>);
+
+    const linkElement = screen.getByRole('link', { name: /go home/i });
+
+    expect(linkElement).toBeInTheDocument();
+    expect(linkElement).toHaveAttribute('href', '/home');
+  });
+});

package/src/components/Link/index.ts

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

package/src/components/Link/link.module.scss

@@ -0,0 +1,26 @@
+@use '../../base/' as *;
+@use '../../functions/' as *;
+@use '../../generator/' as *;
+@use '../../mixins/' as *;
+@use '../Text/text.module' as *;
+
+@use 'sass:map';
+
+.link {
+  text-decoration: none;
+  color: color(default, 700);
+
+  &[aria-selected='false'] {
+    color: color(default, 500);
+    font-weight: font-weight(base);
+  }
+  &[aria-selected='true'] {
+    color: color(default, 900);
+    font-weight: font-weight(bold);
+  }
+
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+    color: color(default, 400);
+  }
+}

package/src/components/Link/link.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useEffect } from 'react';
+import { useAppTheme } from '../../hooks';
+import { default as Text, default as UnstyledLink } from './Link';
+
+const meta: Meta<typeof UnstyledLink> = {
+  title: 'tripie-ui/Typography/Link',
+  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: '기본 링크',
+    href: '#',
+  },
+};
+
+export const AriaSelectedTrue: Story = {
+  name: 'AriaSelectedTrue',
+  args: {
+    children: 'aria selected',
+    href: '#',
+    'aria-selected': true,
+  },
+};
+
+export const AriaSelectedFalse: Story = {
+  name: 'AriaSelectedFalse',
+  args: {
+    children: 'aria not selected',
+    href: '#',
+    'aria-selected': false,
+  },
+};
+
+export const DisabledLink: Story = {
+  name: 'DisabledLink',
+  args: {
+    children: 'disabled link',
+    href: '#',
+    'aria-disabled': true,
+  },
+};

package/src/components/List/List.tsx

@@ -0,0 +1,63 @@
+import { ReactNode } from 'react';
+import { classNames } from '../../shared/wrappers';
+import TripieContainer from '../TripieContainer/TripieContainer';
+import Style from './list.module.scss';
+
+const cx = classNames.bind(Style);
+
+const List = ({
+  children,
+  className,
+  rowView = false,
+}: {
+  children: ReactNode;
+  className?: string;
+  rowView?: boolean;
+}) => {
+  return (
+    <TripieContainer margin="m" className={cx(className)} applyMargin="top-bottom">
+      <ul className={cx('list', rowView ? 'row-view' : '')}>{children}</ul>
+    </TripieContainer>
+  );
+};
+
+export const ListItem = ({
+  children,
+  justifyContent = 'flex-start',
+  alignItems = 'normal',
+  gap = 'default',
+  className,
+}: {
+  children: ReactNode;
+  justifyContent?: 'flex-start' | 'center' | 'flex-end';
+  alignItems?: 'normal' | 'center' | 'start' | 'stretch' | 'end';
+  gap?: 'default' | 'l'; // 0.5rem 1rem
+  className?: string;
+}) => {
+  return (
+    <li
+      className={cx(
+        'list-item',
+        `justify-content-${justifyContent}`,
+        `align-items-${alignItems}`,
+        `gap-${gap}`,
+        className
+      )}
+    >
+      {children}
+    </li>
+  );
+};
+
+const GridList = ({ children, className }: { children: ReactNode; className?: string }) => {
+  return (
+    <TripieContainer margin="m" className={cx(className)} applyMargin="top-bottom">
+      <ul className={cx('list', 'wrap')}>{children}</ul>
+    </TripieContainer>
+  );
+};
+
+List.Item = ListItem;
+List.Grid = GridList;
+
+export default List;

package/src/components/List/list-item.stories.tsx

@@ -0,0 +1,89 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { useEffect } from 'react';
+import { useAppTheme } from '../../hooks';
+import Icon from '../TripieIcon/Icon';
+import List, { ListItem } from './List';
+
+const meta: Meta<typeof ListItem> = {
+  title: 'tripie-ui/List/Item',
+  component: List,
+  tags: ['autodocs'],
+  argTypes: {
+    alignItems: {
+      options: ['normal', 'center', 'start', 'stretch', 'end'],
+      control: { type: 'radio' },
+    },
+    justifyContent: {
+      options: ['flex-start', 'center', 'flex-end'],
+      control: { type: 'radio' },
+    },
+    gap: {
+      options: ['default', 'l'],
+      control: { type: 'radio' },
+    },
+  },
+  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>;
+    },
+  ],
+  parameters: { docs: { description: { component: '' } } },
+};
+
+export const Default: Story = {
+  name: 'Default',
+  render: args => {
+    return (
+      <List.Item alignItems="normal" {...args}>
+        <Icon />
+        list item
+      </List.Item>
+    );
+  },
+  args: {
+    alignItems: 'normal',
+    justifyContent: 'flex-start',
+    gap: 'default',
+  },
+  argTypes: {
+    alignItems: {
+      control: 'select',
+      defaultValue: 'normal',
+      description: 'flex 속성 align-items과 유사하게 동작, 직계 자식들을 교차축에 따라 정렬',
+      table: {
+        type: { summary: "'normal' | 'center' |'start' | 'stretch' | 'end'" },
+        defaultValue: { summary: 'normal' },
+      },
+    },
+    justifyContent: {
+      control: 'select',
+      defaultValue: 'flex-start',
+      description:
+        'flex 속성 justify-content과 유사하게 동작, "flex-start" 설정 시 플렉스 항목들을 축의 시작 부분에 정렬, "center" 설정 시 항목들을 축의 중심 부분에 정렬, "flex-end" 정렬 시 플렉스 항목들을 축의 끝 부분에 정렬',
+      table: {
+        type: { summary: "'flex-start' | 'center' | 'flex-end'" },
+        defaultValue: { summary: 'flex-start' },
+      },
+    },
+    gap: {
+      control: 'select',
+      defaultValue: 'default',
+      description: 'flex gap 속성을 "default"로 설정시 0.5rem, "l"로 설정 시 1rem',
+      table: {
+        type: { summary: "'default' | 'l'" },
+        defaultValue: { summary: 'default' },
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;

package/src/components/List/list.module.scss

@@ -0,0 +1,59 @@
+@use '../../variables' as *;
+@use '../../mixins' as *;
+
+.list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: inline-flex;
+  gap: 1rem;
+  flex-direction: column;
+  width: 100%;
+
+  &.row-view {
+    flex-direction: row;
+  }
+}
+
+.wrap {
+  @include grid-wrap;
+}
+
+@mixin gap($size: 'default') {
+  gap: if($size == 'l', 1rem, 0.5rem);
+}
+
+.list-item {
+  display: inline-flex;
+  width: 100%;
+
+  &.justify-content-flex-start {
+    justify-content: flex-start;
+  }
+  &.justify-content-center {
+    justify-content: center;
+  }
+  &.justify-content-flex-end {
+    justify-content: flex-end;
+  }
+
+  &.align-items-start {
+    align-items: flex-start;
+  }
+  &.align-items-center {
+    align-items: center;
+  }
+  &.align-items-end {
+    align-items: flex-end;
+  }
+  &.align-items-stretch {
+    align-items: stretch;
+  }
+
+  &.gap-l {
+    @include gap('l');
+  }
+  &.gap-default {
+    @include gap('default');
+  }
+}