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

package/Common/Notification/index.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as ToastPrimitive from '@radix-ui/react-toast';
+import classNames from 'classnames';
+import styles from './index.module.css';
+const Notification = ({ open, duration = 5000, onChange, children, className, }) => (_jsx(ToastPrimitive.Root, { open: open, duration: duration, onOpenChange: onChange, className: classNames(styles.root, className), children: _jsx(ToastPrimitive.Title, { className: styles.message, children: children }) }));
+export default Notification;

package/Common/Notification/index.module.css

@@ -0,0 +1,104 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.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);
+  }
+}
+.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;
+}

package/Common/Preview/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import HexagonGrid from '#ui/Icons/HexagonGrid';
+import JsWhiteIcon from '#ui/Icons/Logos/JsWhite';
+import styles from './index.module.css';
+const Preview = ({ type = 'announcements', title }) => (_jsx("div", { className: classNames(styles.root, styles[type]), children: _jsxs("div", { className: styles.container, "aria-hidden": true, children: [_jsx(HexagonGrid, { className: styles.hexagon }), _jsx(JsWhiteIcon, { className: styles.logo }), title] }) }));
+export default Preview;

package/Common/Preview/index.module.css

@@ -0,0 +1,283 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.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);
+  }
+  &.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));
+    }
+  }
+  &.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));
+    }
+  }
+  &.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));
+    }
+  }
+  .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));
+    }
+    .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%;
+      }
+    }
+    .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);
+      }
+    }
+  }
+}
+@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/Select/index.js

@@ -0,0 +1,46 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import classNames from 'classnames';
+import { useEffect, useId, useMemo, useState } from 'react';
+import Skeleton from '#ui/Common/Skeleton';
+import styles from './index.module.css';
+const isStringArray = (values) => Boolean(values[0] && typeof values[0] === 'string');
+const isValuesArray = (values) => Boolean(values[0] && typeof values[0] === 'object' && 'value' in values[0]);
+const Select = ({ values = [], defaultValue, placeholder, label, inline, onChange, className, ariaLabel, loading = false, disabled = false, }) => {
+    const id = useId();
+    const [value, setValue] = useState(defaultValue);
+    useEffect(() => setValue(defaultValue), [defaultValue]);
+    const mappedValues = useMemo(() => {
+        let mappedValues = values;
+        if (isStringArray(mappedValues)) {
+            mappedValues = mappedValues.map(value => ({ label: value, value }));
+        }
+        if (isValuesArray(mappedValues)) {
+            return [{ items: mappedValues }];
+        }
+        return mappedValues;
+    }, [values]);
+    // We render the actual item slotted to fix/prevent the issue
+    // of the tirgger flashing on the initial render
+    const currentItem = useMemo(() => mappedValues
+        .flatMap(({ items }) => items)
+        .find(item => item.value === value), [mappedValues, value]);
+    const memoizedMappedValues = useMemo(() => {
+        return mappedValues.map(({ label, items }, key) => (_jsxs(SelectPrimitive.Group, { children: [label && (_jsx(SelectPrimitive.Label, { className: classNames(styles.item, styles.label), children: label })), items.map(({ value, label, iconImage, disabled }) => (_jsx(SelectPrimitive.Item, { value: value, disabled: disabled, className: classNames(styles.item, styles.text), children: _jsxs(SelectPrimitive.ItemText, { children: [iconImage, _jsx("span", { children: label })] }) }, value)))] }, label?.toString() ?? key)));
+        // We explicitly want to recalculate these values only when the values themselves changed
+        // This is to prevent re-rendering and re-calcukating the values on every render
+    }, [JSON.stringify(values)]);
+    // Both change the internal state and emit the change event
+    const handleChange = (value) => {
+        setValue(value);
+        if (typeof onChange === 'function') {
+            onChange(value);
+        }
+    };
+    return (_jsx(Skeleton, { loading: loading, children: _jsxs("span", { className: classNames(styles.select, { [styles.inline]: inline }, className), children: [label && (_jsx("label", { className: styles.label, htmlFor: id, children: label })), _jsxs(SelectPrimitive.Root, { value: currentItem !== undefined ? value : undefined, onValueChange: handleChange, disabled: disabled, children: [_jsxs(SelectPrimitive.Trigger, { className: styles.trigger, "aria-label": ariaLabel, id: id, children: [_jsx(SelectPrimitive.Value, { placeholder: placeholder, children: currentItem !== undefined && (_jsxs(_Fragment, { children: [currentItem.iconImage, _jsx("span", { children: currentItem.label })] })) }), _jsx(ChevronDownIcon, { className: styles.icon })] }), _jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { position: inline ? 'popper' : 'item-aligned', className: classNames(styles.dropdown, {
+                                    [styles.inline]: inline,
+                                }), children: [_jsx(SelectPrimitive.ScrollUpButton, { children: _jsx(ChevronUpIcon, { className: styles.scrollIcon }) }), _jsx(SelectPrimitive.Viewport, { children: memoizedMappedValues }), _jsx(SelectPrimitive.ScrollDownButton, { children: _jsx(ChevronDownIcon, { className: styles.scrollIcon }) })] }) })] })] }) }));
+};
+export default Select;