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

package/Common/AlertBox/index.module.css

@@ -0,0 +1,76 @@
+@reference "../../styles/index.css";
+
+.alertBox {
+  @apply flex
+    flex-row
+    items-center
+    gap-2
+    rounded-sm
+    px-4
+    py-3
+    text-sm
+    text-white;
+
+  a {
+    @apply font-bold
+      text-white
+      underline
+      hover:text-white;
+
+    &:hover {
+      @apply no-underline;
+    }
+  }
+
+  &.small {
+    @apply gap-1
+      py-2
+      text-xs;
+
+    .title {
+      @apply px-1;
+    }
+  }
+
+  .title {
+    @apply rounded-xs
+      px-1.5;
+  }
+
+  svg {
+    @apply inline
+      size-5;
+  }
+
+  &.info {
+    @apply bg-info-600;
+
+    .title {
+      @apply bg-info-700;
+    }
+  }
+
+  &.success {
+    @apply bg-green-600;
+
+    .title {
+      @apply bg-green-700;
+    }
+  }
+
+  &.warning {
+    @apply bg-warning-600;
+
+    .title {
+      @apply bg-warning-700;
+    }
+  }
+
+  &.danger {
+    @apply bg-danger-600;
+
+    .title {
+      @apply bg-danger-700;
+    }
+  }
+}

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

@@ -0,0 +1,40 @@
+@reference "../../../styles/index.css";
+
+.item {
+  @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 {
+  @apply size-8;
+
+  .wrapper {
+    @apply max-xs:block
+      max-xs:py-0;
+  }
+}
+
+.small {
+  @apply xs:size-8
+    size-10;
+}
+
+.medium {
+  @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

@@ -0,0 +1,31 @@
+@reference "../../../styles/index.css";
+
+.overlay {
+  @apply flex
+    min-w-56
+    items-center
+    gap-2
+    p-3;
+}
+
+.user {
+  @apply grow;
+}
+
+.name {
+  @apply font-semibold
+    text-neutral-900
+    dark:text-neutral-300;
+}
+
+.nickname {
+  @apply font-medium
+    text-neutral-700
+    dark:text-neutral-500;
+}
+
+.arrow {
+  @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

@@ -0,0 +1,25 @@
+@reference "../../styles/index.css";
+
+.avatarGroup {
+  @apply flex
+    flex-wrap
+    items-center;
+
+  &:not(.expandable) {
+    > span {
+      @apply ml-0;
+    }
+  }
+}
+
+.small {
+  > span {
+    @apply -ml-2;
+  }
+}
+
+.medium {
+  > span {
+    @apply -ml-2.5;
+  }
+}

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,87 @@
+'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], {
+        [styles.expandable]: avatars.length > limit,
+      })}
+    >
+      {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

@@ -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;
+  }
+}