@ukpc-lib/react 0.1.18 → 0.1.20

package/README.md

@@ -1,114 +1,114 @@
-# @ukpc-lib/react
-
-@ukpc-lib is a comprehensive npm library designed to provide a suite of reusable components, themes, colors, hooks, and auth providers for UKPC applications. It aims to streamline development and ensure consistency across different projects.
-
-## Installation
-
-### React
-
-To install package, use the following command:
-
-```bash
-npm install @ukpc-lib/react
-```
-
-### .NET
-
-With .NET applications, you can import the script and use it as follows:
-
-Topbar:
-https://unpkg.com/@ukpc-lib/react@latest/web-components-bundle/global-topbar/index.js
-
-Global Menu:
-https://unpkg.com/@ukpc-lib/react@latest/web-components-bundle/global-menu/index.js
-
-## Usage
-
-**To ensure the correct display, you should use the layout as shown below:**
-
-### React
-
-After installation, you can start using components by importing it into your project. Here's an example of how to use Global Menu:
-
-```js
-import { GlobalMenu } from '@ukpc-lib/react/components';
-import { useAuth } from '@ukpc-lib/react/share';
-import { Outlet } from 'react-router-dom';
-import TopBar from './TopBar';
-
-export default function PrivateLayout() {
-  const { logout } = useAuth();
-
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
-      <div style={{ height: '64px' }}>
-        <TopBar />
-      </div>
-      <div
-        style={{
-          display: 'flex',
-          flexDirection: 'row',
-          flex: 1,
-          overflow: 'hidden',
-        }}
-      >
-        <GlobalMenu
-          baseUrl="https://saas.dev-intelli-park.com"
-          menuPath="/global-menu-config/api/v1/menu-items/user"
-          logout={logout}
-        />
-        <div style={{ flex: 1, padding: '40px', overflow: 'auto' }}>
-          <Outlet />
-        </div>
-      </div>
-    </div>
-  );
-}
-```
-
-### .NET
-
-```js
-<div style="display: flex; flex-direction: column; height: 100vh;">
-  <div style="height: 64px;">
-    <global-topbar
-      base-url="@baseurl"
-      user="@userJson"
-      logo="logoURL"
-    ></global-topbar>
-  </div>
-  <div style="display: flex; flex-direction: row; flex: 1; overflow: hidden;">
-    <global-menu
-      menu-path="/global-menu-config/api/v1/menu-items/user"
-      base-url="@baseurl"
-      logout="logout"
-    ></global-menu>
-    <div style="flex: 1; padding: 40px; overflow: auto;">
-      <Outlet />
-    </div>
-  </div>
-</div>
-```
-
-## API
-
-#### Global menu:
-
-- `baseUrl`: This is the root path where the global menu resources are located.
-- `menuPath`: This is appended to the `baseUrl` to form the full URL to the menu resource.
-- `logout()`: A method that logs out the current user. When called, it will clear the user's session and redirect them to the login page.
-
-#### Topbar:
-
-- `baseUrl`: This is the root path where the global topbar resources are located.
-- `user`: A JSON string representing the current user.
-- `logo`: The URL of the logo image to be displayed on the topbar.
-
-## Details documentation of Components and Shared Authentication Logic Links
-
-- [Components](./docs/components.md)
-- [Shared Logic](./docs/share.md)
-
-## Contributing
-
-We always welcome community contributions. If you want to contribute, please create a Pull Request and we will review it.
+# @ukpc-lib/react
+
+@ukpc-lib is a comprehensive npm library designed to provide a suite of reusable components, themes, colors, hooks, and auth providers for UKPC applications. It aims to streamline development and ensure consistency across different projects.
+
+## Installation
+
+### React
+
+To install package, use the following command:
+
+```bash
+npm install @ukpc-lib/react
+```
+
+### .NET
+
+With .NET applications, you can import the script and use it as follows:
+
+Topbar:
+https://unpkg.com/@ukpc-lib/react@latest/web-components-bundle/global-topbar/index.js
+
+Global Menu:
+https://unpkg.com/@ukpc-lib/react@latest/web-components-bundle/global-menu/index.js
+
+## Usage
+
+**To ensure the correct display, you should use the layout as shown below:**
+
+### React
+
+After installation, you can start using components by importing it into your project. Here's an example of how to use Global Menu:
+
+```js
+import { GlobalMenu } from '@ukpc-lib/react/components';
+import { useAuth } from '@ukpc-lib/react/share';
+import { Outlet } from 'react-router-dom';
+import TopBar from './TopBar';
+
+export default function PrivateLayout() {
+  const { logout } = useAuth();
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
+      <div style={{ height: '64px' }}>
+        <TopBar />
+      </div>
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          flex: 1,
+          overflow: 'hidden',
+        }}
+      >
+        <GlobalMenu
+          baseUrl="https://saas.dev-intelli-park.com"
+          menuPath="/global-menu-config/api/v1/menu-items/user"
+          logout={logout}
+        />
+        <div style={{ flex: 1, padding: '40px', overflow: 'auto' }}>
+          <Outlet />
+        </div>
+      </div>
+    </div>
+  );
+}
+```
+
+### .NET
+
+```js
+<div style="display: flex; flex-direction: column; height: 100vh;">
+  <div style="height: 64px;">
+    <global-topbar
+      base-url="@baseurl"
+      user="@userJson"
+      logo="logoURL"
+    ></global-topbar>
+  </div>
+  <div style="display: flex; flex-direction: row; flex: 1; overflow: hidden;">
+    <global-menu
+      menu-path="/global-menu-config/api/v1/menu-items/user"
+      base-url="@baseurl"
+      logout="logout"
+    ></global-menu>
+    <div style="flex: 1; padding: 40px; overflow: auto;">
+      <Outlet />
+    </div>
+  </div>
+</div>
+```
+
+## API
+
+#### Global menu:
+
+- `baseUrl`: This is the root path where the global menu resources are located.
+- `menuPath`: This is appended to the `baseUrl` to form the full URL to the menu resource.
+- `logout()`: A method that logs out the current user. When called, it will clear the user's session and redirect them to the login page.
+
+#### Topbar:
+
+- `baseUrl`: This is the root path where the global topbar resources are located.
+- `user`: A JSON string representing the current user.
+- `logo`: The URL of the logo image to be displayed on the topbar.
+
+## Details documentation of Components and Shared Authentication Logic Links
+
+- [Components](./docs/components.md)
+- [Shared Logic](./docs/share.md)
+
+## Contributing
+
+We always welcome community contributions. If you want to contribute, please create a Pull Request and we will review it.

package/package.json

@@ -1,100 +1,100 @@
-{
-  "name": "@ukpc-lib/react",
-  "private": false,
-  "version": "0.1.18",
-  "type": "module",
-  "main": "./dist/",
-  "module": "./dist/",
-  "exports": {
-    "./components": {
-      "import": "./dist/components/index.js",
-      "require": "./dist/components/index.cjs",
-      "types": "./dist/components/index.d.ts"
-    },
-    "./share": {
-      "import": "./dist/share/index.js",
-      "require": "./dist/share/index.cjs",
-      "types": "./dist/share/index.d.ts"
-    }
-  },
-  "typesVersions": {
-    "*": {
-      "*": [
-        "./dist/*/index.d.ts"
-      ]
-    }
-  },
-  "files": [
-    "dist",
-    "web-components-bundle"
-  ],
-  "scripts": {
-    "dev": "vite --open --port 3000",
-    "build": "npm run build-react && npm run build-wc",
-    "build-react": "tsc && vite build --config vite.config.react.ts",
-    "build-wc": "tsc && vite build --config vite.config.wc.ts --mode production",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview",
-    "publish": "npm publish --access public",
-    "build-publish": "npm run build && npm version patch && npm run build && npm run publish && git push"
-  },
-  "dependencies": {
-    "@emotion/react": "^11.11.3",
-    "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.15.4",
-    "@mui/material": "^5.15.4",
-    "@r2wc/react-to-web-component": "^2.0.3",
-    "@rollup/plugin-replace": "^5.0.5",
-    "axios": "^1.6.5",
-    "bootstrap-daterangepicker": "^3.1.0",
-    "cssnano": "^6.0.3",
-    "framer-motion": "^10.18.0",
-    "jquery": "^3.7.1",
-    "moment": "^2.30.1",
-    "react-bootstrap-daterangepicker": "^8.0.0",
-    "react-query": "^3.39.3",
-    "react-router-dom": "^6.21.3",
-    "react-shadow": "^20.4.0",
-    "react-svg": "^16.1.32",
-    "react-toastify": "^10.0.4",
-    "react-window": "^1.8.10",
-    "react-window-infinite-loader": "^1.0.9",
-    "simplebar-react": "^3.2.4",
-    "usehooks-ts": "^2.15.1",
-    "vite-plugin-css-injected-by-js": "^3.3.1"
-  },
-  "devDependencies": {
-    "@types/node": "^20.8.10",
-    "@types/react": "^18.2.15",
-    "@types/react-dom": "^18.2.7",
-    "@types/react-window-infinite-loader": "^1.0.9",
-    "@typescript-eslint/eslint-plugin": "^6.0.0",
-    "@typescript-eslint/parser": "^6.0.0",
-    "@vitejs/plugin-react-swc": "^3.3.2",
-    "autoprefixer": "^10.4.16",
-    "eslint": "^8.45.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.3",
-    "postcss": "^8.4.33",
-    "prettier": "^3.0.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "tailwindcss": "^3.4.1",
-    "typescript": "^5.0.2",
-    "vite": "^4.5.1",
-    "vite-plugin-css-injected-by-js": "^3.3.1",
-    "vite-plugin-dts": "^3.7.0",
-    "vite-plugin-lib-inject-css": "^1.3.0"
-  },
-  "peerDependencies": {
-    "@mui/material": "^5.15.4",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-query": "^3.39.3",
-    "react-router-dom": "^6.21.3",
-    "tailwindcss": "^3.4.1"
-  },
-  "author": "Thinh Phung",
-  "description": "![Screenshot 2024-01-22 at 11 40 08](https://github.com/UKParkingControl/LibShareJS/assets/153060345/99004010-67a2-436b-a5b7-317992137205)",
-  "license": "ISC"
-}
+{
+  "name": "@ukpc-lib/react",
+  "private": false,
+  "version": "0.1.20",
+  "type": "module",
+  "main": "./dist/",
+  "module": "./dist/",
+  "exports": {
+    "./components": {
+      "import": "./dist/components/index.js",
+      "require": "./dist/components/index.cjs",
+      "types": "./dist/components/index.d.ts"
+    },
+    "./share": {
+      "import": "./dist/share/index.js",
+      "require": "./dist/share/index.cjs",
+      "types": "./dist/share/index.d.ts"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./dist/*/index.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "dist",
+    "web-components-bundle"
+  ],
+  "scripts": {
+    "dev": "vite --open --port 3000",
+    "build": "npm run build-react && npm run build-wc",
+    "build-react": "tsc && vite build --config vite.config.react.ts",
+    "build-wc": "tsc && vite build --config vite.config.wc.ts --mode production",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "publish": "npm publish --access public",
+    "build-publish": "npm run build && npm version patch && npm run build && npm run publish && git push"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.15.4",
+    "@mui/material": "^5.15.4",
+    "@r2wc/react-to-web-component": "^2.0.3",
+    "@rollup/plugin-replace": "^5.0.5",
+    "axios": "^1.6.5",
+    "bootstrap-daterangepicker": "^3.1.0",
+    "cssnano": "^6.0.3",
+    "framer-motion": "^10.18.0",
+    "jquery": "^3.7.1",
+    "moment": "^2.30.1",
+    "react-bootstrap-daterangepicker": "^8.0.0",
+    "react-query": "^3.39.3",
+    "react-router-dom": "^6.21.3",
+    "react-shadow": "^20.4.0",
+    "react-svg": "^16.1.32",
+    "react-toastify": "^10.0.4",
+    "react-window": "^1.8.10",
+    "react-window-infinite-loader": "^1.0.9",
+    "simplebar-react": "^3.2.4",
+    "usehooks-ts": "^2.15.1",
+    "vite-plugin-css-injected-by-js": "^3.3.1"
+  },
+  "devDependencies": {
+    "@types/node": "^20.8.10",
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@types/react-window-infinite-loader": "^1.0.9",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "@vitejs/plugin-react-swc": "^3.3.2",
+    "autoprefixer": "^10.4.16",
+    "eslint": "^8.45.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "postcss": "^8.4.33",
+    "prettier": "^3.0.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.0.2",
+    "vite": "^4.5.1",
+    "vite-plugin-css-injected-by-js": "^3.3.1",
+    "vite-plugin-dts": "^3.7.0",
+    "vite-plugin-lib-inject-css": "^1.3.0"
+  },
+  "peerDependencies": {
+    "@mui/material": "^5.15.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-query": "^3.39.3",
+    "react-router-dom": "^6.21.3",
+    "tailwindcss": "^3.4.1"
+  },
+  "author": "Thinh Phung",
+  "description": "![Screenshot 2024-01-22 at 11 40 08](https://github.com/UKParkingControl/LibShareJS/assets/153060345/99004010-67a2-436b-a5b7-317992137205)",
+  "license": "ISC"
+}

package/dist/components/GlobalMenu/components/Dropdown.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-type DropdownProps = {
-    children: React.ReactNode;
-    parentRef: React.RefObject<HTMLDivElement>;
-    onlyChild?: boolean;
-};
-export default function Dropdown(props: DropdownProps): import("react").ReactNode;
-export {};

package/dist/components/GlobalMenu/components/MenuItem.d.ts

@@ -1,15 +0,0 @@
-import { MenuItemDto } from '../models';
-export type OwnMenuItemProps = {
-    replacePath?(path: string): string;
-    ssr?: boolean;
-};
-type MenuItemProps = {
-    item: MenuItemDto;
-    level?: number;
-    isActive(id: number): boolean;
-    isCollapsed: boolean;
-    expanded(id: number): boolean;
-    toggleExpand: (id: number) => void;
-} & OwnMenuItemProps;
-export default function MenuItem({ item, level, ...props }: MenuItemProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/GlobalMenu/icons/IconCollapsed.d.ts

@@ -1,2 +0,0 @@
-declare function IconCollapsed(): import("react/jsx-runtime").JSX.Element;
-export default IconCollapsed;

package/dist/components/GlobalMenu/icons/IconDown.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-declare function IconDown(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-export default IconDown;

package/dist/components/GlobalMenu/icons/IconExpand.d.ts

@@ -1,2 +0,0 @@
-declare function IconExpand(): import("react/jsx-runtime").JSX.Element;
-export default IconExpand;

package/dist/components/GlobalMenu/icons/IconLogout.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export default function IconLogout(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/components/GlobalMenu/index.d.ts

@@ -1,7 +0,0 @@
-import { OwnMenuItemProps } from './components/MenuItem';
-export type GlobalMenuProps = {
-    baseUrl: string;
-    menuPath?: string;
-    logout?(): void;
-} & OwnMenuItemProps;
-export declare function GlobalMenu(props: GlobalMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/GlobalMenu/models/MenuItemDto.d.ts

@@ -1,8 +0,0 @@
-export interface MenuItemDto {
-    id: number;
-    name: string;
-    path?: string;
-    icon?: string;
-    parentKey: number | null;
-    children?: MenuItemDto[];
-}

package/dist/components/GlobalMenu/models/index.d.ts

@@ -1 +0,0 @@
-export * from './MenuItemDto';

package/dist/components/LanguageSwitcher/index.d.ts

@@ -1 +0,0 @@
-export default function LanguageSwitcher(): import("react/jsx-runtime").JSX.Element;

package/dist/components/LogoutConfirmModal/index.d.ts

@@ -1,7 +0,0 @@
-type LogoutConfirmModalProps = {
-    isOpen: boolean;
-    onClose: () => void;
-    onConfirm: () => void;
-};
-declare function LogoutConfirmModal({ isOpen, onClose, onConfirm, }: LogoutConfirmModalProps): import("react/jsx-runtime").JSX.Element | null;
-export default LogoutConfirmModal;

package/dist/components/NoData/index.d.ts

@@ -1,2 +0,0 @@
-import { FC, PropsWithChildren } from 'react';
-export declare const NoData: FC<PropsWithChildren>;

package/dist/components/NotFoundPage/index.d.ts

@@ -1,4 +0,0 @@
-declare const NotFoundPage: ({ rootPath }: {
-    rootPath: string;
-}) => import("react/jsx-runtime").JSX.Element;
-export default NotFoundPage;

package/dist/components/PopUp/index.d.ts

@@ -1,8 +0,0 @@
-import { PopUpBaseProps, usePopUpProps } from './types';
-export declare function PopUpBase(props: PopUpBaseProps): import("react/jsx-runtime").JSX.Element;
-export declare function usePopUp(props?: boolean | usePopUpProps): {
-    setTrue: () => void;
-    open: boolean;
-    onClose: () => void;
-    onConfirm: (() => void) | undefined;
-};

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

@@ -1,26 +0,0 @@
-import { SxProps, TypographyProps, Theme, DialogProps, DialogActionsProps } from "@mui/material";
-import { ReactNode } from "react";
-export type PopUpBaseProps = IPopUp & {
-    title?: ReactNode;
-    subTitle?: ReactNode;
-    desc: ReactNode;
-    fixOverflow?: boolean;
-    minWidthButton?: number;
-    subTitleProps?: TypographyProps;
-    contentProps?: SxProps<Theme>;
-    titleProps?: SxProps<Theme>;
-    hideTitle?: boolean;
-};
-export type IPopUp = {
-    open: boolean;
-    onClose?(): void;
-    onConfirm?: () => void;
-    dialogProps?: Omit<DialogProps, 'open' | 'onClose'>;
-    dialogActionsProps?: DialogActionsProps;
-    customActions?: ReactNode;
-    hideConfirm?: boolean;
-    hideClose?: boolean;
-};
-export type usePopUpProps = {
-    onConfirm?(): void;
-};

package/dist/components/ShadownDom/index.d.ts

@@ -1,8 +0,0 @@
-import React, { PropsWithChildren } from 'react';
-type OwnProps = {
-    styles?: string[];
-};
-type ElementProps = React.HTMLProps<HTMLElement>;
-type Props = PropsWithChildren<OwnProps & ElementProps>;
-export declare function ShadowDomWrapper({ children, styles, ...props }: Props): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/StyledAutocomplete/AutocompleteOption.d.ts

@@ -1,11 +0,0 @@
-import { StackProps } from '@mui/material';
-import { ReactNode } from 'react';
-type Props<T> = {
-    option: T;
-    renderOption(option: T): ReactNode;
-    onClick?(option: T): any;
-    stackProps?: StackProps;
-    select?: boolean;
-};
-export declare function AutocompleteOption<T>(props: Props<T>): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/StyledAutocomplete/StyledAutocomplete.d.ts

@@ -1,29 +0,0 @@
-import { ReactNode } from 'react';
-import { Paging } from './types';
-export type StyledAutocompleteProps<T> = {
-    disabledAllOption?: boolean;
-    readOnly?: boolean;
-    disabled?: boolean;
-    isSync?: boolean;
-    label?: React.ReactNode;
-    value?: T;
-    placeholder?: string;
-    onChange?(value?: T): any;
-    isEqual?(option?: T, value?: T): boolean;
-    getOptionLabel(option: T): string;
-    renderOptionTooltip?(option: T): ReactNode;
-    handleChangeSearch?(text: string): void;
-    searchLoading: boolean;
-    loading?: boolean;
-    paging: Paging<T>;
-    error?: boolean;
-    helperText?: ReactNode;
-    hasNextPage: boolean;
-    isNextPageLoading: boolean;
-    loadNextPage(searchText: string): void;
-    wrapperWidth?: string | number;
-    isRequired?: boolean;
-    itemsNumber?: number;
-    placeHolderColor?: string;
-};
-export declare function StyledAutocomplete<T>(props: StyledAutocompleteProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/StyledAutocomplete/helpers.d.ts

@@ -1 +0,0 @@
-export declare function activeStyles<T>(props: T, active?: boolean): T | undefined;

package/dist/components/StyledAutocomplete/index.d.ts

@@ -1,3 +0,0 @@
-export * from './StyledAutocomplete';
-export * from './AutocompleteOption';
-export * from './useStyledAutocomplete';