feat: page remake, toast size for older toasts, comments, toasticon, …

…readme
mvriu5 · Sep 6, 2024 · 5924266 · 5924266
1 parent ba83a45
commit 5924266
Show file tree

Hide file tree

Showing 13 changed files with 375 additions and 200 deletions.
diff --git a/README.md b/README.md
@@ -1,35 +1,144 @@
+# Griller
 
-## Griller
+A fully customizable React Toast Component
 
-First, run the development server:
+## Installation
+
+Install the package using npm:
 
 ```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
+npm install griller
+```
+
+## Usage
+
+### Wrap your app with the Toaster component
+
+First, you need to wrap your application with the `Toaster` component. This component will manage the state and positioning of your toasts.
+
+```jsx
+import { Toaster } from "griller/toaster";
+
+export default function RootLayout({ children }: Readonly<{ children: ReactNode }>) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        <Toaster>
+          {children}
+        </Toaster>
+      </body>
+    </html>
+  );
+}
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+### Creating toasts
+
+To create a toast, use the `useToast` hook in your component:
+
+```jsx
+import { Toast } from "griller/toast";
+
+const { addToast } = useToast();
+
+<button onClick={() => 
+  addToast({title: 'Toast Notification'})
+}>
+  Show Toast
+</button>
+```
+
+## Features
+
+- ✨ Fully customizable appearance
+- 🌐 Multiple positioning options
+- ⏱️ Configurable duration
+- 🌓 Light and dark themes
+- 🔘 Close and action buttons
+- 📚 Stacking and expanding layouts
+
+## API
+
+### Toaster Props
+
+| Prop | Type | Default | Description |
+|:-----|:-----|:--------|:------------|
+| `children` | `ReactNode` | - | The content to be wrapped by the Toaster |
+| `layout` | `"stack" \| "expand"` | `"stack"` | How toasts are displayed |
+| `scaleDecrease` | `number` | `0.03` | Scale decrease for each toast in stack layout |
+
+### Toast Props
+
+| Prop | Type | Default | Description |
+|:-----|:-----|:--------|:------------|
+| `title` | `string` | - | Toast title (required) |
+| `subtitle` | `string` | - | Toast subtitle |
+| `icon` | `ReactNode` | - | Icon to display |
+| `position` | `"tr" \| "tl" \| "tc" \| "br" \| "bl" \| "bc"` | `"br"` | Toast position |
+| `theme` | `"light" \| "dark"` | `"light"` | Toast theme |
+| `closeButton` | `boolean` | `false` | Show close button |
+| `actionButton` | `boolean` | `false` | Show action button |
+| `onAction` | `() => void` | - | Action button callback |
+| `actionButtonText` | `string` | `"Undo"` | Action button text |
+| `duration` | `number` | `3000` | Toast duration in ms |
+
+## Customization
+
+Griller allows for extensive customization through custom classnames:
+
+- `titleClassname`
+- `secondTitleClassname`
+- `iconClassname`
+- `closeClassname`
+- `closeDivClassname`
+- `motionClassname`
+- `actionButtonClassname`
+
+## Examples
+
+### Basic Toast
+
+```jsx
+addToast({
+  title: 'Hello World',
+  subtitle: 'This is a basic toast',
+  position: 'tr',
+  duration: 5000
+});
+```
+
+### Toast with Action
+
+```jsx
+addToast({
+  title: 'File Deleted',
+  subtitle: 'Your file has been permanently deleted',
+  actionButton: true,
+  actionButtonText: 'Undo',
+  onAction: () => {
+    console.log('Undo delete');
+  }
+});
+```
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+## License
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
 
-## Learn More
+## Contributing
 
-To learn more about Next.js, take a look at the following resources:
+Contributions are welcome! Please feel free to submit a Pull Request.
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+1. Fork the Project
+2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
+3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
+4. Push to the Branch (`git push origin feature/AmazingFeature`)
+5. Open a Pull Request
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+## Support
 
-## Deploy on Vercel
+If you have any questions or need help integrating Griller into your project, please open an issue on the GitHub repository.
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+---
 
-Check out the [documentation](https://griller.ahsmus.com) for more details.
+Made with ❤️ by [mvriu5](https://x.com/mvriu5)
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "griller",
   "license": "MIT",
-  "version": "1.0.18",
+  "version": "1.0.19",
   "private": false,
   "repository": {
     "url": "https://github.com/mvriu5/griller"
@@ -16,10 +16,12 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@types/prismjs": "^1.26.4",
     "clsx": "^2.1.1",
     "framer-motion": "^11.3.19",
     "lucide-react": "^0.416.0",
     "next": "14.2.5",
+    "prismjs": "^1.29.0",
     "react": "^18",
     "react-dom": "^18",
     "react-syntax-highlighter": "^15.5.0",

diff --git a/src/app/icon.png b/src/app/icon.png
diff --git a/src/app/icon.svg b/src/app/icon.svg
diff --git a/src/app/lab/page.tsx b/src/app/lab/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, {useEffect, useState} from "react";
+import React, {useCallback, useEffect, useState} from "react";
 import {ArrowLeftFromLine, ShieldAlert} from "lucide-react";
 import {useRouter} from "next/navigation";
 import {Button} from "@/lib/button";
@@ -19,28 +19,28 @@ export default function Home() {
     const { addToast } = useToast();
 
     const [title, setTitle] = useState("Toast Component");
-    const [secondTitle, setSecondTitle] = useState("This is a Toast Component!");
+    const [subtitle, setSubtitle] = useState("This is a Toast Component!");
     const [position, setPosition] = useState<Position>("br");
     const [duration, setDuration] = useState(3000);
     const [theme, setTheme] = useState<Theme>("light");
     const [closeButton, setCloseButton] = useState(false);
     const [actionButton, setActionButton] = useState(false);
     const [icon, setIcon] = useState(false);
 
-    const generateCode = () => {
-        return `addToast({\n    title: "${title}",\n    secondTitle: "${secondTitle}",\n    icon: ${icon ? "<ShieldAlert size={24} className={\"text-zinc-500\"}/>" : undefined},\n    position: "${position}",\n    duration: ${duration},\n    theme: "${theme}",\n    closeButton: ${closeButton},\n    actionButton: ${actionButton}\n)};`;
-    };
+    const generateCode = useCallback(() => {
+        return `addToast({\n    title: "${title}",\n    secondTitle: "${subtitle}",\n    icon: ${icon ? "<ShieldAlert size={24} className={\"text-zinc-500\"}/>" : undefined},\n    position: "${position}",\n    duration: ${duration},\n    theme: "${theme}",\n    closeButton: ${closeButton},\n    actionButton: ${actionButton}\n)};`;
+    }, [actionButton, closeButton, duration, icon, position, subtitle, theme, title]);
 
     const [code, setCode] = useState<string>(generateCode());
 
     useEffect(() => {
         setCode(generateCode());
-    }, [title, secondTitle, position, duration, theme, closeButton, actionButton, icon]);
+    }, [title, subtitle, position, duration, theme, closeButton, actionButton, icon, generateCode]);
 
     const handleAddToast = () => {
         const toast: Omit<ToastProps, 'id'> = {
             title,
-            secondTitle,
+            subtitle,
             position,
             duration,
             theme,
@@ -62,7 +62,7 @@ export default function Home() {
                 <div className={"flex flex-row items-center space-x-8 border-b border-zinc-200 pb-4"}>
                     <div className={"flex flex-row items-center space-x-2"}>
                         <div className={"rounded-lg p-1 hover:bg-zinc-200 cursor-pointer"}
-                             onClick={() => window.location.href = 'https://griller.ahsmus.com'}
+                             onClick={() => router.back()}
                         >
                             <ArrowLeftFromLine size={20} className={"text-zinc-700"}/>
                         </div>
@@ -91,8 +91,8 @@ export default function Home() {
                                        label={"Second Title"}
                                        preSelectedValue={"This is a Toast Component!"}
                                        size={60}
-                                       value={secondTitle}
-                                       onChange={(e) => setSecondTitle(e.target.value)}
+                                       value={subtitle}
+                                       onChange={(e) => setSubtitle(e.target.value)}
                                 />
                                 <div className={"flex flex-col sm:flex-row sm:space-x-8 space-x-0 space-y-2 sm:space-y-0"}>
                                     <Combobox title={"Position"}

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,8 +1,8 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
-import { Toaster } from "@/component/toaster";
 import React, {ReactNode} from "react";
+import Toaster from "@/component/toaster";
 
 const inter = Inter({ subsets: ["latin"] });