@100mslive/roomkit-react 0.1.0

package/src/Prebuilt/primitives/DialogContent.jsx

@@ -0,0 +1,280 @@
+import React, { useRef } from 'react';
+import { CheckIcon, CloudUploadIcon, CrossIcon } from '@100mslive/react-icons';
+import { Button } from '../../Button';
+import { Checkbox } from '../../Checkbox';
+import { HorizontalDivider } from '../../Divider';
+import { IconButton } from '../../IconButton';
+import { Input } from '../../Input';
+import { Label } from '../../Label';
+import { Box, Flex } from '../../Layout';
+import { Dialog } from '../../Modal';
+import { Select } from '../../Select';
+import { Switch } from '../../Switch';
+import { Text } from '../../Text';
+
+export const DialogContent = ({ Icon, title, closeable = true, children, css, iconCSS = {}, ...props }) => {
+  return (
+    <Dialog.Portal>
+      <Dialog.Overlay />
+      <Dialog.Content css={{ width: 'min(600px, 100%)', ...css }} {...props}>
+        <Dialog.Title>
+          <Flex justify="between">
+            <Flex align="center" css={{ mb: '$1' }}>
+              {Icon ? (
+                <Box css={{ mr: '$2', color: '$textPrimary', ...iconCSS }}>
+                  <Icon />
+                </Box>
+              ) : null}
+              <Text variant="h6" inline>
+                {title}
+              </Text>
+            </Flex>
+            {closeable && <Dialog.DefaultClose data-testid="dialoge_cross_icon" />}
+          </Flex>
+        </Dialog.Title>
+        <HorizontalDivider css={{ mt: '0.8rem' }} />
+        <Box>{children}</Box>
+      </Dialog.Content>
+    </Dialog.Portal>
+  );
+};
+
+export const ErrorDialog = ({ open = true, onOpenChange, title, children, ...props }) => {
+  return (
+    <Dialog.Root open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        Icon={CrossIcon}
+        title={title}
+        onInteractOutside={e => e.preventDefault()}
+        onEscapeKeyDown={e => e.preventDefault()}
+        onPointerDownOutside={e => e.preventDefault()}
+        closeable={false}
+        iconCSS={{ color: '$error' }}
+        {...props}
+      >
+        <Box css={{ mt: '$lg' }}>{children}</Box>
+      </DialogContent>
+    </Dialog.Root>
+  );
+};
+
+export const RequestDialog = ({ open = true, onOpenChange, title, body, actionText = 'Accept', onAction, Icon }) => (
+  <Dialog.Root open={open} onOpenChange={onOpenChange}>
+    <Dialog.Portal>
+      <Dialog.Overlay />
+      <Dialog.Content css={{ width: 'min(400px,80%)', p: '$10' }}>
+        <Dialog.Title css={{ p: 0, display: 'flex', flexDirection: 'row', gap: '$md' }}>
+          {Icon ? Icon : null}
+          <Text variant="h6">{title}</Text>
+        </Dialog.Title>
+        <Text
+          variant="md"
+          css={{
+            fontWeight: 400,
+            mt: '$4',
+            mb: '$10',
+            c: '$textMedEmp',
+          }}
+        >
+          {body}
+        </Text>
+        <Flex justify="center" align="center" css={{ width: '100%', gap: '$md' }}>
+          <Box css={{ width: '50%' }}>
+            <Dialog.Close css={{ width: '100%' }}>
+              <Button variant="standard" outlined css={{ width: '100%' }}>
+                Cancel
+              </Button>
+            </Dialog.Close>
+          </Box>
+          <Box css={{ width: '50%' }}>
+            <Button variant="primary" css={{ width: '100%' }} onClick={onAction}>
+              {actionText}
+            </Button>
+          </Box>
+        </Flex>
+      </Dialog.Content>
+    </Dialog.Portal>
+  </Dialog.Root>
+);
+
+/**
+ * a row of items which breaks into column on small screen. For e.g. title on left and options to select
+ * from on right for select component.
+ */
+export const DialogRow = ({ children, breakSm = false, css, justify = 'between' }) => {
+  let finalCSS = {
+    margin: '$10 0',
+    w: '100%',
+  };
+  if (breakSm) {
+    finalCSS['@sm'] = {
+      flexDirection: 'column',
+      alignItems: 'flex-start',
+    };
+  }
+  if (css) {
+    finalCSS = Object.assign(finalCSS, css);
+  }
+  return (
+    <Flex align="center" justify={justify} css={finalCSS}>
+      {children}
+    </Flex>
+  );
+};
+
+export const DialogCol = ({ children, breakSm = false, css, align = 'center', justify = 'between', ...props }) => {
+  let finalCSS = {
+    margin: '$10 0',
+    w: '100%',
+  };
+  if (breakSm) {
+    finalCSS['@sm'] = {
+      alignItems: 'flex-start',
+    };
+  }
+  if (css) {
+    finalCSS = Object.assign(finalCSS, css);
+  }
+  return (
+    <Flex direction="column" align={align} justify={justify} css={finalCSS} {...props}>
+      {children}
+    </Flex>
+  );
+};
+
+/**
+ * key field and label field are optional, option is directly used if not passed
+ */
+export const DialogSelect = ({ title, options, keyField, labelField, selected, onChange, ...props }) => {
+  return (
+    <DialogRow breakSm>
+      <Label>{title}</Label>
+      <Select.Root data-testid={`dialog_select_${title}`} css={{ width: '70%', '@sm': { width: '100%' } }} {...props}>
+        <Select.DefaultDownIcon />
+        <Select.Select onChange={e => onChange(e.target.value)} value={selected} css={{ width: '100%' }}>
+          {options.map(option => {
+            const id = keyField ? option[keyField] : option;
+            const label = labelField ? option[labelField] : option;
+            return (
+              <option value={id} key={id}>
+                {label}
+              </option>
+            );
+          })}
+        </Select.Select>
+      </Select.Root>
+    </DialogRow>
+  );
+};
+
+export const DialogInput = ({ title, value, onChange, placeholder, disabled, type, ...props }) => {
+  return (
+    <DialogRow breakSm>
+      <Label>{title}</Label>
+      <Input
+        css={{ width: '70%', '@sm': { width: '100%' } }}
+        value={value}
+        onChange={e => onChange(e.target.value)}
+        placeholder={placeholder}
+        disabled={disabled}
+        type={type}
+        {...props}
+      />
+    </DialogRow>
+  );
+};
+
+export const DialogInputFile = ({ value, onChange, placeholder, disabled, type, ...props }) => {
+  const inputRef = useRef();
+  return (
+    <DialogCol
+      breakSm
+      onClick={() => inputRef.current?.click()}
+      css={{
+        justifyContent: 'center',
+        position: 'relative',
+        cursor: 'pointer',
+        py: '$12',
+        border: '1px dashed $borderLight',
+        r: '$1',
+        height: 'max(140px, 30%)',
+        alignItems: 'center',
+        m: '$6 0',
+      }}
+      gap="8"
+    >
+      <IconButton
+        variant="standard"
+        css={{
+          border: 'none',
+          background: 'none',
+          '&:hover': {
+            border: 'none',
+            background: 'none',
+            bg: '$transparent !important',
+          },
+        }}
+      >
+        <CloudUploadIcon
+          style={{
+            width: '3rem',
+            height: '3rem',
+          }}
+        />
+      </IconButton>
+      <Flex direction="row">
+        <Input
+          ref={inputRef}
+          css={{ width: '70%', '@sm': { width: '100%' } }}
+          value={value}
+          onChange={e => onChange(e.target)}
+          placeholder={placeholder}
+          disabled={disabled}
+          type={type}
+          hidden={true}
+          {...props}
+        />
+        <IconButton
+          variant="standard"
+          css={{
+            background: 'none',
+            border: 'none',
+            textDecoration: 'underline',
+            '&:hover': {
+              background: 'none !important',
+              border: 'none !important',
+            },
+          }}
+        >
+          <Text variant="md">{placeholder}</Text>
+        </IconButton>
+      </Flex>
+    </DialogCol>
+  );
+};
+
+export const DialogSwitch = ({ title, value, onChange, disabled }) => {
+  return (
+    <DialogRow>
+      <Text>{title}</Text>
+      <Flex justify="end" css={{ width: '70%' }}>
+        <Switch checked={value} disabled={disabled} onCheckedChange={onChange} />
+      </Flex>
+    </DialogRow>
+  );
+};
+
+export const DialogCheckbox = ({ title, value, onChange, disabled, css, id }) => {
+  return (
+    <DialogRow css={css}>
+      <Label htmlFor={id} css={{ cursor: 'pointer' }}>
+        {title}
+      </Label>
+      <Checkbox.Root checked={value} onCheckedChange={value => onChange(value)} disabled={disabled} id={id}>
+        <Checkbox.Indicator>
+          <CheckIcon width={16} height={16} />
+        </Checkbox.Indicator>
+      </Checkbox.Root>
+    </DialogRow>
+  );
+};

package/src/Prebuilt/primitives/DropdownTrigger.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { ChevronDownIcon, ChevronUpIcon } from '@100mslive/react-icons';
+import { Dropdown, Flex, Text, textEllipsis } from '../../index';
+
+const DialogDropdownTrigger = React.forwardRef(({ title, css, open, icon, titleCSS = {} }, ref) => {
+  return (
+    <Dropdown.Trigger
+      asChild
+      data-testid={`${title}_selector`}
+      css={{
+        border: '1px solid $borderLight',
+        bg: '$surfaceLight',
+        r: '$1',
+        p: '$6 $9',
+        zIndex: 10,
+        ...css,
+      }}
+      ref={ref}
+    >
+      <Flex
+        css={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          color: '$textHighEmp',
+          w: '100%',
+        }}
+      >
+        {icon}
+        <Text
+          css={{
+            color: 'inherit',
+            ...textEllipsis('90%'),
+            flex: '1 1 0',
+            mx: icon ? '$6' : '0',
+            ...titleCSS,
+          }}
+        >
+          {title}
+        </Text>
+        {open ? <ChevronUpIcon /> : <ChevronDownIcon />}
+      </Flex>
+    </Dropdown.Trigger>
+  );
+});
+
+export { DialogDropdownTrigger };

package/src/Prebuilt/services/FeatureFlags.jsx

@@ -0,0 +1,47 @@
+import { useEffect } from 'react';
+import { selectRoomID, useHMSStore } from '@100mslive/react-sdk';
+
+export class FeatureFlags {
+  static enableTranscription = process.env.REACT_APP_ENABLE_TRANSCRIPTION === 'true';
+  static enableStatsForNerds = process.env.REACT_APP_ENABLE_STATS_FOR_NERDS === 'true';
+  static enableWhiteboard =
+    process.env.REACT_APP_ENABLE_WHITEBOARD &&
+    process.env.REACT_APP_PUSHER_APP_KEY &&
+    process.env.REACT_APP_PUSHER_AUTHENDPOINT;
+  static enableBeamSpeakersLogging = process.env.REACT_APP_ENABLE_BEAM_SPEAKERS_LOGGING === 'true';
+
+  static init(roomId) {
+    if (!window.HMS) {
+      window.HMS = {};
+    }
+    // some extra config to hls js to bring down latency
+    window.HMS.OPTIMISE_HLS_LATENCY = false;
+    // ask permissions in preview even if role doesn't have it
+    window.HMS.ALWAYS_REQUEST_PERMISSIONS = false;
+    window.HMS.SHOW_NS = process.env.REACT_APP_ENV !== 'prod';
+
+    this.enableTranscription = process.env.REACT_APP_TRANSCRIPTION_ROOM_ID === roomId;
+  }
+
+  static showNS() {
+    return window.HMS.SHOW_NS;
+  }
+
+  static optimiseHLSLatency() {
+    return window.HMS.OPTIMISE_HLS_LATENCY;
+  }
+
+  static alwaysRequestPermissions() {
+    return window.HMS.ALWAYS_REQUEST_PERMISSIONS;
+  }
+}
+
+export function FeatureFlagsInit() {
+  const roomId = useHMSStore(selectRoomID);
+  useEffect(() => {
+    if (roomId) {
+      FeatureFlags.init(roomId);
+    }
+  }, [roomId]);
+  return null;
+}

package/src/Prebuilt/services/tokenService.js

@@ -0,0 +1,49 @@
+/**
+ * @param {RequestInfo} url
+ * @param {RequestInit} options
+ * @returns {Promise<Response>}
+ */
+const fetchWithRetry = async (url, options) => {
+  const MAX_RETRIES = 4;
+  let error = Error('something went wrong');
+  for (let i = 0; i < MAX_RETRIES; i++) {
+    try {
+      return await fetch(url, options);
+    } catch (err) {
+      error = err;
+    }
+  }
+  console.error('Fetch failed after max retries', { url, options });
+  throw error;
+};
+
+export default async function getToken(tokenEndpoint, userId, role, roomId) {
+  try {
+    const response = await fetchWithRetry(`${tokenEndpoint}api/token`, {
+      method: 'POST',
+      body: JSON.stringify({
+        role,
+        room_id: roomId,
+        user_id: userId,
+      }),
+    });
+
+    if (!response.ok) {
+      let error = new Error('Request failed!');
+      error.response = response;
+      throw error;
+    }
+
+    const data = await response.json();
+    const { token } = data;
+    // response will be sucess and token is null when url is valid but response
+    // domain is not present in 100ms
+    if (token === null) {
+      throw Error(data.msg);
+    }
+    return token;
+  } catch (err) {
+    console.error(err);
+    throw err;
+  }
+}

package/src/Progress/index.tsx

@@ -0,0 +1,17 @@
+import { Indicator, Root } from '@radix-ui/react-progress';
+import { styled } from '../Theme';
+
+const StyledIndicator = styled(Indicator, { h: '$4', backgroundColor: '$primaryDefault' });
+
+const StyledRoot = styled(Root, {
+  w: '100%',
+  h: '$4',
+  borderRadius: '$round',
+  backgroundColor: '$secondaryDark',
+  overflow: 'hidden',
+});
+
+export const Progress = {
+  Root: StyledRoot,
+  Content: StyledIndicator,
+};

package/src/QRCode/QRCode.mdx

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

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

@@ -0,0 +1,6 @@
+import React, { ComponentProps } from 'react';
+import { QRCodeSVG } from 'qrcode.react';
+
+export const QRCode = (props: ComponentProps<typeof QRCodeSVG>) => {
+  return <QRCodeSVG style={{ width: '100%', height: '100%' }} {...props} />;
+};

package/src/QRCode/index.tsx

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

package/src/RadioGroup/RadioGroup.stories.tsx

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

@@ -0,0 +1,33 @@
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { styled } from '../Theme';
+
+const RadioGroupRoot = styled(RadioGroupPrimitive.Root, {
+  display: 'flex',
+  alignItems: 'center',
+});
+
+const RadioGroupItem = styled(RadioGroupPrimitive.Item, {
+  bg: '$white',
+  width: '$8',
+  height: '$8',
+  border: '1px solid $brandDefault',
+  cursor: 'pointer',
+  borderRadius: '$round',
+  '&:focus': {
+    boxShadow: 'none',
+    outline: 'none',
+  },
+  '&[data-state="checked"]': {
+    borderWidth: '$space$2',
+    p: '$1',
+  },
+});
+const RadioGroupIndicator = styled(RadioGroupPrimitive.Indicator, {
+  bg: '$brandDefault',
+});
+
+export const RadioGroup = {
+  Root: RadioGroupRoot,
+  Item: RadioGroupItem,
+  Indicator: RadioGroupIndicator,
+};

package/src/RadioGroup/index.tsx

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

package/src/ReactSelect/ReactSelect.stories.tsx

@@ -0,0 +1,83 @@
+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: '$bgSecondary' }}>
+        <Select.Value />
+        <Flex css={{ color: '$textPrimary' }}>
+          <ChevronDownIcon />
+        </Flex>
+      </Select.Trigger>
+      <Select.Content>
+        <Select.ScrollUpButton css={{ color: '$textPrimary' }}>
+          <ChevronUpIcon />
+        </Select.ScrollUpButton>
+        <Select.Viewport>
+          {Object.keys(data).map((item: string, index: number) => (
+            <>
+              <Select.Group>
+                <Select.Label>
+                  <Text variant="xs" css={{ color: '$textSecondary' }}>
+                    {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: '$textPrimary' }}>
+                      <CheckIcon />
+                    </Select.ItemIndicator>
+                  </Select.Item>
+                ))}
+              </Select.Group>
+              {index < Object.keys(data).length - 1 && <Select.Separator css={{ bg: '$borderDefault' }} />}
+            </>
+          ))}
+        </Select.Viewport>
+        <Select.ScrollDownButton css={{ color: '$textPrimary' }}>
+          <ChevronDownIcon />
+        </Select.ScrollDownButton>
+      </Select.Content>
+    </Select.Root>
+  );
+};
+
+export const WithGroup = Template.bind({});
+WithGroup.storyName = 'ReactSelect';