diff --git a/.storybook/preview.ts b/.storybook/preview.tsx similarity index 54% rename from .storybook/preview.ts rename to .storybook/preview.tsx index f4b2c44..b2ca775 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.tsx @@ -1,7 +1,10 @@ +import React from 'react'; + import type { Preview } from '@storybook/react-vite'; -import '@kibalabs/ui-react/styles/reset'; -import '@kibalabs/ui-react/styles/colors'; + +import '@kibalabs/ui-react/dist/index.css'; import '../src/styles.scss'; +import { ToastContainer } from '../src'; const preview: Preview = { parameters: { @@ -13,6 +16,14 @@ const preview: Preview = { }, }, }, + decorators: [ + (Story) => ( + + + + + ), + ], }; export default preview; diff --git a/package-lock.json b/package-lock.json index a9eff7b..4a4e88d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,7 @@ "react-hot-toast": "^2.4.1" }, "devDependencies": { - "@kibalabs/build": "0.13.3-next.12", + "@kibalabs/build": "0.13.3-next.13", "@kibalabs/ui-react": "0.11.3-next.18", "@storybook/addon-docs": "10.1.2", "@storybook/react-vite": "10.1.2", @@ -26,7 +26,7 @@ "storybook": "10.1.2" }, "peerDependencies": { - "@kibalabs/ui-react": ">=0.13.3-next.12", + "@kibalabs/ui-react": ">=0.11.3-next.18", "react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" } @@ -2870,9 +2870,9 @@ } }, "node_modules/@kibalabs/build": { - "version": "0.13.3-next.12", - "resolved": "https://registry.npmjs.org/@kibalabs/build/-/build-0.13.3-next.12.tgz", - "integrity": "sha512-DXLJV+Krgqv0gWxDYr98UVFBm7bs2LkAQlwTMQQZesUaYpFHDZN9NHrLEW3ehyAIXcjVO91HAV9hswm0Q1v1qA==", + "version": "0.13.3-next.13", + "resolved": "https://registry.npmjs.org/@kibalabs/build/-/build-0.13.3-next.13.tgz", + "integrity": "sha512-CRj02O0VY2Amm0B7exLyEgOvNlRJm2c9j/8SAK02bM1PsXDH9NOtApBnAkx4iZWaaxvf9NQiH+F4feAIsB5diA==", "dev": true, "license": "MIT", "dependencies": { diff --git a/package.json b/package.json index e4f2f5a..de51e8a 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "react-hot-toast": "^2.4.1" }, "devDependencies": { - "@kibalabs/build": "0.13.3-next.12", + "@kibalabs/build": "0.13.3-next.13", "@kibalabs/ui-react": "0.11.3-next.18", "@storybook/addon-docs": "10.1.2", "@storybook/react-vite": "10.1.2", diff --git a/src/styles.scss b/src/styles.scss index d4edf4c..6c1021f 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,3 +1,12 @@ +// Override react-hot-toast default styles - must be outside @layer for higher specificity +.KibaToastContainer > div { + max-width: none !important; + background: none !important; + box-shadow: none !important; + padding: 0 !important; + border-radius: 0 !important; +} + @layer kiba-structure { @keyframes kiba-toast-fade-in { 0% { @@ -24,6 +33,11 @@ .KibaToast { display: flex; transition-duration: 0.3s; + white-space: nowrap; + outline: none; + border: none; + text-decoration: none; + cursor: default; &.clickable { cursor: pointer; } @@ -41,13 +55,54 @@ width: 100%; height: 100%; position: relative; + display: flex; + box-sizing: border-box; } } @layer kiba-theme { .KibaToast { - .KibaToastFocusFixer { + > .KibaToastFocusFixer { + // Use same styling as card from ui-react + background-color: var(--kiba-color-background-light10, #ffffff); + border-color: var(--kiba-color-background-dark05, rgba(0, 0, 0, 0.05)); + border-width: var(--kiba-border-width, 1px); + border-style: solid; + border-radius: var(--kiba-border-radius, 0.5em); + box-shadow: 0px 8px 8px -6px rgba(0, 0, 0, 0.15); + padding: var(--kiba-padding, 0.5em) var(--kiba-padding-wide, 1em); + color: var(--kiba-color-text, #333333); transition-duration: 0.3s; } + &:hover > .KibaToastFocusFixer { + background-color: var(--kiba-color-background, #ffffff); + } + &:active > .KibaToastFocusFixer { + background-color: var(--kiba-color-background-dark10, #f0f0f0); + } + &:focus > .KibaToastFocusFixer { + border-color: var(--kiba-color-background-dark50, rgba(0, 0, 0, 0.5)); + } + // Variant styles + &.success > .KibaToastFocusFixer { + background-color: var(--kiba-color-success-clear90, #d4edda); + color: var(--kiba-color-success-dark25, #155724); + border-color: var(--kiba-color-success-clear75, #c3e6cb); + } + &.error > .KibaToastFocusFixer { + background-color: var(--kiba-color-error-clear90, #f8d7da); + color: var(--kiba-color-error-dark25, #721c24); + border-color: var(--kiba-color-error-clear75, #f5c6cb); + } + &.warning > .KibaToastFocusFixer { + background-color: var(--kiba-color-warning-clear90, #fff3cd); + color: var(--kiba-color-warning-dark25, #856404); + border-color: var(--kiba-color-warning-clear75, #ffeeba); + } + &.info > .KibaToastFocusFixer { + background-color: var(--kiba-color-info-clear90, #d1ecf1); + color: var(--kiba-color-info-dark25, #0c5460); + border-color: var(--kiba-color-info-clear75, #bee5eb); + } } } diff --git a/src/toasts.css b/src/toasts.css deleted file mode 100644 index 045c639..0000000 --- a/src/toasts.css +++ /dev/null @@ -1,25 +0,0 @@ -@keyframes fadeIn { - from {transform: translate3d(0, -200%, 0) scale(0.6); opacity: .5;} - to {transform: translate3d(0, 0, 0) scale(1); opacity: 1;} -} - -@keyframes fadeOut { - from {transform: translate3d(0, 0, -1px) scale(1); opacity: 1;} - to {transform: translate3d(0, -150%, -1px) scale(0.6); opacity: 0;} -} - -.animateIn { - animation-name: fadeIn; - animation-duration: 0.35s; - animation-fill-mode: forwards; - animation-timing-function: cubic-bezier(0.21, 1.02, 0.73, 1); - animation-delay: 0s; -} - -.animateOut { - animation-name: fadeOut; - animation-duration: 0.75s; - animation-fill-mode: forwards; - animation-timing-function: cubic-bezier(0.06, .71, 0.55, 1); - animation-delay: 0s; -} diff --git a/src/useToastManager.tsx b/src/useToastManager.tsx index a4906d5..69aa1e1 100644 --- a/src/useToastManager.tsx +++ b/src/useToastManager.tsx @@ -23,7 +23,7 @@ export const useToastManager = (): IToastManager => { // @ts-expect-error: not sure why classNam isn't expected on the component? React.cloneElement(component, { ...component.props, className: getClassName(...component.className || '', renderingToast.visible ? 'animateIn' : 'animateOut') }) ); - toast.custom(wrappedComponent, { id: actualToastId, duration: shouldAutoClose ? autoCloseMillis : Infinity, style: { padding: '0' } }); + toast.custom(wrappedComponent, { id: actualToastId, duration: shouldAutoClose ? autoCloseMillis : Infinity, style: { padding: '0', background: 'none', boxShadow: 'none' } }); return actualToastId; }, []);