@foris/avocado-not-front 0.2.1 → 0.5.0

package/dist/components/body/Body.d.ts

@@ -0,0 +1,13 @@
+import type { FC, ReactNode } from 'react';
+import type { ObjectNotFront } from '../../types';
+interface BodyProps extends ObjectNotFront {
+    inputs: ReactNode[];
+}
+/**
+ * Body component that renders a list of dynamic components inside a section.
+ *
+ * @param props - Props containing inputs (renderable components) and other page data.
+ * @returns JSX Element representing the body of the page.
+ */
+declare const Body: FC<BodyProps>;
+export default Body;

package/dist/components/button/Button.d.ts

@@ -0,0 +1,11 @@
+import { ButtonNotFrontProps } from '../../types';
+/**
+ * Extended props for NotFront Button component.
+ * Includes context identifiers for the userFlow and pageId.
+ */
+interface ButtonNotFrontExtendedProps extends ButtonNotFrontProps {
+    userFlow: string;
+    pageId: string;
+}
+declare const ButtonNotFront: (notFrontProps: ButtonNotFrontExtendedProps) => JSX.Element;
+export default ButtonNotFront;

package/dist/components/code-editor/CodeEditor.d.ts

@@ -0,0 +1,11 @@
+import { CodeEditorNotFrontProps } from '../../types';
+/**
+ * Extended props for NotFront CodeEditor component.
+ * Includes context identifiers for the userFlow and pageId.
+ */
+interface CodeEditorNotFrontExtendedProps extends CodeEditorNotFrontProps {
+    userFlow: string;
+    pageId: string;
+}
+declare const CodeEditorNotFront: (notFrontProps: CodeEditorNotFrontExtendedProps) => JSX.Element;
+export default CodeEditorNotFront;

package/dist/components/content-wrapper/ContentWrapper.d.ts

@@ -0,0 +1,16 @@
+import type { FC, ReactNode } from 'react';
+interface ContentWrapperProps {
+    className?: string;
+    isCentered?: boolean;
+    children?: ReactNode;
+}
+/**
+ * Generic content wrapper to provide consistent layout styling.
+ *
+ * @param className - Additional class names for custom styling.
+ * @param isCentered - Whether to center the content horizontally (default: true).
+ * @param children - The content to render inside the wrapper.
+ * @returns A styled div wrapping the provided children.
+ */
+declare const ContentWrapper: FC<ContentWrapperProps>;
+export default ContentWrapper;

package/dist/components/content-wrapper/index.d.ts

@@ -0,0 +1,2 @@
+import ContentWrapper from './ContentWrapper';
+export default ContentWrapper;

package/dist/components/header/Header.d.ts

@@ -0,0 +1,23 @@
+import type { FC, ReactNode } from 'react';
+interface HeaderProps {
+    className?: string;
+    /**
+     * The theme of the Header. Can be 'light', 'dark', or 'auto'.
+     * Defaults to 'dark'.
+     * This indicates if the Header should react to the theme switch ('auto') or should be always light or dark.
+     */
+    theme?: 'light' | 'dark' | 'auto';
+    title?: string;
+    inputs?: ReactNode[];
+}
+/**
+ * Header component that renders a title and optional dynamic inputs.
+ *
+ * @param className - Additional class names for custom styling.
+ * @param title - Title text displayed as a Heading.
+ * @param theme - Visual theme for the header (light, dark, or auto).
+ * @param inputs - List of dynamic components to render inside the header.
+ * @returns A styled header component.
+ */
+declare const Header: FC<HeaderProps>;
+export default Header;

package/dist/components/index.d.ts

@@ -0,0 +1,7 @@
+import Body from './body/Body';
+import Button from './button/Button';
+import CodeEditor from './code-editor/CodeEditor';
+import ContentWrapper from './content-wrapper/ContentWrapper';
+import Header from './header/Header';
+import TextField from './text-field/TextField';
+export { Body, Button, CodeEditor, ContentWrapper, Header, TextField };

package/dist/components/text-field/TextField.d.ts

@@ -0,0 +1,19 @@
+import { TextFieldNotFrontProps } from '../../types';
+/**
+ * Extended props for NotFront TextField component.
+ * Includes context identifiers for the userFlow and pageId.
+ */
+interface TextFieldNotFrontExtendedProps extends TextFieldNotFrontProps {
+    userFlow: string;
+    pageId: string;
+}
+/**
+ * Renders a text field connected to the NotFront store.
+ *
+ * - Tracks local state.
+ * - Appends an asterisk to the label if the field is required.
+ * - On change, updates the store (`updateEntries`) for a specific userFlow and pageId.
+ *
+ */
+declare const TextFieldNotFront: (notFrontProps: TextFieldNotFrontExtendedProps) => JSX.Element;
+export default TextFieldNotFront;

package/dist/hooks/builder/useBuildComponentsList.d.ts

@@ -0,0 +1,11 @@
+import type { NotFrontComponent } from '../../types';
+/**
+ * Custom hook that maps a list of NotFront component definitions to rendered React components.
+ *
+ * @param userFlow - The current user flow identifier.
+ * @param pageId - The current page identifier.
+ * @param components - An array of NotFront component configuration objects.
+ * @returns A list of rendered components or nulls for unrecognized types.
+ */
+export declare const useBuildComponentsList: (userFlow: string, pageId: string, components: NotFrontComponent[] | null) => (JSX.Element | null)[] | undefined;
+export default useBuildComponentsList;

package/dist/hooks/builder/useBuilder.d.ts

@@ -0,0 +1,12 @@
+import type { ObjectNotFront } from '../../types';
+/**
+ * Custom hook that builds and returns a layout component (`Body` or `Header`)
+ * populated with dynamically rendered child components based on configuration.
+ *
+ * @param userFlow - The current user flow identifier.
+ * @param pageId - The current page identifier.
+ * @param type - Indicates whether to render a 'body' or 'header' layout.
+ * @param notFrontObject - The configuration object containing component data.
+ * @returns A rendered Header or Body component with its child components or null if the type is unrecognized.
+ */
+export declare const useBuilder: (userFlow: string, pageId: string, type: 'body' | 'header', notFrontObject: ObjectNotFront | null) => JSX.Element | null;

package/dist/hooks/builder/usePage.d.ts

@@ -0,0 +1,9 @@
+import { ApiConfig, Page } from '../../types';
+/**
+ * Custom hook to manage page rendering based on API or provided JSON configuration.
+ *
+ * @param apiConfig - API configuration object.
+ * @param jsonPage - Optional page configuration object.
+ * @returns JSX content to render the page (header and body).
+ */
+export declare const usePage: (userFlow: string, apiConfig: ApiConfig, jsonPage?: Page | null) => JSX.Element;

package/dist/hooks/components/useCardNotification.d.ts

@@ -0,0 +1,8 @@
+import { CardNotificationNotFrontProps } from '../../types';
+/**
+ * Function to create a CardNotification component based on a configuration object.
+ *
+ * @param json - The CardNotification configuration object.
+ * @returns A CardNotification component or null if input is invalid.
+ */
+export declare const cardNotification: (json: CardNotificationNotFrontProps) => JSX.Element | null;

package/dist/hooks/components/useHeading.d.ts

@@ -0,0 +1,8 @@
+import { HeadingNotFrontProps } from '../../types';
+/**
+ * Function to create a Heading component based on a configuration object.
+ *
+ * @param json - The Heading configuration object.
+ * @returns A Heading component or null if invalid input.
+ */
+export declare const heading: (json: HeadingNotFrontProps) => JSX.Element | null;

package/dist/hooks/components/useText.d.ts

@@ -0,0 +1,8 @@
+import type { TextNotFrontProps } from '../../types';
+/**
+ * Function to create a Text component based on a configuration object.
+ *
+ * @param json - The Text configuration object.
+ * @returns A Text component or null if input is invalid.
+ */
+export declare const text: (json: TextNotFrontProps) => JSX.Element | null;

package/dist/hooks/index.d.ts

@@ -1,4 +1,5 @@
-import { useCardNotification } from './useCardNotification';
-import { useHeading } from './useHeading';
-import { useText } from './useText';
-export { useCardNotification, useHeading, useText };
+import { cardNotification } from './components/useCardNotification';
+import { heading } from './components/useHeading';
+import { text } from './components/useText';
+import { usePage } from './builder/usePage';
+export { cardNotification, heading, text, usePage };

package/dist/hooks/useAction.d.ts

@@ -0,0 +1,9 @@
+import { AxiosResponse } from 'axios';
+import { NotFrontDataSource } from '../types/componentsCore.type';
+/**
+ * Custom hook that encapsulates actions related to navigation and data fetching for dynamic UI flows.
+ */
+export declare const useAction: () => {
+    getNextUI: (userFlow: string, pageId: string, entries: any, responseKey: string) => Promise<AxiosResponse<any, any>>;
+    fetchAndGetNextUI: (userFlow: string, pageId: string, entries: any, responseKey: string, dataSource: NotFrontDataSource) => Promise<AxiosResponse<any, any> | undefined>;
+};

package/dist/services/axios/axiosServices.d.ts

@@ -0,0 +1,21 @@
+import type { AxiosCall } from './useFetchAndLoad';
+export declare const loadAbort: () => AbortController;
+/**
+ * Axios Get
+ * @param api
+ * @param headers
+ * @param params
+ * @param abort
+ * @returns {call, controller  }
+ */
+export declare const get: <T>(api: string, headers?: {}, params?: {}, abort?: boolean) => AxiosCall<T>;
+/**
+ *
+ * @param api
+ * @param headers
+ * @param data
+ * @param params
+ * @param abort
+ * @returns
+ */
+export declare const post: <T>(api: string, headers?: {}, data?: {}, params?: {}, abort?: boolean) => AxiosCall<T>;

package/dist/services/axios/useFetchAndLoad.d.ts

@@ -0,0 +1,10 @@
+import type { AxiosResponse } from 'axios';
+export interface AxiosCall<T> {
+    call: Promise<AxiosResponse<T>>;
+    controller?: AbortController;
+}
+declare const useFetchAndLoad: () => {
+    callEndpoint: (axiosCall: AxiosCall<any>) => Promise<AxiosResponse<any, any>>;
+    cancelEndpoint: () => void;
+};
+export default useFetchAndLoad;

package/dist/services/not-front/nextUIService.d.ts

@@ -0,0 +1,3 @@
+import type { AxiosResponse } from 'axios';
+import { ApiConfig } from '../../types';
+export declare const nextUIService: (apiConfig: ApiConfig, userFlow: string, hash?: string, data?: {}, params?: {}) => Promise<AxiosResponse<any, any>>;

package/dist/store/useStore.d.ts

@@ -0,0 +1,24 @@
+import type { ApiConfig, Page } from '../types/builder.type';
+export type NotFrontStore = Record<string, UserFlow>;
+export type PageStore = {
+    page?: Page | null;
+};
+export type UserFlow = {
+    apiConfig: ApiConfig;
+    currentPageId: string;
+    entries?: {};
+    pages: Record<string, PageStore>;
+};
+export declare const useStore: import("zustand").UseBoundStore<import("zustand").StoreApi<NotFrontStore>>;
+export declare const setNotFrontStore: (userFlowId: string, pageId: string, apiConfig: ApiConfig, page: Page | null) => void;
+export declare const setPage: (userFlow: string, page: Page) => void;
+/**
+ * Updates the `entries` object of a specific userFlow in the store.
+ *
+ * - Merges the provided `partial` object into the existing entries.
+ * - Preserves all other data in the store (immutably).
+ *
+ * @param userFlow - The identifier for the current userFlow (e.g., 'piper-editor').
+ * @param partial - A key-value map of new form entries to merge into the existing `entries` object.
+ */
+export declare const updateEntries: (userFlow: string, partial: Record<string, any>) => void;

package/dist/style.css

@@ -0,0 +1 @@
+._contentWrapper_12gyy_1{max-width:1440px}._contentWrapper_12gyy_1._contentWrapper__centered_12gyy_4{margin:0 auto}._body_content_2k94c_1{padding:2rem 2.75rem}._codeEditor_1viyo_1:not(:first-child){margin:1rem 0 0}._codeEditor_label_1viyo_4{color:var(--color-neutral-90);display:block;font-family:Roboto,sans-serif;font-size:.75rem;font-weight:700;line-height:.875rem;margin:0 0 .5rem}._codeEditor_input_1viyo_13{border-radius:.25rem;overflow:hidden;max-width:800px;border:1px solid var(--color-neutral-30)}._header_19ove_1{padding:1.5rem 2.75rem;background-color:var(--color-gray-80)}._header_content_19ove_5{display:grid;grid-template-columns:1fr auto;gap:.5rem}._header_content_19ove_5 ._contentLeft_19ove_10{display:flex;flex-direction:column;gap:1.5rem}._header_content_19ove_5 ._contentLeft_19ove_10 ._title_19ove_15{color:var(--color-gray-00)}@media screen and (max-width: 992px){._header_19ove_1{padding:1rem 1.5rem}._header_content_19ove_5 ._contentLeft_19ove_10{gap:2.75rem}._header_content_19ove_5 ._contentLeft_19ove_10 ._title_19ove_15{font-size:1.375rem}}

package/dist/types/builder.type.d.ts

@@ -0,0 +1,78 @@
+import { NotFrontComponent } from './components.type';
+/**
+ * Interface for the configuration required to interact with the API.
+ * This interface includes the necessary details for the API connection.
+ */
+export interface ApiConfig {
+    /**
+     * The base URL or endpoint of the API.
+     * Specifies where the API requests should be sent.
+     */
+    api: string;
+    /**
+     * The headers to be used in the API requests.
+     * Typically contains authentication and content type details.
+     */
+    headers: string;
+}
+/**
+ * Type definition for the page type. Determines if the page is a simple page or a form.
+ */
+export type TypePage = 'page' | 'form';
+/**
+ * Interface for the object that holds components and related properties for a NotFront page.
+ * Represents a section of the page such as a header or body with its associated components.
+ */
+export interface ObjectNotFront {
+    /**
+     * A list of components to be rendered in this section.
+     * This is an optional property, as a section may not always contain components.
+     */
+    components?: NotFrontComponent[];
+    /**
+     * A unique identifier or hash for the object.
+     * Typically used for caching or reference purposes.
+     */
+    hash?: string;
+    /**
+     * The title of the section, displayed at the top of the component.
+     * This property is optional and can be used for section identification.
+     */
+    title?: string;
+    /**
+     * The type of the page section, either a simple page or a form.
+     * This is an optional property and helps define the structure of the content.
+     */
+    type?: TypePage;
+}
+/**
+ * Interface for the page data used in the NotFront system.
+ * Contains a collection of components, a hash for caching, a title, and optional header and body objects.
+ */
+export interface Page {
+    /**
+     * A collection of components to be rendered in the page.
+     * These components make up the structure of the page content.
+     */
+    components: any;
+    /**
+     * A unique identifier or hash for the page.
+     * Used for caching and page state management.
+     */
+    hash: string;
+    /**
+     * The title of the page, displayed as the main header.
+     * This is typically used for the page's title in the browser.
+     */
+    title: string;
+    /**
+     * An optional header object containing its components and properties.
+     * If not provided, the page will not render a header section.
+     */
+    header?: ObjectNotFront | null;
+    /**
+     * An optional body object containing its components and properties.
+     * If not provided, the page will not render a body section.
+     */
+    body?: ObjectNotFront | null;
+}

package/dist/types/components.type.d.ts

@@ -1,23 +1,124 @@
-import { HeadingProps, CardNotificationProps, TextProps } from '../../../avocado-suite';
-export interface CardNotificationNotFrontProps extends CardNotificationProps {
+import { ButtonProps, CardNotificationProps, HeadingProps, TextFieldProps, TextProps } from '../../../avocado-suite';
+import { NotFrontActionType, NotFrontBaseProps, NotFrontDataSource } from './componentsCore.type';
+/**
+ * Interface for the props used in the ButtonNotFrontProps component.
+ */
+export interface ButtonNotFrontProps extends NotFrontBaseProps, ButtonProps {
+    component: 'button';
     /**
-     * @deprecated Use `content` instead. This property will be removed in the future.
+     * Defines the action triggered when the button is clicked.
+     */
+    actionType: NotFrontActionType;
+    /**
+     * The content inside the Button component.
+     */
+    content?: string;
+    /**
+     * @deprecated Use `content` instead.
+     * Retained for backward compatibility with legacy backend responses.
+     */
+    label?: string;
+    /**
+     * Optional data source used when the actionType involves fetching data.
+     */
+    dataSource: NotFrontDataSource;
+    /**
+     * Optional URL to redirect the user.
+     */
+    redirectUrl: string;
+}
+/**
+ * Interface for the props used in the CardNotificationNotFront component.
+ */
+export interface CardNotificationNotFrontProps extends NotFrontBaseProps, CardNotificationProps {
+    component: 'cardNotification';
+    /**
+     * The content to be displayed inside the CardNotification component.
+     * This property is optional and represents the main text or message of the notification.
      */
-    description?: string;
     content?: string;
+    /**
+     * @deprecated Use `content` instead.
+     * This property will be removed in the future once the backend stops sending it.
+     * Currently kept for backward compatibility with existing implementations.
+     */
+    description?: string;
+}
+/**
+ * Interface for the props used in the CodeEditorNotFront component.
+ */
+export interface CodeEditorNotFrontProps extends NotFrontBaseProps {
+    component: 'code';
+    /**
+     * The label shown above the code editor input.
+     */
+    label: string;
+    /**
+     * Initial or current value of the code editor. Could be string or parsed object.
+     */
+    value: any;
+    /**
+     * Placeholder text displayed when the editor is empty.
+     */
+    placeholder: string;
+    /**
+     * Indicates whether the code editor input is mandatory.
+     */
+    required: boolean;
+    /**
+     * Programming language for syntax highlighting (e.g., 'yaml', 'json', 'sql').
+     */
+    language: string;
 }
-export interface HeadingNotFrontProps extends HeadingProps {
+/**
+ * Interface for the props used in the HeadingNotFront component.
+ */
+export interface HeadingNotFrontProps extends NotFrontBaseProps, HeadingProps {
+    component: 'heading';
+    /**
+     * The content to be displayed inside the Heading component.
+     * This property is optional and represents the text or content shown in the heading.
+     */
     content?: string;
+    /**
+     * The visual and semantic variant of the heading.
+     * Defines the HTML tag and appearance of the heading element.
+     */
     variant?: 'h1' | 'h2' | 'h3' | 'h4';
 }
 /**
  * Interface for the props used in the TextNotFront component.
- * Extends the basic TextProps interface, with a required `content` property.
  */
-export interface TextNotFrontProps extends TextProps {
+export interface TextNotFrontProps extends NotFrontBaseProps, TextProps {
+    component: 'text';
     /**
      * The content to be displayed in the component.
      * This property is required and will define the text shown in the component.
      */
     content: string;
 }
+/**
+ * Interface for the props used in the TextFieldNotFront component.
+ */
+export interface TextFieldNotFrontProps extends NotFrontBaseProps, TextFieldProps {
+    component: 'textField';
+    /**
+     * Indicates whether the code editor input is mandatory.
+     */
+    required: boolean;
+}
+/**
+ * Union type representing all possible NotFront component prop types.
+ */
+export type NotFrontComponent = ButtonNotFrontProps | CardNotificationNotFrontProps | CodeEditorNotFrontProps | HeadingNotFrontProps | TextNotFrontProps | TextFieldNotFrontProps;
+/**
+ * Mapping of component identifiers (as strings) to their corresponding prop types.
+ */
+export type NotFrontComponentTypeMap = {
+    button: ButtonNotFrontProps;
+    cardNotification: CardNotificationNotFrontProps;
+    code: CodeEditorNotFrontProps;
+    heading: HeadingNotFrontProps;
+    text: TextNotFrontProps;
+    textField: TextFieldNotFrontProps;
+};

package/dist/types/componentsCore.type.d.ts

@@ -0,0 +1,14 @@
+export interface NotFrontBaseProps {
+    hash: string;
+    responseKey: string;
+}
+export type NotFrontActionType = 'GO_TO_NEXT_UI' | 'FETCH_AND_GO_TO_NEXT_UI' | 'REDIRECT';
+export type NotFrontRequestType = 'rest';
+export type NotFrontRequestMethod = 'post';
+export interface NotFrontDataSource {
+    data: any;
+    headers: any;
+    method: NotFrontRequestMethod;
+    type: NotFrontRequestType;
+    url: string;
+}

package/dist/types/index.d.ts

@@ -1 +1,2 @@
 export * from './components.type';
+export * from './builder.type';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@foris/avocado-not-front",
-  "version": "0.2.1",
+  "version": "0.5.0",
   "publishConfig": {
     "access": "public"
   },
@@ -18,13 +18,19 @@
     }
   },
   "dependencies": {
+    "@codemirror/lang-json": "6.0.1",
+    "@codemirror/lang-sql": "6.8.0",
+    "@codemirror/lang-yaml": "6.1.2",
+    "@uiw/react-codemirror": "4.23.12",
+    "axios": "^1.8.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-select": "5.8.0",
     "react-select-async-paginate": "0.7.3",
+    "zustand": "4.5.4",
     "@foris/avocado-core": "0.10.0",
     "@foris/avocado-icons": "1.13.0",
-    "@foris/avocado-suite": "0.31.1"
+    "@foris/avocado-suite": "0.32.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "6.4.0",
@@ -38,6 +44,7 @@
     "classnames": "2.3.2",
     "jsdom": "24.0.0",
     "sass": "1.62.1",
+    "stubby": "^5.1.0",
     "typescript": "5.1.3",
     "vite": "5.0.12",
     "vite-plugin-dts": "3.7.1",
@@ -48,6 +55,8 @@
     "react-select-async-paginate": "0.7.3"
   },
   "scripts": {
-    "build": "tsc && vite build"
+    "build": "tsc && vite build",
+    "start:stubby": "stubby -d src/services/stubs/stubby-config.yml -w -s 8200 -q",
+    "start:stubby-examples": "stubby -d src/services/stubs/stubby-examples.yml -w -s 8300 -q"
   }
 }

package/dist/hooks/useCardNotification.d.ts

@@ -1,8 +0,0 @@
-import { CardNotificationNotFrontProps } from '../types';
-/**
- * Custom hook to create a CardNotification component
- * @returns { createCardNotification }
- */
-export declare const useCardNotification: () => {
-    createCardNotification: (json: CardNotificationNotFrontProps) => JSX.Element | null;
-};

package/dist/hooks/useHeading.d.ts

@@ -1,8 +0,0 @@
-import { HeadingNotFrontProps } from '../types';
-/**
- * Custom hook to create a Heading component
- * @returns { createHeading }
- */
-export declare const useHeading: () => {
-    createHeading: (json: HeadingNotFrontProps) => JSX.Element | null;
-};

package/dist/hooks/useText.d.ts

@@ -1,10 +0,0 @@
-import type { TextNotFrontProps } from '../types';
-/**
- * Custom hook that creates a Text component.
- * This hook takes in the `TextNotFrontProps` and returns a Text component with the specified properties.
- *
- * @returns {Object} Returns an object containing the `createText` function.
- */
-export declare const useText: () => {
-    createText: (json: TextNotFrontProps) => JSX.Element | null;
-};

package/dist/types/cardNotification.type.d.ts

@@ -1,8 +0,0 @@
-import { CardNotificationProps } from '../../../avocado-suite';
-export interface CardNotificationNotFrontProps extends CardNotificationProps {
-    /**
-     * @deprecated Use `content` instead. This property will be removed in the future.
-     */
-    description?: string;
-    content?: string;
-}

package/dist/types/heading.type.d.ts

@@ -1,5 +0,0 @@
-import { HeadingProps } from '../../../avocado-suite';
-export interface HeadingNotFrontProps extends HeadingProps {
-    content?: string;
-    variant?: 'h1' | 'h2' | 'h3' | 'h4';
-}