@100mslive/roomkit-react 0.1.0

package/src/Toast/AppToast.stories.tsx

@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+import { ComponentStory } from '@storybook/react';
+import { Button } from '../Button';
+import { Toast } from './Toast';
+import mdx from './Toast.mdx';
+
+const ReactToastStory = ({ ...props }) => {
+  return (
+    <Toast.Provider>
+      <ReactToastComponent {...props} />
+    </Toast.Provider>
+  );
+};
+
+const ToastMeta = {
+  title: 'UI Components/Toast',
+  component: ReactToastStory,
+  argTypes: {
+    onClick: { action: 'clicked' },
+    open: { control: 'boolean' },
+    variant: { control: 'select', options: ['error', 'standard', 'warning', 'success', ''] },
+  },
+  args: {
+    variant: 'standard',
+    title: 'Hello from Toast Component',
+    description: 'Hello from toast',
+    isClosable: true,
+  },
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+};
+
+const ReactToastComponent: ComponentStory<typeof ReactToastStory> = args => {
+  const [isOpen, setIsOpen] = useState(false);
+  return (
+    <>
+      <Button onClick={() => setIsOpen(!isOpen)}>{isOpen ? 'Close' : 'Launch'} Toast</Button>
+      <Toast.HMSToast
+        title="This is a title"
+        description="This is a toast using the HMSToast component."
+        open={isOpen}
+        isClosable={true}
+        onOpenChange={o => setIsOpen(o)}
+        {...args}
+      />
+      <Toast.Viewport css={{ bottom: '$24' }} />
+    </>
+  );
+};
+
+export const Playground: ComponentStory<typeof ReactToastStory> = ReactToastStory.bind({});
+Playground.storyName = 'HMSToast';
+export default ToastMeta;

package/src/Toast/Toast.mdx

@@ -0,0 +1,19 @@
+# Replacing DocsPage with custom `MDX` content
+
+This file is a documentation-only `MDX`file to customize Storybook's [DocsPage](https://storybook.js.org/docs/react/writing-docs/docs-page#replacing-docspage).
+
+It can be further expanded with your own code snippets and include specific information related to your stories.
+
+For example:
+
+import { Story } from '@storybook/addon-docs';
+
+## Dialog
+
+Dialog is an hover component used to have a focus-mode like UI for users.
+
+- [Example](#example)
+
+### Example
+
+<Story id="dialog--example" />

package/src/Toast/Toast.stories.tsx

@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import { ComponentStory } from '@storybook/react';
+import { Button } from '../Button';
+import { Flex } from '../Layout';
+import { Text } from '../Text';
+import { Toast } from './Toast';
+import ToastDocs from './Toast.mdx';
+
+const ToastStory = ({ ...props }) => {
+  return (
+    <Toast.Provider>
+      <ToastComponent {...props} />
+    </Toast.Provider>
+  );
+};
+
+const ToastMeta = {
+  title: 'UI Components/Toast',
+  component: ToastStory,
+  argTypes: {
+    onClick: { action: 'clicked' },
+    icon: { control: 'boolean' },
+  },
+  parameters: {
+    docs: {
+      page: ToastDocs,
+    },
+  },
+};
+
+const ToastComponent = ({ ...props }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  return (
+    <>
+      <Button onClick={() => setIsOpen(!isOpen)}>{isOpen ? 'Close' : 'Launch'} Toast</Button>
+      <Toast.Root open={isOpen} onOpenChange={o => setIsOpen(o)} {...props}>
+        <Toast.Title asChild>
+          <Flex align="center" css={{ gap: '$4', flex: '1 1 0', minWidth: 0 }}>
+            <Text variant="sub1" css={{ c: 'inherit', wordBreak: 'break-word' }}>
+              Hello from toast.
+            </Text>
+            <Toast.Close />
+          </Flex>
+        </Toast.Title>
+        <Toast.Description>
+          This is a custom toast component using primitives with controlled open and close state using React state.
+        </Toast.Description>
+      </Toast.Root>
+      <Toast.Viewport css={{ bottom: '$24' }} />
+    </>
+  );
+};
+export const Example: ComponentStory<typeof ToastStory> = ToastStory.bind({});
+
+Example.storyName = 'Toast';
+
+export default ToastMeta;

package/src/Toast/Toast.tsx

@@ -0,0 +1,168 @@
+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: '$surfaceDefault',
+  p: '$10',
+  display: 'flex',
+  flexDirection: 'column',
+  position: 'relative',
+  fontFamily: '$sans',
+  border: 'solid $space$px $borderLight',
+  overflow: 'hidden',
+  ...toastAnimation,
+  '@sm': {
+    p: '$8 $11',
+  },
+  variants: {
+    variant: {
+      standard: getToastVariant('$secondaryDefault'),
+      warning: getToastVariant('$warning'),
+      error: getToastVariant('$error'),
+      success: getToastVariant('$success'),
+    },
+  },
+  defaultVariants: {
+    variant: 'standard',
+  },
+});
+
+const ToastTitle = styled(ToastPrimitives.Title, {
+  fontSize: '$md',
+  color: '$textHighEmp',
+  fontWeight: '$semiBold',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+});
+const ToastDescription = styled(ToastPrimitives.Description, {
+  color: '$textMedEmp',
+});
+const ToastClose = styled(ToastPrimitives.Close, {});
+const ToastAction = styled(ToastPrimitives.Action, {
+  cursor: 'pointer',
+});
+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: '$textMedEmp' }}>
+              {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

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

package/src/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { ComponentMeta } from '@storybook/react';
+import { Flex } from '../Layout';
+import { Text } from '../Text';
+import { alignTooltip, sideTooltip, Tooltip } from './Tooltip';
+
+export default {
+  title: 'UI Components/Tooltip',
+  argTypes: {
+    outlined: { control: 'boolean' },
+    side: { control: 'radio' },
+    align: { control: 'radio' },
+  },
+  args: {
+    outlined: false,
+    side: 'bottom',
+    align: 'center',
+  },
+  component: Tooltip,
+} as ComponentMeta<typeof Tooltip>;
+
+const TooltipStoryWithString = (
+  args: JSX.IntrinsicAttributes & {
+    title?: React.ReactNode;
+    outlined?: boolean | undefined;
+    side?: sideTooltip;
+    align?: alignTooltip;
+  } & { children?: React.ReactNode },
+) => {
+  return (
+    <Flex justify="center" align="center" css={{ w: 800, h: 200 }}>
+      <Tooltip title="This is title" {...args}>
+        <Text>Hover to see Tooltip</Text>
+      </Tooltip>
+    </Flex>
+  );
+};
+
+export const ExampleWithString = TooltipStoryWithString.bind({});
+
+const ExampleTitle = () => {
+  return <h3 style={{ color: '$textPrimary' }}>This is title</h3>;
+};
+
+const TooltipStorywithReactNode = (
+  args: JSX.IntrinsicAttributes & {
+    title?: React.ReactNode;
+    outlined?: boolean | undefined;
+    side?: sideTooltip;
+    align?: alignTooltip;
+  } & { children?: React.ReactNode },
+) => {
+  return (
+    <Flex justify="center" align="center" css={{ w: 800, h: 200 }}>
+      <Tooltip title={<ExampleTitle />} {...args}>
+        <Text>Hover to see tooltip</Text>
+      </Tooltip>
+    </Flex>
+  );
+};
+
+export const ExampleWithReactNode = TooltipStorywithReactNode.bind({});

package/src/Tooltip/Tooltip.tsx

@@ -0,0 +1,79 @@
+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',
+
+  color: '$textHighEmp',
+  backgroundColor: '$surfaceLight',
+  '@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: '$backgroundDark',
+        border: 'solid $space$px $borderLight',
+      },
+    },
+  },
+});
+
+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

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

package/src/Video/UseVideo.mdx

@@ -0,0 +1,22 @@
+## useVideo
+
+For each peer, we’ll render a `<video>` element and a `<div>` element with their name.
+To render the video, we need to call attachVideo method of hmsActions, which accepts a trackId and a DOM element.
+But we have abstracted this implementation inside useVideo hook for ease. This hook will return an object `videoRef` given a video `trackId`. The returned `videoRef` can be used to set on a video element meant to display the video. The hook will take care of attaching and detaching video, and will automatically detach when the video goes out of view to save on bandwidth.
+
+import { Story } from '@storybook/addon-docs';
+
+```jsx
+import { useVideo } from ‘@100mslive/react-sdk’;
+function Peer({ peer }) {
+  const { videoRef } = useVideo({
+    trackId: peer.videoTrack,
+  });
+  return <video ref={videoRef} autoPlay muted playsInline />;
+}
+export default Peer;
+```
+
+> Note that `height` and `width` CSS properties need to be set on the `<video>` element to render the peer's video.
+
+<Story id="rendering-video-video-component--video-example" />

package/src/Video/UseVideo.stories.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { useVideo } from '@100mslive/react-sdk';
+import UseVideoDocs from './UseVideo.mdx';
+import { StyledVideo } from './Video';
+
+const VideoHook = () => {
+  const { videoRef } = useVideo({
+    trackId: '1',
+  });
+  return <StyledVideo ref={videoRef} autoPlay playsInline muted />;
+};
+
+const VideoStories = {
+  title: 'Rendering Video/useVideo hook',
+  component: VideoHook,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  parameters: {
+    docs: {
+      page: UseVideoDocs,
+    },
+  },
+};
+
+export default VideoStories;
+
+export const UseVideoHook = VideoHook.bind({});

package/src/Video/Video.mdx

@@ -0,0 +1,24 @@
+## `<Video />` component
+
+You can directly use `<Video />` all it needs is `trackId` to render the video. This is a headless component to style it you can pass only valid css styles and className.
+
+```jsx
+import { useVideo } from '@100mslive/react-sdk';
+import { Video } from '../';
+
+const VideoComponent = () => {
+  return <Video trackId="2" />;
+};
+```
+
+## Styled Video component
+
+We use Stitches as our styling solution which provides a `css` prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values.
+
+Here's an example:
+
+```jsx
+const StyledVideoComponent = () => {
+  return <Video css={{ width: 500, height: 300 }} trackId="2" />;
+};
+```

package/src/Video/Video.stories.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Video } from './Video';
+import VideoDocs from './Video.mdx';
+
+const VideoComponent = () => {
+  return <Video trackId="2" />;
+};
+
+const StyledVideoComponent = () => {
+  return <Video css={{ width: 500, height: 300 }} trackId="2" />;
+};
+
+const VideoStories = {
+  title: 'Rendering Video/Video Component',
+  component: VideoComponent,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  parameters: {
+    docs: {
+      page: VideoDocs,
+    },
+  },
+};
+
+export default VideoStories;
+
+export const VideoExample = VideoComponent.bind({});
+export const StyledVideoExample = StyledVideoComponent.bind({});

package/src/Video/Video.tsx

@@ -0,0 +1,61 @@
+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: '$tileBg',
+  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 autoPlay muted playsInline controls={false} ref={videoRef} {...props} />;
+};

package/src/Video/index.tsx

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

package/src/VideoList/StyledVideoList.tsx

@@ -0,0 +1,39 @@
+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,
+};