@multiplatform.one/forms 6.0.0

package/dist/esm/fields/Select/Select.stories.native.js

@@ -0,0 +1,410 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from "react";
+import { action } from "@multiplatform.one/storybook";
+import { useForm } from "@tanstack/react-form";
+import { CaretDownIcon, CaretUpIcon } from "@phosphor-icons/react";
+import { Adapt, Paragraph, Select as TamaguiSelect, Sheet, XStack, YStack } from "tamagui";
+import { Button } from "../../Button/index.native.js";
+import { Form } from "../../Form/index.native.js";
+import { Select } from "./index.native.js";
+var meta = {
+  title: "Forms/Select",
+  component: Select,
+  parameters: {
+    docs: {
+      description: {
+        component: "A select component with form integration and responsive design."
+      }
+    }
+  },
+  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"]
+    },
+    value: {
+      control: "text"
+    },
+    options: {
+      control: "object"
+    }
+  }
+};
+var Select_stories_default = meta;
+var sampleOptions = [{
+  value: "option1",
+  label: "Option 1"
+}, {
+  value: "option2",
+  label: "Option 2"
+}, {
+  value: "option3",
+  label: "Option 3"
+}, {
+  value: "option4",
+  label: "Option 4"
+}];
+var roleOptions = [{
+  value: "admin",
+  label: "Administrator"
+}, {
+  value: "user",
+  label: "User"
+}, {
+  value: "guest",
+  label: "Guest"
+}, {
+  value: "moderator",
+  label: "Moderator"
+}];
+var countryOptions = [{
+  value: "us",
+  label: "United States"
+}, {
+  value: "ca",
+  label: "Canada"
+}, {
+  value: "uk",
+  label: "United Kingdom"
+}, {
+  value: "de",
+  label: "Germany"
+}, {
+  value: "fr",
+  label: "France"
+}, {
+  value: "jp",
+  label: "Japan"
+}];
+var Main = {
+  name: "Main",
+  render: function render() {
+    var FormExample = function FormExample2() {
+      var form = useForm({
+        defaultValues: {
+          role: "",
+          country: "us",
+          priority: ""
+        },
+        onSubmit: async function onSubmit(param) {
+          var {
+            value
+          } = param;
+          action("onSubmit")(value);
+        }
+      });
+      return /* @__PURE__ */_jsx(Form, {
+        form,
+        className: "max-w-md",
+        children: /* @__PURE__ */_jsxs(YStack, {
+          gap: "$4",
+          children: [/* @__PURE__ */_jsx(Select, {
+            label: "User Role",
+            name: "role",
+            options: roleOptions,
+            placeholder: "Select a role",
+            required: true
+          }), /* @__PURE__ */_jsx(Select, {
+            label: "Country",
+            name: "country",
+            options: countryOptions,
+            placeholder: "Select your country"
+          }), /* @__PURE__ */_jsx(Select, {
+            label: "Priority",
+            name: "priority",
+            options: [{
+              value: "low",
+              label: "Low Priority"
+            }, {
+              value: "medium",
+              label: "Medium Priority"
+            }, {
+              value: "high",
+              label: "High Priority"
+            }, {
+              value: "urgent",
+              label: "Urgent"
+            }],
+            placeholder: "Select priority level"
+          }), /* @__PURE__ */_jsx(Button, {
+            action: "submit",
+            children: "Submit Form"
+          })]
+        })
+      });
+    };
+    return /* @__PURE__ */_jsx(FormExample, {});
+  }
+};
+var Standalone = {
+  args: {
+    label: "Country",
+    placeholder: "Select a country",
+    helperText: "Choose your country",
+    disabled: false,
+    required: false,
+    size: "$3",
+    options: countryOptions
+  },
+  render: function render2(args) {
+    return /* @__PURE__ */_jsx(Select, {
+      ...args
+    });
+  }
+};
+var Basic = {
+  args: {
+    options: sampleOptions,
+    placeholder: "Select an option"
+  },
+  render: function Render(args) {
+    var [value, setValue] = useState("");
+    return /* @__PURE__ */_jsx(Select, {
+      ...args,
+      value: value || void 0,
+      onValueChange: function onValueChange(val) {
+        var _val_;
+        setValue(Array.isArray(val) ? (_val_ = val[0]) !== null && _val_ !== void 0 ? _val_ : "" : val);
+        action("onValueChange")(val);
+      }
+    });
+  }
+};
+var Disabled = {
+  args: {
+    label: "Disabled Field",
+    disabled: true,
+    options: sampleOptions,
+    placeholder: "Cannot interact"
+  }
+};
+var WithError = {
+  args: {
+    label: "Field with Error",
+    error: "This field is required",
+    required: true,
+    options: sampleOptions
+  }
+};
+var Sizes = {
+  render: function render3() {
+    return /* @__PURE__ */_jsxs(YStack, {
+      gap: "$4",
+      maxWidth: 400,
+      children: [/* @__PURE__ */_jsx(Select, {
+        label: "Small",
+        size: "$2",
+        options: sampleOptions,
+        placeholder: "Small select"
+      }), /* @__PURE__ */_jsx(Select, {
+        label: "Medium (default)",
+        size: "$3",
+        options: sampleOptions,
+        placeholder: "Medium select"
+      }), /* @__PURE__ */_jsx(Select, {
+        label: "Large",
+        size: "$4",
+        options: sampleOptions,
+        placeholder: "Large select"
+      })]
+    });
+  }
+};
+var DynamicOptions = {
+  render: function render4() {
+    var DynamicExample = function DynamicExample2() {
+      var [category, setCategory] = useState("");
+      var getOptions = function getOptions2(category2) {
+        switch (category2) {
+          case "fruits":
+            return [{
+              value: "apple",
+              label: "Apple"
+            }, {
+              value: "banana",
+              label: "Banana"
+            }, {
+              value: "orange",
+              label: "Orange"
+            }];
+          case "vegetables":
+            return [{
+              value: "carrot",
+              label: "Carrot"
+            }, {
+              value: "broccoli",
+              label: "Broccoli"
+            }, {
+              value: "spinach",
+              label: "Spinach"
+            }];
+          default:
+            return [];
+        }
+      };
+      var categoryOptions = [{
+        value: "fruits",
+        label: "Fruits"
+      }, {
+        value: "vegetables",
+        label: "Vegetables"
+      }];
+      return /* @__PURE__ */_jsxs(YStack, {
+        gap: "$4",
+        padding: "$4",
+        children: [/* @__PURE__ */_jsx(Select, {
+          label: "Category",
+          name: "category",
+          options: categoryOptions,
+          placeholder: "Select a category",
+          onValueChange: function onValueChange(val) {
+            var _val_;
+            return setCategory(Array.isArray(val) ? (_val_ = val[0]) !== null && _val_ !== void 0 ? _val_ : "" : val);
+          }
+        }), /* @__PURE__ */_jsx(Select, {
+          label: "Item",
+          name: "item",
+          options: getOptions(category),
+          placeholder: category ? "Select an item" : "Select a category first",
+          disabled: !category
+        })]
+      });
+    };
+    return /* @__PURE__ */_jsx(DynamicExample, {});
+  }
+};
+var Comparison = {
+  render: function render5() {
+    var ComparisonExample = function ComparisonExample2() {
+      var [customValue, setCustomValue] = useState();
+      var [tamaguiValue, setTamaguiValue] = useState();
+      return /* @__PURE__ */_jsxs(XStack, {
+        gap: "$4",
+        alignItems: "flex-start",
+        padding: "$4",
+        children: [/* @__PURE__ */_jsxs(YStack, {
+          gap: "$2",
+          width: 320,
+          children: [/* @__PURE__ */_jsx(Paragraph, {
+            size: "$2",
+            color: "$placeholderColor",
+            children: "Custom Select"
+          }), /* @__PURE__ */_jsx(Select, {
+            options: sampleOptions,
+            placeholder: "Select an option",
+            groupLabel: "Options",
+            value: customValue,
+            onValueChange: function onValueChange(val) {
+              setCustomValue(Array.isArray(val) ? val[0] : val);
+              action("custom.onValueChange")(val);
+            }
+          })]
+        }), /* @__PURE__ */_jsxs(YStack, {
+          gap: "$2",
+          width: 320,
+          children: [/* @__PURE__ */_jsx(Paragraph, {
+            size: "$2",
+            color: "$placeholderColor",
+            children: "Tamagui Select"
+          }), /* @__PURE__ */_jsxs(TamaguiSelect, {
+            value: tamaguiValue,
+            onValueChange: function onValueChange(val) {
+              setTamaguiValue(val);
+              action("tamagui.onValueChange")(val);
+            },
+            children: [/* @__PURE__ */_jsx(TamaguiSelect.Trigger, {
+              iconAfter: CaretDownIcon,
+              children: /* @__PURE__ */_jsx(TamaguiSelect.Value, {
+                placeholder: "Select an option"
+              })
+            }), /* biome-ignore lint/suspicious/noExplicitAny: Tamagui Adapt breakpoint type */
+            /* @__PURE__ */_jsx(Adapt, {
+              when: "sm",
+              platform: "touch",
+              children: /* @__PURE__ */_jsxs(Sheet, {
+                modal: true,
+                dismissOnSnapToBottom: true,
+                children: [/* @__PURE__ */_jsx(Sheet.Frame, {
+                  children: /* @__PURE__ */_jsx(Sheet.ScrollView, {
+                    children: /* @__PURE__ */_jsx(Adapt.Contents, {})
+                  })
+                }), /* @__PURE__ */_jsx(Sheet.Overlay, {
+                  transition: "lazy",
+                  enterStyle: {
+                    opacity: 0
+                  },
+                  exitStyle: {
+                    opacity: 0
+                  }
+                })]
+              })
+            }), /* @__PURE__ */_jsxs(TamaguiSelect.Content, {
+              ...{
+                zIndex: 2e5
+              },
+              children: [/* @__PURE__ */_jsx(TamaguiSelect.ScrollUpButton, {
+                alignItems: "center",
+                justifyContent: "center",
+                position: "relative",
+                width: "100%",
+                height: "$3",
+                children: /* @__PURE__ */_jsx(YStack, {
+                  zIndex: 10,
+                  children: /* @__PURE__ */_jsx(CaretUpIcon, {
+                    size: 20
+                  })
+                })
+              }), /* @__PURE__ */_jsx(TamaguiSelect.Viewport, {
+                minWidth: 200,
+                children: /* @__PURE__ */_jsx(TamaguiSelect.Group, {
+                  children: sampleOptions.map(function (option, i) {
+                    return /* @__PURE__ */_jsx(TamaguiSelect.Item, {
+                      value: option.value,
+                      index: i,
+                      children: /* @__PURE__ */_jsx(TamaguiSelect.ItemText, {
+                        children: option.label
+                      })
+                    }, option.value);
+                  })
+                })
+              }), /* @__PURE__ */_jsx(TamaguiSelect.ScrollDownButton, {
+                alignItems: "center",
+                justifyContent: "center",
+                position: "relative",
+                width: "100%",
+                height: "$3",
+                children: /* @__PURE__ */_jsx(YStack, {
+                  zIndex: 10,
+                  children: /* @__PURE__ */_jsx(CaretDownIcon, {
+                    size: 20
+                  })
+                })
+              })]
+            })]
+          })]
+        })]
+      });
+    };
+    return /* @__PURE__ */_jsx(ComparisonExample, {});
+  }
+};
+export { Basic, Comparison, Disabled, DynamicOptions, Main, Sizes, Standalone, WithError, Select_stories_default as default };
+//# sourceMappingURL=Select.stories.native.js.map

package/dist/esm/fields/Select/Select.stories.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","React","useState","action","useForm","CaretDownIcon","CaretUpIcon","Adapt","Paragraph","Select","TamaguiSelect","Sheet","XStack","YStack","Button","Form","meta","title","component","parameters","docs","description","argTypes","label","control","placeholder","helperText","error","required","disabled","size","options","value","Select_stories_default","sampleOptions","roleOptions","countryOptions","Main","name","render","FormExample","FormExample2","form","defaultValues","role","country","priority","onSubmit","param","className","children","gap","Standalone","args","render2","Basic","Render","setValue","onValueChange","val","_val_","Array","isArray","Disabled","WithError","Sizes","render3","maxWidth","DynamicOptions","render4","DynamicExample","DynamicExample2","category","setCategory","getOptions","getOptions2","category2"],"sources":["../../../../src/fields/Select/Select.stories.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}