@100mslive/roomkit-react 0.4.3-alpha.2 → 0.4.3-alpha.4

package/src/Avatar/Avatar.tsx

@@ -1,60 +0,0 @@
-import React from 'react';
-import { VariantProps } from '@stitches/react';
-import { PersonIcon } from '@100mslive/react-icons';
-import { styled } from '../Theme';
-import { getAvatarBg } from './getAvatarBg';
-import { flexCenter } from '../utils/styles';
-
-const getAvatarShape = (radii: string) => ({
-  borderRadius: radii,
-});
-
-export const StyledAvatar = styled('div', {
-  ...flexCenter,
-  color: '$colors$on_primary_high',
-  fontFamily: '$sans',
-  aspectRatio: '1',
-  fontWeight: 600,
-  fontSize: '$space$9',
-  variants: {
-    shape: {
-      circle: getAvatarShape('$round'),
-      square: getAvatarShape('$1'),
-    },
-    size: {
-      small: {
-        height: '$16 !important',
-        fontSize: '$space$6',
-      },
-      medium: {
-        height: '$18 !important',
-        fontSize: '$space$10',
-      },
-      large: {
-        height: '$20 !important',
-        fontSize: '$space$12',
-      },
-    },
-  },
-  defaultVariants: {
-    shape: 'circle',
-  },
-});
-
-type Props = VariantProps<typeof StyledAvatar> &
-  React.ComponentProps<typeof StyledAvatar> & {
-    name: string;
-  };
-
-export const Avatar: React.FC<Props> = ({ name, css, ...props }) => {
-  const info = getAvatarBg(name);
-  let { color } = info;
-  if (!name) {
-    color = '#7E47EB';
-  }
-  return (
-    <StyledAvatar css={{ bg: color, ...css }} {...props}>
-      {info.initials || <PersonIcon height={40} width={40} />}
-    </StyledAvatar>
-  );
-};

package/src/Avatar/getAvatarBg.ts

@@ -1,50 +0,0 @@
-const getInitials = (name: string | undefined) => {
-  if (!name) {
-    return undefined;
-  } else {
-    return (
-      name
-        .trim()
-        // remove non chars/digits
-        .replace(/[^a-zA-Z0-9]/g, '')
-        .match(/(^\S\S?|\b\S)?/g)
-        ?.join('')
-        ?.match(/(^\S|\S$)?/g)
-        ?.join('')
-        .toUpperCase()
-    );
-  }
-};
-
-/**
-  calculates the initials of the name and choose a background color based on the first later of the initials
- */
-export const getAvatarBg = (name: string): { initials: string; color: string } => {
-  const initials = getInitials(name);
-  const indexFactor = 20;
-  const colorIndex = ((initials?.codePointAt(0) || 0) % indexFactor) + 1;
-  return { initials: initials || '', color: colorsList[colorIndex - 1] };
-};
-
-const colorsList = [
-  '#616161',
-  '#F44336',
-  '#3F51B5',
-  '#4CAF50',
-  '#FFA000',
-  '#795548',
-  '#E91E63',
-  '#2F80FF',
-  '#8BC34A',
-  '#F57C00',
-  '#4E342E',
-  '#9C27B0',
-  '#00BCD4',
-  '#C0CA33',
-  '#F4511E',
-  '#673AB7',
-  '#009688',
-  '#FBC02D',
-  '#BF360C',
-  '#455A64',
-];

package/src/Avatar/index.ts

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

package/src/Button/Button.tsx

@@ -1,210 +0,0 @@
-import React, { ComponentPropsWithRef, PropsWithChildren } from 'react';
-import { Flex } from '../Layout';
-import { Loading } from '../Loading';
-import { styled } from '../Theme';
-import { flexCenter } from '../utils/styles';
-
-/**
- * @param base bg color
- * @param hover hover state bg color
- * @param active active state bg color
- * @returns CSS object based on the state
- */
-
-const getOutlinedVariants = (
-  base: string,
-  hover: string,
-  active: string,
-  disabled: string,
-  text: string,
-  textDisabled: string,
-  textHover?: string,
-) => {
-  return {
-    bg: 'transparent',
-    border: `solid $space$px $colors${base}`,
-    c: text,
-    '&[disabled]': {
-      c: textDisabled,
-      bg: 'transparent',
-      border: `solid $space$px $colors${disabled}`,
-      cursor: 'not-allowed',
-    },
-    '&:not([disabled]):hover': {
-      c: textHover,
-      border: `solid $space$px $colors${hover}`,
-      bg: 'transparent',
-    },
-    '&:not([disabled]):active': {
-      border: `solid $space$px $colors${active}`,
-      bg: 'transparent',
-    },
-    '&:not([disabled]):focus-visible': {
-      boxShadow: `0 0 0 3px $colors${base}`,
-    },
-  };
-};
-
-const getButtonVariants = (
-  base: string,
-  hover: string,
-  active: string,
-  disabled: string,
-  text: string,
-  textDisabled: string,
-  textHover?: string,
-) => {
-  return {
-    bg: base,
-    border: `1px solid ${base}`,
-    c: text,
-    '&[disabled]': {
-      c: textDisabled,
-      cursor: 'not-allowed',
-      bg: disabled,
-      border: `1px solid ${disabled}`,
-    },
-    '&:not([disabled]):hover': {
-      c: textHover,
-      bg: hover,
-      border: `1px solid ${hover}`,
-    },
-    '&:not([disabled]):active': {
-      bg: active,
-      border: `1px solid ${active}`,
-    },
-    '&:not([disabled]):focus-visible': {
-      boxShadow: `0 0 0 3px $colors${hover}`,
-    },
-  };
-};
-
-const StyledButton = styled('button', {
-  ...flexCenter,
-  cursor: 'pointer',
-  fontFamily: '$sans',
-  lineHeight: 'inherit',
-  textTransform: 'none',
-  position: 'relative',
-  outline: 'none',
-  border: 'none',
-  fs: '$md',
-  r: '$1',
-  backgroundColor: '$primary_default',
-  fontWeight: '500',
-  whiteSpace: 'nowrap',
-  p: '$4 $8',
-  '-webkit-appearance': 'button',
-  '&:focus': {
-    outline: 'none',
-  },
-  '&:not([disabled]):focus-visible': {
-    boxShadow: '0 0 0 3px $colors$primary_default',
-  },
-  transition: 'all 0.2s  ease',
-  compoundVariants: [
-    {
-      variant: 'standard',
-      outlined: true,
-      css: getOutlinedVariants(
-        '$secondary_default',
-        '$secondary_bright',
-        '$secondary_dim',
-        '$secondary_disabled',
-        '$on_surface_high',
-        '$on_surface_low',
-      ),
-    },
-    {
-      variant: 'danger',
-      outlined: true,
-      css: getOutlinedVariants(
-        '$alert_error_default',
-        '$alert_error_bright',
-        '$alert_error_dim',
-        '$alert_error_brighter',
-        '$on_surface_high',
-        '$on_surface_low',
-        '$on_surface_high',
-      ),
-    },
-    {
-      variant: 'primary',
-      outlined: true,
-      css: getOutlinedVariants(
-        '$primary_default',
-        '$primary_bright',
-        '$primary_dim',
-        '$primary_disabled',
-        '$on_surface_high',
-        '$on_surface_low',
-      ),
-    },
-  ],
-  variants: {
-    variant: {
-      standard: getButtonVariants(
-        '$secondary_default',
-        '$secondary_bright',
-        '$secondary_dim',
-        '$secondary_disabled',
-        '$on_secondary_high',
-        '$on_secondary_low',
-      ),
-      danger: getButtonVariants(
-        '$alert_error_default',
-        '$alert_error_bright',
-        '$alert_error_dim',
-        '$alert_error_dim',
-        '$alert_error_brighter',
-        '$on_primary_low',
-        '$on_primary_high',
-      ),
-      primary: getButtonVariants(
-        '$primary_default',
-        '$primary_bright',
-        '$primary_dim',
-        '$primary_disabled',
-        '$on_primary_high',
-        '$on_primary_low',
-      ),
-    },
-    outlined: {
-      true: {},
-    },
-    icon: {
-      true: {},
-    },
-  },
-  defaultVariants: {
-    variant: 'primary',
-  },
-});
-
-export const Button = React.forwardRef<
-  HTMLButtonElement,
-  PropsWithChildren<{ loading?: boolean } & ComponentPropsWithRef<typeof StyledButton>>
->(({ children, loading = false, icon, ...buttonProps }, ref) => {
-  return (
-    <StyledButton {...buttonProps} ref={ref}>
-      <>
-        {loading && (
-          <Flex
-            align="center"
-            justify="center"
-            css={{ w: '100%', position: 'absolute', left: '0', color: '$on_primary_low' }}
-          >
-            <Loading color="currentColor" />
-          </Flex>
-        )}
-        <Flex
-          align="center"
-          justify="center"
-          css={{ visibility: loading ? 'hidden' : 'visible', gap: icon ? '$4' : '0' }}
-        >
-          {children}
-        </Flex>
-      </>
-    </StyledButton>
-  );
-});

package/src/Button/index.tsx

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

package/src/Checkbox/Checkbox.tsx

@@ -1,35 +0,0 @@
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { styled } from '../Theme';
-
-const CheckboxRoot = styled(CheckboxPrimitive.Root, {
-  all: 'unset',
-  border: '1px solid $primary_default',
-  backgroundColor: '$on_primary_high',
-  width: '$8',
-  height: '$8',
-  borderRadius: '$0',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  boxShadow: 'none',
-  outline: 'none',
-  cursor: 'pointer',
-  '&:focus': {
-    boxShadow: 'none',
-    outline: 'none',
-  },
-  '&[data-state="checked"]': {
-    backgroundColor: '$primary_default',
-  },
-});
-
-const CheckboxIndicator = styled(CheckboxPrimitive.Indicator, {
-  color: '$on_primary_high',
-  // center check svg within button box
-  lineHeight: 0,
-});
-
-export const Checkbox = {
-  Root: CheckboxRoot,
-  Indicator: CheckboxIndicator,
-};

package/src/Checkbox/index.tsx

@@ -1 +0,0 @@
-export * from './Checkbox';

package/src/Collapsible/Collapsible.tsx

@@ -1,34 +0,0 @@
-import { Content, Root, Trigger } from '@radix-ui/react-collapsible';
-import { styled } from '../Theme';
-import { slideDown, slideUp } from '../utils';
-
-const CollapsibleRoot = styled(Root, {});
-
-const CollapsibleTrigger = styled(Trigger, {
-  cursor: 'pointer',
-  appearance: 'none !important',
-  '&:focus': {
-    outline: 'none',
-  },
-  '&:focus-visible': {
-    boxShadow: '0 0 0 3px $colors$primary_default',
-  },
-});
-
-const CollapsibleContent = styled(Content, {
-  w: '$80',
-  r: '$1',
-  overflowY: 'auto',
-  '&[data-state="open"]': {
-    animation: `${slideDown('--radix-collapsible-content-height')} 300ms cubic-bezier(0.87, 0, 0.13, 1) forwards`,
-  },
-  '&[data-state="closed"]': {
-    animation: `${slideUp('--radix-collapsible-content-height')} 300ms cubic-bezier(0.87, 0, 0.13, 1) forwards`,
-  },
-});
-
-export const Collapsible = {
-  Root: CollapsibleRoot,
-  Trigger: CollapsibleTrigger,
-  Content: CollapsibleContent,
-};

package/src/Collapsible/index.tsx

@@ -1 +0,0 @@
-export * from './Collapsible';

package/src/Diagnostics/AudioTest.tsx

@@ -1,188 +0,0 @@
-/* eslint-disable react/prop-types */
-import React, { useCallback, useEffect, useState } from 'react';
-import {
-  HMSException,
-  selectDevices,
-  selectLocalAudioTrackID,
-  selectLocalMediaSettings,
-  selectTrackAudioByID,
-  useHMSActions,
-  useHMSStore,
-} from '@100mslive/react-sdk';
-import { MicOnIcon, SpeakerIcon, StopIcon } from '@100mslive/react-icons';
-import { PermissionErrorModal } from '../Prebuilt/components/Notifications/PermissionErrorModal';
-import { TestContainer, TestFooter } from './components';
-import { Button } from '../Button';
-import { Box, Flex } from '../Layout';
-import { Progress } from '../Progress';
-import { Text } from '../Text';
-// @ts-ignore: No implicit any
-import { DeviceSelector } from './DeviceSelector';
-import { DiagnosticsStep, useDiagnostics } from './DiagnosticsContext';
-import { useAudioOutputTest } from '../Prebuilt/components/hooks/useAudioOutputTest';
-import { TEST_AUDIO_URL } from '../Prebuilt/common/constants';
-
-const SelectContainer = ({ children }: { children: React.ReactNode }) => (
-  <Box css={{ w: 'calc(50% - 0.75rem)', '@lg': { w: '100%' } }}>{children}</Box>
-);
-
-const MicTest = ({ setError }: { setError: (err?: Error) => void }) => {
-  const { hmsDiagnostics } = useDiagnostics();
-  const devices = useHMSStore(selectDevices);
-  const [isRecording, setIsRecording] = useState(false);
-  const [selectedMic, setSelectedMic] = useState(devices.audioInput[0]?.deviceId || 'default');
-  const trackID = useHMSStore(selectLocalAudioTrackID);
-  const audioLevel = useHMSStore(selectTrackAudioByID(trackID));
-  const { audioOutputDeviceId } = useHMSStore(selectLocalMediaSettings);
-  const { playing, setPlaying, audioRef } = useAudioOutputTest({
-    deviceId: audioOutputDeviceId || devices.audioOutput[0]?.deviceId,
-  });
-
-  return (
-    <SelectContainer>
-      <DeviceSelector
-        title="Microphone (Input)"
-        devices={devices.audioInput}
-        selection={selectedMic}
-        icon={<MicOnIcon />}
-        onChange={(deviceId: string) => {
-          setError(undefined);
-          setSelectedMic(deviceId);
-          hmsDiagnostics?.stopMicCheck();
-        }}
-      />
-      <Flex css={{ gap: '$6', alignItems: 'center' }}>
-        <Button
-          variant="standard"
-          icon
-          onClick={() => {
-            isRecording
-              ? hmsDiagnostics?.stopMicCheck()
-              : hmsDiagnostics
-                  ?.startMicCheck({
-                    inputDevice: selectedMic,
-                    onError: (err: Error) => {
-                      setError(err);
-                    },
-                    onStop: () => {
-                      setIsRecording(false);
-                    },
-                  })
-                  .then(() => {
-                    setIsRecording(true);
-                  });
-          }}
-          disabled={devices.audioInput.length === 0 || playing}
-        >
-          {isRecording ? <StopIcon /> : <MicOnIcon />}
-          {isRecording ? 'Stop Recording' : 'Record'}
-        </Button>
-
-        <Button
-          icon
-          variant="standard"
-          outlined={hmsDiagnostics?.getRecordedAudio() === TEST_AUDIO_URL}
-          onClick={() => {
-            if (audioRef.current) {
-              audioRef.current.src = hmsDiagnostics?.getRecordedAudio() || '';
-              audioRef.current.play();
-            }
-          }}
-          disabled={playing || hmsDiagnostics?.getRecordedAudio() === TEST_AUDIO_URL}
-        >
-          <SpeakerIcon />
-          {playing ? 'Playing...' : 'Playback'}
-        </Button>
-        <audio
-          ref={audioRef}
-          onEnded={() => setPlaying(false)}
-          onPlay={() => setPlaying(true)}
-          style={{ display: 'none' }}
-        />
-      </Flex>
-
-      <Flex align="center" css={{ mt: '$4', maxWidth: '10rem', opacity: isRecording ? '1' : '0', gap: '$4' }}>
-        <Text>
-          <MicOnIcon />
-        </Text>
-        <Progress.Root value={audioLevel} css={{ h: '$2' }}>
-          <Progress.Content
-            style={{
-              transform: `translateX(-${100 - audioLevel}%)`,
-              transition: 'transform 0.3s',
-            }}
-          />
-        </Progress.Root>
-      </Flex>
-    </SelectContainer>
-  );
-};
-
-const SpeakerTest = () => {
-  const actions = useHMSActions();
-  const devices = useHMSStore(selectDevices);
-  const { audioOutputDeviceId } = useHMSStore(selectLocalMediaSettings);
-
-  if (devices.audioOutput.length === 0) {
-    return <></>;
-  }
-
-  return (
-    <SelectContainer>
-      <DeviceSelector
-        title="Speaker (Output)"
-        devices={devices.audioOutput}
-        selection={audioOutputDeviceId || devices.audioOutput[0]?.deviceId}
-        icon={<SpeakerIcon />}
-        onChange={(deviceId: string) => {
-          actions.setAudioOutputDevice(deviceId);
-        }}
-      />
-    </SelectContainer>
-  );
-};
-
-export const AudioTest = () => {
-  const { hmsDiagnostics, updateStep } = useDiagnostics();
-  const [error, setErrorAlone] = useState<Error | undefined>();
-
-  const setError = useCallback(
-    (err?: Error) => {
-      updateStep(DiagnosticsStep.AUDIO, { hasFailed: !!err });
-      setErrorAlone(err);
-    },
-    [updateStep, setErrorAlone],
-  );
-
-  useEffect(() => {
-    hmsDiagnostics?.requestPermission({ audio: true }).catch(error => setError(error));
-  }, [hmsDiagnostics, setError]);
-
-  return (
-    <>
-      <TestContainer>
-        <Text variant="body2" css={{ c: '$on_primary_medium' }}>
-          Record a 10 second audio clip and play it back to check that your microphone and speaker are working. If they
-          aren't, make sure your volume is turned up, try a different speaker or microphone, or check your bluetooth
-          settings.
-        </Text>
-
-        <Flex
-          css={{
-            mt: '$10',
-            gap: '$10',
-            '@lg': {
-              flexDirection: 'column',
-              gap: '$8',
-            },
-          }}
-        >
-          <MicTest setError={setError} />
-          <SpeakerTest />
-        </Flex>
-      </TestContainer>
-      <TestFooter error={error} ctaText="Does your audio sound good?" />
-      <PermissionErrorModal error={error as HMSException} />
-    </>
-  );
-};