@altruist03/ui 0.0.0-stage → 0.2.0

package/src/components/IpWhitelistField/IpWhitelistField.stories.tsx

@@ -0,0 +1,138 @@
+import React, { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { IpWhitelistField } from "./IpWhitelistField";
+import type { IpWhitelistFieldProps, IpWhitelistRow } from "./IpWhitelistField.types";
+
+const meta: Meta<typeof IpWhitelistField> = {
+  title: "Design System/IpWhitelistField",
+  component: IpWhitelistField,
+  tags: [],
+  decorators: [
+    (Story) => (
+      <div style={{ padding: "24px", maxWidth: "780px" }}>
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    label: "Whitelisted source IP",
+    required: true,
+    disabled: false,
+    error: false,
+    allowWildcard: true,
+    minRows: 1,
+    rows: [{ input1: "", input2: "", input3: "", input4: "" }],
+  } as IpWhitelistFieldProps,
+  argTypes: {
+    required: {
+      control: { type: "boolean" },
+      description: "Marks the field as required",
+    },
+    disabled: {
+      control: { type: "boolean" },
+      description: "Disables the field",
+    },
+    error: {
+      control: { type: "boolean" },
+      description: "Shows error state styling on all segments",
+    },
+    allowWildcard: {
+      control: { type: "boolean" },
+      description: "Allow '*' wildcard per octet",
+    },
+    minRows: {
+      control: { type: "number" },
+      description: "Minimum rows to keep (remove hidden at/below this)",
+    },
+    maxRows: {
+      control: { type: "number" },
+      description: "Maximum rows allowed (add disabled at/above this)",
+    },
+    rows: {
+      control: { type: "object" },
+      description: "Controlled rows state",
+    },
+    onRowsChange: { table: { disable: true } },
+    addRowAriaLabel: { control: { type: "text" } },
+    removeRowAriaLabel: { control: { type: "text" } },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof IpWhitelistField>;
+
+const ControlledIpWhitelistField = (props: IpWhitelistFieldProps) => {
+  const [rows, setRows] = useState<IpWhitelistRow[]>(props.rows);
+
+  React.useEffect(() => {
+    setRows(props.rows);
+  }, [props.rows]);
+
+  return <IpWhitelistField {...props} rows={rows} onRowsChange={setRows} />;
+};
+
+export const Playground: Story = {
+  render: (args) => {
+    return <ControlledIpWhitelistField {...args} />;
+  },
+};
+
+const ShowcaseComponent = () => {
+  const [rows1, setRows1] = useState<IpWhitelistRow[]>([
+    { input1: "", input2: "", input3: "", input4: "" },
+  ]);
+  const [rows2, setRows2] = useState<IpWhitelistRow[]>([
+    { input1: "10", input2: "0", input3: "*", input4: "1" },
+  ]);
+  const [rows3, setRows3] = useState<IpWhitelistRow[]>([
+    { input1: "192", input2: "168", input3: "1", input4: "*" },
+    { input1: "172", input2: "16", input3: "0", input4: "10" },
+  ]);
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
+      <IpWhitelistField
+        label="Whitelisted source IP"
+        required
+        rows={rows1}
+        onRowsChange={setRows1}
+      />
+
+      <IpWhitelistField
+        label="Prefilled (wildcards)"
+        required
+        rows={rows2}
+        onRowsChange={setRows2}
+      />
+
+      <IpWhitelistField
+        label="Multiple rows + maxRows=2"
+        required
+        maxRows={2}
+        rows={rows3}
+        onRowsChange={setRows3}
+      />
+
+      <IpWhitelistField
+        label="Error state"
+        required
+        error
+        rows={rows2}
+        onRowsChange={setRows2}
+      />
+
+      <IpWhitelistField
+        label="Disabled"
+        required
+        disabled
+        rows={rows2}
+        onRowsChange={setRows2}
+      />
+    </div>
+  );
+};
+
+export const Showcase: Story = {
+  render: () => <ShowcaseComponent />,
+};

package/src/components/IpWhitelistField/IpWhitelistField.tsx

@@ -0,0 +1,164 @@
+import { useMemo } from "react";
+import type {
+  IpWhitelistFieldProps,
+  IpWhitelistRow,
+} from "./IpWhitelistField.types";
+import { useTokens } from "../../ThemeProvider/ThemeContext";
+import { getIpWhitelistFieldTokensFromResolved } from "../../tokens";
+import { Button } from "../Button/Button";
+import { SegmentedInputField } from "../SegmentedInputField/SegmentedInputField";
+// import { Icon as FirebirdIcon } from "firebird-icon-lib";
+
+const EMPTY_ROW: IpWhitelistRow = {
+  input1: "",
+  input2: "",
+  input3: "",
+  input4: "",
+};
+
+export const IpWhitelistField = ({
+  label,
+  required = false,
+  disabled = false,
+  error = false,
+  allowWildcard = true,
+  minRows = 1,
+  maxRows,
+  rows,
+  onRowsChange,
+  addRowAriaLabel = "Add IP row",
+  removeRowAriaLabel = "Remove IP row",
+}: IpWhitelistFieldProps) => {
+  const resolvedTokens = useTokens();
+  const ipTokens = getIpWhitelistFieldTokensFromResolved(resolvedTokens);
+
+  const isAnyRowIncomplete = useMemo(
+    () =>
+      rows.some(
+        (r) =>
+          r.input1 === "" ||
+          r.input2 === "" ||
+          r.input3 === "" ||
+          r.input4 === "",
+      ),
+    [rows],
+  );
+
+  const updateRow = (index: number, patch: Partial<IpWhitelistRow>) => {
+    const next = [...rows];
+    next[index] = { ...next[index], ...patch };
+    onRowsChange(next);
+  };
+
+  const removeRow = (index: number) => {
+    onRowsChange(rows.filter((_, i) => i !== index));
+  };
+
+  const addRow = () => {
+    onRowsChange([...rows, { ...EMPTY_ROW }]);
+  };
+
+  const canAddMore = maxRows ? rows.length < maxRows : true;
+
+  const isAllowedOctetValue = (val: string) => {
+    if (val === "") return true;
+    if (allowWildcard && val === "*") return true;
+    const n = Number(val);
+    return Number.isInteger(n) && n >= 0 && n <= 255;
+  };
+
+  return (
+    <div style={{ width: "100%" }}>
+      <div style={{ marginTop: ipTokens.labelMarginTop }}>
+        <label style={{ display: "block", color: ipTokens.labelColor }}>
+          {label}
+          {required && (
+            <span
+              style={{
+                marginLeft: ipTokens.requiredGap,
+                color: ipTokens.requiredColor,
+              }}
+            >
+              *
+            </span>
+          )}
+        </label>
+      </div>
+
+      {rows.map((item, index) => (
+        <div key={index} style={{ marginTop: ipTokens.rowMarginTop }}>
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: ipTokens.groupGap,
+            }}
+            className="client_ip"
+          >
+            <SegmentedInputField
+              values={[item.input1, item.input2, item.input3, item.input4]}
+              onValuesChange={(next) => {
+                updateRow(index, {
+                  input1: next[0] ?? "",
+                  input2: next[1] ?? "",
+                  input3: next[2] ?? "",
+                  input4: next[3] ?? "",
+                });
+              }}
+              disabled={disabled}
+              error={error}
+              size="lg"
+              showSeparator
+              separator={<span className="spanMargin m-0">.</span>}
+              inputMode="numeric"
+              maxLength={3}
+              autoComplete="off"
+              getAriaLabel={(segmentIndex) => `IP part ${segmentIndex + 1}`}
+              sanitizeSegment={(raw) => {
+                if (allowWildcard && raw === "*") return raw;
+                return raw.replace(/[^0-9]/g, "").slice(0, 3);
+              }}
+              validateSegment={(nextValue) => isAllowedOctetValue(nextValue)}
+              isSegmentComplete={(segmentValue) =>
+                (allowWildcard && segmentValue === "*") ||
+                segmentValue.length === 3
+              }
+            />
+
+            <div
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: ipTokens.buttonsGap,
+              }}
+            >
+              <Button
+                size="lg"
+                variant="blue"
+                disabled={disabled || isAnyRowIncomplete || !canAddMore}
+                onClick={addRow}
+                iconOnly
+                aria-label={addRowAriaLabel}
+              >
+                {/* <FirebirdIcon name="add_circle" size={20} /> */}
+              </Button>
+
+              {rows.length > minRows && (
+                <Button
+                  size="lg"
+                  variant="red"
+                  iconOnly
+                  disabled={disabled}
+                  onClick={() => removeRow(index)}
+                  aria-label={removeRowAriaLabel}
+                >
+                  {/* <FirebirdIcon name="cancel_circle" size={20} /> */}
+                </Button>
+              )}
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/components/IpWhitelistField/IpWhitelistField.types.ts

@@ -0,0 +1,42 @@
+export type IpWhitelistOctet = string;
+
+export interface IpWhitelistRow {
+  input1: IpWhitelistOctet;
+  input2: IpWhitelistOctet;
+  input3: IpWhitelistOctet;
+  input4: IpWhitelistOctet;
+}
+
+export interface IpWhitelistFieldProps {
+  /** Field label shown above the IP rows. */
+  label: string;
+  required?: boolean;
+  disabled?: boolean;
+  /** When true, shows error styling on the IP inputs. */
+  error?: boolean;
+  /**
+   * Allow "*" in an octet to represent wildcard.
+   * Defaults to true to match existing Create Account behavior.
+   */
+  allowWildcard?: boolean;
+  /**
+   * Minimum number of rows the field should keep.
+   * When `rows.length` is at/below this number, remove is hidden/disabled.
+   * Defaults to 1.
+   */
+  minRows?: number;
+  /**
+   * Maximum number of rows allowed. When reached, add is disabled.
+   */
+  maxRows?: number;
+  /**
+   * Controlled rows. Each row represents an IPv4 pattern (supports "*" per octet).
+   */
+  rows: IpWhitelistRow[];
+  onRowsChange: (nextRows: IpWhitelistRow[]) => void;
+
+  /** Optional aria-labels for icon-only buttons. */
+  addRowAriaLabel?: string;
+  removeRowAriaLabel?: string;
+}
+

package/src/components/Loader/Loader.stories.tsx

@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Loader } from "./Loader";
+
+const meta: Meta<typeof Loader> = {
+  title: "Design System/Loader",
+  component: Loader,
+  tags: [],
+  decorators: [(Story) => <Story />],
+  args: {
+    open: true,
+  },
+  argTypes: {
+    open: {
+      control: { type: "boolean" },
+      description: "Whether the loader overlay is visible",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+    },
+    zIndex: {
+      control: { type: "number" },
+      description: "Override z-index (default: 9999 from tokens)",
+      table: {
+        type: { summary: "number" },
+        defaultValue: { summary: "9999" },
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Loader>;
+
+// Main interactive story with controls
+export const Playground: Story = {
+  args: {
+    open: true,
+  },
+};
+
+// Showcase story
+export const Showcase: Story = {
+  render: () => (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "32px",
+        padding: "20px",
+      }}
+    >
+      <div>
+        <h3
+          style={{
+            fontSize: "18px",
+            fontWeight: "bold",
+            marginBottom: "16px",
+          }}
+        >
+          Loader (Fullscreen Overlay)
+        </h3>
+        <p style={{ fontSize: "14px", color: "#666", marginBottom: "16px" }}>
+          The Loader component renders a fullscreen overlay with animated dots.
+          Toggle the <code>open</code> prop in the Playground story to see it in
+          action.
+        </p>
+        <div
+          style={{
+            position: "relative",
+            width: "100%",
+            height: "300px",
+            border: "1px solid #e5e7eb",
+            borderRadius: "12px",
+            overflow: "hidden",
+          }}
+        >
+          <div
+            style={{
+              position: "absolute",
+              inset: 0,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              backgroundColor: "rgba(0, 0, 0, 0.5)",
+            }}
+          >
+            <Loader open={true} zIndex={1} />
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};

package/src/components/Loader/Loader.tsx

@@ -0,0 +1,132 @@
+import React, { useEffect, useRef } from "react";
+import { getLoaderTokensFromResolved } from "../../tokens";
+import { useTokens } from "../../ThemeProvider/ThemeContext";
+import type { LoaderProps } from "./Loader.types";
+
+const KEYFRAMES_ID = "ds-loader-dots-keyframes";
+
+function parsePx(value: string | number): number {
+  if (typeof value === "number") return value;
+  const num = parseInt(String(value).replace(/px$/i, ""), 10);
+  return Number.isFinite(num) ? num : 0;
+}
+
+function ensureKeyframes(gap: number, activeSpread: number) {
+  if (typeof document === "undefined") return;
+  const existing = document.getElementById(KEYFRAMES_ID);
+  if (existing) return;
+
+  const g = gap;
+  const s = activeSpread;
+
+  const css = `
+@keyframes dsLoaderDots {
+  0% {
+    box-shadow:
+      ${g}px -${g}px 0 0px, ${g * 2}px -${g}px 0 0px, ${g * 3}px -${g}px 0 0px,
+      ${g}px 0 0 ${s}px, ${g * 2}px 0 0 ${s}px, ${g * 3}px 0 0 ${s}px,
+      ${g}px ${g}px 0 0px, ${g * 2}px ${g}px 0 0px, ${g * 3}px ${g}px 0 0px;
+  }
+  12.5% {
+    box-shadow:
+      ${g}px -${g}px 0 0px, ${g * 2}px -${g}px 0 0px, ${g * 3}px -${g}px 0 ${s}px,
+      ${g}px 0 0 ${s}px, ${g * 2}px 0 0 0px, ${g * 3}px 0 0 ${s}px,
+      ${g}px ${g}px 0 0px, ${g * 2}px ${g}px 0 0px, ${g * 3}px ${g}px 0 0px;
+  }
+  25% {
+    box-shadow:
+      ${g}px -${g}px 0 ${s}px, ${g * 2}px -${g}px 0 0px, ${g * 3}px -${g}px 0 ${s}px,
+      ${g}px 0 0 0px, ${g * 2}px 0 0 0px, ${g * 3}px 0 0 0px,
+      ${g}px ${g}px 0 0px, ${g * 2}px ${g}px 0 ${s}px, ${g * 3}px ${g}px 0 0px;
+  }
+  50% {
+    box-shadow:
+      ${g}px -${g}px 0 ${s}px, ${g * 2}px -${g}px 0 ${s}px, ${g * 3}px -${g}px 0 0px,
+      ${g}px 0 0 0px, ${g * 2}px 0 0 0px, ${g * 3}px 0 0 0px,
+      ${g}px ${g}px 0 0px, ${g * 2}px ${g}px 0 0px, ${g * 3}px ${g}px 0 ${s}px;
+  }
+  62.5% {
+    box-shadow:
+      ${g}px -${g}px 0 0px, ${g * 2}px -${g}px 0 0px, ${g * 3}px -${g}px 0 0px,
+      ${g}px 0 0 ${s}px, ${g * 2}px 0 0 0px, ${g * 3}px 0 0 0px,
+      ${g}px ${g}px 0 0px, ${g * 2}px ${g}px 0 ${s}px, ${g * 3}px ${g}px 0 ${s}px;
+  }
+  75% {
+    box-shadow:
+      ${g}px -${g}px 0 0px, ${g * 2}px -${g}px 0 ${s}px, ${g * 3}px -${g}px 0 0px,
+      ${g}px 0 0 0px, ${g * 2}px 0 0 0px, ${g * 3}px 0 0 ${s}px,
+      ${g}px ${g}px 0 0px, ${g * 2}px ${g}px 0 0px, ${g * 3}px ${g}px 0 ${s}px;
+  }
+  87.5% {
+    box-shadow:
+      ${g}px -${g}px 0 0px, ${g * 2}px -${g}px 0 ${s}px, ${g * 3}px -${g}px 0 0px,
+      ${g}px 0 0 0px, ${g * 2}px 0 0 ${s}px, ${g * 3}px 0 0 0px,
+      ${g}px ${g}px 0 ${s}px, ${g * 2}px ${g}px 0 0px, ${g * 3}px ${g}px 0 0px;
+  }
+}`;
+
+  const style = document.createElement("style");
+  style.id = KEYFRAMES_ID;
+  style.textContent = css;
+  document.head.appendChild(style);
+}
+
+export const Loader = ({ open, zIndex = 9999 }: LoaderProps) => {
+  const resolvedTokens = useTokens();
+  const tokens = getLoaderTokensFromResolved(resolvedTokens);
+  const injectedRef = useRef(false);
+
+  const gap = parsePx(tokens.dotGap);
+  const activeSpread = parsePx(tokens.dotActiveSpread);
+
+  useEffect(() => {
+    if (!injectedRef.current) {
+      ensureKeyframes(gap, activeSpread);
+      injectedRef.current = true;
+    }
+  }, [gap, activeSpread]);
+
+  if (!open) return null;
+
+  const backdropStyle: React.CSSProperties = {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: tokens.backdropBackground,
+    opacity: Number.isFinite(parseFloat(tokens.backdropOpacity))
+      ? parseFloat(tokens.backdropOpacity)
+      : 0.5,
+    zIndex,
+  };
+
+  const dotStyle: React.CSSProperties = {
+    width: tokens.dotSize,
+    aspectRatio: "1",
+    borderRadius: "50%",
+    color: tokens.dotColor,
+    transform: `translateX(-${gap * 2}px)`,
+    animation: "dsLoaderDots 2s infinite linear",
+    boxShadow: [
+      `${gap}px -${gap}px 0 0px`,
+      `${gap * 2}px -${gap}px 0 0px`,
+      `${gap * 3}px -${gap}px 0 0px`,
+      `${gap}px 0 0 ${activeSpread}px`,
+      `${gap * 2}px 0 0 ${activeSpread}px`,
+      `${gap * 3}px 0 0 ${activeSpread}px`,
+      `${gap}px ${gap}px 0 0px`,
+      `${gap * 2}px ${gap}px 0 0px`,
+      `${gap * 3}px ${gap}px 0 0px`,
+    ].join(", "),
+  };
+
+  return (
+    <div style={backdropStyle}>
+      <div style={dotStyle} />
+    </div>
+  );
+};

package/src/components/Loader/Loader.types.ts

@@ -0,0 +1,6 @@
+export interface LoaderProps {
+  /** Whether the loader overlay is visible */
+  open: boolean;
+  /** Override z-index. Default: from tokens (9999) */
+  zIndex?: number;
+}