V2 Main (calcom#3549)

* Fix breadcrumb colors * HorizontalTabs * Team List Item WIP * Horizontal Tabs * Cards * Remove team list item WIP * Login Page * Add welcome back i118n * EventType page work * Update EventType Icons * WIP Availability * Horizontal Tab Work * Add build command for in root * Update build DIr/command * Add Edit Button + change buttons to v2 * Availablitiy page * Fix IPAD * Make mobile look a little nicer * WIP bookingshell * Remove list items from breaking build * Mian bulk of Booking Page. * Few updates to components * Fix chormatic feedback * Fix banner * Fix Empty Screen * Text area + embded window fixes * Semi fix avatar * Troubleshoot container + Active on count * Improve mobile * NITS * Fix padding on input * Fix icons * Starting to move event types settings to tabs * Begin migration to single page form * Single page tabs * Limits Page * Advanced tab * Add RHF to dependancies * Most of advanced tab * Solved RHF mismtach * Build fixes * RHF conditionals fixes * Improved legibility * Major refactor/organisation into optional V2 UI * Portal EditLocationModal * Fix dialoug form * Update imports * Auto Animate + custom inputs WIP * Custom Inputs * WIP Apps * Fixing stories imports * Stripe app * Remove duplicate dialog * Remove duplicate dialog * Fix embed URL * Fix app toggles + number of active apps * Fix container padding on disabledBorder prop * Removes strict * EventType Team page WIP * Fix embed * NIT * Add Darkmode gray color * V2 Shell WIP * Fix headings on shell V2 * Fix mobile layout with V2 shell * V2 create event type button * Checked Team Select * Hidden to happen on save - not on toggle * Team Attendee Select animation * Fix scheduling type and remove multi select label * Fix overflow on teams url * Even Type move order handles * Fix Embed TS errors * Fix TS errors * Fix Eslint errors * Fix TS errors for UI * Fix ESLINT error * added SidebarCard for promo to v2 and storybook (calcom#3906) Co-authored-by: Julian Benegas <julianbenegas99@gmail.com> Co-authored-by: Alan <alannnc@gmail.com> Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com> * Tooltip Provider - Wrapper due to dep upgrade * public event type list darkmode * V2 Color changes to public booking * Remove unused component * Fix typecheck * Removed extra buttons on create ET dialog * ET edit page refactoring * Avoids form wrapping the whole Shell * Nitpicks Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: zomars <zomars@me.com> Co-authored-by: Hariom Balhara <hariombalhara@gmail.com> Co-authored-by: Julian Benegas <julianbenegas99@gmail.com> Co-authored-by: Alan <alannnc@gmail.com>
join-com · Aug 24, 2022 · 436f88a · 436f88a
1 parent c17e949
commit 436f88a
Show file tree

Hide file tree

Showing 152 changed files with 11,232 additions and 4,059 deletions.
diff --git a/apps/storybook/.storybook/main.js b/apps/storybook/.storybook/main.js
@@ -20,6 +20,10 @@ module.exports = {
      * @see https://github.com/storybookjs/storybook/issues/12844#issuecomment-867544160
      */
     config.resolve.roots = [path.resolve(__dirname, "../public"), "node_modules"];
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      "@/interfaces": path.resolve(__dirname, "../interfaces"),
+    };
 
     /**
      * Why webpack5... Just why?

diff --git a/apps/storybook/.storybook/preview.js b/apps/storybook/.storybook/preview.js
@@ -22,3 +22,13 @@ export const parameters = {
     Provider: RouterContext.Provider,
   },
 };
+
+window.getEmbedNamespace = () => {
+  const url = new URL(document.URL);
+  const namespace = url.searchParams.get("embed");
+  return namespace;
+};
+
+window.getEmbedTheme = () => {
+  return "auto";
+};
diff --git a/apps/storybook/package.json b/apps/storybook/package.json
@@ -34,15 +34,17 @@
   "devDependencies": {
     "@babel/core": "^7.18.9",
     "@calcom/config": "*",
-    "@storybook/addon-a11y": "^6.5.9",
-    "@storybook/addon-actions": "^6.5.9",
-    "@storybook/addon-essentials": "^6.5.9",
-    "@storybook/addon-interactions": "^6.5.9",
-    "@storybook/addon-links": "^6.5.9",
+    "@storybook/addon-a11y": "^6.5.10",
+    "@storybook/addon-actions": "^6.5.10",
+    "@storybook/addon-essentials": "^6.5.10",
+    "@storybook/addon-interactions": "^6.5.10",
+    "@storybook/addon-links": "^6.5.10",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/builder-webpack5": "^6.5.9",
-    "@storybook/manager-webpack5": "^6.5.9",
-    "@storybook/react": "^6.5.9",
+    "@storybook/builder-vite": "^0.2.2",
+    "@storybook/builder-webpack5": "^6.5.10",
+    "@storybook/manager-webpack5": "^6.5.10",
+    "@storybook/react": "^6.5.10",
+    "@tailwindcss/line-clamp": "^0.4.0",
     "@types/node": "16.9.1",
     "@types/react": "^18.0.9",
     "@types/react-dom": "18.0.4",

diff --git a/apps/storybook/stories/Avatar.stories.tsx b/apps/storybook/stories/Avatar.stories.tsx
@@ -1,6 +1,6 @@
 import { ComponentMeta } from "@storybook/react";
 
-import Avatar from "@calcom/ui/v2/Avatar";
+import Avatar from "@calcom/ui/v2/core/Avatar";
 
 export default {
   title: "Avatar",

diff --git a/apps/storybook/stories/AvatarGroup.stories.tsx b/apps/storybook/stories/AvatarGroup.stories.tsx
@@ -1,7 +1,6 @@
 import { ComponentMeta } from "@storybook/react";
 
-import Avatar from "@calcom/ui/v2/Avatar";
-import AvatarGroup from "@calcom/ui/v2/AvatarGroup";
+import AvatarGroup from "@calcom/ui/v2/core/AvatarGroup";
 
 export default {
   title: "Avatar/Group",

diff --git a/apps/storybook/stories/Badge.stories.tsx b/apps/storybook/stories/Badge.stories.tsx
@@ -1,7 +1,7 @@
 import { ComponentMeta } from "@storybook/react";
 import { Bell } from "react-feather";
 
-import { Badge } from "@calcom/ui/v2";
+import Badge from "@calcom/ui/v2/core/Badge";
 
 export default {
   title: "Badge",

diff --git a/apps/storybook/stories/Banner.stories.tsx b/apps/storybook/stories/Banner.stories.tsx
@@ -1,7 +1,7 @@
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 import { Info } from "react-feather";
 
-import { Banner } from "@calcom/ui/v2";
+import Banner from "@calcom/ui/v2/core/banner";
 
 export default {
   title: "Banner",

diff --git a/apps/storybook/stories/Breadcrumb.stories.tsx b/apps/storybook/stories/Breadcrumb.stories.tsx
@@ -1,6 +1,6 @@
 import { ComponentMeta } from "@storybook/react";
 
-import { Breadcrumb, BreadcrumbItem } from "@calcom/ui/v2";
+import Breadcrumb, { BreadcrumbItem } from "@calcom/ui/v2/core/Breadcrumb";
 
 export default {
   title: "Breadcrumbs",

diff --git a/apps/storybook/stories/Button.stories.tsx b/apps/storybook/stories/Button.stories.tsx
@@ -1,11 +1,12 @@
+import { TooltipProvider } from "@radix-ui/react-tooltip";
 import { ComponentMeta, ComponentStory } from "@storybook/react";
 import { Trash2 } from "react-feather";
 
-import { Button as ButtonComponent } from "@calcom/ui/v2";
+import Button from "@calcom/ui/v2/core/Button";
 
 export default {
   title: "Button",
-  component: ButtonComponent,
+  component: Button,
   argTypes: {
     color: {
       options: ["primary", "secondary", "minimal", "destructive"],
@@ -24,67 +25,69 @@ export default {
       control: { type: "radio" },
     },
   },
-} as ComponentMeta<typeof ButtonComponent>;
+} as ComponentMeta<typeof Button>;
 
-const Template: ComponentStory<typeof ButtonComponent> = (args) => <ButtonComponent {...args} />;
+const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
 
 export const All = () => (
   <div>
-    <h1>Primary</h1>
-    <div className="flex space-x-2">
-      <ButtonComponent aria-label="Button Text">Button Text</ButtonComponent>
-      <ButtonComponent disabled aria-label="Button Text">
-        Button Text
-      </ButtonComponent>
-    </div>
-    <h1>Secondary</h1>
-    <div className="flex space-x-2">
-      <ButtonComponent color="secondary" aria-label="Button Text">
-        Button Text
-      </ButtonComponent>
-      <ButtonComponent disabled color="secondary" aria-label="Button Text">
-        Button Text
-      </ButtonComponent>
-      <ButtonComponent size="icon" color="secondary" StartIcon={Trash2} aria-label="Button Text" />
-    </div>
-    <h1>Minimal</h1>
-    <div className="flex">
-      <ButtonComponent color="minimal" aria-label="Button Text">
-        Button Text
-      </ButtonComponent>
-      <ButtonComponent disabled color="minimal" aria-label="Button Text">
-        Button Text
-      </ButtonComponent>
-      <ButtonComponent size="icon" color="minimal" StartIcon={Trash2} aria-label="Button Text" />
-    </div>
-    <h1>Destructive</h1>
-    <ButtonComponent size="icon" color="destructive" StartIcon={Trash2} aria-label="Button Text" />
-    <h1>Tooltip</h1>
-    <ButtonComponent
-      tooltip="Deletes EventTypes"
-      size="icon"
-      color="destructive"
-      StartIcon={Trash2}
-      aria-label="Button Text"
-    />
+    <TooltipProvider>
+      <h1>Primary</h1>
+      <div className="flex space-x-2">
+        <Button aria-label="Button Text">Button Text</Button>
+        <Button disabled aria-label="Button Text">
+          Button Text
+        </Button>
+      </div>
+      <h1>Secondary</h1>
+      <div className="flex space-x-2">
+        <Button color="secondary" aria-label="Button Text">
+          Button Text
+        </Button>
+        <Button disabled color="secondary" aria-label="Button Text">
+          Button Text
+        </Button>
+        <Button size="icon" color="secondary" StartIcon={Trash2} aria-label="Button Text" />
+      </div>
+      <h1>Minimal</h1>
+      <div className="flex">
+        <Button color="minimal" aria-label="Button Text">
+          Button Text
+        </Button>
+        <Button disabled color="minimal" aria-label="Button Text">
+          Button Text
+        </Button>
+        <Button size="icon" color="minimal" StartIcon={Trash2} aria-label="Button Text" />
+      </div>
+      <h1>Destructive</h1>
+      <Button size="icon" color="destructive" StartIcon={Trash2} aria-label="Button Text" />
+      <h1>Tooltip</h1>
+      <Button
+        tooltip="Deletes EventTypes"
+        size="icon"
+        color="destructive"
+        StartIcon={Trash2}
+        aria-label="Button Text"
+      />
+    </TooltipProvider>
   </div>
 );
 
-export const Button = Template.bind({});
-Button.args = {
+export const Default = Template.bind({});
+Default.args = {
   color: "primary",
   children: "Button Text",
 };
 
 export const Disabled = Template.bind({});
 Disabled.args = {
-  ...Button.args,
+  ...Default.args,
   disabled: true,
 };
 
 export const Loading = Template.bind({});
 Loading.args = {
-  ...Button.args,
+  ...Default.args,
   loading: true,
 };
 export const Icon = Template.bind({});

diff --git a/apps/storybook/stories/ButtonGroup.stories.tsx b/apps/storybook/stories/ButtonGroup.stories.tsx
@@ -1,7 +1,9 @@
+import { TooltipProvider } from "@radix-ui/react-tooltip";
 import { ComponentMeta } from "@storybook/react";
 import { ArrowLeft, ArrowRight, Clipboard, Navigation2, Trash2 } from "react-feather";
 
-import { Button, ButtonGroup } from "@calcom/ui/v2";
+import Button from "@calcom/ui/v2/core/Button";
+import ButtonGroup from "@calcom/ui/v2/core/ButtonGroup";
 
 export default {
   title: "Button Group",
@@ -10,22 +12,26 @@ export default {
 
 export const Default = () => (
   <ButtonGroup>
-    <Button StartIcon={Trash2} size="icon" color="secondary" />
-    <Button StartIcon={Navigation2} size="icon" color="secondary" />
-    <Button StartIcon={Clipboard} size="icon" color="secondary" />
+    <TooltipProvider>
+      <Button StartIcon={Trash2} size="icon" color="secondary" />
+      <Button StartIcon={Navigation2} size="icon" color="secondary" />
+      <Button StartIcon={Clipboard} size="icon" color="secondary" />
+    </TooltipProvider>
   </ButtonGroup>
 );
 
 export const Combined = () => (
   <div className="flex flex-col space-y-2">
-    <ButtonGroup combined>
-      <Button StartIcon={Trash2} size="icon" color="secondary" combined />
-      <Button StartIcon={Navigation2} size="icon" color="secondary" combined />
-      <Button StartIcon={Clipboard} size="icon" color="secondary" combined />
-    </ButtonGroup>
-    <ButtonGroup combined>
-      <Button StartIcon={ArrowLeft} size="icon" color="secondary" combined />
-      <Button StartIcon={ArrowRight} size="icon" color="secondary" combined />
-    </ButtonGroup>
+    <TooltipProvider>
+      <ButtonGroup combined>
+        <Button StartIcon={Trash2} size="icon" color="secondary" combined />
+        <Button StartIcon={Navigation2} size="icon" color="secondary" combined />
+        <Button StartIcon={Clipboard} size="icon" color="secondary" combined />
+      </ButtonGroup>
+      <ButtonGroup combined>
+        <Button StartIcon={ArrowLeft} size="icon" color="secondary" combined />
+        <Button StartIcon={ArrowRight} size="icon" color="secondary" combined />
+      </ButtonGroup>
+    </TooltipProvider>
   </div>
 );
diff --git a/apps/storybook/stories/Cards.stories.tsx b/apps/storybook/stories/Cards.stories.tsx
@@ -1,6 +1,7 @@
 import { ComponentMeta } from "@storybook/react";
+import { useState } from "react";
 
-import { BaseCardProps, Card } from "@calcom/ui/v2/Card";
+import Card, { BaseCardProps } from "@calcom/ui/v2/core/Card";
 
 export default {
   title: "Cards",
@@ -51,3 +52,28 @@ export const AppStore = () => {
     </div>
   );
 };
+
+const sidebarCardProps: BaseCardProps = {
+  variant: "SidebarCard",
+  thumbnailUrl: "https://img.youtube.com/vi/60HJt8DOVNo/0.jpg",
+  mediaLink: "https://www.youtube.com/watch?v=60HJt8DOVNo",
+  title: "Dynamic boooking links",
+  description: "Booking link that allows people to quickly schedule meetings.",
+  learnMore: {
+    href: "https://cal.com/blog/cal-v-1-9",
+    text: "Learn more",
+  },
+};
+
+export const SidebarCard = () => {
+  const [visible, setVisible] = useState(true); // save state in localStorage, cookie or db
+  return (
+    <header className="w-full max-w-[225px] bg-gray-100 p-3">
+      {visible && (
+        <div>
+          <Card {...sidebarCardProps} actionButton={{ onClick: () => setVisible(false), child: "Dismiss" }} />
+        </div>
+      )}
+    </header>
+  );
+};
diff --git a/apps/storybook/stories/Checkbox.stories.tsx b/apps/storybook/stories/Checkbox.stories.tsx
@@ -1,6 +1,6 @@
 import { ComponentMeta } from "@storybook/react";
 
-import { Checkbox } from "@calcom/ui/v2";
+import Checkbox from "@calcom/ui/v2/core/form/Checkbox";
 
 export default {
   title: "Checkbox",

diff --git a/apps/storybook/stories/Colors.stories.tsx b/apps/storybook/stories/Colors.stories.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 
-import ColorPicker from "@calcom/ui/v2/colorpicker";
+import ColorPicker from "@calcom/ui/v2/core/colorpicker";
 
 // eslint-disable-next-line import/no-anonymous-default-export
 export default {

diff --git a/apps/storybook/stories/DatePicker.stories.tsx b/apps/storybook/stories/DatePicker.stories.tsx
@@ -1,17 +1,17 @@
 import { useState } from "react";
 
-import DatePicker from "@calcom/ui/v2/booker/DatePicker";
+import DatePicker from "@calcom/ui/v2/modules/booker/DatePicker";
 
 export default {
   title: "Datepicker",
   component: DatePicker,
 };
 
 export const Default = () => {
-  const [selected, setSelected] = useState<Date | undefined>(undefined);
+  const [selected, setSelected] = useState<Date>(new Date());
   return (
     <div style={{ width: "455px" }}>
-      <DatePicker selected={selected} onChange={setSelected} locale="en" />
+      {/* <DatePicker selected={selected} onChange={setSelected} locale="en" /> */}
     </div>
   );
 };
diff --git a/apps/storybook/stories/EmptyScreen.stories.tsx b/apps/storybook/stories/EmptyScreen.stories.tsx
@@ -1,25 +1,25 @@
 import { ComponentMeta } from "@storybook/react";
 import { Bell } from "react-feather";
 
-import { EmptyScreen as EmptyScreenPattern } from "@calcom/ui/v2";
+import EmptyScreen from "@calcom/ui/v2/core/EmptyScreen";
 
 export default {
   title: "pattern/Empty Screen",
-  component: EmptyScreenPattern,
+  component: EmptyScreen,
   decorators: [
     (Story) => (
       <div className="flex items-center justify-center">
         <Story />
       </div>
     ),
   ],
-} as ComponentMeta<typeof EmptyScreenPattern>;
+} as ComponentMeta<typeof EmptyScreen>;
 
-export const EmptyScreenS = () => (
-  <EmptyScreenPattern
+export const Default = () => (
+  <EmptyScreen
     Icon={Bell}
     headline="Empty State Header"
-    description="Ullamco dolor nulla sint nulla occaecat aliquip id elit fugiat et excepteur magna. Nisi tempor anim do tempor irure fugiat ad occaecat. Mollit ea eiusmod pariatur sunt deserunt eu eiusmod. Sit reprehenderit cupidatat consequat commodo in aliqua ea et. Et quis sit enim proident dolor mollit consectetur tempor dolore reprehenderit consequat adipisicing reprehenderit officia. Sint eu sunt fugiat laborum Lorem irure aute nulla et. Do non in enim ipsum ea."
+    description="Ullamco dolor nulla sint nulla occaecat aliquip id elit fugiat et excepteur magna. Nisi tempor anim do tempor irure fugiat ad occaecat. Mollit ea eiusmod pariatur sunt deserunt eu eiusmod. Sit reprehenderit "
     buttonText="Veniam ut ipsum"
     buttonOnClick={() => console.log("Button Clicked")}
   />

diff --git a/apps/storybook/stories/FormStep.stories.tsx b/apps/storybook/stories/FormStep.stories.tsx
@@ -1,7 +1,7 @@
 import { ComponentMeta } from "@storybook/react";
 import { useState } from "react";
 
-import { FormStep } from "@calcom/ui/v2";
+import FormStep from "@calcom/ui/v2/core/form/FormStep";
 
 export default {
   title: "Form Step",