feat(KvImageUpload): new global component for image upload element an…

[mcstover]

Introduces a new, fully accessible and customizable KvImageUpload Vue component for image file uploads, along with supporting utilities, Storybook stories, and comprehensive unit tests.

https://608b4cf87f686c00213841b1-bcdmrqhzfc.chromatic.com/?path=/story/forms-kvimageupload--edit-icon-enabled

KvImageUpload Component Implementation and Integration:

• Added new KvImageUpload.vue component with features including file validation, cropping/resizing for previews, customizable shape/aspect ratio, accessibility support, and event emissions for upload, removal, and error handling. The component supports both default and custom fallback UI via slots.
• Registered KvImageUpload in the component library's main export file (index.ts) for easy import and usage in other projects.

Image Processing Utilities:

• Introduced validateImageFile and cropResizeImageToDataUrl utility functions in imageUtils.ts for validating image files (type and size) and generating cropped/resized preview data URLs, respectively. These utilities are used internally by KvImageUpload and are also exported for potential reuse.

Documentation and Developer Experience:

• Added comprehensive Storybook stories for KvImageUpload, demonstrating its various states, customization options, and event outputs. This aids in development, testing, and documentation.

Testing and Quality Assurance:

• Implemented thorough unit tests for KvImageUpload, covering accessibility, validation, UI states, event emissions, and prop-driven behaviors. This ensures reliability and maintainability of the new component. Also added tests for the new image utility functions. [1] [2]…d file handler

[Copilot]

Pull request overview

Adds a new KvImageUpload Vue component to the @kiva/kv-components library, along with supporting image-validation / preview-generation utilities, Storybook documentation, and unit tests to cover expected UI, accessibility, and error-handling behavior.

Changes:

• Introduces KvImageUpload.vue as a reusable, accessible image uploader with preview, validation, and emitted events.
• Adds validateImageFile and cropResizeImageToDataUrl utilities to src/utils/imageUtils.ts and corresponding unit tests.
• Adds Storybook stories and registers the component in the Vue entrypoint exports.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
@kiva/kv-components/src/utils/imageUtils.ts	Adds image file validation and crop/resize preview generation utilities.
@kiva/kv-components/src/vue/KvImageUpload.vue	New image upload component that uses the new utilities and emits upload/remove/error events.
@kiva/kv-components/src/vue/index.ts	Exports KvImageUpload from the component library entrypoint.
@kiva/kv-components/src/vue/stories/KvImageUpload.stories.js	Storybook stories demonstrating states, props, and emitted events.
@kiva/kv-components/tests/unit/specs/utils/imageUtils.spec.js	Unit tests for the new image utility functions.
@kiva/kv-components/tests/unit/specs/components/KvImageUpload.spec.js	Unit tests for KvImageUpload including a11y and behavior assertions.

[eddieferrer]

Looking good! -- Based on my most recent implementation here: https://github.com/kiva/cms-page-server/blob/2b47544fccb4aa3b8d83a77cefb74dd2cb97f7bf/components/giving-fund/EditFundLightbox.vue#L468 you can see some of the CSS hacking I had to do.

The biggest issue I had was the position of the error messages I ended up having to hide them completely. I would suggest that we just get rid of displaying the localErrorMessage completely and let the consuming component display the error message however they want.

The other CSS hack was moving the edit/close icons and making them stand out a little more by making the background white and adding drop shadow. This is for the circle case where the icons are only partly over the image and are hard to see.

[dyersituations]

Other than the error story, the component is looking good in storybook.

[mcstover]

@eddieferrer @dyersituations I've made some udpates to remove the internal error messaging from this component. That will now be handled outside of it. Also tweaked the styles for edit/remove button when the circle version is active (opaque bg + drop shadow), we could also set those styles all the time, they look good in either case.

[dyersituations]

👍