@campxdev/shared 0.5.19 → 0.5.21

package/src/components/ActionButton.tsx

@@ -1,28 +1,28 @@
-import { Button, ButtonProps, CircularProgress } from '@mui/material'
-import React from 'react'
-
-interface ActionButtonProps extends ButtonProps {
-  loading?: boolean
-  [key: string]: any
-  variant?: any
-}
-
-export default function ActionButton({
-  children,
-  loading,
-  ...props
-}: ActionButtonProps) {
-  return (
-    <React.Fragment>
-      <Button
-        variant={!props?.variant ? 'contained' : props?.variant}
-        color="primary"
-        endIcon={loading ? <CircularProgress size={20} /> : null}
-        disabled={loading}
-        {...props}
-      >
-        {children}
-      </Button>
-    </React.Fragment>
-  )
-}
+import { Button, ButtonProps, CircularProgress } from '@mui/material'
+import React from 'react'
+
+interface ActionButtonProps extends ButtonProps {
+  loading?: boolean
+  [key: string]: any
+  variant?: any
+}
+
+export default function ActionButton({
+  children,
+  loading,
+  ...props
+}: ActionButtonProps) {
+  return (
+    <React.Fragment>
+      <Button
+        variant={!props?.variant ? 'contained' : props?.variant}
+        color="primary"
+        endIcon={loading ? <CircularProgress size={20} /> : null}
+        disabled={loading}
+        {...props}
+      >
+        {children}
+      </Button>
+    </React.Fragment>
+  )
+}

package/src/components/Attachment.tsx

@@ -1,26 +1,26 @@
-import React from 'react'
-import styled from 'styled-components'
-
-interface AttachemntProps {
-  name: string
-  onClick?: Function
-  actions?: any
-}
-
-const AttachmentContainer = styled.div`
-  background: rgba(0, 0, 0, 0.1);
-  border-radius: 8px;
-  padding: 8px;
-  display: flex;
-  justify-content: space-between;
-  cursor: pointer;
-`
-
-export default function Attachment(props: AttachemntProps) {
-  return (
-    <AttachmentContainer onClick={() => props.onClick && props.onClick()}>
-      <div>{props.name}</div>
-      <div onClick={(e) => e.stopPropagation()}>{props.actions}</div>
-    </AttachmentContainer>
-  )
-}
+import React from 'react'
+import styled from 'styled-components'
+
+interface AttachemntProps {
+  name: string
+  onClick?: Function
+  actions?: any
+}
+
+const AttachmentContainer = styled.div`
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  padding: 8px;
+  display: flex;
+  justify-content: space-between;
+  cursor: pointer;
+`
+
+export default function Attachment(props: AttachemntProps) {
+  return (
+    <AttachmentContainer onClick={() => props.onClick && props.onClick()}>
+      <div>{props.name}</div>
+      <div onClick={(e) => e.stopPropagation()}>{props.actions}</div>
+    </AttachmentContainer>
+  )
+}

package/src/components/AutocompleteSearch/AutocompleteSearch.tsx

@@ -1,57 +1,57 @@
-import { Autocomplete as MuiAutocomplete, TextField } from '@mui/material'
-import _ from 'lodash'
-import { useEffect, useMemo, useState } from 'react'
-
-export default function AutocompleteSearch({
-  name,
-  value,
-  onInputChange,
-  onChange,
-  label,
-  options: _options,
-  ...props
-}) {
-  const [options, setOptions] = useState([])
-
-  const debouncedChangeHandler = useMemo(
-    () =>
-      _.debounce((e, newInput) => {
-        onInputChange(newInput)
-      }, 300),
-    [],
-  )
-
-  useEffect(() => {
-    if (!_options) return
-    setOptions((prev) => [..._options])
-  }, [_options])
-
-  return (
-    <MuiAutocomplete
-      id="autocomplete-search"
-      fullWidth
-      getOptionLabel={(option) =>
-        typeof option === 'string' ? option : option?.label
-      }
-      filterOptions={(x) => x}
-      options={options || []}
-      autoComplete
-      includeInputInList
-      filterSelectedOptions
-      value={value}
-      onChange={(event: any, newValue: any) => {
-        if (!newValue) return
-        // onInputChange(newValue)
-        onChange(newValue)
-      }}
-      onInputChange={debouncedChangeHandler}
-      renderInput={(params) => (
-        <TextField {...params} label={label} fullWidth />
-      )}
-      renderOption={(props, option) => {
-        return <li {...props}>{option?.label}</li>
-      }}
-      {...props}
-    />
-  )
-}
+import { Autocomplete as MuiAutocomplete, TextField } from '@mui/material'
+import _ from 'lodash'
+import { useEffect, useMemo, useState } from 'react'
+
+export default function AutocompleteSearch({
+  name,
+  value,
+  onInputChange,
+  onChange,
+  label,
+  options: _options,
+  ...props
+}) {
+  const [options, setOptions] = useState([])
+
+  const debouncedChangeHandler = useMemo(
+    () =>
+      _.debounce((e, newInput) => {
+        onInputChange(newInput)
+      }, 300),
+    [],
+  )
+
+  useEffect(() => {
+    if (!_options) return
+    setOptions((prev) => [..._options])
+  }, [_options])
+
+  return (
+    <MuiAutocomplete
+      id="autocomplete-search"
+      fullWidth
+      getOptionLabel={(option) =>
+        typeof option === 'string' ? option : option?.label
+      }
+      filterOptions={(x) => x}
+      options={options || []}
+      autoComplete
+      includeInputInList
+      filterSelectedOptions
+      value={value}
+      onChange={(event: any, newValue: any) => {
+        if (!newValue) return
+        // onInputChange(newValue)
+        onChange(newValue)
+      }}
+      onInputChange={debouncedChangeHandler}
+      renderInput={(params) => (
+        <TextField {...params} label={label} fullWidth />
+      )}
+      renderOption={(props, option) => {
+        return <li {...props}>{option?.label}</li>
+      }}
+      {...props}
+    />
+  )
+}

package/src/components/AutocompleteSearch/index.tsx

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

package/src/components/Breadcrumbs.tsx

@@ -1,73 +1,73 @@
-import ChevronLeft from '@mui/icons-material/ChevronLeft'
-import {
-  Breadcrumbs as MuiBreadcrumbs,
-  IconButton,
-  Stack,
-  styled,
-  Typography,
-} from '@mui/material'
-import React, { ReactNode } from 'react'
-import { Link, useNavigate } from 'react-router-dom'
-import { useHistory } from '../hooks/useRouter'
-
-interface BreadcrumbsProps {
-  links: { to: string | null; name: string | ReactNode }[]
-  icon?: ReactNode
-}
-
-const StyledStack = styled(Stack)(({ theme }) => ({
-  flexDirection: 'row',
-  alignItems: 'center',
-  '& .MuiSvgIcon-root': {
-    fontSize: '28px',
-  },
-  '& .MuiTypography-root': {
-    fontSize: '18px',
-    fontWeight: 600,
-  },
-}))
-
-const StyledLink = styled(Link)(({ theme }) => ({
-  textDecoration: 'none',
-  color: theme.palette.text.primary,
-  transition: 'color 0.2s ease-in-out',
-  fontFamily: 'Poppins',
-  '&:hover': {
-    color: theme.palette.common.yellow,
-  },
-}))
-
-const StyledIconButton = styled(IconButton)(({ theme }) => ({
-  color: theme.palette.text.primary,
-  padding: 0,
-  marginRight: '5px',
-}))
-
-export default function Breadcrumbs({ links, icon }: BreadcrumbsProps) {
-  const navigate = useNavigate()
-  let linksArray = links.slice(0, -1)
-  let currentPage = links.slice(-1)[0]
-  const backLink = links.slice(-2)[0]
-
-  return (
-    <StyledStack direction={'row'} alignItems='center'>
-      {linksArray?.length ? (
-        <StyledIconButton
-          onClick={() => {
-            navigate(backLink.to)
-          }}
-        >
-          {icon ? icon : <ChevronLeft />}
-        </StyledIconButton>
-      ) : null}
-      <MuiBreadcrumbs separator={<Typography variant='h3'>/</Typography>}>
-        {linksArray.map((link, index) => (
-          <StyledLink to={link.to} key={index}>
-            {link?.name}
-          </StyledLink>
-        ))}
-        <Typography variant='h3'>{currentPage?.name}</Typography>
-      </MuiBreadcrumbs>
-    </StyledStack>
-  )
-}
+import ChevronLeft from '@mui/icons-material/ChevronLeft'
+import {
+  Breadcrumbs as MuiBreadcrumbs,
+  IconButton,
+  Stack,
+  styled,
+  Typography,
+} from '@mui/material'
+import React, { ReactNode } from 'react'
+import { Link, useNavigate } from 'react-router-dom'
+import { useHistory } from '../hooks/useRouter'
+
+interface BreadcrumbsProps {
+  links: { to: string | null; name: string | ReactNode }[]
+  icon?: ReactNode
+}
+
+const StyledStack = styled(Stack)(({ theme }) => ({
+  flexDirection: 'row',
+  alignItems: 'center',
+  '& .MuiSvgIcon-root': {
+    fontSize: '28px',
+  },
+  '& .MuiTypography-root': {
+    fontSize: '18px',
+    fontWeight: 600,
+  },
+}))
+
+const StyledLink = styled(Link)(({ theme }) => ({
+  textDecoration: 'none',
+  color: theme.palette.text.primary,
+  transition: 'color 0.2s ease-in-out',
+  fontFamily: 'Poppins',
+  '&:hover': {
+    color: theme.palette.common.yellow,
+  },
+}))
+
+const StyledIconButton = styled(IconButton)(({ theme }) => ({
+  color: theme.palette.text.primary,
+  padding: 0,
+  marginRight: '5px',
+}))
+
+export default function Breadcrumbs({ links, icon }: BreadcrumbsProps) {
+  const navigate = useNavigate()
+  let linksArray = links.slice(0, -1)
+  let currentPage = links.slice(-1)[0]
+  const backLink = links.slice(-2)[0]
+
+  return (
+    <StyledStack direction={'row'} alignItems='center'>
+      {linksArray?.length ? (
+        <StyledIconButton
+          onClick={() => {
+            navigate(backLink.to)
+          }}
+        >
+          {icon ? icon : <ChevronLeft />}
+        </StyledIconButton>
+      ) : null}
+      <MuiBreadcrumbs separator={<Typography variant='h3'>/</Typography>}>
+        {linksArray.map((link, index) => (
+          <StyledLink to={link.to} key={index}>
+            {link?.name}
+          </StyledLink>
+        ))}
+        <Typography variant='h3'>{currentPage?.name}</Typography>
+      </MuiBreadcrumbs>
+    </StyledStack>
+  )
+}

package/src/components/Card.tsx

@@ -1,97 +1,97 @@
-import ChevronRight from '@mui/icons-material/ChevronRight'
-import {
-  Box,
-  Button,
-  Card as MuiCard,
-  CardActions,
-  CardContent,
-  CardHeader,
-  CardMedia,
-  styled,
-} from '@mui/material'
-import { ReactNode } from 'react'
-
-interface CardProps {
-  title: string | ReactNode
-  subheader?: string | ReactNode
-  children?: ReactNode
-  footer?: {
-    buttonText?: string | ReactNode
-    onClick: () => void
-    endIcon?: ReactNode
-    buttonProps?: any
-  }
-  image?: {
-    url: string
-    height: number
-  }
-  moreActions?: ReactNode
-}
-
-export default function Card({
-  title,
-  subheader,
-  children,
-  footer,
-  image,
-  moreActions,
-}: CardProps) {
-  const handleClick = (e) => {
-    e.preventDefault()
-    e.stopPropagation()
-    footer?.onClick()
-  }
-
-  return (
-    <StyledCard>
-      <CardMedia component="img" height={image?.height} image={image?.url} />
-      <Box sx={{ position: 'relative', width: '100%' }}>
-        <StyledMoreActions>{moreActions}</StyledMoreActions>
-        <CardHeader title={title} subheader={subheader} />
-      </Box>
-      <CardContent sx={{ height: 'fit-content' }}>{children}</CardContent>
-      {footer && (
-        <StyledCardActions>
-          <Button
-            variant="text"
-            fullWidth
-            onClick={handleClick}
-            endIcon={footer?.endIcon ?? <ChevronRight />}
-            {...footer?.buttonProps}
-          >
-            {footer?.buttonText ?? 'View'}
-          </Button>
-        </StyledCardActions>
-      )}
-    </StyledCard>
-  )
-}
-
-const StyledMoreActions = styled(Box)(({ theme }) => ({
-  position: 'absolute',
-  right: '10px',
-  top: '15px',
-}))
-
-const StyledCard = styled(MuiCard)(({ theme }) => ({
-  display: 'flex',
-  flexDirection: 'column',
-  width: '100%',
-  height: '100%',
-  '& .MuiCardContent-root': {
-    flexGrow: 1,
-  },
-  '& .MuiCardHeader-root': {
-    alignItems: 'baseline',
-    gap: '6px',
-  },
-}))
-
-const StyledCardActions = styled(CardActions)(({ theme }) => ({
-  borderTop: theme.borders.grayLight,
-  '& .MuiButton-root': {
-    justifyContent: 'space-between',
-    height: '40px',
-    padding: '20px',
-  },
-}))
+import ChevronRight from '@mui/icons-material/ChevronRight'
+import {
+  Box,
+  Button,
+  Card as MuiCard,
+  CardActions,
+  CardContent,
+  CardHeader,
+  CardMedia,
+  styled,
+} from '@mui/material'
+import { ReactNode } from 'react'
+
+interface CardProps {
+  title: string | ReactNode
+  subheader?: string | ReactNode
+  children?: ReactNode
+  footer?: {
+    buttonText?: string | ReactNode
+    onClick: () => void
+    endIcon?: ReactNode
+    buttonProps?: any
+  }
+  image?: {
+    url: string
+    height: number
+  }
+  moreActions?: ReactNode
+}
+
+export default function Card({
+  title,
+  subheader,
+  children,
+  footer,
+  image,
+  moreActions,
+}: CardProps) {
+  const handleClick = (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+    footer?.onClick()
+  }
+
+  return (
+    <StyledCard>
+      <CardMedia component="img" height={image?.height} image={image?.url} />
+      <Box sx={{ position: 'relative', width: '100%' }}>
+        <StyledMoreActions>{moreActions}</StyledMoreActions>
+        <CardHeader title={title} subheader={subheader} />
+      </Box>
+      <CardContent sx={{ height: 'fit-content' }}>{children}</CardContent>
+      {footer && (
+        <StyledCardActions>
+          <Button
+            variant="text"
+            fullWidth
+            onClick={handleClick}
+            endIcon={footer?.endIcon ?? <ChevronRight />}
+            {...footer?.buttonProps}
+          >
+            {footer?.buttonText ?? 'View'}
+          </Button>
+        </StyledCardActions>
+      )}
+    </StyledCard>
+  )
+}
+
+const StyledMoreActions = styled(Box)(({ theme }) => ({
+  position: 'absolute',
+  right: '10px',
+  top: '15px',
+}))
+
+const StyledCard = styled(MuiCard)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  width: '100%',
+  height: '100%',
+  '& .MuiCardContent-root': {
+    flexGrow: 1,
+  },
+  '& .MuiCardHeader-root': {
+    alignItems: 'baseline',
+    gap: '6px',
+  },
+}))
+
+const StyledCardActions = styled(CardActions)(({ theme }) => ({
+  borderTop: theme.borders.grayLight,
+  '& .MuiButton-root': {
+    justifyContent: 'space-between',
+    height: '40px',
+    padding: '20px',
+  },
+}))

package/src/components/CardsGrid.tsx

@@ -1,28 +1,28 @@
-import { Box, SxProps } from '@mui/material'
-import React from 'react'
-export default function CardsGrid({
-  cardWidth,
-  gap,
-  children,
-  sx,
-}: {
-  cardWidth: number
-  gap: number
-  children: React.ReactNode
-  sx?: SxProps
-}) {
-  return (
-    <Box
-      sx={{
-        width: '100%',
-        display: 'grid',
-        gridTemplateColumns: `repeat(auto-fill, minmax(${cardWidth}px, 1fr))`,
-        alignItems: 'start',
-        gap: `${gap}px`,
-        ...sx,
-      }}
-    >
-      {children}
-    </Box>
-  )
-}
+import { Box, SxProps } from '@mui/material'
+import React from 'react'
+export default function CardsGrid({
+  cardWidth,
+  gap,
+  children,
+  sx,
+}: {
+  cardWidth: number
+  gap: number
+  children: React.ReactNode
+  sx?: SxProps
+}) {
+  return (
+    <Box
+      sx={{
+        width: '100%',
+        display: 'grid',
+        gridTemplateColumns: `repeat(auto-fill, minmax(${cardWidth}px, 1fr))`,
+        alignItems: 'start',
+        gap: `${gap}px`,
+        ...sx,
+      }}
+    >
+      {children}
+    </Box>
+  )
+}