@recursica/adapter-mui-v7 1.3.2 → 1.3.3

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

@@ -1,163 +0,0 @@
-/* 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

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

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

@@ -1,108 +0,0 @@
-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: {
-    spacing: "rec-default",
-    alignItems: "stretch",
-    justifyContent: "flex-start",
-  },
-  argTypes: {
-    spacing: {
-      control: "select",
-      options: [
-        "rec-none",
-        "rec-sm",
-        "rec-default",
-        "rec-md",
-        "rec-lg",
-        "rec-xl",
-        "rec-2xl",
-        "xs",
-        "sm",
-        "md",
-        "lg",
-        "xl",
-      ],
-      description: "Space between elements",
-    },
-    alignItems: {
-      control: "select",
-      options: ["flex-start", "center", "flex-end", "stretch"],
-      description: "Align-items property",
-    },
-    justifyContent: {
-      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: {
-    spacing: "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: {
-    spacing: "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>
-  ),
-};