Silverstripe 5 compatibility

.nvmrc

@@ -1 +1 @@
-10
+18

Dockerfile

@@ -1,6 +1,6 @@
 ARG ALPINE_VERSION=3.16
 
-ARG NODE_VERSION=10.24.1
+ARG NODE_VERSION=18
 
 FROM node:$NODE_VERSION-alpine AS node
 FROM php:8.1-cli-alpine$ALPINE_VERSION AS php-cli

client/src/components/AddBlockToBottomButton.js

@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Button } from 'reactstrap';
-import i18n from 'i18n';
 import { elementTypeType } from 'types/elementTypeType';
 import { inject } from 'lib/Injector';
 
@@ -12,14 +11,14 @@ class AddBlockToBottomButton extends Component {
     this.toggle = this.toggle.bind(this);
 
     this.state = {
-      popoverOpen: false
+      bottomPopoverOpen: false
     };
   }
 
   toggle() {
-    this.setState({
-      bottomPopoverOpen: !this.state.bottomPopoverOpen
-    });
+    this.setState(prevState => ({
+      bottomPopoverOpen: !prevState.bottomPopoverOpen
+    }));
   }
 
   /**
@@ -41,7 +40,7 @@ class AddBlockToBottomButton extends Component {
     return (
       <div>
         <Button {...buttonAttributes}>
-          {'Add to bottom'}
+          Add to bottom
         </Button>
         <AddElementPopoverComponent
           placement="bottom-start"
@@ -51,7 +50,7 @@ class AddBlockToBottomButton extends Component {
           toggle={this.toggle}
           areaId={areaId}
           insertAfterElement={0}
-          insertAtBottom={true}
+          insertAtBottom
         />
       </div>
     );

client/src/components/AddBlockToTopButton.js

@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Button } from 'reactstrap';
-import i18n from 'i18n';
 import { elementTypeType } from 'types/elementTypeType';
 import { inject } from 'lib/Injector';
 
@@ -12,14 +11,14 @@ class AddBlockToTopButton extends Component {
     this.toggle = this.toggle.bind(this);
 
     this.state = {
-      popoverOpen: false
+      topPopoverOpen: false
     };
   }
 
   toggle() {
-    this.setState({
-      topPopoverOpen: !this.state.topPopoverOpen
-    });
+    this.setState(prevState => ({
+      topPopoverOpen: !prevState.topPopoverOpen
+    }));
   }
 
   /**
@@ -38,7 +37,7 @@ class AddBlockToTopButton extends Component {
     return (
       <div>
         <Button {...buttonAttributes}>
-          {'Add to top'}
+          Add to top
         </Button>
         <AddElementPopoverComponent
           placement="bottom-start"

client/src/components/Element.js

@@ -96,11 +96,11 @@ class Element extends Component {
    * Prevents the Element from being expanded in case a loading error occurred.
    * This gets triggered from the InlineEditForm component.
    */
-   handleLoadingError() {
+  handleLoadingError() {
     this.setState({
       loadingError: true
     });
-   }
+  }
 
   /**
    * Dispatcher to Tabs redux store for this element's tabset
@@ -158,9 +158,9 @@ class Element extends Component {
     }
 
     if (type.inlineEditable && !loadingError) {
-      this.setState({
-        previewExpanded: !this.state.previewExpanded
-      });
+      this.setState(prevState => ({
+        previewExpanded: !prevState.previewExpanded
+      }));
       return;
     }
 
@@ -329,8 +329,7 @@ function mapStateToProps(state, ownProps) {
     state.tabs &&
     state.tabs.fields &&
     state.tabs.fields[uniqueFieldId] &&
-    state.tabs.fields[uniqueFieldId].activeTab
-  ;
+    state.tabs.fields[uniqueFieldId].activeTab;
 
   return {
     tabSetName,

client/src/components/ElementEditor/Toolbar.js

@@ -7,7 +7,12 @@ import { DropTarget } from 'react-dnd';
 // eslint-disable-next-line react/prefer-stateless-function
 class Toolbar extends PureComponent {
   render() {
-    const { AddBlockToBottomButton, AddBlockToTopButton, elementTypes, areaId, connectDropTarget } = this.props;
+    const {
+      AddBlockToBottomButton,
+      AddBlockToTopButton,
+      elementTypes,
+      areaId,
+      connectDropTarget } = this.props;
     return connectDropTarget(
       <div className="element-editor__toolbar">
         <AddBlockToBottomButton

client/src/state/editor/addElementMutation.js

@@ -1,4 +1,4 @@
-import { graphql } from 'react-apollo';
+import { graphql } from '@apollo/client/react/hoc';
 import gql from 'graphql-tag';
 import { query as readBlocksQuery, config as readBlocksConfig } from './readBlocksForAreaQuery';
 

client/src/state/editor/readBlocksForAreaQuery.js

@@ -1,4 +1,4 @@
-import { graphql } from 'react-apollo';
+import { graphql } from '@apollo/client/react/hoc';
 import gql from 'graphql-tag';
 
 // GraphQL query for retrieving the current state of elements for an area. The results of the query

client/src/styles/bundle.scss

@@ -1,10 +1,7 @@
-// Core variables
-@import "variables";
-
 .element-editor__element {
   border: 0;
   min-height: 4rem;
-  outline: 1px solid $border-color-light;
+  outline: 1px solid #dbe0e9;
   transition: all 100ms linear;
 
   &--expanded {
@@ -21,7 +18,7 @@
 
   &.is-row {
     -webkit-flex: none;
-    background: $body-bg-dark;
+    background: #f4f6f8;
     display: block;
     flex: none;
     max-width: none;

composer.json

@@ -17,10 +17,10 @@
     "prefer-stable": true,
     "require": {
         "php": ">=8.1",
-        "silverstripe/admin": "^1.7@stable",
-        "silverstripe/cms": "^4@stable",
-        "silverstripe/vendor-plugin": "^1.0",
-        "dnadesign/silverstripe-elemental": "^4.7"
+        "silverstripe/admin": "^2.0@stable",
+        "silverstripe/cms": "^5@stable",
+        "silverstripe/vendor-plugin": "^2.0",
+        "dnadesign/silverstripe-elemental": "^5.0"
     },
     "require-dev": {
         "friendsofphp/php-cs-fixer": "^3.4"

package.json

@@ -3,7 +3,7 @@
   "version": "2.0.0",
   "description": "Compose your SilverStripe content of Elements using a column based grid",
   "scripts": {
-    "build": "yarn && yarn lint && NODE_ENV=production webpack -p --bail --progress",
+    "build": "yarn && yarn lint && NODE_ENV=production webpack --bail --progress",
     "dev": "NODE_ENV=development webpack --progress",
     "watch": "NODE_ENV=development webpack --watch --progress",
     "css": "WEBPACK_CHILD=css npm run build",
@@ -30,28 +30,32 @@
   },
   "homepage": "https://github.com/wedevelopnl/silverstripe-elemental-grid#readme",
   "dependencies": {
-    "classnames": "^2.2.5",
-    "extract-text-webpack-plugin": "^3.0.2",
-    "graphql": "^14.0.0",
-    "graphql-tag": "^2.10.0",
-    "prop-types": "^15.6.2",
-    "react": "^16.6.1",
+    "@apollo/client": "^3.7.1",
+    "@popperjs/core": "^2.11.6",
+    "bootstrap": "^4.6.2",
+    "classnames": "^2.3.2",
+    "graphql": "^16.6.0",
+    "graphql-tag": "^2.12.6",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
     "react-dnd": "^5.0.0",
     "react-dnd-html5-backend": "^5.0.1",
-    "react-dom": "^16.6.1",
-    "react-redux": "^5.0.7",
-    "react-apollo": "^2.1.0",
-    "reactstrap": "^6.4.0",
-    "redux": "^4.0.0",
-    "redux-form": "^6.8.0"
+    "react-dom": "^18.2.0",
+    "react-redux": "^8.0.4",
+    "reactstrap": "^8.9.0",
+    "redux": "^4.2.0",
+    "redux-form": "^8.3.8",
+    "reselect": "^4.1.7"
   },
   "devDependencies": {
-    "@silverstripe/eslint-config": "^0.1.0",
-    "@silverstripe/webpack-config": "^1.5.0",
-    "babel-jest": "^23.6.0",
-    "enzyme": "^3.6.0",
-    "enzyme-adapter-react-16": "^1.5.0",
-    "jest-cli": "^23.6.0"
+    "@silverstripe/eslint-config": "^1.1.0",
+    "@silverstripe/webpack-config": "^2.0.0",
+    "@testing-library/react": "^14.0.0",
+    "babel-jest": "^29.2.2",
+    "jest-cli": "^29.2.2",
+    "jest-environment-jsdom": "^29.3.1",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^5.0.0"
   },
   "jest": {
     "roots": [
@@ -73,16 +77,7 @@
       ".*": "babel-jest"
     }
   },
-  "babel": {
-    "presets": [
-      "env",
-      "react"
-    ],
-    "plugins": [
-      "transform-object-rest-spread"
-    ]
-  },
   "engines": {
-    "node": "^10.x"
+    "node": "^18.x"
   }
 }

src/Extensions/BaseElementExtension.php

@@ -141,6 +141,7 @@ public function updateCMSFields(FieldList $fields)
          * TitleSettings group to always appear first in the fieldorder
          */
         $fields->insertBefore(
+            '',
             FieldGroup::create(
                 [
                     TextField::create('Title', _t(__CLASS__ . '.TITLE', 'Title text'))
@@ -154,7 +155,6 @@ public function updateCMSFields(FieldList $fields)
                 ->setName('TitleSettings')
                 ->setTitle('Title')
                 ->addExtraClass('d-lg-flex'),
-            ''
         );
 
         if (!ElementalConfig::getEnableCustomTitleClasses()) {

webpack.config.js

@@ -1,56 +1,29 @@
 const Path = require('path');
-// Import the core config
-const webpackConfig = require('@silverstripe/webpack-config');
-const {
-  resolveJS,
-  externalJS,
-  moduleJS,
-  pluginJS,
-  moduleCSS,
-  pluginCSS,
-} = webpackConfig;
+const { JavascriptWebpackConfig, CssWebpackConfig } = require('@silverstripe/webpack-config');
 
 const ENV = process.env.NODE_ENV;
 const PATHS = {
-  MODULES: 'node_modules',
-  FILES_PATH: '../',
   ROOT: Path.resolve(),
   SRC: Path.resolve('client/src'),
   DIST: Path.resolve('client/dist'),
 };
 
 const config = [
-  {
-    name: 'js',
-    entry: {
+  // Main JS bundle
+  new JavascriptWebpackConfig('js', PATHS, 'wedevelopnl/silverstripe-elemental-grid')
+    .setEntry({
       bundle: `${PATHS.SRC}/bundles/bundle.js`,
-    },
-    output: {
-      path: PATHS.DIST,
-      filename: 'js/[name].js',
-    },
-    devtool: (ENV !== 'production') ? 'source-map' : '',
-    resolve: resolveJS(ENV, PATHS),
-    externals: externalJS(ENV, PATHS),
-    module: moduleJS(ENV, PATHS),
-    plugins: pluginJS(ENV, PATHS),
-  },
-  {
-    name: 'css',
-    entry: {
+    })
+    .getConfig(),
+  // sass to css
+  new CssWebpackConfig('css', PATHS)
+    .setEntry({
       bundle: `${PATHS.SRC}/styles/bundle.scss`,
-    },
-    output: {
-      path: PATHS.DIST,
-      filename: 'styles/[name].css',
-    },
-    devtool: (ENV !== 'production') ? 'source-map' : '',
-    module: moduleCSS(ENV, PATHS),
-    plugins: pluginCSS(ENV, PATHS),
-  },
+    })
+    .getConfig(),
 ];
 
 // Use WEBPACK_CHILD=js or WEBPACK_CHILD=css env var to run a single config
 module.exports = (process.env.WEBPACK_CHILD)
   ? config.find((entry) => entry.name === process.env.WEBPACK_CHILD)
-  : module.exports = config;
+  : config;