feature:add-calendar-component add Date component, add isBirthDay property and create story

Author: FranciscoValdesoiro

.storybook/main.js

@@ -5,6 +5,7 @@ module.exports = {
   ],
   "addons": [
     "@storybook/addon-links",
-    "@storybook/addon-essentials"
+    "@storybook/addon-essentials",
+    '@storybook/preset-create-react-app'
   ]
 }

example/package-lock.json

@@ -7,6 +7,7 @@ import {
   Checkbox,
   Radio,
   Phone,
+  Date,
   FormBuilder
 } from 'react-form-builder'
 
@@ -20,6 +21,7 @@ const App = () => {
   })
 
   const onSubmitForm = (data) => {
+    console.log('button:', data)
     alert(
       `You have submitted your form correctly Data: ${'\n'} ${JSON.stringify(
         data,
@@ -42,6 +44,16 @@ const App = () => {
         clearErrors={clearErrors}
         placeholder='Phone'
       />
+      <Date
+        register={register}
+        setValue={setValue}
+        name='Date'
+        registerConfig={{}}
+        placeholder=''
+        dateFormat="dd-MM-yyyy"
+        isMobile={false}
+        isBirthDate={false}
+      />
       <Label>An important title field here *</Label>
       <Label>
         <Checkbox />

example/src/App.js

@@ -34,7 +34,8 @@
     "react-markdown": "^5.0.3",
     "react-hook-form": "^6.14.2",
     "react-hook-form-input": "^1.1.10",
-    "react-phone-number-input": "^3.1.10"
+    "react-phone-number-input": "^3.1.10",
+    "react-datepicker": "^3.4.1"
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",
@@ -45,9 +46,11 @@
     "@storybook/addon-actions": "^6.1.15",
     "@storybook/addon-essentials": "^6.1.15",
     "@storybook/addon-links": "^6.1.15",
+    "@storybook/preset-create-react-app": "^3.1.5",
     "@storybook/react": "^6.1.15",
     "babel-eslint": "^10.0.3",
     "cross-env": "^7.0.2",
+    "date-fns": "^2.16.1",
     "eslint": "^6.8.0",
     "eslint-config-prettier": "^6.7.0",
     "eslint-config-standard": "^14.1.0",
@@ -63,11 +66,12 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^2.0.4",
     "react": "^16.13.1",
+    "react-datepicker": "^3.4.1",
     "react-dom": "^16.13.1",
     "react-hook-form": "^6.14.2",
     "react-hook-form-input": "^1.1.10",
-    "react-phone-number-input": "^3.1.10",
     "react-markdown": "^5.0.3",
+    "react-phone-number-input": "^3.1.10",
     "rollup": "^2.36.2",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "theme-ui": "^0.3.5"

package-lock.json

@@ -16,7 +16,8 @@ export default {
       'react-markdown': 'react-markdown',
       'react-hook-form-input': 'react-hook-form-input',
       'react-phone-number-input': 'react-phone-number-input',
-      'react-hook-form': 'react-hook-form'
+      'react-hook-form': 'react-hook-form',
+      'react-datepicker': 'react-datepicker'
     }
   },
   plugins: [

package.json

@@ -0,0 +1,69 @@
+/** @jsx jsx */
+import { jsx } from 'theme-ui'
+
+import React from 'react'
+import { RHFInput } from 'react-hook-form-input'
+import ReactDatePicker from 'react-datepicker'
+import { differenceInYears, subYears } from 'date-fns'
+import 'react-datepicker/dist/react-datepicker.css'
+
+const isOver18 = (dob) => {
+  return differenceInYears(new Date(), dob) > 18
+}
+
+const getInitialDate = () => {
+  return subYears(new Date(), 18)
+}
+
+const DatePicker = ({
+  register,
+  setValue,
+  name,
+  registerConfig,
+  placeholder,
+  isMobile,
+  dateFormat,
+  isBirthDate,
+  ...props
+}) => {
+  const [date, setDate] = React.useState()
+
+  const pickerRef = React.useRef(null)
+  React.useEffect(() => {
+    if (isMobile && pickerRef.current !== null) {
+      pickerRef.current.input.readOnly = true
+    }
+  }, [isMobile, pickerRef])
+
+  return (
+    <RHFInput
+      as={
+        <ReactDatePicker
+          ref={pickerRef}
+          portalId='root-portal'
+          withPortal={isMobile}
+          placeholderText={placeholder}
+          dateFormat={dateFormat || 'dd/MM/yyyy'}
+          showYearDropdown
+          dropdownMode={isMobile ? 'select' : 'scroll'}
+          openToDate={date || isBirthDate ? getInitialDate() : new Date()}
+          disabledKeyboardNavigation
+          {...props}
+        />
+      }
+      rules={{
+        ...registerConfig,
+        validate: {
+          u18: isBirthDate ? isOver18 : ''
+        }
+      }}
+      name={name}
+      register={register}
+      setValue={setValue}
+      selected={date}
+      onChange={setDate}
+    />
+  )
+}
+
+export default DatePicker

rollup.config.js

@@ -7,6 +7,7 @@ export { default as Checkbox } from './Fields/Checkbox'
 export { default as Select } from './Fields/Select'
 export { default as Radio } from './Fields/Radio'
 export { default as Phone } from './Fields/Phone'
+export { default as Date } from './Fields/Date'
 
 // Theme
 export { default as ExampleTheme } from './theme'

src/Fields/Date/index.js

@@ -0,0 +1,33 @@
+import React from 'react'
+import Date from '../Fields/Date'
+import { useForm } from 'react-hook-form'
+
+export default {
+  title: 'Form/Date',
+  component: Date
+}
+
+const Template = (args) => {
+  const { register, setValue } = useForm({
+    mode: 'onChange',
+    reValidateMode: 'onChange'
+  })
+
+  return (
+    <Date
+      register={register}
+      setValue={setValue}
+      name='Date'
+      registerConfig={{}}
+      {...args}
+    />
+  )
+}
+
+export const Primary = Template.bind({})
+Primary.args = {
+  placeholder: '',
+  dateFormat: 'dd-MM-yyyy',
+  isMobile: false,
+  isBirthDate: false
+}