es-application-template 0.0.7

package/dist/styles/index.css

@@ -0,0 +1,437 @@
+/* Package-owned styles only. Host ADMIN styles live outside es-application-template. */
+.becoxy-admin {
+  min-width: 0;
+}
+
+.becoxy-admin .min-w-0 {
+  min-width: 0;
+}
+
+.becoxy-admin-list-page {
+  --be-page-inline-padding: var(--be-content-padding);
+  --be-page-block-padding: var(--be-content-padding);
+  --be-list-inline-padding: var(--be-page-inline-padding);
+  --be-list-block-padding: var(--be-page-block-padding);
+  --be-list-gap: var(--be-section-gap);
+  display: flex;
+  flex-direction: column;
+  gap: var(--be-list-gap);
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  padding: var(--be-list-block-padding) var(--be-list-inline-padding);
+  overflow: hidden;
+  background-color: var(--be-background);
+}
+
+.becoxy-admin-list-page__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--be-gutter);
+  min-width: 0;
+  min-height: 44px;
+  color: var(--be-text-primary);
+  background-color: var(--be-background);
+}
+
+.becoxy-admin-list-page__actions {
+  display: flex;
+  flex: 0 0 auto;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--be-card-gap);
+}
+
+.becoxy-admin-list-page__summary,
+.becoxy-admin-list-page__tabs,
+.becoxy-admin-list-page__content {
+  min-width: 0;
+}
+
+.becoxy-admin-list-page__summary:empty,
+.becoxy-admin-list-page__tabs:empty {
+  display: none;
+}
+
+.becoxy-admin-list-page__tabs {
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+}
+
+.becoxy-admin-list-page__tabs::-webkit-scrollbar {
+  display: none;
+}
+
+.becoxy-admin-list-page__content {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+  overscroll-behavior: contain;
+}
+
+.becoxy-admin-list-page__content > .grid-table-component,
+.becoxy-admin-list-page__content > .card,
+.becoxy-admin-list-page__content > .section-card,
+.becoxy-admin-list-page__content > .flex-grow-1 {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.becoxy-admin .btn-outline-primary,
+.becoxy-admin .btn-outline-secondary,
+.becoxy-admin .btn-outline-primary:hover,
+.becoxy-admin .btn-outline-secondary:hover,
+.becoxy-admin .btn-outline-primary:focus,
+.becoxy-admin .btn-outline-secondary:focus,
+.becoxy-admin .btn-outline-primary:active,
+.becoxy-admin .btn-outline-secondary:active,
+.becoxy-admin .btn-outline-primary.active,
+.becoxy-admin .btn-outline-secondary.active {
+  color: var(--be-text-primary, #283046) !important;
+  background-color: var(--be-surface, #fff) !important;
+  border-color: var(--be-border, #ebe9f1) !important;
+}
+
+.becoxy-admin-standard {
+  color: var(--be-text-primary);
+}
+
+.becoxy-admin-standard.becoxy-admin-list-page .becoxy-admin-list-page__header {
+  min-height: 44px;
+}
+
+.becoxy-admin-standard.becoxy-admin-list-page {
+  background: var(--be-background);
+}
+
+.becoxy-admin-standard .becoxy-admin-list-page__content {
+  min-height: 0;
+  overflow: hidden;
+}
+
+.becoxy-grid-slot {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.becoxy-grid-slot > .grid-table-component {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+@media (max-width: 767.98px) {
+  .becoxy-admin-list-page__header {
+    align-items: flex-start;
+    min-height: auto;
+  }
+  .becoxy-admin-list-page__header .text-muted {
+    display: none;
+  }
+}
+.config-feature-tree-select .select__option {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
+.config-feature-tree-select__option {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.config-feature-tree-select__toggle,
+.config-feature-tree-select__toggle-spacer {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 22px;
+  width: 22px;
+  height: 22px;
+  margin-right: 2px;
+}
+
+.config-feature-tree-select__toggle {
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: inherit;
+  line-height: 1;
+  cursor: pointer;
+}
+.config-feature-tree-select__toggle:hover, .config-feature-tree-select__toggle:focus-visible {
+  background: rgba(var(--be-primary-rgb, 115, 103, 240), 0.12);
+  outline: none;
+}
+
+.config-feature-tree-select__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.customizer.config-tree-rules-drawer {
+  width: min(1000px, 100vw);
+  max-width: 100vw;
+  color: #000 !important;
+  background: #fff !important;
+}
+.customizer.config-tree-rules-drawer .config-key-sample-layout,
+.customizer.config-tree-rules-drawer .config-key-sample-content,
+.customizer.config-tree-rules-drawer .config-key-sample-toolbar,
+.customizer.config-tree-rules-drawer .table,
+.customizer.config-tree-rules-drawer .table thead th,
+.customizer.config-tree-rules-drawer .table tbody td {
+  color: #000 !important;
+  background: #fff !important;
+}
+.customizer.config-tree-rules-drawer .modal-title,
+.customizer.config-tree-rules-drawer h6,
+.customizer.config-tree-rules-drawer th,
+.customizer.config-tree-rules-drawer td,
+.customizer.config-tree-rules-drawer strong,
+.customizer.config-tree-rules-drawer .config-key-sample-text,
+.customizer.config-tree-rules-drawer .config-key-sample-empty,
+.customizer.config-tree-rules-drawer .form-control {
+  color: #000 !important;
+}
+.customizer.config-tree-rules-drawer .config-key-sample-text {
+  padding: 0;
+  background: transparent !important;
+  font-family: monospace;
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+.customizer.config-tree-rules-drawer .config-key-sample-copy-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.customizer.config-tree-rules-drawer .config-key-sample-copy-row + .config-key-sample-copy-row {
+  margin-top: 2px;
+}
+.customizer.config-tree-rules-drawer .config-key-sample-copy-button {
+  display: inline-flex;
+  flex: 0 0 28px;
+  width: 28px;
+  height: 28px;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  color: #000;
+  background: transparent;
+  border: 0;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.customizer.config-tree-rules-drawer .config-key-sample-copy-button:hover {
+  background: #f2f2f2;
+}
+.customizer.config-tree-rules-drawer .config-key-sample-copy-button:focus-visible {
+  outline: 2px solid #000;
+  outline-offset: 1px;
+}
+.customizer.config-tree-rules-drawer .form-control::placeholder {
+  color: #000;
+  opacity: 1;
+}
+.customizer.config-tree-rules-drawer .select__single-value,
+.customizer.config-tree-rules-drawer .select__placeholder,
+.customizer.config-tree-rules-drawer .select__input-container,
+.customizer.config-tree-rules-drawer .select__option {
+  color: #000 !important;
+}
+@charset "UTF-8";
+.bx-shortcut-management {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  /*
+   * TEMP COMPACT DENSITY — chỉ màn Quản lý phím tắt.
+   * Tạm hardcode theo yêu cầu review hiện tại.
+   * Không ảnh hưởng Grid global / es-grid-template.
+   */
+}
+.bx-shortcut-management .ui-rc-grid-thead .ui-rc-grid-row {
+  height: 30px !important;
+  min-height: 30px !important;
+}
+.bx-shortcut-management .ui-rc-grid-thead .ui-rc-grid-cell {
+  height: 30px !important;
+  min-height: 30px !important;
+  padding: 0 8px !important;
+}
+.bx-shortcut-management .ui-rc-grid-tbody .ui-rc-grid-row.ui-rc-grid-row-parent {
+  height: 30px !important;
+  min-height: 30px !important;
+}
+.bx-shortcut-management .ui-rc-grid-tbody .ui-rc-grid-row.ui-rc-grid-row-parent .ui-rc-grid-cell {
+  height: 30px !important;
+  min-height: 30px !important;
+  padding: 0 8px !important;
+}
+.bx-shortcut-management .ui-rc-grid-tbody .ui-rc-grid-row:not(.ui-rc-grid-row-parent) {
+  height: 32px !important;
+  min-height: 32px !important;
+  max-height: 32px !important;
+}
+.bx-shortcut-management .ui-rc-grid-tbody .ui-rc-grid-row:not(.ui-rc-grid-row-parent) .ui-rc-grid-cell {
+  height: 32px !important;
+  min-height: 0 !important;
+  max-height: 32px !important;
+  padding: 0 8px !important;
+  overflow: hidden;
+  line-height: 16px;
+}
+.bx-shortcut-management .bx-shortcut-feature {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 16px;
+}
+.bx-shortcut-management .bx-shortcut-group-title {
+  font-weight: 600;
+  line-height: 16px;
+  color: var(--be-text-primary, inherit);
+}
+.bx-shortcut-management .bx-shortcut-capture-wrap {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  max-width: 100%;
+  min-width: 0;
+  height: 22px;
+  line-height: 1;
+}
+.bx-shortcut-management .bx-shortcut-capture {
+  display: inline-flex;
+  align-items: center;
+  min-width: 124px;
+  height: 22px;
+  min-height: 22px;
+  padding: 0 6px;
+  border: 1px solid var(--be-border-color, #d8d8d8);
+  border-radius: 4px;
+  background: var(--be-surface-color, #fff);
+  color: var(--be-text-color, #212529);
+  line-height: 1;
+  text-align: left;
+}
+.bx-shortcut-management .bx-shortcut-capture:hover, .bx-shortcut-management .bx-shortcut-capture.is-capturing {
+  border-color: var(--be-primary, #7367f0);
+  color: var(--be-primary, #7367f0);
+}
+.bx-shortcut-management .bx-shortcut-capture.is-capturing {
+  box-shadow: 0 0 0 2px rgba(115, 103, 240, 0.12);
+}
+.bx-shortcut-management .bx-shortcut-capture:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+.bx-shortcut-management .bx-shortcut-clear {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--be-text-color, #212529);
+  line-height: 1;
+  opacity: 1;
+}
+.bx-shortcut-management .bx-shortcut-clear:hover {
+  background: rgba(0, 0, 0, 0.05);
+  color: var(--be-danger, #ea5455);
+}
+.bx-shortcut-management .bx-shortcut-clear:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+.bx-shortcut-management .bx-shortcut-key {
+  display: inline-flex;
+  align-items: center;
+  height: 20px;
+  min-height: 20px;
+  padding: 0 6px;
+  border: 1px solid var(--be-border-color, #d8d8d8);
+  border-radius: 4px;
+  color: var(--be-text-color, #212529);
+  line-height: 1;
+  white-space: nowrap;
+}
+.bx-shortcut-management .bx-shortcut-key--locked,
+.bx-shortcut-management .bx-shortcut-state {
+  color: var(--be-text-color, #212529);
+  opacity: 1;
+}
+.bx-shortcut-management .bx-shortcut-state {
+  line-height: 16px;
+  white-space: nowrap;
+}
+.bx-shortcut-management .bx-shortcut-row-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  line-height: 1;
+}
+.bx-shortcut-management {
+  /*
+   * SwitchInput mặc định có padding / border riêng.
+   * Reset chỉ trong cell Shortcut để không ép row lên ~50px.
+   */
+}
+.bx-shortcut-management .bx-shortcut-switch {
+  height: 22px;
+  min-height: 0;
+  gap: 0 !important;
+  justify-content: center !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  border-bottom: 0 !important;
+}
+.bx-shortcut-management .bx-shortcut-switch > .min-w-0.flex-grow-1 {
+  display: none;
+}
+.bx-shortcut-management .bx-shortcut-switch > .d-flex {
+  height: 22px;
+  min-height: 0;
+  gap: 0 !important;
+  align-items: center !important;
+  padding: 0 !important;
+  margin: 0 !important;
+}
+.bx-shortcut-management .bx-shortcut-switch .form-check.form-switch {
+  display: flex;
+  align-items: center;
+  min-height: 0;
+  height: 22px;
+  margin: 0 !important;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+}
+.bx-shortcut-management .bx-shortcut-switch .form-check-input {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}

package/dist/utility/Utils.d.ts

@@ -0,0 +1,4 @@
+export declare const lang: "vi" | "en" | "ja";
+export declare const getLoginId: () => string;
+export declare const getUserData: () => string;
+export declare const generateUUID: () => string;

package/dist/utility/hooks/isNullOrUndefined.d.ts

@@ -0,0 +1 @@
+export declare const isNullOrUndefined: (d: any) => boolean;

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "es-application-template",
+  "version": "0.0.7",
+  "description": "Reusable Setting and Shortcut runtime/management package for ES applications.",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "style": "dist/styles/index.css",
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "dist/**/*",
+    "LICENSE",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "resolutions": {
+    "@types/react": "18.2.58",
+    "@types/react-dom": "18.3.1"
+  },
+  "scripts": {
+    "build": "rollup -c",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "jest --runInBand",
+    "verify": "yarn typecheck && yarn test && yarn build",
+    "pack:local": "npm pack"
+  },
+  "peerDependencies": {
+    "@tanstack/react-query": ">=5 <6",
+    "axios": ">=1 <2",
+    "becoxy-icons": ">=2 <3",
+    "classnames": ">=2 <3",
+    "es-grid-template": ">=1.9.72 <2",
+    "react": ">=18 <19",
+    "react-dom": ">=18 <19",
+    "react-hook-form": ">=7 <8",
+    "react-hot-toast": ">=2 <3",
+    "react-i18next": ">=11 <16",
+    "react-router-dom": ">=6 <8",
+    "react-select": ">=5 <6",
+    "reactstrap": ">=9 <10"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^20.0.0",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@rollup/plugin-typescript": "^8.5.0",
+    "@tanstack/react-query": "^5.74.4",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^22.10.0",
+    "@types/react": "18.2.58",
+    "@types/react-dom": "18.3.1",
+    "axios": "^1.7.2",
+    "becoxy-icons": "^2.1.1",
+    "classnames": "2.3.1",
+    "es-grid-template": "^1.9.72",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "postcss": "^8.4.35",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-hook-form": "^7.43.9",
+    "react-hot-toast": "2.2.0",
+    "react-i18next": "^11.16.9",
+    "react-router-dom": "^6.3.0",
+    "react-select": "^5.10.2",
+    "reactstrap": "9.0.1",
+    "rollup": "^2.56.2",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "sass": "^1.71.1",
+    "ts-jest": "^29.2.5",
+    "tslib": "^2.8.1",
+    "typescript": "^5.7.2"
+  }
+}