Skip to content

Commit ac91c03

Browse files
AmiditinAmiditin
committed
refactor(ui-parts): destructure popover and tooltip stories
1 parent 3f49af6 commit ac91c03

9 files changed

Lines changed: 126 additions & 99 deletions

File tree

‎ui-parts/popover/stories/interfaces.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import type { PopoverProps } from '@atls-ui-parts/popover'
2+
import type { PropsWithChildren } from 'react'
3+
import type { ReactNode } from 'react'
4+
5+
export interface StoryPopoverProps
6+
extends Pick<PopoverProps, 'animated' | 'arrow' | 'offset' | 'placement' | 'trigger'> {
7+
customContainer: boolean
8+
}
9+
10+
export interface StoryPopoverContainerProps extends PropsWithChildren {
11+
title?: string
12+
content?: ReactNode
13+
onClose?: () => void
14+
}

‎ui-parts/popover/stories/popover.stories.tsx‎

Lines changed: 4 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,9 @@
1-
/* eslint-disable react/jsx-no-leaked-render */
1+
import type { Meta } from '@storybook/react'
2+
import type { StoryObj } from '@storybook/react'
23

3-
import type { PopoverProps } from '@atls-ui-parts/popover'
4-
import type { Meta } from '@storybook/react'
5-
import type { StoryObj } from '@storybook/react'
6-
import type { PropsWithChildren } from 'react'
7-
import type { ReactNode } from 'react'
8-
import type { ReactElement } from 'react'
4+
import type { StoryPopoverProps } from './interfaces.js'
95

10-
import { useState } from 'react'
11-
12-
import { Popover } from '@atls-ui-parts/popover'
13-
14-
import { storyTriggerStyles } from './popover.stories.css.js'
15-
import { storyContainerStyles } from './popover.stories.css.js'
16-
import { storyContainerCloseStyles } from './popover.stories.css.js'
17-
18-
interface StoryPopoverProps
19-
extends Pick<PopoverProps, 'animated' | 'arrow' | 'offset' | 'placement' | 'trigger'> {
20-
customContainer: boolean
21-
}
22-
23-
interface StoryPopoverContainerProps extends PropsWithChildren {
24-
title?: string
25-
content?: ReactNode
26-
onClose?: () => void
27-
}
6+
import { StoryPopover } from './story-popover.js'
287

298
const meta: Meta<StoryPopoverProps> = {
309
title: 'Components/Popover',
@@ -85,54 +64,6 @@ const meta: Meta<StoryPopoverProps> = {
8564

8665
export default meta
8766

88-
const StoryPopoverContainer = ({
89-
children,
90-
content,
91-
title,
92-
onClose,
93-
}: StoryPopoverContainerProps): ReactElement => (
94-
<div className={storyContainerStyles}>
95-
<div>{title}</div>
96-
<div>{content}</div>
97-
<button type='button' className={storyContainerCloseStyles} onClick={onClose}>
98-
Close
99-
</button>
100-
{children}
101-
</div>
102-
)
103-
104-
const StoryPopover = ({
105-
animated,
106-
arrow,
107-
customContainer,
108-
offset,
109-
placement,
110-
trigger,
111-
}: StoryPopoverProps): ReactElement => {
112-
const [open, setOpen] = useState<boolean>(false)
113-
114-
const handleClose = (): void => {
115-
setOpen(false)
116-
}
117-
118-
return (
119-
<Popover
120-
open={open}
121-
animated={animated}
122-
arrow={arrow}
123-
offset={offset}
124-
placement={placement}
125-
trigger={trigger}
126-
title='Popover title'
127-
content='Popover content'
128-
container={customContainer ? <StoryPopoverContainer onClose={handleClose} /> : undefined}
129-
onOpenChange={setOpen}
130-
>
131-
<div className={storyTriggerStyles}>Trigger</div>
132-
</Popover>
133-
)
134-
}
135-
13667
export const Base: StoryObj<StoryPopoverProps> = {
13768
render: StoryPopover,
13869
}

‎ui-parts/popover/stories/story-popover-container.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import type { ReactElement } from 'react'
2+
3+
import type { StoryPopoverContainerProps } from './interfaces.js'
4+
5+
import { storyContainerStyles } from './styles.css.js'
6+
import { storyContainerCloseStyles } from './styles.css.js'
7+
8+
export const StoryPopoverContainer = ({
9+
children,
10+
content,
11+
title,
12+
onClose,
13+
}: StoryPopoverContainerProps): ReactElement => (
14+
<div className={storyContainerStyles}>
15+
<div>{title}</div>
16+
<div>{content}</div>
17+
<button type='button' className={storyContainerCloseStyles} onClick={onClose}>
18+
Close
19+
</button>
20+
{children}
21+
</div>
22+
)

‎ui-parts/popover/stories/story-popover.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
/* eslint-disable react/jsx-no-leaked-render */
2+
3+
import type { ReactElement } from 'react'
4+
5+
import type { StoryPopoverProps } from './interfaces.js'
6+
7+
import { useState } from 'react'
8+
9+
import { Popover } from '@atls-ui-parts/popover'
10+
11+
import { StoryPopoverContainer } from './story-popover-container.js'
12+
import { storyTriggerStyles } from './styles.css.js'
13+
14+
export const StoryPopover = ({
15+
animated,
16+
arrow,
17+
customContainer,
18+
offset,
19+
placement,
20+
trigger,
21+
}: StoryPopoverProps): ReactElement => {
22+
const [open, setOpen] = useState<boolean>(false)
23+
24+
const handleClose = (): void => {
25+
setOpen(false)
26+
}
27+
28+
return (
29+
<Popover
30+
open={open}
31+
animated={animated}
32+
arrow={arrow}
33+
offset={offset}
34+
placement={placement}
35+
trigger={trigger}
36+
title='Popover title'
37+
content='Popover content'
38+
container={customContainer ? <StoryPopoverContainer onClose={handleClose} /> : undefined}
39+
onOpenChange={setOpen}
40+
>
41+
<div className={storyTriggerStyles}>Trigger</div>
42+
</Popover>
43+
)
44+
}

ui-parts/popover/stories/popover.stories.css.ts renamed to ui-parts/popover/stories/styles.css.ts

File renamed without changes.

‎ui-parts/tooltip/stories/interfaces.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import type { TooltipProps } from '@atls-ui-parts/tooltip'
2+
3+
export interface StoryTooltipProps
4+
extends Pick<TooltipProps, 'animated' | 'arrow' | 'offset' | 'placement' | 'trigger'> {
5+
customContainer: boolean
6+
}

‎ui-parts/tooltip/stories/story-tooltip.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
/* eslint-disable react/jsx-no-leaked-render */
2+
3+
import type { ReactElement } from 'react'
4+
5+
import type { StoryTooltipProps } from './interfaces.js'
6+
7+
import { Tooltip } from '@atls-ui-parts/tooltip'
8+
9+
import { storyTriggerStyles } from './styles.css.js'
10+
import { storyContainerStyles } from './styles.css.js'
11+
12+
export const StoryTooltip = ({
13+
animated,
14+
arrow,
15+
customContainer,
16+
offset,
17+
placement,
18+
trigger,
19+
}: StoryTooltipProps): ReactElement => (
20+
<Tooltip
21+
animated={animated}
22+
arrow={arrow && customContainer ? { fill: 'green' } : arrow}
23+
offset={offset}
24+
placement={placement}
25+
trigger={trigger}
26+
text='Tooltip text'
27+
container={customContainer ? <div className={storyContainerStyles} /> : undefined}
28+
>
29+
<div className={storyTriggerStyles}>Trigger</div>
30+
</Tooltip>
31+
)

ui-parts/tooltip/stories/tooltip.stories.css.ts renamed to ui-parts/tooltip/stories/styles.css.ts

File renamed without changes.

‎ui-parts/tooltip/stories/tooltip.stories.tsx‎

Lines changed: 5 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,9 @@
1-
/* eslint-disable react/jsx-no-leaked-render */
1+
import type { Meta } from '@storybook/react'
2+
import type { StoryObj } from '@storybook/react'
23

3-
import type { TooltipProps } from '@atls-ui-parts/tooltip'
4-
import type { Meta } from '@storybook/react'
5-
import type { StoryObj } from '@storybook/react'
4+
import type { StoryTooltipProps } from './interfaces.js'
65

7-
import { Tooltip } from '@atls-ui-parts/tooltip'
8-
9-
import { storyTriggerStyles } from './tooltip.stories.css.js'
10-
import { storyContainerStyles } from './tooltip.stories.css.js'
11-
12-
interface StoryTooltipProps
13-
extends Pick<TooltipProps, 'animated' | 'arrow' | 'offset' | 'placement' | 'trigger'> {
14-
customContainer: boolean
15-
}
6+
import { StoryTooltip } from './story-tooltip.js'
167

178
const meta: Meta<StoryTooltipProps> = {
189
title: 'Components/Tooltip',
@@ -74,17 +65,5 @@ const meta: Meta<StoryTooltipProps> = {
7465
export default meta
7566

7667
export const Base: StoryObj<StoryTooltipProps> = {
77-
render: ({ animated, arrow, customContainer, offset, placement, trigger }) => (
78-
<Tooltip
79-
animated={animated}
80-
arrow={arrow && customContainer ? { fill: 'green' } : arrow}
81-
offset={offset}
82-
placement={placement}
83-
trigger={trigger}
84-
text='Tooltip text'
85-
container={customContainer ? <div className={storyContainerStyles} /> : undefined}
86-
>
87-
<div className={storyTriggerStyles}>Trigger</div>
88-
</Tooltip>
89-
),
68+
render: StoryTooltip,
9069
}

0 commit comments

Comments
 (0)