Refactor enum props (#5492)

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 <kol-icon class="heading-icon" _label={typeof props.label === 'string' && props.label.length > 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 {

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<Event>;

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

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
 		);
 	}

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

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
 		);
 	}

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
 		);
 	}

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

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
 		);
 	}

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 {

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;

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
 		);
 	}

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<unknown>;
 type OptionalProps = {

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];

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<T> = {
 	accessKey: string;

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];

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<Event>;

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];

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';
+const horizontalAlignOptions = ['left', 'right'] as const;
+type HorizontalAlign = (typeof horizontalAlignOptions)[number];
+const verticalAlignOptions = ['top', 'bottom'] as const;
+type VerticalAlign = (typeof verticalAlignOptions)[number];
+export const alignPropTypeOptions = [...horizontalAlignOptions, ...verticalAlignOptions] as const;
 export type AlignPropType = HorizontalAlign | VerticalAlign;
 
 /**

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;
+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
 	);
 };

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';
+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
 	);
 };

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

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';
+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
+	);
 };