perf: Modal (#349)

packages/fuselage/.storybook/helpers.js

@@ -2,28 +2,53 @@ import React from 'react';
 
 import { Box } from '../src';
 
-export function PropsVariationSection({ component: Component, common = {}, xAxis = {}, yAxis = {} }) {
-  return <Box is='table' marginBlock='x16' marginInline='auto' style={{ borderCollapse: 'collapse' }}>
-    <Box is='thead'>
-      <Box is='tr'>
-        <Box is='th' />
-        {Object.keys(xAxis).map((xVariation, key) =>
-          <Box key={key} is='th' color='hint' fontScale='c1'>{xVariation}</Box>)}
-      </Box>
-    </Box>
-    <Box is='tbody'>
-      {Object.entries(yAxis).map(([yVariation, yProps], y) => (
-        <Box key={y} is='tr'>
-          <Box is='th' color='hint' fontScale='c1'>{yVariation}</Box>
-          {Object.values(xAxis).map((xProps, x) => <Box key={x} is='td' margin='none' paddingBlock='x8' paddingInline='x16'>
-            <Box display='flex' alignItems='center' justifyContent='center'>
-              <Component {...common} {...xProps} {...yProps} />
+export function PropsVariationSection({
+  component: Component,
+  common = {},
+  xAxis = {},
+  yAxis = {},
+}) {
+  return (
+    <Box
+      is='table'
+      marginBlock='x16'
+      marginInline='auto'
+      style={{ borderCollapse: 'collapse' }}
+    >
+      <Box is='thead'>
+        <Box is='tr'>
+          <Box is='th' />
+          {Object.keys(xAxis).map((xVariation, key) => (
+            <Box key={key} is='th' color='hint' fontScale='c1'>
+              {xVariation}
             </Box>
-          </Box>)}
+          ))}
         </Box>
-      ))}
+      </Box>
+      <Box is='tbody'>
+        {Object.entries(yAxis).map(([yVariation, yProps], y) => (
+          <Box key={y} is='tr'>
+            <Box is='th' color='hint' fontScale='c1'>
+              {yVariation}
+            </Box>
+            {Object.values(xAxis).map((xProps, x) => (
+              <Box
+                key={x}
+                is='td'
+                margin='none'
+                paddingBlock='x8'
+                paddingInline='x16'
+              >
+                <Box display='flex' alignItems='center' justifyContent='center'>
+                  <Component {...common} {...xProps} {...yProps} />
+                </Box>
+              </Box>
+            ))}
+          </Box>
+        ))}
+      </Box>
     </Box>
-  </Box>;
+  );
 }
 
 export const exampleAvatar = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAA

packages/fuselage/.storybook/main.js

@@ -4,14 +4,13 @@ module.exports = {
   addons: [
     '@storybook/addon-actions',
     '@storybook/addon-backgrounds',
+    '@storybook/addon-controls',
     '@storybook/addon-docs',
     '@storybook/addon-knobs',
     '@storybook/addon-viewport',
-    ...process.env.NODE_ENV === 'production' ? ['@storybook/addon-jest'] : [],
-  ],
-  stories: [
-    '../src/**/*.stories.{mdx,js}',
+    ...(process.env.NODE_ENV === 'production' ? ['@storybook/addon-jest'] : []),
   ],
+  stories: ['../src/**/*.stories.{mdx,js}'],
   webpackFinal: (config) => {
     config.module.rules.push({
       test: /\.scss$/,

packages/fuselage/.storybook/preview.js

@@ -7,30 +7,33 @@ import '@rocket.chat/icons/dist/rocketchat.css';
 import '@rocket.chat/fuselage-polyfills';
 
 addParameters({
+  background: {
+    grid: {
+      cellSize: 4,
+    },
+  },
   docs: {
     container: DocsContainer,
     page: DocsPage,
   },
-  grid: {
-    cellSize: 4,
-  },
   options: {
-    showRoots: true,
-    storySort: ([, a], [, b]) =>
-      a.kind.localeCompare(b.kind),
+    storySort: ([, a], [, b]) => a.kind.localeCompare(b.kind),
   },
   viewport: {
-    viewports: Object.entries(breakpointTokens).reduce((obj, [name, { minViewportWidth }]) => ({
-      ...obj,
-      [name]: {
-        name,
-        styles: {
-          width: `${ minViewportWidth }px`,
-          height: '90%',
+    viewports: Object.entries(breakpointTokens).reduce(
+      (obj, [name, { minViewportWidth }]) => ({
+        ...obj,
+        [name]: {
+          name,
+          styles: {
+            width: `${minViewportWidth}px`,
+            height: '90%',
+          },
+          type: 'desktop',
         },
-        type: 'desktop',
-      },
-    }), {}),
+      }),
+      {}
+    ),
   },
 });
 

packages/fuselage/fuselage.d.ts

@@ -1,5 +1,6 @@
 declare module '@rocket.chat/fuselage' {
-	import { css } from '@rocket.chat/css-in-js';
+  import type { css } from '@rocket.chat/css-in-js';
+
 	import {
 		AllHTMLAttributes,
 		Context,
@@ -226,19 +227,21 @@ declare module '@rocket.chat/fuselage' {
 	};
 
 	type ModalProps = BoxProps;
-	type ModalHeaderProps = BoxProps;
-	type ModalTitleProps = BoxProps;
+	type ModalBackdropProps = BoxProps;
 	type ModalCloseProps = BoxProps;
 	type ModalContentProps = BoxProps;
 	type ModalFooterProps = BoxProps;
-	type ModalBackdropProps = BoxProps;
+  type ModalHeaderProps = BoxProps;
+  type ModalThumbProps = BoxProps;
+	type ModalTitleProps = BoxProps;
 	export const Modal: ForwardRefExoticComponent<ModalProps> & {
-		Header: ForwardRefExoticComponent<ModalHeaderProps>;
-		Title: ForwardRefExoticComponent<ModalTitleProps>;
+    Backdrop: ForwardRefExoticComponent<ModalBackdropProps>;
 		Close: ForwardRefExoticComponent<ModalCloseProps>;
 		Content: ForwardRefExoticComponent<ModalContentProps>;
 		Footer: ForwardRefExoticComponent<ModalFooterProps>;
-		Backdrop: ForwardRefExoticComponent<ModalBackdropProps>;
+    Header: ForwardRefExoticComponent<ModalHeaderProps>;
+    Thumb: ForwardRefExoticComponent<ModalThumbProps>;
+		Title: ForwardRefExoticComponent<ModalTitleProps>;
 	};
 
 	type NumberInputProps = BoxProps;

packages/fuselage/package.json

@@ -67,6 +67,7 @@
     "@rocket.chat/fuselage-polyfills": "^0.19.0",
     "@storybook/addon-actions": "^6.0.21",
     "@storybook/addon-backgrounds": "^6.0.21",
+    "@storybook/addon-controls": "^6.1.10",
     "@storybook/addon-docs": "^6.0.21",
     "@storybook/addon-jest": "^6.0.21",
     "@storybook/addon-knobs": "^6.0.21",

packages/fuselage/src/components/Modal/Modal.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import { Box } from '../Box';
+
+export const Modal = React.forwardRef(({ children, ...props }, ref) => (
+  <Box is='dialog' rcx-modal {...props}>
+    <Box ref={ref} rcx-modal__inner elevation='2'>
+      {children}
+    </Box>
+  </Box>
+));

packages/fuselage/src/components/Modal/Modal.spec.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { Modal } from '../..';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<Modal />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});

packages/fuselage/src/components/Modal/Modal.stories.js

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import { ButtonGroup, Button, Modal } from '../..';
+
+export default {
+  title: 'Containers/Modal',
+  component: Modal,
+  parameters: {
+    jest: ['Modal/Modal.spec.js'],
+  },
+};
+
+export const _Modal = () => (
+  <Modal>
+    <Modal.Header>
+      <Modal.Thumb url='data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==' />
+      <Modal.Title>Modal Header</Modal.Title>
+      <Modal.Close />
+    </Modal.Header>
+    <Modal.Content>Modal Body</Modal.Content>
+    <Modal.Footer>
+      <ButtonGroup align='end'>
+        <Button>Cancel</Button>
+        <Button primary>Submit</Button>
+      </ButtonGroup>
+    </Modal.Footer>
+  </Modal>
+);

packages/fuselage/src/components/Modal/Modal.styles.scss

@@ -0,0 +1,74 @@
+@use '../../styles/colors.scss';
+@use '../../styles/lengths.scss';
+@use '../../styles/typography.scss';
+
+.rcx-modal {
+  position: static;
+
+  display: flex;
+
+  width: 100%;
+  max-height: 100%;
+  margin: auto;
+
+  background: none;
+
+  &__inner {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+
+    min-width: 0;
+    padding: 0;
+
+    color: colors.foreground(default);
+    border-radius: 2px;
+    background-color: colors.surface();
+    @include typography.use-font-scale(p1);
+  }
+
+  &__header {
+    margin: 32px;
+  }
+
+  &__header-inner {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+
+    margin: -8px;
+  }
+
+  &__title {
+    @include typography.use-text-ellipsis;
+    flex-grow: 1;
+    flex-shrink: 1;
+
+    white-space: nowrap;
+
+    color: colors.foreground('default');
+    @include typography.use-font-scale(h1);
+  }
+
+  &__backdrop {
+    position: fixed;
+
+    z-index: 100;
+    inset: 0;
+
+    background-color: colors.neutral(800, $alpha: 0.5);
+  }
+
+  &__footer {
+    margin: 32px;
+  }
+
+  &__content-wrapper {
+    margin-inline: 32px;
+  }
+
+  @include on-breakpoint(sm) {
+    max-width: lengths.size(640);
+    padding: lengths.padding(16);
+  }
+}

packages/fuselage/src/components/Modal/ModalBackdrop.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+import { Box } from '../Box';
+
+export const ModalBackdrop = (props) => <Box rcx-modal__backdrop {...props} />;

packages/fuselage/src/components/Modal/ModalClose.js

@@ -0,0 +1,10 @@
+import React from 'react';
+
+import { Button } from '../Button';
+import { Icon } from '../Icon';
+
+export const ModalClose = (props) => (
+  <Button small ghost flexShrink={0} {...props}>
+    <Icon name='cross' size='x24' />
+  </Button>
+);

packages/fuselage/src/components/Modal/ModalContent.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { Box, Scrollable } from '../Box';
+
+export const ModalContent = ({ children, onScrollContent, ...props }) => (
+  <Scrollable vertical onScrollContent={onScrollContent}>
+    <Box rcx-modal__content>
+      <Box rcx-modal__content-wrapper {...props}>
+        {children}
+      </Box>
+    </Box>
+  </Scrollable>
+);