Removed old v1 app components in web. (#5286)

This commit is contained in:
Jeroen Reumkens
2022-10-31 10:42:01 +00:00
committed by GitHub
parent 5dc5eadf28
commit 5c2ad7827e
47 changed files with 6 additions and 286 deletions
-19
View File
@@ -1,19 +0,0 @@
import { useLocale } from "@calcom/lib/hooks/useLocale";
import type { App } from "@calcom/types/App";
import AppCard from "./AppCard";
export default function AllApps({ apps }: { apps: App[] }) {
const { t } = useLocale();
return (
<div className="mb-16">
<h2 className="mb-2 text-lg font-semibold text-gray-900">{t("all_apps")}</h2>
<div className="grid-col-1 grid grid-cols-1 gap-3 md:grid-cols-3">
{apps.map((app) => (
<AppCard key={app.name} app={app} />
))}
</div>
</div>
);
}
-44
View File
@@ -1,44 +0,0 @@
import Link from "next/link";
import { trpc } from "@calcom/trpc/react";
import { App } from "@calcom/types/App";
import Badge from "@calcom/ui/Badge";
import Button from "@calcom/ui/Button";
interface AppCardProps {
app: App;
}
export default function AppCard(props: AppCardProps) {
const { data: user } = trpc.useQuery(["viewer.me"]);
return (
<Link href={"/apps/" + props.app.slug}>
<a
className="block h-full rounded-sm border border-gray-300 p-5 hover:bg-neutral-50"
data-testid={`app-store-app-card-${props.app.slug}`}>
<div className="flex">
{
// eslint-disable-next-line @next/next/no-img-element
<img src={props.app.logo} alt={props.app.name + " Logo"} className="mb-4 h-12 w-12 rounded-sm" />
}
<Button
color="secondary"
className="ml-auto flex self-start"
onClick={() => {
console.log("The magic is supposed to happen here");
}}>
Add
</Button>
</div>
<div className="flex items-center">
<h3 className="font-medium">{props.app.name}</h3>
</div>
{/* TODO: add reviews <div className="flex text-sm text-gray-800">
<span>{props.rating} stars</span> <StarIcon className="ml-1 mt-0.5 h-4 w-4 text-yellow-600" />
<span className="pl-1 text-gray-500">{props.reviews} reviews</span>
</div> */}
<p className="mt-2 truncate text-sm text-gray-500">{props.app.description}</p>
</a>
</Link>
);
}
@@ -17,9 +17,9 @@ import DisconnectIntegration from "@calcom/ui/v2/modules/integrations/Disconnect
import { QueryCell } from "@lib/QueryCell";
import AdditionalCalendarSelector from "@components/apps/AdditionalCalendarSelector";
import IntegrationListItem from "@components/apps/IntegrationListItem";
import SubHeadingTitleWithConnections from "@components/integrations/SubHeadingTitleWithConnections";
import AdditionalCalendarSelector from "@components/v2/apps/AdditionalCalendarSelector";
import IntegrationListItem from "@components/v2/apps/IntegrationListItem";
type Props = {
onChanged: () => unknown | Promise<unknown>;
-43
View File
@@ -1,43 +0,0 @@
import Image from "next/image";
import Link from "next/link";
import { useLocale } from "@calcom/lib/hooks/useLocale";
export default function AppStoreCategories({
categories,
}: {
categories: {
name: string;
count: number;
}[];
}) {
const { t } = useLocale();
return (
<div className="mb-16">
<h2 className="mb-2 text-lg font-semibold text-gray-900">{t("popular_categories")}</h2>
<div className="grid-col-1 grid w-full gap-3 overflow-scroll sm:grid-flow-col">
{categories.map((category) => (
<Link key={category.name} href={"/apps/categories/" + category.name}>
<a
data-testid={`app-store-category-${category.name}`}
className="relative flex rounded-sm bg-gray-100 px-6 py-4 sm:block">
<div className="min-w-24 -ml-5 text-center sm:ml-0">
<Image
alt={category.name}
width="352"
height="252"
layout="responsive"
src={"/app-store/" + category.name + ".svg"}
/>
</div>
<div className="self-center">
<h3 className="font-medium capitalize">{category.name}</h3>
<p className="text-sm text-gray-500">{category.count} apps</p>
</div>
</a>
</Link>
))}
</div>
</div>
);
}
-79
View File
@@ -1,79 +0,0 @@
import Glide, { Options } from "@glidejs/glide";
import "@glidejs/glide/dist/css/glide.core.min.css";
import "@glidejs/glide/dist/css/glide.theme.min.css";
import { useEffect, useRef } from "react";
import { Icon } from "@calcom/ui/Icon";
const Slider = <T extends string | unknown>({
title = "",
className = "",
items,
itemKey = (item) => `${item}`,
renderItem,
options = {},
}: {
title?: string;
className?: string;
items: T[];
itemKey?: (item: T) => string;
renderItem?: (item: T) => JSX.Element;
options?: Options;
}) => {
const glide = useRef(null);
const slider = useRef<Glide.Properties | null>(null);
useEffect(() => {
if (glide.current) {
slider.current = new Glide(glide.current, {
type: "carousel",
...options,
}).mount();
}
return () => slider.current?.destroy();
}, [options]);
return (
<div className={`mb-2 ${className}`}>
<style jsx global>
{`
.glide__slide {
height: auto !important;
}
`}
</style>
<div className="glide" ref={glide}>
<div className="flex cursor-default">
{title && (
<div>
<h2 className="mt-0 mb-2 text-lg font-semibold text-gray-900">{title}</h2>
</div>
)}
<div className="glide__arrows ml-auto" data-glide-el="controls">
<button data-glide-dir="<" className="mr-4">
<Icon.FiArrowLeft className="h-5 w-5 text-gray-600 hover:text-black" />
</button>
<button data-glide-dir=">">
<Icon.FiArrowRight className="h-5 w-5 text-gray-600 hover:text-black" />
</button>
</div>
</div>
<div className="glide__track" data-glide-el="track">
<ul className="glide__slides">
{items.map((item) => {
if (typeof renderItem !== "function") return null;
return (
<li key={itemKey(item)} className="glide__slide h-auto pl-0">
{renderItem(item)}
</li>
);
})}
</ul>
</div>
</div>
</div>
);
};
export default Slider;
@@ -1,30 +0,0 @@
import { useLocale } from "@calcom/lib/hooks/useLocale";
import type { App } from "@calcom/types/App";
import AppCard from "./AppCard";
import Slider from "./Slider";
const TrendingAppsSlider = <T extends App>({ items }: { items: T[] }) => {
const { t } = useLocale();
return (
<Slider<T>
className="mb-16"
title={t("trending_apps")}
items={items.filter((app) => !!app.trending)}
itemKey={(app) => app.name}
options={{
perView: 3,
breakpoints: {
768 /* and below */: {
perView: 1,
},
},
}}
renderItem={(app) => <AppCard app={app} />}
/>
);
};
/** @deprecated use v2 instead, located at packages/ui/v2/core/apps */
export default TrendingAppsSlider;
+1 -1
View File
@@ -12,7 +12,7 @@ import prisma from "@calcom/prisma";
import { inferSSRProps } from "@lib/types/inferSSRProps";
import App from "@components/v2/apps/App";
import App from "@components/apps/App";
const components = {
a: ({ href = "", ...otherProps }: JSX.IntrinsicElements["a"]) => (
+2 -2
View File
@@ -21,8 +21,8 @@ import DisconnectIntegration from "@calcom/ui/v2/modules/integrations/Disconnect
import { QueryCell } from "@lib/QueryCell";
import { CalendarListContainer } from "@components/v2/apps/CalendarListContainer";
import IntegrationListItem from "@components/v2/apps/IntegrationListItem";
import { CalendarListContainer } from "@components/apps/CalendarListContainer";
import IntegrationListItem from "@components/apps/IntegrationListItem";
function ConnectOrDisconnectIntegrationButton(props: {
credentialIds: number[];
-2
View File
@@ -6,7 +6,5 @@ items:
- /api/app-store/_APP_DIR_/3.jpg
---
<Slider items={items} />
{description}
+1 -1
View File
@@ -3,7 +3,7 @@ import Link from "next/link";
import { inferQueryOutput } from "@calcom/trpc/react";
import { Switch } from "@calcom/ui/v2";
import OmniInstallAppButton from "@calcom/web/components/v2/apps/OmniInstallAppButton";
import OmniInstallAppButton from "@calcom/web/components/apps/OmniInstallAppButton";
import { SetAppDataGeneric } from "../EventTypeAppContext";
import { eventTypeAppCardZod } from "../eventTypeAppCardZod";
@@ -3,6 +3,4 @@ items:
- /api/app-store/applecalendar/1.jpg
---
<Slider items={items} />
Apple calendar runs both the macOS and iOS mobile operating systems. Offering online cloud backup of calendars using Apples iCloud service, it can sync with Google Calendar and Microsoft Exchange Server. Users can schedule events in their day that include time, location, duration, and extra notes.
-2
View File
@@ -10,6 +10,4 @@ items:
- /api/app-store/around/8.jpg
---
<Slider items={items} />
Discover radically unique video calls designed to help hybrid-remote teams create, collaborate and celebrate together.
@@ -3,8 +3,6 @@ items:
- /api/app-store/caldavcalendar/1.jpg
---
<Slider items={items} />
Caldav is a protocol that allows different clients/servers to access scheduling information on remote servers as well as schedule meetings with other users on the same server or other servers. It extends WebDAV specification and uses iCalendar format for the data.
Confirmed and verified list of all supported CalDAV integration calendar services so far:
-2
View File
@@ -6,8 +6,6 @@ items:
- /api/app-store/campfire/4.jpg
---
<Slider items={items} />
<iframe class="w-full aspect-video -mx-2" width="560" height="315" src="https://player.vimeo.com/video/683733529?app_id=122963&h=025a2fae94&referrer=https%3A%2F%2Fwww.campfire.to%2F" />
## Feel connected with your remote team
@@ -7,8 +7,6 @@ items:
- /api/app-store/closecomothercalendar/5.jpg
---
<Slider items={items} />
- Close is a modern CRM with build-in sales communication tools for email, phone, SMS, and meetings.
- Automate the sales process by enrolling leads and contacts into sequences.
- Track the entire sales process and performance with powerful activity and funnel reporting
-2
View File
@@ -5,6 +5,4 @@ items:
- /api/app-store/dailyvideo/3.jpg
---
<Slider items={items} />
Cal Video is the in-house web-based video conferencing platform powered by Daily.co, which is minimalistic and lightweight, but has most of the features you need.
-2
View File
@@ -3,8 +3,6 @@ items:
- /api/app-store/fathom/1.jpg
---
<Slider items={items} />
Fathom Analytics provides simple, privacy-focused website analytics. We're a GDPR-compliant, Google Analytics alternative.
Use the Fathom app to track analytics of your bookings.
-2
View File
@@ -8,7 +8,5 @@ items:
- /api/app-store/ga4/5.jpeg
---
<Slider items={items} />
{description}
-2
View File
@@ -4,6 +4,4 @@ items:
- /api/app-store/giphy/GIPHY2.png
---
<Slider items={items} />
An online database and search engine that allows users to search for and share short looping videos with no sound that resemble animated GIF files. GIPHY is your top source for the best & newest GIFs & Animated Stickers online. Find everything from funny GIFs, reaction GIFs, unique GIFs and more to add to your custom booking page. Located under advanced settings in each event type.
@@ -4,6 +4,4 @@ items:
- /api/app-store/googlecalendar/GCal2.png
---
<Slider items={items} />
Google Calendar is a time management and scheduling service developed by Google. Allows users to create and edit events, with options available for type and time. Available to anyone that has a Gmail account on both mobile and web versions.
@@ -4,6 +4,4 @@ items:
- /api/app-store/googlevideo/gmeet2.png
---
<Slider items={items} />
Google Meet is Google's web-based video conferencing platform, designed to compete with major conferencing platforms.
@@ -3,8 +3,6 @@ items:
- /api/app-store/hubspotothercalendar/hubspot01.webp
---
<Slider items={items} />
HubSpot is a cloud-based CRM designed to help align sales and marketing teams, foster sales enablement, boost ROI and optimize your inbound marketing strategy to generate more, qualified leads.
Features:
@@ -8,6 +8,4 @@ items:
- /api/app-store/huddle01video/6.png
---
<Slider items={items} />
Huddle01 is a new video conferencing software native to Web3 and is comparable to a decentralized version of Zoom. It supports conversations for NFT communities, DAOs, Builders and also has features such as token gating, NFTs as avatars, Web3 Login + ENS and recording over IPFS.
-2
View File
@@ -3,6 +3,4 @@ items:
- /api/app-store/jitsivideo/jitsi1.jpg
---
<Slider items={items} />
Jitsi is a free open-source video conferencing software for web and mobile. Make a call, launch on your own servers, integrate into your app, and more.
@@ -6,8 +6,6 @@ items:
- /api/app-store/larkcalendar/4.png
---
<Slider items={items} />
<iframe class="w-full aspect-video" width="560" height="315" src="https://www.youtube.com/embed/ciqbZ466XSQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Lark Calendar is a time management and scheduling service developed by Lark. Allows users to create and edit events, with options available for type and time. Available to anyone that has a Lark account on both mobile and web versions.
-2
View File
@@ -6,8 +6,6 @@ items:
- https://docs.n8n.io/_images/integrations/builtin/credentials/cal/getting-api-key.gif
---
<Slider items={items} />
<p>You can use these credentials to authenticate the following nodes with Cal.</p>
<ul>
<li>
@@ -6,6 +6,4 @@ items:
- /api/app-store/office365calendar/4.jpg
---
<Slider items={items} />
Microsoft Office 365 is a suite of apps that helps you stay connected with others and get things done. It includes but is not limited to Microsoft Word, PowerPoint, Excel, Teams, OneNote and OneDrive. Office 365 allows you to work remotely with others on a team and collaborate in an online environment. Both web versions and desktop/mobile applications are available.
@@ -7,6 +7,4 @@ items:
- /api/app-store/office365video/teams5.png
---
<Slider items={items} />
Microsoft Teams is a business communication platform and collaborative workspace included in Microsoft 365. It offers workspace chat and video conferencing, file storage, and application integration. Both web versions and desktop/mobile applications are available. NOTE: MUST HAVE A WORK / SCHOOL ACCOUNT
-2
View File
@@ -5,6 +5,4 @@ items:
- /api/app-store/ping/3.png
---
<Slider items={items} />
Ping.gg makes high quality video collaborations easier than ever. Think "Zoom for streamers and creators". Join a call in 3 clicks, manage audio and video like a pro, and copy-paste your guests straight into OBS
-3
View File
@@ -8,9 +8,6 @@ items:
- /api/app-store/pipedream/5.png
---
<Slider items={items} />
{description}
<br/>
-2
View File
@@ -5,7 +5,5 @@ items:
- /api/app-store/rainbow/3.jpg
---
<Slider items={items} />
Token gate bookings based on NFTs, DAO tokens, and ERC-20 tokens. Rainbow supports dozens of trusted Ethereum wallet apps to verify token ownership. Available blockchains are Ethereum mainnet, Arbitrum, Optimism, and Polygon mainnet.
-2
View File
@@ -6,6 +6,4 @@ items:
- /api/app-store/raycast/4.png
---
<Slider items={items} />
Quickly share your Cal.com meeting links with Raycast. Requires Raycast.com to be installed. You can create an API token in your Developer Cal.com Settings.
-1
View File
@@ -3,5 +3,4 @@ items:
- /api/app-store/riverside/riverside1.png
---
<Slider items={items} />
Your online recording studio. The easiest way to record podcasts and videos in studio quality from anywhere. All from the browser.
@@ -6,7 +6,5 @@ items:
- /api/app-store/sirius_video/3.jpg
---
<Slider items={items} />
{description}
@@ -5,7 +5,5 @@ items:
- /api/app-store/slackmessaging/3.jpg
---
<Slider items={items} />
Slack is a proprietary business communication platform that includes many IRC (internet relay chat) features - these include channels, private groups, direct messaging and more. Users are able to send pictures, and videos as well as even hop on calls with others using the paid version. Slack is available via desktop app, web browser or mobile app. The Cal.com Slack App can be used to display your links, upcoming bookings or to create events. Use it with your team members in a Slack, in a Community Slack or even with external contributors in a Slack Connect Channel.
@@ -7,6 +7,4 @@ items:
- /api/app-store/stripepayment/stripe5.jpg
---
<Slider items={items} />
Stripe provides payment infrastructure for everyone from startups to Fortune 500 companies. They provide payment processing software as well as application programming interfaces (APIs) for mobile applications as well as e-commerce websites processing payments from (but not limited to) credit cards, debit cards, digital wallets, Google Pay, Apple Pay, Bank Transfers, Alipay and WeChat.
@@ -8,6 +8,4 @@ items:
- /api/app-store/tandemvideo/tandem6.jpg
---
<Slider items={items} />
Tandem is a new virtual office space that allows teams to effortlessly connect as though they are in a physical office, online. Through co-working rooms, available statuses, live real-time video call, and chat options, you can see whos around, talk and collaborate in one click. It works cross-platform with both desktop and mobile versions.
-1
View File
@@ -6,7 +6,6 @@ items:
---
{/* Feel free to edit description or add other frontmatter. Frontmatter would be available in the components here as variables by same name */}
<Slider items={items} />
<div>
{description}
<div style={{fontStyle:"italic"}}>You should have Routing Forms app installed to be able to use this app.</div>
@@ -4,6 +4,4 @@ items:
- /api/app-store/weather_in_your_calendar/2.jpeg
---
<Slider items={items} />
You can now get the weather forecast directly into your calendar. This local weather calendar uses emojis ⛅️ 🌧️ ☀️ 🌨️ to display a 16 days forecast from OpenWeatherMap. Enter your city, adjust according to your preferences and subscribe to your calendar.
-2
View File
@@ -4,6 +4,4 @@ items:
- /api/app-store/whereby/whereby2.webp
---
<Slider items={items} />
Whereby's the easiest way to connect over video with no app or software download required. Connect with anyone, anywhere with zero hassle.
-2
View File
@@ -4,6 +4,4 @@ items:
- /api/app-store/zapier/2.jpg
---
<Slider items={items} />
Workflow automation for everyone. Use the Cal.com Zapier app to automate your workflows when a booking is created, rescheduled, cancelled or when a meeting ended.<br /><br />**After Installation:** Have you lost your API key? You can always generate a new key on the <a href="/apps/zapier/setup">**<ins>Zapier Setup Page</ins>**</a>
-2
View File
@@ -9,6 +9,4 @@ items:
- /api/app-store/zoomvideo/zoom7.png
---
<Slider items={items} />
Zoom is a secure and reliable video platform that supports all of your online communication needs. It can provide everything from one on one meetings, chat, phone, webinars, and large-scale online events. Available with both desktop, web, and mobile versions.