search

layer5io / layer5

Layer5, expect more from your infrastructure
https://layer5.io
Apache License 2.0
816 stars 1.07k forks source link

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

Open leecalcote opened 3 weeks ago

leecalcote commented 3 weeks ago

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.

Join the Layer5 Community by submitting your community member form.

KunyueXing commented 2 weeks ago

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

leecalcote commented 2 weeks ago

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 commented 2 weeks ago

@lakshz FYI

KunyueXing commented 2 weeks ago

@leecalcote Thanks for the reference.

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

KunyueXing commented 2 weeks ago

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 commented 2 weeks ago

Yes.

Lakshay, please assist as needed.

KunyueXing commented 1 week ago

Some updates.

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

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:

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 commented 1 week ago

@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 commented 1 week ago

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

vishalvivekm commented 1 week ago

@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 commented 5 days ago

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:

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,

 
- How to use checkbox with labels,

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

} label="Required" /> } label="Disabled" /> } label="Label" /> 

- 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`](https://layer5.io/projects/sistent/components/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 commented 5 days ago

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 commented 18 hours ago

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