initial commit.

ruffle1986 · Oct 28, 2016 · 7826ef4 · 7826ef4
commit 7826ef4
Show file tree

Hide file tree

Showing 27 changed files with 1,622 additions and 0 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,10 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+charset = utf-8
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+max_line_length = 80
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,11 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true
+  },
+  "extends": [
+    "pi",
+    "pi/es6",
+    "pi/react"
+  ]
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,4 @@
+dist
+bundle.js
+node_modules
+*.log
diff --git a/.npmignore b/.npmignore
diff --git a/circle.yml b/circle.yml
@@ -0,0 +1,3 @@
+machine:
+  node:
+    version: 4.2.4
diff --git a/example/css/style.css b/example/css/style.css
@@ -0,0 +1,202 @@
+@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
+
+*, *:before, *:after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 10px;
+  font-family: 'Open Sans';
+  font-size: 14px;
+  line-height: 21px;
+  background: #298eea;
+  color: #fff;
+}
+
+h1 {
+  line-height: 45px;
+  vertical-align: middle;
+}
+
+h1 img {
+  width: 50px;
+  height: 45px;
+  display: block;
+  float: left;
+  margin-right: 10px;
+}
+
+a {
+  color: #fff;
+  transition: all 180ms ease;
+}
+
+a:hover {
+  text-decoration: none;
+  color: #fff;
+}
+
+footer {
+  text-align: center;
+  padding: 1em;
+}
+
+.social {
+  padding: 0;
+  margin: 0;
+  list-style-type: none;
+  text-align: center;
+  font-size: 30px;
+  margin: 1em 0;
+}
+
+.social li {
+  display: inline;
+  margin: 0 5px;
+}
+
+.container {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.root {
+  margin: 1em 0;
+  max-width: 640px;
+  margin: 0 auto;
+}
+
+.variants {
+  color: #000;
+  background: #fcfcfc;
+  border: 1px solid #ebeef0;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
+  padding: 10px 10px 0;
+}
+
+.variants-options {
+  margin-bottom: 10px;
+  width: 100%;
+}
+
+.variants th {
+  text-align: left;
+}
+
+.variants td {
+  color: #929292;
+}
+
+.variants th,
+.variants td {
+  padding: 5px;
+  vertical-align: middle;
+}
+
+.variants-option-name {
+  width: 30%;
+}
+
+.variants-option-name input {
+  width: 100%;
+  font-size: 14px;
+  line-height: 35px;
+  padding: 0 8px;
+}
+
+.variants-option-values {
+  width: 70%;
+}
+
+.variants-option-values ul {
+  border: 1px solid #ebeef0;
+  border-radius: 4px;
+  background: #fff;
+  overflow: hidden;
+  margin: 0;
+  padding: 3px 0 0 3px;
+  cursor: text;
+}
+
+.variants-option-values li {
+  display: block;
+  float: left;
+  border-radius: 4px;
+  color: #fff;
+  padding: 4px 8px;
+  margin: 0 3px 3px 0;
+}
+
+.variants-add-option {
+  cursor: pointer;
+  background: #28cb75;
+  font-weight: bold;
+  color: white;
+  border-radius: 4px;
+  padding: 8px 15px 8px 36px;
+  display: inline-block;
+  margin-bottom: 10px;
+  position: relative;
+}
+
+.variants-add-option:hover {
+  background: #0cb863;
+}
+
+.variants-add-option .add-icon {
+  position: absolute;
+  top: 0;
+  left: 11px;
+  font-size: 22px;
+  line-height: 37px;
+}
+
+.variants input[type=text] {
+  border: 1px solid #ebeef0;
+  border-radius: 4px;
+  outline: 0;
+}
+
+.variants-option-values input[type="text"] {
+  border: 0;
+  display: block;
+  float: left;
+  font-size: 14px;
+  line-height: 19px;
+}
+
+.variants-product {
+  margin-bottom: 15px;
+  width: 100%;
+}
+
+.variants-product input[type="text"] {
+  font-size: 14px;
+  line-height: 35px;
+  padding: 0 8px;
+  width: 100%;
+}
+
+.variants-option-value-remove {
+  color: #fff;
+  margin-left: 7px;
+  display: block;
+  float: left;
+  cursor: pointer;
+}
+
+.variants-option-value-label {
+  display: block;
+  float: left;
+}
+
+.variants-option-remove {
+  cursor: pointer;
+  color: #3190e7;
+  font-size: 20px;
+}
+
+.variants-option-remove:hover {
+  color: #2d7ec7;
+}
diff --git a/example/images/react-logo.svg b/example/images/react-logo.svg
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>React Variants - Example</title>
+  <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />
+  <link rel="stylesheet" href="css/style.css" />
+</head>
+<body>
+<div class="container">
+  <h1>
+    <img src="images/react-logo.svg" alt="">
+    React Variants
+  </h1>
+  <p>
+    Variant editor to easily setup multiple versions (variants) of a thing like a product on an e-commerce website.
+    <br>
+    This component is completely written in <a href="http://facebook.github.io/react/" title="React">React</a> and using <a href="http://redux.js.org/" title="Redux">Redux</a> to increase performance, maintainability, testability and lots of other bilities.
+  </p>
+  <ul class="social">
+    <li class="github">
+      <a href="https://github.com/ruffle1986/react-variants" title="Fork it!"><i class="ion-social-github"></i></a>
+    </li>
+    <li class="twitter">
+      <a href="https://twitter.com/intent/tweet?text=Check%20this%20awesome%20variant%20editor%20for%20e-commerce%20sites%20using%20React%20and%20Redux.&hashtags=reactjs,redux&url=https://github.com/ruffle1986/react-variants&via=ruffle1986" title="Tweet it!"><i class="ion-social-twitter"></i></a>
+    </li>
+  </ul>
+  <div class="root" id="root"></div>
+  <footer>
+    Copyright &copy; 2016 - <a href="https://twitter.com/ruffle1986" title="Follow me on Twitter">Tamas Fodor</a>
+  </footer>
+</div>
+<script src="bundle.js"></script>
+</body>
+</html>
diff --git a/example/main.js b/example/main.js
@@ -0,0 +1,26 @@
+import Variants from '../lib/containers/root';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { createStore, applyMiddleware } from 'redux';
+import thunk from 'redux-thunk';
+import reducer from '../lib/reducers/variants';
+
+const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
+const store = createStoreWithMiddleware(reducer, Object.assign({
+  options: [],
+  optionsLimit: 3,
+  product: [],
+  colors: ['#0073CF', '#966FD6', '#FF6E4A']
+}, {
+  options: [
+    {
+      id: 1,
+      name: 'Size'
+    }
+  ]
+}));
+
+ReactDOM.render(
+  <Variants store={ store } />,
+  document.getElementById('root')
+);
diff --git a/lib/actions/variants.js b/lib/actions/variants.js
@@ -0,0 +1,53 @@
+import {
+  ADD_OPTION,
+  REMOVE_OPTION,
+  ADD_OPTION_VALUE,
+  REMOVE_OPTION_VALUE,
+  CALCULATE_PRODUCT
+} from '../constants/variants';
+
+export function addOption() {
+  return {
+    type: ADD_OPTION,
+    name: '',
+    values: []
+  };
+}
+export function removeOption(id) {
+  return {
+    type: REMOVE_OPTION,
+    id,
+  };
+}
+
+export function addOptionValue(id, value) {
+  return (dispatch, getState) => {
+    const option = getState().options.filter(option => option.id === id)[0];
+    let optionValue;
+    if (option && option.values) {
+      optionValue = option.values.filter((val) => val === value)[0];
+    }
+    if (optionValue) {
+      return false;
+    }
+    return dispatch({
+      type: ADD_OPTION_VALUE,
+      value,
+      id
+    });
+  };
+}
+
+export function removeOptionValue(id, value) {
+  return {
+    type: REMOVE_OPTION_VALUE,
+    value,
+    id,
+  };
+}
+
+export function calculateProduct() {
+  return {
+    type: CALCULATE_PRODUCT
+  };
+}