sitero 0.2.0 → 0.4.0

package/dist/src/cms/client/interfaces/components/ui/blocks/list-container/list-container.js

@@ -1,17 +1,16 @@
 "use client";
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useTranslator } from 'intor/react';
 import { Grid2X2, TableOfContents } from 'lucide-react';
-import { useState, useEffect } from 'react';
-import '@radix-ui/react-avatar';
-import 'mime-types';
-import 'sitero-domain';
+import { useCallback, useSyncExternalStore } from 'react';
 import 'ua-parser-js';
+import { localStorageService } from '../../../../../../../shared/client/storage/local-storage.js';
 import '../../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
+import '@radix-ui/react-avatar';
+import 'mime-types';
+import 'sitero-domain';
 import 'clsx';
 import 'tailwind-merge';
-import 'zod';
 import '../../../shadcn/badge.js';
 import '../../../shadcn/button.js';
 import '@radix-ui/react-collapsible';
@@ -28,95 +27,102 @@ import 'sonner';
 import { Spinner } from '../../../shadcn/spinner.js';
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-tooltip';
-import { Button } from '../../buttons/button.js';
+import { ActionButton } from '../../buttons/action-button.js';
+import 'next/link';
+import 'intor/react';
 import 'next/navigation';
 import '../../../../../../../constants/paths/redirect.js';
 import '../../../../../../../constants/cms-locale.js';
+import { NoData } from '../../display/no-data.js';
+import '../../inputs/input.js';
+import '../../inputs/textarea.js';
+import '../../inputs/switch-input.js';
+import '../../inputs/password-input.js';
 import { SearchInput } from '../../inputs/search-input.js';
 import { PageSizeSelector } from './page-size-selector.js';
 import { Pagination } from './pagination.js';
 
 const DISPLAY_TYPES = ["table", "card"];
-const isDisplayType = (type) => DISPLAY_TYPES.some((t) => t === type);
+const isDisplayType = (type) => DISPLAY_TYPES.some((displayType) => displayType === type);
 function ListContainer({
-  localKey,
   setListItemStates,
-  fixedDisplayType,
-  // pagination
   page,
   setPage,
   pageSize,
   setPageSize,
   total,
-  // search string
   searchString,
   setSearchString,
-  // ui states
   isFetching,
-  // base
-  cardChildren,
-  tableChildren,
-  headerChildren
+  filters,
+  display
 }) {
-  const { t } = useTranslator();
-  const LOCAL_KEY = `stiero-cms-list-display-type-${localKey}`;
-  const [displayType, setDisplayType] = useState(() => {
-    if (fixedDisplayType) return fixedDisplayType;
-    const typeFromLocal = localStorage.getItem(LOCAL_KEY) ?? "";
-    return isDisplayType(typeFromLocal) ? typeFromLocal : "card";
-  });
-  useEffect(() => {
-    if (fixedDisplayType) return;
-    const typeFromLocal = localStorage.getItem(LOCAL_KEY) ?? "";
-    queueMicrotask(
-      () => setDisplayType(isDisplayType(typeFromLocal) ? typeFromLocal : "card")
-    );
-  }, [LOCAL_KEY, fixedDisplayType, localKey, setDisplayType]);
-  useEffect(() => {
-    setPage(1);
-  }, [searchString, setPage]);
-  function handleSetListItemStates(displayType2) {
-    setListItemStates?.((p) => ({ ...p, displayType: displayType2 }));
-  }
+  const isSwitchable = display.mode === "switchable";
+  const fixedDisplayType = display.mode === "fixed" ? display.type : void 0;
+  const displayStorageKey = isSwitchable ? `sitero-cms-list-display-type-${display.localKey}` : void 0;
+  const subscribeToDisplayType = useCallback(
+    (onStoreChange) => {
+      if (!displayStorageKey) return () => {
+      };
+      return localStorageService.subscribe(displayStorageKey, onStoreChange);
+    },
+    [displayStorageKey]
+  );
+  const getStoredDisplayType = useCallback(() => {
+    if (!displayStorageKey) return "card";
+    const storedDisplayType2 = localStorageService.get(displayStorageKey) ?? "";
+    return isDisplayType(storedDisplayType2) ? storedDisplayType2 : "card";
+  }, [displayStorageKey]);
+  const storedDisplayType = useSyncExternalStore(
+    subscribeToDisplayType,
+    getStoredDisplayType,
+    () => "card"
+  );
+  const displayType = fixedDisplayType ?? storedDisplayType;
+  const displayedContent = display.mode === "fixed" ? display.content : displayType === "card" ? display.cards : display.table;
+  const isCardDisplay = displayType === "card";
   const isNotFound = total === 0;
-  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col max-lg:gap-3 lg:gap-6", children: [
+  function setPersistedDisplayType(nextDisplayType) {
+    if (!isSwitchable || !displayStorageKey) return;
+    localStorageService.set(displayStorageKey, nextDisplayType);
+    setListItemStates?.((previous) => ({
+      ...previous,
+      displayType: nextDisplayType
+    }));
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 flex-col max-lg:gap-3 lg:gap-6", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex max-lg:flex-col max-lg:gap-3 lg:items-center lg:justify-between", children: [
-      headerChildren,
+      filters,
       /* @__PURE__ */ jsx("div", { className: "ml-auto max-lg:w-full lg:w-64", children: /* @__PURE__ */ jsx(
         SearchInput,
         {
           searchString,
-          setSearchString,
+          setSearchString: (value) => {
+            setPage(1);
+            setSearchString(value);
+          },
           isLoading: isFetching
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "max-h-[88%] flex-1 overflow-y-auto", children: isFetching ? /* @__PURE__ */ jsx(Spinner, {}) : isNotFound ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: t("ui.no-data.text") }) : /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-4", children: displayType === "card" ? cardChildren : tableChildren }) }),
+    /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-y-auto", children: isFetching ? /* @__PURE__ */ jsx(Spinner, {}) : isNotFound ? /* @__PURE__ */ jsx(NoData, {}) : isCardDisplay ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-4", children: displayedContent }) : displayedContent }),
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsx("div", { className: "flex w-52 gap-3", children: !fixedDisplayType && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "flex w-52 gap-3", children: isSwitchable && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(
-          Button,
+          ActionButton,
           {
             variant: displayType === "card" ? "outline" : "ghost",
             size: "icon",
-            onClick: () => {
-              setDisplayType("card");
-              localStorage.setItem(LOCAL_KEY, "card");
-              handleSetListItemStates("card");
-            },
+            onClick: () => setPersistedDisplayType("card"),
             children: /* @__PURE__ */ jsx(Grid2X2, {})
           }
         ),
         /* @__PURE__ */ jsx(
-          Button,
+          ActionButton,
           {
             variant: displayType === "table" ? "outline" : "ghost",
             size: "icon",
-            onClick: () => {
-              setDisplayType("table");
-              localStorage.setItem(LOCAL_KEY, "table");
-              handleSetListItemStates("table");
-            },
+            onClick: () => setPersistedDisplayType("table"),
             children: /* @__PURE__ */ jsx(TableOfContents, {})
           }
         )

package/dist/src/cms/client/interfaces/components/ui/blocks/list-container/page-size-selector.js

@@ -1,7 +1,6 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useTranslator } from 'intor/react';
-import 'lucide-react';
 import 'mime-types';
 import 'sitero-domain';
 import 'react';
@@ -10,12 +9,12 @@ import '../../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
 import 'clsx';
 import 'tailwind-merge';
-import 'zod';
 import '@radix-ui/react-avatar';
 import '../../../shadcn/badge.js';
 import '../../../shadcn/button.js';
 import '@radix-ui/react-collapsible';
 import '@radix-ui/react-dialog';
+import 'lucide-react';
 import '@radix-ui/react-dropdown-menu';
 import '../../../shadcn/input-group.js';
 import '@radix-ui/react-label';
@@ -27,10 +26,15 @@ import 'next-themes';
 import 'sonner';
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-tooltip';
+import '../../inputs/switch-input.js';
+import '../../inputs/password-input.js';
+import '../../inputs/input.js';
+import { Select, Option } from '../../inputs/select.js';
+import '../../inputs/textarea.js';
+import 'next/link';
 import 'next/navigation';
 import '../../../../../../../constants/paths/redirect.js';
 import '../../../../../../../constants/cms-locale.js';
-import { Select, Option } from '../../inputs/select.js';
 
 function PageSizeSelector({
   pageSize,

package/dist/src/cms/client/interfaces/components/ui/blocks/list-container/pagination.js

@@ -9,7 +9,6 @@ import '../../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
 import 'clsx';
 import 'tailwind-merge';
-import 'zod';
 import '../../../shadcn/badge.js';
 import '../../../shadcn/button.js';
 import '@radix-ui/react-collapsible';

package/dist/src/cms/client/interfaces/components/ui/blocks/page-header/page-header-layout.js

@@ -0,0 +1,79 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useTranslator } from 'intor/react';
+import { Ellipsis } from 'lucide-react';
+import { CMS_PAGE_HEADER_HEIGHT } from '../../../../styles/constants.js';
+import '@radix-ui/react-avatar';
+import 'mime-types';
+import 'sitero-domain';
+import 'react';
+import 'ua-parser-js';
+import '../../../../../../../shared/client/react-query/client.js';
+import '@tanstack/react-query';
+import 'clsx';
+import 'tailwind-merge';
+import '../../../shadcn/badge.js';
+import '../../../shadcn/button.js';
+import '@radix-ui/react-collapsible';
+import '@radix-ui/react-dialog';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent } from '../../../shadcn/dropdown-menu.js';
+import '../../../shadcn/input-group.js';
+import '@radix-ui/react-label';
+import '@radix-ui/react-radio-group';
+import '@radix-ui/react-select';
+import { Separator } from '../../../shadcn/separator.js';
+import '../../../shadcn/sidebar/sidebar.js';
+import 'next-themes';
+import 'sonner';
+import '@radix-ui/react-tabs';
+import '@radix-ui/react-tooltip';
+import { useIsMobile } from '../../../shadcn/sidebar/use-mobile.js';
+import { ActionButton } from '../../buttons/action-button.js';
+import 'next/link';
+import 'next/navigation';
+import '../../../../../../../constants/paths/redirect.js';
+import '../../../../../../../constants/cms-locale.js';
+import { PageHeaderTitle } from './page-header-title.js';
+
+function PageHeaderLayout({
+  navigation,
+  titleProps,
+  actions,
+  utilities
+}) {
+  const { t } = useTranslator();
+  const isMobile = useIsMobile();
+  const hasMobileMenu = Boolean(actions || utilities);
+  return /* @__PURE__ */ jsxs("div", { style: { height: CMS_PAGE_HEADER_HEIGHT }, children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative grid h-full grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-3 px-3", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-center gap-3", children: navigation }),
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center justify-center gap-3", children: [
+        /* @__PURE__ */ jsx(PageHeaderTitle, { ...titleProps }),
+        !isMobile && actions && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-3", children: actions })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "ml-auto flex min-w-0 items-center gap-3", children: [
+        !isMobile && utilities,
+        isMobile && hasMobileMenu && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+          /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(ActionButton, { variant: "outline", size: "icon-lg", children: [
+            /* @__PURE__ */ jsx(Ellipsis, {}),
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("ui.actions.text") })
+          ] }) }),
+          /* @__PURE__ */ jsxs(
+            DropdownMenuContent,
+            {
+              className: "flex w-fit min-w-0 flex-col gap-3 p-3",
+              align: "end",
+              children: [
+                actions,
+                utilities
+              ]
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Separator, {})
+  ] });
+}
+
+export { PageHeaderLayout };

package/dist/src/cms/client/interfaces/components/ui/blocks/page-header/page-header-title.js

@@ -6,14 +6,13 @@ import 'ua-parser-js';
 import '../../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
 import { cn } from '../../../../../../../shared/utils/cn.js';
-import 'zod';
 
 function PageHeaderTitle({
   icon,
   title,
   subtitle,
-  children,
   leftChildren,
+  rightChildren,
   className
 }) {
   return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-3", className), children: [
@@ -23,7 +22,7 @@ function PageHeaderTitle({
       subtitle && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: subtitle }),
       /* @__PURE__ */ jsx("p", { className: "scroll-m-20 text-xl font-semibold tracking-tight", children: title })
     ] }),
-    children
+    rightChildren
   ] });
 }
 

package/dist/src/cms/client/interfaces/components/ui/buttons/action-button.js

@@ -0,0 +1,72 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { createElement } from 'react';
+import 'mime-types';
+import 'sitero-domain';
+import 'ua-parser-js';
+import '../../../../../../shared/client/react-query/client.js';
+import '@tanstack/react-query';
+import { cn } from '../../../../../../shared/utils/cn.js';
+import '@radix-ui/react-avatar';
+import '../../shadcn/badge.js';
+import { Button } from '../../shadcn/button.js';
+import '@radix-ui/react-collapsible';
+import '@radix-ui/react-dialog';
+import 'lucide-react';
+import '@radix-ui/react-dropdown-menu';
+import '../../shadcn/input-group.js';
+import '@radix-ui/react-label';
+import '@radix-ui/react-radio-group';
+import '@radix-ui/react-select';
+import '@radix-ui/react-separator';
+import '../../shadcn/sidebar/sidebar.js';
+import 'next-themes';
+import 'sonner';
+import { Spinner } from '../../shadcn/spinner.js';
+import '@radix-ui/react-tabs';
+import '@radix-ui/react-tooltip';
+
+function ActionButton({
+  icon,
+  isDisabled = false,
+  isLoading = false,
+  disabled = false,
+  children,
+  className,
+  type = "button",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      ...props,
+      className: cn("relative", className),
+      type,
+      disabled: disabled || isDisabled || isLoading,
+      "aria-busy": isLoading || void 0,
+      children: [
+        icon && createElement(icon, { className: cn(isLoading && "opacity-0") }),
+        children != null && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "inline-flex items-center gap-[inherit]",
+              isLoading && "opacity-0"
+            ),
+            children
+          }
+        ),
+        isLoading && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "pointer-events-none absolute inset-0 flex items-center justify-center",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx(Spinner, { "aria-hidden": "true" })
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { ActionButton };

package/dist/src/cms/client/interfaces/components/ui/buttons/copy-button.js

@@ -1,75 +1,81 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { CheckIcon, CopyIcon } from 'lucide-react';
-import { useState, useRef, useEffect, useCallback } from 'react';
-import { Button } from './button.js';
+import { useTranslator } from 'intor/react';
+import { CheckIcon, CircleAlertIcon, CopyIcon } from 'lucide-react';
+import { useState, useRef, useEffect } from 'react';
+import { ActionButton } from './action-button.js';
 
 function CopyButton({
   content,
   delay = 1e3,
   onClick,
-  onCopy,
-  isCopied,
-  onCopyChange,
+  onCopySuccess,
+  onCopyError,
+  isLoading = false,
+  size = "icon",
+  "aria-label": ariaLabel,
+  title,
   ...props
 }) {
-  const [localIsCopied, setLocalIsCopied] = useState(isCopied ?? false);
+  const { t } = useTranslator();
+  const [isCopying, setIsCopying] = useState(false);
+  const [result, setResult] = useState(null);
+  const pendingRef = useRef(false);
+  const mountedRef = useRef(false);
   const timeoutRef = useRef(null);
-  const Icon = localIsCopied ? CheckIcon : CopyIcon;
-  useEffect(() => {
-    queueMicrotask(() => setLocalIsCopied(isCopied ?? false));
-  }, [isCopied]);
+  const currentResult = result?.content === content ? result : null;
+  const isCopied = currentResult?.success === true;
+  const hasFailed = currentResult?.success === false;
+  const label = isCopied ? t("ui.copy.success.text") : hasFailed ? t("ui.copy.error.text") : t("ui.copy.text");
   useEffect(() => {
+    mountedRef.current = true;
     return () => {
-      if (timeoutRef.current) {
-        window.clearTimeout(timeoutRef.current);
-      }
+      mountedRef.current = false;
+      if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);
     };
   }, []);
-  const handleIsCopied = useCallback(
-    (nextIsCopied) => {
-      setLocalIsCopied(nextIsCopied);
-      onCopyChange?.(nextIsCopied);
-    },
-    [onCopyChange]
-  );
-  const handleCopy = useCallback(
-    (e) => {
-      if (localIsCopied || isCopied) {
-        return;
+  const handleCopy = async (event) => {
+    onClick?.(event);
+    if (event.defaultPrevented || pendingRef.current || isCopied) return;
+    pendingRef.current = true;
+    setIsCopying(true);
+    setResult(null);
+    if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);
+    try {
+      await navigator.clipboard.writeText(content);
+    } catch (error) {
+      if (mountedRef.current) {
+        setResult({ content, success: false });
+        onCopyError?.(error);
       }
-      if (content) {
-        const shouldCopy = onCopy?.(content);
-        if (shouldCopy === false) {
-          onClick?.(e);
-          return;
-        }
-        navigator.clipboard.writeText(content).then(() => {
-          handleIsCopied(true);
-          if (timeoutRef.current) {
-            window.clearTimeout(timeoutRef.current);
-          }
-          timeoutRef.current = window.setTimeout(() => {
-            handleIsCopied(false);
-            timeoutRef.current = null;
-          }, delay);
-        }).catch((error) => {
-          console.error("Error copying command", error);
-        });
+      return;
+    } finally {
+      pendingRef.current = false;
+      if (mountedRef.current) setIsCopying(false);
+    }
+    if (!mountedRef.current) return;
+    setResult({ content, success: true });
+    timeoutRef.current = setTimeout(() => {
+      setResult(null);
+      timeoutRef.current = null;
+    }, delay);
+    onCopySuccess?.(content);
+  };
+  return /* @__PURE__ */ jsx(
+    ActionButton,
+    {
+      ...props,
+      type: "button",
+      size,
+      icon: isCopied ? CheckIcon : hasFailed ? CircleAlertIcon : CopyIcon,
+      "aria-label": ariaLabel ?? label,
+      title: title ?? label,
+      isLoading: isLoading || isCopying,
+      onClick: (event) => {
+        void handleCopy(event);
       }
-      onClick?.(e);
-    },
-    [localIsCopied, isCopied, content, delay, onClick, onCopy, handleIsCopied]
+    }
   );
-  return /* @__PURE__ */ jsx(Button, { onClick: handleCopy, ...props, children: /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: "inline-flex items-center justify-center transition-transform duration-150",
-      "data-slot": "copy-button-icon",
-      children: /* @__PURE__ */ jsx(Icon, {})
-    },
-    localIsCopied ? "check" : "copy"
-  ) });
 }
 
 export { CopyButton };

package/dist/src/cms/client/interfaces/components/ui/buttons/external-link-button.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsxs } from 'react/jsx-runtime';
+import { createElement } from 'react';
+import 'mime-types';
+import 'sitero-domain';
+import 'ua-parser-js';
+import '../../../../../../shared/client/react-query/client.js';
+import '@tanstack/react-query';
+import { cn } from '../../../../../../shared/utils/cn.js';
+import '@radix-ui/react-avatar';
+import '../../shadcn/badge.js';
+import { buttonVariants } from '../../shadcn/button.js';
+import '@radix-ui/react-collapsible';
+import '@radix-ui/react-dialog';
+import 'lucide-react';
+import '@radix-ui/react-dropdown-menu';
+import '../../shadcn/input-group.js';
+import '@radix-ui/react-label';
+import '@radix-ui/react-radio-group';
+import '@radix-ui/react-select';
+import '@radix-ui/react-separator';
+import '../../shadcn/sidebar/sidebar.js';
+import 'next-themes';
+import 'sonner';
+import '@radix-ui/react-tabs';
+import '@radix-ui/react-tooltip';
+
+function ExternalLinkButton({
+  icon,
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      ...props,
+      className: cn(buttonVariants({ variant, size, className })),
+      target: "_blank",
+      rel: "noopener noreferrer",
+      children: [
+        icon && createElement(icon),
+        children
+      ]
+    }
+  );
+}
+
+export { ExternalLinkButton };