create products layout.

.storybook/postcss.config.js

@@ -0,0 +1,7 @@
+const tailwindcss = require('tailwindcss');
+module.exports = {
+    plugins: [
+        tailwindcss('./tailwind.config.js'),
+        require('autoprefixer'),
+    ],
+};

package.json

@@ -7,7 +7,7 @@
     "start": "webpack-dev-server --open --config ./webpack/webpack.dev.js",
     "build": "webpack --config ./webpack/webpack.prod.js",
     "server": "http-server ./public",
-    "storybook": "yarn build:tailwind && start-storybook -p 6006",
+    "storybook": "yarn build:tailwind && start-storybook -p 6006 --ci",
     "build-storybook": "build-storybook",
     "build:tailwind": "postcss public/css/base.scss -o public/css/index.scss",
     "deploy-storybook": "storybook-to-ghpages"
@@ -67,6 +67,7 @@
     "webpack-dev-server": "^3.10.3"
   },
   "dependencies": {
+    "@unbxd-ui/unbxd-search-core": "../search-JS-core",
     "babel-polyfill": "^6.26.0",
     "babel-runtime": "^6.26.0",
     "react": "16.7.0",
@@ -86,4 +87,4 @@
     "url": "https://github.com/unbxd/react-search-JS-SDK/issues"
   },
   "homepage": "https://github.com/unbxd/react-search-JS-SDK#readme"
-}
+}

postcss.config.js

@@ -1,3 +1,7 @@
+const tailwindcss = require('tailwindcss');
 module.exports = {
-    plugins: [require('tailwindcss'), require('autoprefixer')],
-};  
+    plugins: [
+        tailwindcss('./tailwind.config.js'),
+        require('autoprefixer'),
+    ],
+};

public/css/modules.scss

@@ -0,0 +1 @@
+@import './Products.scss';

src/App.js

@@ -1,34 +1,54 @@
 import React, { Component } from 'react';
-import UnbxdSearchCore from 'unbxd-search-core';
+import UnbxdSearch from 'unbxd-search-core';
 
 import { AppContextProvider } from './common/context';
 import searchConfigurations from './config';
 import '../public/css/index.scss';
 
 class App extends Component {
 
-    state = {
-        unbxdCore: null
+    setProductConfiguration = (config) => {
+        const { per_page, requiredFields, variants,
+            variantCount, variantRequiredFields, groupBy } = config;
+        this.state.unbxdCore.setNumberOfProducts(per_page);
+        this.state.unbxdCore.setFields(requiredFields);
+        this.state.unbxdCore.setIsVariants(variants);
+        this.state.unbxdCore.setVariantsCount(variantCount);
+        this.state.unbxdCore.setVariantFields(variantRequiredFields);
+        this.state.unbxdCore.setVariantsGroupBy(groupBy);
     }
 
-    unbxdCallBack = (unbxdSearchObj, eventName) => {
-        if (eventName === 'afterApiCall') {
+    helpers = { setProductConfiguration: this.setProductConfiguration }
+
+    constructor(props) {
+        super(props)
+        const { siteName, siteKey } = this.props;
 
+        this.state = {
+            unbxdCore:
+                new UnbxdSearch({ ...searchConfigurations, siteName, siteKey, callBackFn: this.unbxdCallBack }),
+            helpers: this.helpers
+        };
+
+    }
+
+    unbxdCallBack = (unbxdSearchObj, eventName) => {
+        console.log("hello ", eventName)
+        if (eventName === 'AFTER_API_CALL') {
             this.setState({ unbxdCore: unbxdSearchObj })
         }
     }
 
     componentDidMount() {
-        const { siteName, siteKey } = this.props;
-        const searchObj = new UnbxdSearchCore({ ...searchConfigurations, siteName, siteKey }, this.unbxdCallBack);
-        searchObj.getResults('shoes');
+        //this.state.unbxdCore.getResults('boots');
+        //this.state.unbxdCore.getResults('cooking stoves');
+        this.state.unbxdCore.getResults('red shirt');
+        //this.state.unbxdCore.getResults('xxxxxxxxxxxxxxx');
     }
 
     render() {
-
-        const { unbxdCore } = this.state
         return (
-            <AppContextProvider value={unbxdCore}>
+            <AppContextProvider value={this.state}>
                 {this.props.children}
             </AppContextProvider>
         )

src/common/utils.js

@@ -0,0 +1,8 @@
+export const conditionalRenderer = (children, state, DefaultComponents) => {
+    const isChildren = children ? true : false;
+
+    return isChildren ?
+        (typeof children === 'function' ?
+            children(state) : children) :
+        (DefaultComponents)
+}

src/modules/Products/GridView.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { GridProductCard } from './ProductCards';
+//We need the fieldMap object to map to values
+
+const GridView = (props) => {
+
+    const { products = [],
+        per_row,
+        fieldMap,
+        variantMap,
+        unbxdProductCardClickHandler } = props;
+
+    return (<div className={`Unbx-product-container Unbx-grid-view grid grid-cols-${per_row} gap-4 p-4`}>{
+        products.map((product) => {
+            return (<GridProductCard product={product}
+                fieldMap={fieldMap}
+                variantMap={variantMap}
+                per_row={per_row}
+                key={product.uniqueId}
+                unbxdProductCardClickHandler={unbxdProductCardClickHandler} />)
+        })
+
+    }
+    </div>)
+}
+
+GridView.propTypes = {
+    products: PropTypes.arrayOf(PropTypes.object).isRequired,
+    per_row: PropTypes.number.isRequired,
+    fieldMap: PropTypes.object.isRequired,
+    variantMap: PropTypes.object.isRequired,
+    unbxdProductCardClickHandler: PropTypes.func.isRequired
+}
+
+export default GridView;

src/modules/Products/ListView.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { ListProductCard } from './ProductCards';
+
+const ListView = ({ products = [], fieldMap, isVariant, variantMap, unbxdProductCardClickHandler }) => {
+
+    return (<div className={`Unbx-product-container Unbx-grid-view grid grid-cols-1 gap-4 p-4`}>{
+        products.map((product) => {
+            return (<ListProductCard product={product}
+                fieldMap={fieldMap}
+                isVariant={isVariant}
+                variantMap={variantMap}
+                key={product.uniqueId}
+                unbxdProductCardClickHandler={unbxdProductCardClickHandler} />)
+        })
+
+    }
+    </div>)
+}
+ListView.propTypes = {
+    products: PropTypes.arrayOf(PropTypes.object).isRequired,
+    per_row: PropTypes.number.isRequired,
+    fieldMap: PropTypes.object.isRequired,
+    isVariant: PropTypes.bool.isRequired,
+    variantMap: PropTypes.object.isRequired,
+    unbxdProductCardClickHandler: PropTypes.func.isRequired
+}
+
+export default ListView;

src/modules/Products/NoProducts.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const NoProducts = () => {
+    return (<div className='Unbx-no-products-container'>Sorry! No products found!</div>)
+}
+
+export default NoProducts;

src/modules/Products/ProductCards/GridProductCard.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { productFieldsMapper } from '../utils';
+
+const GridProductCard = ({ product, fieldMap, variantMap, unbxdProductCardClickHandler }) => {
+
+    //Get the datas from the product bases on fieldMap and create the card
+    const productValues = productFieldsMapper(product, fieldMap, variantMap);
+
+    const {
+        productName,
+        imageUrl,
+        price,
+        sellingPrice } = productValues;
+
+    //Add support for router as a config
+    return (<div className='Unbx-product-card-container'>
+        <a href={product.productUrl} className={`Unbx-product-card Unbx-grid-card`} onClick={unbxdProductCardClickHandler}>
+            <img className='Unbx-product-card Unbx-image' src={imageUrl[0]} />
+            <p className='Unbx-product-card Unbx-product-name'>{productName}</p>
+            <p className='Unbx-product-card Unbx-price'>{price}</p>
+            <p className='Unbx-product-card Unbx-selling-price'>{sellingPrice}</p>
+        </a>
+        {/* swatch content */}
+    </div>)
+}
+
+GridProductCard.propTypes = {
+    product: PropTypes.object.isRequired,
+    fieldMap: PropTypes.object.isRequired,
+    isVariant: PropTypes.bool.isRequired,
+    variantMap: PropTypes.object.isRequired,
+    unbxdProductCardClickHandler: PropTypes.func.isRequired
+}
+
+export default GridProductCard;

src/modules/Products/ProductCards/ListProductCard.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { productFieldsMapper } from '../utils';
+
+const ListProductCard = ({ product, fieldMap, variantMap, unbxdProductCardClickHandler }) => {
+
+    //Get the datas from the product bases on fieldMap and create the card
+    const productValues = productFieldsMapper(product, fieldMap, variantMap);
+
+    const {
+        productName,
+        imageUrl,
+        price,
+        sellingPrice } = productValues;
+
+    //Add support for router as a config
+    return (<div className='Unbx-product-card-container'>
+        <a href={product.productUrl} className={`Unbx-product-card Unbx-grid-card`} onClick={unbxdProductCardClickHandler}>
+            <img className='Unbx-product-card Unbx-image' src={imageUrl[0]} />
+            <p className='Unbx-product-card Unbx-product-name'>{productName}</p>
+            <p className='Unbx-product-card Unbx-price'>{price}</p>
+            <p className='Unbx-product-card Unbx-selling-price'>{sellingPrice}</p>
+        </a>
+        {/* swatch content */}
+    </div>)
+}
+
+ListProductCard.propTypes = {
+    product: PropTypes.object.isRequired,
+    fieldMap: PropTypes.object.isRequired,
+    isVariant: PropTypes.bool.isRequired,
+    variantMap: PropTypes.object.isRequired,
+    unbxdProductCardClickHandler: PropTypes.func.isRequired
+}
+
+export default ListProductCard;

src/modules/Products/ProductCards/index.js

@@ -0,0 +1,4 @@
+import GridProductCard from './GridProductCard';
+import ListProductCard from './ListProductCard';
+
+export { GridProductCard, ListProductCard };

src/modules/Products/ProductsView.js

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { ProductContextConsumer } from './Context'
+
+import NoProducts from './NoProducts';
+import ProductsWrapper from './ProductsWrapper';
+
+
+
+const ProductsView = () => {
+    return (<ProductContextConsumer>{({ isGrid, getSearchResults, ZeroResultsTemplate, ...props }) => {
+
+        const { numberOfProducts = 0, products = [] } = getSearchResults() || {};
+
+        //return the prop based Zero results template
+        if (numberOfProducts === 0 && ZeroResultsTemplate) {
+            return !ZeroResultsTemplate.prototype.render
+                ? ZeroResultsTemplate() : <ZeroResultsTemplate />;
+        }
+
+        //return the default Zero results template
+        if (numberOfProducts === 0) {
+            return <NoProducts />;
+        }
+
+        //return the default product results template
+        //we can make an object of props and destructure it.
+        return (<ProductsWrapper isGrid={isGrid} products={products} {...props} />)
+
+    }}
+    </ProductContextConsumer>);
+}
+
+export default ProductsView;