react-miui 0.32.3 → 0.34.0

package/src/components/ui/toaster/Toaster.stories.tsx

@@ -4,59 +4,189 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { Div } from "../../native";
 import { Button } from "../button/Button";
-import { useToaster } from "./Toaster";
+import { toast, useToaster } from "./Toaster";
+
+const docs = [
+    "Toast notifications powered by [sonner](https://sonner.emilkowal.ski).",
+    "",
+    "## Setup",
+    "",
+    "Wrap your app (typically once, near the root) with `ToasterProvider`.",
+    "It mounts sonner's `<Toaster />` and renders children unchanged:",
+    "",
+    "```tsx",
+    "import { ToasterProvider } from \"react-miui\";",
+    "",
+    "export const App = () => (",
+    "    <ToasterProvider position={\"bottom-center\"} richColors>",
+    "        <YourApp />",
+    "    </ToasterProvider>",
+    ");",
+    "```",
+    "",
+    "`ToasterProvider` accepts every prop sonner's `<Toaster />` accepts",
+    "(`position`, `theme`, `richColors`, `expand`, `closeButton`, `duration`, …).",
+    "",
+    "## Triggering toasts",
+    "",
+    "```tsx",
+    "// 1. Legacy hook — back-compat. (text, timeout?) => id",
+    "const notify = useToaster();",
+    "notify(\"Saved!\", 3000);",
+    "",
+    "// 2. Sonner's `toast` re-exported — full API surface.",
+    "toast.success(\"Saved!\");",
+    "toast.error(\"Failed\", { description: \"Try again\" });",
+    "toast.promise(saveAsync(), { loading: \"…\", success: \"ok\", error: \"x\" });",
+    "```",
+].join("\n");
 
 const meta: Meta = {
     title: "Components/UI/Toaster",
     tags: ["autodocs", "ui"],
+    parameters: { docs: { description: { component: docs } } },
     argTypes: {
-        text: {
-            control: {
-                type: "text",
-            },
-        },
-        time: {
-            control: {
-                type: "number",
-                step: 100,
-            },
-        },
+        text: { control: { type: "text" } },
+        time: { control: { type: "number", step: 100 } },
     },
 };
 
 type Story = StoryObj;
 
 const Primary: Story = {
-    args: {
-        text: "",
-        time: 5000,
-    },
+    name: "useToaster hook (legacy API)",
+    args: { text: "Lorem ipsum dolor sit amet", time: 5000 },
     render: (args) => {
-        const toast = useToaster();
+        const notify = useToaster();
         const { text, time } = args as { text: string; time: number };
+        const handleClick = () => { notify(text || "Lorem ipsum dolor sit amet", time); };
+
+        return (
+            <Div css={{ minHeight: 200 }}>
+                <Button onClick={handleClick}>Show toast</Button>
+            </Div>
+        );
+    },
+};
+
+const Variants: Story = {
+    name: "Variants (success / error / info / warning)",
+    render: () => (
+        <Div css={{ display: "flex", gap: 8, flexWrap: "wrap", minHeight: 200 }}>
+            <Button onClick={() => { toast("Default toast"); }}>Default</Button>
+            <Button onClick={() => { toast.success("Profile saved"); }}>Success</Button>
+            <Button onClick={() => { toast.error("Couldn't save profile"); }}>Error</Button>
+            <Button onClick={() => { toast.info("New version available"); }}>Info</Button>
+            <Button onClick={() => { toast.warning("Storage almost full"); }}>Warning</Button>
+            <Button onClick={() => { toast.message("Plain message"); }}>Message</Button>
+        </Div>
+    ),
+};
 
+const WithDescription: Story = {
+    name: "With description",
+    render: () => {
         const handleClick = () => {
-            toast(text || "Lorem ipsum dolor sit amet", time);
+            toast.success("File uploaded", { description: "report.pdf · 2.3 MB" });
         };
+        return (
+            <Div css={{ minHeight: 200 }}>
+                <Button onClick={handleClick}>Toast with description</Button>
+            </Div>
+        );
+    },
+};
 
+const WithAction: Story = {
+    name: "With action button",
+    render: () => {
+        const handleClick = () => {
+            toast("Event has been created", {
+                // eslint-disable-next-line no-console
+                action: { label: "Undo", onClick: () => { console.log("Undo"); } },
+            });
+        };
         return (
-            <Div css={{ height: 400 }}>
-                {/* <Input placeholder={"Fill in text to display"} onChange={e => { setText(e.target.value); }} /> */}
-                {/* <Input */}
-                {/*    placeholder={"Time to display in ms"} */}
-                {/*    step={100} */}
-                {/*    type={"number"} */}
-                {/*    onChange={e => { setTime(e.target.value); }} */}
-                {/*    value={time} */}
-                {/*/ > */}
-                <Button onClick={handleClick}>Show toast</Button>
+            <Div css={{ minHeight: 200 }}>
+                <Button onClick={handleClick}>Toast with action</Button>
+            </Div>
+        );
+    },
+};
+
+const fakeSave = () => new globalThis.Promise<{ name: string }>((resolve, reject) => {
+    setTimeout(() => {
+        if (Math.random() > 0.3) {
+            resolve({ name: "settings.json" });
+        }
+        else {
+            reject(new Error("Network error"));
+        }
+    }, 1500);
+});
+
+const PromiseBased: Story = {
+    name: "Promise-based",
+    render: () => {
+        const handleClick = () => {
+            toast.promise(fakeSave(), {
+                loading: "Saving…",
+                success: (data) => `${data.name} saved`,
+                error: (err: Error) => err.message,
+            });
+        };
+        return (
+            <Div css={{ minHeight: 200 }}>
+                <Button onClick={handleClick}>Run promise toast</Button>
+            </Div>
+        );
+    },
+};
+
+const Loading: Story = {
+    name: "Manual loading + dismiss",
+    render: () => {
+        const handleClick = () => {
+            const id = toast.loading("Working on it…");
+            setTimeout(() => { toast.success("All done!", { id }); }, 2000);
+        };
+        return (
+            <Div css={{ minHeight: 200 }}>
+                <Button onClick={handleClick}>Show loading</Button>
             </Div>
         );
     },
 };
 
-export {
-    Primary,
+const CustomDuration: Story = {
+    name: "Custom duration",
+    render: () => (
+        <Div css={{ display: "flex", gap: 8, minHeight: 200 }}>
+            <Button onClick={() => { toast("Gone in 1s", { duration: 1000 }); }}>1 second</Button>
+            <Button onClick={() => { toast("Sticks 10s", { duration: 10000 }); }}>10 seconds</Button>
+            <Button onClick={() => { toast("Sticky", { duration: Infinity }); }}>Sticky</Button>
+        </Div>
+    ),
 };
 
+const DismissAll: Story = {
+    name: "Stack & dismiss all",
+    render: () => {
+        const handleShowThree = () => {
+            toast("First");
+            toast("Second");
+            toast("Third");
+        };
+        const handleDismiss = () => { toast.dismiss(); };
+        return (
+            <Div css={{ display: "flex", gap: 8, minHeight: 200 }}>
+                <Button onClick={handleShowThree}>Show three</Button>
+                <Button onClick={handleDismiss}>Dismiss all</Button>
+            </Div>
+        );
+    },
+};
+
+export { Primary, Variants, WithDescription, WithAction, PromiseBased, Loading, CustomDuration, DismissAll };
+
 export default meta;

package/src/components/ui/toaster/Toaster.tsx

@@ -1,105 +1,39 @@
-import React, { createContext, useContext } from "react";
+import React, { useCallback, useEffect, useState } from "react";
+import { createPortal } from "react-dom";
 
-import type { Toast } from "./types";
+import { toast, Toaster as SonnerToaster } from "sonner";
 
-// eslint-disable-next-line @typescript-eslint/no-shadow
-import { Notification } from "./Notification";
+type SonnerToasterProps = React.ComponentProps<typeof SonnerToaster>;
 
-type ToasterFn = (text: string, timeout?: number) => void;
-
-const ToasterContext = createContext<ToasterFn>(() => {
-    throw new Error("Toaster Provider missing in the tree");
-});
-ToasterContext.displayName = "ToasterContext";
-
-const prefix = `${Date.now()}_`;
-let counter = 0;
-
-interface Props {
-    children: React.ReactNode;
+interface ToasterProviderProps extends SonnerToasterProps {
+    children?: React.ReactNode;
 }
-interface State {
-    list: Toast[];
-}
-
-const DEFAULT_TIMEOUT = 5000;
-
-class ToasterProvider extends React.Component<Props, State> {
-    public constructor(props: Props, context: unknown) {
-        super(props, context);
 
-        this.state = {
-            list: [],
-        };
-    }
+const ToasterProvider: React.FC<ToasterProviderProps> = ({ children, position = "bottom-center", ...rest }) => {
+    const [body, setBody] = useState<HTMLElement | null>(null);
 
-    private readonly _add = (text: string, timeout = DEFAULT_TIMEOUT) => {
-        this._removeAllToasts();
+    useEffect(() => {
+        // eslint-disable-next-line react-hooks/set-state-in-effect
+        setBody(document.body);
+    }, []);
 
-        const id = prefix + String(counter++);
-        const hide = false;
+    const toaster = <SonnerToaster position={position} {...rest} />;
 
-        this.setState(prev => ({
-            ...prev,
-            list: [...prev.list, {
-                id,
-                text,
-                hide,
-            }],
-        }));
+    return (
+        <>
+            {children}
+            {body ? createPortal(toaster, body) : null}
+        </>
+    );
+};
 
-        setTimeout(() => {
-            this.setState(prev => ({
-                ...prev,
-                list: prev.list.map(p => {
-                    if (p.id !== id) {
-                        return p;
-                    }
-                    return {
-                        ...p,
-                        hide: true,
-                    };
-                }),
-            }));
-        }, timeout);
-    };
-
-    private readonly _handleRemove = (id: Toast["id"]) => {
-        this.setState(prev => ({
-            ...prev,
-            list: prev.list.filter(p => p.id !== id),
-        }));
-    };
-
-    private readonly _removeAllToasts = () => {
-        this.setState(prev => ({
-            ...prev,
-            list: prev.list.map(p => {
-                if (p.hide) {
-                    return p;
-                }
-                return {
-                    ...p,
-                    hide: true,
-                };
-            }),
-        }));
-    };
-
-    public override render() {
-        const notifications = this.state.list.map((t) => {
-            return <Notification onRemove={this._handleRemove} key={t.id} toast={t} />;
-        });
-
-        return (
-            <ToasterContext.Provider value={this._add}>
-                {notifications}
-                {this.props.children}
-            </ToasterContext.Provider>
-        );
-    }
-}
+type ToasterFn = (text: string, timeout?: number) => string | number;
 
-const useToaster = () => useContext(ToasterContext);
+const useToaster = (): ToasterFn => {
+    return useCallback((text, timeout) => {
+        return toast(text, timeout != null ? { duration: timeout } : undefined);
+    }, []);
+};
 
-export { ToasterProvider, useToaster };
+export { ToasterProvider, useToaster, toast };
+export type { ToasterProviderProps };

package/src/components/ui/tooltip/Tooltip.stories.tsx

@@ -0,0 +1,285 @@
+/* eslint-disable max-lines */
+import React, { useCallback, useState } from "react";
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { Gap } from "../../utils/Gap";
+import { Button } from "../button/Button";
+import { Drawer } from "../drawer/Drawer";
+import { Modal } from "../modal/Modal";
+import { ModalButtons } from "../modal/ModalButtons";
+import { Tooltip, TooltipProvider } from "./Tooltip";
+
+const meta: Meta<typeof Tooltip> = {
+    title: "Components/UI/Tooltip",
+    component: Tooltip,
+    tags: ["autodocs", "ui"],
+    argTypes: {
+        side: {
+            control: "inline-radio",
+            options: ["top", "right", "bottom", "left"],
+        },
+        align: {
+            control: "inline-radio",
+            options: ["start", "center", "end"],
+        },
+        sideOffset: { control: { type: "number", min: 0, max: 40 } },
+        alignOffset: { control: { type: "number", min: -40, max: 40 } },
+        delayDuration: { control: { type: "number", min: 0, max: 2000, step: 100 } },
+        avoidCollisions: { type: "boolean" },
+        arrow: { type: "boolean" },
+        content: { control: "text" },
+        children: { table: { disable: true } },
+        open: { table: { disable: true } },
+        defaultOpen: { table: { disable: true } },
+        onOpenChange: { table: { disable: true } },
+    },
+};
+
+type Story = StoryObj<typeof Tooltip>;
+
+/**
+ * Playground. Tweak `side`, `align`, `sideOffset`, `delayDuration`, `arrow`,
+ * and `avoidCollisions` from the controls panel.
+ */
+const Primary: Story = {
+    args: {
+        content: "Save your changes",
+        side: "top",
+        align: "center",
+        sideOffset: 6,
+        alignOffset: 0,
+        delayDuration: 500,
+        avoidCollisions: true,
+        arrow: true,
+    },
+    render: (args) => (
+        <div style={{ padding: 80, display: "flex", justifyContent: "center" }}>
+            <Tooltip {...args}>
+                <Button>Hover me</Button>
+            </Tooltip>
+        </div>
+    ),
+};
+
+/**
+ * All four sides shown at once.
+ */
+const AllSides: Story = {
+    render: () => (
+        <div
+            style={{
+                padding: 120,
+                display: "grid",
+                gridTemplateColumns: "repeat(2, max-content)",
+                gap: 40,
+                justifyContent: "center",
+            }}
+        >
+            <Tooltip content={"Top"} side={"top"} arrow={true}>
+                <Button>Top</Button>
+            </Tooltip>
+            <Tooltip content={"Right"} side={"right"} arrow={true}>
+                <Button>Right</Button>
+            </Tooltip>
+            <Tooltip content={"Bottom"} side={"bottom"} arrow={true}>
+                <Button>Bottom</Button>
+            </Tooltip>
+            <Tooltip content={"Left"} side={"left"} arrow={true}>
+                <Button>Left</Button>
+            </Tooltip>
+        </div>
+    ),
+};
+
+/**
+ * `TooltipProvider` enables group-delay behavior: once any tooltip is open, the next ones
+ * appear without waiting for `delayDuration` (until `skipDelayDuration` elapses with all
+ * tooltips closed). Hover one button slowly, then sweep across the rest — they pop instantly.
+ */
+const GroupDelay: Story = {
+    render: () => (
+        <TooltipProvider delayDuration={500} skipDelayDuration={400}>
+            <div style={{ padding: 80, display: "flex", gap: 12, justifyContent: "center" }}>
+                <Tooltip content={"First"}>
+                    <Button>One</Button>
+                </Tooltip>
+                <Tooltip content={"Second"}>
+                    <Button>Two</Button>
+                </Tooltip>
+                <Tooltip content={"Third"}>
+                    <Button>Three</Button>
+                </Tooltip>
+                <Tooltip content={"Fourth"}>
+                    <Button>Four</Button>
+                </Tooltip>
+            </div>
+        </TooltipProvider>
+    ),
+};
+
+/**
+ * Triggers placed near viewport edges. With `avoidCollisions` (default) the tooltip
+ * flips to fit; toggle the arg in the playground story to see the difference.
+ */
+const NearViewportEdge: Story = {
+    render: () => (
+        <div style={{ height: "90vh", position: "relative" }}>
+            <div style={{ position: "absolute", top: 4, left: 4 }}>
+                <Tooltip content={"I would overflow up-left, so I flip"} side={"top"} arrow={true}>
+                    <Button>Top-left corner</Button>
+                </Tooltip>
+            </div>
+            <div style={{ position: "absolute", top: 4, right: 4 }}>
+                <Tooltip content={"I would overflow up-right, so I flip"} side={"top"} arrow={true}>
+                    <Button>Top-right corner</Button>
+                </Tooltip>
+            </div>
+            <div style={{ position: "absolute", bottom: 4, left: 4 }}>
+                <Tooltip content={"I would overflow down-left"} side={"bottom"} arrow={true}>
+                    <Button>Bottom-left corner</Button>
+                </Tooltip>
+            </div>
+            <div style={{ position: "absolute", bottom: 4, right: 4 }}>
+                <Tooltip content={"I would overflow down-right"} side={"bottom"} arrow={true}>
+                    <Button>Bottom-right corner</Button>
+                </Tooltip>
+            </div>
+        </div>
+    ),
+};
+
+/**
+ * Long content wraps to the configured `maxWidth`.
+ */
+const LongContent: Story = {
+    render: () => (
+        <div style={{ padding: 80, display: "flex", justifyContent: "center" }}>
+            <Tooltip
+                content={"This tooltip has a longer description that wraps onto multiple lines once it "
+                    + "exceeds the maximum content width set in the styles."}
+                side={"bottom"}
+            >
+                <Button>Long description</Button>
+            </Tooltip>
+        </div>
+    ),
+};
+
+/**
+ * Edge case: tooltip rendered from inside a `Modal`. Because the content is portalled to
+ * `document.body`, it escapes the modal's stacking context and renders above it.
+ */
+const InModal: Story = {
+    render: () => {
+        const [open, setOpen] = useState(false);
+
+        const handleOpen = useCallback(() => { setOpen(true); }, []);
+        const handleClose = useCallback(() => { setOpen(false); }, []);
+
+        return (
+            <div>
+                <Button onClick={handleOpen}>Open modal</Button>
+                <Modal isOpen={open} onClose={handleClose} title={"Tooltip in a modal"}>
+                    <Gap>
+                        <div>Hover the buttons below — the tooltip should appear above the modal.</div>
+                        <div style={{ display: "flex", gap: 12 }}>
+                            <Tooltip content={"Above modal, side=top"} side={"top"} arrow={true}>
+                                <Button>Top</Button>
+                            </Tooltip>
+                            <Tooltip content={"Above modal, side=right"} side={"right"} arrow={true}>
+                                <Button>Right</Button>
+                            </Tooltip>
+                            <Tooltip content={"Above modal, side=bottom"} side={"bottom"} arrow={true}>
+                                <Button>Bottom</Button>
+                            </Tooltip>
+                        </div>
+                    </Gap>
+                    <ModalButtons>
+                        <ModalButtons.Button variant={"main"} onClick={handleClose}>Close</ModalButtons.Button>
+                    </ModalButtons>
+                </Modal>
+            </div>
+        );
+    },
+};
+
+/**
+ * Edge case: tooltip rendered from inside a `Drawer`. Same portal behavior — content
+ * floats above the drawer regardless of the drawer's stacking context.
+ */
+const InDrawer: Story = {
+    render: () => {
+        const [open, setOpen] = useState(false);
+
+        const handleOpen = useCallback(() => { setOpen(true); }, []);
+        const handleClose = useCallback(() => { setOpen(false); }, []);
+
+        return (
+            <div>
+                <Button onClick={handleOpen}>Open drawer</Button>
+                <Drawer isOpen={open} onClose={handleClose}>
+                    <div style={{ padding: 24, display: "flex", flexDirection: "column", gap: 16 }}>
+                        <div>Tooltips work from inside a drawer.</div>
+                        <Tooltip content={"Hello from inside the drawer"} side={"bottom"} arrow={true}>
+                            <Button>Hover me</Button>
+                        </Tooltip>
+                        <Button onClick={handleClose}>Close drawer</Button>
+                    </div>
+                </Drawer>
+            </div>
+        );
+    },
+};
+
+/**
+ * Controlled tooltip — open state is driven by parent. Useful for tutorials,
+ * onboarding tours, or pinning a tooltip open while a user interacts elsewhere.
+ */
+const Controlled: Story = {
+    render: () => {
+        const [open, setOpen] = useState(false);
+
+        const handleToggle = useCallback(() => { setOpen(p => !p); }, []);
+
+        return (
+            <div style={{ padding: 80, display: "flex", gap: 16, justifyContent: "center" }}>
+                <Button onClick={handleToggle}>{open ? "Hide" : "Show"} tooltip</Button>
+                <Tooltip content={"I'm controlled"} open={open} side={"right"}>
+                    <Button>Target</Button>
+                </Tooltip>
+            </div>
+        );
+    },
+};
+
+/**
+ * Tooltip wrapping a non-button trigger. Any element that can receive a ref works
+ * — here, an inline word with a dotted underline.
+ */
+const InlineTrigger: Story = {
+    render: () => (
+        <div style={{ padding: 80, fontSize: 18, lineHeight: 1.6, maxWidth: 500, margin: "0 auto" }}>
+            This sentence contains a{" "}
+            <Tooltip content={"A short, contextual explanation."}>
+                <span style={{ borderBottom: "1px dotted currentColor", cursor: "help" }}>
+                    glossed term
+                </span>
+            </Tooltip>
+            {" "}that reveals more on hover or focus.
+        </div>
+    ),
+};
+
+export default meta;
+export {
+    Primary,
+    AllSides,
+    GroupDelay,
+    NearViewportEdge,
+    LongContent,
+    InModal,
+    InDrawer,
+    Controlled,
+    InlineTrigger,
+};

package/src/components/ui/tooltip/Tooltip.styled.ts

@@ -0,0 +1,36 @@
+import * as RadixTooltip from "@radix-ui/react-tooltip";
+
+import { dimensionsPxToRem, fontPxToRem, keyframes, pxToRem, styled } from "../../../theme";
+
+const fadeIn = keyframes({
+    from: { opacity: 0, transform: "scale(0.96)" },
+    to: { opacity: 1, transform: "scale(1)" },
+});
+
+const StyledContent = styled(RadixTooltip.Content, {
+    "zIndex": 10,
+    "background": "$text2",
+    "color": "$background",
+    "padding": `${dimensionsPxToRem(18)} ${dimensionsPxToRem(36)}`,
+    "borderRadius": dimensionsPxToRem(12),
+    "fontSize": fontPxToRem(24),
+    "lineHeight": 1.3,
+    "maxWidth": pxToRem(280),
+    "boxShadow": `0 ${pxToRem(2)} ${pxToRem(8)} rgba(0, 0, 0, 0.18)`,
+    "userSelect": "none",
+    "transformOrigin": "var(--radix-tooltip-content-transform-origin)",
+    "animation": `${fadeIn.toString()} 120ms ease-out`,
+
+    "&[data-state=\"closed\"]": {
+        animationDirection: "reverse",
+    },
+});
+
+const StyledArrow = styled(RadixTooltip.Arrow, {
+    fill: "$text2",
+});
+
+export {
+    StyledContent,
+    StyledArrow,
+};