Skip to content

Commit b096bb2

Browse files
thebuilderthebuilder
committed
refactor: convert stories to CSF3
1 parent c545471 commit b096bb2

7 files changed

Lines changed: 251 additions & 210 deletions

File tree

‎storybook/.storybook/DocsContainer.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { DocsContainer as BaseContainer } from '@storybook/addon-docs';
2+
import { useDarkMode } from 'storybook-dark-mode';
3+
import { themes } from '@storybook/theming';
4+
5+
export const DocsContainer = ({ children, context }) => {
6+
const dark = useDarkMode();
7+
console.log(dark);
8+
return (
9+
<BaseContainer theme={dark ? themes.dark : themes.light} context={context}>
10+
{children}
11+
</BaseContainer>
12+
);
13+
};

‎storybook/.storybook/main.ts‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,6 @@ const config: StorybookConfig = {
99
addons: [
1010
{
1111
name: '@storybook/addon-essentials',
12-
options: {
13-
backgrounds: false,
14-
},
1512
},
1613
'storybook-dark-mode',
1714
],

‎storybook/.storybook/preview.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,19 @@
11
import 'intersection-observer';
22
import 'tailwindcss/tailwind.css';
3+
import { themes } from '@storybook/theming';
4+
import { DocsContainer } from './DocsContainer';
35

46
export const parameters = {
57
controls: {
68
expanded: true,
79
},
10+
darkMode: {
11+
// Override the default dark theme
12+
dark: { ...themes.dark },
13+
// Override the default light theme
14+
light: { ...themes.normal },
15+
},
16+
docs: {
17+
container: DocsContainer,
18+
},
819
};

‎storybook/stories/Hooks.story.tsx‎

Lines changed: 83 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
1-
import { Meta, StoryFn } from '@storybook/react';
2-
import { IntersectionOptions, InView, useInView } from '../../src';
1+
import { Meta, StoryObj } from '@storybook/react';
2+
import {
3+
IntersectionOptions,
4+
InView,
5+
useInView,
6+
} from 'react-intersection-observer';
37
import { motion } from 'framer-motion';
48
import React, { CSSProperties, useEffect, useRef, useState } from 'react';
59
import {
@@ -12,16 +16,7 @@ import {
1216
RootMargin,
1317
ErrorMessage,
1418
} from './elements';
15-
import {
16-
ArgsTable,
17-
Description,
18-
Primary,
19-
PRIMARY_STORY,
20-
Stories,
21-
Subtitle,
22-
Title,
23-
} from '@storybook/addon-docs';
24-
import { useValidateOptions } from './story-utils';
19+
import { argTypes, useValidateOptions } from './story-utils';
2520

2621
type Props = IntersectionOptions & {
2722
style?: CSSProperties;
@@ -30,75 +25,30 @@ type Props = IntersectionOptions & {
3025
inlineRef?: boolean;
3126
};
3227

33-
const story: Meta = {
28+
type Story = StoryObj<Props>;
29+
30+
export default {
3431
title: 'useInView Hook',
3532
component: InView,
3633
parameters: {
37-
docs: {
38-
page: () => (
39-
<>
40-
<Title />
41-
<Subtitle />
42-
<Description />
43-
<Primary />
44-
<ArgsTable
45-
story={PRIMARY_STORY}
46-
exclude={['children', 'as', 'onChange']}
47-
/>
48-
<Stories />
49-
</>
50-
),
34+
controls: {
35+
expanded: true,
5136
},
5237
},
5338
argTypes: {
54-
rootMargin: { control: { type: 'text' } },
55-
threshold: {
56-
control: {
57-
type: 'range',
58-
min: 0,
59-
max: 1,
60-
step: 0.05,
61-
},
62-
},
63-
root: {
64-
table: {
65-
disable: true,
66-
},
67-
},
68-
children: {
69-
table: {
70-
disable: true,
71-
},
72-
},
73-
as: {
74-
table: {
75-
disable: true,
76-
},
77-
},
78-
onChange: {
79-
table: {
80-
disable: true,
81-
},
82-
action: 'InView',
83-
},
39+
...argTypes,
40+
style: { table: { disable: true } },
41+
className: { table: { disable: true } },
42+
lazy: { table: { disable: true } },
43+
inlineRef: { table: { disable: true } },
8444
},
8545
args: {
8646
threshold: 0,
8747
},
88-
};
48+
render: HooksRender,
49+
} satisfies Meta<Props>;
8950

90-
export default story;
91-
92-
const Template: StoryFn<Props> = ({
93-
style,
94-
className,
95-
lazy,
96-
inlineRef,
97-
...rest
98-
}) => {
99-
// const onChange: IntersectionOptions['onChange'] = (inView, entry) => {
100-
// action('InView')(inView, entry);
101-
// }
51+
function HooksRender({ style, className, lazy, inlineRef, ...rest }: Props) {
10252
const { options, error } = useValidateOptions(rest);
10353
const { ref, inView } = useInView(!error ? { ...options } : {});
10454
const [isLoading, setIsLoading] = useState(lazy);
@@ -130,74 +80,88 @@ const Template: StoryFn<Props> = ({
13080
<RootMargin rootMargin={options.rootMargin} />
13181
</ScrollWrapper>
13282
);
133-
};
134-
135-
export const Basic = Template.bind({});
136-
Basic.args = {};
83+
}
13784

138-
export const LazyHookRendering = Template.bind({});
139-
LazyHookRendering.args = {
140-
lazy: true,
85+
export const Basic: Story = {
86+
args: {},
14187
};
14288

143-
export const InlineRef = Template.bind({});
144-
InlineRef.args = {
145-
inlineRef: true,
89+
export const LazyHookRendering: Story = {
90+
args: { lazy: true },
14691
};
14792

148-
export const StartInView = Template.bind({});
149-
StartInView.args = {
150-
initialInView: true,
93+
export const InlineRef: Story = {
94+
args: {
95+
inlineRef: true,
96+
},
15197
};
15298

153-
export const WithRootMargin = Template.bind({});
154-
WithRootMargin.args = {
155-
rootMargin: '25px 0px',
99+
export const StartInView: Story = {
100+
args: {
101+
initialInView: true,
102+
},
156103
};
157104

158-
export const TallerThanViewport = Template.bind({});
159-
TallerThanViewport.args = {
160-
style: { minHeight: '150vh' },
105+
export const WithRootMargin: Story = {
106+
args: {
107+
initialInView: true,
108+
rootMargin: '25px 0px',
109+
},
161110
};
162111

163-
export const WithThreshold100percentage = Template.bind({});
164-
WithThreshold100percentage.args = {
165-
threshold: 1,
112+
export const TallerThanViewport: Story = {
113+
args: {
114+
style: { minHeight: '150vh' },
115+
},
166116
};
167117

168-
export const WithThreshold50percentage = Template.bind({});
169-
WithThreshold50percentage.args = {
170-
threshold: 0.5,
118+
export const WithThreshold100percentage: Story = {
119+
args: {
120+
initialInView: true,
121+
threshold: 1,
122+
},
171123
};
172124

173-
export const TallerThanViewportWithThreshold100percentage = Template.bind({});
174-
TallerThanViewportWithThreshold100percentage.args = {
175-
threshold: 1,
176-
style: { minHeight: '150vh' },
125+
export const WithThreshold50percentage: Story = {
126+
args: {
127+
initialInView: true,
128+
threshold: 0.5,
129+
},
177130
};
178131

179-
export const MultipleThresholds = Template.bind({});
180-
MultipleThresholds.args = {
181-
threshold: [0, 0.2, 0.4, 0.6, 0.8, 1],
132+
export const TallerThanViewportWithThreshold100percentage: Story = {
133+
args: {
134+
threshold: 1,
135+
style: { minHeight: '150vh' },
136+
},
182137
};
183-
MultipleThresholds.argTypes = {
184-
threshold: {
185-
control: { type: 'array' },
138+
139+
export const MultipleThresholds: Story = {
140+
args: {
141+
threshold: [0, 0.2, 0.4, 0.6, 0.8, 1],
142+
},
143+
argTypes: {
144+
threshold: {
145+
control: { type: 'array' },
146+
},
186147
},
187148
};
188149

189-
export const TriggerOnce = Template.bind({});
190-
TriggerOnce.args = {
191-
triggerOnce: true,
150+
export const TriggerOnce: Story = {
151+
args: {
152+
triggerOnce: true,
153+
},
192154
};
193155

194-
export const Skip = Template.bind({});
195-
Skip.args = {
196-
skip: true,
156+
export const Skip: Story = {
157+
args: {
158+
initialInView: true,
159+
skip: true,
160+
},
197161
};
198162

199-
const VisibilityTemplate: StoryFn<IntersectionOptions> = (args) => {
200-
const { options, error } = useValidateOptions(args);
163+
const VisibilityTemplate = (props: Props) => {
164+
const { options, error } = useValidateOptions(props);
201165
const ref = useRef<HTMLDivElement>(null);
202166
const { entry, inView, ref: inViewRef } = useInView(options);
203167

@@ -232,8 +196,10 @@ const VisibilityTemplate: StoryFn<IntersectionOptions> = (args) => {
232196
);
233197
};
234198

235-
export const TrackVisibility = VisibilityTemplate.bind({});
236-
TrackVisibility.args = {
237-
trackVisibility: true,
238-
delay: 100,
199+
export const TrackVisibility: Story = {
200+
render: VisibilityTemplate,
201+
args: {
202+
trackVisibility: true,
203+
delay: 100,
204+
},
239205
};

0 commit comments

Comments
 (0)