@beautinique/frontend-components 1.0.5 → 1.0.7

package/README.md

@@ -8,10 +8,10 @@ The components are styled with Tailwind classes and with the tokens (colours, sh
 ## Installation
 
 ```bash
-npm install @beautinique/frontend-components @beautinique/frontend-styles @iconify/react
+npm install @beautinique/frontend-components @beautinique/frontend-stores @beautinique/frontend-styles @iconify/react
 ```
 
-Peer dependencies: `react`, `react-dom`, `@iconify/react`, `@beautinique/frontend-styles`.
+Peer dependencies: `react`, `react-dom`, `@iconify/react`, `@beautinique/frontend-styles` and [`@beautinique/frontend-stores`](../stores/README.md) (the toasts are kept in a store that the app makes with it, see [Toasts](#toasts); that needs `zustand` in the app).
 
 ## Setup (once per app)
 
@@ -32,12 +32,12 @@ generated and the components come out unstyled. (The playground has a page that
 Components that most screens use live in `/ui` (and, later, `/layout`). Components that few screens
 use have a path of their own, so an app only bundles what it imports.
 
-| Import path                                   | What it gives                                                                                |
-| --------------------------------------------- | -------------------------------------------------------------------------------------------- |
-| `@beautinique/frontend-components`            | Everything `/ui` and `/toast` give (the very same values), and the types (`IButton`, ...)    |
-| `@beautinique/frontend-components/ui`         | `Button`, `Tooltip`                                                                          |
-| `@beautinique/frontend-components/toast`      | `ToastContainer`, `toaster`, the toast store, and the helpers for toasts that follow uploads |
-| `@beautinique/frontend-components/source.css` | The `@source` line of the setup above                                                        |
+| Import path                                   | What it gives                                                                               |
+| --------------------------------------------- | ------------------------------------------------------------------------------------------- |
+| `@beautinique/frontend-components`            | Everything `/ui` and `/toast` give (the very same values), and the types (`IButton`, ...)   |
+| `@beautinique/frontend-components/ui`         | `Button`, `Tooltip`                                                                         |
+| `@beautinique/frontend-components/toast`      | `ToastContainer`, `Toaster`, the types of the toasts, and what works out what a toast shows |
+| `@beautinique/frontend-components/source.css` | The `@source` line of the setup above                                                       |
 
 `Button` can be imported from the root or from `/ui`, it is the same component either way:
 
@@ -46,25 +46,22 @@ import { Button } from '@beautinique/frontend-components'; // or
 import { Button } from '@beautinique/frontend-components/ui';
 ```
 
-The root only re-exports, it does not copy: a toast shown with `toaster` from one path appears in the
-`ToastContainer` of the other, and an app that imports only `Button` from the root bundles the same as
-with `/ui` (the bundler leaves out what is not used).
+The root only re-exports, it does not copy: an app that imports only `Button` from the root bundles the
+same as with `/ui` (the bundler leaves out what is not used).
 
 ```tsx
-import { Button, Tooltip } from '@beautinique/frontend-components/ui';
-import { ToastContainer, toaster } from '@beautinique/frontend-components/toast';
+import { Button, Tooltip } from '@beautinique/frontend-components';
+
+import { toaster } from '@/utils/toaster'; // made in the app, see Toasts
 
 const App = () => (
-  <>
-    <ToastContainer /> {/* once, near the root of the app */}
-    <Tooltip title="Save" description="Ctrl + S">
-      <Button
-        pattern="primary"
-        content="Save"
-        buttonProps={{ onClick: () => toaster.success({ title: 'Saved' }) }}
-      />
-    </Tooltip>
-  </>
+  <Tooltip title="Save" description="Ctrl + S">
+    <Button
+      pattern="primary"
+      content="Save"
+      buttonProps={{ onClick: () => toaster.success({ title: 'Saved' }) }}
+    />
+  </Tooltip>
 );
 ```
 
@@ -115,6 +112,38 @@ const hint = (
 
 ### Toasts
 
+This package draws the toasts; the store that keeps them and the `toaster` that shows them are [`@beautinique/frontend-stores`](../stores/README.md)'s. The store is **made by the app**, once, with the toasts of this package, and given to the two things that need it: the `ToastContainer` here, as a prop, and `createToaster` of the stores package. This package holds no store and no toaster of its own, and exports none.
+
+```ts
+// src/stores/toast.store.ts
+import type { TToast } from '@beautinique/frontend-components';
+import { createToastStore } from '@beautinique/frontend-stores';
+
+export const useToastStore = createToastStore<TToast>();
+```
+
+```ts
+// src/utils/toaster.ts - the toaster and the helpers, for the rest of the app to import
+import { createToaster } from '@beautinique/frontend-stores';
+
+import { useToastStore } from '@/stores/toast.store';
+
+export const {
+  toaster,
+  withProgressToast,
+  withUploadsToast,
+  runUploadsInToast,
+  createUploadsToast,
+} = createToaster(useToastStore);
+```
+
+```tsx
+// once, near the root of the app
+import { ToastContainer } from '@beautinique/frontend-components';
+
+<ToastContainer store={useToastStore} />;
+```
+
 `toaster` works from anywhere (an API client, a store), not only from components:
 
 ```tsx
@@ -127,20 +156,15 @@ toaster.custom({ type: 'custom', children: <p>Any React content</p> });
 ```
 
 Toasts that follow uploads (`withProgressToast` for one request, `createUploadsToast`,
-`withUploadsToast` and `runUploadsInToast` for several) are described in `src/toast/uploads.ts`.
-`runUploadsInToast` shows one toast for the uploads of several fields: the overall progress on the
-left and a row (waiting, uploading, done or failed) for each field that has files.
+`withUploadsToast` and `runUploadsInToast` for several) come out of `createToaster` too, and are described in the [stores README](../stores/README.md#createtoasterstore). The toast draws what they show: the overall progress on the left and a row (waiting, uploading, done or failed) for each upload.
+
+**The store has to be one.** The container and `createToaster` must be given the same store: a toast added to a store that no container draws is never shown. Make it once (a module of the app, imported from there) and the two cannot differ. The compiler checks it: the container takes a store of this package's `TToast`, and `createToaster` takes its types from the store it is given.
 
 The icons of the toasts are bundled, so a toast shows its icon without a network.
 
 ## Rules for the code of this package
 
-- **State lives in exactly one import path.** The toast store is part of `/toast` only. A component
-  of another path that needs it must import it from `@beautinique/frontend-components/toast`, never
-  copy it: every entry is built as one file, so a copy would be a second store, and a toast shown
-  through it would never reach the `ToastContainer`. The root is such a path: its built file only
-  imports `/ui` and `/toast` (`tsup.config.ts` keeps them external, and `built-files.test.ts` checks
-  the built files after `npm run build`).
+- **The package holds no state.** The toast store is made by the app (`createToastStore` of `@beautinique/frontend-stores`, with this package's `TToast`) and given in, to the `ToastContainer` as a prop. The toaster is the stores package's too (`createToaster`). Nothing here makes a store or a toaster, or exports one, so the package can never be the cause of two stores. The root only re-exports `/ui` and `/toast` (`tsup.config.ts` keeps them external, and `built-files.test.ts` checks the built files after `npm run build`).
 - **The root has what most screens use** (`/ui`, later `/layout`, and `/toast`). A component that few
   screens use gets a path of its own and is not in the root.
 - **A component's own css lives next to the component** and is imported by it, not by the styles
@@ -153,6 +177,7 @@ The icons of the toasts are bundled, so a toast shows its icon without a network
 
 ```bash
 npm run build        # dist (needed by the playground and by the type check of the playground)
+                     # `@beautinique/frontend-stores` has to be built first (`npm run build` at the root of the repo does it in order)
 npm run playground   # http://localhost:4200 - the components, in a real browser
 npm test
 ```

package/dist/toast/ToastContainer.d.cts

@@ -1,5 +1,7 @@
 import type { IClassName } from '../types/component.js';
-import type { TToastItem } from './types.js';
-export declare const Toaster: import("react").MemoExoticComponent<(props: TToastItem & IClassName) => import("react").JSX.Element | null>;
-export declare const ToastContainer: () => import("react").JSX.Element | null;
+import type { IToastContainer, TToastItem } from './types.js';
+export declare const Toaster: import("react").MemoExoticComponent<(props: TToastItem & IClassName & {
+    onRemove?: (id: string) => void;
+}) => import("react").JSX.Element | null>;
+export declare const ToastContainer: ({ store: useToastStore }: IToastContainer) => import("react").JSX.Element | null;
 //# sourceMappingURL=ToastContainer.d.cts.map

package/dist/toast/ToastContainer.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"ToastContainer.d.cts","sourceRoot":"","sources":["../../src/toast/ToastContainer.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAIxD,OAAO,KAAK,EAAuB,UAAU,EAAqB,MAAM,YAAY,CAAC;AA4UrF,eAAO,MAAM,OAAO,8CA1JQ,UAAU,GAAG,UAAU,wCA0JX,CAAC;AAEzC,eAAO,MAAM,cAAc,0CAY1B,CAAC"}
+{"version":3,"file":"ToastContainer.d.cts","sourceRoot":"","sources":["../../src/toast/ToastContainer.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAGxD,OAAO,KAAK,EACV,eAAe,EAGf,UAAU,EAEX,MAAM,YAAY,CAAC;AA4UpB,eAAO,MAAM,OAAO,8CAzJQ,UAAU,GAAG,UAAU,GAAG;IAAE,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CAAE,wCAyJjD,CAAC;AAEzC,eAAO,MAAM,cAAc,GAAI,0BAA0B,eAAe,uCAavE,CAAC"}

package/dist/toast/ToastContainer.d.ts

@@ -1,5 +1,7 @@
 import type { IClassName } from '../types/component.js';
-import type { TToastItem } from './types.js';
-export declare const Toaster: import("react").MemoExoticComponent<(props: TToastItem & IClassName) => import("react").JSX.Element | null>;
-export declare const ToastContainer: () => import("react").JSX.Element | null;
+import type { IToastContainer, TToastItem } from './types.js';
+export declare const Toaster: import("react").MemoExoticComponent<(props: TToastItem & IClassName & {
+    onRemove?: (id: string) => void;
+}) => import("react").JSX.Element | null>;
+export declare const ToastContainer: ({ store: useToastStore }: IToastContainer) => import("react").JSX.Element | null;
 //# sourceMappingURL=ToastContainer.d.ts.map

package/dist/toast/ToastContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToastContainer.d.ts","sourceRoot":"","sources":["../../src/toast/ToastContainer.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAIxD,OAAO,KAAK,EAAuB,UAAU,EAAqB,MAAM,YAAY,CAAC;AA4UrF,eAAO,MAAM,OAAO,8CA1JQ,UAAU,GAAG,UAAU,wCA0JX,CAAC;AAEzC,eAAO,MAAM,cAAc,0CAY1B,CAAC"}
+{"version":3,"file":"ToastContainer.d.ts","sourceRoot":"","sources":["../../src/toast/ToastContainer.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAGxD,OAAO,KAAK,EACV,eAAe,EAGf,UAAU,EAEX,MAAM,YAAY,CAAC;AA4UpB,eAAO,MAAM,OAAO,8CAzJQ,UAAU,GAAG,UAAU,GAAG;IAAE,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CAAE,wCAyJjD,CAAC;AAEzC,eAAO,MAAM,cAAc,GAAI,0BAA0B,eAAe,uCAavE,CAAC"}

package/dist/toast/index.cjs

@@ -1,58 +1,11 @@
 'use strict';
 
-var nanoid = require('nanoid');
-var zustand = require('zustand');
 var react$1 = require('@iconify/react');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-
-// src/lib/constants.ts
-var TOAST_TYPES = [
-  "success",
-  "error",
-  "warning",
-  "progress",
-  "uploads",
-  "loading",
-  "default",
-  "custom"
-];
-var TOAST_TYPE = Object.fromEntries(TOAST_TYPES.map((type) => [type, type]));
-
-// src/toast/toast.store.ts
-var useToastStore = zustand.create((set) => ({
-  toasts: [],
-  add: /* @__PURE__ */ __name((toast) => {
-    const id = nanoid.nanoid();
-    set((state) => ({ toasts: [...state.toasts, { ...toast, id }] }));
-    return id;
-  }, "add"),
-  update: {
-    progress: /* @__PURE__ */ __name((id, progress) => {
-      set((state) => ({
-        toasts: state.toasts.map((toast) => toast.id === id ? { ...toast, progress } : toast)
-      }));
-    }, "progress"),
-    uploadItem: /* @__PURE__ */ __name((id, itemId, patch) => {
-      set((state) => ({
-        toasts: state.toasts.map(
-          (toast) => toast.id === id && toast.type === TOAST_TYPE.uploads ? {
-            ...toast,
-            items: toast.items.map(
-              (item) => item.id === itemId ? { ...item, ...patch } : item
-            )
-          } : toast
-        )
-      }));
-    }, "uploadItem")
-  },
-  remove: /* @__PURE__ */ __name((id) => {
-    set((state) => ({ toasts: state.toasts.filter((t) => t.id !== id) }));
-  }, "remove")
-}));
 var TOAST_ICON_SETS = [
   {
     prefix: "solar",
@@ -114,6 +67,19 @@ var TOAST_ICON_NAMES = TOAST_ICON_SETS.flatMap(
   ({ prefix, icons }) => Object.keys(icons).map((name) => `${prefix}:${name}`)
 );
 
+// src/lib/constants.ts
+var TOAST_TYPES = [
+  "success",
+  "error",
+  "warning",
+  "progress",
+  "uploads",
+  "loading",
+  "default",
+  "custom"
+];
+var TOAST_TYPE = Object.fromEntries(TOAST_TYPES.map((type) => [type, type]));
+
 // src/lib/button.ts
 var PATTERN_CSS = {
   primary: "text-white bg-sky-blue-burst shadow-primary-btn hover:shadow-primary-btn-hover",
@@ -151,52 +117,6 @@ var Button = /* @__PURE__ */ __name(({
   )
 ), "Button");
 
-// src/toast/toaster.ts
-var { add, update, remove } = useToastStore.getState();
-var toaster = {
-  success: /* @__PURE__ */ __name((data) => add({ ...data, type: TOAST_TYPE.success }), "success"),
-  error: /* @__PURE__ */ __name((data) => add({ ...data, type: TOAST_TYPE.error }), "error"),
-  warning: /* @__PURE__ */ __name((data) => add({ ...data, type: TOAST_TYPE.warning }), "warning"),
-  default: /* @__PURE__ */ __name((data) => add({ ...data, type: TOAST_TYPE.default }), "default"),
-  loading: /* @__PURE__ */ __name((data) => add({ ...data, type: TOAST_TYPE.loading }), "loading"),
-  custom: /* @__PURE__ */ __name((data) => add(data), "custom"),
-  progress: {
-    start: /* @__PURE__ */ __name((data) => add({ ...data, type: TOAST_TYPE.progress }), "start"),
-    update: /* @__PURE__ */ __name((toastId, progress) => {
-      update.progress(toastId, progress);
-    }, "update"),
-    end: /* @__PURE__ */ __name((toastId) => {
-      remove(toastId);
-    }, "end")
-  },
-  uploads: {
-    start: /* @__PURE__ */ __name((data) => add({ ...data, type: TOAST_TYPE.uploads }), "start"),
-    update: /* @__PURE__ */ __name((toastId, itemId, patch) => {
-      update.uploadItem(toastId, itemId, patch);
-    }, "update")
-  },
-  remove: /* @__PURE__ */ __name((toastId) => {
-    remove(toastId);
-  }, "remove")
-};
-var withProgressToast = /* @__PURE__ */ __name(async ({
-  title,
-  description,
-  request
-}) => {
-  const toastId = toaster.progress.start({ title, description, progress: 0 });
-  try {
-    const response = await request((event) => {
-      if (!event.total) return;
-      toaster.progress.update(toastId, Math.round(event.loaded * 100 / event.total));
-    });
-    toaster.progress.update(toastId, 100);
-    return response;
-  } finally {
-    toaster.progress.end(toastId);
-  }
-}, "withProgressToast");
-
 // src/toast/uploads.ts
 var sum = /* @__PURE__ */ __name((numbers) => numbers.reduce((total, value) => total + value, 0), "sum");
 var isUploadItemSettled = /* @__PURE__ */ __name(({ status }) => status === "success" || status === "error", "isUploadItemSettled");
@@ -246,92 +166,6 @@ var getUploadsSummary = /* @__PURE__ */ __name((items) => {
   };
 }, "getUploadsSummary");
 var getFormDataFiles = /* @__PURE__ */ __name((data, key = "files") => data.getAll(key).filter((value) => value instanceof File), "getFormDataFiles");
-var createUploadsToast = /* @__PURE__ */ __name(({
-  title,
-  description,
-  items
-}) => {
-  if (items.length === 0) return void 0;
-  const statuses = new Map(items.map(({ id }) => [id, "pending"]));
-  const toastId = toaster.uploads.start({
-    title,
-    description,
-    items: items.map(({ id, label, files }) => {
-      const fileSizes = files.map(({ size }) => size);
-      return { id, label, status: "pending", loaded: 0, total: sum(fileSizes), fileSizes };
-    })
-  });
-  const patch = /* @__PURE__ */ __name((id, changes) => {
-    if (changes.status) statuses.set(id, changes.status);
-    toaster.uploads.update(toastId, id, changes);
-  }, "patch");
-  return {
-    item: /* @__PURE__ */ __name((id) => ({
-      run: /* @__PURE__ */ __name(async (request) => {
-        patch(id, { status: "uploading" });
-        try {
-          const result = await request((event) => {
-            if (!event.total) return;
-            patch(id, { loaded: event.loaded, total: event.total });
-          });
-          patch(id, { status: "success" });
-          return result;
-        } catch (error) {
-          patch(id, { status: "error" });
-          throw error;
-        }
-      }, "run")
-    }), "item"),
-    end: /* @__PURE__ */ __name(() => {
-      for (const [id, status] of statuses) {
-        if (status === "pending" || status === "uploading") patch(id, { status: "error" });
-      }
-    }, "end")
-  };
-}, "createUploadsToast");
-var withUploadsToast = /* @__PURE__ */ __name(async ({
-  title,
-  description,
-  files,
-  request
-}) => {
-  const group = createUploadsToast({
-    title,
-    description,
-    items: files.length > 0 ? [{ id: "files", label: description ?? title, files }] : []
-  });
-  if (!group) return request(() => void 0);
-  try {
-    return await group.item("files").run(request);
-  } finally {
-    group.end();
-  }
-}, "withUploadsToast");
-var runUploadsInToast = /* @__PURE__ */ __name(async ({
-  title,
-  description,
-  uploads,
-  run
-}) => {
-  const group = createUploadsToast({
-    title,
-    description,
-    items: uploads.filter(({ files }) => files.length > 0)
-  });
-  const settled = await Promise.allSettled(uploads.map(({ id }) => run(id, group?.item(id))));
-  group?.end();
-  const results = {};
-  settled.forEach((result, index) => {
-    if (result.status === "fulfilled") results[uploads[index].id] = result.value;
-  });
-  const failure = settled.find(
-    (result) => result.status === "rejected"
-  );
-  if (failure) {
-    throw failure.reason instanceof Error ? failure.reason : new Error("Upload failed");
-  }
-  return results;
-}, "runUploadsInToast");
 registerToastIcons();
 var CircularProgress = /* @__PURE__ */ __name(({ progress, ...props }) => {
   const radius = 10;
@@ -478,9 +312,9 @@ var ToasterItem = /* @__PURE__ */ __name((props) => {
     buttonProps,
     isClosable = true,
     autoClose = true,
-    closeTimer = 5e3
+    closeTimer = 5e3,
+    onRemove
   } = props;
-  const remove2 = useToastStore((s) => s.remove);
   const [visible, setVisible] = react.useState(false);
   const [mounted, setMounted] = react.useState(true);
   const timeoutRef = react.useRef(null);
@@ -502,9 +336,9 @@ var ToasterItem = /* @__PURE__ */ __name((props) => {
     setVisible(false);
     timeoutRef.current = setTimeout(() => {
       setMounted(false);
-      remove2(props.id);
+      onRemove?.(props.id);
     }, 300);
-  }, [remove2, props.id]);
+  }, [onRemove, props.id]);
   react.useEffect(() => {
     const enterTimer = setTimeout(() => {
       setVisible(true);
@@ -590,25 +424,20 @@ var ToasterItem = /* @__PURE__ */ __name((props) => {
   );
 }, "ToasterItem");
 var Toaster = react.memo(ToasterItem);
-var ToastContainer = /* @__PURE__ */ __name(() => {
+var ToastContainer = /* @__PURE__ */ __name(({ store: useToastStore }) => {
   const toasts = useToastStore((s) => s.toasts);
+  const remove = useToastStore((s) => s.remove);
   if (toasts.length === 0) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "base:max-w-sm fixed right-2 bottom-2 z-999 flex w-full max-w-xs flex-col gap-2 sm:max-w-md md:right-4 md:bottom-4 md:max-w-lg lg:right-8 lg:bottom-8 lg:max-w-xl", children: toasts.map((toast) => /* @__PURE__ */ jsxRuntime.jsx(Toaster, { ...toast, id: toast.id }, toast.id)) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "base:max-w-sm fixed right-2 bottom-2 z-999 flex w-full max-w-xs flex-col gap-2 sm:max-w-md md:right-4 md:bottom-4 md:max-w-lg lg:right-8 lg:bottom-8 lg:max-w-xl", children: toasts.map((toast) => /* @__PURE__ */ jsxRuntime.jsx(Toaster, { ...toast, id: toast.id, onRemove: remove }, toast.id)) });
 }, "ToastContainer");
 
 exports.TOAST_ICON_NAMES = TOAST_ICON_NAMES;
 exports.ToastContainer = ToastContainer;
 exports.Toaster = Toaster;
-exports.createUploadsToast = createUploadsToast;
 exports.getFormDataFiles = getFormDataFiles;
 exports.getUploadItemFilesDone = getUploadItemFilesDone;
 exports.getUploadItemPercent = getUploadItemPercent;
 exports.getUploadsSummary = getUploadsSummary;
 exports.isUploadItemSettled = isUploadItemSettled;
-exports.runUploadsInToast = runUploadsInToast;
-exports.toaster = toaster;
-exports.useToastStore = useToastStore;
-exports.withProgressToast = withProgressToast;
-exports.withUploadsToast = withUploadsToast;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map