@100mslive/roomkit-react 0.4.2 → 0.4.3-alpha.1

package/src/Tabs/Tabs.stories.tsx

@@ -1,77 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Box } from '../Layout';
-import { Text } from '../Text';
-import { Tabs } from '.';
-
-export default {
-  title: 'UI Components/Tabs',
-  component: Tabs.Root,
-  argTypes: {
-    value: { control: { type: 'text' }, defaultValue: 'tab1' },
-    onValueChange: { action: { type: 'click' } },
-    orientation: { options: ['horizontal', 'vertical'], defaultValue: 'horizontal', control: { type: 'select' } },
-  },
-} as ComponentMeta<typeof Tabs.Root>;
-
-const Template: ComponentStory<typeof Tabs.Root> = ({
-  value: propValue = '',
-  onValueChange: propOnValueChange,
-  ...rest
-}) => {
-  const [value, setValue] = useState('tab1');
-
-  const handleOnValueChange = useCallback(
-    (value: string) => {
-      setValue(value);
-      if (propOnValueChange) {
-        propOnValueChange(value);
-      }
-    },
-    [propOnValueChange],
-  );
-
-  useEffect(() => {
-    handleOnValueChange(propValue);
-    if (propOnValueChange) {
-      propOnValueChange(value);
-    }
-  }, [handleOnValueChange, propOnValueChange, propValue, value]);
-
-  return (
-    <Tabs.Root
-      css={{
-        gap: '8px',
-        maxWidth: '500px',
-        width: 'max-content',
-        '&[data-orientation="horizontal"]': { flexDirection: 'column' },
-      }}
-      value={value}
-      onValueChange={handleOnValueChange}
-      {...rest}
-    >
-      <Tabs.List
-        aria-label="tabs example"
-        css={{ bg: '$background_dim', r: '$1', '&[data-orientation="vertical"]': { flexDirection: 'column' } }}
-      >
-        <Tabs.Trigger value="tab1">One</Tabs.Trigger>
-        <Tabs.Trigger value="tab2">Two</Tabs.Trigger>
-        <Tabs.Trigger value="tab3">Three</Tabs.Trigger>
-      </Tabs.List>
-      <Box css={{ r: '$1', bg: '$surface_brighter' }}>
-        <Tabs.Content value="tab1">
-          <Text>Tab one content</Text>
-        </Tabs.Content>
-        <Tabs.Content value="tab2">
-          <Text>Tab two content</Text>
-        </Tabs.Content>
-        <Tabs.Content value="tab3">
-          <Text>Tab three content</Text>
-        </Tabs.Content>
-      </Box>
-    </Tabs.Root>
-  );
-};
-
-export const Example = Template.bind({});
-Example.storyName = 'Tabs';

package/src/Text/Text.stories.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Text, textVariants } from './Text';
-
-export default {
-  title: 'UI Components/Text',
-  component: Text,
-  argTypes: {
-    variant: {
-      control: {
-        type: 'select',
-        options: Object.keys(textVariants),
-      },
-    },
-  },
-} as ComponentMeta<typeof Text>;
-
-const Template: ComponentStory<typeof Text> = args => <Text {...args}>The Evil Rabbit jumps.</Text>;
-
-export const Playground = Template.bind({});
-Playground.storyName = 'Text';

package/src/Theme/Theme.stories.mdx

@@ -1,8 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-import ThemeStory from './ThemeStory';
-
-<Meta title="Theme" />
-
-## Theme
-
-<ThemeStory />

package/src/Theme/ThemeStory.jsx

@@ -1,56 +0,0 @@
-import React from 'react';
-import { ColorItem, ColorPalette } from '@storybook/addon-docs';
-
-const ThemeStory = () => {
-  return (
-    <ColorPalette>
-      <ColorItem
-        title="theme.color.brand"
-        subtitle="Brand Variants"
-        colors={{ brandLight: '#74AAFF', primary_default: '#2F80FF', brandDark: '#0B326F', brandDisabled: '#D8E7FF' }}
-      />
-      <ColorItem
-        title="theme.color.text"
-        subtitle="Text Variants"
-        colors={{
-          on_surface_high: 'rgba(250, 252, 255, 0.9)',
-          on_surface_medium: 'rgba(215, 227, 245, 0.8)',
-          on_surface_low: 'rgba(164, 176, 193, 0.5)',
-        }}
-      />
-      <ColorItem
-        title="theme.color.surface"
-        subtitle="Surface Variants"
-        colors={{
-          surface_dimmer: '#06080A',
-          surface_dim: '#080B0F',
-          surface_default: '#0B0F15',
-          surface_bright: '#12161C',
-          surface_brighter: '#1F2228',
-        }}
-      />
-      <ColorItem
-        title="theme.color.primary"
-        subtitle="Primary Variants"
-        colors={{
-          primary_bright: '#6DA6FF',
-          primary_default: '#2F80FF',
-          primary_dim: '#184080',
-          primary_disabled: '#D8E7FF',
-        }}
-      />
-      <ColorItem
-        title="theme.color.secondary"
-        subtitle="Secondary Variants"
-        colors={{
-          secondary_bright: '#505863',
-          secondary_default: '#657080',
-          secondary_dim: '#1E2329',
-          secondary_disabled: '#DCE4EF',
-        }}
-      />
-    </ColorPalette>
-  );
-};
-
-export default ThemeStory;

package/src/Toast/AppToast.stories.tsx

@@ -1,56 +0,0 @@
-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

@@ -1,19 +0,0 @@
-# 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

@@ -1,57 +0,0 @@
-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/Tooltip/Tooltip.stories.tsx

@@ -1,62 +0,0 @@
-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: '$on_primary_high' }}>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/Video/UseVideo.mdx

@@ -1,22 +0,0 @@
-## 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

@@ -1,26 +0,0 @@
-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

@@ -1,24 +0,0 @@
-## `<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

@@ -1,27 +0,0 @@
-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/VideoList/VideoList.stories.tsx

@@ -1,92 +0,0 @@
-import React, { useState } from 'react';
-import { ComponentStory } from '@storybook/react';
-import { selectPeers, useHMSStore, useVideoList } from '@100mslive/react-sdk';
-import { MicOffIcon } from '@100mslive/react-icons';
-import { Video } from '../Video/Video';
-import { StyledVideoTile } from '../VideoTile';
-import { StyledVideoList } from './StyledVideoList';
-import { getLeft } from './videoListUtils';
-
-const VideoListMeta = {
-  title: 'Video/VideoList',
-};
-
-export default VideoListMeta;
-
-const VideoTile: React.FC<{ width: number; height: number; trackId: string; name: string }> = ({
-  width,
-  height,
-  trackId,
-  name,
-}) => {
-  return (
-    <StyledVideoTile.Root css={{ width, height }}>
-      <StyledVideoTile.Container>
-        <Video trackId={trackId} />
-        <StyledVideoTile.Info>{name}</StyledVideoTile.Info>
-        <StyledVideoTile.AudioIndicator>
-          <MicOffIcon />
-        </StyledVideoTile.AudioIndicator>
-      </StyledVideoTile.Container>
-    </StyledVideoTile.Root>
-  );
-};
-
-interface VideoListProps {
-  maxTileCount: number;
-  aspectRatio: {
-    width: number;
-    height: number;
-  };
-}
-
-const VideoListStory: React.FC<VideoListProps> = ({ maxTileCount, aspectRatio }) => {
-  const peers = useHMSStore(selectPeers);
-  const [page] = useState(0);
-  const { ref, pagesWithTiles } = useVideoList({
-    peers,
-    offsetY: 50,
-    maxTileCount,
-    aspectRatio,
-  });
-  return (
-    <StyledVideoList.Root css={{ height: '100vh', width: '100%' }} ref={ref}>
-      <StyledVideoList.Container>
-        {pagesWithTiles && pagesWithTiles.length > 0
-          ? pagesWithTiles.map((tiles, pageNo) => (
-              <StyledVideoList.View
-                css={{
-                  left: getLeft(pageNo, page),
-                  transition: 'left 0.3s ease-in-out',
-                }}
-              >
-                {tiles.map((tile, i) =>
-                  tile.track?.source === 'screen' ? null : (
-                    <VideoTile
-                      key={tile.track?.id || tile.peer.id + i}
-                      width={tile.width}
-                      height={tile.height}
-                      trackId={tile.track?.id || ''}
-                      name={tile.peer.name}
-                    />
-                  ),
-                )}
-              </StyledVideoList.View>
-            ))
-          : null}
-      </StyledVideoList.Container>
-    </StyledVideoList.Root>
-  );
-};
-
-const Template: ComponentStory<typeof VideoListStory> = args => <VideoListStory {...args} />;
-
-export const Example = Template.bind({});
-
-Example.args = {
-  maxTileCount: 2,
-  aspectRatio: {
-    width: 2,
-    height: 1,
-  },
-};

package/src/VideoTile/VideoTile.mdx

@@ -1,28 +0,0 @@
-## VideoTile
-
-import { Story } from '@storybook/addon-docs';
-
-Building a `<VideoTile />` component is all about composing styled/unstyled component provided by `../`. We will create a basic videotile by composing `StyledVideoTile`.
-
-```jsx
-import { StyledVideoTile, Video } from '../';
-
-const VideoTileStory = () => {
-  return (
-    // width,height of the tile
-    <StyledVideoTile.Root css={{ width: 500, height: 300 }}>
-      <StyledVideoTile.Container>
-        {/* trackId of the peer */}
-        <Video trackId="1" />
-        {/* Meta info */}
-        <StyledVideoTile.Info>Deepankar</StyledVideoTile.Info>
-        <StyledVideoTile.AudioIndicator>
-          <MicOffIcon />
-        </StyledVideoTile.AudioIndicator>
-      </StyledVideoTile.Container>
-    </StyledVideoTile.Root>
-  );
-};
-```
-
-<Story id="video-videotile--example" />

package/src/VideoTile/VideoTile.stories.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import { MicOffIcon } from '@100mslive/react-icons';
-import { Video } from '../Video/Video';
-import { StyledVideoTile } from './StyledVideoTile';
-import VideoTileDocs from './VideoTile.mdx';
-
-const VideoTileMeta = {
-  title: 'Video/VideoTile',
-  parameters: {
-    docs: {
-      page: VideoTileDocs,
-    },
-  },
-};
-
-export default VideoTileMeta;
-
-const VideoTileStory = () => {
-  return (
-    <StyledVideoTile.Root css={{ width: 500, height: 300 }}>
-      <StyledVideoTile.Container>
-        <Video trackId="1" />
-        <StyledVideoTile.Info>Deepankar</StyledVideoTile.Info>
-        <StyledVideoTile.AudioIndicator>
-          <MicOffIcon />
-        </StyledVideoTile.AudioIndicator>
-      </StyledVideoTile.Container>
-    </StyledVideoTile.Root>
-  );
-};
-
-export const Example = VideoTileStory.bind({});