pentatrion-design 0.0.1

package/dist/redux/index.d.ts

@@ -0,0 +1,43 @@
+import { M as Message, T as ThemeColor, a as MessageOptions } from '../types.d-DlHa_IaW.js';
+import * as _reduxjs_toolkit from '@reduxjs/toolkit';
+import { Middleware } from '@reduxjs/toolkit';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type NotificationState = {
+    messages: Message[];
+};
+declare const _default: _reduxjs_toolkit.Reducer<NotificationState>;
+
+declare const messageAdded: _reduxjs_toolkit.ActionCreatorWithPreparedPayload<[content: string, options?: Partial<Omit<Message, "message" | "id">> | undefined], {
+    id: string;
+    content: string;
+    expiration: number;
+    color: ThemeColor;
+    canClose: boolean;
+    withLoader: boolean;
+}, "notification/messageAdded", never, never>;
+declare const messageRemoved: _reduxjs_toolkit.ActionCreatorWithPayload<string, "notification/messageRemoved">;
+declare const errorAdded: _reduxjs_toolkit.ActionCreatorWithPreparedPayload<[err: any], {
+    id: string;
+    content: string;
+    expiration: number;
+    color: ThemeColor;
+    canClose: boolean;
+    withLoader: boolean;
+}, "notification/errorAdded", never, never>;
+declare const selectMessages: (state: any) => Message[];
+
+declare const errorCatcherMiddleware: Middleware;
+
+interface Props {
+    children: ReactNode;
+}
+declare function NotificationConsumer({ children }: Props): react_jsx_runtime.JSX.Element;
+
+declare function useNotification(): {
+    notify: (content: string, options?: MessageOptions) => void;
+    notifyError: (err: unknown) => void;
+};
+
+export { NotificationConsumer, errorAdded, errorCatcherMiddleware, messageAdded, messageRemoved, _default as notificationSlice, selectMessages, useNotification };

package/dist/redux/index.js

@@ -0,0 +1,583 @@
+// src/redux/notification/notificationSlice.ts
+import { createSlice, nanoid } from "@reduxjs/toolkit";
+
+// src/lib/error.ts
+function isErrorLike(err) {
+  if (err instanceof Error) {
+    return true;
+  } else if (err.name !== void 0 && err.message !== void 0) {
+    return true;
+  }
+  return false;
+}
+function parseError(err) {
+  if (isErrorLike(err)) {
+    return [err.message || "An error occured", { color: "red" }];
+  }
+  return null;
+}
+
+// src/redux/notification/notificationSlice.ts
+var initialState = {
+  messages: []
+};
+var notificationSlice = createSlice({
+  name: "notification",
+  initialState,
+  reducers: {
+    errorAdded: {
+      reducer(state, action) {
+        state.messages.push(action.payload);
+      },
+      prepare(err) {
+        const errorMessage = parseError(err);
+        if (errorMessage) {
+          const [content, options] = errorMessage;
+          const {
+            expiration = 5e3,
+            color = "red",
+            canClose = true,
+            withLoader = false
+          } = options || {};
+          const id = nanoid();
+          return {
+            payload: { id, content, expiration, color, canClose, withLoader }
+          };
+        } else {
+          throw err;
+        }
+      }
+    },
+    messageAdded: {
+      reducer(state, action) {
+        state.messages.push(action.payload);
+      },
+      prepare(content, options) {
+        const {
+          expiration = 5e3,
+          color = "yellow",
+          canClose = true,
+          withLoader = false
+        } = options || {};
+        const id = nanoid();
+        return {
+          payload: { id, content, expiration, color, canClose, withLoader }
+        };
+      }
+    },
+    messageRemoved(state, action) {
+      const messageId = action.payload;
+      state.messages = state.messages.filter((m) => m.id !== messageId);
+    }
+  }
+});
+var notificationSlice_default = notificationSlice.reducer;
+var { messageAdded, messageRemoved, errorAdded } = notificationSlice.actions;
+var selectMessages = (state) => state.notification.messages;
+
+// src/redux/notification/errorCatcherMiddleware.ts
+var errorCatcherMiddleware = ({ dispatch }) => (next) => async (action) => {
+  if (typeof action !== "function" && action.type.endsWith("/rejected")) {
+    const errorMessage = parseError(action.error || {});
+    if (errorMessage) {
+      dispatch(messageAdded(...errorMessage));
+    }
+  }
+  return next(action);
+};
+
+// src/redux/notification/components/NotificationConsumer.tsx
+import { useEffect as useEffect9, useRef as useRef8 } from "react";
+import { createPortal } from "react-dom";
+import { useDispatch, useSelector } from "react-redux";
+import { nanoid as nanoid2 } from "@reduxjs/toolkit";
+
+// src/components/snack/Snack.tsx
+import clsx5 from "clsx";
+import { useEffect as useEffect8 } from "react";
+
+// src/components/button/Button.tsx
+import { forwardRef, useImperativeHandle, useRef as useRef7 } from "react";
+import clsx2 from "clsx";
+
+// src/components/loader/Loader.tsx
+import { useId } from "react";
+import clsx from "clsx";
+
+// src/lib/tailwindVariants.ts
+var colorVariants = {
+  yellow: {
+    border: "border-yellow-3",
+    text: "text-yellow-4"
+  },
+  gray: {
+    border: "border-gray-3",
+    text: "text-gray-4"
+  },
+  red: {
+    border: "border-red-3",
+    text: "text-red-4"
+  },
+  orange: {
+    border: "border-orange-3",
+    text: "text-orange-4"
+  },
+  green: {
+    border: "border-green-3",
+    text: "text-green-4"
+  },
+  blue: {
+    border: "border-blue-3",
+    text: "text-blue-4"
+  }
+};
+
+// src/components/loader/Loader.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var sizeConfig = {
+  small: "w-6 h-6 text-base",
+  medium: "w-8 h-8 text-[2rem]",
+  large: "w-12 h-12 text-[3rem]"
+};
+var trackStyle = {
+  strokeLinecap: "round",
+  strokeWidth: 2
+};
+var circleStyle = {
+  strokeLinecap: "round",
+  strokeWidth: 2,
+  /**
+   * $total-length: 43.699; // total length of path, calculated by getTotalLength() in JS
+   * $looping-percent: 40;
+   * $looping-length: math.div($looping-percent * $total-length, 100) = 17.464;
+   * stroke-dasharray: #{$looping-length * 1px}, #{($total-length - $looping-length) * 1px};
+   */
+  strokeDasharray: "17.45px, 26.21px"
+};
+function Loader({ size = "medium", color = "blue", className, ...rest }) {
+  const id = useId();
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      className: clsx("inline-block", sizeConfig[size], colorVariants[color].text, className),
+      viewBox: "0 0 16 16",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("circle", { id, cx: "8", cy: "8", r: "7" }) }),
+        /* @__PURE__ */ jsx("use", { href: `#${id}`, className: "opacity-25 fill-none stroke-current", style: trackStyle }),
+        /* @__PURE__ */ jsx(
+          "use",
+          {
+            href: `#${id}`,
+            className: "fill-none stroke-current animate-loader-stroke",
+            style: circleStyle
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/hooks/useNotifications.tsx
+import { useContext } from "react";
+
+// src/components/notification/NotificationsContext.ts
+import { createContext } from "react";
+var NotificationsContext = createContext(
+  null
+);
+
+// src/hooks/useRipple.tsx
+import { useEffect, useState } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var useRipple = (ref) => {
+  const [ripples, setRipples] = useState([]);
+  useEffect(() => {
+    const handlePointerDown = (e) => {
+      if (ref.current) {
+        const elem = ref.current;
+        const rect = elem.getBoundingClientRect();
+        const left = (e.clientX ?? 0) - rect.left;
+        const top = (e.clientY ?? 0) - rect.top;
+        const height = elem.clientHeight;
+        const width = elem.clientWidth;
+        const diameter = Math.max(width, height);
+        setRipples((r) => [
+          ...r,
+          {
+            top: top - diameter / 2,
+            left: left - diameter / 2,
+            height: Math.max(width, height),
+            width: Math.max(width, height)
+          }
+        ]);
+      }
+    };
+    if (ref.current) {
+      const elem = ref.current;
+      elem.addEventListener("pointerdown", handlePointerDown);
+      return () => {
+        elem.removeEventListener("pointerdown", handlePointerDown);
+      };
+    }
+  }, [ref]);
+  const [_debounced] = useDebounce(ripples, 1e3);
+  useEffect(() => {
+    if (_debounced.length) {
+      setRipples([]);
+    }
+  }, [_debounced]);
+  return ripples?.map((style, i) => {
+    return /* @__PURE__ */ jsx2(
+      "span",
+      {
+        "data-testid": "ripple",
+        className: "animate-ripple",
+        style: {
+          ...style,
+          //should be absolutely positioned
+          position: "absolute",
+          backgroundColor: "#FFFFFF",
+          opacity: "25%",
+          transform: "scale(0)",
+          borderRadius: "50%"
+        }
+      },
+      i
+    );
+  });
+};
+
+// src/hooks/useIsMounted.tsx
+import { useCallback, useEffect as useEffect2, useRef } from "react";
+
+// src/hooks/useFetch.tsx
+import { useCallback as useCallback2 } from "react";
+
+// src/hooks/useCombinedRefs.ts
+import { useCallback as useCallback3 } from "react";
+
+// src/hooks/useIsClosing.ts
+import { useCallback as useCallback4, useEffect as useEffect3, useRef as useRef2, useState as useState2 } from "react";
+
+// src/hooks/usePrevious.ts
+import { useEffect as useEffect4, useRef as useRef3 } from "react";
+
+// src/hooks/useEventCallback.ts
+import { useCallback as useCallback5, useRef as useRef4 } from "react";
+function useEventCallback(callback) {
+  const ref = useRef4(() => {
+    throw new Error("Cannot call an event handler while rendering.");
+  });
+  ref.current = callback;
+  return useCallback5((...args) => ref.current?.(...args), [ref]);
+}
+
+// src/hooks/useDebounce.ts
+import {
+  useCallback as useCallback6,
+  useEffect as useEffect5,
+  useRef as useRef5,
+  useState as useState3
+} from "react";
+function useDebounce(value, delay) {
+  const [debouncedValue, setImmediateValue] = useState3(value);
+  useEffect5(() => {
+    const timer = setTimeout(() => setImmediateValue(value), delay || 500);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+  return [debouncedValue, setImmediateValue];
+}
+
+// src/hooks/useCopyToClipboard.ts
+import { useCallback as useCallback7, useState as useState4 } from "react";
+
+// src/hooks/useEventListener.ts
+import { useEffect as useEffect7, useRef as useRef6 } from "react";
+
+// src/hooks/useIsomorphicLayoutEffect.ts
+import { useEffect as useEffect6, useLayoutEffect } from "react";
+
+// src/components/button/Button.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var buttonVariants = {
+  size(icon, size) {
+    if (size === "custom") {
+      return false;
+    }
+    switch (size) {
+      case "small":
+        return clsx2(!icon && "px-2", "text-sm h-6");
+      case "medium":
+        return !icon && "px-4 h-8";
+      case "large":
+        return !icon && "px-8 h-12";
+    }
+  },
+  variant: {
+    contained(color) {
+      return clsx2(
+        "shadow hover:shadow-md focus:shadow-md active-full:shadow-lg outline-offset-0",
+        {
+          yellow: "text-yellow-text bg-yellow-3 hover:bg-yellow-4 active-full:bg-yellow-5 focus-visible:outline-yellow-5",
+          gray: "text-gray-text bg-gray-3 hover:bg-gray-4 active-full:bg-gray-5 focus-visible:outline-gray-5",
+          red: "text-red-text bg-red-3 hover:bg-red-4 active-full:bg-red-5 focus-visible:outline-red-5",
+          orange: "text-orange-text bg-orange-3 hover:bg-orange-4 active-full:bg-orange-5 focus-visible:outline-orange-5",
+          green: "text-green-text bg-green-3 hover:bg-green-4 active-full:bg-green-5 focus-visible:outline-green-5",
+          blue: "text-blue-text bg-blue-3 hover:bg-blue-4 active-full:bg-blue-5 focus-visible:outline-blue-5"
+        }[color]
+      );
+    },
+    light(color) {
+      return clsx2(
+        "shadow hover:shadow-md focus:shadow-md active-full:shadow-lg outline-offset-0 bg-gray-0",
+        {
+          yellow: "text-gray-text hover:text-yellow-text hover:bg-yellow-3 active-full:bg-yellow-4 dark:active-full:bg-yellow-4/50 focus-visible:outline-yellow-4",
+          gray: "text-gray-text hover:text-gray-text hover:bg-gray-3 active-full:bg-gray-4 dark:active-full:bg-gray-4/50 focus-visible:outline-gray-4",
+          red: "text-gray-text hover:text-red-text hover:bg-red-3 active-full:bg-red-4 dark:active-full:bg-red-4/50 focus-visible:outline-red-4",
+          orange: "text-gray-text hover:text-orange-text hover:bg-orange-3 active-full:bg-orange-4 dark:active-full:bg-orange-4/50 focus-visible:outline-orange-4",
+          green: "text-gray-text hover:text-green-text hover:bg-green-3 active-full:bg-green-4 dark:active-full:bg-green-4/50 focus-visible:outline-green-4",
+          blue: "text-gray-text hover:text-blue-text hover:bg-blue-3 active-full:bg-blue-4 dark:active-full:bg-blue-4/50 focus-visible:outline-blue-4"
+        }[color]
+      );
+    },
+    outlined(color) {
+      return clsx2(
+        "bg-gray-0 text-gray-7 outline outline-2 outline-offset-[-2px] focus-visible:ring-2 active-full:shadow-md",
+        {
+          yellow: "hover:bg-yellow-1/50 active-full:bg-yellow-2/50 outline-yellow-5 focus-visible:ring-yellow-4",
+          gray: "hover:bg-gray-1 active-full:bg-gray-2 outline-gray-5 focus-visible:ring-gray-4",
+          red: "hover:bg-red-1/50 active-full:bg-red-2/50 outline-red-5 focus-visible:ring-red-4",
+          orange: "hover:bg-orange-1/50 active-full:bg-orange-2/50 outline-orange-5 focus-visible:ring-orange-4",
+          green: "hover:bg-green-1/50 active-full:bg-green-2/50 outline-green-5 focus-visible:ring-green-4",
+          blue: "hover:bg-blue-1/50 active-full:bg-blue-2/50 outline-blue-5 focus-visible:ring-blue-4"
+        }[color]
+      );
+    },
+    text(color) {
+      return clsx2(
+        "bg-transparent active-full:shadow-sm outline-offset-0",
+        {
+          yellow: "hover:bg-yellow-1/50 active-full:bg-yellow-2/25 text-yellow-4 hover:text-yellow-5",
+          gray: "hover:bg-gray-1 active-full:bg-gray-2 text-gray-5 hover:text-gray-6 active-full:text-gray-7",
+          red: "hover:bg-red-1/50 active-full:bg-red-2/50 text-red-4 hover:text-red-5",
+          orange: "hover:bg-orange-1/50 active-full:bg-orange-2/50 text-orange-4 hover:text-orange-5",
+          green: "hover:bg-green-1/50 active-full:bg-green-2/50 text-green-4 hover:text-green-5",
+          blue: "hover:bg-blue-1/50 active-full:bg-blue-2/50 text-blue-4 hover:text-blue-5"
+        }[color]
+      );
+    },
+    ghost(color) {
+      return clsx2(
+        "bg-transparent outline-offset-0",
+        {
+          yellow: "text-yellow-4 hover:text-yellow-5",
+          gray: "text-gray-5 hover:text-gray-6 active-full:text-gray-7",
+          red: "text-red-4 hover:text-red-5",
+          orange: "text-orange-4 hover:text-orange-5",
+          green: "text-green-4 hover:text-green-5",
+          blue: "text-blue-4 hover:text-blue-5"
+        }[color]
+      );
+    }
+  }
+};
+var Button = forwardRef(
+  ({
+    withRipple = true,
+    variant = "contained",
+    loading,
+    color = "yellow",
+    size = "medium",
+    focusable = true,
+    fullWidth,
+    className,
+    disabled,
+    children,
+    selected = false,
+    icon = false,
+    ...props
+  }, ref) => {
+    const inputRef = useRef7(null);
+    useImperativeHandle(
+      ref,
+      () => inputRef.current
+    );
+    const notClickable = loading || disabled;
+    const ripples = useRipple(inputRef);
+    return /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        tabIndex: focusable ? 0 : -1,
+        role: "button",
+        ref: inputRef,
+        className: clsx2(
+          "rounded-2xl cursor-pointer relative overflow-clip focus-visible:outline focus-visible:outline-2 no-underline border-0 inline-flex items-center transition-color-shadow duration-300 leading-5",
+          className,
+          buttonVariants.size(icon, size),
+          buttonVariants.variant[variant](color),
+          icon && "justify-center min-w-8 h-8 [&_i]:w-8 [&_:last-child:not(i,img)]:pr-4",
+          fullWidth && "w-full",
+          selected && "active",
+          notClickable && "disabled"
+        ),
+        "data-variant": variant,
+        disabled,
+        "aria-busy": loading,
+        ...props,
+        children: [
+          !notClickable && withRipple && ripples,
+          children,
+          loading !== void 0 && /* @__PURE__ */ jsx3("span", { className: "", children: /* @__PURE__ */ jsx3(
+            Loader,
+            {
+              color,
+              size: "small",
+              className: clsx2("ml-2 -mr-2", !loading && "invisible")
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+var Button_default = Button;
+
+// src/components/button/ButtonGroup.tsx
+import clsx3 from "clsx";
+import { jsx as jsx4 } from "react/jsx-runtime";
+
+// src/components/dialog/Dialog.tsx
+import clsx4 from "clsx";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var dialogVariants = {
+  color(color) {
+    if (!color) {
+      return "bg-gray-0";
+    }
+    return clsx4(
+      "border-t-4",
+      {
+        yellow: "border-t-yellow-3 bg-gray-0",
+        gray: "border-t-gray-3 bg-gray-0",
+        red: "border-t-red-3 bg-red-1",
+        blue: "border-t-blue-3 bg-blue-1",
+        green: "border-t-green-3 bg-green-1",
+        orange: "border-t-orange-3 bg-orange-1"
+      }[color]
+    );
+  }
+};
+function Dialog({ placement, color, children, className, ...rest }) {
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      className: clsx4(
+        "rounded-2xl relative shadow dark:shadow-dark",
+        dialogVariants.color(color),
+        className
+      ),
+      "data-placement": placement,
+      "data-color": color,
+      ...rest,
+      children
+    }
+  );
+}
+
+// src/components/snack/Snack.tsx
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+function Snack({
+  expiration = 5e3,
+  content = "",
+  color = "yellow",
+  withLoader = false,
+  canClose = false,
+  onRemove = () => {
+  }
+}) {
+  const onRemoveStable = useEventCallback(onRemove);
+  useEffect8(() => {
+    if (expiration === -1) {
+      return;
+    }
+    const timeoutId = setTimeout(() => onRemoveStable(), expiration);
+    return () => void clearTimeout(timeoutId);
+  }, [onRemoveStable, expiration]);
+  return /* @__PURE__ */ jsx6(Dialog, { className: clsx5("animate-fade-in", "ll-snack"), placement: "top", color, children: /* @__PURE__ */ jsxs3("div", { className: "w-fit min-w-60 px-2 py-1 flex items-center", children: [
+    /* @__PURE__ */ jsx6("span", { className: "pr-4 flex-1", children: content }),
+    withLoader && /* @__PURE__ */ jsx6(Loader, { size: "small", color: "gray" }),
+    canClose && /* @__PURE__ */ jsx6(Button_default, { icon: true, variant: "text", color: "gray", onClick: onRemove, children: /* @__PURE__ */ jsx6("i", { className: "fe-cancel" }) })
+  ] }) });
+}
+
+// src/redux/notification/components/NotificationConsumer.tsx
+import { Fragment, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+function NotificationConsumer({ children }) {
+  const container = useRef8(null);
+  if (!container.current) {
+    container.current = document.createElement("div");
+    container.current.id = nanoid2();
+    container.current.classList.add("ll-snack-bar");
+    document.body.append(container.current);
+  }
+  if (!container.current.parentElement) {
+    console.log("NotificationConsumer n'a pas de parent !!", container);
+    document.body.append(container.current);
+  }
+  useEffect9(() => {
+    return () => {
+      container.current && container.current.remove();
+    };
+  }, []);
+  const messages = useSelector(selectMessages);
+  const dispatch = useDispatch();
+  return /* @__PURE__ */ jsxs4(Fragment, { children: [
+    children,
+    createPortal(
+      /* @__PURE__ */ jsx7("div", { className: "snack-bar-inner", children: messages.map((message) => /* @__PURE__ */ jsx7(
+        Snack,
+        {
+          ...message,
+          onRemove: () => dispatch(messageRemoved(message.id))
+        },
+        message.id
+      )) }),
+      container.current
+    )
+  ] });
+}
+
+// src/redux/notification/hooks/useNotification.ts
+import { useDispatch as useDispatch2 } from "react-redux";
+function useNotification() {
+  const dispatch = useDispatch2();
+  const notify = (content, options) => {
+    dispatch(messageAdded(content, options));
+  };
+  const notifyError = (err) => {
+    const errorMessage = parseError(err);
+    if (errorMessage) {
+      dispatch(messageAdded(...errorMessage));
+    } else {
+      throw err;
+    }
+  };
+  return {
+    notify,
+    notifyError
+  };
+}
+export {
+  NotificationConsumer,
+  errorAdded,
+  errorCatcherMiddleware,
+  messageAdded,
+  messageRemoved,
+  notificationSlice_default as notificationSlice,
+  selectMessages,
+  useNotification
+};

package/dist/types.d-DlHa_IaW.d.ts

@@ -0,0 +1,14 @@
+type ThemeColor = "yellow" | "gray" | "red" | "orange" | "green" | "blue";
+
+type MessageOptions = Partial<Omit<Message, "message" | "id">>;
+
+interface Message {
+  id: string;
+  content: string;
+  expiration: number; // in ms. if -1 never expire
+  color: ThemeColor;
+  canClose: boolean;
+  withLoader: boolean;
+}
+
+export type { Message as M, ThemeColor as T, MessageOptions as a };