Move hooks to local

README.md

@@ -34,11 +34,13 @@ CLI tools to help. just copy and paste from github.
 
 ## Installation
 
+There's nothing to install, but if you need types:
+
 ```
 npm install -D candy_wrapper
 ```
 
-Go to the wrapper directory in this repo and copy the wrappers for the UI library of your choice into your project.
+Then go to the wrapper directory in this repo and copy the wrappers for the UI library of your choice into your project.
 
 # Usage
 

src/index.ts

@@ -1,2 +1 @@
 export * from './types'
-export * from './hooks'

wrappers/ts/vanilla/Checkbox.test.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import { Checkbox } from '.'
-import { ValidationContext } from '../../../src'
+import { Checkbox, ValidationContext } from '.'
 
 const buildPayload = () => {
   return {

wrappers/ts/vanilla/CollectionCheckboxes.test.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import { CollectionCheckboxes } from '.'
-import { ValidationContext } from '../../../src'
+import { CollectionCheckboxes, ValidationContext } from '.'
 
 const buildCheckboxPayload = (value, label) => {
   return {

wrappers/ts/vanilla/CollectionRadioButtons.test.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import { CollectionRadioButtons } from '.'
-import { ValidationContext } from '../../../src'
+import { CollectionRadioButtons, ValidationContext } from '.'
 
 const buildRadioButtonPayload = (value, label, rest) => {
   return {

wrappers/ts/vanilla/ColorField.test.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import { ColorField } from './'
-import { ValidationContext } from '../../../src'
+import { ColorField, ValidationContext } from './'
 
 const buildPayload = () => {
   return {

wrappers/ts/vanilla/DateField.test.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import { DateField } from '.'
-import { ValidationContext } from '../../../src'
+import { DateField, ValidationContext } from '.'
 
 const buildPayload = () => {
   return {

wrappers/ts/vanilla/EmailField.test.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import { EmailField } from '.'
-import { ValidationContext } from '../../../src'
+import { EmailField, ValidationContext } from '.'
 
 const buildPayload = () => {
   return {

wrappers/ts/vanilla/FieldError.test.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import { FieldError } from './'
-import { ValidationContext } from '../../../src'
+import { FieldError, ValidationContext } from './'
 
 describe('FieldError', () => {
   it('renders', () => {

wrappers/ts/vanilla/MonthField.test.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import { MonthField } from '.'
-import { ValidationContext } from '../../../src'
+import { MonthField, ValidationContext } from '.'
 
 const buildPayload = () => {
   return {

wrappers/ts/vanilla/NumberField.test.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import { NumberField } from '.'
-import { ValidationContext } from '../../../src'
+import { NumberField, ValidationContext } from '.'
 
 const buildPayload = () => {
   return {

wrappers/ts/vanilla/PasswordField.test.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import { PasswordField } from '.'
-import { ValidationContext } from '../../../src'
+import { PasswordField, ValidationContext } from '.'
 
 const buildPayload = () => {
   return {

wrappers/ts/vanilla/RangeField.test.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import { RangeField } from '.'
-import { ValidationContext } from '../../../src'
+import { RangeField, ValidationContext } from '.'
 
 const buildPayload = () => {
   return {

wrappers/ts/vanilla/SearchField.test.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import { SearchField } from '.'
-import { ValidationContext } from '../../../src'
+import { SearchField, ValidationContext } from '.'
 
 const buildPayload = () => {
   return {

wrappers/ts/vanilla/TelField.test.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import { TelField } from '.'
-import { ValidationContext } from '../../../src'
+import { TelField, ValidationContext } from '.'
 
 const buildPayload = () => {
   return {

wrappers/ts/vanilla/TextArea.test.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import { TextArea } from '.'
-import { ValidationContext } from '../../../src'
+import { TextArea, ValidationContext } from '.'
 
 const buildPayload = () => {
   return {

wrappers/ts/vanilla/TextField.test.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import { TextField } from '.'
-import { ValidationContext } from '../../../src'
+import { TextField, ValidationContext } from '.'
 
 const buildPayload = () => {
   return {

wrappers/ts/vanilla/TimeField.test.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import { TimeField } from '.'
-import { ValidationContext } from '../../../src'
+import { TimeField, ValidationContext } from '.'
 
 const buildPayload = () => {
   return {

wrappers/ts/vanilla/UrlField.test.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import { UrlField } from '.'
-import { ValidationContext } from '../../../src'
+import { UrlField, ValidationContext } from '.'
 
 const buildPayload = () => {
   return {

wrappers/ts/vanilla/index.tsx

@@ -6,9 +6,8 @@
  * these components to fit your design needs.
  */
 
-import React, { ReactNode, useContext } from 'react'
+import React, { ReactNode, useContext, createContext, useMemo } from 'react'
 import {
-  ValidationContext,
   CheckboxField as RailsCheckboxField,
   CollectionCheckboxesField as RailsCollectionCheckboxesField,
   HiddenField as RailsHiddenField,
@@ -30,6 +29,22 @@ import {
   ValidationErrors,
 } from '@thoughtbot/candy_wrapper'
 
+
+export const ValidationContext = createContext<ValidationErrors>({})
+
+export const useErrorKeyValidation = ({
+  errorKey,
+}: {
+  errorKey: string
+  name: string
+}) => {
+  const errors = useContext(ValidationContext)
+
+  return useMemo(() => {
+    return errors[errorKey]
+  }, [errors, errorKey])
+}
+
 export type ExtrasProps = Record<string, RailsHiddenField>
 
 /**
@@ -85,15 +100,16 @@ export const FieldError = ({ errorKey }: { errorKey: string | undefined }) => {
   }
 
   const errors = useContext(ValidationContext)
-  const hasErrors = errorKey && errors[errorKey]
+  const validationError = errors[errorKey]
+  const hasErrors = errorKey && validationError
 
   if (!hasErrors) {
     return null
   }
 
-  const errorMessages = Array.isArray(errors[errorKey])
-    ? errors[errorKey]
-    : [errors[errorKey]]
+  const errorMessages = Array.isArray(validationError)
+    ? validationError
+    : [validationError]
 
   return <span>{errorMessages.join(' ')}</span>
 }