@addev-be/ui 0.13.0 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@addev-be/ui",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "type": "module",
   "scripts": {
     "watch": "tsc -b --watch",

package/src/components/data/DataGrid/DataGridCell.tsx

@@ -3,8 +3,8 @@
 
 import * as styles from './styles';
 
-import { MouseEvent, useCallback } from 'react';
 import { DataGridCellProps, DataGridColumn } from './types';
+import { MouseEvent, useCallback } from 'react';
 
 import { DataGridEditableCell } from './DataGridEditableCell';
 import { useDataGridContext } from './hooks';
@@ -69,6 +69,7 @@ export const DataGridCell = <R,>({
       onDoubleClick={onDoubleClick}
       style={style}
       $userSelect={userSelect}
+      $color={column.color}
     >
       {(column.render ?? defaultRender)(row, column)}
     </DataGridCellComponent>

package/src/components/data/DataGrid/DataGridFooter.tsx

@@ -18,6 +18,7 @@ export const DataGridFooter = <R,>({
     selectedRows,
     sortedRows,
     selectable,
+    headerColor,
     footers = {},
     gridTemplateColumns,
     footerFunctions,
@@ -34,6 +35,7 @@ export const DataGridFooter = <R,>({
         <styles.DataGridHeaderCellContainer
           key={key}
           style={{ width: (col.width ?? DEFAULT_COLUMN_WIDTH) + 'px' }}
+          $headerColor={col.color ?? headerColor}
         >
           {footerFunctions?.[key]?.(rows, sortedRows, selectedRows)}
         </styles.DataGridHeaderCellContainer>

package/src/components/data/DataGrid/DataGridHeaderCell.tsx

@@ -72,7 +72,7 @@ export const DataGridHeaderCell = <R,>({
 
   return (
     <styles.DataGridHeaderCellContainer
-      $headerColor={headerColor}
+      $headerColor={column.color ?? headerColor}
       $isResizing={isResizing}
     >
       {filterDropdown}

package/src/components/data/DataGrid/DataGridRowTemplate.tsx

@@ -63,6 +63,7 @@ export const DataGridRowTemplate = <R,>({
           columnIndex={index}
           context={context}
           columnKey={key}
+          color={col.color}
         />
       ))}
     </styles.DataGridRow>

package/src/components/data/DataGrid/styles.ts

@@ -7,6 +7,7 @@ import {
 } from './constants';
 import styled, { css } from 'styled-components';
 
+import { DataGridCellFCProps } from './types';
 import { ThemeColor } from '../../../providers/ThemeProvider/types';
 import { VirtualScrollerFiller } from '../VirtualScroller/styles';
 
@@ -108,11 +109,7 @@ export const DataGridHeaderCellContainer = styled.div<DataGridHeaderCellContaine
 `;
 DataGridHeaderCellContainer.displayName = 'DataGridHeaderCellContainer';
 
-type DataGridCellProps = {
-  $userSelect?: boolean;
-};
-
-export const DataGridCell = styled.div<DataGridCellProps>`
+export const DataGridCell = styled.div<DataGridCellFCProps>`
   position: relative;
   padding: 0 var(--space-3);
   overflow: hidden;
@@ -121,6 +118,7 @@ export const DataGridCell = styled.div<DataGridCellProps>`
   white-space: nowrap;
   border-right: 1px solid var(--color-neutral-200);
   border-bottom: 1px solid var(--color-neutral-200);
+  background-color: ${({ $color = 'neutral' }) => `var(--color-${$color}-50)`};
 `;
 DataGridCell.displayName = 'DataGridCell';
 
@@ -318,6 +316,7 @@ SelectionCell.displayName = 'SelectionCell';
 
 export const HeaderSelectionCell = styled(DataGridHeaderCellContainer)`
   ${selectionCellStyle}
+  padding: 0;
 `;
 HeaderSelectionCell.displayName = 'HeaderSelectionCell';
 

package/src/components/data/DataGrid/types.ts

@@ -16,10 +16,14 @@ import {
 import { SettingsContextProps } from '../../../providers/SettingsProvider';
 import { ThemeColor } from '../../../providers/ThemeProvider/types';
 
-export type DataGridCellFC = FC<{
+export type DataGridCellFCProps = {
   onDoubleClick?: MouseEventHandler;
   style?: CSSProperties;
-}>;
+  $color?: ThemeColor;
+  $userSelect?: boolean;
+};
+
+export type DataGridCellFC = FC<DataGridCellFCProps>;
 
 export type DataGridFooterPredefinedFunction =
   | 'average'
@@ -37,6 +41,7 @@ export type DataGridFooterFunction<R> = (
 export type DataGridColumn<R> = {
   component?: DataGridCellFC;
   editable?: boolean;
+  color?: ThemeColor;
   excelFormatter?: (value: any) => string;
   excelBackgroundColor?: (value: any) => string;
   excelValue?: (value: any) => string;
@@ -176,6 +181,7 @@ export type DataGridCellProps<R> = {
   className?: string;
   style?: CSSProperties;
   userSelect?: boolean;
+  color?: ThemeColor;
 };
 
 export type DataGridHeaderCellProps<R> = {
@@ -185,6 +191,7 @@ export type DataGridHeaderCellProps<R> = {
   context: DataGridContext<R>;
   onFilterButtonClicked?: (columnKey: string) => void;
   isFilterOpen?: boolean;
+  color?: ThemeColor;
 };
 
 export type DataGridSort = 'asc' | 'desc';

package/src/components/forms/Form/styles.ts

@@ -1,24 +1,20 @@
 import styled, { css } from 'styled-components';
 
 import { ThemeColorWithIntensity } from '../../../providers/ThemeProvider';
-import { getColor } from '../../../providers/ThemeProvider/helpers';
 
 export const FormGroupContainer = styled.fieldset<{
   color?: ThemeColorWithIntensity;
 }>`
   display: flex;
   flex-direction: column;
-  background: ${({ color = 'neutral-100' }) =>
-    `linear-gradient(180deg, var(--color-${getColor(
-      color
-    )}-200) 0%, var(--color-neutral-100) var(--space-10))`};
+  background: var(--color-neutral-100);
   border-radius: var(--rounded-md);
   box-shadow: var(--shadow-md);
   padding: var(--space-4);
   margin: 0;
   border: 1px solid var(--color-neutral-100);
   gap: var(--space-2);
-  border-left: 4px solid ${({ color = 'neutral' }) => `var(--color-${color})`};
+  border-left: 8px solid ${({ color = 'neutral' }) => `var(--color-${color})`};
 `;
 
 export const FormGroupHeader = styled.div`