Build @yoast/social-metadata-forms separately

.eslintrc

@@ -37,6 +37,10 @@ overrides:
       react/no-unused-prop-types: 1
       require-jsdoc: 1
       import/no-unresolved: [ "error", { ignore: [ "^@yoast/(helpers|style-guide)" ] } ]
+  - files:
+      - "packages/social-metadata-forms/**/*.js"
+    rules:
+      import/no-unresolved: [ "error", { ignore: [ "^@yoast/(components|helpers|replacement-variable-editor|style-guide)" ] } ]
   - files:
       - "packages/yoastseo/**/*.js"
     settings:

packages/social-metadata-forms/.babelrc

@@ -1,17 +1,16 @@
 {
 	"presets": [
 		[
-			"env",
+			"@babel/preset-env",
 			{
 				"targets": {
 					"browsers": [ "extends @yoast/browserslist-config" ]
 				}
 			}
-		],
-		"react"
+		]
 	],
 	"plugins": [
-		"transform-object-rest-spread"
+		"@babel/plugin-transform-react-jsx"
 	],
 	"env": {
 		"test": {

packages/social-metadata-forms/jest.config.js

@@ -18,6 +18,7 @@ const config = {
 		"clover",
 		"text-summary",
 	],
+	testEnvironment: "jsdom",
 };
 
 module.exports = config;

packages/social-metadata-forms/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@yoast/social-metadata-forms",
 	"version": "1.17.0",
-	"main": "src/index.js",
+	"main": "build/index.js",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/Yoast/javascript.git",
@@ -11,7 +11,10 @@
 	"license": "GPL-3.0",
 	"private": false,
 	"scripts": {
-		"prepublishOnly": "rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && cp .babelrc dist/.babelrc",
+		"build": "yarn clean && yarn build:js",
+		"build:js": "babel src --out-dir build",
+		"clean": "rm -rf build",
+		"prepublishOnly": "yarn build",
 		"test": "jest",
 		"lint": "eslint . --max-warnings=0"
 	},
@@ -32,7 +35,12 @@
 		"styled-components": "^5.3.6"
 	},
 	"devDependencies": {
+    "@babel/cli": "^7.17.10",
+    "@babel/core": "^7.17.10",
+    "@babel/plugin-transform-react-jsx": "^7.17.3",
+    "@babel/preset-env": "^7.16.11",
 		"@yoast/browserslist-config": "^1.2.2",
+    "babel-plugin-styled-components": "^2.0.6",
 		"browserslist": "^4.7.3",
 		"jest-styled-components": "^7.0.3",
 		"raf": "^3.4.1",