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

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';

package/src/Pagination/StyledPagination.stories.tsx

@@ -1,80 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { ChevronLeftIcon, ChevronRightIcon } from '@100mslive/react-icons';
-import { StyledPagination } from '.';
-
-type PaginationProps = {
-  page: number;
-  setPage: (page: number) => void;
-  numPages: number;
-};
-
-const PaginationComponent = ({ page: propsPage, setPage: propsSetPage, numPages }: PaginationProps) => {
-  const [page, setPage] = useState(propsPage);
-
-  const disableLeft = page === 0;
-  const disableRight = page === numPages - 1;
-
-  const handlePageChange = useCallback(
-    (page: number) => {
-      setPage(page);
-      propsSetPage(page);
-    },
-    [propsSetPage],
-  );
-
-  const nextPage = () => {
-    handlePageChange(Math.min(page + 1, numPages - 1));
-  };
-
-  const prevPage = () => {
-    handlePageChange(Math.max(page - 1, 0));
-  };
-
-  useEffect(() => {
-    handlePageChange(propsPage);
-  }, [propsPage, handlePageChange]);
-
-  return (
-    <StyledPagination.Root>
-      <StyledPagination.Chevron
-        disabled={disableLeft}
-        onClick={prevPage}
-        type="button"
-        css={{ padding: 0, border: 'none', backgroundColor: 'transparent' }}
-      >
-        <ChevronLeftIcon width={16} height={16} style={{ cursor: disableLeft ? 'not-allowed' : 'pointer' }} />
-      </StyledPagination.Chevron>
-      <StyledPagination.Dots>
-        {[...Array(numPages)].map((_, i) => (
-          <StyledPagination.Dot key={i} active={page === i} onClick={() => handlePageChange(i)} type="button" />
-        ))}
-      </StyledPagination.Dots>
-      <StyledPagination.Chevron
-        disabled={disableRight}
-        onClick={nextPage}
-        type="button"
-        css={{ padding: 0, border: 'none', backgroundColor: 'transparent' }}
-      >
-        <ChevronRightIcon width={16} height={16} style={{ cursor: disableRight ? 'not-allowed' : 'pointer' }} />
-      </StyledPagination.Chevron>
-    </StyledPagination.Root>
-  );
-};
-
-export default {
-  title: 'UI Components/Pagination',
-  component: PaginationComponent,
-  argTypes: {
-    setPage: { action: { type: 'click' } },
-    page: { control: { type: 'number' }, defaultValue: 0 },
-    numPages: { control: { type: 'number' }, defaultValue: 5 },
-  },
-} as ComponentMeta<typeof PaginationComponent>;
-
-const Template: ComponentStory<typeof PaginationComponent> = args => {
-  return <PaginationComponent {...args} />;
-};
-
-export const Example = Template.bind({});
-Example.storyName = 'Pagination';

package/src/Popover/Popover.mdx

@@ -1,9 +0,0 @@
-## Popover
-
-Displays rich content in a portal, triggered by a button.
-
-- [Example](#example)
-
-### Example
-
-<Story id="button--example" />

package/src/Popover/Popover.stories.tsx

@@ -1,95 +0,0 @@
-import React from 'react';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { CrossIcon, VerticalMenuIcon } from '@100mslive/react-icons';
-import { Button } from '../Button';
-import { Fieldset } from '../Fieldset';
-import { Input } from '../Input';
-import { Label } from '../Label';
-import { Box, Flex } from '../Layout';
-import { Text } from '../Text';
-import { Popover } from './index';
-import PopoverDocs from './Popover.mdx';
-
-export default {
-  title: 'UI Components/Popover',
-  component: Popover.Root,
-  argTypes: { onClick: { action: 'clicked' } },
-  args: {
-    css: {},
-  },
-  parameters: {
-    docs: {
-      page: PopoverDocs,
-    },
-  },
-} as ComponentMeta<typeof Popover.Root>;
-
-//👇 We create a “template” of how args map to rendering
-const Template: ComponentStory<typeof Popover.Root> = () => (
-  <Flex css={{ w: '$80' }} justify="center">
-    <Popover.Root>
-      <Popover.Trigger asChild>
-        <Button
-          variant="standard"
-          css={{
-            aspectRatio: '1',
-            r: '$round',
-            p: '$2 $2',
-            bg: '$background_default',
-            '&:hover': { bg: '$background_dim !important' },
-          }}
-        >
-          <Box css={{ w: '$10', h: '$10', c: '$on_primary_high' }}>
-            <VerticalMenuIcon />
-          </Box>
-        </Button>
-      </Popover.Trigger>
-      <Popover.Content align="center" side="bottom" sideOffset={10}>
-        <Flex css={{ flexDirection: 'column', gap: 10 }} justify="center" align="center">
-          <Flex direction="row" justify="between" css={{ width: '100%' }}>
-            <Text as="div" variant="caption" css={{ color: '$on_surface_medium' }}>
-              Dimensions
-            </Text>
-            <Box css={{ color: '$on_surface_medium' }}>
-              <CrossIcon width="0.75rem" height="0.75rem" />
-            </Box>
-          </Flex>
-          <Fieldset css={{ justifyContent: 'between', width: '100%' }}>
-            <Label htmlFor="width" asChild>
-              <Text as="span" variant="sub2">
-                Width
-              </Text>
-            </Label>
-            <Input />
-          </Fieldset>
-          <Fieldset css={{ justifyContent: 'between', width: '100%' }}>
-            <Label htmlFor="maxWidth" asChild>
-              <Text as="span" variant="sub2">
-                Max. width
-              </Text>
-            </Label>
-            <Input />
-          </Fieldset>
-          <Fieldset css={{ justifyContent: 'between', width: '100%' }}>
-            <Label htmlFor="height" asChild>
-              <Text as="span" variant="sub2">
-                Height
-              </Text>
-            </Label>
-            <Input />
-          </Fieldset>
-          <Fieldset css={{ justifyContent: 'between', width: '100%' }}>
-            <Label htmlFor="maxHeight" asChild>
-              <Text as="span" variant="sub2">
-                Max. height
-              </Text>
-            </Label>
-            <Input />
-          </Fieldset>
-        </Flex>
-      </Popover.Content>
-    </Popover.Root>
-  </Flex>
-);
-export const Example = Template.bind({});
-Example.storyName = 'Popover';

package/src/Prebuilt/Prebuilt.stories.tsx

@@ -1,46 +0,0 @@
-import React from 'react';
-import { Meta, StoryFn } from '@storybook/react';
-import { HMSPrebuilt, HMSPrebuiltOptions, HMSPrebuiltProps } from '.';
-
-export default {
-  title: 'UI Components/Prebuilt',
-  component: HMSPrebuilt,
-  argTypes: {
-    roomCode: { control: { type: 'text' }, defaultValue: '' },
-    logo: { control: { type: 'object' }, defaultValue: null },
-    typography: { control: { type: 'object' }, defaultValue: 'Roboto' },
-    options: { control: { type: 'object' }, defaultValue: {} },
-  },
-} as Meta<typeof HMSPrebuilt>;
-
-const PrebuiltRoomCodeStory: StoryFn<typeof HMSPrebuilt> = ({
-  roomCode = '',
-  logo,
-  themes,
-  typography,
-  options,
-}: HMSPrebuiltProps) => {
-  return <HMSPrebuilt roomCode={roomCode} logo={logo} options={options} themes={themes} typography={typography} />;
-};
-
-export const Example = PrebuiltRoomCodeStory.bind({});
-const endpoints: HMSPrebuiltOptions['endpoints'] = {
-  roomLayout: process.env.STORYBOOK_ROOM_LAYOUT_ENDPOINT,
-  tokenByRoomCode: process.env.STORYBOOK_TOKEN_BY_ROOM_CODE_ENDPOINT,
-  init: process.env.STORYBOOK_INIT_API_ENDPOINT,
-  event: process.env.STORYBOOK_EVENT_API_ENDPOINT,
-};
-
-const hasEndpoints = Object.values(endpoints).some(val => !!val);
-
-Example.args = {
-  roomCode: process.env.STORYBOOK_SAMPLE_ROOM_CODE,
-  options: {
-    userName: '',
-    userId: '',
-    endpoints: hasEndpoints ? endpoints : undefined,
-  },
-  typography: {
-    font_family: 'Roboto',
-  },
-};

package/src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.stories.tsx

@@ -1,40 +0,0 @@
-import React from 'react';
-import { Meta } from '@storybook/react';
-import { MicIcon } from '@100mslive/react-icons';
-import { Box } from '../../../Layout';
-import { Text } from '../../../Text';
-import { IconButtonWithOptions } from './IconButtonWithOptions';
-
-export default {
-  title: 'Components/IconButtonWithOptions',
-  component: IconButtonWithOptions,
-  argTypes: {
-    tooltipMessage: { control: 'text' },
-    icon: { control: 'object' },
-    options: { control: 'object' },
-    active: { control: 'boolean' },
-    onClick: { control: 'function' },
-    key: { control: 'string' },
-  },
-} as Meta;
-
-const Template = args => (
-  <Box css={{ ml: '$20', bg: '$background_dim', p: '$8' }}>
-    <IconButtonWithOptions {...args} />
-  </Box>
-);
-
-export const Default = Template.bind({});
-Default.args = {
-  tooltipMessage: 'Click me!',
-  icon: <MicIcon height={32} width={32} />,
-  options: [
-    { title: 'Option 1', content: <Text>Some content</Text> },
-    { title: 'Option 2', content: <Text>Some more content</Text> },
-  ],
-  active: true,
-  onClick: () => {
-    return;
-  },
-  key: '',
-};

package/src/QRCode/QRCode.mdx

@@ -1,9 +0,0 @@
-## QRCode
-
-QRCode component displays a scannable QR code for the given value.
-
-## Usage
-
-```jsx
-<QRCode value="pass any string here" />
-```

package/src/QRCode/QRCode.stories.tsx

@@ -1,29 +0,0 @@
-import React from 'react';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Flex } from '../Layout';
-import { QRCode } from './QRCode';
-import QRCodeDocs from './QRCode.mdx';
-
-export default {
-  title: 'UI Components/QRCode',
-  id: 'qr-code',
-  component: QRCode,
-  args: {
-    value: 'https://100ms.live',
-    size: 128,
-  },
-  parameters: {
-    docs: {
-      page: QRCodeDocs,
-    },
-  },
-} as ComponentMeta<typeof QRCode>;
-
-//👇 We create a “template” of how args map to rendering
-const Template: ComponentStory<typeof QRCode> = ({ ...args }) => (
-  <Flex css={{ w: '$80' }} justify="center">
-    <QRCode {...args} />
-  </Flex>
-);
-export const Example = Template.bind({});
-Example.storyName = 'QRCode';

package/src/RadioGroup/RadioGroup.stories.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Label } from '../Label';
-import { Flex } from '../Layout';
-import { RadioGroup } from './RadioGroup';
-
-export default {
-  title: 'UI Components/RadioGroup',
-  component: RadioGroup.Root,
-  argTypes: {},
-} as ComponentMeta<typeof RadioGroup.Root>;
-
-//👇 We create a “template” of how args map to rendering
-const Template: ComponentStory<typeof RadioGroup.Root> = args => (
-  <RadioGroup.Root {...args} css={{ flexDirection: 'column', alignItems: 'flex-start' }}>
-    <Flex align="center" css={{ my: '$4' }} gap="2">
-      <RadioGroup.Item value="grid" id="gridView">
-        <RadioGroup.Indicator />
-      </RadioGroup.Item>
-      <Label htmlFor="gridView">Grid View</Label>
-    </Flex>
-    <Flex align="center" css={{ cursor: 'pointer' }} gap="2">
-      <RadioGroup.Item value="activespeaker" id="activeSpeaker">
-        <RadioGroup.Indicator />
-      </RadioGroup.Item>
-      <Label htmlFor="activeSpeaker">Active Speaker</Label>
-    </Flex>
-  </RadioGroup.Root>
-);
-
-export const Example = Template.bind({});
-Example.storyName = 'RadioGroup';

package/src/ReactSelect/ReactSelect.stories.tsx

@@ -1,83 +0,0 @@
-import React from 'react';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from '@100mslive/react-icons';
-import { Flex } from '../Layout';
-import { Text } from '../Text';
-import { Select } from './ReactSelect';
-
-export default {
-  title: 'UI Components/ReactSelect',
-  component: Select.Root,
-} as ComponentMeta<typeof Select.Root>;
-
-const data: {
-  [key: string]: { id: string; name: string }[];
-} = {
-  FRUITS: [
-    { id: 'apple', name: 'Apple' },
-    { id: 'banana', name: 'Banana' },
-    { id: 'blueberry', name: 'Blueberry' },
-    { id: 'grapes', name: 'Grapes' },
-    { id: 'pineapple', name: 'Pineapple' },
-  ],
-  VEGETABLES: [
-    { id: 'aubergine', name: 'Aubergine' },
-    { id: 'broccoli', name: 'Broccoli' },
-    { id: 'carrot', name: 'Carrot' },
-    { id: 'courgette', name: 'Courgette' },
-  ],
-  MEATS: [
-    { id: 'beef', name: 'Beef' },
-    { id: 'chicken', name: 'Chicken' },
-    { id: 'lamb', name: 'Lamb' },
-    { id: 'pork', name: 'Pork' },
-  ],
-};
-
-const Template: ComponentStory<typeof Select.Root> = () => {
-  return (
-    <Select.Root defaultValue="blueberry">
-      <Select.Trigger css={{ bg: '$background_dim' }}>
-        <Select.Value />
-        <Flex css={{ color: '$on_primary_high' }}>
-          <ChevronDownIcon />
-        </Flex>
-      </Select.Trigger>
-      <Select.Content>
-        <Select.ScrollUpButton css={{ color: '$on_primary_high' }}>
-          <ChevronUpIcon />
-        </Select.ScrollUpButton>
-        <Select.Viewport>
-          {Object.keys(data).map((item: string, index: number) => (
-            <>
-              <Select.Group>
-                <Select.Label>
-                  <Text variant="xs" css={{ color: '$on_primary_medium' }}>
-                    {item}
-                  </Text>
-                </Select.Label>
-                {data[item].map((type: { id: string; name: string }) => (
-                  <Select.Item value={type?.id}>
-                    <Select.ItemText>
-                      <Text variant="md">{type?.name}</Text>
-                    </Select.ItemText>
-                    <Select.ItemIndicator css={{ color: '$on_primary_high' }}>
-                      <CheckIcon />
-                    </Select.ItemIndicator>
-                  </Select.Item>
-                ))}
-              </Select.Group>
-              {index < Object.keys(data).length - 1 && <Select.Separator css={{ bg: '$border_default' }} />}
-            </>
-          ))}
-        </Select.Viewport>
-        <Select.ScrollDownButton css={{ color: '$on_primary_high' }}>
-          <ChevronDownIcon />
-        </Select.ScrollDownButton>
-      </Select.Content>
-    </Select.Root>
-  );
-};
-
-export const WithGroup = Template.bind({});
-WithGroup.storyName = 'ReactSelect';

package/src/Select/Select.stories.tsx

@@ -1,33 +0,0 @@
-import React from 'react';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Select } from './Select';
-
-export default {
-  title: 'UI Components/Select',
-  component: Select.Root,
-} as ComponentMeta<typeof Select.Root>;
-
-const Template: ComponentStory<typeof Select.Root> = () => {
-  return (
-    <Select.Root css={{ width: '70%' }}>
-      <Select.DefaultDownIcon />
-      <Select.Select css={{ width: '100%' }}>
-        <option value="orange" key="orange">
-          Orange
-        </option>
-        <option value="orange" key="apple">
-          Apple
-        </option>
-        <option value="orange" key="banana">
-          Banana
-        </option>
-        <option value="orange" key="grapes">
-          Grapes
-        </option>
-      </Select.Select>
-    </Select.Root>
-  );
-};
-
-export const Single = Template.bind({});
-Single.storyName = 'Select';

package/src/Sheet/Sheet.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';
-
-## Sheet
-
-Sheet is an hover component used to have a focus-mode like UI for users.
-
-- [Example](#example)
-
-### Example
-
-<Story id="sheet--example" />