@campxdev/shared 1.0.4 → 1.1.0

package/src/components/SwitchButton/SwitchButton.tsx

@@ -1,41 +1,41 @@
-import { Box, styled, Switch, Typography } from '@mui/material'
-import { ReactNode } from 'react'
-
-interface SwicthButtonProps {
-  label: ReactNode
-  checked: boolean
-  onChange: (v: any) => void
-  subtitle?: ReactNode
-}
-
-export default function SwitchButton({
-  label,
-  checked,
-  onChange,
-  subtitle,
-}: SwicthButtonProps) {
-  return (
-    <StyledBox>
-      <Box sx={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
-        <Typography variant="body1">{label}</Typography>
-        <Switch
-          checked={checked}
-          onChange={(e, checked) => onChange(checked)}
-        />
-      </Box>
-      {subtitle && <Typography variant="subtitle1">{subtitle}</Typography>}
-    </StyledBox>
-  )
-}
-
-const StyledBox = styled(Box)(({ theme }) => ({
-  '& > .MuiBox-root': {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    gap: '1rem',
-  },
-  '& > .MuiTypography-root': {
-    marginTop: '0.5rem',
-  },
-}))
+import { Box, styled, Switch, Typography } from '@mui/material'
+import { ReactNode } from 'react'
+
+interface SwicthButtonProps {
+  label: ReactNode
+  checked: boolean
+  onChange: (v: any) => void
+  subtitle?: ReactNode
+}
+
+export default function SwitchButton({
+  label,
+  checked,
+  onChange,
+  subtitle,
+}: SwicthButtonProps) {
+  return (
+    <StyledBox>
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+        <Typography variant="body1">{label}</Typography>
+        <Switch
+          checked={checked}
+          onChange={(e, checked) => onChange(checked)}
+        />
+      </Box>
+      {subtitle && <Typography variant="subtitle1">{subtitle}</Typography>}
+    </StyledBox>
+  )
+}
+
+const StyledBox = styled(Box)(({ theme }) => ({
+  '& > .MuiBox-root': {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: '1rem',
+  },
+  '& > .MuiTypography-root': {
+    marginTop: '0.5rem',
+  },
+}))

package/src/components/SwitchButton/index.tsx

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

package/src/components/Table.tsx

@@ -1,42 +1,42 @@
-import styled from 'styled-components'
-
-const secondaryColor = '#233659'
-const primaryColor = '#c02633'
-
-export const Table = styled.table`
-  background: white;
-  border: 1px solid #dfdfdf;
-  padding: ${(props: any) => props.cellPadding || '4px 8px'};
-  border-collapse: collapse;
-  box-shadow: 0 3px 15px rgb(39 59 128 / 20%);
-  thead {
-    background-color: ${secondaryColor};
-    color: white;
-    border-top: 1px solid #ddd;
-    border-bottom: 1px solid #ddd;
-  }
-
-  thead tr th {
-    padding-top: 8px;
-    padding-bottom: 8px;
-  }
-
-  tbody tr:hover {
-    background-color: #f9f9f9;
-  }
-
-  td {
-    /* border: 1px solid #dfdfdf; */
-    border: 1px solid #dfdfdf;
-  }
-
-  td,
-  th {
-    padding: ${(props: any) => props.cellPadding || '4px 8px'};
-  }
-
-  tbody tr:nth-child(even) {
-    /* background: #f4f4f4; */
-    /* background: #fafcff; */
-  }
-`
+import styled from 'styled-components'
+
+const secondaryColor = '#233659'
+const primaryColor = '#c02633'
+
+export const Table = styled.table`
+  background: white;
+  border: 1px solid #dfdfdf;
+  padding: ${(props: any) => props.cellPadding || '4px 8px'};
+  border-collapse: collapse;
+  box-shadow: 0 3px 15px rgb(39 59 128 / 20%);
+  thead {
+    background-color: ${secondaryColor};
+    color: white;
+    border-top: 1px solid #ddd;
+    border-bottom: 1px solid #ddd;
+  }
+
+  thead tr th {
+    padding-top: 8px;
+    padding-bottom: 8px;
+  }
+
+  tbody tr:hover {
+    background-color: #f9f9f9;
+  }
+
+  td {
+    /* border: 1px solid #dfdfdf; */
+    border: 1px solid #dfdfdf;
+  }
+
+  td,
+  th {
+    padding: ${(props: any) => props.cellPadding || '4px 8px'};
+  }
+
+  tbody tr:nth-child(even) {
+    /* background: #f4f4f4; */
+    /* background: #fafcff; */
+  }
+`

package/src/components/TableComponent/BatchActionsHeader.tsx

@@ -1,58 +1,58 @@
-import { Box, Typography } from '@mui/material'
-import DropDownButton from '../DropDownButton'
-import {
-  StyledActionIconButton,
-  StyledActionsRow,
-  StyledTableActionsHeader,
-} from './styles'
-
-export default function BatchActionsHeader({
-  selectedRowIds,
-  actions,
-  clearSelection,
-}) {
-  const ids = Object?.keys(selectedRowIds)
-  const rowActions = actions?.filter((item) => !item?.dropdown)
-  const dropDownActions = actions?.filter((item) => item?.dropdown)
-
-  if (!ids?.length) return null
-  return (
-    <StyledTableActionsHeader>
-      <Typography variant="subtitle1">
-        Selected <span>{ids?.length}</span> rows
-      </Typography>
-      <RowActions actions={rowActions} ids={ids} clear={clearSelection} />
-      <DropDownActions
-        actions={dropDownActions}
-        ids={ids}
-        clear={clearSelection}
-      />
-    </StyledTableActionsHeader>
-  )
-}
-
-const RowActions = ({ actions, ids, clear }) => {
-  if (!actions?.length) return null
-
-  return (
-    <StyledActionsRow>
-      {actions?.map(({ component }, index) => (
-        <Box key={index}>{component(ids, clear)}</Box>
-      ))}
-    </StyledActionsRow>
-  )
-}
-const DropDownActions = ({ actions, ids, clear }) => {
-  if (!actions?.length) return null
-  return (
-    <DropDownButton
-      icon={{
-        icon: <StyledActionIconButton />,
-      }}
-      menu={actions?.map((action) => ({
-        ...action,
-        // onClick: () => action?.onClick(ids, clear),
-      }))}
-    />
-  )
-}
+import { Box, Typography } from '@mui/material'
+import DropDownButton from '../DropDownButton'
+import {
+  StyledActionIconButton,
+  StyledActionsRow,
+  StyledTableActionsHeader,
+} from './styles'
+
+export default function BatchActionsHeader({
+  selectedRowIds,
+  actions,
+  clearSelection,
+}) {
+  const ids = Object?.keys(selectedRowIds)
+  const rowActions = actions?.filter((item) => !item?.dropdown)
+  const dropDownActions = actions?.filter((item) => item?.dropdown)
+
+  if (!ids?.length) return null
+  return (
+    <StyledTableActionsHeader>
+      <Typography variant="subtitle1">
+        Selected <span>{ids?.length}</span> rows
+      </Typography>
+      <RowActions actions={rowActions} ids={ids} clear={clearSelection} />
+      <DropDownActions
+        actions={dropDownActions}
+        ids={ids}
+        clear={clearSelection}
+      />
+    </StyledTableActionsHeader>
+  )
+}
+
+const RowActions = ({ actions, ids, clear }) => {
+  if (!actions?.length) return null
+
+  return (
+    <StyledActionsRow>
+      {actions?.map(({ component }, index) => (
+        <Box key={index}>{component(ids, clear)}</Box>
+      ))}
+    </StyledActionsRow>
+  )
+}
+const DropDownActions = ({ actions, ids, clear }) => {
+  if (!actions?.length) return null
+  return (
+    <DropDownButton
+      icon={{
+        icon: <StyledActionIconButton />,
+      }}
+      menu={actions?.map((action) => ({
+        ...action,
+        // onClick: () => action?.onClick(ids, clear),
+      }))}
+    />
+  )
+}

package/src/components/TableComponent/Icons/index.tsx

@@ -1,50 +1,50 @@
-export const SortIcon = () => {
-  return (
-    <>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        id="Layer_1"
-        data-name="Layer 1"
-        viewBox="0 0 24 24"
-        width="16.416"
-        height="16.416"
-      >
-        <path d="M11.293,17.707l-3.293,3.293V1c0-.553-.447-1-1-1s-1,.447-1,1V21l-3.293-3.293c-.391-.391-1.023-.391-1.414,0s-.391,1.023,0,1.414l4.293,4.293c.39,.39,.902,.585,1.414,.585s1.024-.195,1.414-.585l4.293-4.293c.391-.391,.391-1.023,0-1.414s-1.023-.391-1.414,0ZM22.707,6.293c.391-.391,.391-1.023,0-1.414L18.414,.586C18.024,.196,17.512,0,17,0s-1.024,.195-1.414,.585l-4.293,4.293c-.391,.391-.391,1.023,0,1.414s1.023,.391,1.414,0l3.293-3.293V23c0,.553,.447,1,1,1s1-.447,1-1V3l3.293,3.293c.391,.391,1.023,.391,1.414,0Z" />
-      </svg>
-    </>
-  )
-}
-
-export const SortAscIcon = () => {
-  return (
-    <>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        id="Layer_1"
-        data-name="Layer 1"
-        viewBox="0 0 24 24"
-        width="16.416"
-        height="16.416"
-      >
-        <path d="M24,8c0,.553-.447,1-1,1H10c-.552,0-1-.447-1-1s.448-1,1-1h13c.553,0,1,.447,1,1Zm-4,4H10c-.552,0-1,.447-1,1s.448,1,1,1h10c.553,0,1-.447,1-1s-.447-1-1-1Zm-3,5h-7c-.552,0-1,.447-1,1s.448,1,1,1h7c.553,0,1-.447,1-1s-.447-1-1-1Zm-3,5h-4c-.552,0-1,.447-1,1s.448,1,1,1h4c.552,0,1-.447,1-1s-.448-1-1-1ZM9.121,3.293L6.413,.584c-.779-.777-2.047-.778-2.828,0L.878,3.293c-.391,.391-.391,1.023,0,1.414s1.024,.391,1.414,0l1.708-1.708V23c0,.553,.448,1,1,1s1-.447,1-1V2.999l1.707,1.708c.195,.195,.451,.293,.707,.293s.512-.098,.707-.293c.391-.391,.391-1.023,0-1.414Z" />
-      </svg>
-    </>
-  )
-}
-
-export const SortDescIcon = () => {
-  return (
-    <>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        id="Layer_1"
-        data-name="Layer 1"
-        viewBox="0 0 24 24"
-        width="16.416"
-        height="16.416"
-      >
-        <path d="M24,1c0,.553-.448,1-1,1H10c-.552,0-1-.447-1-1s.448-1,1-1h13c.552,0,1,.447,1,1Zm-4,4H10c-.552,0-1,.447-1,1s.448,1,1,1h10c.552,0,1-.447,1-1s-.448-1-1-1Zm-3,5h-7c-.552,0-1,.447-1,1s.448,1,1,1h7c.552,0,1-.447,1-1s-.448-1-1-1Zm-3,5h-4c-.552,0-1,.447-1,1s.448,1,1,1h4c.552,0,1-.447,1-1s-.448-1-1-1Zm-6.293,4.293l-1.707,1.707V1c0-.553-.448-1-1-1s-1,.447-1,1V21l-1.708-1.708c-.391-.391-1.023-.391-1.414,0s-.391,1.023,0,1.414l2.707,2.707c.39,.39,.902,.585,1.415,.585s1.024-.195,1.414-.585l2.707-2.707c.391-.391,.391-1.023,0-1.414s-1.023-.391-1.414,0Z" />
-      </svg>
-    </>
-  )
-}
+export const SortIcon = () => {
+  return (
+    <>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        id="Layer_1"
+        data-name="Layer 1"
+        viewBox="0 0 24 24"
+        width="16.416"
+        height="16.416"
+      >
+        <path d="M11.293,17.707l-3.293,3.293V1c0-.553-.447-1-1-1s-1,.447-1,1V21l-3.293-3.293c-.391-.391-1.023-.391-1.414,0s-.391,1.023,0,1.414l4.293,4.293c.39,.39,.902,.585,1.414,.585s1.024-.195,1.414-.585l4.293-4.293c.391-.391,.391-1.023,0-1.414s-1.023-.391-1.414,0ZM22.707,6.293c.391-.391,.391-1.023,0-1.414L18.414,.586C18.024,.196,17.512,0,17,0s-1.024,.195-1.414,.585l-4.293,4.293c-.391,.391-.391,1.023,0,1.414s1.023,.391,1.414,0l3.293-3.293V23c0,.553,.447,1,1,1s1-.447,1-1V3l3.293,3.293c.391,.391,1.023,.391,1.414,0Z" />
+      </svg>
+    </>
+  )
+}
+
+export const SortAscIcon = () => {
+  return (
+    <>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        id="Layer_1"
+        data-name="Layer 1"
+        viewBox="0 0 24 24"
+        width="16.416"
+        height="16.416"
+      >
+        <path d="M24,8c0,.553-.447,1-1,1H10c-.552,0-1-.447-1-1s.448-1,1-1h13c.553,0,1,.447,1,1Zm-4,4H10c-.552,0-1,.447-1,1s.448,1,1,1h10c.553,0,1-.447,1-1s-.447-1-1-1Zm-3,5h-7c-.552,0-1,.447-1,1s.448,1,1,1h7c.553,0,1-.447,1-1s-.447-1-1-1Zm-3,5h-4c-.552,0-1,.447-1,1s.448,1,1,1h4c.552,0,1-.447,1-1s-.448-1-1-1ZM9.121,3.293L6.413,.584c-.779-.777-2.047-.778-2.828,0L.878,3.293c-.391,.391-.391,1.023,0,1.414s1.024,.391,1.414,0l1.708-1.708V23c0,.553,.448,1,1,1s1-.447,1-1V2.999l1.707,1.708c.195,.195,.451,.293,.707,.293s.512-.098,.707-.293c.391-.391,.391-1.023,0-1.414Z" />
+      </svg>
+    </>
+  )
+}
+
+export const SortDescIcon = () => {
+  return (
+    <>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        id="Layer_1"
+        data-name="Layer 1"
+        viewBox="0 0 24 24"
+        width="16.416"
+        height="16.416"
+      >
+        <path d="M24,1c0,.553-.448,1-1,1H10c-.552,0-1-.447-1-1s.448-1,1-1h13c.552,0,1,.447,1,1Zm-4,4H10c-.552,0-1,.447-1,1s.448,1,1,1h10c.552,0,1-.447,1-1s-.448-1-1-1Zm-3,5h-7c-.552,0-1,.447-1,1s.448,1,1,1h7c.552,0,1-.447,1-1s-.448-1-1-1Zm-3,5h-4c-.552,0-1,.447-1,1s.448,1,1,1h4c.552,0,1-.447,1-1s-.448-1-1-1Zm-6.293,4.293l-1.707,1.707V1c0-.553-.448-1-1-1s-1,.447-1,1V21l-1.708-1.708c-.391-.391-1.023-.391-1.414,0s-.391,1.023,0,1.414l2.707,2.707c.39,.39,.902,.585,1.415,.585s1.024-.195,1.414-.585l2.707-2.707c.391-.391,.391-1.023,0-1.414s-1.023-.391-1.414,0Z" />
+      </svg>
+    </>
+  )
+}