@addev-be/ui 0.4.2 → 0.4.4

package/src/components/data/SqlRequestDataGrid/types.ts

@@ -1,47 +1,47 @@
-import {
-  ConditionDTO,
-  FieldDTO,
-  OrderByDTO,
-  SqlRequestRow,
-} from '../../../services/sqlRequests';
-import {
-  DataGridColumn,
-  DataGridFilter,
-  DataGridFilterType,
-  DataGridProps,
-} from '../DataGrid/types';
-
-export type SqlRequestDataGridFilter<
-  T extends DataGridFilterType = DataGridFilterType
-> = DataGridFilter<T> & {
-  field?: FieldDTO;
-};
-
-export type SqlRequestDataGridFilters = Record<
-  string,
-  SqlRequestDataGridFilter
->;
-
-export type SqlRequestDataGridColumn<R> = DataGridColumn<R> & {
-  filter?: SqlRequestDataGridFilter;
-  field?: FieldDTO;
-  filterField?: string;
-  sortField?: string;
-};
-
-export type SqlRequestDataGridColumns<R> = Record<
-  string,
-  SqlRequestDataGridColumn<R>
->;
-
-export type SqlRequestDataGridProps<R> = Omit<
-  DataGridProps<R>,
-  'rows' | 'columns'
-> & {
-  columns: SqlRequestDataGridColumns<R>;
-  hiddenColumns?: string[];
-  type: string;
-  orderBy?: OrderByDTO[];
-  conditions?: ConditionDTO[];
-  parser?: (row: SqlRequestRow<R>) => R;
-};
+import {
+  ConditionDTO,
+  FieldDTO,
+  OrderByDTO,
+  SqlRequestRow,
+} from '../../../services/sqlRequests';
+import {
+  DataGridColumn,
+  DataGridFilter,
+  DataGridFilterType,
+  DataGridProps,
+} from '../DataGrid/types';
+
+export type SqlRequestDataGridFilter<
+  T extends DataGridFilterType = DataGridFilterType
+> = DataGridFilter<T> & {
+  field?: FieldDTO;
+};
+
+export type SqlRequestDataGridFilters = Record<
+  string,
+  SqlRequestDataGridFilter
+>;
+
+export type SqlRequestDataGridColumn<R> = DataGridColumn<R> & {
+  filter?: SqlRequestDataGridFilter;
+  field?: FieldDTO;
+  filterField?: string;
+  sortField?: string;
+};
+
+export type SqlRequestDataGridColumns<R> = Record<
+  string,
+  SqlRequestDataGridColumn<R>
+>;
+
+export type SqlRequestDataGridProps<R> = Omit<
+  DataGridProps<R>,
+  'rows' | 'columns'
+> & {
+  columns: SqlRequestDataGridColumns<R>;
+  hiddenColumns?: string[];
+  type: string;
+  orderBy?: OrderByDTO[];
+  conditions?: ConditionDTO[];
+  parser?: (row: SqlRequestRow<R>) => R;
+};

package/src/components/data/index.ts

@@ -1,8 +1,8 @@
-export * from './DataGrid';
-export * from './DataGrid/helpers';
-export * from './DataGrid/styles';
-export * from './AdvancedRequestDataGrid';
-export * from './SqlRequestDataGrid';
-export * from './SqlRequestDataGrid/helpers';
-export * from './SqlRequestDataGrid/types';
-export * from './AdvancedRequestDataGrid/helpers';
+export * from './DataGrid';
+export * from './DataGrid/helpers';
+export * from './DataGrid/styles';
+export * from './AdvancedRequestDataGrid';
+export * from './SqlRequestDataGrid';
+export * from './SqlRequestDataGrid/helpers';
+export * from './SqlRequestDataGrid/types';
+export * from './AdvancedRequestDataGrid/helpers';

package/src/components/forms/Button.tsx

@@ -1,99 +1,99 @@
-import { ComponentProps, forwardRef } from 'react';
-import styled, { css } from 'styled-components';
-
-import { IconFC } from '../../Icons';
-import { ThemeColor } from '../../providers/ThemeProvider/types';
-
-export const StyledButton = styled.button.withConfig({
-  shouldForwardProp: () => true,
-})<ButtonProps>`
-  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 }) =>
-    color
-      ? css`
-          background-color: var(--color-${color}-400);
-          border: 1px solid var(--color-${color}-500);
-          &:hover {
-            background-color: var(--color-${color}-300);
-            border: 1px solid var(--color-${color}-400);
-          }
-          color: var(--color-${color}-950);
-          svg {
-            fill: var(--color-${color}-950);
-          }
-        `
-      : css`
-          background-color: var(--color-neutral-100);
-          border: 1px solid var(--color-neutral-300);
-          &:hover {
-            background-color: var(--color-neutral-200);
-            border: 1px solid var(--color-neutral-400);
-          }
-          color: var(--color-neutral-900);
-          svg {
-            fill: var(--color-neutral-900);
-          }
-        `}
-
-  ${({ 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);
-    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);
-    svg {
-      margin-right: var(--space-1);
-      width: var(--space-5);
-      height: var(--space-5);
-    }
-  }
-`;
-
-export type ButtonProps = {
-  color?: ThemeColor;
-  size?: 'small' | 'medium' | 'large';
-  icon?: IconFC;
-  rounded?: boolean;
-};
-
-export const Button = forwardRef<
-  HTMLButtonElement,
-  ComponentProps<typeof StyledButton> & ButtonProps
->(({ children, size = 'medium', icon: Icon, className, ...props }, ref) => (
-  <StyledButton ref={ref} className={`${size} ${className}`} {...props}>
-    {Icon && <Icon />}
-    {children}
-  </StyledButton>
-));
+import { ComponentProps, forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+
+import { IconFC } from '../../Icons';
+import { ThemeColor } from '../../providers/ThemeProvider/types';
+
+export const StyledButton = styled.button.withConfig({
+  shouldForwardProp: () => true,
+})<ButtonProps>`
+  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 }) =>
+    color
+      ? css`
+          background-color: var(--color-${color}-400);
+          border: 1px solid var(--color-${color}-500);
+          &:hover {
+            background-color: var(--color-${color}-300);
+            border: 1px solid var(--color-${color}-400);
+          }
+          color: var(--color-${color}-950);
+          svg {
+            fill: var(--color-${color}-950);
+          }
+        `
+      : css`
+          background-color: var(--color-neutral-100);
+          border: 1px solid var(--color-neutral-300);
+          &:hover {
+            background-color: var(--color-neutral-200);
+            border: 1px solid var(--color-neutral-400);
+          }
+          color: var(--color-neutral-900);
+          svg {
+            fill: var(--color-neutral-900);
+          }
+        `}
+
+  ${({ 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);
+    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);
+    svg {
+      margin-right: var(--space-1);
+      width: var(--space-5);
+      height: var(--space-5);
+    }
+  }
+`;
+
+export type ButtonProps = {
+  color?: ThemeColor;
+  size?: 'small' | 'medium' | 'large';
+  icon?: IconFC;
+  rounded?: boolean;
+};
+
+export const Button = forwardRef<
+  HTMLButtonElement,
+  ComponentProps<typeof StyledButton> & ButtonProps
+>(({ children, size = 'medium', icon: Icon, className, ...props }, ref) => (
+  <StyledButton ref={ref} className={`${size} ${className}`} {...props}>
+    {Icon && <Icon />}
+    {children}
+  </StyledButton>
+));

package/src/components/forms/IconButton.tsx

@@ -1,56 +1,56 @@
-import { Button, ButtonProps } from './Button';
-import { ButtonHTMLAttributes, forwardRef } from 'react';
-
-import { IconFC } from '../../Icons';
-import styled from 'styled-components';
-
-type IconButtonProps = ButtonProps & {
-  icon: IconFC;
-  $iconSize?: string;
-};
-
-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 = 'var(--space-4)' }) => $iconSize};
-        height: ${({ $iconSize = 'var(--space-4)' }) => $iconSize};
-      }
-    }
-    &.medium {
-      padding: var(--space-2);
-      height: var(--space-8);
-      width: var(--space-8);
-      svg {
-        margin-right: 0;
-        width: ${({ $iconSize = 'var(--space-5)' }) => $iconSize};
-        height: ${({ $iconSize = 'var(--space-5)' }) => $iconSize};
-      }
-    }
-    &.large {
-      padding: var(--space-3);
-      height: var(--space-10);
-      width: var(--space-10);
-      svg {
-        margin-right: 0;
-        width: ${({ $iconSize = 'var(--space-6)' }) => $iconSize};
-        height: ${({ $iconSize = 'var(--space-6)' }) => $iconSize};
-      }
-    }
-  `,
-};
-
-export const IconButton = forwardRef<
-  HTMLButtonElement,
-  IconButtonProps & ButtonHTMLAttributes<HTMLButtonElement>
->(({ icon: Icon, ...props }, ref) => (
-  <styles.IconButton ref={ref} {...props}>
-    <Icon className="iconbutton-icon" />
-  </styles.IconButton>
-));
+import { Button, ButtonProps } from './Button';
+import { ButtonHTMLAttributes, forwardRef } from 'react';
+
+import { IconFC } from '../../Icons';
+import styled from 'styled-components';
+
+type IconButtonProps = ButtonProps & {
+  icon: IconFC;
+  $iconSize?: string;
+};
+
+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 = 'var(--space-4)' }) => $iconSize};
+        height: ${({ $iconSize = 'var(--space-4)' }) => $iconSize};
+      }
+    }
+    &.medium {
+      padding: var(--space-2);
+      height: var(--space-8);
+      width: var(--space-8);
+      svg {
+        margin-right: 0;
+        width: ${({ $iconSize = 'var(--space-5)' }) => $iconSize};
+        height: ${({ $iconSize = 'var(--space-5)' }) => $iconSize};
+      }
+    }
+    &.large {
+      padding: var(--space-3);
+      height: var(--space-10);
+      width: var(--space-10);
+      svg {
+        margin-right: 0;
+        width: ${({ $iconSize = 'var(--space-6)' }) => $iconSize};
+        height: ${({ $iconSize = 'var(--space-6)' }) => $iconSize};
+      }
+    }
+  `,
+};
+
+export const IconButton = forwardRef<
+  HTMLButtonElement,
+  IconButtonProps & ButtonHTMLAttributes<HTMLButtonElement>
+>(({ icon: Icon, ...props }, ref) => (
+  <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/Select.tsx

@@ -1,40 +1,40 @@
-import { SelectHTMLAttributes } from 'react';
-import { inputStyle } from './styles';
-import styled from 'styled-components';
-
-type SelectProps<T> = {
-  items: T[];
-  itemKey: keyof T | ((item: T) => string);
-  itemLabel: keyof T | ((item: T) => string);
-};
-
-const StyledSelect = styled.select`
-  ${inputStyle}
-`;
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const Select = <T extends { [k: string]: any }>({
-  items,
-  itemKey,
-  itemLabel,
-  ...props
-}: SelectProps<T> & SelectHTMLAttributes<HTMLSelectElement>) => {
-  const keyGetter =
-    typeof itemKey === 'function' ? itemKey : (item: T) => item[itemKey];
-  const labelGetter =
-    typeof itemLabel === 'function' ? itemLabel : (item: T) => item[itemLabel];
-
-  return (
-    <StyledSelect {...props}>
-      {items.map((item) => {
-        const key = keyGetter(item);
-        const label = labelGetter(item);
-        return (
-          <option key={key} value={key}>
-            {label}
-          </option>
-        );
-      })}
-    </StyledSelect>
-  );
-};
+import { SelectHTMLAttributes } from 'react';
+import { inputStyle } from './styles';
+import styled from 'styled-components';
+
+type SelectProps<T> = {
+  items: T[];
+  itemKey: keyof T | ((item: T) => string);
+  itemLabel: keyof T | ((item: T) => string);
+};
+
+const StyledSelect = styled.select`
+  ${inputStyle}
+`;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const Select = <T extends { [k: string]: any }>({
+  items,
+  itemKey,
+  itemLabel,
+  ...props
+}: SelectProps<T> & SelectHTMLAttributes<HTMLSelectElement>) => {
+  const keyGetter =
+    typeof itemKey === 'function' ? itemKey : (item: T) => item[itemKey];
+  const labelGetter =
+    typeof itemLabel === 'function' ? itemLabel : (item: T) => item[itemLabel];
+
+  return (
+    <StyledSelect {...props}>
+      {items.map((item) => {
+        const key = keyGetter(item);
+        const label = labelGetter(item);
+        return (
+          <option key={key} value={key}>
+            {label}
+          </option>
+        );
+      })}
+    </StyledSelect>
+  );
+};

package/src/components/forms/VerticalLabel.tsx

@@ -1,20 +1,20 @@
-import { FC, HTMLAttributes } from 'react';
-
-import { StackedLabelContainer } from './styles';
-
-type StackedLabelProps = HTMLAttributes<HTMLDivElement> & {
-  label: string;
-};
-
-export const StackedLabel: FC<StackedLabelProps> = ({
-  label,
-  children,
-  ...props
-}) => {
-  return (
-    <StackedLabelContainer {...props}>
-      <label>{label}</label>
-      {children}
-    </StackedLabelContainer>
-  );
-};
+import { FC, HTMLAttributes } from 'react';
+
+import { StackedLabelContainer } from './styles';
+
+type StackedLabelProps = HTMLAttributes<HTMLDivElement> & {
+  label: string;
+};
+
+export const StackedLabel: FC<StackedLabelProps> = ({
+  label,
+  children,
+  ...props
+}) => {
+  return (
+    <StackedLabelContainer {...props}>
+      <label>{label}</label>
+      {children}
+    </StackedLabelContainer>
+  );
+};

package/src/components/forms/index.ts

@@ -1,5 +1,5 @@
-export * from './Button';
-export * from './Select';
-export * from './IconButton';
-export * from './IndeterminateCheckbox';
-export * from './styles';
+export * from './Button';
+export * from './Select';
+export * from './IconButton';
+export * from './IndeterminateCheckbox';
+export * from './styles';