yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

lint, tsc

Browse Source
This commit is contained in:
Tom Moor
2021-12-11 12:48:13 -08:00
parent ca0a900c21
commit 19e85c63c2
48 changed files with 118 additions and 339 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
shared/embeds/Abstract.tsx
View File

@@ -1,12 +1,6 @@
import * as React from "react";
import Frame from "./components/Frame";
type Props = {
attrs: {
href: string;
matches: string[];
};
};
import { EmbedProps as Props } from ".";
export default class Abstract extends React.Component<Props> {
static ENABLED = [
@@ -20,7 +14,6 @@ export default class Abstract extends React.Component<Props> {
return (
<Frame
{...this.props}
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; title: string; attrs: { href:... Remove this comment to see the full error message
src={`https://app.goabstract.com/embed/${shareId}`}
title={`Abstract (${shareId})`}
/>

8
shared/embeds/Airtable.tsx
View File

@@ -1,13 +1,8 @@
import * as React from "react";
import Frame from "./components/Frame";
import { EmbedProps as Props } from ".";
const URL_REGEX = new RegExp("https://airtable.com/(?:embed/)?(shr.*)$");
type Props = {
attrs: {
href: string;
matches: string[];
};
};
export default class Airtable extends React.Component<Props> {
static ENABLED = [URL_REGEX];
@@ -18,7 +13,6 @@ export default class Airtable extends React.Component<Props> {
return (
<Frame
{...this.props}
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; title: string; border: true; ... Remove this comment to see the full error message
src={`https://airtable.com/embed/${shareId}`}
title={`Airtable (${shareId})`}
border

8
shared/embeds/Bilibili.tsx
View File

@@ -1,13 +1,8 @@
import * as React from "react";
import Frame from "./components/Frame";
import { EmbedProps as Props } from ".";
const URL_REGEX = /(?:https?:\/\/)?(www\.bilibili\.com)\/video\/([\w\d]+)?(\?\S+)?/i;
type Props = {
attrs: {
href: string;
matches: string[];
};
};
export default class Vimeo extends React.Component<Props> {
static ENABLED = [URL_REGEX];
@@ -18,7 +13,6 @@ export default class Vimeo extends React.Component<Props> {
return (
<Frame
{...this.props}
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; title: string; attrs: { href:... Remove this comment to see the full error message
src={`https://player.bilibili.com/player.html?bvid=${videoId}&page=1&high_quality=1`}
title={`Bilibili Embed (${videoId})`}
/>

9
shared/embeds/Cawemo.tsx
View File

@@ -1,13 +1,8 @@
import * as React from "react";
import Frame from "./components/Frame";
import { EmbedProps as Props } from ".";
const URL_REGEX = new RegExp("https?://cawemo.com/(?:share|embed)/(.*)$");
type Props = {
attrs: {
href: string;
matches: string[];
};
};
export default class Cawemo extends React.Component<Props> {
static ENABLED = [URL_REGEX];
@@ -18,11 +13,9 @@ export default class Cawemo extends React.Component<Props> {
return (
<Frame
{...this.props}
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; title: string; border: true; ... Remove this comment to see the full error message
src={`https://cawemo.com/embed/${shareId}`}
title={"Cawemo Embed"}
border
allowfullscreen
/>
);
}

8
shared/embeds/ClickUp.tsx
View File

@@ -1,15 +1,10 @@
import * as React from "react";
import Frame from "./components/Frame";
import { EmbedProps as Props } from ".";
const URL_REGEX = new RegExp(
"^https?://share.clickup.com/[a-z]/[a-z]/(.*)/(.*)$"
);
type Props = {
attrs: {
href: string;
matches: string[];
};
};
export default class ClickUp extends React.Component<Props> {
static ENABLED = [URL_REGEX];
@@ -18,7 +13,6 @@ export default class ClickUp extends React.Component<Props> {
return (
<Frame
{...this.props}
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; title: string; attrs: { href:... Remove this comment to see the full error message
src={this.props.attrs.href}
title="ClickUp Embed"
/>

8
shared/embeds/Codepen.tsx
View File

@@ -1,20 +1,14 @@
import * as React from "react";
import Frame from "./components/Frame";
import { EmbedProps as Props } from ".";
const URL_REGEX = new RegExp("^https://codepen.io/(.*?)/(pen|embed)/(.*)$");
type Props = {
attrs: {
href: string;
matches: string[];
};
};
export default class Codepen extends React.Component<Props> {
static ENABLED = [URL_REGEX];
render() {
const normalizedUrl = this.props.attrs.href.replace(/\/pen\//, "/embed/");
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; title: string; attrs: { href:... Remove this comment to see the full error message
return <Frame {...this.props} src={normalizedUrl} title="Codepen Embed" />;
}
}

9
shared/embeds/Descript.tsx
View File

@@ -1,12 +1,6 @@
import * as React from "react";
import Frame from "./components/Frame";
type Props = {
attrs: {
href: string;
matches: string[];
};
};
import { EmbedProps as Props } from ".";
export default class Descript extends React.Component<Props> {
static ENABLED = [new RegExp("https?://share.descript.com/view/(\\w+)$")];
@@ -17,7 +11,6 @@ export default class Descript extends React.Component<Props> {
return (
<Frame
{...this.props}
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; title: string; width: string;... Remove this comment to see the full error message
src={`https://share.descript.com/embed/${shareId}`}
title={`Descript (${shareId})`}
width="400px"

8
shared/embeds/Diagrams.tsx
View File

@@ -1,14 +1,9 @@
import * as React from "react";
import Frame from "./components/Frame";
import Image from "./components/Image";
import { EmbedProps as Props } from ".";
const URL_REGEX = /^https:\/\/viewer\.diagrams\.net\/.*(title=\\w+)?/;
type Props = {
attrs: {
href: string;
matches: string[];
};
};
export default class Diagrams extends React.Component<Props> {
static ENABLED = [URL_REGEX];
@@ -33,7 +28,6 @@ export default class Diagrams extends React.Component<Props> {
return (
<Frame
{...this.props}
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; title: string; border: true; ... Remove this comment to see the full error message
src={this.embedUrl}
title={this.title}
border

8
shared/embeds/Figma.tsx
View File

@@ -1,15 +1,10 @@
import * as React from "react";
import Frame from "./components/Frame";
import { EmbedProps as Props } from ".";
const URL_REGEX = new RegExp(
"https://([w.-]+.)?figma.com/(file|proto)/([0-9a-zA-Z]{22,128})(?:/.*)?$"
);
type Props = {
attrs: {
href: string;
matches: string[];
};
};
export default class Figma extends React.Component<Props> {
static ENABLED = [URL_REGEX];
@@ -18,7 +13,6 @@ export default class Figma extends React.Component<Props> {
return (
<Frame
{...this.props}
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; title: string; border: true; ... Remove this comment to see the full error message
src={`https://www.figma.com/embed?embed_host=outline&url=${this.props.attrs.href}`}
title="Figma Embed"
border

8
shared/embeds/Framer.tsx
View File

@@ -1,13 +1,8 @@
import * as React from "react";
import Frame from "./components/Frame";
import { EmbedProps as Props } from ".";
const URL_REGEX = new RegExp("^https://framer.cloud/(.*)$");
type Props = {
attrs: {
href: string;
matches: string[];
};
};
export default class Framer extends React.Component<Props> {
static ENABLED = [URL_REGEX];
@@ -16,7 +11,6 @@ export default class Framer extends React.Component<Props> {
return (
<Frame
{...this.props}
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; title: string; border: true; ... Remove this comment to see the full error message
src={this.props.attrs.href}
title="Framer Embed"
border

8
shared/embeds/Gist.tsx
View File

@@ -1,15 +1,9 @@
import * as React from "react";
import { EmbedProps as Props } from ".";
const URL_REGEX = new RegExp(
"^https://gist.github.com/([a-zA-Z\\d](?:[a-zA-Z\\d]|-(?=[a-zA-Z\\d])){0,38})/(.*)$"
);
type Props = {
isSelected: boolean;
attrs: {
href: string;
matches: string[];
};
};
class Gist extends React.Component<Props> {
static ENABLED = [URL_REGEX];

8
shared/embeds/GoogleCalendar.tsx
View File

@@ -1,15 +1,10 @@
import * as React from "react";
import Frame from "./components/Frame";
import { EmbedProps as Props } from ".";
const URL_REGEX = new RegExp(
"^https?://calendar.google.com/calendar/embed\\?src=(.*)$"
);
type Props = {
attrs: {
href: string;
matches: string[];
};
};
export default class GoogleCalendar extends React.Component<Props> {
static ENABLED = [URL_REGEX];
@@ -18,7 +13,6 @@ export default class GoogleCalendar extends React.Component<Props> {
return (
<Frame
{...this.props}
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; title: string; border: true; ... Remove this comment to see the full error message
src={this.props.attrs.href}
title="Google Calendar"
border

8
shared/embeds/GoogleDataStudio.tsx
View File

@@ -1,16 +1,11 @@
import * as React from "react";
import Frame from "./components/Frame";
import Image from "./components/Image";
import { EmbedProps as Props } from ".";
const URL_REGEX = new RegExp(
"^https?://datastudio.google.com/(embed|u/0)/reporting/(.*)/page/(.*)(/edit)?$"
);
type Props = {
attrs: {
href: string;
matches: string[];
};
};
export default class GoogleDataStudio extends React.Component<Props> {
static ENABLED = [URL_REGEX];
@@ -19,7 +14,6 @@ export default class GoogleDataStudio extends React.Component<Props> {
return (
<Frame
{...this.props}
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; icon: Element; canonicalUrl: ... Remove this comment to see the full error message
src={this.props.attrs.href.replace("u/0", "embed").replace("/edit", "")}
icon={
<Image

8
shared/embeds/GoogleDocs.tsx
View File

@@ -1,14 +1,9 @@
import * as React from "react";
import Frame from "./components/Frame";
import Image from "./components/Image";
import { EmbedProps as Props } from ".";
const URL_REGEX = new RegExp("^https?://docs.google.com/document/(.*)$");
type Props = {
attrs: {
href: string;
matches: string[];
};
};
export default class GoogleDocs extends React.Component<Props> {
static ENABLED = [URL_REGEX];
@@ -17,7 +12,6 @@ export default class GoogleDocs extends React.Component<Props> {
return (
<Frame
{...this.props}
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; icon: Element; canonicalUrl: ... Remove this comment to see the full error message
src={this.props.attrs.href.replace("/edit", "/preview")}
icon={
<Image

8
shared/embeds/GoogleDrawings.tsx
View File

@@ -1,16 +1,11 @@
import * as React from "react";
import Frame from "./components/Frame";
import Image from "./components/Image";
import { EmbedProps as Props } from ".";
const URL_REGEX = new RegExp(
"^https://docs.google.com/drawings/d/(.*)/(edit|preview)(.*)$"
);
type Props = {
attrs: {
href: string;
matches: string[];
};
};
export default class GoogleDrawings extends React.Component<Props> {
static ENABLED = [URL_REGEX];
@@ -19,7 +14,6 @@ export default class GoogleDrawings extends React.Component<Props> {
return (
<Frame
{...this.props}
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; icon: Element; canonicalUrl: ... Remove this comment to see the full error message
src={this.props.attrs.href.replace("/edit", "/preview")}
icon={
<Image

8
shared/embeds/GoogleDrive.tsx
View File

@@ -1,14 +1,9 @@
import * as React from "react";
import Frame from "./components/Frame";
import Image from "./components/Image";
import { EmbedProps as Props } from ".";
const URL_REGEX = new RegExp("^https?://drive.google.com/file/d/(.*)$");
type Props = {
attrs: {
href: string;
matches: string[];
};
};
export default class GoogleDrive extends React.Component<Props> {
static ENABLED = [URL_REGEX];
@@ -16,7 +11,6 @@ export default class GoogleDrive extends React.Component<Props> {
render() {
return (
<Frame
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; icon: Element; title: string;... Remove this comment to see the full error message
src={this.props.attrs.href.replace("/view", "/preview")}
icon={
<Image

8
shared/embeds/GoogleSheets.tsx
View File

@@ -1,14 +1,9 @@
import * as React from "react";
import Frame from "./components/Frame";
import Image from "./components/Image";
import { EmbedProps as Props } from ".";
const URL_REGEX = new RegExp("^https?://docs.google.com/spreadsheets/d/(.*)$");
type Props = {
attrs: {
href: string;
matches: string[];
};
};
export default class GoogleSheets extends React.Component<Props> {
static ENABLED = [URL_REGEX];
@@ -17,7 +12,6 @@ export default class GoogleSheets extends React.Component<Props> {
return (
<Frame
{...this.props}
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; icon: Element; canonicalUrl: ... Remove this comment to see the full error message
src={this.props.attrs.href.replace("/edit", "/preview")}
icon={
<Image

8
shared/embeds/GoogleSlides.tsx
View File

@@ -1,14 +1,9 @@
import * as React from "react";
import Frame from "./components/Frame";
import Image from "./components/Image";
import { EmbedProps as Props } from ".";
const URL_REGEX = new RegExp("^https?://docs.google.com/presentation/d/(.*)$");
type Props = {
attrs: {
href: string;
matches: string[];
};
};
export default class GoogleSlides extends React.Component<Props> {
static ENABLED = [URL_REGEX];
@@ -17,7 +12,6 @@ export default class GoogleSlides extends React.Component<Props> {
return (
<Frame
{...this.props}
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; icon: Element; canonicalUrl: ... Remove this comment to see the full error message
src={this.props.attrs.href
.replace("/edit", "/preview")
.replace("/pub", "/embed")}

9
shared/embeds/InVision.tsx
View File

@@ -1,16 +1,10 @@
import * as React from "react";
import ImageZoom from "react-medium-image-zoom";
import Frame from "./components/Frame";
import { EmbedProps as Props } from ".";
const IFRAME_REGEX = /^https:\/\/(invis\.io\/.*)|(projects\.invisionapp\.com\/share\/.*)$/;
const IMAGE_REGEX = /^https:\/\/(opal\.invisionapp\.com\/static-signed\/live-embed\/.*)$/;
type Props = {
isSelected: boolean;
attrs: {
href: string;
matches: string[];
};
};
export default class InVision extends React.Component<Props> {
static ENABLED = [IFRAME_REGEX, IMAGE_REGEX];
@@ -37,7 +31,6 @@ export default class InVision extends React.Component<Props> {
return (
<Frame
{...this.props}
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; title: string; isSelected: bo... Remove this comment to see the full error message
src={this.props.attrs.href}
title="InVision Embed"
/>

8
shared/embeds/Loom.tsx
View File

@@ -1,20 +1,14 @@
import * as React from "react";
import Frame from "./components/Frame";
import { EmbedProps as Props } from ".";
const URL_REGEX = /^https:\/\/(www\.)?(use)?loom.com\/(embed|share)\/(.*)$/;
type Props = {
attrs: {
href: string;
matches: string[];
};
};
export default class Loom extends React.Component<Props> {
static ENABLED = [URL_REGEX];
render() {
const normalizedUrl = this.props.attrs.href.replace("share", "embed");
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; title: string; attrs: { href:... Remove this comment to see the full error message
return <Frame {...this.props} src={normalizedUrl} title="Loom Embed" />;
}
}

12
shared/embeds/Lucidchart.tsx
View File

@@ -1,12 +1,6 @@
import * as React from "react";
import Frame from "./components/Frame";
type Props = {
attrs: {
href: string;
matches: Record<string, any>;
};
};
import { EmbedProps as Props } from ".";
export default class Lucidchart extends React.Component<Props> {
static ENABLED = [
@@ -16,11 +10,11 @@ export default class Lucidchart extends React.Component<Props> {
render() {
const { matches } = this.props.attrs;
const { chartId } = matches.groups;
const chartId = matches.groups?.chartId;
return (
<Frame
{...this.props}
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; title: string; attrs: { href:... Remove this comment to see the full error message
src={`https://lucidchart.com/documents/embeddedchart/${chartId}`}
title="Lucidchart Embed"
/>

8
shared/embeds/Marvel.tsx
View File

@@ -1,13 +1,8 @@
import * as React from "react";
import Frame from "./components/Frame";
import { EmbedProps as Props } from ".";
const URL_REGEX = new RegExp("^https://marvelapp.com/([A-Za-z0-9-]{6})/?$");
type Props = {
attrs: {
href: string;
matches: string[];
};
};
export default class Marvel extends React.Component<Props> {
static ENABLED = [URL_REGEX];
@@ -16,7 +11,6 @@ export default class Marvel extends React.Component<Props> {
return (
<Frame
{...this.props}
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; title: string; border: true; ... Remove this comment to see the full error message
src={this.props.attrs.href}
title="Marvel Embed"
border

8
shared/embeds/Mindmeister.tsx
View File

@@ -1,15 +1,10 @@
import * as React from "react";
import Frame from "./components/Frame";
import { EmbedProps as Props } from ".";
const URL_REGEX = new RegExp(
"^https://([w.-]+.)?(mindmeister.com|mm.tt)(/maps/public_map_shell)?/(\\d+)(\\?t=.*)?(/.*)?$"
);
type Props = {
attrs: {
href: string;
matches: string[];
};
};
export default class Mindmeister extends React.Component<Props> {
static ENABLED = [URL_REGEX];
@@ -22,7 +17,6 @@ export default class Mindmeister extends React.Component<Props> {
return (
<Frame
{...this.props}
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; title: string; border: true; ... Remove this comment to see the full error message
src={`https://www.mindmeister.com/maps/public_map_shell/${chartId}`}
title="Mindmeister Embed"
border

9
shared/embeds/Miro.tsx
View File

@@ -1,13 +1,8 @@
import * as React from "react";
import Frame from "./components/Frame";
import { EmbedProps as Props } from ".";
const URL_REGEX = /^https:\/\/(realtimeboard|miro).com\/app\/board\/(.*)$/;
type Props = {
attrs: {
href: string;
matches: string[];
};
};
export default class RealtimeBoard extends React.Component<Props> {
static ENABLED = [URL_REGEX];
@@ -17,10 +12,10 @@ export default class RealtimeBoard extends React.Component<Props> {
const domain = matches[1];
const boardId = matches[2];
const titleName = domain === "realtimeboard" ? "RealtimeBoard" : "Miro";
return (
<Frame
{...this.props}
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; title: string; attrs: { href:... Remove this comment to see the full error message
src={`https://${domain}.com/app/embed/${boardId}`}
title={`${titleName} (${boardId})`}
/>

8
shared/embeds/ModeAnalytics.tsx
View File

@@ -1,15 +1,10 @@
import * as React from "react";
import Frame from "./components/Frame";
import { EmbedProps as Props } from ".";
const URL_REGEX = new RegExp(
"^https://([w.-]+.)?modeanalytics.com/(.*)/reports/(.*)$"
);
type Props = {
attrs: {
href: string;
matches: string[];
};
};
export default class ModeAnalytics extends React.Component<Props> {
static ENABLED = [URL_REGEX];
@@ -20,7 +15,6 @@ export default class ModeAnalytics extends React.Component<Props> {
return (
<Frame
{...this.props}
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; title: string; attrs: { href:... Remove this comment to see the full error message
src={`${normalizedUrl}/embed`}
title="Mode Analytics Embed"
/>

8
shared/embeds/Pitch.tsx
View File

@@ -1,15 +1,10 @@
import * as React from "react";
import Frame from "./components/Frame";
import { EmbedProps as Props } from ".";
const URL_REGEX = new RegExp(
"^https?://app.pitch.com/app/(?:presentation/[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}|public/player)/(.*)$"
);
type Props = {
attrs: {
href: string;
matches: any;
};
};
export default class Pitch extends React.Component<Props> {
static ENABLED = [URL_REGEX];
@@ -19,7 +14,6 @@ export default class Pitch extends React.Component<Props> {
return (
<Frame
{...this.props}
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; title: string; height: string... Remove this comment to see the full error message
src={`https://pitch.com/embed/${shareId}`}
title="Pitch Embed"
height="414px"

8
shared/embeds/Prezi.tsx
View File

@@ -1,13 +1,8 @@
import * as React from "react";
import Frame from "./components/Frame";
import { EmbedProps as Props } from ".";
const URL_REGEX = new RegExp("^https://prezi.com/view/(.*)$");
type Props = {
attrs: {
href: string;
matches: string[];
};
};
export default class Prezi extends React.Component<Props> {
static ENABLED = [URL_REGEX];
@@ -15,7 +10,6 @@ export default class Prezi extends React.Component<Props> {
render() {
const url = this.props.attrs.href.replace(/\/embed$/, "");
return (
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; title: string; border: true; ... Remove this comment to see the full error message
<Frame {...this.props} src={`${url}/embed`} title="Prezi Embed" border />
);
}

8
shared/embeds/Spotify.tsx
View File

@@ -2,12 +2,7 @@ import * as React from "react";
import Frame from "./components/Frame";
const URL_REGEX = new RegExp("https?://open.spotify.com/(.*)$");
type Props = {
attrs: {
href: string;
matches: string[];
};
};
import { EmbedProps as Props } from ".";
export default class Spotify extends React.Component<Props> {
static ENABLED = [URL_REGEX];
@@ -36,7 +31,6 @@ export default class Spotify extends React.Component<Props> {
return (
<Frame
{...this.props}
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ width: string; height: string; src: string... Remove this comment to see the full error message
width="100%"
height={`${height}px`}
src={`https://open.spotify.com/embed${normalizedPath}`}

9
shared/embeds/Trello.tsx
View File

@@ -1,13 +1,8 @@
import * as React from "react";
import Frame from "./components/Frame";
import { EmbedProps as Props } from ".";
const URL_REGEX = /^https:\/\/trello.com\/(c|b)\/([^/]*)(.*)?$/;
type Props = {
attrs: {
href: string;
matches: string[];
};
};
export default class Trello extends React.Component<Props> {
static ENABLED = [URL_REGEX];
@@ -19,7 +14,6 @@ export default class Trello extends React.Component<Props> {
if (matches[1] === "c") {
return (
<Frame
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ width: string; height: string; src: string... Remove this comment to see the full error message
width="316px"
height="158px"
src={`https://trello.com/embed/card?id=${objectId}`}
@@ -31,7 +25,6 @@ export default class Trello extends React.Component<Props> {
return (
<Frame
{...this.props}
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ width: string; height: string; src: string... Remove this comment to see the full error message
width="248px"
height="185px"
src={`https://trello.com/embed/board?id=${objectId}`}

8
shared/embeds/Typeform.tsx
View File

@@ -1,15 +1,10 @@
import * as React from "react";
import Frame from "./components/Frame";
import { EmbedProps as Props } from ".";
const URL_REGEX = new RegExp(
"^https://([A-Za-z0-9](?:[A-Za-z0-9-]{0,61}[A-Za-z0-9])?).typeform.com/to/(.*)$"
);
type Props = {
attrs: {
href: string;
matches: string[];
};
};
export default class Typeform extends React.Component<Props> {
static ENABLED = [URL_REGEX];
@@ -18,7 +13,6 @@ export default class Typeform extends React.Component<Props> {
return (
<Frame
{...this.props}
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; title: string; attrs: { href:... Remove this comment to see the full error message
src={this.props.attrs.href}
title="Typeform Embed"
/>

8
shared/embeds/Vimeo.tsx
View File

@@ -1,13 +1,8 @@
import * as React from "react";
import Frame from "./components/Frame";
import { EmbedProps as Props } from ".";
const URL_REGEX = /(http|https)?:\/\/(www\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/([^/]*)\/videos\/|)(\d+)(?:|\/\?)/;
type Props = {
attrs: {
href: string;
matches: string[];
};
};
export default class Vimeo extends React.Component<Props> {
static ENABLED = [URL_REGEX];
@@ -18,7 +13,6 @@ export default class Vimeo extends React.Component<Props> {
return (
<Frame
{...this.props}
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; title: string; attrs: { href:... Remove this comment to see the full error message
src={`https://player.vimeo.com/video/${videoId}?byline=0`}
title={`Vimeo Embed (${videoId})`}
/>

9
shared/embeds/YouTube.tsx
View File

@@ -1,14 +1,8 @@
import * as React from "react";
import Frame from "./components/Frame";
import { EmbedProps as Props } from ".";
const URL_REGEX = /(?:https?:\/\/)?(?:www\.)?youtu\.?be(?:\.com)?\/?.*(?:watch|embed)?(?:.*v=|v\/|\/)([a-zA-Z0-9_-]{11})$/i;
type Props = {
isSelected: boolean;
attrs: {
href: string;
matches: string[];
};
};
export default class YouTube extends React.Component<Props> {
static ENABLED = [URL_REGEX];
@@ -19,7 +13,6 @@ export default class YouTube extends React.Component<Props> {
return (
<Frame
{...this.props}
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ src: string; title: string; isSelected: bo... Remove this comment to see the full error message
src={`https://www.youtube.com/embed/${videoId}?modestbranding=1`}
title={`YouTube (${videoId})`}
/>

5
shared/embeds/components/Frame.tsx
View File

@@ -13,7 +13,7 @@ const StyledIframe = styled(Iframe)`
border-radius: ${(props) => (props.$withBar ? "3px 3px 0 0" : "3px")};
display: block;
`;
type Props = {
type Props = React.HTMLAttributes<HTMLIFrameElement> & {
src?: string;
border?: boolean;
title?: string;
@@ -22,6 +22,7 @@ type Props = {
isSelected?: boolean;
width?: string;
height?: string;
allow?: string;
};
type PropsWithRef = Props & {
@@ -147,7 +148,7 @@ const Bar = styled.div`
user-select: none;
`;
export default React.forwardRef((props, ref) => (
export default React.forwardRef<Frame, Props>((props, ref) => (
// @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
<Frame {...props} forwardedRef={ref} />
));

117
shared/embeds/index.tsx
View File

@@ -34,10 +34,17 @@ import Vimeo from "./Vimeo";
import YouTube from "./YouTube";
import Image from "./components/Image";
// @ts-expect-error ts-migrate(7006) FIXME: Parameter 'Component' implicitly has an 'any' type... Remove this comment to see the full error message
function matcher(Component) {
// @ts-expect-error ts-migrate(7030) FIXME: Not all code paths return a value.
export type EmbedProps = {
isSelected: boolean;
attrs: {
href: string;
matches: RegExpMatchArray;
};
};
function matcher(Component: React.ComponentType<EmbedProps>) {
return (url: string) => {
// @ts-expect-error not aware of static
const regexes = Component.ENABLED;
for (const regex of regexes) {
@@ -47,6 +54,8 @@ function matcher(Component) {
return result;
}
}
return undefined;
};
}
@@ -60,16 +69,15 @@ export default [
{
title: "Abstract",
keywords: "design",
// @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
icon: () => <Img src="/images/abstract.png" />,
defaultHidden: true,
icon: () => <Img src="/images/abstract.png" alt="Abstract" />,
component: Abstract,
matcher: matcher(Abstract),
},
{
title: "Airtable",
keywords: "spreadsheet",
// @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
icon: () => <Img src="/images/airtable.png" />,
icon: () => <Img src="/images/airtable.png" alt="Airtable" />,
component: Airtable,
matcher: matcher(Airtable),
},
@@ -77,8 +85,7 @@ export default [
title: "Bilibili",
keywords: "video",
defaultHidden: true,
// @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
icon: () => <Img src="/images/bilibili.png" />,
icon: () => <Img src="/images/bilibili.png" alt="Bilibili" />,
component: Bilibili,
matcher: matcher(Bilibili),
},
@@ -86,120 +93,106 @@ export default [
title: "Cawemo",
keywords: "bpmn process",
defaultHidden: true,
// @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
icon: () => <Img src="/images/cawemo.png" />,
icon: () => <Img src="/images/cawemo.png" alt="Cawemo" />,
component: Cawemo,
matcher: matcher(Cawemo),
},
{
title: "ClickUp",
keywords: "project",
defaultHidden: true,
// @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
icon: () => <Img src="/images/clickup.png" />,
icon: () => <Img src="/images/clickup.png" alt="ClickUp" />,
component: ClickUp,
matcher: matcher(ClickUp),
},
{
title: "Codepen",
keywords: "code editor",
// @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
icon: () => <Img src="/images/codepen.png" />,
icon: () => <Img src="/images/codepen.png" alt="Codepen" />,
component: Codepen,
matcher: matcher(Codepen),
},
{
title: "Descript",
keywords: "audio",
// @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
icon: () => <Img src="/images/descript.png" />,
icon: () => <Img src="/images/descript.png" alt="Descript" />,
component: Descript,
matcher: matcher(Descript),
},
{
title: "Figma",
keywords: "design svg vector",
// @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
icon: () => <Img src="/images/figma.png" />,
icon: () => <Img src="/images/figma.png" alt="Figma" />,
component: Figma,
matcher: matcher(Figma),
},
{
title: "Framer",
keywords: "design prototyping",
// @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
icon: () => <Img src="/images/framer.png" />,
icon: () => <Img src="/images/framer.png" alt="Framer" />,
component: Framer,
matcher: matcher(Framer),
},
{
title: "GitHub Gist",
keywords: "code",
// @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
icon: () => <Img src="/images/github-gist.png" />,
icon: () => <Img src="/images/github-gist.png" alt="GitHub" />,
component: Gist,
matcher: matcher(Gist),
},
{
title: "Diagrams.net",
keywords: "diagrams drawio",
// @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
icon: () => <Img src="/images/diagrams.png" />,
icon: () => <Img src="/images/diagrams.png" alt="Diagrams.net" />,
component: Diagrams,
matcher: matcher(Diagrams),
},
{
title: "Google Drawings",
keywords: "drawings",
// @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
icon: () => <Img src="/images/google-drawings.png" />,
icon: () => <Img src="/images/google-drawings.png" alt="Google Drawings" />,
component: GoogleDrawings,
matcher: matcher(GoogleDrawings),
},
{
title: "Google Drive",
keywords: "drive",
// @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
icon: () => <Img src="/images/google-drive.png" />,
icon: () => <Img src="/images/google-drive.png" alt="Google Drive" />,
component: GoogleDrive,
matcher: matcher(GoogleDrive),
},
{
title: "Google Docs",
// @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
icon: () => <Img src="/images/google-docs.png" />,
icon: () => <Img src="/images/google-docs.png" alt="Google Docs" />,
component: GoogleDocs,
matcher: matcher(GoogleDocs),
},
{
title: "Google Sheets",
keywords: "excel spreadsheet",
// @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
icon: () => <Img src="/images/google-sheets.png" />,
icon: () => <Img src="/images/google-sheets.png" alt="Google Sheets" />,
component: GoogleSheets,
matcher: matcher(GoogleSheets),
},
{
title: "Google Slides",
keywords: "presentation slideshow",
// @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
icon: () => <Img src="/images/google-slides.png" />,
icon: () => <Img src="/images/google-slides.png" alt="Google Slides" />,
component: GoogleSlides,
matcher: matcher(GoogleSlides),
},
{
title: "Google Calendar",
keywords: "calendar",
// @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
icon: () => <Img src="/images/google-calendar.png" />,
icon: () => <Img src="/images/google-calendar.png" alt="Google Calendar" />,
component: GoogleCalendar,
matcher: matcher(GoogleCalendar),
},
{
title: "Google Data Studio",
keywords: "business intelligence",
// @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
icon: () => <Img src="/images/google-datastudio.png" />,
keywords: "bi business intelligence",
icon: () => (
<Img src="/images/google-datastudio.png" alt="Google Data Studio" />
),
component: GoogleDataStudio,
matcher: matcher(GoogleDataStudio),
},
@@ -207,48 +200,42 @@ export default [
title: "InVision",
keywords: "design prototype",
defaultHidden: true,
// @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
icon: () => <Img src="/images/invision.png" />,
icon: () => <Img src="/images/invision.png" alt="InVision" />,
component: InVision,
matcher: matcher(InVision),
},
{
title: "Loom",
keywords: "video screencast",
// @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
icon: () => <Img src="/images/loom.png" />,
icon: () => <Img src="/images/loom.png" alt="Loom" />,
component: Loom,
matcher: matcher(Loom),
},
{
title: "Lucidchart",
keywords: "chart",
// @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
icon: () => <Img src="/images/lucidchart.png" />,
icon: () => <Img src="/images/lucidchart.png" alt="Lucidchart" />,
component: Lucidchart,
matcher: matcher(Lucidchart),
},
{
title: "Marvel",
keywords: "design prototype",
// @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
icon: () => <Img src="/images/marvel.png" />,
icon: () => <Img src="/images/marvel.png" alt="Marvel" />,
component: Marvel,
matcher: matcher(Marvel),
},
{
title: "Mindmeister",
keywords: "mindmap",
// @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
icon: () => <Img src="/images/mindmeister.png" />,
icon: () => <Img src="/images/mindmeister.png" alt="Mindmeister" />,
component: Mindmeister,
matcher: matcher(Mindmeister),
},
{
title: "Miro",
keywords: "whiteboard",
// @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
icon: () => <Img src="/images/miro.png" />,
icon: () => <Img src="/images/miro.png" alt="Miro" />,
component: Miro,
matcher: matcher(Miro),
},
@@ -256,8 +243,7 @@ export default [
title: "Mode",
keywords: "analytics",
defaultHidden: true,
// @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
icon: () => <Img src="/images/mode-analytics.png" />,
icon: () => <Img src="/images/mode-analytics.png" alt="Mode" />,
component: ModeAnalytics,
matcher: matcher(ModeAnalytics),
},
@@ -265,56 +251,49 @@ export default [
title: "Pitch",
keywords: "presentation",
defaultHidden: true,
// @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
icon: () => <Img src="/images/pitch.png" />,
icon: () => <Img src="/images/pitch.png" alt="Pitch" />,
component: Pitch,
matcher: matcher(Pitch),
},
{
title: "Prezi",
keywords: "presentation",
// @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
icon: () => <Img src="/images/prezi.png" />,
icon: () => <Img src="/images/prezi.png" alt="Prezi" />,
component: Prezi,
matcher: matcher(Prezi),
},
{
title: "Spotify",
keywords: "music",
// @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
icon: () => <Img src="/images/spotify.png" />,
icon: () => <Img src="/images/spotify.png" alt="Spotify" />,
component: Spotify,
matcher: matcher(Spotify),
},
{
title: "Trello",
keywords: "kanban",
// @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
icon: () => <Img src="/images/trello.png" />,
icon: () => <Img src="/images/trello.png" alt="Trello" />,
component: Trello,
matcher: matcher(Trello),
},
{
title: "Typeform",
keywords: "form survey",
// @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
icon: () => <Img src="/images/typeform.png" />,
icon: () => <Img src="/images/typeform.png" alt="Typeform" />,
component: Typeform,
matcher: matcher(Typeform),
},
{
title: "Vimeo",
keywords: "video",
// @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
icon: () => <Img src="/images/vimeo.png" />,
icon: () => <Img src="/images/vimeo.png" alt="Vimeo" />,
component: Vimeo,
matcher: matcher(Vimeo),
},
{
title: "YouTube",
keywords: "google video",
// @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
icon: () => <Img src="/images/youtube.png" />,
icon: () => <Img src="/images/youtube.png" alt="YouTube" />,
component: YouTube,
matcher: matcher(YouTube),
},