Fiddle: corrections for new styling + fix storybook (#10)

Author: krishan711

.storybook/preview.ts .storybook/preview.tsx.storybook/preview.ts renamed to .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) => (
+      <React.Fragment>
+        <ToastContainer />
+        <Story />
+      </React.Fragment>
+    ),
+  ],
 };
 
 export default preview;

package-lock.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",

package.json

@@ -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);
+    }
   }
 }

src/styles.scss

@@ -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;
   }, []);