@node-core/ui-components 1.0.1-1b9af3ec9e0268bfc734b2489cbc584fa3edf026 → 1.0.1-1ccf19c1836415b6ec7bc2d63ffba4686b390ca9

package/Common/AvatarGroup/index.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import classNames from 'classnames';
+import type { FC } from 'react';
+import { useState, useMemo } from 'react';
+
+import type { AvatarProps } from '#ui/Common/AvatarGroup/Avatar';
+import Avatar from '#ui/Common/AvatarGroup/Avatar';
+import avatarstyles from '#ui/Common/AvatarGroup/Avatar/index.module.css';
+import AvatarOverlay from '#ui/Common/AvatarGroup/Overlay';
+import Tooltip from '#ui/Common/Tooltip';
+import type { LinkLike } from '#ui/types';
+
+import styles from './index.module.css';
+
+type AvatarGroupProps = {
+  avatars: Array<AvatarProps>;
+  limit?: number;
+  isExpandable?: boolean;
+  size?: AvatarProps['size'];
+  container?: HTMLElement;
+  as?: LinkLike;
+};
+
+const AvatarGroup: FC<AvatarGroupProps> = ({
+  avatars,
+  limit = 10,
+  isExpandable = true,
+  size = 'small',
+  container,
+  as,
+}) => {
+  const [showMore, setShowMore] = useState(false);
+
+  const renderAvatars = useMemo(
+    () => avatars.slice(0, showMore ? avatars.length : limit),
+    [avatars, limit, showMore]
+  );
+
+  const handleShowMoreClick = isExpandable
+    ? () => setShowMore(prev => !prev)
+    : undefined;
+
+  return (
+    <div className={classNames(styles.avatarGroup, styles[size])}>
+      {renderAvatars.map(avatar => (
+        <Tooltip
+          key={avatar.nickname}
+          asChild
+          container={container}
+          content={<AvatarOverlay {...avatar} as={as} />}
+        >
+          <Avatar
+            {...avatar}
+            size={size}
+            className={classNames({
+              'cursor-pointer': avatar.url,
+              'pointer-events-none': !avatar.url,
+            })}
+            as={as}
+          />
+        </Tooltip>
+      ))}
+
+      {avatars.length > limit && (
+        <span
+          onClick={handleShowMoreClick}
+          className={classNames(
+            avatarstyles.avatar,
+            avatarstyles[size],
+            'cursor-pointer'
+          )}
+        >
+          <span className={avatarstyles.item}>
+            {`${showMore ? '-' : '+'}${avatars.length - limit}`}
+          </span>
+        </span>
+      )}
+    </div>
+  );
+};
+
+export default AvatarGroup;

package/Common/Badge/index.module.css

@@ -1,46 +1,38 @@
-/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+@reference "../../styles/index.css";
+
 .badge {
-  border-radius: calc(infinity*1px);
-  border-style: var(--tw-border-style);
-  border-width: 1px;
-  text-align: center;
-  color: var(--color-white, #fff);
+  @apply rounded-full
+    border
+    text-center
+    text-white;
+
   &.small {
-    padding-inline: calc(var(--spacing, 0.25rem)*1.5);
-    padding-block: calc(var(--spacing, 0.25rem)*0.5);
-    font-size: var(--text-xs, 0.75rem);
-    line-height: var(--tw-leading, var(--text-xs--line-height, 1.33333));
+    @apply px-1.5
+      py-0.5
+      text-xs;
   }
+
   &.medium {
-    padding-inline: calc(var(--spacing, 0.25rem)*2.5);
-    padding-block: calc(var(--spacing, 0.25rem)*0.5);
-    font-size: var(--text-base, 1rem);
-    line-height: var(--tw-leading, var(--text-base--line-height, 1.5));
+    @apply px-2.5
+      py-0.5
+      text-base;
   }
+
   &.default {
-    border-color: var(--color-green-200, #c5e5b4);
-    background-color: var(--color-green-600, #417e38);
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      border-color: var(--color-green-800, #2c682c);
-    }
+    @apply border-green-200
+      bg-green-600
+      dark:border-green-800;
   }
+
   &.error {
-    border-color: var(--color-danger-200, #fad3d4);
-    background-color: var(--color-danger-600, #de1a1b);
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      border-color: var(--color-danger-800, #900e0e);
-    }
+    @apply border-danger-200
+      bg-danger-600
+      dark:border-danger-800;
   }
+
   &.warning {
-    border-color: var(--color-warning-200, #fad9b0);
-    background-color: var(--color-warning-600, #ae5f00);
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      border-color: var(--color-warning-600, #ae5f00);
-    }
+    @apply border-warning-200
+      bg-warning-600
+      dark:border-warning-600;
   }
 }
-@property --tw-border-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}

package/Common/Badge/index.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import Badge from '#ui/Common/Badge';
+
+type Story = StoryObj<typeof Badge>;
+type Meta = MetaObj<typeof Badge>;
+
+export const Default: Story = {
+  args: {
+    kind: 'default',
+  },
+};
+
+export const Error: Story = {
+  args: {
+    kind: 'error',
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    kind: 'warning',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    size: 'medium',
+  },
+};
+
+export default { component: Badge, args: { children: 'Badge' } } as Meta;

package/Common/Badge/index.tsx

@@ -0,0 +1,35 @@
+import classNames from 'classnames';
+import type { FC, HTMLAttributes, PropsWithChildren } from 'react';
+
+import styles from './index.module.css';
+
+type BadgeKind = 'default' | 'warning' | 'error';
+
+type BadgeProps = HTMLAttributes<HTMLSpanElement> & {
+  size?: 'small' | 'medium';
+  kind?: BadgeKind;
+};
+
+const Badge: FC<PropsWithChildren<BadgeProps>> = ({
+  kind = 'default',
+  size = 'medium',
+  className,
+  children,
+  ...props
+}) => {
+  return (
+    <span
+      className={classNames(
+        styles.badge,
+        styles[kind],
+        styles[size],
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </span>
+  );
+};
+
+export default Badge;

package/Common/BadgeGroup/index.module.css

@@ -1,101 +1,77 @@
-/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+@reference "../../styles/index.css";
+
 .wrapper {
-  display: flex;
-  width: fit-content;
-  align-items: center;
-  border-radius: calc(infinity*1px);
-  border-style: var(--tw-border-style);
-  border-width: 1px;
-  padding-block: calc(var(--spacing, 0.25rem)*1);
-  padding-right: calc(var(--spacing, 0.25rem)*2.5);
-  padding-left: calc(var(--spacing, 0.25rem)*1);
-  font-size: var(--text-sm, 0.875rem);
-  line-height: var(--tw-leading, var(--text-sm--line-height, 1.42857));
-  --tw-font-weight: var(--font-weight-medium, 500);
-  font-weight: var(--font-weight-medium, 500);
+  @apply flex
+    w-fit
+    items-center
+    rounded-full
+    border
+    py-1
+    pl-1
+    pr-2.5
+    text-sm
+    font-medium;
+
   .icon {
-    width: calc(var(--spacing, 0.25rem)*4);
-    height: calc(var(--spacing, 0.25rem)*4);
+    @apply size-4;
   }
+
   .badge {
-    margin-right: calc(var(--spacing, 0.25rem)*2);
+    @apply mr-2;
   }
+
   .message {
-    margin-right: calc(var(--spacing, 0.25rem)*1);
+    @apply mr-1;
   }
+
   &.default {
-    border-color: var(--color-green-200, #c5e5b4);
-    background-color: var(--color-green-100, #edf2eb);
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      border-color: var(--color-green-700, #2c682c);
-    }
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      background-color: var(--color-neutral-900, #2c3437);
-    }
+    @apply border-green-200
+      bg-green-100
+      dark:border-green-700
+      dark:bg-neutral-900;
+
     .icon {
-      color: var(--color-green-500, #5fa04e);
-      &:where([data-theme=dark], [data-theme=dark] *) {
-        color: var(--color-green-300, #99cc7d);
-      }
+      @apply text-green-500
+        dark:text-green-300;
     }
+
     .message {
-      color: var(--color-green-700, #2c682c);
-      &:where([data-theme=dark], [data-theme=dark] *) {
-        color: var(--color-green-300, #99cc7d);
-      }
+      @apply text-green-700
+        dark:text-green-300;
     }
   }
+
   &.error {
-    border-color: var(--color-danger-200, #fad3d4);
-    background-color: var(--color-danger-100, #fbf1f0);
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      border-color: var(--color-danger-700, #b80c0c);
-    }
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      background-color: var(--color-neutral-900, #2c3437);
-    }
+    @apply border-danger-200
+      bg-danger-100
+      dark:border-danger-700
+      dark:bg-neutral-900;
+
     .icon {
-      color: var(--color-danger-500, #f65354);
-      &:where([data-theme=dark], [data-theme=dark] *) {
-        color: var(--color-danger-300, #fab6b7);
-      }
+      @apply text-danger-500
+        dark:text-danger-300;
     }
+
     .message {
-      color: var(--color-danger-700, #b80c0c);
-      &:where([data-theme=dark], [data-theme=dark] *) {
-        color: var(--color-danger-300, #fab6b7);
-      }
+      @apply text-danger-700
+        dark:text-danger-300;
     }
   }
+
   &.warning {
-    border-color: var(--color-warning-200, #fad9b0);
-    background-color: var(--color-warning-100, #fdf3e7);
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      border-color: var(--color-warning-700, #8b4d04);
-    }
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      background-color: var(--color-neutral-900, #2c3437);
-    }
+    @apply border-warning-200
+      bg-warning-100
+      dark:border-warning-700
+      dark:bg-neutral-900;
+
     .icon {
-      color: var(--color-warning-500, #d07912);
-      &:where([data-theme=dark], [data-theme=dark] *) {
-        color: var(--color-warning-300, #f5bc75);
-      }
+      @apply text-warning-500
+        dark:text-warning-300;
     }
+
     .message {
-      color: var(--color-warning-700, #8b4d04);
-      &:where([data-theme=dark], [data-theme=dark] *) {
-        color: var(--color-warning-300, #f5bc75);
-      }
+      @apply text-warning-700
+        dark:text-warning-300;
     }
   }
 }
-@property --tw-border-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
-@property --tw-font-weight {
-  syntax: "*";
-  inherits: false;
-}

package/Common/BadgeGroup/index.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import BadgeGroup from '#ui/Common/BadgeGroup';
+
+type Story = StoryObj<typeof BadgeGroup>;
+type Meta = MetaObj<typeof BadgeGroup>;
+
+export const Default: Story = {
+  args: {
+    href: '/',
+    children: 'OpenJS Foundation Certification 2023',
+    kind: 'default',
+    badgeText: 'New',
+  },
+};
+
+export const Error: Story = {
+  args: {
+    href: '/',
+    children: 'OpenJS Foundation Certification 2023',
+    kind: 'error',
+    badgeText: 'New',
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    href: '/',
+    children: 'OpenJS Foundation Certification 2023',
+    kind: 'warning',
+    badgeText: 'New',
+  },
+};
+
+export default { component: BadgeGroup } as Meta;

package/Common/BadgeGroup/index.tsx

@@ -0,0 +1,35 @@
+import ArrowRightIcon from '@heroicons/react/24/solid/ArrowRightIcon';
+import type { ComponentProps, FC, PropsWithChildren } from 'react';
+
+import Badge from '#ui/Common/Badge';
+import type { LinkLike } from '#ui/types';
+
+import styles from './index.module.css';
+
+type BadgeGroupKind = 'default' | 'warning' | 'error';
+
+type BadgeGroupProps = {
+  kind?: BadgeGroupKind;
+  badgeText?: string;
+  as: LinkLike;
+} & ComponentProps<LinkLike>;
+
+const BadgeGroup: FC<PropsWithChildren<BadgeGroupProps>> = ({
+  kind = 'default',
+  badgeText,
+  children,
+  as: Component = 'a',
+  ...args
+}) => (
+  <Component className={`${styles.wrapper} ${styles[kind]}`} {...args}>
+    {badgeText && (
+      <Badge kind={kind} className={styles.badge}>
+        {badgeText}
+      </Badge>
+    )}
+    <span className={styles.message}>{children}</span>
+    {args.href && <ArrowRightIcon className={styles.icon} />}
+  </Component>
+);
+
+export default BadgeGroup;

package/Common/Banner/index.module.css

@@ -1,45 +1,42 @@
-/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+@reference "../../styles/index.css";
+
 .banner {
-  display: flex;
-  width: 100%;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  gap: calc(var(--spacing, 0.25rem)*2);
-  padding-inline: calc(var(--spacing, 0.25rem)*8);
-  padding-block: calc(var(--spacing, 0.25rem)*3);
-  font-size: var(--text-sm, 0.875rem);
-  line-height: var(--tw-leading, var(--text-sm--line-height, 1.42857));
+  @apply flex
+    w-full
+    flex-row
+    items-center
+    justify-center
+    gap-2
+    px-8
+    py-3
+    text-sm;
+
   &,
   a {
-    color: var(--color-white, #fff);
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      color: var(--color-white, #fff);
-    }
+    @apply text-white
+      dark:text-white;
   }
+
   a {
-    width: fit-content;
-    text-decoration-line: underline;
-    text-decoration-color: color-mix(in srgb, #fff 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      text-decoration-color: color-mix(in oklab, var(--color-white, #fff) 50%, transparent);
-    }
+    @apply w-fit
+      underline
+      decoration-white/50;
   }
+
   svg {
-    width: calc(var(--spacing, 0.25rem)*4);
-    height: calc(var(--spacing, 0.25rem)*4);
-    color: color-mix(in srgb, #fff 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--color-white, #fff) 50%, transparent);
-    }
+    @apply size-4
+      text-white/50;
   }
 }
+
 .default {
-  background-color: var(--color-green-600, #417e38);
+  @apply bg-green-600;
 }
+
 .error {
-  background-color: var(--color-danger-600, #de1a1b);
+  @apply bg-danger-600;
 }
+
 .warning {
-  background-color: var(--color-warning-600, #ae5f00);
+  @apply bg-warning-600;
 }

package/Common/Banner/index.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import Banner from '#ui/Common/Banner';
+
+type Story = StoryObj<typeof Banner>;
+type Meta = MetaObj<typeof Banner>;
+
+export const Default: Story = {
+  args: {
+    children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    type: 'default',
+  },
+};
+
+export const Error: Story = {
+  args: {
+    children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    type: 'error',
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    type: 'warning',
+  },
+};
+
+export default { component: Banner } as Meta;

package/Common/Banner/index.tsx

@@ -0,0 +1,18 @@
+import type { FC, PropsWithChildren } from 'react';
+
+import styles from './index.module.css';
+
+export type BannerProps = {
+  type?: 'default' | 'warning' | 'error';
+};
+
+const Banner: FC<PropsWithChildren<BannerProps>> = ({
+  type = 'default',
+  children,
+}) => (
+  <div className={`${styles.banner} ${styles[type] || styles.default}`}>
+    {children}
+  </div>
+);
+
+export default Banner;

package/Common/BaseActiveLink/__tests__/index.test.jsx

@@ -0,0 +1,52 @@
+import { describe, it } from 'node:test';
+import assert from 'node:assert/strict';
+
+import { render, screen } from '@testing-library/react';
+
+import ActiveLink from '..';
+
+describe('ActiveLink', () => {
+  it('renders as localized link', async () => {
+    render(
+      <ActiveLink className="link" activeClassName="active" href="/link">
+        Link
+      </ActiveLink>
+    );
+
+    assert.equal(
+      (await screen.findByText('Link')).getAttribute('href'),
+      '/link'
+    );
+  });
+
+  it('ignores active class when href not matches location.href', async () => {
+    render(
+      <ActiveLink className="link" activeClassName="active" href="/not-link">
+        Link
+      </ActiveLink>
+    );
+
+    assert.equal(
+      (await screen.findByText('Link')).getAttribute('class'),
+      'link'
+    );
+  });
+
+  it('sets active class when href matches location.href', async () => {
+    render(
+      <ActiveLink
+        className="link"
+        activeClassName="active"
+        href="/link"
+        pathname="/link"
+      >
+        Link
+      </ActiveLink>
+    );
+
+    assert.equal(
+      (await screen.findByText('Link')).getAttribute('class'),
+      'link active'
+    );
+  });
+});

package/Common/BaseActiveLink/index.tsx

@@ -0,0 +1,34 @@
+import classNames from 'classnames';
+import type { ComponentProps, FC } from 'react';
+
+import type { LinkLike } from '#ui/types';
+
+export type ActiveLocalizedLinkProps = ComponentProps<LinkLike> & {
+  activeClassName?: string;
+  allowSubPath?: boolean;
+  pathname?: string;
+  as?: LinkLike;
+};
+
+const BaseActiveLink: FC<ActiveLocalizedLinkProps> = ({
+  activeClassName = 'active',
+  allowSubPath = false,
+  className,
+  href = '',
+  pathname = '/',
+  as: Component = 'a',
+  ...props
+}) => {
+  const finalClassName = classNames(className, {
+    [activeClassName]: allowSubPath
+      ? // When using allowSubPath we want only to check if
+        // the current pathname starts with the utmost upper level
+        // of an href (e.g. /docs/...)
+        pathname.startsWith(`/${href.toString().split('/')[1]}`)
+      : href.toString() === pathname,
+  });
+
+  return <Component className={finalClassName} href={href} {...props} />;
+};
+
+export default BaseActiveLink;