feat: polishing some ui naming

mvriu5 · Sep 6, 2024 · 0934960 · 0934960
1 parent 3ccfcac
commit 0934960
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 75 deletions.
diff --git a/README.md b/README.md
@@ -17,7 +17,7 @@ npm install griller
 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";
+import Toaster from "griller";
 
 export default function RootLayout({ children }: Readonly<{ children: ReactNode }>) {
   return (
@@ -37,7 +37,7 @@ export default function RootLayout({ children }: Readonly<{ children: ReactNode
 To create a toast, use the `useToast` hook in your component:
 
 ```jsx
-import { Toast } from "griller/toast";
+import {useToast} from "griller";
 
 const { addToast } = useToast();
 
@@ -87,7 +87,7 @@ const { addToast } = useToast();
 Griller allows for extensive customization through custom classnames:
 
 - `titleClassname`
-- `secondTitleClassname`
+- `subtitleClassname`
 - `iconClassname`
 - `closeClassname`
 - `closeDivClassname`

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.22",
+  "version": "1.0.23",
   "private": false,
   "repository": {
     "url": "https://github.com/mvriu5/griller"
@@ -20,20 +20,17 @@
     "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",
     "react-textarea-autosize": "^8.5.3",
     "tailwind-merge": "^2.4.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^1.6.1",
     "@storybook/addon-essentials": "^8.2.6",
     "@storybook/addon-interactions": "^8.2.6",
     "@storybook/addon-links": "^8.2.6",

diff --git a/public/component-example.txt b/public/component-example.txt
@@ -1,4 +1,4 @@
-import {Toast} from "griller/toast";
+import {useToast} from "griller";
 
 const { addToast } = useToast();
 

diff --git a/public/layout-example.txt b/public/layout-example.txt
@@ -1,4 +1,4 @@
-import {Toaster} from "griller/toaster";
+import Toaster from "griller";
 
 export default function RootLayout({ children }: Readonly<{ children: ReactNode }>) {
     return (

diff --git a/src/app/lab/page.tsx b/src/app/lab/page.tsx
@@ -28,7 +28,7 @@ export default function Home() {
     const [icon, setIcon] = useState(false);
 
     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)};`;
+        return `addToast({\n    title: "${title}",\n    subtitle: "${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());
@@ -87,8 +87,8 @@ export default function Home() {
                                        value={title}
                                        onChange={(e) => setTitle(e.target.value)}
                                 />
-                                <Input placeholder={"Second Title"}
-                                       label={"Second Title"}
+                                <Input placeholder={"Subtitle"}
+                                       label={"Subtitle"}
                                        preSelectedValue={"This is a Toast Component!"}
                                        size={60}
                                        value={subtitle}

diff --git a/src/component/toast.tsx b/src/component/toast.tsx
@@ -5,7 +5,6 @@ import {X} from "lucide-react";
 import {AnimatePresence, motion} from "framer-motion";
 import clsx, {ClassValue} from "clsx";
 import {twMerge} from "tailwind-merge";
-import {useToast} from "@griller/toaster";
 
 export const cn = (...classes: ClassValue[]) => twMerge(clsx(classes));
 
@@ -52,7 +51,7 @@ interface ToastProps extends HTMLAttributes<HTMLDivElement> {
 
     // custom classnames
     titleClassname?: string;
-    secondTitleClassname?: string;
+    subtitleClassname?: string;
     iconClassname?: string;
     closeClassname?: string;
     closeDivClassname?: string;
@@ -65,7 +64,7 @@ const Toast: React.FC<ToastProps & {
     isPaused: boolean,
 }> = ({
    id, title, subtitle, icon, scale = 1, position = "br", closeButton, actionButton, onAction, actionButtonText,
-   duration = 3000, theme = "light", titleClassname, secondTitleClassname, closeClassname, closeDivClassname,
+   duration = 3000, theme = "light", titleClassname, subtitleClassname, closeClassname, closeDivClassname,
    motionClassname, iconClassname, actionButtonClassname, className, removeToast, isPaused, ...props
 }) => {
 
@@ -166,7 +165,7 @@ const Toast: React.FC<ToastProps & {
                                     {title}
                                 </span>
                                 {subtitle && subtitle.trim() !== "" && (
-                                    <span className={cn("text-xs", theme === "light" ? "text-zinc-400" : "text-zinc-300", secondTitleClassname)}>
+                                    <span className={cn("text-xs", theme === "light" ? "text-zinc-400" : "text-zinc-300", subtitleClassname)}>
                                         {subtitle}
                                     </span>
                                 )}