From 49e212881884752f6f005f23c37c3c372685a39d Mon Sep 17 00:00:00 2001 From: Kunyue Xing Date: Mon, 27 May 2024 22:56:13 -0700 Subject: [PATCH 1/2] Added installation and quickstart in Sistent's About page. Signed-off-by: Kunyue Xing --- src/sections/Projects/Sistent/about.js | 50 +++++++++++++++++++++++++- 1 file changed, 49 insertions(+), 1 deletion(-) diff --git a/src/sections/Projects/Sistent/about.js b/src/sections/Projects/Sistent/about.js index 8b82b5cb6af6..c6d47e342912 100644 --- a/src/sections/Projects/Sistent/about.js +++ b/src/sections/Projects/Sistent/about.js @@ -1,13 +1,34 @@ -import React from "react"; +import React, { useSyncExternalStore } from "react"; import { Container } from "../../../reusecore/Layout"; import SistentWrapper from "./sistent.style"; import TOC from "../../../components/SistentNavigation"; import IntraPage from "../../../components/handbook-navigation/intra-page"; import SistentPagination from "../../../components/SistentNavigation/pagination"; +import { useStyledDarkMode } from "../../../theme/app/useStyledDarkMode"; +import { CodeBlock } from "./components/button/code-block"; +import { SistentThemeProvider } from "@layer5/sistent"; +import { Button } from "@layer5/sistent"; + const contents = [{ id: 0, link: "#About Sistent", text: "About Sistent" }]; +const codes = [ + "npm i @layer5/sistent", + ` import { SistentThemeProvider } from "@layer5/sistent"; + import { Button } from "@layer5/sistent"; + + +
+ + + +
+
`, +]; + const SistentAbout = () => { + const { isDark } = useStyledDarkMode(); + return (
@@ -42,6 +63,33 @@ const SistentAbout = () => { If you’re interested in joining, please let us know, and we can help you get started on contributing to the Sistent Design System.

+ +

Installation and Quickstart

+
+

+ To install Sistent package, run: +

+
+ +
+

+ After installation, you can import Sistent theme and any Sistent + component from "@layer5/sistent". The component needs to be + included inside "SistentThemeProvider". +

+

Taking button as an example:

+
+
+ +
+ + + +
+
+
+ +
From 6d957c68a66171b74ce07bb020cfc4c37701cb67 Mon Sep 17 00:00:00 2001 From: Lee Calcote Date: Wed, 29 May 2024 18:25:00 -0500 Subject: [PATCH 2/2] enhancement: additional language and clarification. Signed-off-by: Lee Calcote --- src/sections/Projects/Sistent/about.js | 24 +++++++++--------------- 1 file changed, 9 insertions(+), 15 deletions(-) diff --git a/src/sections/Projects/Sistent/about.js b/src/sections/Projects/Sistent/about.js index c6d47e342912..e1e626aff0b5 100644 --- a/src/sections/Projects/Sistent/about.js +++ b/src/sections/Projects/Sistent/about.js @@ -42,32 +42,26 @@ const SistentAbout = () => {

About Sistent

- We have several different React apps that heavily uses the - Material UI v4 and v5 libraries, and this discrepancies led up to - setting up the Sistent Design System. + Sistent is the Layer5 Design System - an open source design system that offers building blocks to create consistent, accessible, and user-friendly interfaces. It's aimed at developers who want to design applications aligned with the same brand and ensure a uniform user experience across different products.

- - We want to be able to have the source of truth of what Layer5.io - and Meshery looks like. - + Sistent leverages Material UI libraries and provides a custom theme on top of it for a consistent look and feel. It includes components, icons, and design tokens that developers can readily integrate into their applications. By using Sistent, developers can save time and effort while maintaining a high-quality user experience throughout Layer5 products.

- 'Sistent' is a play on word to ensure that we have a consistent - theme, components, design tokens, etc across all of the apps that - will be using this library. Sistent is a design system that uses - the MUI v5 components and a custom theme provider - instead of using the default theme from MUI v5. + Sistent provides a consistent user experience across Layer5 projects and any frontend software projects that choose to use Sistent, too.

- If you’re interested in joining, please let us know, and we can - help you get started on contributing to the Sistent Design System. + 'Sistent' is a play on words to ensure that we have a consistent theme, components, design tokens, etc across all of the apps that will be using this library. Sistent is a design system that uses the MUI v5 components and a custom theme provider instead of using the default theme from MUI v5. +

+ +

+ Sistent is built with Typescript and Reactjs and contains components and a large collection of icons that can be reused across projects. If you’re interested in joining the project (please do!), let us know, and we will help you get started on contributing.

Installation and Quickstart

- To install Sistent package, run: + To install the Sistent NPM package, run: