Kenshoo-shared NPM

React Npm packages for kenshoo shared compoenents

This package contains a list of commont compoenents that are used accross kenshoo projects that match kenshoo's design. https://www.npmjs.com/package/kenshoo-shared

How to use this package in a javascript (based npm) project

To install the kenshoo-shared library type:

npm install kenshoo-shared --save

Build

make sure you have node, npm & yarn installed
clone this repo & cd to the directory type the commands:

yarn
webpack

Publish

In order to publish a new version need to update the "version" in package.json, commit it and run:

npm publish .

It will run webpack and publishing output to NPM under the name 'kenshoo-shared'. It is public for all to use.

Viewing components list

We use storybook to document our components. https://getstorybook.io/docs/react-storybook/basics/introduction

If not already installed on your computer, need to install storybook:

npm i -g getstorybook

Then to start run:

npm run storybook

Config & Helpfull Links

webpack library config
https://webpack.github.io/docs/library-and-externals.html

Publishing to npm https://evanhahn.com/make-an-npm-baby/ http://chadly.net/2015/04/publishing-react-to-npm/

Add New A Component

Creating new component and consuming it

create a new component under the /components folder - say mycomp.js
define a class - say MyComp - and export it: export { MyComp }
in index.js - import the component: 'import { MyComp as myComp } from '.../mycomp';
then export it: export const MyComp = myComp;
this export will be the interface for all other s/w packages that depends on this package via npm
import the package from other package: npm install --save kenshoo/react-shared
import the new component: import { MyComp } from 'kenshoo-shared';

Technical Considerations

Consider implementing the component on top of the react-toolbox library. Example implementation is our Button class. We did this in order to get:
-- Easy theming procedure by utilizing the theme prop of the library (see example here button.js)
-- Free implementations of many props created by the library. Check our Button props. For example the href and the className props were inherited from the library and exposed thru our Button class.
-- react-toolbox is a Google Material implementation - therefore we get free behaviours like the ripple and the round button (which we exposed as CircleButton).

List of Components

Icons Support

Note that if you need to use components with icons support you will need to import via your index.html one or two font files.

For icomoon include this link in index.html (with the latest version in the url)

<link rel="stylesheet" href="https://cdn.kenshoo.com/resources/fonts/icomoon/latest/icomoon.css">

For Fontawasome include this link in index.html

####Updating Icomoon Font Files

Under the kenshoo-cdn bucket:

Create new folder with the version under kenshoo-cdn/resources/fonts/icomoon
The .css file is sometimes named styles.css - rename it to icomoon.css.
copy 6 files - icomoon.css / .eot / .svg / .ttf / . woff / . woff2to - to both the /latest and the / folder.
copy "icon map 1.xx.pdf" too

####Updating FontAwasome Font Files Refer to FontAwasome's website

####Consuming fonts from the library

FontAwesome Refer to the list of icons at the FontAwasome's website Import the function getFontAwesomeClass(icon) The icon parameter is the name as specified in the above link without hyphens and in lowercase. Example: to get the camera-retro icon call getFontAwesomeClass(cameraretro)

IcoMoon Import the function getIcoMoonClass(icon) The icon parameter is the name as specified in style guide without hyphens, spaces and in lowercase. Example: to get the All Files icon call getFontAwesomeClass(allfiles)

Being Font-Family Agnostic One can also consume fonts without using a font-family-specific function, by calling getIconClass. Pass it the name of the icon and it will lookup first in the IcoMoon repository and then in FontAwesome's.