@100mslive/roomkit-react 0.1.0

package/src/Checkbox/index.tsx

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

package/src/Collapsible/Collapsible.tsx

@@ -0,0 +1,34 @@
+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$primaryDefault',
+  },
+});
+
+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

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

package/src/Divider/Divider.tsx

@@ -0,0 +1,45 @@
+import { styled } from '../Theme';
+
+const getVerticalSpace = (space: string) => ({
+  marginLeft: space,
+  marginRight: space,
+});
+const getHorizontalSpace = (space: string) => ({
+  marginTop: space,
+  marginBottom: space,
+});
+
+export const VerticalDivider = styled('span', {
+  height: '25px',
+  width: '1px',
+  backgroundColor: '$borderLight',
+  variants: {
+    space: {
+      1: getVerticalSpace('$1'),
+      2: getVerticalSpace('$2'),
+      3: getVerticalSpace('$3'),
+      4: getVerticalSpace('$4'),
+    },
+  },
+  defaultVariants: {
+    space: 1,
+  },
+});
+
+export const HorizontalDivider = styled('span', {
+  height: '1px',
+  width: '100%',
+  display: 'block',
+  backgroundColor: '$borderLight',
+  variants: {
+    space: {
+      1: getHorizontalSpace('$1'),
+      2: getHorizontalSpace('$2'),
+      3: getHorizontalSpace('$3'),
+      4: getHorizontalSpace('$4'),
+    },
+  },
+  defaultVariants: {
+    space: 1,
+  },
+});

package/src/Divider/HorizontalDivider.stories.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Flex } from '../Layout';
+import { Text } from '../Text';
+import { HorizontalDivider } from '.';
+
+export default {
+  title: 'UI Components/Divider',
+  component: HorizontalDivider,
+  argTypes: {
+    ref: { table: { disable: true } },
+    as: { table: { disable: true } },
+    css: { control: { type: 'object' } },
+    space: { defaultValue: 1, control: { type: 'number', min: 1, max: 4 } },
+  },
+} as ComponentMeta<typeof HorizontalDivider>;
+
+const HorizontalDividerComponent: ComponentStory<typeof HorizontalDivider> = ({ space, css }) => {
+  return (
+    <Flex align="center" direction="column" css={{ width: 'max-content', bg: '$bgTertiary', p: '$8', r: '$4' }}>
+      <ul style={{ listStyle: 'none', padding: '0px', margin: '0px', textAlign: 'center' }}>
+        <Text as="li">Item 1</Text>
+        <Text as="li">Item 2</Text>
+        <Text as="li">Item 3</Text>
+        <HorizontalDivider space={space} css={{ bg: '$textSecondary', width: '80px', ...css }} />
+        <Text as="li">Item 4</Text>
+        <Text as="li">Item 5</Text>
+        <Text as="li">Item 6</Text>
+      </ul>
+    </Flex>
+  );
+};
+
+export const Horizontal = HorizontalDividerComponent.bind({});

package/src/Divider/VerticalDivider.stories.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { AddIcon } from '@100mslive/react-icons';
+import { Button } from '../Button';
+import { Flex } from '../Layout';
+import { Text } from '../Text';
+import { VerticalDivider } from '.';
+
+export default {
+  title: 'UI Components/Divider',
+  component: VerticalDivider,
+  argTypes: {
+    ref: { table: { disable: true }, control: { type: null } },
+    as: { table: { disable: true }, control: { type: null } },
+    css: { control: { type: 'object' } },
+    space: { defaultValue: 1, control: { type: 'number', min: 1, max: 4 } },
+  },
+} as ComponentMeta<typeof VerticalDivider>;
+
+const VerticalDividerComponent: ComponentStory<typeof VerticalDivider> = ({ space, css }) => {
+  return (
+    <Flex align="center" css={{ position: 'absolute', left: '$10' }}>
+      <Button icon variant="primary">
+        <AddIcon />
+        <Text as="span" variant="button" css={{ c: 'white' }}>
+          Add Stuff
+        </Text>
+      </Button>
+      <VerticalDivider space={space} css={{ bg: '$textPrimary', ...css }} />
+      <Button icon variant="danger">
+        <AddIcon />
+        <Text as="span" variant="button" css={{ c: 'white' }}>
+          Add Another Stuff
+        </Text>
+      </Button>
+    </Flex>
+  );
+};
+
+export const Vertical = VerticalDividerComponent.bind({});

package/src/Divider/index.ts

@@ -0,0 +1 @@
+export { HorizontalDivider, VerticalDivider } from './Divider';

package/src/Dropdown/Dropdown.stories.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { ChevronDownIcon, ChevronUpIcon, PeopleIcon } from '@100mslive/react-icons';
+import { Avatar, Box, Flex, Text, textEllipsis } from '..';
+import { Dropdown } from './Dropdown';
+
+export default {
+  title: 'UI Components/Dropdown',
+  component: Dropdown.Content,
+} as ComponentMeta<typeof Dropdown.Content>;
+
+const participants = [
+  { id: '231313', name: 'Simbrella', roleName: 'Student' },
+  { id: '768456', name: 'Jonty', roleName: 'Student' },
+];
+
+const Template: ComponentStory<typeof Dropdown.Content> = () => {
+  const [open, setOpen] = React.useState(true);
+
+  return (
+    <Dropdown.Root
+      open
+      onOpenChange={() => {
+        setOpen(!open);
+      }}
+    >
+      <Dropdown.Trigger asChild>
+        <Box
+          css={{
+            color: '$textPrimary',
+            borderRadius: '$1',
+            border: '1px solid $textDisabled',
+            padding: '$4 $4',
+            width: '$80',
+          }}
+        >
+          <Box css={{ display: 'flex', justifyContent: 'space-between' }}>
+            <Box css={{ display: 'flex', gap: '$4', mr: '$4' }}>
+              <PeopleIcon />
+              <Text variant="md">2</Text>
+            </Box>
+            <Flex>{open ? <ChevronUpIcon /> : <ChevronDownIcon />}</Flex>
+          </Box>
+        </Box>
+      </Dropdown.Trigger>
+      {open && (
+        <Dropdown.Content sideOffset={5} align="start" css={{ height: 'auto', maxHeight: '$96' }}>
+          <Dropdown.Group
+            css={{
+              h: 'auto',
+              flexDirection: 'column',
+              flexWrap: 'wrap',
+              alignItems: 'flex-start',
+            }}
+          >
+            <Dropdown.Label css={{ w: 'initial ' }}>
+              <Text variant="md" data-testid="role_student">
+                {'Students '}({participants.length})
+              </Text>
+            </Dropdown.Label>
+            {participants.map((peer, i) => (
+              <Dropdown.Item css={{ justifyContent: 'space-between' }} data-testid={`participant_${i}`}>
+                <Flex>
+                  <Box css={{ width: '$16' }}>
+                    <Avatar
+                      name={peer.name}
+                      css={{
+                        position: 'unset',
+                        transform: 'unset',
+                        mr: '$4',
+                        fontSize: '$sm',
+                      }}
+                    />
+                  </Box>
+                  <Flex direction="column">
+                    <Text variant="md" css={{ ...textEllipsis(150), fontWeight: '$semiBold' }}>
+                      {peer.name}
+                    </Text>
+                    <Text variant="sub2" css={{ color: '$textMedEmp' }}>
+                      {peer.roleName}
+                    </Text>
+                  </Flex>
+                </Flex>
+              </Dropdown.Item>
+            ))}
+          </Dropdown.Group>
+        </Dropdown.Content>
+      )}
+    </Dropdown.Root>
+  );
+};
+
+export const DropdownContent = Template.bind({});
+DropdownContent.storyName = 'Dropdown';

package/src/Dropdown/Dropdown.tsx

@@ -0,0 +1,142 @@
+import {
+  CheckboxItem,
+  Content,
+  Group,
+  Item,
+  ItemIndicator,
+  Label,
+  Portal,
+  Root,
+  Separator,
+  Sub,
+  SubContent,
+  SubTrigger,
+  Trigger,
+} from '@radix-ui/react-dropdown-menu';
+import { styled } from '../Theme';
+
+const DropdownRoot = styled(Root, {});
+
+const DropdownTrigger = styled(Trigger, {
+  cursor: 'pointer',
+  appearance: 'none !important',
+  '&[data-state="open"]': {
+    backgroundColor: '$surfaceLight',
+  },
+  '&:focus': {
+    outline: 'none',
+  },
+  '&:focus-visible': {
+    boxShadow: '0 0 0 3px $colors$primaryDefault',
+  },
+});
+
+const DropdownTriggerItem = styled(SubTrigger, {
+  w: '100%',
+  color: '$textPrimary',
+  p: '$8',
+  display: 'flex',
+  alignItems: 'center',
+  '&:hover': {
+    cursor: 'pointer',
+    bg: '$surfaceLighter',
+  },
+  '&:focus-visible': {
+    bg: '$surfaceLighter',
+  },
+});
+
+const DropdownItem = styled(Item, {
+  color: '$textPrimary',
+  p: '$8',
+  display: 'flex',
+  alignItems: 'center',
+  outline: 'none',
+  '&:hover': {
+    cursor: 'pointer',
+    bg: '$surfaceLighter',
+  },
+  '&:focus-visible': {
+    bg: '$surfaceLighter',
+  },
+});
+
+const DropdownItemSeparator = styled(Separator, {
+  h: 1,
+  backgroundColor: '$grayDefault',
+  m: '$4 $8',
+});
+
+const DropdownContent = styled(Content, {
+  w: '$80',
+  maxHeight: '$64',
+  r: '$1',
+  py: '$4',
+  backgroundColor: '$surfaceLight',
+  overflowY: 'auto',
+  boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)',
+  zIndex: 20,
+  fontFamily: '$sans',
+});
+
+const DropdownLabel = styled(Label, {
+  display: 'flex',
+  alignItems: 'center',
+  h: '$12',
+  w: '100%',
+  p: '$8 $4',
+});
+
+const DropdownGroup = styled(Group, {});
+
+const DropdownSubMenu = styled(Sub, {});
+
+const DropdownSubMenuContent = styled(SubContent, {
+  w: '$80',
+  maxHeight: '$64',
+  r: '$1',
+  py: '$4',
+  backgroundColor: '$surfaceLight',
+  overflowY: 'auto',
+  boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)',
+  zIndex: 20,
+});
+
+const DropdownCheckboxItem = styled(CheckboxItem, {
+  color: '$textPrimary',
+  p: '$8',
+  display: 'flex',
+  alignItems: 'center',
+  outline: 'none',
+  '&:hover': {
+    cursor: 'pointer',
+    bg: '$surfaceLighter',
+  },
+  '&:focus-visible': {
+    bg: '$surfaceLighter',
+  },
+  gap: '$2',
+});
+
+const DropdownItemIndicator = styled(ItemIndicator, {
+  w: '$10',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+
+export const Dropdown = {
+  Root: DropdownRoot,
+  Trigger: DropdownTrigger,
+  TriggerItem: DropdownTriggerItem,
+  Content: DropdownContent,
+  Portal: Portal,
+  SubMenu: DropdownSubMenu,
+  SubMenuContent: DropdownSubMenuContent,
+  Item: DropdownItem,
+  Label: DropdownLabel,
+  Group: DropdownGroup,
+  ItemSeparator: DropdownItemSeparator,
+  CheckboxItem: DropdownCheckboxItem,
+  ItemIndicator: DropdownItemIndicator,
+};

package/src/Dropdown/index.tsx

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

package/src/Fieldset/Fieldset.stories.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Input } from '../Input';
+import { Label } from '../Label';
+import { Text } from '../Text';
+import { Fieldset } from '.';
+
+export default {
+  title: 'UI Components/Fieldset',
+  component: Fieldset,
+  argTypes: {
+    ref: { table: { disable: true } },
+    as: { table: { disable: true } },
+  },
+} as ComponentMeta<typeof Fieldset>;
+
+const Template: ComponentStory<typeof Fieldset> = ({ css }) => {
+  return (
+    <Fieldset css={css} style={{ width: '70%' }}>
+      <Label htmlFor="name">
+        <Text variant="sub2">Input Label</Text>
+      </Label>
+      <Input id="name" placeholder="Some random input" css={{ w: '80%' }} />
+    </Fieldset>
+  );
+};
+
+export const Example = Template.bind({});
+Example.storyName = 'Fieldset';

package/src/Fieldset/Fieldset.tsx

@@ -0,0 +1,11 @@
+import { styled } from '../Theme';
+
+const StyledFieldset = styled('fieldset', {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  border: 'none',
+  backgroundColor: '$transparent',
+});
+
+export const Fieldset = StyledFieldset;

package/src/Fieldset/index.tsx

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

package/src/Footer/Footer.stories.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import {
+  BrbIcon,
+  ChatIcon,
+  EndStreamIcon,
+  MicOnIcon,
+  PipIcon,
+  ShareScreenIcon,
+  VideoOnIcon,
+} from '@100mslive/react-icons';
+import { Button } from '../Button';
+import { IconButton } from '../IconButton';
+import { Footer } from '.';
+
+export default {
+  title: 'UI Components/Footer',
+  component: Footer.Root,
+  argTypes: {
+    as: { table: { disable: true } },
+    css: { control: { type: 'object' } },
+  },
+} as ComponentMeta<typeof Footer.Root>;
+
+const Template: ComponentStory<typeof Footer.Root> = ({ css }) => {
+  return (
+    <Footer.Root css={css}>
+      <Footer.Left>
+        <IconButton>
+          <MicOnIcon />
+        </IconButton>
+        <IconButton>
+          <VideoOnIcon />
+        </IconButton>
+      </Footer.Left>
+      <Footer.Center>
+        <IconButton>
+          <ShareScreenIcon />
+        </IconButton>
+        <IconButton>
+          <PipIcon />
+        </IconButton>
+        <Button>
+          <EndStreamIcon />
+          End Stream
+        </Button>
+      </Footer.Center>
+      <Footer.Right>
+        <IconButton>
+          <BrbIcon />
+        </IconButton>
+        <IconButton>
+          <ChatIcon />
+        </IconButton>
+      </Footer.Right>
+    </Footer.Root>
+  );
+};
+
+export const Example = Template.bind({});
+Example.storyName = 'Footer';

package/src/Footer/Footer.tsx

@@ -0,0 +1,47 @@
+import { Flex } from '../Layout';
+import { styled } from '../Theme';
+
+const Root = styled(Flex, {
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  py: '$4',
+  position: 'relative',
+  height: '100%',
+  '@md': { flexWrap: 'wrap', gap: '$4' },
+});
+
+const Left = styled(Flex, {
+  alignItems: 'center',
+  position: 'absolute',
+  left: '$10',
+  gap: '$8',
+  '@md': {
+    position: 'unset',
+    justifyContent: 'center',
+    w: '100%',
+  },
+});
+
+const Center = styled(Flex, {
+  w: '100%',
+  justifyContent: 'center',
+  alignItems: 'center',
+  gap: '$8',
+});
+
+const Right = styled(Flex, {
+  alignItems: 'center',
+  position: 'absolute',
+  right: '$10',
+  gap: '$8',
+  '@md': {
+    display: 'none',
+  },
+});
+
+export const Footer = {
+  Root,
+  Left,
+  Center,
+  Right,
+};

package/src/Footer/index.tsx

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

package/src/IconButton/IconButton.tsx

@@ -0,0 +1,45 @@
+import { styled } from '../Theme';
+import { flexCenter } from '../utils/styles';
+
+export const IconButton = styled('button', {
+  ...flexCenter,
+  outline: 'none',
+  border: 'none',
+  padding: '$2',
+  r: '$0',
+  cursor: 'pointer',
+  backgroundColor: 'transparent',
+  color: '$textPrimary',
+  '&:not([disabled]):focus-visible': {
+    boxShadow: '0 0 0 3px $colors$brandDefault',
+  },
+  '&:not([disabled]):focus': {
+    outline: 'none',
+  },
+  '&:not([disabled]):hover': {
+    backgroundColor: '$iconHoverBg',
+  },
+  '&[disabled]': {
+    opacity: 0.5,
+    cursor: 'not-allowed',
+  },
+  '&:focus': {
+    outline: 'none',
+  },
+  variants: {
+    active: {
+      false: {
+        backgroundColor: '$secondaryDark',
+        color: '$textPrimary',
+        '&:not([disabled]):hover': {
+          backgroundColor: '$secondaryDefault',
+        },
+      },
+      true: {
+        '&:not([disabled]):hover': {
+          backgroundColor: '$iconHoverBg',
+        },
+      },
+    },
+  },
+});

package/src/IconButton/index.tsx

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

package/src/Icons/Icons.stories.mdx

@@ -0,0 +1,10 @@
+import { Meta, Title, IconGallery, IconItem } from '@storybook/addon-docs';
+import IconsList from './IconsList';
+
+<Meta title="Iconography" />
+
+## Iconography
+
+World's first Video-first Icon Library 😎
+
+<IconsList />

package/src/Icons/IconsList.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { IconGallery, IconItem } from '@storybook/addon-docs';
+import * as icons from '@100mslive/react-icons';
+
+const IconsList = () => {
+  return (
+    <IconGallery>
+      {Object.entries(icons).map(([name, Component]) => (
+        <IconItem name={name} key={name}>
+          <Component />
+        </IconItem>
+      ))}
+    </IconGallery>
+  );
+};
+
+export default IconsList;

package/src/Input/Input.stories.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Input } from '.';
+
+export default {
+  title: 'UI Components/Input',
+  component: Input,
+  argTypes: {
+    ref: { table: { disable: true } },
+    as: { table: { disable: true } },
+    placeholder: { control: { type: 'text' } },
+    error: { control: { type: 'boolean' } },
+  },
+  args: {
+    error: false,
+    placeholder: 'This is a placeholder',
+  },
+} as ComponentMeta<typeof Input>;
+
+const Template: ComponentStory<typeof Input> = args => {
+  return <Input {...args} />;
+};
+
+export const Example = Template.bind({});
+Example.storyName = 'Input';