Develop

.eslintrc.json

@@ -5,7 +5,15 @@
     "jest": true
   },
   "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended"],
-  "overrides": [],
+  "overrides": [
+    {
+      "files": ["config-overrides.js"],
+      "rules": {
+        "no-undef": "off",
+        "no-unused-vars": "off"
+      }
+    }
+  ],
   "parserOptions": {
     "ecmaVersion": "latest",
     "sourceType": "module"

.github/workflows/build-production-deploy-s3.yml

@@ -17,4 +17,9 @@ jobs:
       - uses: actions/checkout@v2
       - run: npm install
       - run: npm run build:production
-      - run: aws s3 sync ./build s3://${{env.WEBHOSTING_BUCKET_NAME}}/ --acl public-read --delete --cache-control max-age=3600
+      - run: |
+          current_version=$(node -p "require('./package.json').version")
+          major_version=$(echo $current_version | cut -d. -f1)
+
+          aws s3 sync ./build s3://${{env.WEBHOSTING_BUCKET_NAME}}/v${major_version}/ --acl public-read --cache-control max-age=3600 --delete 
+

.github/workflows/build-staging-deploy-s3.yml

@@ -17,4 +17,8 @@ jobs:
       - uses: actions/checkout@v2
       - run: npm install
       - run: npm run build:staging
-      - run: aws s3 sync ./build s3://${{env.WEBHOSTING_BUCKET_NAME}}/ --acl public-read --delete --cache-control max-age=3600
+      - run: |
+          current_version=$(node -p "require('./package.json').version")
+          major_version=$(echo $current_version | cut -d. -f1)
+
+          aws s3 sync ./build s3://${{env.WEBHOSTING_BUCKET_NAME}}/v${major_version}/ --acl public-read --cache-control max-age=3600 --delete 

config-overrides.js

@@ -0,0 +1,12 @@
+module.exports = function override(config, env) {
+  config.output.filename = `static/js/widget.js`;
+
+  const miniCssExtractPlugin = config.plugins.find(
+    (plugin) => plugin.constructor.name === 'MiniCssExtractPlugin',
+  );
+  if (miniCssExtractPlugin) {
+    miniCssExtractPlugin.options.filename = `static/css/widget.css`;
+  }
+
+  return config;
+};

package.json

@@ -21,12 +21,12 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "start:staging": "env-cmd -f .env.staging react-scripts start",
-    "start:production": "env-cmd -f .env.production react-scripts start",
-    "build:staging": "env-cmd -f .env.staging react-scripts build",
-    "build:production": "env-cmd -f .env.production react-scripts build",
-    "test": "react-scripts test",
+    "start": "react-app-rewired start",
+    "start:staging": "env-cmd -f .env.staging react-app-rewired start",
+    "start:production": "env-cmd -f .env.production react-app-rewired start",
+    "build:staging": "env-cmd -f .env.staging react-app-rewired build",
+    "build:production": "env-cmd -f .env.production react-app-rewired build",
+    "test": "react-app-rewired test",
     "eject": "react-scripts eject",
     "lint": "eslint .",
     "lint:fix": "eslint --fix",
@@ -59,6 +59,7 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.2",
     "eslint-plugin-react": "^7.33.2",
-    "prettier": "^3.1.1"
+    "prettier": "^3.1.1",
+    "react-app-rewired": "^2.2.1"
   }
 }

src/index.css

@@ -1,17 +1,4 @@
-html {
-  height: 100%;
-}
-
-body {
-  margin: 0;
-  padding: 0;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  max-width: 100vw !important;
-  height: 100%;
-}
-
-:root {
+#calendar-widget {
   --primary-grey: #646d7b;
   --secondary-grey: #d8d8d8;
   --tertiary-grey: #b6c1c9;
@@ -21,6 +8,12 @@ body {
   --primary-white-opaque: #ffffff;
 
   --primary-black: #222732;
+
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  margin: 0;
+  padding: 0;
 }
 
 #calendar-widget ul,