docs: update types and storydocs

chakra-ui · Mar 4, 2024 · 4f2051c · 4f2051c
1 parent a3592df
commit 4f2051c
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 2 deletions.
diff --git a/packages/website/src/content/stories/react/toast.stories.json b/packages/website/src/content/stories/react/toast.stories.json
@@ -1,5 +1,5 @@
 {
-  "Basic": "import { Toast, createToaster } from '@ark-ui/react'\n\nconst Basic = () => {\n  const [Toaster, toast] = createToaster({\n    placement: 'top-end',\n    render(toast) {\n      return (\n        <Toast.Root>\n          <Toast.Title>{toast.title}</Toast.Title>\n          <Toast.Description>{toast.description}</Toast.Description>\n          <Toast.CloseTrigger>Close</Toast.CloseTrigger>\n        </Toast.Root>\n      )\n    },\n  })\n\n  return (\n    <>\n      <button onClick={() => toast.create({ title: 'Title', description: 'Description' })}>\n        Toast\n      </button>\n      <Toaster />\n    </>\n  )\n}\n",
+  "Basic": "import { Toast, createToaster } from '@ark-ui/react'\nimport { useEffect } from 'react'\n\nconst Basic = () => {\n  const [Toaster, toast] = createToaster({\n    placement: 'top-end',\n    render(toast) {\n      return (\n        <Toast.Root>\n          <Toast.Title>{toast.title}</Toast.Title>\n          <Toast.Description>{toast.description}</Toast.Description>\n          <Toast.CloseTrigger>Close</Toast.CloseTrigger>\n        </Toast.Root>\n      )\n    },\n  })\n\n  useEffect(\n    () => toast.subscribe((toasts) => toasts.forEach((toast) => console.log('Toast:', toast))),\n    [toast],\n  )\n\n  const handleToast = () => {\n    const id = toast.create({ title: 'Title', description: 'Description' })\n    console.log('Toast ID:', id)\n  }\n\n  return (\n    <>\n      <button onClick={handleToast}>Toast</button>\n      <Toaster />\n    </>\n  )\n}\n",
   "Customized": "import { Toast, createToaster } from '@ark-ui/react'\n\nconst Customized = () => {\n  const [Toaster, toast] = createToaster({\n    placement: 'bottom-start',\n    render(toast) {\n      return (\n        <Toast.Root>\n          <Toast.Title>{toast.title}</Toast.Title>\n          <Toast.Description>{toast.description}</Toast.Description>\n          <Toast.CloseTrigger>Close</Toast.CloseTrigger>\n        </Toast.Root>\n      )\n    },\n  })\n\n  return (\n    <>\n      <button\n        onClick={() =>\n          toast.create({\n            title: 'Success',\n            description: 'This is a success toast',\n            type: 'success',\n            duration: 20000,\n            removeDelay: 250,\n          })\n        }\n      >\n        Toast\n      </button>\n      <Toaster />\n    </>\n  )\n}\n",
   "CustomRender": "import { Toast, createToaster } from '@ark-ui/react'\n\nconst CustomRender = () => {\n  const [Toaster, toast] = createToaster({\n    placement: 'top-end',\n    // custom render may go directly into the function below\n    render(toast) {\n      return (\n        <Toast.Root>\n          <Toast.Title>{toast.title}</Toast.Title>\n          <Toast.Description>{toast.description}</Toast.Description>\n          <Toast.CloseTrigger>Close</Toast.CloseTrigger>\n        </Toast.Root>\n      )\n    },\n  })\n\n  return (\n    <>\n      <button\n        onClick={() =>\n          toast.create({\n            title: 'Please checkout',\n            render: (toast) => (\n              <div>\n                {toast.title} <a href=\"https://ark-ui.com\">Ark UI</a>\n              </div>\n            ),\n          })\n        }\n      >\n        Toast\n      </button>\n      <Toaster />\n    </>\n  )\n}\n"
 }
diff --git a/packages/website/src/content/stories/solid/toast.stories.json b/packages/website/src/content/stories/solid/toast.stories.json
@@ -1,5 +1,5 @@
 {
-  "Basic": "import { Toast, createToaster } from '@ark-ui/solid'\n\nconst Basic = () => {\n  const [Toaster, toast] = createToaster({\n    placement: 'top-end',\n    render(toast) {\n      return (\n        <Toast.Root>\n          <Toast.Title>{toast().title}</Toast.Title>\n          <Toast.Description>{toast().description}</Toast.Description>\n          <Toast.CloseTrigger>Close</Toast.CloseTrigger>\n        </Toast.Root>\n      )\n    },\n  })\n\n  return (\n    <>\n      <button onClick={() => toast().create({ title: 'Title', description: 'Description' })}>\n        Toast\n      </button>\n      <Toaster />\n    </>\n  )\n}\n",
+  "Basic": "import { Toast, createToaster } from '@ark-ui/solid'\nimport { createEffect } from 'solid-js'\n\nconst Basic = () => {\n  const [Toaster, toast] = createToaster({\n    placement: 'top-end',\n    render(toast) {\n      return (\n        <Toast.Root>\n          <Toast.Title>{toast().title}</Toast.Title>\n          <Toast.Description>{toast().description}</Toast.Description>\n          <Toast.CloseTrigger>Close</Toast.CloseTrigger>\n        </Toast.Root>\n      )\n    },\n  })\n\n  createEffect(() =>\n    toast().subscribe((toasts) => toasts.forEach((toast) => console.log('Toast:', toast))),\n  )\n\n  const handleToast = () => {\n    const id = toast().create({ title: 'Title', description: 'Description' })\n    console.log('Toast ID:', id)\n  }\n\n  return (\n    <>\n      <button onClick={handleToast}>Toast</button>\n      <Toaster />\n    </>\n  )\n}\n",
   "Customized": "import { Toast, createToaster } from '@ark-ui/solid'\n\nconst Customized = () => {\n  const [Toaster, toast] = createToaster({\n    placement: 'bottom-start',\n    render(toast) {\n      return (\n        <Toast.Root>\n          <Toast.Title>{toast().title}</Toast.Title>\n          <Toast.Description>{toast().description}</Toast.Description>\n          <Toast.CloseTrigger>Close</Toast.CloseTrigger>\n        </Toast.Root>\n      )\n    },\n  })\n\n  return (\n    <>\n      <button\n        onClick={() =>\n          toast().create({\n            title: 'Success',\n            description: 'This is a success toast',\n            type: 'success',\n            duration: 20000,\n            removeDelay: 250,\n          })\n        }\n      >\n        Toast\n      </button>\n      <Toaster />\n    </>\n  )\n}\n",
   "CustomRender": "import { Toast, createToaster } from '@ark-ui/solid'\n\nconst CustomRender = () => {\n  const [Toaster, toast] = createToaster({\n    placement: 'top-end',\n    // custom render may go directly into the function below\n    render(toast) {\n      return (\n        <Toast.Root>\n          <Toast.Title>{toast().title}</Toast.Title>\n          <Toast.Description>{toast().description}</Toast.Description>\n          <Toast.CloseTrigger>Close</Toast.CloseTrigger>\n        </Toast.Root>\n      )\n    },\n  })\n\n  return (\n    <>\n      <button\n        onClick={() =>\n          toast().create({\n            title: 'Please checkout',\n            render: (toast) => (\n              <div>\n                {toast().title} <a href=\"https://ark-ui.com\">Ark UI</a>\n              </div>\n            ),\n          })\n        }\n      >\n        Toast\n      </button>\n      <Toaster />\n    </>\n  )\n}\n"
 }