ThemeProvider, new way to build themes

Author: anru

.gitignore

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

.npmignore

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

Makefile

@@ -3,23 +3,42 @@
 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:

opt/linkfs.js

@@ -60,7 +60,6 @@ const methods = [
 const originalFs = fs;
 const existsSync = fs.existsSync;
 
-
 function linkfs(fs, rewrites, finalMethods = methods) {
   const resolvedRewrites = Object.create(null);
   _.each(rewrites, (value, from) => {

override-fs.js

@@ -9,13 +9,11 @@ const themeName = process.env.THEME;
 const ReadStream = fs.ReadStream;
 const WriteStream = fs.WriteStream;
 
-function override(themeName) {
+function override(themeName = 'peacock') {
   const linkedfs = linkfs(fs, {
     [path.resolve('./src')]: path.resolve(`./themes/${themeName}`)
   });
 
-  exports.linkedgs = linkedfs;
-
   unionfs
     .use(fs)
     .use(linkedfs)
@@ -25,7 +23,5 @@ function override(themeName) {
   fs.WriteStream.prototype = WriteStream.prototype;
 }
 
-if (themeName) {
-  override(themeName);
-}
+override(themeName);
 

package.json

@@ -1,10 +1,10 @@
 {
   "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",
+    "build": "make build",
     "prepublish": "npm run build",
     "flow": "flow check"
   },
@@ -68,6 +68,7 @@
     "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));

src/components/core/theme-provider/theme-data.js

@@ -0,0 +1,11 @@
+import React, { Element } from 'react';
+// types
+import type { LineItem } from '@foxcomm/api-js/types/api/cord/line-items';
+
+export function renderLineItemImage(lineItem: LineItem): Element<*> {
+  return <img src={lineItem.imagePath} width="50" height="50" />;
+}
+
+export type ThemeData = {
+  renderLineItemImage(lineItem: LineItem): Element<*>,
+};

src/components/core/theme-provider/theme-provider.jsx

@@ -0,0 +1,45 @@
+import React, { PropTypes, Component } from 'react';
+
+import * as themeData from './theme-data';
+
+type ContextType = {[key: string]: any};
+
+type Props = {
+  context?: ContextType,
+};
+
+type State = {
+  context: ContextType,
+};
+
+class ThemeProvider extends Component {
+  static childContextTypes = {
+    renderLineItemImage: PropTypes.func.isRequired,
+  };
+  props: Props;
+  state: State = {
+    context: this.calcContext(this.props),
+  };
+
+  calcContext(props) {
+    return Object.assign({}, props.context || {}, themeData);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.context != this.props.context) {
+      this.setState({
+        context: this.calcContext(nextProps),
+      });
+    }
+  }
+
+  getChildContext() {
+    return this.state.context;
+  }
+
+  render() {
+    return this.props.children;
+  }
+}
+
+export default ThemeProvider;