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

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/index.ts

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

package/src/Dropdown/Dropdown.tsx

@@ -1,145 +0,0 @@
-import {
-  CheckboxItem,
-  Content,
-  Group,
-  Item,
-  ItemIndicator,
-  Label,
-  Portal,
-  Root,
-  Separator,
-  Sub,
-  SubContent,
-  SubTrigger,
-  Trigger,
-} from '@radix-ui/react-dropdown-menu';
-import { styled } from '../Theme';
-
-const DropdownRoot = styled(Root, {});
-
-const DropdownTrigger = styled(Trigger, {
-  cursor: 'pointer',
-  appearance: 'none !important',
-  '&[data-state="open"]': {
-    backgroundColor: '$surface_bright',
-    c: '$on_surface_high',
-  },
-  '&:focus': {
-    outline: 'none',
-  },
-  '&:focus-visible': {
-    boxShadow: '0 0 0 3px $colors$primary_default',
-  },
-});
-
-const DropdownTriggerItem = styled(SubTrigger, {
-  w: '100%',
-  color: '$on_surface_high',
-  p: '$8',
-  display: 'flex',
-  alignItems: 'center',
-  '&:hover': {
-    cursor: 'pointer',
-    bg: '$surface_brighter',
-  },
-  '&:focus-visible': {
-    bg: '$surface_brighter',
-    outline: 'none',
-  },
-});
-
-const DropdownItem = styled(Item, {
-  color: '$on_surface_high',
-  p: '$8',
-  display: 'flex',
-  alignItems: 'center',
-  outline: 'none',
-  backgroundColor: '$surface_dim',
-  '&:hover': {
-    cursor: 'pointer',
-    bg: '$surface_bright',
-  },
-  '&:focus-visible': {
-    bg: '$surface_bright',
-  },
-});
-
-const DropdownItemSeparator = styled(Separator, {
-  h: 1,
-  backgroundColor: '$border_bright',
-  m: '$4 $8',
-});
-
-const DropdownContent = styled(Content, {
-  w: '$80',
-  maxHeight: '$64',
-  r: '$1',
-  py: '$4',
-  backgroundColor: '$surface_dim',
-  overflowY: 'auto',
-  boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)',
-  zIndex: 20,
-  fontFamily: '$sans',
-});
-
-const DropdownLabel = styled(Label, {
-  display: 'flex',
-  alignItems: 'center',
-  h: '$12',
-  w: '100%',
-  p: '$8 $4',
-});
-
-const DropdownGroup = styled(Group, {});
-
-const DropdownSubMenu = styled(Sub, {});
-
-const DropdownSubMenuContent = styled(SubContent, {
-  w: '$80',
-  maxHeight: '$64',
-  r: '$1',
-  py: '$4',
-  backgroundColor: '$surface_bright',
-  overflowY: 'auto',
-  boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)',
-  zIndex: 20,
-});
-
-const DropdownCheckboxItem = styled(CheckboxItem, {
-  color: '$on_surface_high',
-  p: '$8',
-  display: 'flex',
-  alignItems: 'center',
-  outline: 'none',
-  '&:hover': {
-    cursor: 'pointer',
-    bg: '$surface_brighter',
-  },
-  '&:focus-visible': {
-    bg: '$surface_brighter',
-  },
-  gap: '$2',
-});
-
-const DropdownItemIndicator = styled(ItemIndicator, {
-  w: '$10',
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-});
-
-export const Dropdown = {
-  Root: DropdownRoot,
-  Trigger: DropdownTrigger,
-  TriggerItem: DropdownTriggerItem,
-  Content: DropdownContent,
-  Portal: Portal,
-  SubMenu: DropdownSubMenu,
-  SubMenuContent: DropdownSubMenuContent,
-  Item: DropdownItem,
-  Label: DropdownLabel,
-  Group: DropdownGroup,
-  ItemSeparator: DropdownItemSeparator,
-  CheckboxItem: DropdownCheckboxItem,
-  ItemIndicator: DropdownItemIndicator,
-};

package/src/Dropdown/index.tsx

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

package/src/Fieldset/Fieldset.tsx

@@ -1,11 +0,0 @@
-import { styled } from '../Theme';
-
-const StyledFieldset = styled('fieldset', {
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  border: 'none',
-  backgroundColor: 'transparent',
-});
-
-export const Fieldset = StyledFieldset;

package/src/Fieldset/index.tsx

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

package/src/Footer/Footer.tsx

@@ -1,47 +0,0 @@
-import { Flex } from '../Layout';
-import { styled } from '../Theme';
-
-const Root = styled(Flex, {
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  py: '$4',
-  position: 'relative',
-  height: '100%',
-  '@md': { flexWrap: 'wrap', gap: '$4' },
-});
-
-const Left = styled(Flex, {
-  alignItems: 'center',
-  position: 'absolute',
-  left: '$10',
-  gap: '$8',
-  '@md': {
-    position: 'unset',
-    justifyContent: 'center',
-    w: '100%',
-  },
-});
-
-const Center = styled(Flex, {
-  w: '100%',
-  justifyContent: 'center',
-  alignItems: 'center',
-  gap: '$8',
-});
-
-const Right = styled(Flex, {
-  alignItems: 'center',
-  position: 'absolute',
-  right: '$10',
-  gap: '$8',
-  '@md': {
-    display: 'none',
-  },
-});
-
-export const Footer = {
-  Root,
-  Left,
-  Center,
-  Right,
-};

package/src/Footer/index.tsx

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

package/src/IconButton/IconButton.tsx

@@ -1,43 +0,0 @@
-import { styled } from '../Theme';
-import { flexCenter } from '../utils/styles';
-
-export const IconButton = styled('button', {
-  ...flexCenter,
-  alignItems: 'center',
-  outline: 'none',
-  border: 'none',
-  padding: '$2',
-  r: '$0',
-  cursor: 'pointer',
-  backgroundColor: 'transparent',
-  color: '$on_surface_high',
-  '&:not([disabled]):focus-visible': {
-    boxShadow: '0 0 0 3px $colors$primary_default',
-  },
-  '&:not([disabled]):focus': {
-    outline: 'none',
-  },
-  '@media (hover: hover)': {
-    '&:not([disabled]):hover': {
-      backgroundColor: '$on_surface_low',
-    },
-  },
-  '&[disabled]': {
-    opacity: 0.5,
-    cursor: 'not-allowed',
-    backgroundColor: '$secondary_dim',
-    color: '$on_primary_high',
-  },
-  '&:focus': {
-    outline: 'none',
-  },
-  variants: {
-    active: {
-      true: {
-        '&:not([disabled]):hover': {
-          backgroundColor: '$on_surface_low',
-        },
-      },
-    },
-  },
-});

package/src/IconButton/index.tsx

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

package/src/Input/Input.tsx

@@ -1,109 +0,0 @@
-import React, { ComponentProps, PropsWithChildren, PropsWithRef } from 'react';
-import { CSS } from '@stitches/react';
-import { CopyIcon, EyeCloseIcon, EyeOpenIcon } from '@100mslive/react-icons';
-import { Flex } from '../Layout';
-import { styled } from '../Theme';
-
-export const Input = styled('input', {
-  fontFamily: '$sans',
-  lineHeight: 'inherit',
-  backgroundColor: '$surface_default',
-  borderRadius: '8px',
-  outline: 'none',
-  border: '1px solid $border_default',
-  padding: '0.5rem 0.75rem',
-  minHeight: '30px',
-  color: '$on_surface_high',
-  fontSize: '$md',
-  '&:disabled': {
-    cursor: 'not-allowed',
-  },
-  '&:focus': {
-    boxShadow: '0 0 0 1px $colors$primary_default',
-    border: '1px solid transparent',
-  },
-  '&::placeholder': {
-    color: '$on_surface_medium',
-  },
-  variants: {
-    error: {
-      true: {
-        '&:focus': {
-          boxShadow: '0 0 0 3px $colors$alert_error_default',
-        },
-      },
-    },
-  },
-});
-
-const PasswordRoot = styled('div', {
-  w: '100%',
-  position: 'relative',
-  display: 'flex',
-});
-
-const PasswordShowIcon: React.FC<ComponentProps<typeof Flex> & { showPassword?: boolean; css?: CSS }> = ({
-  showPassword,
-  css,
-  ...props
-}) => {
-  return (
-    <Flex css={{ ...css }} {...props}>
-      {showPassword ? <EyeOpenIcon /> : <EyeCloseIcon />}
-    </Flex>
-  );
-};
-
-const PasswordCopyIcon: React.FC<ComponentProps<typeof Flex & { css?: CSS }>> = ({ css, ...props }) => {
-  return (
-    <Flex css={{ ...css }} {...props}>
-      <CopyIcon />
-    </Flex>
-  );
-};
-
-const PasswordIcons = React.forwardRef<HTMLDivElement, PropsWithChildren<ComponentProps<typeof Flex & { css?: CSS }>>>(
-  ({ css, ...props }, ref) => {
-    return (
-      <Flex
-        css={{
-          position: 'absolute',
-          top: 0,
-          height: '100%',
-          zIndex: 10,
-          right: '$4',
-          bg: '$surface_bright',
-          alignItems: 'center',
-          ...css,
-        }}
-        ref={ref}
-        {...props}
-      >
-        {props.children}
-      </Flex>
-    );
-  },
-);
-
-const ReactInput: React.FC<PropsWithRef<ComponentProps<typeof Input> & { showPassword?: boolean; css?: CSS }>> =
-  React.forwardRef<
-    HTMLInputElement,
-    PropsWithRef<ComponentProps<typeof Input> & { showPassword?: boolean; css?: CSS }>
-  >(({ showPassword = false, css, ...props }, ref) => {
-    return (
-      <Input
-        css={{ flexGrow: 1, width: '100%', ...css }}
-        type={showPassword ? 'text' : 'password'}
-        {...props}
-        ref={ref}
-      />
-    );
-  });
-
-export const PasswordInput = {
-  Root: PasswordRoot,
-  Icons: PasswordIcons,
-  Input: ReactInput,
-  ShowIcon: PasswordShowIcon,
-  CopyIcon: PasswordCopyIcon,
-};

package/src/Input/index.tsx

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

package/src/Label/Label.tsx

@@ -1,8 +0,0 @@
-import * as LabelPrimitive from '@radix-ui/react-label';
-import { styled } from '../Theme';
-
-export const Label = styled(LabelPrimitive.Root, {
-  fontFamily: '$sans',
-  fontSize: '$md',
-  color: '$on_primary_high',
-});

package/src/Label/index.ts

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

package/src/Layout/Box.tsx

@@ -1,3 +0,0 @@
-import { styled } from '../Theme';
-
-export const Box = styled('div', {});

package/src/Layout/Flex.tsx

@@ -1,76 +0,0 @@
-import { styled } from '../Theme';
-
-/**
- * @see https://tailwindcss.com/docs/space
- */
-const gapStyles = (value: number) => {
-  return {
-    '& > * + *': {
-      marginRight: '0',
-      marginLeft: `${0.25 * value}rem`,
-    },
-  };
-};
-
-export const Flex = styled('div', {
-  display: 'flex',
-  variants: {
-    justify: {
-      start: {
-        justifyContent: 'flex-start',
-      },
-      end: {
-        justifyContent: 'flex-end',
-      },
-      center: {
-        justifyContent: 'center',
-      },
-      between: {
-        justifyContent: 'space-between',
-      },
-      around: {
-        justifyContent: 'space-around',
-      },
-      evenly: {
-        justifyContent: 'space-evenly',
-      },
-    },
-    align: {
-      start: {
-        alignItems: 'flex-start',
-      },
-      end: {
-        alignItems: 'flex-end',
-      },
-      center: {
-        alignItems: 'center',
-      },
-      baseline: {
-        alignItems: 'baseline',
-      },
-      stretch: {
-        alignItems: 'stretch',
-      },
-    },
-    direction: {
-      row: {
-        flexDirection: 'row',
-      },
-      column: {
-        flexDirection: 'column',
-      },
-      rowReverse: {
-        flexDirection: 'row-reverse',
-      },
-      columnReverse: {
-        flexDirection: 'column-reverse',
-      },
-    },
-    gap: {
-      1: gapStyles(1),
-      2: gapStyles(2),
-      3: gapStyles(3),
-      4: gapStyles(4),
-    },
-  },
-});

package/src/Layout/index.tsx

@@ -1,2 +0,0 @@
-export { Flex } from './Flex';
-export { Box } from './Box';