@multiplatform.one/forms 6.0.0

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

@@ -0,0 +1,293 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { action } from "@multiplatform.one/storybook";
+import { useForm } from "@tanstack/react-form";
+import { useState } from "react";
+import { YStack } from "tamagui";
+import { Button } from "../../Button/index.native.js";
+import { Form } from "../../Form/index.native.js";
+import { Calendar } from "./Calendar.native.js";
+import { DateRangePicker } from "./DateRangePicker.native.js";
+import { DatetimePicker } from "./DatetimePicker.native.js";
+import { MonthPicker } from "./MonthPicker.native.js";
+import { MultiDatePicker } from "./MultiDatePicker.native.js";
+import { DatePicker } from "./index.native.js";
+var meta = {
+  title: "Forms/DatePicker",
+  component: DatePicker,
+  parameters: {
+    docs: {
+      description: {
+        component: "Date picker with animated calendar, month/year drill-down, and responsive sheet for mobile. Includes Calendar, DateRangePicker, and MultiDatePicker variants."
+      }
+    }
+  },
+  argTypes: {
+    label: {
+      control: "text",
+      description: "Field label"
+    },
+    placeholder: {
+      control: "text",
+      description: "Placeholder text"
+    },
+    helperText: {
+      control: "text",
+      description: "Helper text below the field"
+    },
+    error: {
+      control: "text",
+      description: "Error message"
+    },
+    required: {
+      control: "boolean",
+      description: "Mark field as required"
+    },
+    disabled: {
+      control: "boolean",
+      description: "Disable the date picker"
+    },
+    size: {
+      control: "select",
+      options: ["$2", "$3", "$4"],
+      description: "Field size"
+    },
+    format: {
+      control: "text",
+      description: "Date format string"
+    },
+    minDate: {
+      control: "date",
+      description: "Minimum selectable date"
+    },
+    maxDate: {
+      control: "date",
+      description: "Maximum selectable date"
+    }
+  }
+};
+var DatePicker_stories_default = meta;
+var Main = {
+  name: "Main",
+  render: function render() {
+    var FormExample = function FormExample2() {
+      var form = useForm({
+        defaultValues: {
+          birthDate: /* @__PURE__ */new Date("1990-01-01"),
+          startDate: null,
+          endDate: null
+        },
+        onSubmit: async function onSubmit(param) {
+          var {
+            value
+          } = param;
+          action("onSubmit")(value);
+        }
+      });
+      return /* @__PURE__ */_jsx(Form, {
+        form,
+        children: /* @__PURE__ */_jsxs(YStack, {
+          gap: "$4",
+          maxWidth: 400,
+          children: [/* @__PURE__ */_jsx(DatePicker, {
+            label: "Birth Date",
+            name: "birthDate",
+            helperText: "Select your date of birth"
+          }), /* @__PURE__ */_jsx(DatePicker, {
+            label: "Start Date",
+            name: "startDate",
+            helperText: "Select project start date"
+          }), /* @__PURE__ */_jsx(DatePicker, {
+            label: "End Date",
+            name: "endDate",
+            helperText: "Select project end date"
+          }), /* @__PURE__ */_jsx(Button, {
+            action: "submit",
+            children: "Submit"
+          })]
+        })
+      });
+    };
+    return /* @__PURE__ */_jsx(FormExample, {});
+  }
+};
+var Standalone = {
+  args: {
+    label: "Date",
+    placeholder: "Select a date",
+    helperText: "Choose a date"
+  },
+  render: function render2(args) {
+    return /* @__PURE__ */_jsx(DatePicker, {
+      ...args
+    });
+  }
+};
+var Basic = {
+  render: function render3(args) {
+    return /* @__PURE__ */_jsx(DatePicker, {
+      ...args
+    });
+  },
+  args: {
+    label: "Select Date",
+    placeholder: "Choose a date"
+  }
+};
+var Disabled = {
+  args: {
+    label: "Disabled Date",
+    disabled: true,
+    placeholder: "Cannot select"
+  }
+};
+var WithError = {
+  args: {
+    label: "Required Date",
+    error: "Please select a date",
+    required: true
+  }
+};
+var Sizes = {
+  render: function render4() {
+    return /* @__PURE__ */_jsxs(YStack, {
+      gap: "$4",
+      maxWidth: 400,
+      children: [/* @__PURE__ */_jsx(DatePicker, {
+        label: "Small",
+        size: "$2",
+        placeholder: "Pick a date"
+      }), /* @__PURE__ */_jsx(DatePicker, {
+        label: "Medium (default)",
+        size: "$3",
+        placeholder: "Pick a date"
+      }), /* @__PURE__ */_jsx(DatePicker, {
+        label: "Large",
+        size: "$4",
+        placeholder: "Pick a date"
+      })]
+    });
+  }
+};
+var Interactive = {
+  render: function render5() {
+    var InteractiveExample = function InteractiveExample2() {
+      var [date, setDate] = useState("");
+      return /* @__PURE__ */_jsx(YStack, {
+        gap: "$4",
+        maxWidth: 400,
+        children: /* @__PURE__ */_jsx(DatePicker, {
+          label: "Pick a Date",
+          value: date,
+          // @ts-expect-error controlled mode not supported
+          onChange: function onChange(val) {
+            setDate(val);
+            action("onChange")(val);
+          },
+          placeholder: "Choose a date",
+          helperText: date ? `Selected: ${date}` : "No date selected"
+        })
+      });
+    };
+    return /* @__PURE__ */_jsx(InteractiveExample, {});
+  }
+};
+var CalendarBasic = function CalendarBasic2() {
+  return /* @__PURE__ */_jsx(YStack, {
+    maxWidth: 700,
+    children: /* @__PURE__ */_jsx(Calendar, {})
+  });
+};
+var RangePickerBasic = {
+  render: function render6(args) {
+    return /* @__PURE__ */_jsx(DateRangePicker, {
+      ...args
+    });
+  },
+  args: {
+    label: "Date Range",
+    placeholder: "Start date \u2013 End date",
+    helperText: "Select a start and end date"
+  }
+};
+var MultiPickerBasic = {
+  render: function render7(args) {
+    return /* @__PURE__ */_jsx(MultiDatePicker, {
+      ...args
+    });
+  },
+  args: {
+    label: "Select Dates",
+    placeholder: "Pick multiple dates",
+    limit: 5,
+    helperText: "Select up to 5 dates"
+  }
+};
+var MonthPickerBasic = {
+  render: function render8(args) {
+    return /* @__PURE__ */_jsx(MonthPicker, {
+      ...args
+    });
+  },
+  args: {
+    label: "Select Month",
+    placeholder: "Pick a month",
+    helperText: "Choose a month and year"
+  }
+};
+var MonthPickerWithYearRange = {
+  render: function render9() {
+    return /* @__PURE__ */_jsx(YStack, {
+      gap: "$4",
+      maxWidth: 400,
+      children: /* @__PURE__ */_jsx(MonthPicker, {
+        label: "Fiscal Period",
+        placeholder: "Select fiscal period",
+        helperText: "Choose between 2020 and 2030",
+        minYear: 2020,
+        maxYear: 2030
+      })
+    });
+  }
+};
+var DatetimePickerBasic = {
+  render: function render10(args) {
+    return /* @__PURE__ */_jsx(DatetimePicker, {
+      ...args
+    });
+  },
+  args: {
+    label: "Select Date & Time",
+    placeholder: "Pick date and time",
+    helperText: "Choose a date and time"
+  }
+};
+var DatetimePicker24Hour = {
+  render: function render11() {
+    return /* @__PURE__ */_jsx(YStack, {
+      gap: "$4",
+      maxWidth: 400,
+      children: /* @__PURE__ */_jsx(DatetimePicker, {
+        label: "Meeting Time",
+        placeholder: "Select meeting time",
+        helperText: "24-hour format",
+        timeFormat: "24h"
+      })
+    });
+  }
+};
+var DatetimePickerWithSeconds = {
+  render: function render12() {
+    return /* @__PURE__ */_jsx(YStack, {
+      gap: "$4",
+      maxWidth: 400,
+      children: /* @__PURE__ */_jsx(DatetimePicker, {
+        label: "Precise Timestamp",
+        placeholder: "Select exact time",
+        helperText: "With seconds",
+        showSeconds: true
+      })
+    });
+  }
+};
+export { Basic, CalendarBasic, DatetimePicker24Hour, DatetimePickerBasic, DatetimePickerWithSeconds, Disabled, Interactive, Main, MonthPickerBasic, MonthPickerWithYearRange, MultiPickerBasic, RangePickerBasic, Sizes, Standalone, WithError, DatePicker_stories_default as default };
+//# sourceMappingURL=DatePicker.stories.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","action","useForm","useState","YStack","Button","Form","Calendar","DateRangePicker","DatetimePicker","MonthPicker","MultiDatePicker","DatePicker","meta","title","component","parameters","docs","description","argTypes","label","control","placeholder","helperText","error","required","disabled","size","options","format","minDate","maxDate","DatePicker_stories_default","Main","name","render","FormExample","FormExample2","form","defaultValues","birthDate","Date","startDate","endDate","onSubmit","param","value","children","gap","maxWidth","Standalone","args","render2","Basic","render3","Disabled","WithError","Sizes","render4","Interactive","render5","InteractiveExample","InteractiveExample2","date","setDate","onChange","val","CalendarBasic","CalendarBasic2"],"sources":["../../../../src/fields/DatePicker/DatePicker.stories.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}