Fractal components library

Introduction

Fractal is a collection of assets, UI components and guidelines that are used to build products, apps, marketing contents and documentations.

This package hosts the web (React) implementation of the components.

The Figma project is the base reference for this design system and is used through the design tokens package. The documentation website is the core reference for using the design tokens and the design system in products (web applications, mobile applications, marketing content, documentations, ...).

The code of this design system is written in TypeScript and is targeted to be used in React applications.
TailwindCSS is used to style all the components exposed here.
Also, most of the components are based on Radix-UI.

Our documentation site is based on Storybook.

Installation

Simply run:

yarn add @snowball-tech/fractal

Or (if you use NPM):

npm install @snowball-tech/fractal

Usage

This design system exposes an ESM bundle. To import a component, use the following pattern:

import { Typography } from '@snowball-tech/fractal'

Development

If you want to contribute, update or edit the design system:

• First, setup the project

yarn setup

Or (if you use NPM):

npm run setup

• Start the development Storybook server:

yarn dev

Storybook will launch, and when it's ready, it will open a browser tab pointing to http://localhost:6006. If the tab does not open, check the terminal prompt for errors.

• Make your modifications (don't forget the tests).
• Test your updates
• Commit and push your changes and open a Pull Request.
• When your changes are approved and merged in the main branch, a new release

Useful Commands

• yarn run format-fix to format the code according to our formatting guidelines (using Prettier);
• yarn run lint-fix: to check that the code matches our coding guidelines and automatically fix what can be fixed (using ESLint);
• yarn run types-check: to check for TypeScript compilation errors;
• yarn run test: run all the unit tests;
• yarn run test-dev: run the tests for modified components and re-trigger runs everytime something is modified;
• yarn run build: compiles and bundle the design system;

TypeScript

See the dedicated CONVENTIONS.md and TOOLING.md documentations.

Linting & Formatting

See the dedicated CONVENTIONS.md and TOOLING.md documentations.

Dependencies

Always remember to add dependency if you really need it to avoid cluttering the packages and degrading the performance both in the developers and users side.

It is your duty as a member of the Snowball's engineering team to help mainting the dependencies up to date. This means that you are expected and should help reviewing, testing and merging dependencies updates PRs on a regular basis.

The best way to do so is to regularly check the Renovate dashboard and the list of Pull Requests, for example every morning at the beginning of your day.

Also, see the dedicated TOOLING.md documentation for more information.

Environment variables

See the dedicated TOOLING.md documentation.

Tooling

See the dedicated TOOLING.md documentation.

Contributing

See the dedicated CONTRIBUTING.md documentation.

Conventions

See the dedicated CONVENTIONS.md documentation.

Help and feedback

If you have any questions or feedback, feel free to reach out to us using this repository issues or discussions.

You can also use the internal #engineering Slack channel if you are a member of the Snowball tech team.