@node-core/ui-components 1.0.1-bc3f4a79ab5f54e7ed1ee525005e7e9f1030495c → 1.0.1-c0bc4dd7eb49f97f35ce0983849d17702404c76a

package/Common/AlertBox/index.module.css

@@ -1,77 +1,76 @@
-/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+@reference "../../styles/index.css";
+
 .alertBox {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: calc(var(--spacing, 0.25rem)*2);
-  border-radius: var(--radius-sm, 0.25rem);
-  padding-inline: calc(var(--spacing, 0.25rem)*4);
-  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));
-  color: var(--color-white, #fff);
+  @apply flex
+    flex-row
+    items-center
+    gap-2
+    rounded-sm
+    px-4
+    py-3
+    text-sm
+    text-white;
+
   a {
-    --tw-font-weight: var(--font-weight-bold, 700);
-    font-weight: var(--font-weight-bold, 700);
-    color: var(--color-white, #fff);
-    text-decoration-line: underline;
+    @apply font-bold
+      text-white
+      underline
+      hover:text-white;
+
     &:hover {
-      @media (hover: hover) {
-        color: var(--color-white, #fff);
-      }
-    }
-    &:hover {
-      text-decoration-line: none;
+      @apply no-underline;
     }
   }
+
   &.small {
-    gap: calc(var(--spacing, 0.25rem)*1);
-    padding-block: calc(var(--spacing, 0.25rem)*2);
-    font-size: var(--text-xs, 0.75rem);
-    line-height: var(--tw-leading, var(--text-xs--line-height, 1.33333));
+    @apply gap-1
+      py-2
+      text-xs;
+
     .title {
-      padding-inline: calc(var(--spacing, 0.25rem)*1);
+      @apply px-1;
     }
   }
+
   .title {
-    border-radius: var(--radius-xs, 0.125rem);
-    padding-inline: calc(var(--spacing, 0.25rem)*1.5);
+    @apply rounded-xs
+      px-1.5;
   }
+
   svg {
-    display: inline;
-    width: calc(var(--spacing, 0.25rem)*5);
-    height: calc(var(--spacing, 0.25rem)*5);
+    @apply inline
+      size-5;
   }
+
   &.info {
-    background-color: var(--color-info-600, #0c7bb3);
+    @apply bg-info-600;
+
     .title {
-      background-color: var(--color-info-700, #066291);
+      @apply bg-info-700;
     }
   }
+
   &.success {
-    background-color: var(--color-green-600, #417e38);
+    @apply bg-green-600;
+
     .title {
-      background-color: var(--color-green-700, #2c682c);
+      @apply bg-green-700;
     }
   }
+
   &.warning {
-    background-color: var(--color-warning-600, #ae5f00);
+    @apply bg-warning-600;
+
     .title {
-      background-color: var(--color-warning-700, #8b4d04);
+      @apply bg-warning-700;
     }
   }
+
   &.danger {
-    background-color: var(--color-danger-600, #de1a1b);
+    @apply bg-danger-600;
+
     .title {
-      background-color: var(--color-danger-700, #b80c0c);
+      @apply bg-danger-700;
     }
   }
-  code {
-    all: unset;
-    font-family: var(--font-ibm-plex-mono, var(--font-ibm-plex-mono));
-  }
-}
-@property --tw-font-weight {
-  syntax: "*";
-  inherits: false;
 }

package/Common/AlertBox/index.stories.tsx

@@ -0,0 +1,73 @@
+import { ExclamationCircleIcon } from '@heroicons/react/24/solid';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import AlertBox from '#ui/Common/AlertBox';
+
+type Story = StoryObj<typeof AlertBox>;
+type Meta = MetaObj<typeof AlertBox>;
+
+export const Info: Story = {
+  args: {
+    level: 'info',
+    title: '3',
+    children:
+      'Legacy. Although this feature is unlikely to be removed and is still covered by semantic versioning guarantees, it is no longer actively maintained, and other alternatives are available.',
+    size: 'default',
+  },
+};
+
+export const Success: Story = {
+  args: {
+    level: 'success',
+    title: '2',
+    children:
+      'Stable. Compatibility with the npm ecosystem is a high priority.',
+    size: 'default',
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    level: 'warning',
+    title: '1',
+    children:
+      'Experimental. The feature is not subject to semantic versioning rules. Non-backward compatible changes or removal may occur in any future release. Use of the feature is not recommended in production environments. Experimental features are subdivided into stages:',
+    size: 'default',
+  },
+};
+
+export const Danger: Story = {
+  args: {
+    level: 'danger',
+    title: '0',
+    children:
+      'Deprecated. The feature may emit warnings. Backward compatibility is not guaranteed.',
+    size: 'default',
+  },
+};
+
+export const WithIcon: Story = {
+  args: {
+    level: 'info',
+    title: '3',
+    children: (
+      <p>
+        Lorem ipsum dolor sit amet <ExclamationCircleIcon /> consectetur
+        adipisicing elit. Inventore, quasi doloremque. Totam, earum velit, sunt
+        voluptates fugiat beatae praesentium quis magni explicabo repudiandae
+        nam aut molestias ex ad sequi eum!
+      </p>
+    ),
+    size: 'default',
+  },
+};
+
+export default {
+  component: AlertBox,
+  argTypes: {
+    size: {
+      options: ['default', 'small'],
+      control: { type: 'radio' },
+    },
+  },
+} as Meta;

package/Common/AlertBox/index.tsx

@@ -0,0 +1,24 @@
+import classNames from 'classnames';
+import type { FC, PropsWithChildren } from 'react';
+
+import styles from './index.module.css';
+
+type AlertBoxProps = PropsWithChildren<{
+  level: 'info' | 'success' | 'warning' | 'danger';
+  title: string;
+  size?: 'default' | 'small';
+}>;
+
+const AlertBox: FC<AlertBoxProps> = ({
+  level,
+  title,
+  children,
+  size = 'default',
+}) => (
+  <div className={classNames(styles.alertBox, styles[level], styles[size])}>
+    <span className={styles.title}>{title}</span>
+    <span>{children}</span>
+  </div>
+);
+
+export default AlertBox;

package/Common/AvatarGroup/Avatar/index.module.css

@@ -1,60 +1,40 @@
-/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+@reference "../../../styles/index.css";
+
 .item {
-  display: flex;
-  height: 100%;
-  max-height: calc(var(--spacing, 0.25rem)*12);
-  width: 100%;
-  max-width: calc(var(--spacing, 0.25rem)*12);
-  align-items: center;
-  justify-content: center;
-  border-radius: calc(infinity*1px);
-  border-style: var(--tw-border-style);
-  border-width: 2px;
-  border-color: transparent;
-  background-color: var(--color-neutral-100, #f6f7f9);
-  object-fit: cover;
-  font-size: var(--text-xs, 0.75rem);
-  line-height: var(--tw-leading, var(--text-xs--line-height, 1.33333));
-  color: var(--color-neutral-800, #556066);
-  @media (width >= 670px) {
-    max-height: calc(var(--spacing, 0.25rem)*10);
-  }
-  @media (width >= 670px) {
-    max-width: calc(var(--spacing, 0.25rem)*10);
-  }
-  &:where([data-theme=dark], [data-theme=dark] *) {
-    background-color: var(--color-neutral-900, #2c3437);
-  }
-  &:where([data-theme=dark], [data-theme=dark] *) {
-    color: var(--color-neutral-300, #d9e1e4);
-  }
+  @apply xs:max-h-10
+    xs:max-w-10
+    flex
+    h-full
+    max-h-12
+    w-full
+    max-w-12
+    items-center
+    justify-center
+    rounded-full
+    border-2
+    border-transparent
+    bg-neutral-100
+    object-cover
+    text-xs
+    text-neutral-800
+    dark:bg-neutral-900
+    dark:text-neutral-300;
 }
+
 .avatar {
-  width: calc(var(--spacing, 0.25rem)*8);
-  height: calc(var(--spacing, 0.25rem)*8);
+  @apply size-8;
+
   .wrapper {
-    @media (width < 670px) {
-      display: block;
-    }
-    @media (width < 670px) {
-      padding-block: calc(var(--spacing, 0.25rem)*0);
-    }
+    @apply max-xs:block
+      max-xs:py-0;
   }
 }
+
 .small {
-  width: calc(var(--spacing, 0.25rem)*10);
-  height: calc(var(--spacing, 0.25rem)*10);
-  @media (width >= 670px) {
-    width: calc(var(--spacing, 0.25rem)*8);
-    height: calc(var(--spacing, 0.25rem)*8);
-  }
+  @apply xs:size-8
+    size-10;
 }
+
 .medium {
-  width: calc(var(--spacing, 0.25rem)*10);
-  height: calc(var(--spacing, 0.25rem)*10);
-}
-@property --tw-border-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
+  @apply size-10;
 }

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

@@ -0,0 +1,22 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import Avatar from '#ui/Common/AvatarGroup/Avatar';
+
+type Story = StoryObj<typeof Avatar>;
+type Meta = MetaObj<typeof Avatar>;
+
+export const Default: Story = {
+  args: {
+    image: 'https://avatars.githubusercontent.com/ghost',
+    nickname: 'ghost',
+  },
+};
+
+export const NoSquare: Story = {
+  args: {
+    image: '/static/images/logo-hexagon-card.png',
+    nickname: 'SD',
+  },
+};
+
+export default { component: Avatar } as Meta;

package/Common/AvatarGroup/Avatar/index.tsx

@@ -0,0 +1,67 @@
+import * as RadixAvatar from '@radix-ui/react-avatar';
+import classNames from 'classnames';
+import type { HTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+
+import type { LinkLike } from '#ui/types';
+
+import styles from './index.module.css';
+
+export type AvatarProps = {
+  image?: string;
+  name?: string;
+  nickname: string;
+  fallback?: string;
+  size?: 'small' | 'medium';
+  url?: string;
+  as?: LinkLike | 'div';
+};
+
+const Avatar = forwardRef<
+  HTMLSpanElement,
+  HTMLAttributes<HTMLSpanElement> & AvatarProps
+>(
+  (
+    {
+      image,
+      nickname,
+      name,
+      fallback,
+      url,
+      size = 'small',
+      as: Component = 'a',
+      ...props
+    },
+    ref
+  ) => {
+    if (!url) Component = 'div';
+    return (
+      <RadixAvatar.Root
+        {...props}
+        ref={ref}
+        className={classNames(styles.avatar, styles[size], props.className)}
+      >
+        <Component
+          href={url || undefined}
+          target={url ? '_blank' : undefined}
+          className={styles.wrapper}
+        >
+          <RadixAvatar.Image
+            loading="lazy"
+            decoding="async"
+            src={image}
+            alt={name || nickname}
+            className={styles.item}
+          />
+          <RadixAvatar.Fallback
+            className={classNames(styles.item, styles[size])}
+          >
+            {fallback}
+          </RadixAvatar.Fallback>
+        </Component>
+      </RadixAvatar.Root>
+    );
+  }
+);
+
+export default Avatar;

package/Common/AvatarGroup/Overlay/index.module.css

@@ -1,38 +1,31 @@
-/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+@reference "../../../styles/index.css";
+
 .overlay {
-  display: flex;
-  min-width: calc(var(--spacing, 0.25rem)*56);
-  align-items: center;
-  gap: calc(var(--spacing, 0.25rem)*2);
-  padding: calc(var(--spacing, 0.25rem)*3);
+  @apply flex
+    min-w-56
+    items-center
+    gap-2
+    p-3;
 }
+
 .user {
-  flex-grow: 1;
+  @apply grow;
 }
+
 .name {
-  --tw-font-weight: var(--font-weight-semibold, 600);
-  font-weight: var(--font-weight-semibold, 600);
-  color: var(--color-neutral-900, #2c3437);
-  &:where([data-theme=dark], [data-theme=dark] *) {
-    color: var(--color-neutral-300, #d9e1e4);
-  }
+  @apply font-semibold
+    text-neutral-900
+    dark:text-neutral-300;
 }
+
 .nickname {
-  --tw-font-weight: var(--font-weight-medium, 500);
-  font-weight: var(--font-weight-medium, 500);
-  color: var(--color-neutral-700, #6e7b83);
-  &:where([data-theme=dark], [data-theme=dark] *) {
-    color: var(--color-neutral-500, #b1bcc2);
-  }
+  @apply font-medium
+    text-neutral-700
+    dark:text-neutral-500;
 }
+
 .arrow {
-  width: calc(var(--spacing, 0.25rem)*3);
-  fill: var(--color-neutral-600, #929fa5);
-  &:where([data-theme=dark], [data-theme=dark] *) {
-    fill: var(--color-white, #fff);
-  }
-}
-@property --tw-font-weight {
-  syntax: "*";
-  inherits: false;
+  @apply w-3
+    fill-neutral-600
+    dark:fill-white;
 }

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

@@ -0,0 +1,33 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import AvatarOverlay from '#ui/Common/AvatarGroup/Overlay';
+
+type Story = StoryObj<typeof AvatarOverlay>;
+type Meta = MetaObj<typeof AvatarOverlay>;
+
+const author = {
+  image: 'https://avatars.githubusercontent.com/ghost',
+  name: 'Ghost User',
+  nickname: 'ghost',
+  fallback: 'GU',
+};
+
+export const Default: Story = {
+  args: author,
+};
+
+export const FallBack: Story = {
+  args: {
+    nickname: author.nickname,
+    fallback: author.fallback,
+  },
+};
+
+export const WithoutName: Story = {
+  args: {
+    ...author,
+    name: undefined,
+  },
+};
+
+export default { component: AvatarOverlay } as Meta;

package/Common/AvatarGroup/Overlay/index.tsx

@@ -0,0 +1,37 @@
+import { ArrowUpRightIcon } from '@heroicons/react/24/solid';
+import type { ComponentProps, FC } from 'react';
+
+import Avatar from '#ui/Common/AvatarGroup/Avatar';
+
+import styles from './index.module.css';
+
+export type AvatarOverlayProps = ComponentProps<typeof Avatar> & {
+  url?: string;
+};
+
+const AvatarOverlay: FC<AvatarOverlayProps> = ({
+  image,
+  name,
+  nickname,
+  fallback,
+  url,
+  as: Component = 'a',
+}) => (
+  <Component className={styles.overlay} href={url} target="_blank">
+    <Avatar
+      image={image}
+      name={name}
+      nickname={nickname}
+      fallback={fallback}
+      size="medium"
+    />
+
+    <div className={styles.user}>
+      {name && <div className={styles.name}>{name}</div>}
+      {nickname && <div className={styles.nickname}>{nickname}</div>}
+    </div>
+    <ArrowUpRightIcon className={styles.arrow} />
+  </Component>
+);
+
+export default AvatarOverlay;

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

@@ -0,0 +1,55 @@
+import { describe, it } from 'node:test';
+import assert from 'node:assert/strict';
+
+import { render, fireEvent } from '@testing-library/react';
+
+import AvatarGroup from '../index';
+
+const names = [
+  'ovflowd',
+  'bmuenzenmeyer',
+  'AugustinMauroy',
+  'HinataKah0',
+  'Harkunwar',
+  'rodion-arr',
+  'avivkeller',
+  'mikeesto',
+  'bnb',
+  'benhalverson',
+  'aymen94',
+  'shanpriyan',
+  'Wai-Dung',
+  'manishprivet',
+  'araujogui',
+];
+
+const avatars = names.map(name => ({
+  image: `https://avatars.githubusercontent.com/${name}`,
+  nickname: name,
+}));
+
+const limit = 2;
+const remaining = names.length - limit;
+
+describe('AvatarGroup', () => {
+  it('renders the AvatarGroup component properly', () => {
+    const { getByText } = render(
+      <AvatarGroup avatars={avatars} limit={limit} />
+    );
+
+    const showMoreButton = getByText(`+${remaining}`);
+    assert.ok(showMoreButton.ownerDocument);
+  });
+
+  it('displays the rest of the avatars when "show more" button is clicked', () => {
+    const { getByText } = render(
+      <AvatarGroup avatars={avatars} limit={limit} />
+    );
+
+    const showMoreButton = getByText(`+${remaining}`);
+    fireEvent.click(showMoreButton);
+
+    const hideMoreButton = getByText(`-${remaining}`);
+    assert.ok(hideMoreButton.ownerDocument);
+  });
+});

package/Common/AvatarGroup/index.module.css

@@ -1,22 +1,21 @@
-/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+@reference "../../styles/index.css";
+
 .avatarGroup {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
+  @apply flex
+    flex-wrap
+    items-center;
 }
+
 .small {
   > span {
-    margin-left: calc(var(--spacing, 0.25rem)*-2);
-    &:first-child {
-      margin-left: calc(var(--spacing, 0.25rem)*0);
-    }
+    @apply -ml-2
+      first:ml-0;
   }
 }
+
 .medium {
   > span {
-    margin-left: calc(var(--spacing, 0.25rem)*-2.5);
-    &:first-child {
-      margin-left: calc(var(--spacing, 0.25rem)*0);
-    }
+    @apply -ml-2.5
+      first:ml-0;
   }
 }

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;