Ultraviolet Core

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.

Installation

Quick start

$ pnpm add @ultraviolet/ui @emotion/react @emotion/styled

Documentation

• Ultraviolet UI

• Ultraviolet Plus

• Ultraviolet Form

• Ultraviolet Themes

• Ultraviolet Icons

Development

Before any command, install dependencies running following command:

$ pnpm install

Storybook

Our 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 start

Storybook documentation will then be available on http://localhost:6006

Test

Unit

$ 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

Accessibility

$ pnpm run test:a11y # Will run all accessibility tests
$ pnpm run test:a11y src/components/Alert # Will run accessibility test of Alert component only

Lint

$ pnpm run lint
$ pnpm run lint:fix

Typecheck

Running 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 recursively

If you still want to use npx, you can run it from a package folder:

$ cd packages/ui
$ npx typecheck --noEmit

Build

$ pnpm run build
$ pnpm run build:profile # Will open a visual representation of the modules inside the compile package

Use a locally built package

You might want to test your local changes against a React application.

yalc is a tool aiming to simplify working with local npm packages by providing a different workflow than npm/pnpm link, hence avoiding most of their issues with module resolving.

$ pnpm install --global yalc # Make sure to have the yalc binary

Here 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 update

You can redo the same with @ultraviolet/form if you want to test it

⚠️ since 1.0.0.pre.51 (2021-04-23), yalc publish needs the --sig option to trigger webpack module actual update.

⚠️ yalc create a yalc.lock and updates the package.json in the target project. Make sure to not commit these changes

⚠️ if you are trying to yalc @ultraviolet/ui & @ultraviolet/form in your application and hope to see the change of @ultraviolet/ui into the component used by @ultraviolet/form you should be sure to not have any peerDeps of @ultraviolet/ui installed as it's will be resolve. If your are using pnpm and vite you can add pnpm.override: { "@ultraviolet/ui": "$@ultraviolet/ui" }. If this rfc is accepted this will solve our issue https://github.com/pnpm/rfcs/blob/main/text/0001-catalogs.md

---

Versioning

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.

Documentation

Checkout our documentation website.

Contributing

📝 You can participate in the development and start contributing to it.