3 commits

Author	SHA1	Message	Date
Merlijn Vos	850c1cb1c5	Add useImageEditor (#6122) ... - Create image editor abstraction in `@uppy/components` - Refactor `Editor` (Preact) and `ImageEditor` (Uppy plugin) to put all methods in the Uppy plugin class so they can be reused by the headless abstraction - Create framework hooks for React, Vue, Svelte - Update all examples to showcase the new hook - Symlink the `cropper.scss` (just regular CSS) from `@uppy/image-editor` into `@uppy/components`, update `build:css` in all framework packages to copy that file too into their own `dist/` output. - cropper-js needs basic CSS to do the rotations and stuff which would be very tedious to write yourself so we ship that CSS file to consumers too so they can just import it. - Fix memory leak where we created the image on each render inside the original Preact plugin UI ```ts import type { UppyFile } from '@uppy/core' import { useImageEditor } from '@uppy/react' interface ImageEditorProps { file: UppyFile<any, any> close: () => void } export function ImageEditor({ file, close }: ImageEditorProps) { const { state, getImageProps, getSaveButtonProps, getCancelButtonProps, getRotateButtonProps, getFlipHorizontalButtonProps, getZoomButtonProps, getCropSquareButtonProps, getCropLandscapeButtonProps, getCropPortraitButtonProps, getResetButtonProps, getRotationSliderProps, } = useImageEditor({ file }) return ( <div className="p-4 max-w-2xl w-full"> <div className="flex justify-between items-center mb-4"> <h2 className="text-xl font-bold">Edit Image</h2> <button type="button" onClick={close} className="text-gray-500 hover:text-gray-700" > ✕ </button> </div> <div className="mb-4"> {/* biome-ignore lint/a11y/useAltText: alt is provided by getImageProps() */} <img className="w-full max-h-[400px] rounded-lg border-2" {...getImageProps()} /> </div> <div className="mb-4"> <label className="block text-sm font-medium mb-2"> Fine Rotation: {state.angle}° <input className="w-full mt-1" {...getRotationSliderProps()} /> </label> </div> <div className="flex gap-2 flex-wrap mb-4"> <button className="bg-gray-200 px-3 py-1 rounded disabled:opacity-50" {...getRotateButtonProps(-90)} > ↶ -90° </button> <button className="bg-gray-200 px-3 py-1 rounded disabled:opacity-50" {...getRotateButtonProps(90)} > ↷ +90° </button> <button className="bg-gray-200 px-3 py-1 rounded disabled:opacity-50" {...getFlipHorizontalButtonProps()} > ⇆ Flip </button> <button className="bg-gray-200 px-3 py-1 rounded disabled:opacity-50" {...getZoomButtonProps(0.1)} > + Zoom </button> <button className="bg-gray-200 px-3 py-1 rounded disabled:opacity-50" {...getZoomButtonProps(-0.1)} > - Zoom </button> </div> <div className="flex gap-2 flex-wrap mb-4"> <button className="bg-gray-200 px-3 py-1 rounded disabled:opacity-50" {...getCropSquareButtonProps()} > 1:1 </button> <button className="bg-gray-200 px-3 py-1 rounded disabled:opacity-50" {...getCropLandscapeButtonProps()} > 16:9 </button> <button className="bg-gray-200 px-3 py-1 rounded disabled:opacity-50" {...getCropPortraitButtonProps()} > 9:16 </button> <button className="bg-gray-200 px-3 py-1 rounded disabled:opacity-50" {...getResetButtonProps()} > Reset </button> </div> <div className="flex gap-4 justify-end"> <button className="bg-gray-500 text-white px-4 py-2 rounded-md" {...getCancelButtonProps({ onClick: close })} > Cancel </button> <button className="bg-green-500 text-white px-4 py-2 rounded-md disabled:opacity-50 disabled:bg-green-300" {...getSaveButtonProps({ onClick: close })} > Save </button> </div> </div> ) } export default ImageEditor ``` https://github.com/user-attachments/assets/4b0a99cc-8489-41a2-aa3b-ce88110025bf --------- Co-authored-by: Prakash <qxprakash@gmail.com>	2026-01-29 11:13:12 +01:00
Merlijn Vos	0525a2c91a	Fix turbo race condition (#5839) ... Closes #5822 - `"^build"` makes sure dependencies of the package are build first. - Make dependencies of @uppy/components actually dependencies - Remove concurrency setting. It was too high for computers with low RAM.	2025-07-23 10:49:11 +02:00
Merlijn Vos	271db86ad0	Use turbo for building and watching concurrently (#5808) ... - Add `typecheck` command to all packages. - Use turbo to build and watch concurrently with caches. - Remove root `bin/` folder with last global scripts - `bin/companion.sh` -> `@uppy/companion/start-dev` (`yarn start:companion` still works) - `bin/build-components.mjs` -> `@uppy/components/migrate.mjs` (`yarn migrate:components` can be used to run it). This only needs to be ran for new components, not changing existing ones, so that's why it's not part of the build process. turbo is smart enough to build dependencies within a package first before building the package itself (e.g if wanting to build @uppy/audio, build @uppy/utils first). Unfortunately @uppy/core is a peer dep everywhere turbo does not take it into account, yet it must be build first to avoid race conditions. Therefor I added a turbo.json to each package, which you normally never need, but this is an odd case I suppose. Other solutions ran into cyclic dep errors. Another PR would move over the test commands to turbo too.	2025-07-10 13:21:18 +02:00