@addev-be/ui 2.7.0 → 2.7.1

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

@@ -1,148 +1,148 @@
-import styled, { css } from 'styled-components';
-
-import { ThemeColorWithIntensity } from '../../../providers/ThemeProvider/types';
-import { mediaQueries } from '../../../helpers/responsive';
-
-export const FormGroupContainer = styled.fieldset<{
-  $color?: ThemeColorWithIntensity;
-  $columns?: number;
-}>`
-  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);
-
-  // Ensure children are not larger than the container
-  min-width: 0;
-
-  padding: var(--space-2);
-  gap: var(--space-1);
-
-  ${mediaQueries.lgUp} {
-    padding: var(--space-4);
-    gap: var(--space-2);
-  }
-
-  margin: 0;
-  border: 1px solid var(--color-base-200);
-  border-left: 8px solid ${({ $color = 'base' }) => `var(--color-${$color})`};
-`;
-
-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;
-    font-size: var(--text-lg);
-    font-weight: bold;
-  }
-  & > h4 {
-    margin: 0;
-    font-size: var(--text-sm);
-    font-weight: var(--font-normal);
-    color: var(--color-text-500);
-  }
-
-  & > svg {
-    width: var(--space-6);
-    height: var(--space-6);
-  }
-`;
-
-export const inputCss = css`
-  font-family: var(--font-input);
-  font-size: var(--text-base);
-  font-weight: 500;
-
-  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-2);
-  border-radius: var(--rounded-md);
-`;
-
-export const FormRowLabel = styled.span`
-  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: normal;
-  align-self: flex-start;
-
-  & > svg {
-    width: var(--space-4);
-    height: var(--space-4);
-    fill: var(--color-base-500);
-    flex-shrink: 0;
-  }
-`;
-
-export const FormRowContainer = styled.label<{
-  $readOnly?: boolean;
-}>`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 0;
-  padding: var(--space-2);
-
-  & > select,
-  & > input,
-  & > textarea {
-    ${inputCss}
-  }
-
-  &.read-only {
-    & > select,
-    & > select[disabled],
-    & > input,
-    & > textarea {
-      background: none;
-      color: var(--color-text-800);
-    }
-  }
-`;
-
-export const StyledCheckbox = styled.input.attrs({ type: 'checkbox' })`
-  width: var(--space-4);
-  height: var(--space-4);
-`;
-
-export const ReadOnlyValue = styled.span`
-  padding: var(--space-1) 0;
-  font-weight: 500;
-`;
-
-export const FormFields = styled.div<{ $readOnly?: boolean }>`
-  display: flex;
-  flex-direction: column;
-  gap: ${({ $readOnly }) => ($readOnly ? '0' : 'var(--space-2)')};
-`;
-
-export const FormCondensedFields = styled.div`
-  display: flex;
-  flex-direction: column;
-
-  ${mediaQueries.lgUp} & > ${FormRowContainer} {
-    padding: var(--space-0_5) var(--space-2);
-  }
-
-  > ${FormRowContainer}:not(.read-only) + ${FormRowContainer}:not(.read-only) {
-    border-top: none;
-  }
-`;
+import styled, { css } from 'styled-components';
+
+import { ThemeColorWithIntensity } from '../../../providers/ThemeProvider/types';
+import { mediaQueries } from '../../../helpers/responsive';
+
+export const FormGroupContainer = styled.fieldset<{
+  $color?: ThemeColorWithIntensity;
+  $columns?: number;
+}>`
+  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);
+
+  // Ensure children are not larger than the container
+  min-width: 0;
+
+  padding: var(--space-2);
+  gap: var(--space-1);
+
+  ${mediaQueries.lgUp} {
+    padding: var(--space-4);
+    gap: var(--space-2);
+  }
+
+  margin: 0;
+  border: 1px solid var(--color-base-200);
+  border-left: 8px solid ${({ $color = 'base' }) => `var(--color-${$color})`};
+`;
+
+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;
+    font-size: var(--text-lg);
+    font-weight: bold;
+  }
+  & > h4 {
+    margin: 0;
+    font-size: var(--text-sm);
+    font-weight: var(--font-normal);
+    color: var(--color-text-500);
+  }
+
+  & > svg {
+    width: var(--space-6);
+    height: var(--space-6);
+  }
+`;
+
+export const inputCss = css`
+  font-family: var(--font-input);
+  font-size: var(--text-base);
+  font-weight: 500;
+
+  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-2);
+  border-radius: var(--rounded-md);
+`;
+
+export const FormRowLabel = styled.span`
+  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: normal;
+  align-self: flex-start;
+
+  & > svg {
+    width: var(--space-4);
+    height: var(--space-4);
+    fill: var(--color-base-500);
+    flex-shrink: 0;
+  }
+`;
+
+export const FormRowContainer = styled.label<{
+  $readOnly?: boolean;
+}>`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0;
+  padding: var(--space-2);
+
+  & > select,
+  & > input,
+  & > textarea {
+    ${inputCss}
+  }
+
+  &.read-only {
+    & > select,
+    & > select[disabled],
+    & > input,
+    & > textarea {
+      background: none;
+      color: var(--color-text-800);
+    }
+  }
+`;
+
+export const StyledCheckbox = styled.input.attrs({ type: 'checkbox' })`
+  width: var(--space-4);
+  height: var(--space-4);
+`;
+
+export const ReadOnlyValue = styled.span`
+  padding: var(--space-1) 0;
+  font-weight: 500;
+`;
+
+export const FormFields = styled.div<{ $readOnly?: boolean }>`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ $readOnly }) => ($readOnly ? '0' : 'var(--space-2)')};
+`;
+
+export const FormCondensedFields = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  ${mediaQueries.lgUp} & > ${FormRowContainer} {
+    padding: var(--space-0_5) var(--space-2);
+  }
+
+  > ${FormRowContainer}:not(.read-only) + ${FormRowContainer}:not(.read-only) {
+    border-top: none;
+  }
+`;

package/src/components/forms/IconButton.tsx

@@ -1,61 +1,61 @@
-import { Button, ButtonProps } from './Button';
-import { ButtonHTMLAttributes, ForwardedRef } from 'react';
-
-import { IconFC } from '../../Icons';
-import { ThemeSize } from '../../providers/ThemeProvider/types';
-import styled from 'styled-components';
-
-type IconButtonProps = ButtonProps & {
-  icon: IconFC;
-  $iconSize?: ThemeSize;
-};
-
-const styles = {
-  IconButton: styled(Button).attrs({
-    className: 'IconButton',
-  })<Omit<IconButtonProps, 'icon'>>`
-    &.small {
-      padding: var(--space-1);
-      height: var(--space-6);
-      width: var(--space-6);
-      svg {
-        margin-right: 0;
-        width: ${({ $iconSize = '5' }) => `var(--space-${$iconSize})`};
-        height: ${({ $iconSize = '5' }) => `var(--space-${$iconSize})`};
-      }
-    }
-    &.medium {
-      padding: var(--space-2);
-      height: var(--space-8);
-      width: var(--space-8);
-      svg {
-        margin-right: 0;
-        width: ${({ $iconSize = '6' }) => `var(--space-${$iconSize})`};
-        height: ${({ $iconSize = '6' }) => `var(--space-${$iconSize})`};
-      }
-    }
-    &.large {
-      padding: var(--space-3);
-      height: var(--space-10);
-      width: var(--space-10);
-      svg {
-        margin-right: 0;
-        width: ${({ $iconSize = '8' }) => `var(--space-${$iconSize})`};
-        height: ${({ $iconSize = '8' }) => `var(--space-${$iconSize})`};
-      }
-    }
-  `,
-};
-
-export const IconButton = ({
-  icon: Icon,
-  ref,
-  ...props
-}: IconButtonProps &
-  ButtonHTMLAttributes<HTMLButtonElement> & {
-    ref?: ForwardedRef<HTMLButtonElement>;
-  }) => (
-  <styles.IconButton ref={ref} {...props}>
-    <Icon className="iconbutton-icon" />
-  </styles.IconButton>
-);
+import { Button, ButtonProps } from './Button';
+import { ButtonHTMLAttributes, ForwardedRef } from 'react';
+
+import { IconFC } from '../../Icons';
+import { ThemeSize } from '../../providers/ThemeProvider/types';
+import styled from 'styled-components';
+
+type IconButtonProps = ButtonProps & {
+  icon: IconFC;
+  $iconSize?: ThemeSize;
+};
+
+const styles = {
+  IconButton: styled(Button).attrs({
+    className: 'IconButton',
+  })<Omit<IconButtonProps, 'icon'>>`
+    &.small {
+      padding: var(--space-1);
+      height: var(--space-6);
+      width: var(--space-6);
+      svg {
+        margin-right: 0;
+        width: ${({ $iconSize = '5' }) => `var(--space-${$iconSize})`};
+        height: ${({ $iconSize = '5' }) => `var(--space-${$iconSize})`};
+      }
+    }
+    &.medium {
+      padding: var(--space-2);
+      height: var(--space-8);
+      width: var(--space-8);
+      svg {
+        margin-right: 0;
+        width: ${({ $iconSize = '6' }) => `var(--space-${$iconSize})`};
+        height: ${({ $iconSize = '6' }) => `var(--space-${$iconSize})`};
+      }
+    }
+    &.large {
+      padding: var(--space-3);
+      height: var(--space-10);
+      width: var(--space-10);
+      svg {
+        margin-right: 0;
+        width: ${({ $iconSize = '8' }) => `var(--space-${$iconSize})`};
+        height: ${({ $iconSize = '8' }) => `var(--space-${$iconSize})`};
+      }
+    }
+  `,
+};
+
+export const IconButton = ({
+  icon: Icon,
+  ref,
+  ...props
+}: IconButtonProps &
+  ButtonHTMLAttributes<HTMLButtonElement> & {
+    ref?: ForwardedRef<HTMLButtonElement>;
+  }) => (
+  <styles.IconButton ref={ref} {...props}>
+    <Icon className="iconbutton-icon" />
+  </styles.IconButton>
+);

package/src/components/forms/IndeterminateCheckbox.tsx

@@ -1,46 +1,46 @@
-import {
-  ChangeEvent,
-  FC,
-  InputHTMLAttributes,
-  useLayoutEffect,
-  useRef,
-} from 'react';
-
-import { join } from 'lodash';
-
-type IndeterminateCheckboxProps = InputHTMLAttributes<HTMLInputElement> & {
-  className?: string;
-  checked: boolean | undefined;
-  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
-};
-
-export const IndeterminateCheckbox: FC<IndeterminateCheckboxProps> = ({
-  className,
-  checked,
-  onChange,
-  ...props
-}) => {
-  const checkbox = useRef<HTMLInputElement>(null);
-
-  useLayoutEffect(() => {
-    if (checkbox.current)
-      checkbox.current.indeterminate = checked === undefined;
-  }, [checked]);
-
-  return (
-    <input
-      type="checkbox"
-      className={join(
-        [
-          'h-4 w-4 rounded border-gray-300 text-sky-600 focus:ring-sky-600',
-          className,
-        ],
-        ' '
-      )}
-      ref={checkbox}
-      checked={!!checked}
-      onChange={onChange}
-      {...props}
-    />
-  );
-};
+import {
+  ChangeEvent,
+  FC,
+  InputHTMLAttributes,
+  useLayoutEffect,
+  useRef,
+} from 'react';
+
+import { join } from 'lodash';
+
+type IndeterminateCheckboxProps = InputHTMLAttributes<HTMLInputElement> & {
+  className?: string;
+  checked: boolean | undefined;
+  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+};
+
+export const IndeterminateCheckbox: FC<IndeterminateCheckboxProps> = ({
+  className,
+  checked,
+  onChange,
+  ...props
+}) => {
+  const checkbox = useRef<HTMLInputElement>(null);
+
+  useLayoutEffect(() => {
+    if (checkbox.current)
+      checkbox.current.indeterminate = checked === undefined;
+  }, [checked]);
+
+  return (
+    <input
+      type="checkbox"
+      className={join(
+        [
+          'h-4 w-4 rounded border-gray-300 text-sky-600 focus:ring-sky-600',
+          className,
+        ],
+        ' '
+      )}
+      ref={checkbox}
+      checked={!!checked}
+      onChange={onChange}
+      {...props}
+    />
+  );
+};

package/src/components/forms/NumberInput.tsx

@@ -1,53 +1,53 @@
-import { HTMLProps, Ref, forwardRef, useEffect, useState } from 'react';
-import { Input, StyledNumericFormat } from './styles';
-import { decimalSeparator, parseNumber } from '../../helpers/numbers';
-
-const NumberInputInner = (
-  {
-    value,
-    onChange,
-    decimals = 0,
-    prefix,
-    suffix,
-    multiplicator = 1,
-    ...props
-  }: Omit<
-    HTMLProps<HTMLInputElement>,
-    'type' | 'value' | 'onChange' | 'defaultValue'
-  > & {
-    value?: number;
-    onChange?: (value: number) => void;
-    decimals?: number;
-    prefix?: string;
-    suffix?: string;
-    multiplicator?: number;
-  },
-  ref: Ref<HTMLInputElement>
-) => {
-  const [displayedValue, setDisplayedValue] = useState<number>(
-    Number(value ?? 0)
-  );
-
-  useEffect(() => {
-    setDisplayedValue((value ?? 0) * multiplicator);
-  }, [multiplicator, value]);
-
-  return (
-    <StyledNumericFormat
-      className={String(Input)}
-      getInputRef={ref}
-      value={displayedValue}
-      onChange={(e) => {
-        onChange?.(parseNumber(e.target.value) / multiplicator);
-      }}
-      decimalSeparator={decimalSeparator}
-      decimalScale={decimals}
-      fixedDecimalScale={!!decimals}
-      prefix={prefix ? prefix + ' ' : undefined}
-      suffix={suffix ? ' ' + suffix : undefined}
-      {...props}
-    />
-  );
-};
-
-export const NumberInput = forwardRef(NumberInputInner);
+import { HTMLProps, Ref, forwardRef, useEffect, useState } from 'react';
+import { Input, StyledNumericFormat } from './styles';
+import { decimalSeparator, parseNumber } from '../../helpers/numbers';
+
+const NumberInputInner = (
+  {
+    value,
+    onChange,
+    decimals = 0,
+    prefix,
+    suffix,
+    multiplicator = 1,
+    ...props
+  }: Omit<
+    HTMLProps<HTMLInputElement>,
+    'type' | 'value' | 'onChange' | 'defaultValue'
+  > & {
+    value?: number;
+    onChange?: (value: number) => void;
+    decimals?: number;
+    prefix?: string;
+    suffix?: string;
+    multiplicator?: number;
+  },
+  ref: Ref<HTMLInputElement>
+) => {
+  const [displayedValue, setDisplayedValue] = useState<number>(
+    Number(value ?? 0)
+  );
+
+  useEffect(() => {
+    setDisplayedValue((value ?? 0) * multiplicator);
+  }, [multiplicator, value]);
+
+  return (
+    <StyledNumericFormat
+      className={String(Input)}
+      getInputRef={ref}
+      value={displayedValue}
+      onChange={(e) => {
+        onChange?.(parseNumber(e.target.value) / multiplicator);
+      }}
+      decimalSeparator={decimalSeparator}
+      decimalScale={decimals}
+      fixedDecimalScale={!!decimals}
+      prefix={prefix ? prefix + ' ' : undefined}
+      suffix={suffix ? ' ' + suffix : undefined}
+      {...props}
+    />
+  );
+};
+
+export const NumberInput = forwardRef(NumberInputInner);

package/src/components/forms/Select.tsx

@@ -1,34 +1,34 @@
-import { SelectHTMLAttributes } from 'react';
-import { inputStyle } from './styles';
-import styled from 'styled-components';
-
-type PropGetter<T> = (item: T) => string;
-
-export type SelectProps<T> = {
-  items: T[];
-  itemKey: PropGetter<T>;
-  itemLabel: PropGetter<T>;
-};
-
-const StyledSelect = styled.select`
-  ${inputStyle}
-`;
-
-export const Select = <T,>({
-  items,
-  itemKey,
-  itemLabel,
-  ...props
-}: SelectProps<T> & SelectHTMLAttributes<HTMLSelectElement>) => (
-  <StyledSelect {...props}>
-    {items.map((item) => {
-      const key = itemKey(item);
-      const label = itemLabel(item);
-      return (
-        <option key={key} value={key}>
-          {label}
-        </option>
-      );
-    })}
-  </StyledSelect>
-);
+import { SelectHTMLAttributes } from 'react';
+import { inputStyle } from './styles';
+import styled from 'styled-components';
+
+type PropGetter<T> = (item: T) => string;
+
+export type SelectProps<T> = {
+  items: T[];
+  itemKey: PropGetter<T>;
+  itemLabel: PropGetter<T>;
+};
+
+const StyledSelect = styled.select`
+  ${inputStyle}
+`;
+
+export const Select = <T,>({
+  items,
+  itemKey,
+  itemLabel,
+  ...props
+}: SelectProps<T> & SelectHTMLAttributes<HTMLSelectElement>) => (
+  <StyledSelect {...props}>
+    {items.map((item) => {
+      const key = itemKey(item);
+      const label = itemLabel(item);
+      return (
+        <option key={key} value={key}>
+          {label}
+        </option>
+      );
+    })}
+  </StyledSelect>
+);