NINEDOT-CLIENT/src/common/component/Mandalart/Mandalart.stories.tsx at 89601e3ba95638c9cfa03f138a9ae1326166dddc · SOPT-36-NINEDOT/NINEDOT-CLIENT · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
import type { Meta, StoryObj } from '@storybook/react-vite';

import Mandalart from './Mandalart';
import { MOCK_MANDALART_DATA } from './mock';

const meta = {
  title: 'Components/Mandalart',
  component: Mandalart,
  parameters: {
    layout: 'centered',
    backgrounds: {
      default: 'dark',
    },
  },
  tags: ['autodocs'],
  argTypes: {
    type: {
      control: 'select',
      options: ['TODO_SUB', 'TODO_MAIN', 'TODO_EDIT', 'MY_MANDAL'],
    },
  },
} satisfies Meta<typeof Mandalart>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {
  args: {
    mainGoal: MOCK_MANDALART_DATA.mainGoal,
    subGoals: MOCK_MANDALART_DATA.subGoals,
    type: 'TODO_MAIN',
  },
};

export const AllTypes: Story = {
  args: {
    mainGoal: MOCK_MANDALART_DATA.mainGoal,
    subGoals: MOCK_MANDALART_DATA.subGoals,
    type: 'TODO_MAIN',
  },
  render: () => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '4rem' }}>
      <div>
        <h3 style={{ marginBottom: '1rem' }}>TODO_SUB (96px)</h3>
        <Mandalart
          mainGoal={MOCK_MANDALART_DATA.mainGoal}
          subGoals={MOCK_MANDALART_DATA.subGoals}
          type="TODO_SUB"
        />
      </div>
      <div>
        <h3 style={{ marginBottom: '1rem' }}>TODO_MAIN (196px)</h3>
        <Mandalart
          mainGoal={MOCK_MANDALART_DATA.mainGoal}
          subGoals={MOCK_MANDALART_DATA.subGoals}
          type="TODO_MAIN"
        />
      </div>
      <div>
        <h3 style={{ marginBottom: '1rem' }}>TODO_EDIT (160px)</h3>
        <Mandalart
          mainGoal={MOCK_MANDALART_DATA.mainGoal}
          subGoals={MOCK_MANDALART_DATA.subGoals}
          type="TODO_EDIT"
        />
      </div>
      <div>
        <h3 style={{ marginBottom: '1rem' }}>MY_MANDAL (298px)</h3>
        <Mandalart
          mainGoal={MOCK_MANDALART_DATA.mainGoal}
          subGoals={MOCK_MANDALART_DATA.subGoals}
          type="MY_MANDAL"
        />
      </div>
    </div>
  ),
};