keii.dev
The Node.js® Website
fix: storybook hot-fixes in general
+76
-164
+1
-1
.storybook/preview-body.html
+1
-1
.storybook/preview-body.html
+14
-18
.storybook/preview.tsx
+14
-18
.storybook/preview.tsx
···
1
1
import NextImage from 'next/image';
2
+
import classNames from 'classnames';
2
3
import { withThemeByDataAttribute } from '@storybook/addon-themes';
3
4
import { SiteProvider } from '../providers/siteProvider';
4
5
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';
11
7
import type { Preview, ReactRenderer } from '@storybook/react';
12
8
13
9
import '../styles/new/index.css';
14
10
11
+
const rootClasses = classNames(
12
+
constants.OPEN_SANS_FONT.variable,
13
+
constants.IBM_PLEX_MONO_FONT.variable,
14
+
'font-open-sans'
15
+
);
16
+
15
17
const preview: Preview = {
16
18
parameters: {
17
19
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
+
},
20
25
},
21
26
// These are extra Storybook Decorators applied to all stories
22
27
// that introduce extra functionality such as Theme Switching
···
25
30
Story => (
26
31
<SiteProvider>
27
32
<LocaleProvider>
28
-
<div
29
-
className={`${OPEN_SANS_FONT.variable} ${IBM_PLEX_MONO_FONT.variable}`}
30
-
>
33
+
<div className={rootClasses}>
31
34
<Story />
32
35
</div>
33
36
</LocaleProvider>
···
43
46
}),
44
47
],
45
48
};
46
-
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
49
54
50
export default preview;
+9
-31
components/__design__/colors.stories.tsx
+9
-31
components/__design__/colors.stories.tsx
···
1
1
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;
24
2
25
3
export const Colors: StoryObj = {
26
4
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">
30
8
<div className="h-20 w-20 bg-green-100" />
31
9
<div className="h-20 w-20 bg-green-200" />
32
10
<div className="h-20 w-20 bg-green-300" />
···
36
14
<div className="h-20 w-20 bg-green-800" />
37
15
<div className="h-20 w-20 bg-green-900" />
38
16
</div>
39
-
<div style={gridEntryStyle}>
17
+
<div className="flex flex-row gap-1">
40
18
<div className="h-20 w-20 bg-neutral-100" />
41
19
<div className="h-20 w-20 bg-neutral-200" />
42
20
<div className="h-20 w-20 bg-neutral-300" />
···
46
24
<div className="h-20 w-20 bg-neutral-800" />
47
25
<div className="h-20 w-20 bg-neutral-900" />
48
26
</div>
49
-
<div style={gridEntryStyle}>
27
+
<div className="flex flex-row gap-1">
50
28
<div className="h-20 w-20 bg-danger-100" />
51
29
<div className="h-20 w-20 bg-danger-200" />
52
30
<div className="h-20 w-20 bg-danger-300" />
···
56
34
<div className="h-20 w-20 bg-danger-800" />
57
35
<div className="h-20 w-20 bg-danger-900" />
58
36
</div>
59
-
<div style={gridEntryStyle}>
37
+
<div className="flex flex-row gap-1">
60
38
<div className="h-20 w-20 bg-warning-100" />
61
39
<div className="h-20 w-20 bg-warning-200" />
62
40
<div className="h-20 w-20 bg-warning-300" />
···
66
44
<div className="h-20 w-20 bg-warning-800" />
67
45
<div className="h-20 w-20 bg-warning-900" />
68
46
</div>
69
-
<div style={gridEntryStyle}>
47
+
<div className="flex flex-row gap-1">
70
48
<div className="h-20 w-20 bg-info-100" />
71
49
<div className="h-20 w-20 bg-info-200" />
72
50
<div className="h-20 w-20 bg-info-300" />
···
76
54
<div className="h-20 w-20 bg-info-800" />
77
55
<div className="h-20 w-20 bg-info-900" />
78
56
</div>
79
-
<div style={gridEntryStyle}>
57
+
<div className="flex flex-row gap-1">
80
58
<div className="h-20 w-20 bg-accent1-100" />
81
59
<div className="h-20 w-20 bg-accent1-200" />
82
60
<div className="h-20 w-20 bg-accent1-300" />
···
86
64
<div className="h-20 w-20 bg-accent1-800" />
87
65
<div className="h-20 w-20 bg-accent1-900" />
88
66
</div>
89
-
<div style={gridEntryStyle}>
67
+
<div className="flex flex-row gap-1">
90
68
<div className="h-20 w-20 bg-accent2-100" />
91
69
<div className="h-20 w-20 bg-accent2-200" />
92
70
<div className="h-20 w-20 bg-accent2-300" />
+1
-13
components/__design__/font-family.stories.tsx
+1
-13
components/__design__/font-family.stories.tsx
···
1
1
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;
14
2
15
3
export const FontFamily: StoryObj = {
16
4
render: () => (
17
-
<div style={textStyles}>
5
+
<div className="align-center ga-1 w-100 flex h-full flex-row flex-wrap justify-start">
18
6
<div>
19
7
<p className="text-xs font-regular">Text XS/Regular</p>
20
8
<p className="text-xs font-medium">Text XS/Medium</p>
+30
-73
components/__design__/node-logos.stories.tsx
+30
-73
components/__design__/node-logos.stories.tsx
···
3
3
4
4
export const HorizontalLogos: StoryObj = {
5
5
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
+
/>
24
20
</div>
25
21
),
26
22
};
27
23
28
24
export const StackedLogos: StoryObj = {
29
25
render: () => (
30
-
<div>
31
-
<div>
26
+
<div className="flex flex-row gap-4">
27
+
<div className="flex flex-col gap-2">
32
28
<Image
33
29
src={`/static/images/logos/stacked-dark.svg`}
34
30
alt="Node.js"
35
31
width={267}
36
32
height={80}
37
33
/>
38
-
</div>
39
-
<div>
40
34
<Image
41
35
src={`/static/images/logos/stacked-black.svg`}
42
36
alt="Node.js"
···
44
38
height={80}
45
39
/>
46
40
</div>
47
-
<div>
41
+
<div className="flex flex-col gap-2">
48
42
<Image
49
43
src={`/static/images/logos/stacked-white.svg`}
50
44
alt="Node.js"
51
45
width={267}
52
46
height={80}
53
47
/>
54
-
</div>
55
-
<div>
56
48
<Image
57
49
src={`/static/images/logos/stacked-light.svg`}
58
50
alt="Node.js"
···
66
58
67
59
export const JSSymbols: StoryObj = {
68
60
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
+
/>
117
74
</div>
118
75
),
119
76
};
+3
-11
components/__design__/platform-logos.stories.tsx
+3
-11
components/__design__/platform-logos.stories.tsx
···
3
3
4
4
export const PlatformLogos: StoryObj = {
5
5
render: () => (
6
-
<div>
7
-
<div>
6
+
<div className="flex flex-row gap-4">
7
+
<div className="flex flex-col items-center gap-4">
8
8
<Image
9
9
src="/static/images/logos/platform-linux.svg"
10
10
alt="Ubuntu Logo"
11
11
width={64}
12
12
height={64}
13
13
/>
14
-
</div>
15
-
<div>
16
14
<Image
17
15
src="/static/images/logos/platform-apple.svg"
18
16
alt="Apple Logo"
19
17
width={64}
20
18
height={64}
21
19
/>
22
-
</div>
23
-
<div>
24
20
<Image
25
21
src="/static/images/logos/platform-nvm.svg"
26
22
alt="NVM Logo"
···
28
24
height={64}
29
25
/>
30
26
</div>
31
-
<div>
27
+
<div className="flex flex-col items-center gap-4">
32
28
<Image
33
29
src="/static/images/logos/platform-microsoft.svg"
34
30
alt="Microsoft Logo"
35
31
width={64}
36
32
height={64}
37
33
/>
38
-
</div>
39
-
<div>
40
34
<Image
41
35
src="/static/images/logos/platform-homebrew.svg"
42
36
alt="Homebrew Logo"
43
37
width={64}
44
38
height={64}
45
39
/>
46
-
</div>
47
-
<div>
48
40
<Image
49
41
src="/static/images/logos/platform-placeholder.svg"
50
42
alt="Placeholder Logo"
-1
public/static/images/logos/hex-black.svg
-1
public/static/images/logos/hex-black.svg
···
1
-
<svg width="57" height="67" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_337_7894)"><path fill-rule="evenodd" clip-rule="evenodd" d="M26.987 1.383a3.103 3.103 0 0 1 3.078 0L55.413 16.09c.966.545 1.509 1.573 1.509 2.663v29.35c0 1.09-.604 2.118-1.51 2.663L30.066 65.471a3.104 3.104 0 0 1-3.078 0L1.639 50.764c-.966-.545-1.51-1.574-1.51-2.663v-29.41c0-1.09.604-2.119 1.51-2.664L26.987 1.383Z" fill="url(#paint0_linear_337_7894)"/><path opacity=".66" d="M55.292 16.028 30.065 1.323a4.184 4.184 0 0 0-.785-.303L.733 50.04c.242.302.544.544.845.726l25.409 14.706c.784.423 1.63.544 2.414.242l26.676-48.958c-.181-.303-.483-.545-.785-.727Z" fill="#B4B4B4"/><path d="m30.005 65.47 25.287-14.705c.966-.545 1.388-1.574 1.388-2.663v-.12L29.28 1.08c-.784-.242-1.63-.121-2.354.302L1.82 15.907 29.1 65.773c.361-.06.663-.181.904-.302Z" fill="url(#paint1_linear_337_7894)"/></g><defs><linearGradient id="paint0_linear_337_7894" x1=".117" y1="33.414" x2="56.971" y2="33.414" gradientUnits="userSpaceOnUse"><stop offset=".005"/><stop offset=".194" stop-color="#171717"/><stop offset=".542" stop-color="#3D3D3D"/><stop offset=".824" stop-color="#545454"/><stop offset="1" stop-color="#5C5C5C"/></linearGradient><linearGradient id="paint1_linear_337_7894" x1="-.276" y1="33.372" x2="58.373" y2="33.372" gradientUnits="userSpaceOnUse"><stop stop-color="#5C5C5C"/><stop offset=".176" stop-color="#545454"/><stop offset=".458" stop-color="#3D3D3D"/><stop offset=".806" stop-color="#171717"/><stop offset=".995"/></linearGradient><clipPath id="clip0_337_7894"><path fill="#fff" d="M0 .5h57v66H0z"/></clipPath></defs></svg>
-1
public/static/images/logos/hex-green.svg
-1
public/static/images/logos/hex-green.svg
···
1
-
<svg width="63" height="77" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_337_7895)"><path d="M33.31 6.401a3.366 3.366 0 0 0-3.332 0L2.476 22.28C1.43 22.866.843 23.977.843 25.152v31.82c0 1.176.653 2.287 1.633 2.875l27.502 15.877a3.367 3.367 0 0 0 3.331 0l27.503-15.877c1.045-.588 1.633-1.7 1.633-2.875v-31.82a3.404 3.404 0 0 0-1.633-2.874L33.31 6.4Z" fill="url(#paint0_linear_337_7895)"/><path d="M60.877 22.279 33.244 6.4a4.533 4.533 0 0 0-.85-.326L1.5 59c.261.327.673.804 1 1l27.478 15.725c.784.457 1.698.588 2.548.327l29.07-53.186a2.043 2.043 0 0 0-.72-.587Z" fill="url(#paint1_linear_337_7895)"/><path d="m29.063.586-.392.196h.523l-.13-.196Z" fill="url(#paint2_linear_337_7895)"/><path d="M60.809 59.848c.784-.458 1.491-1.315 1.491-2.348L32.196 6.01c-.784-.131-1.633-.066-2.352.391L2.408 22.213 32 76.183c.392-.066.85-.197 1.241-.393L60.81 59.848Z" fill="url(#paint3_linear_337_7895)"/></g><defs><linearGradient id="paint0_linear_337_7895" x1="42.844" y1="18.226" x2="17.971" y2="68.959" gradientUnits="userSpaceOnUse"><stop stop-color="#3F873F"/><stop offset=".33" stop-color="#3F8B3D"/><stop offset=".637" stop-color="#3E9638"/><stop offset=".934" stop-color="#3DA92E"/><stop offset="1" stop-color="#3DAE2B"/></linearGradient><linearGradient id="paint1_linear_337_7895" x1="27.464" y1="44.779" x2="97.246" y2="-6.77" gradientUnits="userSpaceOnUse"><stop offset=".138" stop-color="#3F873F"/><stop offset=".402" stop-color="#52A044"/><stop offset=".713" stop-color="#64B749"/><stop offset=".908" stop-color="#6ABF4B"/></linearGradient><linearGradient id="paint2_linear_337_7895" x1="-.166" y1=".663" x2="63.473" y2=".663" gradientUnits="userSpaceOnUse"><stop offset=".092" stop-color="#6ABF4B"/><stop offset=".287" stop-color="#64B749"/><stop offset=".598" stop-color="#52A044"/><stop offset=".862" stop-color="#3F873F"/></linearGradient><linearGradient id="paint3_linear_337_7895" x1="-.165" y1="41.053" x2="63.473" y2="41.053" gradientUnits="userSpaceOnUse"><stop offset=".092" stop-color="#6ABF4B"/><stop offset=".287" stop-color="#64B749"/><stop offset=".598" stop-color="#52A044"/><stop offset=".862" stop-color="#3F873F"/></linearGradient><clipPath id="clip0_337_7895"><path fill="#fff" d="M0 .5h63v76H0z"/></clipPath></defs></svg>
-1
public/static/images/logos/hex-white.svg
-1
public/static/images/logos/hex-white.svg
···
1
-
<svg width="69" height="80" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_337_7896)"><path fill-rule="evenodd" clip-rule="evenodd" d="M33.023 2.01a3.727 3.727 0 0 1 3.688 0l30.38 17.58c1.158.652 1.809 1.882 1.809 3.184v35.018a3.77 3.77 0 0 1-1.809 3.184l-30.38 17.581a3.727 3.727 0 0 1-3.688 0L2.643 60.976C1.485 60.325.834 59.095.834 57.792v-35.09a3.77 3.77 0 0 1 1.809-3.184L33.023 2.01Z" fill="url(#paint0_linear_337_7896)"/><path opacity=".66" d="M66.946 19.518 36.71 1.937a5.021 5.021 0 0 0-.94-.362L1.556 60.107c.29.362.651.651 1.013.868l30.452 17.582c.94.506 1.953.651 2.893.29l31.971-58.533a2.613 2.613 0 0 0-.94-.796Z" fill="#4B4B4B"/><path d="m36.638 78.557 30.308-17.582c1.157-.65 1.663-1.88 1.663-3.183v-.145L35.77 1.575c-.94-.29-1.953-.145-2.82.362L2.858 19.3l32.694 59.618c.434-.073.796-.145 1.085-.362Z" fill="url(#paint1_linear_337_7896)"/></g><defs><linearGradient id="paint0_linear_337_7896" x1=".828" y1="40.273" x2="68.968" y2="40.273" gradientUnits="userSpaceOnUse"><stop offset=".005" stop-color="#fff"/><stop offset=".194" stop-color="#E8E8E8"/><stop offset=".542" stop-color="#C2C2C2"/><stop offset=".824" stop-color="#ABABAB"/><stop offset="1" stop-color="#A3A3A3"/></linearGradient><linearGradient id="paint1_linear_337_7896" x1=".356" y1="40.223" x2="70.647" y2="40.223" gradientUnits="userSpaceOnUse"><stop stop-color="#A3A3A3"/><stop offset=".176" stop-color="#ABABAB"/><stop offset=".458" stop-color="#C2C2C2"/><stop offset=".806" stop-color="#E8E8E8"/><stop offset=".995" stop-color="#fff"/></linearGradient><clipPath id="clip0_337_7896"><path fill="#fff" d="M0 .5h69v79H0z"/></clipPath></defs></svg>
+14
-5
styles/new/base.css
+14
-5
styles/new/base.css
···
1
-
a,
2
-
a:link,
3
-
a:visited {
4
-
@apply text-green-600
5
-
dark:text-green-400;
1
+
* {
2
+
@apply subpixel-antialiased;
6
3
}
7
4
8
5
code {
···
16
13
dark:bg-neutral-900
17
14
dark:text-white;
18
15
}
16
+
17
+
a,
18
+
a:link,
19
+
a:visited {
20
+
@apply text-green-600
21
+
dark:text-green-400;
22
+
23
+
&:hover {
24
+
@apply text-green-900
25
+
dark:text-green-300;
26
+
}
27
+
}