@addev-be/ui 2.5.20 → 2.7.0

package/src/components/forms/BillitIdentifier/index.tsx

@@ -0,0 +1,78 @@
+import { BillitIdentifierContainer, BillitIdentifierWrapper } from './styles';
+import { InputHTMLAttributes, useEffect, useState } from 'react';
+
+type BillitPrefix = 'VAT' | 'GLN' | '';
+
+export interface BillitIdentifierProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
+  value?: string;
+  onChange?: (value: string) => void;
+}
+
+export const BillitIdentifier = ({
+  value = '',
+  onChange,
+  ...inputProps
+}: BillitIdentifierProps) => {
+  const parseValue = (fullValue: string): [BillitPrefix, string] => {
+    if (!fullValue) {
+      return ['', ''];
+    }
+    const match = fullValue.match(/^(VAT|GLN):(.*)$/);
+    if (match) {
+      return [match[1] as BillitPrefix, match[2]];
+    }
+    return ['', fullValue];
+  };
+
+  const [prefix, textValue] = parseValue(value);
+  const [localPrefix, setLocalPrefix] = useState<BillitPrefix>(prefix);
+  const [localValue, setLocalValue] = useState<string>(textValue);
+
+  useEffect(() => {
+    const [newPrefix, newValue] = parseValue(value);
+    setLocalPrefix(newPrefix);
+    setLocalValue(newValue);
+  }, [value]);
+
+  const handlePrefixChange = (newPrefix: BillitPrefix) => {
+    setLocalPrefix(newPrefix);
+    if (newPrefix === '') {
+      onChange?.('');
+    } else {
+      const fullValue = `${newPrefix}:${localValue}`;
+      onChange?.(fullValue);
+    }
+  };
+
+  const handleValueChange = (newValue: string) => {
+    setLocalValue(newValue);
+    if (localPrefix === '') {
+      onChange?.('');
+    } else {
+      const fullValue = `${localPrefix}:${newValue}`;
+      onChange?.(fullValue);
+    }
+  };
+
+  return (
+    <BillitIdentifierContainer>
+      <BillitIdentifierWrapper>
+        <select
+          value={localPrefix}
+          onChange={(e) => handlePrefixChange(e.target.value as BillitPrefix)}
+        >
+          <option value="">(Aucun)</option>
+          <option value="VAT">VAT</option>
+          <option value="GLN">GLN</option>
+        </select>
+        <input
+          {...inputProps}
+          type="text"
+          value={localValue}
+          onChange={(e) => handleValueChange(e.target.value)}
+        />
+      </BillitIdentifierWrapper>
+    </BillitIdentifierContainer>
+  );
+};

package/src/components/forms/BillitIdentifier/styles.tsx

@@ -0,0 +1,43 @@
+import { inputStyle } from '../styles';
+import styled from 'styled-components';
+
+export const BillitIdentifierContainer = styled.div`
+  display: flex;
+  width: 100%;
+  position: relative;
+`;
+
+export const BillitIdentifierWrapper = styled.div`
+  display: flex;
+  width: 100%;
+
+  & > select {
+    ${inputStyle}
+    width: auto;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-right: none;
+    flex-shrink: 0;
+    padding-right: var(--space-2);
+    background-color: var(--color-base-100);
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  & > input {
+    ${inputStyle}
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    flex: 1;
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  &:focus-within {
+    outline: 2px solid var(--color-primary-500);
+  }
+`;

package/src/components/forms/Form/FormGroup.tsx

@@ -9,6 +9,7 @@ type FormGroupProps = PropsWithChildren<{
   title?: string;
   subTitle?: string;
   icon?: IconFC;
+  columns?: number;
 }>;
 
 export const FormGroup: FC<FormGroupProps> = ({
@@ -17,10 +18,11 @@ export const FormGroup: FC<FormGroupProps> = ({
   title,
   subTitle,
   icon: Icon,
+  columns,
 }) => (
-  <FormGroupContainer color={color}>
+  <FormGroupContainer $color={color} $columns={columns}>
     {(title || subTitle) && (
-      <FormGroupHeader>
+      <FormGroupHeader $columns={columns}>
         {Icon && <Icon />}
         {title && <h3>{title}</h3>}
         {subTitle && <h4>{subTitle}</h4>}

package/src/components/forms/Form/Row.tsx

@@ -1,9 +1,5 @@
 import { FC, PropsWithChildren } from 'react';
-import {
-  FormRowContainer,
-  FormRowInputContainer,
-  FormRowLabel,
-} from './styles';
+import { FormRowContainer, FormRowLabel } from './styles';
 
 import { IconFC } from '../../../Icons';
 
@@ -27,6 +23,6 @@ export const FormRow: FC<FormRowProps> = ({
         {label}
       </FormRowLabel>
     )}
-    <FormRowInputContainer>{children}</FormRowInputContainer>
+    {children}
   </FormRowContainer>
 );

package/src/components/forms/Form/Select.tsx

@@ -17,6 +17,8 @@ type SelectProps<T> = {
   readOnly?: boolean;
   onChange?: (value: T | null) => void;
   ref?: ForwardedRef<HTMLSelectElement>;
+  allowNull?: boolean;
+  nullText?: string;
 };
 
 export const Select = <T,>({
@@ -29,6 +31,8 @@ export const Select = <T,>({
   onChange,
   value,
   ref,
+  allowNull = false,
+  nullText = 'Aucun(e)',
   ...props
 }: FormRowProps &
   Omit<SelectHTMLAttributes<HTMLSelectElement>, 'value' | 'onChange'> &
@@ -40,17 +44,25 @@ export const Select = <T,>({
     (event: React.ChangeEvent<HTMLSelectElement>) => {
       if (onChange) {
         const selectedValue = event.target.value;
-        const selectedItem = items.find(
-          (item, index) => itemKey(item, index) == selectedValue
-        );
-        onChange(selectedItem ?? null);
+        if (allowNull && selectedValue === null) {
+          onChange(null);
+        } else {
+          const selectedItem = items.find(
+            (item, index) => itemKey(item, index) == selectedValue
+          );
+          onChange(selectedItem || null);
+        }
         selectRef.current?.blur();
       }
     },
-    [items, itemKey, onChange]
+    [items, itemKey, onChange, allowNull]
   );
 
-  const selectedValue = value ? itemKey(value, -1) : undefined;
+  const selectedValue = value
+    ? itemKey(value, -1)
+    : allowNull
+    ? null
+    : undefined;
 
   return (
     <FormRow label={label} icon={icon} readOnly={readOnly}>
@@ -62,10 +74,15 @@ export const Select = <T,>({
         <select
           {...props}
           disabled={readOnly}
-          value={selectedValue}
+          value={selectedValue || ''}
           onChange={onSelectChange}
           ref={selectRef}
         >
+          {allowNull && (
+            <option disabled={!allowNull} value="">
+              {nullText}
+            </option>
+          )}
           {items.map((item, index) => {
             const key = itemKey(item, index);
             const label = itemLabel(item, index);

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

@@ -4,11 +4,13 @@ import { ThemeColorWithIntensity } from '../../../providers/ThemeProvider/types'
 import { mediaQueries } from '../../../helpers/responsive';
 
 export const FormGroupContainer = styled.fieldset<{
-  color?: ThemeColorWithIntensity;
+  $color?: ThemeColorWithIntensity;
+  $columns?: number;
 }>`
-  display: flex;
-  flex-direction: column;
-  background: var(--color-base-100);
+  display: grid;
+  grid-template-columns: repeat(${({ $columns = 1 }) => $columns}, 1fr);
+
+  background: var(--color-base-50);
   border-radius: var(--rounded-md);
   box-shadow: var(--shadow-md);
 
@@ -24,15 +26,18 @@ export const FormGroupContainer = styled.fieldset<{
   }
 
   margin: 0;
-  border: 1px solid var(--color-base-300);
-  border-left: 8px solid ${({ color = 'base' }) => `var(--color-${color})`};
+  border: 1px solid var(--color-base-200);
+  border-left: 8px solid ${({ $color = 'base' }) => `var(--color-${$color})`};
 `;
 
-export const FormGroupHeader = styled.div`
+export const FormGroupHeader = styled.div<{
+  $columns?: number;
+}>`
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: var(--space-2);
+  grid-column: span ${({ $columns = 1 }) => $columns};
 
   & > h3 {
     margin: 0;
@@ -53,34 +58,30 @@ export const FormGroupHeader = styled.div`
 `;
 
 export const inputCss = css`
-  font-family: inherit;
+  font-family: var(--font-input);
   font-size: var(--text-base);
+  font-weight: 500;
 
-  border: none;
+  border: 1px solid var(--color-base-300);
   color: var(--color-text-800);
   background: var(--color-base-0);
 
   box-sizing: border-box;
   width: 100%;
-  padding: var(--space-1);
-  ${mediaQueries.lgUp} {
-    text-align: right;
-  }
-
-  &:focus {
-    outline: none;
-  }
+  padding: var(--space-2);
+  border-radius: var(--rounded-md);
 `;
 
 export const FormRowLabel = styled.span`
-  color: var(--color-text-500);
-  font-size: var(--text-base);
+  color: var(--color-base-600);
+  font-size: var(--text-sm);
+  text-transform: uppercase;
   padding: var(--space-1) 0;
   display: flex;
   flex-direction: row;
   gap: var(--space-2);
   line-height: 1.25;
-  font-weight: bold;
+  font-weight: normal;
   align-self: flex-start;
 
   & > svg {
@@ -91,63 +92,26 @@ export const FormRowLabel = styled.span`
   }
 `;
 
-export const FormRowInputContainer = styled.div`
-  flex: 1;
-  text-align: right;
-
-  ${mediaQueries.mdDown} {
-    width: 100%;
-    text-align: left;
-  }
-
-  & > select,
-  & > input,
-  & > textarea {
-    ${inputCss}
-  }
-
-  & > select:focus > option {
-    text-align: left;
-  }
-`;
-
 export const FormRowContainer = styled.label<{
   $readOnly?: boolean;
 }>`
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: flex-start;
   gap: 0;
   padding: var(--space-2);
 
-  ${mediaQueries.lgUp} {
-    flex-direction: row;
-    gap: var(--space-2);
-    padding: var(--space-1) var(--space-2);
-  }
-
-  border: 1px solid var(--color-base-200);
-  background: var(--color-base-0);
-  &:focus-within {
-    outline: 2px solid var(--color-primary-500);
-    z-index: 1;
+  & > select,
+  & > input,
+  & > textarea {
+    ${inputCss}
   }
 
   &.read-only {
-    background: none;
-    border: none;
-    &:focus-within {
-      outline: none;
-    }
-
-    & + & {
-      border-top: 1px solid var(--color-base-300);
-    }
-
-    & > div > select,
-    & > div > select[disabled],
-    & > div > input,
-    & > div > textarea {
+    & > select,
+    & > select[disabled],
+    & > input,
+    & > textarea {
       background: none;
       color: var(--color-text-800);
     }
@@ -160,8 +124,8 @@ export const StyledCheckbox = styled.input.attrs({ type: 'checkbox' })`
 `;
 
 export const ReadOnlyValue = styled.span`
-  font-size: var(--text-lg);
   padding: var(--space-1) 0;
+  font-weight: 500;
 `;
 
 export const FormFields = styled.div<{ $readOnly?: boolean }>`

package/src/components/forms/styles.ts

@@ -3,7 +3,7 @@ import styled, { css } from 'styled-components';
 import { NumericFormat } from 'react-number-format';
 
 export const inputStyle = css`
-  font-family: var(--font-sans);
+  font-family: var(--font-input);
   font-size: inherit;
   color: var(--color-text-800);
   background-color: var(--color-base-0);

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

@@ -1,7 +1,9 @@
 import { CardContainer, CardFooter, CardHeader } from './styles';
 import { FC, HTMLAttributes } from 'react';
 
-type CardFC = FC<HTMLAttributes<HTMLDivElement>> & {
+import { SpaceProps } from '../../../helpers/styled/space';
+
+type CardFC = FC<HTMLAttributes<HTMLDivElement> & SpaceProps> & {
   Header: typeof CardHeader;
   Footer: typeof CardFooter;
 };

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

@@ -1,15 +1,19 @@
+import { SpaceProps, space } from '../../../helpers/styled/space';
+
 import styled from 'styled-components';
 
 export const CardContainer = styled.div.attrs({
   className: 'CardContainer',
-})`
+})<SpaceProps>`
   display: flex;
   flex-direction: column;
-  background-color: var(--color-base-0);
+  background-color: var(--color-base-50);
   border-radius: var(--rounded-md);
   box-shadow: var(--shadow-md);
   padding: var(--space-4);
-  border: 1px solid var(--color-base-100);
+  border: 1px solid var(--color-base-200);
+
+  ${space}
 `;
 
 export const CardHeader = styled.div.attrs({

package/src/components/ui/TabsView/TabsList.tsx

@@ -1,16 +1,19 @@
 import { FC, useEffect, useState } from 'react';
 import { TabContainer, TabsListContainer } from './styles';
 
+import { Card } from '../Card';
 import { SpaceProps } from '../../../helpers/styled/space';
 import { Tab } from './types';
 
 type TabsListProps = {
+  card?: boolean;
   tabs: Tab[];
   selectedIndex?: number;
   onSelectedIndexChanged?: (index: number) => void;
 } & SpaceProps;
 
 export const TabsList: FC<TabsListProps> = ({
+  card,
   tabs,
   selectedIndex,
   onSelectedIndexChanged,
@@ -26,7 +29,7 @@ export const TabsList: FC<TabsListProps> = ({
     onSelectedIndexChanged?.(activeIndex);
   }, [activeIndex, onSelectedIndexChanged]);
 
-  return (
+  const tabsList = (
     <TabsListContainer {...spaceProps}>
       {tabs.map((tab, index) => (
         <TabContainer
@@ -41,4 +44,6 @@ export const TabsList: FC<TabsListProps> = ({
       ))}
     </TabsListContainer>
   );
+
+  return card ? <Card p="2">{tabsList}</Card> : tabsList;
 };

package/src/components/ui/TabsView/TabsView.tsx

@@ -1,6 +1,7 @@
 import { FC, useEffect, useState } from 'react';
 import { TabContentContainer, TabsViewContainer } from './styles';
 
+import { SpaceProps } from '../../../helpers/styled/space';
 import { Tab } from './types';
 import { TabsList } from './TabsList';
 
@@ -8,12 +9,14 @@ type TabsViewProps = {
   tabs: Tab[];
   overflow?: boolean;
   onSelectedTabChanged?: (tab: Tab, index: number) => void;
-};
+  card?: boolean;
+} & SpaceProps;
 
 export const TabsView: FC<TabsViewProps> = ({
   tabs,
   overflow = false,
   onSelectedTabChanged,
+  card,
 }) => {
   const [activeIndex, setActiveIndex] = useState(0);
   const activeTab = tabs[activeIndex];
@@ -25,10 +28,11 @@ export const TabsView: FC<TabsViewProps> = ({
   return (
     <TabsViewContainer>
       <TabsList
+        card={card}
         tabs={tabs}
         selectedIndex={activeIndex}
         onSelectedIndexChanged={setActiveIndex}
-        p="2"
+        p={card ? '0' : '2'}
       />
       <TabContentContainer $isOverflow={overflow}>
         {activeTab.content}

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

@@ -3,14 +3,17 @@ import {
   ThemeColor,
   ThemeColorWithIntensity,
 } from '../../../providers/ThemeProvider/types';
+import {
+  getColor,
+  getColorWithIntensity,
+} from '../../../providers/ThemeProvider/helpers';
 import styled, { css } from 'styled-components';
 
-import { getColorWithIntensity } from '../../../providers/ThemeProvider/helpers';
-
 export const TabsViewContainer = styled.div`
   display: flex;
   flex-direction: column;
   height: 100%;
+  gap: var(--space-4);
 `;
 
 export const TabsListContainer = styled.div<SpaceProps>`
@@ -19,7 +22,7 @@ export const TabsListContainer = styled.div<SpaceProps>`
   flex-shrink: 0;
   overflow-x: scroll;
   scrollbar-width: none;
-  font-size: var(--text-lg);
+  font-size: var(--text-base);
   white-space: nowrap;
 
   ${space}
@@ -55,6 +58,11 @@ export const TabContainer = styled.div<{
   ${({ $isActive, $color = 'primary' }) =>
     $isActive &&
     css`
+      background: radial-gradient(
+        ellipse at bottom center,
+        var(--color-${getColor($color)}-50) 0%,
+        transparent 80%
+      );
       border-bottom: var(--space-0_5) solid;
       color: var(--color-${getColorWithIntensity($color, 500)});
       svg {

package/src/index.ts

@@ -17,6 +17,7 @@ export * from './components/data/VirtualScroller';
 export * from './components/data/VirtualScroller/types';
 
 export * from './components/forms/AutoTextArea';
+export * from './components/forms/BillitIdentifier';
 export * from './components/forms/Button';
 export * from './components/forms/Select';
 export * from './components/forms/IconButton';

package/src/providers/ThemeProvider/defaultTheme.ts

@@ -377,6 +377,7 @@ export const defaultTheme: Theme = {
     sans: "'Montserrat', Helvetica, Arial, Verdana, sans-serif",
     serif: "Georgia, Cambria, 'Times New Roman', Times, serif",
     mono: "Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+    input: "'Montserrat', Helvetica, Arial, Verdana, sans-serif",
   },
 
   weights: {

package/src/providers/ThemeProvider/helpers.ts

@@ -20,7 +20,7 @@ export const extendDefaultDarkTheme = (override?: DeepPartial<Theme>): Theme =>
   extendTheme(defaultDarkTheme, override);
 
 export const getColor = (
-  colorWithIntensity: ThemeColorWithIntensity
+  colorWithIntensity: ThemeColor | ThemeColorWithIntensity
 ): ThemeColor => {
   const [colorName] = colorWithIntensity.split('-');
   return colorName as ThemeColor;

package/src/providers/ThemeProvider/index.ts

@@ -56,7 +56,14 @@ export const ThemeProvider = styled.div<ThemeProviderProps>`
     ].join('');
   }}
 
-  a, a:visited {
+  font-family: var(--font-sans);
+  font-size: var(--text-base);
+  font-weight: var(--weight-normal);
+  color: var(--color-text-800);
+  background-color: var(--color-base-0);
+
+  a,
+  a:visited {
     color: var(--color-primary-500);
   }
   a:active,

package/src/providers/ThemeProvider/types.ts

@@ -62,7 +62,7 @@ export type ThemeTextSize =
   | '4xl'
   | '5xl'
   | '6xl';
-export type ThemeFontFamily = 'sans' | 'serif' | 'mono';
+export type ThemeFontFamily = 'sans' | 'serif' | 'mono' | 'input';
 export type ThemeFontWeight = 'light' | 'normal' | 'bold';
 export type ThemeSpace =
   | '0'

package/src/services/sqlRequests.ts

@@ -26,11 +26,17 @@ export type FieldDTO<T extends string = string> = {
 export type ConditionDTO = {
   field: string;
   operator:
+    | 'isLessThan'
+    | 'isLessThanOrEqual'
+    | 'isLessThanOrEquals'
     | 'lessThan'
     | 'lessThanOrEqual'
     | 'lessThanOrEquals'
     | 'equals'
     | 'notEquals'
+    | 'isGreaterThanOrEqual'
+    | 'isGreaterThanOrEquals'
+    | 'isGreaterThan'
     | 'greaterThanOrEqual'
     | 'greaterThanOrEquals'
     | 'greaterThan'