@campxdev/shared 0.3.11 → 0.3.13

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>
+  )
+}

package/src/components/Chips.tsx

@@ -1,77 +1,77 @@
-import { Chip, Stack, styled } from '@mui/material'
-import { ReactNode, useEffect, useState } from 'react'
-
-type IChip = {
-  label: string
-  value: string
-}
-
-interface ChipsProps {
-  list: { label: string | ReactNode; value: string | number }[]
-  selected: string[] | string | number
-  onSelected: (selected: IChip[] | any) => void
-  direction?: 'row' | 'column'
-  singleSelection?: boolean
-  toggle?: boolean
-}
-
-export default function Chips({
-  list = [],
-  selected: _selected,
-  onSelected,
-  direction = 'row',
-  singleSelection = true,
-  toggle = false,
-}: ChipsProps) {
-  const [selected, setSelected] = useState<any[] | any>([])
-
-  useEffect(() => {
-    setSelected(_selected)
-  }, [_selected])
-
-  const handleChange = (value) => {
-    if (singleSelection) {
-      if (selected === value && !toggle) {
-        setSelected('')
-        onSelected('')
-      } else {
-        setSelected(value)
-        onSelected(value)
-      }
-    } else {
-      if (selected.includes(value)) {
-        setSelected((prev) => prev.filter((item) => item !== value))
-        onSelected(selected.filter((item) => item !== value))
-      } else {
-        setSelected([...selected, value])
-        onSelected([...selected, value])
-      }
-    }
-  }
-
-  const isSelected = (value) =>
-    singleSelection ? selected === value : selected.includes(value)
-
-  return (
-    <Stack gap={'8px'} direction={direction} flexWrap={'wrap'}>
-      {list.map((item, index) => (
-        <StyledChip
-          key={index}
-          color={'primary'}
-          label={item.label}
-          clickable
-          variant={isSelected(item?.value) ? 'outlined' : 'filled'}
-          onClick={() => handleChange(item?.value)}
-        />
-      ))}
-    </Stack>
-  )
-}
-
-const StyledChip = styled(Chip)(({ theme }) => ({
-  minWidth: '100px',
-  '&.MuiButtonBase-root.MuiChip-filled': {
-    background: theme.palette.secondary.light,
-    color: theme.palette.text.primary,
-  },
-}))
+import { Chip, Stack, styled } from '@mui/material'
+import { ReactNode, useEffect, useState } from 'react'
+
+type IChip = {
+  label: string
+  value: string
+}
+
+interface ChipsProps {
+  list: { label: string | ReactNode; value: string | number }[]
+  selected: string[] | string | number
+  onSelected: (selected: IChip[] | any) => void
+  direction?: 'row' | 'column'
+  singleSelection?: boolean
+  toggle?: boolean
+}
+
+export default function Chips({
+  list = [],
+  selected: _selected,
+  onSelected,
+  direction = 'row',
+  singleSelection = true,
+  toggle = false,
+}: ChipsProps) {
+  const [selected, setSelected] = useState<any[] | any>([])
+
+  useEffect(() => {
+    setSelected(_selected)
+  }, [_selected])
+
+  const handleChange = (value) => {
+    if (singleSelection) {
+      if (selected === value && !toggle) {
+        setSelected('')
+        onSelected('')
+      } else {
+        setSelected(value)
+        onSelected(value)
+      }
+    } else {
+      if (selected.includes(value)) {
+        setSelected((prev) => prev.filter((item) => item !== value))
+        onSelected(selected.filter((item) => item !== value))
+      } else {
+        setSelected([...selected, value])
+        onSelected([...selected, value])
+      }
+    }
+  }
+
+  const isSelected = (value) =>
+    singleSelection ? selected === value : selected.includes(value)
+
+  return (
+    <Stack gap={'8px'} direction={direction} flexWrap={'wrap'}>
+      {list.map((item, index) => (
+        <StyledChip
+          key={index}
+          color={'primary'}
+          label={item.label}
+          clickable
+          variant={isSelected(item?.value) ? 'outlined' : 'filled'}
+          onClick={() => handleChange(item?.value)}
+        />
+      ))}
+    </Stack>
+  )
+}
+
+const StyledChip = styled(Chip)(({ theme }) => ({
+  minWidth: '100px',
+  '&.MuiButtonBase-root.MuiChip-filled': {
+    background: theme.palette.secondary.light,
+    color: theme.palette.text.primary,
+  },
+}))

package/src/components/Detail.tsx

@@ -1,15 +1,15 @@
-import React from 'react'
-
-interface DetailProps {
-  label: string
-  value: string | number
-}
-
-export default function Detail(props: DetailProps) {
-  return (
-    <div>
-      <div>{props.label}</div>
-      <h3>{props.value}</h3>
-    </div>
-  )
-}
+import React from 'react'
+
+interface DetailProps {
+  label: string
+  value: string | number
+}
+
+export default function Detail(props: DetailProps) {
+  return (
+    <div>
+      <div>{props.label}</div>
+      <h3>{props.value}</h3>
+    </div>
+  )
+}