Fix type signature in form example in readme (#60)

fix form example in readme

Author: thomashoneyman

readme.md

@@ -19,10 +19,18 @@ You can write a basic Formless form in just a few lines of code. You are respons
 First, a form type that describes the fields in your form, along with their validation error type, user input type, and validated output type. Note: you can provide whatever custom error types you'd like, use `Void` to represent no possible errors, parse to whatever type you want, and none of your fields need to share any types.
 
 ```purescript
+import Prelude
+import Data.Newtype (class Newtype, unwrap)
+
 type Dog = { name :: String, age :: Age }
 
 newtype Age = Age Int
 
+derive instance newtypeAge :: Newtype Age _
+
+instance showAge :: Show Age where
+  show = show <<< unwrap
+
 data AgeError = TooLow | TooHigh | InvalidInt
 
 newtype DogForm r f = DogForm (r
@@ -39,14 +47,17 @@ Next, the component input, which is made up of initial values and validation fun
 You can generate sensible defaults for all input fields in your form by setting `initialInputs` to `Nothing`, or you can manually provide the starting value for each field in your form.
 
 ```purescript
+import Data.Either (Either(..))
+import Data.Int as Int
+import Data.Maybe (Maybe(..))
 import Formless as F
 
 input :: forall m. Monad m => F.Input' DogForm m
 input =
   { initialInputs: Nothing -- same as: Just (F.wrapInputFields { name: "", age: "" })
   , validators: DogForm
       { name: F.noValidation
-      , age: F.hoistFnE_ \str -> case fromString str of
+      , age: F.hoistFnE_ \str -> case Int.fromString str of
           Nothing -> Left InvalidInt
           Just n
             | n < 0 -> Left TooLow
@@ -60,15 +71,15 @@ Finally, the component spec, which is made up of a number of optional functions
 
 For our small form, we'll do two things: we'll provide a render function, and when the form is submitted, we'll output a `Dog` to parent components. Along the way we'll wire things up so that input fields display their current value from form state; typing into an input field updates its value in state, also running the correct validation function; we'll display the validation error for `age` if there is one; and we'll wire up a submit button.
 
-Note: If you would like to have your form raise no messages (rare), do not supply a `handleMessage` function. If you would like to raise the usual Formless messages (`Changed`, `Submitted`), then provide `H.raise` as your `handleMessage` function. If you would like to simply raise your form's validated output type (`Dog`, in this example), then provide `F.raiseResult` as your `handleMessage` function. Finally, if you want to do something else, you can write a custom function that does whatever you would like.
+Note: If you would like to have your form raise no messages (rare), do not supply a `handleEvent` function. If you would like to raise the usual Formless messages (`Changed`, `Submitted`), then provide `H.raise` as your `handleEvent` function. If you would like to simply raise your form's validated output type (`Dog`, in this example), then provide `F.raiseResult` as your `handleEvent` function. Finally, if you want to do something else, you can write a custom function that does whatever you would like.
 
 ```purescript
+import Data.Symbol (SProxy(..))
 import Halogen.HTML as HH
 import Halogen.HTML.Events as HE
 import Halogen.HTML.Properties as HP
-import Formless as F
 
-spec :: forall m. Monad m => F.Spec' DogForm Dog m
+spec :: forall input m. Monad m => F.Spec' DogForm Dog input m
 spec = F.defaultSpec { render = render, handleEvent = F.raiseResult }
   where
   render st@{ form } =
@@ -98,11 +109,13 @@ spec = F.defaultSpec { render = render, handleEvent = F.raiseResult }
 Our form is now complete. It's easy to put this form in a parent page component:
 
 ```purescript
+import Effect.Aff.Class (class MonadAff)
+import Effect.Class.Console (logShow)
 import Halogen as H
-import Formless as F
 
 data Action = HandleDogForm Dog
 
+page :: forall q i o m. MonadAff m => H.Component HH.HTML q i o m
 page = H.mkComponent
   { initialState: const unit
   , render: const render
@@ -111,7 +124,7 @@ page = H.mkComponent
   where
   handleAction (HandleDogForm dog) = logShow (dog :: Dog)
 
-  render = HH.slot F._formless unit (F.component spec) input handler
+  render = HH.slot F._formless unit (F.component (const input) spec) unit handler
     where
     handler = Just <<< HandleDogForm
 ```