Ultraviolet Core

Welcome to the Ultraviolet Core repository! This is the main repository for the Ultraviolet project, which is a set of packages and tools designed to help you build fast and efficient applications.

• Ultraviolet UI: The main UI 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.
• Ultraviolet Illustrations: A library that provides of illustrations.
• Ultraviolet Fonts: A library that provides a set of fonts to use with Ultraviolet UI.

Installation

Quick start

pnpm add @ultraviolet/ui @ultraviolet/fonts

import { ThemeProvider } from '@ultraviolet/themes'
import { Button, normalize, theme } from '@ultraviolet/ui'
import '@ultraviolet/ui/styles'
import '@ultraviolet/fonts/fonts.css'
import '@ultraviolet/themes/global' // for normalized css

const App = () => (
  <ThemeProvider>
    <Button onClick={() => console.log('clicked')}>Click Me</Button>
  </ThemeProvider>
)

If you use typescript please read the full documentation for have correct types.

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 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
pnpm run e2e # Will run all e2e tests

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 will need to run it inside the package you want to check:

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

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

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

:warning: 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.

Read more about it here.

Documentation

Checkout our documentation website.

Contributing

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