From d9da311141dee02afb7e2eecd2f3cfa3d09f3def Mon Sep 17 00:00:00 2001 From: sean-brydon <55134778+sean-brydon@users.noreply.github.com> Date: Tue, 3 Jan 2023 15:54:00 +0000 Subject: [PATCH] Move Skeleton to ui/components (#6247) * Inital Move * Skeleton story --- packages/ui/components/index.ts | 1 + .../core => components}/skeleton/index.tsx | 0 .../components/skeleton/skeleton.stories.mdx | 36 +++++++++++++++++++ packages/ui/index.tsx | 10 +++--- packages/ui/v2/core/Shell.tsx | 2 +- packages/ui/v2/core/apps/Categories.tsx | 2 +- packages/ui/v2/core/apps/SkeletonLoader.tsx | 2 +- packages/ui/v2/core/apps/Slider.tsx | 2 +- packages/ui/v2/core/index.ts | 1 - .../navigation/tabs/HorizontalTabItem.tsx | 2 +- .../core/navigation/tabs/VerticalTabItem.tsx | 2 +- 11 files changed, 48 insertions(+), 12 deletions(-) rename packages/ui/{v2/core => components}/skeleton/index.tsx (100%) create mode 100644 packages/ui/components/skeleton/skeleton.stories.mdx diff --git a/packages/ui/components/index.ts b/packages/ui/components/index.ts index 8f4052d423..18cb5ac874 100644 --- a/packages/ui/components/index.ts +++ b/packages/ui/components/index.ts @@ -32,3 +32,4 @@ export type { TopBannerProps } from "./top-banner"; export { AnimatedPopover } from "./popover/index"; export { TableActions, DropdownActions } from "./table/TableActions"; export type { ActionType } from "./table/TableActions"; +export { Skeleton, SkeletonAvatar, SkeletonButton, SkeletonContainer, SkeletonText } from "./skeleton"; diff --git a/packages/ui/v2/core/skeleton/index.tsx b/packages/ui/components/skeleton/index.tsx similarity index 100% rename from packages/ui/v2/core/skeleton/index.tsx rename to packages/ui/components/skeleton/index.tsx diff --git a/packages/ui/components/skeleton/skeleton.stories.mdx b/packages/ui/components/skeleton/skeleton.stories.mdx new file mode 100644 index 0000000000..d563d8c6e4 --- /dev/null +++ b/packages/ui/components/skeleton/skeleton.stories.mdx @@ -0,0 +1,36 @@ +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 { Skeleton, SkeletonAvatar, SkeletonText, SkeletonButton, SkeletonContainer } from './'; + + + + + + +## Definition +Skeletons are used as a placeholder to the content while the content is being loaded. It is used to improve the user experience by providing a visual cue that the content is loading. + +## Structure + +<CustomArgsTable of={Skeleton} /> + + +<Examples title="Skeleton Avatar" > + <Example title="Primary"> + <SkeletonAvatar className="h-8 w-8" /> + </Example> +</Examples> + +<Examples title="Skeleton Text" > + <Example title="Primary"> + <SkeletonText className="h-4 w-32"/> + </Example> +</Examples> + +<Examples title="Skeleton Button" > + <Example title="Primary"> + <SkeletonButton className="h-8 w-32"/> + </Example> +</Examples> diff --git a/packages/ui/index.tsx b/packages/ui/index.tsx index 29f3a2a27e..f137c4429d 100644 --- a/packages/ui/index.tsx +++ b/packages/ui/index.tsx @@ -29,6 +29,11 @@ export { SelectField, SelectWithValidation, TableActions, + Skeleton, + SkeletonAvatar, + SkeletonText, + SkeletonButton, + SkeletonContainer, DropdownActions, } from "./components"; export type { ActionType } from "./components"; @@ -50,10 +55,6 @@ export { HorizontalTabs, SettingsToggle, showToast, - SkeletonAvatar, - SkeletonButton, - SkeletonContainer, - SkeletonText, Swatch, Switch, Card, @@ -108,7 +109,6 @@ export { List, ListItem, ListItemText, ListItemTitle, ListLinkItem } from "./v2/ export { default as MeetingTimeInTimezones } from "./v2/core/MeetingTimeInTimezones"; export { default as Meta, MetaProvider } from "./v2/core/Meta"; export { MobileNavigationMoreItems, ShellSubHeading } from "./v2/core/Shell"; -export { Skeleton } from "./v2/core/skeleton"; export { StepCard } from "./v2/core/StepCard"; export { default as Stepper } from "./v2/core/Stepper"; export { Steps } from "./v2/core/Steps"; diff --git a/packages/ui/v2/core/Shell.tsx b/packages/ui/v2/core/Shell.tsx index 0f65de5c8f..9cd239513d 100644 --- a/packages/ui/v2/core/Shell.tsx +++ b/packages/ui/v2/core/Shell.tsx @@ -38,9 +38,9 @@ import { import ErrorBoundary from "../../ErrorBoundary"; import { KBarContent, KBarRoot, KBarTrigger } from "../../Kbar"; import Logo from "../../Logo"; +import { SkeletonText } from "../../components/skeleton"; import Credits from "./Credits"; import HeadSeo from "./head-seo"; -import { SkeletonText } from "./skeleton"; /* TODO: Migate this */ diff --git a/packages/ui/v2/core/apps/Categories.tsx b/packages/ui/v2/core/apps/Categories.tsx index 28f662e867..3d2b9184f2 100644 --- a/packages/ui/v2/core/apps/Categories.tsx +++ b/packages/ui/v2/core/apps/Categories.tsx @@ -3,7 +3,7 @@ import Link from "next/link"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { Icon } from "@calcom/ui"; -import { SkeletonText } from "../skeleton"; +import { SkeletonText } from "../../../components/skeleton"; import Slider from "./Slider"; export default function AppStoreCategories({ diff --git a/packages/ui/v2/core/apps/SkeletonLoader.tsx b/packages/ui/v2/core/apps/SkeletonLoader.tsx index f9c56e2615..2538d31ab7 100644 --- a/packages/ui/v2/core/apps/SkeletonLoader.tsx +++ b/packages/ui/v2/core/apps/SkeletonLoader.tsx @@ -1,6 +1,6 @@ +import { SkeletonText } from "../../../components/skeleton"; import Meta from "../Meta"; import { ShellSubHeading } from "../Shell"; -import { SkeletonText } from "../skeleton"; function SkeletonLoader({ className, diff --git a/packages/ui/v2/core/apps/Slider.tsx b/packages/ui/v2/core/apps/Slider.tsx index 143e809489..21d8bb4889 100644 --- a/packages/ui/v2/core/apps/Slider.tsx +++ b/packages/ui/v2/core/apps/Slider.tsx @@ -6,7 +6,7 @@ import { useEffect, useRef } from "react"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { Icon } from "../../.."; -import { SkeletonText } from "../skeleton"; +import { SkeletonText } from "../../../components/skeleton"; const Slider = <T extends string | unknown>({ title = "", diff --git a/packages/ui/v2/core/index.ts b/packages/ui/v2/core/index.ts index 4665f51dc5..776cbee152 100644 --- a/packages/ui/v2/core/index.ts +++ b/packages/ui/v2/core/index.ts @@ -39,7 +39,6 @@ export { Portal } from "./Portal"; export { Segment, SegmentOption } from "./Segment"; export { default as SettingsToggle } from "./SettingsToggle"; export { default as Shell } from "./Shell"; -export { Skeleton, SkeletonAvatar, SkeletonButton, SkeletonContainer, SkeletonText } from "./skeleton"; export { default as Stepper } from "./Stepper"; export { default as Swatch } from "./Swatch"; export { default as Switch } from "./Switch"; diff --git a/packages/ui/v2/core/navigation/tabs/HorizontalTabItem.tsx b/packages/ui/v2/core/navigation/tabs/HorizontalTabItem.tsx index 1a432078c8..7df96b8fdd 100644 --- a/packages/ui/v2/core/navigation/tabs/HorizontalTabItem.tsx +++ b/packages/ui/v2/core/navigation/tabs/HorizontalTabItem.tsx @@ -6,7 +6,7 @@ import classNames from "@calcom/lib/classNames"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { SVGComponent } from "@calcom/types/SVGComponent"; -import { SkeletonText } from "../../skeleton"; +import { SkeletonText } from "../../../../components/skeleton"; export type HorizontalTabItemProps = { name: string; diff --git a/packages/ui/v2/core/navigation/tabs/VerticalTabItem.tsx b/packages/ui/v2/core/navigation/tabs/VerticalTabItem.tsx index 66717b40fe..6fcd0678c1 100644 --- a/packages/ui/v2/core/navigation/tabs/VerticalTabItem.tsx +++ b/packages/ui/v2/core/navigation/tabs/VerticalTabItem.tsx @@ -7,7 +7,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale"; import { SVGComponent } from "@calcom/types/SVGComponent"; import { Icon } from "../../../.."; -import { Skeleton } from "../../skeleton"; +import { Skeleton } from "../../../../components/skeleton"; export type VerticalTabItemProps = { name: string;