renames client to admin, sets up component library

.gitignore

@@ -215,7 +215,6 @@ $RECYCLE.BIN/
 # Windows shortcuts
 *.lnk
 
-
 # End of https://www.gitignore.io/api/node,macos,windows,webstorm,sublimetext,visualstudiocode
 
 # Ignore all uploads
@@ -225,3 +224,7 @@ demo/files
 
 # Ignore build folder
 build
+
+# Ignore built components
+components/index.js
+components/styles.css

admin/components.js

@@ -1,3 +0,0 @@
-export { default as Popup } from '../src/client/components/elements/Popup';
-
-export { default as MinimalTemplate } from '../src/client/components/templates/Minimal';

admin/elements.js

@@ -1 +0,0 @@
-export { default as Button } from '../src/client/components/elements/Button';

admin/forms.js

@@ -1,7 +0,0 @@
-export { default as Form } from '../src/client/components/forms/Form';
-export { default as Text } from '../src/client/components/forms/field-types/Text';
-export { default as Group } from '../src/client/components/forms/field-types/Group';
-export { default as Select } from '../src/client/components/forms/field-types/Select';
-export { default as Checkbox } from '../src/client/components/forms/field-types/Checkbox';
-export { default as Submit } from '../src/client/components/forms/Submit';
-export { default as reduceFieldsToValues } from '../src/client/components/forms/Form/reduceFieldsToValues';

admin/icons.js

@@ -1 +0,0 @@
-export { default as X } from '../src/client/components/icons/X';

admin/rich-text.js

@@ -1,3 +0,0 @@
-export { default as LeafButton } from '../src/client/components/forms/field-types/RichText/leaves/Button';
-export { default as ElementButton } from '../src/client/components/forms/field-types/RichText/elements/Button';
-export { default as toggleElement } from '../src/client/components/forms/field-types/RichText/elements/toggle';

admin/styles.scss

@@ -1 +0,0 @@
-@import '../src/client/scss/styles.scss';

admin/views.js

@@ -1,2 +0,0 @@
-export { default as Edit } from '../src/client/components/views/collections/Edit/Default';
-export { default as List } from '../src/client/components/views/collections/List/Default';

components/forms.js

@@ -0,0 +1,7 @@
+export { default as Form } from '../src/admin/components/forms/Form';
+export { default as Text } from '../src/admin/components/forms/field-types/Text';
+export { default as Group } from '../src/admin/components/forms/field-types/Group';
+export { default as Select } from '../src/admin/components/forms/field-types/Select';
+export { default as Checkbox } from '../src/admin/components/forms/field-types/Checkbox';
+export { default as Submit } from '../src/admin/components/forms/Submit';
+export { default as reduceFieldsToValues } from '../src/admin/components/forms/Form/reduceFieldsToValues';

components/rich-text.js

@@ -0,0 +1,3 @@
+export { default as LeafButton } from '../src/admin/components/forms/field-types/RichText/leaves/Button';
+export { default as ElementButton } from '../src/admin/components/forms/field-types/RichText/elements/Button';
+export { default as toggleElement } from '../src/admin/components/forms/field-types/RichText/elements/toggle';

components/views.js

@@ -0,0 +1,2 @@
+export { default as Edit } from '../src/admin/components/views/collections/Edit/Default';
+export { default as List } from '../src/admin/components/views/collections/List/Default';

demo/client/components/richText/elements/Button/Button/index.js

@@ -3,11 +3,11 @@ import PropTypes from 'prop-types';
 import { Modal, useModal } from '@faceless-ui/modal';
 import { Transforms } from 'slate';
 import { useSlate } from 'slate-react';
-import { MinimalTemplate } from '../../../../../../../admin/components';
-import { ElementButton } from '../../../../../../../admin/rich-text';
-import { X } from '../../../../../../../admin/icons';
-import { Button } from '../../../../../../../admin/elements';
-import { Form, Text, Checkbox, Select, Submit, reduceFieldsToValues } from '../../../../../../../admin/forms';
+import MinimalTemplate from '../../../../../../../src/admin/components/templates/Minimal';
+import { ElementButton } from '../../../../../../../components/rich-text';
+import X from '../../../../../../../src/admin/components/icons/X';
+import Button from '../../../../../../../src/admin/components/elements/Button';
+import { Form, Text, Checkbox, Select, Submit, reduceFieldsToValues } from '../../../../../../../components/forms';
 
 import './index.scss';
 

demo/client/components/richText/elements/Button/Button/index.scss

@@ -1,4 +1,4 @@
-@import '../../../../../../../admin/styles.scss';
+@import '../../../../../../../scss/vars.scss';
 
 .button-rich-text-button {
   .btn {

demo/client/components/richText/elements/Button/Element/index.scss

@@ -1,4 +1,4 @@
-@import '../../../../../../../admin/styles.scss';
+@import '../../../../../../../scss/vars.scss';
 
 .rich-text-button {
   margin: $baseline 0;

demo/client/components/richText/leaves/PurpleBackground/Button/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { LeafButton } from '../../../../../../../admin/rich-text';
+import { LeafButton } from '../../../../../../../components/rich-text';
 
 const Button = () => (
   <LeafButton format="purple-background">

demo/collections/CustomComponents/components/fields/Description/Field/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
 
-const Description = () => <div className="description">fake description field</div>
+const Description = () => <div className="description">fake description field</div>;
 
 export default Description;

demo/collections/CustomComponents/components/fields/Group/Field/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Group } from '../../../../../../../admin/forms';
+import { Group } from '../../../../../../../components/forms';
 
 const CustomGroup = (props) => (
   <div className="custom-group">

demo/collections/CustomComponents/components/views/List/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import DefaultList from '../../../../../../src/client/components/views/collections/List/Default';
+import DefaultList from '../../../../../../src/admin/components/views/collections/List/Default';
 
 import './index.scss';
 

hooks.js

@@ -1,2 +1,2 @@
-export { default as useFieldType } from './src/client/components/forms/useFieldType';
-export { useForm } from './src/client/components/forms/Form/context';
+export { default as useFieldType } from './src/admin/components/forms/useFieldType';
+export { useForm } from './src/admin/components/forms/Form/context';

package.json

@@ -6,10 +6,12 @@
   "author": "Payload CMS LLC",
   "main": "index.js",
   "typings": "payload.d.ts",
+  "sideEffects": false,
   "bin": {
     "payload": "./src/bin/index.js"
   },
   "scripts": {
+    "build:components": "webpack --config src/webpack/components.config.js",
     "build": "PAYLOAD_CONFIG_PATH=demo/payload.config.js node src/bin/build",
     "build:analyze": "PAYLOAD_CONFIG_PATH=demo/payload.config.js PAYLOAD_ANALYZE_BUNDLE=true node src/bin/build",
     "cov": "npm run core:build && node ./node_modules/jest/bin/jest.js src/tests --coverage",
@@ -68,11 +70,13 @@
     "is-hotkey": "^0.1.6",
     "is-url": "^1.2.4",
     "isomorphic-fetch": "^2.2.1",
+    "isomorphic-style-loader": "^5.1.0",
     "jest": "^25.3.0",
     "jsonwebtoken": "^8.5.1",
     "jwt-decode": "^3.0.0",
     "method-override": "^3.0.0",
     "micro-memoize": "^4.0.9",
+    "mini-css-extract-plugin": "^1.0.0",
     "minimist": "^1.2.0",
     "mkdirp": "^0.5.1",
     "mongodb-memory-server": "^6.5.2",
@@ -83,7 +87,7 @@
     "node-sass-chokidar": "^1.4.0",
     "nodemailer": "^6.4.2",
     "object-to-formdata": "^3.0.9",
-    "optimize-css-assets-webpack-plugin": "^5.0.3",
+    "optimize-css-assets-webpack-plugin": "^5.0.4",
     "passport": "^0.4.1",
     "passport-anonymous": "^1.0.1",
     "passport-headerapikey": "^1.2.1",
@@ -92,9 +96,8 @@
     "passport-local-mongoose": "^6.0.1",
     "pino": "^6.4.1",
     "pino-pretty": "^4.1.0",
-    "postcss-flexbugs-fixes": "^3.3.1",
-    "postcss-loader": "^2.1.6",
-    "postcss-preset-env": "6.0.6",
+    "postcss-loader": "^4.0.4",
+    "postcss-preset-env": "^6.7.0",
     "prismjs": "^1.21.0",
     "probe-image-size": "^5.0.0",
     "prop-types": "^15.7.2",
@@ -119,6 +122,7 @@
     "slate-hyperscript": "^0.58.3",
     "slate-react": "^0.58.3",
     "style-loader": "^0.21.0",
+    "terser-webpack-plugin": "^4.2.3",
     "url-loader": "^1.0.1",
     "uuid": "^8.1.0",
     "webpack": "^4.43.0",
@@ -133,7 +137,6 @@
     "babel-eslint": "^10.0.1",
     "cross-env": "^7.0.2",
     "eslint": "^6.8.0",
-    "eslint-loader": "^4.0.2",
     "eslint-plugin-import": "^2.20.0",
     "eslint-plugin-jest": "^23.16.0",
     "eslint-plugin-jest-dom": "^3.0.1",
@@ -143,13 +146,15 @@
     "faker": "^4.1.0",
     "form-data": "^3.0.0",
     "graphql-request": "^2.0.0",
-    "nodemon": "^1.19.4"
+    "nodemon": "^1.19.4",
+    "webpack-cli": "^4.0.0"
   },
   "files": [
     "*.js",
     "!jest.config.js",
     "payload.d.ts",
     "src",
-    "admin"
+    "components",
+    "scss"
   ]
 }

scss/vars.scss

@@ -0,0 +1 @@
+@import '../src/admin/scss/vars';

src/admin/components/elements/ReactSelect/index.scss

@@ -1,4 +1,4 @@
-@import '../../../scss//styles';
+@import '../../../scss/styles';
 
 div.react-select {
   div.rs__control {