@recursica/mantine-adapter 0.41.0 → 0.42.1

package/src/components/TransferList/TransferList.module.css

@@ -1,41 +1,174 @@
-/*
- * EXEMPTIONS:
- * - TransferList is a "Coming Soon" stub component.
- * - It renders a placeholder and has no active implementation or CSS stylesheet yet.
- * - The following tokens generated by Figma are ignored until the component is fully built.
- */
-
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_properties_border-radius */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_properties_filter-items-gap */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_properties_gap */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_properties_header-style_fontFamily */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_properties_header-style_fontSize */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_properties_header-style_fontStyle */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_properties_header-style_fontWeight */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_properties_header-style_letterSpacing */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_properties_header-style_lineHeight */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_properties_header-style_textCase */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_properties_header-style_textDecoration */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_properties_height */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_properties_horizontal-padding */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_properties_title-filter-gap */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_properties_vertical-padding */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_properties_width */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_layouts_side-by-side_properties_top-bottom-margin */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_layouts_stacked_properties_top-bottom-margin */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_states_default_properties_border-size */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_states_disabled_properties_border-size */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_states_error_properties_border-size */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_states_focus_properties_border-size */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_states_default_properties_colors_background */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_states_default_properties_colors_border-color */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_states_default_properties_colors_header-color */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_states_disabled_properties_colors_background */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_states_disabled_properties_colors_border-color */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_states_disabled_properties_colors_header-color */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_states_error_properties_colors_background */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_states_error_properties_colors_border-color */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_states_error_properties_colors_header-color */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_states_focus_properties_colors_background */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_states_focus_properties_colors_border-color */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_states_focus_properties_colors_header-color */
+/* TOKEN INTERPRETATION NOTES (see TRANSFERLIST_IMPLEMENTATION_NOTES.md):
+   - `properties_gap` is applied to the row that holds [source pane, transfer buttons, target pane] —
+     it's the only unnested gap the schema defines at the component's own level.
+   - `properties_title-filter-gap` sits between each pane's header row and its search field.
+   - `properties_filter-items-gap` sits between each pane's search field and its item list. */
+
+.layoutOverride {
+  --form-control-margin-bottom: var(
+    --recursica_ui-kit_components_transfer-list_variants_layouts_stacked_properties_top-bottom-margin
+  );
+}
+
+.layoutOverride[data-form-layout="side-by-side"] {
+  --form-control-margin-bottom: var(
+    --recursica_ui-kit_components_transfer-list_variants_layouts_side-by-side_properties_top-bottom-margin
+  );
+}
+
+.root {
+  display: flex;
+  width: 100%;
+}
+
+.panes {
+  display: flex;
+  align-items: stretch;
+  gap: var(--recursica_ui-kit_components_transfer-list_properties_gap);
+  width: 100%;
+}
+
+.pane {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  min-width: 0;
+  flex: 1 1 var(--recursica_ui-kit_components_transfer-list_properties_width);
+  height: var(--recursica_ui-kit_components_transfer-list_properties_height);
+  padding: var(
+      --recursica_ui-kit_components_transfer-list_properties_vertical-padding
+    )
+    var(
+      --recursica_ui-kit_components_transfer-list_properties_horizontal-padding
+    );
+  border-width: 1px;
+  border-style: solid;
+  border-radius: var(
+    --recursica_ui-kit_components_transfer-list_properties_border-radius
+  );
+  border-color: var(
+    --recursica_ui-kit_components_transfer-list_properties_colors_border-color
+  );
+  background-color: var(
+    --recursica_ui-kit_components_transfer-list_properties_colors_background-color
+  );
+}
+
+.paneHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(
+    --recursica_ui-kit_components_transfer-list_properties_title-filter-gap
+  );
+  font-family: var(
+    --recursica_ui-kit_components_transfer-list_properties_header-style_fontFamily
+  );
+  font-size: var(
+    --recursica_ui-kit_components_transfer-list_properties_header-style_fontSize
+  );
+  font-style: var(
+    --recursica_ui-kit_components_transfer-list_properties_header-style_fontStyle
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_transfer-list_properties_header-style_fontWeight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_transfer-list_properties_header-style_letterSpacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_transfer-list_properties_header-style_lineHeight
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_transfer-list_properties_header-style_textDecoration
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_transfer-list_properties_header-style_textCase
+  );
+  color: var(
+    --recursica_ui-kit_components_transfer-list_properties_colors_header-color
+  );
+}
+
+.paneSearch {
+  margin-bottom: var(
+    --recursica_ui-kit_components_transfer-list_properties_filter-items-gap
+  );
+}
+
+.paneList {
+  flex: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  /* No token exists for the gap between stacked CheckboxGroup blocks (ungrouped row +
+     each named group) — the 31-variable transfer-list schema only defines gaps at the
+     header/search/pane level (see TRANSFERLIST_IMPLEMENTATION_NOTES.md). Left as an
+     intentional hardcoded value rather than borrowing another component's token, same
+     as FileUpload's untokened icon size. */
+  gap: 2px;
+  min-height: 0;
+}
+
+.emptyState {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  opacity: 0.6;
+  font-size: 14px;
+  padding: 16px;
+  text-align: center;
+}
+
+.transferColumn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  /* No token exists for spacing between the four transfer buttons — not part of the
+     31-variable schema. Left as an intentional hardcoded value (see TRANSFERLIST_IMPLEMENTATION_NOTES.md). */
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.chevron[data-direction="left"] {
+  transform: scaleX(-1);
+}
+
+/* -------------------------------------
+   STATE CASCADE
+-------------------------------------- */
+
+.root[data-error] .pane {
+  border-color: var(
+    --recursica_ui-kit_components_transfer-list_variants_states_error_properties_colors_border-color
+  ) !important;
+  background-color: var(
+    --recursica_ui-kit_components_transfer-list_variants_states_error_properties_colors_background-color
+  ) !important;
+}
+
+.root[data-error] .paneHeader {
+  color: var(
+    --recursica_ui-kit_components_transfer-list_variants_states_error_properties_colors_header-color
+  ) !important;
+}
+
+.root[data-disabled] .pane {
+  border-color: var(
+    --recursica_ui-kit_components_transfer-list_variants_states_disabled_properties_colors_border-color
+  ) !important;
+  background-color: var(
+    --recursica_ui-kit_components_transfer-list_variants_states_disabled_properties_colors_background-color
+  ) !important;
+  opacity: var(
+    --recursica_ui-kit_components_transfer-list_variants_states_disabled_properties_opacity
+  );
+}
+
+.root[data-disabled] .paneHeader {
+  color: var(
+    --recursica_ui-kit_components_transfer-list_variants_states_disabled_properties_colors_header-color
+  ) !important;
+}

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

@@ -1,17 +1,121 @@
+import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { TransferList } from "./TransferList";
-import { ComingSoon } from "@recursica/storybook-template";
+import { formControlArgTypes } from "../../../.storybook/commonArgTypes";
 
-const meta: Meta<typeof TransferList> = {
-  title: "UI-Kit/🚧 TransferList",
+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<typeof TransferList>;
+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 Default: Story = {
-  render: () => <ComingSoon componentName="TransferList" />,
+export const ReadOnly: Story = {
+  args: {
+    label: "Assigned users",
+    defaultData: [[], SAMPLE_DATA![0]],
+    readOnly: true,
+  },
 };