abstracts sensitive data from public data within config and re-introduces functional conditions

src/auth/baseFields.js

@@ -24,10 +24,8 @@ module.exports = [
     name: 'apiKey',
     type: 'text',
     label: 'User API Key',
-    conditions: {
-      enableAPIKey: {
-        equals: true,
-      },
+    condition: (_, siblings) => {
+      return siblings.enableAPIKey && siblings.enableAPIKey.value;
     },
   },
 ];

src/client/api.js

@@ -1,7 +1,8 @@
 import Cookies from 'universal-cookie';
 import qs from 'qs';
+import config from 'payload/config';
 
-const { cookiePrefix } = PAYLOAD_CONFIG;
+const { cookiePrefix } = config;
 const cookieTokenName = `${cookiePrefix}-token`;
 
 export const getJWTHeader = () => {

src/client/components/Routes.js

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import {
   Route, Switch, withRouter, Redirect,
 } from 'react-router-dom';
+import config from 'payload/config';
 import List from './views/collections/List';
 import { useUser } from './data/User';
 import DefaultTemplate from './templates/Default';
@@ -21,7 +22,7 @@ import Loading from './elements/Loading';
 
 const {
   admin: { user: userSlug }, routes, collections, globals,
-} = PAYLOAD_CONFIG;
+} = config;
 
 const Routes = () => {
   const [initialized, setInitialized] = useState(null);

src/client/components/data/User.js

@@ -5,6 +5,7 @@ import { useLocation, useHistory } from 'react-router-dom';
 import jwt from 'jsonwebtoken';
 import PropTypes from 'prop-types';
 import Cookies from 'universal-cookie';
+import config from 'payload/config';
 import { useModal } from '@trbl/react-modal';
 import { requests } from '../../api';
 import StayLoggedInModal from '../modals/StayLoggedIn';
@@ -20,7 +21,7 @@ const {
     admin,
     api,
   },
-} = PAYLOAD_CONFIG;
+} = config;
 
 const cookieTokenName = `${cookiePrefix}-token`;
 

src/client/components/elements/Eyebrow/index.scss

@@ -1,6 +1,7 @@
 @import '../../../scss/styles.scss';
 
 .eyebrow {
+  @include blur-bg;
   position: sticky;
   top: 0;
   z-index: 2;
@@ -8,8 +9,6 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background: rgba($color-background-gray, .8);
-  backdrop-filter: saturate(180%) blur(5px);
 
   @include mid-break {
     padding: 0 0 $baseline;

src/client/components/elements/Localizer/index.js

@@ -1,6 +1,7 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { Link } from 'react-router-dom';
 import qs from 'qs';
+import config from 'payload/config';
 import { useLocale } from '../../utilities/Locale';
 import { useSearchParams } from '../../utilities/SearchParams';
 import Popup from '../Popup';
@@ -9,7 +10,7 @@ import './index.scss';
 
 const baseClass = 'localizer';
 
-const { localization } = PAYLOAD_CONFIG;
+const { localization } = config;
 
 const Localizer = () => {
   const locale = useLocale();

src/client/components/elements/Nav/index.js

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { NavLink, Link } from 'react-router-dom';
+import config from 'payload/config';
 import { useUser } from '../../data/User';
 import Chevron from '../../icons/Chevron';
 import LogOut from '../../icons/LogOut';
@@ -19,7 +20,7 @@ const {
   routes: {
     admin,
   },
-} = PAYLOAD_CONFIG;
+} = config;
 
 const Nav = () => {
   const { permissions } = useUser();

src/client/components/forms/field-types/Checkbox/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import useFieldType from '../../useFieldType';
-import withConditions from '../../withConditions';
+import withCondition from '../../withCondition';
 import Error from '../../Error';
 import StyledCheckbox from './StyledCheckbox';
 
@@ -87,4 +87,4 @@ Checkbox.propTypes = {
   label: PropTypes.string,
 };
 
-export default withConditions(Checkbox);
+export default withCondition(Checkbox);

src/client/components/forms/field-types/DateTime/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import DatePicker from '../../../elements/DatePicker';
-import withConditions from '../../withConditions';
+import withCondition from '../../withCondition';
 import useFieldType from '../../useFieldType';
 import Label from '../../Label';
 import Error from '../../Error';
@@ -95,4 +95,4 @@ DateTime.propTypes = {
   style: PropTypes.shape({}),
 };
 
-export default withConditions(DateTime);
+export default withCondition(DateTime);

src/client/components/forms/field-types/Email/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import withConditions from '../../withConditions';
+import withCondition from '../../withCondition';
 import useFieldType from '../../useFieldType';
 import Label from '../../Label';
 import Error from '../../Error';
@@ -108,4 +108,4 @@ Email.propTypes = {
   autoComplete: PropTypes.string,
 };
 
-export default withConditions(Email);
+export default withCondition(Email);

src/client/components/forms/field-types/Flexible/index.js

@@ -6,7 +6,7 @@ import { DragDropContext, Droppable } from 'react-beautiful-dnd';
 import { useModal } from '@trbl/react-modal';
 
 import { RowModifiedProvider, useRowModified } from '../../Form/RowModified';
-import withConditions from '../../withConditions';
+import withCondition from '../../withCondition';
 import Button from '../../../elements/Button';
 import FormContext from '../../Form/Context';
 import AddRowModal from './AddRowModal';
@@ -210,4 +210,4 @@ Flexible.propTypes = {
   fieldTypes: PropTypes.shape({}).isRequired,
 };
 
-export default withConditions(Flexible);
+export default withCondition(Flexible);

src/client/components/forms/field-types/Group/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import RenderFields from '../../RenderFields';
-import withConditions from '../../withConditions';
+import withCondition from '../../withCondition';
 
 import './index.scss';
 
@@ -41,4 +41,4 @@ Group.propTypes = {
   fieldTypes: PropTypes.shape({}).isRequired,
 };
 
-export default withConditions(Group);
+export default withCondition(Group);

src/client/components/forms/field-types/HiddenInput/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import useFieldType from '../../useFieldType';
-import withConditions from '../../withConditions';
+import withCondition from '../../withCondition';
 
 const HiddenInput = (props) => {
   const {
@@ -38,4 +38,4 @@ HiddenInput.propTypes = {
   defaultValue: PropTypes.string,
 };
 
-export default withConditions(HiddenInput);
+export default withCondition(HiddenInput);

src/client/components/forms/field-types/Number/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import useFieldType from '../../useFieldType';
 import Label from '../../Label';
 import Error from '../../Error';
-import withConditions from '../../withConditions';
+import withCondition from '../../withCondition';
 
 import './index.scss';
 
@@ -96,4 +96,4 @@ NumberField.propTypes = {
   label: PropTypes.string,
 };
 
-export default withConditions(NumberField);
+export default withCondition(NumberField);

src/client/components/forms/field-types/Password/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import useFieldType from '../../useFieldType';
 import Label from '../../Label';
 import Error from '../../Error';
-import withConditions from '../../withConditions';
+import withCondition from '../../withCondition';
 
 import './index.scss';
 
@@ -92,4 +92,4 @@ Password.propTypes = {
   validate: PropTypes.func,
 };
 
-export default withConditions(Password);
+export default withCondition(Password);

src/client/components/forms/field-types/Relationship/index.js

@@ -2,7 +2,8 @@ import React, { Component, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import Cookies from 'universal-cookie';
 import some from 'async-some';
-import withConditions from '../../withConditions';
+import config from 'payload/config';
+import withCondition from '../../withCondition';
 import ReactSelect from '../../../elements/ReactSelect';
 import useFieldType from '../../useFieldType';
 import Label from '../../Label';
@@ -14,7 +15,8 @@ const cookies = new Cookies();
 
 const {
   cookiePrefix, serverURL, routes: { api }, collections,
-} = PAYLOAD_CONFIG;
+} = config;
+
 const cookieTokenName = `${cookiePrefix}-token`;
 
 const defaultError = 'Please make a selection.';
@@ -338,4 +340,4 @@ const RelationshipFieldType = (props) => {
   );
 };
 
-export default withConditions(RelationshipFieldType);
+export default withCondition(RelationshipFieldType);

src/client/components/forms/field-types/Repeater/index.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { DragDropContext, Droppable } from 'react-beautiful-dnd';
 
 import { RowModifiedProvider, useRowModified } from '../../Form/RowModified';
-import withConditions from '../../withConditions';
+import withCondition from '../../withCondition';
 import Button from '../../../elements/Button';
 import FormContext from '../../Form/Context';
 import DraggableSection from '../../DraggableSection';
@@ -162,4 +162,4 @@ Repeater.propTypes = {
   fieldTypes: PropTypes.shape({}).isRequired,
 };
 
-export default withConditions(Repeater);
+export default withCondition(Repeater);

src/client/components/forms/field-types/Select/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import withConditions from '../../withConditions';
+import withCondition from '../../withCondition';
 import ReactSelect from '../../../elements/ReactSelect';
 import useFieldType from '../../useFieldType';
 import Label from '../../Label';
@@ -153,4 +153,4 @@ Select.propTypes = {
   hasMany: PropTypes.bool,
 };
 
-export default withConditions(Select);
+export default withCondition(Select);

src/client/components/forms/field-types/Text/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import useFieldType from '../../useFieldType';
-import withConditions from '../../withConditions';
+import withCondition from '../../withCondition';
 import Label from '../../Label';
 import Error from '../../Error';
 
@@ -96,4 +96,4 @@ Text.propTypes = {
   label: PropTypes.string,
 };
 
-export default withConditions(Text);
+export default withCondition(Text);

src/client/components/forms/field-types/Textarea/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import useFieldType from '../../useFieldType';
-import withConditions from '../../withConditions';
+import withCondition from '../../withCondition';
 import Label from '../../Label';
 import Error from '../../Error';
 
@@ -95,4 +95,4 @@ Textarea.propTypes = {
   placeholder: PropTypes.string,
 };
 
-export default withConditions(Textarea);
+export default withCondition(Textarea);

src/client/components/forms/field-types/Upload/index.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import useFieldType from '../../useFieldType';
-import withConditions from '../../withConditions';
+import withCondition from '../../withCondition';
 import UploadMedia from '../../../modules/UploadMedia';
 
 import './index.scss';
@@ -60,4 +60,4 @@ class Media extends Component {
   }
 }
 
-export default withConditions(fieldType(Media, 'media', validate, error));
+export default withCondition(fieldType(Media, 'media', validate, error));

src/client/components/forms/withCondition/index.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import useForm from '../Form/useForm';
+
+const withCondition = (Field) => {
+  const WithCondition = (props) => {
+    const { condition, name } = props;
+    const { fields } = useForm();
+
+    if (condition) {
+      let siblingFields = fields;
+
+      // If this field is nested
+      // We can provide a list of sibling fields
+      if (name.indexOf('.') > 0) {
+        const parentFieldPath = name.substring(0, name.lastIndexOf('.') + 1);
+        siblingFields = Object.keys(fields).reduce((siblings, fieldKey) => {
+          if (fieldKey.indexOf(parentFieldPath) === 0) {
+            return {
+              ...siblings,
+              [fieldKey.replace(parentFieldPath, '')]: fields[fieldKey],
+            };
+          }
+
+          return siblings;
+        }, {});
+      }
+
+      const passesCondition = condition ? condition(fields, siblingFields) : true;
+
+      if (passesCondition) {
+        return <Field {...props} />;
+      }
+
+      return null;
+    }
+
+    return <Field {...props} />;
+  };
+
+  WithCondition.defaultProps = {
+    condition: null,
+  };
+
+  WithCondition.propTypes = {
+    condition: PropTypes.func,
+    name: PropTypes.string.isRequired,
+  };
+
+  return WithCondition;
+};
+
+export default withCondition;

src/client/components/forms/withConditions/index.js

@@ -1,112 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import useForm from '../Form/useForm';
-
-const recursiveCheckCondition = (object, siblingFields) => Object.keys(object).every((key) => {
-  if (key.toLowerCase() === 'and') {
-    return object[key].every((andCondition) => {
-      const result = recursiveCheckCondition(andCondition, siblingFields);
-      return result;
-    });
-  }
-
-  if (key.toLowerCase() === 'or') {
-    return object[key].some((orCondition) => {
-      const result = recursiveCheckCondition(orCondition, siblingFields);
-      return result;
-    });
-  }
-
-  if (typeof object[key] === 'object') {
-    return Object.keys(object[key]).every((operator) => {
-      const value = siblingFields?.[key]?.value;
-      const valueToCompare = object[key][operator];
-
-      let result = false;
-
-      if (operator === 'equals') {
-        result = value === valueToCompare;
-      }
-
-      if (operator === 'not_equals') {
-        result = value !== valueToCompare;
-      }
-
-      if (typeof value === 'number') {
-        if (operator === 'greater_than') {
-          result = value > valueToCompare;
-        }
-
-        if (operator === 'greater_than_equals') {
-          result = value >= valueToCompare;
-        }
-
-        if (operator === 'less_than') {
-          result = value < valueToCompare;
-        }
-
-        if (operator === 'less_than_equals') {
-          result = value <= valueToCompare;
-        }
-      }
-
-      return result;
-    });
-  }
-
-  return false;
-});
-
-const withConditions = (Field) => {
-  const WithConditions = (props) => {
-    const { conditions, name } = props;
-    const { fields } = useForm();
-
-    if (conditions) {
-      let siblingFields = fields;
-
-      // If this field is nested
-      // We can provide a list of sibling fields
-      if (name.indexOf('.') > 0) {
-        const parentFieldPath = name.substring(0, name.lastIndexOf('.') + 1);
-        siblingFields = Object.keys(fields).reduce((siblings, fieldKey) => {
-          if (fieldKey.indexOf(parentFieldPath) === 0) {
-            return {
-              ...siblings,
-              [fieldKey.replace(parentFieldPath, '')]: fields[fieldKey],
-            };
-          }
-
-          return siblings;
-        }, {});
-      }
-
-      const passesConditions = recursiveCheckCondition(conditions, siblingFields);
-
-      if (passesConditions) {
-        return <Field {...props} />;
-      }
-
-      return null;
-    }
-
-    return <Field {...props} />;
-  };
-
-  WithConditions.defaultProps = {
-    conditions: null,
-  };
-
-  WithConditions.propTypes = {
-    conditions: PropTypes.oneOfType([
-      PropTypes.shape({}),
-      PropTypes.array,
-    ]),
-    name: PropTypes.string.isRequired,
-  };
-
-  return WithConditions;
-};
-
-export default withConditions;

src/client/components/index.js

@@ -4,6 +4,7 @@ import { BrowserRouter as Router } from 'react-router-dom';
 import { ScrollInfoProvider } from '@trbl/react-scroll-info';
 import { WindowInfoProvider } from '@trbl/react-window-info';
 import { ModalProvider, ModalContainer } from '@trbl/react-modal';
+import config from 'payload/config';
 import Loading from './elements/Loading';
 import { SearchParamsProvider } from './utilities/SearchParams';
 import { LocaleProvider } from './utilities/Locale';
@@ -14,7 +15,6 @@ import getCSSVariable from '../../utilities/getCSSVariable';
 
 import '../scss/app.scss';
 
-
 const Index = () => {
   const windowInfoProps = {};
 

src/client/components/modals/StayLoggedIn/index.js

@@ -2,13 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useHistory } from 'react-router-dom';
 import { asModal } from '@trbl/react-modal';
+import config from 'payload/config';
 import Button from '../../elements/Button';
 
 import './index.scss';
 
 const baseClass = 'stay-logged-in';
 
-const { routes: { admin } } = PAYLOAD_CONFIG;
+const { routes: { admin } } = config;
 
 const StayLoggedInModal = (props) => {
   const {

src/client/components/utilities/Locale/index.js

@@ -2,9 +2,10 @@ import React, {
   createContext, useContext, useState, useEffect,
 } from 'react';
 import PropTypes from 'prop-types';
+import config from 'payload/config';
 import { useSearchParams } from '../SearchParams';
 
-const { localization } = PAYLOAD_CONFIG;
+const { localization } = config;
 
 const defaultLocale = (localization && localization.defaultLocale) ? localization.defaultLocale : 'en';
 const Context = createContext({});

src/client/components/views/CreateFirstUser/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useHistory } from 'react-router-dom';
+import config from 'payload/config';
 import MinimalTemplate from '../../templates/Minimal';
 import StatusList, { useStatusList } from '../../elements/Status';
 import Form from '../../forms/Form';
@@ -13,7 +14,7 @@ import './index.scss';
 
 const {
   admin: { user: userSlug }, collections, serverURL, routes: { admin, api },
-} = PAYLOAD_CONFIG;
+} = config;
 
 const userConfig = collections.find(collection => collection.slug === userSlug);
 

src/client/components/views/Dashboard/index.js

@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react';
 import { Link } from 'react-router-dom';
+import config from 'payload/config';
 import { useStepNav } from '../../elements/StepNav';
 import Eyebrow from '../../elements/Eyebrow';
 
@@ -9,7 +10,7 @@ const {
   routes: {
     admin,
   },
-} = PAYLOAD_CONFIG;
+} = config;
 
 const baseClass = 'dashboard';
 

src/client/components/views/ForgotPassword/index.js

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
+import config from 'payload/config';
 import MinimalTemplate from '../../templates/Minimal';
 import StatusList, { useStatusList } from '../../elements/Status';
 import Form from '../../forms/Form';
@@ -19,7 +20,7 @@ const {
     admin,
     api,
   },
-} = PAYLOAD_CONFIG;
+} = config;
 
 const ForgotPassword = () => {
   const { addStatus } = useStatusList();

src/client/components/views/Global/index.js

@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
+import config from 'payload/config';
 import { useStepNav } from '../../elements/StepNav';
 import usePayloadAPI from '../../../hooks/usePayloadAPI';
 import Form from '../../forms/Form';
@@ -12,7 +13,7 @@ const {
     admin,
     api,
   },
-} = PAYLOAD_CONFIG;
+} = config;
 
 const baseClass = 'global-edit';
 

src/client/components/views/Login/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Link, useHistory } from 'react-router-dom';
+import config from 'payload/config';
 import Logo from '../../graphics/Logo';
 import MinimalTemplate from '../../templates/Minimal';
 import StatusList, { useStatusList } from '../../elements/Status';
@@ -14,7 +15,7 @@ import './index.scss';
 
 const baseClass = 'login';
 
-const { admin: { user: userSlug }, serverURL, routes: { admin, api } } = PAYLOAD_CONFIG;
+const { admin: { user: userSlug }, serverURL, routes: { admin, api } } = config;
 
 const Login = () => {
   const { addStatus } = useStatusList();

src/client/components/views/Logout/index.js

@@ -1,11 +1,12 @@
 import React, { useEffect } from 'react';
+import config from 'payload/config';
 import { useUser } from '../../data/User';
 import Minimal from '../../templates/Minimal';
 import Button from '../../elements/Button';
 
 import './index.scss';
 
-const { routes: { admin } } = PAYLOAD_CONFIG;
+const { routes: { admin } } = config;
 
 const baseClass = 'logout';
 

src/client/components/views/NotFound/index.js

@@ -1,9 +1,10 @@
 import React, { useEffect } from 'react';
+import config from 'payload/config';
 import Eyebrow from '../../elements/Eyebrow';
 import { useStepNav } from '../../elements/StepNav';
 import Button from '../../elements/Button';
 
-const { routes: { admin } } = PAYLOAD_CONFIG;
+const { routes: { admin } } = config;
 
 const NotFound = () => {
   const { setStepNav } = useStepNav();

src/client/components/views/ResetPassword/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Link, useHistory, useParams } from 'react-router-dom';
+import config from 'payload/config';
 import StatusList from '../../elements/Status';
 import Form from '../../forms/Form';
 import Password from '../../forms/field-types/Password';
@@ -12,7 +13,7 @@ import HiddenInput from '../../forms/field-types/HiddenInput';
 
 const baseClass = 'reset-password';
 
-const { admin: { user: userSlug }, serverURL, routes: { admin, api } } = PAYLOAD_CONFIG;
+const { admin: { user: userSlug }, serverURL, routes: { admin, api } } = config;
 
 const ResetPassword = () => {
   const { token } = useParams();

src/client/components/views/Unauthorized/index.js

@@ -1,8 +1,9 @@
 import React from 'react';
+import config from 'payload/config';
 import Button from '../../elements/Button';
 import MinimalTemplate from '../../templates/Minimal';
 
-const { routes: { admin } } = PAYLOAD_CONFIG;
+const { routes: { admin } } = config;
 
 const Unauthorized = () => {
   return (

src/client/components/views/collections/Edit/Default.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useRouteMatch } from 'react-router-dom';
 import moment from 'moment';
+import config from 'payload/config';
 import Eyebrow from '../../../elements/Eyebrow';
 import Form from '../../../forms/Form';
 import PreviewButton from '../../../elements/PreviewButton';
@@ -11,7 +12,7 @@ import * as fieldTypes from '../../../forms/field-types';
 
 import './index.scss';
 
-const { serverURL, routes: { api } } = PAYLOAD_CONFIG;
+const { serverURL, routes: { api } } = config;
 
 const baseClass = 'collection-edit';
 

src/client/components/views/collections/Edit/index.js

@@ -1,13 +1,14 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { useRouteMatch, useHistory } from 'react-router-dom';
+import config from 'payload/config';
 import { useStepNav } from '../../../elements/StepNav';
 import usePayloadAPI from '../../../../hooks/usePayloadAPI';
 
 import RenderCustomComponent from '../../../utilities/RenderCustomComponent';
 import DefaultEdit from './Default';
 
-const { serverURL, routes: { admin, api } } = PAYLOAD_CONFIG;
+const { serverURL, routes: { admin, api } } = config;
 
 const EditView = (props) => {
   const { params: { id } = {} } = useRouteMatch();

src/client/components/views/collections/Edit/index.scss

@@ -5,6 +5,7 @@
 
   &__form {
     display: flex;
+    align-items: flex-start;
   }
 
   &__main {
@@ -40,17 +41,26 @@
   }
 
   &__sidebar {
-    padding-left: base(2);
     padding-bottom: base(1);
     width: base(16);
     display: flex;
     flex-direction: column;
   }
 
+  &__document-actions,
+  &__meta {
+    padding-left: base(2);
+  }
+
+  &__document-actions {
+    @include blur-bg;
+    position: sticky;
+    top: 0;
+  }
+
   &__meta {
     margin: auto 0 0 0;
     list-style: none;
-    padding: 0;
 
     li {
       margin-bottom: base(.5);

src/client/components/views/collections/List/Cell.js

@@ -2,9 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import moment from 'moment';
+import config from 'payload/config';
 import RenderCustomComponent from '../../../utilities/RenderCustomComponent';
 
-const { routes: { admin } } = PAYLOAD_CONFIG;
+const { routes: { admin } } = config;
 
 const DefaultCell = (props) => {
   const {

src/client/components/views/collections/List/Default.js

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import queryString from 'qs';
 import PropTypes from 'prop-types';
+import config from 'payload/config';
 import usePayloadAPI from '../../../../hooks/usePayloadAPI';
 import Eyebrow from '../../../elements/Eyebrow';
 import Paginator from '../../../elements/Paginator';
@@ -14,7 +15,7 @@ import Cell from './Cell';
 
 import './index.scss';
 
-const { serverURL, routes: { api, admin } } = PAYLOAD_CONFIG;
+const { serverURL, routes: { api, admin } } = config;
 
 const baseClass = 'collection-list';
 

src/client/scss/vars.scss

@@ -85,6 +85,11 @@ $style-stroke-width-m : 2px;
   }
 }
 
+@mixin blur-bg {
+  background: rgba($color-background-gray, .8);
+  backdrop-filter: saturate(180%) blur(5px);
+}
+
 //////////////////////////////
 // IMPORT OVERRIDES
 //////////////////////////////

src/fields/schemaMap.js

@@ -5,7 +5,7 @@ const formatBaseSchema = (field) => {
     hide: field.hidden === 'api' || field.hidden === true,
     localized: field.localized || false,
     unique: field.unique || false,
-    required: (field.required && !field.localized && !field.hidden && !field.conditions) || false,
+    required: (field.required && !field.localized && !field.hidden && !field.condition) || false,
     default: field.defaultValue || undefined,
   };
 };

src/index.js

@@ -3,6 +3,7 @@ require('isomorphic-fetch');
 
 const express = require('express');
 const graphQLPlayground = require('graphql-playground-middleware-express').default;
+const getConfig = require('./utilities/getConfig');
 const authenticate = require('./express/middleware/authenticate');
 const connectMongoose = require('./mongoose/connect');
 const expressMiddleware = require('./express/middleware');
@@ -19,7 +20,11 @@ const errorHandler = require('./express/middleware/errorHandler');
 
 class Payload {
   constructor(options) {
-    this.config = sanitizeConfig(options.config);
+    const config = getConfig(options);
+
+    this.config = sanitizeConfig(config);
+    this.config.paths.publicConfig = options.config.public;
+
     this.express = options.express;
     this.router = express.Router();
     this.collections = {};

src/utilities/getConfig.js

@@ -0,0 +1,18 @@
+/* eslint-disable import/no-dynamic-require */
+/* eslint-disable global-require */
+
+const getConfig = (options) => {
+  if (!options.config || !options.config.public || !options.config.private) {
+    throw new Error('Error: missing config paths. Please specify where to find your configuration files while initializing Payload.');
+  }
+
+  const publicConfig = require(options.config.public);
+  const privateConfig = require(options.config.private);
+
+  return {
+    ...publicConfig,
+    ...privateConfig,
+  };
+};
+
+module.exports = getConfig;

src/webpack/getWebpackDevConfig.js

@@ -4,6 +4,8 @@ const webpack = require('webpack');
 const getStyleLoaders = require('./getStyleLoaders');
 const secureConfig = require('../utilities/secureConfig');
 
+const dependency = 'fuck';
+
 module.exports = (config) => {
   return {
     entry: {
@@ -106,9 +108,6 @@ module.exports = (config) => {
       ],
     },
     plugins: [
-      new webpack.DefinePlugin({
-        PAYLOAD_CONFIG: JSON.stringify(secureConfig(config)),
-      }),
       new HtmlWebpackPlugin({
         template: path.resolve(__dirname, '../client/index.html'),
         filename: './index.html',
@@ -118,6 +117,7 @@ module.exports = (config) => {
     resolve: {
       modules: ['node_modules', path.resolve(__dirname, '../../node_modules')],
       alias: {
+        'payload/config': config.paths.publicConfig,
         'payload-scss-overrides': config.paths.scss,
       },
     },