@addev-be/ui 2.0.0 → 2.1.1

package/src/components/data/DataGrid/DataGridFilterMenu/FilterValuesScroller.tsx

@@ -11,7 +11,7 @@ import { defaultRendererAndFormatter, getCheckboxes } from '../helpers';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { debounce } from 'lodash';
-import { useElementSize } from '../../../../hooks';
+import { useElementSize } from '../../../../hooks/useElementSize';
 
 const CheckboxTemplate = ({
   selectedValues,

package/src/components/data/DataGrid/DataGridFilterMenu/hooks.tsx

@@ -6,7 +6,7 @@ import {
 import { FilterIcon, FilterSlashIcon } from '../../../../Icons';
 import { useCallback, useState } from 'react';
 
-import { Button } from '../../../forms';
+import { Button } from '../../../forms/Button';
 import { FilterModalContent } from '../FilterModalContent';
 import { Modal } from '../../../layout/Modal';
 import { useDataGridContext } from '../hooks';

package/src/components/data/DataGrid/DataGridFilterMenu/index.tsx

@@ -45,7 +45,7 @@ import {
 
 import { ContextMenu } from '../../../ui/ContextMenu';
 import { FilterValuesScroller } from './FilterValuesScroller';
-import { Input } from '../../../forms';
+import { Input } from '../../../forms/styles';
 import { MenuContainer } from '../../../ui/ContextMenu/styles';
 import { sortAvailableValues } from './helpers';
 import { useFilterModal } from './hooks';

package/src/components/data/DataGrid/DataGridHeaderCell.tsx

@@ -7,10 +7,10 @@ import { useCallback, useMemo, useRef, useState } from 'react';
 import { ChevronDownIcon } from '../../../Icons';
 import { DataGridFilterMenu } from './DataGridFilterMenu';
 import { DataGridHeaderCellProps } from './types';
-import { Dropdown } from '../../layout';
+import { Dropdown } from '../../layout/Dropdown';
 import { IconButton } from '../../forms/IconButton';
 import { useDataGridContext } from './hooks';
-import { useUi } from '../../../providers';
+import { useUi } from '../../../providers/hooks';
 
 export const DataGridHeaderCell = <R,>({
   columnKey,

package/src/components/data/DataGrid/DataGridToolbar.tsx

@@ -10,9 +10,9 @@ import {
 } from '../../../Icons';
 import { useCallback, useState } from 'react';
 
-import { Button } from '../../forms';
+import { Button } from '../../forms/Button';
 import { DataGridContext } from './types';
-import { Loading } from '../../layout';
+import { Loading } from '../../layout/Loading';
 import { useDataGridColumnsModal } from './DataGridColumnsModal/hooks';
 import { useDataGridContext } from './hooks';
 import { useRefreshModal } from './hooks/useRefreshModal';

package/src/components/data/DataGrid/FilterModalContent/index.tsx

@@ -7,9 +7,11 @@ import {
   DataGridFilterOperator,
   DataGridFilterType,
 } from '../types';
-import { Input, Select } from '../../../forms';
 import { useEffect, useRef } from 'react';
 
+import { Input } from '../../../forms/styles';
+import { Select } from '../../../forms/Select';
+
 // import { Select } from '../../Select';
 // import clx from 'classnames';
 

package/src/components/data/DataGrid/helpers/columns.tsx

@@ -11,7 +11,7 @@ import {
   DataGridTextColumn,
 } from '../types';
 import { dateFilter, numberFilter, textFilter } from './filters';
-import { formatDate, formatDateTime } from '../../../../helpers';
+import { formatDate, formatDateTime } from '../../../../helpers/dates';
 import {
   formatMoney,
   formatNumber,

package/src/components/data/DataGrid/hooks/useDataGridSettings.ts

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState } from 'react';
 
 import { DataGridSettings } from '../types';
-import { useSettings } from '../../../../providers';
+import { useSettings } from '../../../../providers/hooks';
 
 export const useDataGridSettings = (name?: string) => {
   // TODO: Implement settings context

package/src/components/data/DataGrid/hooks/useRefreshModal.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useMemo, useState } from 'react';
 
-import { Button } from '../../../forms';
+import { Button } from '../../../forms/Button';
 import { Modal } from '../../../layout/Modal';
 import { TriangleExclamationIcon } from '../../../../Icons';
 

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

@@ -21,7 +21,7 @@ export const DataGrid = <R,>({
   ...props
 }: DataGridProps<R> & {
   contextOverride?: Partial<DataGridContextProps<R>>;
-  ref: React.Ref<DataGridRefProps<R>>;
+  ref?: React.Ref<DataGridRefProps<R>>;
 }) => {
   const scrollableRef = useRef<HTMLDivElement>(null);
   const { className } = props;

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

@@ -4,7 +4,7 @@ import {
   ConditionDTO,
   OrderByDTO,
   useSqlRequestHandler,
-} from '../../../services';
+} from '../../../services/sqlRequests';
 import {
   MouseEvent,
   Ref,
@@ -26,7 +26,7 @@ import {
 } from './types';
 
 import { ChevronDownIcon } from '../../../Icons';
-import { Dropdown } from '../../layout';
+import { Dropdown } from '../../layout/Dropdown';
 import { VirtualScroller } from '../VirtualScroller';
 import { VirtualScrollerTemplateFC } from '../VirtualScroller/types';
 import { debounce } from 'lodash';

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

@@ -1,4 +1,4 @@
-import { ConditionDTO, OrderByDTO } from '../../../services';
+import { ConditionDTO, OrderByDTO } from '../../../services/sqlRequests';
 
 import { VirtualScrollerTemplateFC } from '../VirtualScroller/types';
 

package/src/components/data/SqlRequestGrid/filters/FiltersSidebar.tsx

@@ -11,7 +11,7 @@ import { SqlRequestGridColumnWithFilter, SqlRequestGridProps } from '../types';
 
 import { DataGridContext } from '../../DataGrid/types';
 import { DataGridFilterMenu } from '../../DataGrid/DataGridFilterMenu';
-import { IconButton } from '../../../forms';
+import { IconButton } from '../../../forms/IconButton';
 
 type FiltersSidebarProps<R, P extends object = {}> = {
   props: SqlRequestGridProps<R, P>;

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

@@ -24,7 +24,7 @@ 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';

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/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/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<{

package/src/components/forms/IconButton.tsx

@@ -2,7 +2,7 @@ import { Button, ButtonProps } from './Button';
 import { ButtonHTMLAttributes, ForwardedRef } from 'react';
 
 import { IconFC } from '../../Icons';
-import { ThemeSize } from '../../providers';
+import { ThemeSize } from '../../providers/ThemeProvider/types';
 import styled from 'styled-components';
 
 type IconButtonProps = ButtonProps & {

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/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';
 

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',

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/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/index.ts

@@ -1,13 +1,102 @@
-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/TrackingProvider/hooks';
+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/index.ts

@@ -1,5 +1,66 @@
-export { ThemeProvider } from './ThemeProvider';
+import { Theme } from './types';
+import { defaultTheme } from './defaultTheme';
+import styled from 'styled-components';
 
-export * from './types';
-export { defaultTheme } from './defaultTheme';
-export * from './helpers';
+type ThemeProviderProps = {
+  $theme?: Theme;
+  $darkTheme?: Theme;
+  $darkMode?: boolean;
+};
+
+const getThemeValuesCss = (
+  prefix: string,
+  obj: Record<string, string> | undefined
+) => {
+  return Object.entries(obj ?? {})
+    .map(([key, value]) => {
+      return `--${prefix}-${key}: ${value};`;
+    })
+    .join('');
+};
+
+const getThemeColorsCss = (colors: Theme['colors'], darkMode = false) => {
+  return Object.entries(colors ?? {})
+    .map(([color, intensities]) =>
+      Object.entries(
+        (typeof intensities === 'string'
+          ? (colors ?? {})[intensities] ??
+            (defaultTheme.colors ?? {})[intensities]
+          : intensities) ?? {}
+      )
+        .map(
+          ([intensity, value]) =>
+            `--color-${color}-${
+              darkMode ? 1000 - Number(intensity) : intensity
+            }: ${value};`
+        )
+        .join('')
+    )
+    .join('');
+};
+
+export const ThemeProvider = styled.div<ThemeProviderProps>`
+  display: contents;
+  ${({ $theme = {}, $darkTheme, $darkMode }) => {
+    const theme = $darkMode ? $darkTheme ?? $theme : $theme;
+    const darkMode = !$darkTheme && $darkMode;
+    return [
+      getThemeColorsCss(theme.colors, darkMode),
+      getThemeValuesCss('font', theme.fonts),
+      getThemeValuesCss('text', theme.texts),
+      getThemeValuesCss('weight', theme.weights),
+      getThemeValuesCss('space', theme.spaces),
+      getThemeValuesCss('size', theme.sizes),
+      getThemeValuesCss('rounded', theme.rounded),
+      getThemeValuesCss('shadow', theme.shadows),
+    ].join('');
+  }}
+
+  a, a:visited {
+    color: var(--color-primary-500);
+  }
+  a:active,
+  a:hover {
+    color: var(--color-primary-700);
+  }
+`;

package/src/providers/TrackingProvider/index.tsx

@@ -7,7 +7,7 @@ import {
   useState,
 } from 'react';
 
-import { useSendTrackingEventRequestHandler } from '../../services';
+import { useSendTrackingEventRequestHandler } from '../../services/requests/tracking';
 
 export type TrackingContextType = {
   sendEvent: (

package/src/providers/UiProviders/index.tsx

@@ -15,7 +15,7 @@ import {
 import { PortalsProvider } from '../PortalsProvider';
 import { SettingsProvider } from '../SettingsProvider';
 import { Theme } from '../ThemeProvider/types';
-import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
+import { ThemeProvider } from '../ThemeProvider';
 import { TrackingProvider } from '../TrackingProvider';
 import { defaultTheme } from '../ThemeProvider/defaultTheme';
 

package/src/services/hooks.ts

@@ -2,7 +2,7 @@ import { WebSocketError, WebSocketService } from './WebSocketService';
 import { useCallback, useState } from 'react';
 
 import { HttpService } from './HttpService';
-import { useLoading } from '../providers';
+import { useLoading } from '../providers/hooks';
 
 export const useLoadingRequestHandler = <TReq, TRes>(
   name: string