procode-vs-template 1.0.0

package/dist/types/Widgets/GridToolBar/GridToolBarView.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { ToolbarOptions } from "./type";
+import { ExportType } from "./Components/Export/type";
+interface GridToolBarViewProps {
+    widgetStyle?: {
+        id?: string;
+        className?: string;
+        inline?: React.CSSProperties;
+    };
+    toolBarOptions: ToolbarOptions;
+    config: {
+        uiElementGroupId: string;
+    };
+    uiElementGroupData: Record<string, any>;
+    loadTemplateSupportiveData?: (callBack: (args: any) => void, supportiveKeys: any) => Promise<any>;
+    onModelUpdate: (callBack: ((args: any) => void) | null, fieldName: string, value: any) => void;
+    onExport?: (callBack: ((args: any) => void) | null, exportType: ExportType) => void;
+    onExportDelete: (callBack: ((args: any) => void) | null, id: string) => void;
+    onExportList: (callBack: ((args: any) => void) | null) => void;
+    onExportDownload: (callBack: ((args: any) => void) | null, id: string) => void;
+}
+declare const GridToolBarView: ({ widgetStyle, toolBarOptions, config, uiElementGroupData, loadTemplateSupportiveData, onModelUpdate, onExport, onExportDelete, onExportList, onExportDownload }: GridToolBarViewProps) => import("react/jsx-runtime").JSX.Element;
+export default GridToolBarView;

package/dist/types/Widgets/GridToolBar/data/advancedSearch/index.d.ts

@@ -0,0 +1,46 @@
+import { FilterTargetType, Operator, OperatorCreiteria } from "../../enum";
+import { ValueLoadType } from "../../type";
+export type AdvancedSearchData = {
+    appliedQuery: {
+        criteria: string;
+        filters: FilterExpression[];
+    };
+    filterRows: FilterExpressionViewModel[];
+    criteria: string;
+};
+export type FilterExpression = {
+    id: string;
+    propertyToFilter: FilterTarget;
+    operator: {
+        label: string;
+        value: Operator | null;
+    };
+    value?: FilterValue | FilterValue[];
+    selectedCriteria: OperatorCreiteria;
+};
+export type FilterTarget = {
+    label: string;
+    value: any;
+    apiPropertyName: string;
+    dataProvider?: {
+        key?: string;
+        value?: FilterValue | FilterValue[];
+        valueLoadType: ValueLoadType;
+    };
+    type: FilterTargetType;
+};
+export type FilterValue = {
+    label: string;
+    value: any;
+} | string | number | Date | boolean;
+export type FilterExpressionViewModel = {
+    id: string;
+    idLabel: string;
+    allPropertieseToFilter: FilterTarget[];
+    alloperators: {
+        label: string;
+        value: Operator | null;
+    }[];
+    allValues?: FilterValue[] | FilterValue;
+    selectedFilter: FilterExpression;
+};

package/dist/types/Widgets/GridToolBar/data/globalSearch/index.d.ts

@@ -0,0 +1,4 @@
+export type GlobalSearchData = {
+    filterQuery: string;
+    appliedQuery: string;
+};

package/dist/types/Widgets/GridToolBar/data/groupBy/index.d.ts

@@ -0,0 +1,6 @@
+export type GroupedByData = {
+    appliedGroups: {
+        label: string;
+        value: string;
+    }[];
+};

package/dist/types/Widgets/GridToolBar/data/index.d.ts

@@ -0,0 +1,49 @@
+import { AdvancedSearchData } from "./advancedSearch";
+import { GlobalSearchData } from "./globalSearch";
+import { GroupedByData } from "./groupBy";
+import { QuickFilterData } from "./quickFilter";
+import { SettingData } from "./setting";
+import { UserViewData } from "./userView";
+export type ToolbarData = {
+    globalSearch: GlobalSearchData;
+    advancedSearch: AdvancedSearchData;
+    quickFilter: QuickFilterData;
+    groupedBy: GroupedByData;
+    setting: SettingData;
+    reset: number;
+    lazyLoad?: boolean;
+    globalFilters?: {
+        pattern: string;
+        filters: any[];
+    };
+    localSearch?: {
+        id: string;
+        field: string;
+        value: any;
+    }[];
+    sort?: {
+        field: string;
+        dir: string;
+    }[];
+    defaultSort?: {
+        field: string;
+        dir: string;
+    }[];
+    pagination?: {
+        skip: number;
+        take: number;
+    };
+    defaultPagination?: {
+        skip: number;
+        take: number;
+    };
+    userView: UserViewData;
+    processing?: boolean;
+    enableDataLoading: boolean;
+    defaultGroups?: {
+        field: string;
+        dir: string;
+    }[];
+    defaultColumns?: any[];
+};
+export declare const getInitialData: () => ToolbarData;

package/dist/types/Widgets/GridToolBar/data/quickFilter/index.d.ts

@@ -0,0 +1,30 @@
+import { FilterTargetType, OperatorCreiteria } from "../../enum";
+import { ValueLoadType } from "../../type";
+export type QuickFilterData = {
+    appliedQuery: {
+        criteria: string;
+        filterRows: FilterExpression[];
+        joinCriteria: OperatorCreiteria;
+    };
+    filterRows: FilterExpression[];
+};
+export type FilterExpression = {
+    id: string;
+    propertyToFilter: FilterTarget;
+    allValues?: FilterValue[];
+    value?: FilterValue | FilterValue[];
+};
+export type FilterTarget = {
+    label: string;
+    apiPropertyName: string;
+    dataProvider?: {
+        key?: string;
+        value?: FilterValue | FilterValue[];
+        valueLoadType: ValueLoadType;
+    };
+    type: FilterTargetType;
+};
+export type FilterValue = {
+    label: string;
+    value: any;
+} | string | number | Date | boolean;

package/dist/types/Widgets/GridToolBar/data/setting/index.d.ts

@@ -0,0 +1,21 @@
+import { DataWidgetType } from "../../Components/Setting/Setting";
+export type SettingData = {
+    activeDataWidgetType: DataWidgetType;
+    columnChooser: ColumnChooserData;
+};
+export type ColumnChooserData = {
+    appliedColumns: ChooserColumn[];
+    allColumns: ChooserColumn[];
+    selectedColumns: ChooserColumn[];
+};
+export type ChooserColumn = {
+    id: number;
+    label: string;
+    field: string;
+    selected: boolean;
+    includeInCard: boolean;
+    isFreezed: boolean;
+    order: number;
+    width?: number;
+    primary: boolean;
+};

package/dist/types/Widgets/GridToolBar/data/userView/index.d.ts

@@ -0,0 +1,10 @@
+export type UserViewData = {
+    selectedView?: View;
+    allViews: View[];
+};
+export type View = {
+    id: string;
+    name: string;
+    isDefault: boolean;
+    isSelected: boolean;
+};

package/dist/types/Widgets/GridToolBar/enum/index.d.ts

@@ -0,0 +1,27 @@
+export declare enum OperatorCreiteria {
+    AND = "AND",
+    OR = "OR"
+}
+export declare enum FilterTargetType {
+    TEXT = "TEXT",
+    DATE = "DATE",
+    NUMBER = "NUMBER",
+    LIST = "LIST",
+    BOOLEAN = "BOOLEAN"
+}
+export declare enum Operator {
+    Equal = 0,
+    NotEqual = 1,
+    Like = 2,
+    NotLike = 3,
+    In = 4,
+    NotIn = 5,
+    LessThan = 6,
+    LessThanOrEqual = 7,
+    GreaterThan = 8,
+    GreaterThanOrEqual = 9,
+    Between = 10,
+    NotBetween = 11,
+    IsNull = 12,
+    IsNotNull = 13
+}

package/dist/types/Widgets/GridToolBar/helper/getUniqueId.d.ts

@@ -0,0 +1 @@
+export declare const getUniqueId: () => string;

package/dist/types/Widgets/GridToolBar/type.d.ts

@@ -0,0 +1,58 @@
+import { DataWidgetType } from "./Components/Setting/Setting";
+import { FilterTarget } from "./data/advancedSearch";
+import { FilterTarget as FilterTargetQuick } from "./data/quickFilter";
+import { ChooserColumn } from "./data/setting";
+export type ActionProps = {
+    onExport?: (callBack: ((args: any) => void) | null, exportType: string) => void;
+    onExportDelete: (callBack: ((args: any) => void) | null, id: string) => void;
+    onExportList: (callBack: ((args: any) => void) | null) => void;
+    onExportDownload: (callBack: ((args: any) => void) | null, id: string) => void;
+    onModelUpdate: (callBack: ((args: any) => void) | null, fieldName: string, value: any) => void;
+    loadTemplateSupportiveData?: (callBack: (args: any) => void, supportiveKeys: any) => Promise<any>;
+    onScreenDataLoad?: (callBack: (response: any) => void) => void;
+};
+export type ToolbarOptions = {
+    globalSearch: GlobalSearch;
+    advancedSearch: AdvancedSearch;
+    quickFilter: QuickFilter;
+    groupBy: GroupBy;
+    reset: Reset;
+    setting: Setting;
+    userView: UserView;
+    export: Export;
+};
+type VisibleProps = {
+    visible: boolean;
+    disabled: boolean;
+};
+type GlobalSearch = VisibleProps;
+type AdvancedSearch = VisibleProps & {
+    filterableFields: FilterTarget[];
+};
+type QuickFilter = VisibleProps & {
+    filterRows: FilterTargetQuick[];
+};
+type GroupBy = VisibleProps & {
+    groupableFields: {
+        label: string;
+        value: string;
+    }[];
+};
+type Reset = VisibleProps;
+type Setting = VisibleProps & {
+    disableColumnChooser: boolean;
+    disabledDisplayWidgetType: boolean;
+    activeDataWidgetType: DataWidgetType;
+    columns: ChooserColumn[];
+};
+type UserView = VisibleProps & {
+    enableDefaultSaveInSession: boolean;
+};
+type Export = VisibleProps;
+export declare enum ValueLoadType {
+    "SELF" = "SELF",
+    "API" = "API",
+    "ADAPTER" = "ADAPTER",
+    "STATE" = "STATE"
+}
+export {};

package/dist/types/Widgets/InformationAlert/InformationAlert.d.ts

@@ -0,0 +1,8 @@
+import { BaseProps } from "../../Factory/BaseType";
+export type InformationAlertProps = BaseProps & {
+    messageHeader?: string;
+    messageBody?: string;
+    onConfirm?: () => void;
+};
+declare const InformationAlert: (props: InformationAlertProps) => import("react/jsx-runtime").JSX.Element;
+export default InformationAlert;

package/dist/types/Widgets/InformationAlert/InformationAlertView.d.ts

@@ -0,0 +1,8 @@
+import { BaseProps } from "../../Factory/BaseType";
+type InformationAlertViewProps = BaseProps & {
+    messageHeader?: string;
+    messageBody?: string;
+    onConfirm?: () => void;
+};
+declare const InformationAlertView: ({ widgetStyle, messageHeader, messageBody, onConfirm, }: InformationAlertViewProps) => import("react/jsx-runtime").JSX.Element;
+export default InformationAlertView;

package/dist/types/Widgets/Menu/MenuMainHeader.d.ts

@@ -0,0 +1,3 @@
+import { ItemProps } from ".";
+declare const MenuMainHeader: (props: ItemProps) => import("react/jsx-runtime").JSX.Element;
+export default MenuMainHeader;

package/dist/types/Widgets/Menu/MenuSubHeader.d.ts

@@ -0,0 +1,3 @@
+import { ItemProps } from ".";
+declare const MenuSubHeader: (props: ItemProps) => import("react/jsx-runtime").JSX.Element;
+export default MenuSubHeader;

package/dist/types/Widgets/Menu/MenuSubItem.d.ts

@@ -0,0 +1,3 @@
+import { ItemProps } from ".";
+declare const MenuSubItem: (props: ItemProps) => import("react/jsx-runtime").JSX.Element;
+export default MenuSubItem;

package/dist/types/Widgets/Menu/MenuView.d.ts

@@ -0,0 +1,6 @@
+import { ItemProps } from ".";
+declare const MenuView: ({ menuItems, onNavigate, }: {
+    menuItems: ItemProps[];
+    onNavigate: (path: string, navigationType: string) => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export default MenuView;

package/dist/types/Widgets/Menu/index.d.ts

@@ -0,0 +1,14 @@
+import { BaseProps } from "../../Factory/BaseType";
+export type MenuProps = BaseProps & {
+    menuItems?: ItemProps[];
+    onNavigate?: (callBack: undefined, path: string, navigationType: string) => void;
+};
+export type ItemProps = {
+    label: string;
+    path: string;
+    subItems: ItemProps[];
+    navigationType: string;
+    onNavigate: (path: string, navigationType: string) => void;
+};
+declare const Menu: (props: MenuProps) => import("react/jsx-runtime").JSX.Element;
+export default Menu;

package/dist/types/actions.d.ts

@@ -0,0 +1,2 @@
+export { default as TemplateActionFactory } from './Action/TemplateActionFactory';
+export type { TemplateActionType } from './Action/TemplateActionType';

package/dist/types/constant.d.ts

@@ -0,0 +1,8 @@
+export declare enum WidgetTypes {
+    GRIDTOOLBAR = "GRIDTOOLBAR",
+    CONFOMATIONALERTBOX = "CONFOMATIONALERTBOX",
+    INFOMATIONALERTBOX = "INFOMATIONALERTBOX",
+    MENU = "MENU",
+    BLOCK = "BLOCK"
+}
+export declare const SYSTEM_DEFAULT = "System_Default";

package/dist/types/factories.d.ts

@@ -0,0 +1,2 @@
+export { default as TemplateWidgetFactory } from './Factory/TemplateWidgetFactory';
+export type { BaseProps } from './Factory/BaseType';

package/dist/types/index.d.ts

@@ -0,0 +1,4 @@
+export { default as TemplateWidgetFactory, default } from "./Factory/TemplateWidgetFactory";
+export { default as TemplateActionFactory } from "./Action/TemplateActionFactory";
+export type { BaseProps } from './Factory/BaseType';
+export type { TemplateActionType } from './Action/TemplateActionType';

package/dist/types/utils/getValueFromNestedObject.d.ts

@@ -0,0 +1 @@
+export declare const getValueFromNestedObject: (fieldName: string, object: any) => any;

package/package.json

@@ -0,0 +1,98 @@
+{
+  "name": "procode-vs-template",
+  "version": "1.0.0",
+  "description": "VarStreet Template Library - A comprehensive React template system with widget factories, action handlers, and SCSS styling for dynamic template creation",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/types/index.d.ts",
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.js",
+      "types": "./dist/types/index.d.ts"
+    },
+    "./factories": {
+      "import": "./dist/factories.esm.js",
+      "require": "./dist/factories.js",
+      "types": "./dist/types/factories.d.ts"
+    },
+    "./actions": {
+      "import": "./dist/actions.esm.js",
+      "require": "./dist/actions.js",
+      "types": "./dist/types/actions.d.ts"
+    },
+    "./styles": "./src/assets/styles/_tempalte-base.scss"
+  },
+  "keywords": [
+    "react",
+    "template",
+    "ui-library",
+    "factory",
+    "templates",
+    "typescript",
+    "varstreet",
+    "components",
+    "template-system",
+    "react-components",
+    "ui-components",
+    "widget-factory",
+    "action-factory",
+    "scss",
+    "styling"
+  ],
+  "author": "VarStreet Team",
+  "license": "MIT",
+  "scripts": {
+    "start": "vite",
+    "build": "rollup -c",
+    "clean": "rimraf dist",
+    "prebuild": "npm run clean",
+    "prepublishOnly": "npm run build",
+    "postbuild": "powershell -Command \"New-Item -ItemType Directory -Path dist/src/assets/styles -Force; Copy-Item src/assets/styles/*.scss dist/src/assets/styles/\"",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "@progress/kendo-react-buttons": "^8.1.1",
+    "@progress/kendo-react-dateinputs": "^8.1.1",
+    "@progress/kendo-react-dialogs": "^8.1.1",
+    "@progress/kendo-react-dropdowns": "^8.1.1",
+    "@progress/kendo-react-inputs": "^8.1.1",
+    "react": "^18.2.0",
+    "react-beautiful-dnd": "^13.1.1",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.3"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^26.0.1",
+    "@rollup/plugin-image": "^3.0.3",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-url": "^8.0.2",
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "@vitejs/plugin-react": "^4.0.3",
+    "eslint": "^8.45.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "fs": "^0.0.1-security",
+    "rimraf": "^5.0.10",
+    "rollup": "^4.18.0",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "sass": "^1.38.0",
+    "typescript": "^5.0.2",
+    "vite": "^4.4.5"
+  }
+}

package/src/Action/TemplateActionFactory.ts

@@ -0,0 +1,27 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { handleMenuNavigation } from "./TemplateActions/handleMenuNavigation";
+import { TemplateActionType } from "./TemplateActionType";
+
+class TemplateActionFactory {
+  private static instance: TemplateActionFactory;
+  private actionMap: Map<string, any>;
+
+  private constructor() {
+    this.actionMap = new Map<string, any>([
+      [TemplateActionType.MENUNAVIGATE, handleMenuNavigation],
+    ]);
+  }
+
+  static getInstance(): TemplateActionFactory {
+    if (!TemplateActionFactory.instance) {
+      TemplateActionFactory.instance = new TemplateActionFactory();
+    }
+    return TemplateActionFactory.instance;
+  }
+
+  getAction(key: string): any {
+    return this.actionMap.get(key) || null;
+  }
+}
+
+export default TemplateActionFactory;

package/src/Action/TemplateActionType.ts

@@ -0,0 +1,8 @@
+export enum TemplateActionType {
+  MENUNAVIGATE = "MENUNAVIGATE",
+}
+export enum NavigationType {
+  EXTERNAL = "EXTERNAL",
+  NEWWINDOW = "NEWWINDOW",
+  INTERNAL = "INTERNAL",
+}

package/src/Action/TemplateActions/handleMenuNavigation.ts

@@ -0,0 +1,23 @@
+import { NavigationType } from "../TemplateActionType";
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+const navigationHandlers = {
+  [NavigationType.INTERNAL]: (path: string, actionInvokerProps: any) =>
+    actionInvokerProps.navigate(path),
+  [NavigationType.EXTERNAL]: (path: string) => (window.location.href = path),
+  [NavigationType.NEWWINDOW]: (path: string) => new Function(path)(),
+};
+
+export const handleMenuNavigation = (
+  actionInvokerProps: any,
+  path: string,
+  navigationType: string
+) => {
+  const handler = navigationHandlers[navigationType as NavigationType];
+  if (handler) {
+    handler(path, actionInvokerProps);
+  } else {
+    console.warn(`Unknown navigation type: ${navigationType}`);
+  }
+};

package/src/Factory/BaseType.ts

@@ -0,0 +1,12 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export type BaseProps = {
+  widgetType?: string;
+  targetEntity?: string;
+  config: any;
+  screenDataField?: string;
+  targetScreenDataField?: string;
+  eventService?: any;
+  uiElementGroupData: Record<string, any>;
+  widgetStyle?: { id?: string; className?: string; inline?: React.CSSProperties };
+  viewModel?:Record<string,any>
+};

package/src/Factory/TemplateWidgetFactory.tsx

@@ -0,0 +1,50 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from "react";
+import ConfirmationAlert from "../Widgets/ConfirmationAlert";
+import { WidgetTypes } from "../constant";
+import GridToolBar from "../Widgets/GridToolBar/GridToolBar";
+import InformationAlert from "../Widgets/InformationAlert/InformationAlert";
+import Menu from "../Widgets/Menu";
+import Block from "../Widgets/Block";
+
+class TemplateWidgetFactory {
+  private standardWidgetFactory: any = undefined;
+  private customWidgetFactory?: any;
+  private static factory: TemplateWidgetFactory;
+  private widgetMap = new Map<string, React.FC<any>>();
+
+  private constructor() {
+    this.createWidgetMap();
+  }
+
+  static get(standardWidgetFactory: any, customWidgetFactory: any) {
+    if (!standardWidgetFactory && !customWidgetFactory) {
+      throw new Error("Widget Factory Not Assigned Error");
+    }
+    if (!TemplateWidgetFactory.factory) {
+      TemplateWidgetFactory.factory = new TemplateWidgetFactory();
+    }
+    TemplateWidgetFactory.factory.standardWidgetFactory = standardWidgetFactory;
+    TemplateWidgetFactory.factory.customWidgetFactory = customWidgetFactory;
+    return TemplateWidgetFactory.factory;
+  }
+
+  static getStandardFactory = () =>
+    TemplateWidgetFactory.factory.standardWidgetFactory;
+
+  static getCustomFactory = () =>
+    TemplateWidgetFactory.factory.customWidgetFactory;
+
+  private createWidgetMap(): void {
+    this.widgetMap.set(WidgetTypes.GRIDTOOLBAR, GridToolBar);
+    this.widgetMap.set(WidgetTypes.CONFOMATIONALERTBOX, ConfirmationAlert);
+    this.widgetMap.set(WidgetTypes.INFOMATIONALERTBOX, InformationAlert);
+    this.widgetMap.set(WidgetTypes.MENU, Menu);
+    this.widgetMap.set(WidgetTypes.BLOCK, Block);
+  }
+
+  getWidgets(): Map<string, React.FC> {
+    return this.widgetMap;
+  }
+}
+export default TemplateWidgetFactory;

package/src/Renderer/index.tsx

@@ -0,0 +1,14 @@
+import TemplateWidgetFactory from "../Factory/TemplateWidgetFactory";
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const FactoryRenderer = (props: any) => {
+  const standardWidgets =
+    TemplateWidgetFactory.getStandardFactory()?.getWidgets();
+  const customWidgets = TemplateWidgetFactory.getCustomFactory()?.getWidgets();
+
+  const WidgetComponent = customWidgets?.get?.(props.widgetType) ??
+    standardWidgets?.get?.(props.widgetType) ?? <></>;
+
+  return <WidgetComponent {...props} />;
+};
+export default FactoryRenderer;

package/src/Widgets/Block/BlockView.tsx

@@ -0,0 +1,31 @@
+import { BlockProps } from "./types";
+
+const BlockView = (props: BlockProps) => {
+  return (
+    <section
+      className={`tmpl-block-container ${props.widgetStyle?.className ?? ""}`}
+      id={props.widgetStyle?.id ?? ""}
+      style={{ ...(props.widgetStyle?.inline ?? {}) }}
+    >
+      <div
+        className={`tmpl-block__item ${
+          props.enableBorder ? "tmpl-border" : ""
+        }`}
+      >
+        <div
+          className={`tmpl-block__header ${
+            props.enableHeaderBorder ? "tmpl-border-header" : ""
+          }`}
+        >
+          {props.title}
+        </div>
+        <div
+          className="tmpl-block__value"
+          dangerouslySetInnerHTML={{ __html: props.value ?? "-" }}
+        ></div>
+      </div>
+    </section>
+  );
+};
+
+export default BlockView;