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

package/src/Toast/Toast.tsx

@@ -1,170 +0,0 @@
-import React, { ComponentProps } from 'react';
-import type { ToastProps } from '@radix-ui/react-toast';
-import * as ToastPrimitives from '@radix-ui/react-toast';
-import { CrossIcon } from '@100mslive/react-icons';
-import { IconButton } from '../IconButton';
-import { Box, Flex } from '../Layout';
-import { Text } from '../Text';
-import { styled } from '../Theme';
-import { toastAnimation } from '../utils';
-
-const getToastVariant = (base: string) => {
-  return {
-    borderLeftColor: base,
-    borderLeft: 0,
-    '&:before': {
-      position: 'absolute',
-      top: '-1px',
-      left: '-$4',
-      width: '$8',
-      borderLeft: `solid $space$px ${base}`,
-      borderTop: `solid $space$px ${base}`,
-      borderBottom: `solid $space$px ${base}`,
-      borderTopLeftRadius: '$3',
-      borderBottomLeftRadius: '$3',
-      bg: base,
-      content: ' ',
-      height: '100%',
-      zIndex: 10,
-    },
-    '@sm': {
-      '&:before': {
-        content: 'none',
-      },
-      border: `solid $space$px ${base}`,
-    },
-  };
-};
-
-const ToastRoot = styled(ToastPrimitives.Root, {
-  r: '$3',
-  bg: '$surface_default',
-  p: '$10',
-  display: 'flex',
-  flexDirection: 'column',
-  position: 'relative',
-  fontFamily: '$sans',
-  border: 'solid $space$px $border_bright',
-  overflow: 'hidden',
-  ...toastAnimation,
-  '@sm': {
-    p: '$8 $11',
-  },
-  variants: {
-    variant: {
-      standard: getToastVariant('$secondary_default'),
-      warning: getToastVariant('$alert_warning'),
-      error: getToastVariant('$alert_error_default'),
-      success: getToastVariant('$alert_success'),
-    },
-  },
-  defaultVariants: {
-    variant: 'standard',
-  },
-});
-
-const ToastTitle = styled(ToastPrimitives.Title, {
-  fontSize: '$md',
-  color: '$on_surface_high',
-  fontWeight: '$semiBold',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-});
-const ToastDescription = styled(ToastPrimitives.Description, {
-  color: '$on_surface_medium',
-});
-const ToastClose = styled(ToastPrimitives.Close, {});
-const ToastAction = styled(ToastPrimitives.Action, {
-  cursor: 'pointer',
-  background: 'none',
-  border: 'none',
-});
-const ToastViewport = styled(ToastPrimitives.Viewport, {
-  position: 'fixed',
-  bottom: 0,
-  left: 0,
-  display: 'flex',
-  flexDirection: 'column',
-  padding: '$8',
-  gap: 10,
-  width: 390,
-  '@sm': {
-    width: '100%',
-    padding: '$6',
-  },
-  maxWidth: '100vw',
-  margin: 0,
-  listStyle: 'none',
-  zIndex: 1000,
-});
-
-const DefaultClose = ({ css }: Pick<ComponentProps<typeof ToastClose>, 'css'>) => {
-  return (
-    <ToastClose css={css} asChild>
-      <IconButton>
-        <CrossIcon />
-      </IconButton>
-    </ToastClose>
-  );
-};
-
-interface HMSToastProps extends ToastProps {
-  title: string;
-  description?: string;
-  isClosable?: boolean;
-  icon?: React.ReactNode;
-  action?: React.ReactNode;
-  inlineAction?: boolean;
-}
-
-const HMSToast: React.FC<HMSToastProps> = ({
-  title,
-  description,
-  isClosable = true,
-  icon,
-  action,
-  inlineAction = false,
-  ...props
-}) => {
-  return (
-    <>
-      <ToastRoot {...props}>
-        <ToastTitle>
-          <Flex align="center" css={{ gap: '$4', flex: '1 1 0', minWidth: 0 }}>
-            {icon ? <Box css={{ w: '$10', h: '$10', alignSelf: 'start', mt: '$2' }}>{icon}</Box> : null}
-            <Text variant="sub1" css={{ c: 'inherit', wordBreak: 'break-word' }}>
-              {title}
-            </Text>
-          </Flex>
-          {isClosable ? <DefaultClose /> : null}
-          {!isClosable && inlineAction && action ? (
-            <ToastAction altText={`${title}Action`}>{action}</ToastAction>
-          ) : null}
-        </ToastTitle>
-        {description ? (
-          <ToastDescription>
-            <Text variant="body1" css={{ fontWeight: '$regular', c: '$on_surface_medium' }}>
-              {description}
-            </Text>
-          </ToastDescription>
-        ) : null}
-        {!inlineAction && action ? (
-          <ToastAction altText={`${title}Action`} css={{ mt: '$10' }}>
-            {action}
-          </ToastAction>
-        ) : null}
-      </ToastRoot>
-    </>
-  );
-};
-export const Toast = {
-  Provider: ToastPrimitives.Provider,
-  Root: ToastRoot,
-  Title: ToastTitle,
-  Description: ToastDescription,
-  Close: DefaultClose,
-  Action: ToastAction,
-  Viewport: ToastViewport,
-  HMSToast: HMSToast,
-};

package/src/Toast/index.tsx

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

package/src/Tooltip/Tooltip.tsx

@@ -1,79 +0,0 @@
-import React, { PropsWithChildren, useState } from 'react';
-import * as BaseTooltip from '@radix-ui/react-tooltip';
-import { CSS, styled } from '../Theme';
-import { slideDownAndFade, slideLeftAndFade, slideRightAndFade, slideUpAndFade } from '../utils';
-
-const TooltipBox = styled(BaseTooltip.Content, {
-  fontFamily: '$sans',
-  borderRadius: '$2',
-  padding: '$2 $4',
-  fontSize: '$xs',
-  zIndex: 11,
-  color: '$on_surface_high',
-  backgroundColor: '$surface_bright',
-  '@media (prefers-reduced-motion: no-preference)': {
-    animationDuration: '400ms',
-    animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
-    willChange: 'transform, opacity',
-    '&[data-state="delayed-open"]': {
-      '&[data-side="top"]': { animationName: slideDownAndFade() },
-      '&[data-side="right"]': { animationName: slideLeftAndFade() },
-      '&[data-side="bottom"]': { animationName: slideUpAndFade() },
-      '&[data-side="left"]': { animationName: slideRightAndFade() },
-    },
-  },
-  variants: {
-    outlined: {
-      true: {
-        backgroundColor: '$background_dim',
-        border: 'solid $space$px $border_bright',
-      },
-    },
-  },
-});
-
-const TooltipTrigger = styled(BaseTooltip.Trigger, {
-  fontFamily: '$sans',
-});
-
-const TooltipRoot = BaseTooltip.Root;
-export type alignTooltip = 'end' | 'center' | 'start' | undefined;
-export type sideTooltip = 'bottom' | 'left' | 'right' | 'top' | undefined;
-
-export const Tooltip: React.FC<
-  PropsWithChildren<{
-    title: React.ReactNode | string;
-    outlined?: boolean;
-    side?: sideTooltip;
-    align?: alignTooltip;
-    disabled?: boolean;
-    triggerCss?: CSS;
-    boxCss?: CSS;
-    delayDuration?: number;
-  }>
-> = ({
-  children,
-  title,
-  triggerCss,
-  boxCss,
-  outlined = true,
-  side = 'bottom',
-  align = 'center',
-  disabled = false,
-  delayDuration = 200,
-}) => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <BaseTooltip.Provider>
-      <TooltipRoot delayDuration={delayDuration} open={open && !disabled} onOpenChange={setOpen}>
-        <TooltipTrigger css={{ ...triggerCss }} asChild>
-          {children}
-        </TooltipTrigger>
-        <TooltipBox sideOffset={10} side={side} align={align} outlined={outlined} css={{ ...boxCss }}>
-          {title}
-        </TooltipBox>
-      </TooltipRoot>
-    </BaseTooltip.Provider>
-  );
-};

package/src/Tooltip/index.ts

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

package/src/Video/Video.tsx

@@ -1,61 +0,0 @@
-import React from 'react';
-import type { VariantProps } from '@stitches/react';
-import { HMSPeer, useVideo } from '@100mslive/react-sdk';
-import { styled } from '../Theme';
-
-export const StyledVideo = styled('video', {
-  width: '100%',
-  height: '100%',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  borderRadius: '$2',
-  objectFit: 'cover',
-  background: '$background_default',
-  variants: {
-    mirror: {
-      true: {
-        transform: 'scaleX(-1)',
-      },
-    },
-    screenShare: {
-      true: {
-        objectFit: 'contain',
-      },
-    },
-    degraded: {
-      // send the video behind when it's degraded so avatar can show on top of it. Video will be stuck frame in this case.
-      // not hiding by using display none, because it will lead it to be detached as it will no longer be in view.
-      true: {
-        zIndex: -100,
-      },
-    },
-    noRadius: {
-      true: {
-        borderRadius: 0,
-      },
-    },
-  },
-  defaultVariants: {
-    mirror: false,
-  },
-});
-
-type StyledProps = VariantProps<typeof StyledVideo> & React.ComponentProps<typeof StyledVideo>;
-
-interface Props {
-  /**
-   * trackID for peer (videoTrack)
-   */
-  trackId: HMSPeer['videoTrack'];
-  /**
-   * Boolean stating whether to override the internal behaviour.
-   * when attach is false, even if tile is inView or enabled, it won't be rendered
-   */
-  attach?: boolean;
-}
-
-export const Video: React.FC<Props & StyledProps> = ({ trackId, attach, ...props }) => {
-  const { videoRef } = useVideo({ trackId, attach });
-  return <StyledVideo ref={videoRef} {...props} />;
-};

package/src/Video/index.tsx

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

package/src/VideoList/StyledVideoList.tsx

@@ -1,39 +0,0 @@
-import { styled } from '../Theme';
-
-const Root = styled('div', {
-  height: '100%',
-  width: '100%',
-  display: 'flex',
-  flexDirection: 'column',
-});
-
-const Container = styled('div', {
-  height: '100%',
-  width: '100%',
-  position: 'relative',
-  display: 'flex',
-  alignItems: 'center',
-  overflow: 'hidden',
-});
-
-const View = styled('div', {
-  height: '100%',
-  width: '100%',
-  position: 'absolute',
-  display: 'flex',
-  placeContent: 'center',
-  flexWrap: 'wrap',
-  alignItems: 'center',
-});
-
-interface VideoListType {
-  Root: typeof Root;
-  Container: typeof Container;
-  View: typeof View;
-}
-
-export const StyledVideoList: VideoListType = {
-  Root,
-  Container,
-  View,
-};

package/src/VideoList/index.tsx

@@ -1,2 +0,0 @@
-export { getLeft } from './videoListUtils';
-export { StyledVideoList } from './StyledVideoList';

package/src/VideoList/videoListUtils.tsx

@@ -1,20 +0,0 @@
-export const getLeft = (index: number, currentPageIndex: number) => {
-  //active slide
-  if (index === currentPageIndex) {
-    return 0;
-  }
-  //prev slide
-  if (index + 1 === currentPageIndex) {
-    return '-100%';
-  }
-  //next slide
-  if (index - 1 === currentPageIndex) {
-    return '100%';
-  }
-  //all slides before prev
-  if (index < currentPageIndex) {
-    return '-200%';
-  }
-  //all slides after next
-  return '200%';
-};

package/src/VideoTile/StyledVideoTile.tsx

@@ -1,146 +0,0 @@
-import { Box } from '../Layout';
-import { styled } from '../Theme';
-import { flexCenter } from '../utils';
-
-export const Root = styled('div', {
-  padding: '0.75rem',
-});
-
-const Container = styled('div', {
-  width: '100%',
-  height: '100%',
-  position: 'relative',
-  overflow: 'hidden',
-  borderRadius: '$2',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  background: '$background_default',
-  variants: {
-    transparentBg: {
-      true: {
-        background: 'transparent',
-      },
-    },
-    noRadius: {
-      true: {
-        borderRadius: 0,
-      },
-    },
-  },
-});
-
-const Overlay = styled('div', {
-  position: 'absolute',
-  width: '100%',
-  height: '100%',
-});
-
-const Info = styled('div', {
-  color: '$on_primary_high',
-  position: 'absolute',
-  bottom: '5px',
-  left: '50%',
-  fontSize: '$sm',
-  transform: 'translateX(-50%)',
-  textAlign: 'center',
-  width: '80%',
-  overflow: 'hidden',
-  whiteSpace: 'nowrap',
-  textOverflow: 'ellipsis',
-  fontFamily: '$sans',
-});
-
-const AttributeBox = styled('div', {
-  position: 'absolute',
-  top: '$4',
-  color: '$on_secondary_high',
-  bg: '$secondary_dim',
-  borderRadius: '$round',
-  width: '$14',
-  height: '$14',
-  mb: '5px',
-  ...flexCenter,
-  variants: {
-    size: {
-      small: {
-        width: '$10',
-        height: '$10',
-        '& > svg': {
-          width: '$8',
-          height: '$8',
-        },
-      },
-      medium: {
-        width: '$13',
-        height: '$13',
-      },
-    },
-    position: {
-      left: { left: '$4' },
-      right: { right: '$4' },
-    },
-  },
-  defaultVariants: {
-    size: 'medium',
-    position: 'left',
-  },
-});
-
-const AudioIndicator = styled(AttributeBox, { defaultVariants: { position: 'right' } });
-
-const FullScreenButton = styled('button', {
-  height: '$14',
-  p: '$2 $4',
-  color: '$on_surface_high',
-  borderRadius: '$1',
-  border: 'none',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  position: 'absolute',
-  top: '$2',
-  right: '$2',
-  zIndex: 5,
-  '&:not([disabled]):focus': {
-    outline: 'none',
-    boxShadow: '0 0 0 3px $colors$primary_bright',
-  },
-});
-
-const AvatarContainer = styled(Box, {
-  ...flexCenter,
-  flexDirection: 'column',
-  position: 'absolute',
-  left: '50%',
-  top: '50%',
-  transform: 'translateX(-50%) translateY(-50%)',
-  width: '40%',
-  height: '40%',
-  '& > div': {
-    maxHeight: '$20',
-    height: '100%',
-  },
-});
-
-interface VideoTileType {
-  Root: typeof Root;
-  Container: typeof Container;
-  Overlay: typeof Overlay;
-  Info: typeof Info;
-  AvatarContainer: typeof AvatarContainer;
-  AttributeBox: typeof AttributeBox;
-  AudioIndicator: typeof AudioIndicator;
-  FullScreenButton: typeof FullScreenButton;
-}
-
-export const StyledVideoTile: VideoTileType = {
-  Root,
-  Container,
-  Overlay,
-  Info,
-  AvatarContainer,
-  AttributeBox,
-  AudioIndicator,
-  FullScreenButton,
-};

package/src/VideoTile/index.tsx

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

package/src/context/DialogContext.tsx

@@ -1,13 +0,0 @@
-import React, { createContext, ReactNode } from 'react';
-
-export const DialogContainerContext = createContext('');
-
-export function DialogContainerProvider({
-  children,
-  dialogContainerSelector,
-}: {
-  children: ReactNode;
-  dialogContainerSelector: string;
-}) {
-  return <DialogContainerContext.Provider value={dialogContainerSelector}>{children}</DialogContainerContext.Provider>;
-}

package/src/fixtures/chats.ts

@@ -1,25 +0,0 @@
-import { HMSMessage, HMSMessageType } from '@100mslive/hms-video-store';
-
-let counter = 1;
-export const makeFakeMessage = (msg: string, sender: string): HMSMessage => {
-  return {
-    id: String(counter++),
-    message: msg,
-    read: false,
-    sender: sender,
-    time: new Date(),
-    type: HMSMessageType.CHAT,
-    senderName: sender,
-    ignored: false,
-  };
-};
-
-export const fakeMessages = [
-  makeFakeMessage('Hello from 100ms', 'Yash'),
-  makeFakeMessage('This is a chat example', 'admin'),
-  makeFakeMessage('via the sendBroadcast action', 'Yash'),
-  makeFakeMessage('Our twitter handle @100mslive', '100ms'),
-  makeFakeMessage('Type and send chat!', 'admin'),
-];
-
-export const fakeMessage = makeFakeMessage('where is everyone?', 'tushar');

package/src/fixtures/peers.ts

@@ -1,27 +0,0 @@
-import { HMSPeerType, HMSPeerWithMuteStatus } from '@100mslive/react-sdk';
-
-let counter = 1;
-export const makeFakeParticipant = (name: string, role = 'Student'): HMSPeerWithMuteStatus => {
-  return {
-    peer: {
-      id: String(counter++),
-      name,
-      roleName: role,
-      auxiliaryTracks: [],
-      isLocal: counter === 1,
-      groups: [],
-      isHandRaised: false,
-      type: HMSPeerType.REGULAR,
-    },
-    isAudioEnabled: false,
-  };
-};
-
-export const fakeParticipants = [
-  makeFakeParticipant('Alex Tinmayson', 'Teacher'),
-  makeFakeParticipant('Ankita Bhattacharya'),
-  makeFakeParticipant('Anshul Kumar'),
-  makeFakeParticipant('Ishaan Awasthi'),
-  makeFakeParticipant('Ivy Loppinbug', 'Teacher'),
-  makeFakeParticipant('Sudhanshu Kumar'),
-];

package/src/fixtures/tracks.ts

@@ -1,11 +0,0 @@
-import { HMSVideoTrack } from '@100mslive/hms-video-store';
-
-let counter = 100;
-
-export const makeFakeVideoTrack = (): HMSVideoTrack => {
-  return {
-    enabled: false,
-    id: String(counter++),
-    type: 'video',
-  } as HMSVideoTrack;
-};

package/src/hooks/useDialogContainerSelector.tsx

@@ -1,7 +0,0 @@
-import { useContext } from 'react';
-import { DialogContainerContext } from '../context/DialogContext';
-
-export function useDialogContainerSelector() {
-  const dialogContainerSelector = useContext(DialogContainerContext);
-  return dialogContainerSelector;
-}

package/src/index.ts

@@ -1,41 +0,0 @@
-export * from './Button';
-export * from './Text';
-export * from './IconButton';
-export * from './Layout';
-export * from './Avatar';
-export * from './Divider';
-export * from './Switch';
-export * from './Tooltip';
-export * from './Select';
-export * from './Slider';
-export * from './Modal';
-export * from './Loading';
-export * from './Input';
-export * from './VideoTile';
-export * from './VideoList';
-export * from './Pagination';
-export * from './Dropdown';
-export { textEllipsis, flexCenter, slideLeftAndFade } from './utils';
-export * from './Video';
-export * from './TileMenu';
-export * from './AudioLevel';
-export * from './Popover';
-export * from './Stats';
-export * from './Theme';
-export * from './Checkbox';
-export * from './Label';
-export * from './RadioGroup';
-export * from './Toast';
-export * from './Accordion';
-export * from './Fieldset';
-export * from './Footer';
-export * as HMSSelect from './ReactSelect';
-export * from './Tabs';
-export * from './QRCode';
-export * from './Link';
-export * from './Collapsible';
-export * from './Prebuilt';
-export * from './Progress';
-export * from './context/DialogContext';
-export * from './TextArea';
-export * from './Diagnostics';