From 2ebc5d7f7d7600613305b5bb30116fb2c0979957 Mon Sep 17 00:00:00 2001 From: Adam Kudrna Date: Thu, 18 Jan 2024 17:35:08 +0100 Subject: [PATCH] Refactor(web-react): Clean up shared non-dictionary types and constants --- .../src/components/FileUploader/constants.ts | 7 +++++++ .../FileUploader/useFileUploaderStyleProps.ts | 3 +-- .../components/ScrollView/useScrollPosition.ts | 18 +++++++++--------- .../web-react/src/constants/dictionaries.ts | 10 +--------- packages/web-react/src/constants/index.ts | 2 +- .../constants/{alignment.ts => position.ts} | 2 +- .../web-react/src/types/shared/alignments.ts | 4 ---- packages/web-react/src/types/shared/colors.ts | 6 ------ .../web-react/src/types/shared/dictionaries.ts | 3 ++- packages/web-react/src/types/shared/index.ts | 3 +-- .../web-react/src/types/shared/positions.ts | 4 ++++ 11 files changed, 27 insertions(+), 35 deletions(-) rename packages/web-react/src/constants/{alignment.ts => position.ts} (74%) delete mode 100644 packages/web-react/src/types/shared/alignments.ts delete mode 100644 packages/web-react/src/types/shared/colors.ts create mode 100644 packages/web-react/src/types/shared/positions.ts diff --git a/packages/web-react/src/components/FileUploader/constants.ts b/packages/web-react/src/components/FileUploader/constants.ts index b18053e27a..16855c0120 100644 --- a/packages/web-react/src/components/FileUploader/constants.ts +++ b/packages/web-react/src/components/FileUploader/constants.ts @@ -10,3 +10,10 @@ export const DEFAULT_ERROR_MESSAGE_UNSUPPORTED_FILE = 'This file type is not sup export const DEFAULT_ICON_NAME = 'file'; export const DEFAULT_BUTTON_LABEL = 'Remove'; export const DEFAULT_EDIT_BUTTON_LABEL = 'Edit'; + +export const FileUploaderCropCSS = { + TOP: '--file-uploader-attachment-image-top', + LEFT: '--file-uploader-attachment-image-left', + WIDTH: '--file-uploader-attachment-image-width', + HEIGHT: '--file-uploader-attachment-image-height', +} as const; diff --git a/packages/web-react/src/components/FileUploader/useFileUploaderStyleProps.ts b/packages/web-react/src/components/FileUploader/useFileUploaderStyleProps.ts index ba711bbbca..88e5228bb4 100644 --- a/packages/web-react/src/components/FileUploader/useFileUploaderStyleProps.ts +++ b/packages/web-react/src/components/FileUploader/useFileUploaderStyleProps.ts @@ -1,9 +1,8 @@ import classNames from 'classnames'; import { CSSProperties } from 'react'; -import { FileUploaderCropCSS } from '../../constants/dictionaries'; import { useClassNamePrefix } from '../../hooks'; import { FileMetadata, FileUploaderQueueLimitBehaviorType, Validation } from '../../types'; -import { IMAGE_DIMENSION } from './constants'; +import { FileUploaderCropCSS, IMAGE_DIMENSION } from './constants'; export interface FileUploaderStyleProps extends Validation { imageObjectFit?: 'contain' | 'cover'; diff --git a/packages/web-react/src/components/ScrollView/useScrollPosition.ts b/packages/web-react/src/components/ScrollView/useScrollPosition.ts index d0291ce7ac..ac5228bd5c 100644 --- a/packages/web-react/src/components/ScrollView/useScrollPosition.ts +++ b/packages/web-react/src/components/ScrollView/useScrollPosition.ts @@ -1,7 +1,7 @@ import { UIEvent, MutableRefObject, useState, useEffect } from 'react'; import { debounce } from '../../utils'; -import { ScrollViewDirectionType, AlignmentDictionaryType } from '../../types'; -import { Alignment, Direction } from '../../constants'; +import { PositionType, ScrollViewDirectionType } from '../../types'; +import { Direction, Position } from '../../constants'; import { EDGE_DETECTION_INACCURACY_PX, DEBOUNCE_DELAY } from './constants'; export interface UseScrollPositionProps { @@ -17,7 +17,7 @@ export interface UseScrollPositionReturn { } export type CurrentPositionProps = { - [key in AlignmentDictionaryType]: number; + [key in PositionType]: number; }; export const useScrollPosition = ({ @@ -37,17 +37,17 @@ export const useScrollPosition = ({ const viewportPosition: DOMRect = viewportReference.current.getBoundingClientRect(); return { - [Alignment.BOTTOM]: contentPosition.bottom - viewportPosition.bottom, - [Alignment.LEFT]: contentPosition.left - viewportPosition.left, - [Alignment.RIGHT]: contentPosition.right - viewportPosition.right, - [Alignment.TOP]: contentPosition.top - viewportPosition.top, + [Position.BOTTOM]: contentPosition.bottom - viewportPosition.bottom, + [Position.LEFT]: contentPosition.left - viewportPosition.left, + [Position.RIGHT]: contentPosition.right - viewportPosition.right, + [Position.TOP]: contentPosition.top - viewportPosition.top, }; }; const handleScrollViewState = () => { const isDirectionHorizontal = direction === Direction.HORIZONTAL; - const scrollPositionStart = isDirectionHorizontal ? Alignment.LEFT : Alignment.TOP; - const scrollPositionEnd = isDirectionHorizontal ? Alignment.RIGHT : Alignment.BOTTOM; + const scrollPositionStart = isDirectionHorizontal ? Position.LEFT : Position.TOP; + const scrollPositionEnd = isDirectionHorizontal ? Position.RIGHT : Position.BOTTOM; const currentPosition = getElementsPositionDifference(); if (!currentPosition) { diff --git a/packages/web-react/src/constants/dictionaries.ts b/packages/web-react/src/constants/dictionaries.ts index 139e8fc90f..c35f392480 100644 --- a/packages/web-react/src/constants/dictionaries.ts +++ b/packages/web-react/src/constants/dictionaries.ts @@ -5,7 +5,7 @@ export const AlignmentX = { RIGHT: 'right', } as const; -/* Colors */ +/* Color */ export const ActionColors = { PRIMARY: 'primary', SECONDARY: 'secondary', @@ -77,11 +77,3 @@ export const ValidationStates = { WARNING: 'warning', DANGER: 'danger', } as const; - -/* FileUploader CSS crop */ -export const FileUploaderCropCSS = { - TOP: '--file-uploader-attachment-image-top', - LEFT: '--file-uploader-attachment-image-left', - WIDTH: '--file-uploader-attachment-image-width', - HEIGHT: '--file-uploader-attachment-image-height', -} as const; diff --git a/packages/web-react/src/constants/index.ts b/packages/web-react/src/constants/index.ts index 2566337c46..3826d029e2 100644 --- a/packages/web-react/src/constants/index.ts +++ b/packages/web-react/src/constants/index.ts @@ -1,3 +1,3 @@ -export * from './alignment'; export * from './dictionaries'; export * from './direction'; +export * from './position'; diff --git a/packages/web-react/src/constants/alignment.ts b/packages/web-react/src/constants/position.ts similarity index 74% rename from packages/web-react/src/constants/alignment.ts rename to packages/web-react/src/constants/position.ts index 1bda2d24b0..7647a137af 100644 --- a/packages/web-react/src/constants/alignment.ts +++ b/packages/web-react/src/constants/position.ts @@ -1,4 +1,4 @@ -export const Alignment = { +export const Position = { LEFT: 'left', RIGHT: 'right', TOP: 'top', diff --git a/packages/web-react/src/types/shared/alignments.ts b/packages/web-react/src/types/shared/alignments.ts deleted file mode 100644 index a6d2759d61..0000000000 --- a/packages/web-react/src/types/shared/alignments.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { Alignment } from '../../constants'; - -export type AlignmentDictionaryKeys = keyof typeof Alignment; -export type AlignmentDictionaryType = (typeof Alignment)[AlignmentDictionaryKeys]; diff --git a/packages/web-react/src/types/shared/colors.ts b/packages/web-react/src/types/shared/colors.ts deleted file mode 100644 index 7b17e6c278..0000000000 --- a/packages/web-react/src/types/shared/colors.ts +++ /dev/null @@ -1,6 +0,0 @@ -export type Color = 'primary' | 'secondary' | 'tertiary' | 'inverted' | 'success' | 'danger'; - -export interface ColorProps { - /** The color of the component. */ - color?: Color; -} diff --git a/packages/web-react/src/types/shared/dictionaries.ts b/packages/web-react/src/types/shared/dictionaries.ts index 3b9a96d5a2..d401c43bc6 100644 --- a/packages/web-react/src/types/shared/dictionaries.ts +++ b/packages/web-react/src/types/shared/dictionaries.ts @@ -10,10 +10,11 @@ import { ValidationStates, } from '../../constants'; +/* Alignment */ export type AlignmentXDictionaryKeys = keyof typeof AlignmentX; export type AlignmentXDictionaryType = (typeof AlignmentX)[AlignmentXDictionaryKeys] | T; -/* Colors */ +/* Color */ export type ActionColorsDictionaryKeys = keyof typeof ActionColors; export type ActionColorsDictionaryType = (typeof ActionColors)[ActionColorsDictionaryKeys] | C; diff --git a/packages/web-react/src/types/shared/index.ts b/packages/web-react/src/types/shared/index.ts index 0df7af27df..dcdbf8492b 100644 --- a/packages/web-react/src/types/shared/index.ts +++ b/packages/web-react/src/types/shared/index.ts @@ -1,8 +1,6 @@ import { ReactNode, ElementType, JSXElementConstructor } from 'react'; export * from './adornments'; -export * from './alignments'; -export * from './colors'; export * from './dialogs'; export * from './dictionaries'; export * from './directions'; @@ -12,6 +10,7 @@ export * from './element'; export * from './events'; export * from './inputs'; export * from './item'; +export * from './positions'; export * from './refs'; export * from './rest'; export * from './style'; diff --git a/packages/web-react/src/types/shared/positions.ts b/packages/web-react/src/types/shared/positions.ts new file mode 100644 index 0000000000..ecdab55161 --- /dev/null +++ b/packages/web-react/src/types/shared/positions.ts @@ -0,0 +1,4 @@ +import { Position } from '../../constants'; + +export type PositionKeys = keyof typeof Position; +export type PositionType = (typeof Position)[PositionKeys];