@campxdev/shared 1.8.4 → 1.8.5-0.alpha-1

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,72 +1,72 @@
-import ChevronLeft from '@mui/icons-material/ChevronLeft'
-import {
-  Breadcrumbs as MuiBreadcrumbs,
-  IconButton,
-  Stack,
-  styled,
-  Typography,
-} from '@mui/material'
-import { ReactNode } from 'react'
-import { Link, useNavigate } from 'react-router-dom'
-
-interface BreadcrumbsProps {
-  links: { to: string; 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 { ReactNode } from 'react'
+import { Link, useNavigate } from 'react-router-dom'
+
+interface BreadcrumbsProps {
+  links: { to: string; 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,98 +1,98 @@
-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}
-            sx={{ fontSize: '14px' }}
-          >
-            {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}
+            sx={{ fontSize: '14px' }}
+          >
+            {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>
+  )
+}