https://github.com/tobua/konfi
Standard for Configuration Management and WYSIWYG Editor
https://github.com/tobua/konfi
Last synced: 3 months ago
JSON representation
Standard for Configuration Management and WYSIWYG Editor
- Host: GitHub
- URL: https://github.com/tobua/konfi
- Owner: tobua
- Created: 2020-08-01T14:46:03.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2022-03-30T16:18:07.000Z (about 3 years ago)
- Last Synced: 2025-02-15T14:16:14.083Z (3 months ago)
- Language: TypeScript
- Homepage: https://tobua.github.io/konfi
- Size: 2.95 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# konfi
UI for Configuration Management.
- WYSIWYG editing of JSON objects
- Callback on edits
- Declarative or inferred schema
[](https://tobua.github.io/konfi)
## Installation & Usage
```
npm i konfi
```
```jsx
import React from 'react'
import { createRoot } from 'react-dom/client'
import { Konfi, Type } from 'konfi'
const data = {
someValue: 5,
anotherValue: 'red',
}
// The schema is optional and in most cases can be inferred from the data.
const schema = {
someValue: {
type: Type.number,
},
anotherValue: {
type: Type.string,
},
}
const onChange = (data: any) => console.log('new configuration', data)
createRoot(document.body).render(
,
document.body
)
```
## Schema
The following properties can be used to describe the values in further detail:
`type: Type.number | Type.string | Type.boolean | Type.hex | Type.filePath | Type.select`
Various types to describe what input to show and which standard validations to apply.
`valid: (value: any) => boolean`
A function indicating whether the current value is valid, otherwise the input will be shown in erroneous state and the change will not be propagated.
## Types
### select
```js
{
type: Type.select,
values: ['first', 'second', 'third']
}
```
### color
```js
{
type: Type.hex
}
```
This will display the color with a color picker overlay to choose another HEX color.
## Upcoming Features
- Regex Validation
- generate new data with immer patches