Layer5 Design System Sistent

The Sistent Design System from Layer5 provides the open source building blocks to design and implement consistent, accessible, and delightful product experiences.

Using Sistent

Visit the Sistent website for further instructions.

Brand

• Layer5 Brand Guide (PDF)
• Layer5 Logos (more assets available in shared Community drive).

Components and Packages

• Design System components in React.js

Contributing to Sistent

Prerequisites

Before you begin, ensure you have the following installed on your system:

• Node.js

How to get started

Make sure you have npm on node@16 and above. The CI workflows checks for in node@16, node@18 and node@20

Installation

To set up the project, run the following command to install dependencies:

make setup

To test the sistent component locally, you can run:

make build

If you wish to build in watch mode:

make build-watch

To check if your code meets the formatting standards, you can run:

make format-check

To run Eslint:

make lint

To run tests:

make tests

Using your local Sistent Fork in a Project

Method 1: Manual Installation

1. Install your local Sistent package in the project

npm install <path-to-sistent-on-local-machine>

Example:

# relative path
npm install ../../sistent

# absolute path
npm install /home/five/code/sistent

This will update your Sistent dependency to:

"@layer5/sistent" : "file:../../sistent"

2. Build your local Sistent fork

After making changes to your fork, run this command in your local Sistent package.

make build

3. Run the build command in the project where your local Sistent fork is installed.

# example, Meshery UI
make ui-build

Now, your project should reflect changes from your local Sistent fork.

If you want to remove the local Sistent fork from your project, run:

npm uninstall @layer5/sistent

This will remove the local Sistent package from your project. You will have to reinstall the official package using this command:

npm install @layer5/sistent

Method 2: Using npm link

1. Create a link of your local Sistent fork

cd <path-to-sistent-on-local-machine>

npm link

This creates a global symlink which points to the local Sistent fork.

2. Link the local Sistent fork to your project

npm link @layer5/sistent

3.Build your local Sistent fork

After making changes to your fork, run this command in your local Sistent package.

make build

4. Run the build command in the project where your local Sistent fork is installed.

# example, Meshery UI
make ui-build

Now, your project should reflect changes from your local Sistent fork.

5. Verify that your local Sistent fork has been correctly linked.

To verify that the correct link has been created, run this command:

npm ls -g

# Expected output:
# ├── @layer5/[email protected] -> ./../../../../<path-to-local-sistent-fork>

To verify that the created link is correctly used in your project, run this command in the directory where you linked the Sistent fork:

ls -l node_modules/@layer5/sistent

# Expected output:
# node_modules/@layer5/sistent -> ../../../../../sistent

To revert back to the official package, first unlink the package, then install the official package using the following commands:

npm unlink @layer5/sistent
npm install @layer5/sistent

[!NOTE] Avoid using type any in your code. Always specify explicit types to ensure type safety and maintainability.

Join the Layer5 community!

Our projects are community-built and welcome collaboration. 👍 Be sure to see the Layer5 Community Welcome Guide for a tour of resources available to you and jump into our Slack!

Find out more on the Layer5 community.