@foris/avocado-not-front 0.4.0 → 0.5.0

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/index.d.ts

@@ -1,6 +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, ContentWrapper, Header, TextField };
+export { Body, Button, CodeEditor, ContentWrapper, Header, TextField };

package/dist/hooks/useAction.d.ts

@@ -1,4 +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, payload: any) => Promise<AxiosResponse<any, any> | undefined>;
+    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/style.css

@@ -1 +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}._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}}
+._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/components.type.d.ts

@@ -1,32 +1,34 @@
 import { ButtonProps, CardNotificationProps, HeadingProps, TextFieldProps, TextProps } from '../../../avocado-suite';
-export interface NotFrontBaseProps {
-    hash: string;
-    responseKey: string;
-}
-export type NotFrontActionType = 'GO_TO_NEXT_UI' | 'FETCH_AND_GO_TO_NEXT_UI' | 'REDIRECT';
+import { NotFrontActionType, NotFrontBaseProps, NotFrontDataSource } from './componentsCore.type';
 /**
  * Interface for the props used in the ButtonNotFrontProps component.
- * Extends the base ButtonProps from the Avocado Suite library and
- * the NotFrontBaseProps interface, adding specific properties for dynamic buttons.
  */
 export interface ButtonNotFrontProps extends NotFrontBaseProps, ButtonProps {
     component: 'button';
+    /**
+     * Defines the action triggered when the button is clicked.
+     */
     actionType: NotFrontActionType;
     /**
-     * The content to be displayed inside the Button component.
+     * The content inside the Button component.
      */
-    content: 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.
+     * 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.
- * Extends the base CardNotificationProps from the Avocado Suite library and
- * the NotFrontBaseProps interface, adding specific properties for dynamic card notifications.
  */
 export interface CardNotificationNotFrontProps extends NotFrontBaseProps, CardNotificationProps {
     component: 'cardNotification';
@@ -42,10 +44,34 @@ export interface CardNotificationNotFrontProps extends NotFrontBaseProps, CardNo
      */
     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;
+}
 /**
  * Interface for the props used in the HeadingNotFront component.
- * Extends the basic HeadingProps from the Avocado Suite library and the NotFrontBaseProps interface,
- * adding custom properties specific to the NotFront dynamic heading components.
  */
 export interface HeadingNotFrontProps extends NotFrontBaseProps, HeadingProps {
     component: 'heading';
@@ -57,18 +83,11 @@ export interface HeadingNotFrontProps extends NotFrontBaseProps, HeadingProps {
     /**
      * The visual and semantic variant of the heading.
      * Defines the HTML tag and appearance of the heading element.
-     *
-     * Possible values:
-     * - 'h1'
-     * - 'h2'
-     * - 'h3'
-     * - 'h4'
      */
     variant?: 'h1' | 'h2' | 'h3' | 'h4';
 }
 /**
  * Interface for the props used in the TextNotFront component.
- * Extends the basic TextProps from the Avocado Suite library, with a required `content` property.
  */
 export interface TextNotFrontProps extends NotFrontBaseProps, TextProps {
     component: 'text';
@@ -80,26 +99,25 @@ export interface TextNotFrontProps extends NotFrontBaseProps, TextProps {
 }
 /**
  * Interface for the props used in the TextFieldNotFront component.
- * Extends the basic TextProps from the Avocado Suite library, with a required `content` property.
  */
 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.
- *
- * Used to type individual components rendered from a configuration-based schema.
  */
-export type NotFrontComponent = ButtonNotFrontProps | CardNotificationNotFrontProps | HeadingNotFrontProps | TextNotFrontProps | TextFieldNotFrontProps;
+export type NotFrontComponent = ButtonNotFrontProps | CardNotificationNotFrontProps | CodeEditorNotFrontProps | HeadingNotFrontProps | TextNotFrontProps | TextFieldNotFrontProps;
 /**
  * Mapping of component identifiers (as strings) to their corresponding prop types.
- *
- * Used for dynamic component rendering based on type-safe lookups.
  */
 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@foris/avocado-not-front",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "publishConfig": {
     "access": "public"
   },
@@ -18,6 +18,10 @@
     }
   },
   "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",