@recursica/adapter-mantine-v8 1.3.4 → 1.3.6

package/src/components/ReadOnlyField/ReadOnlyField.stories.tsx

@@ -0,0 +1,163 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { Meta, StoryObj } from "@storybook/react";
+import { ReadOnlyField } from "./ReadOnlyField";
+import { EmptyValueRenderer } from "@recursica/adapter-common";
+
+const meta: Meta<typeof ReadOnlyField> = {
+  title: "UI Kit/ReadOnlyField",
+  component: ReadOnlyField,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The ReadOnlyField safely natively wraps data sets bypassing active HTML interaction hooks while natively retaining exact bounding visual layouts defined by internal Design System Tokens. Useful for creating strict data-review profiles or conditional form read-overs.",
+      },
+    },
+  },
+  args: {
+    label: "Read Only Label",
+    value: "Fixed Data Set Value",
+    assistiveText: "Helper description text beneath the node.",
+    type: "text",
+  },
+  argTypes: {
+    type: {
+      control: "select",
+      options: ["text", "number"], // Add more as we support them
+    },
+    labelWithEditIcon: {
+      control: "boolean",
+    },
+    // We cannot natively control a React.ElementType through standard primitive storybook panels.
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ReadOnlyField>;
+
+/**
+ * Playground story demonstrating standard structural blocks of the ReadOnlyField module dynamically.
+ */
+export const Default: Story = {
+  args: {},
+};
+
+/**
+ * Shows the default handler replacing missing mapping data directly with 'N/A'.
+ */
+export const EmptyValue: Story = {
+  args: {
+    value: "",
+    label: "Empty String Evaluated Automatically (Default 'N/A')",
+  },
+};
+
+const CustomEmptyTextRenderer: React.FC<{ value?: any }> & {
+  check?: (v: any) => boolean;
+} = (props) => <EmptyValueRenderer {...props} emptyText="No Data Found" />;
+CustomEmptyTextRenderer.check = EmptyValueRenderer.check;
+
+/**
+ * Demonstrates overriding the baseline verbiage internally utilizing the exported `EmptyValueRenderer` while inheriting default evaluation checks.
+ */
+export const CustomEmptyText: Story = {
+  args: {
+    value: null,
+    label: "Custom Empty Text Default",
+    emptyValueComponent: CustomEmptyTextRenderer,
+  },
+};
+
+const CustomEmptyCheckRenderer: React.FC<{ value?: any }> & {
+  check?: (v: any) => boolean;
+} = () => {
+  return <i>Custom HTML Markup Provided</i>;
+};
+CustomEmptyCheckRenderer.check = (val) => val === "EMPTY_MOCK";
+
+/**
+ * Validates a fully overridden emptyValueComponent injecting custom rendering boundaries alongside explicitly tailored validation rules evaluating datasets dynamically.
+ */
+export const CustomEmptyRenderer: Story = {
+  args: {
+    value: "EMPTY_MOCK",
+    label: "Custom Logic Evaluation Binding",
+    emptyValueComponent: CustomEmptyCheckRenderer,
+  },
+};
+
+/**
+ * Validates the core read-only label execution and base default spacing bindings globally.
+ */
+export const StackedDefault: Story = {
+  args: {
+    formLayout: "stacked",
+    value: "Some fixed readable text",
+  },
+};
+
+/**
+ * Binds side-by-side structures globally maintaining correct inline gutter layouts.
+ */
+export const SideBySide: Story = {
+  args: {
+    formLayout: "side-by-side",
+    value: "Some fixed readable text mapping horizontally",
+  },
+};
+
+/**
+ * Tests the fallback structural logic when Edit icon natively overrides required bindings.
+ */
+export const WithEditIcon: Story = {
+  args: {
+    labelWithEditIcon: true,
+    required: true,
+    value: "Editable fixed structure",
+  },
+};
+
+/**
+ * Demonstrates how the generic ReadOnlyField handles mapping different internal data types.
+ * Currently, all types safely default to string extraction mapping into the text renderer natively.
+ */
+export const DataTypes: Story = {
+  args: {},
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
+      <ReadOnlyField
+        label="Text Mapping"
+        type="text"
+        value="Standard string output"
+      />
+      <ReadOnlyField label="Number Mapping" type="number" value={1234567.89} />
+      <ReadOnlyField
+        label="Date Mapping"
+        type="date"
+        value={new Date("2026-04-28T12:00:00Z").toLocaleDateString()}
+      />
+      <ReadOnlyField
+        label="Boolean Mapping (True)"
+        type="boolean"
+        value={true}
+      />
+      <ReadOnlyField
+        label="Boolean Mapping (False)"
+        type="boolean"
+        value={false}
+      />
+      <ReadOnlyField
+        label="Switch Mapping (True -> On)"
+        type="switch"
+        value={true}
+      />
+      <ReadOnlyField
+        label="Switch Mapping (False -> Off)"
+        type="switch"
+        value={false}
+      />
+    </div>
+  ),
+};

package/src/components/SegmentedControl/SegmentedControl.stories.tsx

@@ -0,0 +1,106 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { SegmentedControl } from "./SegmentedControl";
+
+const meta: Meta<typeof SegmentedControl> = {
+  title: "UI-Kit/SegmentedControl",
+  component: SegmentedControl,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "SegmentedControl provides a linear set of two or more segments, each of which functions as a mutually exclusive button.",
+      },
+    },
+  },
+  argTypes: {
+    orientation: {
+      control: "radio",
+      options: ["horizontal", "vertical"],
+    },
+    fullWidth: {
+      control: "boolean",
+    },
+    disabled: {
+      control: "boolean",
+    },
+    data: { table: { disable: true } },
+    defaultChecked: { table: { disable: true } },
+  },
+} satisfies Meta<typeof SegmentedControl>;
+
+export default meta;
+type Story = StoryObj<typeof SegmentedControl>;
+
+export const Default: Story = {
+  args: {
+    data: ["React", "Angular", "Vue", "Svelte"],
+    orientation: "horizontal",
+    fullWidth: false,
+  },
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
+  render: ({ withLayer, layer, ...args }: any) => {
+    return <SegmentedControl {...args} />;
+  },
+};
+
+export const FullWidth: Story = {
+  args: {
+    data: ["Daily", "Weekly", "Monthly"],
+    fullWidth: true,
+  },
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
+  render: ({ withLayer, layer, ...args }: any) => {
+    return <SegmentedControl {...args} />;
+  },
+};
+
+export const Vertical: Story = {
+  args: {
+    data: ["Option 1", "Option 2", "Option 3"],
+    orientation: "vertical",
+  },
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
+  render: ({ withLayer, layer, ...args }: any) => {
+    return <SegmentedControl {...args} />;
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    data: ["Preview", "Code", "Edit"],
+    disabled: true,
+  },
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
+  render: ({ withLayer, layer, ...args }: any) => {
+    return <SegmentedControl {...args} />;
+  },
+};
+
+const CheckIcon = () => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <polyline points="20 6 9 17 4 12" />
+  </svg>
+);
+
+export const WithIcons: Story = {
+  args: {
+    data: [
+      { value: "daily", label: "Daily", icon: <CheckIcon /> },
+      { value: "weekly", label: "Weekly", icon: <CheckIcon /> },
+      { value: "monthly", label: "Monthly", icon: <CheckIcon /> },
+    ],
+  },
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
+  render: ({ withLayer, layer, ...args }: any) => {
+    return <SegmentedControl {...args} />;
+  },
+};

package/src/components/Slider/Slider.stories.tsx

@@ -0,0 +1,282 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Slider } from "./Slider";
+import { formControlArgTypes } from "../../../.storybook/commonArgTypes";
+
+const meta: Meta<typeof Slider> = {
+  title: "UI-Kit/Slider",
+  component: Slider,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The \`Slider\` component wraps Mantine's Slider to support a premium design system, a bidirectional input state, 
+custom min/max labels, step indicators, and strict states like error, disabled, and read-only.
+
+### Architecture
+The component uses Recursica's unified \`FormControlWrapper\` and \`<WithReadOnlyWrapper>\` to render consistent form layouts (stacked, side-by-side) and read-only representations.
+All visual properties map perfectly to token values inside \`Slider.module.css\`.
+`,
+      },
+    },
+  },
+  argTypes: {
+    ...formControlArgTypes,
+    disabled: {
+      control: "boolean",
+      description: "Disables both the slider track and the text input field.",
+    },
+    error: {
+      control: "text",
+      description:
+        "Places the slider in an error state with custom border/icon highlights.",
+    },
+    required: {
+      control: "boolean",
+    },
+    label: {
+      control: "text",
+      description: "Outer form control label.",
+    },
+    assistiveText: {
+      control: "text",
+      description: "Assistive text rendered below or beside the component.",
+    },
+    readOnly: {
+      control: "boolean",
+      description: "Puts the component in static read-only mode.",
+    },
+    showInput: {
+      control: "boolean",
+      description: "Controls whether the numeric input box is visible.",
+    },
+    showMinMaxLabels: {
+      control: "boolean",
+      description: "Toggles rendering of min/max labels below the track.",
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Slider>;
+
+export const Default: Story = {
+  args: {
+    label: "Auditory Threshold",
+    assistiveText: "Specify the maximum decibel frequency boundary.",
+    defaultValue: 60,
+    min: 10,
+    max: 100,
+    step: 1,
+    showMinMaxLabels: true,
+  },
+};
+
+export const WithInputField: Story = {
+  args: {
+    ...Default.args,
+    showInput: true,
+  },
+};
+
+export const SideBySideLayout: Story = {
+  args: {
+    ...Default.args,
+    formLayout: "side-by-side",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    label: "Decommissioned Server Node",
+    assistiveText: "Modifications to this environment are frozen.",
+    defaultValue: 35,
+    disabled: true,
+  },
+};
+
+export const ErrorState: Story = {
+  args: {
+    label: "Core Temperature Alert",
+    assistiveText:
+      "Severe core degradation across the hypervisor socket cluster.",
+    defaultValue: 85,
+    error: "Thermal overload threshold exceeded.",
+    required: true,
+  },
+};
+
+export const StaticReadOnly: Story = {
+  args: {
+    label: "System Calibration Metrics",
+    assistiveText:
+      "Frozen baseline calibrations derived during initial staging.",
+    value: 65,
+    readOnly: true,
+  },
+};
+
+export const EditableReadOnly: Story = {
+  args: {
+    label: "Adaptive Node Output",
+    assistiveText:
+      "Click edit to unlock bidirectional input parameter boundaries.",
+    defaultValue: 15,
+    readOnly: true,
+    labelWithEditIcon: true,
+  },
+};
+
+export const WithMarks: Story = {
+  args: {
+    label: "Interactive Marks Map",
+    defaultValue: 50,
+    min: 0,
+    max: 100,
+    step: 10,
+    marks: [
+      { value: 0, label: "0%" },
+      { value: 25, label: "25%" },
+      { value: 50, label: "50%" },
+      { value: 75, label: "75%" },
+      { value: 100, label: "100%" },
+    ],
+    showMinMaxLabels: false,
+  },
+};
+
+export const WithIconsAndLabels: Story = {
+  args: {
+    label: "Volume",
+    assistiveText:
+      "Icons flank the track; min/max labels replace the raw bounds.",
+    defaultValue: 60,
+    minLabel: "Quiet",
+    maxLabel: "Loud",
+    tooltipLabel: (value: number) => `${value}%`,
+    icon: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
+      </svg>
+    ),
+    trailingIcon: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
+        <path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path>
+        <path d="M19.07 4.93a10 10 0 0 1 0 14.14"></path>
+      </svg>
+    ),
+  },
+};
+
+export const RangeMode: Story = {
+  args: {
+    label: "Price Range",
+    assistiveText: "Pass a [number, number] tuple to render two thumbs.",
+    defaultValue: [20, 80],
+    min: 0,
+    max: 100,
+    showMinMaxLabels: true,
+  },
+};
+
+export const RangeModeWithInputs: Story = {
+  args: {
+    ...RangeMode.args,
+    showInput: true,
+  },
+};
+
+export const RangeModeWithIconsAndInputs: Story = {
+  args: {
+    label: "Price Range",
+    assistiveText:
+      "Full range usage: leading/trailing icons, min/max label overrides, and both bound inputs.",
+    defaultValue: [20, 80],
+    min: 0,
+    max: 100,
+    showInput: true,
+    minLabel: "$0",
+    maxLabel: "$100",
+    tooltipLabel: (value: number) => `$${value}`,
+    icon: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
+      </svg>
+    ),
+    trailingIcon: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
+        <path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path>
+        <path d="M19.07 4.93a10 10 0 0 1 0 14.14"></path>
+      </svg>
+    ),
+  },
+};
+
+export const FormLayouts: Story = {
+  render: () => (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "2.5rem",
+        maxWidth: 600,
+      }}
+    >
+      <Slider
+        label="Stacked Layout"
+        assistiveText="This is the standard top-to-bottom stacked form layout."
+        defaultValue={40}
+        formLayout="stacked"
+      />
+      <Slider
+        label="Side-by-Side Layout"
+        assistiveText="This is the side-by-side layout aligning label beside control."
+        defaultValue={60}
+        formLayout="side-by-side"
+      />
+    </div>
+  ),
+};

package/src/components/Stack/Stack.stories.tsx

@@ -0,0 +1,108 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Stack } from "./Stack";
+import { Button } from "../Button";
+import { Text } from "../Text/Text";
+
+type StackStoryProps = React.ComponentProps<typeof Stack>;
+
+const meta: Meta<StackStoryProps> = {
+  title: "UI-Kit/Stack",
+  component: Stack,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Stack is a flex vertical layout container that maps directly to Mantine's Stack component allowing safe layout property passing.",
+      },
+    },
+  },
+  args: {
+    gap: "rec-default",
+    align: "stretch",
+    justify: "flex-start",
+  },
+  argTypes: {
+    gap: {
+      control: "select",
+      options: [
+        "rec-none",
+        "rec-sm",
+        "rec-default",
+        "rec-md",
+        "rec-lg",
+        "rec-xl",
+        "rec-2xl",
+        "xs",
+        "sm",
+        "md",
+        "lg",
+        "xl",
+      ],
+      description: "Gap between elements",
+    },
+    align: {
+      control: "select",
+      options: ["flex-start", "center", "flex-end", "stretch"],
+      description: "Align-items property",
+    },
+    justify: {
+      control: "select",
+      options: [
+        "flex-start",
+        "center",
+        "flex-end",
+        "space-between",
+        "space-around",
+      ],
+      description: "Justify-content property",
+    },
+    defaultChecked: {
+      table: { disable: true },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<StackStoryProps>;
+
+export const Default: Story = {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  render: ({ withLayer, layer, ...args }: any) => (
+    <Stack {...args}>
+      <Button variant="solid">Primary Block</Button>
+      <Button variant="outline">Secondary Block</Button>
+      <Text>Text element within Stack</Text>
+    </Stack>
+  ),
+};
+
+export const StaticGapSmall: Story = {
+  args: {
+    gap: "rec-sm",
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  render: ({ withLayer, layer, ...args }: any) => (
+    <Stack {...args}>
+      <Button variant="solid">Item 1</Button>
+      <Button variant="solid">Item 2</Button>
+      <Button variant="solid">Item 3</Button>
+    </Stack>
+  ),
+};
+
+export const StaticGapLarge: Story = {
+  args: {
+    gap: "rec-xl",
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  render: ({ withLayer, layer, ...args }: any) => (
+    <Stack {...args}>
+      <Button variant="solid">Item 1</Button>
+      <Button variant="solid">Item 2</Button>
+      <Button variant="solid">Item 3</Button>
+    </Stack>
+  ),
+};