Skip to content

Commit 56b6277

Browse files
ovflowdovflowd
committed
fix: storybook hot-fixes in general
1 parent 091127f commit 56b6277

File tree

12 files changed

+76
-164
lines changed

12 files changed

+76
-164
lines changed

‎.storybook/preview-body.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
<body
2-
class="bg-white font-open-sans text-neutral-950 dark:bg-neutral-950 dark:text-white"
2+
class="bg-white text-neutral-950 dark:bg-neutral-950 dark:text-white"
33
></body>

‎.storybook/preview.tsx‎

Lines changed: 14 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,27 @@
11
import NextImage from 'next/image';
2+
import classNames from 'classnames';
23
import { withThemeByDataAttribute } from '@storybook/addon-themes';
34
import { SiteProvider } from '../providers/siteProvider';
45
import { LocaleProvider } from '../providers/localeProvider';
5-
import {
6-
OPEN_SANS_FONT,
7-
IBM_PLEX_MONO_FONT,
8-
STORYBOOK_MODES,
9-
STORYBOOK_SIZES,
10-
} from './constants';
6+
import * as constants from './constants';
117
import type { Preview, ReactRenderer } from '@storybook/react';
128

139
import '../styles/new/index.css';
1410

11+
const rootClasses = classNames(
12+
constants.OPEN_SANS_FONT.variable,
13+
constants.IBM_PLEX_MONO_FONT.variable,
14+
'font-open-sans'
15+
);
16+
1517
const preview: Preview = {
1618
parameters: {
1719
nextjs: { router: { basePath: '' } },
18-
chromatic: { modes: STORYBOOK_MODES },
19-
viewport: { defaultViewport: 'large', viewports: STORYBOOK_SIZES },
20+
chromatic: { modes: constants.STORYBOOK_MODES },
21+
viewport: {
22+
defaultViewport: 'large',
23+
viewports: constants.STORYBOOK_SIZES,
24+
},
2025
},
2126
// These are extra Storybook Decorators applied to all stories
2227
// that introduce extra functionality such as Theme Switching
@@ -25,9 +30,7 @@ const preview: Preview = {
2530
Story => (
2631
<SiteProvider>
2732
<LocaleProvider>
28-
<div
29-
className={`${OPEN_SANS_FONT.variable} ${IBM_PLEX_MONO_FONT.variable}`}
30-
>
33+
<div className={rootClasses}>
3134
<Story />
3235
</div>
3336
</LocaleProvider>
@@ -44,11 +47,4 @@ const preview: Preview = {
4447
],
4548
};
4649

47-
// This forces the Next.js image system to use unoptimized images
48-
// for all the Next.js Images (next/image) Components
49-
Object.defineProperty(NextImage, 'default', {
50-
configurable: true,
51-
value: (props: any) => <NextImage {...props} unoptimized />,
52-
});
53-
5450
export default preview;

‎components/__design__/colors.stories.tsx‎

Lines changed: 9 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,10 @@
11
import type { Meta as MetaObj, StoryObj } from '@storybook/react';
2-
import type { CSSProperties } from 'react';
3-
4-
const containerStyle = {
5-
display: 'flex',
6-
flexDirection: 'row',
7-
justifyContent: 'space-between',
8-
} satisfies CSSProperties;
9-
10-
const containerColorsStyle = {
11-
alignItems: 'center',
12-
display: 'flex',
13-
flexDirection: 'column',
14-
gap: '2rem',
15-
justifyContent: 'space-between',
16-
width: '100%',
17-
} satisfies CSSProperties;
18-
19-
const gridEntryStyle = {
20-
display: 'flex',
21-
flexDirection: 'row',
22-
gap: '1rem',
23-
} satisfies CSSProperties;
242

253
export const Colors: StoryObj = {
264
render: () => (
27-
<div style={containerStyle}>
28-
<div style={containerColorsStyle}>
29-
<div style={gridEntryStyle}>
5+
<div className="flex flex-row justify-between">
6+
<div className="flex w-full flex-col items-center justify-between gap-1">
7+
<div className="flex flex-row gap-1">
308
<div className="h-20 w-20 bg-green-100" />
319
<div className="h-20 w-20 bg-green-200" />
3210
<div className="h-20 w-20 bg-green-300" />
@@ -36,7 +14,7 @@ export const Colors: StoryObj = {
3614
<div className="h-20 w-20 bg-green-800" />
3715
<div className="h-20 w-20 bg-green-900" />
3816
</div>
39-
<div style={gridEntryStyle}>
17+
<div className="flex flex-row gap-1">
4018
<div className="h-20 w-20 bg-neutral-100" />
4119
<div className="h-20 w-20 bg-neutral-200" />
4220
<div className="h-20 w-20 bg-neutral-300" />
@@ -46,7 +24,7 @@ export const Colors: StoryObj = {
4624
<div className="h-20 w-20 bg-neutral-800" />
4725
<div className="h-20 w-20 bg-neutral-900" />
4826
</div>
49-
<div style={gridEntryStyle}>
27+
<div className="flex flex-row gap-1">
5028
<div className="h-20 w-20 bg-danger-100" />
5129
<div className="h-20 w-20 bg-danger-200" />
5230
<div className="h-20 w-20 bg-danger-300" />
@@ -56,7 +34,7 @@ export const Colors: StoryObj = {
5634
<div className="h-20 w-20 bg-danger-800" />
5735
<div className="h-20 w-20 bg-danger-900" />
5836
</div>
59-
<div style={gridEntryStyle}>
37+
<div className="flex flex-row gap-1">
6038
<div className="h-20 w-20 bg-warning-100" />
6139
<div className="h-20 w-20 bg-warning-200" />
6240
<div className="h-20 w-20 bg-warning-300" />
@@ -66,7 +44,7 @@ export const Colors: StoryObj = {
6644
<div className="h-20 w-20 bg-warning-800" />
6745
<div className="h-20 w-20 bg-warning-900" />
6846
</div>
69-
<div style={gridEntryStyle}>
47+
<div className="flex flex-row gap-1">
7048
<div className="h-20 w-20 bg-info-100" />
7149
<div className="h-20 w-20 bg-info-200" />
7250
<div className="h-20 w-20 bg-info-300" />
@@ -76,7 +54,7 @@ export const Colors: StoryObj = {
7654
<div className="h-20 w-20 bg-info-800" />
7755
<div className="h-20 w-20 bg-info-900" />
7856
</div>
79-
<div style={gridEntryStyle}>
57+
<div className="flex flex-row gap-1">
8058
<div className="h-20 w-20 bg-accent1-100" />
8159
<div className="h-20 w-20 bg-accent1-200" />
8260
<div className="h-20 w-20 bg-accent1-300" />
@@ -86,7 +64,7 @@ export const Colors: StoryObj = {
8664
<div className="h-20 w-20 bg-accent1-800" />
8765
<div className="h-20 w-20 bg-accent1-900" />
8866
</div>
89-
<div style={gridEntryStyle}>
67+
<div className="flex flex-row gap-1">
9068
<div className="h-20 w-20 bg-accent2-100" />
9169
<div className="h-20 w-20 bg-accent2-200" />
9270
<div className="h-20 w-20 bg-accent2-300" />

‎components/__design__/font-family.stories.tsx‎

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,8 @@
11
import type { Meta as MetaObj, StoryObj } from '@storybook/react';
2-
import type { CSSProperties } from 'react';
3-
4-
const textStyles = {
5-
alignItems: 'center',
6-
display: 'flex',
7-
flexDirection: 'row',
8-
flexWrap: 'wrap',
9-
gap: '1rem',
10-
height: '100%',
11-
justifyContent: 'flex-start',
12-
width: '100%',
13-
} satisfies CSSProperties;
142

153
export const FontFamily: StoryObj = {
164
render: () => (
17-
<div style={textStyles}>
5+
<div className="align-center ga-1 w-100 flex h-full flex-row flex-wrap justify-start">
186
<div>
197
<p className="text-xs font-regular">Text XS/Regular</p>
208
<p className="text-xs font-medium">Text XS/Medium</p>

‎components/__design__/node-logos.stories.tsx‎

Lines changed: 30 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -3,56 +3,48 @@ import Image from 'next/image';
33

44
export const HorizontalLogos: StoryObj = {
55
render: () => (
6-
<div>
7-
<div>
8-
<Image
9-
src={`/static/images/logos/horizontal-light.svg`}
10-
className="bg-black"
11-
alt="Node.js"
12-
width={267}
13-
height={80}
14-
/>
15-
</div>
16-
<div>
17-
<Image
18-
src={`/static/images/logos/horizontal-dark.svg`}
19-
alt="Node.js"
20-
width={267}
21-
height={80}
22-
/>
23-
</div>
6+
<div className="flex flex-row gap-4">
7+
<Image
8+
src={`/static/images/logos/horizontal-light.svg`}
9+
className="bg-black"
10+
alt="Node.js"
11+
width={267}
12+
height={80}
13+
/>
14+
<Image
15+
src={`/static/images/logos/horizontal-dark.svg`}
16+
alt="Node.js"
17+
width={267}
18+
height={80}
19+
/>
2420
</div>
2521
),
2622
};
2723

2824
export const StackedLogos: StoryObj = {
2925
render: () => (
30-
<div>
31-
<div>
26+
<div className="flex flex-row gap-4">
27+
<div className="flex flex-col gap-2">
3228
<Image
3329
src={`/static/images/logos/stacked-dark.svg`}
3430
alt="Node.js"
3531
width={267}
3632
height={80}
3733
/>
38-
</div>
39-
<div>
4034
<Image
4135
src={`/static/images/logos/stacked-black.svg`}
4236
alt="Node.js"
4337
width={267}
4438
height={80}
4539
/>
4640
</div>
47-
<div>
41+
<div className="flex flex-col gap-2">
4842
<Image
4943
src={`/static/images/logos/stacked-white.svg`}
5044
alt="Node.js"
5145
width={267}
5246
height={80}
5347
/>
54-
</div>
55-
<div>
5648
<Image
5749
src={`/static/images/logos/stacked-light.svg`}
5850
alt="Node.js"
@@ -66,54 +58,19 @@ export const StackedLogos: StoryObj = {
6658

6759
export const JSSymbols: StoryObj = {
6860
render: () => (
69-
<div>
70-
<div>
71-
<Image
72-
src={`/static/images/logos/js-white.svg`}
73-
alt="Node.js"
74-
width={30}
75-
height={30}
76-
/>
77-
</div>
78-
<div>
79-
<Image
80-
src={`/static/images/logos/js-green.svg`}
81-
alt="Node.js"
82-
width={30}
83-
height={30}
84-
/>
85-
</div>
86-
</div>
87-
),
88-
};
89-
90-
export const HexSymbols: StoryObj = {
91-
render: () => (
92-
<div>
93-
<div>
94-
<Image
95-
src={`/static/images/logos/hex-white.svg`}
96-
alt="Node.js"
97-
width={64}
98-
height={64}
99-
/>
100-
</div>
101-
<div>
102-
<Image
103-
src={`/static/images/logos/hex-black.svg`}
104-
alt="Node.js"
105-
width={64}
106-
height={64}
107-
/>
108-
</div>
109-
<div>
110-
<Image
111-
src={`/static/images/logos/hex-green.svg`}
112-
alt="Node.js"
113-
width={64}
114-
height={64}
115-
/>
116-
</div>
61+
<div className="flex flex-row gap-4">
62+
<Image
63+
src={`/static/images/logos/js-white.svg`}
64+
alt="Node.js"
65+
width={30}
66+
height={30}
67+
/>
68+
<Image
69+
src={`/static/images/logos/js-green.svg`}
70+
alt="Node.js"
71+
width={30}
72+
height={30}
73+
/>
11774
</div>
11875
),
11976
};

‎components/__design__/platform-logos.stories.tsx‎

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,48 +3,40 @@ import Image from 'next/image';
33

44
export const PlatformLogos: StoryObj = {
55
render: () => (
6-
<div>
7-
<div>
6+
<div className="flex flex-row gap-4">
7+
<div className="flex flex-col items-center gap-4">
88
<Image
99
src="/static/images/logos/platform-linux.svg"
1010
alt="Ubuntu Logo"
1111
width={64}
1212
height={64}
1313
/>
14-
</div>
15-
<div>
1614
<Image
1715
src="/static/images/logos/platform-apple.svg"
1816
alt="Apple Logo"
1917
width={64}
2018
height={64}
2119
/>
22-
</div>
23-
<div>
2420
<Image
2521
src="/static/images/logos/platform-nvm.svg"
2622
alt="NVM Logo"
2723
width={64}
2824
height={64}
2925
/>
3026
</div>
31-
<div>
27+
<div className="flex flex-col items-center gap-4">
3228
<Image
3329
src="/static/images/logos/platform-microsoft.svg"
3430
alt="Microsoft Logo"
3531
width={64}
3632
height={64}
3733
/>
38-
</div>
39-
<div>
4034
<Image
4135
src="/static/images/logos/platform-homebrew.svg"
4236
alt="Homebrew Logo"
4337
width={64}
4438
height={64}
4539
/>
46-
</div>
47-
<div>
4840
<Image
4941
src="/static/images/logos/platform-placeholder.svg"
5042
alt="Placeholder Logo"

0 commit comments

Comments
 (0)