blog.md

First package

Let's init first simple package which will be just Input with optional label for it:

https://gist.github.com/7c1d340250e160415c5c142298ca816b

and add react and styled-components as peerDependencies:

https://gist.github.com/2859b2b1a760a30b0bfec8717394abca

Development

Let's create simple input with optional label:

https://gist.github.com/a0ba736e630ba85747729bf7ecc74eab

Storybook

storybook is configured, so it's time to create first story and test first package as well as storybook and typescript integration. Just create Input.story.tsx inside input package.

https://gist.github.com/ff5a6282bf2dc6355069c89ac28636cf

and run yarn storybook. When the build process is finished, storybook will be accessible under http://localhost:6006

Testing

jest is configured and ready to be used. Let's create simple snapshot tests for our package:

https://gist.github.com/7862b5a07600284ce0b19a7555a8d070

All tests could be run with simple command:

https://gist.github.com/0c059bf3db6dd16e22c0a0e7587cac72

Now we have a chance to check how our integration of jest and jest-styled-components works. Just open created snapshot and check that classnames are replaced with c0, c1, etc:

https://gist.github.com/18aad8c9f21473b3733f83ca574c059f

Build

It's time to build our package. Simply run

https://gist.github.com/f56a5e448808f88e9da91fec4f277e9b

and we should have packages/input/dist folder with all compiled files. The most important one is packages/input/dist/Input.js which has:

https://gist.github.com/b05392566e6a177d551de07924bd5808

Publish

It's time to publish our first package, just hit yarn release and answer Yes for publishing question. The result should be like:

https://gist.github.com/ad5d68cef215b44a687769dc29a30785

Lerna says that package was published successfully. Now we could check it with yarn info or through web interface for our local npm registry (http://localhost:4873):

https://gist.github.com/158571c11ca5b548343292bcab4b465f

Moreover, lerna should create proper tags in our repository associated with released packages and versions:

https://gist.github.com/b283d36dab3222d1e5db08d4186cc189

Last, but not least, let's check that proper Changelog was created for our package:

https://gist.github.com/ede479a0a77998aa88d065fef4287f5e

Now we have first package successfully released, what's left? Second package which is dependant on our @taxi/input package is left. Integration with lerna would stay the same, simple as it is, however, it would requires some magic for making storybook, jest and tslint works with dependent packages and proper modules resolutions without rebuilding them all the time. Plus, as a bonus we'll generate types declarations for our packages and include them as a part of final build.

More details will be in the next article.