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

package/{src/Common → Common}/AlertBox/index.module.css

@@ -73,11 +73,4 @@
       @apply bg-danger-700;
     }
   }
-
-  code {
-    /* Ignore the styles from `markdown.css` */
-    all: unset;
-
-    @apply font-ibm-plex-mono;
-  }
 }

package/{src/Common → Common}/AlertBox/index.stories.tsx

@@ -6,12 +6,6 @@ import AlertBox from '#ui/Common/AlertBox';
 type Story = StoryObj<typeof AlertBox>;
 type Meta = MetaObj<typeof AlertBox>;
 
-const withMain = (args: React.ComponentProps<typeof AlertBox>) => (
-  <main>
-    <AlertBox {...args} />
-  </main>
-);
-
 export const Info: Story = {
   args: {
     level: 'info',
@@ -52,23 +46,6 @@ export const Danger: Story = {
   },
 };
 
-export const InMarkdown: Story = {
-  args: {
-    level: 'danger',
-    title: '0',
-    children: (
-      <>
-        In a markdown component, <code>Code renders correctly,</code>{' '}
-        <a href="#">
-          <code>even when in a link</code>
-        </a>
-      </>
-    ),
-    size: 'default',
-  },
-  render: withMain,
-};
-
 export const WithIcon: Story = {
   args: {
     level: 'info',

package/{src/Common → Common}/BaseButton/index.module.css

@@ -73,14 +73,11 @@
 
   &.secondary {
     @apply rounded-lg
-      border
-      border-neutral-200
       text-neutral-800
-      dark:border-neutral-900
       dark:text-neutral-200;
 
     &:hover:not([aria-disabled='true']) {
-      @apply bg-neutral-200
+      @apply bg-neutral-100
         text-neutral-800
         dark:bg-neutral-900
         dark:text-neutral-200;

package/{src/Common → Common}/BasePagination/PaginationListItem/__tests__/index.test.jsx

@@ -3,7 +3,7 @@ import assert from 'node:assert/strict';
 
 import { render, screen } from '@testing-library/react';
 
-import { isVisible } from '../../../../../../../tests/utilities.mjs';
+import { isVisible } from '../../../../../../tests/utilities.mjs';
 
 import PaginationListItem from '#ui/Common/BasePagination/PaginationListItem';
 

package/{src/Common → Common}/BasePagination/__tests__/index.test.jsx

@@ -3,7 +3,7 @@ import assert from 'node:assert/strict';
 
 import { render, screen } from '@testing-library/react';
 
-import { isVisible } from '../../../../../../tests/utilities.mjs';
+import { isVisible } from '../../../../../tests/utilities.mjs';
 
 import BasePagination from '#ui/Common/BasePagination';
 

package/{src/Common → Common}/Modal/index.module.css

@@ -17,7 +17,6 @@
       w-full
       max-w-3xl
       flex-col
-      gap-2
       overflow-y-auto
       rounded
       border
@@ -48,7 +47,8 @@
   }
 
   .title {
-    @apply text-3xl
+    @apply mb-2
+      text-3xl
       font-semibold
       text-neutral-900
       dark:text-white;
@@ -56,7 +56,7 @@
 
   .description {
     @apply font-regular
-      mb-2
+      mb-4
       text-lg
       text-neutral-800
       dark:text-neutral-200;

package/{src/Common → Common}/Modal/index.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
-import { Modal, Title, Description, Content } from '#ui/Common/Modal';
+import Modal from '#ui/Common/Modal';
 
 type Story = StoryObj<typeof Modal>;
 type Meta = MetaObj<typeof Modal>;
@@ -8,12 +8,10 @@ type Meta = MetaObj<typeof Modal>;
 export const Default: Story = {
   args: {
     open: true,
+    heading: 'Node.js Versions Information',
+    subheading: 'Get all information about Node.js versions and their changes.',
     children: (
-      <Content>
-        <Title>Node.js Versions Information</Title>
-        <Description>
-          Get all information about Node.js versions and their changes.
-        </Description>
+      <>
         <p>
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto
           atque sint doloremque, sapiente recusandae debitis libero nostrum
@@ -26,7 +24,7 @@ export const Default: Story = {
           amet minus sit architecto blanditiis hic sed odit cumque numquam
           dignissimos delectus.
         </p>
-      </Content>
+      </>
     ),
   },
 };

package/{src/Common → Common}/Modal/index.tsx

@@ -7,11 +7,15 @@ import type { FC, PropsWithChildren } from 'react';
 import styles from './index.module.css';
 
 type ModalProps = PropsWithChildren<{
+  heading: string;
+  subheading?: string;
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
 }>;
 
 const Modal: FC<ModalProps> = ({
+  heading,
+  subheading,
   children,
   open = false,
   onOpenChange = () => {},
@@ -24,7 +28,15 @@ const Modal: FC<ModalProps> = ({
             <XMarkIcon />
           </Dialog.Trigger>
 
-          {children}
+          <Dialog.Title className={styles.title}>{heading}</Dialog.Title>
+
+          {subheading && (
+            <Dialog.Description className={styles.description}>
+              {subheading}
+            </Dialog.Description>
+          )}
+
+          <main className={styles.wrapper}>{children}</main>
 
           <Dialog.Close />
         </Dialog.Content>
@@ -33,18 +45,4 @@ const Modal: FC<ModalProps> = ({
   </Dialog.Root>
 );
 
-const Title = ({ children }: PropsWithChildren) => (
-  <Dialog.Title className={styles.title}>{children}</Dialog.Title>
-);
-
-const Description = ({ children }: PropsWithChildren) => (
-  <Dialog.Description className={styles.description}>
-    {children}
-  </Dialog.Description>
-);
-
-const Content = ({ children }: PropsWithChildren) => (
-  <main className={styles.wrapper}>{children}</main>
-);
-
-export { Modal, Title, Description, Content };
+export default Modal;

package/{src/Icons → Icons}/Logos/Nodejs.tsx

@@ -72,7 +72,7 @@ const NodejsIcon: FC<NodeJsLogoProps> = ({
         />
 
         {variant === 'pride' ? (
-          <g clipPath="url(#clip0_1_1661)">
+          <g clip-path="url(#clip0_1_1661)">
             <mask
               id="mask1_1_1661"
               style={{ maskType: 'alpha' }}
@@ -183,7 +183,7 @@ const NodejsIcon: FC<NodeJsLogoProps> = ({
             filterUnits="userSpaceOnUse"
             color-interpolation-filters="sRGB"
           >
-            <feFlood floodOpacity="0" result="BackgroundImageFix" />
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
             <feColorMatrix
               in="SourceAlpha"
               type="matrix"
@@ -218,7 +218,7 @@ const NodejsIcon: FC<NodeJsLogoProps> = ({
             filterUnits="userSpaceOnUse"
             color-interpolation-filters="sRGB"
           >
-            <feFlood floodOpacity="0" result="BackgroundImageFix" />
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
             <feColorMatrix
               in="SourceAlpha"
               type="matrix"

package/package.json

@@ -3,13 +3,22 @@
   "type": "module",
   "exports": {
     "./*": [
-      "./src/*",
-      "./src/*.tsx",
-      "./src/*/index.tsx",
-      "./src/*.ts",
-      "./src/*/index.ts"
+      "./*",
+      "./*.tsx",
+      "./*/index.tsx",
+      "./*.ts",
+      "./*/index.ts"
     ]
   },
+  "files": [
+    "Common",
+    "Containers",
+    "Icons",
+    "MDX",
+    "stylelint",
+    "styles",
+    "types.ts"
+  ],
   "dependencies": {
     "@heroicons/react": "^2.2.0",
     "@radix-ui/react-avatar": "^1.1.10",
@@ -21,21 +30,21 @@
     "@radix-ui/react-tabs": "~1.1.12",
     "@radix-ui/react-toast": "~1.2.14",
     "@radix-ui/react-tooltip": "~1.2.7",
-    "@tailwindcss/postcss": "~4.1.11",
+    "@tailwindcss/postcss": "~4.1.8",
     "@vcarl/remark-headings": "~0.1.0",
     "classnames": "~2.5.1",
     "postcss-calc": "^10.1.1",
     "tailwindcss": "~4.0.17"
   },
   "devDependencies": {
-    "@storybook/addon-styling-webpack": "^2.0.0",
-    "@storybook/addon-themes": "^9.0.15",
+    "@storybook/addon-styling-webpack": "^1.0.1",
+    "@storybook/addon-themes": "^9.0.3",
     "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
-    "@storybook/react": "^9.0.15",
-    "@storybook/react-webpack5": "^9.0.15",
+    "@storybook/react": "^9.0.3",
+    "@storybook/react-webpack5": "^9.0.3",
     "@testing-library/user-event": "~14.6.1",
     "@types/node": "22.15.3",
-    "@types/react": "^19.1.8",
+    "@types/react": "^19.1.6",
     "cross-env": "^7.0.3",
     "css-loader": "~7.1.2",
     "eslint-plugin-react": "~7.37.4",
@@ -43,29 +52,29 @@
     "global-jsdom": "^26.0.0",
     "postcss-loader": "~8.1.1",
     "react": "^19.1.0",
-    "storybook": "^9.0.15",
+    "storybook": "^9.0.3",
     "style-loader": "~4.0.0",
-    "stylelint": "^16.21.1",
+    "stylelint": "^16.20.0",
     "stylelint-config-standard": "^38.0.0",
     "stylelint-order": "7.0.0",
     "stylelint-selector-bem-pattern": "4.0.1",
-    "tsx": "^4.20.3",
+    "tsx": "^4.19.3",
     "typescript": "~5.8.2",
-    "typescript-eslint": "~8.35.1"
+    "typescript-eslint": "~8.33.1"
   },
   "imports": {
     "#ui/*": [
-      "./src/*",
-      "./src/*.tsx",
-      "./src/*/index.tsx",
-      "./src/*.ts",
-      "./src/*/index.ts"
+      "./*",
+      "./*.tsx",
+      "./*/index.tsx",
+      "./*.ts",
+      "./*/index.ts"
     ]
   },
   "engines": {
     "node": ">=20"
   },
-  "version": "1.0.1-ab0ba1dcb1d91392c44e91b1e74e9f565e460543",
+  "version": "1.0.1-c0bc4dd7eb49f97f35ce0983849d17702404c76a",
   "scripts": {
     "lint": "turbo run lint:js lint:css",
     "lint:css": "stylelint \"**/*.css\" --allow-empty-input --cache --cache-strategy=content --cache-location=.stylelintcache",

package/{src/styles → styles}/markdown.css

@@ -157,7 +157,7 @@ main {
       @apply font-semibold;
     }
 
-    tr:last-child > td {
+    tr:last-child td {
       @apply sm:border-b-0;
 
       &:last-child {

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;