Prakash
5519b84409
@uppy: upgrade biome and more improvements ( #6244 )
...
- This PR upgrades `biome` from `2.0.5` -> `2.1.2` and adds two new
rules
-
[noUnusedImports](https://biomejs.dev/linter/rules/no-unused-private-class-members )
( we already had suppressions for this rule in code, but the rule itself
was never enabled in the config )
-
[noUnusedPrivateClassMembers](https://biomejs.dev/linter/rules/no-unused-private-class-members/ )
- remove stale suppressions.
- remove stale code.
---------
Co-authored-by: Mikael Finstad <finstaden@gmail.com>
2026-05-21 12:28:03 +08:00
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
Prakash
6a33652458
Merge branch 'main' of https://github.com/transloadit/uppy into 5.0
2025-08-20 16:17:08 +05:30
Mikael Finstad
d31c90e443
Run biome check on main ( #5896 )
...
this time on main
closes #5891
also: fix a11y tabIndex (key event handler)
2025-08-11 10:06:21 +02:00
Prakash
c5b51f6158
Add Export Maps ( #5830 )
...
- added export maps to all the @uppy packages .
- imports remain unaffected except for peerDep packages in `@uppy/react`
`@uppy/svelte` and `@uppy/vue3`.
- export maps added for index files , css , and package.json.
- Added side effects for all the packages.
---------
Co-authored-by: Mikael Finstad <finstaden@gmail.com>
Co-authored-by: Merlijn Vos <merlijn@soverin.net>
2025-07-31 17:22:57 +02:00
Merlijn Vos
7bf319646a
Migrate from Cypress to Vitest Browser Mode ( #5828 )
...
- Remove `e2e` folder entirely
- Remove all hacky resolutions and yarn patches
- Remove `@types/jasmine`, `js2ts` (convert a JS file to TS), and
`vue-template-compiler` from `private/`
- Remove e2e CI job
- Add browsers tests for vue, svelte, and react headless components and
hooks.
- Add new (browser) tests for transloadit, aws-s3, and dashboard.
- Remove final useless scripts from `package.json`, use direct
references in CI.
- Fix Dropzone component accessibility discovered during testing
- Clean up github workflows (move linters.yml into ci.yml, update
e2e.yml)
**Why Vitest Browser Mode?**
We could have used playwright but vitest browser mode uses it under the
hood and we get the use the vitest we know a love. No two entirely
different setups, no different assertions to relearn, write e2e tests as
if you're writing unit tests. Easy, fast, beautiful.
https://vitest.dev/guide/browser/
**Has every single e2e test been rewritten?**
No there were quite a few tests that have a lot overlap with existing or
newly added tests. There were also some tests that were so heavily
mocked inside and out you start to wonder what the value still is. Open
to discuss which tests still need to be added.
2025-07-28 11:27:37 +02:00
Prakash
455abb32af
Headless Hooks: add error component in examples ( #5810 )
...
Add error components in headless hooks examples for `useWebcam` and
`useScreenCapture`
2025-07-09 10:44:47 +02:00
Merlijn Vos
78299475ae
Migrate from Eslint/Prettier/Stylelint to Biome ( #5794 )
2025-07-01 14:55:41 +02:00
Merlijn Vos
cb2999926b
Add useRemoteSource ( #5778 )
2025-06-24 11:00:37 +02:00
Prakash
b0e69cf7ce
Headless Hooks: Add useScreenCapture ( #5784 )
2025-06-19 12:42:01 +02:00
Merlijn Vos
7d807e6d5e
Add useWebcam ( #5741 )
...
Co-authored-by: Mikael Finstad <finstaden@gmail.com>
2025-06-12 11:03:57 +02:00
Merlijn Vos
5c0c831937
Add useDropzone & useFileInput ( #5735 )
...
Co-authored-by: Mikael Finstad <finstaden@gmail.com>
2025-06-09 10:54:28 +02:00
Merlijn Vos
0259b09d73
Headless components ( #5727 )
...
Co-authored-by: Mikael Finstad <finstaden@gmail.com>
2025-05-22 09:59:43 +02:00
