@sistent/sistent v0.14.199
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
- 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 out more on the Layer5 community.
1 month ago