Skip to content

Commit

Permalink
Linting issues removed
Browse files Browse the repository at this point in the history 
Signed-off-by: NishantSinghhhhh <[email protected]>
  • Loading branch information
@NishantSinghhhhh
NishantSinghhhhh committed Oct 27, 2024
1 parent 1e2a4fb commit c960d45
Show file tree
Hide file tree
Showing 7 changed files with 104 additions and 99 deletions.
2 changes: 1 addition & 1 deletion src/sections/Projects/Sistent/components/drawer/DrawerComponent/TempDrawer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ export default function TemporaryDrawer() {
position: "relative",
flex: 1,
overflow: "hidden",
display : "flex",
display: "flex",
flexDirection: "row",
}}>
<Drawer
Expand Down
3 changes: 1 addition & 2 deletions src/sections/Projects/Sistent/components/drawer/DrawerComponent/data.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -568,5 +568,4 @@ export default function PermanentDrawer() {
Next
</Button>
</SistentThemeProvider>`,
];

];
76 changes: 38 additions & 38 deletions src/sections/Projects/Sistent/components/drawer/DrawerComponent/miniVariant.js
View file
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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
Expand All @@ -24,15 +24,15 @@ export default function MiniVariantDrawer() {

const DrawerContent = () => (
<Box sx={{ width: open ? fullDrawerWidth : drawerWidth }} role="presentation">
<Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '8px 16px' }}>
<Button onClick={toggleDrawer(false)} sx={{ minWidth: 'unset' }}>
<Box sx={{ display: "flex", justifyContent: "center", alignItems: "center", padding: "8px 16px" }}>
<Button onClick={toggleDrawer(false)} sx={{ minWidth: "unset" }}>
<CloseIcon />
</Button>
</Box>
<Divider />
<div>
{['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
<div key={text} style={{ display: 'flex', alignItems: 'center', padding: '8px 16px' }} onClick={toggleDrawer(false)}>
{["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => (
<div key={text} style={{ display: "flex", alignItems: "center", padding: "8px 16px" }} onClick={toggleDrawer(false)}>
<ListItemIcon>
{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
</ListItemIcon>
Expand All @@ -41,8 +41,8 @@ export default function MiniVariantDrawer() {
</div>
<Divider />
<div>
{['All mail', 'Trash', 'Spam'].map((text, index) => (
<div key={text} style={{ display: 'flex', alignItems: 'center', padding: '8px 16px' }} onClick={toggleDrawer(false)}>
{["All mail", "Trash", "Spam"].map((text, index) => (
<div key={text} style={{ display: "flex", alignItems: "center", padding: "8px 16px" }} onClick={toggleDrawer(false)}>
<ListItemIcon>
{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
</ListItemIcon>
Expand All @@ -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"
}}
>
<Box sx={{
bgcolor: '#00B39F',
color: 'white',
bgcolor: "#00B39F",
color: "white",
p: 2,
display: 'flex',
alignItems: 'center'
display: "flex",
alignItems: "center"
}}>
<Button
onClick={toggleDrawer(true)}
sx={{
color: 'white',
color: "white",
mr: 2,
'&:hover': {
bgcolor: 'rgba(255, 255, 255, 0.1)'
"&:hover": {
bgcolor: "rgba(255, 255, 255, 0.1)"
}
}}
>
Open drawer
</Button>
<span style={{ fontWeight: 'bold' }}>Mini Variant Drawer Demo</span>
<span style={{ fontWeight: "bold" }}>Mini Variant Drawer Demo</span>
</Box>

<Box sx={{
position: 'relative',
position: "relative",
flex: 1,
overflow: 'hidden',
overflow: "hidden",
display: "flex",
flexDirection: "row",
}}>
Expand All @@ -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",
},
}}
Expand All @@ -122,9 +122,9 @@ export default function MiniVariantDrawer() {
<Box
id="drawer-container"
sx={{
position: 'relative',
height: '100%',
overflow: 'auto',
position: "relative",
height: "100%",
overflow: "auto",
flexGrow: 1,
p: 3
}}
Expand Down
19 changes: 9 additions & 10 deletions src/sections/Projects/Sistent/components/drawer/code.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,13 @@ import React from "react";
import { navigate } from "gatsby";
import { useLocation } from "@reach/router";

import { Button, SistentThemeProvider } from "@layer5/sistent";
import { SistentThemeProvider } from "@layer5/sistent";
import { CodeBlock } from "../button/code-block";
import { FaArrowRight } from "@react-icons/all-files/fa/FaArrowRight";
import { SistentLayout } from "../../sistent-layout";

import TabButton from "../../../../../reusecore/Button";
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
import {codes} from './DrawerComponent/data'
import { codes } from "./DrawerComponent/data";
import TemporaryDrawer from "./DrawerComponent/TempDrawer";
import MiniVariantDrawer from "./DrawerComponent/miniVariant";
import PersistentDrawer from "./DrawerComponent/PersistentDrawer";
Expand Down Expand Up @@ -68,7 +67,7 @@ export const DrawerCode = () => {
<h2>Drawers</h2>
</a>
<p>
The button comes in Various types:
The button comes in Various types:
</p>
<h3>Temporary Drawers</h3>
<p>
Expand All @@ -77,7 +76,7 @@ export const DrawerCode = () => {
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<TemporaryDrawer/>
<TemporaryDrawer/>
</SistentThemeProvider>
</div>
<CodeBlock name="Temporary Drawers" code={codes[0]} />
Expand All @@ -101,7 +100,7 @@ export const DrawerCode = () => {
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<PersistentDrawer/>
<PersistentDrawer/>
</SistentThemeProvider>
</div>
<CodeBlock name="Persistent Drawer" code={codes[2]} />
Expand All @@ -114,12 +113,12 @@ export const DrawerCode = () => {
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<PermanentDrawer/>
<PermanentDrawer/>
</SistentThemeProvider>
</div>
<CodeBlock name="Permanent Drawer" code={codes[2]} />
</div>


<h3>Modal Drawer</h3>
<p>
Expand All @@ -128,12 +127,12 @@ export const DrawerCode = () => {
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
{/* <ModalDrawer/> */}
{/* <ModalDrawer/> */}
</SistentThemeProvider>
</div>
<CodeBlock name="Permanent Drawer" code={codes[2]} />
</div>

</div>
</div>
</SistentLayout>
Expand Down
27 changes: 13 additions & 14 deletions src/sections/Projects/Sistent/components/drawer/guidance.js
View file
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -70,41 +69,41 @@ export const DrawerGuidance = () => {
</p>

<h3>Primary Drawer</h3>
<p>
<p>
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.
</p>
</p>

<h3>Secondary Drawer</h3>
<p>
<p>
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.
</p>
</p>

<h3>Persistent Drawer</h3>
<p>
<h3>Persistent Drawer</h3>
<p>
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.
</p>
</p>

<h3>Action Drawer</h3>
<p>
<h3>Action Drawer</h3>
<p>
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.
</p>
</p>

<a id="Labeling">
<h2>Labeling</h2>
</a>
Expand Down
60 changes: 26 additions & 34 deletions src/sections/Projects/Sistent/components/drawer/index.js
View file
Original file line number Diff line number Diff line change
@@ -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 = [
{
Expand Down Expand Up @@ -146,30 +138,30 @@ const SistentDrawer = () => {
Here are the commonly used props for the Drawer component, including both standard and swipeable variants:
</p>
<Row $Hcenter className="image-container">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<Table>
<div style={{ display: 'table', width: '100%', borderCollapse: 'collapse', textAlign: 'left' }}>
{/* Table Header */}
<div style={{ display: 'table-row', fontWeight: 'bold' }}>
<div style={{ display: 'table-cell', padding: '8px', border: '1px solid #ddd' }}>Prop</div>
<div style={{ display: 'table-cell', padding: '8px', border: '1px solid #ddd' }}>Type</div>
<div style={{ display: 'table-cell', padding: '8px', border: '1px solid #ddd' }}>Default</div>
<div style={{ display: 'table-cell', padding: '8px', border: '1px solid #ddd' }}>Description</div>
</div>
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<Table>
<div style={{ display: "table", width: "100%", borderCollapse: "collapse", textAlign: "left" }}>
{/* Table Header */}
<div style={{ display: "table-row", fontWeight: "bold" }}>
<div style={{ display: "table-cell", padding: "8px", border: "1px solid #ddd" }}>Prop</div>
<div style={{ display: "table-cell", padding: "8px", border: "1px solid #ddd" }}>Type</div>
<div style={{ display: "table-cell", padding: "8px", border: "1px solid #ddd" }}>Default</div>
<div style={{ display: "table-cell", padding: "8px", border: "1px solid #ddd" }}>Description</div>
</div>

{/* Table Body */}
{props.map((prop) => (
<div style={{ display: 'table-row' }} key={prop.name}>
<div style={{ display: 'table-cell', padding: '8px', border: '1px solid #ddd' }}>{prop.name}</div>
<div style={{ display: 'table-cell', padding: '8px', border: '1px solid #ddd' }}>{prop.type}</div>
<div style={{ display: 'table-cell', padding: '8px', border: '1px solid #ddd' }}>{prop.defaultValue}</div>
<div style={{ display: 'table-cell', padding: '8px', border: '1px solid #ddd' }}>{prop.description}</div>
</div>
))}
</div>
{/* Table Body */}
{props.map((prop) => (
<div style={{ display: "table-row" }} key={prop.name}>
<div style={{ display: "table-cell", padding: "8px", border: "1px solid #ddd" }}>{prop.name}</div>
<div style={{ display: "table-cell", padding: "8px", border: "1px solid #ddd" }}>{prop.type}</div>
<div style={{ display: "table-cell", padding: "8px", border: "1px solid #ddd" }}>{prop.defaultValue}</div>
<div style={{ display: "table-cell", padding: "8px", border: "1px solid #ddd" }}>{prop.description}</div>
</div>
))}
</div>

</Table>
</SistentThemeProvider>
</Table>
</SistentThemeProvider>
</Row>
<div style={{ marginBottom: "20px" }}>

Expand Down
Loading

0 comments on commit c960d45

Please sign in to comment.