@designcrowd/fe-shared-lib 1.5.20-ast-icons-1 → 1.5.20-dts-upgrades

package/types-test/icon-props.test.ts

@@ -0,0 +1,42 @@
+// types-test/icon-props.test.ts
+// This file tests that IconProps interface is properly exported and typed
+
+import { Icon, type IconProps } from '..';
+
+// Test that IconProps can be used as a type
+const props: IconProps = {
+  name: 'chevron-right',
+  size: 'md',
+  color: 'primary-500',
+};
+
+// Test that name is required
+const requiredName: IconProps['name'] = 'check';
+
+// Test optional props
+const viewBox: IconProps['viewBox'] = '0 0 16 16';
+const altText: IconProps['altText'] = 'Check icon';
+const color: IconProps['color'] = 'success-500';
+const classes: IconProps['classes'] = 'custom-class';
+
+// Test size variants
+const sizesProps: IconProps = { name: 'check', size: 'xs' };
+const sizesProps2: IconProps = { name: 'check', size: 'sm' };
+const sizesProps3: IconProps = { name: 'check', size: 'md' };
+const sizesProps4: IconProps = { name: 'check', size: 'lg' };
+const sizesProps5: IconProps = { name: 'check', size: 'xl' };
+const sizesProps6: IconProps = { name: 'check', size: '2xl' };
+const sizesProps7: IconProps = { name: 'check', size: '3xl' };
+const sizesProps8: IconProps = { name: 'check', size: '4xl' };
+const sizesProps9: IconProps = { name: 'check', size: '5xl' };
+const sizesProps10: IconProps = { name: 'check', size: 'full' };
+const sizesProps11: IconProps = { name: 'check', size: 'button-icon' };
+
+// Test that Icon component is typed
+const _icon: typeof Icon = Icon;
+
+// Test altText can be null
+const nullAltText: IconProps = {
+  name: 'check',
+  altText: null,
+};

package/types-test/loader-props.test.ts

@@ -0,0 +1,7 @@
+import { Loader, type LoaderProps } from '..';
+
+// Loader has no props - it's a simple SVG spinner
+const props: LoaderProps = {};
+
+// Verify component type
+type LoaderComponent = typeof Loader;

package/types-test/modal-props.test.ts

@@ -0,0 +1,39 @@
+// types-test/modal-props.test.ts
+import { Modal, type ModalProps, type ModalEmits } from '..';
+
+// Test ModalProps is properly typed
+const props: ModalProps = {
+  visible: true,
+  mandatory: false,
+  size: 'md',
+  closeOnEsc: true,
+};
+
+// Test individual prop types
+const visible: ModalProps['visible'] = true;
+const size: ModalProps['size'] = 'xl';
+const mode: ModalProps['mode'] = 'image';
+
+// Test all boolean props
+const simple: ModalProps['simple'] = false;
+const removeHorizontalMargin: ModalProps['removeHorizontalMargin'] = true;
+const removeHorizontalPadding: ModalProps['removeHorizontalPadding'] = false;
+const hideScrollbar: ModalProps['hideScrollbar'] = true;
+const showModalBackgroundImage: ModalProps['showModalBackgroundImage'] = false;
+const disableBodyScrollOnVisible: ModalProps['disableBodyScrollOnVisible'] = true;
+const darkOverlay: ModalProps['darkOverlay'] = false;
+const transparentModal: ModalProps['transparentModal'] = true;
+
+// Test classes props
+const classes: ModalProps['classes'] = 'tw-my-class';
+const classesObj: ModalProps['classes'] = { 'tw-my-class': true };
+const contentClasses: ModalProps['contentClasses'] = ['tw-class-1', 'tw-class-2'];
+
+// Test string props with specific values
+const fullScreenBreakpoint: ModalProps['fullScreenBreakpoint'] = 'sm';
+
+// Verify Modal component accepts ModalProps
+const _modal: typeof Modal = Modal;
+
+// Verify ModalEmits type exists
+type CloseModalEvent = ModalEmits['close-modal'];

package/types-test/select-props.test.ts

@@ -0,0 +1,97 @@
+import { Select, type SelectProps, type SelectEmits, type SelectOption } from '..';
+
+// Test SelectOption interface
+const simpleOption: SelectOption = {
+  label: 'Option 1',
+};
+
+const disabledOption: SelectOption = {
+  $isDisabled: true,
+  label: 'Disabled Option',
+};
+
+const customOption: SelectOption = {
+  isCustom: true,
+  label: 'Custom Option',
+};
+
+const optionWithExtra: SelectOption = {
+  label: 'With Extra',
+  value: 123,
+  customField: 'custom value',
+};
+
+// Test SelectProps with object options
+const selectWithObjectOptions: SelectProps = {
+  options: [simpleOption, disabledOption],
+  modelValue: simpleOption,
+  trackBy: 'value',
+  label: 'label',
+  isSearchable: true,
+  placeholder: 'Select an option',
+};
+
+// Test SelectProps with string options
+const selectWithStringOptions: SelectProps = {
+  options: ['Option 1', 'Option 2', 'Option 3'],
+  modelValue: 'Option 1',
+};
+
+// Test full props from selectMixin
+const fullMixinProps: SelectProps = {
+  options: [],
+  isInternalSearch: true,
+  modelValue: null,
+  trackBy: 'id',
+  label: 'name',
+  imageUrlField: 'imageUrl',
+  isSearchable: true,
+  shouldHideSelected: false,
+  placeholder: 'Select...',
+  shouldAllowEmpty: true,
+  shouldResetAfter: false,
+  shouldCloseOnSelect: true,
+  customLabel: (option, label) => {
+    if (typeof option === 'string') return option;
+    return label ? String(option[label]) : String(option);
+  },
+  shouldAllowCustom: true,
+  customPlaceholder: 'Press enter to create',
+  customPosition: 'top',
+  id: 'my-select',
+  optionsLimit: 100,
+  shouldPreserveSearch: false,
+  shouldPreselectFirst: false,
+  shouldPreventAutofocus: false,
+  isDisabled: false,
+};
+
+// Test props from Select.vue
+const selectVueProps: SelectProps = {
+  options: [],
+  name: 'country-select',
+  selectLabel: 'Press enter to select',
+  selectedLabel: 'Selected',
+  deselectLabel: 'Press enter to remove',
+  shouldShowLabels: true,
+  maxHeight: 300,
+  isLoading: false,
+  openDirection: 'below',
+  shouldShowNoResults: true,
+  tabindex: 0,
+  shouldSelectExactMatchOnBlur: false,
+  isInvalid: false,
+};
+
+// Test openDirection options
+const aboveDirection: SelectProps = { options: [], openDirection: 'above' };
+const belowDirection: SelectProps = { options: [], openDirection: 'below' };
+const topDirection: SelectProps = { options: [], openDirection: 'top' };
+const bottomDirection: SelectProps = { options: [], openDirection: 'bottom' };
+
+// Test customPosition options
+const topPosition: SelectProps = { options: [], customPosition: 'top' };
+const bottomPosition: SelectProps = { options: [], customPosition: 'bottom' };
+
+// Verify component type includes props and emits
+type SelectComponent = typeof Select;

package/types-test/text-input-props.test.ts

@@ -0,0 +1,80 @@
+// types-test/text-input-props.test.ts
+// This file tests that TextInputProps and TextInputEmits interfaces are properly exported and typed
+
+import { TextInput, type TextInputProps, type TextInputEmits } from '..';
+
+// Test that TextInputProps can be used as a type
+const props: TextInputProps = {
+  modelValue: 'test value',
+  placeholder: 'Enter text...',
+  label: 'Username',
+};
+
+// Test form control mixin props
+const attrs: TextInputProps['attrs'] = { 'data-testid': 'input' };
+const modelValue: TextInputProps['modelValue'] = 'value';
+const modelValueNumber: TextInputProps['modelValue'] = 123;
+const id: TextInputProps['id'] = 'input-1';
+const placeholder: TextInputProps['placeholder'] = 'Enter value';
+const size: TextInputProps['size'] = 'sm';
+const label: TextInputProps['label'] = 'Label';
+const showLabelScreenReaderOnly: TextInputProps['showLabelScreenReaderOnly'] = true;
+const icon: TextInputProps['icon'] = 'search';
+const required: TextInputProps['required'] = true;
+const error: TextInputProps['error'] = false;
+const warning: TextInputProps['warning'] = false;
+const success: TextInputProps['success'] = false;
+const disabled: TextInputProps['disabled'] = false;
+const readonly: TextInputProps['readonly'] = false;
+const name: TextInputProps['name'] = 'username';
+const maxlength: TextInputProps['maxlength'] = 100;
+const minlength: TextInputProps['minlength'] = 1;
+const isSpaceDisabled: TextInputProps['isSpaceDisabled'] = false;
+const requiredMessage: TextInputProps['requiredMessage'] = 'This field is required';
+
+// Test TextInput-specific props
+const type: TextInputProps['type'] = 'text';
+const typePassword: TextInputProps['type'] = 'password';
+const typeEmail: TextInputProps['type'] = 'email';
+const typeNumber: TextInputProps['type'] = 'number';
+const typeTel: TextInputProps['type'] = 'tel';
+const typeUrl: TextInputProps['type'] = 'url';
+const enableClear: TextInputProps['enableClear'] = true;
+const enableClearConfirmation: TextInputProps['enableClearConfirmation'] = true;
+const borderLeft: TextInputProps['borderLeft'] = true;
+const borderRight: TextInputProps['borderRight'] = true;
+const prefixText: TextInputProps['prefixText'] = 'https://';
+const elementClasses: TextInputProps['elementClasses'] = 'custom-class';
+
+// Test that TextInput component is typed
+const _textInput: typeof TextInput = TextInput;
+
+// Test complete props object
+const fullProps: TextInputProps = {
+  attrs: { 'data-testid': 'input' },
+  modelValue: '',
+  id: 'email-input',
+  placeholder: 'Enter email',
+  size: 'sm',
+  label: 'Email',
+  showLabelScreenReaderOnly: false,
+  icon: 'envelope-email',
+  required: true,
+  error: false,
+  warning: false,
+  success: false,
+  disabled: false,
+  readonly: false,
+  name: 'email',
+  maxlength: 255,
+  minlength: 5,
+  isSpaceDisabled: true,
+  requiredMessage: 'Email is required',
+  type: 'email',
+  enableClear: true,
+  enableClearConfirmation: false,
+  borderLeft: true,
+  borderRight: true,
+  prefixText: undefined,
+  elementClasses: '',
+};

package/types-test/textarea-props.test.ts

@@ -0,0 +1,72 @@
+// types-test/textarea-props.test.ts
+// This file tests that TextareaProps interface is properly exported and typed
+
+import { Textarea, type TextareaProps, type TextInputEmits } from '..';
+
+// Test that TextareaProps can be used as a type
+const props: TextareaProps = {
+  modelValue: 'test value',
+  placeholder: 'Enter text...',
+  label: 'Description',
+};
+
+// Test form control mixin props (shared with TextInput)
+const attrs: TextareaProps['attrs'] = { 'data-testid': 'textarea' };
+const modelValue: TextareaProps['modelValue'] = 'value';
+const modelValueNumber: TextareaProps['modelValue'] = 123;
+const id: TextareaProps['id'] = 'textarea-1';
+const placeholder: TextareaProps['placeholder'] = 'Enter value';
+const label: TextareaProps['label'] = 'Label';
+const showLabelScreenReaderOnly: TextareaProps['showLabelScreenReaderOnly'] = true;
+const icon: TextareaProps['icon'] = 'edit';
+const required: TextareaProps['required'] = true;
+const error: TextareaProps['error'] = false;
+const warning: TextareaProps['warning'] = false;
+const success: TextareaProps['success'] = false;
+const disabled: TextareaProps['disabled'] = false;
+const readonly: TextareaProps['readonly'] = false;
+const name: TextareaProps['name'] = 'description';
+const maxlength: TextareaProps['maxlength'] = 1000;
+const minlength: TextareaProps['minlength'] = 10;
+const isSpaceDisabled: TextareaProps['isSpaceDisabled'] = false;
+const requiredMessage: TextareaProps['requiredMessage'] = 'This field is required';
+
+// Test size variants (Textarea supports sm, md, lg)
+const sizeSm: TextareaProps = { size: 'sm' };
+const sizeMd: TextareaProps = { size: 'md' };
+const sizeLg: TextareaProps = { size: 'lg' };
+
+// Test Textarea-specific props
+const resize: TextareaProps['resize'] = true;
+const resizeFalse: TextareaProps['resize'] = false;
+const shouldAutoFitContent: TextareaProps['shouldAutoFitContent'] = true;
+const elementClasses: TextareaProps['elementClasses'] = 'custom-class';
+
+// Test that Textarea component is typed
+const _textarea: typeof Textarea = Textarea;
+
+// Test complete props object
+const fullProps: TextareaProps = {
+  attrs: { 'data-testid': 'textarea' },
+  modelValue: '',
+  id: 'bio-textarea',
+  placeholder: 'Tell us about yourself',
+  size: 'md',
+  label: 'Bio',
+  showLabelScreenReaderOnly: false,
+  icon: undefined,
+  required: false,
+  error: false,
+  warning: false,
+  success: false,
+  disabled: false,
+  readonly: false,
+  name: 'bio',
+  maxlength: 500,
+  minlength: 0,
+  isSpaceDisabled: false,
+  requiredMessage: 'Bio is required',
+  resize: true,
+  shouldAutoFitContent: false,
+  elementClasses: '',
+};

package/types-test/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "types": ["node"]
+  },
+  "include": ["*.test.ts"]
+}