{"id":18320585,"url":"https://github.com/lukasbach/ink-form","last_synced_at":"2025-05-02T21:30:46.032Z","repository":{"id":45587969,"uuid":"344943203","full_name":"lukasbach/ink-form","owner":"lukasbach","description":"Complex user-friendly form component for React Ink","archived":false,"fork":false,"pushed_at":"2024-05-18T14:06:23.000Z","size":16028,"stargazers_count":35,"open_issues_count":2,"forks_count":10,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-11-05T18:16:43.716Z","etag":null,"topics":["cli","cmd","commandline","component","forms","ink","input","react","reusable","ui"],"latest_commit_sha":null,"homepage":"https://lukasbach.github.io/ink-form/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lukasbach.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"lukasbach"}},"created_at":"2021-03-05T21:52:19.000Z","updated_at":"2024-10-15T19:30:21.000Z","dependencies_parsed_at":"2024-05-18T14:56:04.683Z","dependency_job_id":null,"html_url":"https://github.com/lukasbach/ink-form","commit_stats":{"total_commits":16,"total_committers":2,"mean_commits":8.0,"dds":0.0625,"last_synced_commit":"c26a1e1eca88a8f251d0c70983e1e6b9ec45e775"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukasbach%2Fink-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukasbach%2Fink-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukasbach%2Fink-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukasbach%2Fink-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lukasbach","download_url":"https://codeload.github.com/lukasbach/ink-form/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224333063,"owners_count":17293975,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cli","cmd","commandline","component","forms","ink","input","react","reusable","ui"],"created_at":"2024-11-05T18:16:46.805Z","updated_at":"2024-11-12T19:03:59.735Z","avatar_url":"https://github.com/lukasbach.png","language":"TypeScript","readme":"# ink-form\n\n`ink-form` is a Node library for displaying a user-friendly form in a terminal window.\nIt can be used in two ways, either by using the React Ink component `Form` exported by\nthe package, or by using the imperative API `openForm(options)`.\n\n![alt text](https://github.com/lukasbach/ink-form/raw/main/demo/overview.gif 'Demo 1')\n![alt text](https://github.com/lukasbach/ink-form/raw/main/demo/packagejson.gif 'Demo 2')\n\n## Example usage\n\n    npm install ink-form react ink\n\n```typescript jsx\nconst options = [\n  { label: 'Opt 1', value: 'a' },\n  { label: 'Opt 2', value: 'b' },\n];\n\nconst form: FormProps = {\n  form: {\n    title: 'Form title',\n    sections: [\n      {\n        title: 'Text and Number fields',\n        fields: [\n          { type: 'string', name: 'field1', label: 'Input with initial value', initialValue: 'Initial value' },\n          { type: 'string', name: 'field2', label: 'Masked input', mask: '*' },\n          { type: 'integer', name: 'field3', label: 'Integer between -5 and 8, stepsize 2', min: -5, max: 8, step: 2 },\n          { type: 'float', name: 'field4', label: 'Float between 0 and 5, stepsize 0.1', min: 0, max: 5, step: 0.1 },\n        ],\n      },\n      {\n        title: 'Select and boolean fields',\n        fields: [\n          { type: 'select', name: 'field5', label: 'Select', options },\n          { type: 'multiselect', name: 'field6', label: 'Multi Select', options },\n          { type: 'boolean', name: 'field7', label: 'Boolean select', options },\n        ],\n      },\n    ],\n  },\n};\n\n// either:\n(async () =\u003e {\n  const result = await openForm(form);\n  console.log(`Finished with value`, result);\n})();\n\n// or:\nrender(\n  \u003cForm\n    {...form}\n    onSubmit={result =\u003e {\n      console.log(`Finished with value`, result);\n    }}\n  /\u003e\n);\n```\n\nIf you want to see how using `ink-form` feels, you can clone this repo, run `yarn` to install\ndependencies and then run one of the demo scripts:\n\n- `yarn demo:overview` ([See Code](https://github.com/lukasbach/ink-form/blob/main/src/demo/overview.tsx))\n- `yarn demo:packagejson` ([See Code](https://github.com/lukasbach/ink-form/blob/main/src/demo/packagejson.tsx))\n- `yarn demo:custommanager` ([See Code](https://github.com/lukasbach/ink-form/blob/main/src/demo/custommanager.tsx))\n- `yarn demo:imperative` ([See Code](https://github.com/lukasbach/ink-form/blob/main/src/demo/imperative.ts))\n\n## Update Note\n\nThis package is now pure ESM as of 2.0.0. (Details: https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c)\n\nWith that upgrade, I had to remove the multi select component as its dependency does not support ESM. Please\nuse the v1x version branch with CJS if you need that.\n\n## Documentation\n\nDetailed documentation is available at [lukasbach.github.io/ink-form](https://lukasbach.github.io/ink-form/).\nInstall the package with `npm install ink-form --save` or `yarn add ink-form` to your project.\n\nThen, render the form by invoking the [imperative interface](https://lukasbach.github.io/ink-form/modules.html#openform)\nor by rendering the [React Ink component](https://lukasbach.github.io/ink-form/modules.html#form).\nBoth take [`FormProps`](https://lukasbach.github.io/ink-form/interfaces/formprops.html) as parameters.\n\nThe most important property is the `form`-property, which dictates how the form fields are structured. It follows\nthe [`FormStructure`](https://lukasbach.github.io/ink-form/interfaces/formstructure.html)-interface. Look into the\nexample above to see an example.\n\n## Custom fields\n\nA form field describes a type of input, i.e. text input, number input etc.\nIncluded are:\n\n- FormFieldString\n- FormFieldInteger\n- FormFieldFloat\n- FormFieldSelect\n- FormFieldMultiSelect\n- FormFieldBoolean\n\nYou can add your own form field by extending\n[`AbstractFormField`](https://lukasbach.github.io/ink-form/modules.html#abstractformfield)\nand implementing an associated\n[`FormFieldManager\u003cCustomFormField\u003e`](https://lukasbach.github.io/ink-form/interfaces/formfieldmanager.html).\n\n![alt text](https://github.com/lukasbach/ink-form/raw/main/demo/customfield.gif 'Demo 3')\n","funding_links":["https://github.com/sponsors/lukasbach"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukasbach%2Fink-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flukasbach%2Fink-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukasbach%2Fink-form/lists"}