awing-library 2.1.2-stable.27 → 2.1.2-stable.28

package/README.md

@@ -1,66 +1,155 @@
-# How to dev locally
+## How to link "Awing-library" to project in local `branch: r18-mui5-beta`
 
-Step 1: Run npm command: npm link
-
-Step 2: For avoid bug duplicate react, run npm command: npm link <path-of-project-use-this-library>/node_modules/react (Eg: ../acm/node_modules/react)
-
-Step 3: For aboid bug duplicate material-ui, run commands:
-npm link <path-of-project-use-this-library>/node_modules/@material-ui/core
-npm link <path-of-project-use-this-library>/node_modules/@material-ui/icons
-npm link <path-of-project-use-this-library>/node_modules/@material-ui/pickers
-npm link <path-of-project-use-this-library>/node_modules/@material-ui/styles
-
-Step 4: Into project use this library folder, run npm command: npm link awing-library
-
-Then when library code change, the library code into project use it change too.
-
-# How to run storybook to test UI
-
-Add option "noEmit": true in the file tsconfig.json
-
-Run command: yarn storybook
-
-# How to link "Awing-library" to project in local `branch: r18-mui5-beta`
-
-## In Library source code
+### In Library source code
 
 _Sau khi thực hiện mỗi lệnh đều phải trở về thư mục gốc của thư viện_
 
 -   Step 1: Build thư viện
 
 ```shell
-yarn build
+yarn build or yarn dev
 ```
 
 -   Step 2: Tạo link thư viện
 
+**Cách 1:** Tự động bằng script (Khuyên dùng)
+```shell
+npm run create-link
+```
+
+**Cách 2:** Thủ công - Vui lòng copy từng dòng để chạy, chú ý: phải đứng đúng ở địa chỉ của project!
+
 ```shell
 yarn build
 yarn link
-cd node_modules/react
-yarn link
-cd ../..
-cd node_modules/react-dom
-yarn link
-cd ../..
-cd node_modules/@mui/material
-yarn link
-cd ../../..
-cd node_modules/@mui/styles
-yarn link
+cd /d/Awing/FE/react-new/node_modules/react && yarn link
+cd /d/Awing/FE/react-new/node_modules/react-dom && yarn link
+cd /d/Awing/FE/react-new/node_modules/@mui/styles && yarn link
+cd /d/Awing/FE/react-new/node_modules/@mui/material && yarn link
 ```
 
-## In project
+### In project  
 
 _Sau khi thực hiện mỗi lệnh đều phải trở về thư mục gốc của project_
 
 -   Xoá dependencies trong node_modules
 
 ```shell
-rm -rf node_modules/react node_modules/react-dom node_modules/@mui/styles node_modules/@mui/material node_modules/awing-library
+yarn unlink awing-library && rm -rf node_modules/awing-library node_modules/react node_modules/react-dom node_modules/@mui/styles node_modules/@mui/material
 ```
 
 -   Link library to project
+
 ```shell
-yarn link react react-dom @mui/material @mui/styles awing-library
+yarn link awing-library react react-dom @mui/styles @mui/material
+```
+
+## Install lib to project with Pack (giống dự án thực tế nhất)
+
+### In library: 
+- pack thư viện
+```shell
+rm -rf awing-library-0.0.1.tgz && yarn build && npm pack
+```
+
+### In Project: 
+-   Xoá awing-library trong node_modules
+```shell
+rm -rf node_modules/awing-library
+```
+
+-   Install pack awing-library
+```shell
+npm install "path_library\awing-library-v0.0.1.tgz" --legacy-peer-deps
+```
+
+-   Lệnh gộp
+```shell
+rm -rf node_modules/awing-library && npm install "path_library\awing-library-v0.0.1.tgz" --legacy-peer-deps
+```
+
+
+## peerDependencies:
+
+```
+    "@emotion/react": "11.14.0",
+    "@emotion/styled": "11.14.0",
+    "@mui/icons-material": "6.1.10",
+    "@mui/lab": "6.0.0-beta.15",
+    "@mui/material": "6.1.10",
+    "@mui/styles": "6.1.10",
+    "@mui/x-date-pickers": "7.23.0",
+    "@mui/x-tree-view": "7.23.0",
+    "i18next": "23.16.2",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-i18next": "15.1.0",
+    "react-router": "7.0.2",
+    "jotai": "^2.11.0"
+```
+
+## Cấu hình cho WebAssembly (DynamicLinqExpression Component)
+
+Nếu bạn sử dụng component `DynamicLinqExpressionInput`, bạn cần cấu hình project để serve các file WASM.
+
+### Với Vite
+
+Thêm vào `vite.config.ts`:
+
+```typescript
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  // ... cấu hình khác
+  
+  server: {
+    fs: {
+      // Cho phép serve files từ node_modules
+      allow: ['..']
+    }
+  },
+  
+  optimizeDeps: {
+    exclude: ['awing-library']
+  }
+});
+```
+
+### Với Webpack/Create React App
+
+Thêm vào `webpack.config.js` hoặc sử dụng `craco.config.js`:
+
+```javascript
+module.exports = {
+  // ... cấu hình khác
+  
+  module: {
+    rules: [
+      {
+        test: /\.wasm$/,
+        type: 'asset/resource'
+      }
+    ]
+  }
+};
+```
+
+### Copy WASM files khi deploy
+
+Khi build production, copy thư mục `_framework` từ library:
+
+```bash
+# Trong script build của bạn
+cp -r node_modules/awing-library/dist/_framework public/_framework
+```
+
+Hoặc thêm vào `package.json`:
+
+```json
+{
+  "scripts": {
+    "prebuild": "cp -r node_modules/awing-library/dist/_framework public/_framework",
+    "build": "vite build"
+  }
+}
 ```

package/dist/AWING/Action/Container.d.ts

@@ -0,0 +1,4 @@
+import type { ActionsProps } from './Types';
+declare const Container: (props: ActionsProps) => import("react/jsx-runtime").JSX.Element;
+export default Container;
+//# sourceMappingURL=Container.d.ts.map

package/dist/AWING/Action/Container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.d.ts","sourceRoot":"","sources":["../../../src/AWING/Action/Container.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,YAAY,EAAS,MAAM,SAAS,CAAC;AAEnD,QAAA,MAAM,SAAS,UAAW,YAAY,4CAwErC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/AWING/Action/Container.js

@@ -0,0 +1,78 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { omit } from "lodash";
+import { MoreVert } from "@mui/icons-material";
+import { IconButton, Menu, MenuItem, Tooltip } from "@mui/material";
+import { useAppTranslation } from "../../translate/useAppTranslation.js";
+const Container_Container = (props)=>{
+    const { t } = useAppTranslation();
+    const { menus, buttonIcon, elementId, ...other } = props;
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = Boolean(anchorEl);
+    const handleClick = (event)=>{
+        event.stopPropagation();
+        setAnchorEl(event.currentTarget);
+    };
+    const handleMenuItemClick = (menu)=>{
+        menu.action();
+        setAnchorEl(null);
+    };
+    const handleClose = ()=>{
+        setAnchorEl(null);
+    };
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Tooltip, {
+                title: t('Common.More'),
+                children: /*#__PURE__*/ jsx(IconButton, {
+                    id: `${elementId}-button-select`,
+                    "aria-controls": `${elementId}-menu`,
+                    "aria-haspopup": "true",
+                    "aria-expanded": open ? 'true' : void 0,
+                    onClick: handleClick,
+                    size: "small",
+                    ...other,
+                    children: buttonIcon || /*#__PURE__*/ jsx(MoreVert, {})
+                })
+            }),
+            /*#__PURE__*/ jsx(Menu, {
+                id: `${elementId}-menu`,
+                anchorEl: anchorEl,
+                open: open,
+                onClose: handleClose,
+                slotProps: {
+                    list: {
+                        'aria-labelledby': `${elementId}-button-select`
+                    }
+                },
+                style: {
+                    margin: '24px 0px 0px 24px'
+                },
+                children: menus.map((menu, index)=>/*#__PURE__*/ jsxs(MenuItem, {
+                        onClick: (e)=>{
+                            e.stopPropagation();
+                            handleMenuItemClick(menu);
+                        },
+                        ...omit(menu, [
+                            'icon',
+                            'name',
+                            'action'
+                        ]),
+                        children: [
+                            /*#__PURE__*/ jsx("div", {
+                                style: {
+                                    display: 'flex',
+                                    marginRight: '8px',
+                                    alignItems: 'center'
+                                },
+                                children: menu.icon
+                            }),
+                            menu.name
+                        ]
+                    }, index))
+            })
+        ]
+    });
+};
+const Container = Container_Container;
+export { Container as default };

package/dist/AWING/Action/Container.test.js

@@ -0,0 +1,107 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { fireEvent, render, screen } from "@testing-library/react";
+import Container from "./Container.js";
+jest.mock('@mui/material', ()=>({
+        ...jest.requireActual('@mui/material'),
+        Tooltip: (props)=>/*#__PURE__*/ jsxs("div", {
+                "data-testid": "Tooltip",
+                children: [
+                    /*#__PURE__*/ jsx("p", {
+                        "data-testid": "Tooltip-title",
+                        children: props?.title
+                    }),
+                    props?.children
+                ]
+            }),
+        IconButton: (props)=>/*#__PURE__*/ jsxs("div", {
+                "data-testid": "IconButton",
+                children: [
+                    /*#__PURE__*/ jsx("button", {
+                        "data-testid": "IconButton-onClick",
+                        onClick: props?.onClick
+                    }),
+                    props?.children
+                ]
+            }),
+        Menu: (props)=>/*#__PURE__*/ jsxs("div", {
+                "data-testid": "Menu",
+                children: [
+                    props?.open ? /*#__PURE__*/ jsx("p", {
+                        "data-testid": "Menu-open"
+                    }) : /*#__PURE__*/ jsx("p", {
+                        "data-testid": "Menu-not-open"
+                    }),
+                    /*#__PURE__*/ jsx("button", {
+                        "data-testid": "Menu-onClose",
+                        onClick: props?.onClose
+                    }),
+                    props?.children
+                ]
+            }),
+        MenuItem: (props)=>/*#__PURE__*/ jsxs("div", {
+                "data-testid": "MenuItem",
+                children: [
+                    /*#__PURE__*/ jsx("button", {
+                        "data-testid": "MenuItem-onClick",
+                        onClick: props?.onClick
+                    }),
+                    props?.children
+                ]
+            })
+    }));
+const getRender = (props)=>{
+    render(/*#__PURE__*/ jsx(Container, {
+        menus: [],
+        ...props
+    }));
+};
+describe('Render and Actions', ()=>{
+    beforeEach(()=>{
+        jest.clearAllMocks();
+    });
+    it('render basic', ()=>{
+        getRender();
+        expect(screen.getByText('Common.More')).toBeInTheDocument();
+    });
+    it('render menu', ()=>{
+        getRender();
+        fireEvent.click(screen.getByTestId('IconButton-onClick'));
+        expect(screen.getByTestId('Menu-open')).toBeInTheDocument();
+    });
+    it('render list menu item', ()=>{
+        getRender({
+            menus: [
+                {
+                    icon: 'icon demo 1',
+                    name: 'name demo ',
+                    action: jest.fn()
+                },
+                {
+                    icon: 'icon demo 1',
+                    name: 'name demo 1',
+                    action: jest.fn()
+                }
+            ]
+        });
+        expect(screen.getAllByTestId('MenuItem')).toHaveLength(2);
+    });
+    it('should call Menu onClose', ()=>{
+        getRender({
+            menus: [
+                {
+                    icon: 'icon demo 1',
+                    name: 'name demo ',
+                    action: jest.fn()
+                },
+                {
+                    icon: 'icon demo 1',
+                    name: 'name demo 1',
+                    action: jest.fn()
+                }
+            ]
+        });
+        expect(screen.getAllByTestId('MenuItem')).toHaveLength(2);
+        fireEvent.click(screen.getByTestId('Menu-onClose'));
+        expect(screen.getByTestId('Menu-not-open')).toBeInTheDocument();
+    });
+});

package/dist/AWING/Action/Types.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { IconButtonProps, MenuItemProps } from '@mui/material';
+export interface IMenu extends MenuItemProps {
+    icon: ReactNode;
+    name: string;
+    action: () => void;
+}
+export interface ActionsProps extends IconButtonProps {
+    menus: IMenu[];
+    buttonIcon?: ReactNode;
+    elementId?: string;
+}
+//# sourceMappingURL=Types.d.ts.map

package/dist/AWING/Action/Types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Types.d.ts","sourceRoot":"","sources":["../../../src/AWING/Action/Types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAE/D,MAAM,WAAW,KAAM,SAAQ,aAAa;IACxC,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,YAAa,SAAQ,eAAe;IACjD,KAAK,EAAE,KAAK,EAAE,CAAC;IACf,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}

package/dist/AWING/Action/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './Container';
+export * from './Types';
+//# sourceMappingURL=index.d.ts.map

package/dist/AWING/Action/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/AWING/Action/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,cAAc,SAAS,CAAC"}

package/dist/AWING/Action/index.js

@@ -0,0 +1,3 @@
+import Container from "./Container.js";
+export * from "./Types.js";
+export { Container as default };