feat: v2 Table Component

platform/ui/index.js

@@ -1,23 +1,7 @@
 import * as utils from './src/utils/';
-import {
+export * from './src/components';
-  ModalProvider,
+
-  ModalConsumer,
+export { utils };
-  useModal,
-  withModal,
-} from './src/contextProviders';
 
-export {
-  Button,
-  ButtonGroup,
-  DateRange,
-  Icon,
-  IconButton,
-  Input,
-  NavBar,
-  Select,
-  Svg,
-  ThemeWrapper,
-  Typography,
-} from './src/components';
 export { StudyList } from './src/views';
 export { ModalProvider, ModalConsumer, useModal, withModal, utils };

platform/ui/src/components/Table/Table.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+const Table = ({ children, className, fullWidth, style }) => {
+  return (
+    <div
+      className={classnames(
+        'text-lg text-white',
+        {
+          'w-full': fullWidth,
+        },
+        className
+      )}
+      style={style}
+    >
+      {children}
+    </div>
+  );
+};
+
+Table.defaultProps = {
+  className: '',
+  fullWidth: true,
+  style: {},
+};
+
+Table.propTypes = {
+  fullWidth: PropTypes.bool,
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  style: PropTypes.object,
+};
+
+export default Table;

platform/ui/src/components/Table/Table.mdx

@@ -0,0 +1,63 @@
+---
+name: Table
+menu: Components
+route: components/table
+---
+
+import { Playground, Props, Link } from 'docz';
+import { Table, TableHead, TableBody, TableRow, TableCell } from '@ohif/ui';
+
+# Table
+
+Tables display sets of data.
+
+## Import
+
+```javascript
+import { Table } from '@ohfi/ui';
+```
+
+## Basic usage
+
+<Playground>
+  <div className="p-4">
+    <Table>
+      <TableHead>
+        <TableRow>
+          <TableCell>Item 01</TableCell>
+          <TableCell>Item 02</TableCell>
+          <TableCell>Item 03</TableCell>
+          <TableCell>Item 04</TableCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        <TableRow>
+          <TableCell>Content 01</TableCell>
+          <TableCell>Content 02</TableCell>
+          <TableCell>Content 03</TableCell>
+          <TableCell>Content 04</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  </div>
+</Playground>
+
+## Table width
+
+Table has full width by default. If you want to change its width, you will have
+to set the `fullWidth` prop to `false` and then define your own table width by
+passing a `className` or by `style`.
+
+## Table components
+
+<Link to="components/table-head">TableHead</Link>
+<br />
+<Link to="components/table-body">TableBody</Link>
+<br />
+<Link to="components/table-row">TableRow</Link>
+<br />
+<Link to="components/table-cell">TableCell</Link>
+
+## Properties
+
+<Props of={Table} />

platform/ui/src/components/Table/index.js

@@ -0,0 +1,2 @@
+import Table from './Table';
+export default Table;

platform/ui/src/components/TableBody/TableBody.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+const TableBody = ({ children, className, style }) => {
+  return (
+    <div
+      className={classnames(
+        'mt-2 max-h-48 overflow-y-scroll ohif-scrollbar',
+        className
+      )}
+      style={style}
+    >
+      {React.Children.map(children, child =>
+        React.cloneElement(child, { isTableHead: false })
+      )}
+    </div>
+  );
+};
+
+TableBody.defaultProps = {
+  className: '',
+  style: {},
+};
+
+TableBody.propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  style: PropTypes.object,
+};
+
+export default TableBody;

platform/ui/src/components/TableBody/index.js

@@ -0,0 +1,2 @@
+import TableBody from './TableBody';
+export default TableBody;

platform/ui/src/components/TableCell/TableCell.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+const TableCell = ({ children, className, isTableHead, size, style }) => {
+  const sizeClasses = {
+    small: 'flex-0.3',
+    normal: 'flex-1',
+  };
+
+  return (
+    <div
+      className={classnames(
+        'px-2 last:border-r-0 break-all',
+        sizeClasses[size],
+        {
+          'border-r border-custom-violetPale': !isTableHead,
+        },
+        className
+      )}
+      style={style}
+    >
+      {children}
+    </div>
+  );
+};
+
+TableCell.defaultProps = {
+  className: '',
+  isTableHead: false,
+  size: 'normal',
+  style: {},
+};
+
+TableCell.propTypes = {
+  isTableHead: PropTypes.bool,
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  size: PropTypes.oneOf(['small', 'normal']),
+  style: PropTypes.object,
+};
+
+export default TableCell;

platform/ui/src/components/TableCell/index.js

@@ -0,0 +1,2 @@
+import TableCell from './TableCell';
+export default TableCell;

platform/ui/src/components/TableHead/TableHead.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+const TableHead = ({ children, className, style }) => {
+  return (
+    <div
+      className={classnames(
+        'bg-custom-navy border-b border-custom-violetPale flex font-bold',
+        className
+      )}
+      style={style}
+    >
+      {React.cloneElement(children, {
+        isTableHead: true,
+      })}
+    </div>
+  );
+};
+
+TableHead.defaultProps = {
+  className: '',
+  style: {},
+};
+
+TableHead.propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  style: PropTypes.object,
+};
+
+export default TableHead;

platform/ui/src/components/TableHead/index.js

@@ -0,0 +1,2 @@
+import TableHead from './TableHead';
+export default TableHead;

platform/ui/src/components/TableRow/TableRow.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+const TableRow = ({ children, className, isTableHead, style }) => {
+  return (
+    <div className={classnames('w-full flex', className)} style={style}>
+      {React.Children.map(children, child =>
+        React.cloneElement(child, { isTableHead })
+      )}
+    </div>
+  );
+};
+
+TableRow.defaultProps = {
+  isTableHead: false,
+  className: '',
+  style: {},
+};
+
+TableRow.propTypes = {
+  isTableHead: PropTypes.bool,
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  style: PropTypes.object,
+};
+
+export default TableRow;

platform/ui/src/components/TableRow/index.js

@@ -0,0 +1,2 @@
+import TableRow from './TableRow';
+export default TableRow;

platform/ui/src/components/index.js

@@ -7,6 +7,11 @@ import Input from './Input';
 import NavBar from './NavBar';
 import Select from './Select';
 import Svg from './Svg';
+import Table from './Table';
+import TableBody from './TableBody';
+import TableCell from './TableCell';
+import TableHead from './TableHead';
+import TableRow from './TableRow';
 import ThemeWrapper from './ThemeWrapper/';
 import Typography from './Typography';
 
@@ -20,6 +25,11 @@ export {
   NavBar,
   Select,
   Svg,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
   ThemeWrapper,
   Typography,
 };

platform/ui/src/gatsby-theme-docz/components/Layout/index.js

@@ -36,6 +36,7 @@ export const Layout = ({ children }) => {
             onClick={() => setSidebarOpen(false)}
           />
           <div
+            id="main-container"
             className={classnames('py-10 w-full', {
               'px-4 lg:px-20': sidebarOpen,
               'px-4 lg:px-8': !sidebarOpen,

platform/ui/src/gatsby-theme-docz/components/Sidebar/index.js

@@ -31,19 +31,19 @@ export const Sidebar = React.forwardRef((props, ref) => {
           <div className="block lg:hidden">
             <div
               onClick={() => props.onClick()}
-              className="fixed z-10 left-0 w-full h-full bg-black opacity-80"
+              className="fixed left-0 w-full h-full bg-black opacity-80"
-              style={{ top: '81px' }}
+              style={{ top: 81, zIndex: 99999 }}
             />
           </div>
           <div
             ref={ref}
             data-testid="sidebar"
             className={classnames(
-              'p-8 flex-col bg-white top-0 overflow-auto z-10 border-r border-gray-400 hidden fixed left-0 bottom-0 lg:block lg:sticky lg:h-screen lg:top-0'
+              'p-8 flex-col bg-white top-0 overflow-auto border-r border-gray-400 hidden fixed left-0 bottom-0 lg:block lg:sticky lg:h-screen lg:top-0'
             )}
             style={{
               display: props.sidebarOpen ? 'block' : 'none',
-              top: '81px',
+              zIndex: 99999,
               minWidth: 250,
             }}
           >

platform/ui/src/gatsby-theme-docz/theme.css

@@ -6,7 +6,11 @@
   background: #000;
 }
 
-[data-testid='main-container'] > h2 {
+#main-container > h2 {
-  margin: 20px 0;
+  @apply font-bold my-8 text-2xl;
-  font-weight: bold;
+}
+
+#main-container > ul li a,
+#main-container > a {
+  @apply underline text-blue-500;
 }

platform/ui/src/views/StudyList/components/StudyListTable.js

@@ -3,14 +3,23 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 import { format } from 'date-fns';
-import { Button, Icon, Typography } from '@ohif/ui';
+import {
+  Button,
+  Icon,
+  Typography,
+  Table,
+  TableHead,
+  TableBody,
+  TableRow,
+  TableCell,
+} from '@ohif/ui';
 
 const getGridColClass = (filtersMeta, name) => {
   const filter = filtersMeta.find(filter => filter.name === name);
   return (filter && filter.gridCol && `w-${filter.gridCol}/24`) || '';
 };
 
-const TableRow = props => {
+const StudyTableRow = props => {
   const {
     AccessionNumber,
     Modalities,
@@ -30,11 +39,6 @@ const TableRow = props => {
     'px-4 py-2 text-base',
     { 'border-b border-custom-violetPale': !isOpened },
   ];
-  const seriesWidthClasses = {
-    normal: 'px-2 flex-1',
-    small: 'px-2 flex-0.3',
-  };
-  const seriesBodyClasses = 'border-r border-custom-violetPale';
   return (
     <>
       <tr>
@@ -176,75 +180,35 @@ const TableRow = props => {
                         </div>
                       </div>
                       <div className="mt-4">
-                        <div className="w-full text-lg">
+                        <Table>
-                          <div className="bg-custom-navy border-b border-custom-violetPale flex">
+                          <TableHead>
-                            <div
+                            <TableRow>
-                              className={classnames(
+                              <TableCell size="normal">Description</TableCell>
-                                seriesWidthClasses.normal,
+                              <TableCell size="small">Series</TableCell>
-                                'font-bold'
+                              <TableCell size="small">Modality</TableCell>
-                              )}
+                              <TableCell size="normal">Instances</TableCell>
-                            >
+                            </TableRow>
-                              Description
+                          </TableHead>
-                            </div>
+
-                            <div
+                          <TableBody>
-                              className={classnames(
-                                seriesWidthClasses.small,
-                                'font-bold'
-                              )}
-                            >
-                              Series
-                            </div>
-                            <div
-                              className={classnames(
-                                seriesWidthClasses.small,
-                                'font-bold'
-                              )}
-                            >
-                              Modality
-                            </div>
-                            <div
-                              className={classnames(
-                                seriesWidthClasses.normal,
-                                'font-bold'
-                              )}
-                            >
-                              Instances
-                            </div>
-                          </div>
-                          <div className="mt-2 max-h-48 overflow-y-scroll ohif-scrollbar">
                             {series.map((seriesItem, i) => (
-                              <div className="w-full flex" key={i}>
+                              <TableRow key={i}>
-                                <div
+                                <TableCell size="normal">
-                                  className={classnames(
-                                    seriesWidthClasses.normal,
-                                    seriesBodyClasses
-                                  )}
-                                >
                                   Patient Protocol
-                                </div>
+                                </TableCell>
-                                <div
+                                <TableCell size="small">
-                                  className={classnames(
-                                    seriesWidthClasses.small,
-                                    seriesBodyClasses
-                                  )}
-                                >
                                   {seriesItem.SeriesNumber}
-                                </div>
+                                </TableCell>
-                                <div
+                                <TableCell size="small">
-                                  className={classnames(
-                                    seriesWidthClasses.small,
-                                    seriesBodyClasses
-                                  )}
-                                >
                                   {seriesItem.Modality}
-                                </div>
+                                </TableCell>
-                                <div className={classnames('pl-3 flex-1')}>
+                                <TableCell size="normal">
                                   {seriesItem.instances.length}
-                                </div>
+                                </TableCell>
-                              </div>
+                              </TableRow>
                             ))}
-                          </div>
+                          </TableBody>
-                        </div>
+                        </Table>
                       </div>
                     </td>
                   </tr>
@@ -258,7 +222,7 @@ const TableRow = props => {
   );
 };
 
-TableRow.propTypes = {
+StudyTableRow.propTypes = {
   AccessionNumber: PropTypes.string.isRequired,
   Modalities: PropTypes.string.isRequired,
   Instances: PropTypes.number.isRequired,
@@ -275,7 +239,7 @@ const StudyListTable = ({ studies, numOfStudies, filtersMeta }) => {
       <table className="w-full text-white">
         <tbody>
           {studies.map((study, i) => (
-            <TableRow
+            <StudyTableRow
               key={i}
               AccessionNumber={study.AccessionNumber || ''}
               Modalities={study.Modalities || ''}