From 2155dabc361ccd301a118519149d04879372f8e0 Mon Sep 17 00:00:00 2001 From: Jensen Bouzi Date: Mon, 9 Mar 2020 17:12:58 -0400 Subject: [PATCH 1/9] WIP config and card stories --- .storybook/webpack.config.js | 1 - src/components/dev-hub/card.stories.mdx | 15 +++++++++++++++ 2 files changed, 15 insertions(+), 1 deletion(-) create mode 100644 src/components/dev-hub/card.stories.mdx diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js index 10369cf66..fb02b2c3a 100644 --- a/.storybook/webpack.config.js +++ b/.storybook/webpack.config.js @@ -27,7 +27,6 @@ module.exports = ({ config }) => { use: [ { loader: 'babel-loader', - // may or may not need this line depending on your app's setup options: { plugins: ['@babel/plugin-transform-react-jsx'], }, diff --git a/src/components/dev-hub/card.stories.mdx b/src/components/dev-hub/card.stories.mdx new file mode 100644 index 000000000..f5fc901ca --- /dev/null +++ b/src/components/dev-hub/card.stories.mdx @@ -0,0 +1,15 @@ +import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; +// import Card from './card'; + + + +# Cards + +### Simple Buttons + +You can create a simple card with some text + + +

placeholder

+ + From 112e82207cd861ff4d6d76ca37a80a95237cfa17 Mon Sep 17 00:00:00 2001 From: Jensen Bouzi Date: Tue, 10 Mar 2020 10:50:59 -0400 Subject: [PATCH 2/9] WIP setting up theme --- .storybook/theme.js | 38 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) create mode 100644 .storybook/theme.js diff --git a/.storybook/theme.js b/.storybook/theme.js new file mode 100644 index 000000000..5431ee898 --- /dev/null +++ b/.storybook/theme.js @@ -0,0 +1,38 @@ +import { create } from '@storybook/theming/create'; +import { colorMap, FORM_ELEMENT_BORDER } from '../src/components/dev-hub/theme'; + +export default create({ + base: colorMap.pageBackground, + + colorPrimary: 'hotpink', + colorSecondary: 'deepskyblue', + + // UI + appBg: 'white', + appContentBg: 'silver', + appBorderColor: 'grey', + appBorderRadius: 4, + + // Typography + fontBase: `akzidenz, -apple-system, BlinkMacSystemFont, "Segoe UI", + Helvetica, Arial, sans-serif, 'Apple Color Emoji', "Segoe UI Emoji", + "Segoe UI Symbol"`, + + // Text colors + textColor: '#fff', + textInverseColor: colorMap.devWhite, + + // Toolbar default and active colors + barTextColor: '#fff', + barSelectedColor: colorMap.devBlack, + barBg: colorMap.greyDarkThree, + + // Form colors + inputBg: colorMap.greyDarkTwo, + inputBorder: `${FORM_ELEMENT_BORDER} solid transparent`, + inputTextColor: '#fff', + inputBorderRadius: 4, + + brandTitle: 'MongDB Dev-Hub', +// brandImage: 'https://placehold.it/350x150', +}); \ No newline at end of file From d271c0dec28ae921435bd12916681eff58d3c877 Mon Sep 17 00:00:00 2001 From: Jensen Bouzi Date: Tue, 17 Mar 2020 15:52:52 -0400 Subject: [PATCH 3/9] Correctly implement custom theme for storybook --- .storybook/config.js | 12 ++++++----- .storybook/theme.js | 50 ++++++++++++++++++++++---------------------- 2 files changed, 32 insertions(+), 30 deletions(-) diff --git a/.storybook/config.js b/.storybook/config.js index 87e774e37..8969f3228 100644 --- a/.storybook/config.js +++ b/.storybook/config.js @@ -1,16 +1,13 @@ import { configure, addParameters } from '@storybook/react'; import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks'; import { action } from '@storybook/addon-actions'; +import theme from './theme'; const WELCOME_PAGE_KIND = 'Welcome'; addParameters({ - docs: { - container: DocsContainer, - page: DocsPage, - prepareForInline: storyFn => storyFn(), - }, options: { + theme, storySort: (a, b) => { if (a[1].kind === WELCOME_PAGE_KIND) { return 0; @@ -23,6 +20,11 @@ addParameters({ : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }); }, }, + docs: { + container: DocsContainer, + page: DocsPage, + prepareForInline: storyFn => storyFn(), + }, }); // Gatsby's Link overrides: diff --git a/.storybook/theme.js b/.storybook/theme.js index 5431ee898..53ed714a0 100644 --- a/.storybook/theme.js +++ b/.storybook/theme.js @@ -2,37 +2,37 @@ import { create } from '@storybook/theming/create'; import { colorMap, FORM_ELEMENT_BORDER } from '../src/components/dev-hub/theme'; export default create({ - base: colorMap.pageBackground, + base: colorMap.pageBackground, - colorPrimary: 'hotpink', - colorSecondary: 'deepskyblue', + colorPrimary: 'hotpink', + colorSecondary: 'deepskyblue', - // UI - appBg: 'white', - appContentBg: 'silver', - appBorderColor: 'grey', - appBorderRadius: 4, + // UI + appBg: colorMap.pageBackground, + appContentBg: colorMap.devBlack, + appBorderColor: colorMap.greyLightOne, + appBorderRadius: 4, - // Typography - fontBase: `akzidenz, -apple-system, BlinkMacSystemFont, "Segoe UI", + // Typography + fontBase: `akzidenz, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, 'Apple Color Emoji', "Segoe UI Emoji", "Segoe UI Symbol"`, - // Text colors - textColor: '#fff', - textInverseColor: colorMap.devWhite, + // Text colors + textColor: '#fff', + textInverseColor: colorMap.devWhite, - // Toolbar default and active colors - barTextColor: '#fff', - barSelectedColor: colorMap.devBlack, - barBg: colorMap.greyDarkThree, + // Toolbar default and active colors + barTextColor: '#fff', + barSelectedColor: colorMap.devBlack, + barBg: colorMap.greyDarkThree, - // Form colors - inputBg: colorMap.greyDarkTwo, - inputBorder: `${FORM_ELEMENT_BORDER} solid transparent`, - inputTextColor: '#fff', - inputBorderRadius: 4, + // Form colors + inputBg: colorMap.greyDarkTwo, + inputBorder: `${FORM_ELEMENT_BORDER} solid transparent`, + inputTextColor: '#fff', + inputBorderRadius: 4, - brandTitle: 'MongDB Dev-Hub', -// brandImage: 'https://placehold.it/350x150', -}); \ No newline at end of file + brandTitle: 'MongDB Dev-Hub', + // brandImage: 'https://placehold.it/350x150', +}); From 192a9d840c6e0a7b2686b7c12eeea3e91211fec1 Mon Sep 17 00:00:00 2001 From: Jensen Bouzi Date: Tue, 17 Mar 2020 17:17:59 -0400 Subject: [PATCH 4/9] Tweak text styles for storybook --- .storybook/preview-head.html | 7 +++++++ .storybook/theme.js | 6 ++---- src/components/dev-hub/card.stories.mdx | 3 +-- src/components/dev-hub/stories/theme.stories.mdx | 6 ++++-- 4 files changed, 14 insertions(+), 8 deletions(-) create mode 100644 .storybook/preview-head.html diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html new file mode 100644 index 000000000..150568fcc --- /dev/null +++ b/.storybook/preview-head.html @@ -0,0 +1,7 @@ + \ No newline at end of file diff --git a/.storybook/theme.js b/.storybook/theme.js index 53ed714a0..bae6e6dcf 100644 --- a/.storybook/theme.js +++ b/.storybook/theme.js @@ -3,9 +3,7 @@ import { colorMap, FORM_ELEMENT_BORDER } from '../src/components/dev-hub/theme'; export default create({ base: colorMap.pageBackground, - - colorPrimary: 'hotpink', - colorSecondary: 'deepskyblue', + colorSecondary: colorMap.teal, // UI appBg: colorMap.pageBackground, @@ -24,7 +22,7 @@ export default create({ // Toolbar default and active colors barTextColor: '#fff', - barSelectedColor: colorMap.devBlack, + barSelectedColor: colorMap.teal, barBg: colorMap.greyDarkThree, // Form colors diff --git a/src/components/dev-hub/card.stories.mdx b/src/components/dev-hub/card.stories.mdx index f5fc901ca..bbad92cd9 100644 --- a/src/components/dev-hub/card.stories.mdx +++ b/src/components/dev-hub/card.stories.mdx @@ -5,9 +5,8 @@ import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; # Cards -### Simple Buttons - You can create a simple card with some text +

placeholder

diff --git a/src/components/dev-hub/stories/theme.stories.mdx b/src/components/dev-hub/stories/theme.stories.mdx index b39413f46..9776dfeb7 100644 --- a/src/components/dev-hub/stories/theme.stories.mdx +++ b/src/components/dev-hub/stories/theme.stories.mdx @@ -12,6 +12,7 @@ import { colorMap, gradientMap, size, fontSize } from '../theme'; {() => { const Color = styled('div')` + color: #fff; display: inline-block; fontfamily: 'Fira Mono', monospace; fontsize: ${fontSize.xsmall}; @@ -42,8 +43,9 @@ import { colorMap, gradientMap, size, fontSize } from '../theme'; {() => { const Wrapper = styled('div')` - fontfamily: 'Fira Mono', monospace; - fontsize: ${fontSize.xsmall}; + color: #fff; + font-family: 'Fira Mono', monospace; + font-size: ${fontSize.xsmall}; margin: ${size.medium}; `; const GradientLine = styled('div')` From e928360d6c8deaf4f89db619dad6b702a47bc097 Mon Sep 17 00:00:00 2001 From: Jensen Bouzi Date: Wed, 18 Mar 2020 17:27:29 -0400 Subject: [PATCH 5/9] Update storybook command and tweak global theme styles --- .storybook/preview-head.html | 9 +++++++-- package.json | 4 ++-- src/components/dev-hub/card.stories.mdx | 14 -------------- 3 files changed, 9 insertions(+), 18 deletions(-) delete mode 100644 src/components/dev-hub/card.stories.mdx diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index 150568fcc..c121235e3 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -1,7 +1,12 @@ \ No newline at end of file diff --git a/package.json b/package.json index 985ac8a80..69e9f4f55 100644 --- a/package.json +++ b/package.json @@ -10,10 +10,10 @@ "format:fix": "npm run prettier -- --write", "lint": "eslint --ignore-path .gitignore --ignore-pattern 'preview/*' --ext .js,.jsx .", "lint:fix": "npm run lint -- --fix", - "prettier": "prettier \"**/*.{js,jsx,json,md}\"", + "prettier": "prettier \"**/*.{js,jsx,json,md,mdx}\"", "preview": "webpack-dev-server --open --config ./webpack.config.js --env.PREVIEW_MODE='cli'", "serve": "gatsby serve --prefix-paths", - "storybook": "start-storybook", + "storybook": "start-storybook -p 9002 -c .storybook", "test": "jest", "test:regression": "jest regression", "test:unit": "jest unit" diff --git a/src/components/dev-hub/card.stories.mdx b/src/components/dev-hub/card.stories.mdx deleted file mode 100644 index bbad92cd9..000000000 --- a/src/components/dev-hub/card.stories.mdx +++ /dev/null @@ -1,14 +0,0 @@ -import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; -// import Card from './card'; - - - -# Cards - -You can create a simple card with some text - - - -

placeholder

- - From 850f36fea700324ad5fb11e02d33ee5ff25cfeaa Mon Sep 17 00:00:00 2001 From: Jensen Bouzi Date: Thu, 19 Mar 2020 11:04:55 -0400 Subject: [PATCH 6/9] Remove global body styles in preview-head.html --- .storybook/preview-head.html | 4 ---- 1 file changed, 4 deletions(-) diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index c121235e3..469c3cf31 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -1,8 +1,4 @@