Add support for DateTimeLocalField on vanilla

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: |

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.
  *

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()
+  })
+})

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