feat(workouteditor): add workoutEditor

.eslintrc

@@ -10,6 +10,7 @@
   ],
   "rules": {
     // NextJS provides its own global reference to React
-    "react/react-in-jsx-scope": "off"
+    "react/react-in-jsx-scope": "off",
+    "no-param-reassign": "off"
   }
 }

config/next-css.js

@@ -0,0 +1,115 @@
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+
+const fileExtensions = new Set();
+let extractCssInitialized = false;
+
+const cssLoaderConfig = (
+  config,
+  {
+    extensions = [],
+    cssModules = false,
+    cssLoaderOptions = {},
+    dev,
+    isServer,
+    loaders = [],
+  }
+) => {
+  // We have to keep a list of extensions for the splitchunk config
+  for (const extension of extensions) {
+    fileExtensions.add(extension);
+  }
+
+  if (!isServer) {
+    config.optimization.splitChunks.cacheGroups.styles = {
+      name: "styles",
+      test: new RegExp(`\\.+(${[...fileExtensions].join("|")})$`),
+      chunks: "all",
+      enforce: true,
+    };
+  }
+
+  if (!isServer && !extractCssInitialized) {
+    config.plugins.push(
+      new MiniCssExtractPlugin({
+        // Options similar to the same options in webpackOptions.output
+        // both options are optional
+        filename: dev
+          ? "static/css/[name].css"
+          : "static/css/[name].[contenthash:8].css",
+        chunkFilename: dev
+          ? "static/css/[name].chunk.css"
+          : "static/css/[name].[contenthash:8].chunk.css",
+      })
+    );
+    extractCssInitialized = true;
+  }
+
+  const cssLoader = {
+    loader: "css-loader",
+    options: Object.assign(
+      {},
+      {
+        modules: cssModules,
+        sourceMap: dev,
+        importLoaders: loaders.length,
+        onlyLocals: isServer,
+      },
+      cssLoaderOptions
+    ),
+  };
+
+  // When on the server and using css modules we transpile the css
+  if (isServer && cssLoader.options.modules) {
+    return [cssLoader, ...loaders].filter(Boolean);
+  }
+
+  return [
+    !isServer && dev && "extracted-loader",
+    !isServer && MiniCssExtractPlugin.loader,
+    cssLoader,
+    ...loaders,
+  ].filter(Boolean);
+};
+
+module.exports = (nextConfig = {}) => {
+  return Object.assign({}, nextConfig, {
+    webpack(config, options) {
+      if (!options.defaultLoaders) {
+        throw new Error(
+          "This plugin is not compatible with Next.js versions below 5.0.0 https://err.sh/next-plugins/upgrade"
+        );
+      }
+
+      const { dev, isServer } = options;
+      const { cssModules, cssLoaderOptions } = nextConfig;
+
+      options.defaultLoaders.css = cssLoaderConfig(config, {
+        extensions: ["css"],
+        cssModules,
+        cssLoaderOptions,
+        dev,
+        isServer,
+      });
+
+      const linariaLoader = {
+        loader: "linaria/loader",
+        options: {
+          sourceMap: process.env.NODE_ENV !== "production",
+        },
+      };
+
+      config.module.rules.push({ test: /\.(t)?sx$/, use: linariaLoader });
+
+      config.module.rules.push({
+        test: /\.css$/,
+        use: options.defaultLoaders.css,
+      });
+
+      if (typeof nextConfig.webpack === "function") {
+        return nextConfig.webpack(config, options);
+      }
+
+      return config;
+    },
+  });
+};

next.config.js

@@ -1,23 +1,14 @@
-const withCSS = require("@zeit/next-css");
+const withCSS = require("./config/next-css");
 const withOffline = require("next-offline");
 const withPlugins = require("next-compose-plugins");
 const optimizedImages = require("next-optimized-images");
+const bundleAnalyzer = require("@next/bundle-analyzer");
 
 module.exports = withPlugins([
   [
     withCSS,
     {
       webpack(config, { isServer }) {
-        config.module.rules[0].use = [
-          config.module.rules[0].use,
-          {
-            loader: "linaria/loader",
-            options: {
-              sourceMap: process.env.NODE_ENV !== "production",
-            },
-          },
-        ];
-
         const testPattern = /\.(woff|woff2|eot|ttf|otf)$/;
 
         config.module.rules.push({
@@ -69,4 +60,5 @@ module.exports = withPlugins([
     },
   ],
   [optimizedImages, { optimizeImagesInDev: true }],
+  [bundleAnalyzer],
 ]);

package.json

@@ -10,44 +10,56 @@
     "test": "jest"
   },
   "dependencies": {
-    "@reduxjs/toolkit": "1.3.4",
+    "@reduxjs/toolkit": "1.4.0",
     "linaria": "1.3.3",
-    "next": "9.3.5",
-    "next-seo": "4.4.0",
+    "nanoid": "3.1.7",
+    "next": "9.5.3",
+    "next-seo": "4.10.0",
     "react": "16.13.1",
     "react-dom": "16.13.1",
-    "react-redux": "7.2.0",
+    "react-redux": "7.2.1",
+    "react-spring": "8.0.27",
+    "react-use-gesture": "7.0.15",
     "redux": "4.0.5",
+    "redux-logger": "3.0.6",
     "redux-saga": "1.1.3",
     "typeface-nunito": "1.1.3",
     "typeface-poppins": "0.0.72"
   },
   "devDependencies": {
-    "@commitlint/cli": "8.3.5",
-    "@commitlint/config-conventional": "8.3.4",
-    "@testing-library/react": "10.0.2",
-    "@types/jest": "25.2.1",
-    "@types/node": "12.12.2",
-    "@types/react": "16.9.34",
+    "@commitlint/cli": "11.0.0",
+    "@commitlint/config-conventional": "11.0.0",
+    "@next/bundle-analyzer": "9.4.1",
+    "@testing-library/react": "11.0.4",
+    "@types/jest": "26.0.14",
+    "@types/node": "14.0.1",
+    "@types/react": "16.9.49",
+    "@types/react-redux": "7.1.8",
+    "@types/redux-logger": "3.0.7",
     "@zeit/next-css": "1.0.1",
-    "babel-jest": "25.3.0",
-    "eslint": "6.8.0",
-    "eslint-config-airbnb-typescript-prettier": "2.1.1",
-    "file-loader": "6.0.0",
-    "husky": "4.2.5",
+    "babel-jest": "26.3.0",
+    "css-loader": "3.5.3",
+    "csstype": "2.6.10",
+    "eslint": "7.9.0",
+    "eslint-config-airbnb-typescript-prettier": "3.1.0",
+    "extracted-loader": "1.0.7",
+    "file-loader": "6.1.0",
+    "husky": "4.3.0",
+    "ignore-loader": "0.1.2",
     "image-trace-loader": "1.0.2",
-    "imagemin-mozjpeg": "8.0.0",
-    "imagemin-optipng": "7.1.0",
-    "jest": "25.3.0",
-    "lint-staged": "10.1.6",
+    "imagemin-mozjpeg": "9.0.0",
+    "imagemin-optipng": "8.0.0",
+    "jest": "26.4.2",
+    "lint-staged": "10.4.0",
+    "mini-css-extract-plugin": "0.9.0",
     "next-compose-plugins": "2.2.0",
-    "next-offline": "5.0.1",
-    "next-optimized-images": "2.5.8",
-    "prettier": "2.0.4",
-    "responsive-loader": "1.2.0",
-    "sharp": "0.25.2",
-    "ts-jest": "25.4.0",
-    "typescript": "3.8.3",
+    "next-offline": "5.0.2",
+    "next-optimized-images": "2.6.2",
+    "prettier": "2.1.2",
+    "responsive-loader": "2.0.0",
+    "sharp": "0.26.1",
+    "ts-jest": "26.4.0",
+    "typescript": "4.0.3",
     "url-loader": "4.1.0",
     "webp-loader": "0.6.0"
   },

src/components/Box.tsx

@@ -0,0 +1,27 @@
+import { styled } from "linaria/react";
+// eslint-disable-next-line import/no-unresolved
+import * as CSS from "csstype";
+
+type BoxProps = {
+  width?: number | string;
+  height?: number | string;
+  direction?: CSS.FlexDirectionProperty;
+  align?: CSS.AlignItemsProperty;
+  justify?: CSS.JustifyContentProperty;
+  padding?: CSS.PaddingProperty<number>;
+};
+
+const applyUnits = (value: string | number): string =>
+  typeof value === "number" ? `${value}rem` : value;
+
+const Box = styled.div`
+  display: flex;
+  flex-direction: ${({ direction = "column" }: BoxProps) => direction};
+  align-items: ${({ align = "flex-start" }: BoxProps) => align};
+  justify-content: ${({ justify = "flex-start" }: BoxProps) => justify};
+  width: ${({ width }: BoxProps) => (width ? applyUnits(width) : "100%")};
+  height: ${({ height }: BoxProps) => (height ? applyUnits(height) : "auto")};
+  padding: ${({ padding }: BoxProps) => (padding ? applyUnits(padding) : 0)};
+`;
+
+export default Box;

src/components/Modal.tsx

@@ -0,0 +1,25 @@
+import { styled } from "linaria/react";
+import { animated } from "react-spring";
+
+const Modal = styled(animated.section)`
+  background-color: rgba(25, 25, 25, 0.8);
+  backdrop-filter: blur(5px);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 2rem;
+  padding-top: 3rem;
+  position: relative;
+
+  ::before {
+    content: "";
+    width: 8rem;
+    height: 0.2rem;
+    background-color: rgba(255, 255, 255, 0.8);
+    position: absolute;
+    top: 2rem;
+    border-radius: 2rem;
+  }
+`;
+
+export default Modal;

src/components/Overlay.tsx

@@ -0,0 +1,27 @@
+import { MouseEvent } from "react";
+import { styled } from "linaria/react";
+
+type OverlayProps = {
+  align?: "top" | "center" | "bottom";
+  onClick?: (event: MouseEvent<HTMLDivElement>) => void;
+};
+
+const Overlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: ${({ align = "top" }: OverlayProps) =>
+    ({ top: "flex-start", center: "center", bottom: "flex-end" }[align])};
+
+  pointer-events: ${({ onClick }) =>
+    typeof onClick === "function" ? "initial" : "none"};
+  > * {
+    pointer-events: initial;
+  }
+`;
+
+export default Overlay;