Add FileField

README.md

@@ -25,6 +25,7 @@ CLI tools to help. just copy and paste from github.
 | `f.search_field`              | SearchField            | :heavy_check_mark: | :white_large_square: | :white_large_square: |
 | `f.select`                    | Select                 | :heavy_check_mark: | :white_large_square: | :white_large_square: |
 | `f.tel_field`                 | TelField               | :heavy_check_mark: | :white_large_square: | :white_large_square: |
+| `f.file_field`                | FileField              | :heavy_check_mark: | :white_large_square: | :white_large_square: |
 | `f.text_field`                | TextField              | :heavy_check_mark: | :white_large_square: | :white_large_square: |
 | `f.time_field`                | TimeField              | :heavy_check_mark: | :white_large_square: | :white_large_square: |
 | `f.url_field`                 | UrlField               | :heavy_check_mark: | :white_large_square: | :white_large_square: |

wrappers/js/vanilla/index.jsx

@@ -1,6 +1,8 @@
 /**
- * Vanilla is a minimum set of components wrapped around regular HTML tags.
- * It works with the output from [FormProps](https://github.com/thoughtbot/form_props).
+ * Vanilla is a minimum set of
+ * [candy_wrappers](https://github.com/thoughtbot/candy_wrapper) around react
+ * HTML tags.  It works with the output from
+ * [FormProps](https://github.com/thoughtbot/form_props).
  *
  * There is no style and structured with bare necessities. You should modify
  * these components to fit your design needs.
@@ -280,3 +282,12 @@ export const TextArea = ({ type: _type, errorKey, ...rest }) => {
       <textarea {...rest}/>
     </FieldBase>;
 };
+/**
+ * A file field component.
+ *
+ * Designed to work with a payload form_props's [file_field helper](https://github.com/thoughtbot/form_props?tab=readme-ov-file#text-helpers).
+ * Mimics the rails equivalent. Please modify to your liking.
+ */
+export const FileField = ({ type: _type, ...rest }) => {
+    return <FieldBase {...rest} type="file"/>;
+};

wrappers/ts/vanilla/FileField.test.jsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { FileField, ValidationContext } from '.'
+
+const buildPayload = () => {
+  return {
+    type: 'file',
+    name: 'post[attachment]',
+    id: 'post_attachment',
+    required: false,
+  }
+}
+
+describe('FileField', () => {
+  it('renders', () => {
+    const payload = buildPayload()
+
+    const { getByLabelText } = render(
+      <FileField {...payload} label={'attachment'} errorKey={'attachment'} />
+    )
+
+    const input = getByLabelText('attachment')
+    expect(input.required).toBeFalsy()
+    expect(input.type).toEqual('file')
+  })
+
+  it('renders with field errors', async () => {
+    const payload = buildPayload()
+
+    const validationErrors = {
+      attachment: 'attachment invalid',
+    }
+
+    const { getByText } = render(
+      <ValidationContext.Provider value={validationErrors}>
+        <FileField {...payload} label={'attachment'} errorKey={'attachment'} />
+      </ValidationContext.Provider>
+    )
+
+    const errorField = getByText('attachment invalid')
+    expect(errorField).not.toBeNull()
+  })
+})

wrappers/ts/vanilla/index.tsx

@@ -1,6 +1,8 @@
 /**
- * Vanilla is a minimum set of components wrapped around regular HTML tags.
- * It works with the output from [FormProps](https://github.com/thoughtbot/form_props).
+ * Vanilla is a minimum set of
+ * [candy_wrappers](https://github.com/thoughtbot/candy_wrapper) around react
+ * HTML tags.  It works with the output from
+ * [FormProps](https://github.com/thoughtbot/form_props).
  *
  * There is no style and structured with bare necessities. You should modify
  * these components to fit your design needs.
@@ -23,6 +25,7 @@ import {
   SearchField as RailsSearchField,
   Select as RailsSelect,
   TelField as RailsTelField,
+  FileField as RailsFileField,
   TextField as RailsTextField,
   TimeField as RailsTimeField,
   UrlField as RailsUrlField,
@@ -504,3 +507,18 @@ export const TextArea = ({ type: _type, errorKey, ...rest }: TextAreaProps) => {
       <textarea {...rest} />
     </FieldBase>
 }
+
+export type FileFieldProps = React.InputHTMLAttributes<HTMLInputElement> &
+  RailsFileField &
+  InputProps
+
+/**
+ * A file field component.
+ *
+ * Designed to work with a payload form_props's [file_field helper](https://github.com/thoughtbot/form_props?tab=readme-ov-file#text-helpers).
+ * Mimics the rails equivalent. Please modify to your liking.
+ */
+export const FileField = ({ type: _type, ...rest }: FileFieldProps) => {
+  return <FieldBase {...rest} type="file" />
+}
+