Merge pull request #1 from pheralb/next

🚀 v0.2.0
pheralb · Aug 1, 2024 · 5810685 · 5810685
2 parents f6279a0 + cc8d3e2
commit 5810685
Show file tree

Hide file tree

Showing 42 changed files with 2,367 additions and 369 deletions.
diff --git a/.changeset/config.json b/.changeset/config.json
@@ -7,5 +7,9 @@
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": ["@pheralb/toast-website"]
+  "ignore": [
+    "@pheralb/toast-website",
+    "@pheralb-toast/nextjs-example",
+    "@pheralb-toast/astro-example"
+  ]
 }
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,8 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+# Astro
+.astro
+
 # Dependencies
 node_modules
 .pnp

diff --git a/examples/astro/astro.config.mjs b/examples/astro/astro.config.mjs
@@ -0,0 +1,8 @@
+import { defineConfig } from 'astro/config';
+
+import react from "@astrojs/react";
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [react()]
+});
diff --git a/examples/astro/package.json b/examples/astro/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "@pheralb-toast/astro-example",
+  "type": "module",
+  "private": true,
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro check && astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@pheralb/toast": "workspace:^",
+    "@astrojs/check": "0.9.1",
+    "@astrojs/react": "3.6.1",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.0",
+    "astro": "4.12.3",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "typescript": "5.5.4"
+  }
+}
diff --git a/examples/astro/src/components/showToast.tsx b/examples/astro/src/components/showToast.tsx
@@ -0,0 +1,17 @@
+import { toast } from '@pheralb/toast';
+
+const ShowToast = () => {
+  const handleClick = () => {
+    toast.default({
+      text: 'Hello, world!',
+    });
+  };
+
+  return (
+    <button type="button" onClick={handleClick}>
+      Show Toast
+    </button>
+  );
+};
+
+export default ShowToast;
diff --git a/examples/astro/src/env.d.ts b/examples/astro/src/env.d.ts
@@ -0,0 +1 @@
+/// <reference types="astro/client" />
diff --git a/examples/astro/src/layouts/Layout.astro b/examples/astro/src/layouts/Layout.astro
@@ -0,0 +1,25 @@
+---
+interface Props {
+  title: string;
+}
+
+import { Toaster } from '@pheralb/toast';
+
+const { title } = Astro.props;
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="description" content="Astro description" />
+    <meta name="viewport" content="width=device-width" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="generator" content={Astro.generator} />
+    <title>{title}</title>
+  </head>
+  <body>
+    <slot />
+    <Toaster client:load theme="light" />
+  </body>
+</html>
diff --git a/examples/astro/src/pages/index.astro b/examples/astro/src/pages/index.astro
@@ -0,0 +1,11 @@
+---
+import Layout from '../layouts/Layout.astro';
+import ShowToast from '../components/showToast';
+---
+
+<Layout title="Welcome to Astro.">
+  <main>
+    <h1>Welcome to <span class="text-gradient">Astro</span></h1>
+    <ShowToast client:load />
+  </main>
+</Layout>
diff --git a/examples/astro/tsconfig.json b/examples/astro/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "react"
+  }
+}
diff --git a/examples/nextjs/src/app/layout.tsx b/examples/nextjs/src/app/layout.tsx
@@ -26,7 +26,8 @@ export default function RootLayout({
           enableSystem
           disableTransitionOnChange
         >
-          <ToastClientProvider>{children}</ToastClientProvider>
+          <ToastClientProvider />
+          {children}
         </ThemeProvider>
       </body>
     </html>

diff --git a/examples/nextjs/src/app/page.tsx b/examples/nextjs/src/app/page.tsx
@@ -1,47 +1,46 @@
 'use client';
 
-import { useToast } from '@pheralb/toast';
+import { toast } from '@pheralb/toast';
 import { PartyPopperIcon } from 'lucide-react';
 import { useTheme } from 'next-themes';
 import { useState } from 'react';
 
 export default function Home() {
   const { setTheme } = useTheme();
   const [duration, setDuration] = useState<number>(8000);
-  const t = useToast();
   const buttonStyles =
     'p-2 m-2 bg-neutral-100 border border-neutral-300 dark:border-neutral-700 dark:bg-neutral-800 text-sm dark:text-white rounded-md';
 
   const renderToast = () => {
-    t.default({
+    toast.default({
       text: 'Rendered toast!',
       description: 'This is a success toast!',
       delayDuration: duration,
     });
   };
 
   const renderToastWithIcon = () => {
-    t.default({
+    toast.default({
       text: 'Rendered toast without icon',
       description: 'This is a default toast!',
       delayDuration: duration,
     });
-    t.success({
+    toast.success({
       text: 'Rendered toast with library icon',
       description: 'This is a success toast',
       delayDuration: duration,
     });
-    t.error({
+    toast.error({
       text: 'Rendered toast without library icon',
       description: 'This is a error toast',
       delayDuration: duration,
     });
-    t.warning({
+    toast.warning({
       text: 'Rendered toast with library icon',
       description: 'This is a warning toast',
       delayDuration: duration,
     });
-    t.default({
+    toast.default({
       text: 'Rendered toast with custom icon',
       description: 'This is a default toast',
       delayDuration: duration,

diff --git a/examples/nextjs/src/providers/toastProvider.tsx b/examples/nextjs/src/providers/toastProvider.tsx
@@ -1,16 +1,12 @@
 'use client';
 
-import {
-  ToastProvider,
-  ToastTheme,
-  type ToastProviderProperties,
-} from '@pheralb/toast';
+import { Toaster, ToastTheme, type ToasterProperties } from '@pheralb/toast';
 import { useTheme } from 'next-themes';
 
-const ToastClientProvider = (props: ToastProviderProperties) => {
+const ToastClientProvider = (props: ToasterProperties) => {
   const { theme } = useTheme();
   return (
-    <ToastProvider
+    <Toaster
       toastFont="font-sans"
       maxToasts={10}
       theme={theme as ToastTheme}

diff --git a/library/README.md b/library/README.md
@@ -76,13 +76,13 @@ yarn install @pheralb/toast
 
 ```tsx
 // 📃 root.tsx
-import { ToastProvider } from '@pheralb/toast';
+
+import { Toaster } from '@pheralb/toast';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <ToastProvider>
-      <App />
-    </ToastProvider>
+    <App />
+    <Toaster />
   </React.StrictMode>,
 );
 ```
@@ -91,8 +91,10 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
 
 ```jsx
 // 📃 index.tsx
+
+import { toast } from '@pheralb/toast';
+
 export default function Index() {
-  const toast = useToast();
   return (
     <>
       <button
@@ -116,7 +118,7 @@ export default function Index() {
 ## 🔭 Roadmap
 
 - [ ] 🚗 Add `.loading` variant.
-- [ ] 📚 Add support for Astro + React.
+- [x] 📚 Add support for Astro + React.
 - [ ] 🎨 Add rich colors support.
 
 ## 🤝 Contributing
@@ -152,8 +154,12 @@ pnpm build
 pnpm test
 ```
 
-- Open [`http://localhost:5173`](http://localhost:5173) to view the **Remix** documentation website.
-- Open [`http://localhost:3000`](http://localhost:3000) to view the **Next.js** playground. Only for test the functionality of the library.
+🧑‍🚀 Open [`http://localhost:5173`](http://localhost:5173) to view the **Remix** documentation website.
+
+🔎 Only for test the functionality of the library:
+
+- Open [`http://localhost:3000`](http://localhost:3000) to view the **Next.js** playground.
+- Open [`http://localhost:4321`](http://localhost:3001) to view the **Astro** playground.
 
 and create a pull request with your features or fixes 🚀✨.
 

diff --git a/library/package.json b/library/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pheralb/toast",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "author": "@pheralb_",
   "keywords": [
     "react",

diff --git a/library/src/components/toast-functions.ts b/library/src/components/toast-functions.ts
@@ -0,0 +1,20 @@
+import { ToastPropsWithVariant } from '../types/toast.types';
+import { openToast } from './toaster';
+
+export const toast = {
+  default: (data: ToastPropsWithVariant) => {
+    openToast({ ...data });
+  },
+  success: (data: ToastPropsWithVariant) => {
+    openToast({ ...data, variant: 'success' });
+  },
+  error: (data: ToastPropsWithVariant) => {
+    openToast({ ...data, variant: 'error' });
+  },
+  warning: (data: ToastPropsWithVariant) => {
+    openToast({ ...data, variant: 'warning' });
+  },
+  info: (data: ToastPropsWithVariant) => {
+    openToast({ ...data, variant: 'info' });
+  },
+};
diff --git a/library/src/components/toast.tsx b/library/src/components/toast.tsx
@@ -6,7 +6,7 @@ import type {
 } from '../types/toast.types';
 import '../styles/toast-component.css';
 
-import { Error, Info, Success, Warning } from '../icons';
+import { Error, Info, Loading, Success, Warning } from '../icons';
 import { useTimeout } from '../hooks/useTimeout';
 import { classNames, prefersReducedMotion } from '../utils';
 
@@ -15,13 +15,15 @@ const icons: Record<Variant, FC<React.SVGProps<SVGSVGElement>>> = {
   error: Error,
   warning: Warning,
   info: Info,
+  loading: Loading,
 };
 
 const iconsColors: Record<Variant, string> = {
   success: '#22c55e',
   error: '#ef4444',
   warning: '#eab308',
   info: '#3b82f6',
+  loading: '#6b7280',
 };
 
 interface ToastComponentProps extends ToastPropsWithVariant {
@@ -86,7 +88,7 @@ const Toast = (props: ToastComponentProps) => {
   return (
     <div
       title={props.text}
-      aria-label="notification"
+      aria-label="Notification"
       className={classNames(
         't_global',
         prefersReducedMotion() ? '' : animationClass,