@node-core/ui-components 1.0.1-bc3f4a79ab5f54e7ed1ee525005e7e9f1030495c → 1.0.1-cc5c2626b0639fe2088a736f54169ea3e10ed325

package/Common/LanguageDropDown/index.module.css

@@ -1,151 +1,53 @@
-/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+@reference "../../styles/index.css";
+
 .languageDropdown {
-  height: calc(var(--spacing, 0.25rem)*9);
-  width: calc(var(--spacing, 0.25rem)*9);
-  border-radius: var(--radius-md, 0.375rem);
-  padding: calc(var(--spacing, 0.25rem)*2);
-  color: var(--color-neutral-700, #6e7b83);
-  @media (prefers-reduced-motion: no-preference) {
-    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
-    transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
-  }
-  &:where([data-theme=dark], [data-theme=dark] *) {
-    color: var(--color-neutral-300, #d9e1e4);
-  }
+  @apply h-9
+    w-9
+    rounded-md
+    p-2
+    text-neutral-700
+    motion-safe:transition-colors
+    dark:text-neutral-300;
+
   &:hover {
-    background-color: var(--color-neutral-100, #f6f7f9);
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      background-color: var(--color-neutral-900, #2c3437);
-    }
+    @apply bg-neutral-100
+      dark:bg-neutral-900;
   }
 }
+
 .dropDownContent {
-  max-height: calc(var(--spacing, 0.25rem)*80);
-  width: calc(var(--spacing, 0.25rem)*48);
-  overflow: hidden;
-  border-radius: var(--radius-sm, 0.25rem);
-  border-style: var(--tw-border-style);
-  border-width: 1px;
-  border-color: var(--color-neutral-200, #e9edf0);
-  background-color: var(--color-white, #fff);
-  --tw-shadow: 0px 4px 6px -2px var(--tw-shadow-color, color-mix(in srgb, #101828 3%, transparent)), 0px 12px 16px -4px var(--tw-shadow-color, color-mix(in srgb, #101828 8%, transparent));
-  @supports (color: color-mix(in lab, red, red)) {
-    --tw-shadow: 0px 4px 6px -2px var(--tw-shadow-color, color-mix(in oklab, var(--color-shadow, #101828) 3%, transparent)), 0px 12px 16px -4px var(--tw-shadow-color, color-mix(in oklab, var(--color-shadow, #101828) 8%, transparent));
-  }
-  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  &:where([data-theme=dark], [data-theme=dark] *) {
-    border-color: var(--color-neutral-900, #2c3437);
-  }
-  &:where([data-theme=dark], [data-theme=dark] *) {
-    background-color: var(--color-neutral-950, #0d121c);
-  }
+  @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 {
-    max-height: calc(var(--spacing, 0.25rem)*80);
-    width: calc(var(--spacing, 0.25rem)*48);
-    overflow-y: auto;
+    @apply max-h-80
+      w-48
+      overflow-y-auto;
   }
 }
+
 .dropDownItem {
-  cursor: pointer;
-  padding-inline: calc(var(--spacing, 0.25rem)*2.5);
-  padding-block: calc(var(--spacing, 0.25rem)*1.5);
-  font-size: var(--text-sm, 0.875rem);
-  line-height: var(--tw-leading, var(--text-sm--line-height, 1.42857));
-  --tw-font-weight: var(--font-weight-medium, 500);
-  font-weight: var(--font-weight-medium, 500);
-  color: var(--color-neutral-800, #556066);
-  --tw-outline-style: none;
-  outline-style: none;
-  @media (forced-colors: active) {
-    outline: 2px solid transparent;
-    outline-offset: 2px;
-  }
-  &[data-highlighted] {
-    background-color: var(--color-green-600, #417e38);
-  }
-  &[data-highlighted] {
-    color: var(--color-white, #fff);
-  }
-  &:where([data-theme=dark], [data-theme=dark] *) {
-    color: var(--color-white, #fff);
-  }
-}
+  @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 {
-  background-color: var(--color-green-600, #417e38);
-  color: var(--color-white, #fff);
-}
-@property --tw-border-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
-@property --tw-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-shadow-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-shadow-alpha {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 100%;
-}
-@property --tw-inset-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-inset-shadow-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-inset-shadow-alpha {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 100%;
-}
-@property --tw-ring-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-ring-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-inset-ring-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-inset-ring-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-ring-inset {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-ring-offset-width {
-  syntax: "<length>";
-  inherits: false;
-  initial-value: 0px;
-}
-@property --tw-ring-offset-color {
-  syntax: "*";
-  inherits: false;
-  initial-value: #fff;
-}
-@property --tw-ring-offset-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-font-weight {
-  syntax: "*";
-  inherits: false;
+  @apply bg-green-600
+    text-white;
 }

package/Common/LanguageDropDown/index.stories.tsx

@@ -0,0 +1,19 @@
+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/Common/LanguageDropDown/index.tsx

@@ -0,0 +1,56 @@
+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/Common/Modal/index.module.css

@@ -1,234 +1,79 @@
-/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+@reference "../../styles/index.css";
+
 .overlay {
-  position: fixed;
-  inset: calc(var(--spacing, 0.25rem)*0);
-  display: flex;
-  justify-content: center;
-  background-color: color-mix(in srgb, #fff 40%, transparent);
-  @supports (color: color-mix(in lab, red, red)) {
-    background-color: color-mix(in oklab, var(--color-white, #fff) 40%, transparent);
-  }
-  --tw-backdrop-blur: blur(2px);
-  -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
-  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
-  &:where([data-theme=dark], [data-theme=dark] *) {
-    background-color: color-mix(in srgb, #0d121c 40%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-neutral-950, #0d121c) 40%, transparent);
-    }
-  }
+  @apply fixed
+    inset-0
+    flex
+    justify-center
+    bg-white/40
+    backdrop-blur-[2px]
+    dark:bg-neutral-950/40;
+
   .content {
-    position: relative;
-    margin: calc(var(--spacing, 0.25rem)*4);
-    display: inline-flex;
-    width: 100%;
-    max-width: var(--container-3xl, 48rem);
-    flex-direction: column;
-    gap: calc(var(--spacing, 0.25rem)*2);
-    overflow-y: auto;
-    border-radius: 0.25rem;
-    border-style: var(--tw-border-style);
-    border-width: 1px;
-    border-color: var(--color-neutral-200, #e9edf0);
-    background-color: var(--color-white, #fff);
-    padding: calc(var(--spacing, 0.25rem)*8);
-    &:focus {
-      --tw-outline-style: none;
-      outline-style: none;
-    }
-    @media (width >= 670px) {
-      padding: calc(var(--spacing, 0.25rem)*6);
-    }
-    @media (width >= 40rem) {
-      margin-block: calc(var(--spacing, 0.25rem)*20);
-    }
-    @media (width >= 80rem) {
-      padding: calc(var(--spacing, 0.25rem)*12);
-    }
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      background-color: var(--color-neutral-950, #0d121c);
-    }
+    @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 {
-    position: absolute;
-    top: calc(var(--spacing, 0.25rem)*3);
-    right: calc(var(--spacing, 0.25rem)*3);
-    display: block;
-    width: calc(var(--spacing, 0.25rem)*7);
-    height: calc(var(--spacing, 0.25rem)*7);
-    cursor: pointer;
-    border-radius: var(--radius-sm, 0.25rem);
-    padding: calc(var(--spacing, 0.25rem)*1);
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-neutral-100, #f6f7f9);
-      }
-    }
-    &:focus {
-      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-    &:focus {
-      --tw-ring-color: var(--color-neutral-200, #e9edf0);
-    }
-    &:focus {
-      --tw-outline-style: none;
-      outline-style: none;
-    }
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      &:hover {
-        @media (hover: hover) {
-          background-color: var(--color-neutral-900, #2c3437);
-        }
-      }
-    }
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      &:focus {
-        --tw-ring-color: var(--color-neutral-900, #2c3437);
-      }
-    }
+    @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 {
-    font-size: var(--text-3xl, 1.875rem);
-    line-height: var(--tw-leading, var(--text-3xl--line-height, 1.2));
-    --tw-font-weight: var(--font-weight-semibold, 600);
-    font-weight: var(--font-weight-semibold, 600);
-    color: var(--color-neutral-900, #2c3437);
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      color: var(--color-white, #fff);
-    }
+    @apply text-3xl
+      font-semibold
+      text-neutral-900
+      dark:text-white;
   }
+
   .description {
-    margin-bottom: calc(var(--spacing, 0.25rem)*2);
-    font-size: var(--text-lg, 1.125rem);
-    line-height: var(--tw-leading, var(--text-lg--line-height, 1.55556));
-    --tw-font-weight: var(--font-weight-regular, 400);
-    font-weight: var(--font-weight-regular, 400);
-    color: var(--color-neutral-800, #556066);
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      color: var(--color-neutral-200, #e9edf0);
-    }
+    @apply font-regular
+      mb-2
+      text-lg
+      text-neutral-800
+      dark:text-neutral-200;
   }
+
   .wrapper {
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--spacing, 0.25rem)*4);
+    @apply flex
+      flex-col
+      gap-4;
+
     pre {
-      overflow: auto;
+      @apply overflow-auto;
     }
+
     code,
     a {
-      overflow-wrap: break-word;
+      @apply break-words;
     }
   }
 }
-@property --tw-backdrop-blur {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-brightness {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-contrast {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-grayscale {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-hue-rotate {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-invert {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-opacity {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-saturate {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-sepia {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-border-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
-@property --tw-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-shadow-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-shadow-alpha {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 100%;
-}
-@property --tw-inset-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-inset-shadow-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-inset-shadow-alpha {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 100%;
-}
-@property --tw-ring-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-ring-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-inset-ring-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-inset-ring-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-ring-inset {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-ring-offset-width {
-  syntax: "<length>";
-  inherits: false;
-  initial-value: 0px;
-}
-@property --tw-ring-offset-color {
-  syntax: "*";
-  inherits: false;
-  initial-value: #fff;
-}
-@property --tw-ring-offset-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-font-weight {
-  syntax: "*";
-  inherits: false;
-}

package/Common/Modal/index.stories.tsx

@@ -0,0 +1,34 @@
+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/Common/Modal/index.tsx

@@ -0,0 +1,50 @@
+'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/Common/NodejsLogo/index.module.css

@@ -1,5 +1,6 @@
-/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+@reference "../../styles/index.css";
+
 .nodejsLogo {
-  height: calc(var(--spacing, 0.25rem)*6);
-  width: calc(var(--spacing, 0.25rem)*20);
+  @apply h-6
+    w-20;
 }

package/Common/NodejsLogo/index.stories.tsx

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