@addev-be/ui 2.7.0 → 2.7.1

package/src/components/forms/AutoTextArea.tsx

@@ -1,48 +1,48 @@
-import {
-  DetailedHTMLProps,
-  TextareaHTMLAttributes,
-  useEffect,
-  useState,
-} from 'react';
-
-import { StyledTextArea } from './styles';
-
-type TextAreaProps = DetailedHTMLProps<
-  TextareaHTMLAttributes<HTMLTextAreaElement>,
-  HTMLTextAreaElement
->;
-type AutoTextAreaProps = TextAreaProps & {
-  minRows?: number;
-  maxRows?: number;
-  canGrow?: boolean;
-  canShrink?: boolean;
-};
-
-export const AutoTextArea = ({
-  className,
-  canGrow = true,
-  canShrink = true,
-  minRows = 1,
-  maxRows = 10,
-  value,
-  ...props
-}: AutoTextAreaProps) => {
-  const [rows, setRows] = useState(minRows);
-
-  useEffect(() => {
-    const linesCount = String(value).split('\n').length;
-    const rowsCount = Math.min(maxRows, Math.max(minRows, linesCount));
-    if ((canGrow && rowsCount > rows) || (canShrink && rowsCount < rows)) {
-      setRows(rowsCount);
-    }
-  }, [canGrow, canShrink, maxRows, minRows, rows, value]);
-
-  return (
-    <StyledTextArea
-      {...props}
-      className={className}
-      rows={rows}
-      value={value}
-    />
-  );
-};
+import {
+  DetailedHTMLProps,
+  TextareaHTMLAttributes,
+  useEffect,
+  useState,
+} from 'react';
+
+import { StyledTextArea } from './styles';
+
+type TextAreaProps = DetailedHTMLProps<
+  TextareaHTMLAttributes<HTMLTextAreaElement>,
+  HTMLTextAreaElement
+>;
+type AutoTextAreaProps = TextAreaProps & {
+  minRows?: number;
+  maxRows?: number;
+  canGrow?: boolean;
+  canShrink?: boolean;
+};
+
+export const AutoTextArea = ({
+  className,
+  canGrow = true,
+  canShrink = true,
+  minRows = 1,
+  maxRows = 10,
+  value,
+  ...props
+}: AutoTextAreaProps) => {
+  const [rows, setRows] = useState(minRows);
+
+  useEffect(() => {
+    const linesCount = String(value).split('\n').length;
+    const rowsCount = Math.min(maxRows, Math.max(minRows, linesCount));
+    if ((canGrow && rowsCount > rows) || (canShrink && rowsCount < rows)) {
+      setRows(rowsCount);
+    }
+  }, [canGrow, canShrink, maxRows, minRows, rows, value]);
+
+  return (
+    <StyledTextArea
+      {...props}
+      className={className}
+      rows={rows}
+      value={value}
+    />
+  );
+};

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

@@ -1,78 +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>
-  );
-};
+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

@@ -1,43 +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);
-  }
-`;
+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/Button.tsx

@@ -1,132 +1,132 @@
-import { ComponentProps, forwardRef } from 'react';
-import {
-  ThemeColor,
-  ThemeColorWithIntensity,
-} from '../../providers/ThemeProvider/types';
-import {
-  darkenColor,
-  getColor,
-  getColorWithIntensity,
-  getIntensity,
-  lightenColor,
-} from '../../providers/ThemeProvider/helpers';
-import styled, { css } from 'styled-components';
-
-import { IconFC } from '../../Icons';
-
-type StyledButtonProps = {
-  $color?: ThemeColor | ThemeColorWithIntensity;
-  $rounded?: boolean;
-  $bordered?: boolean;
-};
-
-export const StyledButton = styled.button.withConfig({
-  shouldForwardProp: () => true,
-})<StyledButtonProps>`
-  display: inline-flex;
-  vertical-align: middle;
-  align-items: center;
-  justify-content: center;
-  box-shadow: var(--shadow-sm);
-  /* font-weight: bold; */
-  border-radius: var(--rounded-md);
-  font-family: var(--font-sans);
-  cursor: pointer;
-
-  ${({ $color = 'base', $bordered = false }) => {
-    const colorWithIntensity = getColorWithIntensity($color);
-    const colorName = getColor(colorWithIntensity);
-    const intensity = getIntensity(colorWithIntensity);
-    return css`
-      background-color: var(--color-${colorWithIntensity});
-      border: ${$bordered
-        ? `1px solid var(--color-${darkenColor(colorWithIntensity)});`
-        : 'none'};
-      &:hover {
-        background-color: var(--color-${lightenColor(colorWithIntensity, 100)});
-      }
-      color: var(--color-${colorName}-${intensity > 400 ? 0 : 950});
-      svg {
-        fill: var(--color-${colorName}-${intensity > 400 ? 0 : 950});
-      }
-    `;
-  }}
-
-  ${({ $rounded }) => $rounded && 'border-radius: var(--rounded-full);'}
-
-  &.small {
-    padding: var(--space-1) var(--space-1_5);
-    font-size: var(--text-sm);
-    height: var(--space-6);
-    box-shadow: var(--shadow-sm);
-    svg {
-      margin-right: var(--space-1);
-      width: var(--space-3);
-      height: var(--space-3);
-    }
-  }
-  &.medium {
-    padding: var(--space-2) var(--space-3);
-    font-size: var(--text-base);
-    height: var(--space-8);
-    box-shadow: var(--shadow-sm);
-    font-weight: bold;
-    svg {
-      margin-right: var(--space-1);
-      width: var(--space-4);
-      height: var(--space-4);
-    }
-  }
-  &.large {
-    padding: var(--space-3) var(--space-4);
-    font-size: var(--text-lg);
-    height: var(--space-10);
-    box-shadow: var(--shadow-sm);
-    font-weight: bold;
-    svg {
-      margin-right: var(--space-1);
-      width: var(--space-5);
-      height: var(--space-5);
-    }
-  }
-`;
-
-export type ButtonProps = {
-  color?: ThemeColor | ThemeColorWithIntensity;
-  size?: 'small' | 'medium' | 'large';
-  icon?: IconFC;
-  rounded?: boolean;
-  bordered?: boolean;
-};
-
-// eslint-disable-next-line react/display-name
-export const Button = forwardRef<
-  HTMLButtonElement,
-  ComponentProps<typeof StyledButton> & ButtonProps
->(
-  (
-    {
-      children,
-      size = 'medium',
-      icon: Icon,
-      className,
-      rounded = false,
-      color = 'base',
-      bordered = true,
-      ...props
-    },
-    ref
-  ) => (
-    <StyledButton
-      ref={ref}
-      className={`${size} ${className}`}
-      $color={color}
-      $rounded={rounded}
-      $bordered={bordered}
-      {...props}
-    >
-      {Icon && <Icon />}
-      {children}
-    </StyledButton>
-  )
-);
+import { ComponentProps, forwardRef } from 'react';
+import {
+  ThemeColor,
+  ThemeColorWithIntensity,
+} from '../../providers/ThemeProvider/types';
+import {
+  darkenColor,
+  getColor,
+  getColorWithIntensity,
+  getIntensity,
+  lightenColor,
+} from '../../providers/ThemeProvider/helpers';
+import styled, { css } from 'styled-components';
+
+import { IconFC } from '../../Icons';
+
+type StyledButtonProps = {
+  $color?: ThemeColor | ThemeColorWithIntensity;
+  $rounded?: boolean;
+  $bordered?: boolean;
+};
+
+export const StyledButton = styled.button.withConfig({
+  shouldForwardProp: () => true,
+})<StyledButtonProps>`
+  display: inline-flex;
+  vertical-align: middle;
+  align-items: center;
+  justify-content: center;
+  box-shadow: var(--shadow-sm);
+  /* font-weight: bold; */
+  border-radius: var(--rounded-md);
+  font-family: var(--font-sans);
+  cursor: pointer;
+
+  ${({ $color = 'base', $bordered = false }) => {
+    const colorWithIntensity = getColorWithIntensity($color);
+    const colorName = getColor(colorWithIntensity);
+    const intensity = getIntensity(colorWithIntensity);
+    return css`
+      background-color: var(--color-${colorWithIntensity});
+      border: ${$bordered
+        ? `1px solid var(--color-${darkenColor(colorWithIntensity)});`
+        : 'none'};
+      &:hover {
+        background-color: var(--color-${lightenColor(colorWithIntensity, 100)});
+      }
+      color: var(--color-${colorName}-${intensity > 400 ? 0 : 950});
+      svg {
+        fill: var(--color-${colorName}-${intensity > 400 ? 0 : 950});
+      }
+    `;
+  }}
+
+  ${({ $rounded }) => $rounded && 'border-radius: var(--rounded-full);'}
+
+  &.small {
+    padding: var(--space-1) var(--space-1_5);
+    font-size: var(--text-sm);
+    height: var(--space-6);
+    box-shadow: var(--shadow-sm);
+    svg {
+      margin-right: var(--space-1);
+      width: var(--space-3);
+      height: var(--space-3);
+    }
+  }
+  &.medium {
+    padding: var(--space-2) var(--space-3);
+    font-size: var(--text-base);
+    height: var(--space-8);
+    box-shadow: var(--shadow-sm);
+    font-weight: bold;
+    svg {
+      margin-right: var(--space-1);
+      width: var(--space-4);
+      height: var(--space-4);
+    }
+  }
+  &.large {
+    padding: var(--space-3) var(--space-4);
+    font-size: var(--text-lg);
+    height: var(--space-10);
+    box-shadow: var(--shadow-sm);
+    font-weight: bold;
+    svg {
+      margin-right: var(--space-1);
+      width: var(--space-5);
+      height: var(--space-5);
+    }
+  }
+`;
+
+export type ButtonProps = {
+  color?: ThemeColor | ThemeColorWithIntensity;
+  size?: 'small' | 'medium' | 'large';
+  icon?: IconFC;
+  rounded?: boolean;
+  bordered?: boolean;
+};
+
+// eslint-disable-next-line react/display-name
+export const Button = forwardRef<
+  HTMLButtonElement,
+  ComponentProps<typeof StyledButton> & ButtonProps
+>(
+  (
+    {
+      children,
+      size = 'medium',
+      icon: Icon,
+      className,
+      rounded = false,
+      color = 'base',
+      bordered = true,
+      ...props
+    },
+    ref
+  ) => (
+    <StyledButton
+      ref={ref}
+      className={`${size} ${className}`}
+      $color={color}
+      $rounded={rounded}
+      $bordered={bordered}
+      {...props}
+    >
+      {Icon && <Icon />}
+      {children}
+    </StyledButton>
+  )
+);

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

@@ -1,12 +1,12 @@
-import { FC, InputHTMLAttributes } from 'react';
-import { FormRow, FormRowProps } from './Row';
-
-import { StyledCheckbox } from './styles';
-
-export const Checkbox: FC<
-  FormRowProps & InputHTMLAttributes<HTMLInputElement>
-> = ({ label, icon, ...props }) => (
-  <FormRow label={label} icon={icon} readOnly={props.readOnly}>
-    <StyledCheckbox {...props} />
-  </FormRow>
-);
+import { FC, InputHTMLAttributes } from 'react';
+import { FormRow, FormRowProps } from './Row';
+
+import { StyledCheckbox } from './styles';
+
+export const Checkbox: FC<
+  FormRowProps & InputHTMLAttributes<HTMLInputElement>
+> = ({ label, icon, ...props }) => (
+  <FormRow label={label} icon={icon} readOnly={props.readOnly}>
+    <StyledCheckbox {...props} />
+  </FormRow>
+);