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

package/types.js

@@ -0,0 +1 @@
+export {};

package/.lintstagedrc.json

@@ -1,5 +0,0 @@
-{
-  "**/*.{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

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

package/.storybook/constants.ts

@@ -1,28 +0,0 @@
-// 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

@@ -1,38 +0,0 @@
-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

@@ -1,20 +0,0 @@
-<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

@@ -1,32 +0,0 @@
-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

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

package/.stylelintrc.mjs

@@ -1,56 +0,0 @@
-// 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

@@ -1,82 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,76 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,61 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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;