@addev-be/ui 1.2.1 → 2.1.0

package/src/components/data/SqlRequestGrid/index.tsx

@@ -6,8 +6,7 @@ import {
   useSqlRequestHandler,
 } from '../../../services/sqlRequests';
 import {
-  ForwardedRef,
-  forwardRef,
+  Ref,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -25,16 +24,18 @@ import { debounce, pickBy } from 'lodash';
 import { DataGridSort } from '../DataGrid/types';
 import { FilterFullIcon } from '../../../Icons';
 import { FiltersSidebar } from './filters/FiltersSidebar';
-import { IconButton } from '../../forms';
+import { IconButton } from '../../forms/IconButton';
 import { VirtualScroller } from '../VirtualScroller';
 import { convertSqlFiltersToConditions } from './helpers';
 import { isColumnVisible } from '../DataGrid/helpers';
 import { useDataGrid } from '../DataGrid/hooks';
 
-export const SqlRequestGridInner = <R, P extends object = {}>(
-  allProps: SqlRequestGridProps<R, P>,
-  ref: ForwardedRef<SqlRequestGridRefProps>
-) => {
+export const SqlRequestGrid = <R, P extends object = {}>({
+  ref,
+  ...allProps
+}: SqlRequestGridProps<R, P> & {
+  ref: Ref<SqlRequestGridRefProps>;
+}) => {
   const {
     rowHeight = styles.DEFAULT_ROW_HEIGHT,
     itemsPerRow,
@@ -311,5 +312,3 @@ export const SqlRequestGridInner = <R, P extends object = {}>(
     </DataGridContext.Provider>
   );
 };
-
-export const SqlRequestGrid = forwardRef(SqlRequestGridInner);

package/src/components/data/VirtualScroller/hooks.ts

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from 'react';
 
-import { useElementSize } from '../../../hooks';
+import { useElementSize } from '../../../hooks/useElementSize';
 
 export const VIRTUAL_SCROLL_TOLERANCE = 20;
 

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

@@ -8,7 +8,6 @@ import {
 } from 'react';
 
 import { ReadOnlyValue } from './styles';
-import { forwardRefWithName } from '../../../helpers/components';
 
 type CustomSelectProps<T> = {
   items: T[];
@@ -20,22 +19,20 @@ type CustomSelectProps<T> = {
   ref?: ForwardedRef<HTMLSelectElement>;
 };
 
-const CustomSelectInner = <T,>(
-  {
-    icon,
-    label,
-    items,
-    itemKey,
-    itemLabel,
-    readOnly,
-    onChange,
-    value,
-    ...props
-  }: FormRowProps &
-    Omit<SelectHTMLAttributes<HTMLSelectElement>, 'value' | 'onChange'> &
-    CustomSelectProps<T>,
-  ref: ForwardedRef<HTMLSelectElement>
-) => {
+export const CustomSelect = <T,>({
+  icon,
+  label,
+  items,
+  itemKey,
+  itemLabel,
+  readOnly,
+  onChange,
+  value,
+  ref,
+  ...props
+}: FormRowProps &
+  Omit<SelectHTMLAttributes<HTMLSelectElement>, 'value' | 'onChange'> &
+  CustomSelectProps<T>) => {
   const selectRef = useRef<HTMLSelectElement>(null);
   useImperativeHandle(ref, () => selectRef.current!, []);
 
@@ -87,8 +84,3 @@ const CustomSelectInner = <T,>(
     </FormRow>
   );
 };
-
-export const CustomSelect = forwardRefWithName(
-  CustomSelectInner,
-  'CustomSelect'
-);

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

@@ -2,7 +2,7 @@ import { FC, PropsWithChildren } from 'react';
 import { FormGroupContainer, FormGroupHeader } from './styles';
 
 import { IconFC } from '../../../Icons';
-import { ThemeColorWithIntensity } from '../../../providers/ThemeProvider';
+import { ThemeColorWithIntensity } from '../../../providers/ThemeProvider/types';
 
 type FormGroupProps = PropsWithChildren<{
   color?: ThemeColorWithIntensity;

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

@@ -8,7 +8,6 @@ import {
 } from 'react';
 
 import { ReadOnlyValue } from './styles';
-import { forwardRefWithName } from '../../../helpers/components';
 
 type SelectProps<T> = {
   items: T[];
@@ -20,22 +19,20 @@ type SelectProps<T> = {
   ref?: ForwardedRef<HTMLSelectElement>;
 };
 
-const SelectInner = <T,>(
-  {
-    icon,
-    label,
-    items,
-    itemKey,
-    itemLabel,
-    readOnly,
-    onChange,
-    value,
-    ...props
-  }: FormRowProps &
-    Omit<SelectHTMLAttributes<HTMLSelectElement>, 'value' | 'onChange'> &
-    SelectProps<T>,
-  ref: ForwardedRef<HTMLSelectElement>
-) => {
+export const Select = <T,>({
+  icon,
+  label,
+  items,
+  itemKey,
+  itemLabel,
+  readOnly,
+  onChange,
+  value,
+  ref,
+  ...props
+}: FormRowProps &
+  Omit<SelectHTMLAttributes<HTMLSelectElement>, 'value' | 'onChange'> &
+  SelectProps<T>) => {
   const selectRef = useRef<HTMLSelectElement>(null);
   useImperativeHandle(ref, () => selectRef.current!, []);
 
@@ -83,5 +80,3 @@ const SelectInner = <T,>(
     </FormRow>
   );
 };
-
-export const Select = forwardRefWithName(SelectInner, 'Select');

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

@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components';
 
-import { ThemeColorWithIntensity } from '../../../providers/ThemeProvider';
+import { ThemeColorWithIntensity } from '../../../providers/ThemeProvider/types';
 import { mediaQueries } from '../../../helpers/responsive';
 
 export const FormGroupContainer = styled.fieldset<{
@@ -54,7 +54,7 @@ export const FormGroupHeader = styled.div`
 
 export const inputCss = css`
   font-family: inherit;
-  font-size: var(--text-lg);
+  font-size: var(--text-base);
 
   border: none;
   color: var(--color-text-800);

package/src/components/forms/IconButton.tsx

@@ -2,8 +2,7 @@ import { Button, ButtonProps } from './Button';
 import { ButtonHTMLAttributes, ForwardedRef } from 'react';
 
 import { IconFC } from '../../Icons';
-import { ThemeSize } from '../../providers';
-import { forwardRefWithName } from '../../helpers/components';
+import { ThemeSize } from '../../providers/ThemeProvider/types';
 import styled from 'styled-components';
 
 type IconButtonProps = ButtonProps & {
@@ -48,20 +47,15 @@ const styles = {
   `,
 };
 
-export const IconButton = forwardRefWithName(
-  (
-    {
-      icon: Icon,
-      ...props
-    }: IconButtonProps &
-      ButtonHTMLAttributes<HTMLButtonElement> & {
-        ref?: ForwardedRef<HTMLButtonElement>;
-      },
-    ref: ForwardedRef<HTMLButtonElement>
-  ) => (
-    <styles.IconButton ref={ref} {...props}>
-      <Icon className="iconbutton-icon" />
-    </styles.IconButton>
-  ),
-  'IconButton'
+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/NumberInput.tsx

@@ -1,6 +1,6 @@
 import { HTMLProps, Ref, forwardRef, useEffect, useState } from 'react';
 import { Input, StyledNumericFormat } from './styles';
-import { decimalSeparator, parseNumber } from '../../helpers';
+import { decimalSeparator, parseNumber } from '../../helpers/numbers';
 
 const NumberInputInner = (
   {

package/src/components/layout/Dropdown/index.tsx

@@ -10,7 +10,7 @@ import {
   useRef,
 } from 'react';
 
-import { usePortals } from '../../../providers';
+import { usePortals } from '../../../providers/hooks';
 
 type DropdownProps = PropsWithChildren<
   styles.DropdownContainerProps & {

package/src/components/layout/Flexbox.ts

@@ -1,7 +1,7 @@
 import { SpaceProps, space } from '../../helpers/styled/space';
 
 import { CSSProperties } from 'react';
-import { ThemeSpace } from '../../providers';
+import { ThemeSpace } from '../../providers/ThemeProvider/types';
 import styled from 'styled-components';
 
 type FlexboxProps = {

package/src/components/layout/Loading/index.tsx

@@ -3,7 +3,7 @@ import * as styles from './styles';
 import { FC, PropsWithChildren, useMemo } from 'react';
 
 import { LoadingIcon } from '../../../Icons';
-import { usePortals } from '../../../providers';
+import { usePortals } from '../../../providers/hooks';
 
 type LoadingProps = PropsWithChildren<{
   visible?: boolean;

package/src/components/layout/Modal/index.tsx

@@ -2,7 +2,7 @@ import * as styles from './styles';
 
 import { FC, PropsWithChildren, useMemo } from 'react';
 
-import { usePortals } from '../../../providers';
+import { usePortals } from '../../../providers/hooks';
 
 type ModalProps = PropsWithChildren<
   styles.ModalContainerProps & {

package/src/components/layout/Modal/styles.ts

@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components';
 
-import { ThemeColor } from '../../../providers';
+import { ThemeColor } from '../../../providers/ThemeProvider/types';
 
 export const ModalBackdrop = styled.div.attrs({
   className: 'ModalBackdrop',

package/src/components/search/HighlightedText.tsx

@@ -1,5 +1,5 @@
 import { FC, HTMLAttributes, useMemo } from 'react';
-import { escapeForRegExp, extractTextFromHTML } from '../../helpers';
+import { escapeForRegExp, extractTextFromHTML } from '../../helpers/text';
 
 export const HighlightedText: FC<
   {

package/src/components/search/QuickSearchBar.tsx

@@ -10,11 +10,11 @@ import {
 } from 'react';
 import { SearchResults, SearchTypeDefinitions } from './types';
 
-import { Dropdown } from '../layout';
-import { Input } from '../forms';
+import { Dropdown } from '../layout/Dropdown';
+import { Input } from '../forms/styles';
 import { QuickSearchResults } from './QuickSearchResults';
 import { useDebounce } from '@uidotdev/usehooks';
-import { useGlobalSearchRequestHandler } from '../../services';
+import { useGlobalSearchRequestHandler } from '../../services/globalSearch';
 
 type QuickSearchBarProps<R> = {
   types: SearchTypeDefinitions<R>;

package/src/components/search/types.ts

@@ -1,5 +1,5 @@
+import { ConditionDTO, OrderByDTO } from '../../services/sqlRequests';
 import { FC, ReactNode } from 'react';
-import { ConditionDTO, OrderByDTO } from '../../services';
 
 export type SearchTypeDefinition<T> = {
   title: string;

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

@@ -2,7 +2,7 @@ import * as styles from './styles';
 
 import { FC, PropsWithChildren, useMemo } from 'react';
 
-import { ThemeColorWithIntensity } from '../../../providers';
+import { ThemeColorWithIntensity } from '../../../providers/ThemeProvider/types';
 import { sha256 } from 'hash.js';
 
 type AvatarProps = PropsWithChildren<

package/src/components/ui/Ellipsis.tsx

@@ -1,7 +1,6 @@
 import styled from 'styled-components';
 
 type EllipsisProps = React.HTMLAttributes<HTMLElement> & {
-  as?: keyof JSX.IntrinsicElements;
   $width?: string;
   $maxWidth?: string;
   $multiline?: boolean;

package/src/components/ui/Label.tsx

@@ -1,8 +1,7 @@
-import { ComponentProps, ForwardedRef } from 'react';
 import styled, { css } from 'styled-components';
 
+import { ComponentProps } from 'react';
 import { ThemeColor } from '../../providers/ThemeProvider/types';
-import { forwardRefWithName } from '../../helpers/components';
 
 export const StyledLabel = styled.span.withConfig({
   shouldForwardProp: () => true,
@@ -81,19 +80,14 @@ export type LabelProps = {
   bordered?: boolean;
 };
 
-export const Label = forwardRefWithName(
-  (
-    {
-      children,
-      size = 'medium',
-      className = '',
-      ...props
-    }: ComponentProps<typeof StyledLabel> & LabelProps,
-    ref: ForwardedRef<HTMLSpanElement>
-  ) => (
-    <StyledLabel ref={ref} className={`${size} ${className}`} {...props}>
-      {children}
-    </StyledLabel>
-  ),
-  'Label'
+export const Label = ({
+  children,
+  size = 'medium',
+  className = '',
+  ref,
+  ...props
+}: ComponentProps<typeof StyledLabel> & LabelProps) => (
+  <StyledLabel ref={ref} className={`${size} ${className}`} {...props}>
+    {children}
+  </StyledLabel>
 );

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

@@ -8,7 +8,7 @@ import {
 } from '../../../Icons';
 import { FC, PropsWithChildren } from 'react';
 
-import { ThemeColor } from '../../../providers';
+import { ThemeColor } from '../../../providers/ThemeProvider/types';
 
 type MessageType = 'success' | 'info' | 'warning' | 'error';
 
@@ -49,7 +49,7 @@ export const Message: FC<MessageProps> = ({ children, title, type }) => {
     <styles.MessageContainer $baseColor={baseColor}>
       <Icon className="MessageIcon" />
       <styles.MessageContent>
-        {title && <h3>{title}</h3>}
+        {title && <styles.MessageTitle>{title}</styles.MessageTitle>}
         <div>{children}</div>
       </styles.MessageContent>
     </styles.MessageContainer>

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

@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components';
 
-import { ThemeColor } from '../../../providers';
+import { ThemeColor } from '../../../providers/ThemeProvider/types';
 
 export const MessageContainer = styled.div.attrs({
   className: 'MessageContainer',
@@ -38,3 +38,7 @@ export const MessageContent = styled.div.attrs({
   flex-direction: column;
   flex-grow: 1;
 `;
+
+export const MessageTitle = styled.h3`
+  font-weight: bold;
+`;

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

@@ -1,5 +1,8 @@
 import { SpaceProps, space } from '../../../helpers/styled/space';
-import { ThemeColor, ThemeColorWithIntensity } from '../../../providers';
+import {
+  ThemeColor,
+  ThemeColorWithIntensity,
+} from '../../../providers/ThemeProvider/types';
 import styled, { css } from 'styled-components';
 
 import { getColorWithIntensity } from '../../../providers/ThemeProvider/helpers';

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

@@ -1,4 +1,7 @@
-import { ThemeColor, ThemeColorWithIntensity } from '../../../providers';
+import {
+  ThemeColor,
+  ThemeColorWithIntensity,
+} from '../../../providers/ThemeProvider/types';
 
 import { IconFC } from '../../../Icons';
 import { ReactNode } from 'react';

package/src/config/index.ts

@@ -1,3 +1,5 @@
+import { DeepPartial } from '../types';
+
 export type EnvType = 'dev' | 'test' | 'staging' | 'prod';
 
 export type Config = {
@@ -5,10 +7,4 @@ export type Config = {
   httpServerUrl: `${string}/`;
 };
 
-type DeepPartial<T> = T extends object
-  ? {
-      [P in keyof T]?: DeepPartial<T[P]>;
-    }
-  : T;
-
 export type PartialConfig = DeepPartial<Config>;

package/src/helpers/components.ts

@@ -1,18 +1,4 @@
-import { FC, ForwardRefRenderFunction, forwardRef } from 'react';
-
-export const forwardRefWithName = <
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  C extends ForwardRefRenderFunction<any, any>,
-  R = C extends ForwardRefRenderFunction<infer R, unknown> ? R : unknown,
-  P = C extends ForwardRefRenderFunction<unknown, infer P> ? P : unknown
->(
-  render: C,
-  displayName: string
-) => {
-  const forwardedComponent = forwardRef<R, P>(render);
-  forwardedComponent.displayName = displayName;
-  return forwardedComponent as unknown as C;
-};
+import { FC } from 'react';
 
 export const withDisplayName = <P = {}>(
   component: FC<P>,

package/src/helpers/styled/space.ts

@@ -1,4 +1,7 @@
-import { ThemeSpace, ThemeSpaceWithNegative } from '../../providers';
+import {
+  ThemeSpace,
+  ThemeSpaceWithNegative,
+} from '../../providers/ThemeProvider/types';
 
 import { css } from 'styled-components';
 

package/src/hooks/useMutableState.ts

@@ -1,8 +1,16 @@
 import { useCallback, useMemo, useState } from 'react';
 
-import { DeepPartial } from '../typings';
+import { DeepPartial } from '../types';
 import { defaultsDeep } from 'lodash';
 
+export type PartialSetStateAction<T> = (partialValue: DeepPartial<T>) => void;
+
+export type UseMutableStateReturn<T> = readonly [
+  T,
+  React.Dispatch<React.SetStateAction<T>>,
+  PartialSetStateAction<T>
+];
+
 export const useMutableState = <T>(initialValue: T | (() => T) = {} as T) => {
   const [value, setValue] = useState<T>(initialValue);
 

package/src/index.ts

@@ -1,13 +1,101 @@
-export * from './components';
-export * from './providers';
+export * from './components/auth/LoginForm';
+export * from './components/auth/LoginPage';
+export * from './components/auth/PasswordRecoveryForm';
+export * from './components/auth/PasswordResetForm';
 
-export * from './Icons';
+export * from './components/data/DataGrid';
+export * from './components/data/DataGrid/helpers';
+export * from './components/data/DataGrid/styles';
+export * from './components/data/DataGrid/types';
+export * from './components/data/SqlRequestDataGrid';
+export * from './components/data/SqlRequestDataGrid/helpers';
+export * from './components/data/SqlRequestDataGrid/types';
+export * from './components/data/SqlRequestGrid';
+export * from './components/data/SqlRequestGrid/types';
+export * from './components/data/SqlRequestForeignList';
+export * from './components/data/VirtualScroller';
+export * from './components/data/VirtualScroller/types';
 
-export * from './config';
-export * from './helpers';
-export * from './hooks';
-export * from './services';
+export * from './components/forms/AutoTextArea';
+export * from './components/forms/Button';
+export * from './components/forms/Select';
+export * from './components/forms/IconButton';
+export * from './components/forms/IndeterminateCheckbox';
+export * from './components/forms/Form';
+export * from './components/forms/Form/Row';
+export * from './components/forms/styles';
+export * from './components/forms/NumberInput';
 
-// helpers
-export * from './helpers/styled/typography';
+export * from './components/layout/Columns';
+export * from './components/layout/Dropdown';
+export * from './components/layout/Flexbox';
+export * from './components/layout/Grid';
+export * from './components/layout/Loading';
+export * from './components/layout/Masonry';
+export * from './components/layout/Modal';
+
+export * from './components/search/QuickSearchBar';
+export * from './components/search/QuickSearchResults';
+export * from './components/search/HighlightedText';
+export * from './components/search/types';
+export * from './components/search/styles';
+
+export * from './components/ui/Avatar';
+export * from './components/ui/Card';
+export * from './components/ui/ContextMenu';
+export * from './components/ui/Ellipsis';
+export * from './components/ui/Label';
+export * from './components/ui/Message';
+export * from './components/ui/TabsView';
+
+export * from './helpers/dates';
+export * from './helpers/numbers';
+export * from './helpers/text';
+export * from './helpers/responsive';
 export * from './helpers/styled/space';
+export * from './helpers/styled/typography';
+
+export * from './types';
+
+export * from './hooks/useElementSize';
+export * from './hooks/useShowArchived';
+export * from './hooks/useWindowSize';
+export * from './hooks/useMediaQuery';
+export * from './hooks/useContainerMediaQuery';
+export * from './hooks/useMediaQueryForWidth';
+export * from './hooks/useMutableState';
+
+export * from './providers/AuthenticationProvider';
+export * from './providers/PortalsProvider';
+export * from './providers/ThemeProvider';
+export * from './providers/ThemeProvider/types';
+export * from './providers/ThemeProvider/defaultTheme';
+export * from './providers/ThemeProvider/helpers';
+export * from './providers/TrackingProvider';
+export * from './providers/UiProviders';
+export * from './providers/ToastProvider';
+export * from './providers/hooks';
+
+export * from './services/WebSocketService';
+export * from './services/HttpService';
+export * from './services/hooks';
+export * from './services/globalSearch';
+
+export * from './services/requests/auth';
+export * from './services/requests/generic';
+export * from './services/requests/tracking';
+export * from './services/requests/users';
+export * from './services/requests/userProfiles';
+
+export * from './services/types/auth';
+export * from './services/types/base';
+export * from './services/types/generic';
+export * from './services/types/tracking';
+export * from './services/types/users';
+export * from './services/types/userProfiles';
+
+export * from './services/sqlRequests';
+export * from './services/updateSqlRequests';
+
+export * from './Icons';
+export * from './config';

package/src/providers/AuthenticationProvider/index.tsx

@@ -8,16 +8,16 @@ import {
   useState,
 } from 'react';
 import {
-  UserDTO,
-  WebSocketService,
   useAuthenticateRequestHandler,
   useCheckRecoveryKeyRequestHandler,
   useLoginRequestHandler,
   useLogoutRequestHandler,
   useResetPasswordRequestHandler,
   useSendRecoveryKeyRequestHandler,
-} from '../../services';
+} from '../../services/requests/auth';
 
+import { UserDTO } from '../../services/types/users';
+import { WebSocketService } from '../../services/WebSocketService';
 import { basePermissions } from './helpers';
 
 export type AuthenticationContextProps = {

package/src/providers/LoadingProvider/index.tsx

@@ -7,7 +7,7 @@ import {
   useState,
 } from 'react';
 
-import { Loading } from '../../components';
+import { Loading } from '../../components/layout/Loading';
 
 export type LoadingContextType = {
   startLoading: () => void;

package/src/providers/ThemeProvider/helpers.ts

@@ -6,7 +6,7 @@ import {
 } from './types';
 import { defaultDarkTheme, defaultTheme } from './defaultTheme';
 
-import { DeepPartial } from '../../typings';
+import { DeepPartial } from '../../types';
 import { defaultsDeep } from 'lodash';
 
 export const extendTheme = (