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.

--> Visit https://layer5.io/projects/sistent

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

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"

Build your local Sistent fork

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

make build

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`

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.

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

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.

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/sistent@0.14.11 -> ./../../../../<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 your MeshMate

MeshMates are experienced Layer5 community members, who will help you learn your way around, discover live projects and expand your community network. Become a Meshtee today!

Find out more on the Layer5 community.

✔️ Join any or all of the weekly meetings on community calendar.
✔️ Watch community meeting recordings.
✔️ Access the Community Drive by completing a community Member Form.
✔️ Discuss in the Community Forum.
✔️Explore more in the Community Handbook.

Not sure where to start? Grab an open issue with the help-wanted label.

License

M-DEV-1/sistent

ErrorLooks like something went wrong!

About

Resources

License

Code of conduct

Security policy

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages