moves-components v1.1.2

How to install in your app

yarn add moves-components

Install the package to your app. We host our package publically with npm, and can be found here.

Sample Usaage

Ant Deisgn uses less for styling. Setup less loader with Webpack or with craco. Instructions can be found here.

import "moves-components/style.less"
import Moves from "moves-components"
ReactDom.render(<Moves.Button>Say Hi<Moves.Button/>)

Local development

yarn dev

To transpile the typescript to es5 javascript and save to dist folder. Watch for changes every 10 seconds on the src folder and rebuild. Use the yarn dev:noTests command if you want to skip tests.

yarn link:all

Create a symlink with the created dist folder and react things to your global npm node_modules folder.

Go to host app root folder && yarn link "moves-components"

Run this command in your host app (eg: moves-web) to link the node_modules/moves-components to the symlink in global npm.

make changes and see them get applied to your host app

When we make changes in the package the host app should also recompile and immediately apply your changes.

yarn unlink:all

Once you've completed your development, Unlink all the symlinks using this command.

Publish to npm

Once your changes have been merged we are ready to start the publish process to npm.

yarn version

Enter new version of the app.

git push --tag

Tag your changes in git

yarn publish:dist

This command will rebuild dist and push your dist folder to npm. Now you can run yarn add moves-components to install the latest version.

Debuging

If you're ever unsure about things being linked or not rm -rf node_modules and rm -rf dist in this repo and see if your host app still works.

For other issues reach out to the Moves Web Team via slack on #frontend-moves channel.

Storybook

yarn storybook to start storybook. It will open a browser tab to http://localhost:6006/.

When active, hot reloading is enabled so no need to manually refresh when making changes to your stories.