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

package/eslint.config.js

@@ -0,0 +1,61 @@
+import { flatConfigs } from 'eslint-plugin-import-x';
+import react from 'eslint-plugin-react';
+import storybook from 'eslint-plugin-storybook';
+import tseslint from 'typescript-eslint';
+
+import baseConfig from '../../eslint.config.js';
+
+export default tseslint.config(
+  ...baseConfig,
+  {
+    extends: [
+      react.configs.flat['jsx-runtime'],
+      ...tseslint.configs.recommended,
+      flatConfigs.typescript,
+    ],
+    files: ['**/*.{js,mjs,ts,tsx}'],
+    rules: {
+      '@typescript-eslint/array-type': ['error', { default: 'generic' }],
+      '@typescript-eslint/consistent-type-imports': 'error',
+      '@typescript-eslint/no-require-imports': 'off',
+    },
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+  },
+  {
+    files: ['**/*.{tsx}'],
+    rules: {
+      '@typescript-eslint/consistent-type-definitions': ['error', 'type'],
+      'react/no-unescaped-entities': 'off',
+      'react/function-component-definition': [
+        'error',
+        {
+          namedComponents: 'arrow-function',
+          unnamedComponents: 'arrow-function',
+        },
+      ],
+      'no-restricted-syntax': [
+        'error',
+        {
+          selector:
+            "ImportDeclaration[source.value='react'][specifiers.0.type='ImportDefaultSpecifier']",
+          message:
+            'Default React import not allowed since we use the TypeScript jsx-transform. If you need a global type that collides with a React named export (such as `MouseEvent`), try using `globalThis.MouseHandler`',
+        },
+        {
+          selector:
+            "ImportDeclaration[source.value='react'] :matches(ImportNamespaceSpecifier)",
+          message:
+            'Named * React import is not allowed. Please import what you need from React with Named Imports',
+        },
+      ],
+    },
+  },
+  {
+    files: ['components/**/*.stories.tsx'],
+    extends: [...storybook.configs['flat/recommended']],
+  }
+);

package/package.json

@@ -1,6 +1,15 @@
 {
   "name": "@node-core/ui-components",
   "type": "module",
+  "exports": {
+    "./*": [
+      "./src/*",
+      "./src/*.tsx",
+      "./src/*/index.tsx",
+      "./src/*.ts",
+      "./src/*/index.ts"
+    ]
+  },
   "dependencies": {
     "@heroicons/react": "^2.2.0",
     "@radix-ui/react-avatar": "^1.1.10",
@@ -12,22 +21,52 @@
     "@radix-ui/react-tabs": "~1.1.12",
     "@radix-ui/react-toast": "~1.2.14",
     "@radix-ui/react-tooltip": "~1.2.7",
+    "@tailwindcss/postcss": "~4.1.11",
     "@vcarl/remark-headings": "~0.1.0",
-    "classnames": "~2.5.1"
+    "classnames": "~2.5.1",
+    "postcss-calc": "^10.1.1",
+    "tailwindcss": "~4.0.17"
+  },
+  "devDependencies": {
+    "@storybook/addon-styling-webpack": "^2.0.0",
+    "@storybook/addon-themes": "^9.0.15",
+    "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
+    "@storybook/react": "^9.0.15",
+    "@storybook/react-webpack5": "^9.0.15",
+    "@testing-library/user-event": "~14.6.1",
+    "@types/node": "22.15.3",
+    "@types/react": "^19.1.8",
+    "cross-env": "^7.0.3",
+    "css-loader": "~7.1.2",
+    "eslint-plugin-react": "~7.37.4",
+    "eslint-plugin-storybook": "~9.0.3",
+    "global-jsdom": "^26.0.0",
+    "postcss-loader": "~8.1.1",
+    "react": "^19.1.0",
+    "storybook": "^9.0.15",
+    "style-loader": "~4.0.0",
+    "stylelint": "^16.21.1",
+    "stylelint-config-standard": "^38.0.0",
+    "stylelint-order": "7.0.0",
+    "stylelint-selector-bem-pattern": "4.0.1",
+    "tsx": "^4.20.3",
+    "typescript": "~5.8.2",
+    "typescript-eslint": "~8.35.1"
   },
   "imports": {
     "#ui/*": [
-      "./*"
+      "./src/*",
+      "./src/*.tsx",
+      "./src/*/index.tsx",
+      "./src/*.ts",
+      "./src/*/index.ts"
     ]
   },
   "engines": {
     "node": ">=20"
   },
-  "version": "1.0.1-a459447336d99556960d6f9e1c997327b29e4974",
+  "version": "1.0.1-ab0ba1dcb1d91392c44e91b1e74e9f565e460543",
   "scripts": {
-    "compile:ts": "tsc",
-    "compile:css": "postcss --dir dist --base src \"src/**/*.module.css\" src/styles/index.css",
-    "compile": "node --run compile:ts && node --run compile:css",
     "lint": "turbo run lint:js lint:css",
     "lint:css": "stylelint \"**/*.css\" --allow-empty-input --cache --cache-strategy=content --cache-location=.stylelintcache",
     "lint:fix": "node --run lint -- -- --fix",

package/src/Common/AlertBox/index.module.css

@@ -0,0 +1,83 @@
+@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;
+    }
+  }
+
+  code {
+    /* Ignore the styles from `markdown.css` */
+    all: unset;
+
+    @apply font-ibm-plex-mono;
+  }
+}

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

@@ -0,0 +1,96 @@
+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>;
+
+const withMain = (args: React.ComponentProps<typeof AlertBox>) => (
+  <main>
+    <AlertBox {...args} />
+  </main>
+);
+
+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 InMarkdown: Story = {
+  args: {
+    level: 'danger',
+    title: '0',
+    children: (
+      <>
+        In a markdown component, <code>Code renders correctly,</code>{' '}
+        <a href="#">
+          <code>even when in a link</code>
+        </a>
+      </>
+    ),
+    size: 'default',
+  },
+  render: withMain,
+};
+
+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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/Common/AvatarGroup/index.module.css

@@ -0,0 +1,21 @@
+@reference "../../styles/index.css";
+
+.avatarGroup {
+  @apply flex
+    flex-wrap
+    items-center;
+}
+
+.small {
+  > span {
+    @apply -ml-2
+      first:ml-0;
+  }
+}
+
+.medium {
+  > span {
+    @apply -ml-2.5
+      first:ml-0;
+  }
+}