feat(tiny-toast): implement preact port

.changeset/shaggy-flowers-relate.md

@@ -0,0 +1,5 @@
+---
+"@hiogawa/tiny-toast": minor
+---
+
+feat: preact port + tweak style

.changeset/tender-taxis-confess.md

@@ -0,0 +1,5 @@
+---
+"@hiogawa/tiny-transition": patch
+---
+
+fix: ensure forceStyle between from/to

package.json

@@ -27,6 +27,7 @@
     "@unocss/preset-uno": "^0.55.7",
     "@unocss/reset": "^0.55.7",
     "@vitejs/plugin-react": "^3.1.0",
+    "csstype": "^3.1.2",
     "esbuild": "^0.19.3",
     "esbuild-register": "^3.5.0",
     "happy-dom": "^11.2.0",

packages/app-solid/package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.2.9",
+    "@hiogawa/tiny-toast": "workspace:*",
     "@hiogawa/tiny-transition": "workspace:*",
     "@hiogawa/unocss-preset-antd": "workspace:*",
     "@solid-primitives/context": "^0.2.1",

packages/app-solid/src/app.tsx

@@ -58,10 +58,8 @@ function AppInner() {
           <AppNavMenu />
         </div>
         <div class="flex-1 m-4">
-          <div class="flex justify-center">
-            <div class="flex flex-col gap-4 p-4">
-              {createComponent(outlet(), {})}
-            </div>
+          <div class="flex justify-center p-4">
+            {createComponent(outlet(), {})}
           </div>
         </div>
       </div>

packages/app-solid/src/stories.tsx

@@ -1,7 +1,8 @@
 import type { Placement } from "@floating-ui/dom";
+import { PreactToastManager } from "@hiogawa/tiny-toast/dist/preact";
 import { range } from "@hiogawa/utils";
 import { Ref } from "@solid-primitives/refs";
-import { Index, Show, createSignal } from "solid-js";
+import { Index, Show, createSignal, onCleanup, onMount } from "solid-js";
 import { Drawer } from "./components/drawer";
 import { Modal } from "./components/modal";
 import { FloatingArrow, Popover } from "./components/popover";
@@ -193,3 +194,69 @@ export function StoryPopover() {
     );
   }
 }
+
+export function StoryToast() {
+  const toast = new PreactToastManager();
+  toast.defaultOptions.class = "antd-floating";
+
+  onMount(() => {
+    onCleanup(toast.render());
+  });
+
+  return (
+    <div class="flex flex-col items-center w-full max-w-2xl gap-3 p-3 border">
+      <section class="flex flex-col gap-4 w-full">
+        <h2 class="text-xl">Toast</h2>
+        <div class="flex flex-col gap-1">
+          Type
+          <div class="flex gap-2">
+            <button
+              class="flex-1 antd-btn antd-btn-default px-2"
+              onClick={() => {
+                toast.success("Successfuly toasted!");
+              }}
+            >
+              Success
+            </button>
+            <button
+              class="flex-1 antd-btn antd-btn-default px-2"
+              onClick={() => {
+                toast.error("This didn't work.");
+              }}
+            >
+              Error
+            </button>
+            <button
+              class="flex-1 antd-btn antd-btn-default px-2"
+              onClick={() => {
+                toast.info("Some info");
+              }}
+            >
+              Info
+            </button>
+            <button
+              class="flex-1 antd-btn antd-btn-default px-2"
+              onClick={() => {
+                toast.custom(({ h, toast, item }) =>
+                  h("div", { class: "flex items-center gap-2" }, [
+                    h("span", {
+                      class: "i-ri-aliens-fill text-colorWarning text-2xl",
+                    }),
+                    h("span", {}, "Custom"),
+                    h("button", {
+                      class:
+                        "antd-btn antd-btn-ghost i-ri-close-line text-colorTextSecondary text-lg",
+                      onClick: () => toast.dismiss(item.id),
+                    }),
+                  ])
+                );
+              }}
+            >
+              Custom
+            </button>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}

packages/app/src/components/stories.tsx

@@ -2,10 +2,7 @@ import { createTinyForm } from "@hiogawa/tiny-form";
 import { useTinyForm } from "@hiogawa/tiny-form/dist/react";
 import { useTinyProgress } from "@hiogawa/tiny-progress/dist/react";
 import { useTinyStoreStorage } from "@hiogawa/tiny-store/dist/react";
-import {
-  TOAST_POSITIONS,
-  type ToastPosition,
-} from "@hiogawa/tiny-toast/dist/react";
+import { TOAST_POSITIONS, type ToastPosition } from "@hiogawa/tiny-toast";
 import { Transition } from "@hiogawa/tiny-transition/dist/react";
 import { ANTD_VARS } from "@hiogawa/unocss-preset-antd";
 import { none, objectKeys, objectPickBy, range } from "@hiogawa/utils";

packages/tiny-toast/README.md

@@ -1,7 +1,8 @@
 # tiny-toast
 
-Simple toast UI system with framework-agnostic core module is separated.
+Simple framework-agnostic toast UI
 
-## example
+## examples
 
-https://unocss-preset-antd-hiro18181.vercel.app/Toast
+- https://unocss-preset-antd-hiro18181.vercel.app/Toast
+- https://unocss-preset-antd-solidjs-hiro18181.vercel.app/Toast

packages/tiny-toast/index.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>tiny-toast [dev]</title>
+    <meta
+      name="viewport"
+      content="width=device-width, height=device-height, initial-scale=1.0"
+    />
+    <link
+      rel="icon"
+      type="image/svg+xml"
+      href="https://iconify-dark-hiro18181.vercel.app/icon/ri/code-s-line"
+    />
+    <style>
+      html,
+      body,
+      #root {
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <div id="root-toast"></div>
+    <script src="./src/preact/dev.tsx" type="module"></script>
+  </body>
+</html>

packages/tiny-toast/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hiogawa/tiny-toast",
-  "version": "0.1.1-pre.1",
+  "version": "0.1.1-pre.7",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -12,9 +12,14 @@
       "types": "./dist/index.d.ts"
     },
     "./dist/react": {
-      "import": "./dist/react.js",
-      "require": "./dist/react.cjs",
-      "types": "./dist/react.d.ts"
+      "import": "./dist/react/index.js",
+      "require": "./dist/react/index.cjs",
+      "types": "./dist/react/index.d.ts"
+    },
+    "./dist/preact": {
+      "import": "./dist/preact/index.js",
+      "require": "./dist/preact/index.cjs",
+      "types": "./dist/preact/index.d.ts"
     }
   },
   "files": [
@@ -28,17 +33,17 @@
     "directory": "packages/tiny-transition"
   },
   "scripts": {
-    "build": "pnpm run --seq /^build:/",
-    "build:tsup": "tsup",
-    "build:unocss": "unocss dist/react.js dist/react.cjs --write-transformed --out-file dist/react.css",
-    "build:inject-css": "node misc/inject-css.mjs",
+    "dev": "vite --no-clearScreen",
+    "build": "tsup",
     "release": "pnpm publish --no-git-checks --access public"
   },
   "devDependencies": {
     "@hiogawa/tiny-transition": "workspace:*",
+    "@hiogawa/unocss-preset-antd": "workspace:*",
     "@hiogawa/utils": "1.6.1-pre.7",
     "@hiogawa/utils-react": "^1.3.1-pre.0",
     "@types/react": "^18.2.14",
+    "preact": "^10.15.1",
     "react": "^18.2.0"
   },
   "peerDependencies": {

packages/tiny-toast/src/common.ts

@@ -0,0 +1,107 @@
+import { tinyassert } from "@hiogawa/utils";
+import { cls, styleAssign } from "./utils";
+
+// TODO: support all 6 positions
+export const TOAST_POSITIONS = ["bottom-left", "top-center"] as const;
+
+export type ToastPosition = (typeof TOAST_POSITIONS)[number];
+
+export const TOAST_TYPES = [
+  "success",
+  "error",
+  "info",
+  "blank",
+  "custom",
+] as const;
+
+export type ToastType = (typeof TOAST_TYPES)[number];
+
+export const TOAST_TYPE_ICONS = {
+  // https://remixicon.com/icon/checkbox-circle-fill
+  success: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM11.0026 16L18.0737 8.92893L16.6595 7.51472L11.0026 13.1716L8.17421 10.3431L6.75999 11.7574L11.0026 16Z"></path></svg>`,
+  // https://remixicon.com/icon/close-circle-fill
+  error: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 10.5858L9.17157 7.75736L7.75736 9.17157L10.5858 12L7.75736 14.8284L9.17157 16.2426L12 13.4142L14.8284 16.2426L16.2426 14.8284L13.4142 12L16.2426 9.17157L14.8284 7.75736L12 10.5858Z"></path></svg>`,
+  // https://remixicon.com/icon/information-fill
+  info: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM11 11V17H13V11H11ZM11 7V9H13V7H11Z"></path></svg>`,
+};
+
+export const TOAST_TYPE_ICON_COLORS = {
+  success: `#61d345`,
+  error: `#ff4b4b`,
+  info: `#1677ff`,
+};
+
+// default animation
+export function slideScaleCollapseTransition({
+  position,
+}: {
+  position: ToastPosition;
+}) {
+  // steps
+  // - slide in + scale up + uncollapse
+  // - slide out + scale down + collapse
+  return {
+    enterFrom: (el: HTMLElement) => {
+      tinyassert(el.firstElementChild instanceof HTMLElement);
+      styleAssign(el.style, {
+        transition: "all 0.35s cubic-bezier(0, 0.8, 0.5, 1)",
+        height: "0",
+      });
+      styleAssign(el.firstElementChild.style, {
+        transition: "all 0.35s cubic-bezier(0, 0.8, 0.5, 1)",
+        opacity: "0.5",
+        transform: cls(
+          "scale(0.5)",
+          position === "bottom-left" && "translateY(200%)",
+          position === "top-center" && "translateY(-200%)"
+        ),
+      });
+    },
+    enterTo: (el: HTMLElement) => {
+      tinyassert(el.firstElementChild instanceof HTMLElement);
+      styleAssign(el.style, {
+        height: el.firstElementChild.clientHeight + "px",
+      });
+      styleAssign(el.firstElementChild.style, {
+        opacity: "1",
+        transform: "scale(1) translateY(0)",
+      });
+    },
+    entered: (el: HTMLElement) => {
+      tinyassert(el.firstElementChild instanceof HTMLElement);
+      styleAssign(el.style, {
+        transition: "",
+        height: "",
+      });
+      styleAssign(el.firstElementChild.style, {
+        transition: "",
+      });
+    },
+    leaveFrom: (el: HTMLElement) => {
+      tinyassert(el.firstElementChild instanceof HTMLElement);
+      styleAssign(el.style, {
+        transition: "all 0.25s ease",
+        height: el.firstElementChild.clientHeight + "px",
+      });
+      styleAssign(el.firstElementChild.style, {
+        transition: "all 0.25s ease",
+        opacity: "1",
+        transform: "scale(1) translateY(0)",
+      });
+    },
+    leaveTo: (el: HTMLElement) => {
+      tinyassert(el.firstElementChild instanceof HTMLElement);
+      styleAssign(el.style, {
+        height: "0",
+      });
+      styleAssign(el.firstElementChild.style, {
+        opacity: "0",
+        transform: cls(
+          "scale(0)",
+          position === "bottom-left" && "translateY(150%)",
+          position === "top-center" && "translateY(-150%)"
+        ),
+      });
+    },
+  };
+}

packages/tiny-toast/src/index.ts

@@ -1 +1,2 @@
 export * from "./core";
+export * from "./common";