@creopse/react 0.0.8 → 0.0.10

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@creopse/react",
   "description": "Creopse React Toolkit",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "private": false,
   "author": "Noé Gnanih <noegnanih@gmail.com>",
   "license": "MIT",
@@ -14,6 +14,11 @@
       "import": "./dist/index.mjs",
       "require": "./dist/index.cjs"
     },
+    "./hooks": {
+      "types": "./types/hooks/index.d.ts",
+      "import": "./dist/hooks/index.mjs",
+      "require": "./dist/hooks/index.cjs"
+    },
     "./*": "./*"
   },
   "typings": "types/index.d.ts",
@@ -32,22 +37,33 @@
     "preview": "vite preview"
   },
   "peerDependencies": {
+    "@inertiajs/core": "^2.0.0",
+    "@inertiajs/react": "^2.0.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0"
   },
   "dependencies": {
-    "@creopse/utils": "^0.0.10",
-    "framer-motion": "^12.23.9"
+    "@creopse/utils": "^0.0.11",
+    "@vueuse/core": "^14.1.0",
+    "axios": "^1.13.2",
+    "framer-motion": "^12.23.9",
+    "lodash.clonedeep": "^4.5.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.30.1",
+    "@inertiajs/core": "^2.1.6",
+    "@inertiajs/react": "^2.1.6",
+    "@types/lodash.clonedeep": "^4.5.9",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
+    "@types/validator": "^13.15.10",
     "@vitejs/plugin-react": "^4.6.0",
     "eslint": "^9.30.1",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
     "globals": "^16.3.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.35.1",
     "vite": "^7.0.4"

package/types/components/widgets/Image/Image.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface Props {
+    src: string;
+    alt?: string;
+    width?: string | number;
+    height?: string | number;
+    title?: string;
+    loading?: 'lazy' | 'eager';
+    style?: React.CSSProperties;
+    size?: 'small' | 'medium' | 'large' | 'original';
+    sync?: boolean;
+}
+declare const Image: React.FC<Props>;
+export default Image;

package/types/components/widgets/Image/index.d.ts

@@ -0,0 +1 @@
+export { default as Image, type Props as ImageProps } from './Image';

package/types/core/contexts.d.ts

@@ -0,0 +1,7 @@
+import type { PluginConfig } from '@/types/plugin';
+import type PropsManager from './props-manager';
+declare const PropsContext: import("react").Context<PropsManager | null>;
+declare const ConfigContext: import("react").Context<PluginConfig | null>;
+declare const RouterContext: import("react").Context<any>;
+declare const ResolveSectionsContext: import("react").Context<any>;
+export { PropsContext, ConfigContext, RouterContext, ResolveSectionsContext };

package/types/core/props-manager.d.ts

@@ -0,0 +1,15 @@
+declare class PropsManager {
+    private state;
+    private listeners;
+    constructor(initialProps: Record<string, any>);
+    update(payload: Record<string, any>): void;
+    getState(): {
+        props: Record<string, any>;
+    };
+    sync(newProps: Record<string, any>): void;
+    subscribe(callback: (props: Record<string, any>) => void): () => void;
+    private notify;
+    private deepMerge;
+    private isObject;
+}
+export default PropsManager;

package/types/hooks/api.d.ts

@@ -0,0 +1,23 @@
+import type { ApiResponse, Payload } from '@/types/api';
+/**
+ * This hook is used to make API requests.
+ *
+ * @function useApi
+ * @returns {Object} An object containing the following methods:
+ *  - `request`: Makes an API request with the given payload.
+ *  - `addItem`: Adds an item to the API.
+ *  - `deleteItem`: Deletes an item from the API.
+ *  - `updateItem`: Updates an item in the API.
+ *  - `getAllItems`: Gets all items from the API.
+ *  - `getItem`: Gets an item from the API.
+ *  - `handleError`: Handles an error from the API.
+ */
+export declare const useApi: () => {
+    request: (payload: Payload, accessToken?: string, accessForbiddenCallback?: () => void) => Promise<ApiResponse>;
+    getItem: (payload: Payload) => Promise<ApiResponse>;
+    addItem: (payload: Payload) => Promise<ApiResponse>;
+    updateItem: (payload: Payload) => Promise<ApiResponse>;
+    deleteItem: (payload: Payload) => Promise<ApiResponse>;
+    getAllItems: (payload: Payload) => Promise<ApiResponse>;
+    handleError: (error: any) => void;
+};

package/types/hooks/config.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Returns the plugin configuration object.
+ *
+ * This hook is used to access the plugin configuration
+ * in your React components.
+ *
+ * @returns {PluginConfig} the plugin configuration object
+ * @throws {Error} if the CreopseProvider is not found in tree
+ */
+export declare const useConfig: () => {
+    apiBaseUrl: string;
+    apiUrl: string;
+    apiRequestHeaders: {
+        'X-API-Key': string;
+    };
+    debug: boolean;
+    appUrl: string;
+    xApiKey: string;
+    encryptionKey: string;
+};

package/types/hooks/content.d.ts

@@ -0,0 +1,54 @@
+import type { AppInformationKey, ContentModelItemModel, ContentModelModel, MenuItemGroupModel, MenuItemModel, MenuModel, NewsArticleModel, NewsCategoryModel, NewsTagModel, PageModel, SectionModel, SettingType, SharedProps } from '@creopse/utils';
+import type { ErrorBag, Errors, PageProps } from '@inertiajs/core';
+/**
+ * A hook that provides a set of functions and properties for
+ * easily accessing and manipulating page data, content models, menus,
+ * menu items, and more.
+ *
+ * @returns {Object}
+ */
+export declare const useContent: () => {
+    logo: string;
+    icon: string;
+    page: import("@inertiajs/core").Page<SharedProps>;
+    pageData: PageModel | null;
+    newsArticle: NewsArticleModel | undefined;
+    newsCategory: NewsCategoryModel | undefined;
+    newsTag: NewsTagModel | undefined;
+    contentModelItem: ContentModelItemModel | undefined;
+    getProps: () => PageProps & SharedProps & {
+        errors: Errors & ErrorBag;
+    };
+    getMenu: (name: string, filterByIsActive?: boolean) => MenuModel | undefined;
+    getMenuByLocation: (name: string, filterByIsActive?: boolean) => MenuModel | undefined;
+    getMenuItems: (name: string, filterByIsVisible?: boolean) => MenuItemModel[] | undefined;
+    getMenuItemById: (id: number) => MenuItemModel | undefined;
+    getMenuItemsByLocation: (name: string, filterByIsVisible?: boolean) => MenuItemModel[] | undefined;
+    getMenuGroups: (name: string, byLocation?: boolean, filterByIsVisible?: boolean) => MenuItemGroupModel[];
+    getMenuItemsByGroup: (name: string, groupId: number, byLocation?: boolean, filterByIsVisible?: boolean) => MenuItemModel[] | undefined;
+    getMenuGroupedItems: (name: string, byLocation?: boolean, filterByIsVisible?: boolean) => {
+        group: MenuItemGroupModel;
+        items: MenuItemModel[] | undefined;
+    }[];
+    getMenuUngroupedItems: (name: string, byLocation?: boolean, filterByIsVisible?: boolean) => MenuItemModel[] | undefined;
+    getSectionData: (key?: string) => object | any | null;
+    getSectionSettings: (key: string | null | undefined) => object | any | null;
+    getSectionSettingsGroup: (key: string | null | undefined, group: string) => object | any | null;
+    getSectionSetting: (key: string | null | undefined, group: string, name: string) => object | any | null;
+    getAnySectionData: (sectionSlug: string, pageSlug: string, linkId?: string) => Promise<any>;
+    getSectionsInOrder: () => SectionModel[];
+    getFinalPageSections: () => SectionModel[];
+    getSectionRootData: (key?: string) => any;
+    getComponents: () => Record<string, any>;
+    getContentModel: (name: string) => ContentModelModel | undefined;
+    getContentModelItems: (name: string, filterByIsActive?: boolean) => Promise<ContentModelItemModel[]>;
+    getPaginatedContentModelItems: (name: string, pageSize: number, filterByIsActive?: boolean) => Promise<{
+        items: ContentModelItemModel[];
+        total: number;
+        currentPage: number;
+    }>;
+    getAppInformationValue: (key: AppInformationKey, type?: SettingType) => any;
+    appAccentColor: string;
+    appPrimaryColor: string;
+    appSecondaryColor: string;
+};

package/types/hooks/helper.d.ts

@@ -0,0 +1,30 @@
+import { type Language, MenuItemModel } from '@creopse/utils';
+/**
+ * Returns a collection of helper functions and values.
+ *
+ * @returns {Object}
+ */
+export declare const useHelper: () => {
+    is2XlScreen: boolean;
+    isXlScreen: boolean;
+    isLgScreen: boolean;
+    isMdScreen: boolean;
+    isSmScreen: boolean;
+    getTranslation: (data: any, lang: string) => string;
+    getLangageLabel: (value: string) => string | undefined;
+    getLanguageValue: (label: string) => string | undefined;
+    ckEditorToolbarItems: string[];
+    displayFormErrors: (errors: any, displayError: (message: string) => void) => void;
+    resolveHtmlLinks: (data: string | null | undefined, lang: string) => string;
+    resolveUrl: (path: string) => string;
+    updateUserLang: (val: string, reload?: boolean, updateUserPrefs?: boolean) => Promise<void>;
+    languages: Language[];
+    getImage: (path: string, size?: "small" | "medium" | "large" | "original") => Promise<string>;
+    fileUrl: (path: string) => string;
+    currentRoutePath: string;
+    openLink: (str: string) => void;
+    openMenu: (menu?: MenuItemModel) => void;
+    getMenuHref: (menu: MenuItemModel) => string;
+    rHtml: (data: string | null | undefined, lang: string) => string;
+    tr: (data: any, lang: string) => string;
+};

package/types/hooks/index.d.ts

@@ -0,0 +1,6 @@
+export { useApi } from './api';
+export { useProps } from './props';
+export { useConfig } from './config';
+export { useHelper } from './helper';
+export { useContent } from './content';
+export { useNewsletter } from './newsletter';

package/types/hooks/newsletter.d.ts

@@ -0,0 +1,29 @@
+/**
+ * A hook that exposes functions to subscribe the user to the newsletter using
+ * email or phone.
+ *
+ * @returns An object containing the subscribeEmail, subscribePhone, and isLoading
+ * properties.
+ *
+ * @remarks
+ * The subscribeEmail and subscribePhone functions are asynchronous and return nothing.
+ * The isLoading property is a boolean that indicates whether a subscription request is
+ * being processed.
+ *
+ * The subscribeEmail function takes an email address and an optional success callback.
+ * The subscribePhone function takes a phone number and an optional success callback.
+ *
+ * If the request is successful, the user will be subscribed to the newsletter and the
+ * success callback will be called. If the request fails, an appropriate error message
+ * will be displayed to the user.
+ *
+ * The error messages are as follows:
+ * - If the request is invalid, the form errors will be displayed.
+ * - If the request is valid but results in an error, a generic error message will be
+ * displayed.
+ */
+export declare const useNewsletter: () => {
+    subscribePhone: (phone: string, successCallback?: () => void, errorCallback?: (errorData: any) => void) => Promise<void>;
+    subscribeEmail: (email: string, successCallback?: () => void, errorCallback?: (errorData: any) => void) => Promise<void>;
+    isLoading: boolean;
+};

package/types/hooks/props.d.ts

@@ -0,0 +1,9 @@
+/**
+ * A hook that returns the props of the page.
+ *
+ * It subscribes to the PropsManager and updates when props change.
+ *
+ * @throws {Error} if the CreopseProvider is not found in tree
+ * @returns {Record<string, any>} the props of the page
+ */
+export declare const useProps: <T = Record<string, any>>() => T;

package/types/index.d.ts

@@ -1,7 +1,18 @@
+import { type ReactNode } from 'react';
+import PropsManager from './core/props-manager';
+import type { PluginOptions } from './types/plugin';
+interface CreopseProviderProps {
+    children: ReactNode;
+    options: PluginOptions;
+}
+export declare function CreopseProvider({ children, options }: CreopseProviderProps): import("react/jsx-runtime").JSX.Element;
+export { Image, type ImageProps } from './components/widgets/Image';
 export { AsyncImg, type AsyncImgProps } from './components/widgets/AsyncImg';
 export { CustomTransition, type CustomTransitionProps, } from './components/widgets/CustomTransition';
 export { MountedTeleport, type MountedTeleportProps, } from './components/widgets/MountedTeleport';
 export { ReadMore, type ReadMoreProps } from './components/widgets/ReadMore';
 export { StickyBottom, type StickyBottomProps, } from './components/widgets/StickyBottom';
 export { StickyTop, type StickyTopProps } from './components/widgets/StickyTop';
-export { RootContainer, type RootContainerProps, } from './components/core/RootContainer';
+export { RootContainer, type RootContainerProps, } from './components/RootContainer';
+export type { PropsManager };
+export type { PluginOptions };

package/types/types/api.d.ts

@@ -0,0 +1,15 @@
+export type Method = 'get' | 'post' | 'put' | 'delete';
+export interface Payload {
+    method?: Method;
+    routeBase?: string;
+    params?: object;
+    data?: object;
+    url?: string;
+    id?: string;
+}
+export interface ApiResponse {
+    success: boolean;
+    failure: boolean;
+    result: any;
+    error: any;
+}

package/types/types/plugin.d.ts

@@ -0,0 +1,13 @@
+import type { Router } from '@inertiajs/core';
+export interface PluginConfig {
+    debug: boolean;
+    appUrl: string;
+    xApiKey: string;
+    encryptionKey: string;
+}
+export interface PluginOptions {
+    initialProps: Record<string, any>;
+    router?: Router;
+    resolveSections: () => Record<string, unknown>;
+    config: PluginConfig;
+}