feat(list): add tile view

mittwald · Jan 7, 2025 · c2c6200 · c2c6200
1 parent 28e4c8f
commit c2c6200
Show file tree

Hide file tree

Showing 10 changed files with 170 additions and 29 deletions.
diff --git a/...ts/List/components/Items/Items.module.css → ...s/List/components/Items/Items.module.scss b/...ts/List/components/Items/Items.module.css → ...s/List/components/Items/Items.module.scss
@@ -19,4 +19,11 @@
   &[data-empty="true"] {
     border: none;
   }
+
+  &.tiles {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    border: none;
+    gap: var(--list-item--spacing);
+  }
 }
diff --git a/packages/components/src/components/List/components/Items/Items.tsx b/packages/components/src/components/List/components/Items/Items.tsx
@@ -21,7 +21,11 @@ export const Items: FC = () => {
     <Item key={item.id} data={item.data} id={item.id} />
   ));
 
-  const rootClassName = clsx(styles.items, isLoading && styles.isLoading);
+  const rootClassName = clsx(
+    styles.items,
+    isLoading && styles.isLoading,
+    list.tile && styles.tiles,
+  );
 
   return (
     <div aria-hidden={isInitiallyLoading} aria-busy={isLoading}>

diff --git a/packages/components/src/components/List/components/Items/components/Item/Item.module.scss b/packages/components/src/components/List/components/Items/components/Item/Item.module.scss
@@ -31,4 +31,27 @@
       background-color: var(--list-item--background-color--pressed);
     }
   }
+
+  &.tile {
+    border-color: var(--list-item--border-color);
+    border-width: var(--list-item--border-width);
+    border-style: var(--list-item--border-style);
+    border-radius: var(--list-item--corner-radius);
+
+    &:where(.hasAction) {
+      &:not(.isSelected) {
+        &:hover {
+          img {
+            filter: brightness(var(--image-button--brightness--hover));
+          }
+        }
+      }
+
+      &[data-pressed] {
+        img {
+          filter: brightness(var(--image-button--brightness--pressed));
+        }
+      }
+    }
+  }
 }
diff --git a/packages/components/src/components/List/components/Items/components/Item/Item.tsx b/packages/components/src/components/List/components/Items/components/Item/Item.tsx
@@ -37,6 +37,7 @@ export const Item = (props: Props) => {
           styles.item,
           hasAction && styles.hasAction,
           props.isSelected && styles.isSelected,
+          list.tile && styles.tile,
         )
       }
       textValue={textValue}
@@ -48,10 +49,21 @@ export const Item = (props: Props) => {
   );
 };
 
-export const ItemContainer: FC<PropsWithChildren> = (props) => (
-  <Aria.GridListItem textValue="-" className={styles.item}>
-    {props.children}
-  </Aria.GridListItem>
-);
+export const ItemContainer: FC<PropsWithChildren> = (props) => {
+  const list = useList();
+
+  return (
+    <Aria.GridListItem
+      textValue="-"
+      className={clsx(
+        styles.item,
+        styles.fallbackItem,
+        list.tile && styles.tile,
+      )}
+    >
+      {props.children}
+    </Aria.GridListItem>
+  );
+};
 
 export default Item;
diff --git a/...components/List/components/Items/components/Item/components/SkeletonView/SkeletonView.tsx b/...components/List/components/Items/components/Item/components/SkeletonView/SkeletonView.tsx
@@ -4,14 +4,21 @@ import { Heading } from "@/components/Heading";
 import { Text } from "@/components/Text";
 import View from "@/components/List/components/Items/components/Item/components/View/View";
 import SkeletonText from "@/components/SkeletonText";
+import { useList } from "@/components/List";
+import { Skeleton } from "@/components/Skeleton";
 
-export const SkeletonView: FC = () => (
-  <View>
-    <Heading>
-      <SkeletonText width="200px" />
-    </Heading>
-    <Text>
-      <SkeletonText width="300px" />
-    </Text>
-  </View>
-);
+export const SkeletonView: FC = () => {
+  const list = useList();
+
+  return (
+    <View>
+      {list.tile && <Skeleton height="200px" />}
+      <Heading>
+        <SkeletonText width="200px" />
+      </Heading>
+      <Text>
+        <SkeletonText width="300px" />
+      </Text>
+    </View>
+  );
+};
diff --git a/...nts/src/components/List/components/Items/components/Item/components/View/View.module.scss b/...nts/src/components/List/components/Items/components/Item/components/View/View.module.scss
@@ -77,4 +77,24 @@
     order: 4;
     width: 100%;
   }
+
+  &.tile {
+    padding: 0;
+
+    .image {
+      width: 100%;
+      border-color: var(--list-item--border-color);
+      border-width: var(--list-item--border-width);
+      border-style: var(--list-item--border-style);
+    }
+
+    .tileContent {
+      display: flex;
+      justify-content: space-between;
+      align-items: start;
+      padding-inline: var(--list-item--spacing);
+      padding-bottom: var(--list-item--spacing);
+      width: 100%;
+    }
+  }
 }
diff --git a/.../components/src/components/List/components/Items/components/Item/components/View/View.tsx b/.../components/src/components/List/components/Items/components/Item/components/View/View.tsx
@@ -7,6 +7,8 @@ import { OptionsButton } from "@/components/List/components/Items/components/Ite
 import { TunnelExit, TunnelProvider } from "@mittwald/react-tunnel";
 import type { PropsWithClassName } from "@/lib/types/props";
 import clsx from "clsx";
+import { useList } from "@/components/List";
+import { Wrap } from "@/components/Wrap";
 
 type Props = PropsWithChildren & PropsWithClassName;
 
@@ -19,6 +21,7 @@ const getStyleForContentSlot = (slot?: string) =>
 
 export const View = (props: Props) => {
   const { children, className } = props;
+  const list = useList();
 
   const propsContext: PropsContext = {
     ContextMenu: {
@@ -45,6 +48,9 @@ export const View = (props: Props) => {
       className: styles.avatar,
       tunnelId: "title",
     },
+    Image: {
+      className: styles.image,
+    },
     Heading: {
       className: styles.heading,
       level: 5,
@@ -59,22 +65,27 @@ export const View = (props: Props) => {
     },
   };
 
-  const rootClassName = clsx(styles.view, className);
+  const rootClassName = clsx(styles.view, list.tile && styles.tile, className);
 
   return (
     <div className={rootClassName}>
       <PropsContextProvider props={propsContext} mergeInParentContext>
         <TunnelProvider>
           <div className={styles.content}>
             {children}
-            <div className={styles.title}>
-              <TunnelExit id="title" />
-              <div className={styles.subTitle}>
-                <TunnelExit id="text" />
+            <Wrap if={list.tile}>
+              <div className={styles.tileContent}>
+                <div className={styles.title}>
+                  <TunnelExit id="title" />
+                  <div className={styles.subTitle}>
+                    <TunnelExit id="text" />
+                  </div>
+                </div>
+                {list.tile && <TunnelExit id="button" />}
               </div>
-            </div>
+            </Wrap>
           </div>
-          <TunnelExit id="button" />
+          {!list.tile && <TunnelExit id="button" />}
         </TunnelProvider>
       </PropsContextProvider>
     </div>

diff --git a/packages/components/src/components/List/model/List.ts b/packages/components/src/components/List/model/List.ts
@@ -21,6 +21,9 @@ import type { SettingsStore } from "@/components/SettingsProvider/models/Setting
 import z from "zod";
 
 export class List<T> {
+  public static readonly viewModeSettingsStorageSchema = z
+    .enum(["list", "table"])
+    .optional();
   public readonly filters: Filter<T, never, never>[];
   public readonly itemView?: ItemView<T>;
   public readonly table?: Table<T>;
@@ -32,21 +35,17 @@ export class List<T> {
   public readonly loader: IncrementalLoader<T>;
   public readonly onAction?: ItemActionFn<T>;
   public readonly accordion: boolean;
+  public readonly tile: boolean;
   public readonly getItemId?: GetItemId<T>;
   public readonly componentProps: ListSupportedComponentProps;
   public viewMode: ListViewMode;
   public readonly setViewMode: (viewMode: ListViewMode) => void;
-
-  private readonly settingsStore?: SettingsStore;
   public readonly supportsSettingsStorage: boolean;
   public readonly settingStorageKey?: string;
+  private readonly settingsStore?: SettingsStore;
   private readonly viewModeStorageKey?: string;
   private readonly filterSettingsStorageKey?: string;
 
-  public static readonly viewModeSettingsStorageSchema = z
-    .enum(["list", "table"])
-    .optional();
-
   public constructor(shape: ListShape<T>) {
     const {
       settingStorageKey,
@@ -62,6 +61,7 @@ export class List<T> {
       getItemId,
       defaultViewMode,
       accordion = false,
+      tile = false,
       ...componentProps
     } = shape;
 
@@ -81,6 +81,7 @@ export class List<T> {
     this.search = search ? new Search(this, search) : undefined;
     this.itemView = itemView ? new ItemView(this, itemView) : undefined;
     this.accordion = accordion;
+    this.tile = tile;
     this.table = table ? new Table(this, table) : undefined;
     this.batches = new BatchesController(this, batchesController);
     this.componentProps = componentProps;

diff --git a/packages/components/src/components/List/model/types.ts b/packages/components/src/components/List/model/types.ts
@@ -43,6 +43,7 @@ export interface ListShape<T> extends ListSupportedComponentProps {
 
   onAction?: ItemActionFn<T>;
   accordion?: boolean;
+  tile?: boolean;
   getItemId?: GetItemId<T>;
   onChange?: OnListChanged<T>;
   defaultViewMode?: ListViewMode;

diff --git a/packages/components/src/components/List/stories/Default.stories.tsx b/packages/components/src/components/List/stories/Default.stories.tsx
@@ -17,6 +17,8 @@ import { Button } from "@/components/Button";
 import IconDownload from "@/components/Icon/components/icons/IconDownload";
 import { ActionGroup } from "@/components/ActionGroup";
 import { Content } from "@/components/Content";
+import { Image } from "@/components/Image";
+import { dummyText } from "@/lib/dev/dummyText";
 
 const loadDomains: AsyncDataLoader<Domain> = async (opts) => {
   const response = await getDomains({
@@ -218,3 +220,56 @@ export const WithAccordion: Story = {
     );
   },
 };
+
+export const WithTile: Story = {
+  render: () => {
+    const DomainList = typedList<Domain>();
+    const availableTypes = usePromise(getTypes, []);
+
+    return (
+      <Section>
+        <Heading>Domains</Heading>
+        <DomainList.List
+          batchSize={5}
+          aria-label="Domains"
+          onAction={(domain) => console.log(domain.hostname)}
+          tile
+        >
+          <DomainList.LoaderAsync manualPagination manualSorting={false}>
+            {loadDomains}
+          </DomainList.LoaderAsync>
+          <DomainList.Filter
+            values={availableTypes}
+            property="type"
+            mode="all"
+            name="Typ"
+            defaultSelected={["Domain"]}
+          />
+          <DomainList.Search autoFocus autoSubmit />
+          <DomainList.Sorting property="domain" name="A-Z" />
+          <DomainList.Sorting property="domain" name="Z-A" direction="desc" />
+
+          <DomainList.Item textValue={(domain) => domain.hostname}>
+            {(domain) => (
+              <DomainList.ItemView>
+                <Image src={dummyText.imageSrc} />
+                <Heading>
+                  {domain.hostname}
+                  {!domain.verified && (
+                    <AlertBadge status="warning">Not verified</AlertBadge>
+                  )}
+                </Heading>
+                <Text>{domain.type}</Text>
+
+                <ContextMenu>
+                  <MenuItem>Show details</MenuItem>
+                  <MenuItem>Delete</MenuItem>
+                </ContextMenu>
+              </DomainList.ItemView>
+            )}
+          </DomainList.Item>
+        </DomainList.List>
+      </Section>
+    );
+  },
+};