@12-apps/storage 2.2.0 → 2.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/storage",
-  "version": "2.2.0",
+  "version": "2.4.0",
   "type": "module",
   "description": "Image uploads that land at YOUR OWN ORIGIN, never at the bucket (12-20). Isomorphic core (format allowlist, upload ceiling, object-key grammar, rendition set, refusal taxonomy, wire schemas), host-mounted backend surface (./server: createApiStorage, the local-disk driver, the image-pipeline port, the orphan reclaim), Hono adapter (./hono), the S3-compatible driver behind its own subpath (./s3) and the bound picker + upload hook (./react). Standardized adoption contract in ADOPTING.md.",
   "exports": {
@@ -43,7 +43,7 @@
     }
   },
   "dependencies": {
-    "@12-apps/ui": "^6.3.1",
+    "@12-apps/ui": "^6.8.0",
     "zod": "^4.3.5"
   },
   "devDependencies": {

package/src/react/create-web-storage.tsx

@@ -85,6 +85,8 @@ export function createWebStorage(config: WebStorageConfig): WebStorage {
           value={imageKey}
           onChange={setImageKey}
           label={messages.fieldLabel}
+          removeLabel={messages.fieldRemove}
+          uploadCopy={messages.field}
           helperText={messages.fieldHelper}
         />
       </Stack>

package/src/react/failures.ts

@@ -1,3 +1,5 @@
+import type { UploadButtonCopy } from '@12-apps/ui/copy';
+
 import { ACCEPTED_CONTENT_TYPES } from '../content-types';
 import { megabytes } from '../limits';
 
@@ -100,13 +102,24 @@ export interface WebStorageMessages {
   /**
    * The standalone upload page's own chrome — heading, the one-line
    * instruction (which carries the ceiling, same rule as the refusals), the
-   * field label and its helper. These rendered as literals inside
-   * `createWebStorage` until copy became required config.
+   * field label, its helper, and the button that clears a chosen image.
+   * These rendered as literals inside `createWebStorage` until copy became
+   * required config.
    */
   pageTitle: string;
   pageIntro: string;
   fieldLabel: string;
   fieldHelper: string;
+  fieldRemove: string;
+  /**
+   * What the dropzone ITSELF says — its hint line, its accessible name, and
+   * the three announcements only a screen reader receives. `@12-apps/ui` stopped
+   * shipping English defaults for these, so a host that answers `fieldLabel`
+   * and nothing else would have a dropzone with no name and a silent progress
+   * bar. `buttonLabel` is unused here: `ImageField` passes `fieldLabel` as the
+   * override, because the field's own label is the one a form already names.
+   */
+  field: UploadButtonCopy;
 }
 
 /** Copy that only makes sense with the configured ceiling in it. */

package/src/react/image-field.tsx

@@ -5,6 +5,7 @@ import { Box } from '@12-apps/ui/mui/Box';
 import { Stack } from '@12-apps/ui/mui/Stack';
 import { Text } from '@12-apps/ui/typography/Text';
 import { Button } from '@12-apps/ui/form/Button';
+import type { UploadButtonCopy } from '@12-apps/ui/copy';
 import { UploadButton } from '@12-apps/ui/form/UploadButton';
 
 import { ACCEPTED_CONTENT_TYPES } from '../content-types';
@@ -34,7 +35,17 @@ export interface ImageFieldProps {
   previewUrl?: string | null;
   /** Called with the new key, or `null` when the image is removed. */
   onChange: (imageKey: string | null) => void;
-  label?: string;
+  /** The dropzone's own label. REQUIRED — this package ships no default copy. */
+  label: string;
+  /** The button that clears a chosen image. REQUIRED, for the same reason. */
+  removeLabel: string;
+  /**
+   * What the dropzone itself says — the hint under the label, its accessible
+   * name, and the three announcements only a screen reader receives. REQUIRED:
+   * `@12-apps/ui` ships no default copy, so without this the dropzone has no
+   * name and a silent progress bar.
+   */
+  uploadCopy: UploadButtonCopy;
   helperText?: string;
   /** Passed through per upload — `{ optimize: false }` for a rendered canvas. */
   uploadOptions?: UploadOptions;
@@ -89,7 +100,10 @@ export function ImageField(props: BoundImageFieldProps): JSX.Element {
       ) : null}
       <UploadButton
         variant="dropzone"
-        label={props.label ?? 'Enviar imagem'}
+        copy={props.uploadCopy}
+        // The field's own label wins over `uploadCopy.buttonLabel`: a form
+        // already names this field, and naming it twice is how the two drift.
+        label={props.label}
         accept={ACCEPT}
         disabled={props.disabled || uploader.uploading}
         uploading={uploader.uploading}
@@ -100,7 +114,7 @@ export function ImageField(props: BoundImageFieldProps): JSX.Element {
       {preview ? (
         <Box>
           <Button variant="text" onClick={handleRemove} dataTestId={`${testId}-remove`}>
-            Remover imagem
+            {props.removeLabel}
           </Button>
         </Box>
       ) : null}

package/src/react/pt-BR.ts

@@ -34,5 +34,19 @@ export function PT_BR_WEB_STORAGE_MESSAGES(
     pageIntro: `Envie um PNG, JPG, WebP ou GIF de até ${context.limit}.`,
     fieldLabel: 'Foto do produto',
     fieldHelper: 'A imagem é reduzida no navegador antes do envio.',
+    fieldRemove: 'Remover imagem',
+    field: {
+      // `buttonLabel` is never read here — `ImageField` overrides it with
+      // `fieldLabel`. It is still answered, because the type is the whole of
+      // what `UploadButton` may render and a partial answer is not a pack.
+      buttonLabel: 'Foto do produto',
+      dropzoneHint: 'Solte a imagem aqui ou clique para escolher',
+      dropzoneRole: (label) => `Área de upload de imagem. ${label}`,
+      uploading: 'Enviando…',
+      dropReady: 'Imagem pronta para soltar',
+      percentUploaded: (percent) => `${percent}% enviado`,
+      uploadInProgress: (percent) => `Envio em andamento: ${percent}%`,
+      errorAnnouncement: (message) => `Erro: ${message}`,
+    },
   };
 }