chore(Table): Convert Table to TypeScript

packages/forma-36-react-components/index.d.ts

@@ -39,6 +39,11 @@
 /// <reference path="./dist/components/Skeleton/SkeletonContainer/SkeletonContainer.d.ts" />
 /// <reference path="./dist/components/Skeleton/SkeletonDisplayText/SkeletonDisplayText.d.ts" />
 /// <reference path="./dist/components/Skeleton/SkeletonText/SkeletonText.d.ts" />
+/// <reference path="./dist/components/Table/Table/Table.d.ts" />
+/// <reference path="./dist/components/Table/TableBody/TableBody.d.ts" />
+/// <reference path="./dist/components/Table/TableHead/TableHead.d.ts" />
+/// <reference path="./dist/components/Table/TableCell/TableCell/TableCell.d.ts" />
+/// <reference path="./dist/components/Table/TableRow/TableRow.d.ts" />
 
 import * as React from 'react';
 
@@ -83,6 +88,11 @@ import SkeletonBodyTextComponent from './dist/components/Skeleton/SkeletonBodyTe
 import SkeletonContainerComponent from './dist/components/Skeleton/SkeletonContainer/SkeletonContainer';
 import SkeletonDisplayTextComponent from './dist/components/Skeleton/SkeletonDisplayText/SkeletonDisplayText';
 import SkeletonTextComponent from './dist/components/Skeleton/SkeletonText/SkeletonText';
+import TableComponent from './dist/components/Table/Table/Table';
+import TableBodyComponent from './dist/components/Table/TableBody/TableBody';
+import TableHeadComponent from './dist/components/Table/TableHead/TableHead';
+import TableCellComponent from './dist/components/Table/TableCell/TableCell/TableCell';
+import TableRowComponent from './dist/components/Table/TableRow/TableRow';
 
 export const Button: typeof ButtonComponent;
 export const Spinner: typeof SpinnerComponent;
@@ -125,6 +135,11 @@ export const SkeletonBodyText: typeof SkeletonBodyTextComponent;
 export const SkeletonContainer: typeof SkeletonContainerComponent;
 export const SkeletonDisplayText: typeof SkeletonDisplayTextComponent;
 export const SkeletonText: typeof SkeletonTextComponent;
+export const Table: typeof TableComponent;
+export const TableBody: typeof TableBodyComponent;
+export const TableHead: typeof TableHeadComponent;
+export const TableCell: typeof TableCellComponent;
+export const TableRow: typeof TableRowComponent;
 
 export interface CopyButtonProps {
   extraClassNames?: string;
@@ -301,66 +316,6 @@ export class SelectField extends React.Component<SelectFieldProps, any> {
   render(): JSX.Element;
 }
 
-export interface TableProps {
-  extraClassNames?: string;
-  children: React.ReactNode;
-}
-
-export class Table extends React.Component<TableProps, any> {
-  render(): JSX.Element;
-}
-export interface TableBodyProps {
-  extraClassNames?: string;
-  children: React.ReactNode;
-}
-
-export class TableBody extends React.Component<TableBodyProps, any> {
-  render(): JSX.Element;
-}
-export type TableCellSorting = any | any;
-
-export type TableCellAlign = 'center' | 'left' | 'right';
-
-export interface TableCellProps {
-  extraClassNames?: string;
-  children?: React.ReactNode;
-  sorting?: TableCellSorting;
-  align?: TableCellAlign;
-}
-
-export class TableCell extends React.Component<TableCellProps, any> {
-  render(): JSX.Element;
-}
-export interface TableSortingLabelProps {
-  extraClassNames?: string;
-  children: React.ReactNode;
-  direction?: any;
-  active: boolean;
-}
-
-export class TableSortingLabel extends React.Component<
-  TableSortingLabelProps,
-  any
-> {
-  render(): JSX.Element;
-}
-export interface TableHeadProps {
-  extraClassNames?: string;
-  children: React.ReactNode;
-}
-
-export class TableHead extends React.Component<TableHeadProps, any> {
-  render(): JSX.Element;
-}
-export interface TableRowProps {
-  extraClassNames?: string;
-  children: React.ReactNode;
-}
-
-export class TableRow extends React.Component<TableRowProps, any> {
-  render(): JSX.Element;
-}
-
 export type TextFieldValue = string | number;
 
 export interface TextFieldProps {

packages/forma-36-react-components/src/components/Table/Table/Table.stories.js → packages/forma-36-react-components/src/components/Table/Table/Table.stories.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { boolean, text } from '@storybook/addon-knobs';
-import { withInfo } from '@storybook/addon-info';
 
 import notes from './Table.md';
 import Table from './Table';
@@ -11,7 +10,15 @@ import TableCell from '../TableCell';
 import TableRow from '../TableRow';
 
 storiesOf('Components|Table', module)
-  .addDecorator(withInfo)
+  .addParameters({
+    propTypes: [
+      Table['__docgenInfo'],
+      TableHead['__docgenInfo'],
+      TableBody['__docgenInfo'],
+      TableCell['__docgenInfo'],
+      TableRow['__docgenInfo'],
+    ],
+  })
   .add(
     'default',
     () => (

packages/forma-36-react-components/src/components/Table/Table/Table.tsx

@@ -0,0 +1,27 @@
+import React, { Component } from 'react';
+import cn from 'classnames';
+import styles from './Table.css';
+
+export interface TableProps {
+  extraClassNames?: string;
+  children: React.ReactNode;
+}
+
+export class Table extends Component<TableProps> {
+  render() {
+    const { extraClassNames, children, ...otherProps } = this.props;
+
+    return (
+      <table
+        className={cn(extraClassNames, styles['Table'])}
+        cellPadding="0"
+        cellSpacing="0"
+        {...otherProps}
+      >
+        {children}
+      </table>
+    );
+  }
+}
+
+export default Table;

packages/forma-36-react-components/src/components/Table/TableBody/TableBody.tsx

@@ -0,0 +1,16 @@
+import React, { Component } from 'react';
+
+export interface TableBodyProps {
+  extraClassNames?: string;
+  children: React.ReactNode;
+}
+
+export class TableBody extends Component<TableBodyProps> {
+  render() {
+    const { extraClassNames, children } = this.props;
+
+    return <tbody className={extraClassNames}>{children}</tbody>;
+  }
+}
+
+export default TableBody;

packages/forma-36-react-components/src/components/Table/TableCell/TableCell/TableCell.test.js → packages/forma-36-react-components/src/components/Table/TableCell/TableCell/TableCell.test.tsx

@@ -3,16 +3,6 @@ import { shallow } from 'enzyme';
 import TableCell from './TableCell';
 
 it('renders the component', () => {
-  const output = shallow(
-    <TableCell active direction="asc">
-      Foo
-    </TableCell>,
-  );
-
-  expect(output).toMatchSnapshot();
-});
-
-it('renders the component inactive', () => {
   const output = shallow(<TableCell sorting="asc">Foo</TableCell>);
 
   expect(output).toMatchSnapshot();

packages/forma-36-react-components/src/components/Table/TableCell/TableCell/TableCell.tsx

@@ -0,0 +1,60 @@
+import React, { Component } from 'react';
+import cn from 'classnames';
+
+import { TableCellContext } from './TableCellContext';
+
+import styles from './TableCell.css';
+
+export const sortingDirections = {
+  asc: 'asc',
+  desc: 'desc',
+};
+
+export interface TableCellProps {
+  extraClassNames?: string;
+  children?: React.ReactNode;
+  align?: 'center' | 'left' | 'right';
+  sorting?: keyof typeof sortingDirections | boolean;
+}
+
+export class TableCell extends Component<TableCellProps> {
+  static defaultProps: Partial<TableCellProps> = {
+    align: 'left',
+    sorting: false,
+  };
+
+  render() {
+    const {
+      extraClassNames,
+      children,
+      sorting,
+      align,
+      ...otherProps
+    } = this.props;
+
+    return (
+      <TableCellContext.Consumer>
+        {({ name: context, element, offsetTop }) => {
+          const Element = element as any;
+          return (
+            <Element
+              className={cn(styles['TableCell'], extraClassNames, {
+                [styles['TableCell--head']]: context === 'head',
+                [styles['TableCell--head__sorting']]: sorting,
+              })}
+              style={{
+                top: offsetTop,
+              }}
+              align={align}
+              {...otherProps}
+            >
+              {children}
+            </Element>
+          );
+        }}
+      </TableCellContext.Consumer>
+    );
+  }
+}
+
+export default TableCell;

packages/forma-36-react-components/src/components/Table/TableCell/TableCell/TableCellContext.js → packages/forma-36-react-components/src/components/Table/TableCell/TableCell/TableCellContext.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 
 export const contextOptions = {
-  body: { name: 'body', element: 'td' },
-  head: { name: 'head', element: 'th' },
+  body: { name: 'body', element: 'td', offsetTop: 0 },
+  head: { name: 'head', element: 'th', offsetTop: 0 },
 };
 
 export const TableCellContext = React.createContext(contextOptions.body);

packages/forma-36-react-components/src/components/Table/TableCell/TableCell/__snapshots__/TableCell.test.js.snap → packages/forma-36-react-components/src/components/Table/TableCell/TableCell/__snapshots__/TableCell.test.tsx.snap

@@ -5,9 +5,3 @@ exports[`renders the component 1`] = `
   <Component />
 </ContextConsumer>
 `;
-
-exports[`renders the component inactive 1`] = `
-<ContextConsumer>
-  <Component />
-</ContextConsumer>
-`;