From b02c7e01d5da658eaac97fc0f1631dbba88e40a5 Mon Sep 17 00:00:00 2001 From: sean-brydon <55134778+sean-brydon@users.noreply.github.com> Date: Wed, 4 Jan 2023 11:00:01 +0000 Subject: [PATCH] Move Apps to ui/components (#6245) * Move Apps to components * Update packages/features/ee/sso/page/teams-sso-view.tsx --- .../components/apps/CalendarListContainer.tsx | 2 +- apps/web/pages/apps/installed/[category].tsx | 2 +- .../web/pages/settings/developer/api-keys.tsx | 2 +- .../ee/sso/components/SAMLConfiguration.tsx | 2 +- .../features/ee/sso/page/teams-sso-view.tsx | 4 +- .../{v2/core => components}/apps/AllApps.tsx | 6 +- .../{v2/core => components}/apps/AppCard.tsx | 6 +- .../ui/components/apps/Categories.stories.mdx | 31 +++++++++ .../core => components}/apps/Categories.tsx | 7 +- .../apps/SkeletonLoader.tsx | 10 ++- .../{v2/core => components}/apps/Slider.tsx | 8 +-- .../apps/TrendingAppsSlider.tsx | 8 +-- packages/ui/components/apps/_storybookData.ts | 64 +++++++++++++++++++ packages/ui/components/apps/index.ts | 6 ++ .../components/form/select/select.stories.mdx | 2 +- packages/ui/components/index.ts | 9 +++ packages/ui/index.tsx | 12 ++-- 17 files changed, 143 insertions(+), 38 deletions(-) rename packages/ui/{v2/core => components}/apps/AllApps.tsx (97%) rename packages/ui/{v2/core => components}/apps/AppCard.tsx (97%) create mode 100644 packages/ui/components/apps/Categories.stories.mdx rename packages/ui/{v2/core => components}/apps/Categories.tsx (90%) rename packages/ui/{v2/core => components}/apps/SkeletonLoader.tsx (86%) rename packages/ui/{v2/core => components}/apps/Slider.tsx (93%) rename packages/ui/{v2/core => components}/apps/TrendingAppsSlider.tsx (75%) create mode 100644 packages/ui/components/apps/_storybookData.ts create mode 100644 packages/ui/components/apps/index.ts diff --git a/apps/web/components/apps/CalendarListContainer.tsx b/apps/web/components/apps/CalendarListContainer.tsx index 84911a7959..c873b5c24f 100644 --- a/apps/web/components/apps/CalendarListContainer.tsx +++ b/apps/web/components/apps/CalendarListContainer.tsx @@ -15,7 +15,7 @@ import { List, ShellSubHeading, showToast, - SkeletonLoader, + AppSkeletonLoader as SkeletonLoader, Switch, } from "@calcom/ui"; diff --git a/apps/web/pages/apps/installed/[category].tsx b/apps/web/pages/apps/installed/[category].tsx index d925ef5d70..a6f6647c64 100644 --- a/apps/web/pages/apps/installed/[category].tsx +++ b/apps/web/pages/apps/installed/[category].tsx @@ -17,7 +17,7 @@ import { InstalledAppsLayout, List, ShellSubHeading, - SkeletonLoader, + AppSkeletonLoader as SkeletonLoader, } from "@calcom/ui"; import { QueryCell } from "@lib/QueryCell"; diff --git a/apps/web/pages/settings/developer/api-keys.tsx b/apps/web/pages/settings/developer/api-keys.tsx index 7d6160fd16..a939ea2a4a 100644 --- a/apps/web/pages/settings/developer/api-keys.tsx +++ b/apps/web/pages/settings/developer/api-keys.tsx @@ -16,7 +16,7 @@ import { getSettingsLayout as getLayout, Icon, Meta, - SkeletonLoader, + AppSkeletonLoader as SkeletonLoader, } from "@calcom/ui"; import { ssrInit } from "@server/lib/ssr"; diff --git a/packages/features/ee/sso/components/SAMLConfiguration.tsx b/packages/features/ee/sso/components/SAMLConfiguration.tsx index 1fd0b614e7..fcdc3a500b 100644 --- a/packages/features/ee/sso/components/SAMLConfiguration.tsx +++ b/packages/features/ee/sso/components/SAMLConfiguration.tsx @@ -18,7 +18,7 @@ import { Label, Meta, showToast, - SkeletonLoader, + AppSkeletonLoader as SkeletonLoader, } from "@calcom/ui"; export default function SAMLConfiguration({ teamId }: { teamId: number | null }) { diff --git a/packages/features/ee/sso/page/teams-sso-view.tsx b/packages/features/ee/sso/page/teams-sso-view.tsx index 692b1ea9ef..e218b9a142 100644 --- a/packages/features/ee/sso/page/teams-sso-view.tsx +++ b/packages/features/ee/sso/page/teams-sso-view.tsx @@ -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 ; + return ; } if (!team) { diff --git a/packages/ui/v2/core/apps/AllApps.tsx b/packages/ui/components/apps/AllApps.tsx similarity index 97% rename from packages/ui/v2/core/apps/AllApps.tsx rename to packages/ui/components/apps/AllApps.tsx index e8c4605b20..2e4405ce53 100644 --- a/packages/ui/v2/core/apps/AllApps.tsx +++ b/packages/ui/components/apps/AllApps.tsx @@ -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(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(null); diff --git a/packages/ui/v2/core/apps/AppCard.tsx b/packages/ui/components/apps/AppCard.tsx similarity index 97% rename from packages/ui/v2/core/apps/AppCard.tsx rename to packages/ui/components/apps/AppCard.tsx index 72e6ae0d49..a4e7821155 100644 --- a/packages/ui/v2/core/apps/AppCard.tsx +++ b/packages/ui/components/apps/AppCard.tsx @@ -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, { diff --git a/packages/ui/components/apps/Categories.stories.mdx b/packages/ui/components/apps/Categories.stories.mdx new file mode 100644 index 0000000000..3d849678cc --- /dev/null +++ b/packages/ui/components/apps/Categories.stories.mdx @@ -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"; + + + + + +## 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} /> diff --git a/packages/ui/v2/core/apps/Categories.tsx b/packages/ui/components/apps/Categories.tsx similarity index 90% rename from packages/ui/v2/core/apps/Categories.tsx rename to packages/ui/components/apps/Categories.tsx index 3d2b9184f2..5b7d05da8e 100644 --- a/packages/ui/v2/core/apps/Categories.tsx +++ b/packages/ui/components/apps/Categories.tsx @@ -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: { diff --git a/packages/ui/v2/core/apps/SkeletonLoader.tsx b/packages/ui/components/apps/SkeletonLoader.tsx similarity index 86% rename from packages/ui/v2/core/apps/SkeletonLoader.tsx rename to packages/ui/components/apps/SkeletonLoader.tsx index bb98fcc7db..574362ffe9 100644 --- a/packages/ui/v2/core/apps/SkeletonLoader.tsx +++ b/packages/ui/components/apps/SkeletonLoader.tsx @@ -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"> diff --git a/packages/ui/v2/core/apps/Slider.tsx b/packages/ui/components/apps/Slider.tsx similarity index 93% rename from packages/ui/v2/core/apps/Slider.tsx rename to packages/ui/components/apps/Slider.tsx index 21d8bb4889..d980ee234b 100644 --- a/packages/ui/v2/core/apps/Slider.tsx +++ b/packages/ui/components/apps/Slider.tsx @@ -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; diff --git a/packages/ui/v2/core/apps/TrendingAppsSlider.tsx b/packages/ui/components/apps/TrendingAppsSlider.tsx similarity index 75% rename from packages/ui/v2/core/apps/TrendingAppsSlider.tsx rename to packages/ui/components/apps/TrendingAppsSlider.tsx index b26478b7cc..00d5ffe262 100644 --- a/packages/ui/v2/core/apps/TrendingAppsSlider.tsx +++ b/packages/ui/components/apps/TrendingAppsSlider.tsx @@ -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; diff --git a/packages/ui/components/apps/_storybookData.ts b/packages/ui/components/apps/_storybookData.ts new file mode 100644 index 0000000000..4307562c76 --- /dev/null +++ b/packages/ui/components/apps/_storybookData.ts @@ -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, + }, +]; diff --git a/packages/ui/components/apps/index.ts b/packages/ui/components/apps/index.ts new file mode 100644 index 0000000000..0f3e3a94f2 --- /dev/null +++ b/packages/ui/components/apps/index.ts @@ -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"; diff --git a/packages/ui/components/form/select/select.stories.mdx b/packages/ui/components/form/select/select.stories.mdx index ce138e20f4..c67ff5a14a 100644 --- a/packages/ui/components/form/select/select.stories.mdx +++ b/packages/ui/components/form/select/select.stories.mdx @@ -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" diff --git a/packages/ui/components/index.ts b/packages/ui/components/index.ts index 18cb5ac874..e5553ace38 100644 --- a/packages/ui/components/index.ts +++ b/packages/ui/components/index.ts @@ -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"; diff --git a/packages/ui/index.tsx b/packages/ui/index.tsx index f137c4429d..f0a9155007 100644 --- a/packages/ui/index.tsx +++ b/packages/ui/index.tsx @@ -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";