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

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

@@ -1,53 +0,0 @@
-@reference "../../styles/index.css";
-
-.languageDropdown {
-  @apply h-9
-    w-9
-    rounded-md
-    p-2
-    text-neutral-700
-    motion-safe:transition-colors
-    dark:text-neutral-300;
-
-  &:hover {
-    @apply bg-neutral-100
-      dark:bg-neutral-900;
-  }
-}
-
-.dropDownContent {
-  @apply max-h-80
-    w-48
-    overflow-hidden
-    rounded-sm
-    border
-    border-neutral-200
-    bg-white
-    shadow-lg
-    dark:border-neutral-900
-    dark:bg-neutral-950;
-
-  > div {
-    @apply max-h-80
-      w-48
-      overflow-y-auto;
-  }
-}
-
-.dropDownItem {
-  @apply outline-hidden
-    cursor-pointer
-    px-2.5
-    py-1.5
-    text-sm
-    font-medium
-    text-neutral-800
-    data-[highlighted]:bg-green-600
-    data-[highlighted]:text-white
-    dark:text-white;
-}
-
-.currentDropDown {
-  @apply bg-green-600
-    text-white;
-}

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

@@ -1,19 +0,0 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
-
-import LanguageDropDown from '#ui/Common/LanguageDropDown';
-
-type Story = StoryObj<typeof LanguageDropDown>;
-type Meta = MetaObj<typeof LanguageDropDown>;
-
-export const Default: Story = {
-  args: {
-    availableLanguages: [
-      { name: 'English', code: 'en', localName: 'English' },
-      { name: 'French', code: 'fr', localName: 'Français' },
-      { name: 'Spanish', code: 'es', localName: 'Español' },
-    ],
-    currentLanguage: 'en',
-  },
-};
-
-export default { component: LanguageDropDown } as Meta;

package/src/Common/LanguageDropDown/index.tsx

@@ -1,56 +0,0 @@
-import { LanguageIcon } from '@heroicons/react/24/outline';
-import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
-import classNames from 'classnames';
-import type { FC } from 'react';
-
-import type { SimpleLocaleConfig } from '#ui/types';
-
-import styles from './index.module.css';
-
-type LanguageDropDownProps = {
-  onChange?: (newLocale: SimpleLocaleConfig) => void;
-  currentLanguage: string;
-  availableLanguages: Array<SimpleLocaleConfig>;
-  ariaLabel: string;
-};
-
-const LanguageDropdown: FC<LanguageDropDownProps> = ({
-  onChange = () => {},
-  currentLanguage,
-  availableLanguages,
-  ariaLabel,
-}) => {
-  return (
-    <DropdownMenu.Root>
-      <DropdownMenu.Trigger asChild>
-        <button className={styles.languageDropdown} aria-label={ariaLabel}>
-          <LanguageIcon height="20" />
-        </button>
-      </DropdownMenu.Trigger>
-
-      <DropdownMenu.Portal>
-        <DropdownMenu.Content
-          align="start"
-          className={styles.dropDownContent}
-          sideOffset={5}
-        >
-          <div>
-            {availableLanguages.map(({ name, code, localName }) => (
-              <DropdownMenu.Item
-                key={code}
-                onClick={() => onChange({ name, code, localName })}
-                className={classNames(styles.dropDownItem, {
-                  [styles.currentDropDown]: code === currentLanguage,
-                })}
-              >
-                {localName}
-              </DropdownMenu.Item>
-            ))}
-          </div>
-        </DropdownMenu.Content>
-      </DropdownMenu.Portal>
-    </DropdownMenu.Root>
-  );
-};
-
-export default LanguageDropdown;

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

@@ -1,79 +0,0 @@
-@reference "../../styles/index.css";
-
-.overlay {
-  @apply fixed
-    inset-0
-    flex
-    justify-center
-    bg-white/40
-    backdrop-blur-[2px]
-    dark:bg-neutral-950/40;
-
-  .content {
-    @apply xs:p-6
-      relative
-      m-4
-      inline-flex
-      w-full
-      max-w-3xl
-      flex-col
-      gap-2
-      overflow-y-auto
-      rounded
-      border
-      border-neutral-200
-      bg-white
-      p-8
-      focus:outline-none
-      sm:my-20
-      xl:p-12
-      dark:bg-neutral-950;
-  }
-
-  .close {
-    @apply absolute
-      right-3
-      top-3
-      block
-      size-7
-      cursor-pointer
-      rounded-sm
-      p-1
-      hover:bg-neutral-100
-      focus:outline-none
-      focus:ring-2
-      focus:ring-neutral-200
-      dark:hover:bg-neutral-900
-      dark:focus:ring-neutral-900;
-  }
-
-  .title {
-    @apply text-3xl
-      font-semibold
-      text-neutral-900
-      dark:text-white;
-  }
-
-  .description {
-    @apply font-regular
-      mb-2
-      text-lg
-      text-neutral-800
-      dark:text-neutral-200;
-  }
-
-  .wrapper {
-    @apply flex
-      flex-col
-      gap-4;
-
-    pre {
-      @apply overflow-auto;
-    }
-
-    code,
-    a {
-      @apply break-words;
-    }
-  }
-}

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

@@ -1,34 +0,0 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
-
-import { Modal, Title, Description, Content } from '#ui/Common/Modal';
-
-type Story = StoryObj<typeof Modal>;
-type Meta = MetaObj<typeof Modal>;
-
-export const Default: Story = {
-  args: {
-    open: true,
-    children: (
-      <Content>
-        <Title>Node.js Versions Information</Title>
-        <Description>
-          Get all information about Node.js versions and their changes.
-        </Description>
-        <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto
-          atque sint doloremque, sapiente recusandae debitis libero nostrum
-          repudiandae explicabo suscipit ipsam eos dolorem, necessitatibus odit
-          quos delectus natus sunt sit!
-        </p>
-        <p>
-          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum
-          asperiores corporis tempore neque, officiis fuga est facere deserunt
-          amet minus sit architecto blanditiis hic sed odit cumque numquam
-          dignissimos delectus.
-        </p>
-      </Content>
-    ),
-  },
-};
-
-export default { component: Modal } as Meta;

package/src/Common/Modal/index.tsx

@@ -1,50 +0,0 @@
-'use client';
-
-import { XMarkIcon } from '@heroicons/react/24/outline';
-import * as Dialog from '@radix-ui/react-dialog';
-import type { FC, PropsWithChildren } from 'react';
-
-import styles from './index.module.css';
-
-type ModalProps = PropsWithChildren<{
-  open?: boolean;
-  onOpenChange?: (open: boolean) => void;
-}>;
-
-const Modal: FC<ModalProps> = ({
-  children,
-  open = false,
-  onOpenChange = () => {},
-}) => (
-  <Dialog.Root open={open} onOpenChange={onOpenChange}>
-    <Dialog.Portal>
-      <Dialog.Overlay className={styles.overlay}>
-        <Dialog.Content className={styles.content}>
-          <Dialog.Trigger className={styles.close}>
-            <XMarkIcon />
-          </Dialog.Trigger>
-
-          {children}
-
-          <Dialog.Close />
-        </Dialog.Content>
-      </Dialog.Overlay>
-    </Dialog.Portal>
-  </Dialog.Root>
-);
-
-const Title = ({ children }: PropsWithChildren) => (
-  <Dialog.Title className={styles.title}>{children}</Dialog.Title>
-);
-
-const Description = ({ children }: PropsWithChildren) => (
-  <Dialog.Description className={styles.description}>
-    {children}
-  </Dialog.Description>
-);
-
-const Content = ({ children }: PropsWithChildren) => (
-  <main className={styles.wrapper}>{children}</main>
-);
-
-export { Modal, Title, Description, Content };

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

@@ -1,6 +0,0 @@
-@reference "../../styles/index.css";
-
-.nodejsLogo {
-  @apply h-6
-    w-20;
-}

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

@@ -1,14 +0,0 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
-
-import NodejsLogo from '#ui/Common/NodejsLogo';
-
-type Story = StoryObj<typeof NodejsLogo>;
-type Meta = MetaObj<typeof NodejsLogo>;
-
-export const Default: Story = {};
-
-export const WithPride: Story = {
-  args: { variant: 'pride' },
-};
-
-export default { component: NodejsLogo } as Meta;

package/src/Common/NodejsLogo/index.tsx

@@ -1,26 +0,0 @@
-import type { FC } from 'react';
-
-import NodejsIcon from '#ui/Icons/Logos/Nodejs';
-import type { LogoVariant } from '#ui/types';
-
-import style from './index.module.css';
-
-type NodejsLogoProps = {
-  variant?: LogoVariant;
-  ariaLabel?: string;
-};
-
-const NodejsLogo: FC<NodejsLogoProps> = ({
-  variant = 'default',
-  ariaLabel,
-}) => {
-  return (
-    <NodejsIcon
-      variant={variant}
-      className={style.nodejsLogo}
-      ariaLabel={ariaLabel}
-    />
-  );
-};
-
-export default NodejsLogo;

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

@@ -1,20 +0,0 @@
-@reference "../../styles/index.css";
-
-.root {
-  @apply m-6
-    rounded-sm
-    border
-    border-neutral-200
-    bg-white
-    px-4
-    py-3
-    shadow-lg
-    dark:border-neutral-800
-    dark:bg-neutral-900;
-}
-
-.message {
-  @apply font-medium
-    text-green-600
-    dark:text-white;
-}

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

@@ -1,36 +0,0 @@
-import { CodeBracketIcon } from '@heroicons/react/24/solid';
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
-
-import Notification from '#ui/Common/Notification';
-
-type Story = StoryObj<typeof Notification>;
-type Meta = MetaObj<typeof Notification>;
-
-export const Default: Story = {
-  args: {
-    open: true,
-    duration: 5000,
-    children: 'Copied to clipboard!',
-  },
-};
-
-export const TimedNotification: Story = {
-  args: {
-    duration: 5000,
-    children: 'Copied to clipboard!',
-  },
-};
-
-export const WithJSX: Story = {
-  args: {
-    open: true,
-    children: (
-      <div className="flex items-center gap-3">
-        <CodeBracketIcon className="h-4 w-4" />
-        Copied to clipboard!
-      </div>
-    ),
-  },
-};
-
-export default { component: Notification } as Meta;

package/src/Common/Notification/index.tsx

@@ -1,34 +0,0 @@
-import * as ToastPrimitive from '@radix-ui/react-toast';
-import classNames from 'classnames';
-import type { FC } from 'react';
-
-import styles from './index.module.css';
-
-type NotificationProps = {
-  open?: boolean;
-  duration?: number;
-  onChange?: (value: boolean) => void;
-  children?: React.ReactNode;
-  className?: string;
-};
-
-const Notification: FC<NotificationProps> = ({
-  open,
-  duration = 5000,
-  onChange,
-  children,
-  className,
-}: NotificationProps) => (
-  <ToastPrimitive.Root
-    open={open}
-    duration={duration}
-    onOpenChange={onChange}
-    className={classNames(styles.root, className)}
-  >
-    <ToastPrimitive.Title className={styles.message}>
-      {children}
-    </ToastPrimitive.Title>
-  </ToastPrimitive.Root>
-);
-
-export default Notification;

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

@@ -1,79 +0,0 @@
-@reference "../../styles/index.css";
-
-.root {
-  @apply after:bg-gradient-radial
-    @container/preview
-    relative
-    flex
-    aspect-[1.90/1]
-    items-center
-    rounded-sm
-    border
-    border-neutral-900
-    bg-neutral-950
-    after:absolute
-    after:inset-0
-    after:m-auto
-    after:aspect-square
-    after:w-1/3
-    after:rounded-full
-    after:blur-2xl
-    after:content-[''];
-
-  &.announcements {
-    @apply after:from-green-700/90;
-  }
-
-  &.release {
-    @apply after:from-info-600/90;
-  }
-
-  &.vulnerability {
-    @apply after:from-warning-600/90;
-  }
-
-  .container {
-    @apply @sm/preview:text-base
-      @md/preview:gap-6
-      @md/preview:text-lg
-      @lg/preview:gap-8
-      @lg/preview:text-xl
-      @xl/preview:gap-12
-      @xl/preview:text-2xl
-      @2xl/preview:text-3xl
-      z-10
-      mx-auto
-      flex
-      w-2/3
-      max-w-xl
-      flex-col
-      gap-4
-      text-center
-      text-xs
-      font-semibold
-      text-white;
-
-    .hexagon {
-      @apply @md/preview:h-3/5
-        @md/preview:w-3/5
-        @lg/preview:h-2/3
-        @lg/preview:w-2/3
-        @xl/preview:h-3/5
-        @xl/preview:w-3/5
-        @2xl/preview:h-2/3
-        @2xl/preview:w-2/3
-        absolute
-        inset-0
-        m-auto
-        size-full;
-    }
-
-    .logo {
-      @apply @md/preview:size-14
-        @lg/preview:size-16
-        @xl/preview:size-20
-        mx-auto
-        size-6;
-    }
-  }
-}

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

@@ -1,44 +0,0 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
-
-import Preview from '#ui/Common/Preview';
-
-type Story = StoryObj<typeof Preview>;
-type Meta = MetaObj<typeof Preview>;
-
-export const Announcement: Story = {
-  args: {
-    type: 'announcements',
-    title:
-      'Changing the End-of-Life Date for Node.js 16 to September 11th, 2023',
-  },
-};
-
-export const Release: Story = {
-  args: {
-    type: 'release',
-    title: 'Node v20.5.0 (Current)',
-  },
-};
-
-export const Vulnerability: Story = {
-  args: {
-    type: 'vulnerability',
-    title: 'OpenSSL update assessment, and Node.js project plans',
-  },
-};
-
-export const CustomSize: Story = {
-  args: {
-    title:
-      'Changing the End-of-Life Date for Node.js 16 to September 11th, 2023',
-  },
-  decorators: [
-    Story => (
-      <div className="w-[600px]">
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export default { component: Preview } as Meta;

package/src/Common/Preview/index.tsx

@@ -1,25 +0,0 @@
-import classNames from 'classnames';
-import type { FC } from 'react';
-
-import HexagonGrid from '#ui/Icons/HexagonGrid';
-import JsWhiteIcon from '#ui/Icons/Logos/JsWhite';
-import type { BlogPreviewType } from '#ui/types';
-
-import styles from './index.module.css';
-
-type PreviewProps = {
-  title: string;
-  type?: BlogPreviewType;
-};
-
-const Preview: FC<PreviewProps> = ({ type = 'announcements', title }) => (
-  <div className={classNames(styles.root, styles[type])}>
-    <div className={styles.container} aria-hidden={true}>
-      <HexagonGrid className={styles.hexagon} />
-      <JsWhiteIcon className={styles.logo} />
-      {title}
-    </div>
-  </div>
-);
-
-export default Preview;

package/src/Common/Select/__tests__/index.test.jsx

@@ -1,67 +0,0 @@
-import { render } from '@testing-library/react';
-import { describe, it } from 'node:test';
-import assert from 'node:assert/strict';
-import Select from '..';
-
-const noop = () => {};
-
-describe('Select', () => {
-  const values = ['Option 1', 'Option 2', 'Option 3'];
-  const defaultValue = 'Option 1';
-  const placeholder = 'Select an option';
-  const dropdownLabel = 'Dropdown label';
-  const label = 'Option label';
-
-  global.ResizeObserver = class {
-    observe = noop;
-    unobserve = noop;
-    disconnect = noop;
-  };
-
-  it('renders the label when provided', () => {
-    const { getByLabelText } = render(
-      <Select
-        values={values}
-        defaultValue={defaultValue}
-        placeholder={placeholder}
-        dropdownLabel={dropdownLabel}
-        label={label}
-        onChange={noop}
-      />
-    );
-
-    const element = getByLabelText(label);
-    assert.ok(element.ownerDocument);
-  });
-
-  it('renders the default value when provided', () => {
-    const { getByText } = render(
-      <Select
-        values={values}
-        defaultValue={defaultValue}
-        placeholder={placeholder}
-        dropdownLabel={dropdownLabel}
-        label={label}
-        onChange={noop}
-      />
-    );
-
-    const element = getByText(defaultValue);
-    assert.ok(element.ownerDocument);
-  });
-
-  it('renders the placeholder when default value is not provided', () => {
-    const { getByText } = render(
-      <Select
-        values={values}
-        placeholder={placeholder}
-        dropdownLabel={dropdownLabel}
-        label={label}
-        onChange={noop}
-      />
-    );
-
-    const element = getByText(placeholder);
-    assert.ok(element.ownerDocument);
-  });
-});