feat: Add ClickUp Embed Service (#1465)

* Add Clickup Embed Service

* Transparency Icon


Co-authored-by: Tom Moor <tom.moor@gmail.com>

app/embeds/ClickUp.js

@@ -0,0 +1,22 @@
+// @flow
+import * as React from "react";
+import Frame from "./components/Frame";
+
+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];
+
+  render() {
+    return <Frame src={this.props.attrs.href} title="ClickUp Embed" />;
+  }
+}

app/embeds/ClickUp.test.js

@@ -0,0 +1,17 @@
+/* eslint-disable flowtype/require-valid-file-annotation */
+import ClickUp from "./ClickUp";
+
+describe("ClickUp", () => {
+  const match = ClickUp.ENABLED[0];
+  test("to be enabled on share link", () => {
+    expect(
+      "https://share.clickup.com/b/h/6-9310960-2/c9d837d74182317".match(match)
+    ).toBeTruthy();
+  });
+
+  test("to not be enabled elsewhere", () => {
+    expect("https://share.clickup.com".match(match)).toBe(null);
+    expect("https://clickup.com/".match(match)).toBe(null);
+    expect("https://clickup.com/features".match(match)).toBe(null);
+  });
+});

app/embeds/index.js

@@ -3,6 +3,7 @@ import * as React from "react";
 import styled from "styled-components";
 import Abstract from "./Abstract";
 import Airtable from "./Airtable";
+import ClickUp from "./ClickUp";
 import Codepen from "./Codepen";
 import Figma from "./Figma";
 import Framer from "./Framer";
@@ -57,6 +58,13 @@ export default [
     component: Airtable,
     matcher: matcher(Airtable),
   },
+  {
+    title: "ClickUp",
+    keywords: "project",
+    icon: () => <Img src="/images/clickup.png" />,
+    component: ClickUp,
+    matcher: matcher(ClickUp),
+  },
   {
     title: "Codepen",
     keywords: "code editor",