@node-core/ui-components 1.0.1-23f195d7d72e3651ff23da791e2f997015a34433 → 1.0.1-2aa8ae62b828936ceb5251f37f7c539668856ed5

package/package.json

@@ -13,11 +13,11 @@
   "files": [
     "Common",
     "Containers",
-    "MDX",
     "Icons",
+    "MDX",
+    "stylelint",
     "styles",
-    "types.ts",
-    "stylelint"
+    "types.ts"
   ],
   "dependencies": {
     "@heroicons/react": "^2.2.0",
@@ -37,14 +37,14 @@
     "tailwindcss": "~4.0.17"
   },
   "devDependencies": {
-    "@storybook/addon-themes": "^9.0.3",
     "@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.3",
     "@storybook/react-webpack5": "^9.0.3",
     "@testing-library/user-event": "~14.6.1",
     "@types/node": "22.15.3",
-    "@types/react": "^19.1.0",
+    "@types/react": "^19.1.6",
     "cross-env": "^7.0.3",
     "css-loader": "~7.1.2",
     "eslint-plugin-react": "~7.37.4",
@@ -54,13 +54,13 @@
     "react": "^19.1.0",
     "storybook": "^9.0.3",
     "style-loader": "~4.0.0",
-    "stylelint": "^16.19.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.19.3",
     "typescript": "~5.8.2",
-    "typescript-eslint": "~8.31.1"
+    "typescript-eslint": "~8.33.1"
   },
   "imports": {
     "#ui/*": [
@@ -74,17 +74,17 @@
   "engines": {
     "node": ">=20"
   },
-  "version": "1.0.1-23f195d7d72e3651ff23da791e2f997015a34433",
+  "version": "1.0.1-2aa8ae62b828936ceb5251f37f7c539668856ed5",
   "scripts": {
-    "check-types": "tsc --noEmit",
     "lint": "turbo run lint:js lint:css",
     "lint:css": "stylelint \"**/*.css\" --allow-empty-input --cache --cache-strategy=content --cache-location=.stylelintcache",
-    "lint:fix": "turbo run lint:js lint:css --no-cache -- --fix",
+    "lint:fix": "node --run lint -- -- --fix",
     "lint:js": "eslint \"**/*.{js,mjs,ts,tsx}\"",
+    "lint:types": "tsc --noEmit",
     "storybook": "cross-env NODE_NO_WARNINGS=1 storybook dev -p 6006 --quiet",
     "storybook:build": "cross-env NODE_NO_WARNINGS=1 storybook build --quiet --webpack-stats-json",
-    "test": "turbo test:unit",
+    "test": "node --run test:unit",
     "test:unit": "cross-env NODE_NO_WARNINGS=1 node --experimental-test-coverage --test-coverage-exclude=**/*.test.* --enable-source-maps --import=global-jsdom/register --import=tsx --import=../../tests/setup.mjs --test **/*.test.*",
-    "test:unit:watch": "cross-env NODE_OPTIONS=\"--watch\" pnpm test:unit"
+    "test:unit:watch": "node --run test:unit -- --watch"
   }
 }

package/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/Common/ProgressionSidebar/ProgressionSidebarGroup/index.module.css

@@ -1,47 +0,0 @@
-@reference "../../../styles/index.css";
-
-.group {
-  @apply flex
-    flex-col
-    gap-4
-    text-sm
-    font-medium
-    text-neutral-800
-    dark:text-neutral-200;
-
-  .items {
-    @apply relative
-      -left-1
-      flex
-      flex-col
-      gap-2
-      after:absolute
-      after:left-[0.45rem]
-      after:top-0
-      after:z-10
-      after:h-full
-      after:w-px
-      after:bg-neutral-200
-      after:content-['']
-      dark:after:bg-neutral-800;
-
-    a {
-      @apply first:before:absolute
-        first:before:bottom-[calc(50%+0.25rem)]
-        first:before:left-0
-        first:before:h-20
-        first:before:w-4
-        first:before:bg-white
-        first:before:content-['']
-        last:after:absolute
-        last:after:left-0
-        last:after:top-[calc(50%+0.25rem)]
-        last:after:h-20
-        last:after:w-4
-        last:after:bg-white
-        last:after:content-['']
-        first:dark:before:bg-neutral-950
-        last:dark:after:bg-neutral-950;
-    }
-  }
-}

package/Common/ProgressionSidebar/ProgressionSidebarGroup/index.tsx

@@ -1,35 +0,0 @@
-import type { ComponentProps, FC } from 'react';
-
-import ProgressionSidebarItem from '#ui/Common/ProgressionSidebar/ProgressionSidebarItem';
-import type { FormattedMessage, LinkLike } from '#ui/types';
-
-import styles from './index.module.css';
-
-type ProgressionSidebarGroupProps = {
-  groupName: FormattedMessage;
-  items: Array<ComponentProps<typeof ProgressionSidebarItem>>;
-  pathname?: string;
-  as?: LinkLike;
-};
-
-const ProgressionSidebarGroup: FC<ProgressionSidebarGroupProps> = ({
-  groupName,
-  items,
-  ...props
-}) => (
-  <section className={styles.group}>
-    {groupName}
-    <div className={styles.items}>
-      {items.map(({ label, link }) => (
-        <ProgressionSidebarItem
-          key={link}
-          label={label}
-          link={link}
-          {...props}
-        />
-      ))}
-    </div>
-  </section>
-);
-
-export default ProgressionSidebarGroup;

package/Common/ProgressionSidebar/ProgressionSidebarItem/index.module.css

@@ -1,39 +0,0 @@
-@reference "../../../styles/index.css";
-
-a.item {
-  @apply font-regular
-    relative
-    z-20
-    flex
-    w-full
-    items-center
-    gap-1
-    overflow-hidden
-    text-sm
-    text-neutral-800
-    dark:text-neutral-200;
-
-  &:hover {
-    @apply text-neutral-900
-      motion-safe:transition-colors
-      dark:text-white;
-  }
-
-  svg {
-    @apply shrink-0
-      fill-neutral-200
-      stroke-white
-      stroke-[4]
-      dark:fill-neutral-800
-      dark:stroke-neutral-950;
-  }
-
-  &.active {
-    @apply text-neutral-900
-      dark:text-white;
-
-    svg {
-      @apply fill-green-500;
-    }
-  }
-}

package/Common/ProgressionSidebar/ProgressionSidebarItem/index.tsx

@@ -1,32 +0,0 @@
-import type { FC } from 'react';
-
-import BaseActiveLink from '#ui/Common/BaseActiveLink';
-import ProgressionSidebarIcon from '#ui/Common/ProgressionSidebar/ProgressionSidebarIcon';
-import type { FormattedMessage, LinkLike } from '#ui/types';
-
-import styles from './index.module.css';
-
-type ProgressionSidebarItemProps = {
-  label: FormattedMessage;
-  link: string;
-  as?: LinkLike;
-  pathname?: string;
-};
-
-const ProgressionSidebarItem: FC<ProgressionSidebarItemProps> = ({
-  label,
-  link,
-  ...props
-}) => (
-  <BaseActiveLink
-    className={styles.item}
-    activeClassName={styles.active}
-    href={link}
-    {...props}
-  >
-    <ProgressionSidebarIcon />
-    {label}
-  </BaseActiveLink>
-);
-
-export default ProgressionSidebarItem;

package/Common/ProgressionSidebar/index.module.css

@@ -1,30 +0,0 @@
-@reference "../../styles/index.css";
-
-.wrapper {
-  @apply flex
-    w-full
-    flex-col
-    gap-8
-    overflow-auto
-    border-r-0
-    border-neutral-200
-    bg-white
-    px-4
-    py-6
-    sm:border-r
-    md:max-w-xs
-    lg:px-6
-    dark:border-neutral-900
-    dark:bg-neutral-950;
-
-  > section {
-    @apply hidden
-      sm:flex;
-  }
-
-  > span {
-    @apply flex
-      w-full
-      sm:hidden;
-  }
-}

package/Common/ProgressionSidebar/index.stories.tsx

@@ -1,79 +0,0 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
-
-import ProgressionSidebar from '#ui/Common/ProgressionSidebar';
-
-type Story = StoryObj<typeof ProgressionSidebar>;
-type Meta = MetaObj<typeof ProgressionSidebar>;
-
-export const Default: Story = {
-  args: {
-    groups: [
-      {
-        groupName: 'Getting Started',
-        items: [
-          {
-            label: 'Introduction to Node.js',
-            link: '/',
-          },
-          {
-            label: 'How to install Node.js',
-            link: '/how-to-install-nodejs',
-          },
-          {
-            label: 'How much JavaScript do you need to know to use Node.js?',
-            link: '/how-much-javascript-do-you-need-to-know-to-use-nodejs',
-          },
-          {
-            label: 'Differences between Node.js and the Browser',
-            link: '/differences-between-nodejs-and-the-browser',
-          },
-          {
-            label: 'The V8 JavaScript Engine',
-            link: '/the-v8-javascript-engine',
-          },
-          {
-            label: 'An introduction to the npm package manager',
-            link: '/an-introduction-to-the-npm-package-manager',
-          },
-        ],
-      },
-      {
-        groupName: 'Asynchronous Work',
-        items: [
-          {
-            label: 'Asynchronous flow control',
-            link: '/asynchronous-flow-control',
-          },
-          {
-            label: 'Overview of Blocking vs Non-Blocking',
-            link: '/overview-of-blocking-vs-non-blocking',
-          },
-        ],
-      },
-      {
-        groupName: 'Manipulating Files',
-        items: [
-          {
-            label: 'Node.js file stats',
-            link: '/nodejs-file-stats',
-          },
-          {
-            label: 'Node.js File Paths',
-            link: '/nodejs-file-paths',
-          },
-        ],
-      },
-      {
-        groupName: 'Single item',
-        items: [
-          {
-            label: 'Item',
-            link: '/item',
-          },
-        ],
-      },
-    ],
-  },
-};
-
-export default { component: ProgressionSidebar } as Meta;

package/Common/ProgressionSidebar/index.tsx

@@ -1,59 +0,0 @@
-'use client';
-
-import { useRef, type ComponentProps, type FC } from 'react';
-
-import ProgressionSidebarGroup from '#ui/Common/ProgressionSidebar/ProgressionSidebarGroup';
-import Select from '#ui/Common/Select';
-import type { LinkLike } from '#ui/types';
-
-import styles from './index.module.css';
-
-type ProgressionSidebarProps = {
-  groups: Array<ComponentProps<typeof ProgressionSidebarGroup>>;
-  pathname?: string;
-  title: string;
-  onSelect: (value: string) => void;
-  as?: LinkLike;
-};
-
-const ProgressionSidebar: FC<ProgressionSidebarProps> = ({
-  groups,
-  pathname,
-  title,
-  onSelect,
-  as,
-}) => {
-  const ref = useRef<HTMLElement>(null);
-  const selectItems = groups.map(({ items, groupName }) => ({
-    label: groupName,
-    items: items.map(({ label, link }) => ({ value: link, label })),
-  }));
-
-  const currentItem = selectItems
-    .map(item => item.items)
-    .flat()
-    .find(item => pathname === item.value);
-
-  return (
-    <nav className={styles.wrapper} ref={ref}>
-      <Select
-        label={title}
-        onChange={onSelect}
-        values={selectItems}
-        defaultValue={currentItem?.value}
-      />
-
-      {groups.map(({ groupName, items }) => (
-        <ProgressionSidebarGroup
-          key={groupName.toString()}
-          groupName={groupName}
-          items={items}
-          as={as}
-          pathname={pathname}
-        />
-      ))}
-    </nav>
-  );
-};
-
-export default ProgressionSidebar;