A React component development environment and style guide
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.
See the components in action: Component documentation
Make sure you have at least Node.js v6:
$ node -v
v6.14.3
$ yarn add spunky-ui-react
$ npm install spunky-ui-react
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
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. |
-
Create new directory for the component under
src/components
- Example:
src/components/Label
- Example:
-
Create the new component in that directory
- Example:
src/components/Label/Label.js
- Example:
-
Create an
index.js
file in the same directory- Example:
src/components/Label/index.js
export { default } from './Label';
- Example:
-
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
- Example:
-
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} />; }
- Example:
-
Update the
index.js
file to export the new componentexport {default as PasswordInput} from './PasswordInput';
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
$ cd lib/
$ yarn publish
$ cd lib/
$ npm publish
$ yarn deploy:docs
$ npm deploy:docs
Here's a list of current known issues.
Spunky UI React is licensed under the MIT License