Merge pull request #270 from layer5io/193-next-12-app

feat(next-12): create next.js 12 app to test components

apps/next-12/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

apps/next-12/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

apps/next-12/README.md

@@ -0,0 +1,40 @@
+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).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+[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`.
+
+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.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+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.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

apps/next-12/components/DefaultModal/index.jsx

@@ -0,0 +1,57 @@
+import {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    IconButton,
+    Typography
+  } from '@layer5/sistent-components';
+  import { CloseIcon } from '@layer5/sistent-svg';
+  import React from 'react';
+
+  export default function DefaultModal() {
+    const [open, setOpen] = React.useState(false);
+
+    const handleClickOpen = () => {
+      setOpen(true);
+    };
+    const handleClose = () => {
+      setOpen(false);
+    };
+
+    return (
+      <React.Fragment>
+        <Button variant="contained" onClick={handleClickOpen}>
+          Open Dialog
+        </Button>
+        <Dialog onClose={handleClose} open={open}>
+          <DialogTitle>Modal Title</DialogTitle>
+          <IconButton onClick={handleClose} sx={{ position: 'absolute', right: 8, top: 8 }}>
+            <CloseIcon width={24} height={24} />
+          </IconButton>
+          <DialogContent dividers>
+            <Typography gutterBottom>
+              Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+              in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+            </Typography>
+            <Typography gutterBottom>
+              Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
+              lacus vel augue laoreet rutrum faucibus dolor auctor.
+            </Typography>
+            <Typography gutterBottom>
+              Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+              scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
+              auctor fringilla.
+            </Typography>
+          </DialogContent>
+          <DialogActions>
+            <Button variant="contained" autoFocus onClick={handleClose}>
+              Save changes
+            </Button>
+          </DialogActions>
+        </Dialog>
+      </React.Fragment>
+    );
+  }
+

apps/next-12/components/Modal/index.jsx

@@ -0,0 +1,186 @@
+import { Button, Dialog, DialogContent, DialogTitle, Tooltip } from '@layer5/sistent-components';
+import { CloseIcon } from '@layer5/sistent-svg';
+import FullscreenIcon from '@mui/icons-material/Fullscreen';
+import FullscreenExitIcon from '@mui/icons-material/FullscreenExit';
+import { styled } from '@mui/material/styles';
+import React from 'react';
+
+const StyledDialogActionsFooter = styled('div')(({ theme }) => ({
+  display: 'flex',
+  width: '100%',
+  padding: '0.9375rem 1.25rem',
+  alignItems: 'center',
+  justifyContent: 'flex-end',
+  boxShadow: '0px 1px 8px rgba(0, 0, 0, 0.25)',
+  backgroundColor: '#294957',
+  opacity: '0.8'
+}));
+
+const StyledDialogActions = styled('div')(({ theme }) => ({
+  display: 'flex',
+  justifyContent: 'center',
+  width: '100%',
+  padding: '0.9375rem 1.25rem',
+  alignItems: 'center',
+  boxShadow: '0px 1px 8px rgba(0, 0, 0, 0.25)',
+  backgroundColor: '#294957',
+  color: 'white'
+}));
+
+const StyledDialog = styled(Dialog)(({ theme }) => ({
+  '& .MuiDialog-paper': {
+    backgroundColor: theme.palette.mode === 'dark' ? '#303030' : 'white',
+    borderRadius: '10px',
+    zIndex: 9999
+  }
+}));
+
+const StyledDialogTitle = styled(DialogTitle)(({ theme }) => ({
+  backgroundColor: '#294957',
+  textAlign: 'center',
+  color: 'white',
+  bottom: '2px',
+  boxShadow: '0px 4px 4px rgba(0, 179, 159, 0.4)'
+}));
+
+const CloseIconButton = styled(CloseIcon)(({ theme }) => ({
+  transform: 'rotate(-90deg)',
+  '&:hover': {
+    transform: 'rotate(90deg)',
+    transition: 'all .3s ease-in',
+    cursor: 'pointer'
+  },
+  table: {
+    minWidth: '62.625rem'
+  },
+  height: '2rem',
+  width: '2rem'
+}));
+
+const ActionButton = styled(Button)(({ theme }) => ({
+  backgroundColor: '#00B39F',
+  width: '100%',
+  '&:hover': {
+    backgroundColor: '#00D3A9'
+  }
+}));
+
+const CancelButton = styled(Button)(() => ({
+  marginRight: '1rem',
+  color: '#000',
+  backgroundColor: 'white',
+  width: '100%',
+  '&:hover': {
+    backgroundColor: 'white'
+  }
+}));
+
+const HeaderWrapper = styled('div')({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between'
+});
+
+const IconsContainer = styled('div')({
+  display: 'flex',
+  alignItems: 'center'
+});
+
+const FullscreenButton = styled(FullscreenIcon)(({ theme }) => ({
+  height: '2.25rem',
+  width: '2.25rem',
+  fill: theme.palette.background.paper,
+  cursor: 'pointer'
+}));
+
+const FullscreenExitButton = styled(FullscreenExitIcon)(({ theme }) => ({
+  height: '2.25rem',
+  width: '2.25rem',
+  fill: theme.palette.background.paper,
+  cursor: 'pointer'
+}));
+
+function Modal(props) {
+  const {
+    open,
+    handleClose,
+    modalTitle,
+    maxWidth,
+    cancelButton = true,
+    cancelButtonText,
+    actionButtonText,
+    onAction,
+    onCancel,
+    footerText,
+    modalIcon,
+    isFullScreenModeAllowed,
+    contentStyles,
+    children,
+    style
+  } = props;
+
+  const [fullScreen, setFullScreen] = React.useState(false);
+
+  const toggleFullScreen = () => {
+    setFullScreen((state) => !state);
+  };
+
+  return (
+    <React.Fragment>
+      <StyledDialog
+        open={open}
+        onClose={handleClose}
+        maxWidth={maxWidth ? maxWidth : 'md'}
+        fullScreen={fullScreen}
+        fullWidth={!fullScreen}
+        sx={{
+          '& .MuiDialog-paper': {
+            ...style
+          }
+        }}
+      >
+        {/* Modal Header */}
+        <StyledDialogTitle>
+          <HeaderWrapper>
+            {modalIcon}
+            {modalTitle}
+            <IconsContainer>
+              {isFullScreenModeAllowed && (
+                <Tooltip title={fullScreen ? 'Exit Fullscreen' : 'Enter Fullscreen'}>
+                  {fullScreen ? (
+                    <FullscreenExitButton onClick={toggleFullScreen} />
+                  ) : (
+                    <FullscreenButton onClick={toggleFullScreen} />
+                  )}
+                </Tooltip>
+              )}
+              <Tooltip title="close">
+                <CloseIconButton onClick={handleClose} />
+              </Tooltip>
+            </IconsContainer>
+          </HeaderWrapper>
+        </StyledDialogTitle>
+        {/* Modal Content */}
+        <DialogContent sx={{ ...contentStyles }}>{children}</DialogContent>
+
+        {/* Modal Actions */}
+        {onAction ? (
+          <StyledDialogActionsFooter>
+            {cancelButton && (
+              <CancelButton variant="contained" onClick={onCancel}>
+                {cancelButtonText ? cancelButtonText : 'Cancel'}
+              </CancelButton>
+            )}
+            <ActionButton variant="contained" onClick={onAction}>
+              {actionButtonText ? actionButtonText : 'Save'}
+            </ActionButton>
+          </StyledDialogActionsFooter>
+        ) : (
+          <StyledDialogActions>{footerText}</StyledDialogActions>
+        )}
+      </StyledDialog>
+    </React.Fragment>
+  );
+}
+
+export default Modal;

apps/next-12/components/ModeToggleButton.jsx

@@ -0,0 +1,34 @@
+import { IconButton } from '@mui/material';
+import { useDispatch, useSelector } from 'react-redux';
+import { toggleTheme } from '@/lib/redux/theme/themeSlice';
+
+import DarkModeIcon from '@mui/icons-material/DarkMode';
+import LightModeIcon from '@mui/icons-material/LightMode';
+
+function DynamicIcon({ mode }) {
+  if (mode === 'dark') {
+    return <DarkModeIcon />;
+  }
+
+  return <LightModeIcon />;
+}
+
+function ModeToggleButton() {
+  const dispatch = useDispatch(); // Initialize the useDispatch function
+
+  // Use useSelector to get the darkTheme state from your Redux store
+  const mode = useSelector((state) => state.theme.darkTheme ? 'dark' : 'light');
+
+  const toggleMode = () => {
+    // Dispatch the toggleTheme action when the button is clicked
+    dispatch(toggleTheme());
+  };
+
+  return (
+    <IconButton onClick={toggleMode} sx={{ width: 40, height: 40 }}>
+      <DynamicIcon mode={mode} />
+    </IconButton>
+  );
+}
+
+export default ModeToggleButton;