Merge pull request #18 from FoxComm/feature/theming

implemented theming support via resources overriding

Author: eugene-sy

.gitignore

@@ -1,3 +1,4 @@
-/lib
+/build
 /node_modules
-*.log
+*.log
+/public

.npmignore

@@ -5,3 +5,4 @@
 /src/opt
 /src/paragons
 /src/types
+/packages

Makefile

@@ -3,20 +3,58 @@
 JS_FILES = $(shell find ./src -name "*.js" -o -name "*.jsx")
 PRETTIER_OPTIONS = --single-quote --trailing-comma es5 --print-width 120
 
+.PHONY: setup
 setup: clean
 	yarn --pure-lockfile
 
+.PHONY: build-theme
+build-theme:
+	./node_modules/.bin/gulp
+
+.PHONY: build
 build:
-	yarn build
+	make build-theme
+	THEME=tpg make build-theme
+	make prepare-package
 
+.PHONY: clean
 clean:
 	rm -rf ./node_modules
-	rm -rf ./lib/*
+	rm -rf ./build
+
+.PHONY: prepare-package
+prepare-package:
+	cp package.json README.md .npmrc postcss.config.js build/
+	cp src/index.js build/exports.js
 
+.PHONY: test
 test:
 	yarn flow
 
+.PHONY: fmt
 fmt:
 	./node_modules/.bin/prettier $(PRETTIER_OPTIONS) --write $(JS_FILES)
 
-.PHONY: setup build clean test fmt
+.PHONY: publish
+publish: build
+	npm publish ./build --access restricted
+
+
+.PHONY: build-sg
+build-sg:
+	NODE_PATH=./src ./node_modules/.bin/styleguidist build --config styleguide.config.js
+
+.PHONY: build-sg-tpg
+build-sg-tpg:
+	THEME=tpg NODE_PATH=./src ./node_modules/.bin/styleguidist build --config styleguide.config.js
+
+.PHONY: build-styleguides
+build-styleguides: build-sg build-sg-tpg
+
+.PHONY: sg
+sg:
+	NODE_PATH=./src ./node_modules/.bin/styleguidist server --config styleguide.config.js
+
+.PHONY: sg-tpg
+sg-tpg:
+	THEME=tpg NODE_PATH=./src ./node_modules/.bin/styleguidist server --config styleguide.config.js

README.md

@@ -6,15 +6,23 @@ Installation
 yarn add @foxcomm/storefront-react
 ```
 
+Following resources should be included in your project:
+
+#### css styles
+- `node_modules/@foxcomm/storefront-react/lib/bundle.css` css styles, include to your css bundle
+- `node_modules/@foxcomm/storefront-react/lib/sprite.svg` svg icons bundled into the single sprite,
+  should be included as is to the html
+
+
 Usage
 
 At first you will need include storefront css located in 
-`@foxcomm/sf-react/lib/bundle.css` to your project.
+ to your project.
 
 Later you can use storefront react components, like in this example:
 
 ```
-import SelectBox from '@foxcomm/storefront-react/lib/components/selectbox/selectbox';
+import { SelectBox } from '@foxcomm/storefront-react';
 //
 // later in component:
 render() {
@@ -23,3 +31,5 @@ render() {
 
 ```
 
+You can optimize bundle size via `@foxcomm/storefront-react-optimize-imports` package.
+See [README](./packages/storefront-react-optimize-imports/README.md) for details.

gulpfile.js

@@ -1,5 +1,6 @@
 const gulp = require('gulp');
 require('./tasks/css');
 require('./tasks/sprites');
+require('./tasks/js');
 
-gulp.task('default', ['css', 'sprites']);
+gulp.task('default', ['css', 'sprites', 'js']);

opt/linkfs.js

@@ -0,0 +1,102 @@
+const path = require('path');
+const fs = require('fs');
+const _ = require('lodash');
+
+
+const methods = [
+  'rename',
+  'renameSync',
+  'truncate',
+  'truncateSync',
+  'chown',
+  'chownSync',
+  'lchown',
+  'lchownSync',
+  'chmod',
+  'chmodSync',
+  'lchmod',
+  'lchmodSync',
+  'stat',
+  'lstat',
+  'statSync',
+  'lstatSync',
+  'link',
+  'linkSync',
+  'symlink',
+  'symlinkSync',
+  'readlink',
+  'readlinkSync',
+  'realpath',
+  'realpathSync',
+  'unlink',
+  'unlinkSync',
+  'rmdir',
+  'rmdirSync',
+  'mkdir',
+  'mkdirSync',
+  'readdir',
+  'readdirSync',
+  'open',
+  'openSync',
+  'utimes',
+  'utimesSync',
+  'readFile',
+  'readFileSync',
+  'writeFile',
+  'writeFileSync',
+  'appendFile',
+  'appendFileSync',
+  'watchFile',
+  'unwatchFile',
+  'watch',
+  'exists',
+  'existsSync',
+  'access',
+  'accessSync',
+  'createReadStream',
+  'createWriteStream'
+];
+
+const originalFs = fs;
+const existsSync = fs.existsSync;
+
+function linkfs(fs, rewrites, finalMethods = methods) {
+  const resolvedRewrites = Object.create(null);
+  _.each(rewrites, (value, from) => {
+    resolvedRewrites[path.resolve(from)] = path.resolve(value);
+  });
+
+  // Rewrite the path of the selected methods.
+  const linkedfs = {};
+  _.each(finalMethods, method => {
+    const func = fs[method];
+    linkedfs[method] = function(filepath, ...args) {
+      filepath = path.resolve(filepath);
+
+      for (let from in resolvedRewrites) {
+        if (filepath.indexOf(from) === 0) {
+          const newPath = filepath.replace(from, resolvedRewrites[from]);
+          if (existsSync.call(originalFs, newPath)) {
+            filepath = newPath;
+            break;
+          }
+        }
+      }
+
+      return func.call(fs, filepath, ...args);
+    };
+  });
+
+  // Just proxy the rest of the methods
+  for (let method in fs) {
+    const func = fs[method];
+    if ((typeof func == 'function') && !linkedfs[method]) {
+      linkedfs[method] = fs[method].bind(fs);
+    }
+  }
+
+  return linkedfs;
+}
+
+
+module.exports = linkfs;

override-fs.js

@@ -0,0 +1,27 @@
+
+const fs = require('fs');
+const path = require('path');
+const unionfs = require('unionfs');
+const linkfs = require('./opt/linkfs');
+
+const themeName = process.env.THEME;
+
+const ReadStream = fs.ReadStream;
+const WriteStream = fs.WriteStream;
+
+function override(themeName = 'peacock') {
+  const linkedfs = linkfs(fs, {
+    [path.resolve('./src')]: path.resolve(`./themes/${themeName}`)
+  });
+
+  unionfs
+    .use(fs)
+    .use(linkedfs)
+    .replace(fs);
+
+  fs.ReadStream.prototype = ReadStream.prototype;
+  fs.WriteStream.prototype = WriteStream.prototype;
+}
+
+override(themeName);
+

package.json

@@ -1,14 +1,11 @@
 {
   "name": "@foxcomm/storefront-react",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "FoxCommerce Storefront React UI Library",
   "main": "lib/index.js",
   "scripts": {
-    "build-gulp": "gulp",
-    "build-js": "babel src -d lib",
-    "build": "npm run build-gulp && npm run build-js",
-    "prepublish": "npm run build",
-    "sg": "NODE_PATH=./src styleguidist server --config styleguide.config.js",
+    "build": "make build",
+    "prepublish": "make build",
     "flow": "flow check"
   },
   "publishConfig": {
@@ -31,7 +28,6 @@
   "homepage": "https://github.com/FoxComm/storefront.react.js#readme",
   "devDependencies": {
     "@foxcomm/babel-plugin-react-stylenames": "^3.1.0",
-    "babel-cli": "^6.24.1",
     "babel-eslint": "^7.2.3",
     "babel-loader": "^7.0.0",
     "babel-plugin-module-resolver": "^2.7.1",
@@ -54,6 +50,7 @@
     "fs-extra": "^3.0.1",
     "gulp": "^3.9.1",
     "gulp-add-src": "^0.2.0",
+    "gulp-babel": "^6.1.2",
     "gulp-concat": "^2.6.1",
     "gulp-postcss": "^7.0.0",
     "gulp-sourcemaps": "^2.6.0",
@@ -70,6 +67,8 @@
     "react-styleguidist": "^5.2.1",
     "style-loader": "^0.17.0",
     "through2": "^2.0.3",
+    "unionfs": "^0.0.9",
+    "vinyl-file": "^3.0.0",
     "webpack": "^3.0.0",
     "webpack-svgstore-plugin": "^4.0.1"
   },

packages/storefront-react-optimize-imports/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@foxcomm/storefront-react-optimize-imports",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Optimize imports for storefront-react package in order to get smaller bundle size",
   "main": "src/index.js",
   "publishConfig": {

packages/storefront-react-optimize-imports/src/index.js

@@ -26,7 +26,7 @@ const rootPackage = require(parentPackagePath);
 if (rootPackage.name === pkgName) {
   importsEntrypoint = path.join(path.dirname(parentPackagePath), 'src/index.js');
 } else {
-  importsEntrypoint = path.join(path.dirname(parentPackagePath), 'node_modules', pkgName, 'src/index.js');
+  importsEntrypoint = path.join(path.dirname(parentPackagePath), 'node_modules', pkgName, 'exports.js');
 }
 
 const importsCode = fs.readFileSync(importsEntrypoint).toString();
@@ -60,19 +60,21 @@ function transformToComponents(importsAst) {
 const components = transformToComponents(importsAst);
 exports.components = components;
 
+const pkgRe = /^\@foxcomm\/storefront-react\/[^\/]+$/;
+
 function plugin(_ref) {
   const t = _ref.types;
 
   return {
     visitor: {
       ImportDeclaration(path) {
         const { node } = path;
-        if (node.source.value == pkgName) {
+        if (pkgRe.test(node.source.value)) {
           const newImports = node.specifiers.map(decl => {
             const name = decl.imported.name;
             if (name in components) {
               const entry = components[name];
-              const source = t.stringLiteral(`${pkgName}/lib${entry.path}`);
+              const source = t.stringLiteral(`${node.source.value}${entry.path}`);
               let specifier;
               if (entry.isDefault) {
                 specifier = t.importDefaultSpecifier(t.identifier(decl.local.name));