diff --git a/frontend/src/component/ui/Table.scss b/frontend/src/component/ui/Table.module.scss similarity index 100% rename from frontend/src/component/ui/Table.scss rename to frontend/src/component/ui/Table.module.scss diff --git a/frontend/src/component/ui/Table.tsx b/frontend/src/component/ui/Table.tsx index 05488858a..07539228b 100644 --- a/frontend/src/component/ui/Table.tsx +++ b/frontend/src/component/ui/Table.tsx @@ -1,6 +1,6 @@ import React, { Component, ReactChild } from 'react'; -import './Table.scss'; +import styles from './Table.module.scss'; import { TextAlignProperty } from 'csstype'; interface IProps { @@ -67,8 +67,8 @@ export class Table extends Component { render() { return ( -
- +
+
{this.createHeaders()}{this.createBody()}
diff --git a/story/.storybook/main.js b/story/.storybook/main.js index 8385f0e72..4b3b73264 100644 --- a/story/.storybook/main.js +++ b/story/.storybook/main.js @@ -3,7 +3,8 @@ module.exports = { addons: [ '@storybook/addon-knobs', '@storybook/addon-actions', - '@storybook/addon-docs' + '@storybook/addon-docs', + '@storybook/addon-backgrounds' ], webpackFinal: async (config) => { config.module.rules.push({ diff --git a/story/.storybook/preview.js b/story/.storybook/preview.js new file mode 100644 index 000000000..22df61f1c --- /dev/null +++ b/story/.storybook/preview.js @@ -0,0 +1,15 @@ +export const parameters = { + backgrounds: { + default: 'short', + values: [ + { + name: 'white', + value: '#fff' + }, + { + name: 'short', + value: '#fafafa' + } + ] + } +}; diff --git a/story/package.json b/story/package.json index 37f9ca71c..c245e2bf8 100644 --- a/story/package.json +++ b/story/package.json @@ -21,6 +21,7 @@ "devDependencies": { "@babel/core": "^7.10.4", "@storybook/addon-actions": "^6.0.12", + "@storybook/addon-backgrounds": "^6.0.16", "@storybook/addon-docs": "^6.0.12", "@storybook/addon-knobs": "^6.0.12", "@storybook/addon-links": "^6.0.12", diff --git a/story/src/2-Table.stories.tsx b/story/src/2-Table.stories.tsx new file mode 100644 index 000000000..b04f638b9 --- /dev/null +++ b/story/src/2-Table.stories.tsx @@ -0,0 +1,46 @@ +import React from 'react'; +import { Table } from '../../frontend/src/component/ui/Table'; +import { array, number, select } from '@storybook/addon-knobs'; + +export default { + title: 'UI/Table', + component: Table +}; + +function alignSelector(label: string) { + return select( + label, + { + center: 'center', + end: 'end', + justify: 'justify', + left: 'left', + 'match-parent': 'match-parent', + right: 'right', + start: 'start' + }, + 'left' + ); +} + +export const table = () => { + const headers = array('Header Columns', ['Long Link', 'Alias']); + return ( + headers.map((_, j) => `data ${i}-${j}`))} + headerFontSize={`${number('Header Font Size (px)', 16)}px`} + widths={headers.map( + (_, i) => number(`Column ${i + 1} Width (%)`, 50) + '%' + )} + alignHeaders={headers.map((_, i) => + alignSelector(`Column ${i + 1} Header Alignment (%)`) + )} + alignBodyColumns={headers.map((_, i) => + alignSelector(`Column ${i + 1} Body Column Alignment (%)`) + )} + /> + ); +}; diff --git a/story/yarn.lock b/story/yarn.lock index a7253d02d..0e4eaaf99 100644 --- a/story/yarn.lock +++ b/story/yarn.lock @@ -1457,6 +1457,22 @@ util-deprecate "^1.0.2" uuid "^8.0.0" +"@storybook/addon-backgrounds@^6.0.16": + version "6.0.16" + resolved "https://registry.yarnpkg.com/@storybook/addon-backgrounds/-/addon-backgrounds-6.0.16.tgz#cbf909992a86dbbdfea172d3950300e8c2a7de01" + integrity sha512-0sH7hlZh4bHt6zV6QyG3ryNGJsxD42iXVwWdwAShzfWJKGfLy5XwdvHUKkMEBbY9bOPeoI9oMli2RAfsD6juLQ== + dependencies: + "@storybook/addons" "6.0.16" + "@storybook/api" "6.0.16" + "@storybook/client-logger" "6.0.16" + "@storybook/components" "6.0.16" + "@storybook/core-events" "6.0.16" + "@storybook/theming" "6.0.16" + core-js "^3.0.1" + memoizerific "^1.11.3" + react "^16.8.3" + regenerator-runtime "^0.13.3" + "@storybook/addon-docs@^6.0.12": version "6.0.12" resolved "https://registry.yarnpkg.com/@storybook/addon-docs/-/addon-docs-6.0.12.tgz#a646ade0afc55efe41e3c519bb186cbc589e3361" @@ -1559,6 +1575,21 @@ global "^4.3.2" regenerator-runtime "^0.13.3" +"@storybook/addons@6.0.16": + version "6.0.16" + resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.0.16.tgz#a20a219bd5b1474ad02b92e79a74652898a684d9" + integrity sha512-jGMaOJYTM2yZeX1tI6whEn+4xpI1aAybZBrc+OD21CcGoQrbF/jplZMq7xKI0Y6vOMguuTGulpUNCezD3LbBjA== + dependencies: + "@storybook/api" "6.0.16" + "@storybook/channels" "6.0.16" + "@storybook/client-logger" "6.0.16" + "@storybook/core-events" "6.0.16" + "@storybook/router" "6.0.16" + "@storybook/theming" "6.0.16" + core-js "^3.0.1" + global "^4.3.2" + regenerator-runtime "^0.13.3" + "@storybook/api@6.0.12": version "6.0.12" resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.0.12.tgz#d6ded5c9ac8f989c4915e11a80a4db69341fc95f" @@ -1585,6 +1616,32 @@ ts-dedent "^1.1.1" util-deprecate "^1.0.2" +"@storybook/api@6.0.16": + version "6.0.16" + resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.0.16.tgz#56cdfc6f7a21d62d1a4ab06b4741c1560160d320" + integrity sha512-RTC4BKmH5i8bJUQejOHEtjebVKtOaHkmEagI2HQRalsokBc1GLAf84EGrO2TaZiRrItAPL5zZQgEnKUblsGJGw== + dependencies: + "@reach/router" "^1.3.3" + "@storybook/channels" "6.0.16" + "@storybook/client-logger" "6.0.16" + "@storybook/core-events" "6.0.16" + "@storybook/csf" "0.0.1" + "@storybook/router" "6.0.16" + "@storybook/semver" "^7.3.2" + "@storybook/theming" "6.0.16" + "@types/reach__router" "^1.3.5" + core-js "^3.0.1" + fast-deep-equal "^3.1.1" + global "^4.3.2" + lodash "^4.17.15" + memoizerific "^1.11.3" + react "^16.8.3" + regenerator-runtime "^0.13.3" + store2 "^2.7.1" + telejson "^5.0.2" + ts-dedent "^1.1.1" + util-deprecate "^1.0.2" + "@storybook/channel-postmessage@6.0.12": version "6.0.12" resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-6.0.12.tgz#2db04c2e4bfa8f8220429c533e4bfca80bc81d6e" @@ -1607,6 +1664,15 @@ ts-dedent "^1.1.1" util-deprecate "^1.0.2" +"@storybook/channels@6.0.16": + version "6.0.16" + resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-6.0.16.tgz#94e521b9eae535da80afb23feae593aa69bfe75d" + integrity sha512-TsI4GA7lKD4L2w6IjODMRfnEOkmvEp4eJDgf3MKm7+sMbxwi1y1d6yrW1UQbnmwoNJWk60ArMN2yqDBV+5MNJQ== + dependencies: + core-js "^3.0.1" + ts-dedent "^1.1.1" + util-deprecate "^1.0.2" + "@storybook/client-api@6.0.12": version "6.0.12" resolved "https://registry.yarnpkg.com/@storybook/client-api/-/client-api-6.0.12.tgz#1cd2e0c4d7ebadfc1ea75a5ae0a958e542f6e8fb" @@ -1638,6 +1704,14 @@ core-js "^3.0.1" global "^4.3.2" +"@storybook/client-logger@6.0.16": + version "6.0.16" + resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-6.0.16.tgz#6265d2b869a82be64538eaac39470e3845c9e069" + integrity sha512-xM61Aewxqoo8500UxV7iPpfqwikITojiCX3+w8ZiCJ2NizSaXkis95TEFAeHqyozfNym5CqG+6v2NWvGYV3ncQ== + dependencies: + core-js "^3.0.1" + global "^4.3.2" + "@storybook/components@6.0.12": version "6.0.12" resolved "https://registry.yarnpkg.com/@storybook/components/-/components-6.0.12.tgz#ec2aa01d926e8cc76081e3eac128b6f326ba5de5" @@ -1666,6 +1740,34 @@ react-textarea-autosize "^8.1.1" ts-dedent "^1.1.1" +"@storybook/components@6.0.16": + version "6.0.16" + resolved "https://registry.yarnpkg.com/@storybook/components/-/components-6.0.16.tgz#d4c797f7897cefa11bbdb8dfd07bb3d4fa66b3e9" + integrity sha512-zpYGt3tWiN0yT7V0VhBl2T5Mr0COiNnTQUGCpA9Gl3pUBmAov2jCVf1sUxsIcBcMMZmDRcfo6NbJ/LqCFeUg+Q== + dependencies: + "@storybook/client-logger" "6.0.16" + "@storybook/csf" "0.0.1" + "@storybook/theming" "6.0.16" + "@types/overlayscrollbars" "^1.9.0" + "@types/react-color" "^3.0.1" + "@types/react-syntax-highlighter" "11.0.4" + core-js "^3.0.1" + fast-deep-equal "^3.1.1" + global "^4.3.2" + lodash "^4.17.15" + markdown-to-jsx "^6.11.4" + memoizerific "^1.11.3" + overlayscrollbars "^1.10.2" + polished "^3.4.4" + popper.js "^1.14.7" + react "^16.8.3" + react-color "^2.17.0" + react-dom "^16.8.3" + react-popper-tooltip "^2.11.0" + react-syntax-highlighter "^12.2.1" + react-textarea-autosize "^8.1.1" + ts-dedent "^1.1.1" + "@storybook/core-events@6.0.12": version "6.0.12" resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.0.12.tgz#499ae06092103b149fcd9417d8e0baa356adc2c0" @@ -1673,6 +1775,13 @@ dependencies: core-js "^3.0.1" +"@storybook/core-events@6.0.16": + version "6.0.16" + resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.0.16.tgz#3f8cd525c15fd80c9f327389851cce82a4b96850" + integrity sha512-ib+58N4OY8AOix2qcBH9ICRmVHUocpGaGRVlIo79WxJrpnB/HNQ8pEaniD+OAavDRq1B7uJqFlMkTXCC0GoFiQ== + dependencies: + core-js "^3.0.1" + "@storybook/core@6.0.12": version "6.0.12" resolved "https://registry.yarnpkg.com/@storybook/core/-/core-6.0.12.tgz#7e97eba832617f07b45f1847428f6995a7b89e75" @@ -1839,6 +1948,18 @@ memoizerific "^1.11.3" qs "^6.6.0" +"@storybook/router@6.0.16": + version "6.0.16" + resolved "https://registry.yarnpkg.com/@storybook/router/-/router-6.0.16.tgz#b18cc0b1bba477f16f9f2ae8f0eaa0d5ba4b0a0e" + integrity sha512-zijPJ3CR4ytHE0v+pGdaWT3H+es+mLHRkR6hkqcD0ABT5HVfwMlmXJ9FkQGCVpnnNeBOz7+QKCdE13HMelQpqg== + dependencies: + "@reach/router" "^1.3.3" + "@types/reach__router" "^1.3.5" + core-js "^3.0.1" + global "^4.3.2" + memoizerific "^1.11.3" + qs "^6.6.0" + "@storybook/semver@^7.3.2": version "7.3.2" resolved "https://registry.yarnpkg.com/@storybook/semver/-/semver-7.3.2.tgz#f3b9c44a1c9a0b933c04e66d0048fcf2fa10dac0" @@ -1881,6 +2002,24 @@ resolve-from "^5.0.0" ts-dedent "^1.1.1" +"@storybook/theming@6.0.16": + version "6.0.16" + resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.0.16.tgz#dd6de4f29316a6a2380018978b7b4a0ef9ea33c8" + integrity sha512-6D7oMEbeABYZdDY8e3i+O39XLrk6fvG3GBaSGp31BE30d269NcPkGPxMKY/nzc6MY30a+/LbBbM7b6gRKe6b4Q== + dependencies: + "@emotion/core" "^10.0.20" + "@emotion/is-prop-valid" "^0.8.6" + "@emotion/styled" "^10.0.17" + "@storybook/client-logger" "6.0.16" + core-js "^3.0.1" + deep-object-diff "^1.1.0" + emotion-theming "^10.0.19" + global "^4.3.2" + memoizerific "^1.11.3" + polished "^3.4.4" + resolve-from "^5.0.0" + ts-dedent "^1.1.1" + "@storybook/ui@6.0.12": version "6.0.12" resolved "https://registry.yarnpkg.com/@storybook/ui/-/ui-6.0.12.tgz#ea36474f54af62b4ab3f45cce7f7c7053d4d6014"