Replace all jsx codeblocks with tsx

CodeStix · CodeStix · commit 768f242b4bc8 · 2021-04-03T11:47:59.000+02:00
diff --git a/articles/Array-fields.md b/articles/Array-fields.md
@@ -13,7 +13,7 @@ If you have an array field with a constant size, you should probably just use [`
 
 ✔️ **Dynamic string array field using `ArrayForm`**
 
-```jsx
+```tsx
 function NotesList() {
     const form = useForm({
         notes: ["Do the dishes", "Go outside", "Drink some water"],
@@ -56,7 +56,7 @@ function NotesList() {
 
 Remember: this is all type checked!
 
-```jsx
+```tsx
 function ShoppingListForm() {
     const form = useForm({
         title: "My shopping list",
@@ -113,7 +113,7 @@ function ShoppingListForm() {
 
 ✔️ **Dynamic object array field with seperate component for each child form and using `useArrayForm`**
 
-```jsx
+```tsx
 interface ShoppingListItem {
     name: string;
     amount: number;
@@ -161,7 +161,7 @@ function ShoppingListItemsForm(props: { parent: FormState<ShoppingList> }) {
     );
 }
 
-function ShoppingListItemForm(props: { parent: FormState<ShoppingListItem[]>, index: number, remove: (i: number) => void }) {
+function ShoppingListItemForm(props: { parent: FormState<ShoppingListItem[]>; index: number; remove: (i: number) => void }) {
     const form = useChildForm(props.parent, props.index);
     return (
         <div>
@@ -181,7 +181,7 @@ A fixed array always has the same size, [`ChildForm`](/docs/ChildForm) is used,
 
 ✔️ **Fixed array field containing strings**
 
-```jsx
+```tsx
 function AnswerForm() {
     const form = useForm({
         // Always 3 items in array
@@ -216,7 +216,7 @@ function AnswerForm() {
 
 ✔️ **Fixed array field containing objects**
 
-```jsx
+```tsx
 function SettingsForm() {
     const form = useForm({
         settings: [
diff --git a/articles/Auto-disable-submit-button.md b/articles/Auto-disable-submit-button.md
@@ -2,7 +2,7 @@
 
 ![live updating form values](https://raw.githubusercontent.com/wiki/CodeStix/typed-react-form/images/submitbutton.gif)
 
-```jsx
+```tsx
 function FormExample() {
     const form = useForm(
         {
diff --git a/articles/Custom-input.md b/articles/Custom-input.md
@@ -6,7 +6,7 @@ If the default input types (FormInput, FormSelect ...) do not provide enough fun
 
 The following code resembles a custom input component that shows an error when needed, paints gray background when modified, gets disabled when submitting and shows its defaultValue as a placeholder. You can tweak this custom input further by implementing transformations for different input types, allowing `HTMLInputAttributes` etc.
 
-```jsx
+```tsx
 function CustomInput<T>(props: { form: FormState<T>; name: keyof T; children?: React.ReactNode }) {
     const { value, error, dirty, setValue, state, defaultValue } = useListener(props.form, props.name);
 
@@ -30,7 +30,7 @@ function ExampleForm() {
     const form = useForm(
         {
             firstName: "John",
-            lastName: "Pineapple"
+            lastName: "Pineapple",
         },
         (values) => ({ firstName: values.firstName.length < 3 ? "Firstname must be longer!" : undefined }) // Example validator
     );
@@ -43,8 +43,7 @@ function ExampleForm() {
                 if (form.error) return;
                 form.setState({ isSubmitting: true });
                 console.log("submit", form.values);
-            }}
-        >
+            }}>
             <CustomInput form={form} name="firstName" />
             <CustomInput form={form} name="lastName" />
             <button>Submit</button>
diff --git a/articles/FormError.md b/articles/FormError.md
@@ -2,7 +2,7 @@
 
 A very simple field error component.
 
-```jsx
+```tsx
 const form = useForm(
     {
         name: "John Tester"
@@ -22,24 +22,18 @@ Because this component doesn't have a lot of functionality (only props are `form
 
 Below is an example of a custom form error component.
 
-```jsx
-
+```tsx
 // Use generics to create type-safe code
 function CustomFormError<T>(props: { form: FormState<T>; name: keyof T }) {
-
     // Listen for changes on a form field, behaves like useState
     const { error } = useListener(props.form, props.name);
 
     // Render nothing when no error
-    if (!error)
-        return null;
+    if (!error) return null;
 
     // Render a styled span on error.
-    return <span style={{ color: "red", fontWeight: "bold" }}>
-        {error}
-    </span>;
+    return <span style={{ color: "red", fontWeight: "bold" }}>{error}</span>;
 }
-
 ```
 
 You can also create custom input components, look [here](/docs/Custom-inputs).
diff --git a/articles/FormInput.md b/articles/FormInput.md
@@ -14,7 +14,7 @@ It is allowed to use multiple inputs on the same field, all of them will be sync
 
 ## Examples
 
-```jsx
+```tsx
 const form = useForm({
     name: "codestix",
     age: 19,
@@ -47,7 +47,7 @@ const form = useForm({
 
 Radio buttons must be given a value, and can be used for fields of different types.
 
-```jsx
+```tsx
 
 // Enum field
 <FormInput form={form} type="radio" name="gender" value="male" />
@@ -62,7 +62,7 @@ Radio buttons must be given a value, and can be used for fields of different typ
 
 Checkboxes behave like a boolean field by default, but when given a value, it behaves as a primitive array field (like a select with multiple = true). They can also set values on check/uncheck, this is useful for toggling fields.
 
-```jsx
+```tsx
 // Boolean field
 <FormInput form={form} type="checkbox" name="likePasta" />
 
@@ -85,10 +85,10 @@ Checkboxes behave like a boolean field by default, but when given a value, it be
 
 You **cannot** use FormInput to create a submit button (type="submit"). Use one of the following alternatives:
 
--   ```jsx
+-   ```tsx
     <input type="submit" value="Click here to submit" />
     ```
--   ```jsx
+-   ```tsx
     <button>Click here to submit</button>
     ```
 
diff --git a/articles/FormSelect.md b/articles/FormSelect.md
@@ -4,7 +4,7 @@ A stateful, type-checked form `select` element.
 
 These inputs are given a `className` when errored (`typed-form-error`) or modified (`typed-form-dirty`) by default.
 
-```jsx
+```tsx
 const form = useForm({
     language: "english",
     visitedCountries: ["sweden"]
diff --git a/articles/FormTextArea.md b/articles/FormTextArea.md
@@ -4,7 +4,7 @@ A stateful, type-checked form `textarea` element.
 
 These inputs are given a `className` when errored (`typed-form-error`) or modified (`typed-form-dirty`) by default.
 
-```jsx
+```tsx
 const form = useForm({
     description: "Ullamco velit eiusmod eiusmod veniam nulla exercitation fugiat.",
 });
diff --git a/articles/Getting-started.md b/articles/Getting-started.md
@@ -23,7 +23,7 @@ All of the form hook ([`useForm`](/docs/useForm), [`useChildForm`](/docs/useChil
 
 ✔️ **Importing and using `useForm`**
 
-```jsx
+```tsx
 import { useForm } from "typed-react-form";
 
 function MyForm() {
@@ -38,7 +38,7 @@ function MyForm() {
 
 ✔️ **`<form>` element with `onSubmit` event**
 
-```jsx
+```tsx
 import { useForm } from "typed-react-form";
 
 function MyForm() {
@@ -78,7 +78,7 @@ You are now ready to create inputs, this library provides the following built-in
 
 ✔️ **Example type-checked form consisting of 2 fields**
 
-```jsx
+```tsx
 // Import FormInput
 import { useForm, FormInput } from "typed-react-form";
 
diff --git a/articles/Live-json-component.md b/articles/Live-json-component.md
@@ -2,7 +2,7 @@
 
 ![live updating form values](https://raw.githubusercontent.com/wiki/CodeStix/typed-react-form/images/jsoncomponent.gif)
 
-```jsx
+```tsx
 // Take a form containing any values
 function FormJson(props: { form: FormState<any> }) {
     // Listen for all changes on the form
diff --git a/articles/Object-fields.md b/articles/Object-fields.md
@@ -11,7 +11,7 @@ This design choice makes complete type checking possible.
 
 ✔️ **Object field using `ChildForm`**
 
-```jsx
+```tsx
 function PersonForm() {
     // Info object contains email and age
     const form = useForm({
@@ -45,7 +45,7 @@ function PersonForm() {
 
 **✔️ `useChildForm` without seperate component**
 
-```jsx
+```tsx
 function PersonForm() {
     // Create root form
     const form = useForm({ name: "John", info: { email: "john@example.com", age: 20 } });
@@ -70,7 +70,7 @@ function PersonForm() {
 
 **✔️ `useChildForm` with seperate component**
 
-```jsx
+```tsx
 interface Person {
     name: string;
     info: PersonInfo;
@@ -117,7 +117,7 @@ function PersonInfoForm(props: { parent: FormState<Person> }) {
 
 This is also possible with `ChildForm`.
 
-```jsx
+```tsx
 function PersonForm() {
     // Create root form
     const form = useForm({
diff --git a/articles/Problem-with-styled-components.md b/articles/Problem-with-styled-components.md
@@ -4,7 +4,7 @@ For some reason when using the builtin inputs (FormInput, FormSelect ...) and [s
 
 **Use the following solution:**
 
-```jsx
+```tsx
 import { StyledFix } from "typed-react-form";
 
 // Example styled FormInput
@@ -23,22 +23,18 @@ const CustomInput: StyledFix<typeof FormInput> = styled(FormInput)`
 
 **If you are using styled with custom props, use the following solution:**
 
-```jsx
+```tsx
 import { StyledFix } from "typed-react-form";
 
 // Example styled FormInput with styled props (primaryColor)
 // Use the StyledFix helper type to explicitly define the type and prop type.
-const CustomInput: StyledFix<typeof FormInput, { primaryColor: string }> =
-    styled(FormInput) <
-    { primaryColor: string } >
-    `
-
+const CustomInput: StyledFix<typeof FormInput, { primaryColor: string }> = styled(FormInput)<{ primaryColor: string }>`
     border: 1px solid ${(e) => e.primaryColor};
 
     &.typed-form-dirty {
         background-color: #0001;
     }
-    
+
     &.typed-form-error {
         color: red;
         font-weight: bold;
diff --git a/articles/Toggling-a-field.md b/articles/Toggling-a-field.md
@@ -6,7 +6,7 @@
 
 ✔️ **Toggle string field using checkbox**
 
-```jsx
+```tsx
 import { useForm, FormInput } from "typed-react-form";
 
 function ToggleForm() {
@@ -31,7 +31,7 @@ function ToggleForm() {
 
 ✔️ **Toggle object field using checkbox**
 
-```jsx
+```tsx
 function ToggleForm() {
     const form = useForm({
         name: "codestix",
diff --git a/articles/Validation.md b/articles/Validation.md
@@ -8,7 +8,7 @@ Its it recommended to use a validation library, as this makes the process of val
 
 ## Example
 
-```jsx
+```tsx
 import { useForm, FormInput, FormError, AnyListener, ErrorMap } from "typed-react-form";
 
 interface LoginRequest {
@@ -21,24 +21,23 @@ function loginValidator(values: LoginRequest): ErrorMap<LoginRequest, string> {
     // Example validator logic, the returned error object should follow the same structure as the values object.
     return {
         email: values.email.length < 10 ? "Email must be longer" : undefined,
-        password: values.password.length < 5 ? "Password must be longer" : undefined
+        password: values.password.length < 5 ? "Password must be longer" : undefined,
     };
 }
 
 function FormExample() {
     const form = useForm<LoginRequest>(
         { email: "", password: "" },
-        loginValidator,  // Pass loginValidator to useForm
+        loginValidator, // Pass loginValidator to useForm
         true, // Validate on change (false by default)
-        false, // Validate on mount (false by default)
+        false // Validate on mount (false by default)
     );
     return (
         <form
             onSubmit={(ev) => {
                 ev.preventDefault();
                 console.log("submit", form.values);
-            }}
-        >
+            }}>
             <FormInput form={form} name="email" type="email" />
             <FormError form={form} name="email" />
             <FormInput form={form} name="password" type="password" />
diff --git a/articles/useAnyListener.md b/articles/useAnyListener.md
@@ -10,7 +10,7 @@ The useAnyListener hook listens for any change on a form. Behaves a lot like [`u
 
 **✔️ Right usage**
 
-```jsx
+```tsx
 // Create seperate component
 function FormStringify<T>(props: { form: FormState<T> }) {
     const { values } = useAnyListener(props.form);
@@ -33,7 +33,7 @@ function BreadForm() {
 
 **❌ Wrong usage (causes form rerender)**
 
-```jsx
+```tsx
 function BreadForm() {
     const form = useForm < Bread > { color: "brown", size: 58 };
     const { values } = useAnyListener(form); // Causes a rerender each time something changes, WRONG!!
@@ -50,7 +50,7 @@ function BreadForm() {
 
 **✔️ Right usage using `AnyListener` instead of `useAnyListener`**
 
-```jsx
+```tsx
 function BreadForm() {
     const form = useForm < Bread > { color: "brown", size: 58 };
     return (
@@ -75,7 +75,7 @@ function BreadForm() {
 
 Returns the form that got passed as parameter, you can destructure it.
 
-```jsx
+```tsx
 // Example usage
 const { values, defaultValues } = useAnyListener(form);
 // Same as form.values, form.defaultValues
diff --git a/articles/useForm.md b/articles/useForm.md
@@ -38,7 +38,7 @@ True if you want to validate when the form mounts.
 
 The default state of the form. Form state contains variables like isSubmitting and other **custom** form related states.
 
-```jsx
+```tsx
 const form = useForm({ name: "John" }); // form.state = { isSumitting: false } by default.
 
 // Usage with a custom isLoading state.
diff --git a/articles/useListener.md b/articles/useListener.md
diff --git a/articles/yup.md b/articles/yup.md
diff --git a/components/SideBar.tsx b/components/SideBar.tsx
diff --git a/package.json b/package.json
diff --git a/pages/docs/[doc].tsx b/pages/docs/[doc].tsx
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@`
`2`	`2`
`3`	`3`	`![live updating form values](https://raw.githubusercontent.com/wiki/CodeStix/typed-react-form/images/submitbutton.gif)`
`4`	`4`
`5`		-```jsx
	`5`	+```tsx
`6`	`6`	`function FormExample() {`
`7`	`7`	`const form = useForm(`
`8`	`8`	`{`