@recursica/adapter-mantine-v8 1.3.4 → 1.3.5

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

@@ -0,0 +1,192 @@
+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) => <Button {...args} />,
+};
+
+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

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Card } from "./Card";
+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 (
+      <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>
+    );
+  },
+};
+
+export const HeaderlessAndFooterless: Story = {
+  args: {},
+  render: ({ ...args }) => {
+    return (
+      <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>
+    );
+  },
+};

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

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

@@ -0,0 +1,139 @@
+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>
+    );
+  },
+};

package/src/components/Chip/Chip.stories.tsx

@@ -0,0 +1,128 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Chip } from "./Chip";
+
+type ChipStoryProps = React.ComponentProps<typeof Chip>;
+
+const meta: Meta<ChipStoryProps> = {
+  title: "UI-Kit/Chip",
+  component: Chip,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The Chip component is used to represent interactive selections, descriptive tags, or dynamic filters natively bounded to Recursica variables. It can be used as a toggleable input, can render a custom leading `icon`, and handles close constraints automatically via the `onDelete` property.",
+      },
+    },
+  },
+  argTypes: {
+    error: {
+      control: "boolean",
+      description: "Applies the error state styling dynamically.",
+    },
+    disabled: {
+      control: "boolean",
+      description: "Applies disabled token states.",
+    },
+    checked: {
+      control: "boolean",
+      description: "Forces the visual selected state.",
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<ChipStoryProps>;
+
+// The Default story exposing native properties for the playground.
+export const Default: Story = {
+  args: {
+    children: "Default Chip",
+    error: false,
+    disabled: false,
+    checked: false,
+  },
+  render: (args: ChipStoryProps) => <Chip {...args} />,
+};
+
+// Static Stories for Regression Snapshots
+export const Unselected: Story = {
+  args: {
+    children: "Unselected",
+    checked: false,
+  },
+  render: (args: ChipStoryProps) => <Chip {...args} />,
+};
+
+export const Selected: Story = {
+  args: {
+    children: "Selected",
+    checked: true,
+  },
+  render: (args: ChipStoryProps) => <Chip {...args} onChange={() => {}} />,
+};
+
+export const ErrorState: Story = {
+  args: {
+    children: "Error",
+    error: true,
+    checked: false,
+  },
+  render: (args: ChipStoryProps) => <Chip {...args} />,
+};
+
+export const ErrorSelected: Story = {
+  args: {
+    children: "Error Selected",
+    error: true,
+    checked: true,
+  },
+  render: (args: ChipStoryProps) => <Chip {...args} onChange={() => {}} />,
+};
+
+export const Removable: Story = {
+  args: {
+    children: "Dismissible",
+    checked: false,
+    onDelete: () => console.log("Removal Action Triggered"),
+  },
+  render: (args: ChipStoryProps) => <Chip {...args} />,
+};
+
+const leadingIcon = (
+  <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="10"></circle>
+    <path d="M12 8v4"></path>
+    <path d="M12 16h.01"></path>
+  </svg>
+);
+
+export const WithLeadingIcon: Story = {
+  args: {
+    children: "Leading Icon",
+    checked: false,
+    icon: leadingIcon,
+  },
+  render: (args: ChipStoryProps) => <Chip {...args} />,
+};
+
+// Selecting a chip with a leading icon swaps in the checkmark rather than showing both —
+// matches MUI's native behavior of the check icon overlaying the leading icon.
+export const WithLeadingIconSelected: Story = {
+  args: {
+    children: "Leading Icon Selected",
+    checked: true,
+    icon: leadingIcon,
+  },
+  render: (args: ChipStoryProps) => <Chip {...args} onChange={() => {}} />,
+};