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

package/src/Sheet/Sheet.stories.tsx

@@ -1,103 +0,0 @@
-import React from 'react';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { CrossIcon, InfoIcon } from '@100mslive/react-icons';
-import { Button } from '../Button';
-import { HorizontalDivider } from '../Divider';
-import { Fieldset } from '../Fieldset';
-import { Input } from '../Input';
-import { Label } from '../Label';
-import { Box, Flex } from '../Layout';
-import { Text } from '../Text';
-import { Sheet } from './Sheet';
-import SheetDocs from './Sheet.mdx';
-
-export default {
-  title: 'UI Components/Sheet',
-  component: Sheet.Root,
-  argTypes: { onClick: { action: 'clicked' } },
-  parameters: {
-    docs: {
-      page: SheetDocs,
-    },
-  },
-} as ComponentMeta<typeof Sheet.Root>;
-
-//👇 We create a “template” of how args map to rendering
-const Template: ComponentStory<typeof Sheet.Root> = () => (
-  <Sheet.Root>
-    <Sheet.Trigger asChild>
-      <Button variant="standard">Open Sheet</Button>
-    </Sheet.Trigger>
-    <Sheet.Content>
-      <Sheet.Title css={{ p: '$10' }}>
-        <Flex direction="row" justify="between" css={{ w: '100%' }}>
-          <Flex justify="start" align="center" gap="3">
-            <InfoIcon />
-            <Text variant="h5">Sheet Heading</Text>
-          </Flex>
-          <Sheet.Close css={{ color: 'white' }}>
-            <CrossIcon />
-          </Sheet.Close>
-        </Flex>
-      </Sheet.Title>
-      <HorizontalDivider />
-      <Box as="div" css={{ p: '$10', overflowY: 'scroll', maxHeight: '70vh' }}>
-        <Text variant="body1" css={{ c: '$on_surface_medium' }}>
-          Body 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-          dolore magna aliqua. Ut enim ad minim veniam,im venitetur adipiscing elit, sed do eiusmod tempor incididunt ut
-          labore et dolore magna aliqua. Ut enim ad minim veniam,im veni
-        </Text>
-        <Fieldset>
-          <Label htmlFor="name">Name</Label>
-          <Input id="name" defaultValue="Amar" css={{ w: '50%' }} />
-        </Fieldset>
-        <Fieldset>
-          <Label htmlFor="username">Username</Label>
-          <Input id="username" defaultValue="@amar1995" css={{ w: '50%' }} />
-        </Fieldset>
-        <Text variant="body1" css={{ c: '$on_surface_medium' }}>
-          Body 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-          dolore magna aliqua. Ut enim ad minim veniam,im venitetur adipiscing elit, sed do eiusmod tempor incididunt ut
-          labore et dolore magna aliqua. Ut enim ad minim veniam,im veni
-        </Text>
-        <Fieldset>
-          <Label htmlFor="name">Name</Label>
-          <Input id="name" defaultValue="Amar" css={{ w: '50%' }} />
-        </Fieldset>
-        <Fieldset>
-          <Label htmlFor="username">Username</Label>
-          <Input id="username" defaultValue="@amar1995" css={{ w: '50%' }} />
-        </Fieldset>
-        <Text variant="body1" css={{ c: '$on_surface_medium' }}>
-          Body 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-          dolore magna aliqua. Ut enim ad minim veniam,im venitetur adipiscing elit, sed do eiusmod tempor incididunt ut
-          labore et dolore magna aliqua. Ut enim ad minim veniam,im veni
-        </Text>
-        <Fieldset>
-          <Label htmlFor="name">Name</Label>
-          <Input id="name" defaultValue="Amar" css={{ w: '50%' }} />
-        </Fieldset>
-        <Fieldset>
-          <Label htmlFor="username">Username</Label>
-          <Input id="username" defaultValue="@amar1995" css={{ w: '50%' }} />
-        </Fieldset>
-        <Text variant="body1" css={{ c: '$on_surface_medium' }}>
-          Body 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-          dolore magna aliqua. Ut enim ad minim veniam,im venitetur adipiscing elit, sed do eiusmod tempor incididunt ut
-          labore et dolore magna aliqua. Ut enim ad minim veniam,im veni
-        </Text>
-        <Fieldset>
-          <Label htmlFor="name">Name</Label>
-          <Input id="name" defaultValue="Amar" css={{ w: '50%' }} />
-        </Fieldset>
-        <Fieldset>
-          <Label htmlFor="username">Username</Label>
-          <Input id="username" defaultValue="@amar1995" css={{ w: '50%' }} />
-        </Fieldset>
-      </Box>
-    </Sheet.Content>
-  </Sheet.Root>
-);
-
-export const Example = Template.bind({});
-Example.storyName = 'Sheet';

package/src/Slider/Slider.stories.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Box } from '..';
-import { Slider } from './Slider';
-
-export default {
-  title: 'UI Components/Slider',
-  component: Slider,
-} as ComponentMeta<typeof Slider>;
-
-const Template: ComponentStory<typeof Slider> = () => {
-  const [volume, setVolume] = React.useState<number>(25);
-  return (
-    <Box css={{ width: '$80' }}>
-      <Slider defaultValue={[25]} step={1} value={[volume]} onValueChange={e => setVolume(e[0])} />
-    </Box>
-  );
-};
-
-export const Primary = Template.bind({});
-Primary.storyName = 'Slider';

package/src/Switch/Switch.mdx

@@ -1,11 +0,0 @@
-import { Story } from '@storybook/addon-docs';
-
-## Switch
-
-Switch is the primary component. It has 2 possible states i.e. on and off. It accepts states as checked prop and event listener of onCheckedChange.
-
-- [Index](#index)
-
-### Index
-
-<Story id="Switch--index" />

package/src/Switch/Switch.stories.tsx

@@ -1,46 +0,0 @@
-import React, { useEffect } from 'react';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Flex } from '../Layout';
-import { Switch } from './Switch';
-import SwitchDocs from './Switch.mdx';
-
-export default {
-  title: 'UI Components/Switch',
-  component: Switch,
-  argTypes: {
-    asChild: { control: false },
-  },
-  args: {
-    disabled: false,
-    checked: true,
-    required: false,
-  },
-  parameters: {
-    docs: {
-      page: SwitchDocs,
-    },
-  },
-} as ComponentMeta<typeof Switch>;
-
-//👇 We create a “template” of how args map to rendering
-const Template: ComponentStory<typeof Switch> = ({ checked: initialChecked, ...args }) => {
-  const [checked, onCheckedChange] = React.useState(false);
-  useEffect(() => {
-    onCheckedChange(!!initialChecked);
-  }, [initialChecked]);
-  return (
-    <Flex align="center" justify="center" css={{ w: '$20', h: '$20' }}>
-      <Switch checked={checked} {...args} onCheckedChange={onCheckedChange} />
-    </Flex>
-  );
-};
-
-export const Playground = Template.bind({});
-
-Playground.storyName = 'Switch';
-Playground.args = {
-  checked: false,
-  onCheckedChange: () => {
-    return;
-  },
-};

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({});