@node-core/ui-components 1.0.1-1b9af3ec9e0268bfc734b2489cbc584fa3edf026 → 1.0.1-1ccf19c1836415b6ec7bc2d63ffba4686b390ca9

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;

package/Common/NodejsLogo/index.tsx

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

@@ -1,104 +1,20 @@
-/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+@reference "../../styles/index.css";
+
 .root {
-  margin: calc(var(--spacing, 0.25rem)*6);
-  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);
-  padding-inline: calc(var(--spacing, 0.25rem)*4);
-  padding-block: calc(var(--spacing, 0.25rem)*3);
-  --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-800, #556066);
-  }
-  &:where([data-theme=dark], [data-theme=dark] *) {
-    background-color: var(--color-neutral-900, #2c3437);
-  }
-}
+  @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 {
-  --tw-font-weight: var(--font-weight-medium, 500);
-  font-weight: var(--font-weight-medium, 500);
-  color: var(--color-green-600, #417e38);
-  &:where([data-theme=dark], [data-theme=dark] *) {
-    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 font-medium
+    text-green-600
+    dark:text-white;
 }

package/Common/Notification/index.stories.tsx

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

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

@@ -1,283 +1,79 @@
-/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+@reference "../../styles/index.css";
+
 .root {
-  container-type: inline-size;
-  container-name: preview;
-  position: relative;
-  display: flex;
-  aspect-ratio: 1.90/1;
-  align-items: center;
-  border-radius: var(--radius-sm, 0.25rem);
-  border-style: var(--tw-border-style);
-  border-width: 1px;
-  border-color: var(--color-neutral-900, #2c3437);
-  background-color: var(--color-neutral-950, #0d121c);
-  &::after {
-    content: var(--tw-content);
-    position: absolute;
-  }
-  &::after {
-    content: var(--tw-content);
-    inset: calc(var(--spacing, 0.25rem)*0);
-  }
-  &::after {
-    content: var(--tw-content);
-    margin: auto;
-  }
-  &::after {
-    content: var(--tw-content);
-    aspect-ratio: 1 / 1;
-  }
-  &::after {
-    content: var(--tw-content);
-    width: 33.33333%;
-  }
-  &::after {
-    content: var(--tw-content);
-    border-radius: calc(infinity*1px);
-  }
-  &::after {
-    content: var(--tw-content);
-    background-image: radial-gradient( var(--tw-gradient-from), var(--tw-gradient-to) );
-  }
-  &::after {
-    content: var(--tw-content);
-    --tw-blur: blur(var(--blur-2xl, 40px));
-    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
-  }
-  &::after {
-    content: var(--tw-content);
-    --tw-content: '';
-    content: var(--tw-content);
-  }
+  @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 {
-    &::after {
-      content: var(--tw-content);
-      --tw-gradient-from: color-mix(in srgb, #2c682c 90%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        --tw-gradient-from: color-mix(in oklab, var(--color-green-700, #2c682c) 90%, transparent);
-      }
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-    }
+    @apply after:from-green-700/90;
   }
+
   &.release {
-    &::after {
-      content: var(--tw-content);
-      --tw-gradient-from: color-mix(in srgb, #0c7bb3 90%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        --tw-gradient-from: color-mix(in oklab, var(--color-info-600, #0c7bb3) 90%, transparent);
-      }
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-    }
+    @apply after:from-info-600/90;
   }
+
   &.vulnerability {
-    &::after {
-      content: var(--tw-content);
-      --tw-gradient-from: color-mix(in srgb, #ae5f00 90%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        --tw-gradient-from: color-mix(in oklab, var(--color-warning-600, #ae5f00) 90%, transparent);
-      }
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-    }
+    @apply after:from-warning-600/90;
   }
+
   .container {
-    z-index: 10;
-    margin-inline: auto;
-    display: flex;
-    width: 66.66667%;
-    max-width: var(--container-xl, 36rem);
-    flex-direction: column;
-    gap: calc(var(--spacing, 0.25rem)*4);
-    text-align: center;
-    font-size: var(--text-xs, 0.75rem);
-    line-height: var(--tw-leading, var(--text-xs--line-height, 1.33333));
-    --tw-font-weight: var(--font-weight-semibold, 600);
-    font-weight: var(--font-weight-semibold, 600);
-    color: var(--color-white, #fff);
-    @container preview (width >= 24rem) {
-      font-size: var(--text-base, 1rem);
-      line-height: var(--tw-leading, var(--text-base--line-height, 1.5));
-    }
-    @container preview (width >= 28rem) {
-      gap: calc(var(--spacing, 0.25rem)*6);
-    }
-    @container preview (width >= 28rem) {
-      font-size: var(--text-lg, 1.125rem);
-      line-height: var(--tw-leading, var(--text-lg--line-height, 1.55556));
-    }
-    @container preview (width >= 32rem) {
-      gap: calc(var(--spacing, 0.25rem)*8);
-    }
-    @container preview (width >= 32rem) {
-      font-size: var(--text-xl, 1.25rem);
-      line-height: var(--tw-leading, var(--text-xl--line-height, 1.4));
-    }
-    @container preview (width >= 36rem) {
-      gap: calc(var(--spacing, 0.25rem)*12);
-    }
-    @container preview (width >= 36rem) {
-      font-size: var(--text-2xl, 1.5rem);
-      line-height: var(--tw-leading, var(--text-2xl--line-height, 1.33333));
-    }
-    @container preview (width >= 42rem) {
-      font-size: var(--text-3xl, 1.875rem);
-      line-height: var(--tw-leading, var(--text-3xl--line-height, 1.2));
-    }
+    @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 {
-      position: absolute;
-      inset: calc(var(--spacing, 0.25rem)*0);
-      margin: auto;
-      width: 100%;
-      height: 100%;
-      @container preview (width >= 28rem) {
-        height: 60%;
-      }
-      @container preview (width >= 28rem) {
-        width: 60%;
-      }
-      @container preview (width >= 32rem) {
-        height: 66.66667%;
-      }
-      @container preview (width >= 32rem) {
-        width: 66.66667%;
-      }
-      @container preview (width >= 36rem) {
-        height: 60%;
-      }
-      @container preview (width >= 36rem) {
-        width: 60%;
-      }
-      @container preview (width >= 42rem) {
-        height: 66.66667%;
-      }
-      @container preview (width >= 42rem) {
-        width: 66.66667%;
-      }
+      @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 {
-      margin-inline: auto;
-      width: calc(var(--spacing, 0.25rem)*6);
-      height: calc(var(--spacing, 0.25rem)*6);
-      @container preview (width >= 28rem) {
-        width: calc(var(--spacing, 0.25rem)*14);
-        height: calc(var(--spacing, 0.25rem)*14);
-      }
-      @container preview (width >= 32rem) {
-        width: calc(var(--spacing, 0.25rem)*16);
-        height: calc(var(--spacing, 0.25rem)*16);
-      }
-      @container preview (width >= 36rem) {
-        width: calc(var(--spacing, 0.25rem)*20);
-        height: calc(var(--spacing, 0.25rem)*20);
-      }
+      @apply @md/preview:size-14
+        @lg/preview:size-16
+        @xl/preview:size-20
+        mx-auto
+        size-6;
     }
   }
 }
-@property --tw-border-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
-@property --tw-content {
-  syntax: "*";
-  initial-value: "";
-  inherits: false;
-}
-@property --tw-blur {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-brightness {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-contrast {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-grayscale {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-hue-rotate {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-invert {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-opacity {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-saturate {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-sepia {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-drop-shadow {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-drop-shadow-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-drop-shadow-alpha {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 100%;
-}
-@property --tw-drop-shadow-size {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-gradient-position {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-gradient-from {
-  syntax: "<color>";
-  inherits: false;
-  initial-value: #0000;
-}
-@property --tw-gradient-via {
-  syntax: "<color>";
-  inherits: false;
-  initial-value: #0000;
-}
-@property --tw-gradient-to {
-  syntax: "<color>";
-  inherits: false;
-  initial-value: #0000;
-}
-@property --tw-gradient-stops {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-gradient-via-stops {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-gradient-from-position {
-  syntax: "<length-percentage>";
-  inherits: false;
-  initial-value: 0%;
-}
-@property --tw-gradient-via-position {
-  syntax: "<length-percentage>";
-  inherits: false;
-  initial-value: 50%;
-}
-@property --tw-gradient-to-position {
-  syntax: "<length-percentage>";
-  inherits: false;
-  initial-value: 100%;
-}
-@property --tw-font-weight {
-  syntax: "*";
-  inherits: false;
-}

package/Common/Preview/index.stories.tsx

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

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