lukasbach / ink-form Goto Github PK
View Code? Open in Web Editor NEWComplex user-friendly form component for React Ink
Home Page: https://lukasbach.github.io/ink-form/
Complex user-friendly form component for React Ink
Home Page: https://lukasbach.github.io/ink-form/
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:
Line 48 in 70ab434
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.