refactor: typing cleanup

searchspring · Jul 16, 2024 · 7fb90da · 7fb90da
1 parent e8be32f
commit 7fb90da
Show file tree

Hide file tree

Showing 18 changed files with 61 additions and 74 deletions.
diff --git a/packages/snap-preact/components/src/components/Atoms/Button/Button.tsx b/packages/snap-preact/components/src/components/Atoms/Button/Button.tsx
@@ -8,7 +8,7 @@ import { ComponentProps, StylingCSS } from '../../../types';
 import { Theme, useTheme, CacheProvider } from '../../../providers';
 import { useA11y } from '../../../hooks/useA11y';
 import { defined, mergeProps } from '../../../utilities';
-import { Icon, IconProps } from '../Icon';
+import { Icon, IconProps, IconType } from '../Icon';
 
 const CSS = {
 	button: ({ color, backgroundColor, borderColor, theme }: Partial<ButtonProps>) =>
@@ -93,13 +93,13 @@ export const Button = observer((properties: ButtonProps): JSX.Element => {
 				<button {...elementProps}>
 					{content}
 					{children}
-					{icon && <Icon {...subProps.icon} {...(typeof icon == 'string' ? { icon: icon as string } : (icon as Partial<IconProps>))} />}
+					{icon && <Icon {...subProps.icon} {...(typeof icon == 'string' ? { icon: icon } : (icon as Partial<IconProps>))} />}
 				</button>
 			) : (
 				<div {...(!disableA11y ? a11yProps : {})} {...elementProps} role={'button'} aria-disabled={disabled}>
 					{content}
 					{children}
-					{icon && <Icon {...subProps.icon} {...(typeof icon == 'string' ? { icon: icon as string } : (icon as Partial<IconProps>))} />}
+					{icon && <Icon {...subProps.icon} {...(typeof icon == 'string' ? { icon: icon } : (icon as Partial<IconProps>))} />}
 				</div>
 			)}
 		</CacheProvider>
@@ -116,7 +116,7 @@ export interface ButtonProps extends ComponentProps {
 	backgroundColor?: string;
 	borderColor?: string;
 	color?: string;
-	icon?: string | Partial<IconProps>;
+	icon?: IconType | Partial<IconProps>;
 	content?: string | JSX.Element;
 	children?: ComponentChildren;
 	disabled?: boolean;

diff --git a/packages/snap-preact/components/src/components/Atoms/Icon/Icon.tsx b/packages/snap-preact/components/src/components/Atoms/Icon/Icon.tsx
@@ -30,7 +30,7 @@ export function Icon(properties: IconProps): JSX.Element {
 
 	const { color, icon, path, children, size, width, height, viewBox, disableStyles, className, style, styleScript, ...otherProps } = props;
 
-	const iconPath = iconPaths[icon as keyof typeof iconPaths] || path;
+	const iconPath = iconPaths[icon as IconType] || path;
 	const pathType = typeof iconPath;
 	const styling: { css?: StylingCSS } = {};
 	const stylingProps = props;
@@ -79,7 +79,7 @@ export type SVGPathElement = {
 
 export interface IconProps extends ComponentProps {
 	color?: string;
-	icon?: IconType | string;
+	icon?: IconType;
 	path?: string | SVGPathElement[];
 	children?: ComponentChildren;
 	size?: string | number;

diff --git a/packages/snap-preact/components/src/components/Molecules/Checkbox/Checkbox.tsx b/packages/snap-preact/components/src/components/Molecules/Checkbox/Checkbox.tsx
@@ -8,7 +8,7 @@ import { observer } from 'mobx-react';
 import { ComponentProps, StylingCSS } from '../../../types';
 import { defined, mergeProps } from '../../../utilities';
 import { Theme, useTheme, CacheProvider } from '../../../providers';
-import { Icon, IconProps } from '../../Atoms/Icon';
+import { Icon, IconProps, IconType } from '../../Atoms/Icon';
 import { useA11y } from '../../../hooks/useA11y';
 
 const CSS = {
@@ -143,7 +143,7 @@ export const Checkbox = observer((properties: CheckboxProps): JSX.Element => {
 					aria-checked={checkedState}
 				>
 					{checkedState ? (
-						<Icon {...subProps.icon} {...(typeof icon == 'string' ? { icon: icon as string } : (icon as Partial<IconProps>))} />
+						<Icon {...subProps.icon} {...(typeof icon == 'string' ? { icon: icon } : (icon as Partial<IconProps>))} />
 					) : (
 						<span className="ss__checkbox__empty" />
 					)}
@@ -160,7 +160,7 @@ export interface CheckboxProps extends ComponentProps {
 	checked?: boolean;
 	color?: string;
 	disabled?: boolean;
-	icon?: string | Partial<IconProps>;
+	icon?: IconType | Partial<IconProps>;
 	iconColor?: string;
 	onClick?: (e: React.MouseEvent<HTMLInputElement | HTMLSpanElement, MouseEvent>) => void;
 	size?: string | number;

diff --git a/packages/snap-preact/components/src/components/Molecules/Filter/Filter.tsx b/packages/snap-preact/components/src/components/Molecules/Filter/Filter.tsx
@@ -8,7 +8,7 @@ import { defined, mergeProps } from '../../../utilities';
 import { Theme, useTheme, CacheProvider } from '../../../providers';
 import { ComponentProps, StylingCSS } from '../../../types';
 import { Button, ButtonProps } from '../../Atoms/Button';
-import { Icon, IconProps } from '../../Atoms/Icon';
+import { Icon, IconProps, IconType } from '../../Atoms/Icon';
 import type { Filter as FilterType } from '@searchspring/snap-store-mobx';
 import type { UrlManager } from '@searchspring/snap-url-manager';
 
@@ -97,7 +97,7 @@ export const Filter = observer((properties: FilterProps): JSX.Element => {
 				href={link?.href}
 			>
 				<Button {...subProps.button} disableA11y={true}>
-					<Icon {...subProps.icon} {...(typeof icon == 'string' ? { icon: icon as string } : (icon as Partial<IconProps>))} />
+					<Icon {...subProps.icon} {...(typeof icon == 'string' ? { icon: icon } : (icon as Partial<IconProps>))} />
 					{!hideFacetLabel && (
 						<span className="ss__filter__label">
 							{label}
@@ -120,7 +120,7 @@ export interface FilterProps extends ComponentProps {
 	url?: UrlManager;
 	hideFacetLabel?: boolean;
 	onClick?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
-	icon?: string | Partial<IconProps>;
+	icon?: IconType | Partial<IconProps>;
 	separator?: string;
 }
 

diff --git a/packages/snap-preact/components/src/components/Molecules/List/List.tsx b/packages/snap-preact/components/src/components/Molecules/List/List.tsx
@@ -190,10 +190,7 @@ export function List(properties: ListProps): JSX.Element {
 								{!hideOptionCheckboxes && <Checkbox {...subProps.checkbox} checked={selected} disableA11y={true} />}
 
 								{option.icon && !hideOptionIcons && (
-									<Icon
-										{...subProps.icon}
-										{...(typeof option.icon == 'string' ? { icon: option.icon as string } : (option.icon as Partial<IconProps>))}
-									/>
+									<Icon {...subProps.icon} {...(typeof option.icon == 'string' ? { icon: option.icon } : (option.icon as Partial<IconProps>))} />
 								)}
 
 								{!hideOptionLabels && (option.label || !option.icon) && (

diff --git a/packages/snap-preact/components/src/components/Molecules/LoadMore/LoadMore.tsx b/packages/snap-preact/components/src/components/Molecules/LoadMore/LoadMore.tsx
@@ -11,7 +11,7 @@ import { useIntersection } from '../../../hooks';
 import type { SearchPaginationStore } from '@searchspring/snap-store-mobx';
 import type { SearchController } from '@searchspring/snap-controller';
 import { Button, ButtonProps } from '../../Atoms/Button';
-import { Icon, IconProps } from '../../Atoms/Icon';
+import { Icon, IconProps, IconType } from '../../Atoms/Icon';
 import { useFuncDebounce } from '../../../hooks';
 
 const CSS = {
@@ -253,20 +253,14 @@ export const LoadMore = observer((properties: LoadMoreProps): JSX.Element => {
 						>
 							{loadMoreText}
 							{loadingIcon && isLoading && loadingLocation === 'button' ? (
-								<Icon
-									{...subProps.icon}
-									{...(typeof loadingIcon == 'string' ? { icon: loadingIcon as string } : (loadingIcon as Partial<IconProps>))}
-								/>
+								<Icon {...subProps.icon} {...(typeof loadingIcon == 'string' ? { icon: loadingIcon } : (loadingIcon as Partial<IconProps>))} />
 							) : (
 								<Fragment></Fragment>
 							)}
 						</Button>
 
 						{loadingLocation === 'outside' && isLoading && (
-							<Icon
-								{...subProps.icon}
-								{...(typeof loadingIcon == 'string' ? { icon: loadingIcon as string } : (loadingIcon as Partial<IconProps>))}
-							/>
+							<Icon {...subProps.icon} {...(typeof loadingIcon == 'string' ? { icon: loadingIcon } : (loadingIcon as Partial<IconProps>))} />
 						)}
 					</Fragment>
 				)}
@@ -337,7 +331,7 @@ export interface LoadMoreProps extends ComponentProps {
 	progressIndicatorSize?: string;
 	hideProgressIndicator?: boolean;
 	hideProgressText?: boolean;
-	loadingIcon?: string | Partial<IconProps>;
+	loadingIcon?: IconType | Partial<IconProps>;
 	loadingLocation?: 'button' | 'outside';
 	onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
 }
diff --git a/packages/snap-preact/components/src/components/Molecules/Radio/Radio.tsx b/packages/snap-preact/components/src/components/Molecules/Radio/Radio.tsx
@@ -8,7 +8,7 @@ import { observer } from 'mobx-react-lite';
 import { ComponentProps, StylingCSS } from '../../../types';
 import { defined, mergeProps } from '../../../utilities';
 import { Theme, useTheme, CacheProvider } from '../../../providers';
-import { Icon, IconProps } from '../../Atoms/Icon';
+import { Icon, IconProps, IconType } from '../../Atoms/Icon';
 import { useA11y } from '../../../hooks/useA11y';
 
 const CSS = {
@@ -165,13 +165,13 @@ export const Radio = observer((properties: RadioProps): JSX.Element => {
 						<Icon
 							{...subProps.activeIcon}
 							name="ss__radio__icon--active"
-							{...(typeof checkedIcon == 'string' ? { icon: checkedIcon as string } : (checkedIcon as Partial<IconProps>))}
+							{...(typeof checkedIcon == 'string' ? { icon: checkedIcon } : (checkedIcon as Partial<IconProps>))}
 						/>
 					) : (
 						<Icon
 							{...subProps.inactiveIcon}
 							name="ss__radio__icon--inactive"
-							{...(typeof unCheckedIcon == 'string' ? { icon: unCheckedIcon as string } : (unCheckedIcon as Partial<IconProps>))}
+							{...(typeof unCheckedIcon == 'string' ? { icon: unCheckedIcon } : (unCheckedIcon as Partial<IconProps>))}
 						/>
 					)}
 				</span>
@@ -188,8 +188,8 @@ export interface RadioProps extends ComponentProps {
 	checked?: boolean;
 	color?: string;
 	disabled?: boolean;
-	checkedIcon?: string | Partial<IconProps>;
-	unCheckedIcon?: string | Partial<IconProps>;
+	checkedIcon?: IconType | Partial<IconProps>;
+	unCheckedIcon?: IconType | Partial<IconProps>;
 	onClick?: (e: React.MouseEvent<HTMLInputElement | HTMLSpanElement, MouseEvent>) => void;
 	size?: string;
 	startChecked?: boolean;

diff --git a/packages/snap-preact/components/src/components/Molecules/RadioList/RadioList.tsx b/packages/snap-preact/components/src/components/Molecules/RadioList/RadioList.tsx
@@ -140,10 +140,7 @@ export function RadioList(properties: RadioListProps): JSX.Element {
 								{!hideOptionRadios && <Radio {...subProps.Radio} checked={selected} disableA11y={true} />}
 
 								{option.icon && !hideOptionIcons && (
-									<Icon
-										{...subProps.Icon}
-										{...(typeof option.icon == 'string' ? { icon: option.icon as string } : (option.icon as Partial<IconProps>))}
-									/>
+									<Icon {...subProps.Icon} {...(typeof option.icon == 'string' ? { icon: option.icon } : (option.icon as Partial<IconProps>))} />
 								)}
 
 								{!hideOptionLabels && (option.label || !option.icon) && (

diff --git a/packages/snap-preact/components/src/components/Molecules/Rating/Rating.tsx b/packages/snap-preact/components/src/components/Molecules/Rating/Rating.tsx
@@ -6,7 +6,7 @@ import classnames from 'classnames';
 import { Theme, useTheme, CacheProvider } from '../../../providers';
 import { ComponentProps, StylingCSS } from '../../../types';
 import { defined, mergeProps } from '../../../utilities';
-import { Icon, IconProps } from '../../Atoms/Icon';
+import { Icon, IconProps, IconType } from '../../Atoms/Icon';
 
 const CSS = {
 	rating: ({}: Partial<RatingProps>) =>
@@ -114,7 +114,7 @@ export const Rating = observer((properties: RatingProps): JSX.Element => {
 								<Icon
 									name={'ss__rating__stars__star--empty'}
 									{...subProps.emptyIcon}
-									{...(typeof emptyIcon == 'string' ? { icon: emptyIcon as string } : (emptyIcon as Partial<IconProps>))}
+									{...(typeof emptyIcon == 'string' ? { icon: emptyIcon } : (emptyIcon as Partial<IconProps>))}
 								/>
 							</span>
 						))}
@@ -132,7 +132,7 @@ export const Rating = observer((properties: RatingProps): JSX.Element => {
 									<Icon
 										name={'ss__rating__stars__star--full'}
 										{...subProps.fullIcon}
-										{...(typeof fullIcon == 'string' ? { icon: fullIcon as string } : (fullIcon as Partial<IconProps>))}
+										{...(typeof fullIcon == 'string' ? { icon: fullIcon } : (fullIcon as Partial<IconProps>))}
 									/>
 								</span>
 							);
@@ -160,6 +160,6 @@ export interface RatingProps extends ComponentProps {
 	text?: string;
 	alwaysRender?: boolean;
 	disablePartialFill?: boolean;
-	fullIcon?: string | Partial<IconProps>;
-	emptyIcon?: string | Partial<IconProps>;
+	fullIcon?: IconType | Partial<IconProps>;
+	emptyIcon?: IconType | Partial<IconProps>;
 }
diff --git a/packages/snap-preact/components/src/components/Molecules/Select/Select.tsx b/packages/snap-preact/components/src/components/Molecules/Select/Select.tsx
@@ -277,7 +277,7 @@ export const Select = observer((properties: SelectProps): JSX.Element => {
 											<Icon
 												{...subProps.icon}
 												className="ss__select__selection__icon"
-												{...(typeof selection.icon == 'string' ? { icon: selection.icon as string } : (selection.icon as Partial<IconProps>))}
+												{...(typeof selection.icon == 'string' ? { icon: selection.icon } : (selection.icon as Partial<IconProps>))}
 											/>
 										)}
 										{!hideOptionLabels && <span className="ss__select__selection">{selection?.label}</span>}
@@ -287,8 +287,8 @@ export const Select = observer((properties: SelectProps): JSX.Element => {
 									<Icon
 										{...subProps.icon}
 										{...(open
-											? { ...(typeof iconClose == 'string' ? { icon: iconClose as string } : (iconClose as Partial<IconProps>)) }
-											: { ...(typeof iconOpen == 'string' ? { icon: iconOpen as string } : (iconOpen as Partial<IconProps>)) })}
+											? { ...(typeof iconClose == 'string' ? { icon: iconClose } : (iconClose as Partial<IconProps>)) }
+											: { ...(typeof iconOpen == 'string' ? { icon: iconOpen } : (iconOpen as Partial<IconProps>)) })}
 									/>
 								)}
 							</Button>
@@ -311,7 +311,7 @@ export const Select = observer((properties: SelectProps): JSX.Element => {
 										<Icon
 											{...subProps.icon}
 											className="ss__select__select__option__icon"
-											{...(typeof option.icon == 'string' ? { icon: option.icon as string } : (option.icon as Partial<IconProps>))}
+											{...(typeof option.icon == 'string' ? { icon: option.icon } : (option.icon as Partial<IconProps>))}
 										/>
 									)}
 									{!hideOptionLabels && <span>{option.label}</span>}
@@ -343,8 +343,8 @@ export interface SelectProps extends ComponentProps {
 	disabled?: boolean;
 	hideLabelOnSelection?: boolean;
 	iconColor?: string;
-	iconClose?: IconType | string | Partial<IconProps>;
-	iconOpen?: IconType | string | Partial<IconProps>;
+	iconClose?: IconType | Partial<IconProps>;
+	iconOpen?: IconType | Partial<IconProps>;
 	label?: string | JSX.Element;
 	native?: boolean;
 	onSelect?: (e: React.ChangeEvent<HTMLSelectElement> | React.MouseEvent<HTMLElement>, option?: ListOption) => void;

diff --git a/...ges/snap-preact/components/src/components/Molecules/VariantSelection/VariantSelection.tsx b/...ges/snap-preact/components/src/components/Molecules/VariantSelection/VariantSelection.tsx
@@ -108,7 +108,7 @@ export const VariantSelection = observer((properties: VariantSelectionProps): JS
 			className: 'ss__variant-selection__list',
 			multiSelect: false,
 			hideOptionCheckboxes: true,
-			onSelect: (e, option) => selection.select(option.value as string),
+			onSelect: (e, option) => selection.select(option.value),
 			selected: selection.selected,
 
 			// global theme
@@ -123,7 +123,7 @@ export const VariantSelection = observer((properties: VariantSelectionProps): JS
 		swatches: {
 			name: `ss__variant-selection__swatches--${selection.field}`,
 			className: 'ss__variant-selection__swatches',
-			onSelect: (e, option) => selection.select(option.value as string),
+			onSelect: (e, option) => selection.select(option.value),
 			selected: selection.selected,
 			// global theme
 			...globalTheme?.components?.swatches,

diff --git a/packages/snap-preact/components/src/components/Organisms/Facet/Facet.tsx b/packages/snap-preact/components/src/components/Organisms/Facet/Facet.tsx
@@ -316,8 +316,8 @@ export const Facet = observer((properties: FacetProps): JSX.Element => {
 								<Icon
 									{...subProps.icon}
 									{...(facet?.collapsed
-										? { ...(typeof iconExpand == 'string' ? { icon: iconExpand as string } : (iconExpand as Partial<IconProps>)) }
-										: { ...(typeof iconCollapse == 'string' ? { icon: iconCollapse as string } : (iconCollapse as Partial<IconProps>)) })}
+										? { ...(typeof iconExpand == 'string' ? { icon: iconExpand } : (iconExpand as Partial<IconProps>)) }
+										: { ...(typeof iconCollapse == 'string' ? { icon: iconCollapse } : (iconCollapse as Partial<IconProps>)) })}
 								/>
 							)}
 						</div>
@@ -397,8 +397,8 @@ const FacetContent = (props: any) => {
 								<Icon
 									{...subProps.showMoreLessIcon}
 									{...(((facet as ValueFacet).overflow?.remaining || 0) > 0
-										? { ...(typeof iconOverflowMore == 'string' ? { icon: iconOverflowMore as string } : (iconOverflowMore as Partial<IconProps>)) }
-										: { ...(typeof iconOverflowLess == 'string' ? { icon: iconOverflowLess as string } : (iconOverflowLess as Partial<IconProps>)) })}
+										? { ...(typeof iconOverflowMore == 'string' ? { icon: iconOverflowMore } : (iconOverflowMore as Partial<IconProps>)) }
+										: { ...(typeof iconOverflowLess == 'string' ? { icon: iconOverflowLess } : (iconOverflowLess as Partial<IconProps>)) })}
 								/>
 							}
 							<span>{((facet as ValueFacet)?.overflow?.remaining || 0) > 0 ? showMoreText : showLessText}</span>
@@ -430,9 +430,9 @@ export interface FacetProps extends OptionalFacetProps {
 interface OptionalFacetProps extends ComponentProps {
 	disableCollapse?: boolean;
 	color?: string;
-	iconCollapse?: IconType | string | Partial<IconProps>;
+	iconCollapse?: IconType | Partial<IconProps>;
 	iconColor?: string;
-	iconExpand?: IconType | string | Partial<IconProps>;
+	iconExpand?: IconType | Partial<IconProps>;
 	limit?: number;
 	overflowSlot?: JSX.Element | JSX.Element[];
 	optionsSlot?: JSX.Element | JSX.Element[];
@@ -441,8 +441,8 @@ interface OptionalFacetProps extends ComponentProps {
 	valueProps?: any;
 	showMoreText?: string;
 	showLessText?: string;
-	iconOverflowMore?: IconType | string | Partial<IconProps>;
-	iconOverflowLess?: IconType | string | Partial<IconProps>;
+	iconOverflowMore?: IconType | Partial<IconProps>;
+	iconOverflowLess?: IconType | Partial<IconProps>;
 	fields?: FieldProps;
 	display?: FieldProps;
 	searchable?: boolean;

diff --git a/...ges/snap-preact/components/src/components/Organisms/HorizontalFacets/HorizontalFacets.tsx b/...ges/snap-preact/components/src/components/Organisms/HorizontalFacets/HorizontalFacets.tsx
@@ -255,8 +255,8 @@ export const HorizontalFacets = observer((properties: HorizontalFacetsProps): JS
 									<Icon
 										{...subProps.icon}
 										{...(selectedFacet?.field === facet.field
-											? { ...(typeof iconExpand == 'string' ? { icon: iconExpand as string } : (iconExpand as Partial<IconProps>)) }
-											: { ...(typeof iconCollapse == 'string' ? { icon: iconCollapse as string } : (iconCollapse as Partial<IconProps>)) })}
+											? { ...(typeof iconExpand == 'string' ? { icon: iconExpand } : (iconExpand as Partial<IconProps>)) }
+											: { ...(typeof iconCollapse == 'string' ? { icon: iconCollapse } : (iconCollapse as Partial<IconProps>)) })}
 									/>
 								</div>
 							}
@@ -298,8 +298,8 @@ export interface HorizontalFacetsProps extends ComponentProps {
 	limit?: number;
 	overlay?: boolean;
 	alwaysShowFiltersButton?: boolean;
-	iconCollapse?: IconType | string | Partial<IconProps>;
-	iconExpand?: IconType | string | Partial<IconProps>;
+	iconCollapse?: IconType | Partial<IconProps>;
+	iconExpand?: IconType | Partial<IconProps>;
 	controller?: SearchController | AutocompleteController;
 	onFacetOptionClick?: (e: React.MouseEvent<Element, MouseEvent>) => void;
 }