sanity-plugin-cloudinary 0.2.2 → 1.0.0-v3-studio.3

package/package.json

@@ -1,61 +1,87 @@
 {
-  "version": "0.2.2",
+  "name": "sanity-plugin-cloudinary",
+  "version": "1.0.0-v3-studio.3",
+  "description": "> **NOTE**",
+  "author": "Sanity.io <hello@sanity.io>",
   "license": "MIT",
+  "source": "./src/index.ts",
+  "main": "./lib/index.js",
+  "module": "./lib/index.esm.js",
+  "types": "./lib/src/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/src/index.d.ts",
+      "source": "./src/index.ts",
+      "import": "./lib/index.esm.js",
+      "require": "./lib/index.js",
+      "default": "./lib/index.esm.js"
+    }
+  },
   "files": [
-    "dist",
+    "src",
+    "lib",
+    "v2-incompatible.js",
     "sanity.json"
   ],
   "engines": {
-    "node": ">=10"
+    "node": ">=14.0.0"
   },
   "scripts": {
-    "build": "sanipack build",
-    "watch": "sanipack build --watch",
-    "prepublishOnly": "sanipack build && sanipack verify"
+    "build": "pkg-utils build",
+    "watch": "pkg-utils watch",
+    "prepublishOnly": "npm run build",
+    "clean": "rimraf lib",
+    "lint": "eslint .",
+    "prebuild": "npm run clean && plugin-kit verify-package --silent && pkg-utils",
+    "link-watch": "plugin-kit link-watch",
+    "prepare": "husky install"
   },
   "peerDependencies": {
-    "@sanity/base": "^2.6.2",
-    "@sanity/field": "^2.6.2",
-    "@sanity/form-builder": "^2.6.2",
-    "react": "^17.0",
-    "react-dom": "^17.0"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "sanipack verify"
-    }
-  },
-  "prettier": {
-    "printWidth": 80,
-    "semi": true,
-    "singleQuote": true,
-    "trailingComma": "es5"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "sanity": "dev-preview || 3.0.0-rc.0"
   },
-  "name": "sanity-plugin-cloudinary",
-  "author": "Sanity.io <hello@sanity.io>",
   "devDependencies": {
-    "@sanity/base": "^2.6.2",
-    "@sanity/field": "^2.6.2",
-    "@sanity/form-builder": "^2.6.2",
-    "@sanity/types": "^2.6.0",
-    "@size-limit/preset-small-lib": "^4.9.2",
-    "@types/react": "^17.0.2",
+    "@commitlint/cli": "^17.2.0",
+    "@commitlint/config-conventional": "^17.2.0",
+    "@sanity/pkg-utils": "^1.16.2",
+    "@sanity/plugin-kit": "^2.0.7",
+    "@sanity/semantic-release-preset": "^2.0.2",
+    "@types/react": "^18.0.0",
+    "@types/styled-components": "^5.1.26",
     "@types/video.js": "^7.3.15",
-    "autoprefixer": "^9.0.0",
-    "cssnano": "^4.1.10",
-    "husky": "^5.1.3",
+    "@typescript-eslint/eslint-plugin": "^5.42.0",
+    "@typescript-eslint/parser": "^5.42.0",
+    "eslint": "^8.26.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-config-sanity": "^6.0.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.31.10",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "husky": "^8.0.1",
+    "lint-staged": "^13.0.3",
     "postcss": "^8.0.0",
-    "rollup-plugin-postcss": "^4.0.0",
-    "sanipack": "2.0.1",
-    "size-limit": "^4.9.2",
-    "tsdx": "^0.14.1",
-    "tslib": "^2.1.0",
-    "typescript": "^4.2.2"
+    "prettier": "^2.7.1",
+    "react": "^18.0.0",
+    "rimraf": "^3.0.2",
+    "sanity": "dev-preview || 3.0.0-rc.0",
+    "typescript": "^4.8.4"
   },
   "dependencies": {
+    "@sanity/icons": "^1.3.6",
+    "@sanity/incompatible-plugin": "^1.0.4",
+    "@sanity/studio-secrets": "^2.0.0-v3-studio.6",
+    "@sanity/ui": "^1.0.0-beta.31",
     "nanoid": "^3.1.22",
-    "sanity-secrets": "^0.0.6",
     "styled-components": "^5.2.1",
     "video.js": "^7.11.7"
-  }
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:sanity-io/sanity-plugin-cloudinary.git"
+  },
+  "bugs": {
+    "url": "https://github.com/sanity-io/sanity-plugin-cloudinary/issues"
+  },
+  "homepage": "https://github.com/sanity-io/sanity-plugin-cloudinary#readme"
 }

package/sanity.json

@@ -1,20 +1,8 @@
 {
-  "paths": {
-    "source": "src",
-    "compiled": "dist"
-  },
   "parts": [
     {
-      "implements": "part:@sanity/base/schema-type",
-      "path": "schema/cloudinaryAssetDerived"
-    },
-    {
-      "implements": "part:@sanity/base/schema-type",
-      "path": "schema/cloudinaryAsset"
-    },
-    {
-      "implements": "part:@sanity/form-builder/input/array/functions",
-      "path": "arrayFunctions"
+      "implements": "part:@sanity/base/sanity-root",
+      "path": "./v2-incompatible.js"
     }
   ]
-}
+}

package/src/arrayFunctions.tsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import {Button} from '@sanity/ui'
+import {PatchEvent, setIfMissing, insert} from 'sanity'
+
+import {useSecrets} from '@sanity/studio-secrets'
+import SecretsConfigView, {namespace} from './components/SecretsConfigView'
+import {cloudinaryAssetSchema} from './schema/cloudinaryAsset'
+import {openMediaSelector} from './utils'
+import {InsertHandlerParams} from './typings'
+
+interface ApiConfig {
+  cloudName: string
+  apiKey: string
+}
+
+const AssetListFunctions = (props: any) => {
+  const {secrets, loading} = useSecrets<ApiConfig>(namespace)
+  const [showSettings, setShowSettings] = React.useState(false)
+
+  const cloudinaryType = props.type.of.find(
+    (t: {name: string}) => t.name === cloudinaryAssetSchema.name
+  )
+
+  const handleSelect = (selected: InsertHandlerParams) => {
+    const {onCreateValue, onChange} = props
+    const items = selected.assets.map((asset) =>
+      Object.assign(
+        {},
+        asset,
+        {
+          // Schema version. In case we ever change our schema.
+          _version: 1,
+        },
+        onCreateValue(cloudinaryType)
+      )
+    )
+    onChange(PatchEvent.from([setIfMissing([]), insert(items, 'after', [-1])]))
+  }
+
+  const actions = (
+    <>
+      <Button
+        disabled={props.readOnly || loading}
+        mode="ghost"
+        onClick={() =>
+          secrets &&
+          openMediaSelector(
+            secrets.cloudName,
+            secrets.apiKey,
+            true, // multi-selection
+            handleSelect
+          )
+        }
+      >
+        Add multiple
+      </Button>
+      <Button onClick={() => setShowSettings(true)}>Configure</Button>
+    </>
+  )
+
+  return (
+    <>
+      {showSettings && <SecretsConfigView onClose={() => setShowSettings(false)} />}
+      {/* <DefaultArrayFunctions {...props}>*/}
+      {cloudinaryType && actions}
+      {/*    </DefaultArrayFunctions>*/}
+    </>
+  )
+}
+
+export default AssetListFunctions

package/src/components/AssetDiff.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import {DiffFromTo} from 'sanity'
+import VideoPlayer from './VideoPlayer'
+import {assetUrl} from '../utils'
+import {CloudinaryAsset} from '../typings'
+
+type Props = {
+  value: CloudinaryAsset | undefined
+}
+
+const CloudinaryDiffPreview = ({value}: Props) => {
+  if (!value) {
+    return null
+  }
+
+  const url = assetUrl(value)
+
+  if (value.resource_type === 'video') {
+    return (
+      <section
+        style={{
+          display: 'flex',
+          flexWrap: 'wrap',
+          justifyContent: 'space-between',
+        }}
+      >
+        <VideoPlayer src={url} kind="diff" />
+      </section>
+    )
+  }
+
+  return <img alt="preview" src={url} style={{maxWidth: '100%', height: 'auto'}} />
+}
+
+type DiffProps = {
+  diff: any
+  schemaType: any
+}
+
+const AssetDiff = ({diff, schemaType}: DiffProps) => {
+  return <DiffFromTo diff={diff} schemaType={schemaType} previewComponent={CloudinaryDiffPreview} />
+}
+
+export default AssetDiff

package/src/components/AssetPreview.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import VideoPlayer from './VideoPlayer'
+import {assetUrl} from '../utils'
+import {Box} from '@sanity/ui'
+import {CloudinaryAsset} from '../typings'
+
+type ComponentProps = {
+  layout?: 'default' | 'block'
+  value: CloudinaryAsset | undefined
+}
+
+const AssetPreview = ({value, layout}: ComponentProps) => {
+  const url = value && assetUrl(value)
+  if (!value || !url) {
+    return null
+  }
+
+  switch (value.resource_type) {
+    case 'video':
+      return (
+        <Box>
+          <VideoPlayer src={url} kind="player" />
+        </Box>
+      )
+    default:
+      return (
+        <Box>
+          <img
+            alt="preview"
+            src={url}
+            style={{
+              maxWidth: layout === 'default' ? '80px' : '100%',
+              height: 'auto',
+            }}
+          />
+        </Box>
+      )
+  }
+}
+
+export default AssetPreview

package/src/components/CloudinaryInput.tsx

@@ -0,0 +1,61 @@
+import React, {useCallback, useState} from 'react'
+import WidgetInput from './WidgetInput'
+import {nanoid} from 'nanoid'
+import {ObjectInputProps, PatchEvent, set} from 'sanity'
+import {CloudinaryAsset} from '../typings'
+import {useSecrets} from '@sanity/studio-secrets'
+import {InsertHandlerParams} from '../typings'
+import {openMediaSelector} from '../utils'
+import SecretsConfigView, {namespace, Secrets} from './SecretsConfigView'
+
+const CloudinaryInput = (props: ObjectInputProps) => {
+  const [showSettings, setShowSettings] = useState(false)
+  const {secrets} = useSecrets<Secrets>(namespace)
+  const {onChange, schemaType: type} = props
+  const value = (props.value as CloudinaryAsset) || undefined
+
+  const handleSelect = useCallback(
+    (payload: InsertHandlerParams) => {
+      const [asset] = payload.assets
+      if (!asset) {
+        return
+      }
+
+      onChange(
+        PatchEvent.from([
+          set(
+            Object.assign(
+              {
+                _type: type.name,
+                _version: 1,
+                ...(value?._key ? {_key: value._key} : {_key: nanoid()}),
+              },
+              asset
+            )
+          ),
+        ])
+      )
+    },
+    [onChange, type, value?._key]
+  )
+
+  const action = secrets
+    ? () =>
+        openMediaSelector(
+          secrets.cloudName,
+          secrets.apiKey,
+          false, // single selection
+          handleSelect,
+          value
+        )
+    : () => setShowSettings(true)
+
+  return (
+    <>
+      {showSettings && <SecretsConfigView onClose={() => setShowSettings(false)} />}
+      <WidgetInput onSetup={() => setShowSettings(true)} openMediaSelector={action} {...props} />
+    </>
+  )
+}
+
+export default CloudinaryInput

package/src/components/SecretsConfigView.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import {SettingsView} from '@sanity/studio-secrets'
+
+export type Secrets = {
+  cloudName: string
+  apiKey: string
+}
+
+const pluginConfigKeys = [
+  {
+    key: 'cloudName',
+    title: 'Cloud name',
+    description: '',
+  },
+  {
+    key: 'apiKey',
+    title: 'API key',
+    description: '',
+  },
+]
+
+export const namespace = 'cloudinary'
+
+type Props = {
+  onClose: () => void
+}
+
+const SecretsConfigView = (props: Props) => {
+  return (
+    <SettingsView
+      title="Cloudinary config"
+      namespace={namespace}
+      keys={pluginConfigKeys}
+      onClose={props.onClose}
+    />
+  )
+}
+
+export default SecretsConfigView

package/src/components/VideoPlayer.tsx

@@ -0,0 +1,62 @@
+import React, { CSSProperties } from 'react';
+import videojs, { VideoJsPlayer } from 'video.js';
+
+type PlayerKind = 'player' | 'diff';
+
+export type VideoPlayerProps = {
+  src: string;
+  kind: PlayerKind;
+};
+
+export default class VideoPlayer extends React.Component<
+  VideoPlayerProps,
+  any
+> {
+  videoNode?: HTMLVideoElement;
+  player?: VideoJsPlayer;
+
+  componentDidMount() {
+    const { src } = this.props;
+    this.player = videojs(this.videoNode, {
+      sources: [{ src }],
+      controls: true,
+    });
+  }
+
+  componentWillUnmount() {
+    if (this.player) {
+      this.player.dispose();
+    }
+  }
+
+  render() {
+    const { kind } = this.props;
+    const className: Record<PlayerKind, string> = {
+      player: 'video-js vjs-16-9 vjs-big-play-centered',
+      diff: 'video-js vjs-layout-tiny vjs-fluid',
+    };
+
+    const style: CSSProperties = { position: 'relative' };
+
+    return (
+      <div>
+        <link
+          href="https://vjs.zencdn.net/7.8.4/video-js.css"
+          rel="stylesheet"
+        />
+        <div data-vjs-player>
+          <video
+            onClick={event => event.stopPropagation()}
+            style={kind === 'diff' ? style : {}}
+            className={className[kind]}
+            ref={node => {
+              if (node) {
+                this.videoNode = node;
+              }
+            }}
+          ></video>
+        </div>
+      </div>
+    );
+  }
+}

package/src/components/WidgetInput.tsx

@@ -0,0 +1,66 @@
+import React, {useCallback} from 'react'
+import {ObjectInputProps, PatchEvent, unset} from 'sanity'
+import {Button, Flex, Grid, Stack} from '@sanity/ui'
+import {PlugIcon} from '@sanity/icons'
+import styled from 'styled-components'
+import AssetPreview from './AssetPreview'
+import {CloudinaryAsset} from '../typings'
+
+const SetupButtonContainer = styled.div`
+  position: relative;
+  display: block;
+  font-size: 0.8em;
+  transform: translate(0%, -10%);
+`
+
+type WidgetInputProps = ObjectInputProps & {openMediaSelector: () => void; onSetup: () => void}
+
+const WidgetInput = (props: WidgetInputProps) => {
+  const {onChange, readOnly, value, openMediaSelector} = props
+
+  const removeValue = useCallback(() => {
+    onChange(PatchEvent.from([unset()]))
+  }, [onChange])
+
+  return (
+    <Stack>
+      <SetupButtonContainer>
+        <Flex flex={1} justify="flex-end">
+          <Button
+            color="primary"
+            icon={PlugIcon}
+            mode="bleed"
+            title="Configure"
+            onClick={props.onSetup}
+            tabIndex={1}
+          />
+        </Flex>
+      </SetupButtonContainer>
+
+      <Flex style={{textAlign: 'center'}} marginBottom={2}>
+        <AssetPreview value={value as CloudinaryAsset} />
+      </Flex>
+
+      <Grid gap={1} style={{gridTemplateColumns: 'repeat(auto-fit, minmax(100px, 1fr))'}}>
+        <Button
+          disabled={readOnly}
+          mode="ghost"
+          title="Select an asset"
+          tone="default"
+          onClick={openMediaSelector}
+          text="Select…"
+        />
+        <Button
+          disabled={readOnly || !value}
+          tone="critical"
+          mode="ghost"
+          title="Remove asset"
+          text="Remove"
+          onClick={removeValue}
+        />
+      </Grid>
+    </Stack>
+  )
+}
+
+export default WidgetInput