Move Apps to ui/components (#6245)

* Move Apps to components * Update packages/features/ee/sso/page/teams-sso-view.tsx
2023-01-04 11:00:01 +00:00
parent 45d10a3bc4
commit b02c7e01d5
17 changed files with 143 additions and 38 deletions
@@ -15,7 +15,7 @@ import {
  List,
  ShellSubHeading,
  showToast,
-  SkeletonLoader,
+  AppSkeletonLoader as SkeletonLoader,
  Switch,
 } from "@calcom/ui";

@@ -17,7 +17,7 @@ import {
  InstalledAppsLayout,
  List,
  ShellSubHeading,
-  SkeletonLoader,
+  AppSkeletonLoader as SkeletonLoader,
 } from "@calcom/ui";

 import { QueryCell } from "@lib/QueryCell";
@@ -16,7 +16,7 @@ import {
  getSettingsLayout as getLayout,
  Icon,
  Meta,
-  SkeletonLoader,
+  AppSkeletonLoader as SkeletonLoader,
 } from "@calcom/ui";

 import { ssrInit } from "@server/lib/ssr";
@@ -18,7 +18,7 @@ import {
  Label,
  Meta,
  showToast,
-  SkeletonLoader,
+  AppSkeletonLoader as SkeletonLoader,
 } from "@calcom/ui";

 export default function SAMLConfiguration({ teamId }: { teamId: number | null }) {
@@ -2,7 +2,7 @@ import { useRouter } from "next/router";

 import { HOSTED_CAL_FEATURES } from "@calcom/lib/constants";
 import { trpc } from "@calcom/trpc/react";
-import { getSettingsLayout as getLayout, SkeletonLoader } from "@calcom/ui";
+import { getSettingsLayout as getLayout, AppSkeletonLoader } from "@calcom/ui";

 import SAMLConfiguration from "../components/SAMLConfiguration";

@@ -25,7 +25,7 @@ const SAMLSSO = () => {
  );

  if (isLoading) {
-    return <SkeletonLoader />;
+    return <AppSkeletonLoader />;
  }

  if (!team) {
@@ -8,8 +8,8 @@ import type { AppFrontendPayload as App } from "@calcom/types/App";
 import type { CredentialFrontendPayload as Credential } from "@calcom/types/Credential";
 import { Icon } from "@calcom/ui";

-import EmptyScreen from "../EmptyScreen";
-import AppCard from "./AppCard";
+import EmptyScreen from "../../v2/core/EmptyScreen";
+import { AppCard } from "./AppCard";

 export function useShouldShowArrows() {
  const ref = useRef<HTMLUListElement>(null);
@@ -129,7 +129,7 @@ function CategoryTab({ selectedCategory, categories, searchText }: CategoryTabPr
  );
 }

-export default function AllApps({ apps, searchText, categories }: AllAppsPropsType) {
+export function AllApps({ apps, searchText, categories }: AllAppsPropsType) {
  const router = useRouter();
  const { t } = useLocale();
  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
@@ -7,8 +7,8 @@ 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 "../notifications";
+import { Button, Icon } from "../..";
+import { showToast } from "../../v2/core/notifications";

 interface AppCardProps {
  app: App;
@@ -16,7 +16,7 @@ interface AppCardProps {
  searchText?: string;
 }

-export default function AppCard({ app, credentials, searchText }: AppCardProps) {
+export function AppCard({ app, credentials, searchText }: AppCardProps) {
  const { t } = useLocale();
  const router = useRouter();
  const mutation = useAddAppMutation(null, {
@@ -0,0 +1,31 @@
+import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
+
+import {
+  Examples,
+  Example,
+  Note,
+  Title,
+  CustomArgsTable,
+  VariantsTable,
+  VariantRow,
+} from "@calcom/storybook/components";
+import { Icon } from "@calcom/ui";
+
+import { AppStoreCategories as Categories } from "./Categories";
+import { _SBAppCategoryList } from "./_storybookData";
+
+<Meta title="UI/apps/Categories" component={Categories} />
+
+<Title title="Categories" suffix="Brief" subtitle="Version 2.0 — Last Update: 03 Jan 2023" />
+
+## Definition
+
+Categories that is used in our appstore.
+
+<CustomArgsTable of={Categories} />
+
+
+## Examples
+We don't currently mock translations in storybook so the stories will display placeholder text.
+
+<Categories categories={_SBAppCategoryList} />
@@ -1,12 +1,11 @@
 import Link from "next/link";

 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon } from "@calcom/ui";
+import { Icon, SkeletonText } from "@calcom/ui";

-import { SkeletonText } from "../../../components/skeleton";
-import Slider from "./Slider";
+import { Slider } from "./Slider";

-export default function AppStoreCategories({
+export function AppStoreCategories({
  categories,
 }: {
  categories: {
@@ -1,8 +1,8 @@
-import { SkeletonText } from "../../../components/skeleton";
-import Meta from "../Meta";
-import { ShellSubHeading } from "../Shell";
+import { ShellSubHeading } from "../../Shell";
+import Meta from "../../v2/core/Meta";
+import { SkeletonText } from "../skeleton";

-function SkeletonLoader({
+export function SkeletonLoader({
  className,
  title,
  description,
@@ -25,8 +25,6 @@ function SkeletonLoader({
  );
 }

-export default SkeletonLoader;
-
 function SkeletonItem() {
  return (
    <li className="group flex w-full items-center justify-between p-3">
@@ -5,10 +5,10 @@ import { useEffect, useRef } from "react";

 import { useLocale } from "@calcom/lib/hooks/useLocale";

-import { Icon } from "../../..";
-import { SkeletonText } from "../../../components/skeleton";
+import { Icon } from "../../Icon";
+import { SkeletonText } from "../skeleton";

-const Slider = <T extends string | unknown>({
+export const Slider = <T extends string | unknown>({
  title = "",
  className = "",
  items,
@@ -82,5 +82,3 @@ const Slider = <T extends string | unknown>({
    </div>
  );
 };
-
-export default Slider;
@@ -1,10 +1,10 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { AppFrontendPayload as App } from "@calcom/types/App";

-import AppCard from "./AppCard";
-import Slider from "./Slider";
+import { AppCard } from "./AppCard";
+import { Slider } from "./Slider";

-const TrendingAppsSlider = <T extends App>({ items }: { items: T[] }) => {
+export const TrendingAppsSlider = <T extends App>({ items }: { items: T[] }) => {
  const { t } = useLocale();

  return (
@@ -25,5 +25,3 @@ const TrendingAppsSlider = <T extends App>({ items }: { items: T[] }) => {
    />
  );
 };
-
-export default TrendingAppsSlider;
@@ -0,0 +1,64 @@
+import { AppFrontendPayload as App } from "@calcom/types/App";
+
+export const _SBApps: App[] = [
+  {
+    name: "Google Calendar",
+    description: "Google Calendar",
+    installed: true,
+    type: "google_calendar",
+    title: "Google Calendar",
+    imageSrc: "/api/app-store/googlecalendar/icon.svg",
+    variant: "calendar",
+    category: "calendar",
+    categories: ["calendar"],
+    logo: "/api/app-store/googlecalendar/icon.svg",
+    publisher: "Cal.com",
+    rating: 5,
+    reviews: 69,
+    slug: "google-calendar",
+    trending: false,
+    url: "https://cal.com/",
+    verified: true,
+    email: "help@cal.com",
+    dirName: "googlecalendar",
+  },
+  {
+    name: "Zoom Video",
+    description: "Zoom Video",
+    type: "zoom_video",
+    categories: ["video"],
+    imageSrc: "/api/app-store/zoomvideo/icon.svg",
+    variant: "conferencing",
+    logo: "/api/app-store/zoomvideo/icon.svg",
+    publisher: "Cal.com",
+    url: "https://zoom.us/",
+    verified: true,
+    rating: 4.3, // TODO: placeholder for now, pull this from TrustPilot or G2
+    reviews: 69, // TODO: placeholder for now, pull this from TrustPilot or G2
+    category: "video",
+    slug: "zoom",
+    title: "Zoom Video",
+    trending: true,
+    email: "help@cal.com",
+    appData: {
+      location: {
+        default: false,
+        linkType: "dynamic",
+        type: "integrations:zoom",
+        label: "Zoom Video",
+      },
+    },
+    dirName: "zoomvideo",
+  },
+];
+
+export const _SBAppCategoryList = [
+  {
+    name: "Calendar",
+    count: 1,
+  },
+  {
+    name: "Video",
+    count: 5,
+  },
+];
@@ -0,0 +1,6 @@
+export { useShouldShowArrows, AllApps } from "./AllApps";
+export { AppCard } from "./AppCard";
+export { Slider } from "./Slider";
+export { SkeletonLoader as AppSkeletonLoader } from "./SkeletonLoader";
+export { TrendingAppsSlider } from "./TrendingAppsSlider";
+export { AppStoreCategories } from "./Categories";
@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
 import { Examples, Example, Note, Title,CustomArgsTable, VariantRow,VariantsTable} from '@calcom/storybook/components'
-import { Icon } from "@calcom/ui/Icon";
+import { Icon } from "@calcom/ui";

 import {SelectField} from "./Select"

@@ -27,6 +27,15 @@ export {
  SelectField,
  SelectWithValidation,
 } from "./form";
+export {
+  AllApps,
+  AppCard,
+  AppSkeletonLoader,
+  Slider,
+  TrendingAppsSlider,
+  useShouldShowArrows,
+  AppStoreCategories,
+} from "./apps";
 export { TopBanner } from "./top-banner";
 export type { TopBannerProps } from "./top-banner";
 export { AnimatedPopover } from "./popover/index";
@@ -35,6 +35,13 @@ export {
  SkeletonButton,
  SkeletonContainer,
  DropdownActions,
+  TrendingAppsSlider,
+  AppCard,
+  AllApps,
+  AppSkeletonLoader,
+  AppStoreCategories,
+  Slider,
+  useShouldShowArrows,
 } from "./components";
 export type { ActionType } from "./components";
 export type { AvatarProps, BadgeProps, ButtonBaseProps, ButtonProps, TopBannerProps } from "./components";
@@ -62,11 +69,6 @@ export {
 } from "./v2";
 export type { AlertProps } from "./v2";
 export { Segment, SegmentOption } from "./v2/core";
-export { default as AllApps } from "./v2/core/apps/AllApps";
-export { default as AppCard } from "./v2/core/apps/AppCard";
-export { default as AppStoreCategories } from "./v2/core/apps/Categories";
-export { default as SkeletonLoader } from "./v2/core/apps/SkeletonLoader";
-export { default as TrendingAppsSlider } from "./v2/core/apps/TrendingAppsSlider";
 export { default as Banner } from "./v2/core/banner";
 export { default as ColorPicker } from "./v2/core/colorpicker";
 export { default as ConfirmationDialogContent } from "./v2/core/ConfirmationDialogContent";