From 7ed6b7bc1d9ee5a510b2a964e0a2c18e3d032b69 Mon Sep 17 00:00:00 2001
From: aabidsofi19 <mailtoaabid01@gmail.com>
Date: Sat, 13 Apr 2024 16:42:51 +0530
Subject: [PATCH] feat: styled stepper

Signed-off-by: aabidsofi19 <mailtoaabid01@gmail.com>
---
 Makefile                     |   5 +-
 package.json                 | 191 ++++++++++++++++++-----------------
 src/custom/Modal/index.tsx   |  44 ++++++--
 src/custom/Stepper/index.tsx | 167 ++++++++++++++++++++++++++++++
 src/custom/index.tsx         |  13 ++-
 5 files changed, 314 insertions(+), 106 deletions(-)
 create mode 100644 src/custom/Stepper/index.tsx

diff --git a/Makefile b/Makefile
index f151daaf3..b1ed5868b 100644
--- a/Makefile
+++ b/Makefile
@@ -8,6 +8,9 @@ package-setup:
 package-build: setup
 	npm run build
 
+package-build-watch: setup
+	npm run build:watch
+
 package-format-check:
 	npm run format:check
 
@@ -26,4 +29,4 @@ version-minor:
 
 # Create a major versio of packages
 version-major:
-	npm run versionup:major
\ No newline at end of file
+	npm run versionup:major
diff --git a/package.json b/package.json
index 91c494f70..6153da373 100644
--- a/package.json
+++ b/package.json
@@ -1,103 +1,104 @@
 {
-  "name": "@layer5/sistent",
-  "version": "0.14.11",
-  "description": "Reusable React Components and SVG Icons library",
-  "repository": {
-    "type": "git",
-    "url": "git+ssh://git@github.com/layer5io/sistent.git"
-  },
-  "main": "./dist/index.js",
-  "module": "./dist/index..js",
-  "types": "./dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "build": "NODE_ENV=production tsup",
-    "commitlint": "commitlint --edit",
-    "coverage": "jest --coverage",
-    "dev": "NODE_ENV=development tsup",
-    "format:check": "prettier --check \"**/*.{ts,tsx,md}\" --config ./.prettierrc",
-    "format:write": "prettier --write \"**/*.{ts,tsx,md}\" --config ./.prettierrc",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "lint:fix": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0 --fix",
-    "prepare": "husky install",
-    "test": "jest",
-    "versionup:major": "npm version major",
-    "versionup:minor": "npm version minor",
-    "versionup:patch": "npm version patch"
-  },
-  "lint-staged": {
-    "*.{ts,tsx,md}": [
-      "prettier --write",
-      "eslint --fix"
-    ]
-  },
-  "config": {
-    "commitizen": {
-      "path": "./node_modules/cz-conventional-changelog"
-    }
-  },
-  "devDependencies": {
-    "@commitlint/cli": "^17.7.2",
-    "@commitlint/config-conventional": "^17.7.0",
-    "@mui/icons-material": "^5.15.11",
-    "@testing-library/react": "^14.1.2",
-    "@types/jest": "^29.5.11",
-    "@types/react": "^18.2.45",
-    "@types/react-dom": "^18.2.18",
-    "@typescript-eslint/eslint-plugin": "^6.12.0",
-    "@typescript-eslint/parser": "^6.12.0",
-    "commitizen": "^4.3.0",
-    "cz-conventional-changelog": "^3.3.0",
-    "eslint": "^8.49.0",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.4",
-    "eslint-plugin-storybook": "^0.6.15",
-    "husky": "^8.0.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "lint-staged": "^14.0.1",
-    "mui-datatables": "^4.3.0",
-    "notistack": "^3.0.1",
-    "prettier": "^3.0.3",
-    "prettier-plugin-organize-imports": "^3.2.3",
-    "react-error-boundary": "^4.0.12",
-    "ts-jest": "^29.1.1",
-    "tsup": "^8.0.1",
-    "typescript": "^5.3.3"
-  },
-  "peerDependencies": {
-    "@emotion/react": "^11.11.3",
-    "@emotion/styled": "^11.11.0",
-    "@mui/material": "^5.15.11",
-    "@types/mui-datatables": "*",
-    "mui-datatables": "*",
-    "react": ">=17",
-    "react-dom": ">=17"
-  },
-  "peerDependenciesMeta": {
-    "@emotion/react": {
-      "optional": true
+    "name": "@layer5/sistent",
+    "version": "0.14.11",
+    "description": "Reusable React Components and SVG Icons library",
+    "repository": {
+        "type": "git",
+        "url": "git+ssh://git@github.com/layer5io/sistent.git"
+    },
+    "main": "./dist/index.js",
+    "module": "./dist/index..js",
+    "types": "./dist/index.d.ts",
+    "files": [
+        "dist"
+    ],
+    "scripts": {
+        "build": "NODE_ENV=production tsup",
+        "build:watch": "NODE_ENV=production tsup --watch",
+        "commitlint": "commitlint --edit",
+        "coverage": "jest --coverage",
+        "dev": "NODE_ENV=development tsup",
+        "format:check": "prettier --check \"**/*.{ts,tsx,md}\" --config ./.prettierrc",
+        "format:write": "prettier --write \"**/*.{ts,tsx,md}\" --config ./.prettierrc",
+        "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+        "lint:fix": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0 --fix",
+        "prepare": "husky install",
+        "test": "jest",
+        "versionup:major": "npm version major",
+        "versionup:minor": "npm version minor",
+        "versionup:patch": "npm version patch"
+    },
+    "lint-staged": {
+        "*.{ts,tsx,md}": [
+            "prettier --write",
+            "eslint --fix"
+        ]
     },
-    "@emotion/styled": {
-      "optional": true
+    "config": {
+        "commitizen": {
+            "path": "./node_modules/cz-conventional-changelog"
+        }
     },
-    "@mui/material": {
-      "optional": true
+    "devDependencies": {
+        "@commitlint/cli": "^17.7.2",
+        "@commitlint/config-conventional": "^17.7.0",
+        "@mui/icons-material": "^5.15.11",
+        "@testing-library/react": "^14.1.2",
+        "@types/jest": "^29.5.11",
+        "@types/react": "^18.2.45",
+        "@types/react-dom": "^18.2.18",
+        "@typescript-eslint/eslint-plugin": "^6.12.0",
+        "@typescript-eslint/parser": "^6.12.0",
+        "commitizen": "^4.3.0",
+        "cz-conventional-changelog": "^3.3.0",
+        "eslint": "^8.49.0",
+        "eslint-plugin-react": "^7.33.2",
+        "eslint-plugin-react-hooks": "^4.6.0",
+        "eslint-plugin-react-refresh": "^0.4.4",
+        "eslint-plugin-storybook": "^0.6.15",
+        "husky": "^8.0.0",
+        "jest": "^29.7.0",
+        "jest-environment-jsdom": "^29.7.0",
+        "lint-staged": "^14.0.1",
+        "mui-datatables": "^4.3.0",
+        "notistack": "^3.0.1",
+        "prettier": "^3.0.3",
+        "prettier-plugin-organize-imports": "^3.2.3",
+        "react-error-boundary": "^4.0.12",
+        "ts-jest": "^29.1.1",
+        "tsup": "^8.0.1",
+        "typescript": "^5.3.3"
     },
-    "mui-datatables": {
-      "optional": true
+    "peerDependencies": {
+        "@emotion/react": "^11.11.3",
+        "@emotion/styled": "^11.11.0",
+        "@mui/material": "^5.15.11",
+        "@types/mui-datatables": "*",
+        "mui-datatables": "*",
+        "react": ">=17",
+        "react-dom": ">=17"
     },
-    "react": {
-      "optional": true
+    "peerDependenciesMeta": {
+        "@emotion/react": {
+            "optional": true
+        },
+        "@emotion/styled": {
+            "optional": true
+        },
+        "@mui/material": {
+            "optional": true
+        },
+        "mui-datatables": {
+            "optional": true
+        },
+        "react": {
+            "optional": true
+        },
+        "react-dom": {
+            "optional": true
+        }
     },
-    "react-dom": {
-      "optional": true
+    "publishConfig": {
+        "access": "public"
     }
-  },
-  "publishConfig": {
-    "access": "public"
-  }
 }
diff --git a/src/custom/Modal/index.tsx b/src/custom/Modal/index.tsx
index 2c58ca120..9500ab4dd 100644
--- a/src/custom/Modal/index.tsx
+++ b/src/custom/Modal/index.tsx
@@ -1,5 +1,6 @@
 import { Dialog, DialogProps, IconButton, Typography, styled } from '@mui/material';
 import React, { useRef, useState } from 'react';
+import { Button, Paper } from '../../base';
 import { iconLarge } from '../../constants/iconsSizes';
 import { CloseIcon, InfoIcon } from '../../icons';
 
@@ -64,17 +65,12 @@ export const useModal = ({ headerIcon }: { headerIcon: React.ReactNode }) => {
 const CloseBtn = styled(IconButton)`
   && {
     transform: rotate(-90deg);
-    color: #ffffff;
 
     &:hover {
       transform: rotate(90deg);
       transition: all 0.3s ease-in;
       cursor: pointer;
     }
-
-    & svg {
-      fill: #fff;
-    }
   }
 `;
 
@@ -132,9 +128,10 @@ export const Modal: React.FC<ModalProps> = ({
   );
 };
 
-export const ModalBody = styled('div')`
-  padding: 1rem;
-`;
+export const ModalBody = styled(Paper)(({ theme }) => ({
+  padding: '1rem',
+  backgroundColor: theme.palette.background.default
+}));
 
 interface ModalFooterProps {
   children: React.ReactNode;
@@ -152,8 +149,37 @@ const StyledFooter = styled('div')({
 export const ModalFooter: React.FC<ModalFooterProps> = ({ children }) => {
   return (
     <StyledFooter>
-      <InfoIcon {...iconLarge} fill="#2196F3" />
+      <InfoIcon {...iconLarge} fill="#fff" />
       <div>{children}</div>
     </StyledFooter>
   );
 };
+
+// ModalButtonPrimary
+export const ModalButtonPrimary = styled(({ ...otherProps }) => (
+  <Button variant="contained" {...otherProps} />
+))(({ theme }) => ({
+  backgroundColor: theme.palette.background.brand?.default,
+  color: theme.palette.text.inverse
+}));
+
+// ModalButtonSecondary
+export const ModalButtonSecondary = styled(({ ...otherProps }) => (
+  <Button variant="outlined" {...otherProps} />
+))(({ theme }) => ({
+  '&.MuiButton-outlined': {
+    border: `1px solid ${theme.palette.common.white}`,
+    color: theme.palette.common?.white,
+    '&:hover': {
+      background: 'transparent',
+      color: theme.palette.common?.white
+    }
+  }
+}));
+
+// ModalButtonTertiary
+export const ModalButtonTertiary = styled(({ ...otherProps }) => (
+  <Button variant="text" {...otherProps} />
+))(({ theme }) => ({
+  color: theme.palette.text.inverse
+}));
diff --git a/src/custom/Stepper/index.tsx b/src/custom/Stepper/index.tsx
new file mode 100644
index 000000000..926747576
--- /dev/null
+++ b/src/custom/Stepper/index.tsx
@@ -0,0 +1,167 @@
+import { Box, IconProps, Stack, Step, StepConnector, StepLabel, Stepper } from '@mui/material';
+import { stepConnectorClasses } from '@mui/material/StepConnector';
+import { StepIconProps } from '@mui/material/StepIcon';
+import { styled } from '@mui/system';
+import React, { useState } from 'react';
+
+interface ColorlibStepIconPropsI extends StepIconProps {
+  icons: React.ComponentType<IconProps>[];
+}
+
+interface StepI {
+  label: string;
+  component: React.ComponentType;
+  icon: React.ComponentType<IconProps>;
+}
+
+interface UseStepperOptionsI {
+  steps: StepI[];
+}
+
+interface CustomizedStepperPropsI {
+  steps: StepI[];
+  activeStep: number;
+  ActiveStepContent: React.ElementType;
+}
+
+const ColorlibConnector = styled(StepConnector)(() => ({
+  [`&.${stepConnectorClasses.alternativeLabel}`]: {
+    top: 22
+  },
+  [`&.${stepConnectorClasses.active}`]: {
+    [`& .${stepConnectorClasses.line}`]: {
+      background: '#00B39F',
+      transition: 'all 1s ease-in'
+    }
+  },
+  [`&.${stepConnectorClasses.completed}`]: {
+    [`& .${stepConnectorClasses.line}`]: {
+      background: '#00B39F',
+      transition: 'all 1s ease-in'
+    }
+  },
+  [`& .${stepConnectorClasses.line}`]: {
+    height: 3,
+    border: 0,
+    background: '#00B39F',
+    borderRadius: 1,
+    transition: 'all 0.5s ease-out '
+  }
+}));
+
+const ColorlibStepIconRoot = styled('div')<{
+  ownerState: { completed?: boolean; active?: boolean };
+}>(({ theme, ownerState }) => ({
+  backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[700] : '#ccc',
+  zIndex: 1,
+  color: '#fff',
+  width: 50,
+  height: 50,
+  display: 'flex',
+  borderRadius: '50%',
+  justifyContent: 'center',
+  alignItems: 'center',
+  ...(ownerState.active && {
+    background: theme.palette.background.default,
+    color: '#3C494E',
+    border: '.2rem solid #00B39F',
+    transition: 'all 0.5s ease-in'
+  }),
+  ...(ownerState.completed && {
+    border: '.2rem solid #00B39F',
+    background: '#00B39F',
+    transition: 'all 0.5s ease-in'
+  })
+}));
+
+const StepContentWrapper = styled(Box)(({ theme }) => ({
+  backgroundColor: theme.palette.background.default,
+  padding: theme.spacing(2)
+}));
+
+function ColorlibStepIcon(props: ColorlibStepIconPropsI) {
+  const { active, completed, className, icons } = props;
+
+  const Icon = icons[Number(props.icon) - 1];
+  return (
+    <ColorlibStepIconRoot ownerState={{ completed, active }} className={className}>
+      {Icon ? <Icon /> : null}
+    </ColorlibStepIconRoot>
+  );
+}
+
+const CustomizedStepper: React.FC<CustomizedStepperPropsI> = ({
+  steps,
+  activeStep,
+  ActiveStepContent
+}) => {
+  const icons = steps.map((step) => step.icon);
+
+  return (
+    <Stack spacing={2}>
+      <Stack direction="row" justifyContent="center">
+        <Stepper alternativeLabel activeStep={activeStep} connector={<ColorlibConnector />}>
+          {steps.map((step) => (
+            <Step key={step.label}>
+              <StepLabel
+                StepIconComponent={(props) => <ColorlibStepIcon {...props} icons={icons} />}
+              >
+                {step.label}
+              </StepLabel>
+            </Step>
+          ))}
+        </Stepper>
+      </Stack>
+      <StepContentWrapper>
+        <ActiveStepContent />
+      </StepContentWrapper>
+    </Stack>
+  );
+};
+
+export const useStepper = ({ steps }: UseStepperOptionsI) => {
+  const [activeStep, setActiveStep] = useState(0);
+  const [sharedData, setSharedData] = useState(null);
+  const ActiveStepContent = steps[activeStep].component;
+
+  const handleNext = () => {
+    if (activeStep === steps.length - 1) {
+      return;
+    }
+    setActiveStep((prevActiveStep) => prevActiveStep + 1);
+  };
+
+  const goBack = () => {
+    if (activeStep === 0) {
+      return;
+    }
+    setActiveStep((prevActiveStep) => prevActiveStep - 1);
+  };
+
+  const goToStep = (step: number) => {
+    if (step < 0 || step > steps.length - 1) {
+      throw new Error('Invalid step');
+    }
+
+    setActiveStep(step);
+  };
+
+  const canGoBack = activeStep > 0;
+  const canGoForward = activeStep < steps.length - 1;
+
+  return {
+    activeStep,
+    setActiveStep,
+    sharedData,
+    setSharedData,
+    ActiveStepContent,
+    handleNext,
+    goBack,
+    goToStep,
+    steps,
+    canGoBack,
+    canGoForward
+  };
+};
+
+export { ColorlibConnector, CustomizedStepper };
diff --git a/src/custom/index.tsx b/src/custom/index.tsx
index 4486a63c4..12fd8d9b4 100644
--- a/src/custom/index.tsx
+++ b/src/custom/index.tsx
@@ -62,7 +62,18 @@ export {
 };
 
 //Custom Modal
-export { Modal, ModalBody, ModalFooter, useModal } from './Modal';
+export {
+  Modal,
+  ModalBody,
+  ModalButtonPrimary,
+  ModalButtonSecondary,
+  ModalButtonTertiary,
+  ModalFooter,
+  useModal
+} from './Modal';
+
+// Stepper
+export { CustomizedStepper, useStepper } from './Stepper';
 
 export type {
   CatalogFilterProps,