CRA reacy component

Commands:

$ yarn build

TODO

TODO

Logs

1. yarn -D rollup
2. yarn add -D @babel/cli @babel/core @babel/preset-env @babel/preset-react @rollup/plugin-babel
3. yarn add -D rollup-plugin-styles autoprefixer
4. yarn add @babel/runtime
5. yarn add -D @babel/plugin-transform-runtime rollup-plugin-sourcemaps
6. yarn add -D rollup-plugin-terser
7. touch rollup.config.js

import styles from "rollup-plugin-styles";
const autoprefixer = require('autoprefixer');
import { terser } from 'rollup-plugin-terser'
import babel from '@rollup/plugin-babel';

// the entry point for the library
const input = 'src/index.js'

// 
var MODE = [
  {
    fomart: 'cjs'
  },
  {
    fomart: 'esm'
  },
  {
    fomart: 'umd'
  }
]




var config = []


MODE.map((m) => {
    var conf = {
        input: input,
        output: {
            // then name of your package
            name: "react-awesome-buttons",
            file: `dist/index.${m.fomart}.js`,
            format: m.fomart,
            exports: "auto"
        },
        // this externelizes react to prevent rollup from compiling it
        external: ["react", /@babel\/runtime/],
        plugins: [
            // these are babel comfigurations
            babel({
                exclude: 'node_modules/**',
                plugins: ['@babel/transform-runtime'],
                babelHelpers: 'runtime'
            }),
            // this adds sourcemaps
            sourcemaps(),
            // this adds support for styles
            styles({
                postcss: {
                    plugins: [
                        autoprefixer()
                    ]
                }
            })
        ]
    }
    config.push(conf)
})

export default [
  ...config,
]

8. touch .babelrc

{
    "presets": [
        "@babel/preset-react",
        "@babel/preset-env"
    ]
}

9. Put react to peerDependencies
10. create .npmignore

RefS:

1. https://github.com/jim-junior/react-npm-library-template

Testing Points

1. check Camera Permission first time
2. Click on product one by one in third party web page and checked that will be add in widget stack
3. Product stack
   • switch between products
   • Close functionality
   • Mobile close functionality ( Long Pressed will open popover)
   • Slider should work in desktop with arrow icons
   • Share Functionality - pasted that url and check that product will be visble in widget
4. Session Storage
   • Add some product in stack
   • Refresh the page, again open the widget and product list should be same
5. Widget Close button should close the Widget
6. Green circle button will be open the widget popup
7. Widget popup should be draggable in desktop only
8. If Product stack is empty then message will be there in widget popup
9. All icon related to the widget popup should be displayed (should not be break)
10. Selected product should be in green color in product stack
11. Needs to verify design as well