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

package/src/Label/index.ts

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

package/src/Layout/Box.tsx

@@ -1,3 +0,0 @@
-import { styled } from '../Theme';
-
-export const Box = styled('div', {});

package/src/Layout/Flex.tsx

@@ -1,76 +0,0 @@
-import { styled } from '../Theme';
-
-/**
- * @see https://tailwindcss.com/docs/space
- */
-const gapStyles = (value: number) => {
-  return {
-    '& > * + *': {
-      marginRight: '0',
-      marginLeft: `${0.25 * value}rem`,
-    },
-  };
-};
-
-export const Flex = styled('div', {
-  display: 'flex',
-  variants: {
-    justify: {
-      start: {
-        justifyContent: 'flex-start',
-      },
-      end: {
-        justifyContent: 'flex-end',
-      },
-      center: {
-        justifyContent: 'center',
-      },
-      between: {
-        justifyContent: 'space-between',
-      },
-      around: {
-        justifyContent: 'space-around',
-      },
-      evenly: {
-        justifyContent: 'space-evenly',
-      },
-    },
-    align: {
-      start: {
-        alignItems: 'flex-start',
-      },
-      end: {
-        alignItems: 'flex-end',
-      },
-      center: {
-        alignItems: 'center',
-      },
-      baseline: {
-        alignItems: 'baseline',
-      },
-      stretch: {
-        alignItems: 'stretch',
-      },
-    },
-    direction: {
-      row: {
-        flexDirection: 'row',
-      },
-      column: {
-        flexDirection: 'column',
-      },
-      rowReverse: {
-        flexDirection: 'row-reverse',
-      },
-      columnReverse: {
-        flexDirection: 'column-reverse',
-      },
-    },
-    gap: {
-      1: gapStyles(1),
-      2: gapStyles(2),
-      3: gapStyles(3),
-      4: gapStyles(4),
-    },
-  },
-});

package/src/Layout/index.tsx

@@ -1,2 +0,0 @@
-export { Flex } from './Flex';
-export { Box } from './Box';

package/src/Link/Link.stories.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Link } from '.';
-
-export default {
-  title: 'UI Components/Link',
-  component: Link,
-} as ComponentMeta<typeof Link>;
-
-const Template: ComponentStory<typeof Link> = props => {
-  return (
-    <Link icon={props.icon} iconSide={props.iconSide} color={props.color} href="#">
-      Link Text
-    </Link>
-  );
-};
-
-export const Multiple = Template.bind({});

package/src/Link/Link.tsx

@@ -1,54 +0,0 @@
-import React from 'react';
-import * as icons from '@100mslive/react-icons';
-import { Flex } from '../Layout';
-import { Text } from '../Text';
-import { styled } from '../Theme';
-
-const LinkComponent = styled('a', {
-  textDecoration: 'none',
-  display: 'flex',
-  alignItems: 'center',
-  gap: '$5',
-  variants: {
-    color: {
-      highEmp: {
-        color: '$on_surface_high',
-        '&:hover': {
-          color: '$on_surface_medium',
-        },
-      },
-      primary: {
-        color: '$primary_default',
-        '&:hover': {
-          color: '$primary_bright',
-        },
-      },
-    },
-  },
-});
-
-export interface LinkProps extends React.ComponentProps<typeof LinkComponent> {
-  as?: React.ElementType;
-  iconSide?: 'left' | 'right' | 'none';
-  icon?: keyof typeof icons;
-  color?: 'highEmp' | 'primary';
-}
-
-export const Link = ({ iconSide = 'left', icon, color = 'primary', children, ...rest }: LinkProps) => {
-  const Icon = icon ? icons[icon] : React.Fragment;
-  const renderedIcon = icon ? (
-    <Flex as="span">
-      <Icon height={13.33} width={13.33} />{' '}
-    </Flex>
-  ) : null;
-
-  return (
-    <LinkComponent {...rest} color={color}>
-      {iconSide === 'left' && renderedIcon}
-      <Text as="span" variant="body2" css={{ color: 'inherit' }}>
-        {children}
-      </Text>
-      {iconSide === 'right' && renderedIcon}
-    </LinkComponent>
-  );
-};

package/src/Link/index.tsx

@@ -1,2 +0,0 @@
-export { Link } from './Link';
-export type { LinkProps } from './Link';

package/src/Loading/Loading.mdx

@@ -1,15 +0,0 @@
-import { Story, Preview, Props } from '@storybook/addon-docs';
-
-import { Loading } from '.';
-
-# Loading
-
-## Overview
-
-This is some random overview text of the item.
-
-<Preview>
-  <Story id="ui-components-loading--example" />
-</Preview>
-
-<Props />

package/src/Loading/Loading.stories.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Flex } from '../Layout';
-import mdx from './Loading.mdx';
-import { Loading } from '.';
-
-export default {
-  title: 'UI Components/Loading',
-  component: Loading,
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
-} as ComponentMeta<typeof Loading>;
-
-const Template: ComponentStory<typeof Loading> = ({ color }) => {
-  return (
-    <Flex gap={4}>
-      <Loading size={24} color={color} />
-      <Loading size={48} color={color} />
-      <Loading size={64} color={color} />
-    </Flex>
-  );
-};
-
-export const Multiple = Template.bind({});
-Multiple.args = {
-  color: 'red',
-};
-
-export const Playground: ComponentStory<typeof Loading> = args => <Loading {...args} />;
-Playground.storyName = 'Loading';
-Playground.argTypes = {
-  size: { control: { type: 'number' }, defaultValue: 24 },
-  color: { defaultValue: 'blue' },
-};

package/src/Loading/Loading.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-
-type Props = {
-  /**
-   * Adjusts width and height
-   */
-  size?: number | string;
-  /**
-   * Color of Loader
-   */
-  color?: string;
-};
-
-type LoadingProps = Props & React.SVGProps<SVGSVGElement>;
-
-export const Loading = ({ size = 24, color = 'white', ...props }: LoadingProps) => (
-  <svg width={size} height={size} viewBox="0 0 50 50" fill={color} xmlns="http://www.w3.org/2000/svg" {...props}>
-    <circle cx="25" cy="25" r="20" stroke={color} strokeWidth="4" strokeDasharray="70 30" fill="none">
-      <animateTransform
-        attributeName="transform"
-        attributeType="XML"
-        type="rotate"
-        from="0 25 25"
-        to="360 25 25"
-        dur="1s"
-        repeatCount="indefinite"
-      />
-    </circle>
-  </svg>
-);

package/src/Loading/index.ts

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

package/src/Modal/Dialog.mdx

@@ -1,19 +0,0 @@
-# Replacing DocsPage with custom `MDX` content
-
-This file is a documentation-only `MDX`file to customize Storybook's [DocsPage](https://storybook.js.org/docs/react/writing-docs/docs-page#replacing-docspage).
-
-It can be further expanded with your own code snippets and include specific information related to your stories.
-
-For example:
-
-import { Story } from '@storybook/addon-docs';
-
-## Dialog
-
-Dialog is an hover component used to have a focus-mode like UI for users.
-
-- [Example](#example)
-
-### Example
-
-<Story id="dialog--example" />

package/src/Modal/Dialog.stories.tsx

@@ -1,68 +0,0 @@
-import React from 'react';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { CrossIcon, InfoIcon } from '@100mslive/react-icons';
-import { Button } from '../Button';
-import { Fieldset } from '../Fieldset';
-import { Input } from '../Input';
-import { Label } from '../Label';
-import { Flex } from '../Layout';
-import { Text } from '../Text';
-import { Dialog } from './Dialog';
-import DialogDocs from './Dialog.mdx';
-
-export default {
-  title: 'UI Components/Dialog',
-  component: Dialog.Root,
-  argTypes: { onClick: { action: 'clicked' } },
-  parameters: {
-    docs: {
-      page: DialogDocs,
-    },
-  },
-} as ComponentMeta<typeof Dialog.Root>;
-
-//👇 We create a “template” of how args map to rendering
-const Template: ComponentStory<typeof Dialog.Root> = () => (
-  <Dialog.Root css={{ position: 'relative' }}>
-    <Dialog.Trigger asChild>
-      <Button variant="standard">Open Dialog</Button>
-    </Dialog.Trigger>
-    <Dialog.Portal>
-      <Dialog.Overlay />
-      <Dialog.Content>
-        <Dialog.Title css={{ c: '$on_surface_high', position: 'relative' }}>
-          <Flex direction="row" justify="between" css={{ w: '100%' }}>
-            <Flex justify="start" align="center" gap="3">
-              <InfoIcon />
-              <Text variant="h5">Dialog Heading</Text>
-            </Flex>
-            <Dialog.DefaultClose css={{ position: 'absolute', top: '-1rem', right: '-1rem' }}>
-              <CrossIcon />
-            </Dialog.DefaultClose>
-          </Flex>
-        </Dialog.Title>
-        <Text variant="body1" css={{ c: '$on_surface_medium' }}>
-          Body 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-          dolore magna aliqua. Ut enim ad minim veniam,im venitetur adipiscing elit, sed do eiusmod tempor incididunt ut
-          labore et dolore magna aliqua. Ut enim ad minim veniam,im veni
-        </Text>
-        <Fieldset css={{ mt: '$4' }}>
-          <Label htmlFor="name">Name</Label>
-          <Input id="name" defaultValue="Hardik" css={{ w: '50%' }} />
-        </Fieldset>
-        <Fieldset>
-          <Label htmlFor="username">Username</Label>
-          <Input id="username" defaultValue="@hdz666" css={{ w: '50%' }} />
-        </Fieldset>
-        <Flex css={{ marginTop: 25, justifyContent: 'flex-end' }}>
-          <Dialog.Close asChild>
-            <Button variant="primary">Save changes</Button>
-          </Dialog.Close>
-        </Flex>
-      </Dialog.Content>
-    </Dialog.Portal>
-  </Dialog.Root>
-);
-
-export const Example = Template.bind({});
-Example.storyName = 'Dialog';

package/src/Modal/Dialog.tsx

@@ -1,57 +0,0 @@
-import React, { ReactNode, useEffect, useRef } from 'react';
-import { Root } from '@radix-ui/react-dialog';
-import { styled } from '@stitches/react';
-import {
-  CustomDialogContent,
-  CustomDialogOverlay,
-  DialogClose,
-  DialogDefaultCloseIcon,
-  DialogDescription,
-  DialogTitle,
-  StyledDialogPortal,
-  StyledDialogTrigger,
-} from './DialogContent';
-import { useDialogContainerSelector } from '../hooks/useDialogContainerSelector';
-
-const StyledDialog = styled(Root, {});
-
-// Handles race conditions when multiple elements with dismissable layer are present
-// https://github.com/radix-ui/primitives/issues/2122
-const DialogRoot = <T extends React.ComponentProps<typeof StyledDialog>>(props: T) => {
-  useEffect(() => {
-    return () => {
-      if (document) setTimeout(() => (document.body.style.pointerEvents = 'auto'), 0);
-    };
-  }, []);
-  return <StyledDialog {...(props as object)} />;
-};
-
-const CustomDialogPortal = ({ children, container }: { children: ReactNode; container?: HTMLElement | null }) => {
-  const dialogContainerSelector = useDialogContainerSelector();
-  const containerRef = useRef<HTMLElement | null>(null);
-
-  if (container) {
-    containerRef.current = container;
-  } else if (dialogContainerSelector && !containerRef.current) {
-    containerRef.current = document.querySelector(dialogContainerSelector) as HTMLElement;
-  } else if (!containerRef.current) {
-    containerRef.current = document.body;
-  }
-  return (
-    <StyledDialogPortal container={containerRef.current}>
-      <>{children}</>
-    </StyledDialogPortal>
-  );
-};
-
-export const Dialog = {
-  Root: DialogRoot,
-  Trigger: StyledDialogTrigger,
-  Overlay: CustomDialogOverlay,
-  Content: CustomDialogContent,
-  Title: DialogTitle,
-  Description: DialogDescription,
-  Close: DialogClose,
-  DefaultClose: DialogDefaultCloseIcon,
-  Portal: CustomDialogPortal,
-};

package/src/Modal/DialogContent.tsx

@@ -1,65 +0,0 @@
-import React, { ComponentProps } from 'react';
-import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { CrossIcon } from '@100mslive/react-icons';
-import { IconButton } from '../IconButton';
-import { styled } from '../Theme';
-import { dialogClose, dialogOpen } from '../utils/animations';
-
-export const DialogClose = styled(DialogPrimitive.Close, {
-  backgroundColor: 'transparent',
-  padding: '0',
-  margin: '0',
-  border: 'none',
-  backgroundImage: 'none',
-});
-
-export const StyledDialogTrigger = styled(DialogPrimitive.Trigger, {
-  appearance: 'none !important', // Needed for safari it shows white overlay
-});
-
-export const CustomDialogOverlay = styled(DialogPrimitive.Overlay, {
-  backgroundColor: 'rgba(0, 0, 0, 0.5);',
-  position: 'absolute',
-  inset: 0,
-});
-
-export const StyledDialogPortal = styled(DialogPrimitive.Portal, {});
-
-export const CustomDialogContent = styled(DialogPrimitive.Content, {
-  color: '$on_surface_medium',
-  backgroundColor: '$surface_dim',
-  borderRadius: '8px',
-  position: 'absolute',
-  top: '50%',
-  left: '50%',
-  maxHeight: '95%',
-  overflowY: 'auto',
-  border: '$space$px solid $border_bright',
-  boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)',
-  transform: 'translate(-50%, -50%)',
-  zIndex: 999,
-  padding: '$12',
-  '@allowMotion': {
-    '&[data-state="open"]': {
-      animation: `${dialogOpen} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
-    },
-    '&[data-state="closed"]': {
-      animation: `${dialogClose} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
-    },
-  },
-  '&:focus': { outline: 'none' },
-});
-
-export const DialogTitle = styled(DialogPrimitive.Title, {
-  margin: 0,
-});
-
-export const DialogDescription = styled(DialogPrimitive.Description, {});
-
-export const DialogDefaultCloseIcon = (props: ComponentProps<typeof IconButton>) => (
-  <DialogClose asChild>
-    <IconButton {...props}>
-      <CrossIcon />
-    </IconButton>
-  </DialogClose>
-);

package/src/Modal/index.ts

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

package/src/Pagination/StyledPagination.stories.tsx

@@ -1,80 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { ChevronLeftIcon, ChevronRightIcon } from '@100mslive/react-icons';
-import { StyledPagination } from '.';
-
-type PaginationProps = {
-  page: number;
-  setPage: (page: number) => void;
-  numPages: number;
-};
-
-const PaginationComponent = ({ page: propsPage, setPage: propsSetPage, numPages }: PaginationProps) => {
-  const [page, setPage] = useState(propsPage);
-
-  const disableLeft = page === 0;
-  const disableRight = page === numPages - 1;
-
-  const handlePageChange = useCallback(
-    (page: number) => {
-      setPage(page);
-      propsSetPage(page);
-    },
-    [propsSetPage],
-  );
-
-  const nextPage = () => {
-    handlePageChange(Math.min(page + 1, numPages - 1));
-  };
-
-  const prevPage = () => {
-    handlePageChange(Math.max(page - 1, 0));
-  };
-
-  useEffect(() => {
-    handlePageChange(propsPage);
-  }, [propsPage, handlePageChange]);
-
-  return (
-    <StyledPagination.Root>
-      <StyledPagination.Chevron
-        disabled={disableLeft}
-        onClick={prevPage}
-        type="button"
-        css={{ padding: 0, border: 'none', backgroundColor: 'transparent' }}
-      >
-        <ChevronLeftIcon width={16} height={16} style={{ cursor: disableLeft ? 'not-allowed' : 'pointer' }} />
-      </StyledPagination.Chevron>
-      <StyledPagination.Dots>
-        {[...Array(numPages)].map((_, i) => (
-          <StyledPagination.Dot key={i} active={page === i} onClick={() => handlePageChange(i)} type="button" />
-        ))}
-      </StyledPagination.Dots>
-      <StyledPagination.Chevron
-        disabled={disableRight}
-        onClick={nextPage}
-        type="button"
-        css={{ padding: 0, border: 'none', backgroundColor: 'transparent' }}
-      >
-        <ChevronRightIcon width={16} height={16} style={{ cursor: disableRight ? 'not-allowed' : 'pointer' }} />
-      </StyledPagination.Chevron>
-    </StyledPagination.Root>
-  );
-};
-
-export default {
-  title: 'UI Components/Pagination',
-  component: PaginationComponent,
-  argTypes: {
-    setPage: { action: { type: 'click' } },
-    page: { control: { type: 'number' }, defaultValue: 0 },
-    numPages: { control: { type: 'number' }, defaultValue: 5 },
-  },
-} as ComponentMeta<typeof PaginationComponent>;
-
-const Template: ComponentStory<typeof PaginationComponent> = args => {
-  return <PaginationComponent {...args} />;
-};
-
-export const Example = Template.bind({});
-Example.storyName = 'Pagination';

package/src/Pagination/StyledPagination.tsx

@@ -1,70 +0,0 @@
-import { styled } from '../Theme';
-
-const Root = styled('div', {
-  height: '2rem',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  width: '100%',
-  '& > * + *': {
-    marginRight: '0',
-    marginLeft: '0.5rem',
-  },
-});
-
-const Chevron = styled('button', {
-  color: '$on_surface_high',
-  border: 'none',
-  '&:focus': {
-    outline: 'none',
-  },
-  '&[disabled]': {
-    color: '$on_surface_low',
-    cursor: 'not-allowed',
-  },
-  backgroundColor: 'transparent',
-  display: 'flex',
-});
-
-const Dots = styled('div', {
-  display: 'flex',
-  alignItems: 'center',
-  '& > * + *': {
-    marginRight: '0',
-    marginLeft: '0.5rem',
-  },
-});
-
-const Dot = styled('button', {
-  '&:focus': {
-    outline: 'none',
-  },
-  borderRadius: '9999px',
-  width: '0.5rem',
-  height: '0.5rem',
-  backgroundColor: '$on_surface_low',
-  padding: '0px',
-  border: 'none',
-  cursor: 'pointer',
-  variants: {
-    active: {
-      true: {
-        backgroundColor: '$on_surface_high',
-      },
-    },
-  },
-});
-
-interface PaginationType {
-  Root: typeof Root;
-  Chevron: typeof Chevron;
-  Dots: typeof Dots;
-  Dot: typeof Dot;
-}
-
-export const StyledPagination: PaginationType = {
-  Root,
-  Chevron,
-  Dots,
-  Dot,
-};

package/src/Pagination/index.tsx

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

package/src/Popover/Popover.mdx

@@ -1,9 +0,0 @@
-## Popover
-
-Displays rich content in a portal, triggered by a button.
-
-- [Example](#example)
-
-### Example
-
-<Story id="button--example" />