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

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.4.3-alpha.0",
+  "version": "0.4.3-alpha.10",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -19,8 +19,7 @@
     "directory": "packages/roomkit-react"
   },
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "exports": {
     ".": {
@@ -42,8 +41,6 @@
     "lint": "eslint -c .eslintrc --no-error-on-unmatched-pattern src --ext .js --ext .jsx --ext .ts --ext .tsx",
     "lint:fix": "yarn lint --fix",
     "format": "prettier -w src/**",
-    "storybook": "sb dev -p 6006",
-    "build-storybook": "sb build",
     "babel": "npx storybook@latest babelrc"
   },
   "devDependencies": {
@@ -51,15 +48,6 @@
     "@babel/preset-env": "^7.22.5",
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
-    "@storybook/addon-a11y": "^7.0.27",
-    "@storybook/addon-actions": "^7.0.27",
-    "@storybook/addon-essentials": "^7.0.27",
-    "@storybook/addon-interactions": "^7.0.27",
-    "@storybook/addon-links": "^7.0.27",
-    "@storybook/cli": "^7.0.27",
-    "@storybook/react": "^7.0.27",
-    "@storybook/react-webpack5": "^7.0.27",
-    "@storybook/testing-library": "^0.2.0",
     "@types/lodash.merge": "^4.6.6",
     "@types/mdx": "2.0.2",
     "@types/react": "^18.1.0",
@@ -67,20 +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",
-    "storybook-dark-mode": "^3.0.0"
+    "react": "^18.1.0"
   },
   "peerDependencies": {
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.4.3-alpha.0",
-    "@100mslive/hms-noise-cancellation": "0.0.2",
-    "@100mslive/hms-virtual-background": "1.14.3-alpha.0",
-    "@100mslive/hms-whiteboard": "0.1.3-alpha.0",
-    "@100mslive/react-icons": "0.11.3-alpha.0",
-    "@100mslive/react-sdk": "0.11.3-alpha.0",
+    "@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",
@@ -117,5 +103,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "f1f1e1e72eb47deed22698a3c7a1fd10d9dcd0af"
+  "gitHead": "1ee21ecfbbd262d52bdf3ed9adb86f882f50af66"
 }

package/src/Accordion/Accordion.stories.tsx

@@ -1,50 +0,0 @@
-import React from 'react';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Accordion } from '.';
-
-export default {
-  title: 'UI Components/Accordion',
-  component: Accordion.Root,
-} as ComponentMeta<typeof Accordion.Root>;
-
-function AccordionItem({ value, header, content }: { value: string; header: string; content: string }) {
-  return (
-    <Accordion.Item value={value}>
-      <Accordion.Header css={{ padding: '$8 $9' }}>{header}</Accordion.Header>
-      <Accordion.Content contentStyles={{ padding: '$8 $9' }}>
-        <>
-          {content}
-          <Accordion.Item value={value + '1'}>
-            <Accordion.Header css={{ padding: '$8 $9' }}>nested header</Accordion.Header>
-            <Accordion.Content contentStyles={{ padding: '$8 $9' }}>nested item</Accordion.Content>
-          </Accordion.Item>
-        </>
-      </Accordion.Content>
-    </Accordion.Item>
-  );
-}
-
-const Template = () => {
-  return (
-    <Accordion.Root type="multiple" defaultValue={['item-1']} css={{ width: '300px' }}>
-      <AccordionItem
-        value="item-1"
-        header="Is it accessible?"
-        content="Yes. It adheres to the WAI-ARIA design pattern."
-      />
-      <AccordionItem
-        value="item-2"
-        header="Is it unstyled?"
-        content="Yes. It's unstyled by default, giving you freedom over the look and feel."
-      />
-      <AccordionItem
-        value="item-3"
-        header="Can it be animated?"
-        content="Yes! You can animate the Accordion. with CSS or JavaScript."
-      />
-    </Accordion.Root>
-  );
-};
-
-export const AccordionContent: ComponentStory<typeof Accordion.Root> = Template.bind({});
-AccordionContent.storyName = 'Accordion';

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.stories.tsx

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

@@ -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.mdx

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

@@ -1,52 +0,0 @@
-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' },
-};