@recursica/adapter-mantine-v8 1.3.4 → 1.3.5

package/src/components/Text/Text.stories.tsx

@@ -0,0 +1,148 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Text } from "./Text";
+import brand from "../../../recursica_brand.json";
+
+const BUILT_IN_VARIANTS = ["body", "caption", "overline"];
+
+// Custom styles defined under `brand.typography` (beyond h1-h6 and the built-ins above); each has
+// an exported `recursica_brand_typography_<name>` class, so `Text` renders it by name.
+// Sorted so the render order is stable across exports (the visual diff depends on it).
+const customVariants = Object.keys(brand.brand.typography)
+  .filter((name) => !/^h[1-6]$/.test(name) && !BUILT_IN_VARIANTS.includes(name))
+  .sort();
+
+const meta: Meta<typeof Text> = {
+  title: "UI-Kit/Text",
+  component: Text,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The standard `<Text>` component controls common body sizing scales and implicit paragraphs governed by the active theme layer. For semantic headings (`h1` through `h6`), use `<Heading>` instead.",
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: "select",
+      options: [...BUILT_IN_VARIANTS, ...customVariants],
+      description:
+        "Controls the standard logical boundary definitions natively extracted from Figma.",
+    },
+    color: {
+      control: "select",
+      options: ["default", "warning", "alert", "success"],
+      description:
+        "Semantic text color, bound to the active layer's text-element tokens via `data-color`.",
+    },
+    emphasis: {
+      control: "inline-radio",
+      options: ["high", "low"],
+      description:
+        "Emphasis level, bound to the theme's text-emphasis opacity tokens via `data-emphasis`.",
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Text>;
+
+export const Default: Story = {
+  args: {
+    variant: "body",
+    children:
+      "This is standard body typography controlled by the central UI-kit boundaries exclusively.",
+  },
+  render: ({ ...args }) => <Text {...args} />,
+};
+
+export const StaticVariations: Story = {
+  args: {},
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <Text variant="body">
+        Body (Base paragraph and generic information flow)
+      </Text>
+      <Text variant="caption">
+        Caption (Data table descriptions or micro-labels)
+      </Text>
+      <Text variant="overline">
+        Overline (Card contextual pre-headers and categorical tags)
+      </Text>
+      {customVariants.map((name) => (
+        <Text key={name} variant={name}>
+          {name} (Custom style from brand.typography)
+        </Text>
+      ))}
+    </div>
+  ),
+};
+
+export const Colors: Story = {
+  args: {},
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Semantic colors map to the active layer's text-element tokens. `default` follows the layer's base text color; `warning`, `alert`, and `success` pull their respective semantic tones.",
+      },
+    },
+  },
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <Text color="default">Default (follows the layer's base text color)</Text>
+      <Text color="warning">Warning (cautionary, non-blocking messaging)</Text>
+      <Text color="alert">Alert (errors and destructive states)</Text>
+      <Text color="success">Success (confirmations and positive states)</Text>
+    </div>
+  ),
+};
+
+export const Emphasis: Story = {
+  args: {},
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Emphasis controls text opacity via the theme's text-emphasis tokens. `high` (the default) is solid; `low` dims the text for secondary content.",
+      },
+    },
+  },
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <Text emphasis="high">
+        High emphasis (solid — primary reading content)
+      </Text>
+      <Text emphasis="low">
+        Low emphasis (dimmed — secondary or supporting content)
+      </Text>
+    </div>
+  ),
+};
+
+export const AsElement: Story = {
+  args: {},
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "`component` renders Text as an inline `span`, a `label` or a `div`. `h1` to `h6` throw; use `<Heading>`.",
+      },
+    },
+  },
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <Text>Default is a block paragraph.</Text>
+      <div>
+        Inline text:{" "}
+        <Text component="span" emphasis="low">
+          a span inside a line
+        </Text>
+        .
+      </div>
+      <Text component="label">A label</Text>
+    </div>
+  ),
+};

package/src/components/TextArea/TextArea.stories.tsx

@@ -0,0 +1,94 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { TextArea } from "./TextArea";
+import { formControlArgTypes } from "../../../.storybook/commonArgTypes";
+
+type TextAreaStoryProps = React.ComponentProps<typeof TextArea>;
+
+const meta: Meta<TextAreaStoryProps> = {
+  title: "UI-Kit/TextArea",
+  component: TextArea,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "TextArea provides a multi-line input field, mapping layout explicitly over the standardized FormControlWrapper.",
+      },
+    },
+  },
+  args: {
+    label: "Description",
+    assistiveText: "Enter your full description here.",
+    disabled: false,
+    required: false,
+    readOnly: false,
+    autosize: false,
+  },
+  argTypes: {
+    disabled: {
+      control: "boolean",
+    },
+    ...formControlArgTypes,
+    readOnly: {
+      control: "boolean",
+    },
+    autosize: {
+      control: "boolean",
+    },
+    minRows: {
+      control: "number",
+    },
+    maxRows: {
+      control: "number",
+    },
+    value: {
+      control: "text",
+    },
+    placeholder: {
+      control: "text",
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<TextAreaStoryProps>;
+
+export const Default: Story = {
+  args: {
+    placeholder: "Type something long...",
+  },
+};
+
+export const Autosize: Story = {
+  args: {
+    label: "Auto-sizing TextArea",
+    autosize: true,
+    minRows: 2,
+    maxRows: 6,
+    placeholder: "Type multiple lines here. Watch it grow!",
+  },
+};
+
+export const StaticError: Story = {
+  args: {
+    error: "This field requires a detailed explanation.",
+    value: "Some bad input.",
+  },
+};
+
+export const StaticDisabled: Story = {
+  args: {
+    disabled: true,
+    value: "This content is locked.",
+  },
+};
+
+export const StaticReadOnly: Story = {
+  args: {
+    label: "Read Only View",
+    readOnly: true,
+    value: "This text is safely frozen in read-only form.",
+  },
+};

package/src/components/TextField/TextField.stories.tsx

@@ -0,0 +1,162 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { TextField } from "./TextField";
+import { formControlArgTypes } from "../../../.storybook/commonArgTypes";
+const meta: Meta<typeof TextField> = {
+  title: "UI-Kit/TextField",
+  component: TextField,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The \`TextField\` primitive functions as a universal text entry input natively integrated directly into the unified \`FormControlWrapper\` architecture.
+
+### Architectural Decoupling
+Recursica forcibly overrides the internal Mantine \`Input.Wrapper\` defaults injecting an untamed \`<Input>\` layout primitive perfectly mapped back into our rigid design systems. State modifiers (e.g. Focus, Errors) hook flawlessly back onto our CSS module mapping variable colors strictly accurately.
+
+### Examples
+Always structure horizontal architectures via the generic \`formLayout\` parameter.
+\`\`\`tsx
+<TextField 
+  label="Primary Network Socket" 
+  assistiveText="Ensure connections resolve seamlessly." 
+  formLayout="stacked" 
+/>
+\`\`\`
+`,
+      },
+    },
+  },
+  argTypes: {
+    ...formControlArgTypes,
+    disabled: {
+      control: "boolean",
+      description:
+        "Maps the formal disabled variable states structurally to the input core.",
+    },
+    error: {
+      control: "text",
+      description:
+        "Applies the strict error string boundary rendering invalid structures seamlessly.",
+    },
+    required: {
+      control: "boolean",
+    },
+    label: {
+      control: "text",
+    },
+    assistiveText: {
+      control: "text",
+    },
+    readOnly: {
+      control: "boolean",
+      description:
+        "Toggles structural read-only data presentation explicitly blocking standard component bindings.",
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof TextField>;
+
+export const Default: Story = {
+  args: {
+    disabled: false,
+    label: "Authentication Token",
+    placeholder: "Enter validation hash...",
+    assistiveText:
+      "Tokens are stored identically locally and strictly ephemeral.",
+  },
+};
+
+export const FormsSideBySide: Story = {
+  args: {
+    label: "Distributed Access Control",
+    placeholder: "admin@node.local",
+    assistiveText:
+      "Specify the exact cluster administrative credentials enforcing strict domain policies. This violently long string tests native textual wrapping safely mapping alongside inputs.",
+    formLayout: "side-by-side",
+  },
+};
+
+export const WithLeadingIcon: Story = {
+  args: {
+    label: "Search Global Context",
+    placeholder: "Search for repositories...",
+    leftSection: (
+      <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 WithTrailingIcon: Story = {
+  args: {
+    label: "Validation URL",
+    placeholder: "https://recursica.dev",
+    rightSection: (
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <polyline points="20 6 9 17 4 12"></polyline>
+      </svg>
+    ),
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    label: "Disabled Deployment Node",
+    placeholder: "Disabled primitive map...",
+    disabled: true,
+  },
+};
+
+export const ErrorState: Story = {
+  args: {
+    label: "Cluster Failure",
+    placeholder: "Failing component instance...",
+    defaultValue: "Invalid Execution Plan",
+    error:
+      "Critical runtime node disconnect detected traversing DOM architecture.",
+    required: true,
+  },
+};
+
+export const StaticReadOnly: Story = {
+  args: {
+    label: "Static ReadOnly Review",
+    placeholder: "Ignored...",
+    value: "Explicitly Uneditable Bound Output",
+    readOnly: true,
+  },
+};
+
+export const EditableReadOnly: Story = {
+  args: {
+    label: "Editable ReadOnly Review",
+    placeholder: "Ignored until active...",
+    defaultValue: "Waiting for Edit Execution",
+    readOnly: true,
+    labelWithEditIcon: true,
+  },
+};

package/src/components/TimePicker/TimePicker.stories.tsx

@@ -0,0 +1,141 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { TimePicker } from "./TimePicker";
+import { formControlArgTypes } from "../../../.storybook/commonArgTypes";
+
+const meta: Meta<typeof TimePicker> = {
+  title: "UI-Kit/TimePicker",
+  component: TimePicker,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The \`TimePicker\` primitive provides a segmented hour/minute (optionally seconds) time entry input, paired with a dedicated AM/PM \`Dropdown\`-style selector, integrated directly into the \`FormControlWrapper\` architecture. This 12-hour + AM/PM composite is the only way this component operates — a Recursica-specific design, not a user-configurable option.
+
+### Examples
+Always structure horizontal architectures via the generic \`formLayout\` parameter.
+\`\`\`tsx
+<TimePicker
+  label="Start Time"
+  assistiveText="Select the deployment kick-off time."
+  formLayout="stacked"
+/>
+\`\`\`
+`,
+      },
+    },
+  },
+  argTypes: {
+    ...formControlArgTypes,
+    disabled: {
+      control: "boolean",
+      description:
+        "Maps the formal disabled variable states structurally to the input core.",
+    },
+    error: {
+      control: "text",
+      description:
+        "Applies the strict error string boundary rendering invalid structures seamlessly.",
+    },
+    required: {
+      control: "boolean",
+    },
+    label: {
+      control: "text",
+    },
+    assistiveText: {
+      control: "text",
+    },
+    readOnly: {
+      control: "boolean",
+      description:
+        "Toggles structural read-only data presentation explicitly blocking standard component bindings.",
+    },
+    withSeconds: {
+      control: "boolean",
+      description: "Shows and allows editing the seconds segment.",
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof TimePicker>;
+
+export const Default: Story = {
+  args: {
+    disabled: false,
+    label: "Meeting Time",
+    assistiveText: "Choose the start time in your local timezone.",
+  },
+};
+
+export const FormsSideBySide: Story = {
+  args: {
+    label: "Incident Start Time",
+    assistiveText: "When did the incident originally occur?",
+    formLayout: "side-by-side",
+  },
+};
+
+export const WithSeconds: Story = {
+  args: {
+    label: "Precise Execution Time",
+    assistiveText: "Includes a seconds segment for exact scheduling.",
+    withSeconds: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    label: "Disabled Time Slot",
+    disabled: true,
+  },
+};
+
+export const ErrorState: Story = {
+  args: {
+    label: "Deployment Window",
+    error: "The chosen time falls outside the allowed deployment window.",
+    required: true,
+  },
+};
+
+export const WithLeadingIcon: Story = {
+  args: {
+    label: "Meeting Time",
+    assistiveText: "Choose the start time in your local timezone.",
+    leftSection: (
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <circle cx="12" cy="12" r="10"></circle>
+        <polyline points="12 6 12 12 16 14"></polyline>
+      </svg>
+    ),
+  },
+};
+
+export const StaticReadOnly: Story = {
+  args: {
+    label: "Static ReadOnly Review",
+    value: "14:30",
+    readOnly: true,
+  },
+};
+
+export const EditableReadOnly: Story = {
+  args: {
+    label: "Editable ReadOnly Review",
+    defaultValue: "09:00",
+    readOnly: true,
+    labelWithEditIcon: true,
+  },
+};

package/src/components/Timeline/Timeline.stories.tsx

@@ -0,0 +1,128 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Timeline } from "./Timeline";
+
+const meta: Meta<typeof Timeline> = {
+  title: "UI-Kit/Timeline",
+  component: Timeline,
+  tags: ["autodocs"],
+  argTypes: {
+    defaultChecked: { table: { disable: true } },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Timeline>;
+
+export const Default: Story = {
+  args: {
+    active: 1,
+  },
+  render: (args) => (
+    <Timeline {...args}>
+      <Timeline.Item
+        title="Commit created"
+        timestamp="Yesterday"
+        bulletVariant="default"
+      >
+        You pushed 3 new commits to the repository.
+      </Timeline.Item>
+      <Timeline.Item
+        title="Pull request opened"
+        timestamp="2 days ago"
+        bulletVariant="default"
+      >
+        You opened a pull request for the feature branch.
+      </Timeline.Item>
+      <Timeline.Item
+        title="Code review completed"
+        timestamp="1 week ago"
+        bulletVariant="default"
+      >
+        Your pull request was approved by 2 reviewers.
+      </Timeline.Item>
+      <Timeline.Item
+        title="Branch merged"
+        timestamp="2 weeks ago"
+        bulletVariant="default"
+      >
+        Your feature branch was successfully merged into main.
+      </Timeline.Item>
+    </Timeline>
+  ),
+};
+
+export const BulletVariants: Story = {
+  args: {
+    active: 1,
+  },
+  render: (args) => (
+    <Timeline {...args}>
+      <Timeline.Item
+        title="Default Bullet"
+        timestamp="Standard configuration"
+        bulletVariant="default"
+      >
+        The default un-configured structural dot.
+      </Timeline.Item>
+      <Timeline.Item
+        title="Icon Bullet"
+        timestamp="Standard sized icons"
+        bulletVariant="icon"
+        bullet={
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <polyline points="20 6 9 17 4 12"></polyline>
+          </svg>
+        }
+      >
+        A standard structural icon node mapping.
+      </Timeline.Item>
+      <Timeline.Item
+        title="Alternative Icon"
+        timestamp="Larger structural bounds"
+        bulletVariant="icon-alternative"
+        bullet={
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+          </svg>
+        }
+      >
+        A slightly larger alternative bounding box for specialized icons.
+      </Timeline.Item>
+      <Timeline.Item
+        title="Avatar Bullet"
+        timestamp="Profile pictures"
+        bulletVariant="avatar"
+        bullet={
+          <img
+            src="https://avatars.githubusercontent.com/u/10353856?s=460&v=4"
+            alt="avatar"
+            style={{
+              width: "100%",
+              height: "100%",
+              objectFit: "cover",
+              borderRadius: "inherit",
+            }}
+          />
+        }
+      >
+        Avatar mappings inherently drop borders and leverage specific opacity
+        states.
+      </Timeline.Item>
+    </Timeline>
+  ),
+};