@ttoss/react-notifications 1.19.0

package/README.md

@@ -0,0 +1,54 @@
+# @ttoss/react-notifications
+
+## About
+
+This module handles notifications in your applications and other ttoss modules.
+
+## Getting Started
+
+### Install
+
+```shell
+yarn add @ttoss/{notifications,ui}
+```
+
+## Usage
+
+### Provider
+
+Add a provider on top of your application.
+
+```tsx
+import { NotificationsProvider } from '@ttoss/react-notifications';
+import { ThemeProvider } from "@ttoss/ui";
+
+ReactDOM.render(
+  <React.StrictMode>
+    <ThemeProvider>
+      <NotificationsProvider>
+        <App />
+      </NotificationsProvider>
+    </ThemeProvider>
+  </React.StrictMode>,
+  document.getElementById('root')
+```
+
+### Loading
+
+This modules provides a global loading bar that you can use on every part of your App.
+
+```tsx
+import { useNotifications } from '@ttoss/react-notifications';
+
+const Component = () => {
+  const { loading, setLoading } = useNotifications();
+
+  return (
+    <div>
+      <button onClick={() => setLoading(true)} disabled={isLoading}>
+        Click Me!
+      </button>
+    </div>
+  );
+};
+```

package/dist/esm/index.js

@@ -0,0 +1,63 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+
+// src/Provider.tsx
+import * as React from "react";
+import { Flex, InfiniteLinearProgress } from "@ttoss/ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+var NotificationsContext = React.createContext({
+  isLoading: false,
+  setLoading: () => {
+    return void 0;
+  },
+  setNotifications: () => {
+    return void 0;
+  }
+});
+var NotificationsProvider = ({
+  children,
+  enableNotificationBox
+}) => {
+  const [isLoading, setLoading] = React.useState(false);
+  const [notifications, setNotifications] = React.useState();
+  return /* @__PURE__ */ jsxs(
+    NotificationsContext.Provider,
+    {
+      value: {
+        isLoading,
+        setLoading,
+        setNotifications,
+        notifications,
+        enableNotificationBox
+      },
+      children: [
+        isLoading && /* @__PURE__ */ jsx(Flex, { sx: { position: "absolute", width: "100%", top: 0 }, children: /* @__PURE__ */ jsx(InfiniteLinearProgress, {}) }),
+        children
+      ]
+    }
+  );
+};
+var useNotifications = () => {
+  const { isLoading, setLoading, notifications, setNotifications } = React.useContext(NotificationsContext);
+  return {
+    isLoading,
+    setLoading,
+    notifications,
+    setNotifications
+  };
+};
+
+// src/NotificationBox.tsx
+import { Box } from "@ttoss/ui";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var NotificationBox = () => {
+  const { notifications } = useNotifications();
+  if (!notifications) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx2(Box, { children: JSON.stringify(notifications, null, 2) });
+};
+export {
+  NotificationBox,
+  NotificationsProvider,
+  useNotifications
+};

package/dist/index.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+type NotifyParams = {
+    message: 'string' | React.ReactNode;
+    type: 'success' | 'error' | 'warning' | 'info';
+};
+type NotificationsProviderProps = {
+    children: React.ReactNode;
+    enableNotificationBox?: boolean;
+};
+declare const NotificationsProvider: ({ children, enableNotificationBox, }: NotificationsProviderProps) => JSX.Element;
+declare const useNotifications: () => {
+    isLoading: boolean;
+    setLoading: (arg: boolean) => void;
+    notifications: NotifyParams | NotifyParams[] | undefined;
+    setNotifications: (args: NotifyParams | NotifyParams[]) => void;
+};
+
+declare const NotificationBox: () => JSX.Element | null;
+
+export { NotificationBox, NotificationsProvider, NotificationsProviderProps, useNotifications };

package/dist/index.js

@@ -0,0 +1,97 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  NotificationBox: () => NotificationBox,
+  NotificationsProvider: () => NotificationsProvider,
+  useNotifications: () => useNotifications
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/Provider.tsx
+var React = __toESM(require("react"));
+var import_ui = require("@ttoss/ui");
+var import_jsx_runtime = require("react/jsx-runtime");
+var NotificationsContext = React.createContext({
+  isLoading: false,
+  setLoading: () => {
+    return void 0;
+  },
+  setNotifications: () => {
+    return void 0;
+  }
+});
+var NotificationsProvider = ({
+  children,
+  enableNotificationBox
+}) => {
+  const [isLoading, setLoading] = React.useState(false);
+  const [notifications, setNotifications] = React.useState();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    NotificationsContext.Provider,
+    {
+      value: {
+        isLoading,
+        setLoading,
+        setNotifications,
+        notifications,
+        enableNotificationBox
+      },
+      children: [
+        isLoading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Flex, { sx: { position: "absolute", width: "100%", top: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.InfiniteLinearProgress, {}) }),
+        children
+      ]
+    }
+  );
+};
+var useNotifications = () => {
+  const { isLoading, setLoading, notifications, setNotifications } = React.useContext(NotificationsContext);
+  return {
+    isLoading,
+    setLoading,
+    notifications,
+    setNotifications
+  };
+};
+
+// src/NotificationBox.tsx
+var import_ui2 = require("@ttoss/ui");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var NotificationBox = () => {
+  const { notifications } = useNotifications();
+  if (!notifications) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui2.Box, { children: JSON.stringify(notifications, null, 2) });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  NotificationBox,
+  NotificationsProvider,
+  useNotifications
+});

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@ttoss/react-notifications",
+  "version": "1.19.0",
+  "description": "ttoss notifications module for React apps.",
+  "license": "UNLICENSED",
+  "author": "ttoss",
+  "contributors": [
+    "Pedro Arantes <pedro@arantespp.com> (https://arantespp.com/contact)"
+  ],
+  "main": "dist/index.js",
+  "module": "dist/esm/index.js",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "test": "jest"
+  },
+  "typings": "dist/index.d.ts",
+  "dependencies": {
+    "@ttoss/components": "^1.24.4"
+  },
+  "peerDependencies": {
+    "@ttoss/ui": "^1.25.1",
+    "react": ">=16.8.0"
+  },
+  "devDependencies": {
+    "@ttoss/config": "^1.25.0",
+    "jest": "^29.3.1",
+    "react": "^18.2.0"
+  },
+  "keywords": [
+    "React",
+    "notifications"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "9159bd57009f4fee620218bc1a0e7bbac28acccd"
+}

package/src/NotificationBox.tsx

@@ -0,0 +1,12 @@
+import { Box } from '@ttoss/ui';
+import { useNotifications } from './Provider';
+
+export const NotificationBox = () => {
+  const { notifications } = useNotifications();
+
+  if (!notifications) {
+    return null;
+  }
+
+  return <Box>{JSON.stringify(notifications, null, 2)}</Box>;
+};

package/src/Provider.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { Flex, InfiniteLinearProgress } from '@ttoss/ui';
+
+type NotifyParams = {
+  message: 'string' | React.ReactNode;
+  type: 'success' | 'error' | 'warning' | 'info';
+};
+
+const NotificationsContext = React.createContext<{
+  isLoading: boolean;
+  setLoading: (arg: boolean) => void;
+  setNotifications: (args: NotifyParams | NotifyParams[]) => void;
+  notifications?: NotifyParams | NotifyParams[];
+  enableNotificationBox?: boolean;
+}>({
+  isLoading: false,
+  setLoading: () => {
+    return undefined;
+  },
+  setNotifications: () => {
+    return undefined;
+  },
+});
+
+export type NotificationsProviderProps = {
+  children: React.ReactNode;
+  enableNotificationBox?: boolean;
+};
+
+export const NotificationsProvider = ({
+  children,
+  enableNotificationBox,
+}: NotificationsProviderProps) => {
+  const [isLoading, setLoading] = React.useState(false);
+
+  const [notifications, setNotifications] = React.useState<
+    NotifyParams | NotifyParams[] | undefined
+  >();
+
+  return (
+    <NotificationsContext.Provider
+      value={{
+        isLoading,
+        setLoading,
+        setNotifications,
+        notifications,
+        enableNotificationBox,
+      }}
+    >
+      {isLoading && (
+        <Flex sx={{ position: 'absolute', width: '100%', top: 0 }}>
+          <InfiniteLinearProgress />
+        </Flex>
+      )}
+      {children}
+    </NotificationsContext.Provider>
+  );
+};
+
+export const useNotifications = () => {
+  const { isLoading, setLoading, notifications, setNotifications } =
+    React.useContext(NotificationsContext);
+
+  return {
+    isLoading,
+    setLoading,
+    notifications,
+    setNotifications,
+  };
+};

package/src/index.ts

@@ -0,0 +1,6 @@
+export {
+  NotificationsProvider,
+  useNotifications,
+  NotificationsProviderProps,
+} from './Provider';
+export { NotificationBox } from './NotificationBox';