@addev-be/ui 0.20.1 → 0.20.2

package/dist/services/updateSqlRequests.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useUpdateSqlRequestHandler = void 0;
+var hooks_1 = require("./hooks");
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+var useUpdateSqlRequestHandler = function (name) { return (0, hooks_1.useWebSocketRequestHandler)(name); };
+exports.useUpdateSqlRequestHandler = useUpdateSqlRequestHandler;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@addev-be/ui",
-  "version": "0.20.1",
+  "version": "0.20.2",
   "type": "module",
   "scripts": {
     "watch": "tsc -b --watch",
@@ -20,7 +20,7 @@
     "update-version": "../../node/update-version.mjs"
   },
   "devDependencies": {
-    "@addev-be/framework-utils": "^0.20.1",
+    "@addev-be/framework-utils": "^0.20.2",
     "@types/lodash": "^4",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",

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

@@ -1,5 +1,5 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
+ 
+ 
 
 import * as styles from './styles';
 
@@ -116,33 +116,33 @@ export const DataGridHeader = <R,>({
       <styles.DataGridToolsRowButtonsContainer>
         <Loading visible={isLoadingVisible} />
         {editable && onSaveClicked && (
-          <Button size="small" $color="primary" onClick={save}>
+          <Button size="small" $color="primary" onClick={save} bordered>
             <FloppyDiskIcon />
             Enregistrer
           </Button>
         )}
         {editable && onAddClicked && (
-          <Button size="small" $color="success" onClick={add}>
+          <Button size="small" $color="success" onClick={add} bordered>
             <PlusIcon />
             Ajouter
           </Button>
         )}
         {
-          <Button size="small" onClick={onRefreshClicked}>
+          <Button size="small" onClick={onRefreshClicked} bordered>
             <ArrowsRotateIcon />
             Rafraîchir
           </Button>
         }
-        <Button $color="emerald" size="small" onClick={runCopyTable}>
+        <Button $color="emerald" size="small" onClick={runCopyTable} bordered>
           <CopyIcon />
           Copier la table
         </Button>
-        <Button size="small" $color="danger" onClick={() => setFilters({})}>
+        <Button size="small" $color="danger" onClick={() => setFilters({})} bordered>
           <FilterSlashIcon />
           Supprimer les filtres
         </Button>
         {name && (
-          <Button $color="info" size="small" onClick={openModal}>
+          <Button $color="info" size="small" onClick={openModal} bordered>
             <TableColumnsIcon />
             Paramètres des colonnes
           </Button>

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

@@ -1,5 +1,4 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
 
 import * as styles from './styles';
 
@@ -95,6 +94,7 @@ export const DataGridHeaderCell = <R,>({
           icon={ChevronDownIcon}
           color={hasFilters ? 'danger' : headerColor}
           onClick={onFilterButtonClicked}
+          bordered
         />
       )}
       {column.resizable !== false && (

package/src/components/data/DataGrid/hooks/useDataGrid.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 import { DEFAULT_COLUMN_WIDTH, SELECTION_CELL_WIDTH } from '../constants';
@@ -341,7 +340,7 @@ export const useDataGrid = <R,>(
         rows: [],
         columns: [],
         visibleColumns: [],
-        rowKey: '' as keyof R,
+        rowKey: '',
         rowKeyGetter: () => '',
         sortedRows: [],
         selectedRows: [],

package/src/components/data/SqlRequestGrid/index.tsx

@@ -31,7 +31,6 @@ import { convertSqlFiltersToConditions } from './helpers';
 import { isColumnVisible } from '../DataGrid/helpers';
 import { useDataGrid } from '../DataGrid/hooks';
 
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export const SqlRequestGridInner = <R, P extends object = {}>(
   allProps: SqlRequestGridProps<R, P>,
   ref: ForwardedRef<SqlRequestGridRefProps>
@@ -256,7 +255,7 @@ export const SqlRequestGridInner = <R, P extends object = {}>(
     onSelectionChange: () => {},
     onSelectedRowsChanged: () => {},
     selectable: false,
-    rowKey: () => '',
+    rowKey: '',
     filter: false,
     sort: false,
   });

package/src/components/ui/Avatar/styles.ts

@@ -1,61 +1,61 @@
-import styled, { css } from 'styled-components';
-
-export type AvatarContainerProps = {
-  size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-};
-
-const stylesMap: Record<
-  AvatarContainerProps['size'],
-  ReturnType<typeof css>
-> = {
-  xs: css`
-    width: var(--size-6);
-    height: var(--size-6);
-    min-width: var(--size-6);
-    min-height: var(--size-6);
-    font-size: var(--text-xs);
-    line-height: var(--text-xs);
-  `,
-  sm: css`
-    width: var(--size-8);
-    height: var(--size-8);
-    min-width: var(--size-8);
-    min-height: var(--size-8);
-    font-size: var(--text-sm);
-    line-height: var(--text-sm);
-  `,
-  md: css`
-    width: var(--size-10);
-    height: var(--size-10);
-    min-width: var(--size-10);
-    min-height: var(--size-10);
-    font-size: var(--text-md);
-    line-height: var(--text-md);
-  `,
-  lg: css`
-    width: var(--size-12);
-    height: var(--size-12);
-    min-width: var(--size-12);
-    min-height: var(--size-12);
-    font-size: var(--text-lg);
-    line-height: var(--text-lg);
-  `,
-  xl: css`
-    width: var(--size-14);
-    height: var(--size-14);
-    min-width: var(--size-14);
-    min-height: var(--size-14);
-    font-size: var(--text-2xl);
-    line-height: var(--text-2xl);
-  `,
-};
-
-export const AvatarContainer = styled.div<AvatarContainerProps>`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--rounded-full);
-  user-select: none;
-
-  ${({ size }) => stylesMap[size]}
-`;
+import styled, { css } from 'styled-components';
+
+export type AvatarContainerProps = {
+  size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+};
+
+const stylesMap: Record<
+  AvatarContainerProps['size'],
+  ReturnType<typeof css>
+> = {
+  xs: css`
+    width: var(--size-6);
+    height: var(--size-6);
+    min-width: var(--size-6);
+    min-height: var(--size-6);
+    font-size: var(--text-xs);
+    line-height: var(--text-xs);
+  `,
+  sm: css`
+    width: var(--size-8);
+    height: var(--size-8);
+    min-width: var(--size-8);
+    min-height: var(--size-8);
+    font-size: var(--text-sm);
+    line-height: var(--text-sm);
+  `,
+  md: css`
+    width: var(--size-10);
+    height: var(--size-10);
+    min-width: var(--size-10);
+    min-height: var(--size-10);
+    font-size: var(--text-md);
+    line-height: var(--text-md);
+  `,
+  lg: css`
+    width: var(--size-12);
+    height: var(--size-12);
+    min-width: var(--size-12);
+    min-height: var(--size-12);
+    font-size: var(--text-lg);
+    line-height: var(--text-lg);
+  `,
+  xl: css`
+    width: var(--size-14);
+    height: var(--size-14);
+    min-width: var(--size-14);
+    min-height: var(--size-14);
+    font-size: var(--text-2xl);
+    line-height: var(--text-2xl);
+  `,
+};
+
+export const AvatarContainer = styled.div<AvatarContainerProps>`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--rounded-full);
+  user-select: none;
+
+  ${({ size }) => stylesMap[size]}
+`;

package/src/components/ui/Label.tsx

@@ -1,90 +1,90 @@
-import { ComponentProps, forwardRef } from 'react';
-import styled, { css } from 'styled-components';
-
-import { ThemeColor } from '../../providers/ThemeProvider/types';
-
-export const StyledLabel = styled.span.withConfig({
-  shouldForwardProp: () => true,
-})<LabelProps>`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-family: var(--font-sans);
-  font-weight: 500;
-
-  ${({ color }) =>
-    color
-      ? css`
-          background-color: var(--color-${color}-100);
-          color: var(--color-${color}-700);
-          svg {
-            fill: var(--color-${color}-700);
-          }
-        `
-      : css`
-          background-color: var(--color-neutral-100);
-          color: var(--color-neutral-700);
-          svg {
-            fill: var(--color-neutral-700);
-          }
-        `}
-
-  ${({ bordered, color }) =>
-    bordered
-      ? css`
-          border: 1px solid
-            ${color ? `var(--color-${color}-200)` : 'var(--color-neutral-200)'};
-        `
-      : 'border: none;'}
-
-  ${({ rounded }) => rounded && 'border-radius: var(--rounded-full);'}
-
-  &.small {
-    padding: var(--space-0_5) var(--space-1_5);
-    font-size: var(--text-xs);
-    border-radius: var(--rounded-sm);
-    svg {
-      margin-right: var(--space-1);
-      width: var(--space-3);
-      height: var(--space-3);
-    }
-  }
-
-  &.medium {
-    padding: var(--space-1) var(--space-2);
-    font-size: var(--text-sm);
-    border-radius: var(--rounded-md);
-    svg {
-      margin-right: var(--space-1);
-      width: var(--space-3_5);
-      height: var(--space-3_5);
-    }
-  }
-
-  &.large {
-    padding: var(--space-1_5) var(--space-2_5);
-    font-size: var(--text-base);
-    border-radius: var(--rounded-lg);
-    svg {
-      margin-right: var(--space-1_5);
-      width: var(--space-4);
-      height: var(--space-4);
-    }
-  }
-`;
-
-export type LabelProps = {
-  color?: ThemeColor;
-  size?: 'small' | 'medium' | 'large';
-  rounded?: boolean;
-  bordered?: boolean;
-};
-
-export const Label = forwardRef<
-  HTMLSpanElement,
-  ComponentProps<typeof StyledLabel> & LabelProps
->(({ children, size = 'medium', className = '', ...props }, ref) => (
-  <StyledLabel ref={ref} className={`${size} ${className}`} {...props}>
-    {children}
-  </StyledLabel>
-));
+import { ComponentProps, forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+
+import { ThemeColor } from '../../providers/ThemeProvider/types';
+
+export const StyledLabel = styled.span.withConfig({
+  shouldForwardProp: () => true,
+})<LabelProps>`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--font-sans);
+  font-weight: 500;
+
+  ${({ color }) =>
+    color
+      ? css`
+          background-color: var(--color-${color}-100);
+          color: var(--color-${color}-700);
+          svg {
+            fill: var(--color-${color}-700);
+          }
+        `
+      : css`
+          background-color: var(--color-neutral-100);
+          color: var(--color-neutral-700);
+          svg {
+            fill: var(--color-neutral-700);
+          }
+        `}
+
+  ${({ bordered, color }) =>
+    bordered
+      ? css`
+          border: 1px solid
+            ${color ? `var(--color-${color}-200)` : 'var(--color-neutral-200)'};
+        `
+      : 'border: none;'}
+
+  ${({ rounded }) => rounded && 'border-radius: var(--rounded-full);'}
+
+  &.small {
+    padding: var(--space-0_5) var(--space-1_5);
+    font-size: var(--text-xs);
+    border-radius: var(--rounded-sm);
+    svg {
+      margin-right: var(--space-1);
+      width: var(--space-3);
+      height: var(--space-3);
+    }
+  }
+
+  &.medium {
+    padding: var(--space-1) var(--space-2);
+    font-size: var(--text-sm);
+    border-radius: var(--rounded-md);
+    svg {
+      margin-right: var(--space-1);
+      width: var(--space-3_5);
+      height: var(--space-3_5);
+    }
+  }
+
+  &.large {
+    padding: var(--space-1_5) var(--space-2_5);
+    font-size: var(--text-base);
+    border-radius: var(--rounded-lg);
+    svg {
+      margin-right: var(--space-1_5);
+      width: var(--space-4);
+      height: var(--space-4);
+    }
+  }
+`;
+
+export type LabelProps = {
+  color?: ThemeColor;
+  size?: 'small' | 'medium' | 'large';
+  rounded?: boolean;
+  bordered?: boolean;
+};
+
+export const Label = forwardRef<
+  HTMLSpanElement,
+  ComponentProps<typeof StyledLabel> & LabelProps
+>(({ children, size = 'medium', className = '', ...props }, ref) => (
+  <StyledLabel ref={ref} className={`${size} ${className}`} {...props}>
+    {children}
+  </StyledLabel>
+));

package/src/components/ui/Tab/index.tsx

@@ -0,0 +1,33 @@
+import { FC, useState } from 'react';
+import {
+  TabContainer,
+  TabContentContainer,
+  TabListContainer,
+  TabViewContainer,
+} from './styles';
+
+import { TabProps } from './types';
+
+export const TabView: FC<TabProps> = ({ tabs }) => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const activeTab = tabs[activeIndex];
+
+  return (
+    <TabViewContainer>
+      <TabListContainer>
+        {tabs.map((tab, index) => (
+          <TabContainer
+            key={index}
+            $color={tab.color}
+            $isActive={activeIndex === index}
+            onClick={() => setActiveIndex(index)}
+          >
+            {tab.icon ? <tab.icon /> : null}
+            {tab.tabName}
+          </TabContainer>
+        ))}
+      </TabListContainer>
+      <TabContentContainer>{activeTab.content}</TabContentContainer>
+    </TabViewContainer>
+  );
+};

package/src/components/ui/Tab/styles.ts

@@ -0,0 +1,61 @@
+import { ThemeColor, ThemeColorWithIntensity } from '../../../providers';
+import styled, { css } from 'styled-components';
+
+import { getColorWithIntensity } from '../../../providers/ThemeProvider/helpers';
+
+export const TabViewContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+`;
+
+export const TabListContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex-shrink: 0;
+  justify-content: flex-start;
+  gap: var(--space-2);
+  overflow-x: scroll;
+  scrollbar-width: none;
+  padding: var(--space-2) var(--space-2);
+  font-size: var(--text-base);
+`;
+
+export const TabContainer = styled.div<{
+  $color?: ThemeColorWithIntensity | ThemeColor;
+  $isActive?: boolean;
+}>`
+  display: flex;
+  align-items: center;
+  height: var(--space-8);
+  gap: var(--space-2);
+  cursor: pointer;
+  padding: 0 var(--space-2);
+
+  ${({ $color = 'primary' }) => css`
+    &:hover {
+      color: var(--color-${getColorWithIntensity($color, 500)});
+      fill: var(--color-${getColorWithIntensity($color, 500)});
+    }
+    svg {
+      height: var(--space-4);
+      width: var(--space-4);
+    }
+  `};
+
+  ${({ $isActive, $color = 'primary' }) =>
+    $isActive &&
+    css`
+      border-bottom: var(--space-0_5) solid;
+      color: var(--color-${getColorWithIntensity($color, 500)});
+      fill: var(--color-${getColorWithIntensity($color, 500)});
+    `}
+`;
+
+export const TabContentContainer = styled.div<{
+  $isActive?: boolean;
+}>`
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+`;

package/src/components/ui/Tab/types.ts

@@ -0,0 +1,16 @@
+import { ThemeColor, ThemeColorWithIntensity } from '../../../providers';
+
+import { IconFC } from '../../../Icons';
+import { ReactNode } from 'react';
+
+export type Tab = {
+  color?: ThemeColorWithIntensity | ThemeColor;
+  content: ReactNode;
+  icon?: IconFC;
+  key?: string;
+  tabName: string;
+};
+
+export type TabProps = {
+  tabs: Tab[];
+};

package/src/components/ui/index.ts

@@ -4,3 +4,4 @@ export * from './ContextMenu';
 export * from './Ellipsis';
 export * from './Label';
 export * from './Message';
+export * from './Tab';

package/src/helpers/styled/index.ts

@@ -1 +1 @@
-export * from './space';
+export * from './space';

package/src/helpers/styled/space.ts

@@ -1,55 +1,55 @@
-import { ThemeSpace } from '../../providers';
-import { css } from 'styled-components';
-
-export type MarginProps = {
-  m?: ThemeSpace;
-  mx?: ThemeSpace;
-  my?: ThemeSpace;
-  mt?: ThemeSpace;
-  mr?: ThemeSpace;
-  mb?: ThemeSpace;
-  ml?: ThemeSpace;
-};
-
-export const margins = css<MarginProps>`
-  ${({ m }) => m && `margin: var(--space-${m});`}
-  ${({ mx }) =>
-    mx && `margin-left: var(--space-${mx}); margin-right: var(--space-${mx});`}
-  ${({ my }) =>
-    my && `margin-top: var(--space-${my}); margin-bottom: var(--space-${my});`}
-  ${({ mt }) => mt && `margin-top: var(--space-${mt});`}
-  ${({ mr }) => mr && `margin-right: var(--space-${mr});`}
-  ${({ mb }) => mb && `margin-bottom: var(--space-${mb});`}
-  ${({ ml }) => ml && `margin-left: var(--space-${ml});`}
-`;
-
-export type PaddingProps = {
-  p?: ThemeSpace;
-  px?: ThemeSpace;
-  py?: ThemeSpace;
-  pt?: ThemeSpace;
-  pr?: ThemeSpace;
-  pb?: ThemeSpace;
-  pl?: ThemeSpace;
-};
-
-export const paddings = css<PaddingProps>`
-  ${({ p }) => p && `padding: var(--space-${p});`}
-  ${({ px }) =>
-    px &&
-    `padding-left: var(--space-${px}); padding-right: var(--space-${px});`}
-  ${({ py }) =>
-    py &&
-    `padding-top: var(--space-${py}); padding-bottom: var(--space-${py});`}
-  ${({ pt }) => pt && `padding-top: var(--space-${pt});`}
-  ${({ pr }) => pr && `padding-right: var(--space-${pr});`}
-  ${({ pb }) => pb && `padding-bottom: var(--space-${pb});`}
-  ${({ pl }) => pl && `padding-left: var(--space-${pl});`}
-`;
-
-export type SpaceProps = MarginProps & PaddingProps;
-
-export const space = css<SpaceProps>`
-  ${margins}
-  ${paddings}
-`;
+import { ThemeSpace } from '../../providers';
+import { css } from 'styled-components';
+
+export type MarginProps = {
+  m?: ThemeSpace;
+  mx?: ThemeSpace;
+  my?: ThemeSpace;
+  mt?: ThemeSpace;
+  mr?: ThemeSpace;
+  mb?: ThemeSpace;
+  ml?: ThemeSpace;
+};
+
+export const margins = css<MarginProps>`
+  ${({ m }) => m && `margin: var(--space-${m});`}
+  ${({ mx }) =>
+    mx && `margin-left: var(--space-${mx}); margin-right: var(--space-${mx});`}
+  ${({ my }) =>
+    my && `margin-top: var(--space-${my}); margin-bottom: var(--space-${my});`}
+  ${({ mt }) => mt && `margin-top: var(--space-${mt});`}
+  ${({ mr }) => mr && `margin-right: var(--space-${mr});`}
+  ${({ mb }) => mb && `margin-bottom: var(--space-${mb});`}
+  ${({ ml }) => ml && `margin-left: var(--space-${ml});`}
+`;
+
+export type PaddingProps = {
+  p?: ThemeSpace;
+  px?: ThemeSpace;
+  py?: ThemeSpace;
+  pt?: ThemeSpace;
+  pr?: ThemeSpace;
+  pb?: ThemeSpace;
+  pl?: ThemeSpace;
+};
+
+export const paddings = css<PaddingProps>`
+  ${({ p }) => p && `padding: var(--space-${p});`}
+  ${({ px }) =>
+    px &&
+    `padding-left: var(--space-${px}); padding-right: var(--space-${px});`}
+  ${({ py }) =>
+    py &&
+    `padding-top: var(--space-${py}); padding-bottom: var(--space-${py});`}
+  ${({ pt }) => pt && `padding-top: var(--space-${pt});`}
+  ${({ pr }) => pr && `padding-right: var(--space-${pr});`}
+  ${({ pb }) => pb && `padding-bottom: var(--space-${pb});`}
+  ${({ pl }) => pl && `padding-left: var(--space-${pl});`}
+`;
+
+export type SpaceProps = MarginProps & PaddingProps;
+
+export const space = css<SpaceProps>`
+  ${margins}
+  ${paddings}
+`;