@100mslive/roomkit-react 0.1.0

package/src/Accordion/Accordion.tsx

@@ -0,0 +1,88 @@
+import React, { PropsWithChildren } from 'react';
+import * as BaseAccordion from '@radix-ui/react-accordion';
+import { CSS } from '@stitches/react';
+import { ChevronUpIcon } from '@100mslive/react-icons';
+import { Box } from '../Layout';
+import { styled } from '../Theme';
+import { slideDown, slideUp } from '../utils';
+
+const StyledAccordion = styled(BaseAccordion.Root, {});
+
+const StyledItem = styled(BaseAccordion.Item, {
+  marginTop: '$px',
+  display: 'block',
+  '&:first-child': {
+    marginTop: 0,
+    borderTopLeftRadius: '$0',
+    borderTopRightRadius: '$0',
+  },
+  '&:last-child': {
+    borderBottomLeftRadius: '$4',
+    borderBottomRightRadius: '$4',
+  },
+});
+
+const StyledHeader = styled(BaseAccordion.Header, {
+  all: 'unset',
+  display: 'flex',
+  fontFamily: '$sans',
+});
+
+const StyledTrigger = styled(BaseAccordion.Trigger, {
+  all: 'unset',
+  fontFamily: '$sans',
+  flex: 1,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  fontSize: '$md',
+  lineHeight: '$md',
+  color: '$textHighEmp',
+});
+
+const StyledContent = styled(BaseAccordion.Content, {
+  display: 'contents',
+  fontSize: '$md',
+  fontFamily: '$sans',
+  color: '$textMedEmp',
+  '&[data-state="open"]': {
+    animation: `${slideDown('--radix-accordion-content-height')} 300ms cubic-bezier(0.87, 0, 0.13, 1) forwards`,
+  },
+  '&[data-state="closed"]': {
+    animation: `${slideUp('--radix-accordion-content-height')} 300ms cubic-bezier(0.87, 0, 0.13, 1) forwards`,
+  },
+});
+
+const StyledChevron = styled(ChevronUpIcon, {
+  color: '$textPrimary',
+  transition: 'transform 300ms cubic-bezier(0.87, 0, 0.13, 1)',
+  '[data-state=closed] &': { transform: 'rotate(180deg)' },
+});
+
+// Exports
+export const AccordionRoot = StyledAccordion;
+export const AccordionItem = StyledItem;
+
+export const AccordionHeader: React.FC<
+  PropsWithChildren<BaseAccordion.AccordionTriggerProps & { iconStyles?: CSS; css?: CSS }>
+> = React.forwardRef<
+  HTMLButtonElement,
+  PropsWithChildren<BaseAccordion.AccordionTriggerProps & { iconStyles?: CSS; css?: CSS }>
+>(({ children, iconStyles, css, ...props }, forwardedRef) => (
+  <StyledHeader css={css}>
+    <StyledTrigger {...props} ref={forwardedRef}>
+      {children}
+      <StyledChevron aria-hidden css={iconStyles} />
+    </StyledTrigger>
+  </StyledHeader>
+));
+
+export const AccordionContent: React.FC<
+  PropsWithChildren<BaseAccordion.AccordionContentProps & { contentStyles?: CSS }>
+> = React.forwardRef<HTMLDivElement, PropsWithChildren<BaseAccordion.AccordionContentProps & { contentStyles?: CSS }>>(
+  ({ children, contentStyles, ...props }, forwardedRef) => (
+    <StyledContent {...props} ref={forwardedRef}>
+      <Box css={contentStyles}>{children}</Box>
+    </StyledContent>
+  ),
+);

package/src/Accordion/index.ts

@@ -0,0 +1,8 @@
+import { AccordionContent, AccordionHeader, AccordionItem, AccordionRoot } from './Accordion';
+
+export const Accordion = {
+  Root: AccordionRoot,
+  Item: AccordionItem,
+  Content: AccordionContent,
+  Header: AccordionHeader,
+};

package/src/AudioLevel/AudioLevel.tsx

@@ -0,0 +1,34 @@
+import { useCallback, useRef } from 'react';
+import { HMSTrackID } from '@100mslive/hms-video-store';
+import { useAudioLevelStyles } from '@100mslive/react-sdk';
+import { useTheme } from '../Theme';
+
+/**
+ * pass in a track id and get a ref. That ref can be attached to an element which will have border
+ * as per audio level post that.
+ */
+export function useBorderAudioLevel(audioTrackId?: HMSTrackID) {
+  const { theme } = useTheme();
+  const color = theme.colors.brandDefault.value;
+  const getStyle = useCallback(
+    (level: number) => {
+      const style: Record<string, string> = {
+        transition: 'outline 0.4s ease-in-out',
+      };
+      style['outline'] = level ? `${sigmoid(level) * 4}px solid ${color}` : '0px solid transparent';
+      return style;
+    },
+    [color],
+  );
+  const ref = useRef(null);
+  useAudioLevelStyles({
+    trackId: audioTrackId,
+    getStyle,
+    ref,
+  });
+  return ref;
+}
+
+export const sigmoid = (z: number) => {
+  return 1 / (1 + Math.exp(-z));
+};

package/src/AudioLevel/index.ts

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

package/src/Avatar/Avatar.stories.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Avatar } from '.';
+
+export default {
+  title: 'UI Components/Avatar',
+  component: Avatar,
+  argTypes: {
+    ref: { table: { disable: true } },
+  },
+  args: {
+    name: '100ms',
+  },
+} as ComponentMeta<typeof Avatar>;
+
+export const Square: ComponentStory<typeof Avatar> = args => {
+  return <Avatar css={{ width: '50px', height: '50px' }} shape="square" {...args} />;
+};
+
+export const Circle: ComponentStory<typeof Avatar> = args => {
+  return <Avatar css={{ width: '50px', height: '50px' }} shape="circle" {...args} />;
+};
+
+export const Playground = ({ height = 50, width = 50, css = {}, shape = 'circle' as const, name = '' }) => {
+  return <Avatar css={{ width: width, height: height, ...css }} name={name} shape={shape} />;
+};
+
+Playground.storyName = 'Avatar';
+Playground.argTypes = {
+  height: { control: { type: 'number' } },
+  width: { control: { type: 'number' } },
+  shape: { options: ['square', 'circle'], defaultValue: 'square', control: { type: 'select' } },
+};

package/src/Avatar/Avatar.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { VariantProps } from '@stitches/react';
+import { styled } from '../Theme';
+import { getAvatarBg } from './getAvatarBg';
+import { flexCenter } from '../utils/styles';
+
+const getAvatarShape = (radii: string) => ({
+  borderRadius: radii,
+});
+
+export const StyledAvatar = styled('div', {
+  ...flexCenter,
+  color: '$white',
+  fontFamily: '$sans',
+  aspectRatio: 1,
+  fontWeight: 600,
+  fontSize: '$space$9',
+  variants: {
+    shape: {
+      circle: getAvatarShape('$round'),
+      square: getAvatarShape('$1'),
+    },
+    size: {
+      small: {
+        height: '$16 !important',
+        fontSize: '$space$6',
+      },
+      medium: {
+        height: '$18 !important',
+        fontSize: '$space$10',
+      },
+      large: {
+        height: '$20 !important',
+        fontSize: '$space$12',
+      },
+    },
+  },
+  defaultVariants: {
+    shape: 'circle',
+  },
+});
+
+type Props = VariantProps<typeof StyledAvatar> &
+  React.ComponentProps<typeof StyledAvatar> & {
+    name: string;
+  };
+
+export const Avatar: React.FC<Props> = ({ name, css, ...props }) => {
+  const { initials, color } = getAvatarBg(name);
+  return (
+    <StyledAvatar css={{ bg: color, ...css }} {...props}>
+      {initials}
+    </StyledAvatar>
+  );
+};

package/src/Avatar/getAvatarBg.ts

@@ -0,0 +1,46 @@
+const getInitials = (name: string | undefined) => {
+  if (!name) {
+    return undefined;
+  } else {
+    return name
+      .trim()
+      .match(/(^\S\S?|\b\S)?/g)
+      ?.join('')
+      ?.match(/(^\S|\S$)?/g)
+      ?.join('')
+      .toUpperCase();
+  }
+};
+
+/**
+  calculates the initials of the name and choose a background color based on the first later of the initials
+ */
+export const getAvatarBg = (name: string): { initials: string; color: string } => {
+  const initials = getInitials(name);
+  const indexFactor = 20;
+  const colorIndex = ((initials?.codePointAt(0) || 0) % indexFactor) + 1;
+  return { initials: initials || '', color: colorsList[colorIndex - 1] };
+};
+
+const colorsList = [
+  '#616161',
+  '#F44336',
+  '#3F51B5',
+  '#4CAF50',
+  '#FFA000',
+  '#795548',
+  '#E91E63',
+  '#2F80FF',
+  '#8BC34A',
+  '#F57C00',
+  '#4E342E',
+  '#9C27B0',
+  '#00BCD4',
+  '#C0CA33',
+  '#F4511E',
+  '#673AB7',
+  '#009688',
+  '#FBC02D',
+  '#BF360C',
+  '#455A64',
+];

package/src/Avatar/index.ts

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

package/src/Button/Button.mdx

@@ -0,0 +1,43 @@
+import { Story, Props, Preview } from '@storybook/addon-docs';
+
+import { Button } from '.';
+import { HangUpIcon } from '@100mslive/react-icons';
+
+## Button
+
+The button has three possible variants,
+
+- Primary,
+- Standard, and
+- Danger
+
+Button can also have an icon, you can add the icon as a children of that Button. The `icon` attribute will add a padding
+between those children elements.
+
+A Button also have an attribute `outlined` which will add an outline to that Button.
+
+### Primary
+
+<Preview>
+  <Story id="ui-components-button--primary" />
+</Preview>
+
+### Standard
+
+<Preview>
+  <Story id="ui-components-button--standard" />
+</Preview>
+
+### Danger
+
+<Preview>
+  <Story id="ui-components-button--danger" />
+</Preview>
+
+### With Icon
+
+<Preview>
+  <Story id="ui-components-button--with-icon" />
+</Preview>
+
+<Props />

package/src/Button/Button.stories.tsx

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

@@ -0,0 +1,144 @@
+import React, { ComponentPropsWithRef, PropsWithChildren } from 'react';
+import { Flex } from '../Layout';
+import { Loading } from '../Loading';
+import { styled } from '../Theme';
+import { flexCenter } from '../utils/styles';
+
+/**
+ * @param base bg color
+ * @param hover hover state bg color
+ * @param active active state bg color
+ * @returns CSS object based on the state
+ */
+
+const getOutlinedVariants = (base: string, hover: string, active: string, disabled: string) => {
+  return {
+    bg: '$transparent',
+    border: `solid $space$px ${base}`,
+    c: '$textHighEmp',
+    '&[disabled]': {
+      c: '$textAccentDisabled',
+      bg: '$transparent',
+      border: `solid $space$px ${disabled}`,
+      cursor: 'not-allowed',
+    },
+    '&:not([disabled]):hover': {
+      border: `solid $space$px ${hover}`,
+      bg: '$transparent',
+    },
+    '&:not([disabled]):active': {
+      border: `solid $space$px ${active}`,
+      bg: '$transparent',
+    },
+    '&:not([disabled]):focus-visible': {
+      boxShadow: `0 0 0 3px ${base}`,
+    },
+  };
+};
+
+const getButtonVariants = (base: string, hover: string, active: string, disabled: string) => {
+  return {
+    bg: base,
+    border: `1px solid ${base}`,
+    c: '$textAccentHigh',
+    '&[disabled]': {
+      c: '$textAccentDisabled',
+      cursor: 'not-allowed',
+      bg: disabled,
+      border: `1px solid ${disabled}`,
+    },
+    '&:not([disabled]):hover': {
+      bg: hover,
+      border: `1px solid ${hover}`,
+    },
+    '&:not([disabled]):active': {
+      bg: active,
+      border: `1px solid ${active}`,
+    },
+    '&:not([disabled]):focus-visible': {
+      boxShadow: `0 0 0 3px ${base}`,
+    },
+  };
+};
+
+const StyledButton = styled('button', {
+  ...flexCenter,
+  cursor: 'pointer',
+  fontFamily: '$sans',
+  lineHeight: 'inherit',
+  textTransform: 'none',
+  position: 'relative',
+  outline: 'none',
+  border: 'none',
+  fs: '$md',
+  r: '$1',
+  backgroundColor: '$primaryDefault',
+  fontWeight: '500',
+  whiteSpace: 'nowrap',
+  p: '$4 $8',
+  '-webkit-appearance': 'button',
+  '&:focus': {
+    outline: 'none',
+  },
+  '&:not([disabled]):focus-visible': {
+    boxShadow: '0 0 0 3px $colors$primaryDefault',
+  },
+  transition: 'all 0.2s  ease',
+  compoundVariants: [
+    {
+      variant: 'standard',
+      outlined: true,
+      css: getOutlinedVariants('$secondaryDefault', '$secondaryLight', '$secondaryDark', '$secondaryDisabled'),
+    },
+    {
+      variant: 'danger',
+      outlined: true,
+      css: getOutlinedVariants('$errorDefault', '$errorLight', '$errorDark', '$errorDisabled'),
+    },
+    {
+      variant: 'primary',
+      outlined: true,
+      css: getOutlinedVariants('$primaryDefault', '$primaryLight', '$primaryDark', '$primaryDisabled'),
+    },
+  ],
+  variants: {
+    variant: {
+      standard: getButtonVariants('$secondaryDefault', '$secondaryLight', '$secondaryDark', '$secondaryDisabled'),
+      danger: getButtonVariants('$errorDefault', '$errorLight', '$errorDark', '$errorDisabled'),
+      primary: getButtonVariants('$primaryDefault', '$primaryLight', '$primaryDark', '$primaryDisabled'),
+    },
+    outlined: {
+      true: {},
+    },
+    icon: {
+      true: {},
+    },
+  },
+  defaultVariants: {
+    variant: 'primary',
+  },
+});
+
+export const Button = React.forwardRef<
+  HTMLButtonElement,
+  PropsWithChildren<{ loading?: boolean } & ComponentPropsWithRef<typeof StyledButton>>
+>(({ children, loading = false, icon, ...buttonProps }, ref) => {
+  return (
+    <StyledButton {...buttonProps} ref={ref}>
+      <>
+        {loading && (
+          <Flex align="center" justify="center" css={{ w: '100%', position: 'absolute', left: '0' }}>
+            <Loading color="currentColor" />
+          </Flex>
+        )}
+        <Flex
+          align="center"
+          justify="center"
+          css={{ visibility: loading ? 'hidden' : 'visible', gap: icon ? '$4' : '0' }}
+        >
+          {children}
+        </Flex>
+      </>
+    </StyledButton>
+  );
+});

package/src/Button/index.tsx

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

package/src/Chat/Chat.mdx

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

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

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

@@ -0,0 +1,33 @@
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { styled } from '../Theme';
+
+const CheckboxRoot = styled(CheckboxPrimitive.Root, {
+  all: 'unset',
+  border: '1px solid $brandDefault',
+  backgroundColor: '$white',
+  width: '$8',
+  height: '$8',
+  borderRadius: '$0',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  boxShadow: 'none',
+  outline: 'none',
+  cursor: 'pointer',
+  '&:focus': {
+    boxShadow: 'none',
+    outline: 'none',
+  },
+  '&[data-state="checked"]': {
+    backgroundColor: '$brandDefault',
+  },
+});
+
+const CheckboxIndicator = styled(CheckboxPrimitive.Indicator, {
+  color: '$white',
+});
+
+export const Checkbox = {
+  Root: CheckboxRoot,
+  Indicator: CheckboxIndicator,
+};