[Sistent] Missing instructions related to the NPM packages and their use about layer5 HOT 18 CLOSED

Yes.

Lakshay, please assist as needed.

from layer5.

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

from layer5.

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

from layer5.

@lakshz FYI

from layer5.

@leecalcote Thanks for the reference.

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

from layer5.

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?

from layer5.

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?

from layer5.

@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.

from layer5.

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

from layer5.

@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

from layer5.

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?

from layer5.

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?

from layer5.

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

from layer5.

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.

from layer5.

Sounds good, I'll work on the PR.

from layer5.

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.

from layer5.

I just created a pull request.

@leecalcote @lakshz Who will be my reviewers?

from layer5.

Great! @nebula-aac will be a reviewer.

from layer5.