Перейти до основного вмісту

UI Компоненти

інформація

X-Fiber надає можливості використовувати колекції UI компонентів. Так, при потребі реалізації різних графічних інтерфейсів, які використовують різні UI бібліотеки X-Fiber надає можливість створювати перелік необхідних бібліотек UI компонентів.

Архітектура​

Підхід побудови схеми UI компонентів є подібною до побудови бізнес-схеми. Так, окрема UI бібліотека представляє собою колекцію, з переліком просторів імен - кнопки, поля вводу та ін. Кожний простір імен складається з переліку кінцевих компонентів. Наприклад простір імен "кнопки" буде перелічувати "submit", "error", "verify" та ін. типи кнопок. Кожний кінцевий компонент є графічним представленням, яке може ззовні отримувати властивості для зміни відображення конкретного графічного представлення.

ui-components

Розповідь​

інформація

Кожна розповідь storybook призначена для реєстрації, зберігання та відокремлення однойменних просторів імен однієї розповіді від іншої, наприклад простору імен "кнопки".

небезпека

Опис розповідей storybook знаходиться в активній розробці.

Простір імен​

інформація

Розділ представляє собою простір імен, в який входять кінцеві UI компоненти. Розділі слугують для розділення кінцевих UI компонентів на різні простори імен - "кнопки", "поля вводу" тощо.

небезпека

Опис простору імен знаходиться в активній розробці.

Компонент​

інформація

Компонент - кінцеве графічне представлення UI компонента. Кожний компонент описує UI складову та перелік можливих властивостей, які приймає та відображає UI компонент.

Компоненти в більшості випадків використовуються в графічних представленнях предметних областей бізнес-схеми, але можуть такой бути використанні відразу й на сторінках, чи на окремих секціях - Footer, Header тощо.

ui-component.svg

Реєстрація​

Для успішного використання кінцевих компонентів з бібліотек UI компонентів необхідно записати storybook в масив значень функції setStorybooks, яка призначення для реєстрації книг, які використовуються в графічних представлень бізнес-логіки:

Використання в React

Впровадження запуску бізнес-схеми перед візуалізації App компоненту:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

import { initiator, setStorybooks } from 'business-logic'
import { NextUI } from 'storybooks'

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

setStorybooks([NextUI])
initiator.start()

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Використання в Next.js

Впровадження запуску бізнес-схеми в головному шаблоні:

'use client'

import { Inter } from "next/font/google";
import "./globals.css";

import { initiator, setStorybooks } from 'business-logic'
import { NextUI } from 'storybooks'

const inter = Inter({ subsets: ["latin"] });

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
   setStorybooks([NextUI])
   initiator.start()

  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  );
}

Використання в Remix

Впровадження запуску бізнес-схеми в головному шаблоні:

import { Links, Meta, Outlet, Scripts } from "@remix-run/react";

import { initiator, setStorybooks } from 'business-logic'
import { NextUI } from 'storybooks'

export function Layout({ children }: { children: React.ReactNode }) {
   setStorybooks([NextUI])
   initiator.start()

  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        {children}
        <Scripts />
      </body>
    </html>
  );
}

export default function App() {
  return <Outlet />;
}
warning

Місце виклику та реєстрації має суттєве значення.

  1. Реєстрація розповідей повинна відбуватись перед викликом ініціатора ядра відображень.
  2. Виклик повинен здійснюватись або в головному шаблоні, як в Next.js або перед виконанням рендерінгу App компонента, в разі написання проєкту на чистому React.

Використання​

Використання компонентів здійснюється завдяки зарезервованому X-Fiber компоненту з одноіменною назвою - Component.

import { Component, setView } from 'x-fiber/display'
import styles from "./signup-form.module.scss";

type Views = 'SignupForm'
type AppServices = 'BusinessAdmin'
type BusDomains = 'BusUsersAgg'

export const BusUsersAggSignupFormView = setView<Views>(
  "SignupForm",
  (agents, context, props) => {
    const { getStore, getRoute } = agents.schemaAgent;

    const store = getStore<AppServices, BusDomains>(
      "BusinessAdmin",
      "BusUsersAgg"
    )();

    const onClick = async () => {
      const { userId } = await getRoute<AppServices, BusDomains>(
        "BusinessAdmin",
        "BusUsersAgg",
        "v1/signup",
        "POST"
      );

      store.setUserId(userId);
    };

    return (
      <section onClick={onClick} className={styles.wrapper}>
        <Component storybook={'NextUI'} space={'input'} name={'EmailInput'} props={
            {
                placeholder: 'john.doe@gmail.com',
            }
        }/>
      </section>
    );
  }
);