From 2c129414ac677b18223eb32d63ace6eeff3cceb4 Mon Sep 17 00:00:00 2001
From: codeSafari10 <codesafari10@gmail.com>
Date: Mon, 15 Jul 2024 10:48:22 +0000
Subject: [PATCH 1/3] add sistent docs

---
 CONTRIBUTING.md | 79 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 79 insertions(+)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 1c8666badf4..1cc7ec6876a 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -337,6 +337,85 @@ We are using ES-Lint to maintain code quality & consistency in our UI Code. To m
 - We will soon be adding Pre-Commit Hooks to make sure you get to know your errors before you commit the code.
 - In case you are unable to fix your lint errors, ping us on our [Slack](https://slack.meshery.io).
 
+Certainly, here's the content converted into proper markdown format:
+
+# Using Sistent in Meshery UI
+
+## Overview
+
+Meshery UI utilizes three component libraries:
+
+1. Material-UI (MUI) v4
+2. Material-UI (MUI) v5
+3. Sistent
+
+While MUI v4 and v5 are being phased out, Sistent is now the preferred component library. Sistent internally uses MUI v5, and Meshery UI globally still relies on MUI v5. This can lead to conflicts between themes when Sistent components are used directly.
+
+## The `UseSistent` Wrapper
+
+To resolve theme conflicts and ensure proper functionality, a custom wrapper called `UseSistent` has been created. This wrapper provides the Sistent theme to its child components.
+
+## Usage Guidelines
+
+1. Wrap any custom component that exclusively uses Sistent components with `UseSistent`.
+2. Individual Sistent components can also be wrapped with `UseSistent`.
+3. Avoid using MUI v4 components within a component wrapped with `UseSistent`.
+
+## Examples
+
+### Example 1: Wrapping a custom component
+
+```jsx
+import { UseSistent } from './UseSistent';
+import { Button, TextField } from 'sistent';
+
+const MyCustomForm = () => (
+  <UseSistent>
+    <form>
+      <TextField label="Name" />
+      <Button>Submit</Button>
+    </form>
+  </UseSistent>
+);
+```
+
+### Example 2: Wrapping an individual Sistent component
+
+```jsx
+import { UseSistent } from './UseSistent';
+import { DataGrid } from 'sistent';
+
+const MyDataGridComponent = ({ data }) => (
+  <UseSistent>
+    <DataGrid rows={data} columns={columns} />
+  </UseSistent>
+);
+```
+
+### Example 3: Incorrect usage (avoid this)
+
+```jsx
+import { UseSistent } from './UseSistent';
+import { Button } from 'sistent';
+import { TextField } from '@material-ui/core'; // MUI v4
+
+// Don't do this!
+const IncorrectUsage = () => (
+  <UseSistent>
+    <Button>Sistent Button</Button>
+    <TextField label="MUI v4 TextField" /> {/* This will cause conflicts */}
+  </UseSistent>
+);
+```
+
+## Best Practices
+
+1. Gradually migrate components to use Sistent instead of MUI v4 or v5.
+2. Always wrap Sistent components or custom components using Sistent with `UseSistent`.
+3. Keep MUI v4 components separate from Sistent components to avoid theme conflicts.
+
+
+
 ## <a name="contributing-mesheryctl">Mesheryctl Documentation</a>
 
 ### mesheryctl

From 019335daea08f59ebfdf0e821645969463102bb1 Mon Sep 17 00:00:00 2001
From: codeSafari10 <codesafari10@gmail.com>
Date: Mon, 15 Jul 2024 16:19:51 +0530
Subject: [PATCH 2/3] Update CONTRIBUTING.md

Signed-off-by: codeSafari10 <codesafari10@gmail.com>
---
 CONTRIBUTING.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 1cc7ec6876a..a47eea0531c 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -337,7 +337,6 @@ We are using ES-Lint to maintain code quality & consistency in our UI Code. To m
 - We will soon be adding Pre-Commit Hooks to make sure you get to know your errors before you commit the code.
 - In case you are unable to fix your lint errors, ping us on our [Slack](https://slack.meshery.io).
 
-Certainly, here's the content converted into proper markdown format:
 
 # Using Sistent in Meshery UI
 

From 3d6fd7fc78530a9597cb26a629b26c509ce9f769 Mon Sep 17 00:00:00 2001
From: codeSafari10 <codesafari10@gmail.com>
Date: Mon, 15 Jul 2024 16:20:21 +0530
Subject: [PATCH 3/3] Update CONTRIBUTING.md

Signed-off-by: codeSafari10 <codesafari10@gmail.com>
---
 CONTRIBUTING.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index a47eea0531c..509cdc5fb77 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -348,7 +348,7 @@ Meshery UI utilizes three component libraries:
 2. Material-UI (MUI) v5
 3. Sistent
 
-While MUI v4 and v5 are being phased out, Sistent is now the preferred component library. Sistent internally uses MUI v5, and Meshery UI globally still relies on MUI v5. This can lead to conflicts between themes when Sistent components are used directly.
+While MUI v4 and v5 are being phased out, Sistent is now the preferred component library. Sistent internally uses MUI v5, and Meshery UI globally still relies on MUI v4. This can lead to conflicts between themes when Sistent components are used directly.
 
 ## The `UseSistent` Wrapper