Build field type views (#843)

* WIP Build field type views

* Remove FIELD_TYPES files that i forgot to remove in the other pr

* Build Relationship field type

* Build Content blocks

* WIP build Controllers

* Update preconstruct which fixes a bug so it all works now

* Change exclude in babel-loader config to just /node_modules/ 🎉

* Update preconstruct

* Add changeset

* Fix tests

* Update preconstruct

.changeset/32ca02e6/changes.json

@@ -0,0 +1,65 @@
+{
+  "releases": [
+    { "name": "@keystone-alpha/admin-ui", "type": "major" },
+    { "name": "@keystone-alpha/fields", "type": "major" },
+    { "name": "@keystone-alpha/cypress-project-basic", "type": "patch" },
+    { "name": "@keystone-alpha/website", "type": "patch" }
+  ],
+  "dependents": [
+    {
+      "name": "@keystone-alpha/demo-project-blog",
+      "type": "patch",
+      "dependencies": [
+        "@keystone-alpha/keystone",
+        "@keystone-alpha/admin-ui",
+        "@keystone-alpha/fields"
+      ]
+    },
+    {
+      "name": "@keystone-alpha/demo-project-todo",
+      "type": "patch",
+      "dependencies": [
+        "@keystone-alpha/keystone",
+        "@keystone-alpha/admin-ui",
+        "@keystone-alpha/fields"
+      ]
+    },
+    {
+      "name": "@keystone-alpha/cypress-project-access-control",
+      "type": "patch",
+      "dependencies": [
+        "@keystone-alpha/keystone",
+        "@keystone-alpha/admin-ui",
+        "@keystone-alpha/fields"
+      ]
+    },
+    {
+      "name": "@keystone-alpha/cypress-project-login",
+      "type": "patch",
+      "dependencies": [
+        "@keystone-alpha/keystone",
+        "@keystone-alpha/admin-ui",
+        "@keystone-alpha/fields"
+      ]
+    },
+    {
+      "name": "@keystone-alpha/cypress-project-twitter-login",
+      "type": "patch",
+      "dependencies": [
+        "@keystone-alpha/keystone",
+        "@keystone-alpha/admin-ui",
+        "@keystone-alpha/fields"
+      ]
+    },
+    {
+      "name": "@keystone-alpha/keystone",
+      "type": "patch",
+      "dependencies": ["@keystone-alpha/fields"]
+    },
+    {
+      "name": "@keystone-alpha/api-tests",
+      "type": "patch",
+      "dependencies": ["@keystone-alpha/keystone", "@keystone-alpha/fields"]
+    }
+  ]
+}

.changeset/32ca02e6/changes.md

@@ -0,0 +1 @@
+- Build field type views before publishing to npm and stop running Babel on Keystone packages in node_modules in the Admin UI

package.json

@@ -148,7 +148,7 @@
     "pify": "^4.0.1",
     "pino": "5.11.1",
     "pluralize": "^7.0.0",
-    "preconstruct": "^0.0.42",
+    "preconstruct": "^0.0.49",
     "pretty-proptypes": "^0.5.0",
     "prism-react-renderer": "^0.1.6",
     "prop-types": "^15.7.2",
@@ -207,7 +207,8 @@
   "preconstruct": {
     "packages": [
       "packages/arch/packages/*",
-      "packages/apollo-helpers"
+      "packages/apollo-helpers",
+      "packages/fields"
     ]
   },
   "jest": {

packages/admin-ui/package.json

@@ -63,7 +63,7 @@
     "lodash.debounce": "^4.0.8",
     "lodash.isequal": "^4.5.0",
     "lodash.set": "^4.3.2",
-    "preconstruct": "^0.0.42",
+    "preconstruct": "^0.0.49",
     "prop-types": "^15.7.2",
     "raf-schd": "^4.0.0",
     "react": "^16.8.4",

packages/admin-ui/server/getWebpackConfig.js

@@ -18,7 +18,7 @@ module.exports = function({ adminMeta, entry }) {
   const rules = [
     {
       test: /\.js$/,
-      exclude: [/node_modules(?!\/@(keystone-alpha|arch-ui)\/)/],
+      exclude: [/node_modules/],
       use: [
         {
           loader: 'babel-loader',

packages/fields/package.json

@@ -26,6 +26,7 @@
     "@arch-ui/theme": "^0.0.2",
     "@arch-ui/tooltip": "^0.0.3",
     "@arch-ui/typography": "^0.0.3",
+    "@babel/runtime": "^7.3.4",
     "@emotion/core": "^10.0.9",
     "@iframely/embed.js": "^1.1.1",
     "@keystone-alpha/access-control": "^1.0.1",
@@ -66,5 +67,14 @@
   },
   "devDependencies": {
     "cuid": "^2.1.6"
+  },
+  "preconstruct": {
+    "entrypoints": [
+      "types/*/views/Cell",
+      "types/*/views/Field",
+      "types/*/views/Filter",
+      "types/*/views/Controller",
+      "types/Content/views/blocks/*"
+    ]
   }
 }

packages/fields/types/CalendarDay/index.js

@@ -9,7 +9,7 @@ module.exports = {
   type: 'CalendarDay',
   implementation: CalendarDay,
   views: {
-    Controller: path.join(__dirname, './Controller'),
+    Controller: path.join(__dirname, './views/Controller'),
     Field: path.join(__dirname, './views/Field'),
     Filter: path.join(__dirname, './views/Filter'),
     Cell: path.join(__dirname, './views/Cell'),

packages/fields/types/CalendarDay/views/Cell/package.json

@@ -0,0 +1,7 @@
+{
+  "main": "dist/fields.cjs.js",
+  "module": "dist/fields.esm.js",
+  "preconstruct": {
+    "source": "../src/Cell"
+  }
+}

packages/fields/types/CalendarDay/views/Controller/package.json

@@ -0,0 +1,7 @@
+{
+  "main": "dist/fields.cjs.js",
+  "module": "dist/fields.esm.js",
+  "preconstruct": {
+    "source": "../src/Controller"
+  }
+}

packages/fields/types/CalendarDay/views/Field/package.json

@@ -0,0 +1,8 @@
+{
+  "main": "dist/fields.cjs.js",
+  "module": "dist/fields.esm.js",
+  "preconstruct": {
+    "source": "../src/Field"
+  }
+}
+

packages/fields/types/CalendarDay/views/Filter/package.json

@@ -0,0 +1,7 @@
+{
+  "main": "dist/fields.cjs.js",
+  "module": "dist/fields.esm.js",
+  "preconstruct": {
+    "source": "../src/Filter"
+  }
+}

packages/fields/types/CalendarDay/Controller.js → packages/fields/types/CalendarDay/views/src/Controller.js

@@ -1,4 +1,4 @@
-import FieldController from '../../Controller';
+import FieldController from '../../../../Controller';
 
 export default class CalendarDayController extends FieldController {
   getFilterGraphQL = ({ type, value }) => {

packages/fields/types/Checkbox/index.js

@@ -5,7 +5,7 @@ module.exports = {
   type: 'Checkbox',
   implementation: Checkbox,
   views: {
-    Controller: path.join(__dirname, './Controller'),
+    Controller: path.join(__dirname, './views/Controller'),
     Field: path.join(__dirname, './views/Field'),
     Filter: path.join(__dirname, './views/Filter'),
     Cell: path.join(__dirname, './views/Cell'),

packages/fields/types/Checkbox/views/Cell/package.json

@@ -0,0 +1,7 @@
+{
+  "main": "dist/fields.cjs.js",
+  "module": "dist/fields.esm.js",
+  "preconstruct": {
+    "source": "../src/Cell"
+  }
+}

packages/fields/types/Checkbox/views/Controller/package.json

@@ -0,0 +1,7 @@
+{
+  "main": "dist/fields.cjs.js",
+  "module": "dist/fields.esm.js",
+  "preconstruct": {
+    "source": "../src/Controller"
+  }
+}

packages/fields/types/Checkbox/views/Field/package.json

@@ -0,0 +1,8 @@
+{
+  "main": "dist/fields.cjs.js",
+  "module": "dist/fields.esm.js",
+  "preconstruct": {
+    "source": "../src/Field"
+  }
+}
+

packages/fields/types/Checkbox/views/Filter/package.json

@@ -0,0 +1,7 @@
+{
+  "main": "dist/fields.cjs.js",
+  "module": "dist/fields.esm.js",
+  "preconstruct": {
+    "source": "../src/Filter"
+  }
+}

packages/fields/types/Checkbox/views/Cell.js → packages/fields/types/Checkbox/views/src/Cell.js

@@ -1,6 +1,6 @@
 // @flow
 import React, { Component } from 'react';
-import type { CellProps } from '../../../types';
+import type { CellProps } from '../../../../types';
 
 type Props = CellProps<boolean>;
 

packages/fields/types/Checkbox/Controller.js → packages/fields/types/Checkbox/views/src/Controller.js

@@ -1,4 +1,4 @@
-import FieldController from '../../Controller';
+import FieldController from '../../../../Controller';
 
 export default class CheckboxController extends FieldController {
   getValue = data => data[this.config.path] || false;

packages/fields/types/Checkbox/views/Filter.js → packages/fields/types/Checkbox/views/src/Filter.js

@@ -1,7 +1,7 @@
 // @flow
 
 import React, { Component } from 'react';
-import type { FilterProps } from '../../../types';
+import type { FilterProps } from '../../../../types';
 
 type Props = FilterProps<'true' | 'false' | 'null'>;
 

packages/fields/types/CloudinaryImage/Block.js

@@ -33,7 +33,7 @@ class CloudinaryBlock extends Block {
   }
 
   static get viewPath() {
-    return path.join(__dirname, '../Content/views/editor/blocks/image-container');
+    return path.join(__dirname, '../Content/views/blocks/image-container');
   }
 }
 

packages/fields/types/CloudinaryImage/index.js

@@ -10,7 +10,7 @@ module.exports = {
   type: 'CloudinaryImage',
   implementation: CloudinaryImage,
   views: {
-    Controller: path.join(__dirname, './Controller'),
+    Controller: path.join(__dirname, './views/Controller'),
     Field: path.join(__dirname, './views/Field'),
     Cell: path.join(__dirname, './views/Cell'),
   },

packages/fields/types/CloudinaryImage/views/Cell/package.json

@@ -0,0 +1,7 @@
+{
+  "main": "dist/fields.cjs.js",
+  "module": "dist/fields.esm.js",
+  "preconstruct": {
+    "source": "../src/Cell"
+  }
+}

packages/fields/types/CloudinaryImage/views/Controller/package.json

@@ -0,0 +1,7 @@
+{
+  "main": "dist/fields.cjs.js",
+  "module": "dist/fields.esm.js",
+  "preconstruct": {
+    "source": "../src/Controller"
+  }
+}

packages/fields/types/CloudinaryImage/views/Field/package.json

@@ -0,0 +1,8 @@
+{
+  "main": "dist/fields.cjs.js",
+  "module": "dist/fields.esm.js",
+  "preconstruct": {
+    "source": "../src/Field"
+  }
+}
+

packages/fields/types/CloudinaryImage/views/Cell.js → packages/fields/types/CloudinaryImage/views/src/Cell.js

@@ -1,7 +1,7 @@
 // @flow
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import type { CellProps } from '../../../types';
+import type { CellProps } from '../../../../types';
 
 type Props = CellProps<{
   id: string,

packages/fields/types/CloudinaryImage/Controller.js → packages/fields/types/CloudinaryImage/views/src/Controller.js

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

packages/fields/types/Color/index.js

@@ -5,7 +5,7 @@ module.exports = {
   type: 'Color',
   implementation: Text,
   views: {
-    Controller: path.join(__dirname, '../Text/Controller'),
+    Controller: path.join(__dirname, '../Text/views/Controller'),
     Field: path.join(__dirname, './views/Field'),
     Cell: path.join(__dirname, './views/Cell'),
     Filter: path.join(__dirname, '../Text/views/Filter'),

packages/fields/types/Color/views/Cell/package.json

@@ -0,0 +1,7 @@
+{
+  "main": "dist/fields.cjs.js",
+  "module": "dist/fields.esm.js",
+  "preconstruct": {
+    "source": "../src/Cell"
+  }
+}

packages/fields/types/Color/views/Field/package.json

@@ -0,0 +1,8 @@
+{
+  "main": "dist/fields.cjs.js",
+  "module": "dist/fields.esm.js",
+  "preconstruct": {
+    "source": "../src/Field"
+  }
+}
+

packages/fields/types/Color/views/Cell.js → packages/fields/types/Color/views/src/Cell.js

@@ -2,7 +2,7 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
 import * as React from 'react';
-import type { CellProps } from '../../../types';
+import type { CellProps } from '../../../../types';
 
 type Props = CellProps<string>;
 

packages/fields/types/Content/index.js

@@ -5,7 +5,7 @@ module.exports = {
   type: 'Content',
   implementation: Content,
   views: {
-    Controller: path.join(__dirname, './Controller'),
+    Controller: path.join(__dirname, './views/Controller'),
     Field: path.join(__dirname, './views/Field'),
     Filter: path.join(__dirname, '../Text/views/Filter'),
   },
@@ -14,13 +14,13 @@ module.exports = {
     knex: KnexContentInterface,
   },
   blocks: {
-    blockquote: { viewPath: path.join(__dirname, './views/editor/blocks/blockquote') },
-    embed: { viewPath: path.join(__dirname, './views/editor/blocks/embed') },
-    heading: { viewPath: path.join(__dirname, './views/editor/blocks/heading') },
-    image: { viewPath: path.join(__dirname, './views/editor/blocks/image-container') },
-    link: { viewPath: path.join(__dirname, './views/editor/blocks/link') },
-    orderedList: { viewPath: path.join(__dirname, './views/editor/blocks/ordered-list') },
-    unorderedList: { viewPath: path.join(__dirname, './views/editor/blocks/unordered-list') },
+    blockquote: { viewPath: path.join(__dirname, './views/blocks/blockquote') },
+    embed: { viewPath: path.join(__dirname, './views/blocks/embed') },
+    heading: { viewPath: path.join(__dirname, './views/blocks/heading') },
+    image: { viewPath: path.join(__dirname, './views/blocks/image-container') },
+    link: { viewPath: path.join(__dirname, './views/blocks/link') },
+    orderedList: { viewPath: path.join(__dirname, './views/blocks/ordered-list') },
+    unorderedList: { viewPath: path.join(__dirname, './views/blocks/unordered-list') },
     // not exposing list-item since it's only used internally by the other blocks
     // not exposing paragraph since it's included by default
   },

packages/fields/types/Content/views/Controller/package.json

@@ -0,0 +1,7 @@
+{
+  "main": "dist/fields.cjs.js",
+  "module": "dist/fields.esm.js",
+  "preconstruct": {
+    "source": "../src/Controller"
+  }
+}

packages/fields/types/Content/views/Field/package.json

@@ -0,0 +1,7 @@
+{
+  "main": "dist/fields.cjs.js",
+  "module": "dist/fields.esm.js",
+  "preconstruct": {
+    "source": "../src/Field"
+  }
+}

packages/fields/types/Content/views/blocks/blockquote/package.json

@@ -0,0 +1,7 @@
+{
+  "main": "dist/fields.cjs.js",
+  "module": "dist/fields.esm.js",
+  "preconstruct": {
+    "source": "../../src/editor/blocks/blockquote"
+  }
+}