version 2.7.0

netservicespa · Nov 28, 2024 · 87813c4 · 87813c4
1 parent 94a729a
commit 87813c4
Show file tree

Hide file tree

Showing 18 changed files with 698 additions and 318 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,63 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [v2.6.0](https://github.com/netservicespa/astrea-react-ds/commit/94a729a8687c6be837e21e10fe1523dac3b19442) (Nov 15 2024)
+
+## New Additions
+
+- **NsNotificationList**:
+  - Introduced the new `NsNotificationList` component.
+  - Added translation support.
+  - Exported types for usage.
+  - Created a Storybook story for demonstration.
+
+- **NsDataGrid**:
+  - Column Visibility Menu: Introduced a menu to manage column visibility, dynamically positionable using the render function within the table component.
+
+- **Storybook**:
+  - Added Figma integration within Storybook stories.
+
+## Improved
+
+- **NsCard**:
+  - Added `sx` support for enhanced customization.
+
+- **NsTooltip**:
+  - Expanded applicability, allowing tooltips to be applied to any element instead of just icons.
+
+- **Storybook**:
+  - Removed `@storybook/addon-mdx-gfm` as it is no longer necessary.
+  - Integrated `Remark` to support GitHub Flavored Markdown (GFM) in Storybook documentation.
+  - Upgraded Storybook to version 8.4.
+
+- **NsDataGrid**:
+  - Custom Layout Support: Updated `NsDataGridClient` to accept a custom renderer for flexible layouts.
+  - Translation Structure: Introduced `table.controls` section for handling translations, starting with `columnVisibility: "Columns Visibility"`.
+  - Dynamic Alignment: The column visibility button is now right-aligned using `justifyContent: 'flex-end`.
+  - Removed `Typography` within table cells to enable full cell customization.
+
+- **NsNotification**:
+  - Added the ability to include links in notifications.
+  - Introduced a `markAllAsRead` function.
+  - Enhanced translation support.
+
+- **NsHeader**:
+  - Added cascading menu support via dropdown, with an example in Storybook.
+  - Fixed `infoBox` positioning to align on the right.
+  - Removed unnecessary SVG margins.
+
+- **NsFeedback**:
+  - Improved colors based on accessibility testing.
+
+- **NsDropdown**:
+  - Added support for disabling the overlay.
+
+## Fixed
+
+- **Exports**:
+  - Removed `types.ts` file; type declarations are now included within component files.
+  - Resolved deprecated `assert.CallTracker` issue for compatibility with newer Node.js versions.
+
 # [v2.5.0](https://github.com/netservicespa/astrea-react-ds/commit/2395ae49e5f9e3d2443a81a162c3c1c094ccebed) (Nov 5 2024)
 
 ## New Additions

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@netservice/astrea-react-ds",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "main": "dist/umd/index.min.js",
   "module": "dist/esm/index.js",
   "license": "Apache-2.0",

diff --git a/src/components/components/Dropdown/NsDropDown.tsx b/src/components/components/Dropdown/NsDropDown.tsx
@@ -1,17 +1,16 @@
-import React, { useState } from 'react';
+import React, { useState, useId } from 'react';
 import { Box, Divider, ListItemIcon, ListItemText, Menu, MenuItem } from '@mui/material';
-import HomeIcon from '@mui/icons-material/Home';
 import LogoutIcon from '@mui/icons-material/Logout';
-import { alpha, styled } from '@mui/material/styles';
-
+import { alpha, styled, SxProps, Theme, useTheme } from '@mui/material/styles';
+import KeyboardArrowUpOutlinedIcon from '@mui/icons-material/KeyboardArrowUpOutlined';
 /**
  * DynamicLink/ dropdown Component
  * @author vadim.chilinciuc
  */
 
 export interface IDropdownItems {
     name: string;
-    path: string;
+    path: string | IDropdownItems[];
     icon?: React.ReactElement;
 }
 export interface IDropDownConfiguration {
@@ -23,6 +22,8 @@ export interface IDropDownConfiguration {
         vertical?: any;
         horizontal?: any;
     };
+    hover?: boolean;
+    dropDownIcon?: React.ReactElement | boolean;
 }
 export interface IDropDown {
     /**
@@ -53,6 +54,7 @@ export interface IDropDown {
      * Extra configuration for Backdrop.
      */
     overlay?: boolean;
+    icon?: boolean | React.ReactElement;
 }
 
 export interface DynamicLinkProps {
@@ -70,12 +72,11 @@ export interface DynamicLinkProps {
      * The clickable element (e.g., icon, div, component) that triggers the redirection.
      */
     children: any;
+    sx?: SxProps<Theme>;
 }
 
 export const StyledLink = styled('a')(({ theme }) => ({
     color: `${theme.palette.primary.main}`,
-    backgroundColor: 'transparent !important',
-    margin: '0px !important',
 }));
 
 const StyledMenu = styled(Menu)<{ overlay: boolean }>(({ theme, overlay }) => ({
@@ -84,34 +85,35 @@ const StyledMenu = styled(Menu)<{ overlay: boolean }>(({ theme, overlay }) => ({
     },
 }));
 
-export const DynamicLink = ({ router, to, children }: DynamicLinkProps) => {
+type ExtendChildrenProps = {
+    children: React.ReactElement;
+    icon?: boolean | React.ReactElement;
+    isOpen: boolean;
+};
+export const DynamicLink = ({ router, to, children, sx }: DynamicLinkProps) => {
     const isReactRouter = typeof router?.history !== 'undefined';
     const isNextRouter = typeof router?.push !== 'undefined';
-
+    const commonStyle = {
+        className: 'font-semiBold',
+        style: { textDecoration: 'none', cursor: 'pointer', margin: '0px' },
+        sx,
+    };
     if (isReactRouter) {
         return (
-            <StyledLink
-                onClick={() => router.history.push(to)}
-                className={'font-semiBold'}
-                style={{ textDecoration: 'none', cursor: 'pointer', margin: '0px' }}
-            >
+            <StyledLink onClick={() => router.history.push(to)} {...commonStyle}>
                 {children}
             </StyledLink>
         );
     } else if (isNextRouter) {
         return (
-            <StyledLink
-                onClick={() => router.push(to)}
-                className={'font-semiBold'}
-                style={{ textDecoration: 'none', cursor: 'pointer', margin: '0px' }}
-            >
+            <StyledLink onClick={() => router.push(to)} {...commonStyle}>
                 {children}
             </StyledLink>
         );
     } else {
         // Handle the case when neither React Router nor Next.js Router is detected
         return (
-            <StyledLink href={to} className={'font-semiBold'} style={{ textDecoration: 'none', margin: '0px' }}>
+            <StyledLink href={to} {...commonStyle}>
                 {children}
             </StyledLink>
         );
@@ -125,10 +127,11 @@ export const NsDropDown = ({
     children,
     dropDownConfiguration,
     overlay = false,
+    icon = false,
 }: IDropDown) => {
+    const theme = useTheme();
     const [isOpen, setIsOpen] = useState(false);
     const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-
     const handleMenuOpen = (event: React.MouseEvent<HTMLDivElement>) => {
         setIsOpen(true);
         setAnchorEl(event.currentTarget);
@@ -146,15 +149,22 @@ export const NsDropDown = ({
 
     const renderMenuItems = () => {
         if (Array.isArray(dropdownItems)) {
-            const items = dropdownItems.map((item, index: number) => (
-                <DynamicLink to={item.path} router={router} key={item.path}>
-                    <MenuItem>
-                        {item.icon && <ListItemIcon>{item.icon}</ListItemIcon>}
-                        {item.name}
-                    </MenuItem>
-                    {index < dropdownItems.length - 1 && <Divider />}
-                </DynamicLink>
-            ));
+            const items = dropdownItems.map((item, index) => {
+                if (typeof item.path === 'string') {
+                    return (
+                        <React.Fragment key={item.path}>
+                            <DynamicLink to={item.path} router={router}>
+                                <MenuItem>
+                                    {item.icon && item.icon}
+                                    {item.name}
+                                </MenuItem>
+                            </DynamicLink>
+                            {index < dropdownItems.length - 1 && <Divider />}
+                        </React.Fragment>
+                    );
+                }
+                return null;
+            });
 
             if (onLogout) {
                 items.push(
@@ -176,10 +186,97 @@ export const NsDropDown = ({
         }
     };
 
+    const ExtendChildren = ({ children, icon, isOpen }: ExtendChildrenProps) => {
+        return (
+            <Box
+                sx={{
+                    height: '100%',
+                    display: 'flex',
+                    flexDirection: 'row',
+
+                    '&:hover': {
+                        backgroundColor: theme.palette.primary.main,
+                        color: '#fff',
+                    },
+                    '&:hover a': {
+                        color: '#fff',
+                    },
+                    '&:hover svg': {
+                        color: '#fff',
+                    },
+                }}
+            >
+                {React.Children.map(children, (child, i) => {
+                    if (React.isValidElement(child)) {
+                        return (
+                            <Box
+                                key={useId()}
+                                sx={{
+                                    display: 'flex',
+                                    flexDirection: 'row',
+                                    alignItems: 'center',
+                                }}
+                            >
+                                {React.cloneElement(child)}
+                                {icon &&
+                                    (isOpen ? (
+                                        typeof icon === 'boolean' ? (
+                                            <KeyboardArrowUpOutlinedIcon
+                                                sx={{
+                                                    transition: 'transform 0.3s',
+                                                    color: theme.palette.primary.main,
+                                                }}
+                                            />
+                                        ) : (
+                                            <>{icon}</>
+                                        )
+                                    ) : typeof icon === 'boolean' ? (
+                                        <KeyboardArrowUpOutlinedIcon
+                                            sx={{
+                                                color: theme.palette.primary.main,
+                                                transform: 'rotate(180deg)',
+                                                transition: 'transform 0.3s',
+                                            }}
+                                        />
+                                    ) : (
+                                        <Box
+                                            sx={{
+                                                transform: 'rotate(180deg)',
+                                                transition: 'transform 0.3s',
+                                                display: 'inline-flex',
+                                            }}
+                                        >
+                                            {icon}
+                                        </Box>
+                                    ))}
+                            </Box>
+                        );
+                    }
+                    return child;
+                })}
+            </Box>
+        );
+    };
+
     return (
         <>
-            <Box sx={{ cursor: 'pointer' }} onClick={handleMenuOpen}>
-                {React.isValidElement(children) && React.Children.only(children)}
+            <Box
+                sx={{
+                    cursor: 'pointer',
+                    height: '100%',
+                    display: 'flex',
+                    direction: 'row',
+                    alignItems: 'center',
+                    ...(dropDownConfiguration?.hover && {
+                        '&:hover': {
+                            backgroundColor: theme.palette.primary.main,
+                            color: '#fff',
+                        },
+                    }),
+                }}
+                onClick={handleMenuOpen}
+            >
+                <ExtendChildren children={children} icon={icon} isOpen={isOpen} />
             </Box>
             <StyledMenu
                 overlay={overlay}

diff --git a/src/components/components/datatable/NsDataGrid.tsx b/src/components/components/datatable/NsDataGrid.tsx
@@ -1,5 +1,5 @@
 import { TableContainerProps } from '@mui/material';
-import { ColumnDef } from '@tanstack/react-table';
+import { ColumnDef as BaseColumnDef } from '@tanstack/react-table';
 import React from 'react';
 import { NsDataGridOptions } from './NsDataGridBase';
 import { NsDataGridClient, NsDataGridClientProps } from './NsDataGridClient';
@@ -29,6 +29,13 @@ export type NsDataGridClientRenderFn = (
     children?: React.ReactNode,
 ) => React.ReactElement;
 
+export type ColumnDef<RowType, Value = any> = BaseColumnDef<RowType, Value> & {
+    meta?: {
+        hide?: boolean; // Proprietà per nascondere le colonne
+        [key: string]: any;
+    };
+};
+
 export interface NsDataGridCommonProps<RowType extends object, FilterType extends object> extends TableContainerProps {
     /**
      * An array of column definitions for the grid.

diff --git a/src/components/components/datatable/NsDataGridBase.tsx b/src/components/components/datatable/NsDataGridBase.tsx
@@ -53,14 +53,16 @@ export interface NsDataGridOptions<RowType extends object> {
         /** The available page sizes */
         rowsPerPageOptions?: number[];
     };
+    bodyTextAlign?: 'center' | 'left' | 'right';
+    headerJustifyContent?: 'space-evenly' | 'flex-start' | 'flex-end';
+    /** Specify selected Row */
+    selectedRow?: string;
 }
 
 export interface NsDataGridBaseProps<RowType extends object> extends TableContainerProps {
     table: Table<RowType>;
     options?: NsDataGridOptions<RowType>;
     debug?: boolean;
-    bodyTextAlign?: 'center' | 'left' | 'right';
-    headerJustifyContent?: 'space-evenly' | 'flex-start' | 'flex-end';
 }
 
 /**
@@ -131,8 +133,6 @@ export function NsDataGridBase<RowType extends object>({
     table,
     options = {},
     debug = false,
-    headerJustifyContent,
-    bodyTextAlign,
     // Mui TableContainer props
     sx,
     component = Paper,
@@ -180,7 +180,9 @@ export function NsDataGridBase<RowType extends object>({
                                             }
                                         }}
                                     >
-                                        <HeaderBoxStyled headerJustifyContent={headerJustifyContent || 'space-evenly'}>
+                                        <HeaderBoxStyled
+                                            headerJustifyContent={options.headerJustifyContent || 'space-evenly'}
+                                        >
                                             <Typography variant="h3">
                                                 {header.isPlaceholder
                                                     ? null
@@ -206,7 +208,7 @@ export function NsDataGridBase<RowType extends object>({
                         </TableRow>
                     ))}
                 </TableHeadStyled>
-                <TableBody debug={debug} table={table} bodyTextAlign={bodyTextAlign} />
+                <TableBody debug={debug} table={table} bodyTextAlign={options.bodyTextAlign} />
             </MuiTable>
         </TableContainer>
     );

diff --git a/src/components/components/datatable/NsDataGridClient.tsx b/src/components/components/datatable/NsDataGridClient.tsx
@@ -64,7 +64,7 @@ export function NsDataGridClient<RowType extends object, FilterType extends obje
 
     const table = useReactTable<RowType>({
         data,
-        columns,
+        columns: columns.filter((column) => !column.meta?.hide),
         defaultColumn,
         columnResizeMode: 'onChange',
         getCoreRowModel: getCoreRowModel(),