npm package: @sistent/sistent
Description: Reusable React Components and SVG Icons library
Latest version: 0.18.4

# Sistent Design System Sistent

The Sistent Design System provides the open source building blocks to design and implement consistent, accessible, and delightful product experiences. Visit the <a href="https://layer5.io/projects/sistent">project website</a> for more information.

## 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`

<div>&nbsp;</div>

### 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
```

### Continuous Integration

#### Automated Integration Testing with Meshery UI

Sistent includes automated integration testing in CI to ensure changes don't break downstream applications. When you create a pull request, the CI automatically:

1. **Builds Sistent** with your changes
2. **Tests against Meshery UI** by installing your Sistent build into Meshery UI
3. **Runs Meshery UI's build and tests** to verify compatibility
4. **Reports results** in the PR checks

This ensures that your Sistent changes are validated against real-world usage in Meshery UI before merging. The workflow runs automatically on all pull requests, providing fast feedback on integration issues.

### 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:

```
"@sistent/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 @sistent/sistent
```

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

```
npm install @sistent/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 @sistent/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:
# ├── @sistent/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/@sistent/sistent

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

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

```
npm unlink @sistent/sistent
npm install @sistent/sistent
```

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

<br/>

## Join the Layer5 community!

<a name="contributing"></a><a name="community"></a>
Our projects are community-built and welcome collaboration. 👍 Be sure to see the <a href="https://layer5.io/community/newcomers">Layer5 Community Welcome Guide</a> for a tour of resources available to you and jump into our <a href="http://slack.layer5.io">Slack</a>!

<p style="clear:both;">
<a href ="https://layer5.io/community/meshmates"><img alt="MeshMates" src=".github/readme/images/layer5-community-sign.png" style="margin-right:10px; margin-bottom:15px;" width="28%" align="left"/></a>
<h3>Find your MeshMate</h3>

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

Find out more on the <a href="https://layer5.io/community">Layer5 community</a>. <br />
<br /><br /><br /><br />

</p>
<div>&nbsp;</div>

<a href="https://slack.meshery.io">

<picture align="right">
  <source media="(prefers-color-scheme: dark)" srcset=".github/readme/images//slack-dark-128.png"  width="110px" align="right" style="margin-left:10px;margin-top:10px;">
  <source media="(prefers-color-scheme: light)" srcset=".github/readme/images//slack-128.png" width="110px" align="right" style="margin-left:10px;padding-top:5px;">
  <img alt="Shows an illustrated light mode meshery logo in light color mode and a dark mode meshery logo dark color mode." src=".github/readme/images//slack-128.png" width="110px" align="right" style="margin-left:10px;padding-top:13px;">
</picture>
</a>

<a href="https://meshery.io/community"><img alt="Layer5 Community" src=".github/readme/images//community.svg" style="margin-right:8px;padding-top:5px;" width="140px" align="left" /></a>

<p>
✔️ <em><strong>Join</strong></em> any or all of the weekly meetings on <a href="https://meet.layer5.io">community calendar</a>.<br />
✔️ <em><strong>Watch</strong></em> community <a href="https://www.youtube.com/playlist?list=PL3A-A6hPO2IMPPqVjuzgqNU5xwnFFn3n0">meeting recordings</a>.<br />
✔️ <em><strong>Access</strong></em> the Community Drive by completing a community <a href="https://layer5.io/newcomer">Member Form</a>.<br />
✔️ <em><strong>Discuss</strong></em> in the <a href="https://discuss.layer5.io">Community Forum</a>.<br />
✔️<em><strong>Explore more</strong></em> in the <a href="https://layer5.io/community/handbook">Community Handbook</a>.<br />
</p>
<p align="center">
<i>Not sure where to start?</i> Grab an open issue with the <a href="https://github.com/issues?q=is%3Aopen+is%3Aissue+archived%3Afalse+(org%3Alayer5io+OR+org%3Ameshery+OR+org%3Alayer5labs+OR+org%3Aservice-mesh-performance+OR+org%3Aservice-mesh-patterns+OR+org%3Ameshery-extensions)+label%3A%22help+wanted%22">help-wanted label</a>.</p>