From 1ddde7359630554d670f1dc92ba8a666f03c1563 Mon Sep 17 00:00:00 2001
From: Johny Ho <johny@thoughtbot.com>
Date: Tue, 26 Nov 2024 06:47:34 -0500
Subject: [PATCH] Add support for DateTimeLocalField on vanilla

---
 README.md                                     |  1 +
 wrappers/js/vanilla/index.jsx                 | 13 ++++-
 .../ts/vanilla/DateTimeLocalField.test.jsx    | 48 +++++++++++++++++++
 wrappers/ts/vanilla/index.tsx                 | 15 ++++++
 4 files changed, 75 insertions(+), 2 deletions(-)
 create mode 100644 wrappers/ts/vanilla/DateTimeLocalField.test.jsx

diff --git a/README.md b/README.md
index 4659863..d0e3e1e 100644
--- a/README.md
+++ b/README.md
@@ -15,6 +15,7 @@ CLI tools to help. just copy and paste from github.
 | `f.collection_radio_buttons`  | CollectionRadioButtons | :heavy_check_mark: | :white_large_square: | :white_large_square: |
 | `f.color_field`               | ColorField             | :heavy_check_mark: | :white_large_square: | :white_large_square: |
 | `f.date_field`                | DateField              | :heavy_check_mark: | :white_large_square: | :white_large_square: |
+| `f.datetime_local_field`      | DateTimeLocalField     | :heavy_check_mark: | :white_large_square: | :white_large_square: |
 | `f.email_field`               | EmailField             | :heavy_check_mark: | :white_large_square: | :white_large_square: |
 |                               | FieldError             | :heavy_check_mark: | :white_large_square: | :white_large_square: |
 | `f.month_field`               | MonthField             | :heavy_check_mark: | :white_large_square: | :white_large_square: |
diff --git a/wrappers/js/vanilla/index.jsx b/wrappers/js/vanilla/index.jsx
index 8131b20..b41f845 100644
--- a/wrappers/js/vanilla/index.jsx
+++ b/wrappers/js/vanilla/index.jsx
@@ -45,10 +45,10 @@ export const Form = ({ extras, validationErrors, children, ...props }) => {
  * Please modify this to your liking.
  */
 export const FieldError = ({ errorKey }) => {
-    if (!errorKey) {
+    const errors = useContext(ValidationContext);
+    if (!errorKey || !errors) {
         return null;
     }
-    const errors = useContext(ValidationContext);
     const validationError = errors[errorKey];
     const hasErrors = errorKey && validationError;
     if (!hasErrors) {
@@ -159,6 +159,15 @@ export const ColorField = ({ type: _type, ...rest }) => {
 export const DateField = ({ type: _type, ...rest }) => {
     return <FieldBase {...rest} type="date"/>;
 };
+/**
+ * A date field component.
+ *
+ * Designed to work with a payload form_props's [date_field helper](https://github.com/thoughtbot/form_props?tab=readme-ov-file#date-helpers).
+ * Mimics the rails equivalent. Please modify to your liking.
+ */
+export const DateTimeLocalField = ({ type: _type, ...rest }) => {
+    return <FieldBase {...rest} type="datetime-local"/>;
+};
 /**
  * A search field component.
  *
diff --git a/wrappers/ts/vanilla/DateTimeLocalField.test.jsx b/wrappers/ts/vanilla/DateTimeLocalField.test.jsx
new file mode 100644
index 0000000..87a74ac
--- /dev/null
+++ b/wrappers/ts/vanilla/DateTimeLocalField.test.jsx
@@ -0,0 +1,48 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { DateTimeLocalField, ValidationContext } from '.'
+
+const buildPayload = () => {
+  return {
+    type: 'datetime-local',
+    defaultValue: '2004-06-15T01:02:03',
+    max: '2010-08-15',
+    min: '2000-06-15',
+    name: 'post[birth_date]',
+    id: 'post_birth_date',
+  }
+}
+
+describe('DateTimeLocalField', () => {
+  it('renders', () => {
+    const payload = buildPayload()
+
+    const { getByLabelText } = render(
+      <DateTimeLocalField {...payload} label={'Birth Date'} errorKey={'birth_date'} />
+    )
+
+    const input = getByLabelText('Birth Date')
+
+    expect(input.value).toEqual('2004-06-15T01:02:03')
+    expect(input.max).toEqual('2010-08-15')
+    expect(input.min).toEqual('2000-06-15')
+    expect(input.type).toEqual('datetime-local')
+  })
+
+  it('renders with field errors', async () => {
+    const payload = buildPayload()
+
+    const validationErrors = {
+      birth_date: 'birth invalid',
+    }
+
+    const { getByText } = render(
+      <ValidationContext.Provider value={validationErrors}>
+        <DateTimeLocalField {...payload} label={'Birth Date'} errorKey={'birth_date'} />
+      </ValidationContext.Provider>
+    )
+
+    const errorField = getByText('birth invalid')
+    expect(errorField).not.toBeNull()
+  })
+})
diff --git a/wrappers/ts/vanilla/index.tsx b/wrappers/ts/vanilla/index.tsx
index 9890d5d..1dfe0d6 100644
--- a/wrappers/ts/vanilla/index.tsx
+++ b/wrappers/ts/vanilla/index.tsx
@@ -14,6 +14,7 @@ import {
   CollectionRadioButtonsField as RailsCollectionRadioButtonsField,
   ColorField as RailsColorField,
   DateField as RailsDateField,
+  DateTimeLocalField as RailsDateTimeLocalField,
   EmailField as RailsEmailField,
   MonthField as RailsMonthField,
   NumberField as RailsNumberField,
@@ -311,6 +312,20 @@ export const DateField = ({ type: _type, ...rest }: DateFieldProps) => {
   return <FieldBase {...rest} type="date" />
 }
 
+export type DateTimeLocalFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
+  RailsDateTimeLocalField &
+  InputProps
+
+/**
+ * A date field component.
+ *
+ * Designed to work with a payload form_props's [date_field helper](https://github.com/thoughtbot/form_props?tab=readme-ov-file#date-helpers).
+ * Mimics the rails equivalent. Please modify to your liking.
+ */
+export const DateTimeLocalField = ({ type: _type, ...rest }: DateTimeLocalFieldProps) => {
+  return <FieldBase {...rest} type="datetime-local" />
+}
+
 export type SearchFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
   RailsSearchField &
   InputProps