From b397cbb1ba99d533d2bc6729673720b06527ccb9 Mon Sep 17 00:00:00 2001 From: VTEX Date: Fri, 18 Jun 2021 16:19:32 -0300 Subject: [PATCH] Changing storybook theme to be like VTEX --- packages/store-ui/.storybook/manager.js | 4 +- packages/store-ui/.storybook/preview.js | 9 ++- packages/store-ui/.storybook/theme.js | 30 +++++++++- packages/store-ui/package.json | 7 ++- yarn.lock | 80 ++++++++++++------------- 5 files changed, 81 insertions(+), 49 deletions(-) diff --git a/packages/store-ui/.storybook/manager.js b/packages/store-ui/.storybook/manager.js index 93cf6b7d78..8621487675 100644 --- a/packages/store-ui/.storybook/manager.js +++ b/packages/store-ui/.storybook/manager.js @@ -1,6 +1,6 @@ import { addons } from '@storybook/addons' -import { themes } from '@storybook/theming' +import customTheme from './theme' addons.setConfig({ - theme: themes.light, + theme: customTheme, }) diff --git a/packages/store-ui/.storybook/preview.js b/packages/store-ui/.storybook/preview.js index 4a581008e0..94acd1510c 100644 --- a/packages/store-ui/.storybook/preview.js +++ b/packages/store-ui/.storybook/preview.js @@ -1,4 +1,4 @@ -import theme from './theme' +import customTheme from './theme' export const parameters = { actions: { argTypesRegex: '^on[A-Z].*' }, @@ -7,9 +7,12 @@ export const parameters = { color: /(background|color)$/i, date: /Date$/, }, - theme, + theme: customTheme, + }, + docs: { + theme: customTheme, }, options: { - theme, + theme: customTheme, }, } diff --git a/packages/store-ui/.storybook/theme.js b/packages/store-ui/.storybook/theme.js index efb5b59f25..5e13eaeb06 100644 --- a/packages/store-ui/.storybook/theme.js +++ b/packages/store-ui/.storybook/theme.js @@ -3,7 +3,35 @@ import { version } from '../package.json' export default create({ base: 'light', - brandImage: null, + + colorPrimary: '#f71963', + colorSecondary: '#f71963', + + // UI + appBg: 'white', + appContentBg: 'white', + appBorderColor: '#f71963', + appBorderRadius: 4, + + // Typography + fontBase: '"Open Sans", sans-serif', + fontCode: 'monospace', + + // Text colors + textInverseColor: 'rgba(0,0,0,0.9)', + + // Toolbar default and active colors + barTextColor: 'black', + barSelectedColor: '#f71963', + barBg: 'white', + barBorder: '#f71963', + + // Form colors + inputBg: 'white', + inputBorder: '#f71963', + inputTextColor: 'black', + inputBorderRadius: 4, + brandTitle: `Store UI v${version}`, brandUrl: 'https://github.com/vtex/faststore/tree/master/packages/store-ui', }) diff --git a/packages/store-ui/package.json b/packages/store-ui/package.json index c8e2371c21..eadb45583f 100644 --- a/packages/store-ui/package.json +++ b/packages/store-ui/package.json @@ -20,7 +20,7 @@ "develop": "tsdx watch", "build": "tsdx build", "test": "tsdx test --passWithNoTests", - "storybook": "start-storybook -p 6006", + "storybook": "start-storybook -p 6006 --no-manager-cache", "build-storybook": "build-storybook", "size": "size-limit", "analyze": "size-limit --why" @@ -49,8 +49,6 @@ "dependencies": { "@reach/popover": "^0.15.0", "@reach/router": "^1.3.4", - "@storybook/addon-docs": "^6.2.9", - "@storybook/addon-storysource": "^6.2.9", "@theme-ui/match-media": "^0.3.1", "@theme-ui/preset-base": "^0.3.0", "@types/react-modal": "^3.12.0", @@ -74,8 +72,11 @@ "@babel/core": "^7.13.16", "@size-limit/preset-small-lib": "^4.11.0", "@storybook/addon-actions": "^6.2.9", + "@storybook/addon-docs": "^6.2.9", "@storybook/addon-essentials": "^6.2.9", "@storybook/addon-links": "^6.2.9", + "@storybook/addon-storysource": "^6.2.9", + "@storybook/addons": "^6.2.9", "@storybook/react": "^6.2.9", "@testing-library/jest-dom": "^5.12.0", "@testing-library/react": "^11.2.6", diff --git a/yarn.lock b/yarn.lock index aff857bab3..b716047458 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3947,7 +3947,7 @@ prop-types "^15.7.2" regenerator-runtime "^0.13.7" -"@storybook/addons@6.2.9": +"@storybook/addons@6.2.9", "@storybook/addons@^6.2.9": version "6.2.9" resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.2.9.tgz#b7ba2b9f0e15b852c7d6b57d04fb0a493c57477c" integrity sha512-GnmEKbJwiN1jncN9NSA8CuR1i2XAlasPcl/Zn0jkfV9WitQeczVcJCPw86SGH84AD+tTBCyF2i9UC0KaOV1YBQ== @@ -5454,12 +5454,12 @@ integrity sha512-S9q47ByT2pPvD65IvrWp7qppVMpk9WGMbVq9wbWZOHg6tnXSD4vyhao6nOSBwwfDdV2p3Kx9evA9vI+XWTfDvw== "@typescript-eslint/eslint-plugin@^2.10.0", "@typescript-eslint/eslint-plugin@^2.12.0", "@typescript-eslint/eslint-plugin@^4", "@typescript-eslint/eslint-plugin@^4.15.2", "@typescript-eslint/eslint-plugin@^4.18.0": - version "4.26.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.26.0.tgz#12bbd6ebd5e7fabd32e48e1e60efa1f3554a3242" - integrity sha512-yA7IWp+5Qqf+TLbd8b35ySFOFzUfL7i+4If50EqvjT6w35X8Lv0eBHb6rATeWmucks37w+zV+tWnOXI9JlG6Eg== + version "4.27.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.27.0.tgz#0b7fc974e8bc9b2b5eb98ed51427b0be529b4ad0" + integrity sha512-DsLqxeUfLVNp3AO7PC3JyaddmEHTtI9qTSAs+RB6ja27QvIM0TA8Cizn1qcS6vOu+WDLFJzkwkgweiyFhssDdQ== dependencies: - "@typescript-eslint/experimental-utils" "4.26.0" - "@typescript-eslint/scope-manager" "4.26.0" + "@typescript-eslint/experimental-utils" "4.27.0" + "@typescript-eslint/scope-manager" "4.27.0" debug "^4.3.1" functional-red-black-tree "^1.0.1" lodash "^4.17.21" @@ -5467,15 +5467,15 @@ semver "^7.3.5" tsutils "^3.21.0" -"@typescript-eslint/experimental-utils@4.26.0": - version "4.26.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.26.0.tgz#ba7848b3f088659cdf71bce22454795fc55be99a" - integrity sha512-TH2FO2rdDm7AWfAVRB5RSlbUhWxGVuxPNzGT7W65zVfl8H/WeXTk1e69IrcEVsBslrQSTDKQSaJD89hwKrhdkw== +"@typescript-eslint/experimental-utils@4.27.0": + version "4.27.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.27.0.tgz#78192a616472d199f084eab8f10f962c0757cd1c" + integrity sha512-n5NlbnmzT2MXlyT+Y0Jf0gsmAQzCnQSWXKy4RGSXVStjDvS5we9IWbh7qRVKdGcxT0WYlgcCYUK/HRg7xFhvjQ== dependencies: "@types/json-schema" "^7.0.7" - "@typescript-eslint/scope-manager" "4.26.0" - "@typescript-eslint/types" "4.26.0" - "@typescript-eslint/typescript-estree" "4.26.0" + "@typescript-eslint/scope-manager" "4.27.0" + "@typescript-eslint/types" "4.27.0" + "@typescript-eslint/typescript-estree" "4.27.0" eslint-scope "^5.1.1" eslint-utils "^3.0.0" @@ -5504,13 +5504,13 @@ eslint-utils "^2.0.0" "@typescript-eslint/parser@^2.10.0", "@typescript-eslint/parser@^2.12.0", "@typescript-eslint/parser@^4", "@typescript-eslint/parser@^4.15.2", "@typescript-eslint/parser@^4.18.0": - version "4.26.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.26.0.tgz#31b6b732c9454f757b020dab9b6754112aa5eeaf" - integrity sha512-b4jekVJG9FfmjUfmM4VoOItQhPlnt6MPOBUL0AQbiTmm+SSpSdhHYlwayOm4IW9KLI/4/cRKtQCmDl1oE2OlPg== + version "4.27.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.27.0.tgz#85447e573364bce4c46c7f64abaa4985aadf5a94" + integrity sha512-XpbxL+M+gClmJcJ5kHnUpBGmlGdgNvy6cehgR6ufyxkEJMGP25tZKCaKyC0W/JVpuhU3VU1RBn7SYUPKSMqQvQ== dependencies: - "@typescript-eslint/scope-manager" "4.26.0" - "@typescript-eslint/types" "4.26.0" - "@typescript-eslint/typescript-estree" "4.26.0" + "@typescript-eslint/scope-manager" "4.27.0" + "@typescript-eslint/types" "4.27.0" + "@typescript-eslint/typescript-estree" "4.27.0" debug "^4.3.1" "@typescript-eslint/scope-manager@4.19.0": @@ -5529,13 +5529,13 @@ "@typescript-eslint/types" "4.22.0" "@typescript-eslint/visitor-keys" "4.22.0" -"@typescript-eslint/scope-manager@4.26.0": - version "4.26.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.26.0.tgz#60d1a71df162404e954b9d1c6343ff3bee496194" - integrity sha512-G6xB6mMo4xVxwMt5lEsNTz3x4qGDt0NSGmTBNBPJxNsrTXJSm21c6raeYroS2OwQsOyIXqKZv266L/Gln1BWqg== +"@typescript-eslint/scope-manager@4.27.0": + version "4.27.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.27.0.tgz#b0b1de2b35aaf7f532e89c8e81d0fa298cae327d" + integrity sha512-DY73jK6SEH6UDdzc6maF19AHQJBFVRf6fgAXHPXCGEmpqD4vYgPEzqpFz1lf/daSbOcMpPPj9tyXXDPW2XReAw== dependencies: - "@typescript-eslint/types" "4.26.0" - "@typescript-eslint/visitor-keys" "4.26.0" + "@typescript-eslint/types" "4.27.0" + "@typescript-eslint/visitor-keys" "4.27.0" "@typescript-eslint/types@4.19.0": version "4.19.0" @@ -5547,10 +5547,10 @@ resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.22.0.tgz#0ca6fde5b68daf6dba133f30959cc0688c8dd0b6" integrity sha512-sW/BiXmmyMqDPO2kpOhSy2Py5w6KvRRsKZnV0c4+0nr4GIcedJwXAq+RHNK4lLVEZAJYFltnnk1tJSlbeS9lYA== -"@typescript-eslint/types@4.26.0": - version "4.26.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.26.0.tgz#7c6732c0414f0a69595f4f846ebe12616243d546" - integrity sha512-rADNgXl1kS/EKnDr3G+m7fB9yeJNnR9kF7xMiXL6mSIWpr3Wg5MhxyfEXy/IlYthsqwBqHOr22boFbf/u6O88A== +"@typescript-eslint/types@4.27.0": + version "4.27.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.27.0.tgz#712b408519ed699baff69086bc59cd2fc13df8d8" + integrity sha512-I4ps3SCPFCKclRcvnsVA/7sWzh7naaM/b4pBO2hVxnM3wrU51Lveybdw5WoIktU/V4KfXrTt94V9b065b/0+wA== "@typescript-eslint/typescript-estree@4.19.0": version "4.19.0" @@ -5578,13 +5578,13 @@ semver "^7.3.2" tsutils "^3.17.1" -"@typescript-eslint/typescript-estree@4.26.0": - version "4.26.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.26.0.tgz#aea17a40e62dc31c63d5b1bbe9a75783f2ce7109" - integrity sha512-GHUgahPcm9GfBuy3TzdsizCcPjKOAauG9xkz9TR8kOdssz2Iz9jRCSQm6+aVFa23d5NcSpo1GdHGSQKe0tlcbg== +"@typescript-eslint/typescript-estree@4.27.0": + version "4.27.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.27.0.tgz#189a7b9f1d0717d5cccdcc17247692dedf7a09da" + integrity sha512-KH03GUsUj41sRLLEy2JHstnezgpS5VNhrJouRdmh6yNdQ+yl8w5LrSwBkExM+jWwCJa7Ct2c8yl8NdtNRyQO6g== dependencies: - "@typescript-eslint/types" "4.26.0" - "@typescript-eslint/visitor-keys" "4.26.0" + "@typescript-eslint/types" "4.27.0" + "@typescript-eslint/visitor-keys" "4.27.0" debug "^4.3.1" globby "^11.0.3" is-glob "^4.0.1" @@ -5607,12 +5607,12 @@ "@typescript-eslint/types" "4.22.0" eslint-visitor-keys "^2.0.0" -"@typescript-eslint/visitor-keys@4.26.0": - version "4.26.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.26.0.tgz#26d2583169222815be4dcd1da4fe5459bc3bcc23" - integrity sha512-cw4j8lH38V1ycGBbF+aFiLUls9Z0Bw8QschP3mkth50BbWzgFS33ISIgBzUMuQ2IdahoEv/rXstr8Zhlz4B1Zg== +"@typescript-eslint/visitor-keys@4.27.0": + version "4.27.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.27.0.tgz#f56138b993ec822793e7ebcfac6ffdce0a60cb81" + integrity sha512-es0GRYNZp0ieckZ938cEANfEhsfHrzuLrePukLKtY3/KPXcq1Xd555Mno9/GOgXhKzn0QfkDLVgqWO3dGY80bg== dependencies: - "@typescript-eslint/types" "4.26.0" + "@typescript-eslint/types" "4.27.0" eslint-visitor-keys "^2.0.0" "@vtex-components/accordion@^0.2.3":