first commit

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>