Ultraviolet Core contains the core features of the Ultraviolet UI library. It is set of React library that can be used to build fast application.
- Ultraviolet UI: The main library that includes a set of components and utilities to build fast application.
- Ultraviolet Plus: An extension of UI with more complex components.
- Ultraviolet Form: A library to build forms with Ultraviolet UI components, it is using React Final Form under the hood.
- Ultraviolet Themes: A set of themes for the Ultraviolet UI library (default theme is included in
@ultraviolet/ui). - Ultraviolet Icons: A library that provides a set of icons to use with Ultraviolet UI.
$ pnpm add @ultraviolet/ui @emotion/react @emotion/styledBefore any command, install dependencies running following command:
$ pnpm installOur storybook includes @ultraviolet/ui, @ultraviolet/form and @ultraviolet/icons.
In order to start storybook without errors you will need to build the project once
(this is because @ultraviolet/form uses @ultraviolet/ui build to run).
$ pnpm build
$ pnpm run startStorybook documentation will then be available on http://localhost:6006
$ pnpm run test:unit # Will run all tests
$ pnpm run test:unit:update # Will update all snapshots
$ pnpm run test:unit:watch # Will watch tests and only rerun the one who are modified
$ pnpm run test:unit:coverage # Will generate a coverage report
$ pnpm run testunit::coverage --coverageReporters lcov && open coverage/lcov-report/index.html # Will generate an open an html code coverage report$ pnpm run test:a11y # Will run all accessibility tests
$ pnpm run test:a11y src/components/Alert # Will run accessibility test of Alert component only$ pnpm run lint
$ pnpm run lint:fixRunning npx typecheck --noEmit won't work at root of the project. To run type check for all packages you need to run the following command:
$ pnpm run typecheck # this is a package json script that will run typecheck for all packages recursivelyIf you still want to use npx, you can run it from a package folder:
$ cd packages/ui
$ npx typecheck --noEmit$ pnpm run build
$ pnpm run build:profile # Will open a visual representation of the modules inside the compile packageYou might want to test your local changes against a React application.
yalcis a tool aiming to simplify working with local npm packages by providing a different workflow thannpm/pnpm link, hence avoiding most of their issues with module resolving.
$ pnpm install --global yalc # Make sure to have the yalc binaryHere is an example for using @ultraviolet/ui as a local package:
$ pnpm run build && cd packages/ui && yalc publish
$ # Now it's ready to install in your project
$ cd ../project-something
$ yalc add @ultraviolet/ui
$ cd ../ultraviolet
$ # If you do some changes into your package
$ pnpm run build && yalc publish --push --sig # --push will automatically update the package on projects where it have been added, --sig updates the signature hash to trigger webpack updateYou can redo the same with @ultraviolet/form if you want to test it.
⚠️ since 1.0.0.pre.51 (2021-04-23),yalc publishneeds the--sigoption to trigger webpack module actual update.
⚠️ yalccreate ayalc.lockand updates thepackage.jsonin the target project. Make sure to not commit these changes
We are using Changeset to manage our versioning.
Once your modifications are ready to be released, you can run pnpm run changeset to create a new changeset.
It will ask you to describe your changes and will create a new changeset file in the changesets folder.
Checkout our documentation website.
📝 You can participate in the development and start contributing to it.
Thanks to Chromatic for providing the visual testing platform that helps us review UI changes and catch visual regressions.