Move Skeleton to ui/components (#6247)

* Inital Move

* Skeleton story

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;

packages/ui/v2/core/skeleton/index.tsx

@@ -1,96 +0,0 @@
-import React from "react";
-
-import classNames from "@calcom/lib/classNames";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-
-type SkeletonBaseProps = {
-  className?: string;
-};
-
-interface SkeletonContainer {
-  as?: keyof JSX.IntrinsicElements;
-  children?: React.ReactNode;
-  className?: string;
-}
-
-const SkeletonAvatar: React.FC<SkeletonBaseProps> = ({ className }) => {
-  return <div className={classNames(`mt-1 rounded-full bg-gray-200 ltr:mr-2 rtl:ml-2`, className)} />;
-};
-
-type SkeletonProps<T> = {
-  as: keyof JSX.IntrinsicElements | React.FC;
-  className?: string;
-  children: React.ReactNode;
-  loading?: boolean;
-  waitForTranslation?: boolean;
-  loadingClassName?: string;
-} & (T extends React.FC<infer P>
-  ? P
-  : T extends keyof JSX.IntrinsicElements
-  ? JSX.IntrinsicElements[T]
-  : never);
-
-const Skeleton = <T extends keyof JSX.IntrinsicElements | React.FC>({
-  as,
-  className = "",
-  children,
-  loading = false,
-  /**
-   * Assumes that the text needs translation by default and wait for it.
-   */
-  waitForTranslation = true,
-  /**
-   * Classes that you need only in loading state
-   */
-  loadingClassName = "",
-  ...rest
-}: SkeletonProps<T>) => {
-  const { isLocaleReady } = useLocale();
-  loading = (waitForTranslation ? !isLocaleReady : false) || loading;
-  const Component = as;
-  return (
-    <Component
-      className={classNames(
-        loading
-          ? classNames(
-              "font-size-0 dark:white-300 animate-pulse rounded-md bg-gray-300 text-transparent",
-              loadingClassName
-            )
-          : "",
-        className
-      )}
-      {...rest}>
-      {children}
-    </Component>
-  );
-};
-
-const SkeletonText: React.FC<SkeletonBaseProps & { invisible?: boolean }> = ({
-  className = "",
-  invisible = false,
-}) => {
-  return (
-    <span
-      className={classNames(
-        `font-size-0 dark:white-300 inline-block animate-pulse rounded-md bg-gray-300 empty:before:inline-block empty:before:content-['']`,
-        className,
-        invisible ? "invisible" : ""
-      )}
-    />
-  );
-};
-
-const SkeletonButton: React.FC<SkeletonBaseProps> = ({ className }) => {
-  return (
-    <SkeletonContainer>
-      <div className={classNames(`rounded-md bg-gray-200`, className)} />
-    </SkeletonContainer>
-  );
-};
-
-const SkeletonContainer: React.FC<SkeletonContainer> = ({ children, as, className }) => {
-  const Component = as || "div";
-  return <Component className={classNames("animate-pulse", className)}>{children}</Component>;
-};
-
-export { Skeleton, SkeletonAvatar, SkeletonText, SkeletonButton, SkeletonContainer };