feat: add sonner component

.changeset/hungry-oranges-jog.md

@@ -0,0 +1,5 @@
+---
+"solidui-cli": patch
+---
+
+feat: add sonner component

apps/docs/package.json

@@ -35,6 +35,7 @@
     "shosho": "^1.4.3",
     "solid-js": "1.8.18",
     "solid-mdx": "^0.0.7",
+    "solid-sonner": "^0.2.8",
     "tailwind-merge": "^2.4.0",
     "tailwindcss-animate": "^1.0.7",
     "undici": "^5.28.4",

apps/docs/public/registry/index.json

@@ -403,6 +403,16 @@
     ],
     "type": "ui"
   },
+  {
+    "name": "sonner",
+    "dependencies": [
+      "solid-sonner"
+    ],
+    "files": [
+      "ui/sonner.tsx"
+    ],
+    "type": "ui"
+  },
   {
     "name": "switch",
     "dependencies": [

apps/docs/public/registry/ui/sonner.json

@@ -0,0 +1,13 @@
+{
+  "name": "sonner",
+  "dependencies": [
+    "solid-sonner"
+  ],
+  "files": [
+    {
+      "name": "sonner.tsx",
+      "content": "import type { Component, ComponentProps } from \"solid-js\"\n\nimport { Toaster as Sonner } from \"solid-sonner\"\n\ntype ToasterProps = ComponentProps<typeof Sonner>\n\nconst Toaster: Component<ToasterProps> = (props) => {\n  return (\n    <Sonner\n      class=\"toaster group\"\n      toastOptions={{\n        classes: {\n          toast:\n            \"group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg\",\n          description: \"group-[.toast]:text-muted-foreground\",\n          actionButton: \"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground\",\n          cancelButton: \"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground\"\n        }\n      }}\n      {...props}\n    />\n  )\n}\n\nexport { Toaster }\n"
+    }
+  ],
+  "type": "ui"
+}

apps/docs/src/__registry__/index.tsx

@@ -300,6 +300,13 @@ export const Index: Record<string, any> = {
     component: lazy(() => import("~/registry/ui/slider")),
     files: ["registry/ui/slider.tsx"],
   },
+  "sonner": {
+    name: "sonner",
+    type: "ui",
+    registryDependencies: undefined,
+    component: lazy(() => import("~/registry/ui/sonner")),
+    files: ["registry/ui/sonner.tsx"],
+  },
   "switch": {
     name: "switch",
     type: "ui",
@@ -720,6 +727,13 @@ export const Index: Record<string, any> = {
     component: lazy(() => import("~/registry/example/slider-demo")),
     files: ["registry/example/slider-demo.tsx"],
   },
+  "sonner-demo": {
+    name: "sonner-demo",
+    type: "example",
+    registryDependencies: undefined,
+    component: lazy(() => import("~/registry/example/sonner-demo")),
+    files: ["registry/example/sonner-demo.tsx"],
+  },
   "switch-demo": {
     name: "switch-demo",
     type: "example",

apps/docs/src/app.tsx

@@ -13,6 +13,7 @@ import Footer from "~/components/footer"
 import { MDXComponents } from "~/components/mdx-components"
 import { MetaTags } from "~/components/meta-tags"
 import Navbar from "~/components/navbar"
+import { Toaster as SonnerToaster } from "~/registry/ui/sonner"
 
 import "@fontsource/inter/latin.css"
 import "~/styles/app.css"
@@ -38,6 +39,7 @@ export default function App() {
                 <Suspense>{props.children}</Suspense>
               </main>
               <Footer />
+              <SonnerToaster />
             </MDXProvider>
           </ColorModeProvider>
         </MetaProvider>

apps/docs/src/config/docs.ts

@@ -70,8 +70,7 @@ export const docsConfig: Config = {
       items: [
         {
           title: "Bar List",
-          href: "/docs/components/bar-list",
-          status: "new"
+          href: "/docs/components/bar-list"
         },
         {
           title: "Charts",
@@ -83,7 +82,8 @@ export const docsConfig: Config = {
         },
         {
           title: "Progress",
-          href: "/docs/components/progress"
+          href: "/docs/components/progress",
+          status: "updated"
         },
         {
           title: "Progress Circle",
@@ -108,8 +108,7 @@ export const docsConfig: Config = {
         },
         {
           title: "Aspect Ratio",
-          href: "/docs/components/aspect-ratio",
-          status: "new"
+          href: "/docs/components/aspect-ratio"
         },
         {
           title: "Avatar",
@@ -125,8 +124,7 @@ export const docsConfig: Config = {
         },
         {
           title: "Breadcrumb",
-          href: "/docs/components/breadcrumb",
-          status: "new"
+          href: "/docs/components/breadcrumb"
         },
         {
           title: "Button",
@@ -190,17 +188,15 @@ export const docsConfig: Config = {
         },
         {
           title: "Navigation Menu",
-          href: "/docs/components/navigation-menu",
-          status: "new"
+          href: "/docs/components/navigation-menu"
         },
         {
           title: "Number Field",
           href: "/docs/components/number-field"
         },
         {
           title: "OTP Field",
-          href: "/docs/components/otp-field",
-          status: "new"
+          href: "/docs/components/otp-field"
         },
         {
           title: "Pagination",
@@ -238,10 +234,14 @@ export const docsConfig: Config = {
           title: "Slider",
           href: "/docs/components/slider"
         },
+        {
+          title: "Sonner",
+          href: "/docs/components/slider",
+          status: "new"
+        },
         {
           title: "Switch",
-          href: "/docs/components/switch",
-          status: "updated"
+          href: "/docs/components/switch"
         },
         {
           title: "Table",
@@ -253,8 +253,7 @@ export const docsConfig: Config = {
         },
         {
           title: "Text Field",
-          href: "/docs/components/text-field",
-          status: "new"
+          href: "/docs/components/text-field"
         },
         {
           title: "Timeline",

apps/docs/src/registry/example/sonner-demo.tsx

@@ -0,0 +1,22 @@
+import { toast } from "solid-sonner"
+
+import { Button } from "~/registry/ui/button"
+
+export default function SonnerDemo() {
+  return (
+    <Button
+      variant="outline"
+      onClick={() =>
+        toast("Event has been created", {
+          description: "Sunday, December 03, 2023 at 9:00 AM",
+          action: {
+            label: "Undo",
+            onClick: () => console.log("Undo")
+          }
+        })
+      }
+    >
+      Show Toast
+    </Button>
+  )
+}

apps/docs/src/registry/registry.ts

@@ -247,6 +247,12 @@ const ui: Registry = [
     registryDependencies: ["label"],
     files: ["ui/slider.tsx"]
   },
+  {
+    name: "sonner",
+    type: "ui",
+    dependencies: ["solid-sonner"],
+    files: ["ui/sonner.tsx"]
+  },
   {
     name: "switch",
     type: "ui",
@@ -557,6 +563,11 @@ const examples: Registry = [
     type: "example",
     files: ["example/slider-demo.tsx"]
   },
+  {
+    name: "sonner-demo",
+    type: "example",
+    files: ["example/sonner-demo.tsx"]
+  },
   {
     name: "switch-demo",
     type: "example",

apps/docs/src/registry/ui/sonner.tsx

@@ -0,0 +1,25 @@
+import type { Component, ComponentProps } from "solid-js"
+
+import { Toaster as Sonner } from "solid-sonner"
+
+type ToasterProps = ComponentProps<typeof Sonner>
+
+const Toaster: Component<ToasterProps> = (props) => {
+  return (
+    <Sonner
+      class="toaster group"
+      toastOptions={{
+        classes: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground"
+        }
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

apps/docs/src/routes/docs/components/sonner.mdx

@@ -0,0 +1,70 @@
+<MDXHeader title="Sonner" description="An opinionated toast component for Solid." />
+
+<ComponentPreview name="sonner-demo" />
+
+## About
+
+`solid-sonner` is built and maintained by [wobsoriano](https://github.com/wobsoriano).
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+
+<TabsContent value="cli">
+
+```bash
+npx solidui-cli@latest add sonner
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+<Steps>
+
+<Step>Install the following dependencies: </Step>
+
+```bash
+npm install solid-sonner
+```
+
+<Step>Copy and paste the following code into your project: </Step>
+
+<ComponentSource name="sonner" />
+
+<Step>Add the Toaster component:</Step>
+
+```tsx{1,9}
+import { Toaster } from "~/components/ui/sonner"
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <head />
+      <body>
+        <main>{children}</main>
+        <Toaster />
+      </body>
+    </html>
+  )
+}
+```
+
+</Steps>
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import { toast } from "solid-sonner"
+```
+
+```tsx
+toast("Event has been created.")
+```