@100mslive/roomkit-react 0.1.0

package/src/Modal/DialogContent.tsx

@@ -0,0 +1,63 @@
+import React, { ComponentProps } from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { CrossIcon } from '@100mslive/react-icons';
+import { IconButton } from '../IconButton';
+import { styled } from '../Theme';
+import { dialogClose, dialogOpen } from '../utils/animations';
+
+export const DialogClose = styled(DialogPrimitive.Close, {
+  backgroundColor: 'transparent',
+  padding: '0',
+  margin: '0',
+  border: 'none',
+  backgroundImage: 'none',
+});
+
+export const StyledDialogTrigger = styled(DialogPrimitive.Trigger, {
+  appearance: 'none !important', // Needed for safari it shows white overlay
+});
+
+export const StyledDialogOverlay = styled(DialogPrimitive.Overlay, {
+  backgroundColor: 'rgba(0, 0, 0, 0.5);',
+  position: 'fixed',
+  inset: 0,
+});
+
+export const StyledDialogPortal = styled(DialogPrimitive.Portal, {});
+
+export const StyledDialogContent = styled(DialogPrimitive.Content, {
+  color: '$textMedEmp',
+  backgroundColor: '$surfaceDefault',
+  borderRadius: '8px',
+  position: 'fixed',
+  top: '50%',
+  left: '50%',
+  border: '$space$px solid $borderDefault',
+  boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)',
+  transform: 'translate(-50%, -50%)',
+  zIndex: 999,
+  padding: '$12',
+  '@allowMotion': {
+    '&[data-state="open"]': {
+      animation: `${dialogOpen} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
+    },
+    '&[data-state="closed"]': {
+      animation: `${dialogClose} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
+    },
+  },
+  '&:focus': { outline: 'none' },
+});
+
+export const DialogTitle = styled(DialogPrimitive.Title, {
+  margin: 0,
+});
+
+export const DialogDescription = styled(DialogPrimitive.Description, {});
+
+export const DialogDefaultCloseIcon = (props: ComponentProps<typeof IconButton>) => (
+  <DialogClose asChild>
+    <IconButton {...props}>
+      <CrossIcon />
+    </IconButton>
+  </DialogClose>
+);

package/src/Modal/index.ts

@@ -0,0 +1 @@
+export { Dialog } from './Dialog';

package/src/Pagination/StyledPagination.stories.tsx

@@ -0,0 +1,80 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { ChevronLeftIcon, ChevronRightIcon } from '@100mslive/react-icons';
+import { StyledPagination } from '.';
+
+type PaginationProps = {
+  page: number;
+  setPage: (page: number) => void;
+  numPages: number;
+};
+
+const PaginationComponent = ({ page: propsPage, setPage: propsSetPage, numPages }: PaginationProps) => {
+  const [page, setPage] = useState(propsPage);
+
+  const disableLeft = page === 0;
+  const disableRight = page === numPages - 1;
+
+  const handlePageChange = useCallback(
+    (page: number) => {
+      setPage(page);
+      propsSetPage(page);
+    },
+    [propsSetPage],
+  );
+
+  const nextPage = () => {
+    handlePageChange(Math.min(page + 1, numPages - 1));
+  };
+
+  const prevPage = () => {
+    handlePageChange(Math.max(page - 1, 0));
+  };
+
+  useEffect(() => {
+    handlePageChange(propsPage);
+  }, [propsPage, handlePageChange]);
+
+  return (
+    <StyledPagination.Root>
+      <StyledPagination.Chevron
+        disabled={disableLeft}
+        onClick={prevPage}
+        type="button"
+        css={{ padding: 0, border: 'none', backgroundColor: '$transparent' }}
+      >
+        <ChevronLeftIcon width={16} height={16} style={{ cursor: disableLeft ? 'not-allowed' : 'pointer' }} />
+      </StyledPagination.Chevron>
+      <StyledPagination.Dots>
+        {[...Array(numPages)].map((_, i) => (
+          <StyledPagination.Dot key={i} active={page === i} onClick={() => handlePageChange(i)} type="button" />
+        ))}
+      </StyledPagination.Dots>
+      <StyledPagination.Chevron
+        disabled={disableRight}
+        onClick={nextPage}
+        type="button"
+        css={{ padding: 0, border: 'none', backgroundColor: '$transparent' }}
+      >
+        <ChevronRightIcon width={16} height={16} style={{ cursor: disableRight ? 'not-allowed' : 'pointer' }} />
+      </StyledPagination.Chevron>
+    </StyledPagination.Root>
+  );
+};
+
+export default {
+  title: 'UI Components/Pagination',
+  component: PaginationComponent,
+  argTypes: {
+    setPage: { action: { type: 'click' } },
+    page: { control: { type: 'number' }, defaultValue: 0 },
+    numPages: { control: { type: 'number' }, defaultValue: 5 },
+  },
+} as ComponentMeta<typeof PaginationComponent>;
+
+const Template: ComponentStory<typeof PaginationComponent> = args => {
+  return <PaginationComponent {...args} />;
+};
+
+export const Example = Template.bind({});
+Example.storyName = 'Pagination';

package/src/Pagination/StyledPagination.tsx

@@ -0,0 +1,68 @@
+import { styled } from '../Theme';
+
+const Root = styled('div', {
+  height: '2rem',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: '100%',
+  '& > * + *': {
+    marginRight: '0',
+    marginLeft: '0.5rem',
+  },
+});
+
+const Chevron = styled('button', {
+  color: '$textPrimary',
+  '&:focus': {
+    outline: 'none',
+  },
+  '&[disabled]': {
+    color: '$grayDefault',
+    cursor: 'not-allowed',
+  },
+  display: 'flex',
+});
+
+const Dots = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  '& > * + *': {
+    marginRight: '0',
+    marginLeft: '0.5rem',
+  },
+});
+
+const Dot = styled('button', {
+  '&:focus': {
+    outline: 'none',
+  },
+  borderRadius: '9999px',
+  width: '0.5rem',
+  height: '0.5rem',
+  backgroundColor: '$textDisabled',
+  padding: '0px',
+  border: 'none',
+  cursor: 'pointer',
+  variants: {
+    active: {
+      true: {
+        backgroundColor: '$textPrimary',
+      },
+    },
+  },
+});
+
+interface PaginationType {
+  Root: typeof Root;
+  Chevron: typeof Chevron;
+  Dots: typeof Dots;
+  Dot: typeof Dot;
+}
+
+export const StyledPagination: PaginationType = {
+  Root,
+  Chevron,
+  Dots,
+  Dot,
+};

package/src/Pagination/index.tsx

@@ -0,0 +1 @@
+export { StyledPagination } from './StyledPagination';

package/src/Popover/Popover.mdx

@@ -0,0 +1,9 @@
+## Popover
+
+Displays rich content in a portal, triggered by a button.
+
+- [Example](#example)
+
+### Example
+
+<Story id="button--example" />

package/src/Popover/Popover.stories.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { CrossIcon, VerticalMenuIcon } from '@100mslive/react-icons';
+import { Button } from '../Button';
+import { Fieldset } from '../Fieldset';
+import { Input } from '../Input';
+import { Label } from '../Label';
+import { Box, Flex } from '../Layout';
+import { Text } from '../Text';
+import { Popover } from './index';
+import PopoverDocs from './Popover.mdx';
+
+export default {
+  title: 'UI Components/Popover',
+  component: Popover.Root,
+  argTypes: { onClick: { action: 'clicked' } },
+  args: {
+    css: {},
+  },
+  parameters: {
+    docs: {
+      page: PopoverDocs,
+    },
+  },
+} as ComponentMeta<typeof Popover.Root>;
+
+//👇 We create a “template” of how args map to rendering
+const Template: ComponentStory<typeof Popover.Root> = () => (
+  <Flex css={{ w: '$80' }} justify="center">
+    <Popover.Root>
+      <Popover.Trigger asChild>
+        <Button
+          variant="standard"
+          css={{
+            aspectRatio: 1,
+            r: '$round',
+            p: '$2 $2',
+            bg: '$bgPrimary',
+            '&:hover': { bg: '$bgSecondary !important' },
+          }}
+        >
+          <Box css={{ w: '$10', h: '$10', c: '$textPrimary' }}>
+            <VerticalMenuIcon />
+          </Box>
+        </Button>
+      </Popover.Trigger>
+      <Popover.Content align="center" side="bottom" sideOffset={10}>
+        <Flex css={{ flexDirection: 'column', gap: 10 }} justify="center" align="center">
+          <Flex direction="row" justify="between" css={{ width: '100%' }}>
+            <Text as="div" variant="caption" css={{ color: '$textMedEmp' }}>
+              Dimensions
+            </Text>
+            <Box css={{ color: '$textMedEmp' }}>
+              <CrossIcon width="0.75rem" height="0.75rem" />
+            </Box>
+          </Flex>
+          <Fieldset css={{ justifyContent: 'between', width: '100%' }}>
+            <Label htmlFor="width" asChild>
+              <Text as="span" variant="sub2">
+                Width
+              </Text>
+            </Label>
+            <Input />
+          </Fieldset>
+          <Fieldset css={{ justifyContent: 'between', width: '100%' }}>
+            <Label htmlFor="maxWidth" asChild>
+              <Text as="span" variant="sub2">
+                Max. width
+              </Text>
+            </Label>
+            <Input />
+          </Fieldset>
+          <Fieldset css={{ justifyContent: 'between', width: '100%' }}>
+            <Label htmlFor="height" asChild>
+              <Text as="span" variant="sub2">
+                Height
+              </Text>
+            </Label>
+            <Input />
+          </Fieldset>
+          <Fieldset css={{ justifyContent: 'between', width: '100%' }}>
+            <Label htmlFor="maxHeight" asChild>
+              <Text as="span" variant="sub2">
+                Max. height
+              </Text>
+            </Label>
+            <Input />
+          </Fieldset>
+        </Flex>
+      </Popover.Content>
+    </Popover.Root>
+  </Flex>
+);
+export const Example = Template.bind({});
+Example.storyName = 'Popover';

package/src/Popover/index.tsx

@@ -0,0 +1,26 @@
+import { Arrow, Content, Popover as Root, Portal, Trigger } from '@radix-ui/react-popover';
+import { styled } from '../Theme';
+import { popoverAnimation } from '../utils/animations';
+
+const StyledContent = styled(Content, {
+  padding: '$6',
+  borderRadius: '$2',
+  backgroundColor: '$bgSecondary',
+  boxShadow: '$sm',
+  zIndex: 12,
+  ...popoverAnimation,
+});
+
+const StyledArrow = styled(Arrow, {
+  ...popoverAnimation,
+});
+
+const StyledTrigger = styled(Trigger, {});
+
+export const Popover = {
+  Root,
+  Content: StyledContent,
+  Trigger: StyledTrigger,
+  Portal: Portal,
+  Arrow: StyledArrow,
+};

package/src/Prebuilt/App.jsx

@@ -0,0 +1,273 @@
+import React, { Suspense, useEffect } from 'react';
+import { BrowserRouter, MemoryRouter, Navigate, Route, Routes, useParams } from 'react-router-dom';
+import { HMSRoomProvider, selectIsConnectedToRoom, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
+import { AppData } from './components/AppData/AppData';
+import { BeamSpeakerLabelsLogging } from './components/AudioLevel/BeamSpeakerLabelsLogging';
+import AuthToken from './components/AuthToken';
+import { ErrorBoundary } from './components/ErrorBoundary';
+import FullPageProgress from './components/FullPageProgress';
+import { Init } from './components/init/Init';
+import { KeyboardHandler } from './components/Input/KeyboardInputManager';
+import { Notifications } from './components/Notifications';
+import PostLeave from './components/PostLeave';
+import PreviewContainer from './components/Preview/PreviewContainer';
+import { ToastContainer } from './components/Toast/ToastContainer';
+import { Box } from '../Layout';
+import { globalStyles, HMSThemeProvider } from '../Theme';
+import { HMSPrebuiltContext, useHMSPrebuiltContext } from './AppContext';
+import { hmsActions, hmsNotifications, hmsStats, hmsStore } from './hms.js';
+import { Confetti } from './plugins/confetti';
+import { FlyingEmoji } from './plugins/FlyingEmoji';
+import { RemoteStopScreenshare } from './plugins/RemoteStopScreenshare';
+import { getRoutePrefix, shadeColor } from './common/utils';
+import { FeatureFlags } from './services/FeatureFlags';
+
+const Conference = React.lazy(() => import('./components/conference'));
+
+// TODO: remove now that there are options to change to portrait
+const getAspectRatio = ({ width, height }) => {
+  const host = process.env.REACT_APP_HOST_NAME;
+  const portraitDomains = (process.env.REACT_APP_PORTRAIT_MODE_DOMAINS || '').split(',');
+  if (portraitDomains.includes(host) && width > height) {
+    return { width: height, height: width };
+  }
+  return { width, height };
+};
+
+export const HMSPrebuilt = React.forwardRef(
+  (
+    {
+      roomCode = '',
+      logo: { url: logoUrl = '' } = {},
+      options: {
+        userName = '',
+        userId = '',
+        endPoints: { init: initEndpoint = '', tokenByRoomCode = '', tokenByRoomIdRole = '' } = {},
+      } = {},
+      onLeave,
+    },
+    ref,
+  ) => {
+    const aspectRatio = '1-1';
+    const color = '#2F80FF';
+    const theme = 'dark';
+    const metadata = '';
+    const recordingUrl = '';
+    const { 0: width, 1: height } = aspectRatio.split('-').map(el => parseInt(el));
+
+    const [hyderated, setHyderated] = React.useState(false);
+    useEffect(() => setHyderated(true), []);
+    useEffect(() => {
+      if (!ref) {
+        return;
+      }
+      ref.current = {
+        hmsActions,
+        hmsStats,
+        hmsStore,
+        hmsNotifications,
+      };
+    }, [ref]);
+
+    // leave room when component unmounts
+    useEffect(
+      () => () => {
+        return hmsActions.leave();
+      },
+      [],
+    );
+
+    const endPoints = {
+      tokenByRoomCode,
+      init: initEndpoint,
+      tokenByRoomIdRole,
+    };
+
+    if (!hyderated) {
+      return null;
+    }
+
+    globalStyles();
+
+    return (
+      <ErrorBoundary>
+        <HMSPrebuiltContext.Provider
+          value={{
+            roomId: '',
+            role: '',
+            roomCode,
+            showPreview: true,
+            showLeave: true,
+            onLeave,
+            userName,
+            userId,
+            endPoints,
+          }}
+        >
+          <HMSThemeProvider
+            themeType={theme}
+            aspectRatio={getAspectRatio({ width, height })}
+            theme={{
+              colors: {
+                brandDefault: color,
+                brandDark: shadeColor(color, -30),
+                brandLight: shadeColor(color, 30),
+                brandDisabled: shadeColor(color, 10),
+              },
+              fonts: {
+                sans: ['Roboto', 'Inter', 'sans-serif'],
+              },
+            }}
+          >
+            <HMSRoomProvider
+              isHMSStatsOn={FeatureFlags.enableStatsForNerds}
+              actions={hmsActions}
+              store={hmsStore}
+              notifications={hmsNotifications}
+              stats={hmsStats}
+            >
+              <AppData
+                appDetails={metadata}
+                recordingUrl={recordingUrl}
+                logo={logoUrl}
+                tokenEndpoint={endPoints.tokenByRoomIdRole}
+              />
+              <Init />
+              <Box
+                css={{
+                  bg: '$mainBg',
+                  size: '100%',
+                  lineHeight: '1.5',
+                  '-webkit-text-size-adjust': '100%',
+                }}
+              >
+                <AppRoutes authTokenByRoomCodeEndpoint={endPoints.tokenByRoomCode} />
+              </Box>
+            </HMSRoomProvider>
+          </HMSThemeProvider>
+        </HMSPrebuiltContext.Provider>
+      </ErrorBoundary>
+    );
+  },
+);
+
+HMSPrebuilt.displayName = 'HMSPrebuilt';
+
+const Redirector = ({ showPreview }) => {
+  const { roomId, role } = useParams();
+
+  if (!roomId && !role) {
+    return <Navigate to="/" />;
+  }
+  if (!roomId) {
+    return <Navigate to="/" />;
+  }
+  if (['streaming', 'preview', 'meeting', 'leave'].includes(roomId) && !role) {
+    return <Navigate to="/" />;
+  }
+
+  return <Navigate to={`${getRoutePrefix()}/${showPreview ? 'preview' : 'meeting'}/${roomId}/${role || ''}`} />;
+};
+
+const RouteList = () => {
+  const { showPreview, showLeave } = useHMSPrebuiltContext();
+
+  return (
+    <Routes>
+      {showPreview && (
+        <Route path="preview">
+          <Route
+            path=":roomId/:role"
+            element={
+              <Suspense fallback={<FullPageProgress />}>
+                <PreviewContainer />
+              </Suspense>
+            }
+          />
+          <Route
+            path=":roomId"
+            element={
+              <Suspense fallback={<FullPageProgress />}>
+                <PreviewContainer />
+              </Suspense>
+            }
+          />
+        </Route>
+      )}
+      <Route path="meeting">
+        <Route
+          path=":roomId/:role"
+          element={
+            <Suspense fallback={<FullPageProgress />}>
+              <Conference />
+            </Suspense>
+          }
+        />
+        <Route
+          path=":roomId"
+          element={
+            <Suspense fallback={<FullPageProgress />}>
+              <Conference />
+            </Suspense>
+          }
+        />
+      </Route>
+      {showLeave && (
+        <Route path="leave">
+          <Route path=":roomId/:role" element={<PostLeave />} />
+          <Route path=":roomId" element={<PostLeave />} />
+        </Route>
+      )}
+      <Route path="/:roomId/:role" element={<Redirector showPreview={showPreview} />} />
+      <Route path="/:roomId/" element={<Redirector showPreview={showPreview} />} />
+    </Routes>
+  );
+};
+
+const BackSwipe = () => {
+  const isConnectedToRoom = useHMSStore(selectIsConnectedToRoom);
+  const hmsActions = useHMSActions();
+  useEffect(() => {
+    const onRouteLeave = async () => {
+      if (isConnectedToRoom) {
+        await hmsActions.leave();
+      }
+    };
+    window.addEventListener('popstate', onRouteLeave);
+    return () => {
+      window.removeEventListener('popstate', onRouteLeave);
+    };
+  }, [hmsActions, isConnectedToRoom]);
+  return null;
+};
+
+const Router = ({ children }) => {
+  const { roomId, role, roomCode } = useHMSPrebuiltContext();
+  return [roomId, role, roomCode].every(value => !value) ? (
+    <BrowserRouter>{children}</BrowserRouter>
+  ) : (
+    <MemoryRouter initialEntries={[`/${roomCode ? roomCode : `${roomId}/${role || ''}`}`]} initialIndex={0}>
+      {children}
+    </MemoryRouter>
+  );
+};
+
+function AppRoutes({ authTokenByRoomCodeEndpoint }) {
+  return (
+    <Router>
+      <ToastContainer />
+      <Notifications />
+      <BackSwipe />
+      <Confetti />
+      <FlyingEmoji />
+      <RemoteStopScreenshare />
+      <KeyboardHandler />
+      <BeamSpeakerLabelsLogging />
+      <AuthToken authTokenByRoomCodeEndpoint={authTokenByRoomCodeEndpoint} />
+      <Routes>
+        <Route path="/*" element={<RouteList />} />
+        <Route path="/streaming/*" element={<RouteList />} />
+      </Routes>
+    </Router>
+  );
+}

package/src/Prebuilt/AppContext.jsx

@@ -0,0 +1,21 @@
+import React, { useContext } from 'react';
+
+export const HMSPrebuiltContext = React.createContext({
+  showPreview: true,
+  showLeave: true,
+  roomCode: '',
+  userName: '',
+  userId: '',
+  endPoints: {},
+  onLeave: undefined,
+});
+
+HMSPrebuiltContext.displayName = 'HMSPrebuiltContext';
+
+export const useHMSPrebuiltContext = () => {
+  const context = useContext(HMSPrebuiltContext);
+  if (!context) {
+    throw Error('Make sure HMSPrebuiltContext.Provider is present at the top level of your application');
+  }
+  return context;
+};

package/src/Prebuilt/IconButton.jsx

@@ -0,0 +1,19 @@
+import { IconButton as BaseIconButton } from '../IconButton';
+import { styled } from '../Theme';
+
+const IconButton = styled(BaseIconButton, {
+  width: '$14',
+  height: '$14',
+  border: '1px solid $borderLight',
+  r: '$1',
+  variants: {
+    active: {
+      false: {
+        border: '1px solid transparent',
+        color: '$white',
+      },
+    },
+  },
+});
+
+export default IconButton;

package/src/Prebuilt/Prebuilt.stories.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { HMSPrebuilt } from '.';
+
+export default {
+  title: 'UI Components/Prebuilt',
+  component: HMSPrebuilt,
+  argTypes: {
+    roomCode: { control: { type: 'text' }, defaultValue: 'tsj-obqh-lwx' },
+  },
+} as Meta<typeof HMSPrebuilt>;
+
+const PrebuiltRoomCodeStory: StoryFn<typeof HMSPrebuilt> = ({ roomCode = '', logo }) => {
+  return <HMSPrebuilt roomCode={roomCode} logo={logo} />;
+};
+
+export const Example = PrebuiltRoomCodeStory.bind({});
+Example.args = {
+  roomCode: 'tsj-obqh-lwx',
+};