Boilerplate to create a library of React components using TypeScript and TypeStyle.
It provides the follwing features:
- Hot realoading through webpack
- .d.ts files autogeneration thanks to the ts compiler
- Easy and fast export/import procedure
- Unit testing and coverage computation with Jest and Enzyme
- Integration testing with Selenium
- Code quality evaluation through TSLint
npm i
npm start
- Tests without coverage:
npm t - Tests with coverage:
npm run coverage - Lint:
tslint --project .(from the project root)
First of all execute the following command:
npm run build
This will run all tests and the linter. After that, if no test fails and there isn't any lint issue, the library is built inside lib (note that the compiler will generate all .d.ts files). Finally, src/assets/* and src/styles.css are copied in lib.
Now, in order to update the library, it suffices to push the lib folder.
In the project where you want to import the library run:
npm i git+<clone link> --save
Then you can import a given component in the following ways:
import {MyComponent} from "<lib_name>";
import MyComponent from "<lib_name>/lib/my_component";
The first syntax will, as a side effect, import the whole library. While using the second one, only the component is imported.
See the demo for some basical example.
Each component comes with its own folder. Make sure to add an index.ts file (where you insert all export declarations) inside this folder. Also, remember to add the export declarations of your new component in the index.ts file at the root of src.
Export declarations enable you to import your components as described above.
MIT licensed, details in LICENSE.md.
Lucio Romerio - lromerio