Skip to content

Commit 9a64d19

Browse files
SiyeopSiyeop
committed
feature. Apply ESLint & Prettier on Stories
1 parent 79d24b1 commit 9a64d19

35 files changed

+1730
-1305
lines changed

‎stories/components/button/button-group/TButtonGroup.stories.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1-
import {Meta, StoryObj} from '@storybook/react';
2-
import {ReactNode, useCallback, useState} from 'react';
1+
import type {Meta, StoryObj} from '@storybook/react';
2+
import type {ReactNode} from 'react';
3+
import {useCallback, useState} from 'react';
4+
35
import TButtonGroup from '@/components/button/button-group/TButtonGroup';
46
import TIcon from '@/components/icon/TIcon';
57

‎stories/components/button/button/TButton.stories.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import {ReactNode} from 'react';
21
import type {Meta, StoryObj} from '@storybook/react';
2+
import type {ReactNode} from 'react';
3+
4+
import type {TButtonProps} from '@/components';
35
import TButton from '@/components/button/button/TButton';
4-
import {TButtonProps} from '@/components';
56

67
const meta: Meta<typeof TButton> = {
78
title: 'Button/TButton',

‎stories/components/button/icon-button/TIconButton.stories.tsx

Lines changed: 61 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,81 @@
11
import type {Meta, StoryObj} from '@storybook/react';
2-
import React, {ReactElement} from 'react';
3-
import TIconButton from '~/button/icon-button/TIconButton';
2+
import type {ReactElement} from 'react';
3+
import React from 'react';
4+
45
import TTooltip from '../../../../src/components/guide/tooltip/TTooltip';
56

7+
import TIconButton from '~/button/icon-button/TIconButton';
68

79
const meta: Meta<typeof TIconButton> = {
810
title: 'Button/TIconButton',
911
component: TIconButton,
1012
};
1113
export default meta;
1214

13-
1415
type Story = StoryObj<typeof TIconButton>;
1516

16-
const Showcase = (props: { children: ReactElement}): ReactElement => {
17-
return (<div style={{display: 'flex', flexDirection: 'column', fontSize: '14px', gap: '8px', alignItems: 'center'}}>
18-
{props.children}
19-
</div>
17+
const Showcase = (props: {children: ReactElement}): ReactElement => {
18+
return (
19+
<div style={{display: 'flex', flexDirection: 'column', fontSize: '14px', gap: '8px', alignItems: 'center'}}>
20+
{props.children}
21+
</div>
2022
);
2123
};
2224

25+
const Template = (args) => (
26+
<>
27+
<div
28+
style={{
29+
display: 'grid',
30+
gridTemplateColumns: 'repeat(4, 150px)',
31+
marginTop: '32px',
32+
rowGap: '40px',
33+
alignItems: 'center',
34+
textAlign: 'center',
35+
}}
36+
>
37+
<TTooltip id={'icon-button-tooltip'} />
38+
<div></div>
39+
<div>Elevation</div>
40+
<div>Flat</div>
41+
<div>None</div>
2342

24-
const Template = (args) => <>
25-
<div style={{display: 'grid', gridTemplateColumns: 'repeat(4, 150px)', marginTop: '32px', rowGap: '40px', alignItems: 'center', textAlign: 'center'}}>
26-
<TTooltip id={'icon-button-tooltip'}/>
27-
<div></div>
28-
<div>Elevation</div>
29-
<div>Flat</div>
30-
<div>None</div>
43+
<div>Rectangle</div>
44+
<Showcase>
45+
<TIconButton {...args} shape={'rectangle'} outline={'elevation'}>
46+
add
47+
</TIconButton>
48+
</Showcase>
49+
<Showcase>
50+
<TIconButton {...args} shape={'rectangle'} outline={'flat'}>
51+
add
52+
</TIconButton>
53+
</Showcase>
54+
<Showcase>
55+
<TIconButton {...args} shape={'rectangle'} outline={'none'}>
56+
add
57+
</TIconButton>
58+
</Showcase>
3159

32-
<div>Rectangle</div>
33-
<Showcase><TIconButton {...args} shape={'rectangle'} outline={'elevation'}>add</TIconButton></Showcase>
34-
<Showcase><TIconButton {...args} shape={'rectangle'} outline={'flat'}>add</TIconButton></Showcase>
35-
<Showcase><TIconButton {...args} shape={'rectangle'} outline={'none'}>add</TIconButton></Showcase>
36-
37-
<div>Circle</div>
38-
<Showcase><TIconButton {...args} shape={'circle'} outline={'elevation'}>add</TIconButton></Showcase>
39-
<Showcase><TIconButton {...args} shape={'circle'} outline={'flat'}>add</TIconButton></Showcase>
40-
<Showcase><TIconButton {...args} shape={'circle'} outline={'none'}>add</TIconButton></Showcase>
41-
42-
</div>
43-
44-
</>;
60+
<div>Circle</div>
61+
<Showcase>
62+
<TIconButton {...args} shape={'circle'} outline={'elevation'}>
63+
add
64+
</TIconButton>
65+
</Showcase>
66+
<Showcase>
67+
<TIconButton {...args} shape={'circle'} outline={'flat'}>
68+
add
69+
</TIconButton>
70+
</Showcase>
71+
<Showcase>
72+
<TIconButton {...args} shape={'circle'} outline={'none'}>
73+
add
74+
</TIconButton>
75+
</Showcase>
76+
</div>
77+
</>
78+
);
4579
export const Default: Story = {
4680
render: Template,
4781
args: {
@@ -58,4 +92,3 @@ export const Disabled: Story = {
5892
disabled: true,
5993
},
6094
};
61-

‎stories/components/data-container/action-bar/TActionBar.stories.tsx

Lines changed: 30 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import {ReactNode} from 'react';
2-
import {Meta, StoryObj} from '@storybook/react';
3-
import TActionBar from '~/data-container/action-bar/TActionBar';
1+
import type {Meta, StoryObj} from '@storybook/react';
2+
import type {ReactNode} from 'react';
3+
44
import TButton from '~/button/button/TButton';
5-
import {TActionBarProps} from '~/data-container/action-bar/TActionBar.interface';
5+
import TActionBar from '~/data-container/action-bar/TActionBar';
6+
import type {TActionBarProps} from '~/data-container/action-bar/TActionBar.interface';
67

78
const meta: Meta<typeof TActionBar> = {
89
title: 'DataContainer/TActionBar',
@@ -13,8 +14,7 @@ export default meta;
1314

1415
type Story = StoryObj<typeof TActionBar>;
1516

16-
17-
const Container = ({label, children}: { label: string, children: ReactNode }) => {
17+
const Container = ({label, children}: {label: string; children: ReactNode}) => {
1818
return (
1919
<div style={{border: '1px solid #eee', padding: '16px'}}>
2020
<div style={{marginBottom: '16px', fontSize: '12px'}}>{label}</div>
@@ -23,49 +23,52 @@ const Container = ({label, children}: { label: string, children: ReactNode }) =>
2323
);
2424
};
2525

26-
2726
const Template = (args: TActionBarProps) => {
28-
2927
return (
3028
<div style={{display: 'flex', flexDirection: 'column', gap: '2rem'}}>
3129
<Container label={'Left + Right with Primary Button'}>
32-
<TActionBar leftAction={<TButton>목록</TButton>}
33-
rightAction={<>
34-
<TButton>취소</TButton>
35-
<TButton main>저장</TButton>
36-
</>}
37-
{...args}
30+
<TActionBar
31+
leftAction={<TButton>목록</TButton>}
32+
rightAction={
33+
<>
34+
<TButton>취소</TButton>
35+
<TButton main>저장</TButton>
36+
</>
37+
}
38+
{...args}
3839
/>
3940
</Container>
4041
<Container label={'Left + Right'}>
41-
<TActionBar leftAction={<TButton>이전</TButton>}
42-
rightAction={<TButton>다음</TButton>} {...args}
43-
/>
42+
<TActionBar leftAction={<TButton>이전</TButton>} rightAction={<TButton>다음</TButton>} {...args} />
4443
</Container>
4544
<Container label={'Center Alone'}>
4645
<TActionBar
47-
centerAction={<>
48-
<TButton primary>초기화</TButton>
49-
<TButton main>조회</TButton>
50-
</>}
46+
centerAction={
47+
<>
48+
<TButton primary>초기화</TButton>
49+
<TButton main>조회</TButton>
50+
</>
51+
}
5152
{...args}
5253
/>
5354
</Container>
5455
<Container label={'Left + Center + Right'}>
5556
<TActionBar
5657
leftAction={<TButton>이전</TButton>}
57-
centerAction={<>
58-
<TButton primary>초기화</TButton>
59-
<TButton main>조회</TButton>
60-
</>}
58+
centerAction={
59+
<>
60+
<TButton primary>초기화</TButton>
61+
<TButton main>조회</TButton>
62+
</>
63+
}
6164
rightAction={<TButton>다음</TButton>}
6265
{...args}
6366
/>
6467
</Container>
65-
</div>);
68+
</div>
69+
);
6670
};
6771

68-
6972
export const Default: Story = {
7073
render: Template,
7174
};

‎stories/components/data-container/card/TCard.stories.tsx

Lines changed: 39 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1-
import {Meta, StoryObj} from '@storybook/react';
1+
import type {Meta, StoryObj} from '@storybook/react';
2+
import type {ReactNode} from 'react';
3+
import React, {useState} from 'react';
4+
5+
import TTooltip from '../../../../src/components/guide/tooltip/TTooltip';
26

3-
import React, {ReactNode, useState} from 'react';
47
import TCard from '~/data-container/card/TCard';
5-
import TCardHeader from '~/data-container/card/TCardHeader';
68
import TCardContent from '~/data-container/card/TCardContent';
7-
import TTooltip from '../../../../src/components/guide/tooltip/TTooltip';
9+
import TCardHeader from '~/data-container/card/TCardHeader';
810
import {TIcon} from '~/icon';
911

1012
const meta: Meta<typeof TCard> = {
@@ -16,29 +18,24 @@ export default meta;
1618

1719
type Story = StoryObj<typeof TCard>;
1820

19-
20-
const Container = ({children, label}: { children: ReactNode, label?: string }) => {
21+
const Container = ({children, label}: {children: ReactNode; label?: string}) => {
2122
return (
2223
<div style={{display: 'flex', flexDirection: 'column', gap: '12px', width: '100%'}}>
2324
{label && <p style={{fontSize: '14px'}}>{label}</p>}
24-
<div style={{display: 'flex', alignItems: 'flex-start', gap: '12px', width: '100%'}}>
25-
{children}
26-
</div>
25+
<div style={{display: 'flex', alignItems: 'flex-start', gap: '12px', width: '100%'}}>{children}</div>
2726
</div>
2827
);
2928
};
3029

31-
3230
const Template = (args) => {
33-
3431
const [val, setVal] = useState('');
3532

3633
return (
3734
<div style={{display: 'flex', alignItems: 'flex-start', gap: '20px', flexDirection: 'column'}}>
38-
<TTooltip id={'card-tooltip'}/>
35+
<TTooltip id={'card-tooltip'} />
3936
<Container label={'Normal / Normal Dashed'}>
40-
<TCard {...args} width={'200px'} height={'200px'}/>
41-
<TCard {...args} width={'200px'} height={'200px'} dashed/>
37+
<TCard {...args} width={'200px'} height={'200px'} />
38+
<TCard {...args} width={'200px'} height={'200px'} dashed />
4239
</Container>
4340

4441
<Container label={'Normal with alone Header'}>
@@ -48,7 +45,7 @@ const Template = (args) => {
4845
</Container>
4946

5047
<Container label={'Normal with alone Content'}>
51-
<TCard {...args} >
48+
<TCard {...args}>
5249
<TCardContent>Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor</TCardContent>
5350
</TCard>
5451
</Container>
@@ -84,35 +81,49 @@ const Template = (args) => {
8481
<Container label={'Only Text / Card Icon + Text / Header Icon + Text'}>
8582
<TCard {...args} width={'343px'}>
8683
<TCardHeader title={'title'} subTitle={'Sub Title'}></TCardHeader>
87-
<TCardContent>Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum
88-
dolor Lorem ipsum dolor Lorem ipsum dolorLorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum
89-
dolor</TCardContent>
84+
<TCardContent>
85+
Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem
86+
ipsum dolor Lorem ipsum dolor Lorem ipsum dolorLorem ipsum dolor Lorem ipsum dolor Lorem ipsum
87+
dolor Lorem ipsum dolor
88+
</TCardContent>
9089
</TCard>
9190

9291
<TCard {...args} width={'343px'} icon={'edit_square'} iconColor={'#3617CE'}>
9392
<TCardHeader title={'title'} subTitle={'Sub Title'}></TCardHeader>
94-
<TCardContent>Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum
95-
dolor Lorem ipsum dolor Lorem ipsum dolorLorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum
96-
dolor</TCardContent>
93+
<TCardContent>
94+
Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem
95+
ipsum dolor Lorem ipsum dolor Lorem ipsum dolorLorem ipsum dolor Lorem ipsum dolor Lorem ipsum
96+
dolor Lorem ipsum dolor
97+
</TCardContent>
9798
</TCard>
9899

99100
<TCard {...args} width={'343px'}>
100-
<TCardHeader title={'title'} subTitle={'Sub Title'} icon={'alarm'} iconColor={'violet'}/>
101-
<TCardContent>Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum
102-
dolor Lorem ipsum dolor Lorem ipsum dolorLorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum
103-
dolor</TCardContent>
101+
<TCardHeader title={'title'} subTitle={'Sub Title'} icon={'alarm'} iconColor={'violet'} />
102+
<TCardContent>
103+
Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem
104+
ipsum dolor Lorem ipsum dolor Lorem ipsum dolorLorem ipsum dolor Lorem ipsum dolor Lorem ipsum
105+
dolor Lorem ipsum dolor
106+
</TCardContent>
104107
</TCard>
105108
</Container>
106109

107110
<Container label={'Widget Card'}>
108-
<TCard {...args} width={360} height={240} dashed center icon={'add'} iconSize={'large'} iconColor={'#71747A'} clickable/>
111+
<TCard
112+
{...args}
113+
width={360}
114+
height={240}
115+
dashed
116+
center
117+
icon={'add'}
118+
iconSize={'large'}
119+
iconColor={'#71747A'}
120+
clickable
121+
/>
109122
</Container>
110-
111123
</div>
112124
);
113125
};
114126

115-
116127
export const Default: Story = {
117128
render: Template,
118129
args: {},

0 commit comments

Comments
 (0)