From a6c3d92a42bb8bc7f007ece15c15d8602493366c Mon Sep 17 00:00:00 2001 From: Wenche Tollevsen Date: Fri, 16 Oct 2020 07:47:02 +0200 Subject: [PATCH] Table typescript take two (#682) * convert to typescript * Change suffix * Radius optional --- libraries/core-react/src/Table/Body.jsx | 25 ----- libraries/core-react/src/Table/Body.tsx | 12 +++ .../src/Table/{Cell.jsx => Cell.tsx} | 52 +++++----- .../src/Table/{Head.jsx => Head.tsx} | 30 +++--- libraries/core-react/src/Table/Row.jsx | 25 ----- libraries/core-react/src/Table/Row.tsx | 14 +++ libraries/core-react/src/Table/Table.jsx | 27 ----- .../core-react/src/Table/Table.tokens.js | 23 ----- .../core-react/src/Table/Table.tokens.ts | 99 +++++++++++++++++++ libraries/core-react/src/Table/Table.tsx | 15 +++ libraries/core-react/src/Table/index.js | 15 --- libraries/core-react/src/Table/index.ts | 21 ++++ libraries/tokens/src/types.ts | 16 +-- 13 files changed, 204 insertions(+), 170 deletions(-) delete mode 100644 libraries/core-react/src/Table/Body.jsx create mode 100644 libraries/core-react/src/Table/Body.tsx rename libraries/core-react/src/Table/{Cell.jsx => Cell.tsx} (59%) rename libraries/core-react/src/Table/{Head.jsx => Head.tsx} (50%) delete mode 100644 libraries/core-react/src/Table/Row.jsx create mode 100644 libraries/core-react/src/Table/Row.tsx delete mode 100644 libraries/core-react/src/Table/Table.jsx delete mode 100644 libraries/core-react/src/Table/Table.tokens.js create mode 100644 libraries/core-react/src/Table/Table.tokens.ts create mode 100644 libraries/core-react/src/Table/Table.tsx delete mode 100644 libraries/core-react/src/Table/index.js create mode 100644 libraries/core-react/src/Table/index.ts diff --git a/libraries/core-react/src/Table/Body.jsx b/libraries/core-react/src/Table/Body.jsx deleted file mode 100644 index 14a9f071ad..0000000000 --- a/libraries/core-react/src/Table/Body.jsx +++ /dev/null @@ -1,25 +0,0 @@ -// @ts-nocheck -import React from 'react' -import PropTypes from 'prop-types' -import styled from 'styled-components' - -const TableBase = styled.tbody`` - -export const Body = (props) => { - const { children } = props - - return {children} -} - -Body.propTypes = { - /** @ignore */ - className: PropTypes.string, - /** @ignore */ - children: PropTypes.node.isRequired, -} - -Body.defaultProps = { - className: '', -} - -Body.displayName = 'eds-table-body' diff --git a/libraries/core-react/src/Table/Body.tsx b/libraries/core-react/src/Table/Body.tsx new file mode 100644 index 0000000000..ab8e850a4c --- /dev/null +++ b/libraries/core-react/src/Table/Body.tsx @@ -0,0 +1,12 @@ +import React, { HTMLAttributes } from 'react' +import styled from 'styled-components' + +const TableBase = styled.tbody`` + +type Props = HTMLAttributes + +export const Body = ({ children, ...props }: Props): JSX.Element => { + return {children} +} + +Body.displayName = 'eds-table-body' diff --git a/libraries/core-react/src/Table/Cell.jsx b/libraries/core-react/src/Table/Cell.tsx similarity index 59% rename from libraries/core-react/src/Table/Cell.jsx rename to libraries/core-react/src/Table/Cell.tsx index 32542266f3..58a3689146 100644 --- a/libraries/core-react/src/Table/Cell.jsx +++ b/libraries/core-react/src/Table/Cell.tsx @@ -1,17 +1,20 @@ -// @ts-nocheck -import React from 'react' -import PropTypes from 'prop-types' +import React, { HTMLAttributes } from 'react' import styled, { css } from 'styled-components' -import { getTokens } from './Table.tokens' +import type { Border } from '@equinor/eds-tokens' +import { getTokens, TableCell } from './Table.tokens' import { typographyTemplate } from '../_common/templates' -const borderTemplate = (borders) => +const borderTemplate = (borders: { bottom: Border }) => Object.keys(borders).reduce((acc, val) => { - const { color, width } = borders[val] + const { color, width }: Border = borders[val] as Border return `${acc} border-${val}: ${width} solid ${color}; \n` }, '') -const Base = ({ tokens, as }) => { +type BaseProps = { + tokens: TableCell + as: string +} +const Base = ({ tokens, as }: BaseProps) => { const { background, height, text, spacings, borders } = tokens const { typography } = text const bordersAndBackground = @@ -39,8 +42,19 @@ const TableBase = styled.td` ${Base} ` -export const Cell = (props) => { - const { children, as, variant } = props +type Props = { + /** Specifies which td or th to use */ + as: 'td' | 'th' + /** Specifies which variant to use */ + variant: 'text' | 'icon' | 'numeric' | 'input' +} & HTMLAttributes + +export const Cell = ({ + children, + as = 'td', + variant = 'text', + ...props +}: Props): JSX.Element => { const tokens = getTokens(as, variant) return ( @@ -49,24 +63,4 @@ export const Cell = (props) => { ) } -Cell.propTypes = { - /** @ignore */ - className: PropTypes.string, - /** @ignore */ - children: PropTypes.node.isRequired, - /** Specifies which td or th to use */ - as: PropTypes.oneOf(['td', 'th']), - /** Specifies the scope of th */ - // scope: PropTypes.oneOf(['col', 'row']), - /** Specifies which variant to use */ - variant: PropTypes.oneOf(['text', 'icon', 'numeric', 'input']), -} - -Cell.defaultProps = { - className: '', - // scope: '', - as: 'td', - variant: 'text', -} - Cell.displayName = 'eds-table-cell' diff --git a/libraries/core-react/src/Table/Head.jsx b/libraries/core-react/src/Table/Head.tsx similarity index 50% rename from libraries/core-react/src/Table/Head.jsx rename to libraries/core-react/src/Table/Head.tsx index 436c6f7e4b..1f705bc0bc 100644 --- a/libraries/core-react/src/Table/Head.jsx +++ b/libraries/core-react/src/Table/Head.tsx @@ -1,22 +1,25 @@ -// @ts-nocheck -import React from 'react' -import PropTypes from 'prop-types' +import React, { FunctionComponent } from 'react' import styled, { css } from 'styled-components' -import { getTokens } from './Table.tokens' +import { getTokens, TableCell } from './Table.tokens' +import type { Border } from '@equinor/eds-tokens' -const borderTemplate = (borders) => +const borderTemplate = (borders: { bottom: Border }): string => Object.keys(borders).reduce((acc, val) => { - const { color, width } = borders[val] + const { color, width }: Border = borders[val] as Border return `${acc} border-${val}: ${width} solid ${color}; \n` }, '') -const StyledTableHead = styled.thead` +type StyledTableHeadProps = { + token: TableCell +} + +const StyledTableHead = styled.thead` ${({ token: { borders, background } }) => css` ${borderTemplate(borders)} background: ${background};`} ` -export const Head = ({ children, ...props }) => { +export const Head: FunctionComponent = ({ children, ...props }) => { const token = getTokens('th', 'text') return ( @@ -25,15 +28,4 @@ export const Head = ({ children, ...props }) => { ) } -Head.propTypes = { - /** @ignore */ - className: PropTypes.string, - /** @ignore */ - children: PropTypes.node.isRequired, -} - -Head.defaultProps = { - className: '', -} - Head.displayName = 'eds-table-head' diff --git a/libraries/core-react/src/Table/Row.jsx b/libraries/core-react/src/Table/Row.jsx deleted file mode 100644 index ff82a8ac83..0000000000 --- a/libraries/core-react/src/Table/Row.jsx +++ /dev/null @@ -1,25 +0,0 @@ -// @ts-nocheck -import React from 'react' -import PropTypes from 'prop-types' -import styled from 'styled-components' - -const TableBase = styled.tr`` - -export const Row = (props) => { - const { children } = props - - return {children} -} - -Row.propTypes = { - /** @ignore */ - className: PropTypes.string, - /** @ignore */ - children: PropTypes.node.isRequired, -} - -Row.defaultProps = { - className: '', -} - -Row.displayName = 'eds-table-row' diff --git a/libraries/core-react/src/Table/Row.tsx b/libraries/core-react/src/Table/Row.tsx new file mode 100644 index 0000000000..8ff871e753 --- /dev/null +++ b/libraries/core-react/src/Table/Row.tsx @@ -0,0 +1,14 @@ +import React, { FunctionComponent } from 'react' +import styled from 'styled-components' + +const TableBase = styled.tr`` + +type Props = React.HTMLAttributes + +export const Row: FunctionComponent = (props) => { + const { children } = props + + return {children} +} + +Row.displayName = 'EdsTableRow' diff --git a/libraries/core-react/src/Table/Table.jsx b/libraries/core-react/src/Table/Table.jsx deleted file mode 100644 index d66b40a828..0000000000 --- a/libraries/core-react/src/Table/Table.jsx +++ /dev/null @@ -1,27 +0,0 @@ -// @ts-nocheck -import React from 'react' -import PropTypes from 'prop-types' -import styled from 'styled-components' - -const TableBase = styled.table` - border-spacing: 0; - border-collapse: collapse; -` - -export const Table = (props) => { - const { children } = props - return {children} -} - -Table.propTypes = { - /** @ignore */ - className: PropTypes.string, - /** @ignore */ - children: PropTypes.node.isRequired, -} - -Table.defaultProps = { - className: '', -} - -Table.displayName = 'eds-table' diff --git a/libraries/core-react/src/Table/Table.tokens.js b/libraries/core-react/src/Table/Table.tokens.js deleted file mode 100644 index b8929ba420..0000000000 --- a/libraries/core-react/src/Table/Table.tokens.js +++ /dev/null @@ -1,23 +0,0 @@ -import tableTokens from '@equinor/eds-tokens/components/table/table.json' - -const { header, cell } = tableTokens - -const variants = { - header: { text: header.text }, - cell: { - text: cell.text, - numeric: cell.monospaced_numeric, - icon: cell.icon, - input: cell.input, - }, -} - -export const getTokens = (as, variant) => { - switch (as) { - case 'th': - return variants.header[variant] - case 'td': - default: - return variants.cell[variant] - } -} diff --git a/libraries/core-react/src/Table/Table.tokens.ts b/libraries/core-react/src/Table/Table.tokens.ts new file mode 100644 index 0000000000..ad8cc86606 --- /dev/null +++ b/libraries/core-react/src/Table/Table.tokens.ts @@ -0,0 +1,99 @@ +import tableTokens from '@equinor/eds-tokens/components/table/table.json' +import type { + Border, + Clickbound, + Spacing, + Typography, +} from '@equinor/eds-tokens' + +const { header, cell } = tableTokens + +type Field = { + height: string + background: string + borders: { + outline: Border + } + text: { + color: string + typography: Typography + colorPlaceholder: string + } + spacings: Spacing +} + +export type TableCell = { + height: string + background: string + borders: { + bottom: Border + } + text?: { + color: string + typography: Typography + } + spacings: Spacing + clickbound: Clickbound + field?: Field + active: { + background: string + color?: string + typography?: Typography + borders: { + bottom: Border + } + field?: Field + } + disabled: { + background: string + color?: string + typography?: Typography + borders: { + bottom: Border + } + field?: Field + } + focus: { + type?: string + color?: string + width?: string + gap?: string + field?: Field + } + hover: { + background: string + field?: Field + } +} + +type Variants = { + header: { + text: TableCell + } + cell: { + text: TableCell + numeric: TableCell + icon: TableCell + input: TableCell + } +} + +const variants: Variants = { + header: { text: header.text }, + cell: { + text: cell.text, + numeric: cell.monospaced_numeric, + icon: cell.icon, + input: cell.input, + }, +} + +export const getTokens = (as: string, variant: string): TableCell => { + switch (as) { + case 'th': + return variants.header[variant] as TableCell + case 'td': + default: + return variants.cell[variant] as TableCell + } +} diff --git a/libraries/core-react/src/Table/Table.tsx b/libraries/core-react/src/Table/Table.tsx new file mode 100644 index 0000000000..2a428af9ee --- /dev/null +++ b/libraries/core-react/src/Table/Table.tsx @@ -0,0 +1,15 @@ +import React, { FunctionComponent, HTMLAttributes } from 'react' +import styled from 'styled-components' + +const TableBase = styled.table` + border-spacing: 0; + border-collapse: collapse; +` + +type Props = HTMLAttributes + +export const Table: FunctionComponent = ({ children, ...props }) => { + return {children} +} + +Table.displayName = 'EdsTable' diff --git a/libraries/core-react/src/Table/index.js b/libraries/core-react/src/Table/index.js deleted file mode 100644 index 22d93aa2d3..0000000000 --- a/libraries/core-react/src/Table/index.js +++ /dev/null @@ -1,15 +0,0 @@ -// @ts-nocheck -import { Table } from './Table' -import { Caption } from './Caption' -import { Body } from './Body' -import { Cell } from './Cell' -import { Head } from './Head' -import { Row } from './Row' - -Table.Caption = Caption -Table.Body = Body -Table.Cell = Cell -Table.Head = Head -Table.Row = Row - -export { Table } diff --git a/libraries/core-react/src/Table/index.ts b/libraries/core-react/src/Table/index.ts new file mode 100644 index 0000000000..0dd2eadc28 --- /dev/null +++ b/libraries/core-react/src/Table/index.ts @@ -0,0 +1,21 @@ +import { Table as BaseComponent } from './Table' +import { Body } from './Body' +import { Cell } from './Cell' +import { Head } from './Head' +import { Row } from './Row' + +type TableTypes = typeof BaseComponent & { + Body: typeof Body + Cell: typeof Cell + Head: typeof Head + Row: typeof Row +} + +const Table = BaseComponent as TableTypes + +Table.Body = Body +Table.Cell = Cell +Table.Head = Head +Table.Row = Row + +export { Table } diff --git a/libraries/tokens/src/types.ts b/libraries/tokens/src/types.ts index 85ce604ebe..5c256fa052 100644 --- a/libraries/tokens/src/types.ts +++ b/libraries/tokens/src/types.ts @@ -23,7 +23,7 @@ export type TypographyTokens = { export type Border = { type?: 'outline' | 'border' - radius: string + radius?: string | number color?: string width?: string | number } @@ -31,8 +31,8 @@ export type Border = { export type Spacing = { left: string right: string - top: string - bottom: string + top?: string + bottom?: string } export type Clickbounds = { @@ -84,8 +84,10 @@ export type Pressed = { export type Clickbound = { height: string width: string - offset: { - x: string - y: string - } + offset: + | { + x: string + y: string + } + | number }