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

package/src/Button/Button.tsx

@@ -1,210 +0,0 @@
-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,
-  text: string,
-  textDisabled: string,
-  textHover?: string,
-) => {
-  return {
-    bg: 'transparent',
-    border: `solid $space$px $colors${base}`,
-    c: text,
-    '&[disabled]': {
-      c: textDisabled,
-      bg: 'transparent',
-      border: `solid $space$px $colors${disabled}`,
-      cursor: 'not-allowed',
-    },
-    '&:not([disabled]):hover': {
-      c: textHover,
-      border: `solid $space$px $colors${hover}`,
-      bg: 'transparent',
-    },
-    '&:not([disabled]):active': {
-      border: `solid $space$px $colors${active}`,
-      bg: 'transparent',
-    },
-    '&:not([disabled]):focus-visible': {
-      boxShadow: `0 0 0 3px $colors${base}`,
-    },
-  };
-};
-
-const getButtonVariants = (
-  base: string,
-  hover: string,
-  active: string,
-  disabled: string,
-  text: string,
-  textDisabled: string,
-  textHover?: string,
-) => {
-  return {
-    bg: base,
-    border: `1px solid ${base}`,
-    c: text,
-    '&[disabled]': {
-      c: textDisabled,
-      cursor: 'not-allowed',
-      bg: disabled,
-      border: `1px solid ${disabled}`,
-    },
-    '&:not([disabled]):hover': {
-      c: textHover,
-      bg: hover,
-      border: `1px solid ${hover}`,
-    },
-    '&:not([disabled]):active': {
-      bg: active,
-      border: `1px solid ${active}`,
-    },
-    '&:not([disabled]):focus-visible': {
-      boxShadow: `0 0 0 3px $colors${hover}`,
-    },
-  };
-};
-
-const StyledButton = styled('button', {
-  ...flexCenter,
-  cursor: 'pointer',
-  fontFamily: '$sans',
-  lineHeight: 'inherit',
-  textTransform: 'none',
-  position: 'relative',
-  outline: 'none',
-  border: 'none',
-  fs: '$md',
-  r: '$1',
-  backgroundColor: '$primary_default',
-  fontWeight: '500',
-  whiteSpace: 'nowrap',
-  p: '$4 $8',
-  '-webkit-appearance': 'button',
-  '&:focus': {
-    outline: 'none',
-  },
-  '&:not([disabled]):focus-visible': {
-    boxShadow: '0 0 0 3px $colors$primary_default',
-  },
-  transition: 'all 0.2s  ease',
-  compoundVariants: [
-    {
-      variant: 'standard',
-      outlined: true,
-      css: getOutlinedVariants(
-        '$secondary_default',
-        '$secondary_bright',
-        '$secondary_dim',
-        '$secondary_disabled',
-        '$on_surface_high',
-        '$on_surface_low',
-      ),
-    },
-    {
-      variant: 'danger',
-      outlined: true,
-      css: getOutlinedVariants(
-        '$alert_error_default',
-        '$alert_error_bright',
-        '$alert_error_dim',
-        '$alert_error_brighter',
-        '$on_surface_high',
-        '$on_surface_low',
-        '$on_surface_high',
-      ),
-    },
-    {
-      variant: 'primary',
-      outlined: true,
-      css: getOutlinedVariants(
-        '$primary_default',
-        '$primary_bright',
-        '$primary_dim',
-        '$primary_disabled',
-        '$on_surface_high',
-        '$on_surface_low',
-      ),
-    },
-  ],
-  variants: {
-    variant: {
-      standard: getButtonVariants(
-        '$secondary_default',
-        '$secondary_bright',
-        '$secondary_dim',
-        '$secondary_disabled',
-        '$on_secondary_high',
-        '$on_secondary_low',
-      ),
-      danger: getButtonVariants(
-        '$alert_error_default',
-        '$alert_error_bright',
-        '$alert_error_dim',
-        '$alert_error_dim',
-        '$alert_error_brighter',
-        '$on_primary_low',
-        '$on_primary_high',
-      ),
-      primary: getButtonVariants(
-        '$primary_default',
-        '$primary_bright',
-        '$primary_dim',
-        '$primary_disabled',
-        '$on_primary_high',
-        '$on_primary_low',
-      ),
-    },
-    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', color: '$on_primary_low' }}
-          >
-            <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

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

package/src/Chat/Chat.mdx

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

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

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

@@ -1,35 +0,0 @@
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { styled } from '../Theme';
-
-const CheckboxRoot = styled(CheckboxPrimitive.Root, {
-  all: 'unset',
-  border: '1px solid $primary_default',
-  backgroundColor: '$on_primary_high',
-  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: '$primary_default',
-  },
-});
-
-const CheckboxIndicator = styled(CheckboxPrimitive.Indicator, {
-  color: '$on_primary_high',
-  // center check svg within button box
-  lineHeight: 0,
-});
-
-export const Checkbox = {
-  Root: CheckboxRoot,
-  Indicator: CheckboxIndicator,
-};

package/src/Checkbox/index.tsx

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

package/src/Collapsible/Collapsible.tsx

@@ -1,34 +0,0 @@
-import { Content, Root, Trigger } from '@radix-ui/react-collapsible';
-import { styled } from '../Theme';
-import { slideDown, slideUp } from '../utils';
-
-const CollapsibleRoot = styled(Root, {});
-
-const CollapsibleTrigger = styled(Trigger, {
-  cursor: 'pointer',
-  appearance: 'none !important',
-  '&:focus': {
-    outline: 'none',
-  },
-  '&:focus-visible': {
-    boxShadow: '0 0 0 3px $colors$primary_default',
-  },
-});
-
-const CollapsibleContent = styled(Content, {
-  w: '$80',
-  r: '$1',
-  overflowY: 'auto',
-  '&[data-state="open"]': {
-    animation: `${slideDown('--radix-collapsible-content-height')} 300ms cubic-bezier(0.87, 0, 0.13, 1) forwards`,
-  },
-  '&[data-state="closed"]': {
-    animation: `${slideUp('--radix-collapsible-content-height')} 300ms cubic-bezier(0.87, 0, 0.13, 1) forwards`,
-  },
-});
-
-export const Collapsible = {
-  Root: CollapsibleRoot,
-  Trigger: CollapsibleTrigger,
-  Content: CollapsibleContent,
-};

package/src/Collapsible/index.tsx

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

package/src/Diagnostics/AudioTest.tsx

@@ -1,188 +0,0 @@
-/* eslint-disable react/prop-types */
-import React, { useCallback, useEffect, useState } from 'react';
-import {
-  HMSException,
-  selectDevices,
-  selectLocalAudioTrackID,
-  selectLocalMediaSettings,
-  selectTrackAudioByID,
-  useHMSActions,
-  useHMSStore,
-} from '@100mslive/react-sdk';
-import { MicOnIcon, SpeakerIcon, StopIcon } from '@100mslive/react-icons';
-import { PermissionErrorModal } from '../Prebuilt/components/Notifications/PermissionErrorModal';
-import { TestContainer, TestFooter } from './components';
-import { Button } from '../Button';
-import { Box, Flex } from '../Layout';
-import { Progress } from '../Progress';
-import { Text } from '../Text';
-// @ts-ignore: No implicit any
-import { DeviceSelector } from './DeviceSelector';
-import { DiagnosticsStep, useDiagnostics } from './DiagnosticsContext';
-import { useAudioOutputTest } from '../Prebuilt/components/hooks/useAudioOutputTest';
-import { TEST_AUDIO_URL } from '../Prebuilt/common/constants';
-
-const SelectContainer = ({ children }: { children: React.ReactNode }) => (
-  <Box css={{ w: 'calc(50% - 0.75rem)', '@lg': { w: '100%' } }}>{children}</Box>
-);
-
-const MicTest = ({ setError }: { setError: (err?: Error) => void }) => {
-  const { hmsDiagnostics } = useDiagnostics();
-  const devices = useHMSStore(selectDevices);
-  const [isRecording, setIsRecording] = useState(false);
-  const [selectedMic, setSelectedMic] = useState(devices.audioInput[0]?.deviceId || 'default');
-  const trackID = useHMSStore(selectLocalAudioTrackID);
-  const audioLevel = useHMSStore(selectTrackAudioByID(trackID));
-  const { audioOutputDeviceId } = useHMSStore(selectLocalMediaSettings);
-  const { playing, setPlaying, audioRef } = useAudioOutputTest({
-    deviceId: audioOutputDeviceId || devices.audioOutput[0]?.deviceId,
-  });
-
-  return (
-    <SelectContainer>
-      <DeviceSelector
-        title="Microphone (Input)"
-        devices={devices.audioInput}
-        selection={selectedMic}
-        icon={<MicOnIcon />}
-        onChange={(deviceId: string) => {
-          setError(undefined);
-          setSelectedMic(deviceId);
-          hmsDiagnostics?.stopMicCheck();
-        }}
-      />
-      <Flex css={{ gap: '$6', alignItems: 'center' }}>
-        <Button
-          variant="standard"
-          icon
-          onClick={() => {
-            isRecording
-              ? hmsDiagnostics?.stopMicCheck()
-              : hmsDiagnostics
-                  ?.startMicCheck({
-                    inputDevice: selectedMic,
-                    onError: (err: Error) => {
-                      setError(err);
-                    },
-                    onStop: () => {
-                      setIsRecording(false);
-                    },
-                  })
-                  .then(() => {
-                    setIsRecording(true);
-                  });
-          }}
-          disabled={devices.audioInput.length === 0 || playing}
-        >
-          {isRecording ? <StopIcon /> : <MicOnIcon />}
-          {isRecording ? 'Stop Recording' : 'Record'}
-        </Button>
-
-        <Button
-          icon
-          variant="standard"
-          outlined={hmsDiagnostics?.getRecordedAudio() === TEST_AUDIO_URL}
-          onClick={() => {
-            if (audioRef.current) {
-              audioRef.current.src = hmsDiagnostics?.getRecordedAudio() || '';
-              audioRef.current.play();
-            }
-          }}
-          disabled={playing || hmsDiagnostics?.getRecordedAudio() === TEST_AUDIO_URL}
-        >
-          <SpeakerIcon />
-          {playing ? 'Playing...' : 'Playback'}
-        </Button>
-        <audio
-          ref={audioRef}
-          onEnded={() => setPlaying(false)}
-          onPlay={() => setPlaying(true)}
-          style={{ display: 'none' }}
-        />
-      </Flex>
-
-      <Flex align="center" css={{ mt: '$4', maxWidth: '10rem', opacity: isRecording ? '1' : '0', gap: '$4' }}>
-        <Text>
-          <MicOnIcon />
-        </Text>
-        <Progress.Root value={audioLevel} css={{ h: '$2' }}>
-          <Progress.Content
-            style={{
-              transform: `translateX(-${100 - audioLevel}%)`,
-              transition: 'transform 0.3s',
-            }}
-          />
-        </Progress.Root>
-      </Flex>
-    </SelectContainer>
-  );
-};
-
-const SpeakerTest = () => {
-  const actions = useHMSActions();
-  const devices = useHMSStore(selectDevices);
-  const { audioOutputDeviceId } = useHMSStore(selectLocalMediaSettings);
-
-  if (devices.audioOutput.length === 0) {
-    return <></>;
-  }
-
-  return (
-    <SelectContainer>
-      <DeviceSelector
-        title="Speaker (Output)"
-        devices={devices.audioOutput}
-        selection={audioOutputDeviceId || devices.audioOutput[0]?.deviceId}
-        icon={<SpeakerIcon />}
-        onChange={(deviceId: string) => {
-          actions.setAudioOutputDevice(deviceId);
-        }}
-      />
-    </SelectContainer>
-  );
-};
-
-export const AudioTest = () => {
-  const { hmsDiagnostics, updateStep } = useDiagnostics();
-  const [error, setErrorAlone] = useState<Error | undefined>();
-
-  const setError = useCallback(
-    (err?: Error) => {
-      updateStep(DiagnosticsStep.AUDIO, { hasFailed: !!err });
-      setErrorAlone(err);
-    },
-    [updateStep, setErrorAlone],
-  );
-
-  useEffect(() => {
-    hmsDiagnostics?.requestPermission({ audio: true }).catch(error => setError(error));
-  }, [hmsDiagnostics, setError]);
-
-  return (
-    <>
-      <TestContainer>
-        <Text variant="body2" css={{ c: '$on_primary_medium' }}>
-          Record a 10 second audio clip and play it back to check that your microphone and speaker are working. If they
-          aren't, make sure your volume is turned up, try a different speaker or microphone, or check your bluetooth
-          settings.
-        </Text>
-
-        <Flex
-          css={{
-            mt: '$10',
-            gap: '$10',
-            '@lg': {
-              flexDirection: 'column',
-              gap: '$8',
-            },
-          }}
-        >
-          <MicTest setError={setError} />
-          <SpeakerTest />
-        </Flex>
-      </TestContainer>
-      <TestFooter error={error} ctaText="Does your audio sound good?" />
-      <PermissionErrorModal error={error as HMSException} />
-    </>
-  );
-};