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

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

@@ -1,372 +1,145 @@
-/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+@reference "../../styles/index.css";
+
 .button {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: calc(var(--spacing, 0.25rem)*2);
-  padding-inline: calc(var(--spacing, 0.25rem)*4.5);
-  padding-block: calc(var(--spacing, 0.25rem)*2.5);
-  text-align: center;
-  --tw-font-weight: var(--font-weight-semibold, 600);
-  font-weight: var(--font-weight-semibold, 600);
-  @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));
-  }
+  @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 {
-    width: calc(var(--spacing, 0.25rem)*5);
-    height: calc(var(--spacing, 0.25rem)*5);
+    @apply size-5;
   }
+
   &[aria-disabled='true'] {
-    cursor: not-allowed;
+    @apply cursor-not-allowed;
   }
+
   &.small {
-    padding-inline: calc(var(--spacing, 0.25rem)*3);
-    padding-block: calc(var(--spacing, 0.25rem)*2);
-    font-size: var(--text-sm, 0.875rem);
-    line-height: var(--tw-leading, var(--text-sm--line-height, 1.42857));
+    @apply px-3
+      py-2
+      text-sm;
   }
+
   &.neutral {
-    border-radius: var(--radius-sm, 0.25rem);
-    background-color: var(--color-neutral-900, #2c3437);
-    color: var(--color-white, #fff);
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      color: var(--color-neutral-200, #e9edf0);
-    }
+    @apply rounded-sm
+      bg-neutral-900
+      text-white
+      dark:text-neutral-200;
+
     &:hover:not([aria-disabled='true']) {
-      background-color: var(--color-neutral-800, #556066);
+      @apply bg-neutral-800;
     }
+
     &[aria-disabled='true'] {
-      background-color: var(--color-neutral-900, #2c3437);
-      opacity: 50%;
+      @apply bg-neutral-900
+        opacity-50;
     }
+
     &:focus {
-      background-color: var(--color-neutral-800, #556066);
+      @apply bg-neutral-800;
     }
   }
+
   &.primary {
-    border-radius: var(--radius-sm, 0.25rem);
-    border-style: var(--tw-border-style);
-    border-width: 1px;
-    border-color: var(--color-green-600, #417e38);
-    background-color: var(--color-green-600, #417e38);
-    color: var(--color-white, #fff);
-    --tw-shadow: 0px 1px 2px 0px var(--tw-shadow-color, color-mix(in srgb, #101828 5%, transparent));
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-shadow: 0px 1px 2px 0px var(--tw-shadow-color, color-mix(in oklab, var(--color-shadow, #101828) 5%, transparent));
-    }
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    @apply shadow-xs
+      rounded-sm
+      border
+      border-green-600
+      bg-green-600
+      text-white;
+
     &:hover:not([aria-disabled='true']) {
-      border-color: var(--color-green-700, #2c682c);
-      background-color: var(--color-green-700, #2c682c);
-      color: var(--color-white, #fff);
+      @apply border-green-700
+        bg-green-700
+        text-white;
     }
+
     &:focus {
-      border-color: var(--color-green-700, #2c682c);
-      background-color: var(--color-green-700, #2c682c);
+      @apply border-green-700
+        bg-green-700;
     }
+
     &[aria-disabled='true'] {
-      background-color: var(--color-green-600, #417e38);
-      opacity: 50%;
+      @apply bg-green-600
+        opacity-50;
     }
   }
+
   &.secondary {
-    border-radius: var(--radius-lg, 0.5rem);
-    border-style: var(--tw-border-style);
-    border-width: 1px;
-    border-color: var(--color-neutral-200, #e9edf0);
-    color: var(--color-neutral-800, #556066);
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      border-color: var(--color-neutral-900, #2c3437);
-    }
-    &:where([data-theme=dark], [data-theme=dark] *) {
-      color: var(--color-neutral-200, #e9edf0);
-    }
+    @apply rounded-lg
+      border
+      border-neutral-200
+      text-neutral-800
+      dark:border-neutral-900
+      dark:text-neutral-200;
+
     &:hover:not([aria-disabled='true']) {
-      background-color: var(--color-neutral-200, #e9edf0);
-      color: var(--color-neutral-800, #556066);
-      &:where([data-theme=dark], [data-theme=dark] *) {
-        background-color: var(--color-neutral-900, #2c3437);
-      }
-      &:where([data-theme=dark], [data-theme=dark] *) {
-        color: var(--color-neutral-200, #e9edf0);
-      }
+      @apply bg-neutral-200
+        text-neutral-800
+        dark:bg-neutral-900
+        dark:text-neutral-200;
     }
+
     &[aria-disabled='true'] {
-      background-color: transparent;
-      opacity: 50%;
+      @apply bg-transparent
+        opacity-50;
     }
+
     &:focus {
-      background-color: var(--color-neutral-100, #f6f7f9);
-      color: var(--color-neutral-800, #556066);
-      &:where([data-theme=dark], [data-theme=dark] *) {
-        background-color: var(--color-neutral-900, #2c3437);
-      }
-      &:where([data-theme=dark], [data-theme=dark] *) {
-        color: var(--color-neutral-200, #e9edf0);
-      }
+      @apply bg-neutral-100
+        text-neutral-800
+        dark:bg-neutral-900
+        dark:text-neutral-200;
     }
   }
+
   &.special {
-    border-radius: var(--radius-lg, 0.5rem);
-    border-style: var(--tw-border-style);
-    border-width: 1px;
-    border-color: color-mix(in srgb, #417e38 30%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-green-600, #417e38) 30%, transparent);
-    }
-    background-color: color-mix(in srgb, #417e38 10%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-green-600, #417e38) 10%, transparent);
-    }
-    color: var(--color-white, #fff);
-    --tw-shadow: 0px 1px 2px 0px var(--tw-shadow-color, color-mix(in srgb, #101828 5%, transparent));
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-shadow: 0px 1px 2px 0px var(--tw-shadow-color, color-mix(in oklab, var(--color-shadow, #101828) 5%, transparent));
-    }
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    &::before {
-      content: var(--tw-content);
-      position: absolute;
-    }
-    &::before {
-      content: var(--tw-content);
-      top: calc(var(--spacing, 0.25rem)*0);
-    }
-    &::before {
-      content: var(--tw-content);
-      right: calc(var(--spacing, 0.25rem)*0);
-    }
-    &::before {
-      content: var(--tw-content);
-      left: calc(var(--spacing, 0.25rem)*0);
-    }
-    &::before {
-      content: var(--tw-content);
-      z-index: -10;
-    }
-    &::before {
-      content: var(--tw-content);
-      margin-inline: auto;
-    }
-    &::before {
-      content: var(--tw-content);
-      height: 100%;
-    }
-    &::before {
-      content: var(--tw-content);
-      width: 100%;
-    }
-    &::before {
-      content: var(--tw-content);
-      background-image: radial-gradient( 8em circle at 50% 10px, var(--color-green-400), transparent 30% );
-    }
-    &::before {
-      content: var(--tw-content);
-      opacity: 30%;
-    }
-    &::before {
-      content: var(--tw-content);
-      --tw-content: '';
-      content: var(--tw-content);
-    }
-    &::after {
-      content: var(--tw-content);
-      position: absolute;
-    }
-    &::after {
-      content: var(--tw-content);
-      top: -1px;
-    }
-    &::after {
-      content: var(--tw-content);
-      right: calc(var(--spacing, 0.25rem)*0);
-    }
-    &::after {
-      content: var(--tw-content);
-      left: calc(var(--spacing, 0.25rem)*0);
-    }
-    &::after {
-      content: var(--tw-content);
-      margin-inline: auto;
-    }
-    &::after {
-      content: var(--tw-content);
-      height: 1px;
-    }
-    &::after {
-      content: var(--tw-content);
-      width: 40%;
-    }
-    &::after {
-      content: var(--tw-content);
-      --tw-gradient-position: to right in oklab;
-      background-image: linear-gradient(var(--tw-gradient-stops));
-    }
-    &::after {
-      content: var(--tw-content);
-      --tw-gradient-from: color-mix(in srgb, #417e38 0%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        --tw-gradient-from: color-mix(in oklab, var(--color-green-600, #417e38) 0%, 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));
-    }
-    &::after {
-      content: var(--tw-content);
-      --tw-gradient-via: var(--color-green-600, #417e38);
-      --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
-      --tw-gradient-stops: var(--tw-gradient-via-stops);
-    }
-    &::after {
-      content: var(--tw-content);
-      --tw-gradient-to: color-mix(in srgb, #417e38 0%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        --tw-gradient-to: color-mix(in oklab, var(--color-green-600, #417e38) 0%, 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));
-    }
-    &::after {
-      content: var(--tw-content);
-      --tw-content: '';
-      content: var(--tw-content);
-    }
+    @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'] {
-      opacity: 50%;
+      @apply opacity-50;
     }
+
     &:hover:not([aria-disabled='true']) {
-      background-color: color-mix(in srgb, #417e38 20%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-green-600, #417e38) 20%, transparent);
-      }
+      @apply bg-green-600/20;
     }
+
     &:focus {
-      background-color: color-mix(in srgb, #417e38 20%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-green-600, #417e38) 20%, transparent);
-      }
+      @apply bg-green-600/20;
     }
   }
 }
-@property --tw-font-weight {
-  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-content {
-  syntax: "*";
-  initial-value: "";
-  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%;
-}

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;