From 093496099df45c631ca3eddce3c185722a59d64c Mon Sep 17 00:00:00 2001 From: marius Date: Fri, 6 Sep 2024 21:33:05 +0200 Subject: [PATCH] feat: polishing some ui naming --- README.md | 6 ++-- package-lock.json | 61 ++---------------------------------- package.json | 5 +-- public/component-example.txt | 2 +- public/layout-example.txt | 2 +- src/app/lab/page.tsx | 6 ++-- src/component/toast.tsx | 7 ++--- 7 files changed, 14 insertions(+), 75 deletions(-) diff --git a/README.md b/README.md index c0970cc..7df855d 100644 --- 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 index dbfdef9..cb630a0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,20 +1,18 @@ { "name": "griller", - "version": "1.0.18", + "version": "1.0.23", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "griller", - "version": "1.0.18", + "version": "1.0.23", "license": "MIT", "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", @@ -22,7 +20,6 @@ "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", @@ -2104,23 +2101,6 @@ "integrity": "sha512-4iri8i1AqYHJE2DstZYkyEprg6Pq6sKx3xn5FpySk9sNhH7qN2LLlHJCfDTZRILNwQNPD7mATWM0TBui7uC1pA==", "dev": true }, - "node_modules/@chromatic-com/storybook": { - "version": "1.6.1", - "resolved": "https://registry.npmjs.org/@chromatic-com/storybook/-/storybook-1.6.1.tgz", - "integrity": "sha512-x1x1NB3j4xpfeSWKr96emc+7ZvfsvH+/WVb3XCjkB24PPbT8VZXb3mJSAQMrSzuQ8+eQE9kDogYHH9Fj3tb/Cw==", - "dev": true, - "dependencies": { - "chromatic": "^11.4.0", - "filesize": "^10.0.12", - "jsonfile": "^6.1.0", - "react-confetti": "^6.1.0", - "strip-ansi": "^7.1.0" - }, - "engines": { - "node": ">=16.0.0", - "yarn": ">=1.22.18" - } - }, "node_modules/@emnapi/runtime": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.2.0.tgz", @@ -4736,11 +4716,6 @@ "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==", "dev": true }, - "node_modules/@types/prismjs": { - "version": "1.26.4", - "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.4.tgz", - "integrity": "sha512-rlAnzkW2sZOjbqZ743IHUhFcvzaGbqijwOu8QZnZCjfQzBqFE3s4lOTJEsxikImav9uzz/42I+O7YUs1mWgMlg==" - }, "node_modules/@types/prop-types": { "version": "15.7.12", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz", @@ -6635,29 +6610,6 @@ "node": ">=10" } }, - "node_modules/chromatic": { - "version": "11.5.6", - "resolved": "https://registry.npmjs.org/chromatic/-/chromatic-11.5.6.tgz", - "integrity": "sha512-ycX/hlZLs69BltwwBNsEXr+As6x5/0rlwp6W/CiHMZ3tpm7dmkd+hQCsb8JGHb1h49W3qPOKQ/Lh9evqcJ1yeQ==", - "dev": true, - "bin": { - "chroma": "dist/bin.js", - "chromatic": "dist/bin.js", - "chromatic-cli": "dist/bin.js" - }, - "peerDependencies": { - "@chromatic-com/cypress": "^0.*.* || ^1.0.0", - "@chromatic-com/playwright": "^0.*.* || ^1.0.0" - }, - "peerDependenciesMeta": { - "@chromatic-com/cypress": { - "optional": true - }, - "@chromatic-com/playwright": { - "optional": true - } - } - }, "node_modules/chrome-trace-event": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz", @@ -8836,15 +8788,6 @@ "node": "^10.12.0 || >=12.0.0" } }, - "node_modules/filesize": { - "version": "10.1.4", - "resolved": "https://registry.npmjs.org/filesize/-/filesize-10.1.4.tgz", - "integrity": "sha512-ryBwPIIeErmxgPnm6cbESAzXjuEFubs+yKYLBZvg3CaiNcmkJChoOGcBSrZ6IwkMwPABwPpVXE6IlNdGJJrvEg==", - "dev": true, - "engines": { - "node": ">= 10.4.0" - } - }, "node_modules/fill-range": { "version": "7.1.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", diff --git a/package.json b/package.json index 3783d36..62c57eb 100644 --- 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,12 +20,10 @@ "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", @@ -33,7 +31,6 @@ "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 index 91c20d3..6c6dcf2 100644 --- 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 index 64aafd7..2094c58 100644 --- 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 index 893f2b9..74525b5 100644 --- 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 ? "" : 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 ? "" : 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(generateCode()); @@ -87,8 +87,8 @@ export default function Home() { value={title} onChange={(e) => setTitle(e.target.value)} /> - twMerge(clsx(classes)); @@ -52,7 +51,7 @@ interface ToastProps extends HTMLAttributes { // custom classnames titleClassname?: string; - secondTitleClassname?: string; + subtitleClassname?: string; iconClassname?: string; closeClassname?: string; closeDivClassname?: string; @@ -65,7 +64,7 @@ const Toast: React.FC = ({ 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 {subtitle && subtitle.trim() !== "" && ( - + {subtitle} )}