From f63432fd44f5e9b1a253cdb0ceb222a8628ff9a9 Mon Sep 17 00:00:00 2001 From: Coteh <3276350+Coteh@users.noreply.github.com> Date: Thu, 20 Aug 2020 20:34:52 -0400 Subject: [PATCH 1/3] Add Table story - Also add backgrounds to stories --- .../ui/{Table.scss => Table.module.scss} | 0 frontend/src/component/ui/Table.tsx | 7 +- story/.storybook/main.js | 3 +- story/.storybook/preview.js | 15 ++ story/package.json | 1 + story/src/2-Table.stories.tsx | 21 +++ story/yarn.lock | 139 ++++++++++++++++++ 7 files changed, 182 insertions(+), 4 deletions(-) rename frontend/src/component/ui/{Table.scss => Table.module.scss} (100%) create mode 100644 story/.storybook/preview.js create mode 100644 story/src/2-Table.stories.tsx 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..50748c249 100644 --- a/frontend/src/component/ui/Table.tsx +++ b/frontend/src/component/ui/Table.tsx @@ -1,7 +1,8 @@ import React, { Component, ReactChild } from 'react'; -import './Table.scss'; +import styles from './Table.module.scss'; import { TextAlignProperty } from 'csstype'; +import { Styling, withCSSModule } from './styling'; interface IProps { headers?: ReactChild[]; @@ -67,8 +68,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..50bd0613e --- /dev/null +++ b/story/src/2-Table.stories.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import { Table } from '../../frontend/src/component/ui/Table'; +import { action } from '@storybook/addon-actions'; +import { text } from '@storybook/addon-knobs'; + +export default { + title: 'UI/Table', + component: Table +}; + +export const table = () => { + return ( + + ); +}; 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" From dced40997e620163de3029abe9a66b9e584fe42e Mon Sep 17 00:00:00 2001 From: Coteh <3276350+Coteh@users.noreply.github.com> Date: Fri, 21 Aug 2020 20:31:59 -0400 Subject: [PATCH 2/3] Add knobs for headers and number of rows --- frontend/src/component/ui/Table.tsx | 1 - story/src/2-Table.stories.tsx | 13 ++++++------- 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/frontend/src/component/ui/Table.tsx b/frontend/src/component/ui/Table.tsx index 50748c249..07539228b 100644 --- a/frontend/src/component/ui/Table.tsx +++ b/frontend/src/component/ui/Table.tsx @@ -2,7 +2,6 @@ import React, { Component, ReactChild } from 'react'; import styles from './Table.module.scss'; import { TextAlignProperty } from 'csstype'; -import { Styling, withCSSModule } from './styling'; interface IProps { headers?: ReactChild[]; diff --git a/story/src/2-Table.stories.tsx b/story/src/2-Table.stories.tsx index 50bd0613e..e6cda91cf 100644 --- a/story/src/2-Table.stories.tsx +++ b/story/src/2-Table.stories.tsx @@ -1,7 +1,6 @@ import React from 'react'; import { Table } from '../../frontend/src/component/ui/Table'; -import { action } from '@storybook/addon-actions'; -import { text } from '@storybook/addon-knobs'; +import { array, number } from '@storybook/addon-knobs'; export default { title: 'UI/Table', @@ -9,13 +8,13 @@ export default { }; export const table = () => { + const headers = array('Header Columns', ['Long Link', 'Alias']); return (
headers.map((_, j) => `data ${i}-${j}`))} /> ); }; From 56ad0fc644de850c2ad18ec260db18e05f2a4e12 Mon Sep 17 00:00:00 2001 From: Coteh <3276350+Coteh@users.noreply.github.com> Date: Sat, 22 Aug 2020 02:05:07 -0400 Subject: [PATCH 3/3] Add knobs for remaining props in Table --- story/src/2-Table.stories.tsx | 28 +++++++++++++++++++++++++++- 1 file changed, 27 insertions(+), 1 deletion(-) diff --git a/story/src/2-Table.stories.tsx b/story/src/2-Table.stories.tsx index e6cda91cf..b04f638b9 100644 --- a/story/src/2-Table.stories.tsx +++ b/story/src/2-Table.stories.tsx @@ -1,12 +1,28 @@ import React from 'react'; import { Table } from '../../frontend/src/component/ui/Table'; -import { array, number } from '@storybook/addon-knobs'; +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 ( @@ -15,6 +31,16 @@ export const table = () => { rows={new Array(number('Number of rows', 2)) .fill(0) .map((_, i) => 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 (%)`) + )} /> ); };