@multiplatform.one/forms 6.0.0

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

@@ -0,0 +1,142 @@
+"use strict";
+
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("@testing-library/react");
+var import_vitest = require("vitest");
+var import_test_utils = require("@multiplatform.one/test-utils");
+var import_Form = require("../../Form/index.native.js");
+var import_Checkbox = require("./Checkbox.native.js");
+var import_CheckboxGroup = require("./CheckboxGroup.native.js");
+(0, import_vitest.describe)("Checkbox", 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_Checkbox.Checkbox, {
+        label: "Accept terms",
+        name: "terms"
+      }));
+      (0, import_vitest.expect)(result.findTextElement("Accept terms")).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_Checkbox.Checkbox, {
+        label: "Required",
+        name: "req",
+        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 disabled state", function () {
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Checkbox.Checkbox, {
+        label: "Disabled",
+        name: "d",
+        disabled: true
+      }));
+      var checkbox = result.getCheckbox();
+      (0, import_vitest.expect)(checkbox === null || checkbox === void 0 ? void 0 : checkbox.getAttribute("aria-disabled")).toBe("true");
+    });
+    (0, import_vitest.it)("renders checked state", function () {
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Checkbox.Checkbox, {
+        label: "Checked",
+        name: "c",
+        checked: true
+      }));
+      var checkbox = result.getCheckbox();
+      (0, import_vitest.expect)(checkbox === null || checkbox === void 0 ? void 0 : checkbox.getAttribute("aria-checked")).toBe("true");
+    });
+    (0, import_vitest.it)("renders skeleton placeholder", function () {
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Checkbox.Checkbox, {
+        label: "Loading",
+        name: "l",
+        skeleton: true
+      }));
+      (0, import_vitest.expect)(result.container.querySelector("[role='checkbox']")).toBeNull();
+    });
+    (0, import_vitest.it)("calls onCheckedChange when clicked", function () {
+      var onCheckedChange = import_vitest.vi.fn();
+      var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Checkbox.Checkbox, {
+        name: "cb",
+        defaultValue: false,
+        onCheckedChange
+      }));
+      var checkbox = result.getCheckbox();
+      if (checkbox) import_react.fireEvent.click(checkbox);
+      (0, import_vitest.expect)(onCheckedChange).toHaveBeenCalledWith(true);
+    });
+  });
+  (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: {
+            agree: false
+          }
+        },
+        submitText: "Submit",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Checkbox.Checkbox, {
+          name: "agree",
+          label: "I agree"
+        })
+      }));
+      (0, import_vitest.expect)(result.findTextElement("I agree")).toBeDefined();
+    });
+  });
+});
+(0, import_vitest.describe)("CheckboxGroup", function () {
+  var options = [{
+    label: "Option A",
+    value: "a"
+  }, {
+    label: "Option B",
+    value: "b"
+  }, {
+    label: "Option C",
+    value: "c"
+  }];
+  (0, import_vitest.it)("renders all options", function () {
+    var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_CheckboxGroup.CheckboxGroup, {
+      label: "Pick options",
+      name: "opts",
+      options
+    }));
+    (0, import_vitest.expect)(result.findTextElement("Option A")).toBeDefined();
+    (0, import_vitest.expect)(result.findTextElement("Option B")).toBeDefined();
+    (0, import_vitest.expect)(result.findTextElement("Option C")).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_CheckboxGroup.CheckboxGroup, {
+      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 skeleton placeholder", function () {
+    var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_CheckboxGroup.CheckboxGroup, {
+      label: "Loading",
+      name: "l",
+      options,
+      skeleton: true
+    }));
+    var checkboxes = result.container.querySelectorAll("[role='checkbox']");
+    (0, import_vitest.expect)(checkboxes.length).toBe(0);
+  });
+  (0, import_vitest.it)("renders with form context", function () {
+    var result = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Form.Form, {
+      formOptions: {
+        defaultValues: {
+          opts: []
+        }
+      },
+      submitText: "Submit",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_CheckboxGroup.CheckboxGroup, {
+        name: "opts",
+        label: "Options",
+        options
+      })
+    }));
+    (0, import_vitest.expect)(result.findTextElement("Option A")).toBeDefined();
+  });
+});
+//# sourceMappingURL=Checkbox.spec.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["import_jsx_runtime","require","import_react","import_vitest","import_test_utils","import_Form","import_Checkbox","import_CheckboxGroup","describe","it","result","renderWithProviders","jsx","Checkbox","label","name","expect","findTextElement","toBeDefined","required","container","querySelector","textContent","toContain","disabled","checkbox","getCheckbox","getAttribute","toBe","checked","skeleton","toBeNull","onCheckedChange","vi","fn","defaultValue","fireEvent","click","toHaveBeenCalledWith","Form","formOptions","defaultValues","agree","submitText","children","options"],"sources":["../../../../src/fields/Checkbox/Checkbox.spec.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,418 @@
+import { action } from "@multiplatform.one/storybook";
+import { CheckIcon } from "@phosphor-icons/react";
+import { useForm } from "@tanstack/react-form";
+import { useState } from "react";
+import { Checkbox as TamaguiCheckbox, Label, Paragraph, XStack, YStack } from "tamagui";
+import { Button } from "../../Button/index.mjs";
+import { Form } from "../../Form/index.mjs";
+import { Checkbox, Checkboxes, CheckboxGroup } from "./index.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+const meta = {
+  title: "Forms/Checkbox",
+  component: Checkbox,
+  parameters: {
+    status: {
+      type: "beta"
+    }
+  },
+  argTypes: {
+    label: {
+      control: "text"
+    },
+    helperText: {
+      control: "text"
+    },
+    error: {
+      control: "text"
+    },
+    required: {
+      control: "boolean"
+    },
+    disabled: {
+      control: "boolean"
+    },
+    size: {
+      control: "select",
+      options: ["$2", "$3", "$4"]
+    },
+    checked: {
+      control: "boolean"
+    }
+  }
+};
+var Checkbox_stories_default = meta;
+const Main = {
+  name: "Main",
+  render: () => {
+    const FormExample = () => {
+      const form = useForm({
+        defaultValues: {
+          terms: false,
+          newsletter: true
+        },
+        onSubmit: async ({
+          value
+        }) => {
+          action("onSubmit")(value);
+        }
+      });
+      return /* @__PURE__ */jsxs(Form, {
+        form,
+        children: [/* @__PURE__ */jsx(Checkbox, {
+          label: "Accept terms",
+          name: "terms",
+          validators: {
+            onChange: ({
+              value
+            }) => !value ? "Terms are required" : void 0
+          }
+        }), /* @__PURE__ */jsx(Checkbox, {
+          label: "Subscribe to newsletter",
+          name: "newsletter"
+        }), /* @__PURE__ */jsx(Button, {
+          action: "submit",
+          children: "Submit"
+        })]
+      });
+    };
+    return /* @__PURE__ */jsx(FormExample, {});
+  }
+};
+const Standalone = {
+  args: {
+    label: "Accept terms",
+    helperText: "You must accept to continue",
+    disabled: false,
+    required: false
+  },
+  render: args => /* @__PURE__ */jsx(Checkbox, {
+    ...args
+  })
+};
+const Basic = {
+  args: {
+    label: "Accept terms",
+    helperText: "You must accept before continuing",
+    defaultValue: false
+  }
+};
+const Disabled = {
+  args: {
+    label: "Disabled Field",
+    disabled: true
+  }
+};
+const WithError = {
+  args: {
+    label: "Field with Error",
+    error: "This field is required",
+    required: true
+  }
+};
+const Pointy = {
+  render: () => /* @__PURE__ */jsxs(YStack, {
+    gap: "$4",
+    maxWidth: 400,
+    children: [/* @__PURE__ */jsx(Checkbox, {
+      label: "Pointy (hard angles)",
+      pointy: true,
+      checked: true
+    }), /* @__PURE__ */jsx(Checkbox, {
+      label: "Regular (default)",
+      pointy: false,
+      checked: true
+    })]
+  })
+};
+const Sizes = {
+  render: () => /* @__PURE__ */jsxs(YStack, {
+    gap: "$4",
+    maxWidth: 400,
+    children: [/* @__PURE__ */jsx(Checkbox, {
+      label: "Small",
+      size: "$2"
+    }), /* @__PURE__ */jsx(Checkbox, {
+      label: "Medium (default)",
+      size: "$3"
+    }), /* @__PURE__ */jsx(Checkbox, {
+      label: "Large",
+      size: "$4"
+    })]
+  })
+};
+const compound = () => {
+  const [values, setValues] = useState({
+    analytics: true,
+    updates: false,
+    marketing: false
+  });
+  return /* @__PURE__ */jsx(YStack, {
+    gap: "$4",
+    children: /* @__PURE__ */jsxs(Checkboxes, {
+      values,
+      onValuesChange: nextValues => setValues(nextValues),
+      children: [/* @__PURE__ */jsx(Checkboxes.Title, {
+        children: "Notification Preferences"
+      }), /* @__PURE__ */jsx(Checkboxes.FocusGroup, {
+        orientation: "vertical",
+        children: /* @__PURE__ */jsxs(Checkboxes.Group, {
+          children: [/* @__PURE__ */jsx(Checkboxes.Group.Item, {
+            children: /* @__PURE__ */jsx(Checkboxes.FocusGroup.Item, {
+              value: "analytics",
+              children: /* @__PURE__ */jsxs(Checkboxes.Card, {
+                children: [/* @__PURE__ */jsx(Checkboxes.Checkbox, {
+                  children: /* @__PURE__ */jsx(Checkboxes.Checkbox.Indicator, {})
+                }), /* @__PURE__ */jsx(Paragraph, {
+                  children: "Product analytics"
+                })]
+              })
+            })
+          }), /* @__PURE__ */jsx(Checkboxes.Group.Item, {
+            children: /* @__PURE__ */jsx(Checkboxes.FocusGroup.Item, {
+              value: "updates",
+              children: /* @__PURE__ */jsxs(Checkboxes.Card, {
+                children: [/* @__PURE__ */jsx(Checkboxes.Checkbox, {
+                  children: /* @__PURE__ */jsx(Checkboxes.Checkbox.Indicator, {})
+                }), /* @__PURE__ */jsx(Paragraph, {
+                  children: "Release updates"
+                })]
+              })
+            })
+          }), /* @__PURE__ */jsx(Checkboxes.Group.Item, {
+            children: /* @__PURE__ */jsx(Checkboxes.FocusGroup.Item, {
+              value: "marketing",
+              children: /* @__PURE__ */jsxs(Checkboxes.Card, {
+                children: [/* @__PURE__ */jsx(Checkboxes.Checkbox, {
+                  children: /* @__PURE__ */jsx(Checkboxes.Checkbox.Indicator, {})
+                }), /* @__PURE__ */jsx(Paragraph, {
+                  children: "Marketing emails"
+                })]
+              })
+            })
+          })]
+        })
+      })]
+    })
+  });
+};
+const Comparison = {
+  render: () => {
+    const ComparisonExample = () => {
+      const [customChecked, setCustomChecked] = useState(false);
+      const [tamaguiChecked, setTamaguiChecked] = useState(false);
+      return /* @__PURE__ */jsxs(XStack, {
+        gap: "$6",
+        alignItems: "flex-start",
+        padding: "$4",
+        children: [/* @__PURE__ */jsxs(YStack, {
+          gap: "$3",
+          width: 250,
+          children: [/* @__PURE__ */jsx(Paragraph, {
+            size: "$2",
+            color: "$placeholderColor",
+            children: "Custom Checkbox"
+          }), /* @__PURE__ */jsx(Checkbox, {
+            label: "Accept terms",
+            defaultValue: customChecked,
+            onCheckedChange: val => {
+              setCustomChecked(!!val);
+              action("custom.onCheckedChange")(val);
+            }
+          })]
+        }), /* @__PURE__ */jsxs(YStack, {
+          gap: "$3",
+          width: 250,
+          children: [/* @__PURE__ */jsx(Paragraph, {
+            size: "$2",
+            color: "$placeholderColor",
+            children: "Tamagui Checkbox"
+          }), /* @__PURE__ */jsxs(XStack, {
+            gap: "$2",
+            alignItems: "center",
+            children: [/* @__PURE__ */jsx(TamaguiCheckbox, {
+              id: "tamagui-cb",
+              checked: tamaguiChecked,
+              onCheckedChange: val => {
+                setTamaguiChecked(!!val);
+                action("tamagui.onCheckedChange")(val);
+              },
+              children: /* @__PURE__ */jsx(TamaguiCheckbox.Indicator, {
+                children: /* @__PURE__ */jsx(CheckIcon, {})
+              })
+            }), /* @__PURE__ */jsx(Label, {
+              htmlFor: "tamagui-cb",
+              children: "Accept terms"
+            })]
+          })]
+        })]
+      });
+    };
+    return /* @__PURE__ */jsx(ComparisonExample, {});
+  }
+};
+const CheckboxGroupBasic = {
+  render: () => /* @__PURE__ */jsx(YStack, {
+    gap: "$4",
+    maxWidth: 400,
+    children: /* @__PURE__ */jsx(CheckboxGroup, {
+      label: "Features",
+      options: [{
+        value: "notifications",
+        label: "Push Notifications"
+      }, {
+        value: "emails",
+        label: "Email Updates"
+      }, {
+        value: "sms",
+        label: "SMS Alerts"
+      }],
+      defaultValue: ["emails"],
+      helperText: "Select all that apply"
+    })
+  })
+};
+const CheckboxGroupWithForm = {
+  render: () => {
+    const FormExample = () => {
+      const form = useForm({
+        defaultValues: {
+          features: ["notifications"],
+          permissions: []
+        },
+        onSubmit: async ({
+          value
+        }) => {
+          action("onSubmit")(value);
+        }
+      });
+      return /* @__PURE__ */jsx(Form, {
+        form,
+        children: /* @__PURE__ */jsxs(YStack, {
+          gap: "$4",
+          maxWidth: 400,
+          children: [/* @__PURE__ */jsx(CheckboxGroup, {
+            label: "Features",
+            name: "features",
+            options: [{
+              value: "notifications",
+              label: "Push Notifications"
+            }, {
+              value: "emails",
+              label: "Email Updates"
+            }, {
+              value: "sms",
+              label: "SMS Alerts"
+            }, {
+              value: "reports",
+              label: "Weekly Reports"
+            }],
+            helperText: "Select your preferred features"
+          }), /* @__PURE__ */jsx(CheckboxGroup, {
+            label: "Permissions",
+            name: "permissions",
+            options: [{
+              value: "read",
+              label: "Read Access"
+            }, {
+              value: "write",
+              label: "Write Access"
+            }, {
+              value: "delete",
+              label: "Delete Access"
+            }, {
+              value: "admin",
+              label: "Admin Access"
+            }],
+            helperText: "Select required permissions",
+            required: true
+          }), /* @__PURE__ */jsx(Button, {
+            action: "submit",
+            children: "Submit"
+          })]
+        })
+      });
+    };
+    return /* @__PURE__ */jsx(FormExample, {});
+  }
+};
+const CheckboxGroupHorizontal = {
+  render: () => /* @__PURE__ */jsx(YStack, {
+    gap: "$4",
+    maxWidth: 600,
+    children: /* @__PURE__ */jsx(CheckboxGroup, {
+      label: "Size",
+      orientation: "horizontal",
+      options: [{
+        value: "s",
+        label: "Small"
+      }, {
+        value: "m",
+        label: "Medium"
+      }, {
+        value: "l",
+        label: "Large"
+      }, {
+        value: "xl",
+        label: "X-Large"
+      }],
+      defaultValue: ["m"]
+    })
+  })
+};
+const CheckboxGroupWithDisabled = {
+  render: () => /* @__PURE__ */jsx(YStack, {
+    gap: "$4",
+    maxWidth: 400,
+    children: /* @__PURE__ */jsx(CheckboxGroup, {
+      label: "Options",
+      options: [{
+        value: "available",
+        label: "Available Option"
+      }, {
+        value: "disabled",
+        label: "Disabled Option",
+        disabled: true
+      }, {
+        value: "another",
+        label: "Another Option"
+      }],
+      defaultValue: ["available"],
+      helperText: "Some options may be disabled"
+    })
+  })
+};
+const CheckboxGroupInteractive = {
+  render: () => {
+    const InteractiveExample = () => {
+      const [selected, setSelected] = useState(["opt1"]);
+      return /* @__PURE__ */jsxs(YStack, {
+        gap: "$4",
+        maxWidth: 400,
+        children: [/* @__PURE__ */jsx(CheckboxGroup, {
+          label: "Interactive Selection",
+          options: [{
+            value: "opt1",
+            label: "Option 1"
+          }, {
+            value: "opt2",
+            label: "Option 2"
+          }, {
+            value: "opt3",
+            label: "Option 3"
+          }],
+          value: selected,
+          onValueChange: values => {
+            setSelected(values);
+            action("onValueChange")(values);
+          }
+        }), /* @__PURE__ */jsxs(Paragraph, {
+          size: "$2",
+          children: ["Selected: ", selected.join(", ") || "None"]
+        })]
+      });
+    };
+    return /* @__PURE__ */jsx(InteractiveExample, {});
+  }
+};
+export { Basic, CheckboxGroupBasic, CheckboxGroupHorizontal, CheckboxGroupInteractive, CheckboxGroupWithDisabled, CheckboxGroupWithForm, Comparison, Disabled, Main, Pointy, Sizes, Standalone, WithError, compound, Checkbox_stories_default as default };
+//# sourceMappingURL=Checkbox.stories.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["action","CheckIcon","useForm","useState","Checkbox","TamaguiCheckbox","Label","Paragraph","XStack","YStack","Button","Form","Checkboxes","CheckboxGroup","jsx","jsxs","meta","title","component","parameters","status","type","argTypes","label","control","helperText","error","required","disabled","size","options","checked","Checkbox_stories_default","Main","name","render","FormExample","form","defaultValues","terms","newsletter","onSubmit","value","children","validators","onChange","Standalone","args","Basic","defaultValue","Disabled","WithError","Pointy","gap","maxWidth","pointy","Sizes","compound","values","setValues","analytics","updates","marketing","onValuesChange","nextValues","Title","FocusGroup","orientation","Group","Item","Card","Indicator","Comparison","ComparisonExample","customChecked","setCustomChecked","tamaguiChecked","setTamaguiChecked","alignItems","padding","width","color","onCheckedChange","val","id","htmlFor","CheckboxGroupBasic","CheckboxGroupWithForm","features","permissions","CheckboxGroupHorizontal","CheckboxGroupWithDisabled","CheckboxGroupInteractive","InteractiveExample","selected","setSelected","onValueChange","join"],"sources":["../../../../src/fields/Checkbox/Checkbox.stories.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}