316 tile component

packages/components/src/components/List/components/Items/Items.module.css → packages/components/src/components/List/components/Items/Items.module.scss

@@ -19,4 +19,11 @@
   &[data-empty="true"] {
     border: none;
   }
+
+  &.tiles {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    border: none;
+    gap: var(--list-item--spacing);
+  }
 }

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

@@ -1,7 +1,7 @@
 import type { FC } from "react";
 import React from "react";
 import { useList } from "@/components/List/hooks/useList";
-import styles from "./Items.module.css";
+import styles from "./Items.module.scss";
 import clsx from "clsx";
 import * as Aria from "react-aria-components";
 import Item from "@/components/List/components/Items/components/Item/Item";
@@ -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}>

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 {
+          :global(.flow--avatar) {
+            filter: brightness(var(--image-button--brightness--hover));
+          }
+        }
+      }
+
+      &[data-pressed] {
+        :global(.flow--avatar) {
+          filter: brightness(var(--image-button--brightness--pressed));
+        }
+      }
+    }
+  }
 }

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;

packages/components/src/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 style={{ aspectRatio: 16 / 9 }} />}
+      <Heading>
+        <SkeletonText width="200px" />
+      </Heading>
+      <Text>
+        <SkeletonText width="300px" />
+      </Text>
+    </View>
+  );
+};

packages/components/src/components/List/components/Items/components/Item/components/View/View.module.scss

@@ -4,7 +4,8 @@
   display: flex;
   padding: var(--list-item--padding);
   gap: var(--list-item--spacing);
-  align-items: start;
+  align-items: center;
+  flex-wrap: wrap;
 
   .content {
     display: flex;
@@ -77,4 +78,45 @@
     order: 4;
     width: 100%;
   }
+
+  &.tile {
+    padding: 0;
+
+    .avatarContainer {
+      width: 100%;
+      overflow: hidden;
+      border-bottom-color: var(--list-item--border-color);
+      border-bottom-width: var(--list-item--border-width);
+      border-bottom-style: var(--list-item--border-style);
+      aspect-ratio: 16 / 9;
+    }
+
+    .avatar {
+      width: 100%;
+      height: 100%;
+      border-radius: 0;
+
+      :global(.flow--avatar--icon) {
+        width: var(--size-px--xxl);
+        height: var(--size-px--xxl);
+      }
+
+      :global(.flow--avatar--initials) {
+        font-size: var(--size-px--xxl);
+      }
+    }
+
+    .content {
+      display: flex;
+      justify-content: space-between;
+      align-items: start;
+      padding-inline: var(--list-item--spacing);
+      padding-bottom: var(--list-item--spacing);
+      width: 100%;
+    }
+
+    .topContent {
+      width: 100%;
+    }
+  }
 }

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

@@ -7,6 +7,7 @@ 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";
 
 type Props = PropsWithChildren & PropsWithClassName;
 
@@ -19,6 +20,7 @@ const getStyleForContentSlot = (slot?: string) =>
 
 export const View = (props: Props) => {
   const { children, className } = props;
+  const list = useList();
 
   const propsContext: PropsContext = {
     ContextMenu: {
@@ -40,10 +42,11 @@ export const View = (props: Props) => {
     },
     Content: {
       className: dynamic((p) => getStyleForContentSlot(p.slot)),
+      tunnelId: dynamic((p) => (p.slot === "bottom" ? p.slot : undefined)),
     },
     Avatar: {
       className: styles.avatar,
-      tunnelId: "title",
+      tunnelId: "avatar",
     },
     Heading: {
       className: styles.heading,
@@ -59,22 +62,47 @@ 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" />
+          {list.tile && (
+            <>
+              <div className={styles.avatarContainer}>
+                <TunnelExit id="avatar" />
+              </div>
+              <div className={styles.content}>
+                <div className={styles.title}>
+                  <TunnelExit id="title" />
+                  <div className={styles.subTitle}>
+                    <TunnelExit id="text" />
+                  </div>
+                </div>
+                <TunnelExit id="button" />
+                {children}
+                <TunnelExit id="bottom" />
+              </div>
+            </>
+          )}
+
+          {!list.tile && (
+            <>
+              <div className={styles.content}>
+                <div className={styles.title}>
+                  <TunnelExit id="avatar" />
+                  <TunnelExit id="title" />
+                  <div className={styles.subTitle}>
+                    <TunnelExit id="text" />
+                  </div>
+                </div>
+                {children}
               </div>
-            </div>
-          </div>
-          <TunnelExit id="button" />
+              <TunnelExit id="button" />
+              <TunnelExit id="bottom" />
+            </>
+          )}
         </TunnelProvider>
       </PropsContextProvider>
     </div>

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;

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;

packages/components/src/components/List/stories/Default.stories.tsx

@@ -218,3 +218,62 @@ 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>
+                <Avatar color={domain.type === "Domain" ? "blue" : "teal"}>
+                  {domain.type === "Domain" ? (
+                    <IconDomain />
+                  ) : (
+                    <IconSubdomain />
+                  )}
+                </Avatar>
+                <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>
+    );
+  },
+};