lukasbach / ink-form Goto Github PK

When running npm install ink-form while in an Ink 4 project, the peerDependency fails to resolve.

Steps to Replicate:
npx create-ink-app --typescript
npm i ink-form

I expected the library to install without issue as of #8, Ink 4 support issue had been closed.

Link to line causing problem:

I'm getting an error, is this a bug or me just being dumb?
Here's the error:

src/Build.tsx:26:4 - error TS2741: Property 'sections' is missing in type 'FormProps' but required in type 'FormStructure'.

26    form={form}
      ~~~~

  node_modules/ink-form/lib/types.d.ts:13:5
    13     sections: FormSection[];
           ~~~~~~~~
    'sections' is declared here.
  node_modules/ink-form/lib/types.d.ts:4:5
    4     form: FormStructure;
          ~~~~
    The expected type comes from property 'form' which is declared here on type 'IntrinsicAttributes & FormProps & { children?: ReactNode; }'

Here's the code:

import { Form, FormProps } from 'ink-form';
import { Box } from 'ink';
import React from 'react';


const form: FormProps = {
	form: {
		title: 'Build',
		sections: [
			{
				title: 'Build Options',
				description: 'Options for building',
				fields: [
					{ type: 'boolean', name: 'installHD', label: 'Install HD?', required: true, initialValue: false },
				]
			}
		]
	}
};

const BuildForm = (): React.ReactElement => {
	return (
		<Form
			form={form}
		/>	
	);
};

export default BuildForm;

ink-form currently doesn't seem to work with ink 4.

Describe the bug
When creating a FormField with an onChange handler, the handler isn't called, even though it's defined om the type.

To Reproduce
Steps to reproduce the behavior:

<Form form={{ sections: [ { type: "boolean", title: "a", name: "a", label: "a", onChange: () => { throw new Error("never thrown"); }} ]}} />

Expected behavior
I'd expect the onChange handler to be called.

Additional context
I'm looking to conditionally render fields in a form as requested in #6 but I feel like having a custom manager for a built-in field just to get the onChange handler to work, feels too detailed for such a common task.

Plus, the onChange attribute is already part of the FormField definition so when working with typescript it tells you that it's already part of the API.

Anyway, thanks for this tool, was super easy to create a pretty cool form 🙏

P.S.
if you could support ink@4 and react@18 that would also be amazing!

The declaration of FormField in types.d.ts is the below:

export declare type FormField = FormFieldString | FormFieldInteger | FormFieldFloat | FormFieldSelect | FormFieldMultiSelect | FormFieldBoolean;

From reading the source code, I expected it to contain AbstractFormField<any, any> as one of the unioned types, like this:

export declare type FormField = FormFieldString | FormFieldInteger | FormFieldFloat | FormFieldSelect | FormFieldMultiSelect | FormFieldBoolean | AbstractFormField<any, any>;

This prevents any custom form field types from being declared; all custom form field manager declarations display the error

TS2344: Type 'FormFieldCustom' does not satisfy the constraint 'FormField'.   
Type 'FormFieldCustom' is not assignable to type 'AbstractFormField<"boolean", boolean>'.     
Types of property 'type' are incompatible.       
Type '"custom"' is not assignable to type '"boolean"'.

I have the latest distribution installed, 1.0.1.

This is awesome. 👊

Would it be difficult to modify the <Form> to override some small styling, e.g. colors (blue looks really dark) and the text for the <SubmitButton>?

Hi! Kudos for the great project.

I am considering the use of ink-form in a CLI app but I need to be able to conditionally display some inputs (e.g.: a text input) based on the value of others (e.g.: in a "Yes"/"No" input, "Yes" was selected).

Is there a way to do it or any plan to add it in the near future? Thanks a lot!

Not sure where the issue is, but your examples work great and my code works in this repo, but the code from npm produces [object object] in the ui for whatever is selected.

DevTools shows the same values in the example vs my code. I found that installing what is in github directly with yalc fixes the issue. Perhaps some changes didn't get deployed to npm in the 1.0.1 version?