@campxdev/shared 1.0.5 → 1.1.0

package/src/components/LoginForm.tsx

@@ -1,103 +1,105 @@
-import { Visibility, VisibilityOff } from '@mui/icons-material'
-import {
-  Alert,
-  Box,
-  Button,
-  IconButton,
-  InputAdornment,
-  Stack,
-  styled,
-} from '@mui/material'
-import axiosBase from 'axios'
-import Cookies from 'js-cookie'
-import { useState } from 'react'
-import { useForm } from 'react-hook-form'
-import { FormTextField } from './HookForm'
-
-const developmentOrigin = window.location.origin + '/campx_dev'
-
-export const StyledTextField = styled(FormTextField)(({ theme }) => ({
-  '& .MuiInputBase-root': {
-    minHeight: '60px',
-  },
-  '& .MuiOutlinedInput-input': {
-    padding: '18.5px 14px',
-  },
-}))
-
-export const StyledButton = styled(Button)(({ theme }) => ({
-  borderRadius: '10px',
-  height: '60px',
-  fontSize: '18px',
-}))
-
-export function LoginForm() {
-  const [showPassword, setShowPassword] = useState(false)
-  const { handleSubmit, control } = useForm()
-  const [error, setError] = useState('')
-
-  const onSubmit = async (values) => {
-    try {
-      const res = await axiosBase({
-        method: 'POST',
-        url: 'https://auth-api.campx.dev/auth/login',
-        data: values,
-      })
-      Cookies.set('campx_session_key', res.data.cookie)
-      window.location.href = developmentOrigin
-    } catch (err) {
-      // eslint-disable-next-line no-console
-      console.log(err)
-      setError(err?.response?.data?.message ?? 'Server Error')
-    }
-  }
-
-  return (
-    <Box sx={{ maxWidth: '500px' }} margin="0 auto" padding={'0 1rem'}>
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <Stack gap={'40px'}>
-          <Box>
-            <StyledTextField
-              size="medium"
-              control={control}
-              name="username"
-              label="User ID"
-              required
-            />
-          </Box>
-          <Box>
-            <StyledTextField
-              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>
-          <StyledButton type="submit">Login</StyledButton>
-        </Stack>
-      </form>
-      {error && (
-        <Alert severity="error" sx={{ marginTop: '20px' }}>
-          {error}
-        </Alert>
-      )}
-    </Box>
-  )
-}
-
-export default LoginForm
+import { Visibility, VisibilityOff } from '@mui/icons-material'
+import {
+  Alert,
+  Box,
+  Button,
+  IconButton,
+  InputAdornment,
+  Stack,
+  styled,
+} from '@mui/material'
+import axiosBase from 'axios'
+import Cookies from 'js-cookie'
+import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { FormTextField } from './HookForm'
+
+const developmentOrigin = window.location.origin + '/campx_dev'
+
+export const StyledTextField = styled(FormTextField)(({ theme }) => ({
+  '& .MuiInputBase-root': {
+    minHeight: '60px',
+  },
+  '& .MuiOutlinedInput-input': {
+    padding: '18.5px 14px',
+  },
+}))
+
+export const StyledButton = styled(Button)(({ theme }) => ({
+  borderRadius: '10px',
+  height: '60px',
+  fontSize: '18px',
+}))
+
+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',
+        url: loginUrl
+          ? loginUrl
+          : 'https://api.campx.dev/auth-server/auth/login',
+        data: values,
+      })
+      Cookies.set('campx_session_key', res.data.cookie)
+      window.location.href = developmentOrigin
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.log(err)
+      setError(err.response.data.message ?? 'Server Error')
+    }
+  }
+
+  return (
+    <Box sx={{ maxWidth: '500px' }} margin="0 auto" padding={'0 1rem'}>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <Stack gap={'40px'}>
+          <Box>
+            <StyledTextField
+              size="medium"
+              control={control}
+              name="username"
+              label="User ID"
+              required
+            />
+          </Box>
+          <Box>
+            <StyledTextField
+              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>
+          <StyledButton type="submit">Login</StyledButton>
+        </Stack>
+      </form>
+      {error && (
+        <Alert severity="error" sx={{ marginTop: '20px' }}>
+          {error}
+        </Alert>
+      )}
+    </Box>
+  )
+}
+
+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/MenuButton.tsx

@@ -1,103 +1,103 @@
-import {
-  ListItemIcon,
-  ListItemText,
-  Menu,
-  MenuItem,
-  MenuListProps,
-  MenuProps,
-  styled,
-} from '@mui/material'
-import { cloneElement, ReactNode, useState } from 'react'
-
-interface Props {
-  anchor: any
-  loading?: boolean
-  menu: {
-    label: string | ReactNode
-    icon?: ReactNode
-    onClick: (props?: any) => any
-    component?: ReactNode
-  }[]
-  menuProps?: Omit<MenuProps, 'open'>
-  menuListProps?: MenuListProps
-}
-
-export default function MenuButton({
-  menu,
-  menuProps,
-  menuListProps,
-  loading = false,
-  anchor,
-}: Props) {
-  const [anchorEl, setAnchorEl] = useState<any>(null)
-  const open = Boolean(anchorEl)
-
-  const handleClick = (event) => {
-    setAnchorEl(event.currentTarget)
-  }
-
-  const handleClose = () => {
-    setAnchorEl(null)
-  }
-
-  const AnchorEl = cloneElement(anchor, {
-    onClick: handleClick,
-  })
-
-  return (
-    <>
-      {AnchorEl}
-      <Menu
-        elevation={2}
-        id="basic-menu"
-        anchorEl={anchorEl}
-        open={open}
-        onClose={handleClose}
-        MenuListProps={{
-          sx: { padding: 0 },
-          ...menuListProps,
-        }}
-        anchorOrigin={{
-          vertical: 'bottom',
-          horizontal: 'right',
-        }}
-        transformOrigin={{
-          vertical: 'top',
-          horizontal: 'right',
-        }}
-        {...menuProps}
-      >
-        {menu.map((item, index) => (
-          <StyledMenuItem
-            sx={{ minWidth: '120px', width: '100%' }}
-            key={index}
-            onClick={() => {
-              handleClose()
-              item.onClick()
-            }}
-          >
-            {item?.icon && <ListItemIcon>{item.icon}</ListItemIcon>}
-            <ListItemText>{item.label}</ListItemText>
-          </StyledMenuItem>
-        ))}
-      </Menu>
-    </>
-  )
-}
-
-const StyledMenuItem = styled(MenuItem)(({ theme }) => ({
-  padding: '10px 20px',
-  display: 'flex',
-  alignItems: 'center',
-  '& .MuiListItemIcon-root': {
-    minWidth: '24px',
-  },
-  '& .MuiSvgIcon-root': {
-    height: '18px',
-    width: '18px',
-  },
-  '& .MuiTypography-root': {
-    fontWeight: 600,
-  },
-  borderBottom: theme.borders.grayLight,
-}))
+import {
+  ListItemIcon,
+  ListItemText,
+  Menu,
+  MenuItem,
+  MenuListProps,
+  MenuProps,
+  styled,
+} from '@mui/material'
+import { cloneElement, ReactNode, useState } from 'react'
+
+interface Props {
+  anchor: any
+  loading?: boolean
+  menu: {
+    label: string | ReactNode
+    icon?: ReactNode
+    onClick: (props?: any) => any
+    component?: ReactNode
+  }[]
+  menuProps?: Omit<MenuProps, 'open'>
+  menuListProps?: MenuListProps
+}
+
+export default function MenuButton({
+  menu,
+  menuProps,
+  menuListProps,
+  loading = false,
+  anchor,
+}: Props) {
+  const [anchorEl, setAnchorEl] = useState<any>(null)
+  const open = Boolean(anchorEl)
+
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handleClose = () => {
+    setAnchorEl(null)
+  }
+
+  const AnchorEl = cloneElement(anchor, {
+    onClick: handleClick,
+  })
+
+  return (
+    <>
+      {AnchorEl}
+      <Menu
+        elevation={2}
+        id="basic-menu"
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        MenuListProps={{
+          sx: { padding: 0 },
+          ...menuListProps,
+        }}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'right',
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'right',
+        }}
+        {...menuProps}
+      >
+        {menu.map((item, index) => (
+          <StyledMenuItem
+            sx={{ minWidth: '120px', width: '100%' }}
+            key={index}
+            onClick={() => {
+              handleClose()
+              item.onClick()
+            }}
+          >
+            {item?.icon && <ListItemIcon>{item.icon}</ListItemIcon>}
+            <ListItemText>{item.label}</ListItemText>
+          </StyledMenuItem>
+        ))}
+      </Menu>
+    </>
+  )
+}
+
+const StyledMenuItem = styled(MenuItem)(({ theme }) => ({
+  padding: '10px 20px',
+  display: 'flex',
+  alignItems: 'center',
+  '& .MuiListItemIcon-root': {
+    minWidth: '24px',
+  },
+  '& .MuiSvgIcon-root': {
+    height: '18px',
+    width: '18px',
+  },
+  '& .MuiTypography-root': {
+    fontWeight: 600,
+  },
+  borderBottom: theme.borders.grayLight,
+}))