>({\r\n defaultValues: {\r\n name: [\"3\", \"5\"],\r\n },\r\n resolver: zodResolver(CreateBranchesSchema),\r\n });\r\n const handleSubmit = form.handleSubmit((data) => {\r\n console.log(data);\r\n });\r\n return (\r\n \r\n \r\n
\r\n );\r\n};\r\n```\r\n\r\n### Dropdown with mock api for support pagination\r\n\r\n```tsx\r\nconst CreateBranchesSchema = zod.object({\r\n test: zod.array(zod.string()).min(1),\r\n});\r\nconst options = [\r\n { label: \"test1\", value: \"1\" },\r\n { label: \"test2\", value: \"2\" },\r\n { label: \"test3\", value: \"3\" },\r\n { label: \"test4\", value: \"4\" },\r\n { label: \"test5\", value: \"5\" },\r\n { label: \"test6\", value: \"6\" },\r\n { label: \"test7\", value: \"7\" },\r\n { label: \"test8\", value: \"8\" },\r\n { label: \"test9\", value: \"9\" },\r\n { label: \"test10\", value: \"10\" },\r\n { label: \"test11\", value: \"11\" },\r\n { label: \"test12\", value: \"12\" },\r\n { label: \"test13\", value: \"13\" },\r\n { label: \"test14\", value: \"14\" },\r\n { label: \"test15\", value: \"15\" },\r\n { label: \"test16\", value: \"16\" },\r\n { label: \"test17\", value: \"17\" },\r\n { label: \"test18\", value: \"18\" },\r\n { label: \"test19\", value: \"19\" },\r\n { label: \"test20\", value: \"20\" },\r\n { label: \"test21\", value: \"21\" },\r\n { label: \"test22\", value: \"22\" },\r\n { label: \"test23\", value: \"23\" },\r\n { label: \"test24\", value: \"24\" },\r\n { label: \"test25\", value: \"25\" },\r\n { label: \"test26\", value: \"26\" },\r\n { label: \"test27\", value: \"27\" },\r\n { label: \"test28\", value: \"28\" },\r\n { label: \"test29\", value: \"29\" },\r\n { label: \"test30\", value: \"30\" },\r\n { label: \"test31\", value: \"31\" },\r\n { label: \"test32\", value: \"32\" },\r\n { label: \"test33\", value: \"33\" },\r\n { label: \"test34\", value: \"34\" },\r\n { label: \"test35\", value: \"35\" },\r\n { label: \"test36\", value: \"36\" },\r\n { label: \"test37\", value: \"37\" },\r\n { label: \"test38\", value: \"38\" },\r\n { label: \"test39\", value: \"39\" },\r\n { label: \"test40\", value: \"40\" },\r\n];\r\n\r\nconst mockApiCall = (delayMs: number, page: number): Promise => {\r\n return new Promise((resolve) => {\r\n setTimeout(() => {\r\n resolve(true);\r\n }, delayMs);\r\n });\r\n};\r\n\r\nconst App = () => {\r\n const form = useForm>({\r\n defaultValues: {\r\n test: [\"32\", \"33\"],\r\n },\r\n resolver: zodResolver(CreateBranchesSchema),\r\n });\r\n const [open, setOpen] = useState(false);\r\n const ref = useRef(null);\r\n const onSubmit = (data: zod.infer) => {\r\n console.log(data);\r\n };\r\n const totalPages = 4;\r\n const [page, setPage] = useState(1);\r\n const [loading, setLoading] = useState(false);\r\n const [optionsData, setOptionsData] = useState([]);\r\n\r\n useEffect(() => {\r\n const test = async () => {\r\n setLoading(true);\r\n await mockApiCall(3000, page);\r\n setOptionsData(options.slice(0, page * 10));\r\n setLoading(false);\r\n };\r\n test();\r\n }, [page]);\r\n\r\n return (\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default App;\r\n```\r\n\r\n### Image Upload Example\r\n\r\nYou can use the `ImageUpload` component to upload an image.\r\nuse `useUpload` hook to upload the image to the server.\r\nYou can use this component with react-hook-form or formik.\r\n\r\n```tsx\r\nconst App = () => {\r\n const form = useForm>({\r\n defaultValues: {\r\n name: faker.image.avatar(),\r\n },\r\n resolver: zodResolver(CreateBranchesSchema),\r\n });\r\n const handleSubmit = form.handleSubmit((data) => {\r\n console.log(data);\r\n });\r\n\r\n const handleUploadFile = async (\r\n e: React.ChangeEvent,\r\n field: any\r\n ) => {\r\n const files = e.target.files;\r\n if (files && files.length > 0) {\r\n const file = new FormData();\r\n file.append(\"file\", files[0]);\r\n field.onChange(faker.image.avatar());\r\n }\r\n };\r\n\r\n return (\r\n \r\n \r\n
\r\n );\r\n};\r\n```\r\n\r\n### DndFile Example\r\n\r\nYou can use the `DndFile` component to upload a file or multiple files here is the example of multiple files.\r\nuse `useUpload` hook to upload the file to the server.\r\nYou can use this component with react-hook-form or formik.\r\n\r\n```tsx\r\nconst App = () => {\r\n const [files, setFiles] = useState([]);\r\n const [rejectedFiles, setRejectedFiles] = useState([]);\r\n\r\n const form = useForm>({\r\n defaultValues: {\r\n url: [faker.image.avatar(), faker.image.avatar()],\r\n },\r\n resolver: zodResolver(CreateBranchesSchema),\r\n });\r\n const handleSubmit = form.handleSubmit((data) => {\r\n console.log(data);\r\n });\r\n\r\n const onDrop = useCallback(\r\n async (acceptedFiles: any, rejectedFiles: any, field: any) => {\r\n if (rejectedFiles.length > 0) {\r\n setRejectedFiles(rejectedFiles);\r\n return;\r\n }\r\n\r\n setFiles(acceptedFiles);\r\n field.onChange([\r\n ...(Array.isArray(field.value) ? field.value : []),\r\n ...acceptedFiles.map((item: any) => faker.image.avatar()),\r\n ]);\r\n },\r\n []\r\n );\r\n\r\n return (\r\n \r\n \r\n
\r\n );\r\n};\r\n```\r\n\r\n### Modal i7-ui\r\n\r\n```tsx\r\n {\r\n // const parent = ref.current?.parentElement;\r\n // if (parent?.classList.contains(\"confirm\")) {\r\n // parent.classList.remove(\"enter\");\r\n // parent.classList.remove(\"confirm\");\r\n // setTimeout(() => {\r\n // parent?.classList.add(\"confirm\");\r\n // }, 10);\r\n // } else {\r\n // parent?.classList.add(\"confirm\");\r\n // }\r\n // }}\r\n>\r\n \r\n test\r\n body\r\n footer\r\n
\r\n\r\n```\r\n\r\n## Hooks\r\n\r\n### useComboboxData\r\n\r\nThe `useComboboxData` hook is used when implementing a combobox component that needs to fetch data from an API. It provides functionality for handling search, pagination, and initial data loading.\r\n\r\n```bash\r\nnpm install @tanstack/react-query axios\r\n```\r\n\r\n## Available Components\r\n\r\ni7-UI provides a wide range of components including:\r\n\r\n- ActionMenu\r\n- Combobox\r\n- Dropdown\r\n- Form\r\n- KeyboundForm\r\n- Modal\r\n- Dropdown\r\n- Container\r\n- Header\r\n- GridLayout , GridItem\r\n- SectionRow\r\n- Skeleton\r\n- SingleColumnLayout\r\n- TwoColumnLayout\r\n- Pagination\r\n- Table\r\n- ImageUpload\r\n- DndFile\r\n For detailed documentation of each component, please visit our documentation site (coming soon).\r\n\r\n## Contributing\r\n\r\nWe welcome contributions! Please read our contributing guidelines (coming soon) to get started.\r\n\r\n## License\r\n\r\nMIT © [i7-UI]\r\n\r\n## Links\r\n\r\n- [Medusa UI Documentation](https://docs.medusajs.com/ui)\r\n- [GitLab Repository](https://gitlab.com/abrahimalia27/ui-package)\r\n\r\n## Support\r\n\r\nIf you need help or have questions:\r\n\r\n- [Gitlab Issues](https://gitlab.com/abrahimalia27/ui-package/issues)\r\n- [Email Support](abrahimalia27@gmail.com)\r\n","readmeFilename":"README.md"}