From c960d4586f5c8c5bcb8b33570891b2e71b060352 Mon Sep 17 00:00:00 2001 From: NishantSinghhhhh Date: Sun, 27 Oct 2024 16:38:41 +0530 Subject: [PATCH] Linting issues removed Signed-off-by: NishantSinghhhhh --- .../drawer/DrawerComponent/TempDrawer.js | 2 +- .../components/drawer/DrawerComponent/data.js | 3 +- .../drawer/DrawerComponent/miniVariant.js | 76 +++++++++---------- .../Sistent/components/drawer/code.js | 19 +++-- .../Sistent/components/drawer/guidance.js | 27 ++++--- .../Sistent/components/drawer/index.js | 60 +++++++-------- tash pop stash@{1} | 16 ++++ 7 files changed, 104 insertions(+), 99 deletions(-) create mode 100644 tash pop stash@{1} diff --git a/src/sections/Projects/Sistent/components/drawer/DrawerComponent/TempDrawer.js b/src/sections/Projects/Sistent/components/drawer/DrawerComponent/TempDrawer.js index 13ec32e59516..0edd4a152308 100644 --- a/src/sections/Projects/Sistent/components/drawer/DrawerComponent/TempDrawer.js +++ b/src/sections/Projects/Sistent/components/drawer/DrawerComponent/TempDrawer.js @@ -96,7 +96,7 @@ export default function TemporaryDrawer() { position: "relative", flex: 1, overflow: "hidden", - display : "flex", + display: "flex", flexDirection: "row", }}> `, - ]; - \ No newline at end of file +]; diff --git a/src/sections/Projects/Sistent/components/drawer/DrawerComponent/miniVariant.js b/src/sections/Projects/Sistent/components/drawer/DrawerComponent/miniVariant.js index 5091a6ee5e8a..1c3ec79be8a2 100644 --- a/src/sections/Projects/Sistent/components/drawer/DrawerComponent/miniVariant.js +++ b/src/sections/Projects/Sistent/components/drawer/DrawerComponent/miniVariant.js @@ -1,5 +1,5 @@ -import React from 'react'; -import { SistentThemeProvider } from '@layer5/sistent'; +import React from "react"; +import { SistentThemeProvider } from "@layer5/sistent"; import { useStyledDarkMode } from "../../../../../../theme/app/useStyledDarkMode"; import { @@ -8,8 +8,8 @@ import { Button, Divider, ListItemIcon -} from '@layer5/sistent'; -import { MoveToInbox as InboxIcon, Mail as MailIcon, Close as CloseIcon } from '@mui/icons-material'; +} from "@layer5/sistent"; +import { MoveToInbox as InboxIcon, Mail as MailIcon, Close as CloseIcon } from "@mui/icons-material"; const drawerWidth = 10; // Mini drawer width const fullDrawerWidth = 60; // Full width when expanded @@ -24,15 +24,15 @@ export default function MiniVariantDrawer() { const DrawerContent = () => ( - -
- {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => ( -
+ {["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => ( +
{index % 2 === 0 ? : } @@ -41,8 +41,8 @@ export default function MiniVariantDrawer() {
- {['All mail', 'Trash', 'Spam'].map((text, index) => ( -
+ {["All mail", "Trash", "Spam"].map((text, index) => ( +
{index % 2 === 0 ? : } @@ -58,42 +58,42 @@ export default function MiniVariantDrawer() { sx={{ width: 800, height: 500, - margin: '20px auto', - border: '1px solid #ccc', - borderRadius: '8px', - overflow: 'hidden', - position: 'relative', - boxShadow: '0 2px 4px rgba(0,0,0,0.1)', - display: 'flex', - flexDirection: 'column' + margin: "20px auto", + border: "1px solid #ccc", + borderRadius: "8px", + overflow: "hidden", + position: "relative", + boxShadow: "0 2px 4px rgba(0,0,0,0.1)", + display: "flex", + flexDirection: "column" }} > - Mini Variant Drawer Demo + Mini Variant Drawer Demo @@ -104,14 +104,14 @@ export default function MiniVariantDrawer() { variant="persistent" sx={{ width: open ? fullDrawerWidth : drawerWidth, - position: 'relative', - '& .MuiDrawer-paper': { - position: 'relative', + position: "relative", + "& .MuiDrawer-paper": { + position: "relative", width: open ? fullDrawerWidth : drawerWidth, - boxSizing: 'border-box', - height: '80vh', - borderRight: '1px solid #ccc', - backgroundColor: isDark ? 'background.default' : '#fff', + boxSizing: "border-box", + height: "80vh", + borderRight: "1px solid #ccc", + backgroundColor: isDark ? "background.default" : "#fff", overflowX: "hidden", }, }} @@ -122,9 +122,9 @@ export default function MiniVariantDrawer() { {

Drawers

- The button comes in Various types: + The button comes in Various types:

Temporary Drawers

@@ -77,7 +76,7 @@ export const DrawerCode = () => {

- +
@@ -101,7 +100,7 @@ export const DrawerCode = () => {
- +
@@ -114,12 +113,12 @@ export const DrawerCode = () => {
- +
- +

Modal Drawer

@@ -128,12 +127,12 @@ export const DrawerCode = () => {

- {/* */} + {/* */}
- +
diff --git a/src/sections/Projects/Sistent/components/drawer/guidance.js b/src/sections/Projects/Sistent/components/drawer/guidance.js index d8d6b7de9e2a..f7bbd062f8a0 100644 --- a/src/sections/Projects/Sistent/components/drawer/guidance.js +++ b/src/sections/Projects/Sistent/components/drawer/guidance.js @@ -1,8 +1,7 @@ import React from "react"; import { navigate } from "gatsby"; import { useLocation } from "@reach/router"; -import { Row } from "../../../../../reusecore/Layout"; -import { Button, SistentThemeProvider } from "@layer5/sistent"; +// import { SistentThemeProvider } from "@layer5/sistent"; import { SistentLayout } from "../../sistent-layout"; import TabButton from "../../../../../reusecore/Button"; @@ -70,41 +69,41 @@ export const DrawerGuidance = () => {

Primary Drawer

-

+

The primary drawer is used to house the most important navigation options or frequently accessed content within an application. It typically includes core sections or main categories, helping users move efficiently through the app’s structure. The primary drawer is often persistent to ensure consistent access and can be especially helpful for users who need to switch between key areas regularly. -

- +

+

Secondary Drawer

-

+

Secondary drawers are used for supporting or auxiliary content, providing access to settings, options, or filters that enhance the user's experience without overwhelming the main interface. Secondary drawers are often temporary or slide out when needed, keeping the interface clean while still allowing quick access to additional functionality. -

+

-

Persistent Drawer

-

+

Persistent Drawer

+

A persistent drawer remains visible and accessible even as users interact with the main content. This type of drawer is beneficial for applications where constant navigation options are needed without taking the user away from their current task, helping maintain focus and accessibility. -

+

-

Action Drawer

-

+

Action Drawer

+

Action drawers are used for task-specific actions such as a shopping cart, notifications, or chat messages, allowing users to see real-time updates or make selections. These drawers often have their own unique styling to make them easily identifiable from other types and are designed to streamline specific workflows. -

- +

+

Labeling

 diff --git a/src/sections/Projects/Sistent/components/drawer/index.js b/src/sections/Projects/Sistent/components/drawer/index.js index 1771e694dd20..35359f95fca1 100644 --- a/src/sections/Projects/Sistent/components/drawer/index.js +++ b/src/sections/Projects/Sistent/components/drawer/index.js @@ -1,26 +1,18 @@ import React from "react"; import { navigate } from "gatsby"; import { useLocation } from "@reach/router"; - -import { SistentThemeProvider, Button, Drawer } from "@layer5/sistent"; +import { SistentThemeProvider } from "@layer5/sistent"; import TabButton from "../../../../../reusecore/Button"; import { SistentLayout } from "../../sistent-layout"; -import { Col, Row } from "../../../../../reusecore/Layout"; +import { Row } from "../../../../../reusecore/Layout"; import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; -import { - Table, - TableBody, - TableCell, - TableContainer, - TableHead, - TableRow, - Paper, -} from "@mui/material"; +import { Table } from "@layer5/sistent"; import TemporaryDrawer from "./DrawerComponent/TempDrawer"; import PersistentDrawer from "./DrawerComponent/PersistentDrawer"; import MiniDrawer from "./DrawerComponent/miniVariant"; import PermanentDrawer from "./DrawerComponent/permanentDrawer"; + const SistentDrawer = () => { const props = [ { @@ -146,30 +138,30 @@ const SistentDrawer = () => { Here are the commonly used props for the Drawer component, including both standard and swipeable variants:

- - -
- {/* Table Header */} -
-
Prop
-
Type
-
Default
-
Description
-
+ +
+
+ {/* Table Header */} +
+
Prop
+
Type
+
Default
+
Description
+
- {/* Table Body */} - {props.map((prop) => ( -
-
{prop.name}
-
{prop.type}
-
{prop.defaultValue}
-
{prop.description}
-
- ))} -
+ {/* Table Body */} + {props.map((prop) => ( +
+
{prop.name}
+
{prop.type}
+
{prop.defaultValue}
+
{prop.description}
+
+ ))} + -
- + +
diff --git a/tash pop stash@{1} b/tash pop stash@{1} new file mode 100644 index 000000000000..55cffba5e21a --- /dev/null +++ b/tash pop stash@{1} @@ -0,0 +1,16 @@ +stash@{0}: WIP on Drawer: 1e2a4fb0c Merge branch 'layer5io:master' into Drawer +stash@{1}: On Drawer: Drawer Component +stash@{2}: WIP on CArd: 4ffb32c8e Started with the Card component +stash@{3}: On CArd: Stash1 +stash@{4}: WIP on CArd: 4ffb32c8e Started with the Card component +stash@{5}: WIP on CArd: 4ffb32c8e Started with the Card component +stash@{6}: WIP on Link_Component: 59b3df469 Removed the extra component +stash@{7}: On Link_Component: changed code.js +stash@{8}: WIP on AppBar: fb25215ae Merge pull request #6018 from jerensl/ci/bump-kanvas-snapshot +stash@{9}: autostash +stash@{10}: WIP on Link_Component: 8a4b85525 Chanegd the button style , removed green color prop from links and also removed download button +stash@{11}: WIP on (no branch): a5bb98c16 Update index.js +stash@{12}: WIP on Link_Component: 0cf978c3c Update guidance.js +stash@{13}: WIP on master: fb25215ae Merge pull request #6018 from jerensl/ci/bump-kanvas-snapshot +stash@{14}: WIP on Avatar: fb25215ae Merge pull request #6018 from jerensl/ci/bump-kanvas-snapshot +stash@{15}: WIP on Link_Component: e994890d9 Did the Required changes