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

package/src/Common/AvatarGroup/index.stories.tsx

@@ -0,0 +1,56 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import AvatarGroup from '#ui/Common/AvatarGroup';
+
+type Story = StoryObj<typeof AvatarGroup>;
+type Meta = MetaObj<typeof AvatarGroup>;
+
+const names = [
+  'ovflowd',
+  'bmuenzenmeyer',
+  'AugustinMauroy',
+  'HinataKah0',
+  'Harkunwar',
+  'rodion-arr',
+  'mikeesto',
+  'bnb',
+  'benhalverson',
+  'aymen94',
+  'shanpriyan',
+  'Wai-Dung',
+  'manishprivet',
+  'araujogui',
+  'avivkeller',
+];
+
+const defaultProps = {
+  avatars: names.map(name => ({
+    image: `https://avatars.githubusercontent.com/${name}`,
+    nickname: name,
+    fallback: 'FB',
+  })),
+};
+
+export const Default: Story = {
+  args: { ...defaultProps },
+};
+
+export const WithCustomLimit: Story = {
+  args: {
+    ...defaultProps,
+    limit: 5,
+  },
+};
+
+export const InSmallContainer: Story = {
+  decorators: [
+    Story => (
+      <div className="w-[150px]">
+        <Story />
+      </div>
+    ),
+  ],
+  args: { ...defaultProps, limit: 5 },
+};
+
+export default { component: AvatarGroup } as Meta;

package/src/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/src/Common/Badge/index.module.css

@@ -0,0 +1,38 @@
+@reference "../../styles/index.css";
+
+.badge {
+  @apply rounded-full
+    border
+    text-center
+    text-white;
+
+  &.small {
+    @apply px-1.5
+      py-0.5
+      text-xs;
+  }
+
+  &.medium {
+    @apply px-2.5
+      py-0.5
+      text-base;
+  }
+
+  &.default {
+    @apply border-green-200
+      bg-green-600
+      dark:border-green-800;
+  }
+
+  &.error {
+    @apply border-danger-200
+      bg-danger-600
+      dark:border-danger-800;
+  }
+
+  &.warning {
+    @apply border-warning-200
+      bg-warning-600
+      dark:border-warning-600;
+  }
+}

package/src/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/src/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/src/Common/BadgeGroup/index.module.css

@@ -0,0 +1,77 @@
+@reference "../../styles/index.css";
+
+.wrapper {
+  @apply flex
+    w-fit
+    items-center
+    rounded-full
+    border
+    py-1
+    pl-1
+    pr-2.5
+    text-sm
+    font-medium;
+
+  .icon {
+    @apply size-4;
+  }
+
+  .badge {
+    @apply mr-2;
+  }
+
+  .message {
+    @apply mr-1;
+  }
+
+  &.default {
+    @apply border-green-200
+      bg-green-100
+      dark:border-green-700
+      dark:bg-neutral-900;
+
+    .icon {
+      @apply text-green-500
+        dark:text-green-300;
+    }
+
+    .message {
+      @apply text-green-700
+        dark:text-green-300;
+    }
+  }
+
+  &.error {
+    @apply border-danger-200
+      bg-danger-100
+      dark:border-danger-700
+      dark:bg-neutral-900;
+
+    .icon {
+      @apply text-danger-500
+        dark:text-danger-300;
+    }
+
+    .message {
+      @apply text-danger-700
+        dark:text-danger-300;
+    }
+  }
+
+  &.warning {
+    @apply border-warning-200
+      bg-warning-100
+      dark:border-warning-700
+      dark:bg-neutral-900;
+
+    .icon {
+      @apply text-warning-500
+        dark:text-warning-300;
+    }
+
+    .message {
+      @apply text-warning-700
+        dark:text-warning-300;
+    }
+  }
+}

package/src/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/src/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/src/Common/Banner/index.module.css

@@ -0,0 +1,42 @@
+@reference "../../styles/index.css";
+
+.banner {
+  @apply flex
+    w-full
+    flex-row
+    items-center
+    justify-center
+    gap-2
+    px-8
+    py-3
+    text-sm;
+
+  &,
+  a {
+    @apply text-white
+      dark:text-white;
+  }
+
+  a {
+    @apply w-fit
+      underline
+      decoration-white/50;
+  }
+
+  svg {
+    @apply size-4
+      text-white/50;
+  }
+}
+
+.default {
+  @apply bg-green-600;
+}
+
+.error {
+  @apply bg-danger-600;
+}
+
+.warning {
+  @apply bg-warning-600;
+}

package/src/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/src/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/src/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/src/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;