feat: toast and alerts

packages/alert/src/lib/alert.tsx

@@ -7,37 +7,45 @@ export interface AlertProps {
   title?: string;
   description?: string | ReactNode;
   actions?: React.ReactNode;
+  border?: "left" | "right" | "all" | "none"
   link?: {
     url: string;
     text: string;
   };
   dismissButton?: boolean;
 }
 
+const borders = {
+  none: '',
+  all: 'border',
+  left: "border-l-4",
+  right: "border-r-4"
+}
+
 const classes = {
   warning: {
-    bg: 'bg-yellow-50',
+    bg: 'bg-yellow-50 border-yellow-400',
     text: 'text-yellow-800',
     description: 'text-yellow-700',
     link: 'text-yellow-700 hover:text-yellow-600',
     dismissBtn: 'bg-yellow-50 text-yellow-500 hover:bg-yellow-100 focus:outline-none focus:ring-2 focus:ring-yellow-600 focus:ring-offset-2 focus:ring-offset-yellow-50',
   },
   success: {
-    bg: 'bg-green-50',
+    bg: 'bg-green-50 border-green-400',
     text: 'text-green-800',
     description: 'text-green-700',
     link: 'text-green-700 hover:text-green-600',
     dismissBtn: 'bg-green-50 text-green-500 hover:bg-green-100 focus:outline-none focus:ring-2 focus:ring-green-600 focus:ring-offset-2 focus:ring-offset-green-50',
   },
   error: {
-    bg: 'bg-red-50',
+    bg: 'bg-red-50 border-red-400',
     text: 'text-red-800',
     description: 'text-red-700',
     link: 'text-red-700 hover:text-red-600',
     dismissBtn: 'bg-red-50 text-red-500 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-red-600 focus:ring-offset-2 focus:ring-offset-red-50',
   },
   info: {
-    bg: 'border-l-4 border-blue-400 bg-blue-50',
+    bg: 'border-blue-400 bg-blue-50',
     text: 'text-blue-800',
     description: 'text-blue-700',
     link: 'text-blue-700 hover:text-blue-600',
@@ -46,11 +54,12 @@ const classes = {
 }
 
 export const Alert: React.FC<AlertProps> = ({
-  variant,
+  variant = "info",
   title,
   icon,
   description,
   actions,
+  border = "none",
   link,
   dismissButton = false,
 }) => {
@@ -95,7 +104,7 @@ export const Alert: React.FC<AlertProps> = ({
 
   return (
     <div
-      className={`rounded-md p-4 ${classes[variant].bg}`}
+      className={`rounded-md p-4 ${classes[variant].bg} ${borders[border]}`}
     >
       <div className="flex flex-col md:flex-row">
         {icon && (

packages/alert/src/stories/Alert.stories.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 
-import Title from '@bootwind/title';
 import Alert, { AlertProps } from '../index';
 
 export default {
@@ -50,6 +49,15 @@ export default {
         type: 'select',
       }
     },
+    border: {
+      description: 'Whether to add border on the alert',
+      type: "string",
+      options: ["left", "right", "all", "none"],
+      defaultValue: "none",
+      control: {
+        type: 'select',
+      }
+    },
   },
 } as Meta;
 type Story = StoryObj<AlertProps>;
@@ -58,6 +66,7 @@ export const WithTitle: Story = {
   args: {
     variant: 'info',
     title: "With Title",
+    border: "left",
     description: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam rerum sequi, aperiam nihil harum sapiente veniam rem soluta quasi fugit voluptatem voluptate tempora consectetur vitae dignissimos at ipsum perspiciatis ab!"
   }
 }
@@ -96,4 +105,15 @@ export const Link: Story = {
       text: 'Open link'
     }
   }
+}
+
+export const Variants = (args: AlertProps) => {
+  return (
+    <div className='flex flex-col gap-5'>
+      <Alert {...args} title='Primary' variant='success'></Alert>
+      <Alert {...args} title='Error' variant='error'></Alert>
+      <Alert {...args} title='Info' variant='info'></Alert>
+      <Alert {...args} title='Warning' variant='warning'></Alert>
+    </div>
+  )
 }

packages/alert/tsconfig.json

@@ -11,9 +11,6 @@
   "references": [
     {
       "path": "./tsconfig.lib.json"
-    },
-    {
-      "path": "./tsconfig.storybook.json"
     }
   ],
   "extends": "../../tsconfig.base.json"

packages/toast/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

packages/toast/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nx/react", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

packages/toast/README.md

@@ -0,0 +1,7 @@
+# toast
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test toast` to execute the unit tests via [Vitest](https://vitest.dev/).

packages/toast/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "toast",
+  "version": "0.0.1",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.js"
+    }
+  }
+}

packages/toast/project.json

@@ -0,0 +1,32 @@
+{
+  "name": "toast",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/toast/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["packages/toast/**/*.{ts,tsx,js,jsx}"]
+      }
+    },
+    "build": {
+      "executor": "@nx/vite:build",
+      "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "production",
+      "options": {
+        "outputPath": "dist/packages/toast"
+      },
+      "configurations": {
+        "development": {
+          "mode": "development"
+        },
+        "production": {
+          "mode": "production"
+        }
+      }
+    }
+  }
+}

packages/toast/src/index.ts

@@ -0,0 +1,2 @@
+export * from './lib/toast';
+export * from './lib/ToastProvider';

packages/toast/src/lib/ToastProvider.tsx

@@ -0,0 +1,92 @@
+import { ReactNode, createContext, useContext, useId, useReducer, useRef, useState } from "react";
+import { Toast, ToastProps } from "..";
+
+interface IToastProvider {
+    toasts: ToastProps[]
+    add: (props: ToastProps) => void 
+    close: (toastId: string) => void 
+}
+interface ToastProviderInterface {
+    children?: any
+    // Duration in milliseconds
+    duration?: number
+    position?: "top-left" | "top-right" | "bottom-left" | "bottom-right"
+}
+
+interface State {
+    toasts: ToastProps[]
+}
+
+const positionClasses = {
+    "top-left": "top-4 left-4",
+    "bottom-left": "bottom-4 left-4",
+    "top-right": "top-4 right-4",
+    "bottom-right": "bottom-4 right-4",
+}
+const ToastContext = createContext<IToastProvider>({} as IToastProvider)
+
+type Action = 
+    | {
+        type: "push"
+        toast: ToastProps
+      }
+    | {
+        type: "remove"
+        toastId?: string
+    }
+
+const reducer = (state: State, action: Action): State => {
+    switch (action.type) {
+        case 'push':
+            return { toasts: [action.toast, ...state.toasts] }
+        case 'remove':
+            if(action.toastId === undefined) {
+                return {
+                    toasts: []
+                }
+            } 
+            return {
+                toasts: state.toasts.filter(t => t.id !== action.toastId)
+            }
+    }
+}
+let count = 0
+export function ToastProvider({ children, position = "bottom-right", duration = 2000 }: ToastProviderInterface) {
+    function genId() {
+        count = (count + 1) % Number.MAX_SAFE_INTEGER
+        return count.toString()
+    }
+    const [state, dispatch] = useReducer(reducer, { toasts: [] })
+
+    const add = (newToast: ToastProps) => {
+        newToast.id = genId()
+        dispatch({
+            type: "push",
+            toast: newToast
+        })
+
+        setTimeout(() => {
+            close(newToast.id!)
+        }, duration)
+    }
+
+    const close = (toastId: string) => {
+        dispatch({
+            toastId: toastId,
+            type: "remove"
+        })
+    }
+
+    return (
+        <ToastContext.Provider value={{add, close, toasts: state.toasts}}>
+            {children}
+            {/* Render the toasts */}
+            <div className={`toasts absolute flex gap-3 flex-col min-w-[300px] ${positionClasses[position]}`}>
+                {state.toasts.map(toast => (
+                    <Toast {...toast} key={toast.id}></Toast>
+                ))}
+            </div>
+        </ToastContext.Provider>
+    )
+}
+export const useToastContext = () => useContext(ToastContext)

packages/toast/src/lib/toast.tsx

@@ -0,0 +1,15 @@
+/* eslint-disable-next-line */
+import Alert, { AlertProps } from "@bootwind/alert"
+
+export interface ToastProps extends AlertProps {
+  id?: string
+}
+export function Toast(props: ToastProps) {
+  return (
+    <div className={`toast`}>
+      <Alert {...props}></Alert>
+    </div>
+  );
+}
+
+export default Toast;

packages/toast/src/lib/useToast.tsx

@@ -0,0 +1,11 @@
+import { useToastContext } from "./ToastProvider"
+
+export const useToast = () => {
+    const ctx = useToastContext()
+    const toast = ctx.add
+    const closeToast = ctx.close
+    return {
+        toast,
+        closeToast
+    }
+}