syedcommonfe v0.1.3

This project was bootstrapped with Create React App.

Below you will find some information on how to perform common tasks.

Folder Structure

SyedCommonFE/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.png
  src/
    App/
      images/
      styles.css
      App.js
      App.test.js
    Components/
      ColorFilterItem/
        styles.css
        index.js
      CatalogProducts/
        styles.css
        index.js
      CatalogProdcut/
        styles.css
        index.js
    styles.css
    index.js

For the project to build, these files must exist with exact filenames:

• public/index.html is the page template;
• src/index.js is the JavaScript entry point.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode. Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.

npm run build

Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.

CatalogProducts

CatalogProducts creates a container to render the products catalog.

Required props for CatalogProducts are : Path to the product images ==> productImagePath: PropTypes.string.isRequired Products Array {name,price,image}==> products: PropTypes.array.isRequired

CatalogProduct

CatalogProduct creates a product item to render product information.

Required props for CatalogProduct are : Path to the product images ==> productImagePath: PropTypes.string.isRequired Product {name,price,image} ==> product: PropTypes.object.isRequired

ColorFilterItem

ColorFilterItem creates a color item to render color selection anchor.

Required props for CatalogProduct are : Name of the color ==> color: PropTypes.string.isRequired Color Code e.g '#fff' or image ==> colorCode: PropTypes.string.isRequired Handler for onClick event ==> onClick: PropTypes.func.isRequired Handler for onMouseEnter event ==> onMouseEnter: PropTypes.func.isRequired Handler for onMouseLeave event ==> onMouseLeave: PropTypes.func.isRequired Flag to handle to show color selection ==> showIcon: PropTypes.bool.isRequired Flag to handle to show image instead of default color background ==> showImage: PropTypes.bool.isRequired

In the project directory, you can run:

npm run prepublish

This step will create a lib folder with all the required files, than can be used as local npm or can published on npm.

These files needed to be added in your index.html to support google fonts and Font Awesome

 <link href="https://fonts.googleapis.com/css?family=Ropa+Sans" rel="stylesheet"><br>
 <script src="https://use.fontawesome.com/e842c6d029.js"></script>