Merge pull request #25 from tabi-memo/M3_trip_create

M3 Trip Create/Edit

app/activity/[id]/components/activity-info.tsx

@@ -4,7 +4,7 @@ import { Heading, Box, Text, VStack } from '@chakra-ui/react'
 
 type ActivityInfoProps = {
   memo: string | null | undefined
-  cost: number | null | undefined
+  cost: string | null | undefined
 }
 
 export const ActivityInfo = ({ memo, cost }: ActivityInfoProps) => {

app/components/customDateTimePicker/dateTimePickerWrapper.tsx

@@ -8,6 +8,7 @@ import 'react-calendar/dist/Calendar.css'
 type ValuePiece = Date | null
 type Value = ValuePiece | [ValuePiece, ValuePiece]
 
+// TODO Delete this and use react date picker for time as well
 export const CustomDateTimePicker = ({
   onChange,
   value
@@ -20,7 +21,7 @@ export const CustomDateTimePicker = ({
   return (
     <>
       <style>{`
-       
+
         .react-calendar{
           margin-top: 12%;
         }

app/components/date/custom-date-picker.tsx

@@ -0,0 +1,106 @@
+import DatePicker from 'react-datepicker'
+import { Box, useColorMode } from '@chakra-ui/react'
+import { FiCalendar } from 'react-icons/fi'
+import 'react-datepicker/dist/react-datepicker.css'
+import { InputForm } from '@/components/input'
+
+type DatePickerProps = {
+  selectedDate: Date | null
+  onChange: (date: Date) => void
+  placeholderText: string
+  dateFormat?: string | string[] | undefined
+}
+
+export const CustomDatePicker = ({
+  selectedDate,
+  onChange,
+  placeholderText,
+  dateFormat
+}: DatePickerProps) => {
+  const { colorMode } = useColorMode()
+
+  const datePickerStyles = {
+    '.react-datepicker-wrapper': {
+      width: '100%'
+    },
+    '.react-datepicker-popper': {
+      right: { base: 0, md: 'unset' }
+    },
+    '.react-datepicker ': {
+      width: '100%',
+      border: 'none',
+      boxShadow: '0px 2px 16px 0px rgba(0,0,0,.25);',
+      fontSize: 'sm'
+    },
+    '.react-datepicker__month-container': {
+      backgroundColor: colorMode === 'dark' ? 'gray.700' : 'white',
+      width: { base: '100%', md: '400px' }
+    },
+    '.react-datepicker__triangle': {
+      display: 'none'
+    },
+    '.react-datepicker__header': {
+      backgroundColor: colorMode === 'dark' ? 'gray.700' : 'white',
+      borderBottomColor: colorMode === 'dark' ? 'gray.500' : 'gray.300'
+    },
+    '.react-datepicker__current-month': {
+      color: colorMode === 'dark' ? 'primary.700' : 'primary.800',
+      paddingY: '8px',
+      fontSize: 'lg'
+    },
+    '.react-datepicker__navigation': {
+      top: '11px'
+    },
+    '.react-datepicker__navigation--previous': {
+      left: '32px'
+    },
+    '.react-datepicker__navigation--next': {
+      right: '32px'
+    },
+    '.react-datepicker__navigation-icon': {
+      '&::before': {
+        borderColor: colorMode === 'dark' ? 'gray.500' : 'gray.400'
+      }
+    },
+    '.react-datepicker__month': {
+      margin: '1rem'
+    },
+    '.react-datepicker__day-names': {
+      paddingY: '4px'
+    },
+    '.react-datepicker__day-name': {
+      width: { base: '2.4rem', md: '2.8rem' },
+      lineHeight: { base: '2.4rem', md: '2.8rem' },
+      color: colorMode === 'dark' ? 'gray.300' : 'black'
+    },
+    '.react-datepicker__day': {
+      width: { base: '2.4rem', md: '2.8rem' },
+      lineHeight: { base: '2.2rem', md: '2.4rem' },
+      ':hover': {
+        backgroundColor: colorMode === 'dark' ? 'gray.600' : 'gray.100'
+      },
+      color: colorMode === 'dark' ? 'gray.300' : 'black'
+    },
+    '.react-datepicker__day--selected': {
+      fontWeight: 'bold',
+      color: 'white',
+      backgroundColor: colorMode === 'dark' ? 'primary.700' : 'primary.500'
+    },
+    '.react-datepicker__day--keyboard-selected': {
+      background: 'none'
+    }
+  }
+
+  return (
+    <Box sx={datePickerStyles}>
+      <DatePicker
+        selected={selectedDate}
+        placeholderText={placeholderText}
+        onChange={onChange}
+        dateFormat={dateFormat}
+        popperPlacement="bottom-start"
+        customInput={<InputForm rightIcon={FiCalendar} />}
+      />
+    </Box>
+  )
+}

app/components/date/index.ts

@@ -0,0 +1 @@
+export { CustomDatePicker } from './custom-date-picker'

app/components/date/stories/custom-date-picker.stories.tsx

@@ -0,0 +1,20 @@
+import { useState } from 'react'
+import { Meta } from '@storybook/react'
+import { CustomDatePicker } from '@/components/date'
+
+const meta: Meta<typeof CustomDatePicker> = {
+  title: 'CustomDatePicker',
+  component: CustomDatePicker
+}
+export default meta
+
+export const Default = () => {
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date())
+  return (
+    <CustomDatePicker
+      selectedDate={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
+      placeholderText="Select Date"
+    />
+  )
+}

app/components/input/index.ts

@@ -1,3 +1,3 @@
-export { InputSearch } from './input-search'
 export { InputForm } from './input-form'
+export { InputIconButton } from './input-icon-button'
 export { TextareaForm } from './textarea-form'

app/components/input/input-form.tsx

@@ -1,19 +1,24 @@
+import { IconType } from 'react-icons'
 import {
   Input as ChakraFormInput,
   InputProps as ChakraInputProps,
   InputGroup,
+  InputRightElement,
   forwardRef,
   useColorModeValue
 } from '@chakra-ui/react'
 
-export const InputForm = forwardRef(
-  (props: ChakraInputProps, ref: React.Ref<HTMLInputElement>) => {
+type InputFormProps = {
+  rightIcon?: IconType
+}
+export const InputForm = forwardRef<ChakraInputProps & InputFormProps, 'input'>(
+  ({ rightIcon: RightIcon, ...props }, ref) => {
     const bgColor = useColorModeValue('white', 'gray.700')
     const borderColor = useColorModeValue('gray.300', 'gray.500')
     const placeholdercolor = useColorModeValue('gray.400', 'gray.600')
 
     return (
-      <InputGroup minW={{ base: '100%', md: '23.75rem' }}>
+      <InputGroup minW={'100%'}>
         <ChakraFormInput
           {...props}
           ref={ref}
@@ -24,6 +29,11 @@ export const InputForm = forwardRef(
             color: placeholdercolor
           }}
         />
+        {RightIcon && (
+          <InputRightElement color="gray.500">
+            <RightIcon />
+          </InputRightElement>
+        )}
       </InputGroup>
     )
   }

app/components/input/input-search.tsx → app/components/input/input-icon-button.tsx

@@ -1,3 +1,4 @@
+import { IconType } from 'react-icons'
 import {
   Input as ChakraInput,
   InputProps as ChakraInputProps,
@@ -7,16 +8,17 @@ import {
   forwardRef,
   useColorModeValue
 } from '@chakra-ui/react'
-import { FiSearch } from 'react-icons/fi'
 
-type InputSearchProps = {
+type InputIconButtonProps = {
   ariaLabel: string
+  icon: IconType
+  onClick?: () => void
 }
 
-export const InputSearch = forwardRef<
-  ChakraInputProps & InputSearchProps,
+export const InputIconButton = forwardRef<
+  ChakraInputProps & InputIconButtonProps,
   'input'
->(({ ariaLabel, ...props }, ref) => {
+>(({ ariaLabel, icon: Icon, onClick, ...props }, ref) => {
   const bgColor = useColorModeValue('white', 'gray.700')
   const borderColor = useColorModeValue('primary.700', 'gray.500')
 
@@ -34,10 +36,12 @@ export const InputSearch = forwardRef<
         <IconButton
           aria-label={ariaLabel}
           variant="unstyled"
-          type="submit"
+          type={onClick ? 'button' : 'submit'}
+          onClick={onClick}
           color="primary.700"
+          isDisabled={props.isDisabled}
         >
-          <FiSearch size="24px" />
+          <Icon size="24px" />
         </IconButton>
       </InputRightElement>
     </InputGroup>

app/components/input/stories/input-icon-button.stories.tsx

@@ -0,0 +1,18 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { FiSearch } from 'react-icons/fi'
+import { InputIconButton } from '@/components/input'
+
+const meta: Meta<typeof InputIconButton> = {
+  title: 'Input Icon Button',
+  component: InputIconButton
+}
+export default meta
+type Story = StoryObj<typeof InputIconButton>
+
+export const Default: Story = {
+  args: {
+    ariaLabel: 'Search',
+    placeholder: 'Search...',
+    icon: FiSearch
+  }
+}

app/components/loading/loading.tsx

@@ -1,14 +1,18 @@
 import { VStack, Spinner } from '@chakra-ui/react'
 
-export const Loading = () => {
+type LoadingProps = {
+  size?: string
+  p?: string
+}
+export const Loading = ({ size = 'xl', p = '60px' }: LoadingProps) => {
   return (
-    <VStack align="center" p="60px">
+    <VStack align="center" p={p}>
       <Spinner
         thickness="4px"
         speed="0.6s"
         emptyColor="gray.200"
         color="primary.500"
-        size="xl"
+        size={size}
       />
     </VStack>
   )