sitero 0.2.0 → 0.4.0

package/dist/src/cms/client/interfaces/pages/dashboard/system/storage/trash/page.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useTranslator } from 'intor/react';
+import { Trash2, CopyCheck, CopyX, FileSymlink } from 'lucide-react';
 import { useState } from 'react';
 import { toast } from 'sonner';
 import 'mime-types';
@@ -8,17 +9,16 @@ import 'sitero-domain';
 import 'ua-parser-js';
 import '../../../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
-import { useCommand } from '../../../../../../../../shared/client/react-query/use-command.js';
 import 'clsx';
 import 'tailwind-merge';
 import { ensureArray } from '../../../../../../../../shared/utils/ensure-array.js';
-import 'zod';
 import { usePickItems } from '../../../../../../applications/form/use-pick-items.js';
 import '../../../../../../../../constants/paths/redirect.js';
 import '../../../../../../../../constants/cms-locale.js';
 import 'next/navigation';
-import 'lucide-react';
-import { PageHeader } from '../../../../../components/ui/blocks/page-header/page-header.js';
+import 'zod';
+import { useCmsCommand } from '../../../../../../infrastructure/operation-result/use-cms-command.js';
+import { PageHeaderLayout } from '../../../../../components/ui/blocks/page-header/page-header-layout.js';
 import '@radix-ui/react-avatar';
 import '../../../../../components/shadcn/badge.js';
 import '../../../../../components/shadcn/button.js';
@@ -34,9 +34,15 @@ import '../../../../../components/shadcn/sidebar/sidebar.js';
 import 'next-themes';
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-tooltip';
+import { ActionButton } from '../../../../../components/ui/buttons/action-button.js';
+import 'next/link';
+import { ReturnButton } from '../../../../../components/ui/buttons/return-button.js';
+import '../../../../../components/ui/inputs/input.js';
+import '../../../../../components/ui/inputs/textarea.js';
+import '../../../../../components/ui/inputs/switch-input.js';
+import '../../../../../components/ui/inputs/password-input.js';
 import '../../../../../../infrastructure/admin-session/admin-context.js';
 import 'intor/next';
-import 'next/link';
 import { ContentContainer } from '../../../../../components/ui/layouts/content-container.js';
 
 function createTrashPage({
@@ -54,29 +60,76 @@ function createTrashPage({
       pickedItems,
       setPickedItems
     });
-    const { execute: restoreFn, isPending: isRestoring } = useCommand(
+    const { execute: restoreFn, isPending: isRestoring } = useCmsCommand(
       () => fileRestoreManyAction({
         formData: { ids: pickedItems.map((i) => i.id) }
       }),
       {
-        onSuccess: () => {
-          cancelAll();
+        onSuccess: (result) => {
+          if (!result) return;
+          setPickedItems(
+            (items) => items.filter(
+              (item) => result.failed.some((failure) => failure.id === item.id)
+            )
+          );
+          if (result.failed.length || result.skipped.length) {
+            const skippedMessages = {
+              FILE_NOT_FOUND: t("resources.file.restore-not-found.text"),
+              FILE_RESTORE_NOT_DELETED: t(
+                "resources.file.restore-not-deleted.text"
+              ),
+              FILE_RESTORE_PURGE_STARTED: t(
+                "resources.file.restore-purge-started.text"
+              )
+            };
+            const reasons = [
+              ...new Set(
+                result.skipped.map((item) => skippedMessages[item.code])
+              )
+            ];
+            const message = [
+              result.restoredIds.length > 0 && `${t("resources.file.restore-completed.text")}: ${result.restoredIds.length}`,
+              result.skipped.length > 0 && `${t("resources.file.restore-skipped.text")}: ${result.skipped.length}`,
+              result.failed.length > 0 && `${t("resources.file.restore-failed.text")}: ${result.failed.length}`,
+              ...reasons
+            ].filter(Boolean).join(" \xB7 ");
+            toast.warning(message);
+          }
+        },
+        onSettled: () => {
           void itemStates.refetch?.();
         }
       }
     );
-    const { execute: destroyFn, isPending: isDestroying } = useCommand(
+    const { execute: destroyFn, isPending: isDestroying } = useCmsCommand(
       () => filePurgeManyAction({
         formData: { ids: pickedItems.map((i) => i.id) }
       }),
       {
-        onSuccess: () => {
-          cancelAll();
+        onSuccess: (result) => {
+          if (!result) return;
+          setPickedItems(
+            (items) => items.filter(
+              (item) => result.failed.some((failure) => failure.id === item.id)
+            )
+          );
+          if (result.failed.length || result.skipped.length) {
+            const message = [
+              result.purgedIds.length > 0 && `${t("resources.file.purge-completed.text")}: ${result.purgedIds.length}`,
+              result.skipped.length > 0 && `${t("resources.file.purge-skipped.text")}: ${result.skipped.length}`,
+              result.failed.length > 0 && `${t("resources.file.purge-failed.text")}: ${result.failed.length}`
+            ].filter(Boolean).join(" \xB7 ");
+            toast.warning(message);
+          }
+        },
+        onSettled: () => {
           void itemStates.refetch?.();
         }
       }
     );
+    const isProcessing = isRestoring || isDestroying;
     const handleClick = (file) => {
+      if (isProcessing) return;
       if (file.isLocked || file.isInUse) {
         toast.error(
           t(
@@ -89,36 +142,67 @@ function createTrashPage({
     };
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
-        PageHeader,
+        PageHeaderLayout,
         {
-          variant: "trash",
+          navigation: /* @__PURE__ */ jsx(ReturnButton, { pushToParent: true }),
           titleProps: {
+            icon: Trash2,
             title: t("main.trash.text")
           },
-          restoreButtonProps: {
-            onClick: () => {
-              if (!confirm(t("ui.dialog.confirm.text"))) return;
-              void restoreFn();
-            },
-            isLoading: isRestoring,
-            isDisabled: pickedItems.length === 0
-          },
-          destroyButtonProps: {
-            onClick: () => {
-              if (!confirm(t("ui.dialog.confirm.text"))) return;
-              void destroyFn();
-            },
-            isLoading: isDestroying,
-            isDisabled: pickedItems.length === 0
-          },
-          pickAllButtonProps: {
-            onClick: pickAll,
-            isDisabled: !canPickAll
-          },
-          cancelAllButtonProps: {
-            onClick: cancelAll,
-            isDisabled: !canCancelAll
-          }
+          utilities: /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              ActionButton,
+              {
+                size: "icon",
+                variant: "outline",
+                icon: CopyCheck,
+                onClick: pickAll,
+                isDisabled: isProcessing || !canPickAll
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ActionButton,
+              {
+                size: "icon",
+                variant: "outline",
+                icon: CopyX,
+                onClick: cancelAll,
+                isDisabled: isProcessing || !canCancelAll
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ActionButton,
+              {
+                variant: "success",
+                icon: FileSymlink,
+                onClick: () => {
+                  if (!confirm(t("ui.dialog.confirm.text"))) return;
+                  void restoreFn();
+                },
+                isLoading: isRestoring,
+                isDisabled: isProcessing || pickedItems.length === 0 || pickedItems.some(
+                  (item) => files.some(
+                    (file) => file.id === item.id && !!file.purgeStartedAt
+                  )
+                ),
+                children: t("ui.restore.text")
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ActionButton,
+              {
+                variant: "destructive",
+                icon: Trash2,
+                onClick: () => {
+                  if (!confirm(t("ui.dialog.confirm.text"))) return;
+                  void destroyFn();
+                },
+                isLoading: isDestroying,
+                isDisabled: isProcessing || pickedItems.length === 0,
+                children: t("ui.purge.text")
+              }
+            )
+          ] })
         }
       ),
       /* @__PURE__ */ jsx(ContentContainer, { isFixHeight: true, children: /* @__PURE__ */ jsx(

package/dist/src/cms/client/interfaces/pages/dashboard/website/inquiry/_id_/page.js

@@ -1,25 +1,26 @@
 "use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useTranslator } from 'intor/react';
-import { Inbox } from 'lucide-react';
+import { Inbox, Trash2 } from 'lucide-react';
 import { useRouter, useParams } from 'next/navigation';
-import { CMS_PATHS } from '../../../../../../../../constants/paths/cms-paths.js';
-import '../../../../../../../../constants/paths/redirect.js';
-import { DATE_FORMAT_OPTIONS } from '../../../../../../../../constants/date.js';
-import '../../../../../../../../constants/cms-locale.js';
+import 'zod';
+import 'sonner';
 import 'react';
 import 'ua-parser-js';
 import '../../../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
 import { useCommand } from '../../../../../../../../shared/client/react-query/use-command.js';
-import { useQuery } from '../../../../../../../../shared/client/react-query/use-query.js';
-import { PageHeader } from '../../../../../components/ui/blocks/page-header/page-header.js';
+import { useCmsQuery } from '../../../../../../infrastructure/operation-result/use-cms-query.js';
+import { CMS_PATHS } from '../../../../../../../../constants/paths/cms-paths.js';
+import '../../../../../../../../constants/paths/redirect.js';
+import { DATE_FORMAT_OPTIONS } from '../../../../../../../../constants/date.js';
+import '../../../../../../../../constants/cms-locale.js';
+import { PageHeaderLayout } from '../../../../../components/ui/blocks/page-header/page-header-layout.js';
 import '@radix-ui/react-avatar';
 import 'mime-types';
 import 'sitero-domain';
 import 'clsx';
 import 'tailwind-merge';
-import 'zod';
 import '../../../../../components/shadcn/badge.js';
 import '../../../../../components/shadcn/button.js';
 import '@radix-ui/react-collapsible';
@@ -32,17 +33,22 @@ import '@radix-ui/react-select';
 import '@radix-ui/react-separator';
 import '../../../../../components/shadcn/sidebar/sidebar.js';
 import 'next-themes';
-import 'sonner';
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-tooltip';
+import { ActionButton } from '../../../../../components/ui/buttons/action-button.js';
+import 'next/link';
+import { ReturnButton } from '../../../../../components/ui/buttons/return-button.js';
 import { Field } from '../../../../../components/ui/form/field.js';
 import { FieldBody } from '../../../../../components/ui/form/field-body.js';
 import { FieldsContainer } from '../../../../../components/ui/form/containers/fields-container.js';
 import { MainFields } from '../../../../../components/ui/form/containers/main-fields.js';
 import { SideFields } from '../../../../../components/ui/form/containers/side-fields.js';
+import '../../../../../components/ui/inputs/input.js';
+import '../../../../../components/ui/inputs/textarea.js';
+import '../../../../../components/ui/inputs/switch-input.js';
+import '../../../../../components/ui/inputs/password-input.js';
 import '../../../../../../infrastructure/admin-session/admin-context.js';
 import 'intor/next';
-import 'next/link';
 import { ContentContainer } from '../../../../../components/ui/layouts/content-container.js';
 
 function createInquiryShowPage({
@@ -58,31 +64,40 @@ function createInquiryShowPage({
       data: inquiry,
       isFetching,
       isNotFound
-    } = useQuery(() => inquiryFindAction({ id }), ["inquiryFindAction", id], {
-      select: (data) => data?.inquiry
-    });
+    } = useCmsQuery(
+      () => inquiryFindAction({ id }),
+      ["inquiryFindAction", id],
+      {
+        select: (data) => data?.inquiry
+      }
+    );
     const { execute, isRedirecting } = useCommand(
       () => inquiryDeleteAction({ id }),
       { onSuccess: () => router.replace(CMS_PATHS.website.inquiry.pathname) }
     );
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
-        PageHeader,
+        PageHeaderLayout,
         {
-          variant: "show",
+          navigation: /* @__PURE__ */ jsx(ReturnButton, { pushToParent: true }),
           titleProps: {
             icon: Inbox,
             title: t("resources.inquiry.text")
           },
-          destroyButtonProps: {
-            onClick: () => {
-              if (!confirm(t("ui.dialog.confirm.text"))) return;
-              void execute();
-            },
-            isLoading: isRedirecting
-          },
-          isDisabled: isFetching,
-          isNotFound
+          actions: /* @__PURE__ */ jsx(
+            ActionButton,
+            {
+              variant: "destructive",
+              icon: Trash2,
+              onClick: () => {
+                if (!confirm(t("ui.dialog.confirm.text"))) return;
+                void execute();
+              },
+              isLoading: isRedirecting,
+              isDisabled: isFetching,
+              children: t("ui.destroy.text")
+            }
+          )
         }
       ),
       /* @__PURE__ */ jsx(ContentContainer, { isNotFound, children: /* @__PURE__ */ jsxs(FieldsContainer, { children: [

package/dist/src/cms/client/interfaces/pages/dashboard/website/inquiry/page.js

@@ -2,17 +2,19 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useTranslator } from 'intor/react';
 import { Inbox } from 'lucide-react';
-import { PageHeader } from '../../../../components/ui/blocks/page-header/page-header.js';
+import { CMS_PATHS } from '../../../../../../../constants/paths/cms-paths.js';
+import '../../../../../../../constants/paths/redirect.js';
+import '../../../../../../../constants/cms-locale.js';
+import { PageHeaderLayout } from '../../../../components/ui/blocks/page-header/page-header-layout.js';
 import 'react';
-import '@radix-ui/react-avatar';
-import 'mime-types';
-import 'sitero-domain';
 import 'ua-parser-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 '../../../../components/shadcn/badge.js';
 import '../../../../components/shadcn/button.js';
 import '@radix-ui/react-collapsible';
@@ -28,41 +30,43 @@ import 'next-themes';
 import 'sonner';
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-tooltip';
-import 'next/navigation';
-import '../../../../../../../constants/paths/redirect.js';
-import '../../../../../../../constants/cms-locale.js';
+import 'next/link';
+import { ReturnButton } from '../../../../components/ui/buttons/return-button.js';
+import '../../../../components/ui/inputs/input.js';
+import '../../../../components/ui/inputs/textarea.js';
+import '../../../../components/ui/inputs/switch-input.js';
+import '../../../../components/ui/inputs/password-input.js';
 import '../../../../../infrastructure/admin-session/admin-context.js';
 import 'intor/next';
-import 'next/link';
+import 'zod';
+import 'next/navigation';
 import { ContentContainer } from '../../../../components/ui/layouts/content-container.js';
 
 function createInquiryIndexPage({
   inquiry: staticInquiry,
-  headField,
-  bodyFields,
+  primaryField,
+  detailFields,
   InquiryList
 }) {
   return function InquiryIndexPage() {
     const { t, locale } = useTranslator();
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
-        PageHeader,
+        PageHeaderLayout,
         {
-          variant: "index",
+          navigation: /* @__PURE__ */ jsx(ReturnButton, { href: CMS_PATHS.dashboard.pathname }),
           titleProps: {
             icon: Inbox,
             title: t("resources.inquiry.text")
-          },
-          returnButtonProps: { className: "hidden" }
+          }
         }
       ),
       /* @__PURE__ */ jsx(ContentContainer, { isFixHeight: true, children: /* @__PURE__ */ jsx(
         InquiryList,
         {
-          headFields: headField ? [headField] : [],
-          headComponent: (inquiry, key) => /* @__PURE__ */ jsx(TextList, { inquiry, fieldKey: key, locale }),
-          bodyFields: bodyFields ?? [],
-          bodyComponent: (inquiry, key) => /* @__PURE__ */ jsx(TextList, { inquiry, fieldKey: key, locale })
+          primaryField,
+          detailFields: detailFields ?? [],
+          renderField: (inquiry, key) => /* @__PURE__ */ jsx(TextList, { inquiry, fieldKey: key, locale })
         }
       ) })
     ] });
@@ -79,7 +83,7 @@ function createInquiryIndexPage({
         title,
         ": "
       ] }) }),
-      /* @__PURE__ */ jsx("p", { className: "truncate", children: inquiry?.[key] ?? "-" })
+      /* @__PURE__ */ jsx("p", { className: "truncate", children: inquiry[key] ?? "-" })
     ] });
   }
 }

package/dist/src/cms/client/interfaces/pages/dashboard/website/website-config/_slug_/edit/page.js

@@ -2,20 +2,21 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useTranslator } from 'intor/react';
 import { useParams } from 'next/navigation';
+import 'zod';
+import 'sonner';
 import 'react';
 import 'ua-parser-js';
 import '../../../../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
-import { useQuery } from '../../../../../../../../../shared/client/react-query/use-query.js';
+import { useCmsQuery } from '../../../../../../../infrastructure/operation-result/use-cms-query.js';
 import { ConfigEditContent } from '../../../../../../components/resources/config/config-edit-content.js';
-import { PageHeader } from '../../../../../../components/ui/blocks/page-header/page-header.js';
+import { PageHeaderLayout } from '../../../../../../components/ui/blocks/page-header/page-header-layout.js';
 import 'lucide-react';
 import '@radix-ui/react-avatar';
 import 'mime-types';
 import 'sitero-domain';
 import 'clsx';
 import 'tailwind-merge';
-import 'zod';
 import '../../../../../../components/shadcn/badge.js';
 import '../../../../../../components/shadcn/button.js';
 import '@radix-ui/react-collapsible';
@@ -28,11 +29,16 @@ import '@radix-ui/react-select';
 import '@radix-ui/react-separator';
 import '../../../../../../components/shadcn/sidebar/sidebar.js';
 import 'next-themes';
-import 'sonner';
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-tooltip';
+import 'next/link';
+import { ReturnButton } from '../../../../../../components/ui/buttons/return-button.js';
 import '../../../../../../../../../constants/paths/redirect.js';
 import '../../../../../../../../../constants/cms-locale.js';
+import '../../../../../../components/ui/inputs/input.js';
+import '../../../../../../components/ui/inputs/textarea.js';
+import '../../../../../../components/ui/inputs/switch-input.js';
+import '../../../../../../components/ui/inputs/password-input.js';
 
 function createWebsiteConfigEditPage({
   configs: staticConfigs,
@@ -42,8 +48,7 @@ function createWebsiteConfigEditPage({
   FileList,
   FileCard,
   Uploader,
-  I18nTextarea,
-  I18nArrayInput
+  webLocales
 }) {
   return function WebsiteConfigEditPage() {
     const { locale } = useTranslator();
@@ -53,18 +58,16 @@ function createWebsiteConfigEditPage({
       data: config,
       isFetching,
       isNotFound
-    } = useQuery(
+    } = useCmsQuery(
       () => configFindDetailAction({ slug }),
       ["configFindDetailAction", slug],
-      {
-        select: (data) => data?.config
-      }
+      { select: (data) => data?.config }
     );
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
-        PageHeader,
+        PageHeaderLayout,
         {
-          variant: "edit",
+          navigation: /* @__PURE__ */ jsx(ReturnButton, { useConfirm: true, replaceParent: true }),
           titleProps: {
             icon: staticConfigs[slug]?.icon,
             title: staticConfigs[slug]?.title[locale]
@@ -80,11 +83,10 @@ function createWebsiteConfigEditPage({
           isNotFound,
           useConfigUpdateFormData,
           configUpdateAction,
-          I18nTextarea,
-          I18nArrayInput,
           FileCard,
           FileList,
-          Uploader
+          Uploader,
+          webLocales
         }
       )
     ] });

package/dist/src/cms/client/interfaces/pages/dashboard/website/website-config/_slug_/page.js

@@ -1,21 +1,22 @@
 "use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useTranslator } from 'intor/react';
-import { useParams } from 'next/navigation';
+import { Pen } from 'lucide-react';
+import { useParams, usePathname } from 'next/navigation';
+import 'zod';
+import 'sonner';
 import 'react';
 import 'ua-parser-js';
 import '../../../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
-import { useQuery } from '../../../../../../../../shared/client/react-query/use-query.js';
+import { useCmsQuery } from '../../../../../../infrastructure/operation-result/use-cms-query.js';
 import { ConfigShowContent } from '../../../../../components/resources/config/config-show-content.js';
-import { PageHeader } from '../../../../../components/ui/blocks/page-header/page-header.js';
-import 'lucide-react';
+import { PageHeaderLayout } from '../../../../../components/ui/blocks/page-header/page-header-layout.js';
 import '@radix-ui/react-avatar';
 import 'mime-types';
 import 'sitero-domain';
 import 'clsx';
 import 'tailwind-merge';
-import 'zod';
 import '../../../../../components/shadcn/badge.js';
 import '../../../../../components/shadcn/button.js';
 import '@radix-ui/react-collapsible';
@@ -28,46 +29,57 @@ import '@radix-ui/react-select';
 import '@radix-ui/react-separator';
 import '../../../../../components/shadcn/sidebar/sidebar.js';
 import 'next-themes';
-import 'sonner';
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-tooltip';
+import { LinkButton } from '../../../../../components/ui/buttons/link-button.js';
+import { ReturnButton } from '../../../../../components/ui/buttons/return-button.js';
+import 'next/link';
 import '../../../../../../../../constants/paths/redirect.js';
 import '../../../../../../../../constants/cms-locale.js';
+import '../../../../../components/ui/inputs/input.js';
+import '../../../../../components/ui/inputs/textarea.js';
+import '../../../../../components/ui/inputs/switch-input.js';
+import '../../../../../components/ui/inputs/password-input.js';
 
 function createWebsiteConfigShowPage({
   configs: staticConfigs,
   configFindDetailAction,
   FileCard,
-  I18nDisplay,
-  I18nArrayDisplay
+  webLocales
 }) {
   return function WebsiteConfigShowPage() {
-    const { locale } = useTranslator();
+    const { t, locale } = useTranslator();
     const { slug } = useParams();
+    const pathname = usePathname();
     const fields = staticConfigs[slug]?.fields;
     const {
       data: config,
       isFetching,
       isNotFound
-    } = useQuery(
+    } = useCmsQuery(
       () => configFindDetailAction({ slug }),
       ["configFindDetailAction", slug],
-      {
-        select: (data) => data?.config
-      }
+      { select: (data) => data?.config }
     );
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
-        PageHeader,
+        PageHeaderLayout,
         {
-          variant: "show",
+          navigation: /* @__PURE__ */ jsx(ReturnButton, { pushToParent: true }),
           titleProps: {
             icon: staticConfigs[slug]?.icon,
             title: staticConfigs[slug]?.title[locale]
           },
-          editButtonProps: {},
-          isDisabled: isFetching,
-          isNotFound
+          actions: /* @__PURE__ */ jsx(
+            LinkButton,
+            {
+              variant: "warning",
+              icon: Pen,
+              href: `${pathname}/edit`,
+              isDisabled: isFetching,
+              children: t("ui.edit.text")
+            }
+          )
         }
       ),
       /* @__PURE__ */ jsx(
@@ -77,9 +89,8 @@ function createWebsiteConfigShowPage({
           fields,
           isFetching,
           isNotFound,
-          I18nDisplay,
-          I18nArrayDisplay,
-          FileCard
+          FileCard,
+          webLocales
         }
       )
     ] });