@100mslive/roomkit-react 0.1.0

package/src/Switch/Switch.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import * as BaseSwitch from '@radix-ui/react-switch';
+import { styled } from '../Theme';
+
+const SwitchRoot = styled(BaseSwitch.Root, {
+  all: 'unset',
+  width: '30px',
+  height: '14px',
+  border: 'solid $space$px $secondaryDefault',
+  borderRadius: '$3',
+  p: '$2',
+  position: 'relative',
+  cursor: 'pointer',
+  '&[data-state="checked"]': {
+    backgroundColor: '$primaryDefault',
+    border: 'solid $space$px $primaryDefault',
+  },
+  '&:focus': {
+    outline: 'none',
+  },
+  '&[disabled]': {
+    opacity: 0.5,
+    cursor: 'not-allowed',
+  },
+});
+
+const SwitchThumb = styled(BaseSwitch.Thumb, {
+  display: 'block',
+  top: '3px',
+  position: 'absolute',
+  width: '$md',
+  height: '$md',
+  backgroundColor: '$secondaryDefault',
+  borderRadius: '$round',
+  transition: 'right 500ms ease-in',
+  left: '$2',
+  '&[data-state="checked"]': {
+    left: 'unset',
+    right: '$2',
+    backgroundColor: '$textAccentHigh',
+  },
+});
+
+type SwitchProps = React.ComponentProps<typeof SwitchRoot>;
+
+export const Switch: React.FC<SwitchProps> = props => (
+  <SwitchRoot {...props}>
+    <SwitchThumb />
+  </SwitchRoot>
+);
+
+Switch.displayName = 'Switch';

package/src/Switch/index.ts

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

package/src/Tabs/Tabs.stories.tsx

@@ -0,0 +1,77 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Box } from '../Layout';
+import { Text } from '../Text';
+import { Tabs } from '.';
+
+export default {
+  title: 'UI Components/Tabs',
+  component: Tabs.Root,
+  argTypes: {
+    value: { control: { type: 'text' }, defaultValue: 'tab1' },
+    onValueChange: { action: { type: 'click' } },
+    orientation: { options: ['horizontal', 'vertical'], defaultValue: 'horizontal', control: { type: 'select' } },
+  },
+} as ComponentMeta<typeof Tabs.Root>;
+
+const Template: ComponentStory<typeof Tabs.Root> = ({
+  value: propValue = '',
+  onValueChange: propOnValueChange,
+  ...rest
+}) => {
+  const [value, setValue] = useState('tab1');
+
+  const handleOnValueChange = useCallback(
+    (value: string) => {
+      setValue(value);
+      if (propOnValueChange) {
+        propOnValueChange(value);
+      }
+    },
+    [propOnValueChange],
+  );
+
+  useEffect(() => {
+    handleOnValueChange(propValue);
+    if (propOnValueChange) {
+      propOnValueChange(value);
+    }
+  }, [handleOnValueChange, propOnValueChange, propValue, value]);
+
+  return (
+    <Tabs.Root
+      css={{
+        gap: '8px',
+        maxWidth: '500px',
+        width: 'max-content',
+        '&[data-orientation="horizontal"]': { flexDirection: 'column' },
+      }}
+      value={value}
+      onValueChange={handleOnValueChange}
+      {...rest}
+    >
+      <Tabs.List
+        aria-label="tabs example"
+        css={{ bg: '$bgSecondary', r: '$1', '&[data-orientation="vertical"]': { flexDirection: 'column' } }}
+      >
+        <Tabs.Trigger value="tab1">One</Tabs.Trigger>
+        <Tabs.Trigger value="tab2">Two</Tabs.Trigger>
+        <Tabs.Trigger value="tab3">Three</Tabs.Trigger>
+      </Tabs.List>
+      <Box css={{ r: '$1', bg: '$bgTertiary' }}>
+        <Tabs.Content value="tab1">
+          <Text>Tab one content</Text>
+        </Tabs.Content>
+        <Tabs.Content value="tab2">
+          <Text>Tab two content</Text>
+        </Tabs.Content>
+        <Tabs.Content value="tab3">
+          <Text>Tab three content</Text>
+        </Tabs.Content>
+      </Box>
+    </Tabs.Root>
+  );
+};
+
+export const Example = Template.bind({});
+Example.storyName = 'Tabs';

package/src/Tabs/Tabs.tsx

@@ -0,0 +1,41 @@
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { styled } from '../Theme';
+
+const StyledTabsRoot = styled(TabsPrimitive.Root, {
+  display: 'flex',
+});
+
+const StyledList = styled(TabsPrimitive.List, {
+  flexShrink: 0,
+  display: 'flex',
+});
+
+const StyledTrigger = styled(TabsPrimitive.Trigger, {
+  all: 'unset',
+  fontFamily: '$sans',
+  p: '$8',
+  display: 'flex',
+  alignItems: 'center',
+  fontSize: '$sm',
+  lineHeight: '$sm',
+  color: '$textHighEmp',
+  userSelect: 'none',
+  cursor: 'pointer',
+  '&[data-state="active"]': {
+    bg: '$surfaceLighter',
+    r: '$1',
+  },
+});
+
+const StyledContent = styled(TabsPrimitive.Content, {
+  flex: '1 1 0',
+  padding: '$10',
+  outline: 'none',
+});
+
+export const Tabs = {
+  Root: StyledTabsRoot,
+  List: StyledList,
+  Content: StyledContent,
+  Trigger: StyledTrigger,
+};

package/src/Tabs/index.tsx

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

package/src/Text/Text.stories.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Text, textVariants } from './Text';
+
+export default {
+  title: 'UI Components/Text',
+  component: Text,
+  argTypes: {
+    variant: {
+      control: {
+        type: 'select',
+        options: Object.keys(textVariants),
+      },
+    },
+  },
+} as ComponentMeta<typeof Text>;
+
+const Template: ComponentStory<typeof Text> = args => <Text {...args}>The Evil Rabbit jumps.</Text>;
+
+export const Playground = Template.bind({});
+Playground.storyName = 'Text';

package/src/Text/Text.tsx

@@ -0,0 +1,149 @@
+import { styled } from '../Theme';
+
+export const textVariants = {
+  h1: {
+    fontWeight: '$semiBold',
+    letterSpacing: '-1.5px',
+    fontSize: '$h1',
+    lineHeight: '$h1',
+    '@md': {
+      fontSize: '4.5rem',
+      lineHeight: '4.75rem',
+    },
+  },
+  h2: {
+    fontSize: '$h2',
+    lineHeight: '$h2',
+    fontWeight: '$semiBold',
+    letterSpacing: '-0.5px',
+    '@md': {
+      fontSize: '3rem',
+      lineHeight: '3.25rem',
+    },
+  },
+  h3: {
+    fontSize: '$h3',
+    lineHeight: '$h3',
+    fontWeight: '$semiBold',
+    '@md': {
+      fontSize: '2.5rem',
+      lineHeight: '2.75rem',
+    },
+  },
+  h4: {
+    fontSize: '$h4',
+    lineHeight: '$h4',
+    fontWeight: '$semiBold',
+    letterSpacing: '0.25px',
+    '@md': {
+      fontSize: '1.75rem',
+      lineHeight: '2rem',
+    },
+  },
+  h5: {
+    fontSize: '$h5',
+    lineHeight: '$h5',
+    fontWeight: '$semiBold',
+    '@md': {
+      fontSize: '1.5rem',
+      lineHeight: '1.75rem',
+    },
+  },
+  h6: {
+    fontSize: '$h6',
+    lineHeight: '$h6',
+    fontWeight: '$semiBold',
+    letterSpacing: '0.15px',
+    '@md': {
+      fontSize: '1.25rem',
+      lineHeight: '1.5rem',
+    },
+  },
+  sub1: {
+    fontSize: '$md',
+    lineHeight: '$h5',
+    fontWeight: '$medium',
+    letterSpacing: '0.15px',
+  },
+  sub2: {
+    fontSize: '$sm',
+    lineHeight: '$sm',
+    fontWeight: '$medium',
+    letterSpacing: '0.1px',
+  },
+  body1: {
+    fontSize: '$md',
+    lineHeight: '$h6',
+    fontWeight: '$medium',
+    letterSpacing: '0.1px',
+  },
+  body2: {
+    fontSize: '0.875rem',
+    lineHeight: '1.25rem',
+    fontWeight: '$medium',
+    letterSpacing: '0.25px',
+  },
+  button: {
+    fontSize: '1rem',
+    lineHeight: '1.5rem',
+    fontWeight: '$semiBold',
+    letterSpacing: '0.5px',
+  },
+  caption: {
+    fontSize: '0.75rem',
+    lineHeight: '1rem',
+    letterSpacing: '0.4px',
+    fontWeight: '$regular',
+  },
+  overline: {
+    fontSize: '0.625rem',
+    lineHeight: '1rem',
+    letterSpacing: '1.5px',
+    fontWeight: '$medium',
+  },
+  tiny: {
+    fontSize: '$tiny',
+    lineHeight: '$tiny',
+  },
+  xs: {
+    fontSize: '$xs',
+    lineHeight: '$xs',
+  },
+  sm: {
+    fontSize: '$sm',
+    lineHeight: '$sm',
+  },
+  md: {
+    fontSize: '$md',
+    lineHeight: '$md',
+  },
+  lg: {
+    fontSize: '$lg',
+    lineHeight: '$md',
+    fontWeight: '$semiBold',
+    letterSpacing: '0.15px',
+  },
+};
+
+export const Text = styled('p', {
+  fontFamily: '$sans',
+  fontWeight: '$regular',
+  margin: 0,
+  color: '$textPrimary',
+  variants: {
+    variant: textVariants,
+    color: {
+      white: {
+        color: '$white',
+      },
+    },
+    inline: {
+      true: {
+        display: 'inline',
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'md',
+  },
+});

package/src/Text/index.tsx

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

package/src/Theme/Theme.stories.mdx

@@ -0,0 +1,8 @@
+import { Meta } from '@storybook/addon-docs';
+import ThemeStory from './ThemeStory';
+
+<Meta title="Theme" />
+
+## Theme
+
+<ThemeStory />

package/src/Theme/ThemeProvider.tsx

@@ -0,0 +1,104 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useMedia } from 'react-use';
+import type { Theme } from './stitches.config';
+import { createTheme, theme } from './stitches.config';
+import useSSR from './useSSR';
+
+const defaultAspectRatio = {
+  width: 1,
+  height: 1,
+};
+
+export enum ThemeTypes {
+  // eslint-disable-next-line no-unused-vars
+  light = 'light',
+  // eslint-disable-next-line no-unused-vars
+  dark = 'dark',
+}
+
+export type ThemeContextValue = {
+  themeType: ThemeTypes;
+  theme: Theme;
+  aspectRatio: { width: number; height: number };
+  /**
+   * @param {ThemeTypes} themeToUpdateTo - optional
+   * Use this to toggle or update the currentTheme.
+   * if a param is passed, it will set the theme to passed value, otherwise will toggle between light and dark
+   * depending on current applied theme
+   */
+  toggleTheme: (themeToUpdateTo?: ThemeTypes) => void;
+};
+
+export type ThemeProviderProps = {
+  themeType?: ThemeTypes;
+  theme?: Theme;
+  aspectRatio?: { width: number; height: number };
+};
+
+const defaultContext = {
+  themeType: ThemeTypes.dark,
+  theme,
+  aspectRatio: { width: 1, height: 1 },
+  toggleTheme: (_themeToUpdateTo?: ThemeTypes) => {
+    return;
+  },
+};
+export const ThemeContext = React.createContext(defaultContext);
+
+/**
+ * Wrap this around your root component to get access to theme
+ * eg:
+ * <ThemeProvider type="dark" appBuilder={{ aspectRatio: { width:1, height: 1} }}>
+ *  <App />
+ * </ThemeProvider>
+ */
+export const HMSThemeProvider: React.FC<React.PropsWithChildren<ThemeProviderProps>> = ({
+  themeType,
+  theme: userTheme,
+  aspectRatio = defaultAspectRatio,
+  children,
+}) => {
+  const systemTheme = useMedia('prefers-color-scheme: dark') ? ThemeTypes.dark : ThemeTypes.light;
+  const [currentTheme, setCurrentTheme] = useState(themeType || systemTheme);
+  const previousClassName = useRef('');
+  const { isBrowser } = useSSR();
+  const updatedTheme = useMemo(() => {
+    const updatedTheme = createTheme({ themeType: currentTheme, theme: userTheme || {} });
+    if (!isBrowser) {
+      return updatedTheme;
+    }
+    if (previousClassName.current) {
+      document.documentElement.classList.remove(previousClassName.current);
+    }
+    previousClassName.current = updatedTheme.className;
+    document.documentElement.classList.add(updatedTheme);
+    return updatedTheme;
+  }, [userTheme, currentTheme, isBrowser]);
+
+  const toggleTheme = useCallback(
+    (themeToUpdateTo?: ThemeTypes) => {
+      if (themeToUpdateTo) {
+        setCurrentTheme(themeToUpdateTo);
+        return;
+      }
+      setCurrentTheme(currentTheme === ThemeTypes.dark ? ThemeTypes.light : ThemeTypes.dark);
+    },
+    [currentTheme],
+  );
+
+  useEffect(() => {
+    if (themeType) {
+      setCurrentTheme(themeType);
+    }
+  }, [themeType]);
+
+  return (
+    <ThemeContext.Provider
+      value={{ themeType: currentTheme, theme: updatedTheme as unknown as Theme, aspectRatio, toggleTheme }}
+    >
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+export const useTheme = () => React.useContext(ThemeContext);

package/src/Theme/ThemeStory.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { ColorItem, ColorPalette } from '@storybook/addon-docs';
+
+const ThemeStory = () => {
+  return (
+    <ColorPalette>
+      <ColorItem
+        title="theme.color.brand"
+        subtitle="Brand Variants"
+        colors={{ brandLight: '#74AAFF', brandDefault: '#2F80FF', brandDark: '#0B326F', brandDisabled: '#D8E7FF' }}
+      />
+      <ColorItem
+        title="theme.color.text"
+        subtitle="Text Variants"
+        colors={{
+          textHighEmp: 'rgba(250, 252, 255, 0.9)',
+          textMedEmp: 'rgba(215, 227, 245, 0.8)',
+          textDisabled: 'rgba(164, 176, 193, 0.5)',
+          textMedWhite: 'rgba(255, 255, 255, 0.72)',
+          textDarkWhite: 'rgba(255, 255, 255, 0.48)',
+        }}
+      />
+      <ColorItem
+        title="theme.color.surface"
+        subtitle="Surface Variants"
+        colors={{
+          surfaceDarker: '#06080A',
+          surfaceDark: '#080B0F',
+          surfaceDefault: '#0B0F15',
+          surfaceLight: '#12161C',
+          surfaceLighter: '#1F2228',
+        }}
+      />
+      <ColorItem
+        title="theme.color.primary"
+        subtitle="Primary Variants"
+        colors={{
+          primaryLight: '#6DA6FF',
+          primaryDefault: '#2F80FF',
+          primaryDark: '#184080',
+          primaryDisabled: '#D8E7FF',
+        }}
+      />
+      <ColorItem
+        title="theme.color.secondary"
+        subtitle="Secondary Variants"
+        colors={{
+          secondaryLight: '#505863',
+          secondaryDefault: '#657080',
+          secondaryDark: '#1E2329',
+          secondaryDisabled: '#DCE4EF',
+        }}
+      />
+    </ColorPalette>
+  );
+};
+
+export default ThemeStory;