@addev-be/ui 0.2.16 → 0.2.18

package/eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

package/package.json

@@ -1,34 +1,19 @@
 {
   "name": "@addev-be/ui",
-  "version": "0.2.16",
+  "version": "0.2.18",
   "type": "module",
   "scripts": {
     "watch": "tsc -b --watch",
     "build": "tsc -b",
-    "build:vite": "vite build",
     "lint": "eslint .",
     "publish": "yarn npm publish"
   },
   "types": "src/index.ts",
   "exports": {
     ".": {
-      "types": "./src/index.d.ts",
-      "import": "./src/index.js"
+      "import": "./src/index.ts"
     }
   },
-  "files": [
-    "dist",
-    "assets"
-  ],
-  "dependencies": {
-    "fp-ts": "^2.16.9",
-    "io-ts": "^2.2.21",
-    "lodash": "^4.17.21",
-    "moment": "^2.30.1",
-    "styled-components": "^6.1.13",
-    "uuid": "^10.0.0",
-    "vite-plugin-svgr": "^4.2.0"
-  },
   "devDependencies": {
     "@eslint/js": "^8.57.0",
     "@types/lodash": "^4",
@@ -47,11 +32,19 @@
     "eslint-plugin-react-refresh": "^0.4.9",
     "globals": "^15.9.0",
     "typescript": "^5.5.3",
-    "typescript-eslint": "^8.6.0",
-    "vite": "^5.4.10"
+    "typescript-eslint": "^8.6.0"
   },
   "peerDependencies": {
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "styled-components": "^6.1.13",
+    "vite-plugin-svgr": "^4.2.0"
+  },
+  "dependencies": {
+    "fp-ts": "^2.16.9",
+    "io-ts": "^2.2.21",
+    "lodash": "^4.17.21",
+    "moment": "^2.30.1",
+    "uuid": "^10.0.0"
   }
 }

package/src/Icons.tsx

@@ -0,0 +1,108 @@
+import { FC, SVGProps, useEffect, useState } from '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';
+import ArrowUp91Icon from '../assets/icons/arrow-up-9-1.svg?react';
+import ArrowUpBigSmallIcon from '../assets/icons/arrow-up-big-small.svg?react';
+import ArrowUpZAIcon from '../assets/icons/arrow-up-z-a.svg?react';
+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 CopyIcon from '../assets/icons/copy.svg?react';
+import DownIcon from '../assets/icons/down.svg?react';
+import EllipsisIcon from '../assets/icons/ellipsis.svg?react';
+import FilterFullIcon from '../assets/icons/filter-full.svg?react';
+import FilterIcon from '../assets/icons/filter.svg?react';
+import FilterSlashIcon from '../assets/icons/filter-slash.svg?react';
+import HashtagIcon from '../assets/icons/hashtag.svg?react';
+import ImageSlashIcon from '../assets/icons/image-slash.svg?react';
+import LeftIcon from '../assets/icons/left.svg?react';
+import MagnifierIcon from '../assets/icons/magnifier.svg?react';
+import PhoneIcon from '../assets/icons/phone.svg?react';
+import PlusIcon from '../assets/icons/plus.svg?react';
+import RightIcon from '../assets/icons/right.svg?react';
+import SigmaIcon from '../assets/icons/sigma.svg?react';
+import SortCalendarAscendingIcon from '../assets/icons/sort-calendar-ascending.svg?react';
+import SortCalendarDescendingIcon from '../assets/icons/sort-calendar-descending.svg?react';
+import SpinnerIcon from '../assets/icons/spinner-third.svg?react';
+import TableColumnsIcon from '../assets/icons/table-columns.svg?react';
+import TableFooterIcon from '../assets/icons/table-footer.svg?react';
+import TableFooterSlashIcon from '../assets/icons/table-footer-slash.svg?react';
+import TableIcon from '../assets/icons/table.svg?react';
+import TallyIcon from '../assets/icons/tally.svg?react';
+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';
+
+type IconFCProps = SVGProps<SVGSVGElement>;
+export type IconFC = FC<IconFCProps>;
+
+type AnimatedIconProps = {
+  icons: FC[];
+  speed?: number;
+};
+
+export const AnimatedIcon: FC<AnimatedIconProps & IconFCProps> = ({
+  icons,
+  speed = 150,
+  ...props
+}) => {
+  const [currentIcon, setCurrentIcon] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentIcon((currentIcon) => (currentIcon + 1) % icons.length);
+    }, speed);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [icons.length, speed]);
+
+  const Icon = icons[currentIcon];
+  return <Icon {...props} />;
+};
+
+export const LoadingIcon: FC<IconFCProps> = ({ className, ...props }) => (
+  <SpinnerIcon className={`animate-spin ${className}`} {...props} />
+);
+
+export {
+  ArrowDownAZIcon,
+  ArrowDown19Icon,
+  ArrowDownBigSmallIcon,
+  ArrowUpZAIcon,
+  ArrowUpBigSmallIcon,
+  ArrowUp91Icon,
+  ArrowsRotateIcon,
+  ArrowsUpDownIcon,
+  CheckIcon,
+  ChevronDownIcon,
+  CopyIcon,
+  DownIcon,
+  EllipsisIcon,
+  FilterFullIcon,
+  FilterIcon,
+  FilterSlashIcon,
+  HashtagIcon,
+  ImageSlashIcon,
+  LeftIcon,
+  MagnifierIcon,
+  PhoneIcon,
+  PlusIcon,
+  RightIcon,
+  SigmaIcon,
+  SortCalendarAscendingIcon,
+  SortCalendarDescendingIcon,
+  SpinnerIcon,
+  TableColumnsIcon,
+  TableFooterIcon,
+  TableFooterSlashIcon,
+  TableIcon,
+  TallyIcon,
+  UpIcon,
+  UserTieIcon,
+  XBarIcon,
+};

package/src/components/data/AdvancedRequestDataGrid/helpers/advancedRequests.ts

@@ -0,0 +1,93 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import {
+  AdvancedRequestDTO,
+  ConditionDTO,
+  FieldDTO,
+  OrderByDTO,
+} from '../../../../services/advancedRequests';
+import {
+  AdvancedRequestDataGridColumns,
+  AdvancedRequestDataGridFilters,
+} from '../types';
+
+import _ from 'lodash';
+
+export const getAdvancedRequestDto = <R>({
+  type,
+  columns,
+  conditions = [],
+  orderBy = [],
+  start = 0,
+  length = 100,
+  getTotal = false,
+  idField = { fieldName: 'Id' },
+}: {
+  type: string;
+  columns: AdvancedRequestDataGridColumns<R>;
+  conditions?: ConditionDTO[];
+  orderBy?: OrderByDTO[];
+  start?: number;
+  length?: number;
+  getTotal?: boolean;
+  idField?: FieldDTO | null;
+}): AdvancedRequestDTO => ({
+  fields: [
+    ...(idField === null ? [] : [idField]),
+    ...Object.keys(columns).map((key) =>
+      columns[key].field
+        ? {
+            ...columns[key].field,
+            fieldName: columns[key].field?.fieldName ?? key,
+            fieldAlias: key,
+          }
+        : {
+            fieldName: key,
+            fieldAlias: key,
+          }
+    ),
+  ],
+  conditions,
+  orderBy,
+  type,
+  start,
+  length,
+  getTotal,
+});
+
+export const convertFiltersToConditions = <R>(
+  filters: AdvancedRequestDataGridFilters,
+  columns: AdvancedRequestDataGridColumns<R>
+): Record<string, ConditionDTO> =>
+  _.mapValues(filters, (filter, columnKey) => ({
+    field:
+      columns[columnKey].filterField ??
+      columns[columnKey].field?.fieldAlias ??
+      columns[columnKey].field?.fieldName ??
+      columnKey,
+    operator: filter.operator,
+    value: ['inArray', 'inRange'].includes(filter.operator)
+      ? filter.values
+      : _.castArray<string | number | null>(filter.values)[0],
+  }));
+
+export const parseJsonObjectFields = <R>(
+  rows: any[],
+  columns: AdvancedRequestDataGridColumns<R>,
+  parser?: (row: any) => R
+): R[] => {
+  const jsonColumns = Object.keys(columns).filter(
+    (key) => columns[key].field?.operator === 'jsonObject'
+  );
+  const parsedRows =
+    jsonColumns.length === 0
+      ? rows
+      : rows.map((row) => {
+          const parsedRow = { ...row };
+          jsonColumns.forEach((key) => {
+            parsedRow[key] = JSON.parse(parsedRow[key] ?? '{}');
+          });
+          return parsedRow;
+        });
+  return parser ? parsedRows.map(parser) : parsedRows;
+};

package/src/components/data/AdvancedRequestDataGrid/helpers/columns.tsx

@@ -0,0 +1,262 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import {
+  AdvancedRequestDataGridColumn,
+  AdvancedRequestDataGridColumns,
+} from '../types';
+import {
+  formatMoney,
+  formatNumber,
+  formatPercentage,
+} from '../../../../helpers/numbers';
+import { numberFilter, textFilter } from '../../DataGrid/helpers';
+
+import { FieldDTO } from '../../../../services/advancedRequests';
+import _ from 'lodash';
+import moment from 'moment';
+
+export const withGroupBy = <R extends Record<string, any>>(
+  columns: AdvancedRequestDataGridColumns<R>
+): AdvancedRequestDataGridColumns<R> =>
+  _.mapValues(columns, (column, key) => ({
+    ...column,
+    field: {
+      ...(column.field ?? { fieldName: key }),
+      groupBy: true,
+    },
+  }));
+
+export const advancedTextColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<AdvancedRequestDataGridColumn<R>>
+): AdvancedRequestDataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => row[key] ?? '',
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
+    ...options,
+  },
+});
+
+/**
+ * Creates a column with a composed value from multiple fields,
+ * and filtered by a text filter on the first field
+ */
+export const advancedComposedColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  fields: string[],
+  options?: Partial<AdvancedRequestDataGridColumn<R>>
+): AdvancedRequestDataGridColumns<R> => ({
+  [key]: {
+    field: {
+      fieldAlias: key,
+      operator: 'jsonObject',
+      operands: fields.flatMap((field) => [
+        { constantValue: field },
+        { fieldName: field },
+      ]),
+    },
+    name: title,
+    render: (row) => row[key] ?? '',
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: {
+      ...textFilter(fields[0]),
+      getter: (value) => value[fields[0]] ?? 0,
+    },
+    filterField: fields[0],
+    sortField: fields[0],
+    ...options,
+  },
+});
+
+export const advancedMailColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<AdvancedRequestDataGridColumn<R>>
+): AdvancedRequestDataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => <a href={`mailto:${row[key]}`}>{row[key] ?? ''}</a>,
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
+    ...options,
+  },
+});
+
+export const advancedPhoneColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<AdvancedRequestDataGridColumn<R>>
+): AdvancedRequestDataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => <a href={`tel:${row[key]}`}>{row[key] ?? ''}</a>,
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
+    ...options,
+  },
+});
+
+export const advancedDateColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<AdvancedRequestDataGridColumn<R>>
+): AdvancedRequestDataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => moment(row[key]).format('DD/MM/YYYY') ?? '',
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
+    ...options,
+  },
+});
+
+export const advancedMonthColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<AdvancedRequestDataGridColumn<R>>
+): AdvancedRequestDataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => (row[key] ? `${row[key]} mois ` : ''),
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
+    ...options,
+  },
+});
+
+export const advancedNumberColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  decimals = 2,
+  options?: Partial<AdvancedRequestDataGridColumn<R>>
+): AdvancedRequestDataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => formatNumber(row[key], decimals) ?? '',
+    excelFormatter: () => '#',
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: { ...numberFilter(key), getter: (value) => value[key] ?? 0 },
+    ...options,
+  },
+});
+
+export const advancedMoneyColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  decimals = 2,
+  options?: Partial<AdvancedRequestDataGridColumn<R>>
+): AdvancedRequestDataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => formatMoney(row[key], decimals) ?? '',
+    excelFormatter: () => '#0.00',
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: { ...numberFilter(key), getter: (value) => value[key] ?? 0 },
+    ...options,
+  },
+});
+
+export const advancedPercentageColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<AdvancedRequestDataGridColumn<R>>
+): AdvancedRequestDataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => formatPercentage(row[key]) ?? '',
+    excelFormatter: () => '#0.00',
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: { ...numberFilter(key), getter: (value) => value[key] ?? 0 },
+    ...options,
+  },
+});
+
+export const advancedCheckboxColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<AdvancedRequestDataGridColumn<R>>
+): AdvancedRequestDataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => (
+      <>
+        <input type="checkbox" checked={row[key]} />
+        <span>{row[key] ? ' Oui' : ' Non'}</span>
+      </>
+    ),
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: { ...numberFilter(key), getter: (value) => value[key] ?? 0 },
+    ...options,
+  },
+});
+
+export const advancedColorColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<AdvancedRequestDataGridColumn<R>>
+): AdvancedRequestDataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => (
+      <div style={{ backgroundColor: row[key] }}>{row[key] ?? ''}</div>
+    ),
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
+    ...options,
+  },
+});
+
+export const getColumnField = <R,>(
+  columns: AdvancedRequestDataGridColumns<R>,
+  columnKey: string
+): FieldDTO => {
+  return columns[columnKey].field
+    ? {
+        fieldName: columns[columnKey].field?.fieldName ?? columnKey,
+        fieldAlias: columnKey,
+      }
+    : {
+        fieldName: columnKey,
+        fieldAlias: columnKey,
+      };
+};
+export const getColumnSortField = <R,>(
+  columns: AdvancedRequestDataGridColumns<R>,
+  columnKey: string
+): FieldDTO => {
+  return columns[columnKey].sortField
+    ? {
+        fieldName: columns[columnKey].sortField ?? columnKey,
+        fieldAlias: columnKey,
+      }
+    : {
+        fieldName: columnKey,
+        fieldAlias: columnKey,
+      };
+};
+export const getFirstColumnField = <R,>(
+  columns: AdvancedRequestDataGridColumns<R>
+): FieldDTO => {
+  return getColumnField(columns, Object.keys(columns)[0]);
+};
+
+export const getFirstColumnSortField = <R,>(
+  columns: AdvancedRequestDataGridColumns<R>
+): FieldDTO => {
+  return getColumnSortField(columns, Object.keys(columns)[0]);
+};

package/src/components/data/AdvancedRequestDataGrid/helpers/index.ts

@@ -0,0 +1,2 @@
+export * from './advancedRequests';
+export * from './columns';