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

package/src/Button/Button.stories.tsx

@@ -1,52 +0,0 @@
-import React from 'react';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { HangUpIcon } from '@100mslive/react-icons';
-import { Button } from './Button';
-import mdx from './Button.mdx';
-
-export default {
-  title: 'UI Components/Button',
-  component: Button,
-  argTypes: {
-    variant: {
-      description: 'Button styled variants',
-    },
-    outlined: { description: 'Give button an outlined style' },
-    icon: { description: 'Give space between children' },
-    loading: { description: 'Button is in a loading state' },
-  },
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
-} as ComponentMeta<typeof Button>;
-
-export const Primary = () => <Button variant="primary">Hello, World</Button>;
-
-export const Standard = () => <Button variant="standard">Hello, World</Button>;
-
-export const Danger = () => <Button variant="danger">Hello, World</Button>;
-
-export const WithIcon = () => (
-  <Button variant="danger" icon>
-    <HangUpIcon />
-    Leave Room
-  </Button>
-);
-
-export const Playground: ComponentStory<typeof Button> = args => <Button {...args}>Hello World</Button>;
-
-Playground.storyName = 'Button';
-Playground.argTypes = {
-  onClick: { action: 'clicked' },
-  variant: {
-    control: {
-      type: 'select',
-      options: ['primary', 'standard', 'danger'],
-    },
-  },
-  outlined: { control: 'boolean' },
-  icon: { control: 'boolean' },
-  loading: { control: 'boolean' },
-};

package/src/Chat/Chat.mdx

@@ -1,39 +0,0 @@
-## Broadcast Message:
-
-import { Story } from '@storybook/addon-docs';
-
-This will be received by everyone in the room.
-
-```js
-hmsActions.sendBroadcastMessage('hello everyone!'); // yes it's that simple 😉
-```
-
-## MVP component
-
-```jsx
-const ChatExample = () => {
-  const chats = useHMSStore(selectHMSMessages);
-  const actions = useHMSActions();
-  const [input, setInput] = useState('');
-  const sendMessage = (e: React.FormEvent) => {
-    e.preventDefault();
-    actions.sendBroadcastMessage(input);
-    setInput('');
-  };
-  return (
-    <div>
-      {chats.map(c => (
-        <div>{c.message}</div>
-      ))}
-      <form onSubmit={sendMessage}>
-        <input value={input} onChange={e => setInput(e.target.value)} type="text" />
-        <button type="submit">Send</button>
-      </form>
-    </div>
-  );
-};
-```
-
-### Demo
-
-<Story id="chat-broadcast-message--chat-story-example" />

package/src/Chat/Chat.stories.tsx

@@ -1,39 +0,0 @@
-import React, { useState } from 'react';
-import { selectHMSMessages, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
-import ChatDocs from './Chat.mdx';
-
-const ChatStories = {
-  title: 'Chat/Broadcast Message',
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
-  parameters: {
-    docs: {
-      page: ChatDocs,
-    },
-  },
-};
-
-export default ChatStories;
-
-const ChatExample = () => {
-  const chats = useHMSStore(selectHMSMessages);
-  const actions = useHMSActions();
-  const [input, setInput] = useState('');
-  const sendMessage = (e: React.FormEvent) => {
-    e.preventDefault();
-    actions.sendBroadcastMessage(input);
-    setInput('');
-  };
-  return (
-    <div>
-      {chats.map(c => (
-        <div>{c.message}</div>
-      ))}
-      <form onSubmit={sendMessage}>
-        <input value={input} onChange={e => setInput(e.target.value)} type="text" />
-        <button type="submit">Send</button>
-      </form>
-    </div>
-  );
-};
-
-export const ChatStoryExample = ChatExample.bind({});

package/src/Checkbox/Checkbox.stories.tsx

@@ -1,61 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { CheckIcon } from '@100mslive/react-icons';
-import { Label } from '../Label';
-import { Flex } from '../Layout';
-import { Checkbox } from '.';
-
-export default {
-  title: 'UI Components/Checkbox',
-  component: CheckboxWithLabelComponent,
-  argTypes: {
-    onCheckedChange: { action: { type: 'clicked' } },
-    checked: { control: { type: 'boolean' } },
-    label: { control: { type: 'text' } },
-    css: { control: { type: 'object' } },
-  },
-  args: {
-    checked: true,
-    label: 'Label',
-  },
-} as ComponentMeta<typeof CheckboxWithLabelComponent>;
-
-type CheckboxWithLabelComponentProps = {
-  label?: string;
-  checked?: boolean;
-} & React.ComponentProps<typeof Checkbox.Root>;
-
-function CheckboxWithLabelComponent({ label, checked = true, css, onCheckedChange }: CheckboxWithLabelComponentProps) {
-  const [internalChecked, setInternalChecked] = useState(checked);
-
-  useEffect(() => {
-    handleOnCheckedChange(checked);
-  }, [checked]); //eslint-disable-line
-
-  function handleOnCheckedChange(checked: boolean) {
-    setInternalChecked(checked);
-    if (onCheckedChange) {
-      onCheckedChange(checked);
-    }
-  }
-
-  return (
-    <Flex align="center">
-      <Checkbox.Root id={label} checked={internalChecked} css={css} onCheckedChange={handleOnCheckedChange}>
-        <Checkbox.Indicator css={{ display: 'flex' }}>
-          <CheckIcon width={16} height={16} />
-        </Checkbox.Indicator>
-      </Checkbox.Root>
-      <Label htmlFor={label} css={{ ml: '$4', fontSize: '$sm', cursor: 'pointer' }}>
-        {label}
-      </Label>
-    </Flex>
-  );
-}
-
-const CheckboxWithLabelStory: ComponentStory<typeof CheckboxWithLabelComponent> = args => {
-  return <CheckboxWithLabelComponent {...args} />;
-};
-
-export const Example = CheckboxWithLabelStory.bind({});
-Example.storyName = 'Checkbox';

package/src/Divider/HorizontalDivider.stories.tsx

@@ -1,34 +0,0 @@
-import React from 'react';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Flex } from '../Layout';
-import { Text } from '../Text';
-import { HorizontalDivider } from '.';
-
-export default {
-  title: 'UI Components/Divider',
-  component: HorizontalDivider,
-  argTypes: {
-    ref: { table: { disable: true } },
-    as: { table: { disable: true } },
-    css: { control: { type: 'object' } },
-    space: { defaultValue: 1, control: { type: 'number', min: 1, max: 4 } },
-  },
-} as ComponentMeta<typeof HorizontalDivider>;
-
-const HorizontalDividerComponent: ComponentStory<typeof HorizontalDivider> = ({ space, css }) => {
-  return (
-    <Flex align="center" direction="column" css={{ width: 'max-content', bg: '$surface_bright', p: '$8', r: '$4' }}>
-      <ul style={{ listStyle: 'none', padding: '0px', margin: '0px', textAlign: 'center' }}>
-        <Text as="li">Item 1</Text>
-        <Text as="li">Item 2</Text>
-        <Text as="li">Item 3</Text>
-        <HorizontalDivider space={space} css={{ bg: '$on_primary_medium', width: '80px', ...css }} />
-        <Text as="li">Item 4</Text>
-        <Text as="li">Item 5</Text>
-        <Text as="li">Item 6</Text>
-      </ul>
-    </Flex>
-  );
-};
-
-export const Horizontal = HorizontalDividerComponent.bind({});

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)