From 112d50414895c28c121fa387968d781a1101610d Mon Sep 17 00:00:00 2001 From: sean-brydon <55134778+sean-brydon@users.noreply.github.com> Date: Mon, 9 Jan 2023 13:57:12 +0000 Subject: [PATCH] Chor/v2 UI tidy - Dialog & Toasts (#6307) * Dialog Tidyup * Move toasts Co-authored-by: Peer Richelsen Co-authored-by: Peer Richelsen --- .../settings}/TimezoneChangeDialog.tsx | 4 +- packages/ui/components/apps/AppCard.tsx | 3 +- .../dialog}/ConfirmationDialogContent.tsx | 4 +- .../{v2/core => components/dialog}/Dialog.tsx | 0 packages/ui/components/dialog/index.ts | 4 + packages/ui/components/index.ts | 11 +++ packages/ui/components/toast/index.tsx | 1 + packages/ui/components/toast/showToast.tsx | 76 +++++++++++++++++++ .../ui/components/toast/toast.stories.mdx | 33 ++++++++ packages/ui/form/fields.tsx | 3 +- packages/ui/index.tsx | 22 +++--- packages/ui/v2/core/Shell.tsx | 2 +- packages/ui/v2/core/index.ts | 3 - packages/ui/v2/core/notifications.tsx | 70 ----------------- 14 files changed, 141 insertions(+), 95 deletions(-) rename packages/{ui => features/settings}/TimezoneChangeDialog.tsx (96%) rename packages/ui/{v2/core => components/dialog}/ConfirmationDialogContent.tsx (93%) rename packages/ui/{v2/core => components/dialog}/Dialog.tsx (100%) create mode 100644 packages/ui/components/dialog/index.ts create mode 100644 packages/ui/components/toast/index.tsx create mode 100644 packages/ui/components/toast/showToast.tsx create mode 100644 packages/ui/components/toast/toast.stories.mdx delete mode 100644 packages/ui/v2/core/notifications.tsx diff --git a/packages/ui/TimezoneChangeDialog.tsx b/packages/features/settings/TimezoneChangeDialog.tsx similarity index 96% rename from packages/ui/TimezoneChangeDialog.tsx rename to packages/features/settings/TimezoneChangeDialog.tsx index 1eb436681b..d6da7baf9e 100644 --- a/packages/ui/TimezoneChangeDialog.tsx +++ b/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(); diff --git a/packages/ui/components/apps/AppCard.tsx b/packages/ui/components/apps/AppCard.tsx index a4e7821155..2285fb0414 100644 --- a/packages/ui/components/apps/AppCard.tsx +++ b/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; diff --git a/packages/ui/v2/core/ConfirmationDialogContent.tsx b/packages/ui/components/dialog/ConfirmationDialogContent.tsx similarity index 93% rename from packages/ui/v2/core/ConfirmationDialogContent.tsx rename to packages/ui/components/dialog/ConfirmationDialogContent.tsx index 1593884072..68fbe634c5 100644 --- a/packages/ui/v2/core/ConfirmationDialogContent.tsx +++ b/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) { +export function ConfirmationDialogContent(props: PropsWithChildren) { const { t } = useLocale(); const { title, diff --git a/packages/ui/v2/core/Dialog.tsx b/packages/ui/components/dialog/Dialog.tsx similarity index 100% rename from packages/ui/v2/core/Dialog.tsx rename to packages/ui/components/dialog/Dialog.tsx diff --git a/packages/ui/components/dialog/index.ts b/packages/ui/components/dialog/index.ts new file mode 100644 index 0000000000..498f50b4be --- /dev/null +++ b/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"; diff --git a/packages/ui/components/index.ts b/packages/ui/components/index.ts index 4ae298f859..0c14455472 100644 --- a/packages/ui/components/index.ts +++ b/packages/ui/components/index.ts @@ -56,3 +56,14 @@ export { List, ListItem, ListItemText, ListItemTitle, ListLinkItem } from "./lis export type { ListItemProps, ListProps } from "./list"; export { HeadSeo } from "./head-seo"; export { Skeleton, SkeletonAvatar, SkeletonButton, SkeletonContainer, SkeletonText } from "./skeleton"; +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 diff --git a/packages/ui/components/toast/index.tsx b/packages/ui/components/toast/index.tsx new file mode 100644 index 0000000000..817b1a9e97 --- /dev/null +++ b/packages/ui/components/toast/index.tsx @@ -0,0 +1 @@ +export { DefaultToast, ErrorToast, SuccessToast, WarningToast, showToast } from "./showToast"; diff --git a/packages/ui/components/toast/showToast.tsx b/packages/ui/components/toast/showToast.tsx new file mode 100644 index 0000000000..7b2b5e8761 --- /dev/null +++ b/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) => ( +
+ +

{message}

+
+); + +export const ErrorToast = ({ message, toastVisible }: IToast) => ( +
+ +

{message}

+
+); + +export const WarningToast = ({ message, toastVisible }: IToast) => ( +
+ +

{message}

+
+); + +export const DefaultToast = ({ message, toastVisible }: IToast) => ( +
+ +

{message}

+
+); + +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) => , { duration }); + break; + case "error": + toast.custom((t) => , { duration }); + break; + case "warning": + toast.custom((t) => , { duration }); + break; + default: + toast.custom((t) => , { duration }); + break; + } +} diff --git a/packages/ui/components/toast/toast.stories.mdx b/packages/ui/components/toast/toast.stories.mdx new file mode 100644 index 0000000000..da6edd501d --- /dev/null +++ b/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 './'; + + + + + + +## 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> diff --git a/packages/ui/form/fields.tsx b/packages/ui/form/fields.tsx index 7830aa1eca..8e1cb4d0dd 100644 --- a/packages/ui/form/fields.tsx +++ b/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 }; diff --git a/packages/ui/index.tsx b/packages/ui/index.tsx index 51af1629be..69e9a82445 100644 --- a/packages/ui/index.tsx +++ b/packages/ui/index.tsx @@ -57,6 +57,14 @@ export { AppStoreCategories, Slider, useShouldShowArrows, + Dialog, + DialogClose, + DialogContent, + DialogFooter, + DialogHeader, + DialogTrigger, + ConfirmationDialogContent, + showToast, } from "./components"; export type { ActionType, @@ -65,6 +73,8 @@ export type { BadgeProps, ButtonBaseProps, ButtonProps, + DialogProps, + ConfirmationDialogContentProps, ITimezone, ITimezoneOption, ListItemProps, @@ -77,12 +87,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, @@ -94,16 +102,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, diff --git a/packages/ui/v2/core/Shell.tsx b/packages/ui/v2/core/Shell.tsx index 8909da9200..3ed241f4d9 100644 --- a/packages/ui/v2/core/Shell.tsx +++ b/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"; diff --git a/packages/ui/v2/core/index.ts b/packages/ui/v2/core/index.ts index 12170000c0..e64580de63 100644 --- a/packages/ui/v2/core/index.ts +++ b/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"; diff --git a/packages/ui/v2/core/notifications.tsx b/packages/ui/v2/core/notifications.tsx deleted file mode 100644 index 8eae80cf0f..0000000000 --- a/packages/ui/v2/core/notifications.tsx +++ /dev/null @@ -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;