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

package/types.js

@@ -0,0 +1 @@
+export {};

package/Common/AlertBox/index.stories.tsx

@@ -1,73 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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.stories.tsx

@@ -1,22 +0,0 @@
-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

@@ -1,67 +0,0 @@
-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.stories.tsx

@@ -1,33 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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.stories.tsx

@@ -1,56 +0,0 @@
-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

@@ -1,87 +0,0 @@
-'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.stories.tsx

@@ -1,38 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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.stories.tsx

@@ -1,35 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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.stories.tsx

@@ -1,29 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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;