@electrolux-oss/sanity-plugin-media 2.0.0 → 4.0.0

package/README.md

@@ -1,11 +1,24 @@
-# Sanity Media Plugin - Electrolux Version (for Sanity Studio v4)
+# Sanity Media Plugin - Electrolux Version (for Sanity Studio v5 and v6)
 
-> This plugin is for **Sanity Studio v4**.  
+> This plugin supports **Sanity Studio v5 and v6**.  
 > This is a forked version of Sanitys own [Media Plugin (v4.0.0)](https://github.com/sanity-io/sanity-plugin-media)
 
+## :warning: Breaking changes - (v3.0.0 → v4.0.0)
+
+### **v3 → v4**
+
+This release targets **Sanity Studio v5 and v6**. Support for Studio v4 has been dropped, and the
+package is now **ESM-only** (the CommonJS build has been removed).  
+Projects must be on Studio v5 or v6 (and React 19.2.2 or newer) before upgrading to v4.
+
+### **v2 → v3**
+
+This release upgrades the plugin’s peer dependency from **React 18** to **React 19**.  
+Projects using this plugin must update to React 19 before upgrading to v3.
+
 ## What is it?
 
-A Sanity Studio v3 plugin that extends media handling capabilities with custom enhancements, based on a fork of an original plugin by Sanity.io.
+A Sanity Studio v5 / v6 plugin that extends media handling capabilities with custom enhancements, based on a fork of an original plugin by Sanity.io.
 
 A convenient way to browse, manage and refine your [Sanity](https://www.sanity.io/) assets.
 
@@ -14,11 +27,9 @@ Use it standalone as a browser, or optionally hook it up as a [custom asset sour
 ![Grid view](https://user-images.githubusercontent.com/209129/108927411-21aa7f00-7638-11eb-9cf7-334598ac4103.png)
 _Default grid view_
 
-
-_Asset details tab_          |  _Asset alt texts tab_
-:-------------------------:|:-------------------------:
-![first](https://github.com/user-attachments/assets/477b6576-a1a4-42e2-b2c2-2d2e962eb366)  |  ![second](https://github.com/user-attachments/assets/2c5bd907-1b60-48c6-a007-2f7304409007)
-
+|                                    _Asset details tab_                                    |                                   _Asset alt texts tab_                                    |
+| :---------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------: |
+| ![first](https://github.com/user-attachments/assets/477b6576-a1a4-42e2-b2c2-2d2e962eb366) | ![second](https://github.com/user-attachments/assets/2c5bd907-1b60-48c6-a007-2f7304409007) |
 
 ## Features
 
@@ -52,18 +63,18 @@ _Asset details tab_          |  _Asset alt texts tab_
 - Define a list of available languages to enable multi-language alt texts for assets.
 - See example of how to enable this feature [here](###plugin-config).
 
-## Install (Sanity Studio v3)
+## Install (Sanity Studio v5 and v6)
 
 In your Sanity project folder:
 
 ```zsh
-npm install --save sanity-plugin-media
+npm install --save @electrolux-oss/sanity-plugin-media
 ```
 
 or
 
 ```zsh
-yarn add sanity-plugin-media
+yarn add @electrolux-oss/sanity-plugin-media
 ```
 
 ## Usage
@@ -71,19 +82,19 @@ yarn add sanity-plugin-media
 Add it as a plugin in your `sanity.config.ts` (or .js) file:
 
 ```js
-import { media } from 'sanity-plugin-media'
+import { media } from '@electrolux-oss/sanity-plugin-media'
 
 export default defineConfig({
   // ...
   plugins: [
-    media(      
+    media({
       languages: [
         { code: 'en-US', title: 'English', default: true },
         { code: 'sv-SE', title: 'Swedish' },
         { code: 'fr-FR', title: 'French' },
         { code: 'de-DE', title: 'German' }
-      ],
-    )
+      ]
+    })
   ]
 })
 ```
@@ -95,7 +106,7 @@ This will enable the Media plugin as both a standalone tool (accessible in your
 You can configure your studio to use this asset source either exclusively, or conditionally enable it based on the type of asset (image or file).
 
 ```js
-import { media, mediaAssetSource } from 'sanity-plugin-media'
+import { media, mediaAssetSource } from '@electrolux-oss/sanity-plugin-media'
 
 export default defineConfig({
   // ...
@@ -120,7 +131,7 @@ export default defineConfig({
   plugins: [
     media({
       // { code: string; title: string, default?: boolean }[] - the list of languages used for alt texts
-      // NOTE! Set only one language to default: true. 
+      // NOTE! Set only one language to default: true.
       languages: [
         { code: 'en-US', title: 'English', default: true },
         { code: 'sv-SE', title: 'Swedish' },
@@ -131,14 +142,19 @@ export default defineConfig({
         enabled: true,
         // boolean - enables an optional "Credit Line" field in the plugin.
         // Used to store credits e.g. photographer, licence information
-        excludeSources: ['unsplash'],
+        excludeSources: ['unsplash']
         // string | string[] - when used with 3rd party asset sources, you may
         // wish to prevent users overwriting the creditLine based on the `source.name`
       },
-      maximumUploadSize: 10000000
+      maximumUploadSize: 10000000,
       // number - maximum file size (in bytes) that can be uploaded through the plugin interface
+      directUploads: true,
+      // boolean - enable / disable direct uploads through the plugin interface (default true)
+      components: {
+        details: CustomDetails
+      }
     })
-  ],
+  ]
 })
 ```
 
@@ -146,27 +162,45 @@ export default defineConfig({
 
 ### Test your plugin locally
 
-In the plugin directory run this command:
+**Step 1: Set up the plugin for local development**
+
+In the plugin directory, run:
+
 ```zsh
 npm run link-watch
 ```
 
-This will set up your plugin to build whenever the code changes, and publish the package to a local yalc repository.
+This will:
 
-Run the command in the studio project directory:
+- Build your plugin automatically whenever code changes
+- Publish the package to a local yalc repository
+
+**Step 2: Link the plugin to your studio**
+
+In your studio project directory, run:
 
 ```zsh
-npx yalc add @electrolux-oss/sanity-plugin-media && npx yalc link @electrolux-oss/sanity-plugin-media && npm install
+npx yalc add @electrolux-oss/sanity-plugin-media && npm install
 ```
 
-You should see something like this in the `package.json` file:
+**Step 3: Verify the setup**
 
-```
-"@electrolux-oss/sanity-plugin-media": "file:.yalc/@electrolux-oss/sanity-plugin-media",
+Check your studio's `package.json` - you should see:
+
+```json
+"@electrolux-oss/sanity-plugin-media": "file:.yalc/@electrolux-oss/sanity-plugin-media"
 ```
 
-Which means you can safely use the local version of the plugin with this import:
+Now you can use the local version of the plugin:
 
-```
+```typescript
 import { media } from '@electrolux-oss/sanity-plugin-media'
 ```
+
+### Making changes
+
+When you modify the plugin code:
+
+1. The `link-watch` command will automatically rebuild
+2. In your studio, run `npx yalc update` to pull the latest changes
+3. Restart your dev server: `npm run dev`

package/dist/index.d.ts

@@ -1,14 +1,193 @@
 import { AssetSourceComponentProps } from 'sanity'
+import type { ComponentType } from 'react'
+import type { Control } from 'react-hook-form'
+import type { FieldErrors } from 'react-hook-form'
 import { ForwardRefExoticComponent } from 'react'
 import { JSX } from 'react'
 import { Plugin as Plugin_2 } from 'sanity'
 import { RefAttributes } from 'react'
+import type { SanityAssetDocument } from '@sanity/client'
+import type { SanityImageAssetDocument } from '@sanity/client'
 import { SVGProps } from 'react'
+import type { UseFormRegister } from 'react-hook-form'
+import * as z from 'zod'
+
+declare type Asset = FileAsset | ImageAsset
+
+declare type AssetFormData = z.infer<AssetFormSchemaObject>
+
+declare type AssetFormSchemaObject = ReturnType<typeof createAssetFormSchema>
+
+declare const createAssetFormSchema: (
+  languages: MediaToolOptions['languages'],
+  validateAltTexts?: boolean
+) => z.ZodObject<
+  {
+    altText: z.ZodOptional<z.ZodString>
+    altTexts:
+      | z.ZodRecord<z.ZodString, z.ZodNullable<z.ZodString>>
+      | z.ZodEffects<
+          z.ZodRecord<z.ZodString, z.ZodNullable<z.ZodString>>,
+          Record<string, string | null>,
+          Record<string, string | null>
+        >
+    creditLine: z.ZodOptional<z.ZodString>
+    description: z.ZodOptional<z.ZodString>
+    opt: z.ZodObject<
+      {
+        media: z.ZodObject<
+          {
+            tags: z.ZodNullable<
+              z.ZodArray<
+                z.ZodObject<
+                  {
+                    label: z.ZodString
+                    value: z.ZodString
+                  },
+                  'strip',
+                  z.ZodTypeAny,
+                  {
+                    label: string
+                    value: string
+                  },
+                  {
+                    label: string
+                    value: string
+                  }
+                >,
+                'many'
+              >
+            >
+          },
+          'strip',
+          z.ZodTypeAny,
+          {
+            tags:
+              | {
+                  label: string
+                  value: string
+                }[]
+              | null
+          },
+          {
+            tags:
+              | {
+                  label: string
+                  value: string
+                }[]
+              | null
+          }
+        >
+      },
+      'strip',
+      z.ZodTypeAny,
+      {
+        media: {
+          tags:
+            | {
+                label: string
+                value: string
+              }[]
+            | null
+        }
+      },
+      {
+        media: {
+          tags:
+            | {
+                label: string
+                value: string
+              }[]
+            | null
+        }
+      }
+    >
+    originalFilename: z.ZodString
+    title: z.ZodOptional<z.ZodString>
+  },
+  'strip',
+  z.ZodTypeAny,
+  {
+    altTexts: Record<string, string | null>
+    opt: {
+      media: {
+        tags:
+          | {
+              label: string
+              value: string
+            }[]
+          | null
+      }
+    }
+    originalFilename: string
+    altText?: string | undefined
+    creditLine?: string | undefined
+    description?: string | undefined
+    title?: string | undefined
+  },
+  {
+    altTexts: Record<string, string | null>
+    opt: {
+      media: {
+        tags:
+          | {
+              label: string
+              value: string
+            }[]
+          | null
+      }
+    }
+    originalFilename: string
+    altText?: string | undefined
+    creditLine?: string | undefined
+    description?: string | undefined
+    title?: string | undefined
+  }
+>
+
+declare type CustomFields = {
+  altText?: string
+  altTexts?: Record<string, string>
+  description?: string
+  opt?: {
+    media?: {
+      tags?: SanityReference[]
+    }
+  }
+  title?: string
+}
+
+declare type DetailsProps = {
+  formUpdating: boolean
+  handleCreateTag: (title: string) => void
+  control: Control<AssetFormData>
+  errors: FieldErrors<AssetFormData>
+  register: UseFormRegister<AssetFormData>
+  allTagOptions: TagSelectOption[]
+  assetTagOptions: TagSelectOption[] | null
+  currentAsset: Asset
+  creditLine?: {
+    enabled: boolean
+    excludeSources?: string | string[] | undefined
+  }
+}
+
+declare type FileAsset = SanityAssetDocument &
+  CustomFields & {
+    _type: 'sanity.fileAsset'
+  }
+
+declare type ImageAsset = SanityImageAssetDocument &
+  CustomFields & {
+    _type: 'sanity.imageAsset'
+    creditLine?: string
+  }
 
 export declare const media: Plugin_2<void | MediaToolOptions>
 
 export declare const mediaAssetSource: {
-  component: (props: AssetSourceComponentProps) => JSX.Element
+  component: (props: AssetSourceComponentProps) => JSX
+  uploadMode: 'component'
   icon: ForwardRefExoticComponent<
     Omit<SVGProps<SVGSVGElement>, 'ref'> & RefAttributes<SVGSVGElement>
   >
@@ -23,10 +202,43 @@ export declare type MediaToolOptions = {
     default?: boolean
   }[]
   maximumUploadSize?: number
+  components?: {
+    details?: ComponentType<
+      DetailsProps & {
+        renderDefaultDetails: (props: DetailsProps) => JSX.Element
+      }
+    >
+  }
   creditLine: {
     enabled: boolean
     excludeSources?: string | string[]
   }
+  directUploads?: boolean
 }
 
+declare type SanityReference = {
+  _ref: string
+  _type: 'reference'
+  _weak?: boolean
+}
+
+declare const tagOptionSchema: z.ZodObject<
+  {
+    label: z.ZodString
+    value: z.ZodString
+  },
+  'strip',
+  z.ZodTypeAny,
+  {
+    label: string
+    value: string
+  },
+  {
+    label: string
+    value: string
+  }
+>
+
+declare type TagSelectOption = z.infer<typeof tagOptionSchema>
+
 export {}