Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cygnusroboticus/uivm
UI view model generation library
https://github.com/cygnusroboticus/uivm
forms state-management ui
Last synced: 6 days ago
JSON representation
UI view model generation library
- Host: GitHub
- URL: https://github.com/cygnusroboticus/uivm
- Owner: CygnusRoboticus
- Created: 2020-10-08T02:34:58.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2023-01-07T22:08:38.000Z (almost 2 years ago)
- Last Synced: 2024-10-30T00:45:46.642Z (about 2 months ago)
- Topics: forms, state-management, ui
- Language: TypeScript
- Homepage:
- Size: 3.86 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# UIVM: User Interface View Models
A library for creating framework- and interface-agnostic view models with a variety of options.
## Installation and Usage
```sh
npm install uivm
yarn add uivm
```
Sample control usage. [Sandbox](https://codesandbox.io/s/morning-wood-3f8jx?file=/src/index.ts)
```ts
import { tuple } from "fp-ts/lib/function";
import { FieldControl, GroupControl } from "uivm";
const viewModel = new GroupControl({
firstName: new FieldControl("John"),
lastName: new FieldControl("Wick"),
group: (() =>
new GroupControl({
username: new FieldControl("[email protected]"),
password: new FieldControl(null, {
hints: [() => tuple("private", true)],
}),
rememberMe: new FieldControl(false),
}))(),
});
console.log(viewModel.value.group.username); // [email protected]
viewModel.state$.subscribe(console.log);
```
Sample config usage, this produces a view model identical to the above. [Sandbox](https://codesandbox.io/s/jolly-bogdan-y1kvz?file=/src/index.ts)
```ts
import { BasicVisitor, BasicRegistry, createConfigBuilder, FieldConfig, GroupConfig, GroupControl } from "uivm";
interface CustomGroupConfig extends GroupConfig, FieldConfig {
type: "group";
}
interface TextConfig extends FieldConfig {
type: "text";
}
interface CheckboxConfig extends FieldConfig {
type: "checkbox";
}
type CustomConfigs = CustomGroupConfig | TextConfig | CheckboxConfig;
const config: CustomConfigs = {
type: "group",
name: "group",
fields: [
{ type: "text", name: "firstName" },
{ type: "text", name: "lastName" },
{
type: "group",
name: "group",
fields: [
{ type: "text", name: "username" },
{
type: "text",
name: "password",
hints: {
private: [{ name: "static", params: { value: true } }],
},
},
{ type: "checkbox", name: "rememberMe" },
],
},
],
};
const visitor = new BasicVisitor();
const bundler = createConfigBuilder(new BasicRegistry(), visitor);
const control = bundler<
typeof config,
GroupControl<{
firstName: string;
lastName: string;
group: {
username: string;
password: string | null;
rememberMe: boolean;
};
}>
>(config);
control.reset({
firstName: "John",
lastName: "Wick",
group: {
username: "[email protected]",
password: null,
rememberMe: false,
},
});
control.state$.subscribe(console.log);
```
## Demo
https://cygnusroboticus.github.io/uivm
## Building/Testing
- `yarn build` build everything
- `yarn test` run tests