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

package/src/Divider/VerticalDivider.stories.tsx

@@ -1,40 +0,0 @@
-import React from 'react';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { AddIcon } from '@100mslive/react-icons';
-import { Button } from '../Button';
-import { Flex } from '../Layout';
-import { Text } from '../Text';
-import { VerticalDivider } from '.';
-
-export default {
-  title: 'UI Components/Divider',
-  component: VerticalDivider,
-  argTypes: {
-    ref: { table: { disable: true }, control: { type: null } },
-    as: { table: { disable: true }, control: { type: null } },
-    css: { control: { type: 'object' } },
-    space: { defaultValue: 1, control: { type: 'number', min: 1, max: 4 } },
-  },
-} as ComponentMeta<typeof VerticalDivider>;
-
-const VerticalDividerComponent: ComponentStory<typeof VerticalDivider> = ({ space, css }) => {
-  return (
-    <Flex align="center" css={{ position: 'absolute', left: '$10' }}>
-      <Button icon variant="primary">
-        <AddIcon />
-        <Text as="span" variant="button" css={{ c: 'white' }}>
-          Add Stuff
-        </Text>
-      </Button>
-      <VerticalDivider space={space} css={{ bg: '$on_primary_high', ...css }} />
-      <Button icon variant="danger">
-        <AddIcon />
-        <Text as="span" variant="button" css={{ c: 'white' }}>
-          Add Another Stuff
-        </Text>
-      </Button>
-    </Flex>
-  );
-};
-
-export const Vertical = VerticalDividerComponent.bind({});

package/src/Dropdown/Dropdown.stories.tsx

@@ -1,94 +0,0 @@
-import React from 'react';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { ChevronDownIcon, ChevronUpIcon, PeopleIcon } from '@100mslive/react-icons';
-import { Avatar, Box, Flex, Text, textEllipsis } from '..';
-import { Dropdown } from './Dropdown';
-
-export default {
-  title: 'UI Components/Dropdown',
-  component: Dropdown.Content,
-} as ComponentMeta<typeof Dropdown.Content>;
-
-const participants = [
-  { id: '231313', name: 'Simbrella', roleName: 'Student' },
-  { id: '768456', name: 'Jonty', roleName: 'Student' },
-];
-
-const Template: ComponentStory<typeof Dropdown.Content> = () => {
-  const [open, setOpen] = React.useState(true);
-
-  return (
-    <Dropdown.Root
-      open
-      onOpenChange={() => {
-        setOpen(!open);
-      }}
-    >
-      <Dropdown.Trigger asChild>
-        <Box
-          css={{
-            color: '$on_surface_high',
-            borderRadius: '$1',
-            border: '1px solid $border_default',
-            padding: '$4 $4',
-            width: '$80',
-          }}
-        >
-          <Box css={{ display: 'flex', justifyContent: 'space-between' }}>
-            <Box css={{ display: 'flex', gap: '$4', mr: '$4' }}>
-              <PeopleIcon />
-              <Text variant="md">2</Text>
-            </Box>
-            <Flex>{open ? <ChevronUpIcon /> : <ChevronDownIcon />}</Flex>
-          </Box>
-        </Box>
-      </Dropdown.Trigger>
-      {open && (
-        <Dropdown.Content sideOffset={5} align="start" css={{ height: 'auto', maxHeight: '$96' }}>
-          <Dropdown.Group
-            css={{
-              h: 'auto',
-              flexDirection: 'column',
-              flexWrap: 'wrap',
-              alignItems: 'flex-start',
-            }}
-          >
-            <Dropdown.Label css={{ w: 'initial ' }}>
-              <Text variant="md" data-testid="role_student">
-                {'Students '}({participants.length})
-              </Text>
-            </Dropdown.Label>
-            {participants.map((peer, i) => (
-              <Dropdown.Item css={{ justifyContent: 'space-between' }} data-testid={`participant_${i}`}>
-                <Flex>
-                  <Box css={{ width: '$16' }}>
-                    <Avatar
-                      name={peer.name}
-                      css={{
-                        position: 'unset',
-                        transform: 'unset',
-                        mr: '$4',
-                        fontSize: '$sm',
-                      }}
-                    />
-                  </Box>
-                  <Flex direction="column">
-                    <Text variant="md" css={{ ...textEllipsis(150), fontWeight: '$semiBold' }}>
-                      {peer.name}
-                    </Text>
-                    <Text variant="sub2" css={{ color: '$on_surface_medium' }}>
-                      {peer.roleName}
-                    </Text>
-                  </Flex>
-                </Flex>
-              </Dropdown.Item>
-            ))}
-          </Dropdown.Group>
-        </Dropdown.Content>
-      )}
-    </Dropdown.Root>
-  );
-};
-
-export const DropdownContent = Template.bind({});
-DropdownContent.storyName = 'Dropdown';

package/src/Fieldset/Fieldset.stories.tsx

@@ -1,29 +0,0 @@
-import React from 'react';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Input } from '../Input';
-import { Label } from '../Label';
-import { Text } from '../Text';
-import { Fieldset } from '.';
-
-export default {
-  title: 'UI Components/Fieldset',
-  component: Fieldset,
-  argTypes: {
-    ref: { table: { disable: true } },
-    as: { table: { disable: true } },
-  },
-} as ComponentMeta<typeof Fieldset>;
-
-const Template: ComponentStory<typeof Fieldset> = ({ css }) => {
-  return (
-    <Fieldset css={css} style={{ width: '70%' }}>
-      <Label htmlFor="name">
-        <Text variant="sub2">Input Label</Text>
-      </Label>
-      <Input id="name" placeholder="Some random input" css={{ w: '80%' }} />
-    </Fieldset>
-  );
-};
-
-export const Example = Template.bind({});
-Example.storyName = 'Fieldset';

package/src/Footer/Footer.stories.tsx

@@ -1,61 +0,0 @@
-import React from 'react';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import {
-  BrbIcon,
-  ChatIcon,
-  EndStreamIcon,
-  MicOnIcon,
-  PipIcon,
-  ShareScreenIcon,
-  VideoOnIcon,
-} from '@100mslive/react-icons';
-import { Button } from '../Button';
-import { IconButton } from '../IconButton';
-import { Footer } from '.';
-
-export default {
-  title: 'UI Components/Footer',
-  component: Footer.Root,
-  argTypes: {
-    as: { table: { disable: true } },
-    css: { control: { type: 'object' } },
-  },
-} as ComponentMeta<typeof Footer.Root>;
-
-const Template: ComponentStory<typeof Footer.Root> = ({ css }) => {
-  return (
-    <Footer.Root css={css}>
-      <Footer.Left>
-        <IconButton>
-          <MicOnIcon />
-        </IconButton>
-        <IconButton>
-          <VideoOnIcon />
-        </IconButton>
-      </Footer.Left>
-      <Footer.Center>
-        <IconButton>
-          <ShareScreenIcon />
-        </IconButton>
-        <IconButton>
-          <PipIcon />
-        </IconButton>
-        <Button>
-          <EndStreamIcon />
-          End Stream
-        </Button>
-      </Footer.Center>
-      <Footer.Right>
-        <IconButton>
-          <BrbIcon />
-        </IconButton>
-        <IconButton>
-          <ChatIcon />
-        </IconButton>
-      </Footer.Right>
-    </Footer.Root>
-  );
-};
-
-export const Example = Template.bind({});
-Example.storyName = 'Footer';

package/src/Icons/Icons.stories.mdx

@@ -1,10 +0,0 @@
-import { Meta, Title, IconGallery, IconItem } from '@storybook/addon-docs';
-import IconsList from './IconsList';
-
-<Meta title="Iconography" />
-
-## Iconography
-
-World's first Video-first Icon Library 😎
-
-<IconsList />

package/src/Icons/IconsList.jsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import { IconGallery, IconItem } from '@storybook/addon-docs';
-import * as icons from '@100mslive/react-icons';
-
-const IconsList = () => {
-  return (
-    <IconGallery>
-      {Object.entries(icons).map(([name, Component]) => (
-        <IconItem name={name} key={name}>
-          <Component />
-        </IconItem>
-      ))}
-    </IconGallery>
-  );
-};
-
-export default IconsList;

package/src/Input/Input.stories.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Input } from '.';
-
-export default {
-  title: 'UI Components/Input',
-  component: Input,
-  argTypes: {
-    ref: { table: { disable: true } },
-    as: { table: { disable: true } },
-    placeholder: { control: { type: 'text' } },
-    error: { control: { type: 'boolean' } },
-  },
-  args: {
-    error: false,
-    placeholder: 'This is a placeholder',
-  },
-} as ComponentMeta<typeof Input>;
-
-const Template: ComponentStory<typeof Input> = args => {
-  return <Input {...args} />;
-};
-
-export const Example = Template.bind({});
-Example.storyName = 'Input';

package/src/Input/PasswordInput.stories.tsx

@@ -1,53 +0,0 @@
-import React from 'react';
-import { useMeasure } from 'react-use';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Box } from '../Layout';
-import { PasswordInput } from './Input';
-
-export default {
-  title: 'UI Components/PasswordInput',
-  component: PasswordInput.Root,
-  argTypes: {
-    css: { control: 'object' },
-  },
-} as ComponentMeta<typeof PasswordInput.Root>;
-
-//👇 We create a “template” of how args map to rendering
-const Template: ComponentStory<typeof PasswordInput.Root> = args => {
-  const [text, setText] = React.useState('');
-  const [showPassword, setShowPassword] = React.useState(false);
-  const [ref, { width }] = useMeasure<HTMLDivElement>();
-  return (
-    <Box css={{ w: '240px' }}>
-      <PasswordInput.Root {...args}>
-        <PasswordInput.Input
-          css={{ pr: width + 8 }}
-          showPassword={showPassword}
-          onChange={e => setText(e.target.value)}
-        />
-        <PasswordInput.Icons ref={ref} css={{ bg: 'transparent' }}>
-          <PasswordInput.ShowIcon
-            showPassword={showPassword}
-            onClick={() => {
-              setShowPassword(!showPassword);
-            }}
-            css={{
-              color: '$on_primary_high',
-            }}
-          />
-          <PasswordInput.CopyIcon
-            onClick={() => {
-              navigator.clipboard.writeText(text);
-            }}
-            css={{
-              color: '$on_primary_high',
-            }}
-          />
-        </PasswordInput.Icons>
-      </PasswordInput.Root>
-    </Box>
-  );
-};
-
-export const Example = Template.bind({});
-Example.storyName = 'PasswordInput';

package/src/Introduction/Integrating.stories.mdx

@@ -1,100 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-<Meta title="Introduction/Integrating The SDK" />
-
-## Installing our libraries
-
-You can use either npm or yarn to install the dependencies. Please install the respective libraries depending on whether
-you're planning to use with react or other framework/plain JavaScript.
-
-```bash
-npm install --save @100mslive/hms-video-store
-```
-
-```bash
-## npm
-npm install --save @100mslive/react-sdk@latest
-## yarn
-yarn add @100mslive/react-sdk@latest
-```
-
-Via CDN:
-
-```
-https://cdn.skypack.dev/@100mslive/hms-video
-https://cdn.skypack.dev/@100mslive/hms-video-store
-```
-
-## Setting up the sdk
-
-Our core SDK can be used with plain JavaScript or any UI framework. We also provide a convenient hooks based interface
-in case you're planning to integrate our SDK in a React app. Please follow the appropriate section below.
-
-### JavaScript
-
-There are three entities which we need to be familiar of -
-
-- `hmsStore` - this contains the complete state of the room at any given time. This includes for example, participant details,
-  messages and track states.
-- `hmsActions` - this is used to perform any action such as joining, muting and sending a message.
-- `hmsNotifications` - this can be used to get notified on peer join/leave and new messages in order to show toast notifications to
-  the user.
-
-Let's create a `hms.js` file where we initialize and export the above entities, so they can be used as required. We'll assume that
-this setup is in place in other sections of the documentation.
-
-```js
-import { HMSReactiveStore } from '@100mslive/hms-video-store';
-
-const hms = new HMSReactiveStore();
-
-// by default subscriber is notified about store changes post subscription only, this can be
-// changed to call it right after subscribing too using this function.
-hms.triggerOnSubscribe(); // optional, recommended
-
-const hmsActions = hms.getHMSActions();
-const hmsStore = hms.getStore();
-const hmsNotifications = hms.getNotifications();
-
-export { hmsActions, hmsStore, hmsNotifications };
-```
-
-```js:some_other_file.js
-import { hmsActions, hmsStore, hmsNotifications } from './hms';
-```
-
-### React Hooks
-
-If you're planning to use our SDK with React, we provide three friendly hooks as a wrapper over our plain JavaScript interface.
-You can wrap your UI in `HMSRoomProvider` and these hooks will become available to all the UI components. We'll learn more about these hooks,
-and their use as we navigate through further sections.
-
-```jsx
-// app.jsx
-import { HMSRoomProvider } from '@100mslive/react-sdk';
-
-export function App() {
-  return (
-    <HMSRoomProvider>
-      <MyApp />
-    </HMSRoomProvider>
-  );
-}
-```
-
-```jsx
-// component.jsx
-import {
-  useHMSStore,
-  useHMSActions,
-  useHMSNotifications
-} from '@100mslive/react-sdk';
-
-export function MyComponent() {
-  const hmsStore = useHMSStore();
-  const hmsActions = useHMSActions();
-  const hmsNotifications = useHMSNotifications();
-
-  return </>;
-}
-```

package/src/Introduction/Introduction.stories.mdx

@@ -1,9 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-<Meta title="Introduction/Getting Started" />
-
-# Getting Started
-
-- [Basic Concepts](https://www.100ms.live/docs/javascript/v2/foundation/basics)
-- [Template and Roles](https://www.100ms.live/docs/javascript/v2/foundation/templates-and-roles)
-- [Authentication and Tokens](https://www.100ms.live/docs/javascript/v2/foundation/security-and-tokens)

package/src/Link/Link.stories.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Link } from '.';
-
-export default {
-  title: 'UI Components/Link',
-  component: Link,
-} as ComponentMeta<typeof Link>;
-
-const Template: ComponentStory<typeof Link> = props => {
-  return (
-    <Link icon={props.icon} iconSide={props.iconSide} color={props.color} href="#">
-      Link Text
-    </Link>
-  );
-};
-
-export const Multiple = Template.bind({});

package/src/Loading/Loading.mdx

@@ -1,15 +0,0 @@
-import { Story, Preview, Props } from '@storybook/addon-docs';
-
-import { Loading } from '.';
-
-# Loading
-
-## Overview
-
-This is some random overview text of the item.
-
-<Preview>
-  <Story id="ui-components-loading--example" />
-</Preview>
-
-<Props />

package/src/Loading/Loading.stories.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Flex } from '../Layout';
-import mdx from './Loading.mdx';
-import { Loading } from '.';
-
-export default {
-  title: 'UI Components/Loading',
-  component: Loading,
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
-} as ComponentMeta<typeof Loading>;
-
-const Template: ComponentStory<typeof Loading> = ({ color }) => {
-  return (
-    <Flex gap={4}>
-      <Loading size={24} color={color} />
-      <Loading size={48} color={color} />
-      <Loading size={64} color={color} />
-    </Flex>
-  );
-};
-
-export const Multiple = Template.bind({});
-Multiple.args = {
-  color: 'red',
-};
-
-export const Playground: ComponentStory<typeof Loading> = args => <Loading {...args} />;
-Playground.storyName = 'Loading';
-Playground.argTypes = {
-  size: { control: { type: 'number' }, defaultValue: 24 },
-  color: { defaultValue: 'blue' },
-};

package/src/Modal/Dialog.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/Modal/Dialog.stories.tsx

@@ -1,68 +0,0 @@
-import React from 'react';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { CrossIcon, InfoIcon } from '@100mslive/react-icons';
-import { Button } from '../Button';
-import { Fieldset } from '../Fieldset';
-import { Input } from '../Input';
-import { Label } from '../Label';
-import { Flex } from '../Layout';
-import { Text } from '../Text';
-import { Dialog } from './Dialog';
-import DialogDocs from './Dialog.mdx';
-
-export default {
-  title: 'UI Components/Dialog',
-  component: Dialog.Root,
-  argTypes: { onClick: { action: 'clicked' } },
-  parameters: {
-    docs: {
-      page: DialogDocs,
-    },
-  },
-} as ComponentMeta<typeof Dialog.Root>;
-
-//👇 We create a “template” of how args map to rendering
-const Template: ComponentStory<typeof Dialog.Root> = () => (
-  <Dialog.Root css={{ position: 'relative' }}>
-    <Dialog.Trigger asChild>
-      <Button variant="standard">Open Dialog</Button>
-    </Dialog.Trigger>
-    <Dialog.Portal>
-      <Dialog.Overlay />
-      <Dialog.Content>
-        <Dialog.Title css={{ c: '$on_surface_high', position: 'relative' }}>
-          <Flex direction="row" justify="between" css={{ w: '100%' }}>
-            <Flex justify="start" align="center" gap="3">
-              <InfoIcon />
-              <Text variant="h5">Dialog Heading</Text>
-            </Flex>
-            <Dialog.DefaultClose css={{ position: 'absolute', top: '-1rem', right: '-1rem' }}>
-              <CrossIcon />
-            </Dialog.DefaultClose>
-          </Flex>
-        </Dialog.Title>
-        <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 css={{ mt: '$4' }}>
-          <Label htmlFor="name">Name</Label>
-          <Input id="name" defaultValue="Hardik" css={{ w: '50%' }} />
-        </Fieldset>
-        <Fieldset>
-          <Label htmlFor="username">Username</Label>
-          <Input id="username" defaultValue="@hdz666" css={{ w: '50%' }} />
-        </Fieldset>
-        <Flex css={{ marginTop: 25, justifyContent: 'flex-end' }}>
-          <Dialog.Close asChild>
-            <Button variant="primary">Save changes</Button>
-          </Dialog.Close>
-        </Flex>
-      </Dialog.Content>
-    </Dialog.Portal>
-  </Dialog.Root>
-);
-
-export const Example = Template.bind({});
-Example.storyName = 'Dialog';