first commit

calcom/packages/ui/components/empty-screen/EmptyScreen.tsx

@@ -0,0 +1,86 @@
+import type { ReactNode } from "react";
+import React from "react";
+
+import { classNames } from "@calcom/lib";
+
+import type { IconName } from "../..";
+import { Icon } from "../..";
+import { Button } from "../../components/button";
+
+export function EmptyScreen({
+  Icon: icon,
+  customIcon,
+  avatar,
+  headline,
+  description,
+  buttonText,
+  buttonOnClick,
+  buttonRaw,
+  border = true,
+  dashedBorder = true,
+  className,
+  iconClassName,
+  iconWrapperClassName,
+  limitWidth = true,
+}: {
+  Icon?: IconName;
+  customIcon?: React.ReactElement;
+  avatar?: React.ReactElement;
+  headline: string | React.ReactElement;
+  description?: string | React.ReactElement;
+  buttonText?: string;
+  buttonOnClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+  buttonRaw?: ReactNode; // Used incase you want to provide your own button.
+  border?: boolean;
+  dashedBorder?: boolean;
+  iconWrapperClassName?: string;
+  iconClassName?: string;
+  limitWidth?: boolean;
+} & React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <>
+      <div
+        data-testid="empty-screen"
+        className={classNames(
+          "flex w-full select-none flex-col items-center justify-center rounded-lg p-7 lg:p-20",
+          border && "border-subtle border",
+          dashedBorder && "border-dashed",
+          className
+        )}>
+        {!avatar ? null : (
+          <div className="flex h-[72px] w-[72px] items-center justify-center rounded-full">{avatar}</div>
+        )}
+
+        {!icon ? null : (
+          <div
+            className={classNames(
+              "bg-emphasis flex h-[72px] w-[72px] items-center justify-center rounded-full ",
+              iconWrapperClassName
+            )}>
+            <Icon
+              name={icon}
+              className={classNames("text-default inline-block h-10 w-10 stroke-[1.3px]", iconClassName)}
+            />
+          </div>
+        )}
+        {!customIcon ? null : <>{customIcon}</>}
+        <div className={`flex ${limitWidth ? "max-w-[420px]" : ""}  flex-col items-center`}>
+          <h2
+            className={classNames(
+              "text-semibold font-cal text-emphasis text-center text-xl normal-nums",
+              icon && "mt-6"
+            )}>
+            {headline}
+          </h2>
+          {description && (
+            <div className="text-default mb-8 mt-3 text-center text-sm font-normal leading-6">
+              {description}
+            </div>
+          )}
+          {buttonOnClick && buttonText && <Button onClick={(e) => buttonOnClick(e)}>{buttonText}</Button>}
+          {buttonRaw}
+        </div>
+      </div>
+    </>
+  );
+}

calcom/packages/ui/components/empty-screen/empty-screen.stories.mdx

@@ -0,0 +1,59 @@
+import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
+
+import {
+  Examples,
+  Example,
+  Note,
+  Title,
+  CustomArgsTable,
+  VariantsTable,
+  VariantRow,
+} from "@calcom/storybook/components";
+
+import { Calendar } from "../icon";
+import { EmptyScreen } from "./EmptyScreen";
+
+<Meta title="UI/EmptyScreen" component={EmptyScreen} />
+
+<Title title="EmptyScreen" suffix="Brief" subtitle="Version 2.0 — Last Update: 05 jan 2023" />
+
+## Definition
+
+An empty state is where no info/ apps are added to a page with typically content. There must be a text that prompts users to learn more about why they see this state if necessary.
+The CTA button can prompt the user to add the info/ apps needed for the page.
+
+<Canvas>
+  <Story
+    name="EmptyScreen"
+    args={{
+      headline: "Empty state header",
+      description:
+        "Do consectetur qui ex deserunt do est veniam commodo. Eiusmod eiusmod dolore nostrud pariatur mollit sit commodo.",
+      buttonText: "Learn More",
+    }}
+    argTypes={{
+      headline: {
+        control: "text",
+      },
+      description: {
+        control: "text",
+      },
+      buttonText: {
+        control: "text",
+      },
+    }}>
+    {({ headline, description, buttonText }) => (
+      <VariantsTable titles={[]} columnMinWidth={150}>
+        <VariantRow variant="Default">
+          <EmptyScreen
+            Icon="calendar"
+            headline={headline}
+            description={description}
+            buttonText={buttonText}
+            buttonOnClick={() => alert("Learned More!!")}
+          />
+        </VariantRow>
+      </VariantsTable>
+    )}
+  </Story>
+</Canvas>

calcom/packages/ui/components/empty-screen/index.ts

@@ -0,0 +1 @@
+export { EmptyScreen } from "./EmptyScreen";