@recursica/adapter-mantine-v8 1.3.2 → 1.3.4

package/src/components/Stepper/Stepper.stories.tsx

@@ -1,148 +0,0 @@
-import React, { useState } from "react";
-import type { Meta, StoryObj } from "@storybook/react";
-import { Stepper } from "./Stepper";
-import { Button } from "../Button/Button";
-import { Group } from "../Group/Group";
-import { Flex } from "../Flex/Flex";
-
-const meta: Meta<typeof Stepper> = {
-  title: "UI-Kit/Stepper",
-  component: Stepper,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "centered",
-    docs: {
-      description: {
-        component: `
-The \`Stepper\` component provides a visual progression interface strictly mapped to Recursica's UI-Kit.
-This component wraps Mantine's \`Stepper\` and natively enforces Figma tokens for sizes, colors, gaps, and states (\`completed\`, \`current\`, \`upcoming\`).
-
-### Layout & Orientation
-Orientation dictates how the steps flow:
-- **horizontal**: Steps render side-by-side. 
-- **vertical**: Steps stack vertically, mapping seamlessly to the vertical gap tokens.
-        `,
-      },
-    },
-  },
-  argTypes: {
-    size: {
-      control: "radio",
-      options: ["small", "large"],
-    },
-    orientation: {
-      control: "radio",
-      options: ["horizontal", "vertical"],
-    },
-    defaultChecked: {
-      table: { disable: true },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Stepper>;
-
-const InteractiveStepper = (args: React.ComponentProps<typeof Stepper>) => {
-  const [active, setActive] = useState(1);
-  const nextStep = () =>
-    setActive((current) => (current < 3 ? current + 1 : current));
-  const prevStep = () =>
-    setActive((current) => (current > 0 ? current - 1 : current));
-
-  return (
-    <Flex direction="column" w={600}>
-      <Stepper {...args} active={active} onStepClick={setActive}>
-        <Stepper.Step
-          label="First step"
-          description="Create an account and set up your billing profile"
-        />
-        <Stepper.Step
-          label="Second step"
-          description="Verify email and ensure all notification preferences are correct"
-        />
-        <Stepper.Step label="Final step" description="Get full access" />
-        <Stepper.Completed>
-          Completed, click back button to get to previous step
-        </Stepper.Completed>
-      </Stepper>
-
-      <Group mt={24} justify="center" gap={8}>
-        <Button variant="outline" onClick={prevStep} disabled={active === 0}>
-          Previous step
-        </Button>
-        <Button variant="outline" onClick={nextStep} disabled={active === 3}>
-          Next step
-        </Button>
-      </Group>
-    </Flex>
-  );
-};
-
-export const Default: Story = {
-  render: (args) => <InteractiveStepper {...args} />,
-  args: {
-    size: "large",
-    orientation: "horizontal",
-  },
-};
-
-export const Small: Story = {
-  render: (args) => <InteractiveStepper {...args} />,
-  args: {
-    size: "small",
-    orientation: "horizontal",
-  },
-};
-
-export const Vertical: Story = {
-  render: (args) => <InteractiveStepper {...args} />,
-  args: {
-    size: "large",
-    orientation: "vertical",
-  },
-};
-
-const StressTestStepper = (args: React.ComponentProps<typeof Stepper>) => {
-  const [active, setActive] = useState(1);
-  const nextStep = () =>
-    setActive((current) => (current < 3 ? current + 1 : current));
-  const prevStep = () =>
-    setActive((current) => (current > 0 ? current - 1 : current));
-
-  return (
-    <Flex direction="column" w={600}>
-      <Stepper {...args} active={active} onStepClick={setActive}>
-        <Stepper.Step
-          label="This is an extremely long step title designed to test how the layout handles multiline text wrapping and constraints"
-          description="Create an account and set up your billing profile"
-        />
-        <Stepper.Step
-          label="Second step"
-          description="Verify email and ensure all notification preferences are correct"
-        />
-        <Stepper.Step label="Final step" />
-        <Stepper.Completed>
-          Completed, click back button to get to previous step
-        </Stepper.Completed>
-      </Stepper>
-
-      <Group mt={24} justify="center" gap={8}>
-        <Button variant="outline" onClick={prevStep} disabled={active === 0}>
-          Previous step
-        </Button>
-        <Button variant="outline" onClick={nextStep} disabled={active === 3}>
-          Next step
-        </Button>
-      </Group>
-    </Flex>
-  );
-};
-
-export const LayoutStressTest: Story = {
-  render: (args) => <StressTestStepper {...args} />,
-  args: {
-    size: "large",
-    orientation: "horizontal",
-  },
-};

package/src/components/Switch/Switch.stories.tsx

@@ -1,114 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Switch } from "./Switch";
-import { Stack } from "../Stack/Stack";
-
-const meta: Meta<typeof Switch> = {
-  title: "UI-Kit/Switch",
-  component: Switch,
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      description: {
-        component: `
-The \`Switch\` component is an atomic form primitive representing boolean states, natively aligned to the Recursica design system.
-
-> [!IMPORTANT]  
-> Unlike \`Checkbox\`, the \`Switch\` is typically used for standalone settings toggles. It fully supports the universal \`ReadOnlyField\` boundaries when passed the \`readOnly\` attribute.
-
-### Usage
-To render a standard switch:
-\`\`\`tsx
-<Switch label="Enable Notifications" defaultChecked />
-\`\`\`
-`,
-      },
-    },
-  },
-  argTypes: {
-    checked: {
-      control: "boolean",
-    },
-    disabled: {
-      control: "boolean",
-    },
-    required: {
-      control: "boolean",
-    },
-    error: {
-      control: "boolean",
-    },
-    defaultChecked: {
-      control: "boolean",
-    },
-    readOnly: {
-      control: "boolean",
-      description:
-        "Toggles structural read-only data presentation bypassing interaction boundaries completely.",
-    },
-    controlMaxWidth: { table: { disable: true } },
-    controlMinWidth: { table: { disable: true } },
-    emptyValueComponent: { table: { disable: true } },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Switch>;
-
-export const Default: Story = {
-  args: {
-    disabled: false,
-    label: "Standard Switch",
-  },
-  // We explicitly destructure global Storybook injected arguments so they do not leak into the DOM natively.
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
-  render: ({ withLayer, layer, ...args }: any) => <Switch {...args} />,
-};
-
-export const SideBySideLayout: Story = {
-  args: {
-    label: "Opt-in form alignment",
-    formLayout: "side-by-side",
-  },
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
-  render: ({ withLayer, layer, ...args }: any) => <Switch {...args} />,
-};
-
-export const StaticVariations: Story = {
-  args: {},
-  render: () => (
-    <Stack gap="xl">
-      <Switch label="Default Unchecked State" />
-      <Switch label="Checked State" defaultChecked />
-      <Switch label="Disabled Unchecked" disabled />
-      <Switch label="Disabled Checked" defaultChecked disabled />
-    </Stack>
-  ),
-};
-
-export const ReadOnly: Story = {
-  args: {
-    ...Default.args,
-    readOnly: true,
-  },
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
-  render: ({ withLayer, layer, ...args }: any) => <Switch {...args} />,
-};
-
-export const CustomReadOnly: Story = {
-  args: {
-    ...Default.args,
-    readOnly: true,
-  },
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
-  render: ({ withLayer, layer, ...args }: any) => (
-    <Switch
-      {...args}
-      readOnlyComponent={({ checked, label }) => (
-        <span style={{ fontWeight: "bold", color: checked ? "green" : "red" }}>
-          {label} {checked ? "ENABLED" : "DISABLED"}
-        </span>
-      )}
-    />
-  ),
-};

package/src/components/Switch/SwitchGroup.stories.tsx

@@ -1,132 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Switch } from "./Switch";
-import { SwitchGroup } from "./SwitchGroup";
-import { useState } from "react";
-import { formControlArgTypes } from "../../../.storybook/commonArgTypes";
-
-const meta: Meta<typeof SwitchGroup> = {
-  title: "UI-Kit/SwitchGroup",
-  component: SwitchGroup,
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      description: {
-        component: `
-The \`SwitchGroup\` component is the mandatory organizational wrapper for orchestrating \`Switch\` primitives into macro form layouts. It inherently leverages the \`FormControlWrapper\`, granting native access to structural alignments, assistive descriptions, and strict flex arrays.
-
-### Supported Layout Vectors
-- **\`formLayout="stacked"\`**: Top-to-bottom layout cascading the Label bounding box down vertically into a standard stacked switch array.
-- **\`formLayout="side-by-side"\`**: Flow architecture pulling the grouping Label dynamically to the left while structurally organizing the internal switches cleanly alongside it horizontally.
-
-> [!IMPORTANT]  
-> If you require a solitary \`Switch\` field to natively accept an overarching form label, assistive text, or align with other side-by-side components in a form column, you must wrap it inside a \`Switch.Group\` to trigger the \`FormControlWrapper\` mapping.
-`,
-      },
-    },
-  },
-  argTypes: {
-    ...formControlArgTypes,
-    readOnly: {
-      control: "boolean",
-      description:
-        "Passes read-only lock natively down mapping inner switches into explicitly disabled states.",
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof SwitchGroup>;
-
-export const Default: Story = {
-  args: {
-    formLayout: "stacked",
-    label: "Standard Group",
-  },
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
-  render: function StoryRender({ withLayer, layer, ...args }: any) {
-    const [value, setValue] = useState<string[]>([]);
-    return (
-      <SwitchGroup {...args} value={value} onChange={setValue}>
-        <Switch value="1" label="Option 1" />
-        <Switch value="2" label="Option 2" />
-      </SwitchGroup>
-    );
-  },
-};
-
-export const StackedLayout: Story = {
-  args: {
-    formLayout: "stacked",
-    label: "Notification Settings",
-    description: "Manage your preferences.",
-    assistiveText: "We recommend turning these on.",
-    error: "",
-    required: true,
-  },
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
-  render: function StoryRender({ withLayer, layer, ...args }: any) {
-    const [value, setValue] = useState<string[]>(["email"]);
-    return (
-      <SwitchGroup {...args} value={value} onChange={setValue}>
-        <Switch value="email" label="Email Alerts" />
-        <Switch value="push" label="Push Notifications" />
-        <Switch value="sms" label="SMS Messages" />
-      </SwitchGroup>
-    );
-  },
-};
-
-export const SideBySideLayout: Story = {
-  args: {
-    ...StackedLayout.args,
-    formLayout: "side-by-side",
-    labelSize: "default",
-    labelAlignment: "left",
-  },
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
-  render: function StoryRender({ withLayer, layer, ...args }: any) {
-    const [value, setValue] = useState<string[]>([]);
-    return (
-      <SwitchGroup {...args} value={value} onChange={setValue}>
-        <Switch value="weekly" label="Weekly Digest" />
-        <Switch value="marketing" label="Marketing Emails" />
-      </SwitchGroup>
-    );
-  },
-};
-
-export const SolitaryFormControl: Story = {
-  args: {
-    formLayout: "side-by-side",
-    label: "Enable Backups",
-    description: "Automatically back up your data nightly.",
-  },
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
-  render: function StoryRender({ withLayer, layer, ...args }: any) {
-    const [value, setValue] = useState<string[]>(["auto"]);
-    return (
-      <SwitchGroup {...args} value={value} onChange={setValue}>
-        <Switch value="auto" label="Auto-backup" />
-      </SwitchGroup>
-    );
-  },
-};
-
-export const ReadOnly: Story = {
-  args: {
-    ...StackedLayout.args,
-    readOnly: true,
-  },
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
-  render: function StoryRender({ withLayer, layer, ...args }: any) {
-    const [value, setValue] = useState<string[]>(["email", "sms"]);
-    return (
-      <SwitchGroup {...args} value={value} onChange={setValue}>
-        <Switch value="email" label="Email Alerts" />
-        <Switch value="push" label="Push Notifications" />
-        <Switch value="sms" label="SMS Messages" />
-      </SwitchGroup>
-    );
-  },
-};

package/src/components/Table/Table.stories.tsx

@@ -1,140 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Table } from "./Table";
-
-const meta: Meta<typeof Table> = {
-  title: "UI-Kit/Table",
-  component: Table,
-  tags: ["autodocs"],
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Table>;
-
-const elements = [
-  { position: 6, mass: 12.011, symbol: "C", name: "Carbon" },
-  { position: 7, mass: 14.007, symbol: "N", name: "Nitrogen" },
-  { position: 8, mass: 15.999, symbol: "O", name: "Oxygen" },
-  { position: 9, mass: 18.998, symbol: "F", name: "Fluorine" },
-  { position: 10, mass: 20.18, symbol: "Ne", name: "Neon" },
-];
-
-export const Default: Story = {
-  render: () => {
-    const rows = elements.map((element) => (
-      <Table.Tr key={element.name}>
-        <Table.Td>{element.position}</Table.Td>
-        <Table.Td>{element.name}</Table.Td>
-        <Table.Td>{element.symbol}</Table.Td>
-        <Table.Td>{element.mass}</Table.Td>
-      </Table.Tr>
-    ));
-
-    return (
-      <Table>
-        <Table.Thead>
-          <Table.Tr>
-            <Table.Th>Element position</Table.Th>
-            <Table.Th>Element name</Table.Th>
-            <Table.Th>Symbol</Table.Th>
-            <Table.Th>Atomic mass</Table.Th>
-          </Table.Tr>
-        </Table.Thead>
-        <Table.Tbody>{rows}</Table.Tbody>
-      </Table>
-    );
-  },
-};
-
-export const SortedColumn: Story = {
-  render: () => {
-    const sorted = [...elements].sort((a, b) => a.mass - b.mass);
-    const rows = sorted.map((element) => (
-      <Table.Tr key={element.name}>
-        <Table.Td>{element.position}</Table.Td>
-        <Table.Td>{element.name}</Table.Td>
-        <Table.Td>{element.symbol}</Table.Td>
-        <Table.Td>{element.mass}</Table.Td>
-      </Table.Tr>
-    ));
-
-    return (
-      <Table>
-        <Table.Thead>
-          <Table.Tr>
-            <Table.Th>Element position</Table.Th>
-            <Table.Th>Element name</Table.Th>
-            <Table.Th>Symbol</Table.Th>
-            <Table.Th sorted="asc">Atomic mass</Table.Th>
-          </Table.Tr>
-        </Table.Thead>
-        <Table.Tbody>{rows}</Table.Tbody>
-      </Table>
-    );
-  },
-};
-
-export const SelectedAndDisabledRows: Story = {
-  render: () => (
-    <Table>
-      <Table.Thead>
-        <Table.Tr>
-          <Table.Th>Element position</Table.Th>
-          <Table.Th>Element name</Table.Th>
-          <Table.Th>Symbol</Table.Th>
-          <Table.Th>Atomic mass</Table.Th>
-        </Table.Tr>
-      </Table.Thead>
-      <Table.Tbody>
-        {elements.map((element, index) => (
-          <Table.Tr
-            key={element.name}
-            selected={index === 0}
-            disabled={index === elements.length - 1}
-          >
-            <Table.Td>{element.position}</Table.Td>
-            <Table.Td>{element.name}</Table.Td>
-            <Table.Td>{element.symbol}</Table.Td>
-            <Table.Td>{element.mass}</Table.Td>
-          </Table.Tr>
-        ))}
-      </Table.Tbody>
-    </Table>
-  ),
-};
-
-export const CurrencyColumnWithFooter: Story = {
-  render: () => {
-    const prices = [
-      { item: "Widget", price: 19.99 },
-      { item: "Gadget", price: 49.5 },
-      { item: "Gizmo", price: 9.25 },
-    ];
-    const total = prices.reduce((sum, row) => sum + row.price, 0);
-
-    return (
-      <Table>
-        <Table.Thead>
-          <Table.Tr>
-            <Table.Th>Item</Table.Th>
-            <Table.Th variant="currency">Price</Table.Th>
-          </Table.Tr>
-        </Table.Thead>
-        <Table.Tbody>
-          {prices.map((row) => (
-            <Table.Tr key={row.item}>
-              <Table.Td>{row.item}</Table.Td>
-              <Table.Td variant="currency">${row.price.toFixed(2)}</Table.Td>
-            </Table.Tr>
-          ))}
-        </Table.Tbody>
-        <Table.Tfoot>
-          <Table.Tr>
-            <Table.Td>Total</Table.Td>
-            <Table.Td variant="currency">${total.toFixed(2)}</Table.Td>
-          </Table.Tr>
-        </Table.Tfoot>
-      </Table>
-    );
-  },
-};

package/src/components/Tabs/Tabs.stories.tsx

@@ -1,154 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Tabs } from "./Tabs";
-import { Flex } from "../Flex/Flex";
-
-const meta: Meta<typeof Tabs> = {
-  title: "UI-Kit/Tabs",
-  component: Tabs,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "centered",
-  },
-  argTypes: {
-    variant: {
-      control: "radio",
-      options: ["default", "outline", "pills"],
-    },
-    orientation: {
-      control: "radio",
-      options: ["horizontal", "vertical"],
-    },
-    // @ts-expect-error Custom prop not in native TabsProps
-    disabled: {
-      control: "boolean",
-    },
-    defaultChecked: {
-      table: {
-        disable: true,
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Tabs>;
-
-const InteractiveTabs = (
-  args: React.ComponentProps<typeof Tabs> & { disabled?: boolean },
-) => {
-  return (
-    <Flex w={600} h={300}>
-      <Tabs defaultValue="gallery" {...args}>
-        <Tabs.List>
-          <Tabs.Tab
-            value="gallery"
-            disabled={args.disabled}
-            leftSection={
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              >
-                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
-                <circle cx="8.5" cy="8.5" r="1.5"></circle>
-                <polyline points="21 15 16 10 5 21"></polyline>
-              </svg>
-            }
-          >
-            Gallery
-          </Tabs.Tab>
-          <Tabs.Tab
-            value="messages"
-            disabled={args.disabled}
-            leftSection={
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              >
-                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
-              </svg>
-            }
-          >
-            Messages
-          </Tabs.Tab>
-          <Tabs.Tab
-            value="settings"
-            disabled={args.disabled}
-            leftSection={
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              >
-                <circle cx="12" cy="12" r="3"></circle>
-                <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
-              </svg>
-            }
-          >
-            Settings
-          </Tabs.Tab>
-        </Tabs.List>
-
-        <Tabs.Panel value="gallery">Gallery tab content</Tabs.Panel>
-
-        <Tabs.Panel value="messages">Messages tab content</Tabs.Panel>
-
-        <Tabs.Panel value="settings">Settings tab content</Tabs.Panel>
-      </Tabs>
-    </Flex>
-  );
-};
-
-export const Default: Story = {
-  render: (args) => <InteractiveTabs {...args} />,
-  args: {
-    variant: "default",
-    orientation: "horizontal",
-  },
-};
-
-export const Outline: Story = {
-  render: (args) => <InteractiveTabs {...args} />,
-  args: {
-    variant: "outline",
-    orientation: "horizontal",
-  },
-};
-
-export const Pills: Story = {
-  render: (args) => <InteractiveTabs {...args} />,
-  args: {
-    variant: "pills",
-    orientation: "horizontal",
-  },
-};
-
-export const Vertical: Story = {
-  render: (args) => <InteractiveTabs {...args} />,
-  args: {
-    variant: "default",
-    orientation: "vertical",
-  },
-};
-
-export const Inverted: Story = {
-  render: (args) => <InteractiveTabs {...args} />,
-  args: {
-    variant: "default",
-    orientation: "horizontal",
-    inverted: true,
-  },
-};