[Sistent] Missing instructions related to the NPM packages and their use

[leecalcote]

Current Behavior

Consumers (users) of the Sistent components are not offered instructions on where the NPM packages are or how to incorporate their use.

https://layer5.io/projects/sistent/about

---

Contributor Resources and Handbook

The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.

• 📚 See contributing instructions.

• 🎨 Wireframes and designs for Layer5 site in Figma (open invite)

• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack.

Join the Layer5 Community by submitting your community member form.

[KunyueXing]

Hi, I'm interested in this issue. Could you please assign this to me?

[leecalcote]

Excellent, @KunyueXing. Sounds great.

Here is a recent description and details that will help - https://discuss.layer5.io/t/what-exactly-is-this-sistent-design-system-project/4934

[leecalcote]

@lakshz FYI

[KunyueXing]

@leecalcote Thanks for the reference.

I'm starting working on this and will keep you updated.

[KunyueXing]

Hi, Lee @leecalcote . I found this website - https://www.npmjs.com/package/@layer5/sistent?activeTab=readme

Is this the place where the Sistent's NPM packages are?

[leecalcote]

Yes.

Lakshay, please assist as needed.

[KunyueXing]

Some updates.

Since I'm completely new to this community and front-end development, here's some homework that I did:

• What is NPM?
• What is Sistent?

From my understanding, Sistent uses MUI v5 components, so I researched on how to incorporate the NPM packages of MUI v5, hoping it would give me some insights on Sistent because I think they may have some similarities. Here's what I found:

• NPM registry of MUI v5 (https://www.npmjs.com/package/@mui/material)
• Installation guide of MUI v5 (https://v5-0-6.mui.com/getting-started/installation/)
• NPM registry of Sistent (https://www.npmjs.com/package/@layer5/sistent?activeTab=readme)

From the NPM registry of Sistent, I found this command to install the package.

> npm i @layer5/sistent

@leecalcote and @lakshz, about this task, specifically "instructions on where the NPM packages are or how to incorporate their use", could you please provide some clarification? Is it about installation of Sistent, which is the NPM command above?

[lakshz]

@KunyueXing You are somewhat in the right direction, I believe. The command npm i @layer5/sistent installs the sistent package in the code. However, the layer5/layer5 codebase already has this package installed.

Your task is to write instructions to allow other contributors to use this package. Starting from installing the package to importing its components. The instructions would be something like this:

1. Run npm i @layer5/sistent
2. import {SistentThemeProvider} from "@layer5/sistent" This is a wrapper component that imports the Sistent Theme.
3. Import component and put them inside SistentThemeProvider. For example,

 <SistentThemeProvider>
       <Button variant="contained">Filled</Button>
  </SistentThemeProvider>

Above is just an overview of instructions to help you. The actual instructions can be more detailed and better.

PS: You can look src/sections/Projects/Sistent/components/button/code.js file, to see how sistent components are being imported and used.

[KunyueXing]

@lakshz Thank you for all the details! I'll keep investigating.

[vishalvivekm]

@lakshz Thank you for all the details! I'll keep investigating.

@KunyueXing,
Monday's websites meeting is a great place to talk about your progress so far, get feedback and any help, if required.
Let's discuss this in next Website call [Monday 29th, 7 AM CT].
Meeting calender: https://meet.layer5.io/
Meeting minutes: https://docs.google.com/document/d/1XczAHXVe2FIWPqiF57ospJ43zw5cZQ7ui8mn39v5EvA/edit#heading=h.69qskjv558bk

[KunyueXing]

Here's my updates,

I used Button as an example to learn about importing and using a component from Sistent. As @lakshz mentioned, src/sections/Projects/Sistent/components/button/code.js is a good reference. After reading through the document, I’m curious about where you learn the usages of a certain component, such as Button. I guess the source code may give me some information, so I searched for all the files in Sistent repo that have ‘button’ in the file name:

• sistent/src/base/Button/Button.tsx
• sistent/src/base/Button/index.tsx
• sistent/src/theme/components/button.modifier.ts

I thought the task is to document how to import and use a certain component, similar to the doc of Button. So I picked up a component, Checkbox, and explored its usages. I installed Sistent on my computer and was able to create a page with various kinds of checkboxes. Here's a draft,

• To install Sistent package, run npm i @layer5/sistent
• Import the Sistent Theme, import { SistentThemeProvider } from "@layer5/sistent"
• Import Checkbox, import { Checkbox } from "@layer5/sistent"
• How to use basic checkboxes,

import { Checkbox, SistentThemeProvider } from "@layer5/sistent";

<SistentThemeProvider>
   <div>
      <Checkbox disabled/>
      <Checkbox />
      <Checkbox defaultChecked/>
   </div>
</SistentThemeProvider>

• How to use checkbox with labels,

import { Checkbox, SistentThemeProvider, FormGroup, FormControlLabel } from "@layer5/sistent";

<SistentThemeProvider>
   <FormGroup>
      <FormControlLabel required control={<Checkbox/>} label="Required" />
      <FormControlLabel disabled control={<Checkbox/>} label="Disabled" />
      <FormControlLabel control={<Checkbox defaultChecked/>} label="Label" />
   </FormGroup>
</SistentThemeProvider>

• And other usages

My questions so far:

1. I'm still not clear about what exactly this task is. Am I supposed to write a doc about a specific component, such as Checkbox, similar to Button?
2. While learning how to use Checkbox, I checked the files below,
   • https://mui.com/material-ui/react-checkbox/
   • https://mui.com/material-ui/api/checkbox/
   • sistent/src/base/Checkbox/Checkbox.tsx
   • sistent/src/base/Checkbox/index.tsx
   • sistent/src/theme/components/checkbox.modifier.ts

The usages of Checkbox above are mostly from what I learned about MUI v5. In order for me to get familiar with Sistent, as well as to complete this task, could you tell me how to find the usage of a Sistent component without its doc?

[KunyueXing]

Hi @vishalvivekm,

I'm not able to join the meeting since I'm in Pacific Time, which would be 5 am here. Can we reschedule the meeting to 8 pm PDT, or some other time?

[KunyueXing]

Hi @lakshz, could you please respond to my comment?

[lakshz]

For component-specific variants, there is a dedicated https://layer5.io/projects/sistent/components page.
Your task is add a more "general" instruction, that the user might need before trying to import a component from sistent.

You may take one component and show it as an example. (not emphasizing on its variants)

So, to summarize:

• To install Sistent package, run npm i @layer5/sistent

• Import the Sistent Theme, import { SistentThemeProvider } from "@layer5/sistent"

• To import any component you can import it from "@layer5/sistent". For example you can import Checkbox with the following code:
  Import Checkbox, import { Checkbox } from "@layer5/sistent"
  For more component specific instruction variants, check https://layer5.io/projects/sistent/components

• Put the imported component inside SistentThemeProvider

All of this needs to added under Installation heading on projects/sistent/about.

I hope this clears everything. I would request you to please create a PR and we can discuss further there, based on what is implemented.

[KunyueXing]

Sounds good, I'll work on the PR.

[KunyueXing]

I'm making slow progress due to family emergency for the past 2 weeks. I'm hoping to post the PR by the end of next week.

[KunyueXing]

I just created a pull request.

@leecalcote @lakshz Who will be my reviewers?

[leecalcote]

Great! @nebula-aac will be a reviewer.