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

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.4.3-alpha.1",
+  "version": "0.4.3-alpha.10",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -19,8 +19,7 @@
     "directory": "packages/roomkit-react"
   },
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "exports": {
     ".": {
@@ -56,19 +55,18 @@
     "babel-loader": "^8.2.5",
     "babel-plugin-react-require": "3.1.3",
     "esbuild-loader": "^4.0.2",
-    "knip": "^5.11.0",
     "react": "^18.1.0"
   },
   "peerDependencies": {
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.4.3-alpha.1",
-    "@100mslive/hms-noise-cancellation": "0.0.2",
-    "@100mslive/hms-virtual-background": "1.14.3-alpha.1",
-    "@100mslive/hms-whiteboard": "0.1.3-alpha.1",
-    "@100mslive/react-icons": "0.11.3-alpha.1",
-    "@100mslive/react-sdk": "0.11.3-alpha.1",
+    "@100mslive/hls-player": "0.4.3-alpha.10",
+    "@100mslive/hms-noise-cancellation": "0.0.3",
+    "@100mslive/hms-virtual-background": "1.14.3-alpha.10",
+    "@100mslive/hms-whiteboard": "0.1.3-alpha.10",
+    "@100mslive/react-icons": "0.11.3-alpha.10",
+    "@100mslive/react-sdk": "0.11.3-alpha.10",
     "@100mslive/types-prebuilt": "0.12.12",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -105,5 +103,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "5d1b47f6f2515d6e11e2179c14c3b388403df1ac"
+  "gitHead": "1ee21ecfbbd262d52bdf3ed9adb86f882f50af66"
 }

package/src/Accordion/Accordion.tsx

@@ -1,88 +0,0 @@
-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: '$on_surface_high',
-});
-
-const StyledContent = styled(BaseAccordion.Content, {
-  display: 'contents',
-  fontSize: '$md',
-  fontFamily: '$sans',
-  color: '$on_surface_medium',
-  '&[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: '$on_primary_high',
-  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; chevronID?: string }>
-> = React.forwardRef<
-  HTMLButtonElement,
-  PropsWithChildren<BaseAccordion.AccordionTriggerProps & { iconStyles?: CSS; css?: CSS; chevronID?: string }>
->(({ children, iconStyles, css, chevronID, ...props }, forwardedRef) => (
-  <StyledHeader css={css}>
-    <StyledTrigger {...props} ref={forwardedRef}>
-      {children}
-      <StyledChevron data-testid={chevronID} 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

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

package/src/AudioLevel/AudioLevel.tsx

@@ -1,84 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import { selectTrackAudioByID, useHMSVanillaStore } from '@100mslive/react-sdk';
-import { Box, Flex } from '../Layout';
-import { keyframes } from '../Theme';
-//@ts-ignore
-import bg from './audio-level.png';
-
-// keep the calculated values before hand to avoid recalcuation everytime
-const positionValues = new Array(101).fill(0).reduce((acc, _, index) => {
-  acc[index] = Math.round((index / 100) * 4) / 4; // convert to 0.25 multiples
-  return acc;
-}, {});
-
-const barAnimation = keyframes({
-  from: {
-    maskSize: '4em .8em',
-    '-webkit-mask-position-y': '.1em',
-    maskPosition: 'initial .1em',
-  },
-
-  '50%': {
-    maskSize: '4em 1em',
-    '-webkit-mask-position-y': 0,
-    maskPosition: 'initial 0',
-  },
-
-  to: {
-    maskSize: '4em .8em',
-    '-webkit-mask-position-y': '.1em',
-    maskPosition: 'initial 0.1em',
-  },
-});
-
-const AudioBar = () => {
-  return (
-    <Box
-      css={{
-        width: '.25em',
-        height: '1em',
-        maskImage: `url(${bg})`,
-        '-webkit-mask-repeat': 'no-repeat',
-        backgroundColor: '$on_primary_high',
-        maskSize: '4em 1em',
-      }}
-    />
-  );
-};
-
-export const AudioLevel = ({ trackId, size }: { trackId?: string; size?: 'small' | 'medium' }) => {
-  const ref = useRef<HTMLDivElement | null>(null);
-  const vanillaStore = useHMSVanillaStore();
-
-  useEffect(() => {
-    const unsubscribe = vanillaStore.subscribe(audioLevel => {
-      if (ref.current) {
-        let index = 0;
-        //@ts-ignore
-        for (const child of ref.current.children) {
-          const element = child as HTMLElement;
-          const positionX = `-${positionValues[audioLevel] * (index === 1 ? 2.5 : 1.25)}em`;
-          (element.style as any)['-webkit-mask-position-x'] = positionX;
-          (element.style as any)['mask-position'] = `${positionX} 0`;
-          element.style.animation =
-            positionValues[audioLevel] > 0 ? `${barAnimation} 0.6s steps(3,jump-none) 0s infinite` : 'none';
-          index++;
-        }
-      }
-    }, selectTrackAudioByID(trackId));
-    return unsubscribe;
-  }, [vanillaStore, trackId]);
-  return (
-    <Flex
-      ref={ref}
-      css={{
-        fontSize: size === 'small' ? '0.75rem' : '1rem',
-        gap: size === 'small' ? '$1' : '$2',
-      }}
-    >
-      <AudioBar />
-      <AudioBar />
-      <AudioBar />
-    </Flex>
-  );
-};

package/src/AudioLevel/index.ts

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

package/src/AudioLevel/useBorderAudioLevel.tsx

@@ -1,34 +0,0 @@
-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.primary_default.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/Avatar/Avatar.tsx

@@ -1,60 +0,0 @@
-import React from 'react';
-import { VariantProps } from '@stitches/react';
-import { PersonIcon } from '@100mslive/react-icons';
-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: '$colors$on_primary_high',
-  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 info = getAvatarBg(name);
-  let { color } = info;
-  if (!name) {
-    color = '#7E47EB';
-  }
-  return (
-    <StyledAvatar css={{ bg: color, ...css }} {...props}>
-      {info.initials || <PersonIcon height={40} width={40} />}
-    </StyledAvatar>
-  );
-};

package/src/Avatar/getAvatarBg.ts

@@ -1,50 +0,0 @@
-const getInitials = (name: string | undefined) => {
-  if (!name) {
-    return undefined;
-  } else {
-    return (
-      name
-        .trim()
-        // remove non chars/digits
-        .replace(/[^a-zA-Z0-9]/g, '')
-        .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

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

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/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';