From bcaeaed66a289d2ea8775e59564097a555cfe01a Mon Sep 17 00:00:00 2001 From: Stefan Dietz Date: Fri, 27 Oct 2023 17:00:18 +0200 Subject: [PATCH 1/2] Refactor enum props --- .../src/components/alert/component.tsx | 14 +++++++---- .../components/src/components/alert/types.ts | 7 ++++-- .../src/components/heading/validation.ts | 9 +++---- .../components/input-checkbox/controller.ts | 6 ++--- .../src/components/input-checkbox/types.ts | 3 ++- .../src/components/input-color/controller.ts | 6 ++--- .../src/components/input-date/controller.ts | 10 ++++---- .../src/components/input-radio/controller.ts | 6 ++--- .../src/components/input-text/controller.ts | 6 ++--- .../src/components/quote/shadow.tsx | 10 ++++++-- .../components/src/components/quote/types.ts | 3 ++- .../src/components/textarea/controller.ts | 6 ++--- .../src/components/textarea/types.ts | 3 ++- .../components/src/types/heading-level.ts | 3 ++- .../src/types/input/control/number.ts | 4 ++-- .../src/types/input/control/text.ts | 3 ++- packages/components/src/types/input/types.ts | 3 ++- packages/components/src/types/orientation.ts | 3 ++- packages/components/src/types/props/align.ts | 7 ++++-- .../src/types/props/aria-current.ts | 7 +++--- .../components/src/types/props/button-type.ts | 7 +++--- .../src/types/props/button-variant.ts | 7 +++--- .../src/types/props/variant/spin.ts | 11 +++++++-- .../src/utils/validators/alignment.ts | 24 ++++--------------- .../src/utils/validators/loading.ts | 6 ++--- 25 files changed, 96 insertions(+), 78 deletions(-) diff --git a/packages/components/src/components/alert/component.tsx b/packages/components/src/components/alert/component.tsx index fe841b6b2a..543a97b430 100644 --- a/packages/components/src/components/alert/component.tsx +++ b/packages/components/src/components/alert/component.tsx @@ -7,7 +7,7 @@ import { LabelPropType, validateLabel } from '../../types/props/label'; import { Log } from '../../utils/dev.utils'; import { setState, watchBoolean, watchValidator } from '../../utils/prop.validators'; import { watchHeadingLevel } from '../heading/validation'; -import { AlertType, AlertVariant, API, KoliBriAlertEventCallbacks, States } from './types'; +import { AlertType, alertTypeOptions, AlertVariant, alertVariantOptions, API, KoliBriAlertEventCallbacks, States } from './types'; const Icon = (props: { ariaLabel: string; icon: string; label?: string }) => { return 0 ? '' : props.ariaLabel} _icons={props.icon} />; @@ -200,15 +200,21 @@ export class KolAlertWc implements API { watchValidator( this, '_type', - (value) => typeof value === 'string' && (value === 'default' || value === 'error' || value === 'info' || value === 'success' || value === 'warning'), - new Set('String {success, info, warning, error}'), + (value?) => typeof value === 'string' && alertTypeOptions.includes(value), + new Set(`String {${alertTypeOptions.join(', ')}`), value ); } @Watch('_variant') public validateVariant(value?: AlertVariant): void { - watchValidator(this, '_variant', (value) => value === 'card' || value === 'msg', new Set('AlertVariant {card, msg}'), value); + watchValidator( + this, + '_variant', + (value?) => typeof value === 'string' && alertVariantOptions.includes(value), + new Set(`AlertVariant {${alertVariantOptions.join(', ')}`), + value + ); } public componentWillLoad(): void { diff --git a/packages/components/src/components/alert/types.ts b/packages/components/src/components/alert/types.ts index 18b432f3f3..756fa46112 100644 --- a/packages/components/src/components/alert/types.ts +++ b/packages/components/src/components/alert/types.ts @@ -6,8 +6,11 @@ import { PropAlert } from '../../types/props/alert'; import { PropHasCloser } from '../../types/props/has-closer'; import { PropLabel } from '../../types/props/label'; -export type AlertType = 'default' | 'info' | 'success' | 'warning' | 'error'; -export type AlertVariant = 'card' | 'msg'; +export const alertTypeOptions = ['default', 'info', 'success', 'warning', 'error'] as const; +export type AlertType = (typeof alertTypeOptions)[number]; + +export const alertVariantOptions = ['card', 'msg'] as const; +export type AlertVariant = (typeof alertVariantOptions)[number]; export type KoliBriAlertEventCallbacks = { onClose?: EventCallback; diff --git a/packages/components/src/components/heading/validation.ts b/packages/components/src/components/heading/validation.ts index eba7cbfc19..6f4246e0e2 100644 --- a/packages/components/src/components/heading/validation.ts +++ b/packages/components/src/components/heading/validation.ts @@ -1,15 +1,16 @@ import { Generic } from '@a11y-ui/core'; import { watchValidator } from '../../utils/prop.validators'; +import { HeadingLevel, headingLevelOptions } from '../../types/heading-level'; -export const watchHeadingLevel = (component: Generic.Element.Component, value?: number): void => { +export const watchHeadingLevel = (component: Generic.Element.Component, value?: HeadingLevel): void => { watchValidator( component, '_level', - (value): boolean => { - return typeof value === 'number' && 0 <= value && value <= 6; + (value?: HeadingLevel): boolean => { + return typeof value === 'number' && headingLevelOptions.includes(value); }, - new Set(['Number {0, 1, 2, 3, 4, 5, 6}']), + new Set([`Number {${headingLevelOptions.join(', ')}`]), value, { // TODO: options not in the validator diff --git a/packages/components/src/components/input-checkbox/controller.ts b/packages/components/src/components/input-checkbox/controller.ts index c9483779a6..e01deacfdb 100644 --- a/packages/components/src/components/input-checkbox/controller.ts +++ b/packages/components/src/components/input-checkbox/controller.ts @@ -9,7 +9,7 @@ import { a11yHint } from '../../utils/a11y.tipps'; import { setState, watchValidator } from '../../utils/prop.validators'; import { isString } from '../../utils/validator'; import { InputCheckboxRadioController } from '../input-radio/controller'; -import { InputCheckboxIconsProp, InputCheckboxIconsState, InputCheckboxVariant, Props, Watches } from './types'; +import { InputCheckboxIconsProp, InputCheckboxIconsState, InputCheckboxVariant, inputCheckboxVariantOptions, Props, Watches } from './types'; export class InputCheckboxController extends InputCheckboxRadioController implements Watches { protected readonly component: Generic.Element.Component & Props; @@ -79,8 +79,8 @@ export class InputCheckboxController extends InputCheckboxRadioController implem watchValidator( this.component, '_variant', - (value): boolean => typeof value === 'string' && (value === 'button' || value === 'default' || value === 'switch'), - new Set(['String {button, default, switch}']), + (value): boolean => typeof value === 'string' && inputCheckboxVariantOptions.includes(value), + new Set([`String {${inputCheckboxVariantOptions.join(', ')}`]), value ); } diff --git a/packages/components/src/components/input-checkbox/types.ts b/packages/components/src/components/input-checkbox/types.ts index 0511481af1..dafb60bac5 100644 --- a/packages/components/src/components/input-checkbox/types.ts +++ b/packages/components/src/components/input-checkbox/types.ts @@ -15,7 +15,8 @@ import { PropSyncValueBySelector } from '../../types/props/sync-value-by-selecto import { PropTouched } from '../../types/props/touched'; import { StencilUnknown } from '../../types/unknown'; -export type InputCheckboxVariant = 'button' | 'default' | 'switch'; +export const inputCheckboxVariantOptions = ['button', 'default', 'switch'] as const; +export type InputCheckboxVariant = (typeof inputCheckboxVariantOptions)[number]; export type InputCheckboxIconsProp = | { diff --git a/packages/components/src/components/input-color/controller.ts b/packages/components/src/components/input-color/controller.ts index 32d5cddca9..789b9061d5 100644 --- a/packages/components/src/components/input-color/controller.ts +++ b/packages/components/src/components/input-color/controller.ts @@ -1,6 +1,6 @@ import { Generic } from '@a11y-ui/core'; -import { InputTypeOnOff } from '../../types/input/types'; +import { InputTypeOnOff, inputTypeOnOffOptions } from '../../types/input/types'; import { HideErrorPropType, validateHideError } from '../../types/props/hide-error'; import { SuggestionsPropType, validateSuggestions } from '../../types/props/suggestions'; import { a11yHint } from '../../utils/a11y.tipps'; @@ -20,8 +20,8 @@ export class InputColorController extends InputIconController implements Watches watchValidator( this.component, '_autoComplete', - (value): boolean => typeof value === 'string' && (value === 'on' || value === 'off'), - new Set(['on | off']), + (value): boolean => typeof value === 'string' && inputTypeOnOffOptions.includes(value), + new Set(inputTypeOnOffOptions), value ); } diff --git a/packages/components/src/components/input-date/controller.ts b/packages/components/src/components/input-date/controller.ts index 75a6f8da88..77522abfdd 100644 --- a/packages/components/src/components/input-date/controller.ts +++ b/packages/components/src/components/input-date/controller.ts @@ -1,6 +1,6 @@ import { Generic } from '@a11y-ui/core'; -import { InputNumberType } from '../../types/input/control/number'; +import { InputDateType, inputDateTypeOptions } from '../../types/input/control/number'; import { Iso8601 } from '../../types/input/iso8601'; import { InputTypeOnDefault, InputTypeOnOff } from '../../types/input/types'; import { HideErrorPropType, validateHideError } from '../../types/props/hide-error'; @@ -186,14 +186,12 @@ export class InputDateController extends InputIconController implements Watches watchNumber(this.component, '_step', value); } - public validateType(value?: InputNumberType): void { + public validateType(value?: InputDateType): void { watchValidator( this.component, '_type', - (value): boolean => - typeof value === 'string' && - (value === 'date' || value === 'datetime-local' || value === 'month' || value === 'number' || value === 'time' || value === 'week'), - new Set(['String {date, datetime-local, month, number, time, week}']), + (value): boolean => typeof value === 'string' && inputDateTypeOptions.includes(value), + new Set([`String {${inputDateTypeOptions.join(', ')}`]), value ); } diff --git a/packages/components/src/components/input-radio/controller.ts b/packages/components/src/components/input-radio/controller.ts index 97b9a67acd..4b40f2e7d5 100644 --- a/packages/components/src/components/input-radio/controller.ts +++ b/packages/components/src/components/input-radio/controller.ts @@ -2,7 +2,7 @@ import { Generic } from '@a11y-ui/core'; import { Stringified } from '../../types/common'; import { Optgroup, Option, SelectOption } from '../../types/input/types'; -import { Orientation } from '../../types/orientation'; +import { Orientation, orientationOptions } from '../../types/orientation'; import { HideErrorPropType, validateHideError } from '../../types/props/hide-error'; import { PropLabelWithExpertSlot } from '../../types/props/label'; import { OptionsPropType, validateOptions } from '../../types/props/options'; @@ -103,8 +103,8 @@ export class InputRadioController extends InputCheckboxRadioController implement watchValidator( this.component, '_orientation', - (value): boolean => value === 'horizontal' || value === 'vertical', - new Set(['Orientation {horizontal, vertical}']), + (value): boolean => typeof value === 'string' && orientationOptions.includes(value), + new Set([`Orientation {${orientationOptions.join(', ')}`]), value, { defaultValue: 'vertical', diff --git a/packages/components/src/components/input-text/controller.ts b/packages/components/src/components/input-text/controller.ts index b4b06f5348..26eaac6b75 100644 --- a/packages/components/src/components/input-text/controller.ts +++ b/packages/components/src/components/input-text/controller.ts @@ -1,5 +1,5 @@ import { Generic } from '@a11y-ui/core'; -import { InputTextType } from '../../types/input/control/text'; +import { InputTextType, inputTextTypeOptions } from '../../types/input/control/text'; import { validateHasCounter } from '../../types/props/has-counter'; import { HideErrorPropType, validateHideError } from '../../types/props/hide-error'; import { PropLabelWithExpertSlot } from '../../types/props/label'; @@ -61,8 +61,8 @@ export class InputTextController extends InputTextEmailController implements Inp watchValidator( this.component, '_type', - (value): boolean => typeof value === 'string' && (value === 'text' || value === 'search' || value === 'url' || value === 'tel'), - new Set(['String {text, search, url, tel}']), + (value): boolean => typeof value === 'string' && inputTextTypeOptions.includes(value), + new Set([`String {${inputTextTypeOptions.join(', ')}`]), value ); } diff --git a/packages/components/src/components/quote/shadow.tsx b/packages/components/src/components/quote/shadow.tsx index 130ba2889d..45a62bc299 100644 --- a/packages/components/src/components/quote/shadow.tsx +++ b/packages/components/src/components/quote/shadow.tsx @@ -4,7 +4,7 @@ import { HrefPropType } from '../../types/props/href'; import { LabelPropType, validateLabel } from '../../types/props/label'; import { watchString, watchValidator } from '../../utils/prop.validators'; import { showExpertSlot } from '../../utils/reuse'; -import { API, KoliBriQuoteVariant, States } from './types'; +import { API, KoliBriQuoteVariant, koliBriQuoteVariantOptions, States } from './types'; @Component({ tag: 'kol-quote', @@ -61,7 +61,13 @@ export class KolQuote implements API { @Watch('_variant') public validateVariant(value?: KoliBriQuoteVariant): void { - watchValidator(this, '_variant', (value) => value === 'block' || value === 'inline', new Set(['block', 'inline']), value); + watchValidator( + this, + '_variant', + (value) => typeof value === 'string' && koliBriQuoteVariantOptions.includes(value), + new Set(koliBriQuoteVariantOptions), + value + ); } public componentWillLoad(): void { diff --git a/packages/components/src/components/quote/types.ts b/packages/components/src/components/quote/types.ts index 6ec01640ff..f4d041f8c1 100644 --- a/packages/components/src/components/quote/types.ts +++ b/packages/components/src/components/quote/types.ts @@ -3,7 +3,8 @@ import { Generic } from '@a11y-ui/core'; import { PropHref } from '../../types/props/href'; import { PropLabel } from '../../types/props/label'; -export type KoliBriQuoteVariant = 'block' | 'inline'; +export const koliBriQuoteVariantOptions = ['block', 'inline'] as const; +export type KoliBriQuoteVariant = (typeof koliBriQuoteVariantOptions)[number]; type RequiredProps = { quote: string; diff --git a/packages/components/src/components/textarea/controller.ts b/packages/components/src/components/textarea/controller.ts index 3b26fde2b1..23496b8837 100644 --- a/packages/components/src/components/textarea/controller.ts +++ b/packages/components/src/components/textarea/controller.ts @@ -6,7 +6,7 @@ import { RowsPropType, validateRows } from '../../types/props/rows'; import { a11yHint } from '../../utils/a11y.tipps'; import { watchBoolean, watchNumber, watchString, watchValidator } from '../../utils/prop.validators'; import { InputController } from '../@deprecated/input/controller'; -import { CSSResize, Props, Watches } from './types'; +import { CSSResize, cssResizeOptions, Props, Watches } from './types'; export class TextareaController extends InputController implements Watches { protected readonly component: Generic.Element.Component & Props; @@ -63,8 +63,8 @@ export class TextareaController extends InputController implements Watches { watchValidator( this.component, '_resize', - (value) => typeof value === 'string' && (value === 'both' || value === 'horizontal' || value === 'none' || value === 'vertical'), - new Set('String {both, horizontal, vertical, none}'), + (value) => typeof value === 'string' && cssResizeOptions.includes(value), + new Set(`String {${cssResizeOptions.join(', ')}`), value ); } diff --git a/packages/components/src/components/textarea/types.ts b/packages/components/src/components/textarea/types.ts index 2bfc44ef90..e0468c39ad 100644 --- a/packages/components/src/components/textarea/types.ts +++ b/packages/components/src/components/textarea/types.ts @@ -15,7 +15,8 @@ import { PropRows } from '../../types/props/rows'; import { PropSyncValueBySelector } from '../../types/props/sync-value-by-selector'; import { PropTouched } from '../../types/props/touched'; -export type CSSResize = 'both' | 'horizontal' | 'vertical' | 'none'; +export const cssResizeOptions = ['both', 'horizontal', 'vertical', 'none'] as const; +export type CSSResize = (typeof cssResizeOptions)[number]; type RequiredProps = NonNullable; type OptionalProps = { diff --git a/packages/components/src/types/heading-level.ts b/packages/components/src/types/heading-level.ts index fa56d15ec4..de9d08886e 100644 --- a/packages/components/src/types/heading-level.ts +++ b/packages/components/src/types/heading-level.ts @@ -1 +1,2 @@ -export type HeadingLevel = 0 | 1 | 2 | 3 | 4 | 5 | 6; +export const headingLevelOptions = [0, 1, 2, 3, 4, 5, 6] as const; +export type HeadingLevel = (typeof headingLevelOptions)[number]; diff --git a/packages/components/src/types/input/control/number.ts b/packages/components/src/types/input/control/number.ts index 6fdeee7f8a..1b57999790 100644 --- a/packages/components/src/types/input/control/number.ts +++ b/packages/components/src/types/input/control/number.ts @@ -3,8 +3,8 @@ import { Stringified } from '../../common'; import { KoliBriHorizontalIcons } from '../../icons'; import { InputTypeOnDefault, InputTypeOnOff } from '../types'; -export type InputDateType = 'date' | 'datetime-local' | 'month' | 'time' | 'week'; -export type InputNumberType = 'number' | InputDateType; +export const inputDateTypeOptions = ['date', 'datetime-local', 'month', 'time', 'week'] as const; +export type InputDateType = (typeof inputDateTypeOptions)[number]; export type OptionalInputProps = { accessKey: string; diff --git a/packages/components/src/types/input/control/text.ts b/packages/components/src/types/input/control/text.ts index c983c389e5..a86950db6c 100644 --- a/packages/components/src/types/input/control/text.ts +++ b/packages/components/src/types/input/control/text.ts @@ -1 +1,2 @@ -export type InputTextType = 'text' | 'search' | 'url' | 'tel'; +export const inputTextTypeOptions = ['text', 'search', 'url', 'tel'] as const; +export type InputTextType = (typeof inputTextTypeOptions)[number]; diff --git a/packages/components/src/types/input/types.ts b/packages/components/src/types/input/types.ts index 1c0fffc875..09d25b14db 100644 --- a/packages/components/src/types/input/types.ts +++ b/packages/components/src/types/input/types.ts @@ -1,7 +1,8 @@ import { Events } from '../../enums/events'; import { EventCallback, EventValueOrEventCallback } from '../callbacks'; -export type InputTypeOnOff = 'on' | 'off'; +export const inputTypeOnOffOptions = ['on', 'off'] as const; +export type InputTypeOnOff = (typeof inputTypeOnOffOptions)[number]; type InputTypeOnBlur = { [Events.onBlur]?: EventCallback; diff --git a/packages/components/src/types/orientation.ts b/packages/components/src/types/orientation.ts index 5c7be1d055..65bb1d854e 100644 --- a/packages/components/src/types/orientation.ts +++ b/packages/components/src/types/orientation.ts @@ -1 +1,2 @@ -export type Orientation = 'horizontal' | 'vertical'; +export const orientationOptions = ['horizontal', 'vertical'] as const; +export type Orientation = (typeof orientationOptions)[number]; diff --git a/packages/components/src/types/props/align.ts b/packages/components/src/types/props/align.ts index 2cf2573237..6df9e2a752 100644 --- a/packages/components/src/types/props/align.ts +++ b/packages/components/src/types/props/align.ts @@ -3,8 +3,11 @@ import { Generic } from '@a11y-ui/core'; import { validateAlignment } from '../../utils/validators/alignment'; /* types */ -type HorizontalAlign = 'left' | 'right'; -type VerticalAlign = 'top' | 'bottom'; +export const horizontalAlignOptions = ['left', 'right'] as const; +type HorizontalAlign = (typeof horizontalAlignOptions)[number]; +export const verticalAlignOptions = ['top', 'bottom'] as const; +type VerticalAlign = (typeof verticalAlignOptions)[number]; +export const alignPropTypeOptions = [...horizontalAlignOptions, ...verticalAlignOptions] as const; export type AlignPropType = HorizontalAlign | VerticalAlign; /** diff --git a/packages/components/src/types/props/aria-current.ts b/packages/components/src/types/props/aria-current.ts index 49827a4642..14e3c8058d 100644 --- a/packages/components/src/types/props/aria-current.ts +++ b/packages/components/src/types/props/aria-current.ts @@ -7,7 +7,8 @@ import { watchValidator } from '../../utils/prop.validators'; * Marks the element as the selected in a group of related elements. Can be one of the following: `date` | `location` | `page` | `step` | `time` | `true`. * (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current) */ -export type AriaCurrentPropType = 'date' | 'location' | 'page' | 'step' | 'time' | boolean; +export const ariaCurrentPropTypeOptions = ['date', 'location', 'page', 'step', 'time', true, false] as const; +export type AriaCurrentPropType = (typeof ariaCurrentPropTypeOptions)[number]; export type PropAriaCurrent = { // only used for state @@ -23,8 +24,8 @@ const validate = (component: Generic.Element.Component, propName: string, value? watchValidator( component, propName, - (value) => value === 'date' || value === 'location' || value === 'page' || value === 'step' || value === 'time' || value === true || value === false, - new Set(['String {data, location, page, step, time}', 'boolean']), + (value?) => (typeof value === 'string' || typeof value === 'boolean') && ariaCurrentPropTypeOptions.includes(value), + new Set([`String {${ariaCurrentPropTypeOptions.filter((option) => typeof option === 'string').join(', ')}`, 'true', 'false']), value ); }; diff --git a/packages/components/src/types/props/button-type.ts b/packages/components/src/types/props/button-type.ts index 7366260f0a..aaf81f03c9 100644 --- a/packages/components/src/types/props/button-type.ts +++ b/packages/components/src/types/props/button-type.ts @@ -2,7 +2,8 @@ import { Generic } from '@a11y-ui/core'; import { watchValidator } from '../../utils/prop.validators'; -export type ButtonTypePropType = 'button' | 'reset' | 'submit'; +export const buttonTypePropTypeOptions = ['button', 'reset', 'submit'] as const; +export type ButtonTypePropType = (typeof buttonTypePropTypeOptions)[number]; /** * Defines either the type of the component or of the components interactive element. @@ -16,8 +17,8 @@ export const validateButtonType = (component: Generic.Element.Component, value?: watchValidator( component, `_type`, - (value) => value === 'button' || value === 'reset' || value === 'submit', - new Set(['KoliBriButtonType {button, reset, submit}']), + (value?) => typeof value === 'string' && buttonTypePropTypeOptions.includes(value), + new Set([`KoliBriButtonType {${buttonTypePropTypeOptions.join(', ')}`]), value ); }; diff --git a/packages/components/src/types/props/button-variant.ts b/packages/components/src/types/props/button-variant.ts index cee8b0e9d7..1b68028f63 100644 --- a/packages/components/src/types/props/button-variant.ts +++ b/packages/components/src/types/props/button-variant.ts @@ -2,7 +2,8 @@ import { Generic } from '@a11y-ui/core'; import { watchValidator } from '../../utils/prop.validators'; -export type ButtonVariantPropType = 'primary' | 'secondary' | 'normal' | 'tertiary' | 'danger' | 'ghost' | 'custom'; +export const buttonVariantPropTypeOptions = ['primary', 'secondary', 'normal', 'tertiary', 'danger', 'ghost', 'custom'] as const; +export type ButtonVariantPropType = (typeof buttonVariantPropTypeOptions)[number]; /** * Defines which variant should be used for presentation. @@ -16,8 +17,8 @@ export const validateButtonVariant = (component: Generic.Element.Component, valu watchValidator( component, `_variant`, - (value) => value === 'primary' || value === 'secondary' || value === 'normal' || value === 'danger' || value === 'ghost' || value === 'custom', - new Set(['KoliBriButtonVariant {primary, secondary, normal, danger, ghost, custom}']), + (value) => typeof value === 'string' && buttonVariantPropTypeOptions.includes(value), + new Set([`KoliBriButtonVariant {${buttonVariantPropTypeOptions.join(', ')}`]), value, { defaultValue: 'normal', diff --git a/packages/components/src/types/props/variant/spin.ts b/packages/components/src/types/props/variant/spin.ts index bb2fb7c8dc..54d75ea4bb 100644 --- a/packages/components/src/types/props/variant/spin.ts +++ b/packages/components/src/types/props/variant/spin.ts @@ -7,7 +7,8 @@ import { watchValidator } from '../../../utils/prop.validators'; * Loading-spinner * - https://github.com/vineethtrv/css-loader */ -export type SpinVariantPropType = 'cycle' | 'dot' | 'none'; +export const spinVariantPropTypeOptions = ['cycle', 'dot', 'none'] as const; +export type SpinVariantPropType = (typeof spinVariantPropTypeOptions)[number]; /** * Defines the variant of spin navigation. @@ -18,5 +19,11 @@ export type PropSpinVariant = { /* validator */ export const validateSpinVariant = (component: Generic.Element.Component, value?: SpinVariantPropType): void => { - watchValidator(component, '_variant', (value) => value === 'cycle' || value === 'dot' || value === 'none', new Set(['cycle', 'dot', 'none']), value); + watchValidator( + component, + '_variant', + (value) => typeof value === 'string' && spinVariantPropTypeOptions.includes(value), + new Set(spinVariantPropTypeOptions), + value + ); }; diff --git a/packages/components/src/utils/validators/alignment.ts b/packages/components/src/utils/validators/alignment.ts index 4d7430e163..a6775182ca 100644 --- a/packages/components/src/utils/validators/alignment.ts +++ b/packages/components/src/utils/validators/alignment.ts @@ -1,26 +1,10 @@ import { Generic } from '@a11y-ui/core'; -import { AlignPropType } from '../../types/props/align'; +import { AlignPropType, alignPropTypeOptions } from '../../types/props/align'; import { watchValidator } from '../prop.validators'; -const AVAILABLE_HORIZONTAL_ALIGNMENT_VALUES = new Set(['"left", "right"']); -// export const validateHorizontalAlignment = (component: Generic.Element.Component, propName: string, value?: HorizontalAlignment): void => { -// watchValidator(component, propName, (value) => value === 'left' || value === 'right', AVAILABLE_HORIZONTAL_ALIGNMENT_VALUES, value); -// }; - -const AVAILABLE_VERTICAL_ALIGNMENT_VALUES = new Set(['"bottom", "top"']); -// export const validateVertivalAlignment = (component: Generic.Element.Component, propName: string, value?: VerticalAlignment): void => { -// watchValidator(component, propName, (value) => value === 'top' || value === 'bottom', AVAILABLE_VERTICAL_ALIGNMENT_VALUES, value); -// }; - -const AVAILABLE_ALIGNMENT_VALUES = new Set([...AVAILABLE_HORIZONTAL_ALIGNMENT_VALUES, ...AVAILABLE_VERTICAL_ALIGNMENT_VALUES]); export const validateAlignment = (component: Generic.Element.Component, propName: string, value?: AlignPropType): void => { - watchValidator( - component, - propName, - (value) => value === 'bottom' || value === 'left' || value === 'right' || value === 'top', - AVAILABLE_ALIGNMENT_VALUES, - value, - { defaultValue: 'top' } - ); + watchValidator(component, propName, (value) => typeof value === 'string' && alignPropTypeOptions.includes(value), new Set(alignPropTypeOptions), value, { + defaultValue: 'top', + }); }; diff --git a/packages/components/src/utils/validators/loading.ts b/packages/components/src/utils/validators/loading.ts index 3ba08c05c4..2fa77d295a 100644 --- a/packages/components/src/utils/validators/loading.ts +++ b/packages/components/src/utils/validators/loading.ts @@ -2,9 +2,9 @@ import { Generic } from '@a11y-ui/core'; import { watchValidator } from '../prop.validators'; -export type Loading = 'eager' | 'lazy'; +export const loadingOptions = ['eager', 'lazy'] as const; +export type Loading = (typeof loadingOptions)[number]; -const AVAILABLE_LOADING_VALUES = new Set(['"eager", "lazy"']); export function validateLoading(component: Generic.Element.Component, value?: Loading): void { - watchValidator(component, '_loading', (value) => value === 'eager' || value === 'lazy', AVAILABLE_LOADING_VALUES, value); + watchValidator(component, '_loading', (value) => typeof value === 'string' && loadingOptions.includes(value), new Set(loadingOptions), value); } From fdb7a0bb5a66de85c0836d76393084a6e11e68a6 Mon Sep 17 00:00:00 2001 From: Stefan Dietz Date: Sun, 29 Oct 2023 17:10:56 +0100 Subject: [PATCH 2/2] Remove unused exports --- packages/components/src/types/props/align.ts | 4 ++-- packages/components/src/types/props/aria-current.ts | 2 +- packages/components/src/types/props/button-type.ts | 2 +- packages/components/src/types/props/button-variant.ts | 2 +- packages/components/src/types/props/variant/spin.ts | 2 +- packages/components/src/utils/validators/loading.ts | 2 +- 6 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/components/src/types/props/align.ts b/packages/components/src/types/props/align.ts index 6df9e2a752..7a6b422c9a 100644 --- a/packages/components/src/types/props/align.ts +++ b/packages/components/src/types/props/align.ts @@ -3,9 +3,9 @@ import { Generic } from '@a11y-ui/core'; import { validateAlignment } from '../../utils/validators/alignment'; /* types */ -export const horizontalAlignOptions = ['left', 'right'] as const; +const horizontalAlignOptions = ['left', 'right'] as const; type HorizontalAlign = (typeof horizontalAlignOptions)[number]; -export const verticalAlignOptions = ['top', 'bottom'] as const; +const verticalAlignOptions = ['top', 'bottom'] as const; type VerticalAlign = (typeof verticalAlignOptions)[number]; export const alignPropTypeOptions = [...horizontalAlignOptions, ...verticalAlignOptions] as const; export type AlignPropType = HorizontalAlign | VerticalAlign; diff --git a/packages/components/src/types/props/aria-current.ts b/packages/components/src/types/props/aria-current.ts index 14e3c8058d..6f23dfc19c 100644 --- a/packages/components/src/types/props/aria-current.ts +++ b/packages/components/src/types/props/aria-current.ts @@ -7,7 +7,7 @@ import { watchValidator } from '../../utils/prop.validators'; * Marks the element as the selected in a group of related elements. Can be one of the following: `date` | `location` | `page` | `step` | `time` | `true`. * (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current) */ -export const ariaCurrentPropTypeOptions = ['date', 'location', 'page', 'step', 'time', true, false] as const; +const ariaCurrentPropTypeOptions = ['date', 'location', 'page', 'step', 'time', true, false] as const; export type AriaCurrentPropType = (typeof ariaCurrentPropTypeOptions)[number]; export type PropAriaCurrent = { diff --git a/packages/components/src/types/props/button-type.ts b/packages/components/src/types/props/button-type.ts index aaf81f03c9..1f11b9f804 100644 --- a/packages/components/src/types/props/button-type.ts +++ b/packages/components/src/types/props/button-type.ts @@ -2,7 +2,7 @@ import { Generic } from '@a11y-ui/core'; import { watchValidator } from '../../utils/prop.validators'; -export const buttonTypePropTypeOptions = ['button', 'reset', 'submit'] as const; +const buttonTypePropTypeOptions = ['button', 'reset', 'submit'] as const; export type ButtonTypePropType = (typeof buttonTypePropTypeOptions)[number]; /** diff --git a/packages/components/src/types/props/button-variant.ts b/packages/components/src/types/props/button-variant.ts index 1b68028f63..0f9731de1f 100644 --- a/packages/components/src/types/props/button-variant.ts +++ b/packages/components/src/types/props/button-variant.ts @@ -2,7 +2,7 @@ import { Generic } from '@a11y-ui/core'; import { watchValidator } from '../../utils/prop.validators'; -export const buttonVariantPropTypeOptions = ['primary', 'secondary', 'normal', 'tertiary', 'danger', 'ghost', 'custom'] as const; +const buttonVariantPropTypeOptions = ['primary', 'secondary', 'normal', 'tertiary', 'danger', 'ghost', 'custom'] as const; export type ButtonVariantPropType = (typeof buttonVariantPropTypeOptions)[number]; /** diff --git a/packages/components/src/types/props/variant/spin.ts b/packages/components/src/types/props/variant/spin.ts index 54d75ea4bb..8d3e30d6dd 100644 --- a/packages/components/src/types/props/variant/spin.ts +++ b/packages/components/src/types/props/variant/spin.ts @@ -7,7 +7,7 @@ import { watchValidator } from '../../../utils/prop.validators'; * Loading-spinner * - https://github.com/vineethtrv/css-loader */ -export const spinVariantPropTypeOptions = ['cycle', 'dot', 'none'] as const; +const spinVariantPropTypeOptions = ['cycle', 'dot', 'none'] as const; export type SpinVariantPropType = (typeof spinVariantPropTypeOptions)[number]; /** diff --git a/packages/components/src/utils/validators/loading.ts b/packages/components/src/utils/validators/loading.ts index 2fa77d295a..97daf075fe 100644 --- a/packages/components/src/utils/validators/loading.ts +++ b/packages/components/src/utils/validators/loading.ts @@ -2,7 +2,7 @@ import { Generic } from '@a11y-ui/core'; import { watchValidator } from '../prop.validators'; -export const loadingOptions = ['eager', 'lazy'] as const; +const loadingOptions = ['eager', 'lazy'] as const; export type Loading = (typeof loadingOptions)[number]; export function validateLoading(component: Generic.Element.Component, value?: Loading): void {