@onextech/react-semantic-booster

nod

NodeJS module generator/boilerplate.

Features

• Babel - Write next generation JavaScript today;
• Jest - JavaScript testing framework used by Facebook;
• ESLint - Make sure you are writing a quality code;
• Flow - A static type checker for JavaScript used heavily within Facebook;
• Travis CI - Automate tests and linting for every push or pull request;
• Documentation - A documentation system so good, you'll actually write documentation.

Install

The easiest way to use nod is through the Yeoman Generator.

$ npm install -g yo generator-nod
$ yo nod

If you don't want to use the generator, you can also download or git clone this repo

$ git clone https://github.com/diegohaz/nod my-module
$ cd my-module
$ rm -rf .git
$ npm install # or yarn

Just make sure to edit package.json, README.md and LICENSE files accordingly with your module's info.

Commands

$ npm test # run tests with Jest
$ npm run coverage # run tests with coverage and open it on browser
$ npm run lint # lint code
$ npm run docs # generate docs
$ npm run build # generate docs and transpile code
$ npm run watch # watch code changes and run scripts automatically
$ npm run patch # bump patch version and publish to npm e.g. 0.0.1
$ npm run minor # bump minor version and publish to npm e.g. 0.1.0
$ npm run major # bump major version and publish to npm e.g. 1.0.0

Built with Nod

You can use those modules as a reference when creating yours. If you have built something with Nod, send a PR (try to write a helpful description for Nod users).

• styled-tools - Module using flow-typed, targeted to browser.
• styled-theme - Module with gh-pages, targeted to browser.
• webpack-blocks-happypack - Uses Jest snapshots.
• webpack-blocks-split-vendor - Has peer dependencies.

More examples

API

AngularSvg

Create an angular block

getCrumbSlug

Set custom routes on certain params

Parameters

• crumb string
• index number
• rules {} set of keys (match.params path) and values (route to go to)

Returns string

getEmSizeScale

Calculate scale based on y = ax2 + bx + c

Parameters

• size number The x value

Returns number The y value

autoPlay

sayHello

This function says hello.

Parameters

• name string Some name to say hello for.

Returns string The hello.

getCustomClassName

Render the class names based on the custom props selected

Parameters

• customProps {prop: className} a reference list of custom props and classnames
• allProps {className: {string}} the user-defined props

Returns string the className string to render onto the DOM

subtractObject

Subtract object from another object (non-recursive)

Parameters

• subtrahend The part being taken away
• minuend The part you start with

Returns {} The part that is left after subtraction

setStyledSpacer

A styled component function to set padding top/bottom of an element from a mulitplier

Parameters

• spacer
• baseEm Number The base em size to scale the spacer (optional, default 5)

Returns string the css to apply

setCustomProps

Set custom props

Parameters

• props {}
• customProps {}
• defaultProps {}

Returns {className: string}

mergeClassNames

Merge prev class names with new class names to prevent overwrite of className prop

Parameters

• newClassName ([] | string)
• prevClassName ([] | null)

Returns string

mediaCssFactory

Iterate through the mediaCssBreakpoints and create a media template

Parameters

• type string

Returns {}

License

MIT © Diego Haz