npm_lib_toast 1.1.3

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "npm_lib_toast",
+  "version": "1.1.3",
+  "description": "React Toast Popup is a simple and customizable toast notification component for React applications.",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "rollup": "rollup -c --bundleConfigAsCjs",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^26.0.1",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@types/react": "^18.3.3",
+    "react": "^18.3.1",
+    "rollup": "^4.18.1",
+    "rollup-plugin-dts": "^6.1.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "tslib": "^2.6.3",
+    "typescript": "^5.5.3"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kumarsantos/npm_lib_first_lib.git"
+  },
+  "keywords": [
+    "react",
+    "react-toast",
+    "notification",
+    "toast",
+    "react-component",
+    "push",
+    "alert"
+  ],
+  "dependencies": {
+    "@types/uuid": "^10.0.0",
+    "react-icons": "^5.2.1",
+    "uuid": "^10.0.0"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,43 @@
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import typescript from "@rollup/plugin-typescript";
+import dts from "rollup-plugin-dts";
+import terser from "@rollup/plugin-terser";
+import peerDepsExternal from "rollup-plugin-peer-deps-external";
+
+import postcss from "rollup-plugin-postcss";
+
+const packageJson = require("./package.json");
+
+export default [
+  {
+    input: "src/index.ts",
+    output: [
+      {
+        file: packageJson.main,
+        format: "cjs",
+        sourcemap: true,
+      },
+      {
+        file: packageJson.module,
+        format: "esm",
+        sourcemap: true,
+      },
+    ],
+    plugins: [
+      peerDepsExternal(),
+      resolve(),
+      commonjs(),
+      typescript({ tsconfig: "./tsconfig.json" }),
+      terser(),
+      postcss(),
+    ],
+    external: ["react", "react-dom"],
+  },
+  {
+    input: "src/index.ts",
+    output: [{ file: packageJson.types }],
+    plugins: [dts.default()],
+    external: [/\.css$/],
+  },
+];

package/src/components/Notification.css

@@ -0,0 +1,115 @@
+.notification {
+  /* A11y */
+  outline: none;
+  /* A11y */
+  padding: 15px;
+  margin: 10px;
+  color: white;
+  display: flex;
+  align-items: center;
+  border-radius: 5px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.success {
+  background-color: #4caf50;
+}
+.info {
+  background-color: #2196f3;
+}
+.warning {
+  background-color: #ff9800;
+}
+.error {
+  background-color: #f44336;
+}
+
+/* Positioning */
+.top-right {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+}
+
+.top-left {
+  position: fixed;
+  top: 20px;
+  left: 20px;
+}
+
+.bottom-right {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+}
+
+.bottom-left {
+  position: fixed;
+  bottom: 20px;
+  left: 20px;
+}
+
+.notification-container {
+  display: flex;
+  /* Stack notifications from bottom to top */
+  align-items: flex-end; /* Align notifications to the right */
+}
+
+.notification-container.bottom {
+  flex-direction: column-reverse;
+}
+.notification-container.top {
+  flex-direction: column;
+}
+/* Positioning */
+
+.closeBtn {
+  margin-left: 5px;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+
+/* Animations */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes popup {
+  from {
+    transform: scale(0.5);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+.fadeIn {
+  animation: fadeIn 0.5s;
+}
+.popup {
+  animation: popup 0.5s ease-out;
+}
+.slideIn {
+  animation: slideIn 0.5s ease-out;
+}
+/* Animations */

package/src/components/Notification.tsx

@@ -0,0 +1,64 @@
+import React, { useEffect, useRef } from "react";
+import {
+  AiOutlineCheckCircle,
+  AiOutlineInfoCircle,
+  AiOutlineWarning,
+  AiOutlineCloseCircle,
+  AiOutlineClose,
+} from "react-icons/ai";
+import "./Notification.css";
+import { NotificationProps } from "./types";
+
+const iconStyles: React.CSSProperties = { marginRight: "10px" };
+const icons: Record<string, JSX.Element> = {
+  success: <AiOutlineCheckCircle style={iconStyles} />,
+  info: <AiOutlineInfoCircle style={iconStyles} />,
+  warning: <AiOutlineWarning style={iconStyles} />,
+  error: <AiOutlineCloseCircle style={iconStyles} />,
+};
+
+const animations: Record<string, string> = {
+  fade: "fadeIn",
+  pop: "popup",
+  slide: "slideIn",
+};
+
+const Notification: React.FC<NotificationProps> = ({
+  type = "info",
+  message,
+  onClose,
+  animation = "slide",
+}) => {
+  // A11y
+  const notificationRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (notificationRef.current) {
+      notificationRef.current.focus();
+    }
+  }, []);
+
+  const ariaRole = type === "error" || type === "warning" ? "alert" : "status";
+  const ariaLive =
+    type === "error" || type === "warning" ? "assertive" : "polite";
+  // A11y
+
+  return (
+    <div
+      className={`notification ${type} ${animations[animation]}`}
+      // A11y
+      role={ariaRole}
+      aria-live={ariaLive}
+      tabIndex={-1}
+      ref={notificationRef}
+      // A11y
+    >
+      {icons[type]} {message}
+      <button className="closeBtn" onClick={() => onClose()}>
+        <AiOutlineClose color="white" />
+      </button>
+    </div>
+  );
+};
+
+export default Notification;

package/src/components/types.ts

@@ -0,0 +1,27 @@
+export interface NotificationProps {
+  type: "success" | "info" | "warning" | "error";
+  message: string;
+  onClose: () => void;
+  animation?: "fade" | "pop" | "slide";
+}
+
+// Define the allowed positions
+export type PositionType =
+  | "bottom-left"
+  | "bottom-right"
+  | "top-left"
+  | "top-right";
+
+// Define the properties of a notification
+export interface NotificationProps {
+  type: "success" | "info" | "warning" | "error";
+  message: string;
+  duration: number;
+  animation?: "fade" | "pop" | "slide";
+}
+
+// Define the return type of the hook
+export interface UseNotificationReturn {
+  NotificationComponent: JSX.Element;
+  triggerNotification: (notificationProps: NotificationProps) => void;
+}

package/src/hooks/useNotification.tsx

@@ -0,0 +1,59 @@
+import React, { useState, useCallback } from "react";
+import Notification from "../components/Notification";
+import { v4 as uuidv4 } from "uuid";
+import {
+  NotificationProps,
+  PositionType,
+  UseNotificationReturn,
+} from "../components/types";
+
+const useNotification = (
+  position: PositionType = "bottom-right",
+): UseNotificationReturn => {
+  const [notifications, setNotifications] = useState<
+    (NotificationProps & { id: string })[]
+  >([]);
+
+  const triggerNotification = useCallback(
+    (notificationProps: NotificationProps) => {
+      const toastId = uuidv4();
+      setNotifications((prevNotifications: any) => [
+        ...prevNotifications,
+        { id: toastId, ...notificationProps },
+      ]);
+
+      setTimeout(() => {
+        setNotifications((prevNotifications: any) =>
+          prevNotifications.filter((n: any) => n.id !== toastId),
+        );
+      }, notificationProps.duration);
+    },
+    [],
+  );
+
+  const handleNotificationClose = (index: number) => {
+    setNotifications((prevNotifications: any) => {
+      const updatedNotifications = [...prevNotifications];
+      updatedNotifications.splice(index, 1);
+      return updatedNotifications;
+    });
+  };
+
+  const NotificationComponent = (
+    <div
+      className={`notification-container ${position} ${position.split("-")[0]}`}
+    >
+      {notifications.map((notification: any, index: number) => (
+        <Notification
+          key={notification.id}
+          {...notification}
+          onClose={() => handleNotificationClose(index)}
+        />
+      ))}
+    </div>
+  );
+
+  return { NotificationComponent, triggerNotification };
+};
+
+export default useNotification;

package/src/index.ts

@@ -0,0 +1,3 @@
+import useNotification from "./hooks/useNotification";
+
+export default useNotification;

package/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["DOM","DOM.Iterable","ESNext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"]
+}