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

package/src/components/ErrorBoundary/GlobalNetworkLoadingIndicator.tsx

@@ -1,13 +1,13 @@
-import { Store } from 'pullstate'
-import { LinearProgress } from '../LinearProgress'
-
-export const NetworkStore = new Store({
-  loading: false,
-})
-
-export default function GlobalNetworkLoadingIndicator() {
-  const { loading } = NetworkStore.useState()
-
-  if (loading) return <LinearProgress />
-  if (loading) return null
-}
+import { Store } from 'pullstate'
+import { LinearProgress } from '../LinearProgress'
+
+export const NetworkStore = new Store({
+  loading: false,
+})
+
+export default function GlobalNetworkLoadingIndicator() {
+  const { loading } = NetworkStore.useState()
+
+  if (loading) return <LinearProgress />
+  if (loading) return null
+}

package/src/components/ErrorBoundary/index.tsx

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

package/src/components/ErrorBox.tsx

@@ -1,42 +1,42 @@
-import { Alert as MuiAlert, styled } from '@mui/material'
-import _ from 'lodash'
-import { ReactNode } from 'react'
-
-export default function ErrorBox({
-  err,
-  extra,
-}: {
-  err: any
-  extra?: string | ReactNode
-}) {
-  if (!err) {
-    return null
-  }
-
-  if (err.response) {
-    if (err.response.status == 401) {
-      return (
-        <Alert severity={'error'}>
-          {_.get(err, 'response.data.message', 'Server error!')} {extra}
-        </Alert>
-      )
-    }
-    if (err.response.status == 422) {
-      return (
-        <Alert severity={'error'}>
-          {_.get(err, 'response.data.message', 'Server error!')} {extra}
-        </Alert>
-      )
-    }
-
-    return (
-      <Alert severity={'error'}>
-        {'Unknown Error'} {extra}
-      </Alert>
-    )
-  }
-}
-
-const Alert = styled(MuiAlert)(({}) => ({
-  marginTop: '20px',
-}))
+import { Alert as MuiAlert, styled } from '@mui/material'
+import _ from 'lodash'
+import { ReactNode } from 'react'
+
+export default function ErrorBox({
+  err,
+  extra,
+}: {
+  err: any
+  extra?: string | ReactNode
+}) {
+  if (!err) {
+    return null
+  }
+
+  if (err.response) {
+    if (err.response.status == 401) {
+      return (
+        <Alert severity={'error'}>
+          {_.get(err, 'response.data.message', 'Server error!')} {extra}
+        </Alert>
+      )
+    }
+    if (err.response.status == 422) {
+      return (
+        <Alert severity={'error'}>
+          {_.get(err, 'response.data.message', 'Server error!')} {extra}
+        </Alert>
+      )
+    }
+
+    return (
+      <Alert severity={'error'}>
+        {'Unknown Error'} {extra}
+      </Alert>
+    )
+  }
+}
+
+const Alert = styled(MuiAlert)(({}) => ({
+  marginTop: '20px',
+}))

package/src/components/ExcelToJsonInput/ExcelJsonUpload.tsx

@@ -1,50 +1,50 @@
-import { Box, Button, ButtonProps, CircularProgress } from '@mui/material'
-import { AxiosResponse } from 'axios'
-import { useState } from 'react'
-import { useMutation } from 'react-query'
-import { toast } from 'react-toastify'
-import { axiosErrorToast } from '../../config/axios'
-import ExcelToJsonInput from './ExcelToJsonInput'
-
-interface ExcelJsonUploadProps {
-  postFn: (json) => Promise<AxiosResponse<any, any>>
-  btnProps?: ButtonProps
-}
-
-export default function ExcelJsonUpload({
-  postFn,
-  btnProps,
-}: ExcelJsonUploadProps) {
-  const [json, setJson] = useState([])
-  const { mutate, isLoading } = useMutation(postFn, {
-    onSuccess(data) {
-      toast.success('Data uploaded successfully')
-    },
-    onError(error) {
-      axiosErrorToast(error)
-    },
-  })
-
-  const onSubmit = () => {
-    mutate(json)
-  }
-
-  return (
-    <Box>
-      <Button
-        sx={{ marginBottom: '20px' }}
-        onClick={onSubmit}
-        endIcon={isLoading ? <CircularProgress size={20} /> : null}
-        disabled={isLoading}
-        {...btnProps}
-      >
-        Submit Data
-      </Button>
-      <ExcelToJsonInput
-        onChange={(jsonValue) => {
-          setJson(jsonValue)
-        }}
-      />
-    </Box>
-  )
-}
+import { Box, Button, ButtonProps, CircularProgress } from '@mui/material'
+import { AxiosResponse } from 'axios'
+import { useState } from 'react'
+import { useMutation } from 'react-query'
+import { toast } from 'react-toastify'
+import { axiosErrorToast } from '../../config/axios'
+import ExcelToJsonInput from './ExcelToJsonInput'
+
+interface ExcelJsonUploadProps {
+  postFn: (json) => Promise<AxiosResponse<any, any>>
+  btnProps?: ButtonProps
+}
+
+export default function ExcelJsonUpload({
+  postFn,
+  btnProps,
+}: ExcelJsonUploadProps) {
+  const [json, setJson] = useState([])
+  const { mutate, isLoading } = useMutation(postFn, {
+    onSuccess(data) {
+      toast.success('Data uploaded successfully')
+    },
+    onError(error) {
+      axiosErrorToast(error)
+    },
+  })
+
+  const onSubmit = () => {
+    mutate(json)
+  }
+
+  return (
+    <Box>
+      <Button
+        sx={{ marginBottom: '20px' }}
+        onClick={onSubmit}
+        endIcon={isLoading ? <CircularProgress size={20} /> : null}
+        disabled={isLoading}
+        {...btnProps}
+      >
+        Submit Data
+      </Button>
+      <ExcelToJsonInput
+        onChange={(jsonValue) => {
+          setJson(jsonValue)
+        }}
+      />
+    </Box>
+  )
+}

package/src/components/ExcelToJsonInput/ExcelToJsonInput.tsx

@@ -1,57 +1,57 @@
-import { Box } from '@mui/material'
-
-function tableToJson(innerText) {
-  if (!innerText) return []
-  const matrix = innerText
-    ?.split('\n')
-    ?.map((row) => row?.split('\t')?.map((cell) => (cell === '' ? null : cell)))
-
-  const arrayList = matrix.filter((row) => row.length === matrix[0].length)
-
-  var data = []
-  for (var i = 1; i < arrayList.length; i++) {
-    var tableRow = arrayList[i]
-    let rowObj = {}
-    for (var j = 0; j < arrayList[0].length; j++) {
-      rowObj[arrayList[0][j]] = tableRow[j]
-    }
-    data.push(rowObj)
-  }
-  return data
-}
-
-export default function ExcelToJsonInput({ onChange }) {
-  return (
-    <Box
-      onInput={(e) => {
-        const input = e.currentTarget.innerText
-        let json = tableToJson(input)
-        onChange(json)
-      }}
-      placeholder="paste"
-      contentEditable
-      sx={{
-        fontSize: '16px',
-        height: 'auto',
-        width: '100%',
-        border: '1px solid #ccc',
-        color: 'black',
-        padding: '20px',
-        '& table': {
-          borderCollapse: 'collapse',
-          border: '1px solid #ccc',
-          '& th, & td': {
-            border: '1px solid #ccc !important',
-            padding: '5px',
-            background: 'white !important',
-            fontSize: '14px',
-          },
-          '& font': {
-            fontSize: '14px',
-            fontFamily: 'sans-serif',
-          },
-        },
-      }}
-    />
-  )
-}
+import { Box } from '@mui/material'
+
+function tableToJson(innerText) {
+  if (!innerText) return []
+  const matrix = innerText
+    ?.split('\n')
+    ?.map((row) => row?.split('\t')?.map((cell) => (cell === '' ? null : cell)))
+
+  const arrayList = matrix.filter((row) => row.length === matrix[0].length)
+
+  var data = []
+  for (var i = 1; i < arrayList.length; i++) {
+    var tableRow = arrayList[i]
+    let rowObj = {}
+    for (var j = 0; j < arrayList[0].length; j++) {
+      rowObj[arrayList[0][j]] = tableRow[j]
+    }
+    data.push(rowObj)
+  }
+  return data
+}
+
+export default function ExcelToJsonInput({ onChange }) {
+  return (
+    <Box
+      onInput={(e) => {
+        const input = e.currentTarget.innerText
+        let json = tableToJson(input)
+        onChange(json)
+      }}
+      placeholder="paste"
+      contentEditable
+      sx={{
+        fontSize: '16px',
+        height: 'auto',
+        width: '100%',
+        border: '1px solid #ccc',
+        color: 'black',
+        padding: '20px',
+        '& table': {
+          borderCollapse: 'collapse',
+          border: '1px solid #ccc',
+          '& th, & td': {
+            border: '1px solid #ccc !important',
+            padding: '5px',
+            background: 'white !important',
+            fontSize: '14px',
+          },
+          '& font': {
+            fontSize: '14px',
+            fontFamily: 'sans-serif',
+          },
+        },
+      }}
+    />
+  )
+}

package/src/components/ExcelToJsonInput/index.tsx

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

package/src/components/FilterComponents/FilterButton.tsx

@@ -1,56 +1,56 @@
-import { Tune } from '@mui/icons-material'
-import { Box, styled } from '@mui/material'
-import { useEffect, useState } from 'react'
-
-const StyledButtonWrapper = styled(Box)<{ size: 'regular' | 'large' }>(
-  ({ theme, size }) => ({
-    width: size === 'regular' ? '40px' : '50px',
-    height: size === 'regular' ? '40px' : '50px',
-    flexShrink: 0,
-    border: theme.borders.grayLight,
-    display: 'flex',
-    position: 'relative',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: '10px',
-    cursor: 'pointer',
-    '&:active': {
-      border: `1px solid ${theme.palette.primary.main}`,
-    },
-    transition: 'border 0.1s ease-in-out',
-  }),
-)
-
-const StyledNotify = styled(Box)(({ theme }) => ({
-  height: '5px',
-  width: '5px',
-  backgroundColor: theme.palette.error.main,
-  position: 'absolute',
-  borderRadius: '50%',
-  top: 5,
-  right: 5,
-}))
-
-export default function FilterButton({
-  onClick,
-  size = 'large',
-  filtersApplied,
-  ...props
-}: {
-  onClick: (e: any) => void
-  size?: 'regular' | 'large'
-  filtersApplied?: any
-}) {
-  const handleClick = (e) => {
-    e.stopPropagation()
-    if (!onClick) return
-    onClick(e)
-  }
-
-  return (
-    <StyledButtonWrapper size={size} {...props} onClick={handleClick}>
-      {filtersApplied && <StyledNotify />}
-      <Tune />
-    </StyledButtonWrapper>
-  )
-}
+import { Tune } from '@mui/icons-material'
+import { Box, styled } from '@mui/material'
+import { useEffect, useState } from 'react'
+
+const StyledButtonWrapper = styled(Box)<{ size: 'regular' | 'large' }>(
+  ({ theme, size }) => ({
+    width: size === 'regular' ? '40px' : '50px',
+    height: size === 'regular' ? '40px' : '50px',
+    flexShrink: 0,
+    border: theme.borders.grayLight,
+    display: 'flex',
+    position: 'relative',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: '10px',
+    cursor: 'pointer',
+    '&:active': {
+      border: `1px solid ${theme.palette.primary.main}`,
+    },
+    transition: 'border 0.1s ease-in-out',
+  }),
+)
+
+const StyledNotify = styled(Box)(({ theme }) => ({
+  height: '5px',
+  width: '5px',
+  backgroundColor: theme.palette.error.main,
+  position: 'absolute',
+  borderRadius: '50%',
+  top: 5,
+  right: 5,
+}))
+
+export default function FilterButton({
+  onClick,
+  size = 'large',
+  filtersApplied,
+  ...props
+}: {
+  onClick: (e: any) => void
+  size?: 'regular' | 'large'
+  filtersApplied?: any
+}) {
+  const handleClick = (e) => {
+    e.stopPropagation()
+    if (!onClick) return
+    onClick(e)
+  }
+
+  return (
+    <StyledButtonWrapper size={size} {...props} onClick={handleClick}>
+      {filtersApplied && <StyledNotify />}
+      <Tune />
+    </StyledButtonWrapper>
+  )
+}

package/src/components/FilterComponents/SearchBar.tsx

@@ -1,45 +1,45 @@
-import { Search } from '@mui/icons-material'
-import { InputAdornment } from '@mui/material'
-import _ from 'lodash'
-import { ReactNode, useMemo, useState } from 'react'
-import { TextField } from '../Input'
-import { ITextFieldProps } from '../Input/TextField'
-
-interface SearchBarProps {
-  onSearch: (v: string) => void
-  label?: ReactNode
-  textFieldProps?: ITextFieldProps
-}
-
-export default function SearchBar({
-  onSearch,
-  label,
-  ...restProps
-}: SearchBarProps) {
-  const [, setSearch] = useState('')
-
-  const debouncedChangeHandler = useMemo(
-    () =>
-      _.debounce((e) => {
-        setSearch(e.target.value)
-        onSearch(e.target.value)
-      }, 300),
-    [],
-  )
-
-  return (
-    <TextField
-      label={label}
-      placeholder="Search"
-      onChange={debouncedChangeHandler}
-      InputProps={{
-        endAdornment: (
-          <InputAdornment position="end">
-            <Search />
-          </InputAdornment>
-        ),
-      }}
-      {...restProps.textFieldProps}
-    />
-  )
-}
+import { Search } from '@mui/icons-material'
+import { InputAdornment } from '@mui/material'
+import _ from 'lodash'
+import { ReactNode, useMemo, useState } from 'react'
+import { TextField } from '../Input'
+import { ITextFieldProps } from '../Input/TextField'
+
+interface SearchBarProps {
+  onSearch: (v: string) => void
+  label?: ReactNode
+  textFieldProps?: ITextFieldProps
+}
+
+export default function SearchBar({
+  onSearch,
+  label,
+  ...restProps
+}: SearchBarProps) {
+  const [, setSearch] = useState('')
+
+  const debouncedChangeHandler = useMemo(
+    () =>
+      _.debounce((e) => {
+        setSearch(e.target.value)
+        onSearch(e.target.value)
+      }, 300),
+    [],
+  )
+
+  return (
+    <TextField
+      label={label}
+      placeholder="Search"
+      onChange={debouncedChangeHandler}
+      InputProps={{
+        endAdornment: (
+          <InputAdornment position="end">
+            <Search />
+          </InputAdornment>
+        ),
+      }}
+      {...restProps.textFieldProps}
+    />
+  )
+}

package/src/components/FloatingContainer.tsx

@@ -1,33 +1,33 @@
-import { Box, styled } from '@mui/material'
-export const StyledFooter = styled(Box)<{
-  show: boolean
-}>`
-  position: fixed;
-  background: #fff;
-  bottom: ${(props) => (props.show ? '0' : '-70px')};
-  right: 16px;
-  width: calc(100% - 236px);
-  height: 64px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 1.5rem;
-  padding: 1rem;
-  transition: bottom 400ms ease-in-out;
-  box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1);
-`
-
-function FloatingContainer({
-  children,
-  show,
-}: {
-  show?: boolean
-  children: React.ReactNode
-}) {
-  return (
-    <>
-      <StyledFooter show={show ? show : true}>{children}</StyledFooter>
-    </>
-  )
-}
-export default FloatingContainer
+import { Box, styled } from '@mui/material'
+export const StyledFooter = styled(Box)<{
+  show: boolean
+}>`
+  position: fixed;
+  background: #fff;
+  bottom: ${(props) => (props.show ? '0' : '-70px')};
+  right: 16px;
+  width: calc(100% - 236px);
+  height: 64px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1.5rem;
+  padding: 1rem;
+  transition: bottom 400ms ease-in-out;
+  box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1);
+`
+
+function FloatingContainer({
+  children,
+  show,
+}: {
+  show?: boolean
+  children: React.ReactNode
+}) {
+  return (
+    <>
+      <StyledFooter show={show}>{children}</StyledFooter>
+    </>
+  )
+}
+export default FloatingContainer