jb-grid 0.4.0 → 0.5.0

package/react/lib/footer.css

@@ -1,12 +1,12 @@
 .jb-grid-footer {
         grid-area: footer;
         background-color: transparent;
-        height: 56px;
+        height: 3.5rem;
         width: 100%;
         display: flex;
         align-items: center;
-        border-bottom-left-radius: 16px;
-        border-bottom-right-radius: 16px;
+        border-bottom-left-radius: 1rem;
+        border-bottom-right-radius: 1rem;
         justify-content: space-between;
         container-type: size;
         overflow: hidden;
@@ -15,37 +15,7 @@
             align-items: center;
             justify-content: flex-start;
 
-            .page-size-section {
-                padding: 0 16px;
-                float: left;
-                align-items: center;
-                height: 100%;
-                color: #7b7b7b;
-                font-size: 16px;
-                display: flex;
-                @container (max-width: 580px) {
-                    display:none;
-                }
-                .page-size-select {
-                    background-color: transparent;
-                    font-family: inherit;
-                    color: #7b7b7b;
-                    font-size: 16px;
-                    border: none;
-                }
-            }
-            .items-information-section {
-                float: left;
-                display: flex;
-                align-items: center;
-                height: 100%;
-                color: #7b7b7b;
-                font-size: 16px;
-                @container (max-width: 500px) {
-                    display:none;
-                }
-            }
-            .navigation-section {
+            .navigation-section {
                 float: left;
                 display: flex;
                 align-items: center;
@@ -53,21 +23,21 @@
                 nav {
                     display: flex;
                     align-items: center;
-                    height: 48px;
+                    height: 3rem;
                     .nav-btn {
-                        height: 48px;
-                        width: 48px;
+                        height: 3rem;
+                        width: 3rem;
                         display: flex;
                         justify-content: center;
                         align-items: center;
-                        &:hover {
-                            cursor: pointer;
-                            svg {
-                                fill: var(--jb-neutral-2);
-                            }
-                        }
+                            &:hover {
+                                cursor: pointer;
+                                svg {
+                                fill: var(--footer-icon-fill-color-hover);
+                            }
+                        }
                         svg {
-                            height: 40px;
+                            height: 2.5rem;
                             display: block;
                             margin: 0px 4px;
                             html[dir="ltr"] & {
@@ -76,8 +46,8 @@
                         }
                     }
                     .number-container {
-                        font-size: 16px;
-                        max-width: 160px;
+                        font-size: 1rem;
+                        max-width: 10rem;
                         overflow: hidden;
                         text-align: center;
                         padding: 0;
@@ -91,17 +61,17 @@
                         }
                         .number-btn {
                             color: rgb(180, 180, 180);
-                            padding: 0 8px;
+                            padding: 0 0.5rem;
                             font-size: 0.8em;
                             cursor: pointer;
-                            width: 48px;
+                            width: 3rem;
                             display: inline-block;
-                            &.current-page {
-                                color: var(--jb-grid-page-active-color, var(--jb-primary));
-                                font-size: 1em;
-                            }
-                            /* If the jb-grid-footer is smaller than 560px */
-                            @container (max-width: 620px) {
+                            &.current-page {
+                                color: var(--page-color-active);
+                                font-size: 1em;
+                            }
+                            /* If the jb-grid-footer is smaller than 35rem */
+                            @container (max-width: 38.75rem) {
                                 &:not(.current-page){
                                     display:none;
                                 }
@@ -111,4 +81,4 @@
                 }
             }
         }
-    }
+    }

package/react/lib/header.css

@@ -7,29 +7,29 @@
    display: block;
    height: auto;
    width: 100%;
-   border-top-left-radius: 24px;
-   border-top-right-radius: 24px;
+   border-top-left-radius: 1.5rem;
+   border-top-right-radius: 1.5rem;
    grid-area: header;
 
    .main-section {
-    height: 56px;
+    height: 3.5rem;
     width: 100%;
-    padding-top: 8px;
+    padding-top: 0.5rem;
     box-sizing: border-box;
     display: flex;
     align-items: center;
     justify-content: space-between;
      .jb-grid-title {
        display: block;
-       padding: 0 8px;
-       font-size: 18px;
-       line-height: 48px;
+       padding: 0 0.5rem;
+       font-size: 1.125rem;
+       line-height: 3rem;
      }
 
      .button-container {
        display: flex;
        height: 100%;
-       padding: 0 8px;
+       padding: 0 0.5rem;
      }
 
      &.hidden {
@@ -49,37 +49,37 @@
 
      .close-btn {
        float: right;
-       width: 45px;
-       height: 45px;
+       width: 2.8125rem;
+       height: 2.8125rem;
 
        svg {
-         width: 24px;
-         margin: 11px;
+         width: 1.5rem;
+         margin: 0.6875rem;
          cursor: pointer;
        }
      }
 
      .search-bar-wrapper {
        float: right;
-       width: calc(100% - 48px);
+       width: calc(100% - 3rem);
        height: 100%;
        display: flex;
        align-items: center;
        align-content: stretch;
 
-       jb-searchbar {
-         width: 100%;
-       }
-     }
+       > * {
+         width: 100%;
+       }
+     }
    }
 
    .button-container .btn {
      height: 100%;
-     width: 48px;
+     width: 3rem;
    }
 
    .button-container .btn svg {
      display: block;
-     margin: 8px 8px;
+     margin: 0.5rem 0.5rem;
    }
- }
+ }

package/react/lib/jb-grid.css

@@ -1,5 +1,5 @@
 /* responsive definition */
-@custom-media --tablet-until (max-width: 768px);
+@custom-media --tablet-until (max-width: 48rem);
 
 :host{
     --base-grid-row-color:#f9f9f9
@@ -9,10 +9,10 @@
     height: 100%;
     display: grid;
     grid-template-columns: 1fr;
-    grid-template-rows: minmax(56px , auto) 1fr 56px;
+    grid-template-rows: minmax(3.5rem , auto) 1fr 3.5rem;
     grid-template-areas: "header" "content" "footer";
-    box-shadow: 0px 0px 14px 2px #f0f4f7;
-    border-radius: 24px;
+    box-shadow: 0px 0px 0.875rem 2px #f0f4f7;
+    border-radius: 1.5rem;
     background-color: #edf2f9;
     svg {
         fill: #7b7b7b;
@@ -25,43 +25,47 @@
         /* 56*2=112 */
         height: 100%;
         position: relative;
-        border-radius: 0 0 24px 24px;
+        border-radius: 0 0 1.5rem 1.5rem;
         overflow: hidden;
-        box-shadow: #00000014 0px 15px 14px -5px;
+        box-shadow: #00000014 0px 0.9375rem 0.875rem -5px;
         grid-area: content;
-        .loading {
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            background-color: #fffffff2;
-            top: 0;
-            right: 0;
-            display: block;
-            .loading-content {
-                width: 300px;
-                height: 300px;
-                position: relative;
-                top: calc(50% - 150px);
-                right: calc(50% - 150px);
-                font-size: 23px;
-            }
-        }
+        .loading {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background-color: #fffffff2;
+            top: 0;
+            right: 0;
+            z-index: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            .loading-content {
+                width: min(18.75rem, 80%);
+                aspect-ratio: 1;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 1.4375rem;
+            }
+        }
         .table-header {
             width: 100%;
-            height: 32px;
+            height: 2rem;
             background-color: #f0f4f7;
             overflow: hidden;
             @media(--tablet-until) {
                 display: none;
             }
-            .table-header-wrapper {
-                display: grid;
-                grid-template-columns: auto;
-                grid-auto-columns: 1fr;
-                line-height: 32px;
+            .table-header-wrapper,
+            jb-table-header {
+                display: grid;
+                grid-template-columns: auto;
+                grid-auto-columns: 1fr;
+                line-height: 2rem;
     
                 .header-item {
-                    padding: 0 16px;
+                    padding: 0 1rem;
                     align-self: right;
                     overflow: hidden;
                     display: flex;
@@ -71,8 +75,8 @@
                     .sort-icon-wrapper {
                         svg {
                             fill: #1e201d;
-                            height: 16px;
-                            margin-top: 8px;
+                            height: 1rem;
+                            margin-top: 0.5rem;
                             &.--asc {
                                 transition: all 0.2s ease-out;
                                 transform: rotate(0deg);
@@ -89,17 +93,17 @@
                 }
             }
         }
-        .table-content {
-            width: 100%;
-            background-color: #fff;
-            overflow-y: scroll;
-            height: calc(100% - 32px);
+        .table-content {
+            width: 100%;
+            background-color: #fff;
+            overflow-y: scroll;
+            height: calc(100% - 2rem);
             @media(--tablet-until) {
                 height: 100%;
                 background: var(--base-grid-row-color);
             }
             &::-webkit-scrollbar {
-                width: 9px;
+                width: 0.5625rem;
                 background-color: transparent;
                 @media(--tablet-until) {
                     width: 0px;
@@ -121,11 +125,16 @@
                     grid-auto-flow: row;
                     grid-auto-rows: max-content;
                 }
-            }
-        }
-    }
-    
-}
+            }
+        }
+        &.without-table-header {
+            .table-content {
+                height: 100%;
+            }
+        }
+    }
+    
+}
 
 .btn-wrapper-section {
     float: right;
@@ -134,8 +143,8 @@
     align-items: center;
     justify-content: center;
     .btn {
-        width: 48px;
-        height: 48px;
+        width: 3rem;
+        height: 3rem;
         cursor: pointer;
         display: flex;
         align-items: center;
@@ -144,19 +153,24 @@
             transform: rotate(-146deg);
         }
         &.full-screen-button{
-            @container (max-width: 360px) {
+            @container (max-width: 22.5rem) {
                 display: none;
             }
         }
-        svg {
-            height: 24px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            
-        }
-    }
-}
+        svg {
+            height: 1.5rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            
+        }
+        jb-refresh-icon,
+        jb-fullscreen-icon {
+            width: 1.5rem;
+            height: 1.5rem;
+        }
+    }
+}
 .jb-grid-full-screen-container {
     width: 100%;
     height: 100%;

package/react/lib/types.ts

@@ -1,140 +1,43 @@
-import type { FilterItem, JBSearchbarValue } from "jb-searchbar";
+export type AnyObject = Record<string,any>
+export type JBGridRowData<T extends AnyObject> = T;
 
-
-// export type JBGridRowData = {
-//     [key: keyof T]: any,
-//     jbGridDetail: {
-//         isDeleting: boolean,
-//         isDeleted: boolean,
-//         isRecovering: boolean,
-//         isExpanded: boolean
-//     }
-// }
-export type JBGridRowDataDetail = {
-    isDeleting: boolean,
-    isDeleted: boolean,
-    isRecovering: boolean,
-    isExpanded: boolean
-}
-export type JBGridRowDetail = { jbGridDetail: JBGridRowDataDetail };
-export type AnyObject = Record<string,any>
-export type JBGridStyles = {
-    table: {
-        generalCols: {
-            gridTemplateColumns: string,
-
-        },
-        fullWidthCol: {
-            gridColumn: string
-        },
-        scrollIndent: {
-            width: string
-        },
-        mainRowStyle: {
-            gridTemplateColumns: string,
-        }
-    },
-    searchBar: any,
-    contentWrapper: any
-}
-export type JBGridRowData<T extends AnyObject> = T & JBGridRowDetail;
-
-export type JBGridResponseData<T extends AnyObject> = {
-    pageIndex: number,
+export type JBGridResponseData<T extends AnyObject> = {
+    pageIndex: number,
     startItemIndex: number,
     endItemIndex: number,
     totalItemsCount: number,
     totalPages: number,
-    content: JBGridRowData<T>[],
-}
-export type JBGridFilter = {
-    config: SearchbarConfig | null,
-    value: JBSearchbarValue
-}
-export type SearchbarConfig = {
-    columnList: FilterItem[],
-    searchOnChange?: boolean
-}
-export interface JBGridBridgeInterface {
-    mapServerResponseDataToGridData: (data: any) => JBGridResponseData<any>,
-    getData: (data: JBGridConfigRequestParams, requestBody: any) => Promise<any>,
-    createRequestBody: (page: JBGridDataPage, filter?: JBSearchbarValue, sortColumn?: JBGridColumnDef | null, requestConfig?: JBGridConfigRequestParams) => any
-}
-// export interface JBGridBridgeClassInterface {
-//     new(): JBGridBridgeInterface
-// }
-type ClassBuilder<I, Args extends any[] = any[]> = new (...args: Args) => I;
-
-export type JBGridBridgeClassInterface = ClassBuilder<JBGridBridgeInterface, []>;
-//
-export type JBGridDataPage = {
-    index: number,
-    size: number,
-    totalPages: number,
-}
-export type JBGridColumnDef = {
-    width?: string | number,
-    sort?: "ASC" | "DESC" | undefined,
-    sortable?: boolean,
-    id: number,
-    title: string,
-    name: string
-}
-export type JBGridConfigRequestParams = {
-    method?: "POST" | "GET",
-    url?: string,
-    //user can add any parameter needed to create request in his app
-    [key: string]: any
-}
-export type JBGridDataConfig<T extends AnyObject> = {
-    data: JBGridRowData<T>[],
-    //TODO: make it as a Generic type so user can standard it in whole app
-    requestParams: JBGridConfigRequestParams,
-    metaData: {
-        startItemIndex: number,
-        endItemIndex: number,
-        totalItemsCount: number
-    }
-};
-export type JBGridTableConfig = {
-    columns: JBGridColumnDef[]
-}
-export type JBGridConfigStates = {
-    headerSection: 'MAIN' | "SEARCH",
-    isFullScreen: boolean
-}
-export type JBGridCallbackConfig<T extends AnyObject> = {
-    onDataStandardizing: ((data: JBGridRowData<AnyObject>[]) => JBGridRowData<T>[]) | (<T extends AnyObject>(data: JBGridRowData<AnyObject>[]) => Promise<JBGridRowData<T>[]>) | null | undefined,
-    onPageIndexChange: ((newPageIndex: number) => unknown) | null | undefined
-}
-export type JBGridI18nMessage = {
-    serverErrorText?: string,
-    serverErrorTitle?: string,
+    content: JBGridRowData<T>[],
+}
+export type JBGridPaginationMeta = {
+    startItemIndex: number,
+    endItemIndex: number,
+    totalItemsCount: number
+}
+export type JBGridI18nMessage = {
+    serverErrorText?: string,
+    serverErrorTitle?: string,
     serverErrorRefreshButtonTitle?: string,
     EnterPageNumberMessage?: string,
     currentAvailableItem?: string,
     pageItemCount?:string,
     from?:string
 }
-export type JBGridI18nConfig = {
-    messages?: JBGridI18nMessage,
-    showPersianNumber?: boolean
-}
-export type ActionDispatchers = Readonly<{
-    refreshData: () => Promise<void>,
-    fullScreenGrid: () => void,
-    exitFullScreenGrid: () => void
-}>
-export interface JBGridConfigInterface<T extends AnyObject> {
-
-    table: JBGridTableConfig
-    data: JBGridDataConfig<T>,
-    page: JBGridDataPage,
-    callbacks: JBGridCallbackConfig<T>,
-    actionDispatchers?: ActionDispatchers,
-    states: JBGridConfigStates,
-}
-export type JBGridConfig<T extends AnyObject> = JBGridConfigInterface<T>;
-export type JBGridCallbacks = {
-    onFullscreenChange: (isFullscreen: boolean) => void
-}
+export type JBGridI18nConfig = {
+    messages?: JBGridI18nMessage,
+    showPersianNumber?: boolean
+}
+export type JBGridRenderContext = Readonly<{
+    refreshView: () => void
+}>
+export type JBGridCallbacks = {
+    /**
+     * @deprecated use onFullscreen and onExitFullscreen instead
+     */
+    onFullscreenChange?: (isFullscreen: boolean) => unknown,
+    onFullscreen?: () => unknown,
+    onPageIndexChange?: (newPageIndex: number) => unknown,
+    onPageSizeChange?: (newPageSize: number) => unknown,
+    onRefresh?: () => unknown | Promise<unknown>,
+    onExitFullscreen?: () => unknown
+}

package/react/lib/variables.css

@@ -0,0 +1,6 @@
+.jb-grid-wrapper {
+    /* Theme/Color */
+    --loading-color: var(--jb-grid-loading-color, var(--jb-primary));
+    --footer-icon-fill-color-hover: var(--jb-grid-footer-icon-fill-color-hover, var(--jb-neutral-2));
+    --page-color-active: var(--jb-grid-page-color-active, var(--jb-primary));
+}

package/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jb-grid-react",
-  "description": "react mobx jb grid table",
+  "description": "react jb grid table",
   "type": "module",
   "author": {
 		"name": "mohammad javad bathaei",
@@ -12,9 +12,8 @@
     "jb-grid react",
     "grid",
     "table",
-    "react table",
-    "react",
-    "mobx"
+    "react table",
+    "react"
   ],
   "version": "0.25.0",
   "bugs": "https://github.com/javadbat/jb-grid/issues",
@@ -29,9 +28,14 @@
   "main": "index.js",
   "types": "./dist/JBGrid.d.ts",
   "jsnext:main":"index.js",
-  "module": "index.js",
-  "repository": {
-		"type": "git",
-		"url": "git@github.com:javadbat/jb-grid.git"
-  }
-}
+  "module": "index.js",
+  "repository": {
+		"type": "git",
+		"url": "git@github.com:javadbat/jb-grid.git"
+  },
+  "dependencies": {
+    "jb-button": ">=3.8.0",
+    "jb-core": ">=0.28.0",
+    "jb-grid": ">=0.4.1"
+  }
+}

package/react/tsconfig.json

@@ -1,9 +1,10 @@
 {
     "compilerOptions": {
         
-        "rootDir": "./lib",
-        "declaration": true,
-        "declarationDir": "./dist"
+        "rootDir": "./lib",
+        "declaration": true,
+        "declarationDir": "./dist",
+        "skipLibCheck": true
     },
     "include": [
         "lib/**/*.ts",
@@ -15,4 +16,4 @@
         "dist",
     ],
     "extends":"jb-core/configs/tsconfig-react.json"
-}
+}