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

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

@@ -0,0 +1,77 @@
+@reference "../../styles/index.css";
+
+.wrapper {
+  @apply flex
+    w-fit
+    items-center
+    rounded-full
+    border
+    py-1
+    pl-1
+    pr-2.5
+    text-sm
+    font-medium;
+
+  .icon {
+    @apply size-4;
+  }
+
+  .badge {
+    @apply mr-2;
+  }
+
+  .message {
+    @apply mr-1;
+  }
+
+  &.default {
+    @apply border-green-200
+      bg-green-100
+      dark:border-green-700
+      dark:bg-neutral-900;
+
+    .icon {
+      @apply text-green-500
+        dark:text-green-300;
+    }
+
+    .message {
+      @apply text-green-700
+        dark:text-green-300;
+    }
+  }
+
+  &.error {
+    @apply border-danger-200
+      bg-danger-100
+      dark:border-danger-700
+      dark:bg-neutral-900;
+
+    .icon {
+      @apply text-danger-500
+        dark:text-danger-300;
+    }
+
+    .message {
+      @apply text-danger-700
+        dark:text-danger-300;
+    }
+  }
+
+  &.warning {
+    @apply border-warning-200
+      bg-warning-100
+      dark:border-warning-700
+      dark:bg-neutral-900;
+
+    .icon {
+      @apply text-warning-500
+        dark:text-warning-300;
+    }
+
+    .message {
+      @apply text-warning-700
+        dark:text-warning-300;
+    }
+  }
+}

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

@@ -0,0 +1,42 @@
+@reference "../../styles/index.css";
+
+.banner {
+  @apply flex
+    w-full
+    flex-row
+    items-center
+    justify-center
+    gap-2
+    px-8
+    py-3
+    text-sm;
+
+  &,
+  a {
+    @apply text-white
+      dark:text-white;
+  }
+
+  a {
+    @apply w-fit
+      underline
+      decoration-white/50;
+  }
+
+  svg {
+    @apply size-4
+      text-white/50;
+  }
+}
+
+.default {
+  @apply bg-green-600;
+}
+
+.error {
+  @apply bg-danger-600;
+}
+
+.warning {
+  @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;

package/Common/Banner/index.tsx

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

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

@@ -0,0 +1,52 @@
+import { describe, it } from 'node:test';
+import assert from 'node:assert/strict';
+
+import { render, screen } from '@testing-library/react';
+
+import ActiveLink from '..';
+
+describe('ActiveLink', () => {
+  it('renders as localized link', async () => {
+    render(
+      <ActiveLink className="link" activeClassName="active" href="/link">
+        Link
+      </ActiveLink>
+    );
+
+    assert.equal(
+      (await screen.findByText('Link')).getAttribute('href'),
+      '/link'
+    );
+  });
+
+  it('ignores active class when href not matches location.href', async () => {
+    render(
+      <ActiveLink className="link" activeClassName="active" href="/not-link">
+        Link
+      </ActiveLink>
+    );
+
+    assert.equal(
+      (await screen.findByText('Link')).getAttribute('class'),
+      'link'
+    );
+  });
+
+  it('sets active class when href matches location.href', async () => {
+    render(
+      <ActiveLink
+        className="link"
+        activeClassName="active"
+        href="/link"
+        pathname="/link"
+      >
+        Link
+      </ActiveLink>
+    );
+
+    assert.equal(
+      (await screen.findByText('Link')).getAttribute('class'),
+      'link active'
+    );
+  });
+});

package/Common/BaseActiveLink/index.tsx

@@ -0,0 +1,34 @@
+import classNames from 'classnames';
+import type { ComponentProps, FC } from 'react';
+
+import type { LinkLike } from '#ui/types';
+
+export type ActiveLocalizedLinkProps = ComponentProps<LinkLike> & {
+  activeClassName?: string;
+  allowSubPath?: boolean;
+  pathname?: string;
+  as?: LinkLike;
+};
+
+const BaseActiveLink: FC<ActiveLocalizedLinkProps> = ({
+  activeClassName = 'active',
+  allowSubPath = false,
+  className,
+  href = '',
+  pathname = '/',
+  as: Component = 'a',
+  ...props
+}) => {
+  const finalClassName = classNames(className, {
+    [activeClassName]: allowSubPath
+      ? // When using allowSubPath we want only to check if
+        // the current pathname starts with the utmost upper level
+        // of an href (e.g. /docs/...)
+        pathname.startsWith(`/${href.toString().split('/')[1]}`)
+      : href.toString() === pathname,
+  });
+
+  return <Component className={finalClassName} href={href} {...props} />;
+};
+
+export default BaseActiveLink;

package/Common/BaseButton/index.module.css

@@ -0,0 +1,142 @@
+@reference "../../styles/index.css";
+
+.button {
+  @apply px-4.5
+    relative
+    inline-flex
+    items-center
+    justify-center
+    gap-2
+    py-2.5
+    text-center
+    font-semibold
+    motion-safe:transition-colors;
+
+  svg {
+    @apply size-5;
+  }
+
+  &[aria-disabled='true'] {
+    @apply cursor-not-allowed;
+  }
+
+  &.small {
+    @apply px-3
+      py-2
+      text-sm;
+  }
+
+  &.neutral {
+    @apply rounded-sm
+      bg-neutral-900
+      text-white
+      dark:text-neutral-200;
+
+    &:hover:not([aria-disabled='true']) {
+      @apply bg-neutral-800;
+    }
+
+    &[aria-disabled='true'] {
+      @apply bg-neutral-900
+        opacity-50;
+    }
+
+    &:focus {
+      @apply bg-neutral-800;
+    }
+  }
+
+  &.primary {
+    @apply shadow-xs
+      rounded-sm
+      border
+      border-green-600
+      bg-green-600
+      text-white;
+
+    &:hover:not([aria-disabled='true']) {
+      @apply border-green-700
+        bg-green-700
+        text-white;
+    }
+
+    &:focus {
+      @apply border-green-700
+        bg-green-700;
+    }
+
+    &[aria-disabled='true'] {
+      @apply bg-green-600
+        opacity-50;
+    }
+  }
+
+  &.secondary {
+    @apply rounded-lg
+      text-neutral-800
+      dark:text-neutral-200;
+
+    &:hover:not([aria-disabled='true']) {
+      @apply bg-neutral-100
+        text-neutral-800
+        dark:bg-neutral-900
+        dark:text-neutral-200;
+    }
+
+    &[aria-disabled='true'] {
+      @apply bg-transparent
+        opacity-50;
+    }
+
+    &:focus {
+      @apply bg-neutral-100
+        text-neutral-800
+        dark:bg-neutral-900
+        dark:text-neutral-200;
+    }
+  }
+
+  &.special {
+    @apply before:bg-gradient-glow-backdrop
+      shadow-xs
+      rounded-lg
+      border
+      border-green-600/30
+      bg-green-600/10
+      text-white
+      before:absolute
+      before:left-0
+      before:right-0
+      before:top-0
+      before:-z-10
+      before:mx-auto
+      before:h-full
+      before:w-full
+      before:opacity-30
+      before:content-['']
+      after:absolute
+      after:-top-px
+      after:left-0
+      after:right-0
+      after:mx-auto
+      after:h-px
+      after:w-2/5
+      after:bg-gradient-to-r
+      after:from-green-600/0
+      after:via-green-600
+      after:to-green-600/0
+      after:content-[''];
+
+    &[aria-disabled='true'] {
+      @apply opacity-50;
+    }
+
+    &:hover:not([aria-disabled='true']) {
+      @apply bg-green-600/20;
+    }
+
+    &:focus {
+      @apply bg-green-600/20;
+    }
+  }
+}

package/Common/BaseButton/index.stories.tsx

@@ -0,0 +1,67 @@
+import { ArrowRightIcon } from '@heroicons/react/24/solid';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import BaseButton from '#ui/Common/BaseButton';
+
+type Story = StoryObj<typeof BaseButton>;
+type Meta = MetaObj<typeof BaseButton>;
+
+export const Neutral: Story = {
+  args: {
+    kind: 'neutral',
+    children: 'Download Node (LTS)',
+    disabled: false,
+    size: 'default',
+  },
+};
+
+export const Primary: Story = {
+  args: {
+    kind: 'primary',
+    children: 'Download Node (LTS)',
+    disabled: false,
+    size: 'default',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    kind: 'secondary',
+    children: 'Download Node (LTS)',
+    disabled: false,
+    size: 'default',
+  },
+};
+
+export const Special: Story = {
+  args: {
+    kind: 'special',
+    children: 'Download Node (LTS)',
+    disabled: false,
+    size: 'default',
+  },
+};
+
+export const WithIcon: Story = {
+  args: {
+    kind: 'primary',
+    children: (
+      <>
+        Back to Home
+        <ArrowRightIcon />
+      </>
+    ),
+    disabled: false,
+    size: 'default',
+  },
+};
+
+export default {
+  component: BaseButton,
+  argTypes: {
+    size: {
+      options: ['default', 'small'],
+      control: { type: 'radio' },
+    },
+  },
+} as Meta;

package/Common/BaseButton/index.tsx

@@ -0,0 +1,59 @@
+import classNames from 'classnames';
+import type { FC, AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react';
+
+import type { LinkLike } from '#ui/types';
+
+import styles from './index.module.css';
+
+export type ButtonProps = (
+  | AnchorHTMLAttributes<HTMLAnchorElement>
+  | ButtonHTMLAttributes<HTMLButtonElement>
+) & {
+  kind?: 'neutral' | 'primary' | 'secondary' | 'special';
+  size?: 'default' | 'small';
+  disabled?: boolean;
+  as?: LinkLike;
+};
+
+const BaseButton: FC<ButtonProps> = ({
+  kind = 'primary',
+  size = 'default',
+  disabled = false,
+  className,
+  as: Component = 'a',
+  ...props
+}) => {
+  if ('href' in props && Component) {
+    return (
+      <Component
+        role="button"
+        href={disabled ? undefined : props.href}
+        aria-disabled={disabled}
+        className={classNames(
+          styles.button,
+          styles[kind],
+          styles[size],
+          className
+        )}
+        tabIndex={disabled ? -1 : 0}
+        {...props}
+      />
+    );
+  }
+
+  return (
+    <button
+      disabled={disabled}
+      className={classNames(
+        styles.button,
+        styles[kind],
+        styles[size],
+        className
+      )}
+      type="button"
+      {...(props as ButtonHTMLAttributes<HTMLButtonElement>)}
+    />
+  );
+};
+
+export default BaseButton;