Storybook

.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

src/.storybook/config.js

@@ -1,104 +1,21 @@
 import { addParameters, configure, setAddon } from "@storybook/react";
-import { create } from "@storybook/theming";
 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$/);
 
-// 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));
 }
 
 // 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
+    theme: zapify
   }
 });
 

src/.storybook/zapify.js

@@ -0,0 +1,36 @@
+import { create } from "@storybook/theming";
+
+export default create({
+  base: "light",
+  colorPrimary: "#FF6F61",
+  colorSecondary: "deepskyblue",
+
+  // UI
+  appBg: "white",
+  appContentBg: "white",
+  appBorderColor: "grey",
+  appBorderRadius: 3,
+
+  // 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: 3,
+
+  brandTitle: "Zapify-ui",
+  brandUrl: "https://zapify.netlify.com",
+  brandImage: "https://i.ibb.co/hdsdzq7/ms-icon-144x144.png"
+});

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(
-        <TextField
-            backgroundColor="teal"
-            color="white"
-            placeholderText="Color Customized"
-        >
-            Input Hook with custom placeholder
-        </TextField>
-    );
+  const component = renderer.create(
+    <TextField
+      backgroundColor="teal"
+      color="white"
+      placeholderText="Color Customized"
+    >
+      Input Hook with custom placeholder
+    </TextField>
+  );
 
-    const tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
+  const tree = component.toJSON();
+  expect(tree).toMatchSnapshot();
 });

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(
-        <ZapBar
-            color="#f0f0f0"
-            linkColor="#692478"
-            links={[
-                {
-                    name: 'Custom Link 1',
-                    url: 'www.piyushmehta.com'
-                },
-                {
-                    name: 'Custom Link 2',
-                    url: 'www.piyushmehta.com'
-                }
-            ]}
-            logoColor="#be1e6b"
-            logoImage="https://camo.githubusercontent.com/56702c11ebd0c8817ee8d95b1e45022b97083b8a/68747470733a2f2f692e6962622e636f2f5832334e4877362f612e706e67"
-            logoSize="-2em 0em -0.8em 0.2em"
-            title="Brand Name"
-        />
-    );
-    const tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
+  const component = renderer.create(
+    <ZapBar
+      color="#f0f0f0"
+      linkColor="#692478"
+      links={[
+        {
+          name: "Custom Link 1",
+          url: "www.piyushmehta.com"
+        },
+        {
+          name: "Custom Link 2",
+          url: "www.piyushmehta.com"
+        }
+      ]}
+      logoColor="#be1e6b"
+      logoImage="https://camo.githubusercontent.com/56702c11ebd0c8817ee8d95b1e45022b97083b8a/68747470733a2f2f692e6962622e636f2f5832334e4877362f612e706e67"
+      logoSize="-2em 0em -0.8em 0.2em"
+      title="Brand Name"
+    />
+  );
+  const tree = component.toJSON();
+  expect(tree).toMatchSnapshot();
 });

src/stories/typography.stories.js

@@ -7,10 +7,16 @@ import Typography from "../components/Typography";
 
 storiesOf("Typography", module)
   .addDecorator(withInfo)
-  .addWithJSX("with default Props", () => <Typography>With Default Props</Typography>)
+  .addWithJSX("with default Props", () => (
+    <Typography>With Default Props</Typography>
+  ))
   .addWithJSX("with h1", () => <Typography variant="h1">with h1</Typography>)
   .addWithJSX("with h2", () => <Typography variant="h2">with h2</Typography>)
   .addWithJSX("with h3", () => <Typography variant="h3">with h3</Typography>)
   .addWithJSX("with h4", () => <Typography variant="h4">with h4</Typography>)
   .addWithJSX("with h5", () => <Typography variant="h5">with h5</Typography>)
-  .addWithJSX("with custom color", () => <Typography variant="h2" color="red">with h2 and custom color prop</Typography>);
+  .addWithJSX("with custom color", () => (
+    <Typography variant="h2" color="red">
+      with h2 and custom color prop
+    </Typography>
+  ));