@recursica/adapter-mui-v7 1.3.1 → 1.3.3

package/src/components/Panel/Panel.stories.tsx

@@ -1,227 +0,0 @@
-import { useState } from "react";
-import type { Meta, StoryObj } from "@storybook/react";
-import { Panel, type PanelProps } from "./Panel";
-import { Button } from "../Button";
-import { Text } from "../Text/Text";
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type PanelStoryArgs = Record<string, any>;
-
-const meta: Meta = {
-  title: "UI-Kit/Panel",
-  component: Panel,
-  tags: ["autodocs"],
-  argTypes: {
-    placement: {
-      control: "select",
-      options: ["left", "right", "top", "bottom"],
-      description: "Side of the screen the panel slides in from.",
-    },
-    title: {
-      control: "text",
-      description: "Panel title displayed in the header.",
-    },
-    withOverlay: {
-      control: "boolean",
-      description: "Whether to display a background overlay.",
-    },
-    withCloseButton: {
-      control: "boolean",
-      description: "Whether to display the close button in the header.",
-    },
-    wrapHeaderText: {
-      control: "boolean",
-      description:
-        "If true, forces the header text to a single line and truncates with an ellipsis.",
-    },
-    // Hide auto-detected HTML attributes
-    defaultChecked: { table: { disable: true } },
-    defaultValue: { table: { disable: true } },
-    suppressContentEditableWarning: { table: { disable: true } },
-    suppressHydrationWarning: { table: { disable: true } },
-  },
-  parameters: {
-    layout: "fullscreen",
-    docs: {
-      description: {
-        component: `
-The \`Panel\` component slides in or expands from the edge of the screen to reveal additional content or functionality. Built on Mui's \`Drawer\`, it enforces Recursica design tokens for styling.
-
-### Anatomy
-1. **Header** — Title and close icon, remains fixed on scroll
-2. **Divider** — Separates header/footer from content
-3. **Body (Slot)** — Scrollable content area for custom content
-4. **Footer** — Fixed action buttons (Recursica-specific)
-
-### Usage
-\`\`\`tsx
-const [opened, { open, close }] = useDisclosure(false);
-
-<Button onClick={open}>Open Panel</Button>
-<Panel opened={opened} onClose={close} title="Settings" placement="right">
-  Content goes here
-  <Panel.Footer>
-    <Button variant="outline">Cancel</Button>
-    <Button variant="solid">Save</Button>
-  </Panel.Footer>
-</Panel>
-\`\`\`
-        `,
-      },
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<PanelStoryArgs>;
-
-export const Default: Story = {
-  args: {
-    placement: "right",
-    title: "Panel Title",
-    withOverlay: true,
-    withCloseButton: true,
-    wrapHeaderText: false,
-  },
-  render: ({ wrapHeaderText, ...args }: PanelStoryArgs) => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [opened, setOpened] = useState(true);
-
-    return (
-      <>
-        <Button variant="solid" onClick={() => setOpened(true)}>
-          Open Panel
-        </Button>
-        <Panel
-          {...(args as PanelProps)}
-          opened={opened}
-          onClose={() => setOpened(false)}
-          title="Panel Title"
-          placement="right"
-          wrapHeaderText={wrapHeaderText}
-        >
-          <Text>
-            This is the panel body content area. Panels slide in from the edge
-            of the screen to reveal supplementary information, navigation
-            options, or toolsets.
-          </Text>
-          <Panel.Footer>
-            <Button variant="outline" onClick={() => setOpened(false)}>
-              Cancel
-            </Button>
-            <Button variant="solid">Save</Button>
-          </Panel.Footer>
-        </Panel>
-      </>
-    );
-  },
-};
-
-export const LeftPlacement: Story = {
-  args: {
-    placement: "left",
-    title: "Navigation",
-    withOverlay: true,
-    withCloseButton: true,
-    wrapHeaderText: false,
-  },
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  render: ({ withLayer, layer, ...args }: PanelStoryArgs) => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [opened, setOpened] = useState(true);
-
-    return (
-      <>
-        <Button variant="outline" onClick={() => setOpened(true)}>
-          Open Left Panel
-        </Button>
-        <Panel
-          {...(args as PanelProps)}
-          opened={opened}
-          onClose={() => setOpened(false)}
-        >
-          <Text>
-            A panel sliding in from the left, commonly used for navigation menus
-            or sidebars.
-          </Text>
-        </Panel>
-      </>
-    );
-  },
-};
-
-export const ScrollableContent: Story = {
-  args: {
-    placement: "right",
-    title: "Scrollable Panel",
-    withOverlay: true,
-    withCloseButton: true,
-    wrapHeaderText: false,
-  },
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  render: ({ withLayer, layer, ...args }: PanelStoryArgs) => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [opened, setOpened] = useState(true);
-
-    return (
-      <>
-        <Button variant="solid" onClick={() => setOpened(true)}>
-          Open Scrollable Panel
-        </Button>
-        <Panel
-          {...(args as PanelProps)}
-          opened={opened}
-          onClose={() => setOpened(false)}
-        >
-          {Array.from({ length: 20 }).map((_, i) => (
-            <p key={i} style={{ marginBottom: "1rem" }}>
-              Paragraph {i + 1}: This is sample content to demonstrate the
-              scrollable behavior of the panel when content exceeds the viewport
-              height.
-            </p>
-          ))}
-          <Panel.Footer>
-            <Button variant="outline" onClick={() => setOpened(false)}>
-              Close
-            </Button>
-            <Button variant="solid">Apply</Button>
-          </Panel.Footer>
-        </Panel>
-      </>
-    );
-  },
-};
-
-export const LongTitle: Story = {
-  args: {
-    placement: "right",
-    title:
-      "This is a ridiculously long panel title designed to test how the header CSS handles text overflow and whether it truncates correctly or breaks the layout",
-    withOverlay: true,
-    withCloseButton: true,
-    wrapHeaderText: true,
-  },
-  render: ({ ...args }: PanelStoryArgs) => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [opened, setOpened] = useState(true);
-
-    return (
-      <>
-        <Button variant="solid" onClick={() => setOpened(true)}>
-          Open Long Title Panel
-        </Button>
-        <Panel
-          {...(args as PanelProps)}
-          opened={opened}
-          onClose={() => setOpened(false)}
-        >
-          <Text>
-            Check the header to see if the long title is handled gracefully
-            without pushing the close button off screen.
-          </Text>
-        </Panel>
-      </>
-    );
-  },
-};

package/src/components/Popover/Popover.stories.tsx

@@ -1,133 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Popover } from "./Popover";
-import { Button } from "../Button";
-import { Text } from "../Text/Text";
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type PopoverStoryArgs = Record<string, any>;
-
-const meta: Meta = {
-  title: "UI-Kit/Popover",
-  component: Popover,
-  tags: ["autodocs"],
-  parameters: {
-    controls: {
-      // Explicitly list only the props integrators should configure — Mui's
-      // underlying Tooltip props would otherwise leak into Controls.
-      include: ["withBeak", "position", "defaultOpened"],
-    },
-    docs: {
-      description: {
-        component:
-          "The `Popover` component is a composable wrapper around Mui's Tooltip in click-controlled mode. It displays a dropdown panel when the user clicks a target element.",
-      },
-    },
-  },
-  argTypes: {
-    withBeak: {
-      control: "boolean",
-      description:
-        "Whether to display a beak (arrow) pointing from the dropdown to the target.",
-    },
-    position: {
-      control: "select",
-      options: [
-        "top",
-        "top-start",
-        "top-end",
-        "bottom",
-        "bottom-start",
-        "bottom-end",
-        "left",
-        "left-start",
-        "left-end",
-        "right",
-        "right-start",
-        "right-end",
-      ],
-      description: "Dropdown position relative to target",
-    },
-    defaultOpened: {
-      control: "boolean",
-      description: "Initial opened state",
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<PopoverStoryArgs>;
-
-export const Default: Story = {
-  args: {
-    withBeak: true,
-    position: "top",
-  },
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  render: ({ withLayer, layer, ...args }: PopoverStoryArgs) => {
-    return (
-      <Popover width={250} {...args}>
-        <Popover.Target>
-          <Button variant="solid">Toggle Popover</Button>
-        </Popover.Target>
-        <Popover.Dropdown>
-          <Text>
-            This is the popover content. It can contain any elements you want to
-            display when the user clicks the target.
-          </Text>
-        </Popover.Dropdown>
-      </Popover>
-    );
-  },
-};
-
-export const SolidDefault: Story = {
-  args: {
-    withBeak: true,
-    position: "top",
-    defaultOpened: true,
-  },
-  parameters: {
-    layout: "centered",
-    controls: { disable: true },
-  },
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  render: ({ withLayer, layer, ...args }: PopoverStoryArgs) => {
-    return (
-      <Popover width={200} {...args}>
-        <Popover.Target>
-          <Button variant="solid">Toggle Popover</Button>
-        </Popover.Target>
-        <Popover.Dropdown>
-          <Text>
-            This is a static representation of an opened popover with a beak.
-          </Text>
-        </Popover.Dropdown>
-      </Popover>
-    );
-  },
-};
-
-export const WithoutBeak: Story = {
-  args: {
-    withBeak: false,
-    position: "bottom",
-    defaultOpened: true,
-  },
-  parameters: {
-    layout: "centered",
-    controls: { disable: true },
-  },
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  render: ({ withLayer, layer, ...args }: PopoverStoryArgs) => {
-    return (
-      <Popover width={200} {...args}>
-        <Popover.Target>
-          <Button variant="outline">Bottom Popover</Button>
-        </Popover.Target>
-        <Popover.Dropdown>
-          <Text>This popover is positioned at the bottom and has no beak.</Text>
-        </Popover.Dropdown>
-      </Popover>
-    );
-  },
-};

package/src/components/Radio/Radio.stories.tsx

@@ -1,93 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Radio } from "./Radio";
-
-const meta: Meta<typeof Radio> = {
-  title: "UI-Kit/Radio",
-  component: Radio,
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      description: {
-        component: `
-The \`Radio\` component represents a fundamental standalone boolean selection node mapping to the native HTML \`<input type="radio">\`. 
-
-> [!WARNING]
-> This component represents the isolated primitive structure. If you need macro form configurations, standard vertical alignments, side-by-side array wrappers, or integrated assistive text and error borders natively, you MUST use the \`<Radio.Group>\` orchestrator instead!
-`,
-      },
-    },
-  },
-  argTypes: {
-    disabled: {
-      control: "boolean",
-    },
-    checked: {
-      control: "boolean",
-    },
-    readOnly: {
-      control: "boolean",
-    },
-    error: {
-      control: "boolean",
-    },
-    defaultChecked: {
-      control: "boolean",
-    },
-    controlMaxWidth: { table: { disable: true } },
-    controlMinWidth: { table: { disable: true } },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Radio>;
-
-export const Default: Story = {
-  args: {
-    label: "Standard Radio Primitive",
-  },
-};
-
-export const SideBySideLayout: Story = {
-  args: {
-    label: "Opt-in form alignment",
-    formLayout: "side-by-side",
-  },
-};
-
-export const CheckedState: Story = {
-  args: {
-    ...Default.args,
-    defaultChecked: true,
-  },
-};
-
-export const DisabledUnchecked: Story = {
-  args: {
-    ...Default.args,
-    disabled: true,
-  },
-};
-
-export const DisabledChecked: Story = {
-  args: {
-    ...Default.args,
-    disabled: true,
-    defaultChecked: true,
-  },
-};
-
-export const ReadOnly: Story = {
-  args: {},
-  render: () => (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        gap: "24px",
-      }}
-    >
-      <Radio label="Account Type" defaultChecked readOnly />
-    </div>
-  ),
-};

package/src/components/Radio/RadioGroup.stories.tsx

@@ -1,117 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Radio } from "./Radio";
-import { RadioGroup } from "./RadioGroup";
-import { useState } from "react";
-import { formControlArgTypes } from "../../../.storybook/commonArgTypes";
-
-const meta: Meta<typeof RadioGroup> = {
-  title: "UI-Kit/RadioGroup",
-  component: RadioGroup,
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      description: {
-        component: `
-The \`RadioGroup\` component is the mandatory organizational wrapper aggregating multiple \`Radio\` primitives into structurally bound unified selection arrays. It inherently leverages the \`FormControlWrapper\` granting native access to macroscopic layout structuring, assistive descriptions, and strict flex arrays.
-
-We exclusively utilize the \`formLayout\` parameter to control macro-level form flow:
-- **\`formLayout="stacked"\`**: Top-to-bottom layout cascading the Label bounding box down vertically into a standard stacked radio column array.
-- **\`formLayout="side-by-side"\`**: Flow architecture pulling the grouping Label dynamically to the left while structurally organizing the internal radios cleanly alongside it horizontally.
-`,
-      },
-    },
-  },
-  argTypes: {
-    ...formControlArgTypes,
-    readOnly: {
-      control: "boolean",
-      description:
-        "Toggles structural read-only data presentation bypassing interaction boundaries completely.",
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof RadioGroup>;
-
-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 (
-      <RadioGroup {...args} value={value} onChange={(_e, val) => setValue(val)}>
-        <Radio value="1" label="Option 1" />
-        <Radio value="2" label="Option 2" />
-      </RadioGroup>
-    );
-  },
-};
-
-export const StackedLayout: Story = {
-  args: {
-    formLayout: "stacked",
-    required: true,
-    label: "Hosting Provider",
-    error: "You must select a deployment provider.",
-  },
-  // 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>("aws");
-    return (
-      <RadioGroup {...args} value={value} onChange={(_e, val) => setValue(val)}>
-        <Radio value="aws" label="Amazon Web Services" />
-        <Radio
-          value="gcp"
-          label="Google Cloud Platform (with completely distributed edge computing environments bridging local runtime boundaries seamlessly.)"
-        />
-        <Radio value="azure" label="Microsoft Azure" />
-      </RadioGroup>
-    );
-  },
-};
-
-export const SideBySideLayout: Story = {
-  args: {
-    formLayout: "side-by-side",
-    labelOptionalText: "Recommended",
-    labelWithEditIcon: true,
-    label: "Deployment Region",
-    assistiveText: "Select the data center closest to your user base.",
-  },
-  // 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>("us-east");
-    return (
-      <RadioGroup {...args} value={value} onChange={(_e, val) => setValue(val)}>
-        <Radio value="us-east" label="US East (N. Virginia)" />
-        <Radio value="us-west" label="US West (Oregon)" />
-        <Radio value="eu-central" label="EU Central (Frankfurt)" />
-      </RadioGroup>
-    );
-  },
-};
-
-export const ReadOnly: Story = {
-  args: {
-    readOnly: true,
-    formLayout: "stacked",
-    required: true,
-    label: "Selected Framework",
-    assistiveText: "This selection cannot be changed after initialization.",
-  },
-  // 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>("react");
-    return (
-      <RadioGroup {...args} value={value} onChange={(_e, val) => setValue(val)}>
-        <Radio value="react" label="React" />
-        <Radio value="vue" label="Vue" />
-      </RadioGroup>
-    );
-  },
-};