Move Skeleton to ui/components (#6247)

* Inital Move

* Skeleton story

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";

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 './';
+
+<Meta title="UI/Skeleton" component={Skeleton} />
+
+<Title title="Skeleton" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022"/>
+
+
+## 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>

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";

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 */
 

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({

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,

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 = "",

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";

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;

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;