@julseb-lib/react 0.0.45 → 0.0.47

package/dist/lib/components/Toast/Toast.tsx

@@ -12,6 +12,7 @@ import {
     IconContainer,
     CloseButton,
     Timer,
+    Title,
 } from "./styles"
 import type { ILibToast } from "./types"
 
@@ -28,7 +29,7 @@ const CLOSE_ICON_SIZE = 24
  * @prop toasterPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right"
  * @prop toastStyle?: { maxWidth?: string | number; border?: { style?: CssBorderStyle; width?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"; color?: Any color from the library }; backgroundColor?: Any color from the library; textColor?: Any color from the library; shadow?: "xxl" | "xl" | "l" | "m" | "s" | "xs" }
  * @prop hideCloseButton?: boolean
- * @prop status?: "success" | "error" | "warning" | "info" | "loading"
+ * @prop status?: "success" | "error" | "warning" | "info"
  * @prop options?: LibToastOptions
  *
  * @type LibToastOptions
@@ -55,10 +56,11 @@ export const Toast = forwardRef<HTMLDivElement, ILibToast>(
             title,
             id = uuid(),
             options,
-            toastStyle,
+            maxWidth = 400,
             toasterPosition,
             role = "alert",
             hideCloseButton,
+            status,
             ...rest
         },
         ref
@@ -93,10 +95,8 @@ export const Toast = forwardRef<HTMLDivElement, ILibToast>(
                 role={role}
                 id={id}
                 className={classNames(className, { Open: isOpen })}
-                $backgroundColor={toastStyle?.backgroundColor || "background"}
-                $border={toastStyle?.border || { color: "gray-200" }}
-                $shadow={toastStyle?.shadow}
-                $textColor={toastStyle?.textColor || "font"}
+                $status={status}
+                $maxWidth={maxWidth}
                 $toasterPosition={toasterPosition}
                 {...rest}
             >
@@ -126,14 +126,13 @@ export const Toast = forwardRef<HTMLDivElement, ILibToast>(
                         </IconContainer>
                     )}
 
-                    <Text
-                        tag="h6"
-                        as="p"
+                    <Title
                         data-testid={testid && `${testid}.TitleContainer.Title`}
                         className={className && "Title"}
+                        tag="strong"
                     >
                         {title}
-                    </Text>
+                    </Title>
 
                     {!hideCloseButton && (
                         <IconContainer
@@ -199,11 +198,9 @@ export const Toast = forwardRef<HTMLDivElement, ILibToast>(
                     <Timer
                         data-testid={testid && `${testid}.Timer`}
                         className={className && "Timer"}
-                        $duration={options?.duration || 3000}
+                        $duration={options?.duration ?? 3000}
                         $backgroundColor={
-                            options?.timerBackgroundColor ||
-                            toastStyle?.border?.color ||
-                            "gray-200"
+                            options?.timerBackgroundColor ?? "success-200"
                         }
                     />
                 )}

package/dist/lib/components/Toast/Toaster.tsx

@@ -2,9 +2,8 @@
 
 import { forwardRef } from "react"
 import { uuid } from "@julseb-lib/utils"
-import { Loader } from "../Loader"
 import { Toast } from "./Toast"
-import type { LibAllColors } from "../../types"
+import type { LibAllColors, LibToastStatus } from "../../types"
 import { StyledToaster } from "./styles"
 import type { ILibToaster } from "./types"
 
@@ -12,44 +11,37 @@ const DEFAULT_ICON_SIZE = 16
 
 const toastStatusStyles: {
     [key: string]: {
-        backgroundColor: LibAllColors
-        borderColor: LibAllColors
+        status: LibToastStatus
+        timerColor: LibAllColors
         iconLeftColor: LibAllColors
         iconLeft?: JSX.Element
         iconLeftSize: number
     }
 } = {
     success: {
-        backgroundColor: "success-50",
-        borderColor: "success",
+        status: "success",
+        timerColor: "success",
         iconLeftColor: "success",
         iconLeftSize: DEFAULT_ICON_SIZE,
     },
     error: {
-        backgroundColor: "danger-50",
-        borderColor: "danger",
+        status: "error",
+        timerColor: "danger",
         iconLeftColor: "danger",
         iconLeftSize: DEFAULT_ICON_SIZE,
     },
     warning: {
-        backgroundColor: "warning-50",
-        borderColor: "warning",
+        status: "warning",
+        timerColor: "warning",
         iconLeftColor: "warning",
         iconLeftSize: DEFAULT_ICON_SIZE,
     },
     info: {
-        backgroundColor: "primary-50",
-        borderColor: "primary",
+        status: "info",
+        timerColor: "primary",
         iconLeftColor: "primary",
         iconLeftSize: DEFAULT_ICON_SIZE,
     },
-    loading: {
-        backgroundColor: "white",
-        borderColor: "gray",
-        iconLeftColor: "gray",
-        iconLeftSize: DEFAULT_ICON_SIZE,
-        iconLeft: <Loader size={DEFAULT_ICON_SIZE} borderWidth={2} />,
-    },
 }
 
 /**
@@ -110,7 +102,7 @@ export const Toaster = forwardRef<HTMLDivElement, ILibToaster>(
                 {...rest}
             >
                 {toasts.map(toast => {
-                    const styles = toastStatusStyles[status || "success"]
+                    const styles = toastStatusStyles[toast.status || "success"]
 
                     return (
                         <Toast
@@ -160,15 +152,12 @@ export const Toaster = forwardRef<HTMLDivElement, ILibToaster>(
                                 body: toast.options?.body,
                                 id: toast.options?.id || toast.id,
                                 timerBackgroundColor:
-                                    toast.options?.timerBackgroundColor ||
-                                    styles.borderColor,
+                                    toast.options?.timerBackgroundColor || 
+                                    styles.timerColor,
                                 ...toastsOptions,
                                 ...toast.options,
                             }}
-                            toastStyle={{
-                                backgroundColor: styles.backgroundColor,
-                                border: { color: styles.borderColor },
-                            }}
+                            status={toast.status}
                             key={uuid()}
                         />
                     )

package/dist/lib/components/Toast/styles.tsx

@@ -1,6 +1,7 @@
 /*=============================================== Toast styles ===============================================*/
 
 import styled, { keyframes, css } from "styled-components"
+import { stringifyPx } from "@julseb-lib/utils"
 import {
     MEDIA,
     FONT_SIZES,
@@ -10,56 +11,51 @@ import {
     SPACERS,
     TRANSITIONS,
     setDefaultTheme,
+    Text,
 } from "../../"
 import type {
     LibAllColors,
-    ILibBorder,
-    LibShadows,
     LibToasterPosition,
+    LibToastStatus,
 } from "../../types"
 
 const OpenFromLeft = keyframes`
-    0% { transform: translateX(-100%); }
+0% { transform: translateX(-100%); }
 
-    100% { transform: translateX(0); }
+100% { transform: translateX(0); }
 `
 
 const CloseFromLeft = keyframes`
-    0% { transform: translateX(0); }
+0% { transform: translateX(0); }
 
-    100% { transform: translateX(-100%); }
+100% { transform: translateX(-100%); }
 `
 
 const OpenFromRight = keyframes`
-    0% { transform: translateX(100%); }
+0% { transform: translateX(100%); }
 
-    100% { transform: translateX(0); }
+100% { transform: translateX(0); }
 `
 
 const CloseFromRight = keyframes`
-    0% { transform: translateX(0); }
+0% { transform: translateX(0); }
 
-    100% { transform: translateX(100%); }
+100% { transform: translateX(100%); }
 `
 
 const StyledToast = styled.div<{
-    $backgroundColor: LibAllColors
-    $textColor: LibAllColors
-    $border: ILibBorder
-    $shadow?: LibShadows
+    $status: LibToastStatus
     $toasterPosition?: LibToasterPosition
+    $maxWidth: string | number
 }>`
     position: relative;
     width: 100%;
+    max-width: ${({ $maxWidth }) => stringifyPx($maxWidth)};
     padding: ${SPACERS.S};
     border-radius: ${RADIUSES.M};
-    background-color: ${({ theme, $backgroundColor }) =>
-        Mixins.AllColors($backgroundColor, theme)};
-    color: ${({ theme, $textColor }) => Mixins.AllColors($textColor, theme)};
     transition: ${TRANSITIONS.SHORT};
+    border: 1px solid;
     overflow: hidden;
-    ${({ $border }) => Mixins.Border($border)};
-    ${({ $shadow }) => Mixins.Shadow($shadow)};
 
     ${({ $toasterPosition }) => {
         const speedAndFunction = "200ms ease"
@@ -87,6 +83,36 @@ const StyledToast = styled.div<{
                 return null
         }
     }}
+
+    ${({ $status, theme }) => {
+        switch ($status) {
+            case "success":
+                return css`
+                    background-color: ${Mixins.AllColors("success-50", theme)};
+                    border-color: ${Mixins.AllColors("success", theme)};
+                `
+            case "error":
+                return css`
+                    background-color: ${Mixins.AllColors("danger-50", theme)};
+                    border-color: ${Mixins.AllColors("danger", theme)};
+                `
+            case "warning":
+                return css`
+                    background-color: ${Mixins.AllColors("warning-50", theme)};
+                    border-color: ${Mixins.AllColors("warning", theme)};
+                `
+            case "info":
+                return css`
+                    background-color: ${Mixins.AllColors(
+                        "secondary-50",
+                        theme
+                    )};
+                    border-color: ${Mixins.AllColors("secondary", theme)};
+                `
+            default:
+                return null
+        }
+    }}
 `
 
 const TitleContainer = styled.div`
@@ -136,9 +162,9 @@ const CloseButton = styled.button`
 `
 
 const Progress = keyframes`
-    0% { width: 100%; }
+0% { width: 100%; }
 
-    100% { width: 0; }
+100% { width: 0; }
 `
 
 const Timer = styled.span<{
@@ -198,6 +224,10 @@ const StyledToaster = styled.div<{ $position: LibToasterPosition }>`
     }}
 `
 
+const Title = styled(Text)`
+    width: 100%;
+` as any
+
 setDefaultTheme([
     StyledToast,
     TitleContainer,
@@ -205,6 +235,7 @@ setDefaultTheme([
     CloseButton,
     Timer,
     StyledToaster,
+    Title,
 ])
 
 export {
@@ -214,4 +245,5 @@ export {
     CloseButton,
     Timer,
     StyledToaster,
+    Title,
 }

package/dist/lib/components/Toast/types.ts

@@ -1,10 +1,7 @@
 /*=============================================== Toast types ===============================================*/
 
 import type {
-    LibAllColors,
-    ILibBorder,
     LibComponentBase,
-    LibShadows,
     LibToasterPosition,
     LibToast,
     LibToastOptions,
@@ -13,13 +10,7 @@ import type {
 export interface ILibToast extends LibComponentBase<HTMLDivElement>, LibToast {
     title: string
     toasterPosition?: LibToasterPosition
-    toastStyle?: {
-        maxWidth?: string | number
-        border?: ILibBorder
-        backgroundColor?: LibAllColors
-        textColor?: LibAllColors
-        shadow?: LibShadows
-    }
+    maxWidth?: string | number
     hideCloseButton?: boolean
 }
 

package/dist/lib/types/component-items.ts

@@ -276,7 +276,7 @@ export interface LibToastOptions extends LibComponentItemBase<HTMLDivElement> {
  * @prop ref?: ForwardedRef<HTMLDivElement>
  * @prop title: string
  * @prop id?: string
- * @prop status?: "success" | "error" | "warning" | "info" | "loading"
+ * @prop status?: "success" | "error" | "warning" | "info"
  * @prop options?: LibToastOptions
  *
  * @type LibToastOptions

package/dist/lib/types/type-values.ts

@@ -180,7 +180,6 @@ export const typeValues = {
         error: "error",
         warning: "warning",
         info: "info",
-        loading: "loading",
     },
 
     toasterPositions: {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@julseb-lib/react",
-    "version": "0.0.45",
+    "version": "0.0.47",
     "type": "module",
     "license": "MIT",
     "scripts": {