Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/scaleway/ultraviolet

A monorepo Design System with React components.
https://github.com/scaleway/ultraviolet

form react react-hook-form reakit scaleway styled-components typescript ui ui-components ui-library ultraviolet

Last synced: 7 days ago
JSON representation

A monorepo Design System with React components.

Host: GitHub
URL: https://github.com/scaleway/ultraviolet
Owner: scaleway
License: apache-2.0
Created: 2020-12-10T15:09:06.000Z (about 4 years ago)
Default Branch: main
Last Pushed: 2025-01-15T20:24:42.000Z (17 days ago)
Last Synced: 2025-01-16T01:38:11.894Z (16 days ago)
Topics: form, react, react-hook-form, reakit, scaleway, styled-components, typescript, ui, ui-components, ui-library, ultraviolet
Language: TypeScript
Homepage: https://ultraviolet.scaleway.com
Size: 87.5 MB
Stars: 106
Watchers: 14
Forks: 23
Open Issues: 17
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

![](.storybook/assets/logo-dark.svg#gh-dark-mode-only)
![](.storybook/assets/logo-light.svg#gh-light-mode-only)

![Codecov](https://img.shields.io/codecov/c/github/scaleway/ultraviolet)
![GitHub last commit](https://img.shields.io/github/last-commit/scaleway/ultraviolet)
![GitHub closed issues](https://img.shields.io/github/issues-closed/scaleway/ultraviolet)
![GitHub contributors](https://img.shields.io/github/contributors/scaleway/ultraviolet)
![GitHub commit activity](https://img.shields.io/github/commit-activity/m/scaleway/ultraviolet)
![GitHub](https://img.shields.io/github/license/scaleway/ultraviolet)

# 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](https://github.com/scaleway/ultraviolet/tree/main/packages/ui): The main library that includes a set of components and utilities to build fast application.
- [Ultraviolet Plus](https://github.com/scaleway/ultraviolet/tree/main/packages/plus): An extension of UI with more complex components.
- [Ultraviolet Form](https://github.com/scaleway/ultraviolet/tree/main/packages/form): A library to build forms with Ultraviolet UI components, it is using React Final Form under the hood.
- [Ultraviolet Themes](https://github.com/scaleway/ultraviolet/tree/main/packages/themes): A set of themes for the Ultraviolet UI library (default theme is included in `@ultraviolet/ui`).
- [Ultraviolet Icons](https://github.com/scaleway/ultraviolet/tree/main/packages/icons): A library that provides a set of icons to use with Ultraviolet UI.

## Installation

### Quick start

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

### Documentation

- #### [Ultraviolet UI](https://github.com/scaleway/ultraviolet/tree/main/packages/ui)
- #### [Ultraviolet Plus](https://github.com/scaleway/ultraviolet/tree/main/packages/plus)
- #### [Ultraviolet Form](https://github.com/scaleway/ultraviolet/tree/main/packages/form)
- #### [Ultraviolet Themes](https://github.com/scaleway/ultraviolet/tree/main/packages/themes)
- #### [Ultraviolet Icons](https://github.com/scaleway/ultraviolet/tree/main/packages/icons)

## Development

Before any command, install dependencies running following command:

```sh
$ 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).

```sh
$ pnpm build
$ pnpm run start
```

Storybook documentation will then be available on [http://localhost:6006](http://localhost:6006)

### Test

#### Unit

```sh
$ 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

```sh
$ 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

```sh
$ 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:

```sh
$ 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:

```sh
$ cd packages/ui
$ npx typecheck --noEmit
```

### Build

```sh
$ 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`](https://github.com/whitecolor/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.

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

Here is an example for using `@ultraviolet/ui` as a local package:

```bash
$ 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)](https://github.com/wclr/yalc/blob/master/CHANGELOG.md#100pre51-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](https://github.com/changesets/changesets) 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](https://storybook.ultraviolet.scaleway.com/).

## Contributing

📝 You can participate in the development and [start contributing](/CONTRIBUTING.md) to it.