@recursica/adapter-mui-v7 1.3.2 → 1.3.3

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

@@ -1,157 +0,0 @@
-import React, { useState } from "react";
-import type { Meta, StoryObj } from "@storybook/react";
-import { Stepper, Step, StepLabel } 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",
-  },
-  argTypes: {
-    size: {
-      control: "radio",
-      options: ["small", "large"],
-    },
-    orientation: {
-      control: "radio",
-      options: ["horizontal", "vertical"],
-    },
-  },
-};
-
-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));
-
-  const steps = [
-    {
-      label: "First step",
-      description: "Create an account and set up your billing profile",
-    },
-    {
-      label: "Second step",
-      description:
-        "Verify email and ensure all notification preferences are correct",
-    },
-    { label: "Final step", description: "Get full access" },
-  ];
-
-  return (
-    <Flex direction="column" style={{ width: 600 }}>
-      <Stepper {...args} activeStep={active}>
-        {steps.map((step, index) => (
-          <Step key={index} completed={active > index}>
-            <StepLabel description={step.description}>{step.label}</StepLabel>
-          </Step>
-        ))}
-      </Stepper>
-
-      {active === steps.length && (
-        <div style={{ marginTop: 24, textAlign: "center" }}>
-          Completed, click back button to get to previous step
-        </div>
-      )}
-
-      <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));
-
-  const steps = [
-    {
-      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",
-    },
-    {
-      label: "Second step",
-      description:
-        "Verify email and ensure all notification preferences are correct",
-    },
-    { label: "Final step", description: undefined },
-  ];
-
-  return (
-    <Flex direction="column" style={{ width: 600 }}>
-      <Stepper {...args} activeStep={active}>
-        {steps.map((step, index) => (
-          <Step key={index} completed={active > index}>
-            <StepLabel description={step.description}>{step.label}</StepLabel>
-          </Step>
-        ))}
-      </Stepper>
-
-      {active === steps.length && (
-        <div style={{ marginTop: 24, textAlign: "center" }}>
-          Completed, click back button to get to previous step
-        </div>
-      )}
-
-      <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 spacing="rec-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,154 +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.Row key={element.name}>
-        <Table.Cell>{element.position}</Table.Cell>
-        <Table.Cell>{element.name}</Table.Cell>
-        <Table.Cell>{element.symbol}</Table.Cell>
-        <Table.Cell>{element.mass}</Table.Cell>
-      </Table.Row>
-    ));
-
-    return (
-      <Table.Container>
-        <Table>
-          <Table.Head>
-            <Table.Row>
-              <Table.Cell>Element position</Table.Cell>
-              <Table.Cell>Element name</Table.Cell>
-              <Table.Cell>Symbol</Table.Cell>
-              <Table.Cell>Atomic mass</Table.Cell>
-            </Table.Row>
-          </Table.Head>
-          <Table.Body>{rows}</Table.Body>
-        </Table>
-      </Table.Container>
-    );
-  },
-};
-
-export const SortedColumn: Story = {
-  render: () => {
-    const sorted = [...elements].sort((a, b) => a.mass - b.mass);
-    const rows = sorted.map((element) => (
-      <Table.Row key={element.name}>
-        <Table.Cell>{element.position}</Table.Cell>
-        <Table.Cell>{element.name}</Table.Cell>
-        <Table.Cell>{element.symbol}</Table.Cell>
-        <Table.Cell>{element.mass}</Table.Cell>
-      </Table.Row>
-    ));
-
-    return (
-      <Table.Container>
-        <Table>
-          <Table.Head>
-            <Table.Row>
-              <Table.Cell>Element position</Table.Cell>
-              <Table.Cell>Element name</Table.Cell>
-              <Table.Cell>Symbol</Table.Cell>
-              <Table.Cell sorted="asc">
-                <Table.SortLabel active direction="asc">
-                  Atomic mass
-                </Table.SortLabel>
-              </Table.Cell>
-            </Table.Row>
-          </Table.Head>
-          <Table.Body>{rows}</Table.Body>
-        </Table>
-      </Table.Container>
-    );
-  },
-};
-
-export const SelectedAndDisabledRows: Story = {
-  render: () => (
-    <Table.Container>
-      <Table>
-        <Table.Head>
-          <Table.Row>
-            <Table.Cell>Element position</Table.Cell>
-            <Table.Cell>Element name</Table.Cell>
-            <Table.Cell>Symbol</Table.Cell>
-            <Table.Cell>Atomic mass</Table.Cell>
-          </Table.Row>
-        </Table.Head>
-        <Table.Body>
-          {elements.map((element, index) => (
-            <Table.Row
-              key={element.name}
-              selected={index === 0}
-              disabled={index === elements.length - 1}
-            >
-              <Table.Cell>{element.position}</Table.Cell>
-              <Table.Cell>{element.name}</Table.Cell>
-              <Table.Cell>{element.symbol}</Table.Cell>
-              <Table.Cell>{element.mass}</Table.Cell>
-            </Table.Row>
-          ))}
-        </Table.Body>
-      </Table>
-    </Table.Container>
-  ),
-};
-
-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.Container>
-        <Table>
-          <Table.Head>
-            <Table.Row>
-              <Table.Cell>Item</Table.Cell>
-              <Table.Cell variant="currency">Price</Table.Cell>
-            </Table.Row>
-          </Table.Head>
-          <Table.Body>
-            {prices.map((row) => (
-              <Table.Row key={row.item}>
-                <Table.Cell>{row.item}</Table.Cell>
-                <Table.Cell variant="currency">
-                  ${row.price.toFixed(2)}
-                </Table.Cell>
-              </Table.Row>
-            ))}
-          </Table.Body>
-          <Table.Footer>
-            <Table.Row>
-              <Table.Cell>Total</Table.Cell>
-              <Table.Cell variant="currency">${total.toFixed(2)}</Table.Cell>
-            </Table.Row>
-          </Table.Footer>
-        </Table>
-      </Table.Container>
-    );
-  },
-};