@recursica/adapter-mui-v7 1.3.2 → 1.3.3

package/src/components/Button/Button.stories.tsx

@@ -1,196 +0,0 @@
-import React from "react";
-import type { Meta, StoryObj } from "@storybook/react";
-import { Button } from "./Button";
-import { Layer } from "@recursica/adapter-common";
-
-type ButtonStoryProps = React.ComponentProps<typeof Button>;
-
-const meta: Meta<ButtonStoryProps> = {
-  title: "UI-Kit/Button",
-  component: Button,
-  tags: ["autodocs"],
-  argTypes: {
-    disabled: {
-      control: "boolean",
-    },
-    variant: {
-      control: "select",
-      options: ["solid", "outline", "text"],
-      description: "The visual variant of the button",
-    },
-    size: {
-      control: "radio",
-      options: ["default", "small"],
-      description: "The size of the button",
-    },
-    loading: {
-      control: "boolean",
-      description: "Sets the button to a loading state",
-    },
-    useRecursicaLoader: {
-      control: "boolean",
-      description:
-        "Use the Recursica Loader component instead of the default Mantine loader",
-    },
-    loaderVariant: {
-      control: "select",
-      options: ["oval", "bars", "dots"],
-      description: "The visual variant of the Recursica Loader",
-    },
-    loaderSize: {
-      control: "select",
-      options: [undefined, "sm", "md", "lg", "small", "default", "large"],
-      description: "The size variant for the loader",
-    },
-  },
-  args: {
-    useRecursicaLoader: true,
-    loaderVariant: "oval",
-    loaderSize: undefined,
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<ButtonStoryProps>;
-
-export const Default: Story = {
-  args: {
-    children: "Explore Button",
-    variant: "solid",
-    size: "default",
-    disabled: false,
-  },
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
-  render: ({ withLayer, layer, ...args }: any) => {
-    return <Button {...args} />;
-  },
-};
-
-export const SolidDefault: Story = {
-  args: {
-    children: "Solid Default",
-    variant: "solid",
-    size: "default",
-  },
-};
-
-export const OutlineSmall: Story = {
-  args: {
-    children: "Outline Small",
-    variant: "outline",
-    size: "small",
-  },
-};
-
-export const TextWithIcon: Story = {
-  args: {
-    children: "Text With Icon",
-    variant: "text",
-    size: "default",
-    icon: (
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      >
-        <circle cx="11" cy="11" r="8"></circle>
-        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
-      </svg>
-    ),
-  },
-};
-
-export const IconOnly: Story = {
-  args: {
-    variant: "solid",
-    size: "default",
-    "aria-label": "Search",
-    icon: (
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      >
-        <circle cx="11" cy="11" r="8"></circle>
-        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
-      </svg>
-    ),
-  },
-};
-
-export const LayerOneSolid: Story = {
-  args: {
-    children: "Layer 1 Solid",
-    variant: "solid",
-    size: "default",
-  },
-  render: (args: ButtonStoryProps) => (
-    <Layer layer={1} style={{ padding: "24px" }}>
-      <Button {...args} />
-    </Layer>
-  ),
-};
-
-export const DisabledSolid: Story = {
-  args: {
-    children: "Disabled Solid",
-    variant: "solid",
-    size: "default",
-    disabled: true,
-  },
-};
-
-export const PolymorphicAsLink: Story = {
-  args: {
-    children: "Button as Link",
-    variant: "solid",
-    size: "default",
-    component: "a",
-    href: "https://example.com",
-    target: "_blank",
-  },
-};
-
-export const TruncatedLabel: Story = {
-  args: {
-    children:
-      "This is an exceptionally long button label designed to demonstrate how the component handles text overflow by applying an ellipsis rather than breaking the layout or wrapping to multiple lines.",
-    variant: "solid",
-    size: "default",
-  },
-  render: (args: ButtonStoryProps) => (
-    <div style={{ maxWidth: "250px" }}>
-      <Button {...args} />
-    </div>
-  ),
-};
-
-export const Loading: Story = {
-  args: {
-    children: "Saving Changes",
-    variant: "solid",
-    size: "default",
-    loading: true,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "When `loading={true}` is applied, the Button injects the Recursica `<Loader />` component. Per Recursica design rules, placing a Button in a loading state automatically forces the `disabled={true}` state on the underlying element. This ensures the button immediately receives the brand theme disabled opacities without relying solely on semantic logic.",
-      },
-    },
-  },
-};

package/src/components/Card/Card.stories.tsx

@@ -1,132 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Card } from "./Card";
-import { Layer } from "@recursica/adapter-common";
-import { Button } from "../Button/Button";
-import { Group } from "../Group/Group";
-import { Heading } from "../Heading/Heading";
-import { Text } from "../Text/Text";
-
-const meta: Meta<typeof Card> = {
-  title: "UI-Kit/Card",
-  component: Card,
-  subcomponents: {
-    "Card.Header": Card.Header,
-    "Card.Content": Card.Content,
-    "Card.Footer": Card.Footer,
-    "Card.Section": Card.Section,
-  } as Record<string, React.ComponentType<unknown>>,
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          "The Card component acts as the foundational padded surface for grouping related information. It relies on standard internal compositional nodes (`Card.Header`, `Card.Content`, `Card.Footer`) mapped directly to the active Recursica design tokens to enforce layout gaps and margins seamlessly. Use the provided dot-notation wrappers rather than building ad-hoc generic sections.",
-      },
-    },
-  },
-  argTypes: {},
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Card>;
-
-export const Default: Story = {
-  args: {},
-  render: ({ ...args }) => {
-    return (
-      <div
-        style={{
-          padding: "48px",
-          backgroundColor: "#e9ecef",
-        }}
-      >
-        <Layer layer={0}>
-          <Card {...args}>
-            <Card.Header>Customer Activity Report</Card.Header>
-            <Card.Content>
-              <Text>
-                Card inner section content body. Notice how this acts as padded
-                content natively based on the overarching properties.
-                Recursica's vertical gutter governs vertical spacing between
-                siblings in the flex container.
-              </Text>
-              <Text>Another section showing the vertical gutter spacing.</Text>
-            </Card.Content>
-            <Card.Footer>
-              <Group justify="space-between" align="center">
-                <Text variant="caption">Generated today</Text>
-                <Button variant="solid">View Details</Button>
-              </Group>
-            </Card.Footer>
-          </Card>
-        </Layer>
-      </div>
-    );
-  },
-};
-
-export const HeaderlessAndFooterless: Story = {
-  args: {},
-  render: ({ ...args }) => {
-    return (
-      <div
-        style={{
-          padding: "48px",
-          backgroundColor: "#e9ecef",
-        }}
-      >
-        <Layer layer={0}>
-          <Card {...args}>
-            <Card.Content>
-              <Heading order={6}>Notice</Heading>
-              <Text>
-                This is a completely generic card payload dropping the Header
-                and Footer specific elements, simply acting as a padded
-                elevation boundary box directly mirroring native composability!
-              </Text>
-              <Button variant="solid">Acknowledge</Button>
-            </Card.Content>
-          </Card>
-        </Layer>
-      </div>
-    );
-  },
-};
-
-export const LayerDemonstration: Story = {
-  args: {},
-  render: ({ ...args }) => {
-    return (
-      <div
-        style={{
-          display: "flex",
-          gap: "32px",
-          backgroundColor: "#e9ecef",
-          padding: "32px",
-        }}
-      >
-        <Layer layer={1}>
-          <Card {...args}>
-            <Card.Header>Layer 1 Wrapper</Card.Header>
-            <Card.Content>
-              <Text>Content inside layer 1 card.</Text>
-            </Card.Content>
-          </Card>
-        </Layer>
-
-        <Layer layer={2}>
-          <Card {...args}>
-            <Card.Header>Layer 2 Wrapper</Card.Header>
-            <Card.Content>
-              <Text>
-                Content inside layer 2 card exposing a higher elevation drop
-                shadow inherently cascaded.
-              </Text>
-            </Card.Content>
-          </Card>
-        </Layer>
-      </div>
-    );
-  },
-};

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -1,97 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Checkbox } from "./Checkbox";
-
-const meta: Meta<typeof Checkbox> = {
-  title: "UI-Kit/Checkbox",
-  component: Checkbox,
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      description: {
-        component: `
-The \`Checkbox\` component is a precisely engineered, atomic form primitive representing boolean states natively aligned to the Recursica design system. It overrides Mantine's standard properties explicitly enforcing our variables natively across all structural boundaries.
-
-> [!IMPORTANT]  
-> The atomic \`Checkbox\` is intended primarily as an internal primitive. **When wrapping multiple Checkbox elements together or rendering form controls, always utilize the \`<Checkbox.Group>\` component.** \`Checkbox.Group\` inherits the global \`FormControlWrapper\`, granting instantaneous access to macroscopic layout structuring, assistive descriptions, validation errors, and strict flex arrays.
-
-### Usage
-To render a solitary component natively:
-\`\`\`tsx
-<Checkbox label="Acknowledge Terms" defaultChecked />
-\`\`\`
-`,
-      },
-    },
-  },
-  argTypes: {
-    disabled: {
-      control: "boolean",
-    },
-    readOnly: {
-      control: "boolean",
-      description:
-        "Toggles structural read-only data presentation bypassing interaction boundaries completely.",
-    },
-    controlMaxWidth: { table: { disable: true } },
-    controlMinWidth: { table: { disable: true } },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Checkbox>;
-
-export const Default: Story = {
-  args: {
-    disabled: false,
-    label: "Standard Unchecked Property",
-  },
-};
-
-export const SideBySideLayout: Story = {
-  args: {
-    label: "Opt-in form alignment",
-    formLayout: "side-by-side",
-  },
-};
-
-export const LongLabelWrap: Story = {
-  args: {
-    label:
-      "A meticulously long Checkbox label property demonstrating the absolute maximum 400px wrapper constraints actively snapping the text engine down onto a secondary wrapping line automatically without blowing out the visual boundaries.",
-  },
-};
-
-export const StaticVariations: Story = {
-  args: {},
-  render: () => (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        gap: "24px",
-      }}
-    >
-      <Checkbox label="Default Unchecked State" />
-      <Checkbox label="Acknowledge Configuration" defaultChecked />
-      <Checkbox label="Indeterminate Master" indeterminate />
-      <Checkbox label="Disabled Variant" disabled />
-      <Checkbox label="Disabled Checked Variant" checked disabled />
-    </div>
-  ),
-};
-
-export const ReadOnly: Story = {
-  args: {},
-  render: () => (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        gap: "24px",
-      }}
-    >
-      <Checkbox label="Accept Terms & Conditions" defaultChecked readOnly />
-    </div>
-  ),
-};

package/src/components/Checkbox/CheckboxGroup.stories.tsx

@@ -1,139 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Checkbox } from "./Checkbox";
-import { CheckboxGroup } from "./CheckboxGroup";
-import { useState } from "react";
-import { formControlArgTypes } from "../../../.storybook/commonArgTypes";
-
-const meta: Meta<typeof CheckboxGroup> = {
-  title: "UI-Kit/CheckboxGroup",
-  component: CheckboxGroup,
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      description: {
-        component: `
-The \`CheckboxGroup\` component is the mandatory organizational wrapper aggregating multiple \`Checkbox\` primitives into structurally bound unified 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 checkbox column array.
-- **\`formLayout="side-by-side"\`**: Flow architecture pulling the grouping Label dynamically to the left while structurally organizing the internal checkboxes cleanly alongside it horizontally.
-
-\`\`\`tsx
-<Checkbox.Group 
-  label="Execution Targets" 
-  assistiveText="Strictly mapped structural grouping dynamically applied natively."
-  formLayout="stacked" 
->
-  <Checkbox value="react" label="Browser Execution Context" />
-  <Checkbox value="svelte" label="Edge Nodes" />
-</Checkbox.Group>
-\`\`\`
-`,
-      },
-    },
-  },
-  argTypes: {
-    ...formControlArgTypes,
-    readOnly: {
-      control: "boolean",
-      description:
-        "Toggles structural read-only data presentation bypassing interaction boundaries completely.",
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof CheckboxGroup>;
-
-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 (
-      <Checkbox.Group {...args} value={value} onChange={setValue}>
-        <Checkbox value="1" label="Option 1" />
-        <Checkbox value="2" label="Option 2" />
-      </Checkbox.Group>
-    );
-  },
-};
-
-export const SideBySideLayout: Story = {
-  args: {
-    formLayout: "side-by-side",
-    labelOptionalText: "Recommended",
-    labelWithEditIcon: true,
-    label: "Frontend Frameworks",
-    assistiveText:
-      "Select all libraries currently in use for this specific workspace configuration.",
-  },
-  // 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 (
-      <Checkbox.Group {...args} value={value} onChange={setValue}>
-        <Checkbox value="react" label="React (Standard Build)" />
-        <Checkbox
-          value="svelte"
-          label="The Svelte architecture which provides a highly optimized, completely compiler-driven framework avoiding virtual DOM boundaries. This massively extended text explicitly guarantees accurate wrapper constraint checking and multi-line flex alignment."
-        />
-        <Checkbox value="vue" label="Vue Configuration Map" />
-      </Checkbox.Group>
-    );
-  },
-};
-
-export const StackedLayout: Story = {
-  args: {
-    formLayout: "stacked",
-    required: true,
-    label: "Execution Targets",
-    error: "You must select at least one deployment target to compile.",
-  },
-  // 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 (
-      <Checkbox.Group {...args} value={value} onChange={setValue}>
-        <Checkbox value="react" label="Browser Execution Context" />
-        <Checkbox
-          value="svelte"
-          label="Highly distributed Edge computing environments seamlessly bridging local runtime boundaries."
-        />
-        <Checkbox value="vue" label="Serverless Cloud Providers" />
-      </Checkbox.Group>
-    );
-  },
-};
-
-export const ReadOnly: Story = {
-  args: {
-    readOnly: true,
-    formLayout: "stacked",
-    required: true,
-    label: "Static ReadOnly Execution Locks",
-    assistiveText:
-      "This structure explicitly validates native component-level DOM preservation natively mapping lock bounds safely over interaction.",
-  },
-  // 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[]>(["disabledNode"]);
-    return (
-      <Checkbox.Group {...args} value={value} onChange={setValue}>
-        <Checkbox
-          value="disabledNode"
-          label="Structurally Checked Node natively"
-        />
-        <Checkbox
-          value="disabledNodeEmpty"
-          label="Unchecked Configuration Limit"
-        />
-      </Checkbox.Group>
-    );
-  },
-};