@addev-be/ui 0.10.0 → 0.10.4

package/assets/icons/angle-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M47 239c-9.4 9.4-9.4 24.6 0 33.9L207 433c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9L97.9 256 241 113c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0L47 239z"/></svg>

package/assets/icons/angle-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M273 239c9.4 9.4 9.4 24.6 0 33.9L113 433c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l143-143L79 113c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L273 239z"/></svg>

package/assets/icons/chevron-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M15 239c-9.4 9.4-9.4 24.6 0 33.9L207 465c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9L65.9 256 241 81c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0L15 239z"/></svg>

package/assets/icons/chevron-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M305 239c9.4 9.4 9.4 24.6 0 33.9L113 465c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l175-175L79 81c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L305 239z"/></svg>

package/assets/icons/xmark-large.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M41 39C31.6 29.7 16.4 29.7 7 39S-2.3 63.6 7 73l183 183L7 439c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l183-183L407 473c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-183-183L441 73c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-183 183L41 39z"/></svg>

package/assets/icons/xmark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M345 137c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-119 119L73 103c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l119 119L39 375c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l119-119L311 409c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-119-119L345 137z"/></svg>

package/package.json

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

package/src/Icons.tsx

@@ -1,5 +1,7 @@
 import { FC, SVGProps, useEffect, useState } from 'react';
 
+import AngleLeftIcon from '../assets/icons/angle-left.svg?react';
+import AngleRightIcon from '../assets/icons/angle-right.svg?react';
 import ArrowDown19Icon from '../assets/icons/arrow-down-1-9.svg?react';
 import ArrowDownAZIcon from '../assets/icons/arrow-down-a-z.svg?react';
 import ArrowDownBigSmallIcon from '../assets/icons/arrow-down-big-small.svg?react';
@@ -10,6 +12,8 @@ import ArrowsRotateIcon from '../assets/icons/arrows-rotate.svg?react';
 import ArrowsUpDownIcon from '../assets/icons/arrows-up-down.svg?react';
 import CheckIcon from '../assets/icons/check.svg?react';
 import ChevronDownIcon from '../assets/icons/chevron-down.svg?react';
+import ChevronLeftIcon from '../assets/icons/chevron-left.svg?react';
+import ChevronRightIcon from '../assets/icons/chevron-right.svg?react';
 import CircleCheckIcon from '../assets/icons/circle-check.svg?react';
 import CircleInfoIcon from '../assets/icons/circle-info.svg?react';
 import CircleXMarkIcon from '../assets/icons/circle-xmark.svg?react';
@@ -39,6 +43,8 @@ import TriangleExclamationIcon from '../assets/icons/triangle-exclamation.svg?re
 import UpIcon from '../assets/icons/up.svg?react';
 import UserTieIcon from '../assets/icons/user-tie.svg?react';
 import XBarIcon from '../assets/icons/x-bar.svg?react';
+import XMarkIcon from '../assets/icons/xmark.svg?react';
+import XMarkLargeIcon from '../assets/icons/xmark-large.svg?react';
 
 type IconFCProps = SVGProps<SVGSVGElement>;
 export type IconFC = FC<IconFCProps>;
@@ -74,6 +80,8 @@ export const LoadingIcon: FC<IconFCProps> = ({ className, ...props }) => (
 );
 
 export {
+  AngleLeftIcon,
+  AngleRightIcon,
   ArrowDown19Icon,
   ArrowDownAZIcon,
   ArrowDownBigSmallIcon,
@@ -84,6 +92,10 @@ export {
   ArrowUpZAIcon,
   CheckIcon,
   ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  CircleCheckIcon,
+  CircleInfoIcon,
   CircleXMarkIcon,
   CopyIcon,
   DownIcon,
@@ -107,10 +119,10 @@ export {
   TableFooterSlashIcon,
   TableIcon,
   TallyIcon,
+  TriangleExclamationIcon,
   UpIcon,
   UserTieIcon,
   XBarIcon,
-  CircleCheckIcon,
-  CircleInfoIcon,
-  TriangleExclamationIcon,
+  XMarkIcon,
+  XMarkLargeIcon,
 };

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

@@ -6,12 +6,12 @@ import * as styles from './styles';
 import { MouseEvent, useCallback, useMemo, useRef, useState } from 'react';
 
 import { ChevronDownIcon } from '../../../Icons';
-import { DataGridFilterMenu } from './DataGridFilterMenu';
-import { DataGridHeaderCellProps } from './types';
-import { Dropdown } from '../../layout';
+import { useUi } from '../../../providers';
 import { IconButton } from '../../forms/IconButton';
+import { Dropdown } from '../../layout';
+import { DataGridFilterMenu } from './DataGridFilterMenu';
 import { useDataGridContext } from './hooks';
-import { useUi } from '../../../providers';
+import { DataGridHeaderCellProps } from './types';
 
 export const DataGridHeaderCell = <R,>({
   columnKey,
@@ -108,7 +108,7 @@ export const DataGridHeaderCell = <R,>({
           className={hasFilters ? 'danger' : ''}
           ref={filterButtonRef}
           icon={ChevronDownIcon}
-          $color={hasFilters ? 'danger' : headerColor}
+          color={hasFilters ? 'danger' : headerColor}
           onClick={onFilterButtonClicked}
         />
       )}

package/src/components/data/SqlRequestGrid/filters/FiltersSidebar.tsx

@@ -1,10 +1,10 @@
 import * as styles from './styles';
 
 import {
-  CircleXMarkIcon,
+  AngleLeftIcon,
+  AngleRightIcon,
   FilterSlashIcon,
-  LeftIcon,
-  RightIcon,
+  XMarkIcon,
 } from '../../../../Icons';
 import { MouseEvent, useCallback, useState } from 'react';
 
@@ -48,15 +48,17 @@ export const FiltersSidebar = <R, P extends object = {}>({
             <styles.FiltersSidebarHeader>
               <IconButton
                 rounded
-                icon={LeftIcon}
-                color="secondary"
+                bordered={false}
+                icon={AngleLeftIcon}
+                color="neutral"
                 onClick={() => onFilterClick(null)}
               />
               <h3>{column.name}</h3>
               <IconButton
                 rounded
-                icon={CircleXMarkIcon}
-                color="secondary"
+                bordered={false}
+                icon={XMarkIcon}
+                color="neutral"
                 onClick={onClose}
               />
             </styles.FiltersSidebarHeader>
@@ -74,14 +76,16 @@ export const FiltersSidebar = <R, P extends object = {}>({
               <h3>Filtres</h3>
               <IconButton
                 rounded
+                bordered={false}
                 icon={FilterSlashIcon}
                 color="danger"
                 onClick={onClearFilters}
               />
               <IconButton
                 rounded
-                icon={CircleXMarkIcon}
-                color="secondary"
+                bordered={false}
+                icon={XMarkIcon}
+                color="neutral"
                 onClick={onClose}
               />
             </styles.FiltersSidebarHeader>
@@ -91,7 +95,7 @@ export const FiltersSidebar = <R, P extends object = {}>({
                 onClick={() => onFilterClick(key)}
               >
                 {field.name}
-                <RightIcon />
+                <AngleRightIcon />
               </styles.FiltersSidebarFilter>
             ))}
           </>

package/src/components/data/SqlRequestGrid/filters/styles.ts

@@ -40,6 +40,11 @@ export const FiltersSidebarContainer = styled.div`
 `;
 
 export const FiltersSidebarHeader = styled.div`
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background-color: var(--color-neutral-50);
+
   display: flex;
   justify-content: space-between;
   align-items: center;

package/src/components/forms/Button.tsx

@@ -7,6 +7,7 @@ import { ThemeColor } from '../../providers/ThemeProvider/types';
 type StyledButtonProps = {
   $color?: ThemeColor;
   $rounded?: boolean;
+  $bordered?: boolean;
 };
 
 export const StyledButton = styled.button.withConfig({
@@ -22,14 +23,18 @@ export const StyledButton = styled.button.withConfig({
   font-family: var(--font-sans);
   cursor: pointer;
 
-  ${({ $color }) =>
+  ${({ $color, $bordered = true }) =>
     $color
       ? css`
           background-color: var(--color-${$color}-400);
-          border: 1px solid var(--color-${$color}-500);
+          border: ${$bordered
+            ? `1px solid var(--color-${$color}-500)`
+            : 'none'};
           &:hover {
             background-color: var(--color-${$color}-300);
-            border: 1px solid var(--color-${$color}-400);
+            border: ${$bordered
+              ? `1px solid var(--color-${$color}-400)`
+              : 'none'};
           }
           color: var(--color-${$color}-950);
           svg {
@@ -38,10 +43,12 @@ export const StyledButton = styled.button.withConfig({
         `
       : css`
           background-color: var(--color-neutral-100);
-          border: 1px solid var(--color-neutral-300);
+          border: ${$bordered ? `1px solid var(--color-neutral-300)` : 'none'};
           &:hover {
             background-color: var(--color-neutral-200);
-            border: 1px solid var(--color-neutral-400);
+            border: ${$bordered
+              ? `1px solid var(--color-neutral-400)`
+              : 'none'};
           }
           color: var(--color-neutral-900);
           svg {
@@ -91,6 +98,7 @@ export type ButtonProps = {
   size?: 'small' | 'medium' | 'large';
   icon?: IconFC;
   rounded?: boolean;
+  bordered?: boolean;
 };
 
 export const Button = forwardRef<
@@ -104,7 +112,8 @@ export const Button = forwardRef<
       icon: Icon,
       className,
       rounded = false,
-      color = 'secondary',
+      color = 'neutral',
+      bordered = true,
       ...props
     },
     ref
@@ -114,6 +123,7 @@ export const Button = forwardRef<
       className={`${size} ${className}`}
       $color={color}
       $rounded={rounded}
+      $bordered={bordered}
       {...props}
     >
       {Icon && <Icon />}

package/src/components/forms/IconButton.tsx

@@ -2,11 +2,12 @@ import { Button, ButtonProps } from './Button';
 import { ButtonHTMLAttributes, forwardRef } from 'react';
 
 import { IconFC } from '../../Icons';
+import { ThemeSize } from '../../providers';
 import styled from 'styled-components';
 
 type IconButtonProps = ButtonProps & {
   icon: IconFC;
-  $iconSize?: string;
+  $iconSize?: ThemeSize;
 };
 
 const styles = {
@@ -19,8 +20,8 @@ const styles = {
       width: var(--space-6);
       svg {
         margin-right: 0;
-        width: ${({ $iconSize = 'var(--space-4)' }) => $iconSize};
-        height: ${({ $iconSize = 'var(--space-4)' }) => $iconSize};
+        width: ${({ $iconSize = '5' }) => `var(--space-${$iconSize})`};
+        height: ${({ $iconSize = '5' }) => `var(--space-${$iconSize})`};
       }
     }
     &.medium {
@@ -29,8 +30,8 @@ const styles = {
       width: var(--space-8);
       svg {
         margin-right: 0;
-        width: ${({ $iconSize = 'var(--space-5)' }) => $iconSize};
-        height: ${({ $iconSize = 'var(--space-5)' }) => $iconSize};
+        width: ${({ $iconSize = '6' }) => `var(--space-${$iconSize})`};
+        height: ${({ $iconSize = '6' }) => `var(--space-${$iconSize})`};
       }
     }
     &.large {
@@ -39,8 +40,8 @@ const styles = {
       width: var(--space-10);
       svg {
         margin-right: 0;
-        width: ${({ $iconSize = 'var(--space-6)' }) => $iconSize};
-        height: ${({ $iconSize = 'var(--space-6)' }) => $iconSize};
+        width: ${({ $iconSize = '8' }) => `var(--space-${$iconSize})`};
+        height: ${({ $iconSize = '8' }) => `var(--space-${$iconSize})`};
       }
     }
   `,