fix types (#108)

package.json

@@ -1,11 +1,11 @@
 {
   "name": "@raidguild/design-system",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "license": "MIT",
   "author": "Raid Guild",
   "main": "./dist/src/index.js",
   "module": "./dist/src/index.js",
-  "types": "./dist/index.d.ts",
+  "types": "./dist/src/index.d.ts",
   "type": "module",
   "homepage": "https://raid-guild.github.io/design-system",
   "files": [

src/components/chakra/index.ts

@@ -188,6 +188,7 @@ export type {
   NumberInputProps as ChakraNumberInputProps,
   RadioProps as ChakraRadioProps,
   RadioGroupProps as ChakraRadioGroupProps,
+  ResponsiveValue,
   SelectProps as ChakraSelectProps,
   SliderProps as ChakraSliderProps,
   SpinnerProps as ChakraSpinnerProps,

src/components/forms/DatePicker/DatePicker.tsx

@@ -2,15 +2,19 @@ import React from 'react';
 import ReactDatePicker, { ReactDatePickerProps } from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
 import { Controller, RegisterOptions } from 'react-hook-form';
+import { UseFormReturn } from 'react-hook-form/dist/types/form';
+import _ from 'lodash';
+import { FaInfoCircle } from 'react-icons/fa';
 import {
   FormControl,
   FormLabel,
   Stack,
   FormErrorMessage,
-} from '@chakra-ui/react';
-import { UseFormReturn } from 'react-hook-form/dist/types/form';
-import _ from 'lodash';
+  HStack,
+  Icon,
+} from '../../chakra';
 import { CustomDatePickerButton } from './CustomDatePickerButton';
+import { Tooltip } from '../../atoms';
 
 // TODO handle separate controlled component
 // TODO currently only single date is supported, but type shows that it can be a range
@@ -21,19 +25,17 @@ export type DatePickerProps = {
   tip?: string;
   localForm: Pick<UseFormReturn, 'control' | 'formState' | 'watch'>;
   registerOptions?: RegisterOptions;
+  tooltip?: string;
   variant?: string;
   spacing?: number | string;
-  // onChange?: (
-  //   date: Date | [Date | null, Date | null] | null,
-  //   event: SyntheticEvent<Date, Event> | undefined
-  // ) => void;
-} & ReactDatePickerProps;
+} & Omit<ReactDatePickerProps, 'onChange'>;
 
 const DatePicker: React.FC<DatePickerProps> = ({
   label,
   name,
   localForm,
   registerOptions,
+  tooltip,
   variant,
   spacing,
   ...props
@@ -69,7 +71,20 @@ const DatePicker: React.FC<DatePickerProps> = ({
       render={({ field }) => (
         <FormControl isInvalid={!!errors[name]}>
           <Stack sx={customDatePickerStyles} spacing={spacing}>
-            {label && <FormLabel m={0}>{label}</FormLabel>}
+            <HStack>
+              {label && <FormLabel m={0}>{label}</FormLabel>}
+              {tooltip && (
+                <Tooltip label={tooltip} shouldWrapChildren>
+                  <Icon
+                    as={FaInfoCircle}
+                    boxSize={3}
+                    color='red.500'
+                    bg='white'
+                    borderRadius='full'
+                  />
+                </Tooltip>
+              )}
+            </HStack>
             <ReactDatePicker
               {...props}
               {...field}

src/components/forms/Textarea/Textarea.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { UseFormReturn } from 'react-hook-form';
-import { AiOutlineInfoCircle } from 'react-icons/ai';
+import { RegisterOptions, UseFormReturn } from 'react-hook-form';
+import { FaInfoCircle } from 'react-icons/fa';
 import {
   ChakraTextarea,
   ChakraTextareaProps,
@@ -11,7 +11,6 @@ import {
   FormErrorMessage,
   Icon,
   HStack,
-  Flex,
 } from '../../chakra';
 import { Tooltip } from '../../atoms';
 
@@ -21,6 +20,7 @@ export type CustomTextareaProps = {
   helperText?: string;
   tooltip?: string;
   localForm: UseFormReturn;
+  registerOptions?: RegisterOptions;
 };
 
 export type TextareaProps = ChakraTextareaProps & CustomTextareaProps;
@@ -32,6 +32,7 @@ const Textarea: React.FC<TextareaProps> = ({
   label,
   name,
   localForm,
+  registerOptions,
   helperText,
   tooltip,
   ...props
@@ -55,21 +56,18 @@ const Textarea: React.FC<TextareaProps> = ({
               hasArrow
               placement='end'
             >
-              <Flex
-                h='24px'
-                w='24px'
-                bg='primary.500'
+              <Icon
+                as={FaInfoCircle}
+                boxSize={3}
+                color='red.500'
+                bg='white'
                 borderRadius='full'
-                align='center'
-                justify='center'
-              >
-                <Icon as={AiOutlineInfoCircle} w='12px' h='12px' />
-              </Flex>
+              />
             </Tooltip>
           )}
         </HStack>
 
-        <ChakraTextarea {...props} {...register(name)} />
+        <ChakraTextarea {...props} {...register(name, registerOptions)} />
         {helperText && <FormHelperText>{helperText}</FormHelperText>}
         {typeof error === 'string' && (
           <FormErrorMessage>{error}</FormErrorMessage>

src/stories/atoms/DatePicker.stories.tsx → src/stories/forms/DatePicker.stories.tsx

@@ -1,35 +1,33 @@
 import React, { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { StoryFn } from '@storybook/react';
+import _ from 'lodash';
 import { DatePicker as DatePickerComponent, Box, Stack, Text } from '../..';
 
 export default {
-  title: 'Components/Atoms/DatePicker',
+  title: 'Components/Forms/DatePicker',
   component: DatePickerComponent,
 }; // as Meta;
 
 const DatePicker: StoryFn<typeof DatePickerComponent> = () => {
   const localForm = useForm();
+  const { watch, reset } = _.pick(localForm, ['watch', 'reset']);
   useEffect(() => {
-    localForm.reset({ raidStartDate: new Date() });
+    reset({ raidStartDate: new Date() });
   }, []);
 
+  const startDate = watch('raidStartDate')?.toLocaleDateString();
+
   return (
     <Box m='15px'>
       <Stack spacing={4}>
         <DatePickerComponent
           name='raidStartDate'
           localForm={localForm}
           label='Raid Start Date'
-          onChange={(selectedDate) => {
-            localForm.setValue('raidStartDate', selectedDate as Date);
-          }}
+          tooltip='The date the raid is expected to start'
         />
-        <Text variant='shadow'>
-          Selected Date:{' '}
-          {localForm.getValues('raidStartDate') &&
-            localForm.getValues('raidStartDate').toLocaleDateString()}
-        </Text>
+        <Text variant='shadow'>Selected Date: {startDate}</Text>
       </Stack>
     </Box>
   );