pentatrion-design 0.0.10 → 0.0.12

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 0.0.12
+fix notificationsConsumer pointer event none
+
+## 0.0.11
+
+add input/button color
+fix notificationsProvider pointer event none
+
 ## 0.0.10
 
 add textarea

package/components/input/Color.stories.tsx

@@ -0,0 +1,18 @@
+import { Meta } from "@storybook/react";
+import { Color } from "./Color";
+
+const meta = {
+  title: "Components/Input/Color",
+  component: Color,
+} satisfies Meta<typeof Color>;
+export default meta;
+
+export const Basic = () => {
+  return (
+    <div className="flex flex-col items-start gap-2">
+      <Color value="#fecdba" />
+      <Color value="#fecdba" label="300" />
+      <Color value="#fecdba" showValue={true} />
+    </div>
+  );
+};

package/components/input/Color.tsx

@@ -0,0 +1,61 @@
+import { ComponentProps, forwardRef, useImperativeHandle, useRef } from "react";
+import type { ThemeColor } from "../../types.d";
+import clsx from "clsx";
+import { useRipple } from "../../hooks";
+
+export interface ColorProps extends ComponentProps<"button"> {
+  withRipple?: boolean;
+
+  value?: string;
+  color?: ThemeColor;
+  label?: string;
+  showValue?: boolean;
+  className?: string;
+}
+
+export const Color = forwardRef<HTMLButtonElement, ColorProps>(
+  (
+    {
+      value,
+      withRipple = true,
+      color = "yellow",
+      label,
+      showValue = false,
+      className,
+      ...rest
+    },
+    ref,
+  ) => {
+    const valueToShow = label ?? (showValue ? value : null);
+
+    const buttonRef = useRef<HTMLButtonElement>(null);
+
+    useImperativeHandle<HTMLButtonElement | null, HTMLButtonElement | null>(
+      ref,
+      () => buttonRef.current,
+    );
+
+    const ripples = useRipple(buttonRef);
+
+    return (
+      <button
+        ref={buttonRef}
+        data-color={color}
+        className="p8n-input-text relative flex h-8 overflow-clip rounded-2xl p-1 outline-offset-[-1px]"
+        {...rest}
+      >
+        {withRipple && ripples}
+        <span
+          className={clsx(
+            "flex items-center justify-center rounded-2xl px-2",
+            valueToShow === null && "min-w-12",
+            className,
+          )}
+          style={{ backgroundColor: value }}
+        >
+          {valueToShow}
+        </span>
+      </button>
+    );
+  },
+);

package/components/input/index.ts

@@ -3,3 +3,4 @@ export { Checkbox } from "./Checkbox";
 export { RadioGroup, Radio } from "./RadioGroup";
 export { Toggle } from "./Toggle";
 export { Range } from "./Range";
+export { Color } from "./Color";

package/components/notification/Notification.stories.tsx

@@ -46,6 +46,11 @@ export const Context = () => {
       <Button onClick={handleClick}>Show info notification</Button>
       <Button onClick={throwError}>Throw custom error</Button>
       <Button onClick={handle404Error}>Throw 404 fetch error</Button>
+      <div className="mt-96">
+        <a href="#" className="link">
+          link
+        </a>
+      </div>
     </div>
   );
 };

package/components/notification/NotificationsProvider.tsx

@@ -25,6 +25,7 @@ export function NotificationsProvider({ children }: Props) {
       "left-0",
       "right-0",
       "z-notification",
+      "pointer-events-none",
     );
     document.body.append(container.current);
   }

package/components/snack/Snack.tsx

@@ -32,7 +32,10 @@ export function Snack({
 
   return (
     <Dialog
-      className={clsx("motion-safe:animate-fade-in", "ll-snack")}
+      className={clsx(
+        "pointer-events-auto motion-safe:animate-fade-in",
+        "ll-snack",
+      )}
       placement="top"
       color={color}
     >

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pentatrion-design",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "description": "",
   "keywords": [],
   "author": "Hugues Tavernier",

package/redux/notification/NotificationConsumer.tsx

@@ -15,7 +15,14 @@ export function NotificationConsumer({ children }: Props) {
   if (!container.current) {
     container.current = document.createElement("div");
     container.current.id = nanoid();
-    container.current.classList.add("fixed", "bottom-0", "left-0", "right-0", "z-notification");
+    container.current.classList.add(
+      "fixed",
+      "bottom-0",
+      "left-0",
+      "right-0",
+      "z-notification",
+      "pointer-events-none",
+    );
     document.body.append(container.current);
   }
 
@@ -36,7 +43,7 @@ export function NotificationConsumer({ children }: Props) {
     <>
       {children}
       {createPortal(
-        <div className="mb-4 flex flex-col gap-4 items-center">
+        <div className="mb-4 flex flex-col items-center gap-4">
           {messages.map((message) => (
             <Snack
               key={message.id}

package/components/notification/NotificationsProvider-ssr.tsx

@@ -1,73 +0,0 @@
-import { ReactNode, useEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-import {
-  NotificationsContext,
-  createNotificationsManager,
-  type NotificationsManager,
-} from "./NotificationsContext";
-import { Snack } from "../snack";
-import { Message } from "../../types.d";
-
-interface Props {
-  children: ReactNode;
-}
-
-export function NotificationsProvider({ children }: Props) {
-  const [notifications, setNotifications] = useState<Message[]>([]);
-  const container = useRef<HTMLDivElement>(null!);
-  const [isMounted, setIsMounted] = useState(false);
-
-  useEffect(() => {
-    if (!container.current) {
-      container.current = document.createElement("div");
-      container.current.id = Math.floor(Math.random() * 100000).toString();
-      /* .ll-snack-bar */
-      container.current.classList.add(
-        "fixed",
-        "bottom-0",
-        "left-0",
-        "right-0",
-        "z-notification",
-      );
-      document.body.append(container.current);
-    }
-    setIsMounted(true);
-    return () => {
-      container.current && container.current.remove();
-    };
-  }, []);
-
-  const managerRef = useRef<NotificationsManager>();
-
-  if (typeof window === "undefined") {
-    return null;
-  }
-
-  if (!managerRef.current) {
-    managerRef.current = createNotificationsManager(setNotifications);
-  }
-
-  const manager = managerRef.current;
-
-  return (
-    <>
-      <NotificationsContext.Provider value={manager}>
-        {children}
-      </NotificationsContext.Provider>
-      {isMounted &&
-        createPortal(
-          /* snack-bar-inner */
-          <div className="mx-4 mb-4 flex flex-col items-center gap-4">
-            {notifications.map((props) => (
-              <Snack
-                {...props}
-                key={props.id}
-                onRemove={() => manager.removeNotification(props.id)}
-              />
-            ))}
-          </div>,
-          container.current,
-        )}
-    </>
-  );
-}