generator-poi

PoiJS - Yeoman generator

This is a yo generator for building react frontend components. Install it, run it and start building components!

For information on the project it generates, see About This Project.

How to use

Make sure you are using npm@>=5.2.0

npm install -g yo generator-poi
mkdir co-my-component && cd co-my-component
yo poi

yarn failing?

Then answer the questions truthfully (it'll know if you're lying)

Update your boilerplate

Repositories built with generator-poi can be upgraded to the latest version via CLI using the NPM package update-yeoman-generator. 🚀

Make sure you have npm@>=5.2.0:

npm install -g npm@latest

After that, install NPM package update-yeoman-generator globally

npm install -g update-yeoman-generator

Inside the existing boilerplate generated repository run this command:

update-yeoman-generator --generator willmendesneto/generator-poi \
  --github-token <your-github-token> \
  --ejs-open 0_- \
  --ejs-close -_0

update-yeoman-generator command will apply the changes from the latest version of boilerplate as a git style merge - so you'll still need to manually fix conflicts. If you want to understand the reasons why you should pass specific parameters, please check update-yeoman-generator README.md with all the options.

Editing the generator

To create a template file whos filename is replaced by one of the user-entered variables, use the delimiters _- and -_ instead of the ejs style <% and %> (< and > are not allowed on Windows).

Code architecture

Here is a selection of the interesting parts:

.
├── .nvmrc
├── .editorconfig
├── CHANGELOG.md
├── src
│   ├── js
│   |   ├── components
│   │   │   ├── component-name.js
│   ├── scss
│   │   └── styles.scss
│   ├── export.js
└── test
    └── *.js

CHANGELOG.md

The purpose of a commit is to document one atomic step in the process by which the code evolves from one state to another. The purpose of a change log is to document the noteworthy differences between these states.

As is the difference between good comments and the code itself, so is the difference between a change log and the commit log: one describes the why, the other the how.

• keepachangelog.com

Keep a log of the significant changes in this file under the Unreleased heading, and tooling will ensure it's versioned.

src/js/components/component-name.js

This is the main component of this module. If your module exports multiple components, edit a copy of this file, and add that export to export.js.

src/js/export.js

This is the export of the module. Usually is a simple import/export to expose any components this module may contain.

src/scss/

Contains all the style info for this component.

styles.scss is the entry point for the main stylesheet associated with this component. This entry point is the equivalent to both the export.js and index.js but for styles, rolled into one (due to the way sass works).

Styling is split up into helpers, and logical groupings, where each grouping has their own structure, and state:

└── scss
    ├── styles.scss
    ├── _variables.scss (or _mixins.scss or other "helpers")
    ├── some-grouping
    │   ├── _some-grouping-structure.scss
    │   └── _some-grouping-state.scss
    └── another-group
        ├── _another-group-structure.scss
        └── _another-group-state.scss

The groupings follow the naming pattern:

-structure.scss: The BEM named styles that setup the base visuals for the component. -state.scss: For classes that are used when states change within the component (eg; .is-selected, .is-active, etc).

The helpers are the things which don't really fall into the groupings.

test/*.js

Start writing your tests here. You can make multiple files in this folder, and they will all be executed.

yarn failing?

Make sure you're on the latest version of yarn.

You may be seeing a 404 error, something along the lines of:

error An unexpected error occurred: "https://registry.yarnpkg.com/@{ORG}/{PACKAGE}/-/{PACKAGE}-1.0.0.tgz: Request failed \"404 Not Found\"".

Try out these steps to fix things:

npm logout
yarn logout

mv ~/.npmrc ~/.npmrc.bak
mv ~/.yarnrc ~/.yarnrc.bak

npm login
yarn login

Code Coverage

The nyc command-line-client for Istanbul has been setup. It will run by default while running tests but minimum coverage is not enforced (as it defaults to 0). You can also see full html coverage reports by running:

yarn run coverage
or
npm run coverage

To enforce coverage on the component, edit the nyc section in the package.json file and include the minimum lines, statements, functions and branches values. See Configuring nyc for more info.

Publishing the package

This project is using np as publisher helper. For more information, please check np documentation

Changes

See CHANGELOG.md.

Author

Wilson Mendes (willmendesneto)

• https://plus.google.com/+WilsonMendes
• https://twitter.com/willmendesneto
• http://github.com/willmendesneto

Changelog

[3.1.1][] - 2018-10-22

Added

• Adding NPM script to check library bundlesize