open-index/open-npm huggingface dataset:
npm package: @flatland/chokhmah
Description: A unified design system for Flatland Church's digital products. Name Chokhmah for the Hebrew term for wisdom, which was also used to describe a skilled craftsman.
Author: Flatland Church
Latest version: 1.9.1

# Chokhmah

The Chokhmah package is the component library for [Flatland Church's](https://flatlandchurch.com) unified design system called Chokhmah.

## Why Chokhmah?
 Chokhmah (ḥoḵma) is the Biblical Hebrew word for wisdom. The word would also be used to describe the skill of a craftsman.
npm package: @flatmax/lit-jrpc-node
Description: Microapp to connect Lit and node with jrpc-oo. This is a microapp starter.
Author: @flatmax
Latest version: 1.0.2

# lit-jrpc-node : lit-jrpc to jrpc-node
Basic microapp infrastructure for Lit web components which interface other web-components or nodejs using [jrpc-oo](https://github.com/flatmax/jrpc-oo).

This infrastructure can be easily cloned and updated for your own microapp which allows you to call objects using JRPC2 over the network between browsers, node or both.

# Local Demo with nodjes and `web-dev-server`

We will use secure websockets (although you don't have to), so first generate the certificate :
```bash
./jrpc-node.genCert.sh
```

Install the requirements :

```bash
npm i
```

## Start jrpc-node

Start the nodejs JRPC-OO side :

```
./jrpc-node.js
```

## Start lit-jrpc

Start the web dev server :

```bash
npm start
```
If the browser doesn't open to the demo, manually copy the url from the command line to the browser.

Note : for the first time, look at the console, as you have to clear the browser to use the private cert in this example due to the browser's "privacy error".

# Customise this microapp

We will clone and take ownership of the webcomponent and node class. We will use vanilla in place of lit.
* First clone the repo : ```git clone https://github.com/flatmax/lit-jrpc-node.git```
* Rename the repo : ```mv lit-jrpc-node vanilla-jrpc-node```

## Rename the webcomponent

Steps to create your own web component :
* Choose a name for your component : I will choose VanillaJRPC (vanilla-jrpc)
* Rename some files in the repo :
  * mv lit-jrpc.js vanilla-jrpc.js
  * mv src/LitJRPC.js src/VanillaJRPC.js
* Find and replace the component name :
  * Replace "LitJRPC" for "VanillaJRPC"
  * Replace "lit-jrpc" for "vanilla-jrpc"

## Customise your OO class

* Choose a name for your class : I will choose VanillaNode
* Rename the class file :
  * mv TestClass.js VanillaNode.js
* Find and replace the class name :
  * Replace "TestClass" for "VanillaNode"
npm package: @flatmax/lit-jrpc-swig
Description: Microapp to connect Lit and node to c++ with swig and jrpc-oo. This is a microapp starter.
Author: @flatmax
Latest version: 1.0.2

# lit-jrpc-swig : lit-jrpc to jrpc-node to node-C++

Basic microapp infrastructure for Lit web components which interface other web-components or nodejs using [jrpc-oo](https://github.com/flatmax/jrpc-oo).

In this microapp, lit eventually interfaces C++ over the network through jrpc then locally from js to C++ using swig.

This infrastructure can be easily cloned and updated for your own microapp which allows you to call objects using JRPC2 over the network between browsers, node or both.

# Local Demo with nodjes and `web-dev-server`

First compile the C++ with swig. Then setup the network and run.

## compile C++

Follow the [README.md](https://github.com/flatmax/lit-jrpc-swig/blob/master/C%2B%2B/README.md) in C++
```
cd C++
./autogen.sh
./configure
make
# test if you like
cd test
./RunTest.js
```

## setup the network and webapp

We will use secure websockets (although you don't have to), so first generate the certificate :
```bash
./jrpc-node.genCert.sh
```

Install the requirements :

```bash
npm i
```

## Start jrpc-node

Start the nodejs JRPC-OO side :

```
./jrpc-node.js
```

## Start lit-jrpc

Start the web dev server :

```bash
npm start
```
If the browser doesn't open to the demo, manually copy the url from the command line to the browser.

Note : for the first time, look at the console, as you have to clear the browser to use the private cert in this example due to the browser's "privacy error".

## In the browser

Click the Test.sayHello button to execute the Test::sayHello C++ code on the other side of the network.

# Customise this microapp

We will clone and take ownership of the webcomponent and node class. We will use vanilla in place of lit.
* First clone the repo : ```git clone https://github.com/flatmax/lit-jrpc-node.git```
* Rename the repo : ```mv lit-jrpc-node vanilla-jrpc-node```

## Rename the webcomponent

Steps to create your own web component :
* Choose a name for your component : I will choose VanillaJRPC (vanilla-jrpc)
* Rename some files in the repo :
  * mv lit-jrpc.js vanilla-jrpc.js
  * mv src/LitJRPC.js src/VanillaJRPC.js
* Find and replace the component name :
  * Replace "LitJRPC" for "VanillaJRPC"
  * Replace "lit-jrpc" for "vanilla-jrpc"

## Customise your OO class

* Choose a name for your class : I will choose VanillaNode
* Rename the class file :
  * mv TestClass.js VanillaNode.js
* Find and replace the class name :
  * Replace "TestClass" for "VanillaNode"
npm package: @flatmax/web-lit-component
Description: Clone this component to build new ones based on Lit
Author: @flatmax
Latest version: 1.0.0

# \<web-lit-component>
Basic infrastructure for Lit web components. Use this repo to start a new webcomponent.

Steps to create your own web component based on Lit :
* Choose a name for your component : I will choose VanillaLit (vanilla-lit)
* Clone the repo : ```git clone git@github.com:flatmax/web-lit-component.git```
* Rename the repo : ```mv web-lit-component vanilla-lit```
* Rename some files in the repo :
  * mv web-lit-component.js vanilla-lit.js
  * mv src/WebLitComponent.js src/VanillaLit.js
* Find and replace the component name :
  * Replace "WebLitComponent" for "VanillaLit"
  * Replace "web-lit-component" for "vanilla-lit"

## Local Demo with `web-dev-server`
```bash
npm start
```
To run a local development server that serves the basic demo located in `demo/index.html`

## Usage
```html
<script type="module">
  import 'web-lit-component/web-lit-component.js';
</script>

<web-lit-component></web-lit-component>
```
npm package: @flatom/core
Description: Core package
Author: Evgeny
Latest version: 0.7.16

# `core`

> TODO: description

## Usage

```
const core = require('core');

// TODO: DEMONSTRATE API
```


Гарантируется:
* Обновление стейта синхронно
* Запуск реакции асинхронно (в then)
* Вызов подписчиков

когда выполняется executor?
как работает then ?
npm package: @flatom/debug
Description: Connection to Redux dev tools
Author: Evgeny
Latest version: 0.7.16

# @flatom/react

Package for debugging [Flatom](https://github.com/arswarog/flatom) via Redux DevTools.

[![npm](https://img.shields.io/npm/v/@flatom/debug?style=flat-square)](https://www.npmjs.com/package/@flatom/debug)
![npm type definitions](https://img.shields.io/npm/types/@flatom/debug?style=flat-square)
[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@flatom/debug?style=flat-square)](https://bundlephobia.com/result?p=@flatom/debug)
![GitHub](https://img.shields.io/github/license/arswarog/flatom?style=flat-square)

## Install

`npm i @flatom/debug`

or

`yarn add @flatom/debug`

> `@flatom/debug` depends on `@flatom/core`.

## Usage

### Step 1. Connect to redux dev tools

```tsx
import { createStore } from '@flatom/core'
import { connectReduxDevtools } from '@flatom/debug'

const store = createStore();
connectReduxDevtools(store);
```
npm package: @flatom/forms
Description: Create forms
Author: Evgeny
Latest version: 0.7.16

# @flatom/forms

Forms for [Flatom](https://github.com/arswarog/flatom).

[![npm](https://img.shields.io/npm/v/@flatom/forms?style=flat-square)](https://www.npmjs.com/package/@flatom/forms)
![npm type definitions](https://img.shields.io/npm/types/@flatom/forms?style=flat-square)
[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@flatom/forms?style=flat-square)](https://bundlephobia.com/result?p=@flatom/forms)
![GitHub](https://img.shields.io/github/license/arswarog/flatom?style=flat-square)

## Install

`npm i @flatom/forms`

or

`yarn add @flatom/forms`

> `@flatom/forms` depends on `@flatom/core`.

## Usage

### Step 1. Connect to redux dev tools

```tsx
import { createStore } from '@flatom/core'
import { connectReduxDevtools } from '@flatom/debug'

const store = createStore();
connectReduxDevtools(store);
```
npm package: @flatom/forms-react
Description: Create forms for react
Author: Evgeny
Latest version: 0.7.16

# @flatom/forms-react

React bindings for Forms of [Flatom](https://github.com/arswarog/flatom).

[![npm](https://img.shields.io/npm/v/@flatom/forms-react?style=flat-square)](https://www.npmjs.com/package/@flatom/forms-react)
![npm type definitions](https://img.shields.io/npm/types/@flatom/forms-react?style=flat-square)
[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@flatom/forms-react?style=flat-square)](https://bundlephobia.com/result?p=@flatom/forms-react)
![GitHub](https://img.shields.io/github/license/arswarog/flatom-react?style=flat-square)

## Install

`npm i @flatom/forms-react`

or

`yarn add @flatom/forms-react`

> `@flatom/forms` depends on `@flatom/core`, `@flatom/react` and `@flatom/forms`.

## Usage

### Step 1: Define you own validators and error messages
```ts
import { createSyncValidator } from '@flatom/forms';

const titleValidator = createSyncValidator('title', (prefix: string) => (value: string) => {
    if (value.startsWith(prefix)) {
        return null
    } else {
        return {
            prefixRequired: { prefix }
        }
    }
})                
                
const errorMessages: ValidationErrorMessages = {
    required: 'Required field',
    children: 'Please fill all fields',
    min: 'Value have to more then {min}',
    max: 'Value have to less then {max}',
    prefixRequired: 'Require prefix: {prefix}',
};
```

### Step 2. Define form schema

```ts
import { declareFormSchema, validators } from '@flatom/forms';

const formSchema = declareFormSchema({
    id: 'my-form',
    nullable: true,
    controls: {
        title: {
            defaultValue: '',
            validators: [validators.required(), titleValidator('prefix ')],
        },
        value: {
            defaultValue: 0,
            validators: [validators.required(),validators.min(1), validators.max(100)],
        },
    },
});
```

### Step 3: Create field

// todo

### Step 4: Create form

```tsx
const MyForm = ()=> {
    const form = useForm(addTransactionFormSchema, formValidators, errorMessages);

    return (
        <FlatomForm
            form={props.form}
            onSubmit={onSubmit}
            onSubmitInvalid={onSubmitInvalid}
        >
        </FlatomForm>
    )
}
```
npm package: @flatom/react
Description: React binding for @flatom/core
Author: Evgeny
Latest version: 0.7.16

# @flatom/react

React bindings package for [Flatom](https://github.com/arswarog/flatom) store.

[![npm](https://img.shields.io/npm/v/@flatom/react?style=flat-square)](https://www.npmjs.com/package/@flatom/react)
![npm type definitions](https://img.shields.io/npm/types/@flatom/react?style=flat-square)
[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@flatom/react?style=flat-square)](https://bundlephobia.com/result?p=@flatom/react)
![GitHub](https://img.shields.io/github/license/arswarog/flatom?style=flat-square)

## Install

`npm i @flatom/react`

or

`yarn add @flatom/react`

> `@flatom/react` depends on `@flatom/core`.

## Usage

### Step 1. Create store

```tsx
// App
import React from 'react'
import { createStore } from '@flatom/core'
import { StoreProvider } from '@flatom/react'
import { Form } from './components/Form'

export const App = () => {
    // create statefull context for atoms execution
    const store = createStore();

    return (
        <div className="App">
            <StoreProvider value={store}>
                <Form/>
            </StoreProvider>
        </div>
    );
}
```

### Step 2. Use in components

```tsx
// components/Form

import { declareAction, declareAtom } from '@flatom/core'
import { useAction, useAtom } from '@flatom/react'

const changeName = declareAction();
const nameAtom = declareAtom<string>(
    'name',
    '',
    on => [
        on(changeName, (state, payload) => payload),
    ],
);

export const Form = () => {
    const name = useAtom(nameAtom);
    const handleChangeName = useAction(e => changeName(e.target.value));

    return (
        <form>
            <label htmlFor="name">Enter your name</label>
            <input id="name" value={name} onChange={handleChangeName}/>
        </form>
    );
}
```

## Hooks Api

### useAtom

Connects the atom to the store represented in context and returns the state of the atom from the store (or default atom state).

#### Basic (useAtom)

```ts
const atomValue = useAtom(atom);
```

#### Depended value by selector

```ts
const atomValue = useAtom(atom, atomState => atomState[props.id], [props.id]);
```

#### Mount without subscription (for subscribing atoms to actions)

```ts
const atomValue = useAtom(atom, () => null, []);
```

### useAction

Binds action with dispatch to the store provided in the context.

#### Basic (useAction)

```ts
const handleDoSome = useAction(doSome);
```

#### Prepare payload for dispatch

```ts
const handleDoSome = useAction(value => doSome({ id: props.id, value }), [
  props.id,
]);
```

#### Conditional dispatch

If action creator don't return an action dispatch not calling.

```ts
const handleDoSome = useAction(payload => {
  if (condition) return doSome(payload);
}, []);
```