@campxdev/shared 1.4.9 → 1.4.11

package/src/components/LoginForm.tsx

@@ -1,80 +1,80 @@
-import { Visibility, VisibilityOff } from '@mui/icons-material'
-import { Alert, Box, IconButton, InputAdornment, Stack } from '@mui/material'
-import axiosBase from 'axios'
-import Cookies from 'js-cookie'
-import { useState } from 'react'
-import { useForm } from 'react-hook-form'
-import ActionButton from './ActionButton'
-import { FormTextField } from './HookForm'
-
-export function LoginForm({ loginUrl }: { loginUrl?: string }) {
-  const [showPassword, setShowPassword] = useState(false)
-  const { handleSubmit, control } = useForm()
-  const [error, setError] = useState('')
-
-  const onSubmit = async (values) => {
-    try {
-      const res = await axiosBase({
-        method: 'POST',
-        baseURL: process.env.REACT_APP_API_HOST,
-        url: loginUrl ? loginUrl : `/auth-server/auth/login`,
-        data: values,
-      })
-      Cookies.set('campx_tenant', res?.data?.subDomain)
-      Cookies.set('campx_session_key', res.data?.token)
-      window.location.reload()
-    } catch (err) {
-      // eslint-disable-next-line no-console
-      console.log(err)
-      setError(err?.response?.data?.message ?? 'Server Error')
-    }
-  }
-
-  return (
-    <>
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <Stack gap={'30px'}>
-          <Box>
-            <FormTextField
-              control={control}
-              name="username"
-              label="User ID"
-              required
-            />
-          </Box>
-          <Box>
-            <FormTextField
-              control={control}
-              name="password"
-              label="Password"
-              type={showPassword ? 'text' : 'password'}
-              required
-              InputProps={{
-                endAdornment: (
-                  <InputAdornment position="end">
-                    <IconButton
-                      size="small"
-                      aria-label="toggle password visibility"
-                      onClick={() => setShowPassword((prev) => !prev)}
-                      edge="end"
-                    >
-                      {showPassword ? <VisibilityOff /> : <Visibility />}
-                    </IconButton>
-                  </InputAdornment>
-                ),
-              }}
-            />
-          </Box>
-          <ActionButton type="submit">Login</ActionButton>
-        </Stack>
-      </form>
-      {error && (
-        <Alert severity="error" sx={{ marginTop: '20px' }}>
-          {error}
-        </Alert>
-      )}
-    </>
-  )
-}
-
-export default LoginForm
+import { Visibility, VisibilityOff } from '@mui/icons-material'
+import { Alert, Box, IconButton, InputAdornment, Stack } from '@mui/material'
+import axiosBase from 'axios'
+import Cookies from 'js-cookie'
+import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import ActionButton from './ActionButton'
+import { FormTextField } from './HookForm'
+
+export function LoginForm({ loginUrl }: { loginUrl?: string }) {
+  const [showPassword, setShowPassword] = useState(false)
+  const { handleSubmit, control } = useForm()
+  const [error, setError] = useState('')
+
+  const onSubmit = async (values) => {
+    try {
+      const res = await axiosBase({
+        method: 'POST',
+        baseURL: process.env.REACT_APP_API_HOST,
+        url: loginUrl ? loginUrl : `/auth-server/auth/login`,
+        data: values,
+      })
+      Cookies.set('campx_tenant', res?.data?.subDomain)
+      Cookies.set('campx_session_key', res.data?.token)
+      window.location.reload()
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.log(err)
+      setError(err?.response?.data?.message ?? 'Server Error')
+    }
+  }
+
+  return (
+    <>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <Stack gap={'30px'}>
+          <Box>
+            <FormTextField
+              control={control}
+              name="username"
+              label="User ID"
+              required
+            />
+          </Box>
+          <Box>
+            <FormTextField
+              control={control}
+              name="password"
+              label="Password"
+              type={showPassword ? 'text' : 'password'}
+              required
+              InputProps={{
+                endAdornment: (
+                  <InputAdornment position="end">
+                    <IconButton
+                      size="small"
+                      aria-label="toggle password visibility"
+                      onClick={() => setShowPassword((prev) => !prev)}
+                      edge="end"
+                    >
+                      {showPassword ? <VisibilityOff /> : <Visibility />}
+                    </IconButton>
+                  </InputAdornment>
+                ),
+              }}
+            />
+          </Box>
+          <ActionButton type="submit">Login</ActionButton>
+        </Stack>
+      </form>
+      {error && (
+        <Alert severity="error" sx={{ marginTop: '20px' }}>
+          {error}
+        </Alert>
+      )}
+    </>
+  )
+}
+
+export default LoginForm

package/src/components/MediaRow/MediaRow.tsx

@@ -1,69 +1,69 @@
-import { Delete } from '@mui/icons-material'
-import { Box, IconButton, styled, Typography, Stack } from '@mui/material'
-import Image from '../Image'
-// import { Media } from 'components/UploadButton/UploadButton'
-
-interface MediaRowProps {
-  list: any[]
-  onDelete?: (mediaKey: string) => void
-}
-
-export default function MediaRow({ list, onDelete }: MediaRowProps) {
-  console.log(list, 'list')
-  return (
-    <Box sx={{ display: 'flex', gap: '1rem', width: '100%', flexWrap: 'wrap' }}>
-      {list.map((item, index) => (
-        <>{rednerMediaCard(item, onDelete)}</>
-      ))}
-    </Box>
-  )
-}
-
-const rednerMediaCard = (item: any, onDelete?: (mediaKey: string) => void) => {
-  switch (item?.type) {
-    case 'image':
-      return (
-        <StyledImageContainer>
-          <IconButton
-            size="small"
-            color="error"
-            onClick={() => {
-              onDelete(item?.key)
-            }}
-          >
-            <Delete fontSize="small" />
-          </IconButton>
-          <Image src={item?.url} height={120} width={150} alt={''} />
-        </StyledImageContainer>
-      )
-    case 'file':
-      return (
-        <Stack
-          direction={'row'}
-          alignItems="center"
-          justifyContent={'space-between'}
-          gap={'10px'}
-        >
-          <Typography>{item?.fileName}</Typography>
-          <IconButton color="error">
-            <Delete fontSize="small" />
-          </IconButton>
-        </Stack>
-      )
-
-    default:
-      break
-  }
-}
-
-const StyledImageContainer = styled(Box)(({ theme }) => ({
-  border: theme.borders.grayLight,
-  borderRadius: '10px',
-  padding: '0.7rem',
-  position: 'relative',
-  '& > button': {
-    position: 'absolute',
-    right: 0,
-    top: 0,
-  },
-}))
+import { Delete } from '@mui/icons-material'
+import { Box, IconButton, styled, Typography, Stack } from '@mui/material'
+import Image from '../Image'
+// import { Media } from 'components/UploadButton/UploadButton'
+
+interface MediaRowProps {
+  list: any[]
+  onDelete?: (mediaKey: string) => void
+}
+
+export default function MediaRow({ list, onDelete }: MediaRowProps) {
+  console.log(list, 'list')
+  return (
+    <Box sx={{ display: 'flex', gap: '1rem', width: '100%', flexWrap: 'wrap' }}>
+      {list.map((item, index) => (
+        <>{rednerMediaCard(item, onDelete)}</>
+      ))}
+    </Box>
+  )
+}
+
+const rednerMediaCard = (item: any, onDelete?: (mediaKey: string) => void) => {
+  switch (item?.type) {
+    case 'image':
+      return (
+        <StyledImageContainer>
+          <IconButton
+            size="small"
+            color="error"
+            onClick={() => {
+              onDelete(item?.key)
+            }}
+          >
+            <Delete fontSize="small" />
+          </IconButton>
+          <Image src={item?.url} height={120} width={150} alt={''} />
+        </StyledImageContainer>
+      )
+    case 'file':
+      return (
+        <Stack
+          direction={'row'}
+          alignItems="center"
+          justifyContent={'space-between'}
+          gap={'10px'}
+        >
+          <Typography>{item?.fileName}</Typography>
+          <IconButton color="error">
+            <Delete fontSize="small" />
+          </IconButton>
+        </Stack>
+      )
+
+    default:
+      break
+  }
+}
+
+const StyledImageContainer = styled(Box)(({ theme }) => ({
+  border: theme.borders.grayLight,
+  borderRadius: '10px',
+  padding: '0.7rem',
+  position: 'relative',
+  '& > button': {
+    position: 'absolute',
+    right: 0,
+    top: 0,
+  },
+}))

package/src/components/MediaRow/index.tsx

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

package/src/components/ModalButtons/DialogButton.tsx

@@ -1,93 +1,93 @@
-import { Close } from '@mui/icons-material'
-import {
-  Box,
-  Dialog,
-  DialogProps,
-  DialogTitle,
-  Grow,
-  IconButton,
-  styled,
-} from '@mui/material'
-import { TransitionProps } from '@mui/material/transitions'
-import { forwardRef, ReactNode, useState } from 'react'
-
-const StyledDialogHeader = styled(Box)(() => ({
-  height: '64px',
-  backgroundColor: '#f7f7f7',
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'end',
-  padding: '0.6rem 1rem',
-  paddingBottom: '10px',
-}))
-
-const StyledDialogContent = styled(Box)(() => ({
-  width: '100%',
-  padding: '1rem',
-}))
-
-export const Transition = forwardRef(function Transition(
-  props: TransitionProps & {
-    children: React.ReactElement
-  },
-  ref: React.Ref<unknown>,
-) {
-  return <Grow timeout={1000} ref={ref} {...props} />
-})
-
-interface DrawerButtonProps {
-  anchor: (props: { open: () => void }) => ReactNode
-  content: (props: { close: () => void }) => ReactNode
-  title: string | ReactNode
-  dialogProps?: Omit<DialogProps, 'open'>
-  onDialogClose?: () => void
-}
-
-export default function DialogButton({
-  content,
-  title,
-  dialogProps,
-  onDialogClose,
-  anchor,
-}: DrawerButtonProps) {
-  const [open, setOpen] = useState(false)
-
-  const onClose = () => {
-    onDialogClose && onDialogClose()
-    setOpen(false)
-  }
-
-  const onOpen = () => {
-    setOpen(true)
-  }
-
-  return (
-    <>
-      {anchor({
-        open: onOpen,
-      })}
-      <Dialog
-        PaperProps={{ elevation: 2, sx: { borderRadius: '10px' } }}
-        fullWidth
-        onClose={onClose}
-        open={open}
-        transitionDuration={100}
-        TransitionComponent={Transition}
-        sx={{
-          '& .MuiBackdrop-root': {
-            backgroundColor: 'rgba(0, 0, 0, 0.4)',
-          },
-        }}
-        {...dialogProps}
-      >
-        <StyledDialogHeader>
-          <DialogTitle>{title}</DialogTitle>
-          <IconButton onClick={onClose} sx={{ color: 'black' }}>
-            <Close />
-          </IconButton>
-        </StyledDialogHeader>
-        <StyledDialogContent>{content({ close: onClose })}</StyledDialogContent>
-      </Dialog>
-    </>
-  )
-}
+import { Close } from '@mui/icons-material'
+import {
+  Box,
+  Dialog,
+  DialogProps,
+  DialogTitle,
+  Grow,
+  IconButton,
+  styled,
+} from '@mui/material'
+import { TransitionProps } from '@mui/material/transitions'
+import { forwardRef, ReactNode, useState } from 'react'
+
+const StyledDialogHeader = styled(Box)(() => ({
+  height: '64px',
+  backgroundColor: '#f7f7f7',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'end',
+  padding: '0.6rem 1rem',
+  paddingBottom: '10px',
+}))
+
+const StyledDialogContent = styled(Box)(() => ({
+  width: '100%',
+  padding: '1rem',
+}))
+
+export const Transition = forwardRef(function Transition(
+  props: TransitionProps & {
+    children: React.ReactElement
+  },
+  ref: React.Ref<unknown>,
+) {
+  return <Grow timeout={1000} ref={ref} {...props} />
+})
+
+interface DrawerButtonProps {
+  anchor: (props: { open: () => void }) => ReactNode
+  content: (props: { close: () => void }) => ReactNode
+  title: string | ReactNode
+  dialogProps?: Omit<DialogProps, 'open'>
+  onDialogClose?: () => void
+}
+
+export default function DialogButton({
+  content,
+  title,
+  dialogProps,
+  onDialogClose,
+  anchor,
+}: DrawerButtonProps) {
+  const [open, setOpen] = useState(false)
+
+  const onClose = () => {
+    onDialogClose && onDialogClose()
+    setOpen(false)
+  }
+
+  const onOpen = () => {
+    setOpen(true)
+  }
+
+  return (
+    <>
+      {anchor({
+        open: onOpen,
+      })}
+      <Dialog
+        PaperProps={{ elevation: 2, sx: { borderRadius: '10px' } }}
+        fullWidth
+        onClose={onClose}
+        open={open}
+        transitionDuration={100}
+        TransitionComponent={Transition}
+        sx={{
+          '& .MuiBackdrop-root': {
+            backgroundColor: 'rgba(0, 0, 0, 0.4)',
+          },
+        }}
+        {...dialogProps}
+      >
+        <StyledDialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <IconButton onClick={onClose} sx={{ color: 'black' }}>
+            <Close />
+          </IconButton>
+        </StyledDialogHeader>
+        <StyledDialogContent>{content({ close: onClose })}</StyledDialogContent>
+      </Dialog>
+    </>
+  )
+}

package/src/components/ModalButtons/DrawerButton.tsx

@@ -1,85 +1,85 @@
-import { Close } from '@mui/icons-material'
-import {
-  alpha,
-  Box,
-  ButtonProps,
-  DialogTitle,
-  Drawer,
-  IconButton,
-  styled,
-} from '@mui/material'
-import { ReactNode, useState } from 'react'
-
-const StyledDrawerHeader = styled(Box)(({ theme }) => ({
-  height: '64px',
-  backgroundColor: '#f7f7f7',
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'end',
-  padding: '0.6rem 1rem',
-  paddingBottom: '10px',
-}))
-
-const StyledDrawerContent = styled(Box)(({ theme }) => ({
-  padding: '1rem',
-  height: 'calc(100vh - 64px)',
-  overflowY: 'auto',
-  paddingBottom: '4rem',
-}))
-
-interface DrawerButtonProps {
-  anchor: (props: { open: () => void }) => ReactNode
-  content: (props: { close: () => void }) => ReactNode
-  title: string | ReactNode
-  btnTxt?: string | ReactNode
-  btnProps?: ButtonProps
-}
-
-export default function DrawerButton({
-  content,
-  title,
-  anchor,
-}: DrawerButtonProps) {
-  const [open, setOpen] = useState(false)
-
-  const onOpen = () => {
-    setOpen(true)
-  }
-
-  const onClose = () => {
-    setOpen(false)
-  }
-  return (
-    <>
-      {anchor({ open: onOpen })}
-      <Drawer
-        anchor="right"
-        elevation={10}
-        onClose={onClose}
-        open={open}
-        PaperProps={{
-          elevation: 2,
-        }}
-        sx={{
-          zIndex: 500,
-          '& .MuiDrawer-paper': {
-            boxSizing: 'border-box',
-            width: 600,
-          },
-          '& .MuiBackdrop-root': {
-            backgroundColor: 'rgba(0, 0, 0, 0.4)',
-          },
-        }}
-        transitionDuration={200}
-      >
-        <StyledDrawerHeader>
-          <DialogTitle>{title}</DialogTitle>
-          <IconButton onClick={onClose} sx={{ color: 'black' }}>
-            <Close />
-          </IconButton>
-        </StyledDrawerHeader>
-        <StyledDrawerContent>{content({ close: onClose })}</StyledDrawerContent>
-      </Drawer>
-    </>
-  )
-}
+import { Close } from '@mui/icons-material'
+import {
+  alpha,
+  Box,
+  ButtonProps,
+  DialogTitle,
+  Drawer,
+  IconButton,
+  styled,
+} from '@mui/material'
+import { ReactNode, useState } from 'react'
+
+const StyledDrawerHeader = styled(Box)(({ theme }) => ({
+  height: '64px',
+  backgroundColor: '#f7f7f7',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'end',
+  padding: '0.6rem 1rem',
+  paddingBottom: '10px',
+}))
+
+const StyledDrawerContent = styled(Box)(({ theme }) => ({
+  padding: '1rem',
+  height: 'calc(100vh - 64px)',
+  overflowY: 'auto',
+  paddingBottom: '4rem',
+}))
+
+interface DrawerButtonProps {
+  anchor: (props: { open: () => void }) => ReactNode
+  content: (props: { close: () => void }) => ReactNode
+  title: string | ReactNode
+  btnTxt?: string | ReactNode
+  btnProps?: ButtonProps
+}
+
+export default function DrawerButton({
+  content,
+  title,
+  anchor,
+}: DrawerButtonProps) {
+  const [open, setOpen] = useState(false)
+
+  const onOpen = () => {
+    setOpen(true)
+  }
+
+  const onClose = () => {
+    setOpen(false)
+  }
+  return (
+    <>
+      {anchor({ open: onOpen })}
+      <Drawer
+        anchor="right"
+        elevation={10}
+        onClose={onClose}
+        open={open}
+        PaperProps={{
+          elevation: 2,
+        }}
+        sx={{
+          zIndex: 500,
+          '& .MuiDrawer-paper': {
+            boxSizing: 'border-box',
+            width: 600,
+          },
+          '& .MuiBackdrop-root': {
+            backgroundColor: 'rgba(0, 0, 0, 0.4)',
+          },
+        }}
+        transitionDuration={200}
+      >
+        <StyledDrawerHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <IconButton onClick={onClose} sx={{ color: 'black' }}>
+            <Close />
+          </IconButton>
+        </StyledDrawerHeader>
+        <StyledDrawerContent>{content({ close: onClose })}</StyledDrawerContent>
+      </Drawer>
+    </>
+  )
+}

package/src/components/ModalButtons/index.tsx

@@ -1,4 +1,4 @@
-import DialogButton from './DialogButton'
-import DrawerButton from './DrawerButton'
-
-export { DialogButton, DrawerButton }
+import DialogButton from './DialogButton'
+import DrawerButton from './DrawerButton'
+
+export { DialogButton, DrawerButton }