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

package/src/Link/Link.tsx

@@ -1,54 +0,0 @@
-import React from 'react';
-import * as icons from '@100mslive/react-icons';
-import { Flex } from '../Layout';
-import { Text } from '../Text';
-import { styled } from '../Theme';
-
-const LinkComponent = styled('a', {
-  textDecoration: 'none',
-  display: 'flex',
-  alignItems: 'center',
-  gap: '$5',
-  variants: {
-    color: {
-      highEmp: {
-        color: '$on_surface_high',
-        '&:hover': {
-          color: '$on_surface_medium',
-        },
-      },
-      primary: {
-        color: '$primary_default',
-        '&:hover': {
-          color: '$primary_bright',
-        },
-      },
-    },
-  },
-});
-
-export interface LinkProps extends React.ComponentProps<typeof LinkComponent> {
-  as?: React.ElementType;
-  iconSide?: 'left' | 'right' | 'none';
-  icon?: keyof typeof icons;
-  color?: 'highEmp' | 'primary';
-}
-
-export const Link = ({ iconSide = 'left', icon, color = 'primary', children, ...rest }: LinkProps) => {
-  const Icon = icon ? icons[icon] : React.Fragment;
-  const renderedIcon = icon ? (
-    <Flex as="span">
-      <Icon height={13.33} width={13.33} />{' '}
-    </Flex>
-  ) : null;
-
-  return (
-    <LinkComponent {...rest} color={color}>
-      {iconSide === 'left' && renderedIcon}
-      <Text as="span" variant="body2" css={{ color: 'inherit' }}>
-        {children}
-      </Text>
-      {iconSide === 'right' && renderedIcon}
-    </LinkComponent>
-  );
-};

package/src/Link/index.tsx

@@ -1,2 +0,0 @@
-export { Link } from './Link';
-export type { LinkProps } from './Link';

package/src/Loading/Loading.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-
-type Props = {
-  /**
-   * Adjusts width and height
-   */
-  size?: number | string;
-  /**
-   * Color of Loader
-   */
-  color?: string;
-};
-
-type LoadingProps = Props & React.SVGProps<SVGSVGElement>;
-
-export const Loading = ({ size = 24, color = 'white', ...props }: LoadingProps) => (
-  <svg width={size} height={size} viewBox="0 0 50 50" fill={color} xmlns="http://www.w3.org/2000/svg" {...props}>
-    <circle cx="25" cy="25" r="20" stroke={color} strokeWidth="4" strokeDasharray="70 30" fill="none">
-      <animateTransform
-        attributeName="transform"
-        attributeType="XML"
-        type="rotate"
-        from="0 25 25"
-        to="360 25 25"
-        dur="1s"
-        repeatCount="indefinite"
-      />
-    </circle>
-  </svg>
-);

package/src/Loading/index.ts

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

package/src/Modal/Dialog.tsx

@@ -1,57 +0,0 @@
-import React, { ReactNode, useEffect, useRef } from 'react';
-import { Root } from '@radix-ui/react-dialog';
-import { styled } from '@stitches/react';
-import {
-  CustomDialogContent,
-  CustomDialogOverlay,
-  DialogClose,
-  DialogDefaultCloseIcon,
-  DialogDescription,
-  DialogTitle,
-  StyledDialogPortal,
-  StyledDialogTrigger,
-} from './DialogContent';
-import { useDialogContainerSelector } from '../hooks/useDialogContainerSelector';
-
-const StyledDialog = styled(Root, {});
-
-// Handles race conditions when multiple elements with dismissable layer are present
-// https://github.com/radix-ui/primitives/issues/2122
-const DialogRoot = <T extends React.ComponentProps<typeof StyledDialog>>(props: T) => {
-  useEffect(() => {
-    return () => {
-      if (document) setTimeout(() => (document.body.style.pointerEvents = 'auto'), 0);
-    };
-  }, []);
-  return <StyledDialog {...(props as object)} />;
-};
-
-const CustomDialogPortal = ({ children, container }: { children: ReactNode; container?: HTMLElement | null }) => {
-  const dialogContainerSelector = useDialogContainerSelector();
-  const containerRef = useRef<HTMLElement | null>(null);
-
-  if (container) {
-    containerRef.current = container;
-  } else if (dialogContainerSelector && !containerRef.current) {
-    containerRef.current = document.querySelector(dialogContainerSelector) as HTMLElement;
-  } else if (!containerRef.current) {
-    containerRef.current = document.body;
-  }
-  return (
-    <StyledDialogPortal container={containerRef.current}>
-      <>{children}</>
-    </StyledDialogPortal>
-  );
-};
-
-export const Dialog = {
-  Root: DialogRoot,
-  Trigger: StyledDialogTrigger,
-  Overlay: CustomDialogOverlay,
-  Content: CustomDialogContent,
-  Title: DialogTitle,
-  Description: DialogDescription,
-  Close: DialogClose,
-  DefaultClose: DialogDefaultCloseIcon,
-  Portal: CustomDialogPortal,
-};

package/src/Modal/DialogContent.tsx

@@ -1,65 +0,0 @@
-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 CustomDialogOverlay = styled(DialogPrimitive.Overlay, {
-  backgroundColor: 'rgba(0, 0, 0, 0.5);',
-  position: 'absolute',
-  inset: 0,
-});
-
-export const StyledDialogPortal = styled(DialogPrimitive.Portal, {});
-
-export const CustomDialogContent = styled(DialogPrimitive.Content, {
-  color: '$on_surface_medium',
-  backgroundColor: '$surface_dim',
-  borderRadius: '8px',
-  position: 'absolute',
-  top: '50%',
-  left: '50%',
-  maxHeight: '95%',
-  overflowY: 'auto',
-  border: '$space$px solid $border_bright',
-  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

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

package/src/Pagination/StyledPagination.tsx

@@ -1,70 +0,0 @@
-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: '$on_surface_high',
-  border: 'none',
-  '&:focus': {
-    outline: 'none',
-  },
-  '&[disabled]': {
-    color: '$on_surface_low',
-    cursor: 'not-allowed',
-  },
-  backgroundColor: 'transparent',
-  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: '$on_surface_low',
-  padding: '0px',
-  border: 'none',
-  cursor: 'pointer',
-  variants: {
-    active: {
-      true: {
-        backgroundColor: '$on_surface_high',
-      },
-    },
-  },
-});
-
-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

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

package/src/Popover/index.tsx

@@ -1,34 +0,0 @@
-import { Arrow, Close, 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: '$background_default',
-  boxShadow: '$sm',
-  zIndex: 12,
-  ...popoverAnimation,
-});
-
-const StyledArrow = styled(Arrow, {
-  ...popoverAnimation,
-});
-
-const StyledTrigger = styled(Trigger, {
-  '&:hover': {
-    cursor: 'pointer',
-  },
-  '&:focus-visible': {
-    boxShadow: '0 0 0 3px $colors$primary_default',
-  },
-});
-
-export const Popover = {
-  Root,
-  Content: StyledContent,
-  Trigger: StyledTrigger,
-  Portal: Portal,
-  Arrow: StyledArrow,
-  Close: Close,
-};

package/src/Prebuilt/App.tsx

@@ -1,318 +0,0 @@
-import React, { MutableRefObject, useEffect, useRef } from 'react';
-import { Layout, Logo, Screens, Theme, Typography } from '@100mslive/types-prebuilt';
-import { match } from 'ts-pattern';
-import {
-  HMSActions,
-  HMSReactiveStore,
-  HMSRoomProvider,
-  HMSStatsStoreWrapper,
-  HMSStoreWrapper,
-  IHMSNotifications,
-  selectIsConnectedToRoom,
-  useHMSActions,
-  useHMSStore,
-} from '@100mslive/react-sdk';
-import { AppData } from './components/AppData/AppData';
-// @ts-ignore: No implicit Any
-import AuthToken from './components/AuthToken';
-import { ConferenceScreen } from './components/ConferenceScreen';
-// @ts-ignore: No implicit Any
-import { ErrorBoundary } from './components/ErrorBoundary';
-// @ts-ignore: No implicit Any
-import { Init } from './components/init/Init';
-// @ts-ignore: No implicit Any
-import { KeyboardHandler } from './components/Input/KeyboardInputManager';
-import { LeaveScreen } from './components/LeaveScreen';
-import { MwebLandscapePrompt } from './components/MwebLandscapePrompt';
-import { Notifications } from './components/Notifications';
-import { PIPProvider } from './components/PIP/PIPProvider';
-import { PreviewScreen } from './components/Preview/PreviewScreen';
-// @ts-ignore: No implicit Any
-import { ToastContainer } from './components/Toast/ToastContainer';
-import { Sheet } from './layouts/Sheet';
-import { RoomLayoutContext, RoomLayoutProvider, useRoomLayout } from './provider/roomLayoutProvider';
-import { DialogContainerProvider } from '../context/DialogContext';
-import { Box } from '../Layout';
-import { globalStyles, HMSThemeProvider } from '../Theme';
-import { HMSPrebuiltContext } from './AppContext';
-import { AppStateContext, PrebuiltStates, useAppStateManager } from './AppStateContext';
-// @ts-ignore: No implicit Any
-import { FlyingEmoji } from './plugins/FlyingEmoji';
-// @ts-ignore: No implicit Any
-import { RemoteStopScreenshare } from './plugins/RemoteStopScreenshare';
-// @ts-ignore: No implicit Any
-import { useIsNotificationDisabled } from './components/AppData/useUISettings';
-import { useAutoStartStreaming } from './components/hooks/useAutoStartStreaming';
-import {
-  useRoomLayoutLeaveScreen,
-  useRoomLayoutPreviewScreen,
-} from './provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-// @ts-ignore: No implicit Any
-import { FeatureFlags } from './services/FeatureFlags';
-// @ts-ignore: No implicit Any
-import { DEFAULT_PORTAL_CONTAINER } from './common/constants';
-
-export type HMSPrebuiltOptions = {
-  userName?: string;
-  userId?: string;
-  endpoints?: object;
-  effectsSDKKey?: string;
-};
-
-export type HMSPrebuiltProps = {
-  roomCode?: string;
-  logo?: Logo;
-  typography?: Typography;
-  themes?: Theme[];
-  options?: HMSPrebuiltOptions;
-  screens?: Screens;
-  authToken?: string;
-  leaveOnUnload?: boolean;
-  onLeave?: () => void;
-  onJoin?: () => void;
-  /**
-   * @remarks
-   * Specify css selectors for the HTML element to be used as container for dialogs. Affects the positioning and focus of dialogs.
-   */
-  containerSelector?: string;
-};
-
-export type HMSPrebuiltRefType = {
-  hmsActions: HMSActions;
-  hmsStore: HMSStoreWrapper;
-  hmsStats: HMSStatsStoreWrapper;
-  hmsNotifications: IHMSNotifications;
-};
-
-export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps>(
-  (
-    {
-      roomCode = '',
-      authToken = '',
-      containerSelector = DEFAULT_PORTAL_CONTAINER,
-      logo,
-      typography,
-      themes,
-      options: { userName = '', userId = '', endpoints } = {},
-      screens,
-      leaveOnUnload = true,
-      onLeave,
-      onJoin,
-    },
-    ref,
-  ) => {
-    const reactiveStore = useRef<HMSPrebuiltRefType>();
-    const [hydrated, setHydrated] = React.useState(false);
-
-    useEffect(() => {
-      setHydrated(true);
-      const hms = new HMSReactiveStore();
-      const hmsStore = hms.getStore();
-      const hmsActions = hms.getActions();
-      const hmsNotifications = hms.getNotifications();
-      const hmsStats = hms.getStats();
-      hms.triggerOnSubscribe();
-
-      reactiveStore.current = {
-        hmsActions,
-        hmsStats,
-        hmsStore,
-        hmsNotifications,
-      };
-    }, []);
-
-    useEffect(() => {
-      if (!ref || !reactiveStore.current) {
-        return;
-      }
-      (ref as MutableRefObject<HMSPrebuiltRefType>).current = { ...reactiveStore.current };
-    }, [ref]);
-
-    useEffect(() => {
-      // leave room when component unmounts
-      return () => {
-        reactiveStore?.current?.hmsActions.leave();
-      };
-    }, []);
-
-    const endpointsObj = endpoints as
-      | {
-          init: string;
-          tokenByRoomCode: string;
-          roomLayout: string;
-          event: string;
-        }
-      | undefined;
-    const tokenByRoomCodeEndpoint = endpointsObj?.tokenByRoomCode;
-    const initEndpoint = endpointsObj?.init;
-    const eventEndpoint = endpointsObj?.event;
-    const roomLayoutEndpoint = endpointsObj?.roomLayout;
-
-    const overrideLayout: Partial<Layout> = {
-      logo,
-      themes,
-      typography,
-      screens,
-    };
-
-    if (!roomCode && !authToken) {
-      console.error(`
-          HMSPrebuilt can be initialised by providing: 
-          either "roomCode" or "authToken".
-          Please check if you are providing the above values for initialising prebuilt.
-        `);
-      throw Error('Incorrect initializing params for HMSPrebuilt component');
-    }
-
-    if (!hydrated) {
-      return null;
-    }
-
-    globalStyles();
-
-    return (
-      <ErrorBoundary>
-        <HMSPrebuiltContext.Provider
-          value={{
-            roomCode,
-            containerSelector,
-            onLeave,
-            onJoin,
-            userName,
-            userId,
-            endpoints: {
-              tokenByRoomCode: tokenByRoomCodeEndpoint,
-              init: initEndpoint,
-              roomLayout: roomLayoutEndpoint,
-              event: eventEndpoint,
-            },
-          }}
-        >
-          <HMSRoomProvider
-            isHMSStatsOn={FeatureFlags.enableStatsForNerds}
-            actions={reactiveStore.current?.hmsActions}
-            store={reactiveStore.current?.hmsStore}
-            notifications={reactiveStore.current?.hmsNotifications}
-            stats={reactiveStore.current?.hmsStats}
-            leaveOnUnload={leaveOnUnload}
-          >
-            <RoomLayoutProvider roomLayoutEndpoint={roomLayoutEndpoint} overrideLayout={overrideLayout}>
-              <RoomLayoutContext.Consumer>
-                {data => {
-                  const layout = data?.layout;
-                  const theme: Theme = layout?.themes?.[0] || ({} as Theme);
-                  const { typography } = layout || {};
-                  let fontFamily = ['sans-serif'];
-                  if (typography?.font_family) {
-                    fontFamily = [`${typography?.font_family}`, ...fontFamily];
-                  }
-
-                  return (
-                    <HMSThemeProvider
-                      // issue is with stitches caching the theme using the theme name / class
-                      // no updates to the themes are fired if the name is same.
-                      // TODO: cache the theme and do deep check to trigger name change in the theme
-                      themeType={`${theme.name}-${Date.now()}`}
-                      theme={{
-                        //@ts-ignore: Prebuilt theme to match stitches theme
-                        colors: theme.palette,
-                        fonts: {
-                          //@ts-ignore: font list to match token types of stitches
-                          sans: fontFamily,
-                        },
-                      }}
-                    >
-                      <PIPProvider>
-                        <Init />
-                        <DialogContainerProvider dialogContainerSelector={containerSelector}>
-                          <Box
-                            className={DEFAULT_PORTAL_CONTAINER.slice(1)} // Skips the '.' in the selector
-                            css={{
-                              bg: '$background_dim',
-                              size: '100%',
-                              lineHeight: '1.5',
-                              '-webkit-text-size-adjust': '100%',
-                              position: 'relative',
-                            }}
-                          >
-                            <AppRoutes
-                              authTokenByRoomCodeEndpoint={tokenByRoomCodeEndpoint}
-                              defaultAuthToken={authToken}
-                            />
-                          </Box>
-                        </DialogContainerProvider>
-                      </PIPProvider>
-                    </HMSThemeProvider>
-                  );
-                }}
-              </RoomLayoutContext.Consumer>
-            </RoomLayoutProvider>
-          </HMSRoomProvider>
-        </HMSPrebuiltContext.Provider>
-      </ErrorBoundary>
-    );
-  },
-);
-
-HMSPrebuilt.displayName = 'HMSPrebuilt';
-
-const AppStates = ({ activeState }: { activeState: PrebuiltStates }) => {
-  const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
-  const { isLeaveScreenEnabled } = useRoomLayoutLeaveScreen();
-  useAutoStartStreaming();
-
-  return match({ activeState, isPreviewScreenEnabled, isLeaveScreenEnabled })
-    .with({ activeState: PrebuiltStates.PREVIEW, isPreviewScreenEnabled: true }, () => <PreviewScreen />)
-    .with({ activeState: PrebuiltStates.LEAVE, isLeaveScreenEnabled: true }, () => <LeaveScreen />)
-    .otherwise(() => <ConferenceScreen />);
-};
-
-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;
-};
-
-function AppRoutes({
-  authTokenByRoomCodeEndpoint,
-  defaultAuthToken,
-}: {
-  authTokenByRoomCodeEndpoint?: string;
-  defaultAuthToken?: string;
-}) {
-  const roomLayout = useRoomLayout();
-  const isNotificationsDisabled = useIsNotificationDisabled();
-  const { activeState, rejoin } = useAppStateManager();
-  return (
-    <AppStateContext.Provider value={{ rejoin }}>
-      <>
-        {activeState !== PrebuiltStates.LEAVE && <AppData />}
-        <ToastContainer />
-        <Notifications />
-        <MwebLandscapePrompt />
-        <Sheet />
-        <BackSwipe />
-        {!isNotificationsDisabled && <FlyingEmoji />}
-        <RemoteStopScreenshare />
-        <KeyboardHandler />
-        <AuthToken
-          authTokenByRoomCodeEndpoint={authTokenByRoomCodeEndpoint}
-          defaultAuthToken={defaultAuthToken}
-          activeState={activeState}
-        />
-        {roomLayout && activeState && <AppStates activeState={activeState} />}
-      </>
-    </AppStateContext.Provider>
-  );
-}

package/src/Prebuilt/AppContext.tsx

@@ -1,33 +0,0 @@
-import React, { useContext } from 'react';
-// @ts-ignore
-import { DEFAULT_PORTAL_CONTAINER } from './common/constants';
-
-type HMSPrebuiltContextType = {
-  roomCode: string;
-  userName?: string;
-  userId?: string;
-  containerSelector: string;
-  endpoints?: Record<string, string | undefined>;
-  onLeave?: () => void;
-  onJoin?: () => void;
-};
-
-export const HMSPrebuiltContext = React.createContext<HMSPrebuiltContextType>({
-  roomCode: '',
-  userName: '',
-  userId: '',
-  containerSelector: DEFAULT_PORTAL_CONTAINER,
-  endpoints: {},
-  onLeave: undefined,
-  onJoin: 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;
-};