@multiplatform.one/forms 6.0.0

package/dist/jsx/fields/Stepper/Stepper.spec.native.js

@@ -0,0 +1,212 @@
+"use strict";
+
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react_form = require("@tanstack/react-form");
+var import_react = require("@testing-library/react");
+var import_tamagui = require("tamagui");
+var import_vitest = require("vitest");
+var import_test_utils = require("@multiplatform.one/test-utils");
+var import_Form = require("../../Form/index.native.js");
+var import_Button = require("../../Button/index.native.js");
+var import_index = require("./index.native.js");
+(0, import_vitest.describe)("Stepper", function () {
+  (0, import_vitest.describe)("without form context", function () {
+    (0, import_vitest.it)("should render with label and helper text correctly", function () {
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Stepper, {
+        label: "Quantity",
+        helperText: "Enter a number",
+        name: "quantity",
+        defaultValue: 5
+      }));
+      var input = result.getInput();
+      (0, import_vitest.expect)(result.container.textContent).toContain("Quantity");
+      (0, import_vitest.expect)(result.container.textContent).toContain("Enter a number");
+      (0, import_vitest.expect)(input === null || input === void 0 ? void 0 : input.value).toBe("5");
+      (0, import_vitest.expect)(input === null || input === void 0 ? void 0 : input.hasAttribute("disabled")).toBeFalsy();
+    });
+    (0, import_vitest.it)("should handle disabled state", async function () {
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Stepper, {
+        label: "Quantity",
+        name: "quantity",
+        defaultValue: 10,
+        disabled: true
+      }));
+      var input = result.getInput();
+      await (0, import_react.act)(async function () {
+        import_react.fireEvent.change(input, {
+          target: {
+            value: "25"
+          }
+        });
+      });
+      var isDisabled = (input === null || input === void 0 ? void 0 : input.hasAttribute("disabled")) || (input === null || input === void 0 ? void 0 : input.getAttribute("aria-disabled")) === "true";
+      (0, import_vitest.expect)(isDisabled).toBeTruthy();
+    });
+    (0, import_vitest.it)("should render required label with asterisk", function () {
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Stepper, {
+        label: "Required Field",
+        name: "quantity",
+        required: true
+      }));
+      var label = result.container.querySelector("label");
+      (0, import_vitest.expect)(label === null || label === void 0 ? void 0 : label.textContent).toContain("Required Field");
+      (0, import_vitest.expect)(label === null || label === void 0 ? void 0 : label.textContent).toContain("*");
+    });
+    (0, import_vitest.it)("should handle custom input props", function () {
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Stepper, {
+        label: "Custom Input",
+        name: "quantity",
+        inputProps: {
+          placeholder: "Enter number",
+          maxLength: 5
+        }
+      }));
+      var input = result.getInput();
+      (0, import_vitest.expect)(input === null || input === void 0 ? void 0 : input.getAttribute("placeholder")).toBe("Enter number");
+      (0, import_vitest.expect)(input === null || input === void 0 ? void 0 : input.getAttribute("maxLength")).toBe("5");
+    });
+  });
+  (0, import_vitest.describe)("with form context", function () {
+    var FormExample = function FormExample2(param) {
+      var {
+        defaultValue = 0,
+        name = "quantity",
+        onSubmit = async function (_value) {}
+      } = param;
+      var form = (0, import_react_form.useForm)({
+        defaultValues: {
+          [name]: defaultValue
+        },
+        onSubmit: async function onSubmit1(param2) {
+          var {
+            value
+          } = param2;
+          await onSubmit(value);
+        }
+      });
+      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_Form.Form, {
+        form,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Stepper, {
+          label: "Quantity",
+          name,
+          min: 0,
+          max: 100
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+          action: "submit",
+          children: "Submit"
+        })]
+      });
+    };
+    (0, import_vitest.it)("should render with form context and handle form submission", async function () {
+      var onSubmit = import_vitest.vi.fn();
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(FormExample, {
+          onSubmit
+        })
+      }));
+      var input = result.getInput();
+      var submitButton = result.getSubmitButton();
+      (0, import_vitest.expect)(input === null || input === void 0 ? void 0 : input.value).toBe("0");
+      if (submitButton) {
+        await (0, import_react.act)(async function () {
+          import_react.fireEvent.click(submitButton);
+        });
+        await (0, import_react.waitFor)(function () {
+          (0, import_vitest.expect)(onSubmit).toHaveBeenCalledWith({
+            quantity: 0
+          });
+        });
+        await (0, import_react.act)(async function () {
+          import_react.fireEvent.change(input, {
+            target: {
+              value: "25"
+            }
+          });
+        });
+        await (0, import_react.act)(async function () {
+          import_react.fireEvent.click(submitButton);
+        });
+      }
+      await (0, import_react.waitFor)(function () {
+        (0, import_vitest.expect)(onSubmit).toHaveBeenCalledWith({
+          quantity: 25
+        });
+      });
+    });
+    (0, import_vitest.it)("should display error message when error prop is passed in form context", async function () {
+      var onSubmit = import_vitest.vi.fn();
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(FormExample, {
+          onSubmit
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Stepper, {
+          label: "Quantity",
+          name: "quantity",
+          error: "This field is required"
+        })]
+      }));
+      (0, import_vitest.expect)(result.findTextElement("This field is required")).toBeDefined();
+    });
+  });
+  (0, import_vitest.describe)("with useForm hook directly", function () {
+    (0, import_vitest.it)("should handle form submission with useForm", async function () {
+      var onSubmitMock = import_vitest.vi.fn();
+      var TestComponent = function TestComponent2() {
+        var form = (0, import_react_form.useForm)({
+          defaultValues: {
+            quantity: 5
+          },
+          onSubmit: async function onSubmit(param) {
+            var {
+              value
+            } = param;
+            onSubmitMock(value);
+          }
+        });
+        return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_Form.Form, {
+          form,
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Stepper, {
+            label: "Quantity",
+            name: "quantity",
+            min: 0,
+            max: 50
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+            action: "submit",
+            children: "Submit"
+          })]
+        });
+      };
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(TestComponent, {}));
+      var input = result.getInput();
+      var submitButton = result.getSubmitButton() || Array.from(result.container.querySelectorAll("button")).find(function (btn) {
+        var _btn_textContent;
+        return (_btn_textContent = btn.textContent) === null || _btn_textContent === void 0 ? void 0 : _btn_textContent.includes("Submit");
+      });
+      if (submitButton) {
+        await (0, import_react.act)(async function () {
+          import_react.fireEvent.click(submitButton);
+        });
+        await (0, import_react.waitFor)(function () {
+          (0, import_vitest.expect)(onSubmitMock).toHaveBeenCalledWith({
+            quantity: 5
+          });
+        });
+        await (0, import_react.act)(async function () {
+          import_react.fireEvent.change(input, {
+            target: {
+              value: "30"
+            }
+          });
+        });
+        await (0, import_react.act)(async function () {
+          import_react.fireEvent.click(submitButton);
+        });
+      }
+      await (0, import_react.waitFor)(function () {
+        (0, import_vitest.expect)(onSubmitMock).toHaveBeenCalledWith({
+          quantity: 30
+        });
+      });
+    });
+  });
+});
+//# sourceMappingURL=Stepper.spec.native.js.map

package/dist/jsx/fields/Stepper/Stepper.spec.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["import_jsx_runtime","require","import_react_form","import_react","import_tamagui","import_vitest","import_test_utils","import_Form","import_Button","import_index","describe","it","result","renderWithProviders","jsx","Stepper","label","helperText","name","defaultValue","input","getInput","expect","container","textContent","toContain","value","toBe","hasAttribute","toBeFalsy","disabled","act","fireEvent","change","target","isDisabled","getAttribute","toBeTruthy","required","querySelector","inputProps","placeholder","maxLength","FormExample","FormExample2","param","onSubmit","_value","form","useForm","defaultValues","onSubmit1","param2","jsxs","Form","children","min","max","Button","action","vi","fn","YStack","submitButton","getSubmitButton","click","waitFor","toHaveBeenCalledWith","quantity","error","findTextElement","toBeDefined","onSubmitMock","TestComponent","TestComponent2"],"sources":["../../../../src/fields/Stepper/Stepper.spec.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/jsx/fields/Stepper/Stepper.stories.mjs

@@ -0,0 +1,207 @@
+import { action } from "@multiplatform.one/storybook";
+import { useForm } from "@tanstack/react-form";
+import { useState } from "react";
+import { Paragraph, YStack } from "tamagui";
+import { Button } from "../../Button/index.mjs";
+import { Form } from "../../Form/index.mjs";
+import { Stepper } from "./index.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+const meta = {
+  title: "Forms/Stepper",
+  component: Stepper,
+  parameters: {
+    status: {
+      type: "beta"
+    }
+  },
+  argTypes: {
+    label: {
+      control: "text"
+    },
+    placeholder: {
+      control: "text"
+    },
+    helperText: {
+      control: "text"
+    },
+    error: {
+      control: "text"
+    },
+    required: {
+      control: "boolean"
+    },
+    disabled: {
+      control: "boolean"
+    },
+    size: {
+      control: "select",
+      options: ["$2", "$3", "$4"]
+    },
+    min: {
+      control: "number"
+    },
+    max: {
+      control: "number"
+    },
+    step: {
+      control: "number"
+    },
+    // @ts-expect-error controlled mode not supported
+    value: {
+      control: "number"
+    },
+    defaultValue: {
+      control: "number"
+    },
+    precision: {
+      control: "number"
+    },
+    showButtons: {
+      control: "boolean"
+    },
+    buttonPosition: {
+      control: "select",
+      options: ["left", "right", "both"]
+    },
+    allowEmpty: {
+      control: "boolean"
+    },
+    readOnly: {
+      control: "boolean"
+    }
+  }
+};
+var Stepper_stories_default = meta;
+const Main = {
+  name: "Main",
+  render: () => {
+    const FormExample = () => {
+      const form = useForm({
+        defaultValues: {
+          quantity: 5,
+          price: 10.99,
+          discount: 0
+        },
+        onSubmit: async ({
+          value
+        }) => {
+          action("onSubmit")(value);
+        }
+      });
+      return /* @__PURE__ */jsx(Form, {
+        form,
+        children: /* @__PURE__ */jsxs(YStack, {
+          gap: "$4",
+          children: [/* @__PURE__ */jsx(Stepper, {
+            label: "Quantity",
+            name: "quantity",
+            min: 1,
+            max: 100
+          }), /* @__PURE__ */jsx(Stepper, {
+            label: "Price",
+            name: "price",
+            step: 0.01,
+            min: 0
+          }), /* @__PURE__ */jsx(Stepper, {
+            label: "Discount (%)",
+            name: "discount",
+            min: 0,
+            max: 50,
+            step: 5
+          }), /* @__PURE__ */jsx(Button, {
+            action: "submit",
+            children: "Submit"
+          })]
+        })
+      });
+    };
+    return /* @__PURE__ */jsx(FormExample, {});
+  }
+};
+const Standalone = {
+  args: {
+    label: "Quantity",
+    placeholder: "0",
+    helperText: "Enter a number",
+    disabled: false,
+    required: false,
+    size: "$3",
+    min: 0,
+    max: 100,
+    step: 1
+  },
+  render: args => /* @__PURE__ */jsx(Stepper, {
+    ...args
+  })
+};
+const Basic = {
+  args: {
+    label: "Quantity",
+    error: void 0,
+    helperText: "Enter a number between 1 and 100",
+    defaultValue: 5,
+    min: 1,
+    max: 100
+  }
+};
+const Disabled = {
+  args: {
+    label: "Disabled Field",
+    disabled: true,
+    placeholder: "Cannot interact"
+  }
+};
+const WithError = {
+  args: {
+    label: "Field with Error",
+    error: "This field is required",
+    required: true
+  }
+};
+const Sizes = {
+  render: () => /* @__PURE__ */jsxs(YStack, {
+    gap: "$4",
+    maxWidth: 400,
+    children: [/* @__PURE__ */jsx(Stepper, {
+      label: "Small",
+      size: "$2",
+      placeholder: "Small input"
+    }), /* @__PURE__ */jsx(Stepper, {
+      label: "Medium (default)",
+      size: "$3",
+      placeholder: "Medium input"
+    }), /* @__PURE__ */jsx(Stepper, {
+      label: "Large",
+      size: "$4",
+      placeholder: "Large input"
+    })]
+  })
+};
+const Interactive = {
+  render: () => {
+    const InteractiveExample = () => {
+      const [value, setValue] = useState(0);
+      return /* @__PURE__ */jsxs(YStack, {
+        gap: "$4",
+        maxWidth: 400,
+        children: [/* @__PURE__ */jsx(Stepper, {
+          label: "Quantity",
+          value,
+          onChange: val => {
+            setValue(val);
+            action("onChange")(val);
+          },
+          min: 0,
+          max: 100,
+          step: 1
+        }), /* @__PURE__ */jsxs(Paragraph, {
+          size: "$2",
+          children: ["Current value: ", value ?? "empty"]
+        })]
+      });
+    };
+    return /* @__PURE__ */jsx(InteractiveExample, {});
+  }
+};
+export { Basic, Disabled, Interactive, Main, Sizes, Standalone, WithError, Stepper_stories_default as default };
+//# sourceMappingURL=Stepper.stories.mjs.map

package/dist/jsx/fields/Stepper/Stepper.stories.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["action","useForm","useState","Paragraph","YStack","Button","Form","Stepper","jsx","jsxs","meta","title","component","parameters","status","type","argTypes","label","control","placeholder","helperText","error","required","disabled","size","options","min","max","step","value","defaultValue","precision","showButtons","buttonPosition","allowEmpty","readOnly","Stepper_stories_default","Main","name","render","FormExample","form","defaultValues","quantity","price","discount","onSubmit","children","gap","Standalone","args","Basic","Disabled","WithError","Sizes","maxWidth","Interactive","InteractiveExample","setValue","onChange","val"],"sources":["../../../../src/fields/Stepper/Stepper.stories.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/jsx/fields/Stepper/Stepper.stories.native.js

@@ -0,0 +1,248 @@
+"use strict";
+
+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 Stepper_stories_exports = {};
+__export(Stepper_stories_exports, {
+  Basic: () => Basic,
+  Disabled: () => Disabled,
+  Interactive: () => Interactive,
+  Main: () => Main,
+  Sizes: () => Sizes,
+  Standalone: () => Standalone,
+  WithError: () => WithError,
+  default: () => Stepper_stories_default
+});
+module.exports = __toCommonJS(Stepper_stories_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+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.native.js");
+var import_Form = require("../../Form/index.native.js");
+var import_index = require("./index.native.js");
+var meta = {
+  title: "Forms/Stepper",
+  component: import_index.Stepper,
+  parameters: {
+    status: {
+      type: "beta"
+    }
+  },
+  argTypes: {
+    label: {
+      control: "text"
+    },
+    placeholder: {
+      control: "text"
+    },
+    helperText: {
+      control: "text"
+    },
+    error: {
+      control: "text"
+    },
+    required: {
+      control: "boolean"
+    },
+    disabled: {
+      control: "boolean"
+    },
+    size: {
+      control: "select",
+      options: ["$2", "$3", "$4"]
+    },
+    min: {
+      control: "number"
+    },
+    max: {
+      control: "number"
+    },
+    step: {
+      control: "number"
+    },
+    // @ts-expect-error controlled mode not supported
+    value: {
+      control: "number"
+    },
+    defaultValue: {
+      control: "number"
+    },
+    precision: {
+      control: "number"
+    },
+    showButtons: {
+      control: "boolean"
+    },
+    buttonPosition: {
+      control: "select",
+      options: ["left", "right", "both"]
+    },
+    allowEmpty: {
+      control: "boolean"
+    },
+    readOnly: {
+      control: "boolean"
+    }
+  }
+};
+var Stepper_stories_default = meta;
+var Main = {
+  name: "Main",
+  render: function render() {
+    var FormExample = function FormExample2() {
+      var form = (0, import_react_form.useForm)({
+        defaultValues: {
+          quantity: 5,
+          price: 10.99,
+          discount: 0
+        },
+        onSubmit: async function onSubmit(param) {
+          var {
+            value
+          } = param;
+          (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",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Stepper, {
+            label: "Quantity",
+            name: "quantity",
+            min: 1,
+            max: 100
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Stepper, {
+            label: "Price",
+            name: "price",
+            step: 0.01,
+            min: 0
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Stepper, {
+            label: "Discount (%)",
+            name: "discount",
+            min: 0,
+            max: 50,
+            step: 5
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+            action: "submit",
+            children: "Submit"
+          })]
+        })
+      });
+    };
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(FormExample, {});
+  }
+};
+var Standalone = {
+  args: {
+    label: "Quantity",
+    placeholder: "0",
+    helperText: "Enter a number",
+    disabled: false,
+    required: false,
+    size: "$3",
+    min: 0,
+    max: 100,
+    step: 1
+  },
+  render: function render2(args) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Stepper, {
+      ...args
+    });
+  }
+};
+var Basic = {
+  args: {
+    label: "Quantity",
+    error: void 0,
+    helperText: "Enter a number between 1 and 100",
+    defaultValue: 5,
+    min: 1,
+    max: 100
+  }
+};
+var Disabled = {
+  args: {
+    label: "Disabled Field",
+    disabled: true,
+    placeholder: "Cannot interact"
+  }
+};
+var WithError = {
+  args: {
+    label: "Field with Error",
+    error: "This field is required",
+    required: true
+  }
+};
+var Sizes = {
+  render: function render3() {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      gap: "$4",
+      maxWidth: 400,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Stepper, {
+        label: "Small",
+        size: "$2",
+        placeholder: "Small input"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Stepper, {
+        label: "Medium (default)",
+        size: "$3",
+        placeholder: "Medium input"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Stepper, {
+        label: "Large",
+        size: "$4",
+        placeholder: "Large input"
+      })]
+    });
+  }
+};
+var Interactive = {
+  render: function render4() {
+    var InteractiveExample = function InteractiveExample2() {
+      var [value, setValue] = (0, import_react.useState)(0);
+      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        gap: "$4",
+        maxWidth: 400,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Stepper, {
+          label: "Quantity",
+          value,
+          // @ts-expect-error controlled mode not supported
+          onChange: function onChange(val) {
+            setValue(val);
+            (0, import_storybook.action)("onChange")(val);
+          },
+          min: 0,
+          max: 100,
+          step: 1
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Paragraph, {
+          size: "$2",
+          children: ["Current value: ", value !== null && value !== void 0 ? value : "empty"]
+        })]
+      });
+    };
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(InteractiveExample, {});
+  }
+};
+//# sourceMappingURL=Stepper.stories.native.js.map