@open-kingdom/shared-frontend-ui-notifications 0.0.2-0

package/README.md

@@ -0,0 +1,7 @@
+# @open-kingdom/ui-notifications
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test @open-kingdom/ui-notifications` to execute the unit tests via [Jest](https://jestjs.io).

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './lib/notification-toast';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC"}

package/dist/index.js

@@ -0,0 +1,181 @@
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import { useState as a, useEffect as w } from "react";
+function b({
+  notification: r,
+  onDismissed: o,
+  onRemoved: i
+}) {
+  const [c, l] = a(!1), [d, u] = a(!1);
+  w(() => {
+    const t = setTimeout(() => l(!0), 10);
+    return () => clearTimeout(t);
+  }, []);
+  const x = () => {
+    u(!0), o(r.id), setTimeout(() => {
+      i(r.id);
+    }, 300);
+  }, h = (t) => {
+    const s = "p-4 rounded-lg border shadow-lg transition-all duration-300 ease-in-out transform";
+    switch (t) {
+      case "success":
+        return `${s} bg-success-50 dark:bg-success-900/20 border-success-200 dark:border-success-700`;
+      case "warning":
+        return `${s} bg-warning-50 dark:bg-warning-900/20 border-warning-200 dark:border-warning-700`;
+      case "error":
+        return `${s} bg-error-50 dark:bg-error-900/20 border-error-200 dark:border-error-700`;
+      default:
+        return s;
+    }
+  }, m = (t) => {
+    switch (t) {
+      case "success":
+        return "text-success-800 dark:text-success-200";
+      case "warning":
+        return "text-warning-800 dark:text-warning-200";
+      case "error":
+        return "text-error-800 dark:text-error-200";
+      default:
+        return "";
+    }
+  }, k = (t) => {
+    switch (t) {
+      case "success":
+        return "text-success-600 dark:text-success-400";
+      case "warning":
+        return "text-warning-600 dark:text-warning-400";
+      case "error":
+        return "text-error-600 dark:text-error-400";
+      default:
+        return "";
+    }
+  }, g = (t) => {
+    switch (t) {
+      case "success":
+        return /* @__PURE__ */ e(
+          "svg",
+          {
+            className: "w-5 h-5 text-success-600 dark:text-success-400",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            children: /* @__PURE__ */ e(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M5 13l4 4L19 7"
+              }
+            )
+          }
+        );
+      case "warning":
+        return /* @__PURE__ */ e(
+          "svg",
+          {
+            className: "w-5 h-5 text-warning-600 dark:text-warning-400",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            children: /* @__PURE__ */ e(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
+              }
+            )
+          }
+        );
+      case "error":
+        return /* @__PURE__ */ e(
+          "svg",
+          {
+            className: "w-5 h-5 text-error-600 dark:text-error-400",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            children: /* @__PURE__ */ e(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+              }
+            )
+          }
+        );
+      default:
+        return null;
+    }
+  };
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: `
+        ${h(r.type)}
+        ${c ? "translate-x-0 opacity-100" : "translate-x-full opacity-0"}
+        ${d ? "translate-x-full opacity-0" : ""}
+        min-w-[320px] max-w-[480px] w-full
+      `,
+      role: "alert",
+      "aria-live": "assertive",
+      children: /* @__PURE__ */ n("div", { className: "flex items-start gap-3", children: [
+        /* @__PURE__ */ e("div", { className: "flex-shrink-0 mt-0.5", children: g(r.type) }),
+        /* @__PURE__ */ n("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ e(
+            "h4",
+            {
+              className: `text-sm font-semibold ${m(
+                r.type
+              )}`,
+              children: r.type.charAt(0).toUpperCase() + r.type.slice(1)
+            }
+          ),
+          /* @__PURE__ */ e(
+            "p",
+            {
+              "data-testid": "notification",
+              className: `text-sm mt-1 ${k(
+                r.type
+              )}`,
+              children: r.message
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e(
+          "button",
+          {
+            "data-testid": "dismiss-button",
+            onClick: x,
+            className: "flex-shrink-0 p-1 text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300 transition-colors",
+            "aria-label": "Dismiss notification",
+            children: /* @__PURE__ */ e(
+              "svg",
+              {
+                className: "w-4 h-4",
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ e(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M6 18L18 6M6 6l12 12"
+                  }
+                )
+              }
+            )
+          }
+        )
+      ] })
+    }
+  );
+}
+export {
+  b as NotificationToast
+};

package/dist/lib/notification-toast.d.ts

@@ -0,0 +1,9 @@
+import { NotificationEntry } from '@open-kingdom/shared-poly-util-types';
+interface NotificationToastProps {
+    notification: NotificationEntry;
+    onDismissed: (id: string) => void;
+    onRemoved: (id: string) => void;
+}
+export declare function NotificationToast({ notification, onDismissed, onRemoved, }: NotificationToastProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=notification-toast.d.ts.map

package/dist/lib/notification-toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-toast.d.ts","sourceRoot":"","sources":["../../src/lib/notification-toast.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AAEzE,UAAU,sBAAsB;IAC9B,YAAY,EAAE,iBAAiB,CAAC;IAChC,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAED,wBAAgB,iBAAiB,CAAC,EAChC,YAAY,EACZ,WAAW,EACX,SAAS,GACV,EAAE,sBAAsB,2CAiLxB"}

package/dist/test-setup.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=test-setup.d.ts.map

package/dist/test-setup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"test-setup.d.ts","sourceRoot":"","sources":["../src/test-setup.ts"],"names":[],"mappings":"AACA,OAAO,2BAA2B,CAAC"}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@open-kingdom/shared-frontend-ui-notifications",
+  "version": "0.0.2-0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "development": "./src/index.ts",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "!**/*.tsbuildinfo"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "nx": {
+    "name": "@open-kingdom/shared-frontend-ui-notifications",
+    "tags": [
+      "scope:shared",
+      "type:ui",
+      "environment:frontend"
+    ]
+  },
+  "peerDependencies": {
+    "tailwindcss": "^3.4.0",
+    "react": "^19.0.0"
+  }
+}