@campxdev/shared 1.0.5 → 1.1.0

package/src/components/ModalButtons/DialogButton.tsx

@@ -1,88 +1,88 @@
-import { Close } from '@mui/icons-material'
-import {
-  alpha,
-  Box,
-  ButtonProps,
-  Dialog,
-  DialogProps,
-  IconButton,
-  styled,
-  Typography,
-} from '@mui/material'
-import { createElement, ReactNode, useState } from 'react'
-
-const StyledDialogHeader = styled(Box)(({ theme }) => ({
-  height: '64px',
-  backgroundColor: alpha(theme.palette.text.secondary, 0.1),
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  padding: '0.6rem 1rem',
-}))
-
-const StyledDialogContent = styled(Box)(({ theme }) => ({
-  width: '100%',
-  padding: '1rem',
-}))
-
-type ContentProps = {
-  close: () => void
-}
-
-interface DrawerButtonProps {
-  button: any
-  content: (props: ContentProps) => ReactNode
-  title: string | ReactNode
-  btnTxt?: string | ReactNode
-  btnProps?: ButtonProps
-  dialogProps?: Omit<DialogProps, 'open'>
-  onDialogClose?: () => void
-}
-
-export default function DialogButton({
-  button: Button,
-  content,
-  title,
-  btnTxt,
-  btnProps,
-  dialogProps,
-  onDialogClose,
-}: DrawerButtonProps) {
-  const [open, setOpen] = useState(false)
-
-  const ButtonEl = (props) => (
-    <Button {...props} {...btnProps} sx={{ fontSize: '14px', fontWeight: 600 }}>
-      {btnTxt}
-    </Button>
-  )
-
-  const MyButton = createElement(ButtonEl, {
-    onClick: () => setOpen(true),
-  })
-
-  const onClose = () => {
-    onDialogClose && onDialogClose()
-    setOpen(false)
-  }
-  return (
-    <>
-      {MyButton}
-      <Dialog
-        PaperProps={{ sx: { borderRadius: '10px' } }}
-        fullWidth
-        onClose={onClose}
-        open={open}
-        transitionDuration={200}
-        {...dialogProps}
-      >
-        <StyledDialogHeader>
-          <Typography fontWeight={600}>{title}</Typography>
-          <IconButton onClick={onClose}>
-            <Close />
-          </IconButton>
-        </StyledDialogHeader>
-        <StyledDialogContent>{content({ close: onClose })}</StyledDialogContent>
-      </Dialog>
-    </>
-  )
-}
+import { Close } from '@mui/icons-material'
+import {
+  alpha,
+  Box,
+  ButtonProps,
+  Dialog,
+  DialogProps,
+  IconButton,
+  styled,
+  Typography,
+} from '@mui/material'
+import { createElement, ReactNode, useState } from 'react'
+
+const StyledDialogHeader = styled(Box)(({ theme }) => ({
+  height: '64px',
+  backgroundColor: alpha(theme.palette.text.secondary, 0.1),
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: '0.6rem 1rem',
+}))
+
+const StyledDialogContent = styled(Box)(({ theme }) => ({
+  width: '100%',
+  padding: '1rem',
+}))
+
+type ContentProps = {
+  close: () => void
+}
+
+interface DrawerButtonProps {
+  button: any
+  content: (props: ContentProps) => ReactNode
+  title: string | ReactNode
+  btnTxt?: string | ReactNode
+  btnProps?: ButtonProps
+  dialogProps?: Omit<DialogProps, 'open'>
+  onDialogClose?: () => void
+}
+
+export default function DialogButton({
+  button: Button,
+  content,
+  title,
+  btnTxt,
+  btnProps,
+  dialogProps,
+  onDialogClose,
+}: DrawerButtonProps) {
+  const [open, setOpen] = useState(false)
+
+  const ButtonEl = (props) => (
+    <Button {...props} {...btnProps} sx={{ fontSize: '14px', fontWeight: 600 }}>
+      {btnTxt}
+    </Button>
+  )
+
+  const MyButton = createElement(ButtonEl, {
+    onClick: () => setOpen(true),
+  })
+
+  const onClose = () => {
+    onDialogClose && onDialogClose()
+    setOpen(false)
+  }
+  return (
+    <>
+      {MyButton}
+      <Dialog
+        PaperProps={{ sx: { borderRadius: '10px' } }}
+        fullWidth
+        onClose={onClose}
+        open={open}
+        transitionDuration={200}
+        {...dialogProps}
+      >
+        <StyledDialogHeader>
+          <Typography fontWeight={600}>{title}</Typography>
+          <IconButton onClick={onClose}>
+            <Close />
+          </IconButton>
+        </StyledDialogHeader>
+        <StyledDialogContent>{content({ close: onClose })}</StyledDialogContent>
+      </Dialog>
+    </>
+  )
+}

package/src/components/ModalButtons/DrawerButton.tsx

@@ -1,89 +1,89 @@
-import { Close } from '@mui/icons-material'
-import {
-  alpha,
-  Box,
-  ButtonProps,
-  Drawer,
-  IconButton,
-  styled,
-  Typography,
-} from '@mui/material'
-import { createElement, ReactNode, useState } from 'react'
-
-const StyledDrawerHeader = styled(Box)(({ theme }) => ({
-  height: '64px',
-  backgroundColor: alpha(theme.palette.text.secondary, 0.1),
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  padding: '0.6rem 1rem',
-}))
-
-const StyledDrawerContent = styled(Box)(({ theme }) => ({
-  padding: '1rem',
-  height: 'calc(100vh - 64px)',
-  overflowY: 'auto',
-  paddingBottom: '4rem',
-}))
-
-type ContentProps = {
-  close: () => void
-}
-
-interface DrawerButtonProps {
-  button: any
-  content: (props: ContentProps) => ReactNode
-  title: string | ReactNode
-  btnTxt?: string | ReactNode
-  btnProps?: ButtonProps
-}
-
-export default function DrawerButton({
-  button: Button,
-  content,
-  title,
-  btnTxt,
-  btnProps,
-}: DrawerButtonProps) {
-  const [open, setOpen] = useState(false)
-
-  const ButtonEl = (props) => (
-    <Button {...props} {...btnProps} sx={{ fontSize: '14px', fontWeight: 600 }}>
-      {btnTxt}
-    </Button>
-  )
-
-  const MyButton = createElement(ButtonEl, {
-    onClick: () => setOpen(true),
-  })
-
-  const onClose = () => {
-    setOpen(false)
-  }
-  return (
-    <>
-      {MyButton}
-      <Drawer
-        anchor="right"
-        elevation={10}
-        onClose={onClose}
-        open={open}
-        sx={{
-          zIndex: 500,
-          '& .MuiDrawer-paper': {
-            boxSizing: 'border-box',
-            width: 600,
-          },
-        }}
-      >
-        <StyledDrawerHeader>
-          <Typography fontWeight={600}>{title}</Typography>
-          <IconButton onClick={onClose}>
-            <Close />
-          </IconButton>
-        </StyledDrawerHeader>
-        <StyledDrawerContent>{content({ close: onClose })}</StyledDrawerContent>
-      </Drawer>
-    </>
-  )
-}
+import { Close } from '@mui/icons-material'
+import {
+  alpha,
+  Box,
+  ButtonProps,
+  Drawer,
+  IconButton,
+  styled,
+  Typography,
+} from '@mui/material'
+import { createElement, ReactNode, useState } from 'react'
+
+const StyledDrawerHeader = styled(Box)(({ theme }) => ({
+  height: '64px',
+  backgroundColor: alpha(theme.palette.text.secondary, 0.1),
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: '0.6rem 1rem',
+}))
+
+const StyledDrawerContent = styled(Box)(({ theme }) => ({
+  padding: '1rem',
+  height: 'calc(100vh - 64px)',
+  overflowY: 'auto',
+  paddingBottom: '4rem',
+}))
+
+type ContentProps = {
+  close: () => void
+}
+
+interface DrawerButtonProps {
+  button: any
+  content: (props: ContentProps) => ReactNode
+  title: string | ReactNode
+  btnTxt?: string | ReactNode
+  btnProps?: ButtonProps
+}
+
+export default function DrawerButton({
+  button: Button,
+  content,
+  title,
+  btnTxt,
+  btnProps,
+}: DrawerButtonProps) {
+  const [open, setOpen] = useState(false)
+
+  const ButtonEl = (props) => (
+    <Button {...props} {...btnProps} sx={{ fontSize: '14px', fontWeight: 600 }}>
+      {btnTxt}
+    </Button>
+  )
+
+  const MyButton = createElement(ButtonEl, {
+    onClick: () => setOpen(true),
+  })
+
+  const onClose = () => {
+    setOpen(false)
+  }
+  return (
+    <>
+      {MyButton}
+      <Drawer
+        anchor="right"
+        elevation={10}
+        onClose={onClose}
+        open={open}
+        sx={{
+          zIndex: 500,
+          '& .MuiDrawer-paper': {
+            boxSizing: 'border-box',
+            width: 600,
+          },
+        }}
+      >
+        <StyledDrawerHeader>
+          <Typography fontWeight={600}>{title}</Typography>
+          <IconButton onClick={onClose}>
+            <Close />
+          </IconButton>
+        </StyledDrawerHeader>
+        <StyledDrawerContent>{content({ close: onClose })}</StyledDrawerContent>
+      </Drawer>
+    </>
+  )
+}

package/src/components/ModalButtons/index.tsx

@@ -1,4 +1,4 @@
-import DialogButton from './DialogButton'
-import DrawerButton from './DrawerButton'
-
-export { DialogButton, DrawerButton }
+import DialogButton from './DialogButton'
+import DrawerButton from './DrawerButton'
+
+export { DialogButton, DrawerButton }

package/src/components/NoDataIllustration/NoDataIllustration.tsx

@@ -1,32 +1,32 @@
-import { Box, Typography } from '@mui/material'
-import Image from '../Image'
-import { ReactNode } from 'react'
-
-interface Props {
-  imageSrc: string
-  height?: string
-  message?: string | ReactNode
-}
-
-export default function NoData({
-  imageSrc,
-  height = '300px',
-  message = 'No Data Found',
-}: Props) {
-  return (
-    <Box
-      sx={{
-        marginTop: '20px',
-      }}
-    >
-      <Image alt="No Data Found" height={height} width="auto" src={imageSrc} />
-      {typeof message === 'string' ? (
-        <Typography marginTop={'20px'} textAlign={'center'}>
-          {message}
-        </Typography>
-      ) : (
-        <>{message}</>
-      )}
-    </Box>
-  )
-}
+import { Box, Typography } from '@mui/material'
+import Image from '../Image'
+import { ReactNode } from 'react'
+
+interface Props {
+  imageSrc: string
+  height?: string
+  message?: string | ReactNode
+}
+
+export default function NoData({
+  imageSrc,
+  height = '300px',
+  message = 'No Data Found',
+}: Props) {
+  return (
+    <Box
+      sx={{
+        marginTop: '20px',
+      }}
+    >
+      <Image alt="No Data Found" height={height} width="auto" src={imageSrc} />
+      {typeof message === 'string' ? (
+        <Typography marginTop={'20px'} textAlign={'center'}>
+          {message}
+        </Typography>
+      ) : (
+        <>{message}</>
+      )}
+    </Box>
+  )
+}

package/src/components/NoDataIllustration/index.tsx

@@ -1 +1 @@
-export { default } from './NoDataIllustration'
+export { default } from './NoDataIllustration'

package/src/components/PageContent.tsx

@@ -1,17 +1,17 @@
-import { Box, styled } from '@mui/material'
-import ErrorBoundary from './ErrorBoundary'
-
-const StyledPageContent = styled(Box)(() => ({
-  paddingLeft: '25px',
-  paddingRight: '25px',
-  marginTop: '16px',
-  paddingBottom: '3rem',
-}))
-
-export function PageContent(props) {
-  return (
-    <StyledPageContent style={props.style}>
-      <ErrorBoundary>{props.children}</ErrorBoundary>
-    </StyledPageContent>
-  )
-}
+import { Box, styled } from '@mui/material'
+import ErrorBoundary from './ErrorBoundary'
+
+const StyledPageContent = styled(Box)(() => ({
+  paddingLeft: '25px',
+  paddingRight: '25px',
+  marginTop: '16px',
+  paddingBottom: '3rem',
+}))
+
+export function PageContent(props) {
+  return (
+    <StyledPageContent style={props.style}>
+      <ErrorBoundary>{props.children}</ErrorBoundary>
+    </StyledPageContent>
+  )
+}

package/src/components/PageHeader.tsx

@@ -1,52 +1,52 @@
-import { Box, styled, Typography } from '@mui/material'
-import { ReactNode } from 'react'
-
-interface PageHeaderProps {
-  title: string | ReactNode
-  subtitle?: string | ReactNode
-  actions?: ReactNode
-  noPadding?: boolean
-}
-
-const StyledBox = styled(Box, {
-  shouldForwardProp: (prop) => prop !== 'noPadding',
-})<{ noPadding: boolean }>(({ theme, noPadding }) => ({
-  minHeight: '40px',
-  padding: noPadding ? 0 : '0 25px',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  margin: '1rem 0',
-  flexWrap: 'wrap',
-  '& .actions': {
-    display: 'flex',
-    gap: '1rem',
-    alignItems: 'center',
-    marginLeft: 'auto',
-  },
-}))
-
-export default function PageHeader({
-  title,
-  subtitle,
-  actions,
-  noPadding = false,
-}: PageHeaderProps) {
-  return (
-    <StyledBox noPadding={noPadding}>
-      <>
-        {typeof title === 'string' ? (
-          <Typography variant="h1">{title}</Typography>
-        ) : (
-          title
-        )}
-        {typeof subtitle === 'string' ? (
-          <Typography>{subtitle}</Typography>
-        ) : (
-          <Box marginTop={'10px'}>{subtitle}</Box>
-        )}
-      </>
-      <Box className="actions">{actions}</Box>
-    </StyledBox>
-  )
-}
+import { Box, styled, Typography } from '@mui/material'
+import { ReactNode } from 'react'
+
+interface PageHeaderProps {
+  title: string | ReactNode
+  subtitle?: string | ReactNode
+  actions?: ReactNode
+  noPadding?: boolean
+}
+
+const StyledBox = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'noPadding',
+})<{ noPadding: boolean }>(({ theme, noPadding }) => ({
+  minHeight: '40px',
+  padding: noPadding ? 0 : '0 25px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  margin: '1rem 0',
+  flexWrap: 'wrap',
+  '& .actions': {
+    display: 'flex',
+    gap: '1rem',
+    alignItems: 'center',
+    marginLeft: 'auto',
+  },
+}))
+
+export default function PageHeader({
+  title,
+  subtitle,
+  actions,
+  noPadding = false,
+}: PageHeaderProps) {
+  return (
+    <StyledBox noPadding={noPadding}>
+      <>
+        {typeof title === 'string' ? (
+          <Typography variant="h1">{title}</Typography>
+        ) : (
+          title
+        )}
+        {typeof subtitle === 'string' ? (
+          <Typography>{subtitle}</Typography>
+        ) : (
+          <Box marginTop={'10px'}>{subtitle}</Box>
+        )}
+      </>
+      <Box className="actions">{actions}</Box>
+    </StyledBox>
+  )
+}

package/src/components/PageNotFound.tsx

@@ -1,26 +1,26 @@
-import { Box, Button, Typography } from '@mui/material'
-import axios from 'axios'
-import React, { useEffect, useState } from 'react'
-import { pagenotfound } from '../assets/images'
-
-function PageNotFound() {
-  return (
-    <>
-      <Box
-        sx={{
-          width: '100%',
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          justifyContent: 'center',
-          marginTop: '50px',
-        }}
-      >
-        <img src={pagenotfound} alt="page not found" width={470} />
-        <Typography variant="h1">Page Not Found.</Typography>
-      </Box>
-    </>
-  )
-}
-
-export default PageNotFound
+import { Box, Button, Typography } from '@mui/material'
+import axios from 'axios'
+import React, { useEffect, useState } from 'react'
+import { pagenotfound } from '../assets/images'
+
+function PageNotFound() {
+  return (
+    <>
+      <Box
+        sx={{
+          width: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          marginTop: '50px',
+        }}
+      >
+        <img src={pagenotfound} alt="page not found" width={470} />
+        <Typography variant="h1">Page Not Found.</Typography>
+      </Box>
+    </>
+  )
+}
+
+export default PageNotFound