Merge branch 'main' into fix/reusable-wysiwyg

packages/features/settings/TimezoneChangeDialog.tsx

@@ -4,9 +4,7 @@ import { useEffect, useState } from "react";
 import dayjs from "@calcom/dayjs";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-
-import { showToast } from ".";
-import { Dialog, DialogClose, DialogContent, DialogFooter } from "../ui/v2";
+import { Dialog, DialogClose, DialogContent, DialogFooter, showToast } from "@calcom/ui";
 
 export default function TimezoneChangeDialog() {
   const { t } = useLocale();

packages/ui/components/apps/AppCard.tsx

@@ -7,8 +7,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { AppFrontendPayload as App } from "@calcom/types/App";
 import type { CredentialFrontendPayload as Credential } from "@calcom/types/Credential";
 
-import { Button, Icon } from "../..";
-import { showToast } from "../../v2/core/notifications";
+import { Button, Icon, showToast } from "../..";
 
 interface AppCardProps {
   app: App;

packages/ui/components/dialog/ConfirmationDialogContent.tsx

@@ -3,7 +3,7 @@ import React, { PropsWithChildren, ReactNode } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
-import { Icon } from "../../components/icon";
+import { Icon } from "../icon";
 import { DialogClose, DialogContent } from "./Dialog";
 
 export type ConfirmationDialogContentProps = {
@@ -17,7 +17,7 @@ export type ConfirmationDialogContentProps = {
   variety?: "danger" | "warning" | "success";
 };
 
-export default function ConfirmationDialogContent(props: PropsWithChildren<ConfirmationDialogContentProps>) {
+export function ConfirmationDialogContent(props: PropsWithChildren<ConfirmationDialogContentProps>) {
   const { t } = useLocale();
   const {
     title,

packages/ui/components/dialog/index.ts

@@ -0,0 +1,4 @@
+export { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader, DialogTrigger } from "./Dialog";
+export { ConfirmationDialogContent } from "./ConfirmationDialogContent";
+export type { ConfirmationDialogContentProps } from "./ConfirmationDialogContent";
+export type { DialogProps } from "./Dialog";

packages/ui/components/index.ts

@@ -57,3 +57,14 @@ export type { ListItemProps, ListProps } from "./list";
 export { HeadSeo } from "./head-seo";
 export { Skeleton, SkeletonAvatar, SkeletonButton, SkeletonContainer, SkeletonText } from "./skeleton";
 export { Editor, AddVariablesDropdown } from "./editor";
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTrigger,
+  ConfirmationDialogContent,
+} from "./dialog";
+export type { DialogProps, ConfirmationDialogContentProps } from "./dialog";
+export { showToast } from "./toast"; // We don't export the toast components as they are only used in local storybook file

packages/ui/components/toast/index.tsx

@@ -0,0 +1 @@
+export { DefaultToast, ErrorToast, SuccessToast, WarningToast, showToast } from "./showToast";

packages/ui/components/toast/showToast.tsx

@@ -0,0 +1,76 @@
+import classNames from "classnames";
+import toast from "react-hot-toast";
+
+import { Icon } from "@calcom/ui";
+
+type IToast = {
+  message: string;
+  toastVisible: boolean;
+};
+
+export const SuccessToast = ({ message, toastVisible }: IToast) => (
+  <div
+    className={classNames(
+      "data-testid-toast-success bg-brand-500 mb-2 flex h-9 items-center space-x-2 rounded-md p-3 text-sm font-semibold text-white shadow-md rtl:space-x-reverse",
+      toastVisible && "animate-fade-in-up"
+    )}>
+    <Icon.FiCheck className="h-4 w-4" />
+    <p>{message}</p>
+  </div>
+);
+
+export const ErrorToast = ({ message, toastVisible }: IToast) => (
+  <div
+    className={classNames(
+      "animate-fade-in-up mb-2 flex h-9 items-center space-x-2 rounded-md bg-red-100 p-3 text-sm font-semibold text-red-900 shadow-md rtl:space-x-reverse",
+      toastVisible && "animate-fade-in-up"
+    )}>
+    <Icon.FiInfo className="h-4 w-4" />
+    <p>{message}</p>
+  </div>
+);
+
+export const WarningToast = ({ message, toastVisible }: IToast) => (
+  <div
+    className={classNames(
+      "animate-fade-in-up bg-brand-500 mb-2 flex h-9 items-center space-x-2 rounded-md p-3 text-sm font-semibold text-white shadow-md rtl:space-x-reverse",
+      toastVisible && "animate-fade-in-up"
+    )}>
+    <Icon.FiInfo className="h-4 w-4" />
+    <p>{message}</p>
+  </div>
+);
+
+export const DefaultToast = ({ message, toastVisible }: IToast) => (
+  <div
+    className={classNames(
+      "animate-fade-in-up bg-brand-500 mb-2 flex h-9 items-center space-x-2 rounded-md p-3 text-sm font-semibold text-white shadow-md rtl:space-x-reverse",
+      toastVisible && "animate-fade-in-up"
+    )}>
+    <Icon.FiCheck className="h-4 w-4" />
+    <p>{message}</p>
+  </div>
+);
+
+const TOAST_VISIBLE_DURATION = 6000;
+
+export function showToast(
+  message: string,
+  variant: "success" | "warning" | "error",
+  duration = TOAST_VISIBLE_DURATION
+) {
+  switch (variant) {
+    case "success":
+      toast.custom((t) => <SuccessToast message={message} toastVisible={t.visible} />, { duration });
+      break;
+    case "error":
+      toast.custom((t) => <ErrorToast message={message} toastVisible={t.visible} />, { duration });
+      break;
+    case "warning":
+      toast.custom((t) => <WarningToast message={message} toastVisible={t.visible} />, { duration });
+      break;
+    default:
+      toast.custom((t) => <DefaultToast message={message} toastVisible={t.visible} />, { duration });
+      break;
+  }
+}

packages/ui/components/toast/toast.stories.mdx

@@ -0,0 +1,33 @@
+import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
+import { Examples, Example, Note, Title, VariantsTable, VariantColumn, RowTitles, CustomArgsTable} from '@calcom/storybook/components'
+import { Icon } from "@calcom/ui";
+
+import { SuccessToast,ErrorToast,WarningToast,DefaultToast } from './';
+
+<Meta title="UI/Toasts" component={DefaultToast} />
+
+<Title title="Toasts" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022"/>
+
+
+## Definition
+Toasts are used to show an action has had a impact. If a user submits a form a toast should be shown to notify the user there has been a success
+
+## Structure
+
+<CustomArgsTable of={DefaultToast} />
+
+
+<Examples title="Toasts" >
+  <Example title="Default">
+    <DefaultToast  message="Default Toast" toastVisible={true}/>
+  </Example>
+  <Example title="Success">
+    <SuccessToast message="Success Toast" toastVisible={true}/>
+  </Example>
+  <Example title="Warning">
+    <WarningToast message="Warning Toast" toastVisible={true}/>
+  </Example>
+  <Example title="Error">
+    <ErrorToast message="Error Toast" toastVisible={true}/>
+  </Example>
+</Examples>

packages/ui/form/fields.tsx

@@ -6,8 +6,7 @@ import classNames from "@calcom/lib/classNames";
 import { getErrorFromUnknown } from "@calcom/lib/errors";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
-import { Alert } from "../components/alert";
-import { showToast } from "../v2/core/notifications";
+import { Alert, showToast } from "../components";
 
 type InputProps = Omit<JSX.IntrinsicElements["input"], "name"> & { name: string };
 

packages/ui/index.tsx

@@ -59,6 +59,14 @@ export {
   useShouldShowArrows,
   Editor,
   AddVariablesDropdown,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTrigger,
+  ConfirmationDialogContent,
+  showToast,
 } from "./components";
 export type {
   ActionType,
@@ -67,6 +75,8 @@ export type {
   BadgeProps,
   ButtonBaseProps,
   ButtonProps,
+  DialogProps,
+  ConfirmationDialogContentProps,
   ITimezone,
   ITimezoneOption,
   ListItemProps,
@@ -79,12 +89,10 @@ export { default as AddressInput } from "./form/AddressInputLazy";
 export { default as PhoneInput } from "./form/PhoneInputLazy";
 export { UnstyledSelect } from "./form/Select";
 export { default as Loader } from "./v2/core/Loader";
-export { default as TimezoneChangeDialog } from "./TimezoneChangeDialog";
 
 export {
   HorizontalTabs,
   SettingsToggle,
-  showToast,
   Swatch,
   Switch,
   Card,
@@ -96,16 +104,6 @@ export type { HorizontalTabItemProps, VerticalTabItemProps } from "./v2";
 export { default as Shell, ShellMain, MobileNavigationMoreItems, ShellSubHeading } from "./v2/core/Shell";
 
 export { default as ColorPicker } from "./v2/core/colorpicker";
-export { default as ConfirmationDialogContent } from "./v2/core/ConfirmationDialogContent";
-export {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTrigger,
-} from "./v2/core/Dialog";
-export type { DialogProps } from "./v2/core/Dialog";
 export {
   Dropdown,
   DropdownItem,

packages/ui/v2/core/Shell.tsx

@@ -12,6 +12,7 @@ import LicenseRequired from "@calcom/features/ee/common/components/v2/LicenseReq
 import ImpersonatingBanner from "@calcom/features/ee/impersonation/components/ImpersonatingBanner";
 import HelpMenuItem from "@calcom/features/ee/support/components/HelpMenuItem";
 import { TeamsUpgradeBanner } from "@calcom/features/ee/teams/components";
+import TimezoneChangeDialog from "@calcom/features/settings/TimezoneChangeDialog";
 import { Tips } from "@calcom/features/tips";
 import AdminPasswordBanner from "@calcom/features/users/components/AdminPasswordBanner";
 import CustomBranding from "@calcom/lib/CustomBranding";
@@ -32,7 +33,6 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
   showToast,
-  TimezoneChangeDialog,
 } from "../..";
 import { Logo, ErrorBoundary } from "../../components";
 import { Credits } from "../../components/credits";

packages/ui/v2/core/index.ts

@@ -1,8 +1,6 @@
 export { Card } from "./Card";
 export type { BaseCardProps } from "./Card";
 export { default as ColorPicker } from "./colorpicker";
-export { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader, DialogTrigger } from "./Dialog";
-export type { DialogProps } from "./Dialog";
 export {
   ButtonOrLink,
   Dropdown,
@@ -27,7 +25,6 @@ export type { HorizontalTabItemProps } from "./navigation/tabs/HorizontalTabItem
 export { default as HorizontalTabs, HorizontalTabItem } from "./navigation/tabs/HorizontalTabs";
 export type { VerticalTabItemProps } from "./navigation/tabs/VerticalTabItem";
 export { default as VerticalTabs, VerticalTabItem } from "./navigation/tabs/VerticalTabs";
-export { default as showToast } from "./notifications";
 export { default as SettingsToggle } from "./SettingsToggle";
 export { default as Shell } from "./Shell";
 export { default as Stepper } from "./Stepper";

packages/ui/v2/core/notifications.tsx

@@ -1,70 +0,0 @@
-import classNames from "classnames";
-import toast from "react-hot-toast";
-
-import { Icon } from "@calcom/ui";
-
-export function showToast(message: string, variant: "success" | "warning" | "error") {
-  switch (variant) {
-    case "success":
-      toast.custom(
-        (t) => (
-          <div
-            className={classNames(
-              "data-testid-toast-success bg-brand-500 mb-2 flex h-9 items-center space-x-2 rounded-md p-3 text-sm font-semibold text-white shadow-md rtl:space-x-reverse",
-              t.visible && "animate-fade-in-up"
-            )}>
-            <Icon.FiCheck className="h-4 w-4" />
-            <p>{message}</p>
-          </div>
-        ),
-        { duration: 6000 }
-      );
-      break;
-    case "error":
-      toast.custom(
-        (t) => (
-          <div
-            className={classNames(
-              "animate-fade-in-up mb-2 flex h-9 items-center space-x-2 rounded-md bg-red-100 p-3 text-sm font-semibold text-red-900 shadow-md rtl:space-x-reverse",
-              t.visible && "animate-fade-in-up"
-            )}>
-            <Icon.FiInfo className="h-4 w-4" />
-            <p>{message}</p>
-          </div>
-        ),
-        { duration: 6000 }
-      );
-      break;
-    case "warning":
-      toast.custom(
-        (t) => (
-          <div
-            className={classNames(
-              "animate-fade-in-up bg-brand-500 mb-2 flex h-9 items-center space-x-2 rounded-md p-3 text-sm font-semibold text-white shadow-md rtl:space-x-reverse",
-              t.visible && "animate-fade-in-up"
-            )}>
-            <Icon.FiInfo className="h-4 w-4" />
-            <p>{message}</p>
-          </div>
-        ),
-        { duration: 6000 }
-      );
-      break;
-    default:
-      toast.custom(
-        (t) => (
-          <div
-            className={classNames(
-              "animate-fade-in-up bg-brand-500 mb-2 flex h-9 items-center space-x-2 rounded-md p-3 text-sm font-semibold text-white shadow-md rtl:space-x-reverse",
-              t.visible && "animate-fade-in-up"
-            )}>
-            <Icon.FiCheck className="h-4 w-4" />
-            <p>{message}</p>
-          </div>
-        ),
-        { duration: 6000 }
-      );
-      break;
-  }
-}
-export default showToast;