@recursica/adapter-mantine-v8 1.3.4 → 1.3.6

package/src/components/Toast/Toast.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Toast } from "./Toast";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type ToastStoryArgs = Record<string, any>;
+
+const meta = {
+  title: "UI-Kit/Toast",
+  component: Toast,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The `Toast` component is a standalone visual component wrapping Mantine's `Notification`. Note that this component is visually decoupled from `@mantine/notifications` and is meant to be used when you need to render a static or manually-controlled notification panel. If you need dynamic notification popups, you should use `@mantine/notifications` and configure its provider to use our styles.",
+      },
+    },
+  },
+  argTypes: {
+    title: {
+      control: "text",
+      description: "Title displayed above the message body",
+    },
+    children: {
+      control: "text",
+      description: "Main notification message",
+    },
+    withCloseButton: {
+      control: "boolean",
+      description: "Whether the close button is visible",
+    },
+  },
+} satisfies Meta<typeof Toast>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    variant: "default",
+    title: "Update Available",
+    children:
+      "A new version of the application is available to download. Please restart your browser to apply the latest security patches and feature updates. If you ignore this message, the update will automatically install during your next session.",
+    withCloseButton: true,
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  render: ({ withLayer, layer, ...args }: ToastStoryArgs) => {
+    return <Toast {...args} />;
+  },
+};
+
+export const WithIcon: Story = {
+  args: {
+    variant: "default",
+    title: "Action Required",
+    children:
+      "You must complete your profile setup before accessing this feature.",
+    icon: "⚠️",
+  },
+  parameters: {
+    controls: { disable: true },
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  render: ({ withLayer, layer, ...args }: ToastStoryArgs) => {
+    return <Toast {...args} />;
+  },
+};

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,165 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Tooltip, type TooltipProps } from "./Tooltip";
+import { Button } from "../Button";
+
+/**
+ * Tooltip story axes:
+ * - position: tooltip alignment relative to target
+ * - withBeak: beak (arrow) indicator on the tooltip
+ * - openDelay / closeDelay: hover timing controls
+ * - multiline: text wrapping behavior
+ * - disabled: suppress the tooltip entirely
+ * - layer: tested via the global Layer decorator (withLayer/layer args)
+ */
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type TooltipStoryArgs = Record<string, any>;
+
+const meta: Meta = {
+  title: "UI-Kit/Tooltip",
+  component: Tooltip,
+  tags: ["autodocs"],
+  argTypes: {
+    label: {
+      control: "text",
+      description: "Content displayed inside the tooltip.",
+    },
+    position: {
+      control: "select",
+      options: [
+        "bottom",
+        "bottom-start",
+        "bottom-end",
+        "top",
+        "top-start",
+        "top-end",
+        "left",
+        "left-start",
+        "left-end",
+        "right",
+        "right-start",
+        "right-end",
+      ],
+      description: "The position of the tooltip relative to the target.",
+    },
+    withBeak: {
+      control: "boolean",
+      description:
+        "Whether to display a beak (arrow) pointing to the target. Recursica equivalent of Mantine's withArrow.",
+    },
+    offset: {
+      control: "number",
+      description: "Distance in px between the tooltip and the target element.",
+    },
+    openDelay: {
+      control: "number",
+      description: "Delay in ms before the tooltip opens on hover.",
+    },
+    closeDelay: {
+      control: "number",
+      description: "Delay in ms before the tooltip closes when hover ends.",
+    },
+    disabled: {
+      control: "boolean",
+      description: "If set, the tooltip will not be rendered.",
+    },
+    opened: {
+      control: "boolean",
+      description:
+        "Force the tooltip to stay open. Useful for inspecting styling.",
+    },
+    // Hide auto-detected HTML attributes that leak from ElementProps<'div'>
+    defaultChecked: { table: { disable: true } },
+    defaultValue: { table: { disable: true } },
+    suppressContentEditableWarning: { table: { disable: true } },
+    suppressHydrationWarning: { table: { disable: true } },
+  },
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component: `
+The \`Tooltip\` component displays a floating label when the user hovers over or focuses a target element. It wraps Mantine's \`Tooltip\` while enforcing strict Recursica design token styling.
+
+### API
+
+Unlike \`HoverCard\`, Tooltip is a single component — content is passed via the \`label\` prop:
+\`\`\`tsx
+<Tooltip label="Helpful text" withBeak>
+  <Button>Hover me</Button>
+</Tooltip>
+\`\`\`
+
+### Static Sub-Components
+- \`Tooltip.Floating\` — A tooltip that follows the cursor position
+- \`Tooltip.Group\` — Groups multiple tooltips to share hover delay
+
+### Key Behaviors
+- The beak (arrow) is shown by default (\`withBeak={true}\`)
+- Supports \`openDelay\` and \`closeDelay\` for timing control
+- Set \`multiline\` to allow text wrapping within max-width
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<TooltipStoryArgs>;
+
+export const Default: Story = {
+  args: {
+    label: "This is a helpful tooltip",
+    position: "top",
+    withBeak: true,
+    offset: 5,
+    openDelay: 0,
+    closeDelay: 0,
+    disabled: false,
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  render: ({ withLayer, layer, ...args }: TooltipStoryArgs) => {
+    return (
+      <Tooltip {...(args as TooltipProps)}>
+        <Button variant="solid">Hover me</Button>
+      </Tooltip>
+    );
+  },
+};
+
+export const WithoutBeak: Story = {
+  args: {
+    label: "Tooltip without a beak indicator",
+    position: "top",
+    withBeak: false,
+    offset: 5,
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  render: ({ withLayer, layer, ...args }: TooltipStoryArgs) => {
+    return (
+      <Tooltip {...(args as TooltipProps)}>
+        <Button variant="outline">Without Beak</Button>
+      </Tooltip>
+    );
+  },
+};
+
+export const LongContent: Story = {
+  args: {
+    label:
+      "This is a longer tooltip message that demonstrates how text wraps within the maximum width defined by the design system.",
+    position: "top",
+    withBeak: true,
+    opened: true,
+    offset: 5,
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  render: ({ withLayer, layer, ...args }: TooltipStoryArgs) => {
+    return (
+      <Tooltip {...(args as TooltipProps)}>
+        <Button variant="solid">Long Content</Button>
+      </Tooltip>
+    );
+  },
+};

package/src/components/TransferList/TransferList.stories.tsx

@@ -0,0 +1,121 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { TransferList } from "./TransferList";
+import { formControlArgTypes } from "../../../.storybook/commonArgTypes";
+
+type TransferListStoryProps = React.ComponentProps<typeof TransferList>;
+
+const SAMPLE_DATA: TransferListStoryProps["defaultData"] = [
+  [
+    { value: "alpha", label: "Alpha" },
+    { value: "bravo", label: "Bravo" },
+    { value: "charlie", label: "Charlie" },
+    { value: "delta", label: "Delta" },
+    { value: "echo", label: "Echo" },
+  ],
+  [{ value: "foxtrot", label: "Foxtrot" }],
+];
+
+const GROUPED_DATA: TransferListStoryProps["defaultData"] = [
+  [
+    { value: "apple", label: "Apple", group: "Fruit" },
+    { value: "banana", label: "Banana", group: "Fruit" },
+    { value: "carrot", label: "Carrot", group: "Vegetable" },
+    { value: "daikon", label: "Daikon", group: "Vegetable" },
+    { value: "eagle", label: "Eagle" },
+  ],
+  [],
+];
+
+const meta: Meta<TransferListStoryProps> = {
+  title: "UI-Kit/TransferList",
+  component: TransferList,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "TransferList (dual listbox) lets users move items between two lists. Composes FormControlWrapper, TextField, Checkbox, CheckboxGroup, Badge, and Button.",
+      },
+    },
+  },
+  args: {
+    label: "Assign users",
+    assistiveText: "Move users into the selected list.",
+    defaultData: SAMPLE_DATA,
+    disabled: false,
+    required: false,
+  },
+  argTypes: {
+    disabled: {
+      control: "boolean",
+    },
+    ...formControlArgTypes,
+    sourceLabel: {
+      control: "text",
+    },
+    targetLabel: {
+      control: "text",
+    },
+    searchable: {
+      control: "boolean",
+    },
+    searchPlaceholder: {
+      control: "text",
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<TransferListStoryProps>;
+
+export const Default: Story = {};
+
+export const Grouped: Story = {
+  args: {
+    label: "Assign ingredients",
+    defaultData: GROUPED_DATA,
+  },
+};
+
+export const SideBySide: Story = {
+  args: {
+    formLayout: "side-by-side",
+  },
+};
+
+export const NoSearch: Story = {
+  args: {
+    label: "Assign users (no filtering)",
+    searchable: false,
+  },
+};
+
+export const StaticError: Story = {
+  args: {
+    error: "Select at least one user.",
+    defaultData: [[], SAMPLE_DATA![0]],
+  },
+};
+
+export const StaticDisabled: Story = {
+  args: {
+    disabled: true,
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    label: "Assign users",
+    defaultData: [[], []],
+  },
+};
+
+export const ReadOnly: Story = {
+  args: {
+    label: "Assigned users",
+    defaultData: [[], SAMPLE_DATA![0]],
+    readOnly: true,
+  },
+};

package/src/components/Tree/Tree.stories.tsx

@@ -0,0 +1,104 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Tree } from "./Tree";
+import { Layer, type RecursicaTreeNode } from "@recursica/adapter-common";
+
+const sampleData: RecursicaTreeNode[] = [
+  {
+    value: "documents",
+    label: "Documents",
+    children: [
+      { value: "documents/resume.pdf", label: "resume.pdf" },
+      { value: "documents/cover-letter.docx", label: "cover-letter.docx" },
+      {
+        value: "documents/taxes",
+        label: "Taxes",
+        children: [
+          { value: "documents/taxes/2023.pdf", label: "2023.pdf" },
+          { value: "documents/taxes/2024.pdf", label: "2024.pdf" },
+        ],
+      },
+    ],
+  },
+  {
+    value: "photos",
+    label: "Photos",
+    children: [
+      { value: "photos/vacation.jpg", label: "vacation.jpg" },
+      { value: "photos/family.jpg", label: "family.jpg" },
+    ],
+  },
+  { value: "readme.md", label: "readme.md" },
+];
+
+const meta: Meta<typeof Tree> = {
+  title: "UI-Kit/Tree",
+  component: Tree,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The \`Tree\` component renders hierarchical \`data\` as an expandable/selectable tree, wrapping \`@mantine/core\`'s \`Tree\` with a fully custom node renderer so every visual property (row box model, selected/unselected colors and typography, indent, item spacing) comes from Recursica's \`tree\` design tokens.
+
+Each node needs a unique \`value\` and a \`label\`; a \`children\` array (even empty) makes a node expandable.
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof Tree> = {
+  render: () => (
+    <Tree data={sampleData} initialExpandedValues={["documents"]} />
+  ),
+};
+
+export const AllExpanded: StoryObj<typeof Tree> = {
+  render: () => <Tree data={sampleData} initialExpandedValues="*" />,
+};
+
+export const PreSelected: StoryObj<typeof Tree> = {
+  render: () => (
+    <Tree
+      data={sampleData}
+      initialExpandedValues={["documents"]}
+      initialSelectedValues={["documents/resume.pdf"]}
+    />
+  ),
+};
+
+export const MultipleSelection: StoryObj<typeof Tree> = {
+  render: () => (
+    <Tree
+      data={sampleData}
+      initialExpandedValues="*"
+      initialSelectedValues={["documents/resume.pdf", "photos/vacation.jpg"]}
+      multiple
+    />
+  ),
+};
+
+/** Whole tree disabled, with a node pre-selected so the selected chip's styling under the
+ * disabled dimming can be checked alongside unselected rows. */
+export const Disabled: StoryObj<typeof Tree> = {
+  render: () => (
+    <Tree
+      data={sampleData}
+      initialExpandedValues={["documents"]}
+      initialSelectedValues={["documents/resume.pdf"]}
+      disabled
+    />
+  ),
+};
+
+/** Demonstrates the component nested inside a non-default layer — the one case where an
+ * explicit `<Layer>` wrap belongs in a story (see COMPONENT_STORYBOOK_GUIDE.md §9). */
+export const LayerOne: StoryObj<typeof Tree> = {
+  render: () => (
+    <Layer layer={1} style={{ padding: "24px" }}>
+      <Tree data={sampleData} initialExpandedValues={["documents"]} />
+    </Layer>
+  ),
+};