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

package/src/Dropdown/Dropdown.tsx

@@ -1,145 +0,0 @@
-import {
-  CheckboxItem,
-  Content,
-  Group,
-  Item,
-  ItemIndicator,
-  Label,
-  Portal,
-  Root,
-  Separator,
-  Sub,
-  SubContent,
-  SubTrigger,
-  Trigger,
-} from '@radix-ui/react-dropdown-menu';
-import { styled } from '../Theme';
-
-const DropdownRoot = styled(Root, {});
-
-const DropdownTrigger = styled(Trigger, {
-  cursor: 'pointer',
-  appearance: 'none !important',
-  '&[data-state="open"]': {
-    backgroundColor: '$surface_bright',
-    c: '$on_surface_high',
-  },
-  '&:focus': {
-    outline: 'none',
-  },
-  '&:focus-visible': {
-    boxShadow: '0 0 0 3px $colors$primary_default',
-  },
-});
-
-const DropdownTriggerItem = styled(SubTrigger, {
-  w: '100%',
-  color: '$on_surface_high',
-  p: '$8',
-  display: 'flex',
-  alignItems: 'center',
-  '&:hover': {
-    cursor: 'pointer',
-    bg: '$surface_brighter',
-  },
-  '&:focus-visible': {
-    bg: '$surface_brighter',
-    outline: 'none',
-  },
-});
-
-const DropdownItem = styled(Item, {
-  color: '$on_surface_high',
-  p: '$8',
-  display: 'flex',
-  alignItems: 'center',
-  outline: 'none',
-  backgroundColor: '$surface_dim',
-  '&:hover': {
-    cursor: 'pointer',
-    bg: '$surface_bright',
-  },
-  '&:focus-visible': {
-    bg: '$surface_bright',
-  },
-});
-
-const DropdownItemSeparator = styled(Separator, {
-  h: 1,
-  backgroundColor: '$border_bright',
-  m: '$4 $8',
-});
-
-const DropdownContent = styled(Content, {
-  w: '$80',
-  maxHeight: '$64',
-  r: '$1',
-  py: '$4',
-  backgroundColor: '$surface_dim',
-  overflowY: 'auto',
-  boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)',
-  zIndex: 20,
-  fontFamily: '$sans',
-});
-
-const DropdownLabel = styled(Label, {
-  display: 'flex',
-  alignItems: 'center',
-  h: '$12',
-  w: '100%',
-  p: '$8 $4',
-});
-
-const DropdownGroup = styled(Group, {});
-
-const DropdownSubMenu = styled(Sub, {});
-
-const DropdownSubMenuContent = styled(SubContent, {
-  w: '$80',
-  maxHeight: '$64',
-  r: '$1',
-  py: '$4',
-  backgroundColor: '$surface_bright',
-  overflowY: 'auto',
-  boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)',
-  zIndex: 20,
-});
-
-const DropdownCheckboxItem = styled(CheckboxItem, {
-  color: '$on_surface_high',
-  p: '$8',
-  display: 'flex',
-  alignItems: 'center',
-  outline: 'none',
-  '&:hover': {
-    cursor: 'pointer',
-    bg: '$surface_brighter',
-  },
-  '&:focus-visible': {
-    bg: '$surface_brighter',
-  },
-  gap: '$2',
-});
-
-const DropdownItemIndicator = styled(ItemIndicator, {
-  w: '$10',
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-});
-
-export const Dropdown = {
-  Root: DropdownRoot,
-  Trigger: DropdownTrigger,
-  TriggerItem: DropdownTriggerItem,
-  Content: DropdownContent,
-  Portal: Portal,
-  SubMenu: DropdownSubMenu,
-  SubMenuContent: DropdownSubMenuContent,
-  Item: DropdownItem,
-  Label: DropdownLabel,
-  Group: DropdownGroup,
-  ItemSeparator: DropdownItemSeparator,
-  CheckboxItem: DropdownCheckboxItem,
-  ItemIndicator: DropdownItemIndicator,
-};

package/src/Dropdown/index.tsx

@@ -1 +0,0 @@
-export * from './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/Fieldset/Fieldset.tsx

@@ -1,11 +0,0 @@
-import { styled } from '../Theme';
-
-const StyledFieldset = styled('fieldset', {
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  border: 'none',
-  backgroundColor: 'transparent',
-});
-
-export const Fieldset = StyledFieldset;

package/src/Fieldset/index.tsx

@@ -1 +0,0 @@
-export * from './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/Footer/Footer.tsx

@@ -1,47 +0,0 @@
-import { Flex } from '../Layout';
-import { styled } from '../Theme';
-
-const Root = styled(Flex, {
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  py: '$4',
-  position: 'relative',
-  height: '100%',
-  '@md': { flexWrap: 'wrap', gap: '$4' },
-});
-
-const Left = styled(Flex, {
-  alignItems: 'center',
-  position: 'absolute',
-  left: '$10',
-  gap: '$8',
-  '@md': {
-    position: 'unset',
-    justifyContent: 'center',
-    w: '100%',
-  },
-});
-
-const Center = styled(Flex, {
-  w: '100%',
-  justifyContent: 'center',
-  alignItems: 'center',
-  gap: '$8',
-});
-
-const Right = styled(Flex, {
-  alignItems: 'center',
-  position: 'absolute',
-  right: '$10',
-  gap: '$8',
-  '@md': {
-    display: 'none',
-  },
-});
-
-export const Footer = {
-  Root,
-  Left,
-  Center,
-  Right,
-};

package/src/Footer/index.tsx

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

package/src/IconButton/IconButton.tsx

@@ -1,43 +0,0 @@
-import { styled } from '../Theme';
-import { flexCenter } from '../utils/styles';
-
-export const IconButton = styled('button', {
-  ...flexCenter,
-  alignItems: 'center',
-  outline: 'none',
-  border: 'none',
-  padding: '$2',
-  r: '$0',
-  cursor: 'pointer',
-  backgroundColor: 'transparent',
-  color: '$on_surface_high',
-  '&:not([disabled]):focus-visible': {
-    boxShadow: '0 0 0 3px $colors$primary_default',
-  },
-  '&:not([disabled]):focus': {
-    outline: 'none',
-  },
-  '@media (hover: hover)': {
-    '&:not([disabled]):hover': {
-      backgroundColor: '$on_surface_low',
-    },
-  },
-  '&[disabled]': {
-    opacity: 0.5,
-    cursor: 'not-allowed',
-    backgroundColor: '$secondary_dim',
-    color: '$on_primary_high',
-  },
-  '&:focus': {
-    outline: 'none',
-  },
-  variants: {
-    active: {
-      true: {
-        '&:not([disabled]):hover': {
-          backgroundColor: '$on_surface_low',
-        },
-      },
-    },
-  },
-});

package/src/IconButton/index.tsx

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

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/Input.tsx

@@ -1,109 +0,0 @@
-import React, { ComponentProps, PropsWithChildren, PropsWithRef } from 'react';
-import { CSS } from '@stitches/react';
-import { CopyIcon, EyeCloseIcon, EyeOpenIcon } from '@100mslive/react-icons';
-import { Flex } from '../Layout';
-import { styled } from '../Theme';
-
-export const Input = styled('input', {
-  fontFamily: '$sans',
-  lineHeight: 'inherit',
-  backgroundColor: '$surface_default',
-  borderRadius: '8px',
-  outline: 'none',
-  border: '1px solid $border_default',
-  padding: '0.5rem 0.75rem',
-  minHeight: '30px',
-  color: '$on_surface_high',
-  fontSize: '$md',
-  '&:disabled': {
-    cursor: 'not-allowed',
-  },
-  '&:focus': {
-    boxShadow: '0 0 0 1px $colors$primary_default',
-    border: '1px solid transparent',
-  },
-  '&::placeholder': {
-    color: '$on_surface_medium',
-  },
-  variants: {
-    error: {
-      true: {
-        '&:focus': {
-          boxShadow: '0 0 0 3px $colors$alert_error_default',
-        },
-      },
-    },
-  },
-});
-
-const PasswordRoot = styled('div', {
-  w: '100%',
-  position: 'relative',
-  display: 'flex',
-});
-
-const PasswordShowIcon: React.FC<ComponentProps<typeof Flex> & { showPassword?: boolean; css?: CSS }> = ({
-  showPassword,
-  css,
-  ...props
-}) => {
-  return (
-    <Flex css={{ ...css }} {...props}>
-      {showPassword ? <EyeOpenIcon /> : <EyeCloseIcon />}
-    </Flex>
-  );
-};
-
-const PasswordCopyIcon: React.FC<ComponentProps<typeof Flex & { css?: CSS }>> = ({ css, ...props }) => {
-  return (
-    <Flex css={{ ...css }} {...props}>
-      <CopyIcon />
-    </Flex>
-  );
-};
-
-const PasswordIcons = React.forwardRef<HTMLDivElement, PropsWithChildren<ComponentProps<typeof Flex & { css?: CSS }>>>(
-  ({ css, ...props }, ref) => {
-    return (
-      <Flex
-        css={{
-          position: 'absolute',
-          top: 0,
-          height: '100%',
-          zIndex: 10,
-          right: '$4',
-          bg: '$surface_bright',
-          alignItems: 'center',
-          ...css,
-        }}
-        ref={ref}
-        {...props}
-      >
-        {props.children}
-      </Flex>
-    );
-  },
-);
-
-const ReactInput: React.FC<PropsWithRef<ComponentProps<typeof Input> & { showPassword?: boolean; css?: CSS }>> =
-  React.forwardRef<
-    HTMLInputElement,
-    PropsWithRef<ComponentProps<typeof Input> & { showPassword?: boolean; css?: CSS }>
-  >(({ showPassword = false, css, ...props }, ref) => {
-    return (
-      <Input
-        css={{ flexGrow: 1, width: '100%', ...css }}
-        type={showPassword ? 'text' : 'password'}
-        {...props}
-        ref={ref}
-      />
-    );
-  });
-
-export const PasswordInput = {
-  Root: PasswordRoot,
-  Icons: PasswordIcons,
-  Input: ReactInput,
-  ShowIcon: PasswordShowIcon,
-  CopyIcon: PasswordCopyIcon,
-};

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/Input/index.tsx

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

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/Label/Label.tsx

@@ -1,8 +0,0 @@
-import * as LabelPrimitive from '@radix-ui/react-label';
-import { styled } from '../Theme';
-
-export const Label = styled(LabelPrimitive.Root, {
-  fontFamily: '$sans',
-  fontSize: '$md',
-  color: '$on_primary_high',
-});