@multiplatform.one/forms 6.0.0

package/dist/cjs/fields/Combobox/Combobox.spec.native.js

@@ -0,0 +1,95 @@
+"use strict";
+
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_vitest = require("vitest");
+var import_test_utils = require("@multiplatform.one/test-utils");
+var import_Form = require("../../Form/index.native.js");
+var import_index = require("./index.native.js");
+var options = [{
+  value: "apple",
+  label: "Apple"
+}, {
+  value: "banana",
+  label: "Banana"
+}, {
+  value: "cherry",
+  label: "Cherry"
+}];
+(0, import_vitest.describe)("Combobox", function () {
+  (0, import_vitest.describe)("without form context", function () {
+    (0, import_vitest.it)("renders with label", function () {
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Combobox, {
+        label: "Fruit",
+        name: "fruit",
+        options
+      }));
+      (0, import_vitest.expect)(result.findTextElement("Fruit")).toBeDefined();
+    });
+    (0, import_vitest.it)("renders required label with asterisk", function () {
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Combobox, {
+        label: "Required",
+        name: "req",
+        options,
+        required: true
+      }));
+      var label = result.container.querySelector("label");
+      (0, import_vitest.expect)(label === null || label === void 0 ? void 0 : label.textContent).toContain("*");
+    });
+    (0, import_vitest.it)("renders with helper text", function () {
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Combobox, {
+        label: "Fruit",
+        name: "fruit",
+        options,
+        helperText: "Pick a fruit"
+      }));
+      (0, import_vitest.expect)(result.findTextElement("Pick a fruit")).toBeDefined();
+    });
+    (0, import_vitest.it)("renders skeleton placeholder", function () {
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Combobox, {
+        label: "Loading",
+        name: "l",
+        options,
+        skeleton: true
+      }));
+      var buttons = result.container.querySelectorAll("button");
+      (0, import_vitest.expect)(buttons.length).toBe(0);
+    });
+    (0, import_vitest.it)("renders with pre-selected value", function () {
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Combobox, {
+        label: "Fruit",
+        name: "fruit",
+        options,
+        value: "apple"
+      }));
+      (0, import_vitest.expect)(result.findTextElement("Apple")).toBeDefined();
+    });
+    (0, import_vitest.it)("renders disabled state", function () {
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Combobox, {
+        label: "Disabled",
+        name: "d",
+        options,
+        disabled: true
+      }));
+      (0, import_vitest.expect)(result.findTextElement("Disabled")).toBeDefined();
+    });
+  });
+  (0, import_vitest.describe)("with form context", function () {
+    (0, import_vitest.it)("renders inside form", function () {
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Form.Form, {
+        formOptions: {
+          defaultValues: {
+            fruit: ""
+          }
+        },
+        submitText: "Submit",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Combobox, {
+          name: "fruit",
+          label: "Fruit",
+          options
+        })
+      }));
+      (0, import_vitest.expect)(result.findTextElement("Fruit")).toBeDefined();
+    });
+  });
+});
+//# sourceMappingURL=Combobox.spec.native.js.map

package/dist/cjs/fields/Combobox/Combobox.spec.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["import_jsx_runtime","require","import_vitest","import_test_utils","import_Form","import_index","options","value","label","describe","it","result","renderWithProviders","jsx","Combobox","name","expect","findTextElement","toBeDefined","required","container","querySelector","textContent","toContain","helperText","skeleton","buttons","querySelectorAll","length","toBe"],"sources":["../../../../src/fields/Combobox/Combobox.spec.tsx"],"sourcesContent":[null],"mappings":"AAAA;;AACA,IAAAA,kBAAA,GAAoCC,OAAA;AACpC,IAAAC,aAAA,GAAqBD,OAAA;AACrB,IAAAE,iBAAyB,GAAAF,OAAA;AAWgB,IAAAG,WAAA,GAAAH,OAAA;AATzC,IAAAI,YAAgB,GAAAJ,OAAA;AAAA,IACZK,OAAO,IACT;EACEC,KAAA,EAAO;EACXC,KAAA;AAAA,GAGE;EACED,KAAA;EACEC,KAAA;AACA,GAAoD;EAGtDD,KAAA;EACEC,KAAA;AAAe,EACoD;AAEnE,IAAAN,aAAM,CAAAO,QAAQ,EAAO,UAAU,cAAc;EAC7C,IAAAP,aAAA,CAAAO,QAAA,wBAA2B,cAAa;IAC1C,CAAC,GAAAP,aAAA,CAAAQ,EAAA;MAED,IAAAC,MAAA,OAAAR,iBAAG,CAAAS,mBAAkC,qBAAAZ,kBAAA,CAAAa,GAAA,EAAAR,YAAA,CAAAS,QAAA;QACnCN,KAAM;QACJO,IAAA;QACFT;MACA;MACD,IAAAJ,aAAA,CAAAc,MAAA,EAAAL,MAAA,CAAAM,eAAA,WAAAC,WAAA;IAED;IACE,IAAAhB,aAAM,CAAAQ,EAAA,EAAS;MAAA,IACbC,MAAA,OAAAR,iBAAA,CAAAS,mBAAC,iBAAS,IAAAZ,kBAAgB,CAAKa,GAAA,EAAIR,YAAkB,CAAAS,QAAQ;QAC/DN,KAAA;QAEAO,IAAM;QACNT,OAAA;QACDa,QAAA;MAED;MACE,IAAAX,KAAM,GAAAG,MAAA,CAASS,SAAA,CAAAC,aAAA;MAAA,EACb,EAAAnB,aAAA,CAAAc,MAAA,EAAAR,KAAA,aAAAA,KAAC,uBAASA,KAAA,CAAMc,WAAQ,EAAAC,SAAK,IAAQ;IAAgC,EACvE;IACA,IAAArB,aAAA,CAAAQ,EAAA,4BAAc,cAA0B;MACzC,IAAAC,MAAA,OAAAR,iBAAA,CAAAS,mBAAA,qBAAAZ,kBAAA,CAAAa,GAAA,EAAAR,YAAA,CAAAS,QAAA;QAEDN,KAAA;QACEO,IAAM;QACJT,OAAA;QACFkB,UAAA;MACA;MACD,IAAAtB,aAAA,CAAAc,MAAA,EAAAL,MAAA,CAAAM,eAAA,kBAAAC,WAAA;IACF;IAED,IAAAhB,aAAA,CAAAQ,EAAA,gCAA8B,EAAM;MAClC,IAAAC,MAAA,OAAAR,iBAAG,CAAAS,mBAA6B,qBAAAZ,kBAAA,CAAAa,GAAA,EAAAR,YAAA,CAAAS,QAAA;QAC9BN,KAAM;QACJO,IAAA;QAGFT,OAAA;QACAmB,QAAA;MACD;MACF,IAAAC,OAAA,GAAAf,MAAA,CAAAS,SAAA,CAAAO,gBAAA;MACF,IAAAzB,aAAA,CAAAc,MAAA,EAAAU,OAAA,CAAAE,MAAA,EAAAC,IAAA","ignoreList":[]}

package/dist/cjs/fields/Combobox/Combobox.stories.cjs

@@ -0,0 +1,331 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var Combobox_stories_exports = {};
+__export(Combobox_stories_exports, {
+  Basic: () => Basic,
+  CustomTrigger: () => CustomTrigger,
+  Disabled: () => Disabled,
+  Interactive: () => Interactive,
+  Main: () => Main,
+  ManyOptions: () => ManyOptions,
+  Sizes: () => Sizes,
+  Standalone: () => Standalone,
+  WithError: () => WithError,
+  WithLabel: () => WithLabel,
+  default: () => Combobox_stories_default
+});
+module.exports = __toCommonJS(Combobox_stories_exports);
+var import_storybook = require("@multiplatform.one/storybook");
+var import_react_form = require("@tanstack/react-form");
+var import_react = require("react");
+var import_tamagui = require("tamagui");
+var import_Button = require("../../Button/index.cjs");
+var import_Form = require("../../Form/index.cjs");
+var import_index = require("./index.cjs");
+var import_authorOptions = require("./authorOptions.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const meta = {
+  title: "Forms/Combobox",
+  component: import_index.Combobox,
+  parameters: {
+    docs: {
+      description: {
+        component: "A searchable select component with form integration. Use when options are many and users benefit from filtering by typing."
+      }
+    }
+  },
+  argTypes: {
+    label: {
+      control: "text",
+      description: "Label for the combobox"
+    },
+    placeholder: {
+      control: "text",
+      description: "Placeholder text when no value is selected"
+    },
+    helperText: {
+      control: "text",
+      description: "Helper text displayed below the combobox"
+    },
+    error: {
+      control: "text",
+      description: "Error message to display"
+    },
+    required: {
+      control: "boolean",
+      description: "Whether the combobox is required"
+    },
+    disabled: {
+      control: "boolean",
+      description: "Whether the combobox is disabled"
+    },
+    size: {
+      control: "select",
+      options: ["$2", "$3", "$4"],
+      description: "Size of the combobox"
+    },
+    searchPlaceholder: {
+      control: "text",
+      description: "Placeholder text in the search input"
+    },
+    options: {
+      control: "object",
+      description: "Array of selectable options"
+    }
+  }
+};
+var Combobox_stories_default = meta;
+const Main = {
+  name: "Main",
+  render: () => {
+    const FormExample = () => {
+      const form = (0, import_react_form.useForm)({
+        defaultValues: {
+          author: "",
+          favoriteAuthor: "hemingway"
+        },
+        onSubmit: async ({
+          value
+        }) => {
+          (0, import_storybook.action)("onSubmit")(value);
+        }
+      });
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Form.Form, {
+        form,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          gap: "$4",
+          maxWidth: 300,
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Combobox, {
+            label: "Author",
+            name: "author",
+            options: import_authorOptions.authorOptions,
+            placeholder: "Select an author...",
+            searchPlaceholder: "Type to search...",
+            required: true
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Combobox, {
+            label: "Favorite author",
+            name: "favoriteAuthor",
+            options: import_authorOptions.authorOptions,
+            placeholder: "Select an author...",
+            searchPlaceholder: "Type to search..."
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+            action: "submit",
+            children: "Submit"
+          })]
+        })
+      });
+    };
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(FormExample, {});
+  }
+};
+const Standalone = {
+  args: {
+    label: "Author",
+    placeholder: "Select an author",
+    helperText: "Choose an author from the list",
+    options: import_authorOptions.authorOptions
+  },
+  render: args => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Combobox, {
+    ...args
+  })
+};
+const Basic = {
+  args: {
+    options: import_authorOptions.authorOptions,
+    placeholder: "Select an author...",
+    searchPlaceholder: "Type to search..."
+  },
+  render: function Render(args) {
+    const [value, setValue] = (0, import_react.useState)();
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      gap: "$4",
+      maxWidth: 300,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Combobox, {
+        ...args,
+        value,
+        onValueChange: val => {
+          setValue(Array.isArray(val) ? val[0] : val);
+          (0, import_storybook.action)("onValueChange")(val);
+        }
+      }), value && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
+        color: "$colorHover",
+        children: ["Selected: ", value]
+      })]
+    });
+  }
+};
+const WithLabel = {
+  render: function Render2() {
+    const [value, setValue] = (0, import_react.useState)();
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      gap: "$4",
+      maxWidth: 300,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Combobox, {
+        label: "Author",
+        helperText: "Select an author from the list",
+        options: import_authorOptions.authorOptions,
+        value,
+        onValueChange: v => setValue(Array.isArray(v) ? v[0] : v),
+        placeholder: "Select an author...",
+        searchPlaceholder: "Type to search..."
+      })
+    });
+  }
+};
+const Disabled = {
+  args: {
+    label: "Disabled Combobox",
+    disabled: true,
+    options: import_authorOptions.authorOptions,
+    placeholder: "Select an author..."
+  }
+};
+const WithError = {
+  args: {
+    label: "Combobox with Error",
+    error: "This field is required",
+    required: true,
+    options: import_authorOptions.authorOptions,
+    placeholder: "Select an author..."
+  }
+};
+const Sizes = {
+  render: () => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    gap: "$4",
+    maxWidth: 400,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Combobox, {
+      label: "Small",
+      size: "$2",
+      options: import_authorOptions.authorOptions,
+      placeholder: "Select..."
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Combobox, {
+      label: "Medium (default)",
+      size: "$3",
+      options: import_authorOptions.authorOptions,
+      placeholder: "Select..."
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Combobox, {
+      label: "Large",
+      size: "$4",
+      options: import_authorOptions.authorOptions,
+      placeholder: "Select..."
+    })]
+  })
+};
+const Interactive = {
+  render: () => {
+    const InteractiveExample = () => {
+      const [value, setValue] = (0, import_react.useState)();
+      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        gap: "$4",
+        maxWidth: 400,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Combobox, {
+          label: "Pick an author",
+          options: import_authorOptions.authorOptions,
+          value,
+          onValueChange: v => setValue(Array.isArray(v) ? v[0] : v),
+          placeholder: "Select an author..."
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
+          children: ["Selected: ", value || "None"]
+        })]
+      });
+    };
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(InteractiveExample, {});
+  }
+};
+const CustomTrigger = {
+  render: () => {
+    const CustomTriggerExample = () => {
+      const [value, setValue] = (0, import_react.useState)();
+      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        gap: "$4",
+        maxWidth: 300,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          fontWeight: "bold",
+          color: "$colorHover",
+          children: "Author picker with custom trigger:"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+          gap: "$2",
+          alignItems: "center",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Combobox, {
+            options: import_authorOptions.authorOptions,
+            value,
+            onValueChange: v => setValue(Array.isArray(v) ? v[0] : v),
+            searchPlaceholder: "Type to search...",
+            popoverWidth: 260,
+            trigger: selected => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+              gap: "$2",
+              alignItems: "center",
+              paddingHorizontal: "$3",
+              paddingVertical: "$2",
+              backgroundColor: "$backgroundHover",
+              borderRadius: "$3",
+              hoverStyle: {
+                backgroundColor: "$backgroundPress"
+              },
+              pressStyle: {
+                backgroundColor: "$backgroundFocus"
+              },
+              cursor: "pointer",
+              children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                fontSize: "$5",
+                children: "\u{1F4DA}"
+              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                color: "$colorHover",
+                children: (Array.isArray(selected) ? selected[0]?.label : selected?.label) || "Pick an author"
+              })]
+            })
+          })
+        }), value && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
+          color: "$colorHover",
+          children: ["Selected: ", value]
+        })]
+      });
+    };
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(CustomTriggerExample, {});
+  }
+};
+const ManyOptions = {
+  render: function Render3() {
+    const [value, setValue] = (0, import_react.useState)();
+    const options = Array.from({
+      length: 100
+    }, (_, i) => ({
+      value: `item-${i + 1}`,
+      label: `Item ${i + 1}`,
+      keywords: `option number ${i + 1}`
+    }));
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      gap: "$4",
+      maxWidth: 300,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Combobox, {
+        label: "Pick an item",
+        options,
+        value,
+        onValueChange: v => setValue(Array.isArray(v) ? v[0] : v),
+        placeholder: "Select from 100 items...",
+        searchPlaceholder: "Type to filter...",
+        emptyMessage: "No matching items."
+      })
+    });
+  }
+};