Spunky-ui-react NPM

About

Created from an ejected create-react-app as a development environment for React components and style guide. It lists the component propTypes including the name, type, required, default, description, and component examples with code. All of the documentation is generated directly from the component code.

Docs

See the components in action: Component documentation

Getting Started

Make sure you have at least Node.js v6:

$ node -v

v6.14.3

Install via Yarn

$ yarn add spunky-ui-react

Install via NPM

$ npm install spunky-ui-react

Notes For Development Testing, and Deployments

Follow these steps to get the project up and running:

$ git clone https://github.com/davefud/spunky-ui-react.git
$ cd spunky-ui-react/
$ npm install
$ npm run start

Main Scripts

While developing, you will rely mostly on npm start
This is not the full list of scripts, run yarn run to see all scripts.

script	Description
`start`	Runs the script for metadata generation and places it in watch mode and starts the app.
`build:lib`	Runs the unit tests and builds the production resources into the lib directory.
`test`	Runs unit tests using Jest and Enzyme.
`deploy:docs`	Bumps the package patch version, runs the build script and publishes everything from the build directory to the gh-pages branch on Github.
`test-coverage`	Runs the Jest code coverage that is collected and reported in the output.

Creating New Components

Create new directory for the component under src/components
- Example: src/components/Label
Create the new component in that directory
- Example: src/components/Label/Label.js
Create an index.js file in the same directory
- Example: src/components/Label/index.js
```
export { default } from './Label';
```

Annotate above the function or React Class with /** Add message here */

/** Label with required field display, htmlFor, and block styling */
function Label({htmlFor, label, required}) {
  return (
    <label style={{display: 'block'}} htmlFor={htmlFor}>
      {label} { required && <span style={{color: 'red'}}> *</span> }
    </label>
  )
}

Annotate each propType

Label.propTypes = {
   /** HTML ID for associated input */
   htmlFor: PropTypes.string.isRequired,

   /** Label text */
   label: PropTypes.string.isRequired,

   /** Display asterisk after label if true */
   required: PropTypes.bool
};

Label.defaultProps = {
  required: false
}

No need to annotate defaultProps these will be picked up automatically if they are defined.

Create an new directory for the example using the component under src/docs/examples
- Example: src/docs/examples/Label

Create one or more examples using the component and annotate the function

Example: src/docs/examples/Label/ExampleRequired.js

/** Label for a required input */
export default function ExampleRequired() {
   return <Label htmlFor='test'
   label='Required Label' 
   required={true} />;
}

Update the index.js file to export the new component

export {default as PasswordInput} from './PasswordInput';

Testing

TODO: Our convention for writing unit tests in same directory as component or function to test, run unit tests, run test coverage, etc. Also, explain Jest snapshot testing