diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index 91d56946..ec3d1ec9 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -1,9 +1,7 @@ ## 🐛 Issue - - - -Closes # + +Closes ## ✏️ Solution diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml new file mode 100644 index 00000000..f0390873 --- /dev/null +++ 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 index 3070ec32..370147fb 100644 --- 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 index 66891b90..0a9d920d 100644 --- 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/react@2.0.15": + 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/virtual-core@3.1.3": + 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 index ca826392..6c35aeaf 100644 --- 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 new file mode 100644 index 00000000..1cb14aaa --- /dev/null +++ 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 ( + + + + + + + + +  Apple Calendar + + + + + +  Google Calendar + + + + + +  Microsoft Outlook + + + + + +  Download .ics + + + + + ); +}; + +export default AddToCalendar; diff --git a/packages/web-shared/components/AddToCalendar/AddToCalendar.styles.js b/packages/web-shared/components/AddToCalendar/AddToCalendar.styles.js new file mode 100644 index 00000000..e9de00f0 --- /dev/null +++ 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 new file mode 100644 index 00000000..ad0a8ee8 --- /dev/null +++ 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 index acf0ede7..28d6907a 100644 --- 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" > - + {state.prevStep === authSteps.Identity ? (