Skip to content

Commit d7ac0e9

Browse files
ankushbhardwaj408ankushbhardwaj408
authored
Merge branch 'master' into ankushbhardwaj408/maintainer-file
2 parents 222c9eb + 3727b2c commit d7ac0e9

27 files changed

+4780
-0
lines changed

Diff for: ‎.github/workflows/lint.yml

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
name: Linting and formatting
2+
3+
on:
4+
push:
5+
branches:
6+
- "*"
7+
pull_request:
8+
branches:
9+
- "*"
10+
11+
jobs:
12+
lint:
13+
runs-on: ubuntu-latest
14+
15+
steps:
16+
- name: Checkout code
17+
uses: actions/checkout@v2
18+
19+
- name: Set up Node.js ${{ matrix.node-version }}
20+
uses: actions/setup-node@v3
21+
with:
22+
node-version: ${{ matrix.node-version }}
23+
24+
- name: Install dependencies
25+
run: yarn install
26+
27+
- name: Run Lint
28+
run: yarn lint && yarn format:check && yarn lint-staged

Diff for: ‎README.md

+5
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,11 @@ format-fix:
6666
yarn run format:write
6767
```
6868

69+
> [!NOTE]
70+
> Avoid using `type any` in your code. Always specify explicit types to ensure type safety and maintainability.
71+
72+
<br/>
73+
6974
## Join the Layer5 community!
7075

7176
<a name="contributing"></a><a name="community"></a>

Diff for: ‎apps/next-12/.eslintrc.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": "next/core-web-vitals"
3+
}

Diff for: ‎apps/next-12/.gitignore

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
.yarn/install-state.gz
8+
9+
# testing
10+
/coverage
11+
12+
# next.js
13+
/.next/
14+
/out/
15+
16+
# production
17+
/build
18+
19+
# misc
20+
.DS_Store
21+
*.pem
22+
23+
# debug
24+
npm-debug.log*
25+
yarn-debug.log*
26+
yarn-error.log*
27+
28+
# local env files
29+
.env*.local
30+
31+
# vercel
32+
.vercel
33+
34+
# typescript
35+
*.tsbuildinfo
36+
next-env.d.ts

Diff for: ‎apps/next-12/README.md

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
2+
3+
## Getting Started
4+
5+
First, run the development server:
6+
7+
```bash
8+
npm run dev
9+
# or
10+
yarn dev
11+
# or
12+
pnpm dev
13+
# or
14+
bun dev
15+
```
16+
17+
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
18+
19+
You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
20+
21+
[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
22+
23+
The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
24+
25+
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
26+
27+
## Learn More
28+
29+
To learn more about Next.js, take a look at the following resources:
30+
31+
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
32+
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
33+
34+
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
35+
36+
## Deploy on Vercel
37+
38+
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
39+
40+
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

Diff for: ‎apps/next-12/components/DefaultModal/index.jsx

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import {
2+
Button,
3+
Dialog,
4+
DialogActions,
5+
DialogContent,
6+
DialogTitle,
7+
IconButton,
8+
Typography
9+
} from '@layer5/sistent-components';
10+
import { CloseIcon } from '@layer5/sistent-svg';
11+
import React from 'react';
12+
13+
export default function DefaultModal() {
14+
const [open, setOpen] = React.useState(false);
15+
16+
const handleClickOpen = () => {
17+
setOpen(true);
18+
};
19+
const handleClose = () => {
20+
setOpen(false);
21+
};
22+
23+
return (
24+
<React.Fragment>
25+
<Button variant="contained" onClick={handleClickOpen}>
26+
Open Dialog
27+
</Button>
28+
<Dialog onClose={handleClose} open={open}>
29+
<DialogTitle>Modal Title</DialogTitle>
30+
<IconButton onClick={handleClose} sx={{ position: 'absolute', right: 8, top: 8 }}>
31+
<CloseIcon width={24} height={24} />
32+
</IconButton>
33+
<DialogContent dividers>
34+
<Typography gutterBottom>
35+
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
36+
in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
37+
</Typography>
38+
<Typography gutterBottom>
39+
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
40+
lacus vel augue laoreet rutrum faucibus dolor auctor.
41+
</Typography>
42+
<Typography gutterBottom>
43+
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
44+
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
45+
auctor fringilla.
46+
</Typography>
47+
</DialogContent>
48+
<DialogActions>
49+
<Button variant="contained" autoFocus onClick={handleClose}>
50+
Save changes
51+
</Button>
52+
</DialogActions>
53+
</Dialog>
54+
</React.Fragment>
55+
);
56+
}
57+

Diff for: ‎apps/next-12/components/Modal/index.jsx

+186
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
import { Button, Dialog, DialogContent, DialogTitle, Tooltip } from '@layer5/sistent-components';
2+
import { CloseIcon } from '@layer5/sistent-svg';
3+
import FullscreenIcon from '@mui/icons-material/Fullscreen';
4+
import FullscreenExitIcon from '@mui/icons-material/FullscreenExit';
5+
import { styled } from '@mui/material/styles';
6+
import React from 'react';
7+
8+
const StyledDialogActionsFooter = styled('div')(({ theme }) => ({
9+
display: 'flex',
10+
width: '100%',
11+
padding: '0.9375rem 1.25rem',
12+
alignItems: 'center',
13+
justifyContent: 'flex-end',
14+
boxShadow: '0px 1px 8px rgba(0, 0, 0, 0.25)',
15+
backgroundColor: '#294957',
16+
opacity: '0.8'
17+
}));
18+
19+
const StyledDialogActions = styled('div')(({ theme }) => ({
20+
display: 'flex',
21+
justifyContent: 'center',
22+
width: '100%',
23+
padding: '0.9375rem 1.25rem',
24+
alignItems: 'center',
25+
boxShadow: '0px 1px 8px rgba(0, 0, 0, 0.25)',
26+
backgroundColor: '#294957',
27+
color: 'white'
28+
}));
29+
30+
const StyledDialog = styled(Dialog)(({ theme }) => ({
31+
'& .MuiDialog-paper': {
32+
backgroundColor: theme.palette.mode === 'dark' ? '#303030' : 'white',
33+
borderRadius: '10px',
34+
zIndex: 9999
35+
}
36+
}));
37+
38+
const StyledDialogTitle = styled(DialogTitle)(({ theme }) => ({
39+
backgroundColor: '#294957',
40+
textAlign: 'center',
41+
color: 'white',
42+
bottom: '2px',
43+
boxShadow: '0px 4px 4px rgba(0, 179, 159, 0.4)'
44+
}));
45+
46+
const CloseIconButton = styled(CloseIcon)(({ theme }) => ({
47+
transform: 'rotate(-90deg)',
48+
'&:hover': {
49+
transform: 'rotate(90deg)',
50+
transition: 'all .3s ease-in',
51+
cursor: 'pointer'
52+
},
53+
table: {
54+
minWidth: '62.625rem'
55+
},
56+
height: '2rem',
57+
width: '2rem'
58+
}));
59+
60+
const ActionButton = styled(Button)(({ theme }) => ({
61+
backgroundColor: '#00B39F',
62+
width: '100%',
63+
'&:hover': {
64+
backgroundColor: '#00D3A9'
65+
}
66+
}));
67+
68+
const CancelButton = styled(Button)(() => ({
69+
marginRight: '1rem',
70+
color: '#000',
71+
backgroundColor: 'white',
72+
width: '100%',
73+
'&:hover': {
74+
backgroundColor: 'white'
75+
}
76+
}));
77+
78+
const HeaderWrapper = styled('div')({
79+
display: 'flex',
80+
alignItems: 'center',
81+
justifyContent: 'space-between'
82+
});
83+
84+
const IconsContainer = styled('div')({
85+
display: 'flex',
86+
alignItems: 'center'
87+
});
88+
89+
const FullscreenButton = styled(FullscreenIcon)(({ theme }) => ({
90+
height: '2.25rem',
91+
width: '2.25rem',
92+
fill: theme.palette.background.paper,
93+
cursor: 'pointer'
94+
}));
95+
96+
const FullscreenExitButton = styled(FullscreenExitIcon)(({ theme }) => ({
97+
height: '2.25rem',
98+
width: '2.25rem',
99+
fill: theme.palette.background.paper,
100+
cursor: 'pointer'
101+
}));
102+
103+
function Modal(props) {
104+
const {
105+
open,
106+
handleClose,
107+
modalTitle,
108+
maxWidth,
109+
cancelButton = true,
110+
cancelButtonText,
111+
actionButtonText,
112+
onAction,
113+
onCancel,
114+
footerText,
115+
modalIcon,
116+
isFullScreenModeAllowed,
117+
contentStyles,
118+
children,
119+
style
120+
} = props;
121+
122+
const [fullScreen, setFullScreen] = React.useState(false);
123+
124+
const toggleFullScreen = () => {
125+
setFullScreen((state) => !state);
126+
};
127+
128+
return (
129+
<React.Fragment>
130+
<StyledDialog
131+
open={open}
132+
onClose={handleClose}
133+
maxWidth={maxWidth ? maxWidth : 'md'}
134+
fullScreen={fullScreen}
135+
fullWidth={!fullScreen}
136+
sx={{
137+
'& .MuiDialog-paper': {
138+
...style
139+
}
140+
}}
141+
>
142+
{/* Modal Header */}
143+
<StyledDialogTitle>
144+
<HeaderWrapper>
145+
{modalIcon}
146+
{modalTitle}
147+
<IconsContainer>
148+
{isFullScreenModeAllowed && (
149+
<Tooltip title={fullScreen ? 'Exit Fullscreen' : 'Enter Fullscreen'}>
150+
{fullScreen ? (
151+
<FullscreenExitButton onClick={toggleFullScreen} />
152+
) : (
153+
<FullscreenButton onClick={toggleFullScreen} />
154+
)}
155+
</Tooltip>
156+
)}
157+
<Tooltip title="close">
158+
<CloseIconButton onClick={handleClose} />
159+
</Tooltip>
160+
</IconsContainer>
161+
</HeaderWrapper>
162+
</StyledDialogTitle>
163+
{/* Modal Content */}
164+
<DialogContent sx={{ ...contentStyles }}>{children}</DialogContent>
165+
166+
{/* Modal Actions */}
167+
{onAction ? (
168+
<StyledDialogActionsFooter>
169+
{cancelButton && (
170+
<CancelButton variant="contained" onClick={onCancel}>
171+
{cancelButtonText ? cancelButtonText : 'Cancel'}
172+
</CancelButton>
173+
)}
174+
<ActionButton variant="contained" onClick={onAction}>
175+
{actionButtonText ? actionButtonText : 'Save'}
176+
</ActionButton>
177+
</StyledDialogActionsFooter>
178+
) : (
179+
<StyledDialogActions>{footerText}</StyledDialogActions>
180+
)}
181+
</StyledDialog>
182+
</React.Fragment>
183+
);
184+
}
185+
186+
export default Modal;

0 commit comments

Comments
 (0)