Staging (#14)

Staging
zapify-ui · Aug 7, 2019 · 9ca2b8b · 9ca2b8b
2 parents ca18923 + fd524ca
commit 9ca2b8b
Show file tree

Hide file tree

Showing 30 changed files with 11,997 additions and 1,087 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "zapify-ui",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "private": false,
   "author": "piyush97 <[email protected]>",
   "main": "lib/index/index.js",
@@ -15,6 +15,8 @@
     "dev": "webpack --mode development --env.dist=false",
     "dev:dist": "webpack --mode development",
     "lint": "eslint src/**; exit 0",
+    "build-storybook": "build-storybook -c .storybook -o .out",
+    "deploy-storybook": "storybook-to-ghpages",
     "lint:watch": "esw -w lib/**",
     "lint-staged": {
       "*.{js,jsx}": [
@@ -29,6 +31,11 @@
     "storybook": "start-storybook -p 9001 -c src/.storybook",
     "watch-css": "npm run build-css && node-sass-chokidar src/components/ -o src/components/ --watch --recursive"
   },
+  "storybook-deployer": {
+    "gitUsername": "piyush97",
+    "gitEmail": "[email protected]",
+    "commitMessage": "Deploy Storybook [skip ci]"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/zapify-ui/zapify"
@@ -45,34 +52,38 @@
     "@babel/core": "^7.1.6",
     "@babel/preset-env": "^7.1.6",
     "@babel/preset-react": "^7.0.0",
-    "@storybook/addon-actions": "5.1.10",
+    "@storybook/addon-actions": "^5.1.10",
     "@storybook/addon-links": "5.1.10",
     "@storybook/react": "5.1.10",
+    "@storybook/storybook-deployer": "^2.8.1",
     "babel-cli": "^6.26.0",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.0-beta.6",
     "babel-preset-env": "^1.7.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
-    "css-loader": "^1.0.1",
-    "eslint": "^5.9.0",
+    "css-loader": "^3.2.0",
+    "eslint": "^6.1.0",
     "eslint-config-airbnb": "^17.1.0",
-    "eslint-config-prettier": "^3.3.0",
-    "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-jsx-a11y": "^6.1.2",
-    "eslint-plugin-prettier": "^3.0.0",
-    "eslint-plugin-react": "^7.11.1",
-    "eslint-watch": "^4.0.2",
+    "eslint-config-prettier": "^6.0.0",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-prettier": "^3.1.0",
+    "eslint-plugin-react": "^7.14.3",
+    "eslint-watch": "^6.0.0",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "husky": "^1.2.0",
     "lint-staged": "^8.1.0",
+    "mini-css-extract-plugin": "^0.8.0",
+    "node-sass": "^4.12.0",
     "node-sass-chokidar": "^1.3.4",
     "npm-run-all": "^4.1.5",
-    "prettier": "^1.15.2",
-    "pretty-quick": "^1.8.0",
+    "prettier": "^1.18.2",
+    "pretty-quick": "^1.11.1",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "style-loader": "^0.23.1",
+    "sass-loader": "^7.1.0",
+    "style-loader": "^1.0.0",
     "webpack": "^4.39.1",
     "webpack-cli": "^3.3.6"
   }

diff --git a/src/.storybook/addons.js b/src/.storybook/addons.js
@@ -1,4 +1,4 @@
 /* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
 
-import '@storybook/addon-actions/register';
-import '@storybook/addon-links/register';
+import "@storybook/addon-actions/register";
+import "@storybook/addon-links/register";
diff --git a/src/.storybook/config.js b/src/.storybook/config.js
@@ -1,9 +1,103 @@
-import { configure } from '@storybook/react';
+import { addParameters, configure } from "@storybook/react";
+import { create } from "@storybook/theming";
 
-const req = require.context('../stories', true, /\.stories\.js$/);
+const req = require.context("../stories", true, /\.stories\.js$/);
+
+// coral / ocean highlights
+const theme = create({
+  base: "#111",
+  colorPrimary: "#f1f1f1",
+  colorSecondary: "#111",
+  textColor: "#00e9ff",
+  barBg: "#111",
+  barTextColor: "#f1f1f1",
+  appContentBg: "#444",
+  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
+  }
+});
+
 configure(loadStories, module);
diff --git a/src/components/Box/Box.scss b/src/components/Box/Box.scss
@@ -0,0 +1,36 @@
+@import "../../styles/ColorSchema.scss";
+.Primary {
+  background: linear-gradient(60deg, $blue, $green);
+  color: #000000;
+}
+
+.boxSecondary {
+  background-color: #692478;
+  color: #000000;
+}
+
+.boxTertiary {
+  background-color: #ffd280;
+  color: #000000;
+}
+
+.darkPrimary {
+  background-color: #000000;
+  color: #ffffff;
+}
+
+.darkSecondary {
+  background-color: #404040;
+  color: #ffffff;
+}
+
+.darkTertiary {
+  background-color: #737373;
+  color: #ffffff;
+}
+
+.disabled {
+  background-color: #d9d9d9;
+  color: #ffffff;
+}
+/*# sourceMappingURL=boxStyles.css.map */
diff --git a/src/components/Box/index.js b/src/components/Box/index.js
@@ -0,0 +1,39 @@
+/* eslint-disable react/destructuring-assignment */
+/* eslint-disable react/button-has-type */
+/* eslint-disable react/prefer-stateless-function */
+import React from "react";
+// import Proptypes from "prop-types";
+import "./Box.css";
+
+function Box(props) {
+  const boxColor = props.color;
+  const boxPadding = `${props.p}em`;
+  const boxMargin = `${props.m}em`;
+  const textColor = props.color === "disabled" ? "black" : "white";
+  return (
+    <div
+      className={boxColor}
+      style={{
+        padding: `${boxPadding}`,
+        margin: `${boxMargin}`,
+        color: `${textColor}`
+      }}
+    >
+      This is {props.color}
+    </div>
+  );
+}
+
+// Box.defaultProps = {
+//   color: "black",
+//   p: "2em",
+//   m: "2.5em"
+// };
+
+// Box.propTypes = {
+//   color: Proptypes.string,
+//   p: Proptypes.number,
+//   m: Proptypes.number
+// };
+
+export default Box;
diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss
@@ -0,0 +1,69 @@
+@import "../../styles/ColorSchema.scss";
+.primaryButton {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  padding: 0 0.3em;
+  height: 2.4em;
+  border-radius: 5px;
+  line-height: 2.1;
+  overflow: hidden;
+  color: $white;
+  font-size: 1.1em;
+  margin: 10px 10px 10px 10px;
+  letter-spacing: 0.01em;
+  max-width: 100%;
+  text-overflow: ellipsis;
+  white-space: normal;
+  overflow: hidden;
+  padding: 0 1em;
+  user-select: none;
+  cursor: pointer;
+  background: linear-gradient(60deg, $blue, $green);
+  text-align: center;
+  text-decoration: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: transparent;
+  &:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    cursor: pointer;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: -1;
+    background-color: $green;
+    //background: linear-gradient( 180deg, darken($primaryColor,5%), darken($secondaryColor,5%) 50%, $primaryColor 50%, $secondaryColor );
+    // background: linear-gradient(60deg, $blue, $green);
+    background-size: 100% 200%;
+    background-position: 0 100%;
+    transition: background-color 400ms;
+  }
+  &:after {
+    content: "";
+    position: absolute;
+    left: 50%;
+    cursor: pointer;
+    top: 50%;
+    background: lighten(blue, 15%);
+    z-index: -1;
+    width: 100%;
+    padding-top: 120%;
+    border-radius: 100%;
+    opacity: 0;
+    transform: translateX(-50%) translateY(-50%) scale(0.09);
+    transition: opacity 500ms, transform 500ms;
+    transition-delay: 0, 100ms;
+  }
+
+  &:active {
+    color: black;
+    &:after {
+      transform: translateX(-50%) translateY(-50%) scale(1.1);
+      transition: opacity 100ms, transform 100ms;
+      transition-delay: 0s;
+      opacity: 1;
+    }
+  }
+}
diff --git a/src/components/Button/index.js b/src/components/Button/index.js
@@ -1,11 +1,19 @@
-import React, { Component } from "react";
+/* eslint-disable react/destructuring-assignment */
+/* eslint-disable react/button-has-type */
+/* eslint-disable react/prefer-stateless-function */
+import React from "react";
+import Proptypes from "prop-types";
+import "./Button.css";
 
-export default class Button extends Component {
-  render() {
-    return (
-      <button onClick={this.props} type="button">
-        {this.props.children}
-      </button>
-    );
-  }
+function Button(props) {
+  return (
+    <div>
+      <button className={props.color}>{props.children}</button>
+    </div>
+  );
 }
+
+Button.propType = {
+  color: Proptypes.string
+};
+export default Button;
diff --git a/src/components/Container/Container.scss b/src/components/Container/Container.scss
@@ -0,0 +1,14 @@
+@import "../../styles/ColorSchema.scss";
+
+.sm{
+    background-color: $blue-grad;
+    height:20vh;
+}
+.md{
+    background-color: $dark-gray-grad;
+    height:60vh;
+}
+.xl{
+    background-color: $dark-gray-grad;
+    height: 100vh;
+}