Merge branch 'main' into placeholder-text

ApollosProject · Mar 4, 2024 · 75c797b · 75c797b
2 parents 67afc69 + 54e42fa
commit 75c797b
Show file tree

Hide file tree

Showing 38 changed files with 328,418 additions and 188 deletions.
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
@@ -1,9 +1,7 @@
 ## 🐛 Issue
 
-<!-- Link to the issue in basecamp this PR is addressing. If there is no related issue or related pull request, consider briefly describing the problem or enhancement being addressed. -->
-
-<!--Github issue this PR will close. Remove if not valid.-->
-Closes #
+<!-- Link to the issue in Github or Basecamp this PR is addressing. If there is no related issue or related pull request, consider briefly describing the problem or enhancement being addressed. -->
+Closes <link>
 
 ## ✏️ Solution
 

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -0,0 +1,26 @@
+# Github action to deploy the web-embed project to NPM
+
+name: Deploy
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          registry-url: https://registry.npmjs.org/
+
+      - name: Deploy to NPM
+        run: npm run bump
+        working-directory: web-embeds
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
diff --git a/micro-service/package.json b/micro-service/package.json
@@ -19,6 +19,7 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "@phosphor-icons/react": "2.0.15",
     "algoliasearch": "^4.17.0",
     "amplitude-js": "^8.21.9",
     "apollo-upload-client": "^17.0.0",
@@ -31,7 +32,6 @@
     "graphql": "^16.6.0",
     "lodash": "^4.17.21",
     "moment": "^2.29.1",
-    "phosphor-react": "^1.4.1",
     "postcss": "^7.0.39",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",

diff --git a/micro-service/yarn.lock b/micro-service/yarn.lock
@@ -1379,6 +1379,13 @@
   dependencies:
     regenerator-runtime "^0.13.11"
 
+"@babel/runtime@^7.17.8":
+  version "7.24.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.0.tgz#584c450063ffda59697021430cb47101b085951e"
+  integrity sha512-Chk32uHMg6TnQdvw2e9IlqPpFX/6NLuK0Ys2PqLb7/gL5uFn9mXvK715FGLlOLQrcO4qIkNHkvPGktzzXexsFw==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.22.5", "@babel/template@^7.3.3":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.5.tgz#0c8c4d944509875849bd0344ff0050756eefc6ec"
@@ -1608,6 +1615,14 @@
   resolved "https://registry.yarnpkg.com/@graphql-typed-document-node/core/-/core-3.2.0.tgz#5f3d96ec6b2354ad6d8a28bf216a1d97b5426861"
   integrity sha512-mB9oAsNCm9aM3/SOv4YtBMqZbYj10R7dkq8byBqxGY/ncFwhf2oQzMV+LCRlWoDSEBJ3COiR1yeDvMtsoOsuFQ==
 
+"@headlessui/react@^1.7.18":
+  version "1.7.18"
+  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.18.tgz#30af4634d2215b2ca1aa29d07f33d02bea82d9d7"
+  integrity sha512-4i5DOrzwN4qSgNsL4Si61VMkUcWbcSKueUV7sFhpHzQcSShdlHENE5+QBntMSRvHt8NyoFO2AGG8si9lq+w4zQ==
+  dependencies:
+    "@tanstack/react-virtual" "^3.0.0-beta.60"
+    client-only "^0.0.1"
+
 "@humanwhocodes/config-array@^0.11.10":
   version "0.11.10"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.10.tgz#5a3ffe32cc9306365fb3fd572596cd602d5e12d2"
@@ -1998,6 +2013,11 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@phosphor-icons/[email protected]":
+  version "2.0.15"
+  resolved "https://registry.yarnpkg.com/@phosphor-icons/react/-/react-2.0.15.tgz#4d8e28484d45649f53a6cd75db161cf8b8379e1d"
+  integrity sha512-PQKNcRrfERlC8gJGNz0su0i9xVmeubXSNxucPcbCLDd9u0cwJVTEyYK87muul/svf0UXFdL2Vl6bbeOhT1Mwow==
+
 "@pmmmwh/react-refresh-webpack-plugin@^0.5.3":
   version "0.5.10"
   resolved "https://registry.yarnpkg.com/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.10.tgz#2eba163b8e7dbabb4ce3609ab5e32ab63dda3ef8"
@@ -3278,6 +3298,18 @@
     "@svgr/plugin-svgo" "^5.5.0"
     loader-utils "^2.0.0"
 
+"@tanstack/react-virtual@^3.0.0-beta.60":
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-virtual/-/react-virtual-3.1.3.tgz#4ef2a7dd819a7dd2b634d50cbd6ba498f06529ec"
+  integrity sha512-YCzcbF/Ws/uZ0q3Z6fagH+JVhx4JLvbSflgldMgLsuvB8aXjZLLb3HvrEVxY480F9wFlBiXlvQxOyXb5ENPrNA==
+  dependencies:
+    "@tanstack/virtual-core" "3.1.3"
+
+"@tanstack/[email protected]":
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/@tanstack/virtual-core/-/virtual-core-3.1.3.tgz#77ced625f19ec9350f6e460f142b3be9bff03866"
+  integrity sha512-Y5B4EYyv1j9V8LzeAoOVeTg0LI7Fo5InYKgAjkY1Pu9GjtUwX/EKxNcU7ng3sKr99WEf+bPTcktAeybyMOYo+g==
+
 "@testing-library/dom@^7.28.1":
   version "7.31.2"
   resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-7.31.2.tgz#df361db38f5212b88555068ab8119f5d841a8c4a"
@@ -4773,6 +4805,11 @@ clean-css@^5.2.2:
   dependencies:
     source-map "~0.6.0"
 
+client-only@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
+  integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
+
 cliui@^7.0.2:
   version "7.0.4"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-7.0.4.tgz#a0265ee655476fc807aea9df3df8df7783808b4f"
@@ -8570,11 +8607,6 @@ performance-now@^2.1.0:
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
   integrity sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==
 
-phosphor-react@^1.4.1:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/phosphor-react/-/phosphor-react-1.4.1.tgz#97b0e034d9937db9b97fe53b186e9646464fd4e7"
-  integrity sha512-gO5j7U0xZrdglTAYDYPACU4xDOFBTJmptrrB/GeR+tHhCZF3nUMyGmV/0hnloKjuTrOmpSFlbfOY78H39rgjUQ==
-
 picocolors@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-0.2.1.tgz#570670f793646851d1ba135996962abad587859f"
@@ -8614,6 +8646,13 @@ pkg-up@^3.1.0:
   dependencies:
     find-up "^3.0.0"
 
+polished@^4.1.2:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/polished/-/polished-4.3.1.tgz#5a00ae32715609f83d89f6f31d0f0261c6170548"
+  integrity sha512-OBatVyC/N7SCW/FaDHrSd+vn0o5cS855TOmYi4OkdWUMSJCET/xip//ch8xGUvtr3i44X9LVyWwQlRMTN3pwSA==
+  dependencies:
+    "@babel/runtime" "^7.17.8"
+
 postcss-attribute-case-insensitive@^5.0.2:
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-5.0.2.tgz#03d761b24afc04c09e757e92ff53716ae8ea2741"
@@ -9653,6 +9692,11 @@ regenerator-runtime@^0.13.11, regenerator-runtime@^0.13.9:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
   integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
 
+regenerator-runtime@^0.14.0:
+  version "0.14.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f"
+  integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==
+
 regenerator-transform@^0.15.1:
   version "0.15.1"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.1.tgz#f6c4e99fc1b4591f780db2586328e4d9a9d8dc56"

diff --git a/package.json b/package.json
@@ -1,5 +1,6 @@
 {
   "name": "apollos-embeds",
+  "private": true,
   "version": "0.0.1",
   "main": "index.js",
   "repository": "https://github.com/ApollosProject/apollos-embeds.git",
@@ -9,6 +10,6 @@
     "packages": [
       "packages/*"
     ],
-    "nohoist": [ ]
+    "nohoist": []
   }
 }
diff --git a/packages/web-shared/components/AddToCalendar/AddToCalendar.js b/packages/web-shared/components/AddToCalendar/AddToCalendar.js
@@ -0,0 +1,93 @@
+import React from 'react';
+import { Menu } from '@headlessui/react';
+import {
+  CalendarPlus,
+  AppleLogo,
+  GoogleLogo,
+  MicrosoftOutlookLogo,
+  FileArrowDown,
+} from '@phosphor-icons/react';
+import { ActionIcon, List, MenuLink } from './AddToCalendar.styles';
+import { addSeconds, parseISO } from 'date-fns';
+
+function convertToIcsLink({ start, duration, location, allDay, title }) {
+  const startDate = parseISO(start);
+  const endDate = addSeconds(startDate, duration);
+  const startDateString = startDate.toISOString().replace(/-|:|\.\d+/g, '');
+  const endDateString = endDate.toISOString().replace(/-|:|\.\d+/g, '');
+  const locationString = (location || '').replace(/<[^>]+>/g, ' ');
+  return `data:text/calendar;charset=utf8,BEGIN:VCALENDAR
+VERSION:2.0
+BEGIN:VEVENT
+DTSTART:${startDateString}
+DTEND:${endDateString}
+SUMMARY:${title}
+LOCATION:${locationString}
+END:VEVENT
+END:VCALENDAR`;
+}
+
+function convertToGoogleLink({ start, duration, location, allDay, title }) {
+  const startDate = parseISO(start);
+  const endDate = addSeconds(startDate, duration);
+  const startDateString = startDate.toISOString().replace(/-|:|\.\d+/g, '');
+  const endDateString = endDate.toISOString().replace(/-|:|\.\d+/g, '');
+  const locationString = (location || '').replace(/<[^>]+>/g, ' ');
+  return `https://www.google.com/calendar/render?action=TEMPLATE&text=${title}&dates=${startDateString}/${endDateString}&location=${locationString}`;
+}
+
+function convertToOutlookLink({ start, duration, location, allDay, title }) {
+  const startDate = parseISO(start);
+  const endDate = addSeconds(startDate, duration);
+  const startDateString = startDate.toISOString().replace(/-|:|\.\d+/g, '');
+  const endDateString = endDate.toISOString().replace(/-|:|\.\d+/g, '');
+  const locationString = (location || '').replace(/<[^>]+>/g, ' ');
+  return `https://outlook.live.com/calendar/action/compose&rru=addevent&startdt=${startDateString}&enddt=${endDateString}&subject=${title}&location=${locationString}`;
+}
+
+const AddToCalendar = ({ start, duration, allDay, location, title = 'Event' }) => {
+  return (
+    <Menu as="div" style={{ position: 'relative' }}>
+      <ActionIcon>
+        <CalendarPlus size={16} weight="bold" />
+      </ActionIcon>
+      <List>
+        <Menu.Item>
+          <MenuLink href={convertToIcsLink({ start, duration, allDay, location, title })}>
+            <AppleLogo size={14} weight="fill" />
+            &nbsp;Apple Calendar
+          </MenuLink>
+        </Menu.Item>
+        <Menu.Item>
+          <MenuLink
+            href={convertToGoogleLink({ start, duration, allDay, location, title })}
+            target="blank"
+          >
+            <GoogleLogo size={14} weight="fill" />
+            &nbsp;Google Calendar
+          </MenuLink>
+        </Menu.Item>
+        <Menu.Item>
+          <MenuLink
+            href={convertToOutlookLink({ start, duration, allDay, location, title })}
+            target="blank"
+          >
+            <MicrosoftOutlookLogo size={14} weight="fill" />
+            &nbsp;Microsoft Outlook
+          </MenuLink>
+        </Menu.Item>
+        <Menu.Item>
+          <MenuLink
+            href={convertToIcsLink({ start, duration, allDay, location, title })}
+            target="blank"
+          >
+            <FileArrowDown size={14} weight="fill" />
+            &nbsp;Download .ics
+          </MenuLink>
+        </Menu.Item>
+      </List>
+    </Menu>
+  );
+};
+
+export default AddToCalendar;
diff --git a/packages/web-shared/components/AddToCalendar/AddToCalendar.styles.js b/packages/web-shared/components/AddToCalendar/AddToCalendar.styles.js
@@ -0,0 +1,65 @@
+import React from 'react';
+import { Menu } from '@headlessui/react';
+import styled from 'styled-components';
+import { withTheme } from 'styled-components';
+import { rgba } from 'polished';
+
+import { themeGet } from '@styled-system/theme-get';
+import { system } from '../../ui-kit/_lib/system';
+
+export const ActionIcon = withTheme(styled(Menu.Button)`
+  // flex items-center justify-center p-2 bg-gray-50 rounded-full
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background-color: ${themeGet('colors.fill.system4')};
+  transition: background-color ${themeGet('timing.xl')};
+  border-radius: 100%;
+  cursor: pointer;
+  border: none;
+  outline: none;
+
+  &:hover {
+    background-color: ${themeGet('colors.fill.system2')};
+  }
+  ${system}
+`);
+
+export const List = withTheme(styled(Menu.Items)`
+  position: absolute;
+  right: 0;
+  top: 38px;
+  min-width: 200px;
+  color: ${themeGet('colors.text.primary')};
+  border-radius: ${themeGet('radii.xl')};
+  background-color: ${themeGet('colors.fill.paper')};
+  box-shadow: ${themeGet('shadows.medium')};
+  overflow: hidden;
+  padding: ${themeGet('space.xxs')};
+  ${system}
+`);
+
+export const MenuContainer = withTheme(styled(Menu)`
+  position: relative;
+  ${system}
+`);
+
+export const MenuLink = withTheme(styled.a`
+  display: flex;
+  align-items: center;
+  padding: ${themeGet('space.xxs')} ${themeGet('space.xs')};
+  color: ${themeGet('colors.text.primary')};
+  margin-bottom: ${themeGet('space.xxs')};
+  border-radius: ${themeGet('radii.base')};
+  transition: all ${themeGet('timing.l')};
+  text-align: left;
+  cursor: pointer;
+
+  &:hover {
+    background-color: ${(props) => rgba(themeGet('colors.base.secondary')(props), 0.15)};
+    color: ${themeGet('colors.base.secondary')};
+  }
+  ${system}
+`);
diff --git a/packages/web-shared/components/AddToCalendar/index.js b/packages/web-shared/components/AddToCalendar/index.js
@@ -0,0 +1,2 @@
+import AddToCalendar from './AddToCalendar';
+export default AddToCalendar;
diff --git a/packages/web-shared/components/Auth/AuthLayout/AuthLayout.js b/packages/web-shared/components/Auth/AuthLayout/AuthLayout.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { CaretLeft } from 'phosphor-react';
+import { CaretLeft } from '@phosphor-icons/react';
 
 import { Box, Card, Button } from '../../../ui-kit';
 import customizations from './customizations';
@@ -34,14 +34,7 @@ function AuthLayout(props = {}) {
       alignItems="center"
       backgroundColor="neutral.gray6"
     >
-      <Card
-        p="l"
-        pt="base"
-        display="flex"
-        flexDirection="column"
-        width="440px"
-        {...props}
-      >
+      <Card p="l" pt="base" display="flex" flexDirection="column" width="440px" {...props}>
         {state.prevStep === authSteps.Identity ? (
           <Button
             variant="link"
@@ -56,9 +49,7 @@ function AuthLayout(props = {}) {
           />
         ) : null}
         <Heading>{props.heading || customizations.defaulthHeading}</Heading>
-        <SubHeading>
-          {props.subHeading || customizations.defaultSubHeading}
-        </SubHeading>
+        <SubHeading>{props.subHeading || customizations.defaultSubHeading}</SubHeading>
         {props.children}
       </Card>
     </Box>

diff --git a/packages/web-shared/components/Breadcrumbs/Breadcrumbs.js b/packages/web-shared/components/Breadcrumbs/Breadcrumbs.js
@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import { useSearchParams, useNavigate, useLocation } from 'react-router-dom';
-import { CaretRight } from 'phosphor-react';
+import { CaretRight } from '@phosphor-icons/react';
 import { Box, Button, SystemText } from '../../ui-kit';
 import {
   remove as removeBreadcrumb,
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		import AddToCalendar from './AddToCalendar';
		export default AddToCalendar;