The Node.js® Website
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix: storybook hot-fixes in general

+76 -164
+1 -1
.storybook/preview-body.html
··· 1 1 <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" 3 3 ></body>
+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
··· 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 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
··· 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 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"
+3 -9
components/__design__/social-logos.stories.tsx
··· 3 3 4 4 export const SocialMediaLogos: 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/social-github.svg" 10 10 alt="GitHub Logo" 11 11 width={64} 12 12 height={64} 13 13 /> 14 - </div> 15 - <div> 16 14 <Image 17 15 src="/static/images/logos/social-mastodon.svg" 18 16 alt="Mastodon Logo" 19 17 width={64} 20 18 height={64} 21 19 /> 22 - </div> 23 - <div> 24 20 <Image 25 21 src="/static/images/logos/social-linkedin.svg" 26 22 alt="LinkedIn 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/social-slack.svg" 34 30 alt="Slack Logo" 35 31 width={64} 36 32 height={64} 37 33 /> 38 - </div> 39 - <div> 40 34 <Image 41 35 src="/static/images/logos/social-twitter.svg" 42 36 alt="Twitter Logo"
-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 - <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 - <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
··· 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 + }
+1
tailwind.config.ts
··· 4 4 content: [ 5 5 './pages/**/*.{tsx,mdx}', 6 6 './components/**/*.tsx', 7 + './providers/**/*.tsx', 7 8 './layouts/**/*.tsx', 8 9 './.storybook/preview.tsx', 9 10 './.storybook/preview-body.html',