Move meet onto shared components

.eslintrc.js

@@ -1,4 +1,4 @@
 /** @type {import("eslint").Linter.Config} */
 module.exports = {
-  extends: ["@bluedot/eslint-config/index.js"],
+  extends: ["@bluedot/eslint-config"],
 };

.vscode/settings.json

@@ -2,6 +2,9 @@
     "tailwindCSS.experimental.classRegex": [
         ["clsx\\(([^)]*)\\)", "'([^']*)'"]
     ],
+    "tailwindCSS.experimental.configFile": {
+        "apps/availability/tailwind.config.ts": "libraries/ui/**"
+    },
     "cSpell.words": [
         "BlueDot",
         "bluedotimpact",

apps/meet/src/base.css

@@ -1,5 +1,6 @@
 /*
 Base styles to reset CSS, scoped to tw-preflight container
+This is so it doesn't clash with Zoom's styles
 Derived from https://unpkg.com/[email protected]/src/css/preflight.css
 Also see https://github.com/tailwindlabs/tailwindcss/discussions/7050
 */

apps/meet/src/components/AppJoinView.tsx

@@ -1,16 +1,15 @@
 import { useEffect, useState } from 'react';
+import { Button, Link } from '@bluedot/ui';
 import { PageState } from '../lib/client/pageState';
 import { Page } from './Page';
 import { H1 } from './Text';
-import Button from './Button';
-import Link from './Link';
 
 export type AppJoinViewProps = {
   page: PageState & { name: 'appJoin' },
 };
 
 const AppJoinView: React.FC<AppJoinViewProps> = ({ page: { meetingNumber, meetingPassword, meetingHostKey } }) => {
-  const [secondsToOpen, setSecondsToOpen] = useState(meetingHostKey ? 10 : 0);
+  const [secondsToOpen, setSecondsToOpen] = useState(meetingHostKey ? 5 : 0);
   const joinDirect = () => {
     window.open(`zoomus://zoom.us/join?action=join&confno=${meetingNumber}&pwd=${meetingPassword}`, '_self');
   };
@@ -42,7 +41,7 @@ const AppJoinView: React.FC<AppJoinViewProps> = ({ page: { meetingNumber, meetin
           <H1 className="flex-1">Enjoy your meeting!</H1>
         </div>
         {meetingHostKeyMessage}
-        <Button onClick={() => joinDirect()}>Join now</Button>
+        <Button onPress={() => joinDirect()}>Join now</Button>
         <p className="mt-4">Button doesn't work? <Link href={`https://zoom.us/j/${meetingNumber}?pwd=${meetingPassword}`} className="underline">Join via Zoom website</Link></p>
       </Page>
     );
@@ -54,7 +53,7 @@ const AppJoinView: React.FC<AppJoinViewProps> = ({ page: { meetingNumber, meetin
         <H1 className="flex-1">Joining your meeting in {secondsToOpen}...</H1>
       </div>
       {meetingHostKeyMessage}
-      <Button onClick={() => setSecondsToOpen(0)}>Join now</Button>
+      <Button onPress={() => setSecondsToOpen(0)}>Join now</Button>
     </Page>
   );
 };

apps/meet/src/components/CustomNameView.tsx

@@ -1,9 +1,9 @@
 import { useState } from 'react';
+import { Button } from '@bluedot/ui';
 import { PageState } from '../lib/client/pageState';
 import useJoinAs from '../lib/client/useJoinAs';
 import { Page } from './Page';
 import { H1 } from './Text';
-import Button from './Button';
 
 export type CustomNameViewProps = {
   page: PageState & { name: 'custom' },
@@ -23,8 +23,8 @@ const CustomNameView: React.FC<CustomNameViewProps> = ({ page: { cohortClassId }
         <>
           <p>If you're sure this is the meeting for you, enter your name below</p>
           <form className="flex gap-2 mt-2" onSubmit={(event) => { event.preventDefault(); return joinAs({ name }); }}>
-            <input type="text" autoComplete="name" placeholder="Your name" className="px-2 py-1.5 rounded border-2" value={name} onChange={(value) => setName(value.target.value)} />
-            <Button onClick={() => joinAs({ name })}>Join</Button>
+            <input type="text" autoComplete="name" placeholder="Your name" className="px-2 py-1 rounded border-2 focus-visible:outline-1 focus-visible:outline-bluedot-normal" value={name} onChange={(value) => setName(value.target.value)} />
+            <Button onPress={() => joinAs({ name })}>Join now</Button>
           </form>
         </>
       )}

apps/meet/src/components/Page.tsx

@@ -1,7 +1,13 @@
 export const Page: React.FC<React.PropsWithChildren> = ({ children }) => {
   return (
-    <main className="tw-preflight max-w-3xl bg-slate-100 border rounded mx-4 md:mx-auto p-12 my-16">
-      {children}
-    </main>
+    <div className="tw-preflight">
+      <div className="min-h-screen bg-cream-normal py-16">
+        <main className="max-w-3xl border-2 border-stone-300 mx-4 md:mx-auto">
+          <div className="m-12">
+            {children}
+          </div>
+        </main>
+      </div>
+    </div>
   );
 };

apps/meet/src/components/SelectPersonView.tsx

@@ -1,13 +1,12 @@
 import useAxios from 'axios-hooks';
 import { useState } from 'react';
 import axios, { AxiosResponse } from 'axios';
+import { Button, Link } from '@bluedot/ui';
 import { PageState } from '../lib/client/pageState';
 import { MeetingParticipantsRequest, MeetingParticipantsResponse } from '../pages/api/public/meeting-participants';
 import useJoinAs from '../lib/client/useJoinAs';
 import { Page } from './Page';
 import { H1 } from './Text';
-import Button from './Button';
-import Link from './Link';
 import { RecordAttendanceRequest, RecordAttendanceResponse } from '../pages/api/public/record-attendance';
 
 export type SelectPersonViewProps = {
@@ -72,11 +71,11 @@ const SelectPersonView: React.FC<SelectPersonViewProps> = ({ page: { cohortId },
       {joinError && <p className="mb-2">Error: {joinError}</p>}
       {isJoining ? <p>Joining meeting...</p> : (
         <>
-          <div className="grid gap-2 md:w-1/2">
+          <div className="grid gap-2 sm:w-1/2">
             {data.participants.map((participant) => (
               <Button
                 key={participant.id}
-                onClick={async () => {
+                onPress={async () => {
                   if (joinWithApp) {
                     await axios<RecordAttendanceResponse, AxiosResponse<MeetingParticipantsResponse>, RecordAttendanceRequest>({
                       method: 'POST',
@@ -102,10 +101,8 @@ const SelectPersonView: React.FC<SelectPersonViewProps> = ({ page: { cohortId },
           <div className="mt-4">
             Not on this list?
             {' '}
-            {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
             <Link
-              role="button"
-              onClick={() => {
+              onPress={() => {
                 if (joinWithApp) {
                   setPage({
                     name: 'appJoin',

apps/meet/src/pages/finished.tsx

@@ -1,8 +1,8 @@
 import { useSearchParams } from 'next/navigation';
 import useAxios from 'axios-hooks';
+import { Button } from '@bluedot/ui';
 import { Page } from '../components/Page';
 import { H1 } from '../components/Text';
-import Button from '../components/Button';
 import { CohortCourseHubLinkRequest, CohortCourseHubLinkResponse } from './api/public/cohort-course-hub-link';
 
 const Finished: React.FC = () => {

apps/meet/src/pages/record-attendance.tsx

@@ -1,9 +1,9 @@
 import { useSearchParams } from 'next/navigation';
 import useAxios from 'axios-hooks';
 import { useState } from 'react';
+import { Button } from '@bluedot/ui';
 import { Page } from '../components/Page';
 import { H1 } from '../components/Text';
-import Button from '../components/Button';
 import { RecordAttendanceRequest, RecordAttendanceResponse } from './api/public/record-attendance';
 
 const RecordAttendance: React.FC = () => {
@@ -57,14 +57,14 @@ const RecordAttendancePage: React.FC<{ cohortClassId: string, participantId: str
       <H1 className="flex-1">Manual attendance update</H1>
       <p className="mb-2">Why do you need to update your attendance?</p>
       <div className="grid gap-2 md:w-1/2">
-        {['Used native Zoom app', 'Used direct Zoom link in browser', 'Joined with wrong name', 'Joined with a custom name', 'Not sure, but I attended'].map((reason) => <Button onClick={() => recordAttendance({ reason })}>{reason}</Button>)}
+        {['Used native Zoom app', 'Used direct Zoom link in browser', 'Joined with wrong name', 'Joined with a custom name', 'Not sure, but I attended'].map((reason) => <Button onPress={() => recordAttendance({ reason })}>{reason}</Button>)}
       </div>
 
       <div className="mt-4 flex md:w-1/2">
         <label className="flex items-center flex-1">Other:
-          <input type="text" value={otherReason} onChange={(event) => setOtherReason(event.currentTarget.value)} className="ml-2 border-2 border-slate-300 rounded p-1.5 w-full" />
+          <input type="text" value={otherReason} onChange={(event) => setOtherReason(event.currentTarget.value)} className="ml-2 w-full px-2 py-1 rounded border-2 focus-visible:outline-1 focus-visible:outline-bluedot-normal" />
         </label>
-        <Button onClick={() => recordAttendance({ reason: otherReason })} disabled={!otherReason.length} className="ml-2">Submit</Button>
+        <Button onPress={() => recordAttendance({ reason: otherReason })} disabled={!otherReason.length} className="ml-2">Submit</Button>
       </div>
     </Page>
   );

libraries/eslint-config/package.json

@@ -2,9 +2,7 @@
   "name": "@bluedot/eslint-config",
   "version": "0.0.0",
   "private": true,
-  "files": [
-    "index.js"
-  ],
+  "main": "src/index.js",
   "devDependencies": {
     "@types/eslint": "^8.44.8",
     "eslint-config-domdomegg": "^1.2.3",

libraries/eslint-config/index.js → libraries/eslint-config/src/index.js

@@ -49,6 +49,8 @@ const rules = {
     ],
     optionalDependencies: false,
   }],
+  // Almost always a false positive on the <Link> component
+  'jsx-a11y/anchor-is-valid': ['off']
 };
 
 /** @type {import("eslint").Linter.RulesRecord} */

libraries/ui/src/Button.tsx

@@ -1,18 +1,12 @@
 import clsx from 'clsx';
-import { PressEvent, Button as ReactAriaButton, Link as ReactAriaLink } from 'react-aria-components';
+import { LinkOrButton, LinkOrButtonProps } from './LinkOrButton';
 
-export type ButtonProps = React.PropsWithChildren<{
-  className?: string;
-  onPress?: (e: PressEvent) => void;
-  href?: string,
-  target?: React.HTMLAttributeAnchorTarget,
-  disabled?: boolean;
-}>;
+export type ButtonProps = LinkOrButtonProps;
 
 export const Button = ({
   children, className, onPress, disabled, href, target,
 }: ButtonProps) => {
-  const classes = clsx('text-base font-normal leading-4 py-1.5 px-3 border border-black rounded-[20px] text-black transition-all duration-200 inline-block cursor-pointer data-[hovered]:border-bluedot-normal data-[hovered]:bg-bluedot-lighter data-[focus-visible]:border-bluedot-normal data-[focus-visible]:bg-bluedot-lighter data-[pressed]:border-bluedot-normal data-[pressed=true]:bg-bluedot-normal data-[pressed=true]:text-white outline-none', className);
+  const classes = clsx('text-base font-normal leading-4 py-1.5 px-3 border border-black rounded-[20px] text-black transition-all duration-200 inline-block cursor-pointer data-[hovered]:border-bluedot-normal data-[hovered]:bg-bluedot-lighter data-[focus-visible]:border-bluedot-normal data-[focus-visible]:bg-bluedot-lighter data-[focus-visible]:outline-bluedot-normal data-[focus-visible]:outline-1 data-[pressed]:border-bluedot-normal data-[pressed=true]:bg-bluedot-normal data-[pressed=true]:text-white outline-none outline-offset-0 self-center [.flex-col_&]:self-start text-left', disabled && 'opacity-40 pointer-events-none', className);
 
   return (
     <LinkOrButton
@@ -25,29 +19,3 @@ export const Button = ({
     </LinkOrButton>
   );
 };
-
-export const LinkOrButton = ({
-  children, className, onPress, disabled, href, target,
-}: ButtonProps) => {
-  if (href) {
-    return (
-      <ReactAriaLink
-        className={className}
-        onPress={onPress}
-        href={href}
-        target={target}
-        isDisabled={disabled}
-      >{children}
-      </ReactAriaLink>
-    );
-  }
-
-  return (
-    <ReactAriaButton
-      className={className}
-      onPress={onPress}
-      isDisabled={disabled}
-    >{children}
-    </ReactAriaButton>
-  );
-};

libraries/ui/src/Link.tsx

@@ -0,0 +1,21 @@
+import clsx from 'clsx';
+import { LinkOrButton, LinkOrButtonProps } from './LinkOrButton';
+
+export type LinkProps = LinkOrButtonProps;
+
+export const Link = ({
+  children, className, onPress, disabled, href, target,
+}: LinkProps) => {
+  const classes = clsx('underline', className);
+
+  return (
+    <LinkOrButton
+      className={classes}
+      onPress={onPress}
+      href={href}
+      target={target}
+      disabled={disabled}
+    >{children}
+    </LinkOrButton>
+  );
+};