kate-client

kate-client - библиотека для разработки интерфейса приложений

Библиотека представляет собой надстройку над React, с разделением отображения и логики и императивным стилем описания логики интерфейса.

Концепция

Библиотека реализует подход работы с интерфейсом в стиле визуальных сред разработки, когда приложение является совокупностью форм, форма описывается набором элементов, а описание логики интерфейса программируется в простом императивном стиле.

Пример. Отображение и скрытие элемента формы и вывод надписи по условию будет выглядеть так:

showHideEMail = () => {
  this.content.email.hidden = !this.content.email.hidden;
}
checkPasswords = () => {
  if (this.content.password.value !== this.content.password2.value) {
    this.content.passwordsMatchText.title = 'Passwords do not match';
  } else {
    this.content.passwordsMatchText.title = 'Passwords match';
  }
}

(в примере: this.content - коллекция элементов форы)

Структура

Интерфейс описывается Приложением и набором Форм.

• Форма представляет собой набор визуальных элементов и логики взаимодействия с пользователем.
• Приложение является связующим звеном для разных Форм, предоставляя разделяемый конекст и метод открытия Форм.

Формы и Приложение описываются классами с наследованием от базовых.

Визуальная часть описывается Макетами и Компонентами которые представляют собой React компоненты.

• Макет представляет собой базовую разметку с определением областей (одной или нескольких), в которых будут выводится формы
• Компоненты представляют собой визуализацию элементов формы.

В каждый момент времени в одной области Макета отображается только одна Форма или не отображается ничего. При открытии другой Формы, предыдущая закрывается (удаляется).

Библиотека реализует роутинг для возможности открытия нужного экрана приложения по ссылке. Адресная стока формируется из имени Макета, открытых Форм и параметров.

Установка

Библиотека основана на React. Самый простой вариант запуска - с помощью пакета react-scripts (включен в зависимости пакета, отдельно устанавливать не надо).

npm install kate-client --save

В файле package.json:

  "scripts": {
    "start": "react-scripts start",
  }

Создать папку public с файлом index.html для работы react-scripts ( пример ).

Запуск

npm start

Использование

Приведеный ниже пример доступен в репозитории в папке example

src/index.js

import KateClient from 'kate-client';

import AppClient from './App';

KateClient({ app: AppClient });

src/App.js

import { App } from 'kate-client';
import { label, link, input } from './components';
import { Layout1, Layout2 } from './layouts'; 
import { Menu, Auth, Item } from './forms';


class AppClient extends App {
  // static path = '/path'; // app root path
  static components = { label, link, input };
  constructor(params) {
    super(params);
    this.forms = {
      Menu,
      Auth,
      Item,
    };
    this.layouts = {
      main: {
        component: Layout1,
        areas: {
          main: { default: true },
          leftMenu: {},
        },
      },
      auth: {
        component: Layout2,
      },
    };
    this.defaultLayout = {
      layout: 'auth',
      areas: { content: 'Auth' },
      // layout: 'main',
      // areas: {
      //   leftMenu: 'Menu',
      // },
    };
  }
}

export default AppClient;

src/forms.js

import { Form } from 'kate-client';

export class Item extends Form {
  constructor(params) {
    super(params);
    this.elements = [
      {
        id: 'formTitle',
        type: 'label',
        title: `This is Item form with param id=${params.params.id}`,
      },
      {
        type: 'input',
        id: 'title',
        value: '',
      },
      {
        type: 'link',
        onClick: this.save,
        title: 'Save',
      }
    ];
  }
  afterInit() {
    console.log('After form init event. From now it is possible to use `this.content`');
    this.setValues({ title: 'Test title' });
  }
  beforeUnmount() {
    console.log('Before form unmount. Good place to clear timers, event subcribtions, etc...');
  }
  // event handlers should be defined as class properties
  save = () => {
    this.content.formTitle.title = `Form values = ${JSON.stringify(this.getValues())}`;
  }
}


export class Menu extends Form {
  constructor(params) {
    super(params);
    this.elements = [
      {
        type: 'link',
        title: 'list',
        onClick: () => this.open('List'),
      },
      {
        type: 'link',
        title: 'item',
        onClick: () => this.open('Item', { id: 123 }),
      },
      {
        type: 'link',
        title: 'auth',
        onClick: this.auth,
      },
    ];
  }
  open = (form, params) => {
    this.app.open(form, params);
  }
  auth = () => {
    this.app.setLayout('auth', { content: 'Auth' });
  }
}

export class Auth extends Form {
  constructor(params) {
    super(params);
    this.elements = [
      {
        type: 'label',
        title: 'This is AUTH form',
      },
      {
        type: 'link',
        title: 'Do auth',
        onClick: this.auth,
      },
    ];
  }
  auth = () => {
    this.app.setLayout('main', { leftMenu: 'Menu' });
  }
}

src/layouts.js

export const Layout1 = ({ content }) => (
  <div style={{ display: 'flex', width: 600, margin: 'auto' }}>
    <div style={{ width: 200 }}>
      Area 1
      <div>{content.leftMenu}</div>
    </div>
    <div style={{ width: 400 }}>
      Area main
      <div>{content.main}</div>
    </div>
  </div>
);

export const Layout2 = ({ content }) => (
  <div style={{ width: 300, margin: 'auto' }}>
    Area AUTH <br />
    {content}
  </div>
);

src/components.js

Более подробно детали разработки компонентов рассмотрены в описании бибилиотеки kate-form

import React from 'react';

export const label = ({ title, setData, t, ...props }) => (
  <span {...props}>{t(title)}</span>
);

export const link = ({ title, onClick }) => (
  <button onClick={onClick} style={{ display: 'block' }}>
    {title}
  </button>
);

export const input = ({ onChange, setData, inputType, value, t, ...props }) => {
  const change = (e) => {
    setData('value', e.target.value);
    if (onChange) onChange(e.target.value);
  };
  return (
    <input onChange={change} type={inputType} value={value || ''} {...props} />
  );
};

Лицензия

MIT