feat(List): support custom empty views

Author: mfal

packages/components/src/components/List/List.tsx

@@ -27,7 +27,7 @@ import { type PropsContext, PropsContextProvider } from "@/lib/propsContext";
 import { deepFilterByType, deepFindOfType } from "@/lib/react/deepFindOfType";
 import DivView from "@/views/DivView";
 import { TunnelExit, TunnelProvider } from "@mittwald/react-tunnel";
-import type { PropsWithChildren } from "react";
+import type { PropsWithChildren, ReactNode } from "react";
 import Footer from "./components/Footer";
 import styles from "./List.module.css";
 import { listContext } from "./listContext";
@@ -50,6 +50,8 @@ export interface ListProps<T, TMeta = unknown>
   /** The number of items to be displayed on one page. */
   batchSize?: number;
   hidePagination?: boolean;
+  emptySearchResultView?: ReactNode;
+  emptyView?: ReactNode;
 }
 
 export const List = flowComponent("List", (props) => {

packages/components/src/components/List/components/EmptySearchResultView/EmptySearchResultView.tsx

@@ -0,0 +1,23 @@
+import type { FC } from "react";
+import { IconSearch } from "@/components/Icon/components/icons";
+import locales from "../../locales/*.locale.json";
+import { useLocalizedStringFormatter } from "react-aria";
+import IllustratedMessageView from "@/views/IllustratedMessageView";
+import HeadingView from "@/views/HeadingView";
+import TextView from "@/views/TextView";
+
+export type EmptySearchResultViewProps = Record<string, never>;
+
+export const EmptySearchResultView: FC<EmptySearchResultViewProps> = () => {
+  const stringFormatter = useLocalizedStringFormatter(locales);
+
+  return (
+    <IllustratedMessageView>
+      <IconSearch />
+      <HeadingView>
+        {stringFormatter.format("list.noResult.heading")}
+      </HeadingView>
+      <TextView>{stringFormatter.format("list.noResult.text")}</TextView>
+    </IllustratedMessageView>
+  );
+};

packages/components/src/components/List/components/EmptySearchResultView/index.ts

@@ -0,0 +1 @@
+export * from "./EmptySearchResultView";

packages/components/src/components/List/components/EmptyView/EmptyView.tsx

@@ -0,0 +1,23 @@
+import type { FC } from "react";
+import locales from "../../locales/*.locale.json";
+import { useLocalizedStringFormatter } from "react-aria";
+import IllustratedMessageView from "@/views/IllustratedMessageView";
+import HeadingView from "@/views/HeadingView";
+import TextView from "@/views/TextView";
+import { IconClose } from "@/components/Icon/components/icons";
+
+export type EmptyViewProps = Record<string, never>;
+
+export const EmptyView: FC<EmptyViewProps> = () => {
+  const stringFormatter = useLocalizedStringFormatter(locales);
+
+  return (
+    <IllustratedMessageView>
+      <IconClose />
+      <HeadingView>
+        {stringFormatter.format("list.noItems.heading")}
+      </HeadingView>
+      <TextView>{stringFormatter.format("list.noItems.text")}</TextView>
+    </IllustratedMessageView>
+  );
+};

packages/components/src/components/List/components/EmptyView/index.ts

@@ -0,0 +1 @@
+export * from "./EmptyView";

packages/components/src/components/List/components/EmptyViewContainer/EmptyViewContainer.tsx

@@ -0,0 +1,25 @@
+import DivView from "@/views/DivView";
+import type { FC, ReactNode } from "react";
+import styles from "../../components/Items/Items.module.scss";
+import { EmptyView } from "../EmptyView/EmptyView";
+import { EmptySearchResultView } from "../EmptySearchResultView";
+import type { EmptyViewType } from "../../model/types";
+
+export interface EmptyViewContainerProps {
+  emptyView?: ReactNode;
+  emptySearchResultView?: ReactNode;
+  viewType: EmptyViewType;
+}
+
+/** @flr-generate all */
+export const EmptyViewContainer: FC<EmptyViewContainerProps> = (props) => {
+  const emptyView = props.emptyView ?? <EmptyView />;
+  const emptySearchResultView = props.emptySearchResultView ?? (
+    <EmptySearchResultView />
+  );
+  return (
+    <DivView className={styles.emptyView}>
+      {props.viewType === "search" ? emptySearchResultView : emptyView}
+    </DivView>
+  );
+};

packages/components/src/components/List/components/EmptyViewContainer/index.ts

@@ -0,0 +1,2 @@
+export * from "./view";
+export * from "./EmptyViewContainer";

packages/components/src/components/List/components/EmptyViewContainer/view.ts

@@ -0,0 +1,10 @@
+/* prettier-ignore */
+/* This file is auto-generated with the remote-components-generator */
+import type { EmptyViewContainer } from "./EmptyViewContainer";
+import type { ViewComponent } from "@/lib/viewComponentContext";
+
+declare global {
+  interface FlowViewComponents {
+    EmptyViewContainer: ViewComponent<typeof EmptyViewContainer>;
+  }
+}

packages/components/src/components/List/components/Items/Items.tsx

@@ -1,4 +1,3 @@
-import { EmptyView } from "@/components/List";
 import Item from "@/components/List/components/Items/components/Item/Item";
 import { useList } from "@/components/List/hooks/useList";
 import DivView from "@/views/DivView";
@@ -7,6 +6,7 @@ import clsx from "clsx";
 import type { FC } from "react";
 import styles from "./Items.module.scss";
 import { FallbackItems } from "./components/FallbackItems";
+import EmptyViewContainerView from "@/views/EmptyViewContainerView";
 
 export const Items: FC = () => {
   const list = useList();
@@ -33,7 +33,13 @@ export const Items: FC = () => {
       <ItemsGridListView
         className={rootClassName}
         {...list.componentProps}
-        renderEmptyState={() => <EmptyView />}
+        emptyView={
+          <EmptyViewContainerView
+            viewType={list.getEmptyViewType()}
+            emptySearchResultView={list.emptySearchResultView}
+            emptyView={list.emptyView}
+          />
+        }
         layout={tiles ? "grid" : "stack"}
         tileMaxWidth={list.itemView.tileMaxWidth}
       >

packages/components/src/components/List/components/Items/views/GridList/GridList.tsx

@@ -1,19 +1,19 @@
 import * as Aria from "react-aria-components";
-import type { FC } from "react";
-import { EmptyView } from "@/components/List/views/EmptyView";
+import type { FC, ReactNode } from "react";
 
 export type GridListProps = Aria.GridListProps<never> & {
   tileMaxWidth: number;
+  emptyView?: ReactNode;
 };
 
 /** @flr-generate all */
 export const GridList: FC<GridListProps> = (props) => {
-  const { tileMaxWidth, ...rest } = props;
+  const { tileMaxWidth, emptyView, ...rest } = props;
 
   return (
     <Aria.GridList
       {...rest}
-      renderEmptyState={() => <EmptyView />}
+      renderEmptyState={() => emptyView}
       style={{
         gridTemplateColumns: `repeat(auto-fill, minmax(${tileMaxWidth}px, 1fr))`,
       }}