@node-core/ui-components 1.0.1-a459447336d99556960d6f9e1c997327b29e4974 → 1.0.1-ab0ba1dcb1d91392c44e91b1e74e9f565e460543

package/.lintstagedrc.json

@@ -0,0 +1,5 @@
+{
+  "**/*.{js,mjs,ts,tsx,md,mdx}": ["prettier --check --write", "eslint --fix"],
+  "**/*.css": ["stylelint --allow-empty-input --fix", "prettier --write"],
+  "**/*.{json,yml}": ["prettier --check --write"]
+}

package/.postcssrc.json

@@ -0,0 +1,6 @@
+{
+  "plugins": {
+    "postcss-calc": {},
+    "@tailwindcss/postcss": {}
+  }
+}

package/.storybook/constants.ts

@@ -0,0 +1,28 @@
+// This defines "execution" modes that Chromatic will run on the each Storybook Story
+// This allows us to test each Story with different parameters
+// @see https://www.chromatic.com/blog/introducing-story-modes/
+export const STORYBOOK_MODES = {
+  'dark mobile': {
+    theme: 'dark',
+    viewport: 'small',
+  },
+  'dark desktop': {
+    theme: 'dark',
+    viewport: 'large',
+  },
+  'light mobile': {
+    theme: 'light',
+    viewport: 'small',
+  },
+  'light desktop': {
+    theme: 'light',
+    viewport: 'large',
+  },
+};
+
+// These are the supported Viewports for our Storybook Stories
+// It is also the different viewports that Chromatic will run the Visual Regression Tests
+export const STORYBOOK_SIZES = {
+  small: { name: 'Small', styles: { width: '414px', height: '896px' } },
+  large: { name: 'Large', styles: { width: '1024px', height: '768px' } },
+};

package/.storybook/main.ts

@@ -0,0 +1,38 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+const config: StorybookConfig = {
+  stories: ['../**/*.stories.tsx'],
+  logLevel: 'error',
+  typescript: { reactDocgen: false, check: false },
+  core: { disableTelemetry: true, disableWhatsNewNotifications: true },
+  framework: '@storybook/react-webpack5',
+  swc: () => ({ jsc: { transform: { react: { runtime: 'automatic' } } } }),
+  addons: [
+    '@storybook/addon-webpack5-compiler-swc',
+    '@storybook/addon-themes',
+    {
+      name: '@storybook/addon-styling-webpack',
+      options: {
+        rules: [
+          // Replaces existing CSS rules to support PostCSS
+          {
+            test: /\.css$/,
+            use: [
+              'style-loader',
+              {
+                loader: 'css-loader',
+                options: {
+                  esModule: false,
+                  importLoaders: 1,
+                },
+              },
+              'postcss-loader',
+            ],
+          },
+        ],
+      },
+    },
+  ],
+};
+
+export default config;

package/.storybook/preview-head.html

@@ -0,0 +1,20 @@
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+
+<link
+  rel="stylesheet"
+  href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=Open+Sans:ital,wght@0,300..800;1,300..800"
+/>
+
+<style>
+  :root {
+    color-scheme: light;
+
+    --font-ibm-plex-mono: 'IBM Plex Mono';
+    --font-open-sans: 'Open Sans';
+  }
+
+  html[data-theme='dark'] {
+    color-scheme: dark;
+  }
+</style>

package/.storybook/preview.tsx

@@ -0,0 +1,32 @@
+import * as Toast from '@radix-ui/react-toast';
+import { withThemeByDataAttribute } from '@storybook/addon-themes';
+import type { Preview, ReactRenderer } from '@storybook/react';
+
+import { STORYBOOK_MODES, STORYBOOK_SIZES } from './constants';
+
+import '#ui/styles/index.css';
+
+const preview: Preview = {
+  parameters: {
+    chromatic: { modes: STORYBOOK_MODES },
+    viewport: { defaultViewport: 'large', viewports: STORYBOOK_SIZES },
+  },
+  decorators: [
+    Story => (
+      <Toast.Provider>
+        <Story />
+        <Toast.Viewport />
+      </Toast.Provider>
+    ),
+    withThemeByDataAttribute<ReactRenderer>({
+      themes: { light: '', dark: 'dark' },
+      defaultTheme: 'light',
+      attributeName: 'data-theme',
+    }),
+    // TODO(@avivkeller): Once storybook fixes their types
+    // this can be removed, since `withThemeByDataAttribute`
+    // will return the same type that is accepted by `Preview`
+  ] as Preview['decorators'],
+};
+
+export default preview;

package/.stylelintignore

@@ -0,0 +1 @@
+storybook-static

package/.stylelintrc.mjs

@@ -0,0 +1,56 @@
+// These are all the custom `@` (at) rules that we use within our custom PostCSS plugins
+const CUSTOM_AT_RULES = [
+  // Tailwind-specific at-rules
+  'apply',
+  'layer',
+  'responsive',
+  'reference',
+  'utility',
+  'theme',
+  'custom-variant',
+  'screen',
+  'source',
+  'tailwind',
+  'variants',
+];
+
+// Enforces certain selectors to be only in camelCase notation
+// We use these for id selectors and classname selectors
+const ONLY_ALLOW_CAMEL_CASE_SELECTORS = [
+  /^(?:[a-z]+(?:[A-Z][a-z]*)*)$/,
+  { message: s => `Expected '${s}' to be in camelCase` },
+];
+
+export default {
+  extends: ['stylelint-config-standard'],
+  plugins: [
+    'stylelint-order',
+    'stylelint-selector-bem-pattern',
+    '#ui/stylelint/one-utility-class-per-line.mjs',
+  ],
+  rules: {
+    // Enforces Element Class Names to be camelCase
+    'selector-class-pattern': ONLY_ALLOW_CAMEL_CASE_SELECTORS,
+    // Enforces Element IDs to be camelCase
+    'selector-id-pattern': ONLY_ALLOW_CAMEL_CASE_SELECTORS,
+    // Allow Tailwind-based CSS Rules
+    'at-rule-no-unknown': [true, { ignoreAtRules: CUSTOM_AT_RULES }],
+    // Allow the Global CSS Selector
+    'selector-pseudo-class-no-unknown': [
+      true,
+      { ignorePseudoClasses: ['global'] },
+    ],
+    // Enforces the order of the CSS properties to be in alphabetical order
+    'order/properties-alphabetical-order': true,
+    'no-descending-specificity': null,
+    // Disables the Level-4 Media Queries; Since they're more exotic and less known
+    'media-feature-range-notation': 'prefix',
+    // Adopts the import notation from `postcss-import`
+    'import-notation': 'string',
+    // Allow the `@apply` at rule as its part of Tailwind
+    'at-rule-no-deprecated': [true, { ignoreAtRules: CUSTOM_AT_RULES }],
+    'nodejs/one-utility-class-per-line': true,
+    // We need complex `:not()` for headings with anchor
+    'selector-not-notation': null,
+  },
+};

package/__design__/colors.stories.tsx

@@ -0,0 +1,82 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+export const Colors: StoryObj = {
+  render: () => (
+    <div className="flex flex-row justify-between">
+      <div className="flex w-full flex-col items-center justify-between gap-1">
+        <div className="flex flex-row gap-1">
+          <div className="h-20 w-20 bg-green-100" />
+          <div className="h-20 w-20 bg-green-200" />
+          <div className="h-20 w-20 bg-green-300" />
+          <div className="h-20 w-20 bg-green-400" />
+          <div className="h-20 w-20 bg-green-600" />
+          <div className="h-20 w-20 bg-green-700" />
+          <div className="h-20 w-20 bg-green-800" />
+          <div className="h-20 w-20 bg-green-900" />
+        </div>
+        <div className="flex flex-row gap-1">
+          <div className="h-20 w-20 bg-neutral-100" />
+          <div className="h-20 w-20 bg-neutral-200" />
+          <div className="h-20 w-20 bg-neutral-300" />
+          <div className="h-20 w-20 bg-neutral-400" />
+          <div className="h-20 w-20 bg-neutral-600" />
+          <div className="h-20 w-20 bg-neutral-700" />
+          <div className="h-20 w-20 bg-neutral-800" />
+          <div className="h-20 w-20 bg-neutral-900" />
+        </div>
+        <div className="flex flex-row gap-1">
+          <div className="bg-danger-100 h-20 w-20" />
+          <div className="bg-danger-200 h-20 w-20" />
+          <div className="bg-danger-300 h-20 w-20" />
+          <div className="bg-danger-400 h-20 w-20" />
+          <div className="bg-danger-600 h-20 w-20" />
+          <div className="bg-danger-700 h-20 w-20" />
+          <div className="bg-danger-800 h-20 w-20" />
+          <div className="bg-danger-900 h-20 w-20" />
+        </div>
+        <div className="flex flex-row gap-1">
+          <div className="bg-warning-100 h-20 w-20" />
+          <div className="bg-warning-200 h-20 w-20" />
+          <div className="bg-warning-300 h-20 w-20" />
+          <div className="bg-warning-400 h-20 w-20" />
+          <div className="bg-warning-600 h-20 w-20" />
+          <div className="bg-warning-700 h-20 w-20" />
+          <div className="bg-warning-800 h-20 w-20" />
+          <div className="bg-warning-900 h-20 w-20" />
+        </div>
+        <div className="flex flex-row gap-1">
+          <div className="bg-info-100 h-20 w-20" />
+          <div className="bg-info-200 h-20 w-20" />
+          <div className="bg-info-300 h-20 w-20" />
+          <div className="bg-info-400 h-20 w-20" />
+          <div className="bg-info-600 h-20 w-20" />
+          <div className="bg-info-700 h-20 w-20" />
+          <div className="bg-info-800 h-20 w-20" />
+          <div className="bg-info-900 h-20 w-20" />
+        </div>
+        <div className="flex flex-row gap-1">
+          <div className="bg-accent1-100 h-20 w-20" />
+          <div className="bg-accent1-200 h-20 w-20" />
+          <div className="bg-accent1-300 h-20 w-20" />
+          <div className="bg-accent1-400 h-20 w-20" />
+          <div className="bg-accent1-600 h-20 w-20" />
+          <div className="bg-accent1-700 h-20 w-20" />
+          <div className="bg-accent1-800 h-20 w-20" />
+          <div className="bg-accent1-900 h-20 w-20" />
+        </div>
+        <div className="flex flex-row gap-1">
+          <div className="bg-accent2-100 h-20 w-20" />
+          <div className="bg-accent2-200 h-20 w-20" />
+          <div className="bg-accent2-300 h-20 w-20" />
+          <div className="bg-accent2-400 h-20 w-20" />
+          <div className="bg-accent2-600 h-20 w-20" />
+          <div className="bg-accent2-700 h-20 w-20" />
+          <div className="bg-accent2-800 h-20 w-20" />
+          <div className="bg-accent2-900 h-20 w-20" />
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+export default { title: 'Design System' } as MetaObj;

package/__design__/effects.stories.tsx

@@ -0,0 +1,7 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+export const H1Special: StoryObj = {
+  render: () => <h1 className="special">Special H1</h1>,
+};
+
+export default { title: 'Design System' } as MetaObj;

package/__design__/font-family.stories.tsx

@@ -0,0 +1,76 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+export const FontFamily: StoryObj = {
+  render: () => (
+    <div className="align-center ga-1 flex h-full flex-row flex-wrap justify-start">
+      <div>
+        <p className="font-regular text-xs">Text XS/Regular</p>
+        <p className="text-xs font-medium">Text XS/Medium</p>
+        <p className="text-xs font-semibold">Text XS/SemiBold</p>
+        <p className="text-xs font-bold">Text XS/Bold</p>
+      </div>
+      <div>
+        <p className="font-regular text-sm">Text SM/Regular</p>
+        <p className="text-sm font-medium">Text SM/Medium</p>
+        <p className="text-sm font-semibold">Text SM/SemiBold</p>
+        <p className="text-sm font-bold">Text SM/Bold</p>
+      </div>
+      <div>
+        <p className="text-regular font-regular">Text Base/Regular</p>
+        <p className="text-regular font-medium">Text Base/Medium</p>
+        <p className="text-regular font-semibold">Text Base/SemiBold</p>
+        <p className="text-regular font-bold">Text Base/Bold</p>
+      </div>
+      <div>
+        <p className="font-regular text-lg">Text LG/Regular</p>
+        <p className="text-lg font-medium">Text LG/Medium</p>
+        <p className="text-lg font-semibold">Text LG/SemiBold</p>
+        <p className="text-lg font-bold">Text LG/Bold</p>
+      </div>
+      <div>
+        <p className="font-regular text-xl">Text XL/Regular</p>
+        <p className="text-xl font-medium">Text XL/Medium</p>
+        <p className="text-xl font-semibold">Text XL/SemiBold</p>
+        <p className="text-xl font-bold">Text XL/Bold</p>
+      </div>
+      <div>
+        <p className="font-regular text-2xl">Text 2XL/Regular</p>
+        <p className="text-2xl font-medium">Text 2XL/Medium</p>
+        <p className="text-2xl font-semibold">Text 2XL/SemiBold</p>
+        <p className="text-2xl font-bold">Text 2XL/Bold</p>
+      </div>
+      <div>
+        <p className="font-regular text-3xl">Text 3XL/Regular</p>
+        <p className="text-3xl font-medium">Text 3XL/Medium</p>
+        <p className="text-3xl font-semibold">Text 3XL/SemiBold</p>
+        <p className="text-3xl font-bold">Text 3XL/Bold</p>
+      </div>
+      <div>
+        <p className="font-regular text-4xl">Text 4XL/Regular</p>
+        <p className="text-4xl font-medium">Text 4XL/Medium</p>
+        <p className="text-4xl font-semibold">Text 4XL/SemiBold</p>
+        <p className="text-4xl font-bold">Text 4XL/Bold</p>
+      </div>
+      <div>
+        <p className="font-regular text-5xl">Text 5XL/Regular</p>
+        <p className="text-5xl font-medium">Text 5XL/Medium</p>
+        <p className="text-5xl font-semibold">Text 5XL/SemiBold</p>
+        <p className="text-5xl font-bold">Text 5XL/Bold</p>
+      </div>
+      <div>
+        <p className="font-regular text-6xl">Text 6XL/Regular</p>
+        <p className="text-6xl font-medium">Text 6XL/Medium</p>
+        <p className="text-6xl font-semibold">Text 6XL/SemiBold</p>
+        <p className="text-6xl font-bold">Text 6XL/Bold</p>
+      </div>
+      <div>
+        <p className="font-regular text-7xl">Text 7XL/Regular</p>
+        <p className="text-7xl font-medium">Text 7XL/Medium</p>
+        <p className="text-7xl font-semibold">Text 7XL/SemiBold</p>
+        <p className="text-7xl font-bold">Text 7XL/Bold</p>
+      </div>
+    </div>
+  ),
+};
+
+export default { title: 'Design System' } as MetaObj;

package/__design__/list.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+export const OrderedLists: StoryObj = {
+  render: () => (
+    <main>
+      <ol>
+        <li>Ordered lists</li>
+        <li>Like this</li>
+        <li>with numbers</li>
+      </ol>
+    </main>
+  ),
+};
+
+export const UnorderedLists: StoryObj = {
+  render: () => (
+    <main>
+      <ul>
+        <li>Unordered lists</li>
+        <li>those without</li>
+        <li>numbers</li>
+      </ul>
+    </main>
+  ),
+};
+
+export default { title: 'Design System' } as MetaObj;

package/__design__/node-logos.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import {
+  JsGreen,
+  JsWhite,
+  Nodejs,
+  NodejsStackedBlack,
+  NodejsStackedDark,
+  NodejsStackedLight,
+  NodejsStackedWhite,
+} from '#ui/Icons/Logos';
+
+export const HorizontalLogo: StoryObj = {
+  render: () => <Nodejs width={267} height={80} />,
+};
+
+export const PrideLogo: StoryObj = {
+  render: () => <Nodejs variant="pride" width={267} height={80} />,
+};
+
+export const StackedLogos: StoryObj = {
+  render: () => (
+    <div className="flex flex-row gap-4">
+      <div className="flex flex-col gap-2">
+        {[NodejsStackedDark, NodejsStackedBlack].map((Icon, index) => (
+          <Icon
+            key={index}
+            className="block dark:hidden"
+            width={267}
+            height={164}
+          />
+        ))}
+        {[NodejsStackedLight, NodejsStackedWhite].map((Icon, index) => (
+          <Icon
+            key={index}
+            className="hidden dark:block"
+            width={267}
+            height={164}
+          />
+        ))}
+      </div>
+    </div>
+  ),
+};
+
+export const JSSymbols: StoryObj = {
+  render: () => (
+    <div className="flex flex-row gap-4">
+      {[JsWhite, JsGreen].map((Icon, index) => (
+        <Icon
+          key={index}
+          className={index === 0 ? 'hidden dark:block' : 'block dark:hidden'}
+          width={30}
+          height={30}
+        />
+      ))}
+    </div>
+  ),
+};
+
+export default { title: 'Design System' } as MetaObj;

package/__design__/platform-logos.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import {
+  Docker,
+  Homebrew,
+  NVM,
+  Devbox,
+  Choco,
+  N,
+  Volta,
+} from '#ui/Icons/InstallationMethod';
+import { Apple, Linux, Microsoft, AIX } from '#ui/Icons/OperatingSystem';
+
+const osIcons = [Apple, Linux, Microsoft, AIX];
+const installMethodIcons = [Docker, Homebrew, NVM, Devbox, Choco, N, Volta];
+
+export const PlatformLogos: StoryObj = {
+  render: () => (
+    <div className="flex flex-row gap-4">
+      {[osIcons, installMethodIcons].map((icons, idx) => (
+        <div key={idx} className="flex flex-col items-center gap-4">
+          {icons.map((Icon, index) => (
+            <Icon key={index} width={64} height={64} />
+          ))}
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+export default { title: 'Design System' } as MetaObj;

package/__design__/social-logos.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import {
+  Bluesky,
+  Discord,
+  GitHub,
+  LinkedIn,
+  Mastodon,
+  Slack,
+  X,
+} from '#ui/Icons/Social';
+
+const socialIcons = [
+  [GitHub, Mastodon, LinkedIn],
+  [Slack, X, Bluesky],
+  [Discord],
+];
+
+export const SocialMediaLogos: StoryObj = {
+  render: () => (
+    <div className="flex flex-row gap-4">
+      {socialIcons.map((group, idx) => (
+        <div key={idx} className="flex flex-col items-center gap-4">
+          {group.map((Icon, index) => (
+            <Icon key={index} width={64} height={64} />
+          ))}
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+export default { title: 'Design System' } as MetaObj;

package/__design__/table.stories.tsx

@@ -0,0 +1,56 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+const tableData = [
+  ['Data 1', 'Data 2', 'Data 3'],
+  ['Data 1', 'Data 2', 'Data 3'],
+  ['Data 1', 'Data 2', 'Data 3'],
+];
+
+export const Table: StoryObj = {
+  render: () => (
+    <main>
+      <table>
+        <thead>
+          <tr>
+            {['Column 1', 'Column 2', 'Column 3'].map((col, idx) => (
+              <th key={idx}>{col}</th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {tableData.map((row, rowIndex) => (
+            <tr key={rowIndex}>
+              {row.map((cell, cellIndex) => (
+                <td key={cellIndex}>{cell}</td>
+              ))}
+            </tr>
+          ))}
+          <tr>
+            <td colSpan={3}>
+              <table>
+                <thead>
+                  <tr>
+                    <th>Sub 1</th>
+                    <th>Sub 2</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td>Sub A</td>
+                    <td>Sub B</td>
+                  </tr>
+                  <tr>
+                    <td>Sub C</td>
+                    <td>Sub D</td>
+                  </tr>
+                </tbody>
+              </table>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </main>
+  ),
+};
+
+export default { title: 'Design System' } as MetaObj;

package/__design__/text.stories.tsx

@@ -0,0 +1,100 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+export const Anchor: StoryObj = {
+  render: () => (
+    <main>
+      <p>
+        The current Node.js security policy can be found at{' '}
+        <a href="https://github.com/nodejs/node/security/policy#security">
+          https://github.com/nodejs/node/security/policy#security
+        </a>
+        , including information on how to report a vulnerability in Node.js.
+        Subscribe to the low-volume announcement-only nodejs-sec mailing list at{' '}
+        <a href="https://groups.google.com/forum/#!forum/nodejs-sec">
+          https://groups.google.com/forum/#!forum/nodejs-sec
+        </a>{' '}
+        to stay up to date on security vulnerabilities and security-related
+        releases of Node.js and the projects maintained in the nodejs GitHub
+        organization.
+      </p>
+    </main>
+  ),
+};
+
+export const InlineCode: StoryObj = {
+  render: () => (
+    <main>
+      <p>
+        This is an example of <code>inline code block</code>
+      </p>
+      <p>
+        This is an example of{' '}
+        <a href="https://nodejs.org/">
+          <code>inline code block inside link</code>
+        </a>
+      </p>
+    </main>
+  ),
+};
+
+export const Headings: StoryObj = {
+  render: () => (
+    <main>
+      <h1>HTML Section Heading 1</h1>
+      <h2>HTML Section Heading 2</h2>
+      <h3>HTML Section Heading 3</h3>
+      <h4>HTML Section Heading 4</h4>
+      <h5>HTML Section Heading 5</h5>
+      <h6>HTML Section Heading 6</h6>
+    </main>
+  ),
+};
+
+// Create the behavior of the headings with links
+// on nodejs.org, this is happening due to `rehype-autolink-headings`
+export const HeadingsWithLinks: StoryObj = {
+  render: () => (
+    <main>
+      <h1 id="heading-1">
+        <a href="#heading-1">HTML Section Heading 1</a>
+      </h1>
+      <h2 id="heading-2">
+        <a href="#heading-2">HTML Section Heading 2</a>
+      </h2>
+      <h3 id="heading-3">
+        <a href="#heading-3">HTML Section Heading 3</a>
+      </h3>
+      <h4 id="heading-4">
+        <a href="#heading-4">HTML Section Heading 4</a>
+      </h4>
+      <h5 id="heading-5">
+        <a href="#heading-5">HTML Section Heading 5</a>
+      </h5>
+      <h6 id="heading-6">
+        <a href="#heading-6">HTML Section Heading 6</a>
+      </h6>
+    </main>
+  ),
+};
+
+export const BoldAndLinks: StoryObj = {
+  render: () => (
+    <main>
+      <p>
+        <strong>Bold text (should inherit normal text color)</strong>
+      </p>
+      <p>
+        <strong>
+          <a href="#">Bold green link (link inside bold)</a>
+        </strong>
+      </p>
+      <p>
+        <a href="#">
+          <strong>Bold green link (bold inside link)</strong>
+        </a>
+      </p>
+    </main>
+  ),
+};
+
+export default { title: 'Design System' } as MetaObj;