@multiplatform.one/forms 6.0.0

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

@@ -0,0 +1,299 @@
+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.mjs";
+import { Form } from "../../Form/index.mjs";
+import { MentionInput } from "./index.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+const meta = {
+  title: "Forms/MentionInput",
+  component: MentionInput,
+  parameters: {
+    docs: {
+      description: {
+        component: "A text input component with @mention support for tagging users, hashtags, or other entities with autocomplete suggestions."
+      }
+    }
+  },
+  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 input"
+    },
+    size: {
+      control: "select",
+      options: ["$2", "$3", "$4"],
+      description: "Field size"
+    },
+    minHeight: {
+      control: "number",
+      description: "Minimum height of input"
+    },
+    maxHeight: {
+      control: "number",
+      description: "Maximum height of input"
+    }
+  }
+};
+var MentionInput_stories_default = meta;
+const userMentions = {
+  trigger: "@",
+  data: [{
+    id: "1",
+    display: "John Doe",
+    avatar: "https://i.pravatar.cc/150?img=1",
+    description: "Software Engineer"
+  }, {
+    id: "2",
+    display: "Jane Smith",
+    avatar: "https://i.pravatar.cc/150?img=2",
+    description: "Product Manager"
+  }, {
+    id: "3",
+    display: "Bob Johnson",
+    avatar: "https://i.pravatar.cc/150?img=3",
+    description: "Designer"
+  }, {
+    id: "4",
+    display: "Alice Williams",
+    avatar: "https://i.pravatar.cc/150?img=4",
+    description: "Marketing"
+  }, {
+    id: "5",
+    display: "Charlie Brown",
+    avatar: "https://i.pravatar.cc/150?img=5",
+    description: "Developer"
+  }],
+  allowSpace: false,
+  insertSpace: true
+};
+const hashtagMentions = {
+  trigger: "#",
+  data: [{
+    id: "react",
+    display: "react"
+  }, {
+    id: "javascript",
+    display: "javascript"
+  }, {
+    id: "typescript",
+    display: "typescript"
+  }, {
+    id: "webdev",
+    display: "webdev"
+  }, {
+    id: "programming",
+    display: "programming"
+  }],
+  allowSpace: false,
+  insertSpace: true
+};
+const Main = {
+  name: "Main",
+  render: () => {
+    const FormExample = () => {
+      const form = useForm({
+        defaultValues: {
+          comment: {
+            text: "",
+            mentions: []
+          },
+          message: {
+            text: "",
+            mentions: []
+          }
+        },
+        onSubmit: async ({
+          value
+        }) => {
+          action("onSubmit")(value);
+        }
+      });
+      return /* @__PURE__ */jsx(Form, {
+        form,
+        children: /* @__PURE__ */jsxs(YStack, {
+          gap: "$4",
+          children: [/* @__PURE__ */jsx(MentionInput, {
+            label: "Comment",
+            name: "comment",
+            mentions: [userMentions],
+            helperText: "Type @ to mention team members",
+            onMentionSelect: mention => action("mentionSelected")(mention),
+            placeholder: "Type @ to mention someone"
+          }), /* @__PURE__ */jsx(MentionInput, {
+            label: "Message",
+            name: "message",
+            mentions: [userMentions],
+            helperText: "Write a message to your team",
+            placeholder: "Type @ to mention someone"
+          }), /* @__PURE__ */jsx(Button, {
+            action: "submit",
+            children: "Submit"
+          })]
+        })
+      });
+    };
+    return /* @__PURE__ */jsx(FormExample, {});
+  }
+};
+const Standalone = {
+  args: {
+    label: "Comment",
+    placeholder: "Type @ to mention...",
+    helperText: "Mention people with @"
+  },
+  render: args => /* @__PURE__ */jsx(MentionInput, {
+    ...args,
+    mentions: [userMentions]
+  })
+};
+const Basic = {
+  render: args => /* @__PURE__ */jsx(MentionInput, {
+    ...args,
+    mentions: [userMentions],
+    onMentionSelect: (mention, trigger) => action("onMentionSelect")(mention, trigger)
+  }),
+  args: {
+    label: "Comment",
+    placeholder: "Type @ to mention someone",
+    disabled: false,
+    minHeight: void 0,
+    maxHeight: void 0
+  }
+};
+const Disabled = {
+  render: args => /* @__PURE__ */jsx(MentionInput, {
+    ...args,
+    mentions: [userMentions]
+  }),
+  args: {
+    label: "Disabled Mention",
+    disabled: true,
+    placeholder: "Cannot interact"
+  }
+};
+const WithError = {
+  render: args => /* @__PURE__ */jsx(MentionInput, {
+    ...args,
+    mentions: [userMentions]
+  }),
+  args: {
+    label: "Required Comment",
+    error: "This field is required",
+    required: true,
+    placeholder: "Type @ to mention someone"
+  }
+};
+const Sizes = {
+  render: () => /* @__PURE__ */jsxs(YStack, {
+    gap: "$4",
+    maxWidth: 400,
+    children: [/* @__PURE__ */jsx(MentionInput, {
+      label: "Small",
+      size: "$2",
+      mentions: [userMentions],
+      placeholder: "Type @ to mention"
+    }), /* @__PURE__ */jsx(MentionInput, {
+      label: "Medium (default)",
+      size: "$3",
+      mentions: [userMentions],
+      placeholder: "Type @ to mention"
+    }), /* @__PURE__ */jsx(MentionInput, {
+      label: "Large",
+      size: "$4",
+      mentions: [userMentions],
+      placeholder: "Type @ to mention"
+    })]
+  })
+};
+const Interactive = {
+  render: () => {
+    const InteractiveExample = () => {
+      const [value, setValue] = useState("");
+      return /* @__PURE__ */jsx(YStack, {
+        gap: "$4",
+        maxWidth: 400,
+        children: /* @__PURE__ */jsx(MentionInput, {
+          label: "Comment",
+          value,
+          onChange: val => {
+            setValue(val);
+            action("onChange")(val);
+          },
+          mentions: [userMentions],
+          placeholder: "Type @ to mention someone",
+          helperText: value ? `Current text: ${value}` : "Start typing..."
+        })
+      });
+    };
+    return /* @__PURE__ */jsx(InteractiveExample, {});
+  }
+};
+const MultipleTriggersStory = {
+  render: args => {
+    const MultipleTriggersComponent = () => {
+      const form = useForm({
+        defaultValues: {
+          post: {
+            text: "",
+            mentions: []
+          }
+        },
+        onSubmit: async ({
+          value
+        }) => {
+          action("onSubmit")(value);
+        }
+      });
+      return /* @__PURE__ */jsxs(YStack, {
+        gap: "$4",
+        children: [/* @__PURE__ */jsx(MentionInput, {
+          label: "Create Post",
+          name: "post",
+          form,
+          mentions: [userMentions, hashtagMentions],
+          helperText: "Use @ to mention team members and # for hashtags",
+          onMentionSelect: (mention, trigger) => action("mentionSelected")(mention, trigger),
+          placeholder: args.placeholder,
+          minHeight: args.minHeight,
+          maxHeight: args.maxHeight,
+          disabled: args.disabled
+        }), /* @__PURE__ */jsx(Button, {
+          form,
+          action: "submit",
+          children: "Post"
+        })]
+      });
+    };
+    return /* @__PURE__ */jsx(MultipleTriggersComponent, {});
+  },
+  args: {
+    placeholder: "Type @ to mention users or # for hashtags",
+    minHeight: 150,
+    maxHeight: void 0,
+    disabled: false
+  }
+};
+export { Basic, Disabled, Interactive, Main, MultipleTriggersStory, Sizes, Standalone, WithError, MentionInput_stories_default as default };
+//# sourceMappingURL=MentionInput.stories.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["action","useForm","useState","YStack","Button","Form","MentionInput","jsx","jsxs","meta","title","component","parameters","docs","description","argTypes","label","control","placeholder","helperText","error","required","disabled","size","options","minHeight","maxHeight","MentionInput_stories_default","userMentions","trigger","data","id","display","avatar","allowSpace","insertSpace","hashtagMentions","Main","name","render","FormExample","form","defaultValues","comment","text","mentions","message","onSubmit","value","children","gap","onMentionSelect","mention","Standalone","args","Basic","Disabled","WithError","Sizes","maxWidth","Interactive","InteractiveExample","setValue","onChange","val","MultipleTriggersStory","MultipleTriggersComponent","post"],"sources":["../../../../src/fields/MentionInput/MentionInput.stories.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,354 @@
+"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 MentionInput_stories_exports = {};
+__export(MentionInput_stories_exports, {
+  Basic: () => Basic,
+  Disabled: () => Disabled,
+  Interactive: () => Interactive,
+  Main: () => Main,
+  MultipleTriggersStory: () => MultipleTriggersStory,
+  Sizes: () => Sizes,
+  Standalone: () => Standalone,
+  WithError: () => WithError,
+  default: () => MentionInput_stories_default
+});
+module.exports = __toCommonJS(MentionInput_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/MentionInput",
+  component: import_index.MentionInput,
+  parameters: {
+    docs: {
+      description: {
+        component: "A text input component with @mention support for tagging users, hashtags, or other entities with autocomplete suggestions."
+      }
+    }
+  },
+  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 input"
+    },
+    size: {
+      control: "select",
+      options: ["$2", "$3", "$4"],
+      description: "Field size"
+    },
+    minHeight: {
+      control: "number",
+      description: "Minimum height of input"
+    },
+    maxHeight: {
+      control: "number",
+      description: "Maximum height of input"
+    }
+  }
+};
+var MentionInput_stories_default = meta;
+var userMentions = {
+  trigger: "@",
+  data: [{
+    id: "1",
+    display: "John Doe",
+    avatar: "https://i.pravatar.cc/150?img=1",
+    description: "Software Engineer"
+  }, {
+    id: "2",
+    display: "Jane Smith",
+    avatar: "https://i.pravatar.cc/150?img=2",
+    description: "Product Manager"
+  }, {
+    id: "3",
+    display: "Bob Johnson",
+    avatar: "https://i.pravatar.cc/150?img=3",
+    description: "Designer"
+  }, {
+    id: "4",
+    display: "Alice Williams",
+    avatar: "https://i.pravatar.cc/150?img=4",
+    description: "Marketing"
+  }, {
+    id: "5",
+    display: "Charlie Brown",
+    avatar: "https://i.pravatar.cc/150?img=5",
+    description: "Developer"
+  }],
+  allowSpace: false,
+  insertSpace: true
+};
+var hashtagMentions = {
+  trigger: "#",
+  data: [{
+    id: "react",
+    display: "react"
+  }, {
+    id: "javascript",
+    display: "javascript"
+  }, {
+    id: "typescript",
+    display: "typescript"
+  }, {
+    id: "webdev",
+    display: "webdev"
+  }, {
+    id: "programming",
+    display: "programming"
+  }],
+  allowSpace: false,
+  insertSpace: true
+};
+var Main = {
+  name: "Main",
+  render: function render() {
+    var FormExample = function FormExample2() {
+      var form = (0, import_react_form.useForm)({
+        defaultValues: {
+          comment: {
+            text: "",
+            mentions: []
+          },
+          message: {
+            text: "",
+            mentions: []
+          }
+        },
+        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.MentionInput, {
+            label: "Comment",
+            name: "comment",
+            mentions: [userMentions],
+            helperText: "Type @ to mention team members",
+            onMentionSelect: function onMentionSelect(mention) {
+              return (0, import_storybook.action)("mentionSelected")(mention);
+            },
+            placeholder: "Type @ to mention someone"
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.MentionInput, {
+            label: "Message",
+            name: "message",
+            mentions: [userMentions],
+            helperText: "Write a message to your team",
+            placeholder: "Type @ to mention someone"
+          }), /* @__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: "Comment",
+    placeholder: "Type @ to mention...",
+    helperText: "Mention people with @"
+  },
+  render: function render2(args) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.MentionInput, {
+      ...args,
+      mentions: [userMentions]
+    });
+  }
+};
+var Basic = {
+  render: function render3(args) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.MentionInput, {
+      ...args,
+      mentions: [userMentions],
+      onMentionSelect: function onMentionSelect(mention, trigger) {
+        return (0, import_storybook.action)("onMentionSelect")(mention, trigger);
+      }
+    });
+  },
+  args: {
+    label: "Comment",
+    placeholder: "Type @ to mention someone",
+    disabled: false,
+    minHeight: void 0,
+    maxHeight: void 0
+  }
+};
+var Disabled = {
+  render: function render4(args) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.MentionInput, {
+      ...args,
+      mentions: [userMentions]
+    });
+  },
+  args: {
+    label: "Disabled Mention",
+    disabled: true,
+    placeholder: "Cannot interact"
+  }
+};
+var WithError = {
+  render: function render5(args) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.MentionInput, {
+      ...args,
+      mentions: [userMentions]
+    });
+  },
+  args: {
+    label: "Required Comment",
+    error: "This field is required",
+    required: true,
+    placeholder: "Type @ to mention someone"
+  }
+};
+var Sizes = {
+  render: function render6() {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      gap: "$4",
+      maxWidth: 400,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.MentionInput, {
+        label: "Small",
+        size: "$2",
+        mentions: [userMentions],
+        placeholder: "Type @ to mention"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.MentionInput, {
+        label: "Medium (default)",
+        size: "$3",
+        mentions: [userMentions],
+        placeholder: "Type @ to mention"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.MentionInput, {
+        label: "Large",
+        size: "$4",
+        mentions: [userMentions],
+        placeholder: "Type @ to mention"
+      })]
+    });
+  }
+};
+var Interactive = {
+  render: function render7() {
+    var InteractiveExample = function InteractiveExample2() {
+      var [value, setValue] = (0, import_react.useState)("");
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+        gap: "$4",
+        maxWidth: 400,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.MentionInput, {
+          label: "Comment",
+          value,
+          // @ts-expect-error controlled mode not supported
+          onChange: function onChange(val) {
+            setValue(val);
+            (0, import_storybook.action)("onChange")(val);
+          },
+          mentions: [userMentions],
+          placeholder: "Type @ to mention someone",
+          helperText: value ? `Current text: ${value}` : "Start typing..."
+        })
+      });
+    };
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(InteractiveExample, {});
+  }
+};
+var MultipleTriggersStory = {
+  render: function render8(args) {
+    var MultipleTriggersComponent = function MultipleTriggersComponent2() {
+      var form = (0, import_react_form.useForm)({
+        defaultValues: {
+          post: {
+            text: "",
+            mentions: []
+          }
+        },
+        onSubmit: async function onSubmit(param) {
+          var {
+            value
+          } = param;
+          (0, import_storybook.action)("onSubmit")(value);
+        }
+      });
+      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        gap: "$4",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.MentionInput, {
+          label: "Create Post",
+          name: "post",
+          form,
+          mentions: [userMentions, hashtagMentions],
+          helperText: "Use @ to mention team members and # for hashtags",
+          onMentionSelect: function onMentionSelect(mention, trigger) {
+            return (0, import_storybook.action)("mentionSelected")(mention, trigger);
+          },
+          placeholder: args.placeholder,
+          minHeight: args.minHeight,
+          maxHeight: args.maxHeight,
+          disabled: args.disabled
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+          form,
+          action: "submit",
+          children: "Post"
+        })]
+      });
+    };
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(MultipleTriggersComponent, {});
+  },
+  args: {
+    placeholder: "Type @ to mention users or # for hashtags",
+    minHeight: 150,
+    maxHeight: void 0,
+    disabled: false
+  }
+};
+//# sourceMappingURL=MentionInput.stories.native.js.map

package/dist/jsx/fields/MentionInput/MentionInput.stories.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","MentionInput_stories_exports","Basic","Disabled","Interactive","Main","MultipleTriggersStory","Sizes","Standalone","WithError","default","MentionInput_stories_default","module","exports","import_jsx_runtime","require","import_storybook","import_react_form","import_react","import_tamagui","import_Button","import_Form","import_index","meta","title","component","MentionInput","parameters","docs","description","argTypes","label","control","placeholder","helperText","error","required","disabled","size","options","minHeight","maxHeight","userMentions","trigger","data","id","display","avatar","allowSpace","insertSpace","hashtagMentions","render","FormExample","FormExample2","form","useForm","defaultValues","comment","text","mentions","message","onSubmit","param","action","jsx","Form","children","jsxs","YStack","gap","onMentionSelect","mention","Button","args","render2","render3","render4"],"sources":["../../../../src/fields/MentionInput/MentionInput.stories.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}