Develop

.storybook/preview.js

@@ -69,10 +69,7 @@ const parameters = {
   },
   docs: {
     source: {
-      type: 'auto'
-    },
-    story: {
-      inline: true
+      type: 'code' 
     }
   }
 };

bitbucket-pipelines.yml

@@ -5,6 +5,10 @@
 
 image: node:18.19.0
 
+options:
+  size: 2x
+
+
 pipelines:
   branches:
     '{develop}':
@@ -15,7 +19,7 @@ pipelines:
             script:
               - yarn install
               - yarn test -- -u
-              - yarn chromatic --project-token=5715d8611200 --auto-accept-changes
+              - yarn chromatic --ci --project-token=5715d8611200 --auto-accept-changes --zip
     '{master}':
         - step:
             name: Build, Test and Chromatic Publish
@@ -24,4 +28,4 @@ pipelines:
             script:
               - yarn install
               - yarn test -- -u
-              - yarn chromatic --project-token=5715d8611200 --auto-accept-changes
+              - yarn chromatic --ci --project-token=5715d8611200 --auto-accept-changes --zip

package.json

@@ -4,6 +4,7 @@
   "private": false,
   "dependencies": {
     "@alshdavid/mime-types": "2.2.3",
+    "@babel/plugin-proposal-private-property-in-object": "7.21.11",
     "@date-io/date-fns": "2.10.11",
     "@date-io/moment": "1.x",
     "@dropzone-ui/react": "6.7.20",
@@ -19,8 +20,8 @@
     "@testing-library/react": "12.1.5",
     "@testing-library/user-event": "14.4.3",
     "@wojtekmaj/react-hooks": "1.17.2",
-    "ag-grid-community": "25.1.0",
-    "ag-grid-react": "25.1.0",
+    "ag-grid-community": "30.0.6",
+    "ag-grid-react": "30.0.6",
     "axios": "1.2.1",
     "branch-sdk": "2.59.0",
     "clsx": "1.1.1",
@@ -30,6 +31,9 @@
     "file-saver": "2.0.5",
     "formik": "2.2.6",
     "javascript-stringify": "2.1.0",
+    "js-base64": "3.7.5",
+    "json-url": "3.1.0",
+    "jsoncrush": "1.1.6",
     "ka-table": "7.1.3",
     "litepicker": "2.0.11",
     "lodash.get": "4.4.2",
@@ -53,6 +57,7 @@
     "react-image-pan-zoom-rotate": "1.6.0",
     "react-json-view": "1.21.3",
     "react-loader-advanced": "1.7.1",
+    "react-lottie-player": "1.5.4",
     "react-phone-number-input": "3.1.25",
     "react-querybuilder": "6.5.0",
     "react-scripts": "5.0.1",
@@ -171,7 +176,7 @@
   "main": "index.js",
   "repository": {
     "type": "git",
-    "url": "git+ssh://git@bitbucket.org/zennya/web-component-library.git"
+    "url": "git+ssh://git@bitbucket.org/zennya/web-component-library.git?sha=f4c76a6023c8f317fb0c329937c88c9981a5e09b"
   },
   "author": "",
   "license": "ISC",

src/components/DataGrid/DataGrid.jsx

@@ -90,7 +90,7 @@ function DataGrid({
       prevScrollY.current = newScrollTop
     }, [onLoadMore]
   );
-
+  
   useEffect(() => {
     const c = domRef.current.element;
     if (onLoadMore) {

src/components/DataGridv3/CustomHeader.jsx

@@ -0,0 +1,233 @@
+import React, {useState, useEffect, useRef, useCallback, useMemo, useContext, memo} from 'react'
+import { AgGridColumn, AgGridReact } from 'ag-grid-react';
+import {GridContext, actions} from "./GridContext";
+import { render } from 'react-dom';
+import { debounce } from 'lodash';
+import { makeStyles } from 'tss-react/mui';
+import {Autocomplete, Box, Button, Checkbox, Chip, Divider, FormControl, Grid, IconButton, InputLabel, InputAdornment, ListItemText , MenuItem, MenuList, OutlinedInput, Popover, Select, TextField, Typography, useTheme} from '@mui/material'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSort , faSortUp, faSortDown, faPlus, faBars, faFilter, faThumbtack, faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
+
+const CustomHeader= memo((props)=>{
+    const [state,dispatch] = useContext(GridContext)
+    const [anchorEl, setAnchorEl] = useState(null)
+    const [isHovered, setIsHovered] = useState(false)
+    const [currentSort, setCurrentSort] = useState(false)
+    const [isColHidden, setIsColHidden] = useState(false)
+
+    const handlePopoverClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    }
+
+    const handlePopoverClose = () => {
+        setAnchorEl(null);
+    }
+    // Pinning
+    const handlePinRight = () => {
+        props.columnApi.setColumnPinned(props.column.colId,'right')
+        handlePopoverClose()
+    }
+    const handlePinLeft = () => {
+        props.columnApi.setColumnPinned(props.column.colId,'left')
+        handlePopoverClose()
+    }
+    const handleUnpin = () => {
+        props.columnApi.setColumnPinned(props.column.colId, false)
+        handlePopoverClose()
+    }
+    const handleHide = () => {
+        props.columnApi.setColumnVisible(props.column.colId,false)
+    }
+    const handleUnhide = () => {
+        props.columnApi.getColumns().map((element)=>{
+            props.columnApi.setColumnVisible(element.colId,true)
+        })
+    }
+
+    function onSortClicked(event) {
+        // alternative client side sort
+        props.progressSort(event.shiftKey);
+    };  
+
+    const checkColHidden= ()=>{
+        props.columnApi.getColumns().map((element)=>{
+            if(!element.visible){
+                return setIsColHidden(true)
+            }
+        })
+        return setIsColHidden(false)
+    }
+
+    useEffect(() => {
+        if(state?.sortDirection != null){
+            if(state?.sortColumn && state?.sortColumn === props?.column?.colId){
+                return setCurrentSort(true)
+            }else{
+                return setCurrentSort(false)
+            }
+        }else{
+            return setCurrentSort(false)
+        }
+
+    }, [state?.sortColumn])
+
+    const setHoveredTrue =()=>{
+        setIsHovered(true)
+    }
+    const setHoveredFalse= ()=>{
+        setIsHovered(false)
+    }
+
+    const handleSort=(props)=>{
+        if( state?.sortColumn !== null  && props?.column?.colId == state?.sortColumn){
+            if(state?.sortDirection === 'asc'){
+                dispatch({
+                    type: actions.SORT_DIRECTION,
+                    payload:{
+                        sortDirection: 'desc'
+                    }
+                })
+
+            }else if(state?.sortDirection === 'desc'){
+        //         setSortDirection(null)
+                dispatch({
+                    type: actions.SORT_DIRECTION,
+                    payload:{
+                        sortDirection: null
+                    }
+                })
+                dispatch({
+                    type:actions.SORT_COLUMN,
+                    payload:{
+                        sortColumn: null
+                    }
+                })
+            }else{
+        //         setSortDirection('asc')
+                dispatch({
+                    type: actions.SORT_DIRECTION,
+                    payload:{
+                        sortDirection: 'asc'
+                    }
+                })
+            }
+        }else{//set to asc
+            dispatch({
+                type:actions.SORT_COLUMN,
+                payload:{
+                    sortColumn: props?.column?.colId
+                }
+            })
+            dispatch({
+                type: actions.SORT_DIRECTION,
+                payload:{
+                    sortDirection: 'asc'
+                }
+            })
+        }
+    }
+
+    return (
+        <div style={{display: 'flex', alignItems:'center', width:'100%'}} >
+            <IconButton  onClick={handlePopoverClick} sx={{fontSize:'15px', color:'white'}} >
+                <FontAwesomeIcon icon={faBars} style={{paddingRight:'0.1rem'}} />
+            </IconButton>
+            <Popover
+                    open={Boolean(anchorEl)}
+                    anchorEl={anchorEl}
+                    onClose={handlePopoverClose}
+                    anchorOrigin={{
+                        vertical: 'bottom',
+                        horizontal: 'left',
+                    }}
+                    transformOrigin={{
+                        vertical: 'top',
+                        horizontal: 'left',
+                    }}
+                    PaperProps={{
+                        style:{
+
+                        }
+                    }}
+
+            >
+                <Grid container direction='column'>
+                    { (props.column.pinned === null || props.column.pinned === 'left')  && (
+                        <div style={{padding:'0.8rem 0 0.2rem 0'}}>
+                            <Button onClick={handlePinRight} size="small" fullWidth style={{padding: '0.5rem 2.5rem 0.5rem 1rem',textTransform: "none", justifyContent:'flex-start',color:'black'}} >
+                                <FontAwesomeIcon icon={faThumbtack} style={{color: 'black',transform: 'rotate(270deg)', fontSize: '15px' }}/> <Typography sx={{fontSize: '12px', fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', fontWeight: 400, paddingLeft:'1rem'}}>Pin Right</Typography>
+                            </Button >
+                        </div>)
+                    }
+                    { (props.column.pinned === null || props.column.pinned === 'right') && (
+                        <div style={{padding:'0.2rem 0 0.2rem 0'}}>
+                            <Button onClick={handlePinLeft} fullWidth size="small" sx={{padding: '0.5rem 2.5rem 0.5rem 1rem',textTransform: "none", justifyContent:'flex-start',paddingTop:'0.5rem',color:'black'}} >
+                                <FontAwesomeIcon icon={faThumbtack} style={{color: 'black',transform: 'rotate(90deg)', fontSize: '15px' }}/><Typography sx={{fontSize: '12px',fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', fontWeight: 400, paddingLeft:'1rem'}}>Pin Left</Typography>
+                            </Button>
+                        </div>)
+                    }
+                    { (props.column.pinned === 'right' || props.column.pinned === 'left') && (
+                        <div style={{padding:'0.2rem 0 0.2rem 0'}}>
+                            <Button onClick={handleUnpin} fullWidth size="small" sx={{padding: '0.5rem 2.5rem 0.5rem 1rem',textTransform: "none", justifyContent:'flex-start',paddingTop:'0.5rem',color:'black'}} >
+                                <FontAwesomeIcon icon={faThumbtack} style={{color: 'black', fontSize: '15px' }}/><Typography sx={{fontSize: '12px',fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', fontWeight: 400, paddingLeft:'1rem'}}>Unpin</Typography>
+                            </Button>
+                        </div>)
+                    }
+                    <Divider/>
+
+                            <div style={{padding:'0.5rem 0 0.2rem 0'}}>
+                                <Button onClick={handleUnhide} fullWidth size="small" sx={{padding: '0.5rem 2.5rem 0.5rem 1rem',textTransform: "none", justifyContent:'flex-start',paddingTop:'0.5rem',color:'black'}} >
+                                    <FontAwesomeIcon icon={faEye} style={{color: 'black', fontSize: '12px' }}/><Typography sx={{fontSize: '12px',fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', fontWeight: 400, paddingLeft:'1rem'}}>Show All Columns</Typography>
+                                </Button>
+                            </div>
+
+
+                        <div style={{padding:'0.2rem 0 0.8rem 0'}}>
+                            <Button onClick={handleHide} fullWidth size="small" style={{padding: '0.5rem 2.5rem 0.5rem 1rem',textTransform: "none", justifyContent:'flex-start',paddingTop:'0.5rem',color:'black'}} >
+                                <FontAwesomeIcon icon={faEyeSlash} style={{color: 'black',fontSize: '12px'}} /><Typography sx={{fontSize: '12px',fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', fontWeight: 400, paddingLeft:'1rem'}}>Hide Column</Typography>
+                            </Button>
+                        </div>
+
+                </Grid>
+            </Popover>
+            <span 
+                style={{
+                    display:'flex',
+                    alignItems:'center',
+                    width:'100%',
+                    cursor: isHovered ? 'pointer': 'none'
+                }}
+                // onClick={(event)=>{ 
+                    //this is a sample of a client-side sorting
+                    //     onSortClicked(event)
+                    // }}
+
+                onClick={(event)=> {if(props?.enableSorting) handleSort(props)}}
+                onTouchStart ={(event)=>{if(props?.enableSorting) handleSort(props)}}
+                onMouseEnter={setHoveredTrue}
+                onMouseLeave={setHoveredFalse}
+            >
+            {props?.displayName}
+            <span style={{ paddingLeft:'0.5rem'}}>
+            { props?.enableSorting && (isHovered || currentSort) && (
+                (!currentSort || state?.sortDirection === null )?
+                <>
+                    <FontAwesomeIcon icon={faSort} style={{marginLeft:"auto" }}/>
+                </>
+
+                : state?.sortDirection === 'desc' ?
+                <>
+                    <FontAwesomeIcon icon={faSortDown} style={{marginLeft:"auto" }}/>
+                </>
+                : 
+                <>
+                    <FontAwesomeIcon icon={faSortUp} style={{marginLeft:"auto" }}/>
+                </>
+            )}
+            </span>
+            </span>
+        </div>
+    )
+})
+
+export default CustomHeader