@node-core/ui-components 1.0.1-2a5d26feb99da533fd0280486510163fa30d4322 → 1.0.1-2aa8ae62b828936ceb5251f37f7c539668856ed5

package/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/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,60 +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;
   }
-  &.info {
-    border-color: var(--color-info-200, #bce6fc);
-    background-color: var(--color-info-600, #0c7bb3);
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      border-color: var(--color-info-800, #074d71);
-    }
-  }
-  &.neutral {
-    border-color: var(--color-neutral-200, #e9edf0);
-    background-color: var(--color-neutral-600, #929fa5);
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      border-color: var(--color-neutral-800, #556066);
-    }
-  }
-}
-@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,153 +1,77 @@
-/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+@reference "../../styles/index.css";
+
 .wrapper {
-  display: flex;
-  width: 100%;
-  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);
-  @media (width >= 670px) {
-    width: fit-content;
-  }
+  @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,
-    .message a:not(:hover) {
-      color: var(--color-green-700, #2c682c);
-      &:where([data-theme=dark], [data-theme=dark] *) {
-        color: var(--color-green-300, #99cc7d);
-      }
+
+    .message {
+      @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,
-    .message a:not(:hover) {
-      color: var(--color-danger-700, #b80c0c);
-      &:where([data-theme=dark], [data-theme=dark] *) {
-        color: var(--color-danger-300, #fab6b7);
-      }
+
+    .message {
+      @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,
-    .message a:not(:hover) {
-      color: var(--color-warning-700, #8b4d04);
-      &:where([data-theme=dark], [data-theme=dark] *) {
-        color: var(--color-warning-300, #f5bc75);
-      }
+
+    .message {
+      @apply text-warning-700
+        dark:text-warning-300;
     }
   }
-  &.info {
-    border-color: var(--color-info-200, #bce6fc);
-    background-color: var(--color-info-100, #e9f4fa);
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      border-color: var(--color-info-700, #066291);
-    }
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      background-color: var(--color-neutral-900, #2c3437);
-    }
-    .icon {
-      color: var(--color-info-500, #229ad6);
-      &:where([data-theme=dark], [data-theme=dark] *) {
-        color: var(--color-info-300, #8ed4f8);
-      }
-    }
-    .message,
-    .message a:not(:hover) {
-      color: var(--color-info-700, #066291);
-      &:where([data-theme=dark], [data-theme=dark] *) {
-        color: var(--color-info-300, #8ed4f8);
-      }
-    }
-  }
-  &.neutral {
-    border-color: var(--color-neutral-200, #e9edf0);
-    background-color: var(--color-neutral-100, #f6f7f9);
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      border-color: var(--color-neutral-700, #6e7b83);
-    }
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      background-color: var(--color-neutral-900, #2c3437);
-    }
-    .icon {
-      color: var(--color-neutral-500, #b1bcc2);
-      &:where([data-theme=dark], [data-theme=dark] *) {
-        color: var(--color-neutral-300, #d9e1e4);
-      }
-    }
-    .message,
-    .message a:not(:hover) {
-      color: var(--color-neutral-700, #6e7b83);
-      &:where([data-theme=dark], [data-theme=dark] *) {
-        color: var(--color-neutral-300, #d9e1e4);
-      }
-    }
-  }
-}
-@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;