@100mslive/roomkit-react 0.4.3-alpha.0 → 0.4.3-alpha.10

package/src/Diagnostics/Diagnostics.tsx

@@ -1,190 +0,0 @@
-import React, { useCallback, useRef, useState } from 'react';
-import { HMSRoomProvider, useHMSActions } from '@100mslive/react-sdk';
-import {
-  CheckCircleIcon,
-  ConnectivityIcon,
-  CrossCircleIcon,
-  GlobeIcon,
-  MicOnIcon,
-  VideoOnIcon,
-} from '@100mslive/react-icons';
-import { Box, Flex } from '../Layout';
-import { Text } from '../Text';
-import { HMSThemeProvider } from '../Theme';
-import { AudioTest } from './AudioTest';
-import { BrowserTest } from './BrowserTest';
-import { ConnectivityTest } from './ConnectivityTest';
-import {
-  DiagnosticsContext,
-  DiagnosticsStep,
-  DiagnosticsStepInfo,
-  initialSteps,
-  useDiagnostics,
-} from './DiagnosticsContext';
-import { VideoTest } from './VideoTest';
-
-const DiagnosticsStepIcon: Record<DiagnosticsStep, React.ReactNode> = {
-  [DiagnosticsStep.VIDEO]: <VideoOnIcon width="2rem" height="2rem" />,
-  [DiagnosticsStep.AUDIO]: <MicOnIcon width="2rem" height="2rem" />,
-  [DiagnosticsStep.BROWSER]: <GlobeIcon width="2rem" height="2rem" />,
-  [DiagnosticsStep.CONNECTIVITY]: <ConnectivityIcon width="2rem" height="2rem" />,
-};
-
-const Container = ({ children }: { children: React.ReactNode }) => (
-  <Box
-    css={{
-      px: '120px',
-      pt: '120px',
-      pb: '24px',
-      bg: '$background_dim',
-      lineHeight: '1.5',
-      '-webkit-text-size-adjust': '100%',
-      position: 'relative',
-      h: '100%',
-      '@lg': {
-        p: '$12',
-      },
-      overflowY: 'auto',
-      boxSizing: 'border-box',
-      '& *': {
-        boxSizing: 'border-box',
-      },
-      '::-webkit-scrollbar-track': {
-        WebkitBoxShadow: 'inset 0 0 6px rgba(0, 0, 0, 0.3)',
-        boxShadow: 'inset 0 0 6px rgba(0, 0, 0, 0.3)',
-        backgroundColor: 'transparent',
-      },
-      '::-webkit-scrollbar': {
-        width: '6px',
-        height: '6px',
-        backgroundColor: 'transparent',
-      },
-      '::-webkit-scrollbar-thumb': {
-        backgroundColor: '#657080',
-        borderRadius: '5px',
-      },
-    }}
-  >
-    {children}
-  </Box>
-);
-
-const DiagnosticsStepTest = () => {
-  const { activeStepIndex } = useDiagnostics();
-
-  let TestComponent = () => <></>;
-
-  if (activeStepIndex === DiagnosticsStep.AUDIO) {
-    TestComponent = AudioTest;
-  } else if (activeStepIndex === DiagnosticsStep.VIDEO) {
-    TestComponent = VideoTest;
-  } else if (activeStepIndex === DiagnosticsStep.BROWSER) {
-    TestComponent = BrowserTest;
-  } else if (activeStepIndex === DiagnosticsStep.CONNECTIVITY) {
-    TestComponent = ConnectivityTest;
-  }
-
-  return <TestComponent key={activeStepIndex} />;
-};
-
-const DiagnosticsStepHeader = () => {
-  const { activeStepIndex, activeStep } = useDiagnostics();
-  return (
-    <Flex css={{ py: '$8', px: '$10', alignItems: 'center', borderBottom: '1px solid $border_default' }}>
-      <Text css={{ c: '$primary_bright', mt: '$xs' }}>{DiagnosticsStepIcon[activeStepIndex]}</Text>
-      <Text css={{ fontSize: '$h6', ml: '$9' }}>{activeStep.name}</Text>
-    </Flex>
-  );
-};
-
-const DiagnosticsStepContainer = () => {
-  return (
-    <Box css={{ border: '1px solid $border_default', r: '$1', w: '75%', maxWidth: '65rem', '@lg': { w: '100%' } }}>
-      <DiagnosticsStepHeader />
-      <DiagnosticsStepTest />
-    </Box>
-  );
-};
-
-const DiagnosticsStepsList = () => {
-  const { activeStepIndex, activeStep, steps } = useDiagnostics();
-
-  return (
-    <Box css={{ w: '25%', '@lg': { display: 'none' } }}>
-      {Object.keys(DiagnosticsStep)
-        .filter(key => !isNaN(Number(key)))
-        .map(key => {
-          const keyIndex = Number(key);
-          const step = steps[keyIndex as DiagnosticsStep];
-          const isStepCompleted = activeStepIndex > keyIndex || activeStep.isCompleted;
-
-          let color = '$on_primary_low';
-          let icon = <Text css={{ c: color, fontSize: '1.75rem' }}>&bull;</Text>;
-
-          if (activeStepIndex === keyIndex) {
-            color = '$on_primary_high';
-            icon = <Text css={{ c: color, fontSize: '1.75rem' }}>&bull;</Text>;
-          }
-          if (isStepCompleted) {
-            color = '$primary_bright';
-            icon = <CheckCircleIcon width="1rem" height="1rem" />;
-          }
-          if (step.hasFailed) {
-            color = '$alert_error_default';
-            icon = <CrossCircleIcon width="1rem" height="1rem" />;
-          }
-
-          return (
-            <Flex key={key} css={{ mb: '$10', c: color, gap: '$4', alignItems: 'center' }}>
-              {icon}
-              <Text css={{ c: color }}>{step.name}</Text>
-            </Flex>
-          );
-        })}
-    </Box>
-  );
-};
-
-const DiagnosticsProvider = () => {
-  const actions = useHMSActions();
-  const [activeStep, setActiveStep] = useState(0);
-  const [steps, setSteps] = useState(initialSteps);
-  const diagnosticsRef = useRef(actions.initDiagnostics());
-
-  const updateStep = useCallback((step: DiagnosticsStep, value: Omit<DiagnosticsStepInfo, 'name'>) => {
-    setSteps(prevSteps => ({ ...prevSteps, [step]: { ...prevSteps[step], ...value } }));
-  }, []);
-
-  return (
-    <DiagnosticsContext.Provider
-      value={{
-        hmsDiagnostics: diagnosticsRef.current,
-        activeStepIndex: activeStep,
-        setActiveStep,
-        steps,
-        updateStep,
-      }}
-    >
-      <Container>
-        <Text variant="h4">Pre-call Test</Text>
-        <Text variant="md" css={{ c: '$on_primary_medium' }}>
-          Make sure your devices and network are good to go, let's get started.
-        </Text>
-        <Flex css={{ direction: 'column', mt: '$12', justifyItems: 'center' }}>
-          <DiagnosticsStepsList />
-          <DiagnosticsStepContainer />
-        </Flex>
-      </Container>
-    </DiagnosticsContext.Provider>
-  );
-};
-
-export const Diagnostics = () => {
-  return (
-    <HMSRoomProvider>
-      <HMSThemeProvider themeType="default">
-        <DiagnosticsProvider />
-      </HMSThemeProvider>
-    </HMSRoomProvider>
-  );
-};

package/src/Diagnostics/DiagnosticsContext.ts

@@ -1,46 +0,0 @@
-import React, { useContext } from 'react';
-import { HMSDiagnosticsInterface } from '@100mslive/react-sdk';
-
-export enum DiagnosticsStep {
-  BROWSER,
-  VIDEO,
-  AUDIO,
-  CONNECTIVITY,
-}
-
-export const initialSteps = {
-  [DiagnosticsStep.BROWSER]: { name: 'Browser Support' },
-  [DiagnosticsStep.VIDEO]: { name: 'Test Video' },
-  [DiagnosticsStep.AUDIO]: { name: 'Test Audio' },
-  [DiagnosticsStep.CONNECTIVITY]: { name: 'Connection Quality' },
-};
-
-export interface DiagnosticsStepInfo {
-  name: string;
-  hasFailed?: boolean;
-  isCompleted?: boolean;
-}
-
-export const DiagnosticsContext = React.createContext<{
-  hmsDiagnostics?: HMSDiagnosticsInterface;
-  activeStepIndex: DiagnosticsStep;
-  setActiveStep: React.Dispatch<React.SetStateAction<DiagnosticsStep>>;
-  steps: Record<DiagnosticsStep, DiagnosticsStepInfo>;
-  updateStep: (step: DiagnosticsStep, value: Omit<DiagnosticsStepInfo, 'name'>) => void;
-}>({
-  activeStepIndex: 0,
-  setActiveStep: () => {
-    return;
-  },
-  steps: initialSteps,
-  updateStep: () => {
-    return;
-  },
-});
-
-export const useDiagnostics = () => {
-  const context = useContext(DiagnosticsContext);
-  const activeStep = context.steps[context.activeStepIndex];
-
-  return { ...context, activeStep };
-};

package/src/Diagnostics/VideoTest.tsx

@@ -1,72 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import {
-  HMSException,
-  selectDevices,
-  selectLocalMediaSettings,
-  selectLocalVideoTrackID,
-  useHMSStore,
-} from '@100mslive/react-sdk';
-import { VideoOnIcon } from '@100mslive/react-icons';
-import { PermissionErrorModal } from '../Prebuilt/components/Notifications/PermissionErrorModal';
-import { TestContainer, TestFooter } from './components';
-import { Flex } from '../Layout';
-import { Text } from '../Text';
-import { Video } from '../Video';
-import { StyledVideoTile } from '../VideoTile';
-// @ts-ignore: No implicit any
-import { DeviceSelector } from './DeviceSelector';
-import { DiagnosticsStep, useDiagnostics } from './DiagnosticsContext';
-
-export const VideoTest = () => {
-  const { hmsDiagnostics, updateStep } = useDiagnostics();
-  const allDevices = useHMSStore(selectDevices);
-  const { videoInput } = allDevices;
-  const trackID = useHMSStore(selectLocalVideoTrackID);
-  const sdkSelectedDevices = useHMSStore(selectLocalMediaSettings);
-  const [error, setError] = useState<HMSException | undefined>();
-
-  useEffect(() => {
-    hmsDiagnostics?.startCameraCheck().catch(err => {
-      updateStep(DiagnosticsStep.VIDEO, { hasFailed: true });
-      setError(err);
-    });
-  }, [hmsDiagnostics, updateStep]);
-
-  return (
-    <>
-      <TestContainer css={{ display: 'flex', '@lg': { flexDirection: 'column', alignItems: 'center' } }}>
-        {trackID && (
-          <StyledVideoTile.Container
-            css={{
-              width: '90%',
-              aspectRatio: '16/9',
-              mr: '$10',
-              '@lg': { mr: 0, mb: '$10', aspectRatio: '1/1' },
-            }}
-          >
-            <Video mirror={true} trackId={trackID} />
-          </StyledVideoTile.Container>
-        )}
-        <Flex direction="column" css={{ w: '100%' }}>
-          <Text variant="body2" css={{ c: '$on_primary_medium', mb: '$10' }}>
-            Move in front of your camera to make sure it's working. If you don't see your video, try changing the
-            selected camera. If the camera isn't part of your computer, check your settings to make sure your system
-            recognizes it.
-          </Text>
-          <DeviceSelector
-            title="Video"
-            devices={videoInput || []}
-            icon={<VideoOnIcon />}
-            selection={sdkSelectedDevices.videoInputDeviceId}
-            onChange={async (deviceId: string) => {
-              hmsDiagnostics?.stopCameraCheck();
-              hmsDiagnostics?.startCameraCheck(deviceId);
-            }}
-          />
-        </Flex>
-      </TestContainer>
-      <TestFooter error={error} ctaText="Does your video look good?" />
-      <PermissionErrorModal error={error} />
-    </>
-  );
-};

package/src/Diagnostics/components.tsx

@@ -1,70 +0,0 @@
-import React from 'react';
-import { Button } from '../Button';
-import { Box, Flex } from '../Layout';
-import { Text } from '../Text';
-import { CSS } from '../Theme';
-import { DiagnosticsStep, useDiagnostics } from './DiagnosticsContext';
-
-export const TestContainer = ({ css, children }: { css?: CSS; children: React.ReactNode }) => {
-  return <Box css={{ p: '$10', ...css }}>{children}</Box>;
-};
-
-export const TestFooter = ({
-  error,
-  ctaText,
-  children,
-}: {
-  ctaText?: string;
-  error?: Error;
-  children?: React.ReactNode;
-}) => {
-  const { hmsDiagnostics, activeStepIndex: activeStep, setActiveStep } = useDiagnostics();
-
-  const onNextStep = () => {
-    if (activeStep === DiagnosticsStep.AUDIO) {
-      hmsDiagnostics?.stopMicCheck();
-    } else if (activeStep === DiagnosticsStep.VIDEO) {
-      hmsDiagnostics?.stopCameraCheck();
-    } else if (activeStep === DiagnosticsStep.CONNECTIVITY) {
-      hmsDiagnostics?.stopConnectivityCheck();
-    }
-
-    setActiveStep(step => step + 1);
-  };
-
-  return (
-    <Flex
-      css={{
-        py: '$8',
-        px: '$10',
-        background: '$background_dim',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        borderTop: '1px solid $border_default',
-        fontSize: '$sm',
-        borderBottomLeftRadius: '$1',
-        borderBottomRightRadius: '$1',
-        lineHeight: '$sm',
-        zIndex: 1001,
-        '@lg': { flexDirection: 'column', gap: '$8' },
-      }}
-    >
-      <Box>{error && <Text css={{ c: '$alert_error_default' }}>Error: {error.message}</Text>}</Box>
-      {children ? (
-        children
-      ) : (
-        <Flex align="center" css={{ gap: '$8', '@lg': { flexDirection: 'column' } }}>
-          <Text css={{ c: '$on_primary_medium' }}>{ctaText}</Text>
-          <Flex align="center" gap="4">
-            <Button onClick={onNextStep} variant="standard" outlined={true}>
-              Skip
-            </Button>
-            <Button disabled={!!error} onClick={onNextStep}>
-              Yes
-            </Button>
-          </Flex>
-        </Flex>
-      )}
-    </Flex>
-  );
-};

package/src/Diagnostics/index.ts

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

package/src/Divider/Divider.tsx

@@ -1,45 +0,0 @@
-import { styled } from '../Theme';
-
-const getVerticalSpace = (space: string) => ({
-  marginLeft: space,
-  marginRight: space,
-});
-const getHorizontalSpace = (space: string) => ({
-  marginTop: space,
-  marginBottom: space,
-});
-
-export const VerticalDivider = styled('span', {
-  height: '25px',
-  width: '1px',
-  backgroundColor: '$border_bright',
-  variants: {
-    space: {
-      1: getVerticalSpace('$1'),
-      2: getVerticalSpace('$2'),
-      3: getVerticalSpace('$3'),
-      4: getVerticalSpace('$4'),
-    },
-  },
-  defaultVariants: {
-    space: 1,
-  },
-});
-
-export const HorizontalDivider = styled('span', {
-  height: '1px',
-  width: '100%',
-  display: 'block',
-  backgroundColor: '$border_bright',
-  variants: {
-    space: {
-      1: getHorizontalSpace('$1'),
-      2: getHorizontalSpace('$2'),
-      3: getHorizontalSpace('$3'),
-      4: getHorizontalSpace('$4'),
-    },
-  },
-  defaultVariants: {
-    space: 1,
-  },
-});

package/src/Divider/HorizontalDivider.stories.tsx

@@ -1,34 +0,0 @@
-import React from 'react';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Flex } from '../Layout';
-import { Text } from '../Text';
-import { HorizontalDivider } from '.';
-
-export default {
-  title: 'UI Components/Divider',
-  component: HorizontalDivider,
-  argTypes: {
-    ref: { table: { disable: true } },
-    as: { table: { disable: true } },
-    css: { control: { type: 'object' } },
-    space: { defaultValue: 1, control: { type: 'number', min: 1, max: 4 } },
-  },
-} as ComponentMeta<typeof HorizontalDivider>;
-
-const HorizontalDividerComponent: ComponentStory<typeof HorizontalDivider> = ({ space, css }) => {
-  return (
-    <Flex align="center" direction="column" css={{ width: 'max-content', bg: '$surface_bright', p: '$8', r: '$4' }}>
-      <ul style={{ listStyle: 'none', padding: '0px', margin: '0px', textAlign: 'center' }}>
-        <Text as="li">Item 1</Text>
-        <Text as="li">Item 2</Text>
-        <Text as="li">Item 3</Text>
-        <HorizontalDivider space={space} css={{ bg: '$on_primary_medium', width: '80px', ...css }} />
-        <Text as="li">Item 4</Text>
-        <Text as="li">Item 5</Text>
-        <Text as="li">Item 6</Text>
-      </ul>
-    </Flex>
-  );
-};
-
-export const Horizontal = HorizontalDividerComponent.bind({});

package/src/Divider/VerticalDivider.stories.tsx

@@ -1,40 +0,0 @@
-import React from 'react';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { AddIcon } from '@100mslive/react-icons';
-import { Button } from '../Button';
-import { Flex } from '../Layout';
-import { Text } from '../Text';
-import { VerticalDivider } from '.';
-
-export default {
-  title: 'UI Components/Divider',
-  component: VerticalDivider,
-  argTypes: {
-    ref: { table: { disable: true }, control: { type: null } },
-    as: { table: { disable: true }, control: { type: null } },
-    css: { control: { type: 'object' } },
-    space: { defaultValue: 1, control: { type: 'number', min: 1, max: 4 } },
-  },
-} as ComponentMeta<typeof VerticalDivider>;
-
-const VerticalDividerComponent: ComponentStory<typeof VerticalDivider> = ({ space, css }) => {
-  return (
-    <Flex align="center" css={{ position: 'absolute', left: '$10' }}>
-      <Button icon variant="primary">
-        <AddIcon />
-        <Text as="span" variant="button" css={{ c: 'white' }}>
-          Add Stuff
-        </Text>
-      </Button>
-      <VerticalDivider space={space} css={{ bg: '$on_primary_high', ...css }} />
-      <Button icon variant="danger">
-        <AddIcon />
-        <Text as="span" variant="button" css={{ c: 'white' }}>
-          Add Another Stuff
-        </Text>
-      </Button>
-    </Flex>
-  );
-};
-
-export const Vertical = VerticalDividerComponent.bind({});

package/src/Divider/index.ts

@@ -1 +0,0 @@
-export { HorizontalDivider, VerticalDivider } from './Divider';

package/src/Dropdown/Dropdown.stories.tsx

@@ -1,94 +0,0 @@
-import React from 'react';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { ChevronDownIcon, ChevronUpIcon, PeopleIcon } from '@100mslive/react-icons';
-import { Avatar, Box, Flex, Text, textEllipsis } from '..';
-import { Dropdown } from './Dropdown';
-
-export default {
-  title: 'UI Components/Dropdown',
-  component: Dropdown.Content,
-} as ComponentMeta<typeof Dropdown.Content>;
-
-const participants = [
-  { id: '231313', name: 'Simbrella', roleName: 'Student' },
-  { id: '768456', name: 'Jonty', roleName: 'Student' },
-];
-
-const Template: ComponentStory<typeof Dropdown.Content> = () => {
-  const [open, setOpen] = React.useState(true);
-
-  return (
-    <Dropdown.Root
-      open
-      onOpenChange={() => {
-        setOpen(!open);
-      }}
-    >
-      <Dropdown.Trigger asChild>
-        <Box
-          css={{
-            color: '$on_surface_high',
-            borderRadius: '$1',
-            border: '1px solid $border_default',
-            padding: '$4 $4',
-            width: '$80',
-          }}
-        >
-          <Box css={{ display: 'flex', justifyContent: 'space-between' }}>
-            <Box css={{ display: 'flex', gap: '$4', mr: '$4' }}>
-              <PeopleIcon />
-              <Text variant="md">2</Text>
-            </Box>
-            <Flex>{open ? <ChevronUpIcon /> : <ChevronDownIcon />}</Flex>
-          </Box>
-        </Box>
-      </Dropdown.Trigger>
-      {open && (
-        <Dropdown.Content sideOffset={5} align="start" css={{ height: 'auto', maxHeight: '$96' }}>
-          <Dropdown.Group
-            css={{
-              h: 'auto',
-              flexDirection: 'column',
-              flexWrap: 'wrap',
-              alignItems: 'flex-start',
-            }}
-          >
-            <Dropdown.Label css={{ w: 'initial ' }}>
-              <Text variant="md" data-testid="role_student">
-                {'Students '}({participants.length})
-              </Text>
-            </Dropdown.Label>
-            {participants.map((peer, i) => (
-              <Dropdown.Item css={{ justifyContent: 'space-between' }} data-testid={`participant_${i}`}>
-                <Flex>
-                  <Box css={{ width: '$16' }}>
-                    <Avatar
-                      name={peer.name}
-                      css={{
-                        position: 'unset',
-                        transform: 'unset',
-                        mr: '$4',
-                        fontSize: '$sm',
-                      }}
-                    />
-                  </Box>
-                  <Flex direction="column">
-                    <Text variant="md" css={{ ...textEllipsis(150), fontWeight: '$semiBold' }}>
-                      {peer.name}
-                    </Text>
-                    <Text variant="sub2" css={{ color: '$on_surface_medium' }}>
-                      {peer.roleName}
-                    </Text>
-                  </Flex>
-                </Flex>
-              </Dropdown.Item>
-            ))}
-          </Dropdown.Group>
-        </Dropdown.Content>
-      )}
-    </Dropdown.Root>
-  );
-};
-
-export const DropdownContent = Template.bind({});
-DropdownContent.storyName = 'Dropdown';