@node-core/ui-components 0.0.1 → 1.0.1-f948ce8a25da149fc61135f90a43e189c4909f5d

package/Common/Breadcrumbs/BreadcrumbItem/index.module.css

@@ -0,0 +1,41 @@
+@reference "../../../styles/index.css";
+
+.item {
+  @apply flex
+    max-w-fit
+    items-center
+    gap-5
+    truncate
+    text-sm
+    font-medium;
+
+  &:last-child {
+    @apply w-full;
+  }
+
+  a {
+    @apply shrink
+      grow;
+  }
+
+  &,
+  > a,
+  > a:hover {
+    @apply text-neutral-800
+      motion-safe:transition-colors
+      dark:text-neutral-200;
+  }
+
+  &.visuallyHidden {
+    @apply hidden;
+  }
+
+  .separator {
+    @apply size-4
+      max-w-fit
+      shrink-0
+      grow
+      text-neutral-600
+      dark:text-neutral-400;
+  }
+}

package/Common/Breadcrumbs/BreadcrumbItem/index.tsx

@@ -0,0 +1,42 @@
+import ChevronRightIcon from '@heroicons/react/24/outline/ChevronRightIcon';
+import classNames from 'classnames';
+import type { ComponentProps, FC, PropsWithChildren } from 'react';
+
+import styles from './index.module.css';
+
+type BreadcrumbItemProps = {
+  disableMicrodata?: boolean;
+  hidden?: boolean;
+  hideSeparator?: boolean;
+  position?: number;
+} & ComponentProps<'li'>;
+
+const BreadcrumbItem: FC<PropsWithChildren<BreadcrumbItemProps>> = ({
+  disableMicrodata,
+  children,
+  hidden = false,
+  hideSeparator = false,
+  position,
+  ...props
+}) => (
+  <li
+    {...props}
+    itemProp={!disableMicrodata ? 'itemListElement' : undefined}
+    itemScope={!disableMicrodata ? true : undefined}
+    itemType={!disableMicrodata ? 'https://schema.org/ListItem' : undefined}
+    className={classNames(
+      styles.item,
+      { [styles.visuallyHidden]: hidden },
+      props.className
+    )}
+    aria-hidden={hidden ? 'true' : undefined}
+  >
+    {children}
+    {position && <meta itemProp="position" content={`${position}`} />}
+    {!hideSeparator && (
+      <ChevronRightIcon aria-hidden="true" className={styles.separator} />
+    )}
+  </li>
+);
+
+export default BreadcrumbItem;

package/Common/Breadcrumbs/BreadcrumbLink/index.module.css

@@ -0,0 +1,22 @@
+@reference "../../../styles/index.css";
+
+.link {
+  @apply max-w-fit
+    truncate;
+
+  &.active {
+    @apply rounded
+      bg-green-600
+      px-2
+      py-1
+      font-semibold
+      text-white
+      motion-safe:transition-colors
+      dark:text-white;
+
+    &:hover {
+      @apply bg-green-700
+        text-white;
+    }
+  }
+}

package/Common/Breadcrumbs/BreadcrumbLink/index.tsx

@@ -0,0 +1,37 @@
+import classNames from 'classnames';
+import type { ComponentProps, FC } from 'react';
+
+import type { LinkLike } from '#ui/types';
+
+import styles from './index.module.css';
+
+type BreadcrumbLinkProps = {
+  active?: boolean;
+  as: LinkLike;
+} & ComponentProps<LinkLike>;
+
+const BreadcrumbLink: FC<BreadcrumbLinkProps> = ({
+  href,
+  active,
+  as: Component = 'a',
+  ...props
+}) => (
+  <Component
+    itemScope
+    itemType="http://schema.org/Thing"
+    itemProp="item"
+    itemID={href?.toString()}
+    href={href}
+    className={classNames(
+      styles.link,
+      { [styles.active]: active },
+      props.className
+    )}
+    aria-current={active ? 'page' : undefined}
+    {...props}
+  >
+    <span itemProp="name">{props.children}</span>
+  </Component>
+);
+
+export default BreadcrumbLink;

package/Common/Breadcrumbs/BreadcrumbRoot/index.module.css

@@ -0,0 +1,9 @@
+@reference "../../../styles/index.css";
+
+.list {
+  @apply xs:w-full
+    flex
+    w-screen
+    gap-5
+    px-6;
+}

package/Common/Breadcrumbs/BreadcrumbRoot/index.tsx

@@ -0,0 +1,20 @@
+import type { FC, PropsWithChildren, ComponentProps } from 'react';
+
+import styles from './index.module.css';
+
+const BreadcrumbRoot: FC<PropsWithChildren<ComponentProps<'nav'>>> = ({
+  children,
+  ...props
+}) => (
+  <nav aria-label="breadcrumb" {...props}>
+    <ol
+      itemScope
+      itemType="https://schema.org/BreadcrumbList"
+      className={styles.list}
+    >
+      {children}
+    </ol>
+  </nav>
+);
+
+export default BreadcrumbRoot;

package/Common/Breadcrumbs/BreadcrumbTruncatedItem/index.tsx

@@ -0,0 +1,9 @@
+import BreadcrumbItem from '#ui/Common/Breadcrumbs/BreadcrumbItem';
+
+const BreadcrumbTruncatedItem = () => (
+  <BreadcrumbItem disableMicrodata>
+    <button disabled>…</button>
+  </BreadcrumbItem>
+);
+
+export default BreadcrumbTruncatedItem;

package/Common/Breadcrumbs/index.stories.tsx

@@ -0,0 +1,94 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import Breadcrumbs from '#ui/Common/Breadcrumbs';
+
+type Story = StoryObj<typeof Breadcrumbs>;
+type Meta = MetaObj<typeof Breadcrumbs>;
+
+export const Default: Story = {
+  args: {
+    links: [
+      {
+        label: 'Learn',
+        href: '/learn',
+      },
+      {
+        label: 'Getting Started',
+        href: '/learn/getting-started',
+      },
+      {
+        label: 'Introduction to Node.js',
+        href: '/learn/getting-started/intro',
+      },
+    ],
+  },
+};
+
+export const Linkless: Story = {
+  args: {
+    links: [
+      {
+        label: 'Learn',
+        href: '',
+      },
+      {
+        label: 'Getting Started',
+        href: '',
+      },
+      {
+        label: 'Introduction to Node.js',
+        href: '',
+      },
+    ],
+  },
+};
+
+export const Truncate: Story = {
+  args: {
+    links: [
+      {
+        label: 'Learn',
+        href: '/learn',
+      },
+      {
+        label: 'Getting Started',
+        href: '/learn/getting-started',
+      },
+      {
+        label: 'Introduction to Node.js',
+        href: '/learn/getting-started/intro',
+      },
+      {
+        label: 'Installation',
+        href: '/learn/getting-started/intro/installation',
+      },
+      {
+        label: 'Documentation',
+        href: '/learn/getting-started/intro/installation/documentation',
+      },
+    ],
+    maxLength: 1,
+  },
+};
+
+export const HiddenHome: Story = {
+  args: {
+    hideHome: true,
+    links: [
+      {
+        label: 'Learn',
+        href: '/learn',
+      },
+      {
+        label: 'Getting Started',
+        href: '/learn/getting-started',
+      },
+      {
+        label: 'Introduction to Node.js',
+        href: '/learn/getting-started/intro',
+      },
+    ],
+  },
+};
+
+export default { component: Breadcrumbs } as Meta;

package/Common/Breadcrumbs/index.tsx

@@ -0,0 +1,81 @@
+import type { FC } from 'react';
+import { useMemo } from 'react';
+
+import BreadcrumbHomeLink from '#ui/Common/Breadcrumbs/BreadcrumbHomeLink';
+import BreadcrumbItem from '#ui/Common/Breadcrumbs/BreadcrumbItem';
+import BreadcrumbLink from '#ui/Common/Breadcrumbs/BreadcrumbLink';
+import BreadcrumbRoot from '#ui/Common/Breadcrumbs/BreadcrumbRoot';
+import BreadcrumbTruncatedItem from '#ui/Common/Breadcrumbs/BreadcrumbTruncatedItem';
+import type { FormattedMessage, LinkLike } from '#ui/types';
+
+export type BreadcrumbLink = {
+  label: FormattedMessage;
+  href: string | undefined;
+};
+
+type BreadcrumbsProps = {
+  links: Array<BreadcrumbLink>;
+  maxLength?: number;
+  hideHome?: boolean;
+  as: LinkLike;
+  homeLinkAriaLabel?: string;
+};
+
+const Breadcrumbs: FC<BreadcrumbsProps> = ({
+  links = [],
+  maxLength = 5,
+  hideHome = false,
+  as = 'a',
+  homeLinkAriaLabel,
+}) => {
+  const totalLength = links.length + +!hideHome;
+  const lengthOffset = maxLength - totalLength;
+  const isOverflow = lengthOffset < 0;
+
+  const items = useMemo(
+    () =>
+      links.map((link, index, items) => {
+        const position = index + 1;
+        const isLastItem = index === items.length - 1;
+        const hidden =
+          // We add 1 here to take into account of the truncated breadcrumb.
+          position <= Math.abs(lengthOffset) + 1 && isOverflow && !isLastItem;
+
+        return (
+          <BreadcrumbItem
+            key={link.label.toString()}
+            hidden={hidden}
+            hideSeparator={isLastItem}
+            position={position + +!hideHome}
+          >
+            {link.href || isLastItem ? (
+              <BreadcrumbLink
+                as={as}
+                href={link.href || undefined}
+                active={isLastItem}
+              >
+                {link.label}
+              </BreadcrumbLink>
+            ) : (
+              <span className="opacity-70">{link.label}</span>
+            )}
+          </BreadcrumbItem>
+        );
+      }),
+    [hideHome, isOverflow, lengthOffset, links]
+  );
+
+  return (
+    <BreadcrumbRoot>
+      {!hideHome && (
+        <BreadcrumbItem position={1}>
+          <BreadcrumbHomeLink as={as} aria-label={homeLinkAriaLabel} />
+        </BreadcrumbItem>
+      )}
+      {isOverflow && <BreadcrumbTruncatedItem />}
+      {items}
+    </BreadcrumbRoot>
+  );
+};
+
+export default Breadcrumbs;

package/Common/CodeTabs/index.module.css

@@ -0,0 +1,56 @@
+@reference "../../styles/index.css";
+
+.root {
+  > [role='tabpanel'] > :first-child {
+    @apply rounded-t-none;
+  }
+
+  > div:nth-of-type(1) {
+    @apply flex
+      rounded-t
+      border-x
+      border-t
+      border-neutral-900
+      bg-neutral-950
+      px-2
+      pt-3
+      md:px-4;
+
+    .trigger {
+      @apply border-b
+        border-b-transparent
+        px-1
+        text-neutral-200;
+
+      &[data-state='active'] {
+        @apply border-b-green-400
+          text-green-400;
+      }
+    }
+
+    .link {
+      @apply hidden
+        items-center
+        gap-2
+        text-center
+        text-neutral-200
+        motion-safe:transition-colors
+        lg:flex;
+
+      & > .icon {
+        @apply size-4
+          text-neutral-300;
+      }
+
+      &:is(:link, :visited) {
+        &:hover {
+          @apply text-neutral-400;
+
+          & > .icon {
+            @apply text-neutral-600;
+          }
+        }
+      }
+    }
+  }
+}

package/Common/CodeTabs/index.stories.tsx

@@ -0,0 +1,74 @@
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import type { FC } from 'react';
+
+import BaseCodeBox from '#ui/Common/BaseCodeBox';
+import CodeTabs from '#ui/Common/CodeTabs';
+
+type Story = StoryObj<typeof CodeTabs>;
+type Meta = MetaObj<typeof CodeTabs>;
+
+const mjsContent = `import * as http from 'http';
+
+const hostname = '127.0.0.1';
+const port = 3000;
+
+const server = http.createServer((req, res) => {
+  res.statusCode = 200;
+  res.setHeader('Content-Type', 'text/plain');
+  res.end('Hello World');
+});
+
+server.listen(port, hostname, () => {
+  console.log(\`Server running at http://\${hostname}:\${port}/\`);
+});`;
+
+const cjsContent = `const http = require('http');
+
+const hostname = '127.0.0.1';
+const port = 3000;
+
+const server = http.createServer((req, res) => {
+  res.statusCode = 200;
+  res.setHeader('Content-Type', 'text/plain');
+  res.end('Hello World');
+});
+
+server.listen(port, hostname, () => {
+  console.log(\`Server running at http://\${hostname}:\${port}/\`);
+});`;
+
+const boxProps = {
+  onCopy: console.log,
+  copyText: '[Copy Text]',
+  copiedText: '[Copied Text]',
+};
+
+const TabsContent: FC = () => (
+  <>
+    <TabsPrimitive.Content key="mjs" value="mjs">
+      <BaseCodeBox language="JavaScript (MJS)" {...boxProps}>
+        <code>{mjsContent}</code>
+      </BaseCodeBox>
+    </TabsPrimitive.Content>
+    <TabsPrimitive.Content key="cjs" value="cjs">
+      <BaseCodeBox language="JavaScript (CJS)" {...boxProps}>
+        <code>{cjsContent}</code>
+      </BaseCodeBox>
+    </TabsPrimitive.Content>
+  </>
+);
+
+export const Default: Story = {};
+
+export default {
+  component: CodeTabs,
+  args: {
+    children: <TabsContent />,
+    defaultValue: 'mjs',
+    tabs: [
+      { key: 'mjs', label: 'MJS' },
+      { key: 'cjs', label: 'CJS' },
+    ],
+  },
+} as Meta;

package/Common/CodeTabs/index.tsx

@@ -0,0 +1,16 @@
+import type { ComponentProps, FC } from 'react';
+
+import Tabs from '#ui/Common/Tabs';
+
+import styles from './index.module.css';
+
+type CodeTabsProps = Pick<
+  ComponentProps<typeof Tabs>,
+  'tabs' | 'defaultValue' | 'children' | 'addons'
+>;
+
+const CodeTabs: FC<CodeTabsProps> = ({ ...props }) => (
+  <Tabs {...props} className={styles.root} triggerClassName={styles.trigger} />
+);
+
+export default CodeTabs;

package/Common/GlowingBackdrop/index.module.css

@@ -0,0 +1,32 @@
+@reference "../../styles/index.css";
+
+.glowingBackdrop {
+  @apply absolute
+    left-0
+    top-0
+    -z-10
+    size-full
+    opacity-50
+    after:absolute
+    after:inset-0
+    after:m-auto
+    after:aspect-square
+    after:w-[300px]
+    after:rounded-full
+    after:bg-green-300
+    after:blur-[120px]
+    after:content-['']
+    md:opacity-100
+    dark:after:bg-green-700;
+
+  svg {
+    @apply absolute
+      inset-0
+      m-auto
+      aspect-[1.67]
+      max-w-[1004px]
+      object-cover
+      text-neutral-300
+      dark:text-neutral-900/75;
+  }
+}

package/Common/GlowingBackdrop/index.stories.tsx

@@ -0,0 +1,10 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import GlowingBackdrop from '#ui/Common/GlowingBackdrop';
+
+type Story = StoryObj<typeof GlowingBackdrop>;
+type Meta = MetaObj<typeof GlowingBackdrop>;
+
+export const Default: Story = {};
+
+export default { component: GlowingBackdrop } as Meta;

package/Common/GlowingBackdrop/index.tsx

@@ -0,0 +1,13 @@
+import type { FC } from 'react';
+
+import HexagonGrid from '#ui/Icons/HexagonGrid';
+
+import styles from './index.module.css';
+
+const GlowingBackdrop: FC = () => (
+  <div className={styles.glowingBackdrop}>
+    <HexagonGrid />
+  </div>
+);
+
+export default GlowingBackdrop;

package/Common/LanguageDropDown/index.module.css

@@ -0,0 +1,53 @@
+@reference "../../styles/index.css";
+
+.languageDropdown {
+  @apply h-9
+    w-9
+    rounded-md
+    p-2
+    text-neutral-700
+    motion-safe:transition-colors
+    dark:text-neutral-300;
+
+  &:hover {
+    @apply bg-neutral-100
+      dark:bg-neutral-900;
+  }
+}
+
+.dropDownContent {
+  @apply max-h-80
+    w-48
+    overflow-hidden
+    rounded-sm
+    border
+    border-neutral-200
+    bg-white
+    shadow-lg
+    dark:border-neutral-900
+    dark:bg-neutral-950;
+
+  > div {
+    @apply max-h-80
+      w-48
+      overflow-y-auto;
+  }
+}
+
+.dropDownItem {
+  @apply outline-hidden
+    cursor-pointer
+    px-2.5
+    py-1.5
+    text-sm
+    font-medium
+    text-neutral-800
+    data-[highlighted]:bg-green-600
+    data-[highlighted]:text-white
+    dark:text-white;
+}
+
+.currentDropDown {
+  @apply bg-green-600
+    text-white;
+}

package/Common/LanguageDropDown/index.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import LanguageDropDown from '#ui/Common/LanguageDropDown';
+
+type Story = StoryObj<typeof LanguageDropDown>;
+type Meta = MetaObj<typeof LanguageDropDown>;
+
+export const Default: Story = {
+  args: {
+    availableLanguages: [
+      { name: 'English', code: 'en', localName: 'English' },
+      { name: 'French', code: 'fr', localName: 'Français' },
+      { name: 'Spanish', code: 'es', localName: 'Español' },
+    ],
+    currentLanguage: 'en',
+  },
+};
+
+export default { component: LanguageDropDown } as Meta;

package/Common/LanguageDropDown/index.tsx

@@ -0,0 +1,56 @@
+import { LanguageIcon } from '@heroicons/react/24/outline';
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import classNames from 'classnames';
+import type { FC } from 'react';
+
+import type { SimpleLocaleConfig } from '#ui/types';
+
+import styles from './index.module.css';
+
+type LanguageDropDownProps = {
+  onChange?: (newLocale: SimpleLocaleConfig) => void;
+  currentLanguage: string;
+  availableLanguages: Array<SimpleLocaleConfig>;
+  ariaLabel: string;
+};
+
+const LanguageDropdown: FC<LanguageDropDownProps> = ({
+  onChange = () => {},
+  currentLanguage,
+  availableLanguages,
+  ariaLabel,
+}) => {
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger asChild>
+        <button className={styles.languageDropdown} aria-label={ariaLabel}>
+          <LanguageIcon height="20" />
+        </button>
+      </DropdownMenu.Trigger>
+
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content
+          align="start"
+          className={styles.dropDownContent}
+          sideOffset={5}
+        >
+          <div>
+            {availableLanguages.map(({ name, code, localName }) => (
+              <DropdownMenu.Item
+                key={code}
+                onClick={() => onChange({ name, code, localName })}
+                className={classNames(styles.dropDownItem, {
+                  [styles.currentDropDown]: code === currentLanguage,
+                })}
+              >
+                {localName}
+              </DropdownMenu.Item>
+            ))}
+          </div>
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
+  );
+};
+
+export default LanguageDropdown;