fix all linting issues, upgrade most packages

.prettierignore

@@ -5,4 +5,5 @@ storybook-static
 worker
 **/dist
 terraform
-.husky/_
+.husky/_
+.mf

.stylelintrc

@@ -1,6 +1,16 @@
 {
-  "extends": ["stylelint-config-standard", "stylelint-config-styled-components", "stylelint-prettier/recommended"],
+  "customSyntax": "@stylelint/postcss-css-in-js",
+  "extends": [
+    "stylelint-config-recommended",
+    "stylelint-config-styled-components"
+  ],
   "rules": {
-    "value-keyword-case": null
+    "color-function-notation": "modern",
+    "shorthand-property-no-redundant-values": true,
+    "font-weight-notation": "numeric",
+    "alpha-value-notation": "percentage",
+    "hue-degree-notation": "angle",
+    "function-calc-no-unspaced-operator": true,
+    "length-zero-no-unit": true
   }
-}
+}

package.json

@@ -18,31 +18,34 @@
   ],
   "scripts": {
     "build": "run-p -c build:*",
+    "build:api": "yarn workspace @roleypoly/api run build",
     "build:design-system": "yarn workspace @roleypoly/design-system run build",
     "build:web": "yarn workspace @roleypoly/web run build",
     "create-component": "yarn workspace @roleypoly/design-system run create-component",
     "lint": "run-p -c lint:* --",
     "lint:eslint": "eslint",
     "lint:prettier": "cross-env prettier -c '**/*.{ts,tsx,css,yml,yaml,md,json,js,jsx,sh,gitignore,mdx,Dockerfile}'",
-    "lint:stylelint": "cross-env stylelint '**/*.{ts,tsx}'",
+    "lint:stylelint": "cross-env stylelint 'packages/{web,design-system}/**/*.{ts,tsx}'",
-    "lint:terraform": "terraform fmt -recursive -check ./terraform",
+    "lint:terraform": "terraform fmt -check -recursive",
     "lint:types": "tsc --noEmit",
     "lint:types-api": "yarn workspace @roleypoly/api run lint:types",
-    "lint:types-interactions": "yarn workspace @roleypoly/interactions run lint:types",
-    "lint:types-worker-utils": "yarn workspace @roleypoly/worker-utils run lint:types",
     "postinstall": "is-ci || husky install",
     "start": "run-p -c start:*",
     "start:bot": "yarn workspace @roleypoly/bot start",
     "start:design-system": "yarn workspace @roleypoly/design-system start",
-    "start:interactions": "yarn workspace @roleypoly/interactions start",
     "start:web": "yarn workspace @roleypoly/web start",
     "start:worker": "yarn workspace @roleypoly/api start",
-    "test": "jest"
+    "test": "run-p -c test:* --",
+    "test:api": "yarn workspace @roleypoly/api run test",
+    "test:design-system": "yarn workspace @roleypoly/design-system run test",
+    "test:misc-utils": "yarn workspace @roleypoly/misc-utils run test",
+    "test:web": "yarn workspace @roleypoly/web run test"
   },
   "devDependencies": {
-    "@types/enzyme": "^3.10.9",
+    "@stylelint/postcss-css-in-js": "^0.37.2",
-    "@types/lodash": "^4.14.171",
+    "@types/enzyme": "^3.10.11",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.2",
+    "@types/lodash": "^4.14.178",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.6",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.6",
     "husky": "^7.0.4",
@@ -51,17 +54,17 @@
     "jest-enzyme": "^7.1.2",
     "jest-react-hooks-shallow": "^1.5.1",
     "jest-styled-components": "^7.0.8",
-    "lint-staged": "^11.0.0",
+    "lint-staged": "^12.3.2",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.3.2",
+    "postcss-syntax": "^0.36.2",
-    "prettier-plugin-organize-imports": "^2.2.0",
+    "prettier": "^2.5.1",
-    "prettier-plugin-pkg": "^0.10.0",
+    "prettier-plugin-organize-imports": "^2.3.4",
-    "prettier-plugin-sh": "^0.7.1",
+    "prettier-plugin-pkg": "^0.11.1",
-    "stylelint": "^13.13.1",
+    "prettier-plugin-sh": "^0.8.1",
-    "stylelint-config-prettier": "^8.0.2",
+    "stylelint": "^14.3.0",
-    "stylelint-config-standard": "^22.0.0",
+    "stylelint-config-recommended": "^6.0.0",
     "stylelint-config-styled-components": "^0.1.1",
-    "stylelint-prettier": "^1.2.0",
+    "stylelint-processor-styled-components": "^1.10.0",
     "ts-jest": "^27.1.3",
     "typescript": "^4.5.5"
   },

packages/api/jest.config.js

@@ -1,15 +1,13 @@
 module.exports = {
   preset: 'ts-jest/presets/default-esm',
   name: 'api',
-  rootDir: '../../',
   testEnvironment: 'miniflare',
   testEnvironmentOptions: {
-    wranglerConfigPath: 'packages/api/wrangler.toml',
+    envPath: '../../.env',
-    envPath: '.env',
   },
   globals: {
     'ts-jest': {
-      tsconfig: '<rootDir>/packages/api/tsconfig.test.json',
+      tsconfig: '<rootDir>/tsconfig.test.json',
       useESM: true,
     },
   },

packages/api/package.json

@@ -6,18 +6,16 @@
   "scripts": {
     "build": "yarn build:dev --minify",
     "build:dev": "esbuild --bundle --sourcemap --platform=node --format=esm --outdir=dist --out-extension:.js=.mjs ./src/index.ts",
-    "dev": "miniflare --watch --debug",
+    "lint:types": "tsc --noEmit",
-    "lint:types": "tsc --noEmit"
+    "start": "miniflare --watch --debug",
+    "test": "jest"
   },
   "dependencies": {},
   "devDependencies": {
     "@cloudflare/workers-types": "^3.3.1",
     "@roleypoly/misc-utils": "*",
     "@roleypoly/types": "*",
-    "@roleypoly/worker-utils": "*",
+    "@types/node": "^17.0.13",
-    "@types/deep-equal": "^1.0.1",
-    "@types/node": "^13.13.0",
-    "deep-equal": "^2.0.5",
     "esbuild": "^0.14.14",
     "itty-router": "^2.4.10",
     "jest-environment-miniflare": "^2.2.0",

packages/api/src/guilds/audit-logging.ts

@@ -0,0 +1 @@
+export {};

packages/api/src/routes/~template/template.spec.ts

@@ -1,5 +0,0 @@
-describe('GET /~template', () => {
-  it('returns Not Implemented when called', () => {
-    expect(true).toBe(true);
-  });
-});

packages/api/src/routes/~template/template.ts

@@ -1,6 +0,0 @@
-import { Context, RoleypolyHandler } from '@roleypoly/api/src/utils/context';
-import { notImplemented } from '@roleypoly/api/src/utils/response';
-
-export const template: RoleypolyHandler = async (request: Request, context: Context) => {
-  return notImplemented();
-};

packages/backend-emulator/kv.js

@@ -1,102 +0,0 @@
-const level = require('level');
-const path = require('path');
-const fs = require('fs');
-
-let hasWarned = false;
-
-const getConversion = {
-  text: (x) => x,
-  json: (x) => JSON.parse(x),
-  arrayBuffer: (x) => Buffer.from(x).buffer,
-  stream: (x) => Buffer.from(x),
-};
-
-class KVShim {
-  constructor(namespace) {
-    this.namespace = namespace;
-
-    fs.mkdirSync(path.resolve(__dirname, '../../.devdbs'), {
-      recursive: true,
-    });
-
-    (async () => {
-      this.level = level(path.resolve(__dirname, '../../.devdbs', namespace));
-    })();
-  }
-
-  makeValue(value, expirationTtl) {
-    if (!expirationTtl) {
-      return JSON.stringify({
-        value,
-        expires: false,
-      });
-    }
-
-    return JSON.stringify({
-      value,
-      expires: Date.now() + 1000 * expirationTtl,
-    });
-  }
-
-  validate(value) {
-    if (!value) {
-      return false;
-    }
-
-    if (value.expires && value.expires < Date.now()) {
-      return false;
-    }
-
-    return true;
-  }
-
-  async get(key, type = 'text') {
-    try {
-      const result = JSON.parse(await this.level.get(key));
-
-      if (!this.validate(result)) {
-        return null;
-      }
-
-      return getConversion[type](result.value);
-    } catch (e) {
-      return null;
-    }
-  }
-
-  async getWithMetadata(key, type) {
-    return {
-      value: await this.get(key, type),
-      metadata: {},
-    };
-  }
-
-  async put(key, value, { expirationTtl, expiration, metadata }) {
-    if ((expiration || metadata) && !hasWarned) {
-      console.warn(
-        'expiration and metadata is lost in the emulator. Use expirationTtl, please.'
-      );
-      hasWarned = true;
-    }
-
-    return await this.level.put(key, this.makeValue(value, expirationTtl));
-  }
-
-  // This loses scope for some unknown reason
-  delete = async (key) => {
-    return this.level.del(key);
-  };
-
-  list() {
-    console.warn('List is frowned upon and will fail to fetch keys in the emulator.');
-    return {
-      keys: [],
-      cursor: '0',
-      list_complete: true,
-    };
-  }
-}
-
-module.exports = {
-  KVShim,
-};

packages/backend-emulator/main.js

@@ -1,212 +0,0 @@
-#!/usr/bin/env node
-const path = require('path');
-require('dotenv').config({ path: path.resolve(__dirname, '../../.env') });
-const vm = require('vm');
-const http = require('http');
-const fs = require('fs');
-const chokidar = require('chokidar');
-const webpack = require('webpack');
-const { Crypto } = require('@peculiar/webcrypto');
-const { KVShim } = require('./kv');
-const crypto = new Crypto();
-const fetch = require('node-fetch');
-const args = require('minimist')(process.argv.slice(2));
-
-const basePath = args.basePath || process.cwd();
-if (!basePath) {
-  throw new Error('--basePath is not set.');
-}
-
-const workerConfig = require(`${basePath}/worker.config.js`);
-
-const getKVs = (namespaces = []) =>
-  namespaces.reduce((acc, ns) => ({ ...acc, [ns]: new KVShim(ns) }), {});
-
-const workerShims = {
-  ...workerConfig.environment,
-  ...getKVs(workerConfig.kv),
-};
-
-let listeners = [];
-
-let isResponseConstructorAllowed = false;
-
-/**
- * SafeResponse wraps a fetch Response to yell loudly if constructed at an unsafe time.
- * Cloudflare will reject all Response objects that aren't created during a request, so no pre-generation is allowed.
- */
-class SafeResponse extends fetch.Response {
-  constructor(...args) {
-    super(...args);
-
-    if (!isResponseConstructorAllowed) {
-      throw new Error(
-        'Response object created outside of request context. This will be rejected by Cloudflare.'
-      );
-    }
-  }
-}
-
-const context = () =>
-  vm.createContext(
-    {
-      addEventListener: (a, fn) => {
-        if (a === 'fetch') {
-          console.log('addEventListeners: added fetch');
-          listeners.push(fn);
-        }
-      },
-      Response: SafeResponse,
-      URL: URL,
-      crypto: crypto,
-      setTimeout: setTimeout,
-      setInterval: setInterval,
-      clearInterval: clearInterval,
-      clearTimeout: clearTimeout,
-      fetch: fetch,
-      console: console,
-      ...workerShims,
-    },
-    {
-      codeGeneration: {
-        strings: false,
-        wasm: false,
-      },
-    }
-  );
-
-const server = http.createServer((req, res) => {
-  const event = {
-    respondWith: async (value) => {
-      const timeStart = Date.now();
-      let loggedStatus;
-      try {
-        const response = await value;
-        if (!response) {
-          throw new Error(`response was invalid, got ${JSON.stringify(response)}`);
-        }
-        res.statusCode = response.status;
-        loggedStatus = String(response.status);
-        response.headers.forEach((value, key) => res.setHeader(key, value));
-        res.end(response.body);
-      } catch (e) {
-        console.error(e);
-        res.statusCode = 500;
-        loggedStatus = '500';
-        res.end(JSON.stringify({ error: 'internal server error' }));
-      }
-      const timeEnd = Date.now();
-      console.log(
-        `${loggedStatus} [${timeEnd - timeStart}ms] - ${req.method} ${req.url}`
-      );
-      isResponseConstructorAllowed = false;
-    },
-    waitUntil: async (promise) => {
-      await promise;
-    },
-    request: new fetch.Request(
-      new URL(`http://${req.headers.host || 'localhost'}${req.url}`),
-      {
-        body: ['GET', 'HEAD'].includes(req.method) ? undefined : req,
-        headers: req.headers,
-        method: req.method,
-      }
-    ),
-  };
-
-  event.request.headers.set('cf-client-ip', req.connection.remoteAddress);
-
-  if (listeners.length === 0) {
-    res.statusCode = 503;
-    res.end('No handlers are available.');
-    console.error('No handlers are available');
-    return;
-  }
-
-  isResponseConstructorAllowed = true;
-  for (let listener of listeners) {
-    try {
-      listener(event);
-    } catch (e) {
-      console.error('listener errored', e);
-    }
-  }
-});
-
-const fork = async (fn) => fn();
-
-const reload = () => {
-  // Clear listeners...
-  listeners = [];
-
-  // Fork and re-run
-  fork(async () =>
-    vm.runInContext(
-      fs.readFileSync(path.resolve(__dirname, `${basePath}/dist/worker.js`)),
-      context(),
-      {
-        displayErrors: true,
-        filename: 'worker.js',
-      }
-    )
-  );
-};
-
-const rebuild = () =>
-  new Promise((resolve, reject) => {
-    const webpackConfig = require(`${basePath}/webpack.config.js`);
-    webpackConfig.output.filename = 'worker.js';
-    webpack(webpackConfig).run((err, stats) => {
-      if (err) {
-        console.log('Compilation failed.', err);
-        reject(err);
-      } else {
-        if (stats.hasErrors()) {
-          console.error('Compilation errored:', stats.compilation.errors);
-        }
-
-        console.log('Compilation done.');
-        resolve();
-      }
-    });
-  });
-
-const watcher = chokidar.watch(path.resolve(__dirname, basePath), {
-  ignoreInitial: true,
-  ignore: '**/dist',
-});
-
-let currentlyRebuilding = false;
-
-watcher.on('all', async (type, path) => {
-  if (path.includes('node_modules') || path.includes('dist')) {
-    return;
-  }
-
-  if (currentlyRebuilding) {
-    console.info('change skipped...', { type, path });
-    return;
-  }
-
-  currentlyRebuilding = true;
-
-  if (path.includes('dist')) {
-    return;
-  }
-
-  console.log('change detected, rebuilding and reloading', { type, path });
-
-  await rebuild();
-  reload();
-
-  currentlyRebuilding = false;
-});
-
-fork(async () => {
-  await rebuild();
-  reload();
-});
-
-const port = args.port || 6609;
-console.log(`starting on http://localhost:${port}`);
-server.listen(port, '0.0.0.0');

packages/backend-emulator/package.json

@@ -1,20 +0,0 @@
-{
-  "name": "@roleypoly/worker-emulator",
-  "version": "0.1.0",
-  "bin": {
-    "cfw-emulator": "./main.js"
-  },
-  "scripts": {
-    "build": "node main.js --build",
-    "start": "node main.js"
-  },
-  "devDependencies": {
-    "@peculiar/webcrypto": "^1.1.7",
-    "chokidar": "^3.5.2",
-    "dotenv": "^10.0.0",
-    "level": "^7.0.0",
-    "minimist": "^1.2.5",
-    "node-fetch": "^2.6.1",
-    "webpack": "4.44.2"
-  }
-}

packages/design-system/atoms/avatar/Avatar.styled.ts

@@ -16,7 +16,7 @@ export const Container = styled.div<ContainerProps>`
   color: ${palette.grey100};
   position: relative;
   background-color: ${palette.grey500};
-  font-weight: bold;
+  font-weight: 700;
   text-align: center;
   line-height: 1;
   overflow: hidden;
@@ -24,7 +24,7 @@ export const Container = styled.div<ContainerProps>`
   ${(props) =>
     props.deliberatelyEmpty &&
     css`
-      border: 4px solid rgba(0, 0, 0, 0.25);
+      border: 4px solid rgb(0 0 0 / 25%);
       background-color: ${palette.taupe400};
       color: ${palette.taupe600};
     `}

packages/design-system/atoms/button/Button.styled.ts

@@ -25,7 +25,7 @@ const base = css`
   background-color: ${palette.taupe300};
   color: ${palette.grey500};
   border-radius: 3px;
-  border: 2px solid rgba(0, 0, 0, 0.55);
+  border: 2px solid rgb(0 0 0 / 55%);
   transition: all 0.15s ease-in-out;
   outline: 0;
   position: relative;
@@ -41,20 +41,20 @@ const base = css`
     left: 0;
     right: 0;
     background-color: #000;
-    opacity: 0;
+    opacity: 0%;
     transition: all 0.15s ease-in-out;
   }
 
   :hover {
     transform: translateY(-1px);
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 1px 2px rgb(0 0 0 / 15%);
   }
 
   :active {
     transform: translateY(1px);
-    box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
+    box-shadow: 0 0 2px rgb(0 0 0 / 25%);
     ::after {
-      opacity: 0.1;
+      opacity: 10%;
     }
   }
 `;
@@ -70,7 +70,7 @@ const colors = {
     border: 2px solid ${palette.discord200};
   `,
   muted: css`
-    border: 2px solid rgba(0, 0, 0, 0.15);
+    border: 2px solid rgb(0 0 0 / 15%);
     background: none;
     :hover {
       background-color: ${palette.taupe200};

packages/design-system/atoms/colors/colors.stories.tsx

@@ -15,7 +15,7 @@ export default {
 };
 
 const Swatch = styled.div`
-  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
+  box-shadow: 1px 1px 2px rgb(0 0 0 / 25%);
   width: 250px;
   height: 100px;
   margin: 10px;

packages/design-system/atoms/dot-overlay/DotOverlay.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import styled from 'styled-components';
 
 const dotOverlayBase = styled.div`
-  opacity: 0.6;
+  opacity: 60%;
   pointer-events: none;
   position: fixed;
   top: 0;

packages/design-system/atoms/fader/Fader.tsx

@@ -7,7 +7,7 @@ export type FaderProps = {
 };
 
 const FaderOpacityStyled = styled.div<Pick<FaderProps, 'isVisible'>>`
-  opacity: ${(props) => (props.isVisible ? 1 : 0)};
+  opacity: ${(props) => (props.isVisible ? '100%' : '0%')};
   pointer-events: ${(props) => (props.isVisible ? 'unset' : 'none')};
   transition: opacity 0.35s ease-in-out;
 `;

packages/design-system/atoms/hero/Hero.stories.tsx

@@ -41,7 +41,7 @@ const StoryWrapper = ({ topSpacing, bottomSpacing, ...props }: WrapperProps) =>
       <div
         style={{
           height: topSpacing,
-          backgroundColor: 'rgba(255,0,0,0.25)',
+          backgroundColor: 'rgb(255 0 0 / 25%)',
           top: 0,
           left: 0,
           right: 0,
@@ -54,7 +54,7 @@ const StoryWrapper = ({ topSpacing, bottomSpacing, ...props }: WrapperProps) =>
       <div
         style={{
           height: bottomSpacing,
-          backgroundColor: 'rgba(0,0,255,0.25)',
+          backgroundColor: 'rgb(0 0 255 / 25%)',
           bottom: 0,
           left: 0,
           right: 0,

packages/design-system/atoms/placeholder/Placeholder.tsx

@@ -41,10 +41,10 @@ export const PlaceholderBox = styled.div<PlaceholderProps>`
 
 export const opacityInOut = keyframes`
   from {
-    opacity: 0.6;
+    opacity: 60%;
   } 
   to {
-    opacity: 0.3;
+    opacity: 30%;
   }
 `;
 

packages/design-system/atoms/popover/Popover.styled.ts

@@ -13,7 +13,7 @@ export const PopoverBase = styled.div<PopoverStyledProps>`
   position: absolute;
   background-color: ${palette.taupe100};
   padding: 5px;
-  border: 2px solid rgba(0, 0, 0, 0.15);
+  border: 2px solid rgb(0 0 0 / 15%);
   border-radius: 3px;
   z-index: 10;
   transition: opacity ${transitions.out2in}s ease-in,
@@ -24,7 +24,7 @@ export const PopoverBase = styled.div<PopoverStyledProps>`
     !props.active &&
     css`
       transform: translateY(-2vh);
-      opacity: 0;
+      opacity: 0%;
       pointer-events: none;
     `}
   ${onSmallScreen(
@@ -40,11 +40,11 @@ export const PopoverBase = styled.div<PopoverStyledProps>`
       z-index: 200;
       margin: 0 !important;
     `
-  )};
+  )}
 `;
 
 export const DefocusHandler = styled.div<PopoverStyledProps>`
-  background-color: rgba(0, 0, 0, 0.01);
+  background-color: rgb(0 0 0 / 1%);
   position: fixed;
   z-index: 0;
   top: 0;
@@ -82,7 +82,7 @@ export const PopoverHeadCloser = styled.div`
   )}
 
   &:hover {
-    background: rgba(0, 0, 0, 0.1);
+    background: rgb(0 0 0 / 10%);
   }
 `;
 

packages/design-system/atoms/role/Role.styled.tsx

@@ -62,7 +62,7 @@ export const Outer = styled.div<StyledProps>`
       ? onTablet(css`
           &:hover {
             transform: translateY(-2px);
-            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+            box-shadow: 0 1px 2px rgb(0 0 0 / 15%);
             ${Circle} svg {
               fill-opacity: 1;
             }
@@ -73,7 +73,7 @@ export const Outer = styled.div<StyledProps>`
             box-shadow: 0 0 0 transparent;
           }
         `)
-      : null};
+      : null}
 `;
 
 export const Text = styled.div`

packages/design-system/atoms/tab-view/TabView.styled.ts

@@ -65,7 +65,7 @@ export const TabContent = styled.div`
 export const TabContentTitle = styled.div`
   ${text500}
 
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  border-bottom: 1px solid rgb(0 0 0 / 10%);
   padding: 0.5em 7px;
 `;
 

packages/design-system/atoms/text-input/TextInput.tsx

@@ -21,13 +21,13 @@ const common = css`
   :focus {
     outline: none;
     border-color: ${palette.grey100};
-    box-shadow: 1px 0 3px rgba(0, 0, 0, 0.25);
+    box-shadow: 1px 0 3px rgb(0 0 0 / 25%);
   }
 
   [disabled],
   :disabled {
     cursor: not-allowed;
-    color: rgba(255, 255, 255, 0.75);
+    color: rgb(255 255 255 / 75%);
     font-style: italic;
   }
 
@@ -41,7 +41,7 @@ const common = css`
 `;
 
 export const StyledTextInput = styled.input`
-  ${common};
+  ${common}
 `;
 
 type TextInputProps<T extends HTMLInputElement | HTMLTextAreaElement> =
@@ -87,8 +87,8 @@ export const TextInputWithIcon = (props: TextInputWithIconProps) => {
 };
 
 const StyledTextarea = styled.textarea`
-  ${common};
+  ${common}
-  ${fontCSS};
+  ${fontCSS}
 
   margin: 0.5em 0;
 `;

packages/design-system/atoms/toggle/Toggle.styled.tsx

@@ -24,7 +24,7 @@ export const ToggleSwitch = styled.div<{ state: boolean }>`
   width: 2.675rem;
   border-radius: 1.375rem;
   position: relative;
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  border: 1px solid rgb(0 0 0 / 10%);
   top: 0.23em;
   transition: background-color ${transitions.in2in}s ease-in-out;
   cursor: pointer;

packages/design-system/atoms/typography/typography.stories.tsx

@@ -87,7 +87,7 @@ const SpacingHead = styled.p`
 
 const SpacingSection = styled(Section)`
   max-width: 50vw;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
+  border-bottom: 1px solid rgb(0 0 0 / 25%);
 `;
 
 export const Spacing = () => (

packages/design-system/atoms/typography/typography.tsx

@@ -14,55 +14,46 @@ const reset = css`
 
 export const text900 = css`
   ${reset}
-
   font-size: 2.3rem;
 `;
 
 export const text800 = css`
   ${reset}
-
   font-size: 2rem;
 `;
 
 export const text700 = css`
   ${reset}
-
   font-size: 1.7rem;
 `;
 
 export const text600 = css`
   ${reset}
-
   font-size: 1.4rem;
 `;
 
 export const text500 = css`
   ${reset}
-
   font-size: 1.2rem;
 `;
 
 export const text400 = css`
   ${reset}
-
   font-size: 1rem;
 `;
 
 export const text300 = css`
   ${reset}
-
   font-size: 0.9rem;
 `;
 
 export const text200 = css`
   ${reset}
-
   font-size: 0.7rem;
 `;
 
 export const text100 = css`
   ${reset}
-
   font-size: 0.5rem;
 `;
 

packages/design-system/jest.config.js

@@ -1,13 +1,13 @@
 module.exports = {
+  name: 'design-system',
   preset: 'ts-jest/presets/js-with-ts',
   testEnvironment: 'jsdom',
   reporters: ['default'],
-  setupFilesAfterEnv: ['jest-styled-components', './hack/jestSetup.ts'],
+  setupFilesAfterEnv: ['jest-styled-components', '../../hack/jestSetup.ts'],
   snapshotSerializers: ['enzyme-to-json/serializer'],
   globals: {
     'ts-jest': {
-      tsconfig: './tsconfig.test.json',
+      tsconfig: '../../tsconfig.test.json',
     },
   },
-  projects: ['packages/api/jest.config.js'],
 };

packages/design-system/molecules/demo-discord/DemoDiscord.styled.ts

@@ -3,7 +3,7 @@ import styled, { keyframes } from 'styled-components';
 
 export const Base = styled.div`
   background-color: ${palette.discord100};
-  border: solid 1px rgba(0, 0, 0, 0.15);
+  border: solid 1px rgb(0 0 0 / 15%);
   border-radius: 3px;
   padding: 10px;
   user-select: none;
@@ -12,7 +12,7 @@ export const Base = styled.div`
 export const Timestamp = styled.span`
   padding: 0 5px;
   font-size: 0.7em;
-  opacity: 0.3;
+  opacity: 30%;
 `;
 
 export const TextParts = styled.span`
@@ -35,19 +35,19 @@ export const InputBox = styled.div`
 
 const lineBlink = keyframes`
     0% {
-        opacity: 1;
+        opacity: 100%;
     }
 
     40% {
-        opacity: 1;
+        opacity: 100%;
     }
 
     60% {
-        opacity: 0;
+        opacity: 0%;
     }
 
     100% {
-        opacity: 0;
+        opacity: 0%;
     }
 `;
 

packages/design-system/molecules/demo-picker/DemoPicker.tsx

@@ -19,11 +19,9 @@ const RoleWrap = styled.div`
 `;
 
 export const DemoPicker = () => {
-  const [selectedStates, setSelectedStates] = React.useState<
+  const [selectedStates, setSelectedStates] = React.useState<{
-    {
+    [key in RPCRole['id']]: boolean;
-      [key in RPCRole['id']]: boolean;
+  }>(demoData.reduce((acc, role) => ({ ...acc, [role.id]: false }), {}));
-    }
-  >(demoData.reduce((acc, role) => ({ ...acc, [role.id]: false }), {}));
 
   return (
     <Container>

packages/design-system/molecules/editable-role-list/EditableRoleList.styled.ts

@@ -24,7 +24,7 @@ export const AddRoleButton = styled.div<{ long?: boolean }>`
   &:hover {
     background-color: ${palette.taupe100};
     transform: translateY(-2px);
-    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
   }
 
   &:active {
@@ -39,5 +39,5 @@ export const AddRoleButton = styled.div<{ long?: boolean }>`
         `
       : css`
           width: 32px;
-        `};
+        `}
 `;

packages/design-system/molecules/editor-category/EditorCategory.styled.ts

@@ -40,7 +40,7 @@ export const Section = styled.div<{ big?: boolean; actions?: boolean }>`
     props.actions &&
     css`
       display: flex;
-    `};
+    `}
 `;
 
 export const RoleContainer = styled.div`
@@ -65,7 +65,7 @@ export const AddRoleButton = styled.div<{ long?: boolean }>`
   &:hover {
     background-color: ${palette.taupe100};
     transform: translateY(-2px);
-    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
   }
 
   &:active {
@@ -80,5 +80,5 @@ export const AddRoleButton = styled.div<{ long?: boolean }>`
         `
       : css`
           width: 32px;
-        `};
+        `}
 `;

packages/design-system/molecules/footer/Footer.styled.ts

@@ -19,12 +19,12 @@ export const FooterWrapper = styled.div`
 `;
 
 export const HoverColor = styled.div`
-  opacity: 0.3;
+  opacity: 30%;
   filter: saturate(0);
   transition: all ${transitions.in2in}s ease-in-out;
 
   &:hover {
-    opacity: 1;
+    opacity: 100%;
     filter: none;
   }
 `;

packages/design-system/molecules/server-listing-card/ServerListingCard.styled.ts

@@ -75,11 +75,11 @@ export const CardBase = styled.div`
   box-sizing: border-box;
   max-width: 98vw;
   :hover {
-    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
+    box-shadow: 0 2px 2px rgb(0 0 0 / 25%);
     transform: translate(0, -1px);
   }
   :active {
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+    box-shadow: 0 1px 2px rgb(0 0 0 / 25%);
     transform: translate(0);
   }
 

packages/design-system/molecules/server-utilities/ServerUtilities.styled.ts

@@ -20,7 +20,7 @@ export const ClickaleBlock = styled.a`
 `;
 
 export const Title = styled.div`
-  ${text400};
+  ${text400}
 
   svg {
     color: ${palette.taupe500};
@@ -30,7 +30,7 @@ export const Title = styled.div`
 `;
 
 export const Description = styled.div`
-  ${text200};
+  ${text200}
 `;
 
 export const MainSide = styled.div``;

packages/design-system/organisms/help-why-no-roles/WhyNoRoles.styled.ts

@@ -6,7 +6,7 @@ import styled, { css, keyframes } from 'styled-components';
 
 export const DiscordBase = styled.div`
   background-color: ${palette.discord100};
-  border: solid 1px rgba(0, 0, 0, 0.15);
+  border: solid 1px rgb(0 0 0 / 15%);
   border-radius: 3px;
   padding: 10px;
   user-select: none;
@@ -54,7 +54,7 @@ export const DiscordRole = styled.div<{
     !props.isGood &&
     props.isRoleypoly &&
     css`
-      animation: ${isBadFlash} 0.5s 10s ease-in-out both;
+      animation: ${isBadFlash.getName()} 0.5s 10s ease-in-out both;
     `}
 `;
 
@@ -66,16 +66,13 @@ const bumpDown = css`
 
 export const Dont = styled(GoX)`
   ${bumpDown}
-
   color: ${palette.red400};
 `;
 export const Do = styled(GoCheck)`
   ${bumpDown}
-
   color: ${palette.green400};
 `;
 export const Why = styled(GoQuestion)`
   ${bumpDown}
-
   color: ${palette.discord400};
 `;

packages/design-system/organisms/landing/Landing.styled.ts

@@ -10,7 +10,6 @@ export const HeroText = styled.div`
 
 export const DemoSubtitle = styled.p`
   ${text400}
-
   text-align: center;
   margin-top: 0.4em;
 `;

packages/design-system/organisms/masthead/Masthead.styled.tsx

@@ -59,10 +59,10 @@ export const InteractionBase = styled.div<InteractionBaseProps>`
   padding: 0 5px;
   transition: opacity ${transitions.actionable}s ease-in-out,
     background-color ${transitions.actionable}s ease-in-out;
-  opacity: ${(props) => (props.hide ? 1 : 0)};
+  opacity: ${(props) => (props.hide ? '100%' : '0%')};
 
   :hover {
-    background-color: rgba(0, 0, 0, 0.15);
+    background-color: rgb(0 0 0 / 15%);
     cursor: pointer;
   }
 `;
@@ -97,7 +97,7 @@ export const SecondaryBase = styled(MastheadBase)`
   background-color: ${palette.taupe300};
   z-index: 99;
   padding: 0 15px;
-  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: 1px 1px 3px rgb(0 0 0 / 5%);
 `;
 
 export const IconHolder = styled.div`

packages/design-system/organisms/server-category-editor/ServerCategoryEditor.styled.ts

@@ -14,7 +14,7 @@ export const CategoryActions = styled.div<{ right?: boolean }>`
           `
         : css`
             margin-right: 5px;
-          `};
+          `}
   }
 
   ${(props) =>
@@ -37,7 +37,7 @@ export const ReorderButton = styled.div`
   transition: background-color ${transitions.actionable}s ease-in-out;
 
   &:hover {
-    background-color: rgba(0, 0, 0, 0.15);
+    background-color: rgb(0 0 0 / 15%);
   }
 `;
 

packages/design-system/organisms/server-setup/ServerSetup.styled.ts

@@ -9,6 +9,5 @@ export const FlexLine = styled.div`
 
 export const FlexWrap = styled.div`
   display: flex;
-  flex-direction: column;
+  flex-flow: wrap column;
-  flex-wrap: wrap;
 `;

packages/design-system/organisms/servers-listing/ServersListing.styled.ts

@@ -26,7 +26,6 @@ export const CardContainer = styled.div`
 
 export const SectionHead = styled.div`
   ${text500}
-
   flex: 1 1 100%;
   padding: 0.6em;
   display: flex;

packages/design-system/package.json

@@ -4,45 +4,46 @@
   "scripts": {
     "build": "build-storybook -o ../../dist/-/storybook",
     "create-component": "node ./hack/create-component.js",
-    "start": "start-storybook -p 6006"
+    "start": "start-storybook -p 6006",
+    "test": "jest"
   },
   "dependencies": {
     "@roleypoly/types": "*",
-    "chroma-js": "^2.1.2",
+    "chroma-js": "^2.3.0",
     "deep-equal": "^2.0.5",
     "isomorphic-unfetch": "^3.1.0",
-    "ksuid": "^2.0.0",
+    "ksuid": "^3.0.0",
     "lodash": "^4.17.21",
     "react": "^17.0.2",
     "react-beautiful-dnd": "^13.1.0",
     "react-custom-scrollbars": "^4.2.1",
     "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
-    "react-icons": "^4.2.0",
+    "react-icons": "^4.3.1",
     "react-is": "^17.0.2",
     "react-tooltip": "^4.2.21",
-    "styled-components": "^5.3.0",
+    "styled-components": "^5.3.3",
     "styled-normalize": "^8.0.7"
   },
   "devDependencies": {
     "@icons/material": "^0.4.1",
-    "@storybook/addon-actions": "^6.3.3",
+    "@storybook/addon-actions": "^6.4.16",
-    "@storybook/addon-essentials": "^6.3.3",
+    "@storybook/addon-essentials": "^6.4.16",
-    "@storybook/addon-links": "^6.3.3",
+    "@storybook/addon-links": "^6.4.16",
-    "@storybook/addons": "^6.3.3",
+    "@storybook/addons": "^6.4.16",
-    "@storybook/react": "^6.3.3",
+    "@storybook/react": "^6.4.16",
-    "@storybook/theming": "^6.3.3",
+    "@storybook/theming": "^6.4.16",
     "@types/chroma-js": "^2.1.3",
     "@types/deep-equal": "^1.0.1",
-    "@types/node": "^16.0.1",
+    "@types/node": "^17.0.13",
-    "@types/react": "^17.0.14",
+    "@types/react": "^17.0.38",
-    "@types/react-beautiful-dnd": "^13.1.1",
+    "@types/react-beautiful-dnd": "^13.1.2",
-    "@types/react-custom-scrollbars": "^4.0.8",
+    "@types/react-custom-scrollbars": "^4.0.10",
-    "@types/react-dom": "^17.0.9",
+    "@types/react-dom": "^17.0.11",
-    "@types/react-helmet": "^6.1.2",
+    "@types/react-helmet": "^6.1.5",
-    "@types/styled-components": "^5.1.11",
+    "@types/styled-components": "^5.1.21",
-    "babel-loader": "8.1.0",
+    "babel-loader": "^8.2.3",
-    "babel-plugin-styled-components": "^1.13.1",
+    "babel-plugin-styled-components": "^2.0.2",
     "change-case": "^4.1.2",
     "tslint": "^6.1.3",
     "typescript": "^4.5.5"

packages/misc-utils/jest.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  name: 'web',
+  preset: 'ts-jest/presets/js-with-ts',
+  testEnvironment: 'jsdom',
+  reporters: ['default'],
+  setupFilesAfterEnv: ['jest-styled-components', '../../hack/jestSetup.ts'],
+  snapshotSerializers: ['enzyme-to-json/serializer'],
+  globals: {
+    'ts-jest': {
+      tsconfig: '../../tsconfig.test.json',
+    },
+  },
+};

packages/misc-utils/package.json

@@ -1,6 +1,9 @@
 {
   "name": "@roleypoly/misc-utils",
   "version": "0.1.0",
+  "scripts": {
+    "test": "jest"
+  },
   "dependencies": {
     "@roleypoly/types": "*"
   },

packages/web/jest.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  name: 'web',
+  preset: 'ts-jest/presets/js-with-ts',
+  testEnvironment: 'jsdom',
+  reporters: ['default'],
+  setupFilesAfterEnv: ['jest-styled-components', '../../hack/jestSetup.ts'],
+  snapshotSerializers: ['enzyme-to-json/serializer'],
+  globals: {
+    'ts-jest': {
+      tsconfig: '../../tsconfig.test.json',
+    },
+  },
+};

packages/web/package.json

@@ -5,13 +5,13 @@
   "scripts": {
     "build": "cross-env BUILD_PATH=../../dist craco build",
     "start": "cross-env PORT=6601 craco start",
-    "test": "craco test"
+    "test": "jest"
   },
   "dependencies": {
     "@reach/router": "^1.3.4",
     "@roleypoly/design-system": "*",
     "@roleypoly/misc-utils": "*",
-    "memoize-one": "^5.2.1",
+    "memoize-one": "^6.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
@@ -20,21 +20,21 @@
     "web-vitals": "^2.1.4"
   },
   "devDependencies": {
-    "@plpaquin/craco": "5.0.0-next.1",
+    "@craco/craco": "^7.0.0-alpha.0",
     "@roleypoly/types": "*",
-    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/jest-dom": "^5.16.1",
-    "@testing-library/react": "^12.0.0",
+    "@testing-library/react": "^12.1.2",
-    "@testing-library/user-event": "^13.1.9",
+    "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^26.0.24",
+    "@types/jest": "^27.4.0",
-    "@types/node": "^16.0.1",
+    "@types/node": "^17.0.13",
-    "@types/react": "^17.0.14",
+    "@types/reach__router": "^1.3.10",
-    "@types/react-dom": "^17.0.9",
+    "@types/react": "^17.0.38",
-    "@types/react-helmet": "^6.1.2",
+    "@types/react-dom": "^17.0.11",
-    "babel-loader": "8.1.0",
+    "@types/react-helmet": "^6.1.5",
+    "babel-loader": "8.2.3",
     "cross-env": "7.0.3",
-    "exponential-backoff": "^3.1.0",
+    "ts-loader": "^9.2.6",
-    "ts-loader": "^8.3.0",
+    "webpack": "5.67.0"
-    "webpack": "4.44.2"
   },
   "browserslist": {
     "production": [