first commit

calcom/packages/ui/components/list/List.tsx

@@ -0,0 +1,147 @@
+import Link from "next/link";
+import { createElement } from "react";
+
+import classNames from "@calcom/lib/classNames";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+
+import { Badge } from "../badge";
+
+export type ListProps = {
+  roundContainer?: boolean;
+  // @TODO: Do we still need this? Coming from old v2 component. Prefer to delete it :)
+  noBorderTreatment?: boolean;
+} & JSX.IntrinsicElements["ul"];
+
+export function List(props: ListProps) {
+  return (
+    <ul
+      data-testid="list"
+      {...props}
+      className={classNames(
+        "mx-0 rounded-sm sm:overflow-hidden ",
+        // Add rounded top and bottome if roundContainer is true
+        props.roundContainer && "[&>*:first-child]:rounded-t-md [&>*:last-child]:rounded-b-md ",
+        !props.noBorderTreatment &&
+          "border-subtle divide-subtle divide-y rounded-md border border-l border-r ",
+        props.className
+      )}>
+      {props.children}
+    </ul>
+  );
+}
+
+export type ListItemProps = { expanded?: boolean; rounded?: boolean } & ({
+  href?: never;
+} & JSX.IntrinsicElements["li"]);
+
+export function ListItem(props: ListItemProps) {
+  const { href, expanded, rounded = true, ...passThroughProps } = props;
+
+  const elementType = href ? "a" : "li";
+
+  const element = createElement(
+    elementType,
+    {
+      ...passThroughProps,
+      className: classNames(
+        "items-center bg-default min-w-0 flex-1 flex border-neutral-200 p-4 sm:mx-0 md:border md:p-4 xl:mt-0 border-subtle",
+        expanded ? "my-2 border" : "border -mb-px last:mb-0",
+        // Pass rounded false to not round the corners -> Usefull when used in list we can use roundedContainer to create the right design
+        rounded ? "rounded-md" : "rounded-none",
+        props.className,
+        (props.onClick || href) && "hover:bg-muted"
+      ),
+      "data-testid": "list-item",
+    },
+    props.children
+  );
+
+  return href ? (
+    <Link passHref href={href} legacyBehavior>
+      {element}
+    </Link>
+  ) : (
+    element
+  );
+}
+
+export type ListLinkItemProps = {
+  href: string;
+  heading: string;
+  subHeading: string;
+  disabled?: boolean;
+  actions?: JSX.Element;
+} & JSX.IntrinsicElements["li"];
+
+export function ListLinkItem(props: ListLinkItemProps) {
+  const { href, heading = "", children, disabled = false, actions = <div />, className = "" } = props;
+  const { t } = useLocale();
+  let subHeading = props.subHeading;
+  if (!subHeading) {
+    subHeading = "";
+  }
+  return (
+    <li
+      data-testid="list-link-item"
+      className={classNames(
+        "group flex w-full items-center justify-between p-5 pb-4",
+        className,
+        disabled ? "hover:bg-muted" : ""
+      )}>
+      <Link
+        passHref
+        href={href}
+        className={classNames(
+          "text-default flex-grow truncate text-sm",
+          disabled ? "pointer-events-none cursor-not-allowed opacity-30" : ""
+        )}>
+        <div className="flex items-center">
+          <h1 className="text-sm font-semibold leading-none">{heading}</h1>
+          {disabled && (
+            <Badge data-testid="badge" variant="gray" className="ml-2">
+              {t("readonly")}
+            </Badge>
+          )}
+        </div>
+        <h2 className="min-h-4 mt-2 text-sm font-normal leading-none text-neutral-600">
+          {subHeading.substring(0, 100)}
+          {subHeading.length > 100 && "..."}
+        </h2>
+        <div className="mt-2">{children}</div>
+      </Link>
+      {actions}
+    </li>
+  );
+}
+
+export function ListItemTitle<TComponent extends keyof JSX.IntrinsicElements = "span">(
+  props: JSX.IntrinsicElements[TComponent] & { component?: TComponent }
+) {
+  const { component = "span", ...passThroughProps } = props;
+
+  return createElement(
+    component,
+    {
+      ...passThroughProps,
+      className: classNames("text-sm font-medium text-emphasis truncate", props.className),
+      "data-testid": "list-item-title",
+    },
+    props.children
+  );
+}
+
+export function ListItemText<TComponent extends keyof JSX.IntrinsicElements = "span">(
+  props: JSX.IntrinsicElements[TComponent] & { component?: TComponent }
+) {
+  const { component = "span", ...passThroughProps } = props;
+
+  return createElement(
+    component,
+    {
+      ...passThroughProps,
+      className: classNames("text-sm text-subtle truncate", props.className),
+      "data-testid": "list-item-text",
+    },
+    props.children
+  );
+}

calcom/packages/ui/components/list/index.ts

@@ -0,0 +1,2 @@
+export { List, ListItem, ListItemText, ListItemTitle, ListLinkItem } from "./List";
+export type { ListItemProps, ListProps } from "./List";

calcom/packages/ui/components/list/list.stories.mdx

@@ -0,0 +1,97 @@
+import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
+
+import {
+  Examples,
+  Example,
+  Note,
+  Title,
+  CustomArgsTable,
+  VariantsTable,
+  VariantRow,
+} from "@calcom/storybook/components";
+
+import { List, ListItem, ListItemTitle, ListItemText } from "./List";
+
+export const listItems = [
+  { title: "Title 1", description: "Description 1" },
+  { title: "Title 2", description: "Description 2" },
+  { title: "Title 3", description: "Description 3" },
+];
+
+<Meta title="UI/List" component={List} />
+
+<Title title="List" suffix="Brief" subtitle="Version 2.0 — Last Update: 24 Aug 2023" />
+
+## Definition
+
+The List component is used to render an unordered list with default styling
+
+## Structure
+
+List takes an array of objects to display a list in the UI
+### List
+<CustomArgsTable of={List} />
+
+### ListItem
+<CustomArgsTable of={ListItem} />
+
+<Examples>
+  <Example title="Default">
+    <List>
+      {listItems.map((item) => (
+        <ListItem rounded={false}>
+          <ListItemTitle className="mr-2">{item.title}</ListItemTitle>
+          <ListItemText>{item.description}</ListItemText>
+        </ListItem>
+      ))}
+    </List>
+  </Example>
+  <Example title="Round Container">
+    <List roundContainer={false}>
+      {listItems.map((item) => (
+        <ListItem rounded={false}>
+          <ListItemTitle className="mr-2">{item.title}</ListItemTitle>
+          <ListItemText>{item.description}</ListItemText>
+        </ListItem>
+      ))}
+    </List>
+  </Example>
+    <Example title="No Border Treatment">
+    <List noBorderTreatment={true}>
+      {listItems.map((item) => (
+        <ListItem rounded={false}>
+          <ListItemTitle className="mr-2">{item.title}</ListItemTitle>
+          <ListItemText>{item.description}</ListItemText>
+        </ListItem>
+      ))}
+    </List>
+  </Example>
+</Examples>
+
+<Title offset title="List" suffix="Variants" />
+
+<Canvas>
+  <Story
+    name="List"
+    args={{
+      roundContainer: true,
+      noBorderTreatment: false,
+      rounded: false,
+      expanded: false
+    }}>
+    {({ roundContainer, noBorderTreatment, rounded, expanded }) => (
+      <VariantsTable titles={["Default"]} columnMinWidth={150}>
+        <VariantRow>
+          <List roundContainer={roundContainer} noBorderTreatment={noBorderTreatment}>
+            {listItems.map((item) => (
+              <ListItem rounded={rounded} expanded={expanded}>
+                <ListItemTitle className="mr-2">{item.title}</ListItemTitle>
+                <ListItemText>{item.description}</ListItemText>
+              </ListItem>
+            ))}
+          </List>
+        </VariantRow>
+      </VariantsTable>
+    )}
+  </Story>
+</Canvas>

calcom/packages/ui/components/list/list.test.tsx

@@ -0,0 +1,117 @@
+/* eslint-disable playwright/missing-playwright-await */
+import { render, screen, fireEvent } from "@testing-library/react";
+import { vi } from "vitest";
+
+import { List, ListItem, ListItemText, ListItemTitle, ListLinkItem } from "./List";
+
+describe("Tests for List component", () => {
+  test("Should be bordered with no rounded container by default", () => {
+    render(<List>Go</List>);
+
+    const listElement = screen.getByTestId("list");
+
+    expect(listElement).toBeInTheDocument();
+  });
+});
+
+describe("Tests for ListItem component", () => {
+  test("Should be expanded and rounded and rendered by a LI tag by default", () => {
+    render(<ListItem>Go</ListItem>);
+
+    const listItemElement = screen.getByTestId("list-item");
+
+    expect(listItemElement).toBeInstanceOf(HTMLLIElement);
+  });
+
+  test("Should call onClick when clicked", () => {
+    const handleClick = vi.fn();
+    render(<ListItem onClick={handleClick}>Go</ListItem>);
+
+    const listItemElement = screen.getByTestId("list-item");
+
+    fireEvent.click(listItemElement);
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe("Tests for ListLinkItem component", () => {
+  test("Should be rendered as <a/> with heading by default", () => {
+    render(
+      <ListLinkItem href="https://custom.link" heading="Go" subHeading="There">
+        Alright
+      </ListLinkItem>
+    );
+
+    const listLinkItemElement = screen.getByTestId("list-link-item");
+
+    const link = listLinkItemElement.firstChild;
+    expect(link).toBeInstanceOf(HTMLAnchorElement);
+    expect(link).toHaveAttribute("href", "https://custom.link");
+
+    const heading = screen.getByText("Go");
+    expect(heading).toBeInTheDocument();
+    expect(heading.tagName).toBe("H1");
+
+    const subHeading = screen.getByText("There");
+    expect(subHeading).toBeInTheDocument();
+    expect(subHeading.tagName).toBe("H2");
+  });
+
+  test("Should be disabled", () => {
+    render(
+      <ListLinkItem href="https://custom.link" heading="Go" subHeading="There" disabled={true}>
+        Alright
+      </ListLinkItem>
+    );
+
+    const badge = screen.getByTestId("badge");
+    expect(badge).toBeInTheDocument();
+  });
+
+  test("Should apply some actions", () => {
+    render(
+      <ListLinkItem href="https://custom.link" heading="Go" subHeading="There" actions={<div>cta</div>}>
+        Alright
+      </ListLinkItem>
+    );
+
+    const action = screen.getByText("cta");
+    expect(action).toBeInTheDocument();
+  });
+});
+
+describe("Tests for ListItemTitle component", () => {
+  test("Should render as <span> by default", () => {
+    render(<ListItemTitle>Go</ListItemTitle>);
+
+    const listItemTitleElement = screen.getByTestId("list-item-title");
+    expect(listItemTitleElement).toBeInTheDocument();
+    expect(listItemTitleElement.tagName).toBe("SPAN");
+  });
+
+  test("Should be rendered with the defined component", () => {
+    render(<ListItemTitle component="h1">Go</ListItemTitle>);
+
+    const listItemTitleElement = screen.getByTestId("list-item-title");
+    expect(listItemTitleElement.tagName).not.toBe("SPAN");
+    expect(listItemTitleElement.tagName).toBe("H1");
+  });
+});
+
+describe("Tests for ListItemText component", () => {
+  test("Should render as <span> by default", () => {
+    render(<ListItemText>Go</ListItemText>);
+
+    const listItemTextElement = screen.getByTestId("list-item-text");
+    expect(listItemTextElement).toBeInTheDocument();
+    expect(listItemTextElement.tagName).toBe("SPAN");
+  });
+
+  test("Should be rendered with the defined component", () => {
+    render(<ListItemText component="div">Go</ListItemText>);
+
+    const listItemTextElement = screen.getByTestId("list-item-text");
+    expect(listItemTextElement.tagName).not.toBe("SPAN");
+    expect(listItemTextElement.tagName).toBe("DIV");
+  });
+});