Jogogo Custom Components 🚀
(Mostly) Stateless React Components.
Getting Started
Installing
Install the package from NPM.
yarn add jogogo-components
Import the required component within your files.
import Checkbox from 'jogogo-components';
Also, import the required LESS within your styles.
`~jogogo-components/lib/Spinner/Spinner`;
Documenting Components
To document a component, use the JSDoc-style /** */
markup which is recognized by Storybooks.
- Above the interface properties, write some lines describing the porperty.
- Above the class, write a title or a short description of the class.
import * as React from 'react'; /** * Checkbox properties. */; /** * Form Checkbox. */Component<Props> { ; thisonChange = thisonChange; } : ReactReactNode return <input ="checkbox" = = = /> { thisprops; } ;
Also, make sure to include a story (*.stories.js
) to correctly expose the component (both for development and documentation.)
Developing
To start Storybooks, run yarn storybook
.
Publishing the package
To NPM
To publish the package, run yarn version
, and enter the correct version (see the documentation). After this suceeds, verify the version number is what you expect and merge a PR into master to publish the package. The package can be viewed here. The storybook can also be viewed here.
Pack locally (for testing)
Running yarn pack
will generate a .tgz file, which contains the library ready for installation.
You can install the local package by running
yarn add ~/path/to/this/repo/jogogo-components-v{version}.tgz.
Install locally (for testing)
Sometimes, testing & developing strictly within the context of the storybook gets hard. To test the package in another local codebase, run yarn build:lib && yarn add ~/path/to/this/repo
. Ensure that the changes to the package.json
and yarn.lock
don't get commited, as this will likely break the codebase you're testing on.