@andrew.verdyanwar/microfrontend-types 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./components/card";
+export * from "./components/button";
+export * from "./hooks";
+export * from "./api";

package/dist/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components/card"), exports);
+__exportStar(require("./components/button"), exports);
+__exportStar(require("./hooks"), exports);
+__exportStar(require("./api"), exports);

package/package.json

@@ -0,0 +1,29 @@
+{
+    "name": "@andrew.verdyanwar/microfrontend-types",
+    "version": "1.0.0",
+    "description": "TypeScript definitions for microfrontend components and utilities",
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "files": [
+        "dist",
+        "src"
+    ],
+    "scripts": {
+        "build": "tsc",
+        "dev": "tsc --watch",
+        "prepublishOnly": "npm run build"
+    },
+    "devDependencies": {
+        "typescript": "^5.0.0",
+        "@types/react": "^18.0.0"
+    },
+    "keywords": [
+        "typescript",
+        "microfrontend",
+        "types",
+        "definitions"
+    ],
+    "author": "Wasco Energy",
+    "license": "ISC",
+    "packageManager": "pnpm@10.14.0"
+}

package/src/api/menu.d.ts

@@ -0,0 +1,16 @@
+declare module "wtr/apis" {
+    import { SidebarItem, ApiResponse } from "container/hooks";
+
+    export interface MenuAPI {
+        /**
+         * Retrieves menu access permissions for a specific application
+         * @param applicationId - The ID of the application to get menu access for
+         * @returns Promise resolving to ApiResponse containing array of SidebarItem
+         */
+        getMenuAccess: (
+            applicationId: string,
+        ) => Promise<ApiResponse<SidebarItem[]>>;
+    }
+
+    export declare const menuAPI: MenuAPI;
+}

package/src/api.d.ts

@@ -0,0 +1,24 @@
+declare module "container/hooks" {
+  import { AxiosInstance } from "axios";
+
+  export const apiClient: AxiosInstance;
+
+  export type PagingRequest = {
+    page: number;
+    take: number;
+    search?: string;
+    sortBy?: string;
+    sortOrder?: "asc" | "desc";
+  };
+  export type Paging = {
+    page: number;
+    take: number;
+    total_record: number;
+  };
+
+  export type ApiResponse<T> = {
+    requestId: string;
+    data: T;
+    paging?: Paging;
+  };
+}

package/src/application.d.ts

@@ -0,0 +1,62 @@
+declare module "container/hooks" {
+    // Application type
+    export type Application = {
+        id: string;
+        parent_id: string;
+        name: string;
+        icon: string;
+        link: string;
+        color: string;
+        description: string;
+    };
+
+    // Application store state
+    interface ApplicationState {
+        applications: Application[];
+        application: Application | null;
+        desciplineId: string;
+        isLoading: boolean;
+        error: string | null;
+    }
+
+    // Application store actions
+    interface ApplicationActions {
+        setApplications: (applications: Application[]) => void;
+        setApplication: (application: Application) => void;
+        setDescipline: (desciplineId: string) => void;
+        clearApplications: () => void;
+        clearApplication: () => void;
+        clearDescipline: () => void;
+        setLoading: (loading: boolean) => void;
+        getApplicationState: () => {
+            applications: Application[];
+            application: Application | null;
+        };
+    }
+
+    type ApplicationStore = ApplicationState & ApplicationActions;
+
+    // Zustand store interface for applications
+    interface ZustandApplicationStore {
+        (): ApplicationStore;
+        getState: () => ApplicationStore;
+        setState: (
+            partial:
+                | Partial<ApplicationStore>
+                | ((state: ApplicationStore) => Partial<ApplicationStore>),
+        ) => void;
+        subscribe: (
+            listener: (state: ApplicationStore, prevState: ApplicationStore) => void,
+        ) => () => void;
+        persist: {
+            setOptions: (options: any) => void;
+            clearStorage: () => void;
+            rehydrate: () => void;
+            hasHydrated: () => boolean;
+            onHydrate: (fn: (state: ApplicationStore) => void) => () => void;
+            onFinishHydration: (fn: (state: ApplicationStore) => void) => () => void;
+        };
+    }
+
+    export const useApplicationStore: ZustandApplicationStore;
+}

package/src/components/button.d.ts

@@ -0,0 +1,46 @@
+declare module "container/components" {
+  import { ComponentProps } from "react";
+  export interface ButtonVariants {
+    variant?:
+      | "default"
+      | "destructive"
+      | "outline"
+      | "secondaryCn"
+      | "ghost"
+      | "primary"
+      | "primaryOutline"
+      | "primaryGhost"
+      | "primarySoft"
+      | "secondary"
+      | "secondaryOutline"
+      | "secondaryGhost"
+      | "secondarySoft"
+      | "success"
+      | "successOutline"
+      | "successGhost"
+      | "successSoft"
+      | "warning"
+      | "warningOutline"
+      | "warningGhost"
+      | "warningSoft"
+      | "danger"
+      | "dangerOutline"
+      | "dangerGhost"
+      | "dangerSoft"
+      | "info"
+      | "infoOutline"
+      | "infoGhost"
+      | "infoSoft"
+      | "link";
+    size?: "default" | "sm" | "lg" | "icon";
+  }
+
+  export interface ButtonProps
+    extends ComponentProps<"button">,
+      ButtonVariants {
+    asChild?: boolean;
+  }
+
+  export const Button: React.ComponentType<ButtonProps>;
+  export const buttonVariants: any;
+}

package/src/components/card.d.ts

@@ -0,0 +1,46 @@
+declare module "container/components" {
+  import { ComponentProps } from "react";
+
+  // Wasco Card Component Types
+  export interface WascoCardProps extends ComponentProps<"div"> {
+    className?: string;
+  }
+
+  export interface WascoCardHeaderProps extends ComponentProps<"div"> {
+    className?: string;
+  }
+
+  export interface WascoCardHeaderTitleProps extends ComponentProps<"h2"> {
+    className?: string;
+  }
+
+  export interface WascoCardHeaderActionProps extends ComponentProps<"div"> {
+    className?: string;
+  }
+
+  export interface WascoCardContentProps extends ComponentProps<"div"> {
+    className?: string;
+  }
+
+  export interface WascoCardFooterProps extends ComponentProps<"div"> {
+    className?: string;
+  }
+
+  // Component declarations
+  export function WascoCard(props: WascoCardProps): React.ReactElement;
+  export function WascoCardHeader(
+    props: WascoCardHeaderProps,
+  ): React.ReactElement;
+  export function WascoCardHeaderTitle(
+    props: WascoCardHeaderTitleProps,
+  ): React.ReactElement;
+  export function WascoCardHeaderAction(
+    props: WascoCardHeaderActionProps,
+  ): React.ReactElement;
+  export function WascoCardContent(
+    props: WascoCardContentProps,
+  ): React.ReactElement;
+  export function WascoCardFooter(
+    props: WascoCardFooterProps,
+  ): React.ReactElement;
+}

package/src/components/datable.d.ts

@@ -0,0 +1,23 @@
+declare module "container/components" {
+  import { ComponentType } from "react";
+  import { ColumnDef } from "@tanstack/react-table";
+
+  interface ServerDataTableProps<TData = any, TValue = any> {
+    columns?: ColumnDef<TData, TValue>[];
+    title?: string;
+    useQueryHook?: () => any;
+    onSelectionChange?: () => any;
+  }
+
+  const ServerDataTable: ComponentType<ServerDataTableProps>;
+  export const ServerDataTable;
+
+  export interface DataTableColumnHeaderProps<TData, TValue>
+    extends React.HTMLAttributes<HTMLDivElement> {
+    column: Column<TData, TValue>;
+    title: string;
+  }
+  export function DataTableColumnHeader<TData, TValue>(
+    props: DataTableColumnHeaderProps<TData, TValue>,
+  ): React.ReactElement;
+}

package/src/components/loading.d.ts

@@ -0,0 +1,6 @@
+declare module "container/components" {
+  import { ComponentType } from "react";
+
+  const LoadingSpinner: ComponentType;
+  export const LoadingSpinner;
+}

package/src/components/table-custom.d.ts

@@ -0,0 +1,19 @@
+declare module "container/components" {
+    import { ColumnDef, RowData } from "@tanstack/react-table";
+
+    declare module "@tanstack/react-table" {
+        interface ColumnMeta<TData extends RowData, TValue> {
+            className?: string;
+            title?: string;
+        }
+    }
+
+    export interface DataTableProps<T> {
+        columns: ColumnDef<T>[];
+        data: T[];
+    }
+
+    export declare function TableCustom<T>(
+        props: DataTableProps<T>,
+    ): React.ReactElement;
+}

package/src/components/table-paging.d.ts

@@ -0,0 +1,11 @@
+declare module "container/components" {
+    import { Table } from "@tanstack/react-table";
+
+    export interface DataTablePaginationProps<TData> {
+        table: Table<TData>;
+    }
+
+    export declare function TablePagination<TData>(
+        props: DataTablePaginationProps<TData>,
+    ): React.ReactElement;
+}

package/src/components/tooltip-container.d.ts

@@ -0,0 +1,10 @@
+declare module "container/components" {
+    export interface TooltipContainerProps {
+        message: string;
+        children: React.ReactNode;
+    }
+
+    export function TooltipContainer(
+        props: TooltipContainerProps,
+    ): React.ReactElement;
+}

package/src/hooks.d.ts

@@ -0,0 +1,49 @@
+declare module "container/hooks" {
+    export function useTableQuery<T>(props: {
+        queryKey: string[];
+        queryFn: (paging: any) => Promise<any>;
+        enabled?: boolean;
+    }): {
+        data?: { data: T[]; paging?: any };
+        isLoading: boolean;
+        error: any;
+        refetch: () => void;
+        prefetchNextPage: () => void;
+        // Add other react-query properties as needed
+        isFetching: boolean;
+        isError: boolean;
+        isSuccess: boolean;
+    };
+
+    interface TableStoreState {
+        page: number;
+        take: number;
+        sorting: any[];
+        filters: { search: string };
+        rowSelection: any;
+        columnVisibility: any;
+        setPaging: (params: { page?: number; take?: number }) => void;
+        setSorting: (sorting: any) => void;
+        setFilters: (filters: any) => void;
+        setRowSelection: (selection: any) => void;
+        setColumnVisibility: (visibility: any) => void;
+        resetTable: () => void;
+        getPagingRequest: () => any;
+    }
+
+    // Define the Zustand store interface
+    interface ZustandTableStore {
+        (): TableStoreState;
+        getState: () => TableStoreState;
+        setState: (
+            partial:
+                | Partial<TableStoreState>
+                | ((state: TableStoreState) => Partial<TableStoreState>),
+        ) => void;
+        subscribe: (
+            listener: (state: TableStoreState, prevState: TableStoreState) => void,
+        ) => () => void;
+    }
+
+    export const useTableStore: ZustandTableStore;
+}

package/src/index.d.ts

@@ -0,0 +1,39 @@
+// Definitions for Node.js modules that are not specific to any version of TypeScript:
+/// <reference path="components/card.d.ts" />
+/// <reference path="components/button.d.ts" />
+/// <reference path="components/datable.d.ts" />
+/// <reference path="components/loading.d.ts" />
+/// <reference path="components/table-custom.d.ts" />
+/// <reference path="components/table-paging.d.ts" />
+/// <reference path="components/tooltip-container.d.ts" />
+/// <reference path="utils/colorMapping.d.ts" />
+/// <reference path="utils/iconMapping.d.ts" />
+/// <reference path="utils/alertMapping.d.ts" />
+/// <reference path="utils/toastMapping.d.ts" />
+/// <reference path="utils/dateFormating.d.ts" />
+/// <reference path="api/menu.d.ts" />
+/// <reference path="stores/useProjectStore.d.ts" />
+/// <reference path="hooks.d.ts" />
+/// <reference path="api.d.ts" />
+/// <reference path="sidebar.d.ts" />
+/// <reference path="application.d.ts" />
+//
+
+export * from "./components/card";
+export * from "./components/button";
+export * from "./components/datable";
+export * from "./components/loading";
+export * from "./components/table-custom";
+export * from "./components/table-paging";
+export * from "./components/tooltip-container";
+export * from "./utils/colorMapping";
+export * from "./utils/iconMapping";
+export * from "./utils/alertMapping";
+export * from "./utils/toastMapping";
+export * from "./utils/dateFormating";
+export * from "./api/menu";
+export * from "./stores/useProjectStore";
+export * from "./hooks";
+export * from "./api";
+export * from "./sidebar";
+export * from "./application";

package/src/sidebar.d.ts

@@ -0,0 +1,62 @@
+declare module "container/hooks" {
+    // Sidebar types
+    export interface SidebarItem {
+        name: string;
+        icon: string;
+        link: string;
+        children?: {
+            name: string;
+            icon: string;
+            link: string;
+        }[];
+    }
+
+    export interface SidebarProps {
+        isOpen: boolean;
+        onToggle: () => void;
+        activeItem: string;
+        onItemSelect: (item: SidebarItem) => void;
+        expandedItems: string[];
+        onToggleExpanded: (item: string) => void;
+    }
+
+    // Sidebar store state and actions
+    interface SideBarState {
+        activeItem: string;
+        expandedItems: string[];
+        sidebarItems: SidebarItem[];
+    }
+
+    interface SideBarActions {
+        setActiveItem: (item: string) => void;
+        setSidebarItem: (items: SidebarItem[]) => void;
+        setExpandedItems: (item: string) => void;
+        clearExpandedItems: () => void;
+    }
+
+    type SidebarStore = SideBarState & SideBarActions;
+
+    // Zustand store interface for sidebar
+    interface ZustandSidebarStore {
+        (): SidebarStore;
+        getState: () => SidebarStore;
+        setState: (
+            partial:
+                | Partial<SidebarStore>
+                | ((state: SidebarStore) => Partial<SidebarStore>),
+        ) => void;
+        subscribe: (
+            listener: (state: SidebarStore, prevState: SidebarStore) => void,
+        ) => () => void;
+        persist: {
+            setOptions: (options: any) => void;
+            clearStorage: () => void;
+            rehydrate: () => void;
+            hasHydrated: () => boolean;
+            onHydrate: (fn: (state: SidebarStore) => void) => () => void;
+            onFinishHydration: (fn: (state: SidebarStore) => void) => () => void;
+        };
+    }
+
+    export const useSidebarStore: ZustandSidebarStore;
+}

package/src/stores/useModuleStore.d.ts

@@ -0,0 +1,64 @@
+declare module "wtr/stores" {
+  import { Module } from "@/types/project";
+
+  export interface ModuleState {
+    module: Module | null;
+    modules: Module[];
+    openModuleForm: boolean;
+    isLoading: boolean;
+    error: string | null;
+  }
+
+  export interface ModuleActions {
+    /**
+     * Sets the current active module
+     * @param module - The module to set as current
+     */
+    setModule: (module: Module) => void;
+
+    /**
+     * Sets the array of modules
+     * @param modules - Array of modules to set in the store
+     */
+    setModules: (modules: Module[]) => void;
+
+    /**
+     * Toggles the module form open/close state
+     * @param open - Boolean to control form visibility
+     */
+    toggleModuleFrom: (open: boolean) => void;
+
+    /**
+     * Clears the current active module
+     */
+    clearModule: () => void;
+
+    /**
+     * Clears all modules from the store
+     */
+    clearModules: () => void;
+
+    /**
+     * Sets the loading state
+     * @param loading - Boolean to indicate loading state
+     */
+    setLoading: (loading: boolean) => void;
+
+    /**
+     * Gets the current module state (active module and modules array)
+     * @returns Object containing current module and modules array
+     */
+    getModuleState: () => {
+      module: Module | null;
+      modules: Module[];
+    };
+  }
+
+  export type ModuleStore = ModuleState & ModuleActions;
+
+  /**
+   * Zustand store for managing module state
+   * Includes middleware: devtools, immer, subscribeWithSelector
+   */
+  export declare const useModuleStore: () => ModuleStore;
+}

package/src/stores/useProjectStore.d.ts

@@ -0,0 +1,36 @@
+declare module "wtr/stores" {
+    import { Project } from "@/types/project";
+
+    export interface ProjectState {
+        project: Project | null;
+    }
+
+    export interface ProjectActions {
+        /**
+         * Sets the current project in the store
+         * @param project - The project to set as current
+         */
+        setProject: (project: Project) => void;
+
+        /**
+         * Clears the current project from the store
+         */
+        clearProject: () => void;
+
+        /**
+         * Gets the current project state
+         * @returns Object containing the current project or null
+         */
+        getProjectState: () => {
+            project: Project | null;
+        };
+    }
+
+    export type ProjectStore = ProjectState & ProjectActions;
+
+    /**
+     * Zustand store for managing project state with persistence and devtools
+     * Includes middleware: devtools, persist, immer, subscribeWithSelector
+     */
+    export declare const useProjectStore: () => ProjectStore;
+}

package/src/utils/alertMapping.d.ts

@@ -0,0 +1,9 @@
+declare module "container/utils" {
+    import { SweetAlertResult } from "sweetalert2";
+
+    export const confirmationAlert: (
+        message: string,
+    ) => Promise<SweetAlertResult>;
+
+    export const newAlert: (message: string) => Promise<SweetAlertResult>;
+}

package/src/utils/colorMapping.d.ts

@@ -0,0 +1,3 @@
+declare module "container/utils" {
+  export const getColor: (color: string) => string;
+}

package/src/utils/dateFormating.d.ts

@@ -0,0 +1,22 @@
+declare module "container/utils" {
+    /**
+     * Formats a Date object to dd/mm/yyyy string format
+     * @param date - The Date object to format
+     * @returns Formatted date string in dd/mm/yyyy format, or empty string if date is falsy
+     */
+    export declare const formatDate: (date: Date) => string;
+
+    /**
+     * Parses a dd/mm/yyyy string to a Date object
+     * @param dateString - The date string in dd/mm/yyyy format to parse
+     * @returns Date object if parsing is successful, null otherwise
+     */
+    export declare const parseDate: (dateString: string) => Date | null;
+
+    /**
+     * Formats a Date object to yyyy-mm-dd string format
+     * @param date - The Date object to format
+     * @returns Formatted date string in yyyy-mm-dd format, or empty string if date is falsy
+     */
+    export declare const parseDateToDb: (date: Date) => Date;
+}

package/src/utils/iconMapping.d.ts

@@ -0,0 +1,5 @@
+declare module "container/utils" {
+    import { type LucideIcon } from "lucide-react";
+
+    export const getIconComponent: (iconName: string) => LucideIcon;
+}

package/src/utils/toastMapping.d.ts

@@ -0,0 +1,4 @@
+declare module "container/utils" {
+  export const showSuccessMessage: (message: string) => void;
+  export const showErrorMessage: (message: string) => void;
+}