Merge pull request #38 from vtex/feat/add-input-type-date

Add date to input type

Author: igorbrasileiro

CHANGELOG.md

@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.2.0] - 2021-08-03
+
 ## [0.2.0-beta.13] - 2020-03-26
 
 ### Fixed

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-hook-form-jsonschema",
-  "version": "0.2.0-beta.13",
+  "version": "0.2.0",
   "description": "Wrapper arround react-hook-form to create forms from a JSON schema.",
   "main": "output/index.cjs.js",
   "module": "output/index.esm.js",
@@ -13,6 +13,7 @@
   "devDependencies": {
     "@rollup/plugin-commonjs": "^11.0.1",
     "@rollup/plugin-node-resolve": "^7.0.0",
+    "@testing-library/react-hooks": "^7.0.1",
     "@types/react": "^16.8.22",
     "@types/react-intl": "^2.3.18",
     "@vtex/test-tools": "^0.3.2",

src/hooks/__mocks__/mockTextSchema.ts

@@ -26,6 +26,31 @@ const mockTextSchema = {
       name: 'test-showError',
       minLength: 10,
     },
+    stringDateTest: {
+      type: 'string',
+      title: 'test-useInput-format-date',
+      format: 'date',
+    },
+    stringDateTimeTest: {
+      type: 'string',
+      title: 'test-useInput-format-date-time',
+      format: 'date-time',
+    },
+    stringEmailTest: {
+      type: 'string',
+      title: 'test-useInput-format-email',
+      format: 'email',
+    },
+    stringHostnameTest: {
+      type: 'string',
+      title: 'test-useInput-format-hostname',
+      format: 'hostname',
+    },
+    stringUriTest: {
+      type: 'string',
+      title: 'test-useInput-format-uri',
+      format: 'uri',
+    },
   },
 }
 

src/hooks/__tests__/useInput.test.tsx

@@ -0,0 +1,64 @@
+import React, { FC } from 'react'
+import { renderHook } from '@testing-library/react-hooks'
+
+import { FormContext } from '../../components'
+import { useInput } from '../useInput'
+import mockTextSchema from '../__mocks__/mockTextSchema'
+
+const Wrapper: FC = ({ children }) => {
+  return <FormContext schema={mockTextSchema}>{children}</FormContext>
+}
+
+test('useInput type date', () => {
+  const { result } = renderHook(() => useInput('#/properties/stringDateTest'), {
+    wrapper: Wrapper,
+  })
+
+  const { type } = result.current.getInputProps()
+  expect(type).toBe('date')
+})
+
+test('useInput type date-time', () => {
+  const { result } = renderHook(
+    () => useInput('#/properties/stringDateTimeTest'),
+    {
+      wrapper: Wrapper,
+    }
+  )
+
+  const { type } = result.current.getInputProps()
+  expect(type).toBe('datetime-local')
+})
+
+test('useInput type email', () => {
+  const { result } = renderHook(
+    () => useInput('#/properties/stringEmailTest'),
+    {
+      wrapper: Wrapper,
+    }
+  )
+
+  const { type } = result.current.getInputProps()
+  expect(type).toBe('email')
+})
+
+test('useInput type hostname', () => {
+  const { result } = renderHook(
+    () => useInput('#/properties/stringHostnameTest'),
+    {
+      wrapper: Wrapper,
+    }
+  )
+
+  const { type } = result.current.getInputProps()
+  expect(type).toBe('url')
+})
+
+test('useInput type uri', () => {
+  const { result } = renderHook(() => useInput('#/properties/stringUriTest'), {
+    wrapper: Wrapper,
+  })
+
+  const { type } = result.current.getInputProps()
+  expect(type).toBe('url')
+})

src/hooks/useInput.ts

@@ -14,6 +14,9 @@ export const getInputCustomFields = (
   let inputType = 'text'
   if (currentObject.type === 'string') {
     switch (currentObject.format) {
+      case 'date':
+        inputType = 'date'
+        break
       case 'date-time':
         inputType = 'datetime-local'
         break