From 9fd14c30d5d3059547b069591b2b1bacda160456 Mon Sep 17 00:00:00 2001 From: Piyush Mehta Date: Thu, 15 Aug 2019 01:46:13 +0530 Subject: [PATCH 1/5] prettier --- src/.storybook/config.js | 88 +--------------------- src/components/TextField/TextField.test.js | 22 +++--- src/components/ZapBar/ZapBar.test.js | 44 +++++------ src/stories/typography.stories.js | 10 ++- 4 files changed, 42 insertions(+), 122 deletions(-) diff --git a/src/.storybook/config.js b/src/.storybook/config.js index cd6ff88..b1f64e0 100644 --- a/src/.storybook/config.js +++ b/src/.storybook/config.js @@ -1,22 +1,9 @@ import { addParameters, configure, setAddon } from "@storybook/react"; -import { create } from "@storybook/theming"; import JSXAddon from "storybook-addon-jsx"; setAddon(JSXAddon); const req = require.context("../stories", true, /\.stories\.js$/); -// coral / ocean highlights -const theme = create({ - base: "#999", - colorPrimary: "#f1f1f1", - colorSecondary: "#111", - textColor: "#00e9ff", - barBg: "#666", - barTextColor: "#f1f1f1", - appContentBg: "#fff", - appBg: "#555", -}); - function loadStories() { req.keys().forEach(filename => req(filename)); } @@ -24,81 +11,8 @@ function loadStories() { // Option defaults: addParameters({ options: { - theme: theme, - /** - * name to display in the top left corner - * @type {String} - */ name: "Zapify-ui", - title: "Zapify-ui", - /** - * URL for name in top left corner to link to - * @type {String} - */ - url: "zapify.netlify.com", - /** - * show story component as full screen - * @type {Boolean} - */ - goFullScreen: false, - /** - * display panel that shows a list of stories - * @type {Boolean} - */ - showStoriesPanel: true, - /** - * display panel that shows addon configurations - * @type {Boolean} - */ - showAddonPanel: true, - /** - * display floating search box to search through stories - * @type {Boolean} - */ - showSearchBox: false, - /** - * show addon panel as a vertical panel on the right - * @type {Boolean} - */ - addonPanelInRight: false, - /** - * regex for finding the hierarchy separator - * @example: - * null - turn off hierarchy - * /\// - split by `/` - * /\./ - split by `.` - * /\/|\./ - split by `/` or `.` - * @type {Regex} - */ - hierarchySeparator: null, - /** - * regex for finding the hierarchy root separator - * @example: - * null - turn off multiple hierarchy roots - * /\|/ - split by `|` - * @type {Regex} - */ - hierarchyRootSeparator: null, - /** - * sidebar tree animations - * @type {Boolean} - */ - sidebarAnimations: true, - /** - * id to select an addon panel - * @type {String} - */ - selectedPanel: undefined, // The order of addons in the "Addon panel" is the same as you import them in 'addons.js'. The first panel will be opened by default as you run Storybook - /** - * enable/disable shortcuts - * @type {Boolean} - */ - enableShortcuts: false, // true by default - /** - * show/hide tool bar - * @type {Boolean} - */ - isToolshown: false // true by default + title: "Zapify-ui" } }); diff --git a/src/components/TextField/TextField.test.js b/src/components/TextField/TextField.test.js index 1a3da7d..96765d1 100644 --- a/src/components/TextField/TextField.test.js +++ b/src/components/TextField/TextField.test.js @@ -3,16 +3,16 @@ import renderer from "react-test-renderer"; import TextField from "./index"; test("Container tests", () => { - const component = renderer.create( - - Input Hook with custom placeholder - - ); + const component = renderer.create( + + Input Hook with custom placeholder + + ); - const tree = component.toJSON(); - expect(tree).toMatchSnapshot(); + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); }); diff --git a/src/components/ZapBar/ZapBar.test.js b/src/components/ZapBar/ZapBar.test.js index 2a75435..9b3fa53 100644 --- a/src/components/ZapBar/ZapBar.test.js +++ b/src/components/ZapBar/ZapBar.test.js @@ -3,26 +3,26 @@ import renderer from "react-test-renderer"; import ZapBar from "./index"; test("Container tests", () => { - const component = renderer.create( - - ); - const tree = component.toJSON(); - expect(tree).toMatchSnapshot(); + const component = renderer.create( + + ); + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); }); diff --git a/src/stories/typography.stories.js b/src/stories/typography.stories.js index 158b1c4..00d87dd 100644 --- a/src/stories/typography.stories.js +++ b/src/stories/typography.stories.js @@ -7,10 +7,16 @@ import Typography from "../components/Typography"; storiesOf("Typography", module) .addDecorator(withInfo) - .addWithJSX("with default Props", () => With Default Props) + .addWithJSX("with default Props", () => ( + With Default Props + )) .addWithJSX("with h1", () => with h1) .addWithJSX("with h2", () => with h2) .addWithJSX("with h3", () => with h3) .addWithJSX("with h4", () => with h4) .addWithJSX("with h5", () => with h5) - .addWithJSX("with custom color", () => with h2 and custom color prop); + .addWithJSX("with custom color", () => ( + + with h2 and custom color prop + + )); From c2a61a48bc79c9734ea168e39fd47a9f72696dfd Mon Sep 17 00:00:00 2001 From: Piyush Mehta Date: Thu, 15 Aug 2019 01:59:23 +0530 Subject: [PATCH 2/5] storybook conofig --- src/.storybook/config.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/.storybook/config.js b/src/.storybook/config.js index b1f64e0..f333c6a 100644 --- a/src/.storybook/config.js +++ b/src/.storybook/config.js @@ -1,5 +1,7 @@ import { addParameters, configure, setAddon } from "@storybook/react"; import JSXAddon from "storybook-addon-jsx"; +import { themes } from "@storybook/theming"; +import zapify from "./zapify"; setAddon(JSXAddon); const req = require.context("../stories", true, /\.stories\.js$/); @@ -12,7 +14,8 @@ function loadStories() { addParameters({ options: { name: "Zapify-ui", - title: "Zapify-ui" + title: "Zapify-ui", + theme: zapify } }); From 1de92dca164a938d49062639b1274d5596810c7e Mon Sep 17 00:00:00 2001 From: Piyush Mehta Date: Thu, 15 Aug 2019 01:59:37 +0530 Subject: [PATCH 3/5] custom theme --- src/.storybook/zapify.js | 37 +++++++++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) create mode 100644 src/.storybook/zapify.js diff --git a/src/.storybook/zapify.js b/src/.storybook/zapify.js new file mode 100644 index 0000000..2b93a1f --- /dev/null +++ b/src/.storybook/zapify.js @@ -0,0 +1,37 @@ +import { create } from "@storybook/theming"; + +export default create({ + base: "light", + colorPrimary: "#FF6F61", + colorSecondary: "deepskyblue", + + // UI + appBg: "white", + appContentBg: "white", + appBorderColor: "grey", + appBorderRadius: 50, + + // Typography + fontBase: '"Open Sans", sans-serif', + fontCode: "monospace", + + // Text colors + textColor: "black", + textInverseColor: "rgba(255,255,255,0.9)", + + // Toolbar default and active colors + barTextColor: "silver", + barSelectedColor: "black", + barBg: "#FF6F61", + + // Form colors + inputBg: "white", + inputBorder: "silver", + inputTextColor: "black", + inputBorderRadius: 50, + + brandTitle: "Zapify-ui", + brandUrl: "https://zapify.netlify.com", + brandImage: + "https://camo.githubusercontent.com/56702c11ebd0c8817ee8d95b1e45022b97083b8a/68747470733a2f2f692e6962622e636f2f5832334e4877362f612e706e67" +}); From bedfc33d7f5aad0132a3fbdb9c82411cbde5485f Mon Sep 17 00:00:00 2001 From: Piyush Mehta Date: Thu, 15 Aug 2019 02:07:47 +0530 Subject: [PATCH 4/5] travis --- .travis.yml | 2 -- 1 file changed, 2 deletions(-) diff --git a/.travis.yml b/.travis.yml index 6f0573d..e9c05ed 100644 --- a/.travis.yml +++ b/.travis.yml @@ -3,14 +3,12 @@ node_js: - stable install: - npm install - - npm install -g codecov cache: directories: - node_modules script: - npm run test - npm run build -- codecov - ./node_modules/.bin/codecov --token="fb6b058a-5c4f-40c9-a5ff-d351fda90dd0" after_success: - bash <(curl -s https://codecov.io/bash) -e TRAVIS_NODE_VERSION From 41019e4acdbd43c19c11c94228ce47ed8e96153b Mon Sep 17 00:00:00 2001 From: Piyush Mehta Date: Thu, 15 Aug 2019 02:07:56 +0530 Subject: [PATCH 5/5] themed --- src/.storybook/zapify.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/.storybook/zapify.js b/src/.storybook/zapify.js index 2b93a1f..7778181 100644 --- a/src/.storybook/zapify.js +++ b/src/.storybook/zapify.js @@ -9,7 +9,7 @@ export default create({ appBg: "white", appContentBg: "white", appBorderColor: "grey", - appBorderRadius: 50, + appBorderRadius: 3, // Typography fontBase: '"Open Sans", sans-serif', @@ -28,10 +28,9 @@ export default create({ inputBg: "white", inputBorder: "silver", inputTextColor: "black", - inputBorderRadius: 50, + inputBorderRadius: 3, brandTitle: "Zapify-ui", brandUrl: "https://zapify.netlify.com", - brandImage: - "https://camo.githubusercontent.com/56702c11ebd0c8817ee8d95b1e45022b97083b8a/68747470733a2f2f692e6962622e636f2f5832334e4877362f612e706e67" + brandImage: "https://i.ibb.co/hdsdzq7/ms-icon-144x144.png" });