@100mslive/roomkit-react 0.1.0

package/src/Input/Input.tsx

@@ -0,0 +1,105 @@
+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: '$surfaceLight',
+  borderRadius: '8px',
+  outline: 'none',
+  border: '1px solid $borderLight',
+  padding: '0.5rem 0.75rem',
+  color: '$textPrimary',
+  fontSize: '$md',
+  '&:focus': {
+    boxShadow: '0 0 0 1px $colors$borderAccent',
+    border: '1px solid transparent',
+  },
+  '&::placeholder': {
+    color: '$textDisabled',
+  },
+  variants: {
+    error: {
+      true: {
+        '&:focus': {
+          boxShadow: '0 0 0 3px $colors$error',
+        },
+      },
+    },
+  },
+});
+
+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: '$surfaceLight',
+          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

@@ -0,0 +1,53 @@
+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: '$textPrimary',
+            }}
+          />
+          <PasswordInput.CopyIcon
+            onClick={() => {
+              navigator.clipboard.writeText(text);
+            }}
+            css={{
+              color: '$textPrimary',
+            }}
+          />
+        </PasswordInput.Icons>
+      </PasswordInput.Root>
+    </Box>
+  );
+};
+
+export const Example = Template.bind({});
+Example.storyName = 'PasswordInput';

package/src/Input/index.tsx

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

package/src/Introduction/Integrating.stories.mdx

@@ -0,0 +1,100 @@
+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 @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

@@ -0,0 +1,9 @@
+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

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

package/src/Label/index.ts

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

package/src/Layout/Box.tsx

@@ -0,0 +1,3 @@
+import { styled } from '../Theme';
+
+export const Box = styled('div', {});

package/src/Layout/Flex.tsx

@@ -0,0 +1,76 @@
+import { styled } from '../Theme';
+
+/**
+ * @see https://tailwindcss.com/docs/space
+ */
+const gapStyles = (value: number) => {
+  return {
+    '& > * + *': {
+      marginRight: '0',
+      marginLeft: `${0.25 * value}rem`,
+    },
+  };
+};
+
+export const Flex = styled('div', {
+  display: 'flex',
+  variants: {
+    justify: {
+      start: {
+        justifyContent: 'flex-start',
+      },
+      end: {
+        justifyContent: 'flex-end',
+      },
+      center: {
+        justifyContent: 'center',
+      },
+      between: {
+        justifyContent: 'space-between',
+      },
+      around: {
+        justifyContent: 'space-around',
+      },
+      evenly: {
+        justifyContent: 'space-evenly',
+      },
+    },
+    align: {
+      start: {
+        alignItems: 'flex-start',
+      },
+      end: {
+        alignItems: 'flex-end',
+      },
+      center: {
+        alignItems: 'center',
+      },
+      baseline: {
+        alignItems: 'baseline',
+      },
+      strech: {
+        alignItems: 'stretch',
+      },
+    },
+    direction: {
+      row: {
+        flexDirection: 'row',
+      },
+      column: {
+        flexDirection: 'column',
+      },
+      rowReverse: {
+        flexDirection: 'row-reverse',
+      },
+      columnReverse: {
+        flexDirection: 'column-reverse',
+      },
+    },
+    gap: {
+      1: gapStyles(1),
+      2: gapStyles(2),
+      3: gapStyles(3),
+      4: gapStyles(4),
+    },
+  },
+});

package/src/Layout/index.tsx

@@ -0,0 +1,2 @@
+export { Flex } from './Flex';
+export { Box } from './Box';

package/src/Link/Link.stories.tsx

@@ -0,0 +1,18 @@
+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/Link/Link.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import * as icons from '@100mslive/react-icons';
+import { Flex } from '../Layout';
+import { Text } from '../Text';
+import { styled } from '../Theme';
+
+const LinkComponent = styled('a', {
+  textDecoration: 'none',
+  display: 'flex',
+  alignItems: 'center',
+  gap: '$5',
+  variants: {
+    color: {
+      highEmp: {
+        color: '$textHighEmp',
+        '&:hover': {
+          color: '$textMedEmp',
+        },
+      },
+      primary: {
+        color: '$primaryLight',
+        '&:hover': {
+          color: '$primaryDefault',
+        },
+      },
+    },
+  },
+});
+
+export interface LinkProps extends React.ComponentProps<typeof LinkComponent> {
+  as?: React.ElementType;
+  iconSide?: 'left' | 'right' | 'none';
+  icon?: keyof typeof icons;
+  color?: 'highEmp' | 'primary';
+}
+
+export const Link = ({ iconSide = 'left', icon, color = 'primary', children, ...rest }: LinkProps) => {
+  const Icon = icon ? icons[icon] : React.Fragment;
+  const renderedIcon = icon ? (
+    <Flex as="span">
+      <Icon height={13.33} width={13.33} />{' '}
+    </Flex>
+  ) : null;
+
+  return (
+    <LinkComponent {...rest} color={color}>
+      {iconSide === 'left' && renderedIcon}
+      <Text as="span" variant="body2" css={{ color: 'inherit' }}>
+        {children}
+      </Text>
+      {iconSide === 'right' && renderedIcon}
+    </LinkComponent>
+  );
+};

package/src/Link/index.tsx

@@ -0,0 +1,2 @@
+export { Link } from './Link';
+export type { LinkProps } from './Link';

package/src/Loading/Loading.mdx

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,37 @@
+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/Loading/Loading.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+type Props = {
+  /**
+   * Adjusts width and height
+   */
+  size?: number | string;
+  /**
+   * Color of Loader
+   */
+  color?: string;
+};
+
+type LoadingProps = Props & React.SVGProps<SVGSVGElement>;
+
+export const Loading = ({ size = 24, color = 'white', ...props }: LoadingProps) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M19.8852 12C20.5009 12 21.0071 12.501 20.9311 13.1119C20.7585 14.498 20.2649 15.8303 19.4832 17.0001C18.4943 18.4802 17.0887 19.6337 15.4442 20.3149C13.7996 20.9961 11.99 21.1743 10.2442 20.8271C8.49836 20.4798 6.89471 19.6226 5.63604 18.364C4.37737 17.1053 3.5202 15.5016 3.17293 13.7558C2.82567 12.01 3.0039 10.2004 3.68508 8.55585C4.36627 6.91131 5.51983 5.50571 6.99987 4.51677C8.16971 3.73511 9.50199 3.24152 10.8881 3.06895C11.499 2.99288 12 3.4991 12 4.11476C12 4.73042 11.4976 5.22017 10.8903 5.32108C9.94601 5.47798 9.04141 5.83408 8.23852 6.37055C7.12512 7.1145 6.25733 8.17191 5.74489 9.40905C5.23245 10.6462 5.09837 12.0075 5.35961 13.3209C5.62085 14.6342 6.26568 15.8406 7.21255 16.7875C8.15942 17.7343 9.3658 18.3791 10.6791 18.6404C11.9925 18.9016 13.3538 18.7675 14.591 18.2551C15.8281 17.7427 16.8855 16.8749 17.6294 15.7615C18.1659 14.9586 18.522 14.054 18.6789 13.1097C18.7798 12.5024 19.2696 12 19.8852 12Z"
+      fill={color}
+    >
+      <animateTransform
+        attributeType="XML"
+        attributeName="transform"
+        type="rotate"
+        from="0 12 12"
+        to="360 12 12"
+        dur="0.75s"
+        repeatCount="indefinite"
+      />
+    </path>
+  </svg>
+);

package/src/Loading/index.ts

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

package/src/Modal/Dialog.mdx

@@ -0,0 +1,19 @@
+# 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

@@ -0,0 +1,68 @@
+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: '$textHighEmp', 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: '$textMedEmp' }}>
+          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/Modal/Dialog.tsx

@@ -0,0 +1,26 @@
+import { Root } from '@radix-ui/react-dialog';
+import { styled } from '@stitches/react';
+import {
+  DialogClose,
+  DialogDefaultCloseIcon,
+  DialogDescription,
+  DialogTitle,
+  StyledDialogContent,
+  StyledDialogOverlay,
+  StyledDialogPortal,
+  StyledDialogTrigger,
+} from './DialogContent';
+
+const StyledDialog = styled(Root, {});
+
+export const Dialog = {
+  Root: StyledDialog,
+  Trigger: StyledDialogTrigger,
+  Overlay: StyledDialogOverlay,
+  Content: StyledDialogContent,
+  Title: DialogTitle,
+  Description: DialogDescription,
+  Close: DialogClose,
+  DefaultClose: DialogDefaultCloseIcon,
+  Portal: StyledDialogPortal,
+};