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

package/src/Prebuilt/provider/roomLayoutProvider/hooks/useRoomLayoutScreen.ts

@@ -1,112 +0,0 @@
-import { useMemo } from 'react';
-import {
-  ConferencingScreen,
-  DefaultConferencingScreen_Elements,
-  DefaultPreviewScreen_Elements,
-  HLSLiveStreamingScreen_Elements,
-  LeaveScreen,
-  PreviewScreen,
-  Screens,
-} from '@100mslive/types-prebuilt';
-import {
-  selectHLSState,
-  selectPeerCount,
-  selectRoomStartTime,
-  useHMSStore,
-  useRecordingStreaming,
-} from '@100mslive/react-sdk';
-import { useRoomLayout } from '..';
-// @ts-ignore
-import { getFormattedCount } from '../../../common/utils';
-
-export type useRoomLayoutScreenProps = {
-  screen: keyof Screens;
-};
-
-type useRoomLayoutScreenReturnType<T extends useRoomLayoutScreenProps> = T['screen'] extends 'conferencing'
-  ? ConferencingScreen
-  : T['screen'] extends 'leave'
-  ? LeaveScreen
-  : T['screen'] extends 'preview'
-  ? PreviewScreen
-  : undefined;
-
-function useRoomLayoutScreen<T extends useRoomLayoutScreenProps>({
-  screen,
-}: T): useRoomLayoutScreenReturnType<T> | undefined {
-  const roomLayout = useRoomLayout();
-  const screenProps = roomLayout?.screens?.[screen] as useRoomLayoutScreenReturnType<T> | undefined;
-  return screenProps;
-}
-
-type PreviewKeys = Omit<PreviewScreen, 'skip_preview_screen'>;
-
-export function useRoomLayoutPreviewScreen() {
-  const screenProps = useRoomLayoutScreen({ screen: 'preview' });
-  const isPreviewScreenEnabled = !!screenProps && !screenProps?.skip_preview_screen;
-  let elements: DefaultPreviewScreen_Elements | undefined;
-  let screenType: keyof PreviewKeys | undefined;
-  if (isPreviewScreenEnabled) {
-    screenType = Object.keys(screenProps).filter(key => key !== 'skip_preview_screen')[0] as keyof PreviewKeys;
-    elements = screenProps[screenType]?.elements;
-  }
-  return {
-    isPreviewScreenEnabled,
-    elements,
-    screenType,
-  };
-}
-
-export type ConferencingScreenElements = DefaultConferencingScreen_Elements & HLSLiveStreamingScreen_Elements;
-
-export function useRoomLayoutConferencingScreen() {
-  const screenProps = useRoomLayoutScreen({ screen: 'conferencing' }) || {};
-  const screenType = Object.keys(screenProps)[0] as keyof ConferencingScreen;
-  const elements = screenProps[screenType]?.elements as ConferencingScreenElements;
-  // @ts-ignore
-  const hideSections: string[] = screenProps[screenType]?.hideSections || [];
-  return {
-    hideSections,
-    elements,
-    screenType,
-  };
-}
-
-export function useRoomLayoutLeaveScreen() {
-  const screenProps = useRoomLayoutScreen({ screen: 'leave' });
-  const isLeaveScreenEnabled = !!screenProps;
-  return {
-    isLeaveScreenEnabled,
-    feedback: screenProps?.default?.elements?.feedback,
-  };
-}
-
-export function useRoomLayoutHeader() {
-  const { elements } = useRoomLayoutConferencingScreen();
-  // return elements.header;
-  const { isRecordingOn } = useRecordingStreaming();
-  const peerCount = useHMSStore(selectPeerCount);
-  const sessionStartedAt = useHMSStore(selectRoomStartTime);
-  const hlsState = useHMSStore(selectHLSState);
-
-  // People watching, start timestamp, recording status
-  const details = useMemo(() => {
-    const details = [];
-    if (hlsState?.variants[0]?.['startedAt']) {
-      details.push(`${getFormattedCount(peerCount)} watching`);
-      details.push(hlsState.variants[0]['startedAt']);
-    } else if (sessionStartedAt) {
-      details.push(sessionStartedAt);
-    }
-    if (isRecordingOn) {
-      details.push('Recording');
-    }
-    return details;
-  }, [hlsState?.variants, isRecordingOn, peerCount, sessionStartedAt]);
-
-  return {
-    title: elements.header?.title || '',
-    description: elements.header?.description || '',
-    details,
-  };
-}

package/src/Prebuilt/provider/roomLayoutProvider/index.tsx

@@ -1,53 +0,0 @@
-import React from 'react';
-import type { Layout } from '@100mslive/types-prebuilt';
-import { isArray, mergeWith } from 'lodash';
-// @ts-ignore: fix types
-import { useAuthToken } from '../../components/AppData/useUISettings';
-import { useFetchRoomLayout, useFetchRoomLayoutResponse } from './hooks/useFetchRoomLayout';
-
-export type RoomLayoutProviderProps = {
-  roomLayoutEndpoint?: string;
-  overrideLayout?: Partial<Layout>;
-};
-
-export const RoomLayoutContext = React.createContext<
-  | {
-      layout: Layout | undefined;
-      updateRoomLayoutForRole: useFetchRoomLayoutResponse['updateRoomLayoutForRole'] | undefined;
-      setOriginalLayout: useFetchRoomLayoutResponse['setOriginalLayout'] | undefined;
-    }
-  | undefined
->(undefined);
-
-// The default merge in lodash merges the values of current layout and the changes.
-// This behaviour makes changes in array based values inconsistent since a union happens.
-// The customizer uses the new value provided if one of the values is an array
-function customizer(objValue: unknown, srcValue: unknown) {
-  if (isArray(objValue) || isArray(srcValue)) {
-    return srcValue;
-  }
-  // default merge behaviour is followed
-  return undefined;
-}
-
-export const RoomLayoutProvider: React.FC<React.PropsWithChildren<RoomLayoutProviderProps>> = ({
-  children,
-  roomLayoutEndpoint,
-  overrideLayout,
-}) => {
-  const authToken: string = useAuthToken();
-  const { layout, updateRoomLayoutForRole, setOriginalLayout } = useFetchRoomLayout({
-    authToken,
-    endpoint: roomLayoutEndpoint,
-  });
-  const mergedLayout = authToken && layout ? mergeWith(layout, overrideLayout, customizer) : layout;
-  return (
-    <RoomLayoutContext.Provider value={{ layout: mergedLayout, updateRoomLayoutForRole, setOriginalLayout }}>
-      {children}
-    </RoomLayoutContext.Provider>
-  );
-};
-
-export const useRoomLayout = () => React.useContext(RoomLayoutContext)?.layout;
-export const useUpdateRoomLayout = () => React.useContext(RoomLayoutContext)?.updateRoomLayoutForRole;
-export const useSetOriginalLayout = () => React.useContext(RoomLayoutContext)?.setOriginalLayout;

package/src/Prebuilt/services/FeatureFlags.jsx

@@ -1,46 +0,0 @@
-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 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/Progress/index.tsx

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

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

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

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

@@ -1,33 +0,0 @@
-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: '$on_primary_high',
-  width: '$8',
-  height: '$8',
-  border: '1px solid $primary_default',
-  cursor: 'pointer',
-  borderRadius: '$round',
-  '&:focus': {
-    boxShadow: 'none',
-    outline: 'none',
-  },
-  '&[data-state="checked"]': {
-    borderWidth: '$space$2',
-    p: '$1',
-  },
-});
-const RadioGroupIndicator = styled(RadioGroupPrimitive.Indicator, {
-  bg: '$primary_default',
-});
-
-export const RadioGroup = {
-  Root: RadioGroupRoot,
-  Item: RadioGroupItem,
-  Indicator: RadioGroupIndicator,
-};

package/src/RadioGroup/index.tsx

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

@@ -1,97 +0,0 @@
-import * as SelectPrimitive from '@radix-ui/react-select';
-import { styled } from '../Theme';
-
-const StyledRoot = styled(SelectPrimitive.Root, {});
-
-const StyledTrigger = styled(SelectPrimitive.SelectTrigger, {
-  all: 'unset',
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  borderRadius: '$2',
-  padding: '$8',
-  lineHeight: '$px',
-  gap: '$8',
-  backgroundColor: '$secondary_default',
-  color: '$on_primary_high',
-  fontSize: '$8',
-  cursor: 'pointer',
-  r: '$1',
-});
-
-const StyledContent = styled(SelectPrimitive.Content, {
-  overflow: 'hidden',
-  backgroundColor: '$surface_bright',
-  r: '$1',
-  h: '$80',
-});
-
-const StyledViewport = styled(SelectPrimitive.Viewport, {
-  padding: '$3',
-});
-
-const StyledItem = styled(SelectPrimitive.Item, {
-  all: 'unset',
-  fontSize: '$7',
-  r: '$1',
-  display: 'flex',
-  p: '$4 $8',
-  w: '$52',
-  position: 'relative',
-  userSelect: 'none',
-  cursor: 'pointer',
-});
-
-const StyledLabel = styled(SelectPrimitive.Label, {
-  p: '$4 $8',
-  lineHeight: '$10',
-  color: '$on_primary_high',
-});
-
-const StyledSeparator = styled(SelectPrimitive.Separator, {
-  height: '$px',
-  backgroundColor: '$on_primary_high',
-  margin: '$4',
-  opacity: 0.4,
-});
-
-const StyledItemIndicator = styled(SelectPrimitive.ItemIndicator, {
-  position: 'absolute',
-  right: '$8',
-  width: '$8',
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  color: '$on_primary_high',
-});
-
-const scrollButtonStyles = {
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  p: '$4',
-  backgroundColor: '$surface_bright',
-  color: '$on_primary_high',
-  cursor: 'default',
-};
-
-const StyledScrollUpButton = styled(SelectPrimitive.ScrollUpButton, scrollButtonStyles);
-
-const StyledScrollDownButton = styled(SelectPrimitive.ScrollDownButton, scrollButtonStyles);
-
-export const Select = {
-  Root: StyledRoot,
-  Trigger: StyledTrigger,
-  Content: StyledContent,
-  Viewport: StyledViewport,
-  Item: StyledItem,
-  Label: StyledLabel,
-  Separator: StyledSeparator,
-  ItemIndicator: StyledItemIndicator,
-  ScrollUpButton: StyledScrollUpButton,
-  ScrollDownButton: StyledScrollDownButton,
-  Value: SelectPrimitive.Value,
-  Icon: SelectPrimitive.Icon,
-  ItemText: SelectPrimitive.ItemText,
-  Group: SelectPrimitive.Group,
-};

package/src/ReactSelect/index.ts

@@ -1 +0,0 @@
-export { Select } from './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/Select/Select.tsx

@@ -1,63 +0,0 @@
-import React from 'react';
-import { ChevronDownIcon } from '@100mslive/react-icons';
-import { styled } from '../Theme';
-
-const Root = styled('div', {
-  color: '$on_primary_high',
-  display: 'inline-flex',
-  position: 'relative',
-  outline: 'none',
-  overflow: 'hidden',
-  borderRadius: '$1',
-  backgroundColor: '$surface_default',
-  maxWidth: '100%',
-});
-
-// TODO: replace these with tokens
-const SelectRoot = styled('select', {
-  h: '$16',
-  fontSize: '$md',
-  fontWeight: '500',
-  lineHeight: 'inherit',
-  textTransform: 'none',
-  appearance: 'none',
-  color: '$on_secondary_high',
-  padding: '5px',
-  paddingLeft: '12px',
-  paddingRight: '30px',
-  border: 'none',
-  borderRadius: '8px',
-  backgroundColor: '$secondary_default',
-  '&:not([disabled]):focus-visible': {
-    boxShadow: '0 0 0 3px $colors$primary_default',
-  },
-  '&[disabled]': {
-    opacity: 0.5,
-    cursor: 'not-allowed',
-  },
-});
-
-const Arrow = styled('span', {
-  color: '$on_secondary_high',
-  width: '30px',
-  height: '100%',
-  position: 'absolute',
-  right: 0,
-  pointerEvents: 'none',
-  display: 'flex',
-  alignItems: 'center',
-  transition: 'border .2s ease 0s',
-});
-
-const DefaultDownIcon = ({ ...props }) => (
-  <Arrow {...props}>
-    <ChevronDownIcon />
-  </Arrow>
-);
-
-export const Select = {
-  Root,
-  DownIcon: Arrow,
-  DefaultDownIcon,
-  Select: SelectRoot,
-};

package/src/Select/index.ts

@@ -1 +0,0 @@
-export { Select } from './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" />