feat: add list component

kirchoni · May 1, 2024 · 41fe6b0 · 41fe6b0
1 parent 5ce3217
commit 41fe6b0
Show file tree

Hide file tree

Showing 21 changed files with 1,269 additions and 6 deletions.
diff --git a/apps/docs/data/design/material-you/components/list.mdx b/apps/docs/data/design/material-you/components/list.mdx
@@ -0,0 +1,92 @@
+---
+title: List
+---
+
+# List
+
+The `List` component is used to display a list of items in a vertial layout. It is typically used to display a collection of items, such as contacts, messages, or settings.
+
+<Demo src="/demos/material-you/list" style={{ height: 600 }} />
+
+### Usage
+
+```jsx
+import { BakaList, BakaListItem, BakaIcon, BakaText } from "baka-ui";
+
+// Inside your component
+<BakaList>
+  <BakaListItem>
+    <BakaIcon variant={"filled"}>fiber_manual_record</BakaIcon>
+    <BakaText>BakaText</BakaText>
+  </BakaListItem>
+</BakaList>;
+```
+
+## List items
+
+The `List` components contains a collection of `ListItem` components, each of which could be customized with an icon, text, and other elements.
+
+#### Basic
+
+The following example demonstrates the `List` component with a basic list item.
+
+<Demo src="/demos/material-you/list/list-item/basic" style={{ height: 600 }} />
+
+### Prefix & Suffix
+
+The `ListItem` could be customized with a prefix element, such as an icon or an avatar, and a suffix element, such as a icon or a checkbox.
+
+```jsx
+<BakaList>
+  <BakaListItem>
+    {/* Prefix */}
+    <BakaIcon>person</BakaIcon>
+    {/* Content */}
+    <BakaText>BakaText</BakaText>
+    {/* Suffix */}
+    <BakaCheckbox />
+  </BakaListItem>
+</BakaList>
+```
+
+#### With Avatar
+
+The following example demonstrates the `List` component with an avatar.
+
+<Demo src="/demos/material-you/list/list-item/with-avatar" style={{ height: 600 }} />
+
+#### With Icon
+
+The following example demonstrates the `List` component with an icon.
+
+<Demo src="/demos/material-you/list/list-item/with-icon" style={{ height: 600 }} />
+
+#### With Media
+
+The following example demonstrates the `List` component with media.
+
+<Demo src="/demos/material-you/list/list-item/with-media" style={{ height: 600 }} />
+
+#### Video Media
+
+In order to show a video media, one should additionally pass the `variant="video"` prop to the `ListItem`.
+
+<Demo src="/demos/material-you/list/list-item/with-video" style={{ height: 600 }} />
+
+#### With Checkbox
+
+The following example demonstrates the `List` component with a checkbox.
+
+<Demo src="/demos/material-you/list/list-item/with-checkbox" style={{ height: 600 }} />
+
+#### With Radio
+
+The following example demonstrates the `List` component with a radio button.
+
+<Demo src="/demos/material-you/list/list-item/with-radio" style={{ height: 600 }} />
+
+#### With Switch
+
+The following example demonstrates the `List` component with a switch.
+
+<Demo src="/demos/material-you/list/list-item/with-switch" style={{ height: 600 }} />
diff --git a/apps/docs/public/demos.json b/apps/docs/public/demos.json
diff --git a/apps/docs/src/app/demos/material-you/layout.scss b/apps/docs/src/app/demos/material-you/layout.scss
@@ -16,6 +16,15 @@ body {
   // @media screen and (prefers-color-scheme: dark) {
   //   @include dark-swatch.styles();
   // }
+
+
+  &:has(.container-high) {
+    background-color: map-get($swatch, surface-container-high);
+  }
+
+  &:has(.container-low) {
+    background-color: map-get($swatch, surface-container-low);
+  }
 }
 
 .root {

diff --git a/apps/docs/src/app/demos/material-you/list/list-item/basic/page.tsx b/apps/docs/src/app/demos/material-you/list/list-item/basic/page.tsx
@@ -0,0 +1,104 @@
+import { BakaList, BakaListItem, BakaText, BakaCheckbox } from "baka-ui";
+
+export default function ListItemBasicDemo() {
+  return (
+    <div className="container-low">
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: "repeat(2, 1fr)",
+          gridTemplateRows: "repeat(1fr, 1fr)",
+          gridColumnGap: 20,
+          gridRowGap: 20,
+          maxWidth: 740,
+        }}
+      >
+        {/* Basic */}
+        <BakaList>
+          <BakaListItem variant={"multi-line"}>
+            <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
+              <BakaText variant="body-large">List item</BakaText>
+              <BakaText variant={["body-medium", "variant"]}>
+                Supporting line text lorem ipsum dolor sit amet, consectetur.
+              </BakaText>
+            </div>
+          </BakaListItem>
+        </BakaList>
+        <BakaList>
+          <BakaListItem variant={"multi-line"}>
+            <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
+              <BakaText variant="body-large">List item</BakaText>
+              <BakaText variant={["body-medium", "variant"]} style={{ width: "100%" }}>
+                Supporting line text lorem ipsum dolor sit amet, consectetur.
+              </BakaText>
+            </div>
+            <BakaCheckbox readOnly={true} checked={true} />
+          </BakaListItem>
+        </BakaList>
+        <BakaList>
+          <BakaListItem>
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                gap: 0,
+                width: "100%",
+                overflow: "hidden",
+              }}
+            >
+              <BakaText variant="body-large">List item</BakaText>
+              <BakaText
+                variant={["body-medium", "variant"]}
+                style={{
+                  whiteSpace: "nowrap",
+                  textOverflow: "ellipsis",
+                  overflow: "hidden",
+                  width: "100%",
+                }}
+              >
+                Supporting line text lorem ipsum dolor sit amet, consectetur.
+              </BakaText>
+            </div>
+          </BakaListItem>
+        </BakaList>
+        <BakaList>
+          <BakaListItem>
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                gap: 0,
+                width: "100%",
+                overflow: "hidden",
+              }}
+            >
+              <BakaText variant="body-large">List item</BakaText>
+              <BakaText
+                variant={["body-medium", "variant"]}
+                style={{ whiteSpace: "nowrap", textOverflow: "ellipsis", overflow: "hidden" }}
+              >
+                Supporting line text lorem ipsum dolor sit amet, consectetur.
+              </BakaText>
+            </div>
+            <BakaCheckbox readOnly={true} checked={true} />
+          </BakaListItem>
+        </BakaList>
+        <BakaList>
+          <BakaListItem>
+            <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
+              <BakaText variant="body-large">List item</BakaText>
+            </div>
+          </BakaListItem>
+        </BakaList>
+        <BakaList>
+          <BakaListItem>
+            <div style={{ display: "flex", flexDirection: "column", gap: 0, width: "100%" }}>
+              <BakaText variant="body-large">List item</BakaText>
+            </div>
+            <BakaCheckbox readOnly={true} checked={true} />
+          </BakaListItem>
+        </BakaList>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/docs/src/app/demos/material-you/list/list-item/page.tsx b/apps/docs/src/app/demos/material-you/list/list-item/page.tsx
@@ -0,0 +1,49 @@
+import {
+  BakaAvatar,
+  BakaCheckbox,
+  BakaIcon,
+  BakaList,
+  BakaListItem,
+  BakaRadio,
+  BakaSwitch,
+  BakaText,
+} from "baka-ui";
+import Image from "next/image";
+import ListItemBasicDemo from "./basic/page";
+import ListItemWithAvatarDemo from "./with-avatar/page";
+import ListItemWithIconDemo from "./with-icon/page";
+import ListItemWithMediaDemo from "./with-media/page";
+import ListItemWithVideoDemo from "./with-video/page";
+import ListItemWithRadioDemo from "./with-radio/page";
+import ListItemWithCheckboxDemo from "./with-checkbox/page";
+import ListItemWithSwitchDemo from "./with-switch/page";
+
+// ListItemVariant: "multi-line" | "video";
+export default function ListItemDemo() {
+  return (
+    <>
+      <ListItemBasicDemo />
+      <br />
+      <br />
+      <ListItemWithAvatarDemo />
+      <br />
+      <br />
+      <ListItemWithIconDemo />
+      <br />
+      <br />
+      <ListItemWithMediaDemo />
+      <br />
+      <br />
+      <ListItemWithVideoDemo />
+      <br />
+      <br />
+      <ListItemWithCheckboxDemo />
+      <br />
+      <br />
+      <ListItemWithRadioDemo />
+      <br />
+      <br />
+      <ListItemWithSwitchDemo />
+    </>
+  );
+}
diff --git a/apps/docs/src/app/demos/material-you/list/list-item/stories/page.tsx b/apps/docs/src/app/demos/material-you/list/list-item/stories/page.tsx
@@ -0,0 +1,103 @@
+import Image from "next/image";
+import {
+  BakaAvatar,
+  BakaCheckbox,
+  BakaIcon,
+  BakaList,
+  BakaListItem,
+  BakaRadio,
+  BakaSwitch,
+  BakaText,
+} from "baka-ui";
+
+export type ListItemStoryProps = {
+  prefix: null | "avatar" | "icon" | "media" | "checkbox" | "radio" | "switch";
+  suffix: null | "checkbox" | "icon";
+  media?: "image" | "video";
+  multiLine: boolean;
+};
+
+export const defaultProps = {
+  multiLine: false,
+  prefix: null,
+  media: "image",
+  suffix: null,
+};
+
+export default function ListItemStory(props: ListItemStoryProps) {
+  const args = { ...defaultProps, ...props };
+
+  return (
+    <div className="container-low" style={{ maxWidth: 360 }}>
+      <BakaList>
+        <BakaListItem
+          variant={
+            [
+              args.multiLine ? "multi-line" : false,
+              args.prefix === "media" && args.media === "video" ? "video" : false,
+            ].filter(Boolean) as any[]
+          }
+        >
+          {(() => {
+            switch (args.prefix) {
+              case "avatar":
+                return <BakaAvatar>A</BakaAvatar>;
+              case "icon":
+                return <BakaIcon>person</BakaIcon>;
+              case "media":
+                return args.media === "video" ? (
+                  <Image src="/media.png" width={114} height={64} alt="media-video" />
+                ) : (
+                  <Image src="/media-small.png" width={56} height={56} alt="media-small" />
+                );
+              case "checkbox":
+                return <BakaCheckbox readOnly={true} checked={true} />;
+              case "radio":
+                return <BakaRadio readOnly={true} checked={true} />;
+              case "switch":
+                return <BakaSwitch readOnly={true} checked={false} />;
+              default:
+                return null;
+            }
+          })()}
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              gap: 0,
+              width: "100%",
+              overflow: "hidden",
+            }}
+          >
+            <BakaText variant="body-large">List item</BakaText>
+            <BakaText
+              variant={["body-medium", "variant"]}
+              style={
+                args.multiLine
+                  ? { width: "100%" }
+                  : {
+                      whiteSpace: "nowrap",
+                      textOverflow: "ellipsis",
+                      overflow: "hidden",
+                      width: "100%",
+                    }
+              }
+            >
+              Supporting line text lorem ipsum dolor sit amet, consectetur.
+            </BakaText>
+          </div>
+          {(() => {
+            switch (args.suffix) {
+              case "checkbox":
+                return <BakaCheckbox readOnly={true} checked={true} />;
+              case "icon":
+                return <BakaIcon>arrow_right</BakaIcon>;
+              default:
+                return null;
+            }
+          })()}
+        </BakaListItem>
+      </BakaList>
+    </div>
+  );
+}