@quen-ui/components 0.0.14

package/dist/Notification/NotificationInstance.es.js

@@ -0,0 +1,244 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState, useEffect, useMemo, createElement } from "react";
+import { createPortal } from "react-dom";
+import { randomId } from "@quen-ui/helpers";
+import notificationsStore from "./NotificationsStore.es.js";
+import { NotificationsWrapper } from "./styles.es.js";
+import Notification from "./Notification.es.js";
+const CONTAINER_NOTIFICATIONS = "quen-ui-notifications";
+const NotificationInstance = () => {
+  const [notifications2, setNotifications] = useState([]);
+  const [element, setElement] = useState();
+  useEffect(() => {
+    let _element = document.getElementById(CONTAINER_NOTIFICATIONS);
+    if (!_element) {
+      _element = document.createElement("div");
+      _element.setAttribute("id", CONTAINER_NOTIFICATIONS);
+      document.body.appendChild(_element);
+    }
+    setElement(_element);
+  }, []);
+  const topNotifications = useMemo(
+    () => notifications2.filter((notification) => notification.position === "top"),
+    [notifications2]
+  );
+  const topLeftNotifications = useMemo(
+    () => notifications2.filter(
+      (notification) => notification.position === "top-left"
+    ),
+    [notifications2]
+  );
+  const topRightNotifications = useMemo(
+    () => notifications2.filter(
+      (notification) => notification.position === "top-right"
+    ),
+    [notifications2]
+  );
+  const bottomNotifications = useMemo(
+    () => notifications2.filter(
+      (notification) => notification.position === "bottom"
+    ),
+    [notifications2]
+  );
+  const bottomLeftNotifications = useMemo(
+    () => notifications2.filter(
+      (notification) => notification.position === "bottom-left"
+    ),
+    [notifications2]
+  );
+  const bottomRightNotifications = useMemo(
+    () => notifications2.filter(
+      (notification) => notification.position === "bottom-right"
+    ),
+    [notifications2]
+  );
+  useEffect(() => {
+    if (process.env.NODE_ENV !== "production" && element && element.children.length > 1) {
+      window.console.error(
+        "Warning: You are using two instances NotificationsInstance. Use only one instance per application."
+      );
+    }
+  }, []);
+  useEffect(() => {
+    notificationsStore.subscribe(updateNotifications);
+    return () => {
+      notificationsStore.unsubscribe(updateNotifications);
+      element == null ? void 0 : element.remove();
+    };
+  }, []);
+  const updateNotifications = () => {
+    setNotifications([...notificationsStore.data]);
+  };
+  if (element) {
+    return createPortal(
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        topNotifications.length ? /* @__PURE__ */ jsx(
+          NotificationsWrapper,
+          {
+            zIndex: topNotifications[topNotifications.length - 1].zIndex,
+            position: "top",
+            children: /* @__PURE__ */ jsx("div", { children: topNotifications.map((notification) => /* @__PURE__ */ createElement(
+              Notification,
+              {
+                ...notification,
+                key: notification.id,
+                onClose: () => {
+                  var _a;
+                  hideNotification(notification.id);
+                  (_a = notification.onClose) == null ? void 0 : _a.call(notification, notification);
+                }
+              }
+            )) })
+          }
+        ) : null,
+        topLeftNotifications.length ? /* @__PURE__ */ jsx(
+          NotificationsWrapper,
+          {
+            zIndex: topLeftNotifications[topLeftNotifications.length - 1].zIndex,
+            position: "top-left",
+            children: topLeftNotifications.map((notification) => /* @__PURE__ */ createElement(
+              Notification,
+              {
+                ...notification,
+                key: notification.id,
+                onClose: () => {
+                  var _a;
+                  hideNotification(notification.id);
+                  (_a = notification.onClose) == null ? void 0 : _a.call(notification, notification);
+                }
+              }
+            ))
+          }
+        ) : null,
+        topRightNotifications.length ? /* @__PURE__ */ jsx(
+          NotificationsWrapper,
+          {
+            position: "top-right",
+            zIndex: topRightNotifications[topRightNotifications.length - 1].zIndex,
+            children: topRightNotifications.map((notification) => /* @__PURE__ */ createElement(
+              Notification,
+              {
+                ...notification,
+                key: notification.id,
+                onClose: () => {
+                  var _a;
+                  hideNotification(notification.id);
+                  (_a = notification.onClose) == null ? void 0 : _a.call(notification, notification);
+                }
+              }
+            ))
+          }
+        ) : null,
+        bottomNotifications.length ? /* @__PURE__ */ jsx(
+          NotificationsWrapper,
+          {
+            position: "bottom",
+            zIndex: bottomNotifications[bottomNotifications.length - 1].zIndex,
+            children: bottomNotifications.map((notification) => /* @__PURE__ */ createElement(
+              Notification,
+              {
+                ...notification,
+                key: notification.id,
+                onClose: () => {
+                  var _a;
+                  hideNotification(notification.id);
+                  (_a = notification.onClose) == null ? void 0 : _a.call(notification, notification);
+                }
+              }
+            ))
+          }
+        ) : null,
+        bottomLeftNotifications.length ? /* @__PURE__ */ jsx(
+          NotificationsWrapper,
+          {
+            position: "bottom-left",
+            zIndex: bottomLeftNotifications[bottomLeftNotifications.length - 1].zIndex,
+            children: bottomLeftNotifications.map((notification) => /* @__PURE__ */ createElement(
+              Notification,
+              {
+                ...notification,
+                key: notification.id,
+                onClose: () => {
+                  var _a;
+                  hideNotification(notification.id);
+                  (_a = notification.onClose) == null ? void 0 : _a.call(notification, notification);
+                }
+              }
+            ))
+          }
+        ) : null,
+        bottomRightNotifications.length ? /* @__PURE__ */ jsx(
+          NotificationsWrapper,
+          {
+            position: "bottom-right",
+            zIndex: bottomRightNotifications[bottomRightNotifications.length - 1].zIndex,
+            children: bottomRightNotifications.map((notification) => /* @__PURE__ */ createElement(
+              Notification,
+              {
+                ...notification,
+                key: notification.id,
+                onClose: () => {
+                  var _a;
+                  hideNotification(notification.id);
+                  (_a = notification.onClose) == null ? void 0 : _a.call(notification, notification);
+                }
+              }
+            ))
+          }
+        ) : null
+      ] }),
+      element
+    );
+  }
+  return null;
+};
+const showNotification = (notification) => {
+  const id = notification.id || randomId();
+  let newNotifications = [];
+  if (notification.id && notificationsStore.data.some((n) => n.id === notification.id)) {
+    newNotifications = notificationsStore.data;
+  } else {
+    newNotifications = [...notificationsStore.data, { ...notification, id, position: notification.position || "top" }];
+  }
+  notificationsStore.updateNotifications(newNotifications);
+  return id;
+};
+const hideNotification = (id) => {
+  const newNotifications = notificationsStore.data.filter((notification) => {
+    var _a;
+    if (notification.id === id) {
+      (_a = notification.onClose) == null ? void 0 : _a.call(notification, notification);
+      return false;
+    }
+    return true;
+  });
+  notificationsStore.updateNotifications(newNotifications);
+  return id;
+};
+const updateNotification = (notification) => {
+  const newNotifications = notificationsStore.data.map((n) => {
+    if (n.id === notification.id) {
+      return { ...n, ...notification };
+    }
+    return n;
+  });
+  notificationsStore.updateNotifications(newNotifications);
+  return notification.id;
+};
+const cleanNotifications = () => {
+  notificationsStore.updateNotifications([]);
+};
+const notifications = {
+  show: showNotification,
+  hide: hideNotification,
+  update: updateNotification,
+  clean: cleanNotifications
+};
+export {
+  NotificationInstance,
+  cleanNotifications,
+  hideNotification,
+  notifications,
+  showNotification,
+  updateNotification
+};

package/dist/Notification/NotificationsStore.cjs.js

@@ -0,0 +1,30 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+class NotificationsStore {
+  constructor() {
+    __publicField(this, "subscribes", []);
+    __publicField(this, "notifications", []);
+  }
+  subscribe(callback) {
+    this.subscribes.push(callback);
+  }
+  unsubscribe(callback) {
+    this.subscribes = this.subscribes.filter(
+      (subscriber) => subscriber === callback ? void 0 : subscriber
+    );
+  }
+  notify() {
+    this.subscribes.forEach((subscriber) => subscriber());
+  }
+  updateNotifications(notifications) {
+    this.notifications = notifications;
+    this.notify();
+  }
+  get data() {
+    return this.notifications;
+  }
+}
+const notificationsStore = new NotificationsStore();
+module.exports = notificationsStore;

package/dist/Notification/NotificationsStore.d.ts

@@ -0,0 +1,13 @@
+import { INotificationParams } from './types';
+type TNotificationSubscribe = () => void;
+declare class NotificationsStore {
+    private subscribes;
+    private notifications;
+    subscribe(callback: TNotificationSubscribe): void;
+    unsubscribe(callback: TNotificationSubscribe): void;
+    private notify;
+    updateNotifications(notifications: INotificationParams[]): void;
+    get data(): INotificationParams[];
+}
+declare const _default: NotificationsStore;
+export default _default;

package/dist/Notification/NotificationsStore.es.js

@@ -0,0 +1,31 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+class NotificationsStore {
+  constructor() {
+    __publicField(this, "subscribes", []);
+    __publicField(this, "notifications", []);
+  }
+  subscribe(callback) {
+    this.subscribes.push(callback);
+  }
+  unsubscribe(callback) {
+    this.subscribes = this.subscribes.filter(
+      (subscriber) => subscriber === callback ? void 0 : subscriber
+    );
+  }
+  notify() {
+    this.subscribes.forEach((subscriber) => subscriber());
+  }
+  updateNotifications(notifications) {
+    this.notifications = notifications;
+    this.notify();
+  }
+  get data() {
+    return this.notifications;
+  }
+}
+const notificationsStore = new NotificationsStore();
+export {
+  notificationsStore as default
+};

package/dist/Notification/index.d.ts

@@ -0,0 +1,3 @@
+export { NotificationInstance, notifications } from './NotificationInstance';
+export type { INotificationParams, INotificationsContext } from './types';
+export { NOTIFICATION_STATUSES } from './types';

package/dist/Notification/styles.cjs.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const styled = require("styled-components");
+const getBackgroundStatus = (theme, status) => {
+  switch (status) {
+    case "info":
+      return theme.colors.violet["9"];
+    case "warning":
+      return theme.colors.orange["9"];
+    case "error":
+      return theme.colors.red["9"];
+    case "success":
+      return theme.colors.green["9"];
+  }
+};
+const getPosition = (theme, position) => {
+  switch (position) {
+    case "top":
+      return styled.css`
+        top: ${theme.space.m};
+        left: 50%;
+        transform: translateX(-50%);
+      `;
+    case "top-left":
+      return styled.css`
+        top: ${theme.space.m};
+        left: ${theme.space.m};
+      `;
+    case "top-right":
+      return styled.css`
+        top: ${theme.space.m};
+        right: ${theme.space.m};
+      `;
+    case "bottom":
+      return styled.css`
+        bottom: ${theme.space.m};
+        left: 50%;
+        transform: translateX(-50%);
+      `;
+    case "bottom-left":
+      return styled.css`
+        bottom: ${theme.space.m};
+        left: ${theme.space.m};
+      `;
+    case "bottom-right":
+      return styled.css`
+        bottom: ${theme.space.m};
+        right: ${theme.space.m};
+      `;
+  }
+  return styled.css``;
+};
+const NotificationsWrapper = styled.div.withConfig({
+  shouldForwardProp: (props) => !["position", "zIndex"].includes(props)
+})`
+  width: calc(100% - ${({ theme }) => theme.space.m} * 2);
+  position: fixed;
+  z-index: ${({ zIndex = 2e3 }) => zIndex};
+  ${({ position, theme }) => getPosition(theme, position)};
+  max-width: 384px;
+`;
+const NotificationStyled = styled.div.withConfig({
+  shouldForwardProp: (props) => !["status"].includes(props)
+})`
+  width: 384px;
+  position: relative;
+  border-radius: ${({ theme }) => theme.control.radius};
+  padding: ${({ theme }) => theme.space.m};
+  background: ${({ theme }) => theme.colors.grayViolet["2"]};
+  margin-bottom: ${({ theme }) => theme.space.m};
+
+  .quen-ui__notification-icon {
+    color: ${({ theme, status = "info" }) => getBackgroundStatus(theme, status)};
+  }
+
+  ${({ status, theme }) => status && styled.css`
+      &:before {
+        content: "";
+        display: block;
+        position: absolute;
+        width: ${theme.space.xs};
+        top: 0;
+        bottom: 0;
+        inset-inline-start: 0;
+        background-color: ${getBackgroundStatus(theme, status)};
+      }
+    `}
+`;
+exports.NotificationStyled = NotificationStyled;
+exports.NotificationsWrapper = NotificationsWrapper;

package/dist/Notification/styles.d.ts

@@ -0,0 +1,8 @@
+import { INotificationParams } from './types';
+export declare const NotificationsWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    zIndex?: number;
+    position: INotificationParams["position"];
+}>> & string;
+export declare const NotificationStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    status: INotificationParams["status"];
+}>> & string;

package/dist/Notification/styles.es.js

@@ -0,0 +1,90 @@
+import styled, { css } from "styled-components";
+const getBackgroundStatus = (theme, status) => {
+  switch (status) {
+    case "info":
+      return theme.colors.violet["9"];
+    case "warning":
+      return theme.colors.orange["9"];
+    case "error":
+      return theme.colors.red["9"];
+    case "success":
+      return theme.colors.green["9"];
+  }
+};
+const getPosition = (theme, position) => {
+  switch (position) {
+    case "top":
+      return css`
+        top: ${theme.space.m};
+        left: 50%;
+        transform: translateX(-50%);
+      `;
+    case "top-left":
+      return css`
+        top: ${theme.space.m};
+        left: ${theme.space.m};
+      `;
+    case "top-right":
+      return css`
+        top: ${theme.space.m};
+        right: ${theme.space.m};
+      `;
+    case "bottom":
+      return css`
+        bottom: ${theme.space.m};
+        left: 50%;
+        transform: translateX(-50%);
+      `;
+    case "bottom-left":
+      return css`
+        bottom: ${theme.space.m};
+        left: ${theme.space.m};
+      `;
+    case "bottom-right":
+      return css`
+        bottom: ${theme.space.m};
+        right: ${theme.space.m};
+      `;
+  }
+  return css``;
+};
+const NotificationsWrapper = styled.div.withConfig({
+  shouldForwardProp: (props) => !["position", "zIndex"].includes(props)
+})`
+  width: calc(100% - ${({ theme }) => theme.space.m} * 2);
+  position: fixed;
+  z-index: ${({ zIndex = 2e3 }) => zIndex};
+  ${({ position, theme }) => getPosition(theme, position)};
+  max-width: 384px;
+`;
+const NotificationStyled = styled.div.withConfig({
+  shouldForwardProp: (props) => !["status"].includes(props)
+})`
+  width: 384px;
+  position: relative;
+  border-radius: ${({ theme }) => theme.control.radius};
+  padding: ${({ theme }) => theme.space.m};
+  background: ${({ theme }) => theme.colors.grayViolet["2"]};
+  margin-bottom: ${({ theme }) => theme.space.m};
+
+  .quen-ui__notification-icon {
+    color: ${({ theme, status = "info" }) => getBackgroundStatus(theme, status)};
+  }
+
+  ${({ status, theme }) => status && css`
+      &:before {
+        content: "";
+        display: block;
+        position: absolute;
+        width: ${theme.space.xs};
+        top: 0;
+        bottom: 0;
+        inset-inline-start: 0;
+        background-color: ${getBackgroundStatus(theme, status)};
+      }
+    `}
+`;
+export {
+  NotificationStyled,
+  NotificationsWrapper
+};

package/dist/Notification/types.cjs.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const NOTIFICATION_STATUSES = [
+  "success",
+  "warning",
+  "error",
+  "info"
+];
+exports.NOTIFICATION_STATUSES = NOTIFICATION_STATUSES;

package/dist/Notification/types.d.ts

@@ -0,0 +1,41 @@
+import { default as React } from 'react';
+export declare const NOTIFICATION_STATUSES: readonly ["success", "warning", "error", "info"];
+export type TNotificationStatus = (typeof NOTIFICATION_STATUSES)[number];
+export interface INotificationsContext {
+    /** Displays new notification */
+    show: (notification: INotificationParams) => string;
+    /** Removes specific notification */
+    hide: (id: string) => string;
+    /** Updates existing notification */
+    update: (notification: Partial<INotificationParams>) => string;
+    /** Clears all notifications */
+    clean: () => void;
+}
+export type TNotificationPosition = "top-left" | "top-right" | "top" | "bottom-left" | "bottom-right" | "bottom";
+export interface INotificationParams {
+    /** Unique notification identifier */
+    id?: string;
+    /** Display position */
+    position?: TNotificationPosition;
+    /** Bold header text (supports JSX) */
+    title?: React.ReactNode;
+    /** Primary content (supports JSX) */
+    message?: React.ReactNode;
+    /** Shows loading spinner (overrides icon) */
+    loading?: boolean;
+    /** Close delay (ms) or false to disable */
+    autoClose?: boolean | number;
+    /** Callback when notification closes */
+    onClose?: (params: INotificationParams) => void;
+    /** Visual status type */
+    status?: TNotificationStatus;
+    /** Shows/hides close button */
+    closeButton?: boolean;
+    /** Stacking context */
+    zIndex?: number;
+    /** Custom container class */
+    className?: string;
+    /** Custom icon or false to hide */
+    icon?: true | React.ReactNode;
+    [key: string]: any;
+}

package/dist/Notification/types.es.js

@@ -0,0 +1,9 @@
+const NOTIFICATION_STATUSES = [
+  "success",
+  "warning",
+  "error",
+  "info"
+];
+export {
+  NOTIFICATION_STATUSES
+};

package/dist/Progress/Progress.cjs.js

@@ -0,0 +1,43 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const styles = require("./styles.cjs.js");
+const Text = require("../typography/Text/Text.cjs.js");
+const Flex = require("../Flex/Flex.cjs.js");
+const Progress = ({
+  value,
+  size = "m",
+  label,
+  showInfo,
+  color = "violet",
+  className,
+  style,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    styles.ProgressWrapper,
+    {
+      className,
+      style,
+      role: "progressbar",
+      "aria-valuenow": value,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(Flex, { gap: 8, align: "center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(styles.ProgressStyled, { size, color, children: /* @__PURE__ */ jsxRuntime.jsx(
+            styles.ProgressBarStyled,
+            {
+              role: "progressbar",
+              color,
+              style: { width: `${value}%` }
+            }
+          ) }),
+          showInfo && /* @__PURE__ */ jsxRuntime.jsx(Text, { size, children: `${value}%` })
+        ] }),
+        label && /* @__PURE__ */ jsxRuntime.jsx(styles.ProgressLabelStyled, { size, color, children: label })
+      ]
+    }
+  );
+};
+module.exports = Progress;

package/dist/Progress/Progress.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { IProgressProps } from './types';
+declare const Progress: ({ value, size, label, showInfo, color, className, style, ...props }: IProgressProps) => React.ReactNode;
+export default Progress;

package/dist/Progress/Progress.es.js

@@ -0,0 +1,44 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { ProgressWrapper, ProgressStyled, ProgressBarStyled, ProgressLabelStyled } from "./styles.es.js";
+import Text from "../typography/Text/Text.es.js";
+import Flex from "../Flex/Flex.es.js";
+const Progress = ({
+  value,
+  size = "m",
+  label,
+  showInfo,
+  color = "violet",
+  className,
+  style,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs(
+    ProgressWrapper,
+    {
+      className,
+      style,
+      role: "progressbar",
+      "aria-valuenow": value,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(Flex, { gap: 8, align: "center", children: [
+          /* @__PURE__ */ jsx(ProgressStyled, { size, color, children: /* @__PURE__ */ jsx(
+            ProgressBarStyled,
+            {
+              role: "progressbar",
+              color,
+              style: { width: `${value}%` }
+            }
+          ) }),
+          showInfo && /* @__PURE__ */ jsx(Text, { size, children: `${value}%` })
+        ] }),
+        label && /* @__PURE__ */ jsx(ProgressLabelStyled, { size, color, children: label })
+      ]
+    }
+  );
+};
+export {
+  Progress as default
+};

package/dist/Progress/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Progress } from './Progress';
+export type { IProgressProps } from './types';