Move cloudinary, unsplash and oembed out of fields package and oembed-adapters into new fields-oembed package

.changeset/pretty-poems-explode.md

@@ -0,0 +1,35 @@
+---
+'@keystonejs/fields': patch
+'@keystonejs/oembed-adapters': patch
+---
+
+Moved `@keystonejs/fields-cloudinary-image`, `@keystonejs/fields-unsplash` and `@keystonejs/fields-oembed`  out of the core fields package `@keystonejs/fields`.
+
+```js
+const { CloudinaryImage, Unsplash, OEmbed } = require('@keystonejs/fields');
+```
+
+Changes to:
+
+```js
+const { CloudinaryImage, Unsplash, OEmbed } = require('@keystonejs/fields-cloudinary-image');
+const { Unsplash } = require('@keystonejs/fields-unsplash');
+const { OEmbed } = require('@keystonejs/fields-oembed');
+```
+
+---
+
+The `IframelyOEmbedAdapter` can now also be imported from `@keystonejs/fields-oembed`.
+
+```js
+const { OEmbed } = require('@keystonejs/fields-oembed');
+const { IframelyOEmbedAdapter } = require('@keystonejs/oembed-adapters');
+```
+
+Changed to:
+
+```js
+const { OEmbed, IframelyOEmbedAdapter } = require('@keystonejs/fields-oembed');
+```
+
+Existing import methods remain working but in future may be deprecated.

demo-projects/blog/package.json

@@ -43,7 +43,7 @@
     "graphql-tag": "^2.10.3",
     "isomorphic-unfetch": "^3.0.0",
     "next": "^9.4.4",
-    "node-fetch": "^2.3.0",
+    "node-fetch": "^2.6.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"
   },

package.json

@@ -172,6 +172,9 @@
       "packages/fields",
       "packages/fields-authed-relationship",
       "packages/fields-auto-increment",
+      "packages/fields-oembed",
+      "packages/fields-unsplash",
+      "packages/fields-cloudinary-image",
       "packages/fields-datetime-utc",
       "packages/fields-markdown",
       "packages/fields-mongoid",

packages/field-content/README.md

@@ -130,6 +130,6 @@ export function processNodeForConnectQuery({ id, node }) { return { node, query
 In addition to the standard set of blocks exposed by the `Content` field, you can create custom blocks using the above API.
 Some other field types also expose custom blocks that can be used in the `Content` field. You can find examples of custom blocks in the following fields:
 
-- [CloudinaryImage field](/packages/fields/src/types/CloudinaryImage/README.md).
-- [oEmbed field](/packages/fields/src/types/OEmbed/README.md).
-- [Unsplash field](/packages/fields/src/types/Unsplash/README.md).
+- [CloudinaryImage field](/packages/fields-cloudinary-image/README.md).
+- [oEmbed field](/packages/fields-oembed/README.md).
+- [Unsplash field](/packages/fields-unsplash/README.md).

packages/fields/src/types/CloudinaryImage/README.md → packages/fields-cloudinary-image/README.md

@@ -15,7 +15,7 @@ This field must be used with the [`CoundinaryAdapter`](/packages/file-adapters/R
 ```js title=index.js
 const { Keystone } = require('@keystonejs/keystone');
 const { CloudinaryAdapter } = require('@keystonejs/file-adapters');
-const { CloudinaryImage } = require('@keystonejs/fields');
+const { CloudinaryImage } = require('@keystonejs/fields-cloudinary-image');
 
 const keystone = new Keystone({...});
 

packages/fields-cloudinary-image/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@keystonejs/fields-cloudinary-image",
+  "description": "KeystoneJS Cloudinary Image Field Type",
+  "version": "1.0.0",
+  "author": "The KeystoneJS Development Team",
+  "license": "MIT",
+  "repository": "https://github.com/keystonejs/keystone/tree/master/packages/fields-cloudinary-image",
+  "homepage": "https://github.com/keystonejs/keystone",
+  "engines": {
+    "node": ">=10.0.0"
+  },
+  "dependencies": {
+    "@arch-ui/button": "^0.0.20",
+    "@arch-ui/fields": "^3.0.3",
+    "@arch-ui/input": "^0.1.10",
+    "@arch-ui/layout": "^0.2.13",
+    "@arch-ui/lozenge": "^0.0.16",
+    "@arch-ui/theme": "^0.0.10",
+    "@babel/runtime": "^7.8.4",
+    "@emotion/core": "^10.0.28",
+    "@iframely/embed.js": "^1.1.1",
+    "@keystonejs/adapter-knex": "^11.0.0",
+    "@keystonejs/adapter-mongoose": "^9.0.0",
+    "@keystonejs/build-field-types": "^5.2.10",
+    "@keystonejs/field-content": "^7.0.2",
+    "@keystonejs/fields": "^14.0.0",
+    "@primer/octicons-react": "^10.0.0",
+    "image-extensions": "^1.1.0",
+    "node-fetch": "^2.6.0",
+    "pluralize": "^7.0.0",
+    "prop-types": "^15.7.2",
+    "query-string": "^6.8.1",
+    "slate": "^0.47.4",
+    "slate-drop-or-paste-images": "^0.9.1",
+    "slate-react": "^0.22.4"
+  },
+  "peerDependencies": {
+    "react": "^16.13.1"
+  },
+  "devDependencies": {
+    "react": "^16.13.1"
+  },
+  "main": "dist/fields-cloudinary-image.cjs.js",
+  "module": "dist/fields-cloudinary-image.esm.js"
+}

packages/fields/src/types/CloudinaryImage/ImageBlock.js → packages/fields-cloudinary-image/src/ImageBlock.js

@@ -3,9 +3,8 @@ import { importView } from '@keystonejs/build-field-types';
 
 import { Block } from '@keystonejs/field-content/Block';
 import { imageContainer, caption } from '@keystonejs/field-content/blocks';
-import CloudinaryImage from './';
-import SelectType from '../Select';
-import RelationshipType from '../Relationship';
+import { CloudinaryImage } from '.';
+import { Select as SelectType, Relationship as RelationshipType } from '@keystonejs/fields';
 
 const RelationshipWrapper = {
   ...RelationshipType,

packages/fields/src/types/CloudinaryImage/Implementation.js → packages/fields-cloudinary-image/src/Implementation.js

@@ -1,6 +1,6 @@
-import { File, MongoFileInterface, KnexFileInterface } from '../File/Implementation';
+import { File } from '@keystonejs/fields';
 
-class CloudinaryImage extends File {
+class CloudinaryImage extends File.implementation {
   constructor() {
     super(...arguments);
     this.graphQLOutputType = 'CloudinaryImage_File';
@@ -91,8 +91,7 @@ class CloudinaryImage extends File {
   }
 }
 
-export {
-  CloudinaryImage,
-  MongoFileInterface as MongoCloudinaryImageInterface,
-  KnexFileInterface as KnexCloudinaryImageInterface,
-};
+const MongoCloudinaryImageInterface = File.adapters.mongoose;
+const KnexCloudinaryImageInterface = File.adapters.knex;
+
+export { CloudinaryImage, MongoCloudinaryImageInterface, KnexCloudinaryImageInterface };

packages/fields/src/types/CloudinaryImage/index.js → packages/fields-cloudinary-image/src/index.js

@@ -1,15 +1,15 @@
 import { importView } from '@keystonejs/build-field-types';
 
 import {
-  CloudinaryImage,
+  CloudinaryImage as Implementation,
   MongoCloudinaryImageInterface,
   KnexCloudinaryImageInterface,
 } from './Implementation';
 import { ImageBlock } from './ImageBlock';
 
-export default {
+export const CloudinaryImage = {
   type: 'CloudinaryImage',
-  implementation: CloudinaryImage,
+  implementation: Implementation,
   views: {
     Controller: importView('./views/Controller'),
     Field: importView('./views/Field'),

packages/fields/src/types/CloudinaryImage/views/Controller.js → packages/fields-cloudinary-image/src/views/Controller.js

@@ -1,4 +1,4 @@
-import FieldController from '../../File/views/Controller';
+import FieldController from '@keystonejs/fields/Controller';
 
 export default class CloudinaryImageController extends FieldController {
   getQueryFragment = () => `

packages/fields-datetime-utc/src/Implementation.js

@@ -2,6 +2,7 @@ import { DateTime } from 'luxon';
 import { Implementation } from '@keystonejs/fields';
 import { KnexFieldAdapter } from '@keystonejs/adapter-knex';
 import { MongooseFieldAdapter } from '@keystonejs/adapter-mongoose';
+console.log(Implementation);
 
 export class DateTimeUtcImplementation extends Implementation {
   constructor() {

packages/fields/src/types/OEmbed/README.md → packages/fields-oembed/README.md

@@ -18,7 +18,7 @@ Stores data in the oEmbed format:
 ```js
 const { Keystone } = require('@keystonejs/keystone');
 const { OEmbed, Text } = require('@keystonejs/fields');
-const { IframelyOEmbedAdapter } = require('@keystonejs/oembed-adapters');
+const { OEmbed, IframelyOEmbedAdapter } = require('@keystonejs/fields-oembed');
 
 const keystone = new Keystone({...});
 
@@ -241,8 +241,8 @@ The `OEmbed` field exposes a block that can be used in the [content field](/pack
 ```js
 const { Keystone } = require('@keystonejs/keystone');
 const { Content } = require('@keystonejs/field-content');
-const { OEmbed, Text } = require('@keystonejs/fields');
-const { IframelyOEmbedAdapter } = require('@keystonejs/oembed-adapters');
+const { Text } = require('@keystonejs/fields');
+const { OEmbed, IframelyOEmbedAdapter } = require('@keystonejs/fields-oembed');
 
 const iframelyAdapter = new IframelyOEmbedAdapter({
   apiKey: process.env.IFRAMELY_API_KEY, // Get one from https://iframely.com

packages/fields-oembed/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@keystonejs/fields-oembed",
+  "description": "KeystoneJS oEmbed Field Type",
+  "version": "1.0.0",
+  "author": "The KeystoneJS Development Team",
+  "license": "MIT",
+  "repository": "https://github.com/keystonejs/keystone/tree/master/packages/fields-oembed",
+  "homepage": "https://github.com/keystonejs/keystone",
+  "engines": {
+    "node": ">=10.0.0"
+  },
+  "dependencies": {
+    "@arch-ui/button": "^0.0.20",
+    "@arch-ui/fields": "^3.0.3",
+    "@arch-ui/input": "^0.1.10",
+    "@arch-ui/theme": "^0.0.10",
+    "@babel/runtime": "^7.8.4",
+    "@emotion/core": "^10.0.28",
+    "@iframely/embed.js": "^1.1.1",
+    "@keystonejs/adapter-knex": "^11.0.0",
+    "@keystonejs/adapter-mongoose": "^9.0.0",
+    "@keystonejs/build-field-types": "^5.2.10",
+    "@keystonejs/field-content": "^7.0.2",
+    "@keystonejs/fields": "^14.0.0",
+    "node-fetch": "^2.6.0",
+    "pluralize": "^7.0.0",
+    "query-string": "^6.8.1"
+  },
+  "peerDependencies": {
+    "react": "^16.13.1"
+  },
+  "devDependencies": {
+    "react": "^16.13.1"
+  },
+  "main": "dist/fields-oembed.cjs.js",
+  "module": "dist/fields-oembed.esm.js"
+}

packages/fields/src/types/OEmbed/Implementation.js → packages/fields-oembed/src/Implementation.js

@@ -1,6 +1,6 @@
-import { Implementation } from '../../Implementation';
 import { MongooseFieldAdapter } from '@keystonejs/adapter-mongoose';
 import { KnexFieldAdapter } from '@keystonejs/adapter-knex';
+import { Implementation } from '@keystonejs/fields';
 
 export class OEmbed extends Implementation {
   constructor(path, { adapter, parameters = {} }, { listKey }) {

packages/fields/src/types/OEmbed/OEmbedBlock.js → packages/fields-oembed/src/OEmbedBlock.js

@@ -2,8 +2,8 @@ import pluralize from 'pluralize';
 import { importView } from '@keystonejs/build-field-types';
 
 import { Block } from '@keystonejs/field-content/Block';
-import OEmbed from './';
-import RelationshipType from '../Relationship';
+import { OEmbed } from '.';
+import { Relationship as RelationshipType } from '@keystonejs/fields';
 
 const RelationshipWrapper = {
   ...RelationshipType,

packages/fields/src/types/OEmbed/index.js → packages/fields-oembed/src/index.js

@@ -1,11 +1,16 @@
 import { importView } from '@keystonejs/build-field-types';
 
-import { OEmbed, MongoOEmbedInterface, KnexOEmbedInterface } from './Implementation';
+import {
+  OEmbed as Implementation,
+  MongoOEmbedInterface,
+  KnexOEmbedInterface,
+} from './Implementation';
 import { OEmbedBlock } from './OEmbedBlock';
+export { IframelyOEmbedAdapter } from './iframely/iframely';
 
-export default {
+export const OEmbed = {
   type: 'OEmbed',
-  implementation: OEmbed,
+  implementation: Implementation,
   views: {
     Controller: importView('./views/Controller'),
     Field: importView('./views/Field'),

packages/fields/src/types/OEmbed/views/Controller.js → packages/fields-oembed/src/views/Controller.js

@@ -1,6 +1,6 @@
-import FieldController from '../../File/views/Controller';
+import Controller from '@keystonejs/fields/Controller';
 
-export default class FileController extends FieldController {
+export default class FileController extends Controller {
   getQueryFragment = () => `
     ${this.path} {
       type

packages/fields/src/types/Unsplash/README.md → packages/fields-unsplash/README.md

@@ -15,7 +15,7 @@ generating URLs to dynamically transformed images.
 
 ```javascript
 const { Keystone } = require('@keystonejs/keystone');
-const { Unsplash } = require('@keystonejs/fields');
+const { Unsplash } = require('@keystonejs/fields-unsplash');
 
 const keystone = new Keystone({...});
 
@@ -178,7 +178,8 @@ The `Unsplash` field exposes a block that can be used in the [content field](/pa
 ```js
 const { Keystone } = require('@keystonejs/keystone');
 const { Content } = require('@keystonejs/field-content');
-const { Unsplash, Text } = require('@keystonejs/fields');
+const { Unsplash } = require('@keystonejs/fields-unsplash');
+const { Text } = require('@keystonejs/fields');
 
 keystone.createList('Post', {
   fields: {

packages/fields-unsplash/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@keystonejs/fields-unsplash",
+  "description": "KeystoneJS Unsplash Field Type",
+  "version": "1.0.0",
+  "author": "The KeystoneJS Development Team",
+  "license": "MIT",
+  "repository": "https://github.com/keystonejs/keystone/tree/master/packages/fields-unsplash",
+  "homepage": "https://github.com/keystonejs/keystone",
+  "engines": {
+    "node": ">=10.0.0"
+  },
+  "dependencies": {
+    "@apollo/react-hooks": "^3.1.5",
+    "@arch-ui/fields": "^3.0.3",
+    "@arch-ui/input": "^0.1.10",
+    "@babel/runtime": "^7.8.4",
+    "@emotion/core": "^10.0.28",
+    "@keystonejs/adapter-knex": "^11.0.0",
+    "@keystonejs/adapter-mongoose": "^9.0.0",
+    "@keystonejs/build-field-types": "^5.2.10",
+    "@keystonejs/field-content": "^7.0.2",
+    "@keystonejs/fields": "^14.0.0",
+    "graphql-tag": "^2.10.3",
+    "node-fetch": "^2.6.0",
+    "pluralize": "^7.0.0",
+    "query-string": "^6.8.1",
+    "unsplash-js": "^6.0.0"
+  },
+  "peerDependencies": {
+    "react": "^16.13.1"
+  },
+  "devDependencies": {
+    "react": "^16.13.1"
+  },
+  "main": "dist/fields-unsplash.cjs.js",
+  "module": "dist/fields-unsplash.esm.js"
+}

packages/fields/src/types/Unsplash/UnsplashBlock.js → packages/fields-unsplash/src/UnsplashBlock.js

@@ -2,12 +2,12 @@ import pluralize from 'pluralize';
 import { importView } from '@keystonejs/build-field-types';
 
 import { Block } from '@keystonejs/field-content/Block';
-import Unsplash from './';
-import RelationshipType from '../Relationship';
+import { Unsplash } from '.';
+import { Relationship } from '@keystonejs/fields';
 
 const RelationshipWrapper = {
-  ...RelationshipType,
-  implementation: class extends RelationshipType.implementation {
+  ...Relationship,
+  implementation: class extends Relationship.implementation {
     async resolveNestedOperations(operations, item, context, ...args) {
       const result = await super.resolveNestedOperations(operations, item, context, ...args);
       context._blockMeta = context._blockMeta || {};
@@ -56,7 +56,7 @@ export class UnsplashBlock extends Block {
           // - "Get all embeds in this post"
           // - "List all users mentioned in comment"
           from: {
-            type: RelationshipType,
+            type: Relationship,
             isRequired: true,
             ref: `${joinList}.${this.path}`,
             schemaDoc:

packages/fields/src/types/Unsplash/index.js → packages/fields-unsplash/src/index.js

@@ -1,10 +1,14 @@
 import { importView } from '@keystonejs/build-field-types';
-import { Unsplash, MongoUnsplashInterface, KnexUnsplashInterface } from './Implementation';
+import {
+  Unsplash as Implementation,
+  MongoUnsplashInterface,
+  KnexUnsplashInterface,
+} from './views/Implementation';
 import { UnsplashBlock } from './UnsplashBlock';
 
-export default {
+export const Unsplash = {
   type: 'Unsplash',
-  implementation: Unsplash,
+  implementation: Implementation,
   views: {
     Controller: importView('./views/Controller'),
     Field: importView('./views/Field'),