redesign

Upgrading all libraries fixed the error (ref.current is read-only)

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,8 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Feature Request
+    url: https://github.com/JordanKnott/taskcafe/discussions/new?category=ideas
+    about: Share ideas for new features
+  - name: Ask a Question
+    url: https://github.com/JordanKnott/taskcafe/discussions/new?category=q-a
+    about: Ask the community for help

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,30 +0,0 @@
----
-name: Feature request
-about: Create a feature request to help improve Taskcafe
-title: ""
-labels: ""
-assignees: ""
----
-
-**Is your feature request related to a problem? Please describe.**
-A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
-
-**Describe the solution you'd like**
-A clear and concise description of what you want to happen.
-
-**Describe alternatives you've considered**
-A clear and concise description of any alternative solutions or features you've considered.
-
-**Additional context**
-Add any other context or screenshots about the feature request here.
-
-<!--
-
-Be aware, not all feature requests will get accepted.
-
-Please read the contributing guide before working on any new pull requests!
-
-If you would like to ask a question regarding a possible bug or feature request, please
-join the Taskcafe discord - https://discord.gg/JkQDruh
-
--->

.gitignore

@@ -6,3 +6,5 @@ internal/frontend/frontend_generated.go
 internal/migrations/migrations_generated.go
 taskcafe
 conf/taskcafe.toml
+scripts/gqlgen
+scripts/sqlc

.tmuxinator.yml

@@ -10,6 +10,8 @@ windows:
         - yarn:
           - cd frontend
           - yarn start
+        - worker:
+          - go run cmd/taskcafe/main.go worker
   - web/editor:
       root: ./frontend
       panes:
@@ -21,4 +23,4 @@ windows:
   - database:
       root: ./
       panes:
-        - pgcli postgres://taskcafe:taskcafe_test@localhost:5432/taskcafe
+        - pgcli postgres://taskcafe:taskcafe_test@localhost:8855/taskcafe

CHANGELOG.md

@@ -4,17 +4,26 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [Unreleased]
+## UNRELEASED
 
 ### Added
-- Task sorting & filtering
-- Redesigned the Task Details UI
-- Implement task group actions (duplicate/delete all tasks/sort)
+- On login page, redirects to `/register` if no users exist (to help streamline initial setup)
 
 ### Fixed
-- removed CORS middleware to fix security issue
-- Added 3 retries with backoff to initial database connection [(#47)](https://github.com/JordanKnott/taskcafe/issues/47)
-- Can now actually set a due date
+- Fixes new user popup form so that it can now be submitted
+
+## [0.3.5] - 2021-09-04
+
+### Added
+- Project visibility can now be set to public - meaning anyone can view the project board
+- When redirected to login page while trying to view a page that requires login, you'll be redirected back to the correct page after login
+- When creating a new label within the LabelManager on a card, the new label will automatically be applied to the task after creation
+
+### Changed
+- Switch primary font to Open Sans
+
+### Fixed
+- Any open popups are hidden when closing the Task Details window
 
 ## [0.1.1] - 2020-08-21
 

CONTRIBUTING.md

@@ -6,7 +6,9 @@ Thanks for wanting to contribute to Taskcafe!
 
 So you want to contribute to Taskcafe? Great!
 
-If you have noticed a bug or want to add a new feature, please [create an issue](https://github.com/JordanKnott/taskcafe/issues/new/choose) for it before starting any work on a pull request.
+If you have noticed a bug, please [create an issue](https://github.com/JordanKnott/taskcafe/issues/new/choose) for it before starting any work on a pull request.
+
+If there is a [new feature you'd like added](https://github.com/JordanKnott/taskcafe/discussions/new?category=ideas) or [have a question](https://github.com/JordanKnott/taskcafe/discussions/new?category=q-a), please visit the [discussions section](https://github.com/JordanKnott/taskcafe/discussions)
 
 Alternatively you can join the [Taskcafe discord](https://discord.gg/JkQDruh) and ask in the #questions channel.
 

Pipfile

@@ -1,12 +0,0 @@
-[[source]]
-name = "pypi"
-url = "https://pypi.org/simple"
-verify_ssl = true
-
-[dev-packages]
-
-[packages]
-pre-commit = "*"
-
-[requires]
-python_version = "3.8"

Pipfile.lock

@@ -1,111 +0,0 @@
-{
-    "_meta": {
-        "hash": {
-            "sha256": "83ec7c0175ee9763b335b1855d3d226b2fe799fcd4cafd8e08eb7294cb5ddd07"
-        },
-        "pipfile-spec": 6,
-        "requires": {
-            "python_version": "3.8"
-        },
-        "sources": [
-            {
-                "name": "pypi",
-                "url": "https://pypi.org/simple",
-                "verify_ssl": true
-            }
-        ]
-    },
-    "default": {
-        "appdirs": {
-            "hashes": [
-                "sha256:7d5d0167b2b1ba821647616af46a749d1c653740dd0d2415100fe26e27afdf41",
-                "sha256:a841dacd6b99318a741b166adb07e19ee71a274450e68237b4650ca1055ab128"
-            ],
-            "version": "==1.4.4"
-        },
-        "cfgv": {
-            "hashes": [
-                "sha256:32e43d604bbe7896fe7c248a9c2276447dbef840feb28fe20494f62af110211d",
-                "sha256:cf22deb93d4bcf92f345a5c3cd39d3d41d6340adc60c78bbbd6588c384fda6a1"
-            ],
-            "markers": "python_full_version >= '3.6.1'",
-            "version": "==3.2.0"
-        },
-        "distlib": {
-            "hashes": [
-                "sha256:8c09de2c67b3e7deef7184574fc060ab8a793e7adbb183d942c389c8b13c52fb",
-                "sha256:edf6116872c863e1aa9d5bb7cb5e05a022c519a4594dc703843343a9ddd9bff1"
-            ],
-            "version": "==0.3.1"
-        },
-        "filelock": {
-            "hashes": [
-                "sha256:18d82244ee114f543149c66a6e0c14e9c4f8a1044b5cdaadd0f82159d6a6ff59",
-                "sha256:929b7d63ec5b7d6b71b0fa5ac14e030b3f70b75747cef1b10da9b879fef15836"
-            ],
-            "version": "==3.0.12"
-        },
-        "identify": {
-            "hashes": [
-                "sha256:69c4769f085badafd0e04b1763e847258cbbf6d898e8678ebffc91abdb86f6c6",
-                "sha256:d6ae6daee50ba1b493e9ca4d36a5edd55905d2cf43548fdc20b2a14edef102e7"
-            ],
-            "markers": "python_version >= '2.7' and python_version not in '3.0, 3.1, 3.2, 3.3'",
-            "version": "==1.4.28"
-        },
-        "nodeenv": {
-            "hashes": [
-                "sha256:4b0b77afa3ba9b54f4b6396e60b0c83f59eaeb2d63dc3cc7a70f7f4af96c82bc"
-            ],
-            "version": "==1.4.0"
-        },
-        "pre-commit": {
-            "hashes": [
-                "sha256:1657663fdd63a321a4a739915d7d03baedd555b25054449090f97bb0cb30a915",
-                "sha256:e8b1315c585052e729ab7e99dcca5698266bedce9067d21dc909c23e3ceed626"
-            ],
-            "index": "pypi",
-            "version": "==2.6.0"
-        },
-        "pyyaml": {
-            "hashes": [
-                "sha256:06a0d7ba600ce0b2d2fe2e78453a470b5a6e000a985dd4a4e54e436cc36b0e97",
-                "sha256:240097ff019d7c70a4922b6869d8a86407758333f02203e0fc6ff79c5dcede76",
-                "sha256:4f4b913ca1a7319b33cfb1369e91e50354d6f07a135f3b901aca02aa95940bd2",
-                "sha256:69f00dca373f240f842b2931fb2c7e14ddbacd1397d57157a9b005a6a9942648",
-                "sha256:73f099454b799e05e5ab51423c7bcf361c58d3206fa7b0d555426b1f4d9a3eaf",
-                "sha256:74809a57b329d6cc0fdccee6318f44b9b8649961fa73144a98735b0aaf029f1f",
-                "sha256:7739fc0fa8205b3ee8808aea45e968bc90082c10aef6ea95e855e10abf4a37b2",
-                "sha256:95f71d2af0ff4227885f7a6605c37fd53d3a106fcab511b8860ecca9fcf400ee",
-                "sha256:b8eac752c5e14d3eca0e6dd9199cd627518cb5ec06add0de9d32baeee6fe645d",
-                "sha256:cc8955cfbfc7a115fa81d85284ee61147059a753344bc51098f3ccd69b0d7e0c",
-                "sha256:d13155f591e6fcc1ec3b30685d50bf0711574e2c0dfffd7644babf8b5102ca1a"
-            ],
-            "version": "==5.3.1"
-        },
-        "six": {
-            "hashes": [
-                "sha256:30639c035cdb23534cd4aa2dd52c3bf48f06e5f4a941509c8bafd8ce11080259",
-                "sha256:8b74bedcbbbaca38ff6d7491d76f2b06b3592611af620f8426e82dddb04a5ced"
-            ],
-            "markers": "python_version >= '2.7' and python_version not in '3.0, 3.1, 3.2'",
-            "version": "==1.15.0"
-        },
-        "toml": {
-            "hashes": [
-                "sha256:926b612be1e5ce0634a2ca03470f95169cf16f939018233a670519cb4ac58b0f",
-                "sha256:bda89d5935c2eac546d648028b9901107a595863cb36bae0c73ac804a9b4ce88"
-            ],
-            "version": "==0.10.1"
-        },
-        "virtualenv": {
-            "hashes": [
-                "sha256:43add625c53c596d38f971a465553f6318decc39d98512bc100fa1b1e839c8dc",
-                "sha256:e0305af10299a7fb0d69393d8f04cb2965dda9351140d11ac8db4e5e3970451b"
-            ],
-            "markers": "python_version >= '2.7' and python_version not in '3.0, 3.1, 3.2, 3.3'",
-            "version": "==20.0.31"
-        }
-    },
-    "develop": {}
-}

README.md

@@ -18,27 +18,34 @@
     <img alt="Docker pulls" src="https://img.shields.io/docker/pulls/taskcafe/taskcafe" />
   </a>
 </p>
+
+  <p align="center">
+    <a href="https://github.com/JordanKnott/taskcafe/issues/new?assignees=&labels=&template=bug_report.md&title=">Report Bug</a>
+    ·
+    <a href="https://github.com/JordanKnott/taskcafe/discussions/new?category=ideas">Request Feature</a>
+     ·
+    <a href="https://github.com/JordanKnott/taskcafe/discussions/new?category=q-a">Ask a Question</a>
+  </p>
 <p align="center">
 Was this project useful? Please consider <a href="https://www.buymeacoffee.com/jordanknott">donating</a> to help me improve it!
 </p>
-
-**Please note that this project is still in active development. Some options may not work yet! For updates on development, join the Discord server**
+<p align="center">
+ This project is still in <strong>alpha development</strong></p>
 
 ![Taskcafe](./.github/taskcafe_preview.png)
 
 ## Features
 
-Currently Taskcafe only offers basic task tracking through a Kanban board.
+The following features have been implemented:
 
-Currently you can do the following to tasks:
+- Manage tasks through a Kanban board interface (set due dates, labels, add checklists)
+- View all your current assigned tasks through the My Tasks view
+- Personal projects
+- Task comments and activity
 
-- Task sorting & filtering
-- Add colors & named labels
-- Add due dates
-- Descriptions written in Markdown
-- Assign members
-- Checklists
-- Mark tasks as complete
+This project is still in active development, so some options may not be fully implemented yet.
+
+**For updates on development, join the [Discord server](https://discord.gg/JkQDruh).**
 
 For a list of planned features, check out the [Roadmap](https://github.com/JordanKnott/taskcafe/wiki/Roadmap)!
 

cmd/mage/main.go

@@ -1,3 +1,4 @@
+//go:build ignore
 // +build ignore
 
 package main
@@ -8,4 +9,6 @@ import (
 	"github.com/magefile/mage/mage"
 )
 
-func main() { os.Exit(mage.Main()) }
+func main() {
+	os.Exit(mage.Main())
+}

cmd/taskcafe/main.go

@@ -1,10 +1,9 @@
 package main
 
 import (
-	"github.com/jordanknott/taskcafe/internal/commands"
-	_ "github.com/lib/pq"
+	"github.com/jordanknott/taskcafe/internal/command"
 )
 
 func main() {
-	commands.Execute()
+	command.Execute()
 }

conf/air.toml

@@ -1,47 +0,0 @@
-# Config file for [Air](https://github.com/cosmtrek/air) in TOML format
-
-# Working directory
-# . or absolute path, please note that the directories following must be under root.
-root = "."
-tmp_dir = "tmp"
-
-[build]
-# Just plain old shell command. You could use `make` as well.
-cmd = "go build -o ./dist/taskcafe cmd/taskcafe/main.go"
-# Binary file yields from `cmd`.
-bin = "dist/taskcafe"
-# Customize binary.
-full_bin = "./dist/taskcafe web"
-# Watch these filename extensions.
-include_ext = ["go"]
-# Ignore these filename extensions or directories.
-exclude_dir = ["dist", "frontend"]
-# Watch these directories if you specified.
-include_dir = []
-# Exclude files.
-exclude_file = []
-# This log file places in your tmp_dir.
-log = "air.log"
-# It's not necessary to trigger build each time file changes if it's too frequent.
-delay = 1000 # ms
-# Stop running old binary when build errors occur.
-stop_on_error = true
-# Send Interrupt signal before killing process (windows does not support this feature)
-send_interrupt = false
-# Delay after sending Interrupt signal
-kill_delay = 500 # ms
-
-[log]
-# Show log time
-time = false
-
-[color]
-# Customize each part's color. If no color found, use the raw app log.
-main = "magenta"
-watcher = "cyan"
-build = "yellow"
-runner = "green"
-
-[misc]
-# Delete tmp directory on exit
-clean_on_exit = true

conf/taskcafe.example.toml

@@ -1,24 +0,0 @@
-[server]
-hostname = '0.0.0.0:3333'
-
-[email_notifications]
-enabled = true
-display_name = "No Reply"
-from_address = "example.com"
-
-[storage]
-storage_system = 'local_storage'
-upload_dir_path = 'uploads'
-
-[database]
-host = 'postgres'
-name = 'taskcafe'
-user = 'taskcafe'
-password = 'taskcafe_test'
-
-[smtp]
-username = 'admin@example.com'
-password = 'example'
-server = 'mail.example.com'
-port = 465
-connection_security = 'STARTTLS'

docker-compose.dev.yml

@@ -2,39 +2,30 @@ version: "3"
 services:
   postgres:
     image: postgres:12.3-alpine
-    restart: always
     networks:
-      - taskcafe-test
+      - taskcafe-dev
     environment:
       POSTGRES_USER: taskcafe
-      POSTGRES_PASSWORD: taskcafe_test
+      POSTGRES_PASSWORD: taskcafe_dev
       POSTGRES_DB: taskcafe
     volumes:
-      - taskcafe-postgres:/var/lib/postgresql/data
+      - taskcafe-dev-postgres:/var/lib/postgresql/data
     ports:
-      - 8855:5432
+      - 5433:5432
   mailhog:
     image: mailhog/mailhog:latest
-    restart: always
     ports:
-      - 1025:1025
-      - 8025:8025
-  broker:
-    image: rabbitmq:3-management
-    restart: always
+      - 1026:1025
+      - 8026:8025
+  redis:
+    image: redis:6.2
     ports:
-      - 8060:15672
-      - 5672:5672
-  result_store:
-    image: memcached:1.6-alpine
-    restart: always
-    ports:
-      - 11211:11211
+      - 6380:6379
 
 volumes:
-  taskcafe-postgres:
+  taskcafe-dev-postgres:
     external: false
 
 networks:
-  taskcafe-test:
+  taskcafe-dev:
     driver: bridge

docker-compose.migrate.yml

@@ -1,12 +0,0 @@
-version: '3'
-
-services:
-  migrate:
-    build: .
-    entrypoint: ./taskcafe migrate
-    volumes:
-      - ./migrations:/root/migrations
-    depends_on:
-      - postgres
-    networks:
-      - taskcafe-test

docker-compose.yml

@@ -1,33 +0,0 @@
-version: "3"
-services:
-  web:
-    image: taskcafe/taskcafe:latest
-    # build: .
-    ports:
-      - "3333:3333"
-    depends_on:
-      - postgres
-    networks:
-      - taskcafe-test
-    environment:
-      TASKCAFE_DATABASE_HOST: postgres
-      TASKCAFE_MIGRATE: "true"
-  postgres:
-    image: postgres:12.3-alpine
-    restart: always
-    networks:
-      - taskcafe-test
-    environment:
-      POSTGRES_USER: taskcafe
-      POSTGRES_PASSWORD: taskcafe_test
-      POSTGRES_DB: taskcafe
-    volumes:
-    - taskcafe-postgres:/var/lib/postgresql/data
-
-volumes:
-  taskcafe-postgres:
-    external: false
-
-networks:
-  taskcafe-test:
-    driver: bridge

frontend/.editorconfig

@@ -1,13 +0,0 @@
-root = true
-
-[*]
-end_of_line = lf
-indent_style = space
-indent_size = 2
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[Makefile]
-indent_style = tab
-indent_size = 2

frontend/.eslintignore

@@ -1,3 +0,0 @@
-src/shared/generated/*.tsx
-src/shared/generated/*.ts
-src/react-app-env.d.ts

frontend/.eslintrc.json

@@ -21,18 +21,27 @@
     "airbnb",
     "plugin:prettier/recommended",
     "plugin:@typescript-eslint/eslint-recommended",
-    "plugin:@typescript-eslint/recommended"
+    "plugin:@typescript-eslint/recommended",
+    "plugin:storybook/recommended"
   ],
   "rules": {
-    "prettier/prettier": "error",
+    "prettier/prettier": "warn",
+    "no-shadow": "off",
     "no-restricted-syntax": ["error", "LabeledStatement", "WithStatement"],
     "@typescript-eslint/explicit-function-return-type": "off",
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/no-unused-vars": "off",
-    "react/jsx-filename-extension": [2, { "extensions": [".js", ".jsx", ".ts", ".tsx"] }],
+    "react/jsx-filename-extension": [
+      2,
+      {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      }
+    ],
+    "react/require-default-props": "off",
     "no-case-declarations": "off",
     "no-plusplus": "off",
     "react/prop-types": 0,
+    "react/no-unused-prop-types": "off",
     "no-continue": "off",
     "react/jsx-props-no-spreading": "off",
     "no-param-reassign": "off",
@@ -47,10 +56,15 @@
         "tsx": "never"
       }
     ],
+    "import/prefer-default-export": "off",
+    "no-use-before-define": "off",
+    "react/no-unescaped-entities": "off",
+    "import/no-unresolved": "off",
+    "@typescript-eslint/no-use-before-define": ["error"],
     "import/no-extraneous-dependencies": [
       "error",
       {
-        "devDependencies": [".storybook/**", "src/shared/components/**/*.stories.tsx"]
+        "devDependencies": ["src/stories/**", "src/shared/components/**/*.stories.tsx", "**/*.stories.tsx"]
       }
     ]
   },

frontend/.gitignore

@@ -18,7 +18,6 @@
 .env.test.local
 .env.production.local
 
-report*
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

frontend/.storybook/main.js

@@ -1,18 +1,15 @@
-const path = require('path');
-
 module.exports = {
-  stories: ['../src/shared/components/**/*.stories.tsx'],
-  addons: [
-    '@storybook/addon-actions/register',
-    '@storybook/addon-links',
-    '@storybook/addon-storysource',
-    '@storybook/addon-knobs/register',
-    '@storybook/addon-docs/register',
-    '@storybook/addon-viewport/register',
-    '@storybook/addon-backgrounds/register',
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
   ],
-  webpackFinal: async config => {
-    config.resolve.modules.push(path.resolve(__dirname, '../src'));
-    return config;
-  },
-};
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/preset-create-react-app"
+  ],
+  "framework": "@storybook/react",
+  "core": {
+    "builder": "webpack5"
+  }
+}

frontend/.storybook/preview-head.html

@@ -0,0 +1,6 @@
+<style>
+  @font-face {
+    font-family: 'Open Sans';
+    src: url(/assets/fonts/OpenSans-Regular.ttf) format('truetype');
+  }
+</style>

frontend/.storybook/preview.js

@@ -0,0 +1,47 @@
+import BaseStyles from 'app/BaseStyles';
+import NormalizeStyles from 'app/NormalizeStyles';
+import themes from 'app/ThemeStyles';
+import { MemoryRouter } from 'react-router-dom';
+import { ThemeProvider } from 'styled-components';
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};
+
+export const globalTypes = {
+  theme: {
+    name: 'Theme',
+    description: 'Global theme for components',
+    defaultValue: 'darkTheme',
+    toolbar: {
+      icon: 'circlehollow',
+      // Array of plain string values or MenuItem shape (see below)
+      items: ['lightTheme', 'darkTheme'],
+      // Property that specifies if the name of the item will be displayed
+      showName: true,
+    },
+  },
+};
+
+export const decorators = [
+  (Story, context) => {
+    const theme = themes[context.globals.theme];
+    return (
+      <>
+        <ThemeProvider theme={theme}>
+          <BaseStyles />
+          <NormalizeStyles />
+          <MemoryRouter>
+            <Story />
+          </MemoryRouter>
+        </ThemeProvider>
+      </>
+    );
+  },
+];

frontend/Makefile

@@ -1,3 +0,0 @@
-
-start:
-	yarn start

frontend/README.md

@@ -0,0 +1,46 @@
+# Getting Started with Create React App
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.\
+You will also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+
+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).

frontend/codegen.yml

@@ -1,18 +0,0 @@
-overwrite: true
-schema:
-  - '../internal/graph/schema.graphqls'
-documents:
-  - 'src/shared/graphql/*.graphqls'
-  - 'src/shared/graphql/**/*.ts'
-generates:
-  src/shared/generated/graphql.tsx:
-    plugins:
-      - 'typescript'
-      - 'typescript-operations'
-      - 'typescript-react-apollo'
-    config:
-      withHOC: false
-      withComponent: false
-      withHooks: true
-      scalars:
-        UUID: string

frontend/package.json

@@ -1,79 +1,44 @@
 {
-  "name": "app",
+  "name": "frontend",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@apollo/client": "^3.0.0-rc.8",
-    "@apollo/react-common": "^3.1.4",
-    "@apollo/react-hooks": "^3.1.3",
-    "@types/axios": "^0.14.0",
-    "@types/color": "^3.0.1",
-    "@types/date-fns": "^2.6.0",
-    "@types/jest": "^24.0.0",
-    "@types/jwt-decode": "^2.2.1",
-    "@types/lodash": "^4.14.149",
-    "@types/node": "^12.0.0",
-    "@types/query-string": "^6.3.0",
-    "@types/react": "^16.9.21",
-    "@types/react-beautiful-dnd": "^12.1.1",
-    "@types/react-datepicker": "^2.11.0",
-    "@types/react-dom": "^16.9.5",
-    "@types/react-router": "^5.1.4",
-    "@types/react-router-dom": "^5.1.3",
-    "@types/react-select": "^3.0.13",
-    "@types/react-timeago": "^4.1.1",
-    "@types/styled-components": "^5.0.0",
-    "apollo-cache-inmemory": "^1.6.5",
-    "apollo-client": "^2.6.8",
-    "apollo-link": "^1.2.13",
-    "apollo-link-error": "^1.1.12",
-    "apollo-link-http": "^1.5.16",
-    "apollo-link-state": "^0.4.2",
-    "apollo-utilities": "^1.3.3",
-    "axios": "^0.19.2",
-    "axios-auth-refresh": "^2.2.7",
-    "color": "^3.1.2",
-    "date-fns": "^2.14.0",
-    "dayjs": "^1.9.1",
-    "graphql": "^15.0.0",
-    "graphql-tag": "^2.10.3",
-    "history": "^4.10.1",
-    "immer": "^6.0.3",
-    "jwt-decode": "^2.2.0",
-    "lodash": "^4.17.20",
-    "prop-types": "^15.7.2",
-    "query-string": "^6.13.7",
-    "react": "^16.12.0",
-    "react-autosize-textarea": "^7.0.0",
-    "react-beautiful-dnd": "^13.0.0",
-    "react-datepicker": "^2.14.1",
-    "react-dom": "^16.12.0",
-    "react-hook-form": "^6.0.6",
-    "react-markdown": "^4.3.1",
-    "react-router": "^5.1.2",
-    "react-router-dom": "^5.1.2",
-    "react-scripts": "3.4.0",
-    "react-select": "^3.1.0",
-    "react-timeago": "^4.4.0",
-    "react-toastify": "^6.0.8",
-    "rich-markdown-editor": "^10.6.5",
-    "styled-components": "^5.0.1",
-    "typescript": "~3.7.2"
+    "@testing-library/jest-dom": "^5.16.2",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/user-event": "^13.5.0",
+    "color": "^4.2.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-hook-form": "^7.25.3",
+    "react-router": "^6.2.1",
+    "react-router-dom": "^6.2.1",
+    "react-scripts": "5.0.0",
+    "styled-components": "^5.3.3",
+    "typescript": "^4.5.5"
   },
-  "proxy": "http://localhost:3333",
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "storybook": "start-storybook -p 9009 -s public",
-    "build-storybook": "build-storybook -s public",
-    "generate": "graphql-codegen",
-    "lint": "eslint --ext js,ts,tsx src",
-    "tsc": "tsc"
+    "storybook": "start-storybook -p 6006 -s public",
+    "build-storybook": "build-storybook -s public"
   },
   "eslintConfig": {
-    "extends": "react-app"
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ],
+    "overrides": [
+      {
+        "files": [
+          "**/*.stories.*"
+        ],
+        "rules": {
+          "import/no-anonymous-default-export": "off"
+        }
+      }
+    ]
   },
   "browserslist": {
     "production": [
@@ -88,30 +53,36 @@
     ]
   },
   "devDependencies": {
-    "@graphql-codegen/cli": "^1.13.2",
-    "@graphql-codegen/typescript": "^1.13.2",
-    "@graphql-codegen/typescript-operations": "^1.13.2",
-    "@graphql-codegen/typescript-react-apollo": "^1.13.2",
-    "@storybook/addon-actions": "^5.3.13",
-    "@storybook/addon-backgrounds": "^5.3.17",
-    "@storybook/addon-docs": "^5.3.17",
-    "@storybook/addon-knobs": "^5.3.17",
-    "@storybook/addon-links": "^5.3.13",
-    "@storybook/addon-storysource": "^5.3.17",
-    "@storybook/addon-viewport": "^5.3.17",
-    "@storybook/addons": "^5.3.13",
-    "@storybook/preset-create-react-app": "^1.5.2",
-    "@storybook/react": "^5.3.13",
-    "@typescript-eslint/eslint-plugin": "^2.20.0",
-    "@typescript-eslint/parser": "^2.20.0",
-    "eslint": "^6.8.0",
+    "@graphql-codegen/cli": "^1.21.4",
+    "@graphql-codegen/typescript": "^1.22.0",
+    "@graphql-codegen/typescript-operations": "^1.17.16",
+    "@graphql-codegen/typescript-react-apollo": "^2.2.4",
+    "@storybook/addon-actions": "^6.4.16",
+    "@storybook/addon-essentials": "^6.4.16",
+    "@storybook/addon-links": "^6.4.16",
+    "@storybook/builder-webpack5": "^6.4.16",
+    "@storybook/manager-webpack5": "^6.4.16",
+    "@storybook/node-logger": "^6.4.16",
+    "@storybook/preset-create-react-app": "^4.0.0",
+    "@storybook/react": "^6.4.16",
+    "@types/color": "^3.0.2",
+    "@types/jest": "^27.4.0",
+    "@types/node": "^16.11.21",
+    "@types/react": "^17.0.38",
+    "@types/react-dom": "^17.0.11",
+    "@types/styled-components": "^5.1.21",
+    "@typescript-eslint/eslint-plugin": "^4.22.0",
+    "@typescript-eslint/parser": "^4.22.0",
+    "eslint": "^7.25.0",
     "eslint-config-airbnb": "^18.0.1",
-    "eslint-config-prettier": "^6.10.0",
-    "eslint-plugin-import": "^2.20.1",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-prettier": "^3.1.2",
-    "eslint-plugin-react": "^7.18.3",
-    "eslint-plugin-react-hooks": "^1.7.0",
-    "prettier": "^1.19.1"
+    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-react": "^7.23.2",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-storybook": "^0.5.6",
+    "prettier": "^2.2.1",
+    "webpack": "^5.67.0"
   }
 }

frontend/public/index.html

@@ -2,19 +2,19 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="/favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="/logo192.png" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="/manifest.json" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Taskcafé</title>
+    <title>React App</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

frontend/src/Admin/index.tsx

@@ -1,265 +0,0 @@
-import React, { useEffect } from 'react';
-import Admin from 'shared/components/Admin';
-import Select from 'shared/components/Select';
-import GlobalTopNavbar from 'App/TopNavbar';
-import {
-  useUsersQuery,
-  useDeleteUserAccountMutation,
-  useDeleteInvitedUserAccountMutation,
-  useCreateUserAccountMutation,
-  UsersDocument,
-  UsersQuery,
-} from 'shared/generated/graphql';
-import Input from 'shared/components/Input';
-import styled from 'styled-components';
-import Button from 'shared/components/Button';
-import { useForm, Controller } from 'react-hook-form';
-import { usePopup, Popup } from 'shared/components/PopupMenu';
-import produce from 'immer';
-import updateApolloCache from 'shared/utils/cache';
-import { useCurrentUser } from 'App/context';
-import { Redirect } from 'react-router';
-import NOOP from 'shared/utils/noop';
-
-const DeleteUserWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-`;
-
-const DeleteUserDescription = styled.p`
-  font-size: 14px;
-`;
-
-const DeleteUserButton = styled(Button)`
-  margin-top: 6px;
-  padding: 6px 12px;
-  width: 100%;
-`;
-
-type DeleteUserPopupProps = {
-  onDeleteUser: () => void;
-};
-
-const DeleteUserPopup: React.FC<DeleteUserPopupProps> = ({ onDeleteUser }) => {
-  return (
-    <DeleteUserWrapper>
-      <DeleteUserDescription>Deleting this user will remove all user related data.</DeleteUserDescription>
-      <DeleteUserButton onClick={() => onDeleteUser()} color="danger">
-        Delete user
-      </DeleteUserButton>
-    </DeleteUserWrapper>
-  );
-};
-
-type RoleCodeOption = {
-  label: string;
-  value: string;
-};
-
-type CreateUserData = {
-  email: string;
-  username: string;
-  fullName: string;
-  initials: string;
-  password: string;
-  roleCode: RoleCodeOption;
-};
-
-const CreateUserForm = styled.form`
-  display: flex;
-  flex-direction: column;
-  margin: 0 12px;
-`;
-
-const CreateUserButton = styled(Button)`
-  margin-top: 8px;
-  padding: 6px 12px;
-  width: 100%;
-`;
-
-const AddUserInput = styled(Input)`
-  margin-bottom: 8px;
-`;
-
-const InputError = styled.span`
-  color: ${props => props.theme.colors.danger};
-  font-size: 12px;
-`;
-
-type AddUserPopupProps = {
-  onAddUser: (user: CreateUserData) => void;
-};
-
-const AddUserPopup: React.FC<AddUserPopupProps> = ({ onAddUser }) => {
-  const { register, handleSubmit, errors, control } = useForm<CreateUserData>();
-
-  const createUser = (data: CreateUserData) => {
-    onAddUser(data);
-  };
-  return (
-    <CreateUserForm onSubmit={handleSubmit(createUser)}>
-      <AddUserInput
-        floatingLabel
-        width="100%"
-        label="Full Name"
-        id="fullName"
-        name="fullName"
-        variant="alternate"
-        ref={register({ required: 'Full name is required' })}
-      />
-      {errors.fullName && <InputError>{errors.fullName.message}</InputError>}
-      <AddUserInput
-        floatingLabel
-        width="100%"
-        label="Email"
-        id="email"
-        name="email"
-        variant="alternate"
-        ref={register({ required: 'Email is required' })}
-      />
-      <Controller
-        control={control}
-        name="roleCode"
-        rules={{ required: 'Role is required' }}
-        render={({ onChange, value }) => (
-          <Select
-            label="Role"
-            value={value}
-            onChange={onChange}
-            options={[
-              { label: 'Admin', value: 'admin' },
-              { label: 'Member', value: 'member' },
-            ]}
-          />
-        )}
-      />
-      {errors.roleCode && errors.roleCode.value && <InputError>{errors.roleCode.value.message}</InputError>}
-      <AddUserInput
-        floatingLabel
-        width="100%"
-        label="Username"
-        id="username"
-        name="username"
-        variant="alternate"
-        ref={register({ required: 'Username is required' })}
-      />
-      {errors.username && <InputError>{errors.username.message}</InputError>}
-      <AddUserInput
-        floatingLabel
-        width="100%"
-        label="Initials"
-        id="initials"
-        name="initials"
-        variant="alternate"
-        ref={register({ required: 'Initials is required' })}
-      />
-      {errors.initials && <InputError>{errors.initials.message}</InputError>}
-      <AddUserInput
-        floatingLabel
-        width="100%"
-        label="Password"
-        id="password"
-        name="password"
-        variant="alternate"
-        type="password"
-        ref={register({ required: 'Password is required' })}
-      />
-      {errors.password && <InputError>{errors.password.message}</InputError>}
-      <CreateUserButton type="submit">Create</CreateUserButton>
-    </CreateUserForm>
-  );
-};
-
-const AdminRoute = () => {
-  useEffect(() => {
-    document.title = 'Admin | Taskcafé';
-  }, []);
-  const { loading, data } = useUsersQuery();
-  const { showPopup, hidePopup } = usePopup();
-  const { user } = useCurrentUser();
-  const [deleteInvitedUser] = useDeleteInvitedUserAccountMutation({
-    update: (client, response) => {
-      updateApolloCache<UsersQuery>(client, UsersDocument, cache =>
-        produce(cache, draftCache => {
-          draftCache.invitedUsers = cache.invitedUsers.filter(
-            u => u.id !== response.data.deleteInvitedUserAccount.invitedUser.id,
-          );
-        }),
-      );
-    },
-  });
-  const [deleteUser] = useDeleteUserAccountMutation({
-    update: (client, response) => {
-      updateApolloCache<UsersQuery>(client, UsersDocument, cache =>
-        produce(cache, draftCache => {
-          draftCache.users = cache.users.filter(u => u.id !== response.data.deleteUserAccount.userAccount.id);
-        }),
-      );
-    },
-  });
-  const [createUser] = useCreateUserAccountMutation({
-    update: (client, createData) => {
-      const cacheData: any = client.readQuery({
-        query: UsersDocument,
-      });
-      const newData = produce(cacheData, (draftState: any) => {
-        draftState.users = [...draftState.users, { ...createData.data.createUserAccount }];
-      });
-
-      client.writeQuery({
-        query: UsersDocument,
-        data: {
-          ...newData,
-        },
-      });
-    },
-  });
-  if (loading) {
-    return <GlobalTopNavbar projectID={null} onSaveProjectName={NOOP} name={null} />;
-  }
-  if (data && user) {
-    if (user.roles.org !== 'admin') {
-      return <Redirect to="/" />;
-    }
-    return (
-      <>
-        <GlobalTopNavbar projectID={null} onSaveProjectName={NOOP} name={null} />
-        <Admin
-          initialTab={0}
-          users={data.users}
-          invitedUsers={data.invitedUsers}
-          canInviteUser={user.roles.org === 'admin'}
-          onInviteUser={NOOP}
-          onUpdateUserPassword={() => {
-            hidePopup();
-          }}
-          onDeleteInvitedUser={invitedUserID => {
-            deleteInvitedUser({ variables: { invitedUserID } });
-            hidePopup();
-          }}
-          onDeleteUser={(userID, newOwnerID) => {
-            deleteUser({ variables: { userID, newOwnerID } });
-            hidePopup();
-          }}
-          onAddUser={$target => {
-            showPopup(
-              $target,
-              <Popup tab={0} title="Add member" onClose={() => hidePopup()}>
-                <AddUserPopup
-                  onAddUser={u => {
-                    const { roleCode, ...userData } = u;
-                    createUser({ variables: { ...userData, roleCode: roleCode.value } });
-                    hidePopup();
-                  }}
-                />
-              </Popup>,
-            );
-          }}
-        />
-      </>
-    );
-  }
-  return <span>error</span>;
-};
-
-export default AdminRoute;

frontend/src/App/Routes.tsx

@@ -1,85 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { Switch, Route, useHistory } from 'react-router-dom';
-import * as H from 'history';
-
-import Dashboard from 'Dashboard';
-import Admin from 'Admin';
-import Confirm from 'Confirm';
-import Projects from 'Projects';
-import Project from 'Projects/Project';
-import Teams from 'Teams';
-import Login from 'Auth';
-import Register from 'Register';
-import Profile from 'Profile';
-import styled from 'styled-components';
-import JwtDecode from 'jwt-decode';
-import { setAccessToken } from 'shared/utils/accessToken';
-import { useCurrentUser } from 'App/context';
-
-const MainContent = styled.div`
-  padding: 0 0 0 0;
-  background: #262c49;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-`;
-
-const AuthorizedRoutes = () => {
-  const history = useHistory();
-  const [loading, setLoading] = useState(true);
-  const { setUser } = useCurrentUser();
-  useEffect(() => {
-    fetch('/auth/refresh_token', {
-      method: 'POST',
-      credentials: 'include',
-    }).then(async x => {
-      const { status } = x;
-      if (status === 400) {
-        history.replace('/login');
-      } else {
-        const response: RefreshTokenResponse = await x.json();
-        const { accessToken, setup } = response;
-        if (setup) {
-          history.replace(`/register?confirmToken=${setup.confirmToken}`);
-        } else {
-          const claims: JWTToken = JwtDecode(accessToken);
-          const currentUser = {
-            id: claims.userId,
-            roles: { org: claims.orgRole, teams: new Map<string, string>(), projects: new Map<string, string>() },
-          };
-          setUser(currentUser);
-          setAccessToken(accessToken);
-        }
-      }
-      setLoading(false);
-    });
-  }, []);
-  return loading ? null : (
-    <Switch>
-      <MainContent>
-        <Route exact path="/" component={Dashboard} />
-        <Route exact path="/projects" component={Projects} />
-        <Route path="/projects/:projectID" component={Project} />
-        <Route path="/teams/:teamID" component={Teams} />
-        <Route path="/profile" component={Profile} />
-        <Route path="/admin" component={Admin} />
-      </MainContent>
-    </Switch>
-  );
-};
-
-type RoutesProps = {
-  history: H.History;
-};
-
-const Routes: React.FC<RoutesProps> = () => (
-  <Switch>
-    <Route exact path="/login" component={Login} />
-    <Route exact path="/register" component={Register} />
-    <Route exact path="/confirm" component={Confirm} />
-    <AuthorizedRoutes />
-  </Switch>
-);
-
-export default Routes;

frontend/src/App/ThemeStyles.ts

@@ -1,30 +0,0 @@
-import { DefaultTheme } from 'styled-components';
-import Color from 'color';
-
-const theme: DefaultTheme = {
-  borderRadius: {
-    primary: '3x',
-    alternate: '6px',
-  },
-  colors: {
-    multiColors: ['#e362e3', '#7a6ff0', '#37c5ab', '#aa62e3', '#e8384f'],
-    primary: 'rgb(115, 103, 240)',
-    secondary: 'rgb(216, 93, 216)',
-    alternate: 'rgb(65, 69, 97)',
-    success: 'rgb(40, 199, 111)',
-    danger: 'rgb(234, 84, 85)',
-    warning: 'rgb(255, 159, 67)',
-    dark: 'rgb(30, 30, 30)',
-    text: {
-      primary: 'rgb(194, 198, 220)',
-      secondary: 'rgb(255, 255, 255)',
-    },
-    border: 'rgb(65, 69, 97)',
-    bg: {
-      primary: 'rgb(16, 22, 58)',
-      secondary: 'rgb(38, 44, 73)',
-    },
-  },
-};
-
-export default theme;

frontend/src/App/TopNavbar.tsx

@@ -1,438 +0,0 @@
-import React from 'react';
-import TopNavbar, { MenuItem } from 'shared/components/TopNavbar';
-import styled from 'styled-components/macro';
-import { ProfileMenu } from 'shared/components/DropdownMenu';
-import ProjectSettings, { DeleteConfirm, DELETE_INFO } from 'shared/components/ProjectSettings';
-import { useHistory } from 'react-router';
-import { PermissionLevel, PermissionObjectType, useCurrentUser } from 'App/context';
-import {
-  RoleCode,
-  useTopNavbarQuery,
-  useDeleteProjectMutation,
-  useGetProjectsQuery,
-  GetProjectsDocument,
-} from 'shared/generated/graphql';
-import { usePopup, Popup } from 'shared/components/PopupMenu';
-import { History } from 'history';
-import produce from 'immer';
-import { Link } from 'react-router-dom';
-import MiniProfile from 'shared/components/MiniProfile';
-import cache from 'App/cache';
-import NOOP from 'shared/utils/noop';
-import NotificationPopup, { NotificationItem } from 'shared/components/NotifcationPopup';
-import theme from './ThemeStyles';
-
-const TeamContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  margin: 0 8px;
-`;
-
-const TeamTitle = styled.h3`
-  font-size: 14px;
-  font-weight: 700;
-`;
-
-const TeamProjects = styled.div`
-  display: flex;
-  flex-direction: column;
-  margin-top: 8px;
-  margin-bottom: 4px;
-`;
-
-const TeamProjectLink = styled(Link)`
-  display: flex;
-  font-weight: 700;
-  height: 36px;
-  overflow: hidden;
-  padding: 0;
-  position: relative;
-  text-decoration: none;
-  user-select: none;
-`;
-
-const TeamProjectBackground = styled.div<{ color: string }>`
-  background-image: url(null);
-  background-color: ${props => props.color};
-
-  background-size: cover;
-  background-position: 50%;
-  position: absolute;
-  width: 100%;
-  height: 36px;
-  opacity: 1;
-  border-radius: 3px;
-  &:before {
-    background: ${props => props.theme.colors.bg.secondary};
-    bottom: 0;
-    content: '';
-    left: 0;
-    opacity: 0.88;
-    position: absolute;
-    right: 0;
-    top: 0;
-  }
-`;
-
-const TeamProjectAvatar = styled.div<{ color: string }>`
-  background-image: url(null);
-  background-color: ${props => props.color};
-
-  display: inline-block;
-  flex: 0 0 auto;
-  background-size: cover;
-  border-radius: 3px 0 0 3px;
-  height: 36px;
-  width: 36px;
-  position: relative;
-  opacity: 0.7;
-`;
-
-const TeamProjectContent = styled.div`
-  display: flex;
-  position: relative;
-  flex: 1;
-  width: 100%;
-  padding: 9px 0 9px 10px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
-
-const TeamProjectTitle = styled.div`
-  font-weight: 700;
-  display: block;
-  padding-right: 12px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
-
-const TeamProjectContainer = styled.div`
-  box-sizing: border-box;
-  border-radius: 3px;
-  position: relative;
-  margin: 0 4px 4px 0;
-  min-width: 0;
-  &:hover ${TeamProjectTitle} {
-    color: ${props => props.theme.colors.text.secondary};
-  }
-  &:hover ${TeamProjectAvatar} {
-    opacity: 1;
-  }
-  &:hover ${TeamProjectBackground}:before {
-    opacity: 0.78;
-  }
-`;
-
-const colors = [theme.colors.primary, theme.colors.secondary];
-
-const ProjectFinder = () => {
-  const { loading, data } = useGetProjectsQuery();
-  if (loading) {
-    return <span>loading</span>;
-  }
-  if (data) {
-    const { projects, teams } = data;
-    const projectTeams = teams.map(team => {
-      return {
-        id: team.id,
-        name: team.name,
-        projects: projects.filter(project => project.team && project.team.id === team.id),
-      };
-    });
-    return (
-      <>
-        {projectTeams.map(team => (
-          <TeamContainer key={team.id}>
-            <TeamTitle>{team.name}</TeamTitle>
-            <TeamProjects>
-              {team.projects.map((project, idx) => (
-                <TeamProjectContainer key={project.id}>
-                  <TeamProjectLink to={`/projects/${project.id}`}>
-                    <TeamProjectBackground color={colors[idx % 5]} />
-                    <TeamProjectAvatar color={colors[idx % 5]} />
-                    <TeamProjectContent>
-                      <TeamProjectTitle>{project.name}</TeamProjectTitle>
-                    </TeamProjectContent>
-                  </TeamProjectLink>
-                </TeamProjectContainer>
-              ))}
-            </TeamProjects>
-          </TeamContainer>
-        ))}
-      </>
-    );
-  }
-  return <span>error</span>;
-};
-type ProjectPopupProps = {
-  history: History<History.PoorMansUnknown>;
-  name: string;
-  projectID: string;
-};
-
-export const ProjectPopup: React.FC<ProjectPopupProps> = ({ history, name, projectID }) => {
-  const { hidePopup, setTab } = usePopup();
-  const [deleteProject] = useDeleteProjectMutation({
-    update: (client, deleteData) => {
-      const cacheData: any = client.readQuery({
-        query: GetProjectsDocument,
-      });
-
-      const newData = produce(cacheData, (draftState: any) => {
-        draftState.projects = draftState.projects.filter(
-          (project: any) => project.id !== deleteData.data.deleteProject.project.id,
-        );
-      });
-
-      client.writeQuery({
-        query: GetProjectsDocument,
-        data: {
-          ...newData,
-        },
-      });
-    },
-  });
-  return (
-    <>
-      <Popup title={null} tab={0}>
-        <ProjectSettings
-          onDeleteProject={() => {
-            setTab(1, { width: 300 });
-          }}
-        />
-      </Popup>
-      <Popup title={`Delete the "${name}" project?`} tab={1}>
-        <DeleteConfirm
-          description={DELETE_INFO.DELETE_PROJECTS.description}
-          deletedItems={DELETE_INFO.DELETE_PROJECTS.deletedItems}
-          onConfirmDelete={() => {
-            if (projectID) {
-              deleteProject({ variables: { projectID } });
-              hidePopup();
-              history.push('/projects');
-            }
-          }}
-        />
-      </Popup>
-    </>
-  );
-};
-
-type GlobalTopNavbarProps = {
-  nameOnly?: boolean;
-  projectID: string | null;
-  teamID?: string | null;
-  onChangeProjectOwner?: (userID: string) => void;
-  name: string | null;
-  currentTab?: number;
-  popupContent?: JSX.Element;
-  menuType?: Array<MenuItem>;
-  onChangeRole?: (userID: string, roleCode: RoleCode) => void;
-  projectMembers?: null | Array<TaskUser>;
-  projectInvitedMembers?: null | Array<InvitedUser>;
-  onSaveProjectName?: (projectName: string) => void;
-  onInviteUser?: ($target: React.RefObject<HTMLElement>) => void;
-  onSetTab?: (tab: number) => void;
-  onRemoveFromBoard?: (userID: string) => void;
-  onRemoveInvitedFromBoard?: (email: string) => void;
-};
-
-const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
-  currentTab,
-  onSetTab,
-  menuType,
-  teamID,
-  onChangeProjectOwner,
-  onChangeRole,
-  name,
-  popupContent,
-  projectMembers,
-  projectInvitedMembers,
-  onInviteUser,
-  onSaveProjectName,
-  onRemoveInvitedFromBoard,
-  onRemoveFromBoard,
-}) => {
-  const { user, setUserRoles, setUser } = useCurrentUser();
-  const { loading, data } = useTopNavbarQuery({
-    onCompleted: response => {
-      if (user && user.roles) {
-        setUserRoles({
-          org: user.roles.org,
-          teams: response.me.teamRoles.reduce((map, obj) => {
-            map.set(obj.teamID, obj.roleCode);
-            return map;
-          }, new Map<string, string>()),
-          projects: response.me.projectRoles.reduce((map, obj) => {
-            map.set(obj.projectID, obj.roleCode);
-            return map;
-          }, new Map<string, string>()),
-        });
-      }
-    },
-  });
-  const { showPopup, hidePopup } = usePopup();
-  const history = useHistory();
-  const onLogout = () => {
-    fetch('/auth/logout', {
-      method: 'POST',
-      credentials: 'include',
-    }).then(async x => {
-      const { status } = x;
-      if (status === 200) {
-        cache.reset();
-        history.replace('/login');
-        setUser(null);
-        hidePopup();
-      }
-    });
-  };
-  const onProfileClick = ($target: React.RefObject<HTMLElement>) => {
-    showPopup(
-      $target,
-      <Popup title={null} tab={0}>
-        <ProfileMenu
-          onLogout={onLogout}
-          showAdminConsole={user ? user.roles.org === 'admin' : false}
-          onAdminConsole={() => {
-            history.push('/admin');
-            hidePopup();
-          }}
-          onProfile={() => {
-            history.push('/profile');
-            hidePopup();
-          }}
-        />
-      </Popup>,
-      { width: 195 },
-    );
-  };
-
-  const onOpenSettings = ($target: React.RefObject<HTMLElement>) => {
-    if (popupContent) {
-      showPopup($target, popupContent, { width: 185 });
-    }
-  };
-
-  const onNotificationClick = ($target: React.RefObject<HTMLElement>) => {
-    if (data) {
-      showPopup(
-        $target,
-        <NotificationPopup>
-          {data.notifications.map(notification => (
-            <NotificationItem
-              title={notification.entity.name}
-              description={`${notification.actor.name} added you as a meber to the task "${notification.entity.name}"`}
-              createdAt={notification.createdAt}
-            />
-          ))}
-        </NotificationPopup>,
-        { width: 415, borders: false, diamondColor: theme.colors.primary },
-      );
-    }
-  };
-
-  if (!user) {
-    return null;
-  }
-  const userIsTeamOrProjectAdmin = user.isAdmin(PermissionLevel.TEAM, PermissionObjectType.TEAM, teamID);
-  const onInvitedMemberProfile = ($targetRef: React.RefObject<HTMLElement>, email: string) => {
-    const member = projectInvitedMembers ? projectInvitedMembers.find(u => u.email === email) : null;
-    if (member) {
-      showPopup(
-        $targetRef,
-        <MiniProfile
-          onRemoveFromBoard={() => {
-            if (onRemoveInvitedFromBoard) {
-              onRemoveInvitedFromBoard(member.email);
-            }
-          }}
-          invited
-          user={{
-            id: member.email,
-            fullName: member.email,
-            bio: 'Invited',
-            profileIcon: {
-              bgColor: '#000',
-              url: null,
-              initials: member.email.charAt(0),
-            },
-          }}
-          bio=""
-        />,
-      );
-    }
-  };
-
-  const onMemberProfile = ($targetRef: React.RefObject<HTMLElement>, memberID: string) => {
-    const member = projectMembers ? projectMembers.find(u => u.id === memberID) : null;
-    const warning =
-      'You can’t leave because you are the only admin. To make another user an admin, click their avatar, select “Change permissions…”, and select “Admin”.';
-    if (member) {
-      showPopup(
-        $targetRef,
-        <MiniProfile
-          warning={member.role && member.role.code === 'owner' ? warning : null}
-          canChangeRole={userIsTeamOrProjectAdmin}
-          onChangeRole={roleCode => {
-            if (onChangeRole) {
-              onChangeRole(member.id, roleCode);
-            }
-          }}
-          onRemoveFromBoard={
-            member.role && member.role.code === 'owner'
-              ? undefined
-              : () => {
-                  if (onRemoveFromBoard) {
-                    onRemoveFromBoard(member.id);
-                  }
-                }
-          }
-          user={member}
-          bio=""
-        />,
-      );
-    }
-  };
-
-  return (
-    <>
-      <TopNavbar
-        name={name}
-        menuType={menuType}
-        onOpenProjectFinder={$target => {
-          showPopup(
-            $target,
-            <Popup tab={0} title={null}>
-              <ProjectFinder />
-            </Popup>,
-          );
-        }}
-        currentTab={currentTab}
-        user={data ? data.me.user : null}
-        canEditProjectName={userIsTeamOrProjectAdmin}
-        canInviteUser={userIsTeamOrProjectAdmin}
-        onMemberProfile={onMemberProfile}
-        onInvitedMemberProfile={onInvitedMemberProfile}
-        onInviteUser={onInviteUser}
-        onChangeRole={onChangeRole}
-        onChangeProjectOwner={onChangeProjectOwner}
-        onNotificationClick={onNotificationClick}
-        onSetTab={onSetTab}
-        onRemoveFromBoard={onRemoveFromBoard}
-        onDashboardClick={() => {
-          history.push('/');
-        }}
-        projectMembers={projectMembers}
-        projectInvitedMembers={projectInvitedMembers}
-        onProfileClick={onProfileClick}
-        onSaveName={onSaveProjectName}
-        onOpenSettings={onOpenSettings}
-      />
-    </>
-  );
-};
-
-export default GlobalTopNavbar;

frontend/src/App/cache.ts

@@ -1,5 +0,0 @@
-import { InMemoryCache } from 'apollo-cache-inmemory';
-
-const cache = new InMemoryCache();
-
-export default cache;

frontend/src/App/context.ts

@@ -1,80 +0,0 @@
-import React, { useContext } from 'react';
-
-export enum PermissionLevel {
-  ORG,
-  TEAM,
-  PROJECT,
-}
-
-export enum PermissionObjectType {
-  ORG,
-  TEAM,
-  PROJECT,
-  TASK,
-}
-
-export type CurrentUserRoles = {
-  org: string;
-  teams: Map<string, string>;
-  projects: Map<string, string>;
-};
-
-export interface CurrentUserRaw {
-  id: string;
-  roles: CurrentUserRoles;
-}
-
-type UserContextState = {
-  user: CurrentUserRaw | null;
-  setUser: (user: CurrentUserRaw | null) => void;
-  setUserRoles: (roles: CurrentUserRoles) => void;
-};
-export const UserContext = React.createContext<UserContextState>({
-  user: null,
-  setUser: _user => null,
-  setUserRoles: roles => null,
-});
-
-export interface CurrentUser extends CurrentUserRaw {
-  isAdmin: (level: PermissionLevel, objectType: PermissionObjectType, subjectID?: string | null) => boolean;
-  isVisible: (level: PermissionLevel, objectType: PermissionObjectType, subjectID?: string | null) => boolean;
-}
-
-export const useCurrentUser = () => {
-  const { user, setUser, setUserRoles } = useContext(UserContext);
-  let currentUser: CurrentUser | null = null;
-  if (user) {
-    currentUser = {
-      ...user,
-      isAdmin(level: PermissionLevel, objectType: PermissionObjectType, subjectID?: string | null) {
-        if (user.roles.org === 'admin') {
-          return true;
-        }
-        switch (level) {
-          case PermissionLevel.TEAM:
-            return subjectID ? this.roles.teams.get(subjectID) === 'admin' : false;
-          default:
-            return false;
-        }
-      },
-      isVisible(level: PermissionLevel, objectType: PermissionObjectType, subjectID?: string | null) {
-        if (user.roles.org === 'admin') {
-          return true;
-        }
-        switch (level) {
-          case PermissionLevel.TEAM:
-            return subjectID ? this.roles.teams.get(subjectID) !== null : false;
-          default:
-            return false;
-        }
-      },
-    };
-  }
-  return {
-    user: currentUser,
-    setUser,
-    setUserRoles,
-  };
-};
-
-export default UserContext;

frontend/src/App/index.tsx

@@ -1,94 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import jwtDecode from 'jwt-decode';
-import { createBrowserHistory } from 'history';
-import { Router } from 'react-router';
-import { PopupProvider } from 'shared/components/PopupMenu';
-import { ToastContainer } from 'react-toastify';
-import { setAccessToken } from 'shared/utils/accessToken';
-import styled, { ThemeProvider } from 'styled-components';
-import NormalizeStyles from './NormalizeStyles';
-import BaseStyles from './BaseStyles';
-import theme from './ThemeStyles';
-import Routes from './Routes';
-import { UserContext, CurrentUserRaw, CurrentUserRoles, PermissionLevel, PermissionObjectType } from './context';
-
-import 'react-toastify/dist/ReactToastify.css';
-
-const StyledContainer = styled(ToastContainer).attrs({
-  // custom props
-})`
-  .Toastify__toast-container {
-  }
-  .Toastify__toast {
-    padding: 5px;
-    margin-left: 5px;
-    margin-right: 5px;
-    border-radius: 10px;
-    background: #7367f0;
-    color: #fff;
-  }
-  .Toastify__toast--error {
-    background: ${props => props.theme.colors.danger};
-  }
-  .Toastify__toast--warning {
-    background: ${props => props.theme.colors.warning};
-  }
-  .Toastify__toast--success {
-    background: ${props => props.theme.colors.success};
-  }
-  .Toastify__toast-body {
-  }
-  .Toastify__progress-bar {
-  }
-  .Toastify__close-button {
-    display: none;
-  }
-`;
-
-const history = createBrowserHistory();
-type RefreshTokenResponse = {
-  accessToken: string;
-  isInstalled: boolean;
-};
-
-const App = () => {
-  const [user, setUser] = useState<CurrentUserRaw | null>(null);
-  const setUserRoles = (roles: CurrentUserRoles) => {
-    if (user) {
-      setUser({
-        ...user,
-        roles,
-      });
-    }
-  };
-
-  return (
-    <>
-      <UserContext.Provider value={{ user, setUser, setUserRoles }}>
-        <ThemeProvider theme={theme}>
-          <NormalizeStyles />
-          <BaseStyles />
-          <Router history={history}>
-            <PopupProvider>
-              <Routes history={history} />
-            </PopupProvider>
-          </Router>
-          <StyledContainer
-            position="bottom-right"
-            autoClose={5000}
-            hideProgressBar
-            newestOnTop
-            closeOnClick
-            rtl={false}
-            pauseOnFocusLoss
-            draggable
-            pauseOnHover
-            limit={5}
-          />
-        </ThemeProvider>
-      </UserContext.Provider>
-    </>
-  );
-};
-
-export default App;

frontend/src/Auth/Styles.ts

@@ -1,13 +0,0 @@
-import styled from 'styled-components';
-
-export const Container = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100vw;
-  height: 100vh;
-`;
-
-export const LoginWrapper = styled.div`
-  width: 60%;
-`;

frontend/src/Auth/index.tsx

@@ -1,82 +0,0 @@
-import React, { useState, useEffect, useContext } from 'react';
-import { useHistory } from 'react-router';
-import JwtDecode from 'jwt-decode';
-import { setAccessToken } from 'shared/utils/accessToken';
-import Login from 'shared/components/Login';
-import UserContext from 'App/context';
-import { Container, LoginWrapper } from './Styles';
-
-const Auth = () => {
-  const [invalidLoginAttempt, setInvalidLoginAttempt] = useState(0);
-  const history = useHistory();
-  const { setUser } = useContext(UserContext);
-  const login = (
-    data: LoginFormData,
-    setComplete: (val: boolean) => void,
-    setError: (name: 'username' | 'password', error: ErrorOption) => void,
-  ) => {
-    fetch('/auth/login', {
-      credentials: 'include',
-      method: 'POST',
-      body: JSON.stringify({
-        username: data.username,
-        password: data.password,
-      }),
-    }).then(async x => {
-      if (x.status === 401) {
-        setInvalidLoginAttempt(invalidLoginAttempt + 1);
-        setError('username', { type: 'error', message: 'Invalid username' });
-        setError('password', { type: 'error', message: 'Invalid password' });
-        setComplete(true);
-      } else {
-        const response = await x.json();
-        const { accessToken } = response;
-        const claims: JWTToken = JwtDecode(accessToken);
-        const currentUser = {
-          id: claims.userId,
-          roles: { org: claims.orgRole, teams: new Map<string, string>(), projects: new Map<string, string>() },
-        };
-        setUser(currentUser);
-        setComplete(true);
-        setAccessToken(accessToken);
-
-        history.push('/');
-      }
-    });
-  };
-
-  useEffect(() => {
-    fetch('/auth/refresh_token', {
-      method: 'POST',
-      credentials: 'include',
-    }).then(async x => {
-      const { status } = x;
-      if (status === 200) {
-        const response: RefreshTokenResponse = await x.json();
-        const { accessToken, setup } = response;
-        if (setup) {
-          history.replace(`/register?confirmToken=${setup.confirmToken}`);
-        } else {
-          const claims: JWTToken = JwtDecode(accessToken);
-          const currentUser = {
-            id: claims.userId,
-            roles: { org: claims.orgRole, teams: new Map<string, string>(), projects: new Map<string, string>() },
-          };
-          setUser(currentUser);
-          setAccessToken(accessToken);
-          history.replace('/projects');
-        }
-      }
-    });
-  }, []);
-
-  return (
-    <Container>
-      <LoginWrapper>
-        <Login onSubmit={login} />
-      </LoginWrapper>
-    </Container>
-  );
-};
-
-export default Auth;

frontend/src/Confirm/Styles.ts

@@ -1,13 +0,0 @@
-import styled from 'styled-components';
-
-export const Container = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100vw;
-  height: 100vh;
-`;
-
-export const LoginWrapper = styled.div`
-  width: 60%;
-`;

frontend/src/Confirm/index.tsx

@@ -1,61 +0,0 @@
-import React, { useState } from 'react';
-import axios from 'axios';
-import Confirm from 'shared/components/Confirm';
-import { useHistory, useLocation } from 'react-router';
-import * as QueryString from 'query-string';
-import { toast } from 'react-toastify';
-import { Container, LoginWrapper } from './Styles';
-import JwtDecode from 'jwt-decode';
-import { setAccessToken } from 'shared/utils/accessToken';
-import { useCurrentUser } from 'App/context';
-
-const UsersConfirm = () => {
-  const history = useHistory();
-  const location = useLocation();
-  const [registered, setRegistered] = useState(false);
-  const params = QueryString.parse(location.search);
-  const { setUser } = useCurrentUser();
-  return (
-    <Container>
-      <LoginWrapper>
-        <Confirm
-          hasConfirmToken={params.confirmToken !== undefined}
-          onConfirmUser={setFailed => {
-            fetch('/auth/confirm', {
-              method: 'POST',
-              body: JSON.stringify({
-                confirmToken: params.confirmToken,
-              }),
-            })
-              .then(async x => {
-                const { status } = x;
-                if (status === 200) {
-                  const response = await x.json();
-                  const { accessToken } = response;
-                  const claims: JWTToken = JwtDecode(accessToken);
-                  const currentUser = {
-                    id: claims.userId,
-                    roles: {
-                      org: claims.orgRole,
-                      teams: new Map<string, string>(),
-                      projects: new Map<string, string>(),
-                    },
-                  };
-                  setUser(currentUser);
-                  setAccessToken(accessToken);
-                  history.push('/');
-                } else {
-                  setFailed();
-                }
-              })
-              .catch(() => {
-                setFailed();
-              });
-          }}
-        />
-      </LoginWrapper>
-    </Container>
-  );
-};
-
-export default UsersConfirm;

frontend/src/Dashboard/index.tsx

@@ -1,8 +0,0 @@
-import React from 'react';
-import { Redirect } from 'react-router';
-
-const Dashboard: React.FC = () => {
-  return <Redirect to="/projects" />;
-};
-
-export default Dashboard;

frontend/src/Profile/index.tsx

@@ -1,98 +0,0 @@
-import React, { useRef, useEffect } from 'react';
-import styled from 'styled-components/macro';
-import GlobalTopNavbar from 'App/TopNavbar';
-import { getAccessToken } from 'shared/utils/accessToken';
-import Settings from 'shared/components/Settings';
-import {
-  useMeQuery,
-  useClearProfileAvatarMutation,
-  useUpdateUserPasswordMutation,
-  useUpdateUserInfoMutation,
-  MeQuery,
-  MeDocument,
-} from 'shared/generated/graphql';
-import axios from 'axios';
-import { useCurrentUser } from 'App/context';
-import NOOP from 'shared/utils/noop';
-import { toast } from 'react-toastify';
-import updateApolloCache from 'shared/utils/cache';
-import produce from 'immer';
-
-const MainContent = styled.div`
-  padding: 0 0 50px 80px;
-  height: 100%;
-  background: #262c49;
-`;
-
-const Projects = () => {
-  const $fileUpload = useRef<HTMLInputElement>(null);
-  const [clearProfileAvatar] = useClearProfileAvatarMutation();
-  const { user } = useCurrentUser();
-  const [updateUserInfo] = useUpdateUserInfoMutation();
-  const [updateUserPassword] = useUpdateUserPasswordMutation();
-  const { loading, data, refetch } = useMeQuery();
-  useEffect(() => {
-    document.title = 'Profile | Taskcafé';
-  }, []);
-  if (!user) {
-    return null;
-  }
-
-  return (
-    <>
-      <input
-        type="file"
-        name="file"
-        style={{ display: 'none' }}
-        ref={$fileUpload}
-        onChange={e => {
-          if (e.target.files) {
-            const fileData = new FormData();
-            fileData.append('file', e.target.files[0]);
-            const accessToken = getAccessToken();
-            axios
-              .post('/users/me/avatar', fileData, {
-                headers: {
-                  Authorization: `Bearer ${accessToken}`,
-                },
-              })
-              .then(res => {
-                if ($fileUpload && $fileUpload.current) {
-                  $fileUpload.current.value = '';
-                  refetch();
-                }
-              });
-          }
-        }}
-      />
-      <GlobalTopNavbar projectID={null} onSaveProjectName={NOOP} name={null} />
-      {!loading && data && (
-        <Settings
-          profile={data.me.user}
-          onProfileAvatarChange={() => {
-            if ($fileUpload && $fileUpload.current) {
-              $fileUpload.current.click();
-            }
-          }}
-          onResetPassword={(password, done) => {
-            updateUserPassword({ variables: { userID: user.id, password } });
-            toast('Password was changed!');
-            done();
-          }}
-          onChangeUserInfo={(d, done) => {
-            updateUserInfo({
-              variables: { name: d.full_name, bio: d.bio, email: d.email, initials: d.initials },
-            });
-            toast('User info was saved!');
-            done();
-          }}
-          onProfileAvatarRemove={() => {
-            clearProfileAvatar();
-          }}
-        />
-      )}
-    </>
-  );
-};
-
-export default Projects;

frontend/src/Projects/Project/Board/FilterMeta.tsx

@@ -1,323 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import styled, { css } from 'styled-components';
-import { Checkmark, User, Calendar, Tags, Clock } from 'shared/icons';
-import { TaskMetaFilters, TaskMeta, TaskMetaMatch, DueDateFilterType } from 'shared/components/Lists';
-import Input from 'shared/components/ControlledInput';
-import { Popup, usePopup } from 'shared/components/PopupMenu';
-import produce from 'immer';
-import { mixin } from 'shared/utils/styles';
-import Member from 'shared/components/Member';
-
-const FilterMember = styled(Member)`
-  margin: 2px 0;
-  &:hover {
-    cursor: pointer;
-    background: ${props => props.theme.colors.primary};
-  }
-`;
-
-export const Labels = styled.ul`
-  list-style: none;
-  margin: 0 8px;
-  padding: 0;
-  margin-bottom: 8px;
-`;
-
-export const Label = styled.li`
-  position: relative;
-`;
-
-export const CardLabel = styled.span<{ active: boolean; color: string }>`
-  ${props =>
-    props.active &&
-    css`
-      margin-left: 4px;
-      box-shadow: -8px 0 ${mixin.darken(props.color, 0.12)};
-      border-radius: 3px;
-    `}
-
-  cursor: pointer;
-  font-weight: 700;
-  margin: 0 0 4px;
-  min-height: 20px;
-  padding: 6px 12px;
-  position: relative;
-  transition: padding 85ms, margin 85ms, box-shadow 85ms;
-  background-color: ${props => props.color};
-  color: #fff;
-  display: block;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  min-height: 31px;
-`;
-
-export const ActionsList = styled.ul`
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-`;
-
-export const ActionItem = styled.li`
-  position: relative;
-  padding-left: 4px;
-  padding-right: 4px;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  font-size: 14px;
-  &:hover {
-    background: ${props => props.theme.colors.primary};
-  }
-`;
-
-export const ActionTitle = styled.span`
-  margin-left: 20px;
-`;
-
-const ActionItemSeparator = styled.li`
-  color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.4)};
-  font-size: 12px;
-  padding-left: 4px;
-  padding-right: 4px;
-  padding-top: 0.75rem;
-  padding-bottom: 0.25rem;
-`;
-
-const ActiveIcon = styled(Checkmark)`
-  position: absolute;
-  right: 4px;
-`;
-
-const ItemIcon = styled.div`
-  position: absolute;
-`;
-
-const TaskNameInput = styled(Input)`
-  margin: 0;
-`;
-
-const ActionItemLine = styled.div`
-  height: 1px;
-  border-top: 1px solid #414561;
-  margin: 0.25rem !important;
-`;
-
-type FilterMetaProps = {
-  filters: TaskMetaFilters;
-  userID: string;
-  labels: React.RefObject<Array<ProjectLabel>>;
-  members: React.RefObject<Array<TaskUser>>;
-  onChangeTaskMetaFilter: (filters: TaskMetaFilters) => void;
-};
-
-const FilterMeta: React.FC<FilterMetaProps> = ({ filters, onChangeTaskMetaFilter, userID, labels, members }) => {
-  const [currentFilters, setFilters] = useState(filters);
-  const [nameFilter, setNameFilter] = useState(filters.taskName ? filters.taskName.name : '');
-  const [currentLabel, setCurrentLabel] = useState('');
-
-  const handleSetFilters = (f: TaskMetaFilters) => {
-    setFilters(f);
-    onChangeTaskMetaFilter(f);
-  };
-
-  const handleNameChange = (nFilter: string) => {
-    handleSetFilters(
-      produce(currentFilters, draftFilters => {
-        draftFilters.taskName = nFilter !== '' ? { name: nFilter } : null;
-      }),
-    );
-    setNameFilter(nFilter);
-  };
-
-  const { setTab } = usePopup();
-
-  const handleSetDueDate = (filterType: DueDateFilterType, label: string) => {
-    handleSetFilters(
-      produce(currentFilters, draftFilters => {
-        if (draftFilters.dueDate && draftFilters.dueDate.type === filterType) {
-          draftFilters.dueDate = null;
-        } else {
-          draftFilters.dueDate = {
-            label,
-            type: filterType,
-          };
-        }
-      }),
-    );
-  };
-
-  return (
-    <>
-      <Popup tab={0} title={null}>
-        <ActionsList>
-          <TaskNameInput
-            width="100%"
-            onChange={e => handleNameChange(e.currentTarget.value)}
-            value={nameFilter}
-            variant="alternate"
-            placeholder="Task name..."
-          />
-          <ActionItemSeparator>QUICK ADD</ActionItemSeparator>
-          <ActionItem
-            onClick={() => {
-              handleSetFilters(
-                produce(currentFilters, draftFilters => {
-                  if (members.current) {
-                    const member = members.current.find(m => m.id === userID);
-                    const draftMember = draftFilters.members.find(m => m.id === userID);
-                    if (member && !draftMember) {
-                      draftFilters.members.push({ id: userID, username: member.username ? member.username : '' });
-                    } else {
-                      draftFilters.members = draftFilters.members.filter(m => m.id !== userID);
-                    }
-                  }
-                }),
-              );
-            }}
-          >
-            <ItemIcon>
-              <User width={12} height={12} />
-            </ItemIcon>
-            <ActionTitle>Just my tasks</ActionTitle>
-            {currentFilters.members.find(m => m.id === userID) && <ActiveIcon width={12} height={12} />}
-          </ActionItem>
-          <ActionItem onClick={() => handleSetDueDate(DueDateFilterType.THIS_WEEK, 'Due this week')}>
-            <ItemIcon>
-              <Calendar width={12} height={12} />
-            </ItemIcon>
-            <ActionTitle>Due this week</ActionTitle>
-            {currentFilters.dueDate && currentFilters.dueDate.type === DueDateFilterType.THIS_WEEK && (
-              <ActiveIcon width={12} height={12} />
-            )}
-          </ActionItem>
-          <ActionItem onClick={() => handleSetDueDate(DueDateFilterType.NEXT_WEEK, 'Due next week')}>
-            <ItemIcon>
-              <Calendar width={12} height={12} />
-            </ItemIcon>
-            <ActionTitle>Due next week</ActionTitle>
-            {currentFilters.dueDate && currentFilters.dueDate.type === DueDateFilterType.NEXT_WEEK && (
-              <ActiveIcon width={12} height={12} />
-            )}
-          </ActionItem>
-          <ActionItemLine />
-          <ActionItem onClick={() => setTab(1)}>
-            <ItemIcon>
-              <Tags width={12} height={12} />
-            </ItemIcon>
-            <ActionTitle>By Label</ActionTitle>
-          </ActionItem>
-          <ActionItem onClick={() => setTab(2)}>
-            <ItemIcon>
-              <User width={12} height={12} />
-            </ItemIcon>
-            <ActionTitle>By Member</ActionTitle>
-          </ActionItem>
-          <ActionItem onClick={() => setTab(3)}>
-            <ItemIcon>
-              <Clock width={12} height={12} />
-            </ItemIcon>
-            <ActionTitle>By Due Date</ActionTitle>
-          </ActionItem>
-        </ActionsList>
-      </Popup>
-      <Popup tab={1} title="By Labels">
-        <Labels>
-          {labels.current &&
-            labels.current
-              // .filter(label => '' === '' || (label.name && label.name.toLowerCase().startsWith(''.toLowerCase())))
-              .map(label => (
-                <Label key={label.id}>
-                  <CardLabel
-                    key={label.id}
-                    color={label.labelColor.colorHex}
-                    active={currentLabel === label.id}
-                    onMouseEnter={() => {
-                      setCurrentLabel(label.id);
-                    }}
-                    onClick={() => {
-                      handleSetFilters(
-                        produce(currentFilters, draftFilters => {
-                          if (draftFilters.labels.find(l => l.id === label.id)) {
-                            draftFilters.labels = draftFilters.labels.filter(l => l.id !== label.id);
-                          } else {
-                            draftFilters.labels.push({
-                              id: label.id,
-                              name: label.name ?? '',
-                              color: label.labelColor.colorHex,
-                            });
-                          }
-                        }),
-                      );
-                    }}
-                  >
-                    {label.name}
-                  </CardLabel>
-                </Label>
-              ))}
-        </Labels>
-      </Popup>
-      <Popup tab={2} title="By Member">
-        <ActionsList>
-          {members.current &&
-            members.current.map(member => (
-              <FilterMember
-                key={member.id}
-                member={member}
-                showName
-                onCardMemberClick={() => {
-                  handleSetFilters(
-                    produce(currentFilters, draftFilters => {
-                      if (draftFilters.members.find(m => m.id === member.id)) {
-                        draftFilters.members = draftFilters.members.filter(m => m.id !== member.id);
-                      } else {
-                        draftFilters.members.push({ id: member.id, username: member.username ?? '' });
-                      }
-                    }),
-                  );
-                }}
-              />
-            ))}
-        </ActionsList>
-      </Popup>
-      <Popup tab={3} title="By Due Date">
-        <ActionsList>
-          <ActionItem onClick={() => handleSetDueDate(DueDateFilterType.TODAY, 'Today')}>
-            <ActionTitle>Today</ActionTitle>
-          </ActionItem>
-          <ActionItem onClick={() => handleSetDueDate(DueDateFilterType.THIS_WEEK, 'Due this week')}>
-            <ActionTitle>This week</ActionTitle>
-          </ActionItem>
-          <ActionItem onClick={() => handleSetDueDate(DueDateFilterType.NEXT_WEEK, 'Due next week')}>
-            <ActionTitle>Next week</ActionTitle>
-          </ActionItem>
-          <ActionItem onClick={() => handleSetDueDate(DueDateFilterType.OVERDUE, 'Overdue')}>
-            <ActionTitle>Overdue</ActionTitle>
-          </ActionItem>
-          <ActionItemLine />
-          <ActionItem onClick={() => handleSetDueDate(DueDateFilterType.TOMORROW, 'In the next day')}>
-            <ActionTitle>In the next day</ActionTitle>
-          </ActionItem>
-          <ActionItem onClick={() => handleSetDueDate(DueDateFilterType.ONE_WEEK, 'In the next week')}>
-            <ActionTitle>In the next week</ActionTitle>
-          </ActionItem>
-          <ActionItem onClick={() => handleSetDueDate(DueDateFilterType.TWO_WEEKS, 'In the next two weeks')}>
-            <ActionTitle>In the next two weeks</ActionTitle>
-          </ActionItem>
-          <ActionItem onClick={() => handleSetDueDate(DueDateFilterType.THREE_WEEKS, 'In the next three weeks')}>
-            <ActionTitle>In the next three weeks</ActionTitle>
-          </ActionItem>
-          <ActionItem onClick={() => handleSetDueDate(DueDateFilterType.NO_DUE_DATE, 'Has no due date')}>
-            <ActionTitle>Has no due date</ActionTitle>
-          </ActionItem>
-        </ActionsList>
-      </Popup>
-    </>
-  );
-};
-
-export default FilterMeta;

frontend/src/Projects/Project/Board/FilterStatus.tsx

@@ -1,149 +0,0 @@
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import { Checkmark } from 'shared/icons';
-import { TaskStatusFilter, TaskStatus, TaskSince } from 'shared/components/Lists';
-
-export const ActionsList = styled.ul`
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-`;
-
-export const ActionExtraMenuContainer = styled.div`
-  visibility: hidden;
-  position: absolute;
-  left: 100%;
-  top: -4px;
-  padding-left: 2px;
-  width: 100%;
-`;
-
-export const ActionItem = styled.li`
-  position: relative;
-  padding-left: 4px;
-  padding-right: 4px;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  font-size: 14px;
-  &:hover {
-    background: ${props => props.theme.colors.primary};
-  }
-  &:hover ${ActionExtraMenuContainer} {
-    visibility: visible;
-  }
-`;
-
-export const ActionTitle = styled.span`
-  margin-left: 20px;
-`;
-
-export const ActionExtraMenu = styled.ul`
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-
-  padding: 5px;
-  padding-top: 8px;
-  border-radius: 5px;
-  box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.1);
-
-  color: #c2c6dc;
-  background: #262c49;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  border-color: #414561;
-`;
-
-export const ActionExtraMenuItem = styled.li`
-  position: relative;
-  padding-left: 4px;
-  padding-right: 4px;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  font-size: 14px;
-  &:hover {
-    background: rgb(${props => props.theme.colors.primary});
-  }
-`;
-const ActionExtraMenuSeparator = styled.li`
-  color: ${props => props.theme.colors.text.primary};
-  font-size: 12px;
-  padding-left: 4px;
-  padding-right: 4px;
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-`;
-
-const ActiveIcon = styled(Checkmark)`
-  position: absolute;
-`;
-
-type FilterStatusProps = {
-  filter: TaskStatusFilter;
-  onChangeTaskStatusFilter: (filter: TaskStatusFilter) => void;
-};
-
-const FilterStatus: React.FC<FilterStatusProps> = ({ filter, onChangeTaskStatusFilter }) => {
-  const [currentFilter, setFilter] = useState(filter);
-  const handleFilterChange = (f: TaskStatusFilter) => {
-    setFilter(f);
-    onChangeTaskStatusFilter(f);
-  };
-  const handleCompleteClick = (s: TaskSince) => {
-    handleFilterChange({ status: TaskStatus.COMPLETE, since: s });
-  };
-  return (
-    <ActionsList>
-      <ActionItem onClick={() => handleFilterChange({ status: TaskStatus.INCOMPLETE, since: TaskSince.ALL })}>
-        {currentFilter.status === TaskStatus.INCOMPLETE && <ActiveIcon width={12} height={12} />}
-        <ActionTitle>Incomplete Tasks</ActionTitle>
-      </ActionItem>
-      <ActionItem>
-        {currentFilter.status === TaskStatus.COMPLETE && <ActiveIcon width={12} height={12} />}
-        <ActionTitle>Compelete Tasks</ActionTitle>
-        <ActionExtraMenuContainer>
-          <ActionExtraMenu>
-            <ActionExtraMenuItem onClick={() => handleCompleteClick(TaskSince.ALL)}>
-              {currentFilter.since === TaskSince.ALL && <ActiveIcon width={12} height={12} />}
-              <ActionTitle>All completed tasks</ActionTitle>
-            </ActionExtraMenuItem>
-            <ActionExtraMenuSeparator>Marked complete since</ActionExtraMenuSeparator>
-            <ActionExtraMenuItem onClick={() => handleCompleteClick(TaskSince.TODAY)}>
-              {currentFilter.since === TaskSince.TODAY && <ActiveIcon width={12} height={12} />}
-              <ActionTitle>Today</ActionTitle>
-            </ActionExtraMenuItem>
-            <ActionExtraMenuItem onClick={() => handleCompleteClick(TaskSince.YESTERDAY)}>
-              {currentFilter.since === TaskSince.YESTERDAY && <ActiveIcon width={12} height={12} />}
-              <ActionTitle>Yesterday</ActionTitle>
-            </ActionExtraMenuItem>
-            <ActionExtraMenuItem onClick={() => handleCompleteClick(TaskSince.ONE_WEEK)}>
-              {currentFilter.since === TaskSince.ONE_WEEK && <ActiveIcon width={12} height={12} />}
-              <ActionTitle>1 week</ActionTitle>
-            </ActionExtraMenuItem>
-            <ActionExtraMenuItem onClick={() => handleCompleteClick(TaskSince.TWO_WEEKS)}>
-              {currentFilter.since === TaskSince.TWO_WEEKS && <ActiveIcon width={12} height={12} />}
-              <ActionTitle>2 weeks</ActionTitle>
-            </ActionExtraMenuItem>
-            <ActionExtraMenuItem onClick={() => handleCompleteClick(TaskSince.THREE_WEEKS)}>
-              {currentFilter.since === TaskSince.THREE_WEEKS && <ActiveIcon width={12} height={12} />}
-              <ActionTitle>3 weeks</ActionTitle>
-            </ActionExtraMenuItem>
-          </ActionExtraMenu>
-        </ActionExtraMenuContainer>
-      </ActionItem>
-      <ActionItem onClick={() => handleFilterChange({ status: TaskStatus.ALL, since: TaskSince.ALL })}>
-        {currentFilter.status === TaskStatus.ALL && <ActiveIcon width={12} height={12} />}
-        <ActionTitle>All Tasks</ActionTitle>
-      </ActionItem>
-    </ActionsList>
-  );
-};
-
-export default FilterStatus;

frontend/src/Projects/Project/Board/SortPopup.tsx

@@ -1,86 +0,0 @@
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import { TaskSorting, TaskSortingType, TaskSortingDirection } from 'shared/utils/sorting';
-import { mixin } from 'shared/utils/styles';
-
-export const ActionsList = styled.ul`
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-`;
-
-export const ActionItem = styled.li`
-  position: relative;
-  padding-left: 4px;
-  padding-right: 4px;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  font-size: 14px;
-  &:hover {
-    background: ${props => props.theme.colors.primary};
-  }
-`;
-
-export const ActionTitle = styled.span`
-  margin-left: 20px;
-`;
-
-const ActionItemSeparator = styled.li`
-  color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.4)};
-  font-size: 12px;
-  padding-left: 4px;
-  padding-right: 4px;
-  padding-top: 0.75rem;
-  padding-bottom: 0.25rem;
-`;
-
-type SortPopupProps = {
-  sorting: TaskSorting;
-  onChangeTaskSorting: (taskSorting: TaskSorting) => void;
-};
-
-const SortPopup: React.FC<SortPopupProps> = ({ sorting, onChangeTaskSorting }) => {
-  const [currentSorting, setSorting] = useState(sorting);
-  const handleSetSorting = (s: TaskSorting) => {
-    setSorting(s);
-    onChangeTaskSorting(s);
-  };
-  return (
-    <ActionsList>
-      <ActionItem onClick={() => handleSetSorting({ type: TaskSortingType.NONE, direction: TaskSortingDirection.ASC })}>
-        <ActionTitle>None</ActionTitle>
-      </ActionItem>
-      <ActionItem
-        onClick={() => handleSetSorting({ type: TaskSortingType.DUE_DATE, direction: TaskSortingDirection.ASC })}
-      >
-        <ActionTitle>Due date</ActionTitle>
-      </ActionItem>
-      <ActionItem
-        onClick={() => handleSetSorting({ type: TaskSortingType.MEMBERS, direction: TaskSortingDirection.ASC })}
-      >
-        <ActionTitle>Members</ActionTitle>
-      </ActionItem>
-      <ActionItem
-        onClick={() => handleSetSorting({ type: TaskSortingType.LABELS, direction: TaskSortingDirection.ASC })}
-      >
-        <ActionTitle>Labels</ActionTitle>
-      </ActionItem>
-      <ActionItem
-        onClick={() => handleSetSorting({ type: TaskSortingType.TASK_TITLE, direction: TaskSortingDirection.ASC })}
-      >
-        <ActionTitle>Task title</ActionTitle>
-      </ActionItem>
-      <ActionItem
-        onClick={() => handleSetSorting({ type: TaskSortingType.COMPLETE, direction: TaskSortingDirection.ASC })}
-      >
-        <ActionTitle>Complete</ActionTitle>
-      </ActionItem>
-    </ActionsList>
-  );
-};
-
-export default SortPopup;

frontend/src/Projects/Project/Board/index.tsx

@@ -1,813 +0,0 @@
-import React, { useState, useRef } from 'react';
-import updateApolloCache from 'shared/utils/cache';
-import styled, { css } from 'styled-components/macro';
-import { Bolt, ToggleOn, Tags, CheckCircle, Sort, Filter } from 'shared/icons';
-import { usePopup, Popup } from 'shared/components/PopupMenu';
-import { useRouteMatch, useHistory } from 'react-router-dom';
-import {
-  useSetTaskCompleteMutation,
-  useToggleTaskLabelMutation,
-  useFindProjectQuery,
-  useSortTaskGroupMutation,
-  useUpdateTaskGroupNameMutation,
-  useUpdateTaskNameMutation,
-  useCreateTaskMutation,
-  useDeleteTaskMutation,
-  useUpdateTaskLocationMutation,
-  useUpdateTaskGroupLocationMutation,
-  useCreateTaskGroupMutation,
-  useDeleteTaskGroupMutation,
-  useAssignTaskMutation,
-  FindProjectDocument,
-  useUnassignTaskMutation,
-  useUpdateTaskDueDateMutation,
-  FindProjectQuery,
-  useDuplicateTaskGroupMutation,
-  DuplicateTaskGroupMutation,
-  DuplicateTaskGroupDocument,
-  useDeleteTaskGroupTasksMutation,
-} from 'shared/generated/graphql';
-
-import QuickCardEditor from 'shared/components/QuickCardEditor';
-import ListActions from 'shared/components/ListActions';
-import MemberManager from 'shared/components/MemberManager';
-import SimpleLists, {
-  TaskStatus,
-  TaskSince,
-  TaskStatusFilter,
-  TaskMeta,
-  TaskMetaMatch,
-  TaskMetaFilters,
-} from 'shared/components/Lists';
-import { TaskSorting, TaskSortingType, TaskSortingDirection, sortTasks } from 'shared/utils/sorting';
-import produce from 'immer';
-import MiniProfile from 'shared/components/MiniProfile';
-import DueDateManager from 'shared/components/DueDateManager';
-import EmptyBoard from 'shared/components/EmptyBoard';
-import NOOP from 'shared/utils/noop';
-import LabelManagerEditor from 'Projects/Project/LabelManagerEditor';
-import Chip from 'shared/components/Chip';
-import { toast } from 'react-toastify';
-import { useCurrentUser } from 'App/context';
-import FilterStatus from './FilterStatus';
-import FilterMeta from './FilterMeta';
-import SortPopup from './SortPopup';
-
-const FilterChip = styled(Chip)`
-  margin-right: 4px;
-`;
-
-type MetaFilterCloseFn = (meta: TaskMeta, key: string) => void;
-
-const renderTaskSortingLabel = (sorting: TaskSorting) => {
-  if (sorting.type === TaskSortingType.TASK_TITLE) {
-    return 'Sort: Card title';
-  }
-  if (sorting.type === TaskSortingType.MEMBERS) {
-    return 'Sort: Members';
-  }
-  if (sorting.type === TaskSortingType.DUE_DATE) {
-    return 'Sort: Due Date';
-  }
-  if (sorting.type === TaskSortingType.LABELS) {
-    return 'Sort: Labels';
-  }
-  return 'Sort';
-};
-
-const renderMetaFilters = (filters: TaskMetaFilters, onClose: MetaFilterCloseFn) => {
-  const filterChips = [];
-  if (filters.taskName) {
-    filterChips.push(
-      <FilterChip
-        key="task-name"
-        label={`Title: ${filters.taskName.name}`}
-        onClose={() => onClose(TaskMeta.TITLE, 'task-name')}
-      />,
-    );
-  }
-
-  if (filters.dueDate) {
-    filterChips.push(
-      <FilterChip
-        key="due-date"
-        label={filters.dueDate.label}
-        onClose={() => onClose(TaskMeta.DUE_DATE, 'due-date')}
-      />,
-    );
-  }
-  for (const memberFilter of filters.members) {
-    filterChips.push(
-      <FilterChip
-        key={`member-${memberFilter.id}`}
-        label={`Member: ${memberFilter.username}`}
-        onClose={() => onClose(TaskMeta.MEMBER, memberFilter.id)}
-      />,
-    );
-  }
-  for (const labelFilter of filters.labels) {
-    filterChips.push(
-      <FilterChip
-        key={`label-${labelFilter.id}`}
-        label={labelFilter.name === '' ? 'Label' : `Label: ${labelFilter.name}`}
-        color={labelFilter.color}
-        onClose={() => onClose(TaskMeta.LABEL, labelFilter.id)}
-      />,
-    );
-  }
-  return filterChips;
-};
-
-const ProjectBar = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 40px;
-  padding: 0 12px;
-`;
-
-const ProjectActions = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
-const ProjectActionWrapper = styled.div<{ disabled?: boolean }>`
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  font-size: 15px;
-  color: ${props => props.theme.colors.text.primary};
-
-  &:not(:last-of-type) {
-    margin-right: 16px;
-  }
-
-  &:hover {
-    color: ${props => props.theme.colors.text.secondary};
-  }
-  ${props =>
-    props.disabled &&
-    css`
-      opacity: 0.5;
-      cursor: default;
-      pointer-events: none;
-    `}
-`;
-
-const ProjectActionText = styled.span`
-  padding-left: 4px;
-`;
-
-type ProjectActionProps = {
-  onClick?: (target: React.RefObject<HTMLElement>) => void;
-  disabled?: boolean;
-};
-
-const ProjectAction: React.FC<ProjectActionProps> = ({ onClick, disabled = false, children }) => {
-  const $container = useRef<HTMLDivElement>(null);
-  const handleClick = () => {
-    if (onClick) {
-      onClick($container);
-    }
-  };
-  return (
-    <ProjectActionWrapper ref={$container} onClick={handleClick} disabled={disabled}>
-      {children}
-    </ProjectActionWrapper>
-  );
-};
-
-interface QuickCardEditorState {
-  isOpen: boolean;
-  target: React.RefObject<HTMLElement> | null;
-  taskID: string | null;
-  taskGroupID: string | null;
-}
-
-const initialQuickCardEditorState: QuickCardEditorState = {
-  taskID: null,
-  taskGroupID: null,
-  isOpen: false,
-  target: null,
-};
-
-type ProjectBoardProps = {
-  onCardLabelClick?: () => void;
-  cardLabelVariant?: CardLabelVariant;
-  projectID: string;
-};
-
-export const BoardLoading = () => {
-  return (
-    <>
-      <ProjectBar>
-        <ProjectActions>
-          <ProjectAction>
-            <CheckCircle width={13} height={13} />
-            <ProjectActionText>All Tasks</ProjectActionText>
-          </ProjectAction>
-          <ProjectAction>
-            <Sort width={13} height={13} />
-            <ProjectActionText>Sort</ProjectActionText>
-          </ProjectAction>
-          <ProjectAction>
-            <Filter width={13} height={13} />
-            <ProjectActionText>Filter</ProjectActionText>
-          </ProjectAction>
-        </ProjectActions>
-        <ProjectActions>
-          <ProjectAction>
-            <Tags width={13} height={13} />
-            <ProjectActionText>Labels</ProjectActionText>
-          </ProjectAction>
-          <ProjectAction disabled>
-            <ToggleOn width={13} height={13} />
-            <ProjectActionText>Fields</ProjectActionText>
-          </ProjectAction>
-          <ProjectAction disabled>
-            <Bolt width={13} height={13} />
-            <ProjectActionText>Rules</ProjectActionText>
-          </ProjectAction>
-        </ProjectActions>
-      </ProjectBar>
-      <EmptyBoard />
-    </>
-  );
-};
-
-const initTaskStatusFilter: TaskStatusFilter = {
-  status: TaskStatus.ALL,
-  since: TaskSince.ALL,
-};
-
-const initTaskMetaFilters: TaskMetaFilters = {
-  match: TaskMetaMatch.MATCH_ANY,
-  dueDate: null,
-  taskName: null,
-  labels: [],
-  members: [],
-};
-
-const initTaskSorting: TaskSorting = {
-  type: TaskSortingType.NONE,
-  direction: TaskSortingDirection.ASC,
-};
-
-const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick, cardLabelVariant }) => {
-  const [assignTask] = useAssignTaskMutation();
-  const [unassignTask] = useUnassignTaskMutation();
-  const match = useRouteMatch();
-  const labelsRef = useRef<Array<ProjectLabel>>([]);
-  const membersRef = useRef<Array<TaskUser>>([]);
-  const { showPopup, hidePopup } = usePopup();
-  const taskLabelsRef = useRef<Array<TaskLabel>>([]);
-  const [quickCardEditor, setQuickCardEditor] = useState(initialQuickCardEditorState);
-  const [updateTaskGroupLocation] = useUpdateTaskGroupLocationMutation({});
-  const [taskStatusFilter, setTaskStatusFilter] = useState(initTaskStatusFilter);
-  const [taskMetaFilters, setTaskMetaFilters] = useState(initTaskMetaFilters);
-  const [taskSorting, setTaskSorting] = useState(initTaskSorting);
-  const history = useHistory();
-  const [sortTaskGroup] = useSortTaskGroupMutation({
-    onCompleted: () => {
-      toast('List was sorted');
-    },
-  });
-  const [deleteTaskGroup] = useDeleteTaskGroupMutation({
-    update: (client, deletedTaskGroupData) => {
-      updateApolloCache<FindProjectQuery>(
-        client,
-        FindProjectDocument,
-        cache =>
-          produce(cache, draftCache => {
-            draftCache.findProject.taskGroups = draftCache.findProject.taskGroups.filter(
-              (taskGroup: TaskGroup) => taskGroup.id !== deletedTaskGroupData.data.deleteTaskGroup.taskGroup.id,
-            );
-          }),
-        { projectID },
-      );
-    },
-  });
-  const [updateTaskName] = useUpdateTaskNameMutation();
-  const [createTask] = useCreateTaskMutation({
-    update: (client, newTaskData) => {
-      updateApolloCache<FindProjectQuery>(
-        client,
-        FindProjectDocument,
-        cache =>
-          produce(cache, draftCache => {
-            const { taskGroups } = cache.findProject;
-            const idx = taskGroups.findIndex(taskGroup => taskGroup.id === newTaskData.data.createTask.taskGroup.id);
-            if (idx !== -1) {
-              draftCache.findProject.taskGroups[idx].tasks.push({ ...newTaskData.data.createTask });
-            }
-          }),
-        { projectID },
-      );
-    },
-  });
-
-  const [createTaskGroup] = useCreateTaskGroupMutation({
-    update: (client, newTaskGroupData) => {
-      updateApolloCache<FindProjectQuery>(
-        client,
-        FindProjectDocument,
-        cache =>
-          produce(cache, draftCache => {
-            draftCache.findProject.taskGroups.push({ ...newTaskGroupData.data.createTaskGroup, tasks: [] });
-          }),
-        { projectID },
-      );
-    },
-  });
-
-  const [updateTaskGroupName] = useUpdateTaskGroupNameMutation({});
-  const { loading, data } = useFindProjectQuery({
-    variables: { projectID },
-  });
-  const [deleteTaskGroupTasks] = useDeleteTaskGroupTasksMutation({
-    update: (client, resp) =>
-      updateApolloCache<FindProjectQuery>(
-        client,
-        FindProjectDocument,
-        cache =>
-          produce(cache, draftCache => {
-            const idx = cache.findProject.taskGroups.findIndex(
-              t => t.id === resp.data.deleteTaskGroupTasks.taskGroupID,
-            );
-            if (idx !== -1) {
-              draftCache.findProject.taskGroups[idx].tasks = [];
-            }
-          }),
-        { projectID },
-      ),
-  });
-  const [duplicateTaskGroup] = useDuplicateTaskGroupMutation({
-    update: (client, resp) => {
-      updateApolloCache<FindProjectQuery>(
-        client,
-        FindProjectDocument,
-        cache =>
-          produce(cache, draftCache => {
-            draftCache.findProject.taskGroups.push(resp.data.duplicateTaskGroup.taskGroup);
-          }),
-        { projectID },
-      );
-    },
-  });
-
-  const [updateTaskDueDate] = useUpdateTaskDueDateMutation();
-  const [setTaskComplete] = useSetTaskCompleteMutation();
-  const [updateTaskLocation] = useUpdateTaskLocationMutation({
-    update: (client, newTask) => {
-      updateApolloCache<FindProjectQuery>(
-        client,
-        FindProjectDocument,
-        cache =>
-          produce(cache, draftCache => {
-            const { previousTaskGroupID, task } = newTask.data.updateTaskLocation;
-            if (previousTaskGroupID !== task.taskGroup.id) {
-              const { taskGroups } = cache.findProject;
-              const oldTaskGroupIdx = taskGroups.findIndex((t: TaskGroup) => t.id === previousTaskGroupID);
-              const newTaskGroupIdx = taskGroups.findIndex((t: TaskGroup) => t.id === task.taskGroup.id);
-              if (oldTaskGroupIdx !== -1 && newTaskGroupIdx !== -1) {
-                draftCache.findProject.taskGroups[oldTaskGroupIdx].tasks = taskGroups[oldTaskGroupIdx].tasks.filter(
-                  (t: Task) => t.id !== task.id,
-                );
-                draftCache.findProject.taskGroups[newTaskGroupIdx].tasks = [
-                  ...taskGroups[newTaskGroupIdx].tasks,
-                  { ...task },
-                ];
-              }
-            }
-          }),
-        { projectID },
-      );
-    },
-  });
-  const { user } = useCurrentUser();
-  const [deleteTask] = useDeleteTaskMutation();
-  const [toggleTaskLabel] = useToggleTaskLabelMutation({
-    onCompleted: newTaskLabel => {
-      taskLabelsRef.current = newTaskLabel.toggleTaskLabel.task.labels;
-    },
-  });
-
-  const onCreateTask = (taskGroupID: string, name: string) => {
-    if (data) {
-      const taskGroup = data.findProject.taskGroups.find(t => t.id === taskGroupID);
-      if (taskGroup) {
-        let position = 65535;
-        if (taskGroup.tasks.length !== 0) {
-          const [lastTask] = taskGroup.tasks
-            .slice()
-            .sort((a: any, b: any) => a.position - b.position)
-            .slice(-1);
-          position = Math.ceil(lastTask.position) * 2 + 1;
-        }
-
-        createTask({
-          variables: { taskGroupID, name, position },
-          optimisticResponse: {
-            __typename: 'Mutation',
-            createTask: {
-              __typename: 'Task',
-              id: `${Math.round(Math.random() * -1000000)}`,
-              name,
-              complete: false,
-              completedAt: null,
-              taskGroup: {
-                __typename: 'TaskGroup',
-                id: taskGroup.id,
-                name: taskGroup.name,
-                position: taskGroup.position,
-              },
-              badges: {
-                __typename: 'TaskBadges',
-                checklist: null,
-              },
-              position,
-              dueDate: null,
-              description: null,
-              labels: [],
-              assigned: [],
-            },
-          },
-        });
-      }
-    }
-  };
-
-  const onCreateList = (listName: string) => {
-    if (data && projectID) {
-      const [lastColumn] = data.findProject.taskGroups.sort((a, b) => a.position - b.position).slice(-1);
-      let position = 65535;
-      if (lastColumn) {
-        position = lastColumn.position * 2 + 1;
-      }
-      createTaskGroup({ variables: { projectID, name: listName, position } });
-    }
-  };
-
-  if (loading) {
-    return <BoardLoading />;
-  }
-  const getTaskStatusFilterLabel = (filter: TaskStatusFilter) => {
-    if (filter.status === TaskStatus.COMPLETE) {
-      return 'Complete';
-    }
-    if (filter.status === TaskStatus.INCOMPLETE) {
-      return 'Incomplete';
-    }
-    return 'All Tasks';
-  };
-  if (data && user) {
-    labelsRef.current = data.findProject.labels;
-    membersRef.current = data.findProject.members;
-    const onQuickEditorOpen = ($target: React.RefObject<HTMLElement>, taskID: string, taskGroupID: string) => {
-      const taskGroup = data.findProject.taskGroups.find(t => t.id === taskGroupID);
-      const currentTask = taskGroup ? taskGroup.tasks.find(t => t.id === taskID) : null;
-      if (currentTask) {
-        setQuickCardEditor({
-          target: $target,
-          isOpen: true,
-          taskID: currentTask.id,
-          taskGroupID: currentTask.taskGroup.id,
-        });
-      }
-    };
-    let currentQuickTask = null;
-    if (quickCardEditor.taskID && quickCardEditor.taskGroupID) {
-      const targetGroup = data.findProject.taskGroups.find(t => t.id === quickCardEditor.taskGroupID);
-      if (targetGroup) {
-        currentQuickTask = targetGroup.tasks.find(t => t.id === quickCardEditor.taskID);
-      }
-    }
-    return (
-      <>
-        <ProjectBar>
-          <ProjectActions>
-            <ProjectAction
-              onClick={target => {
-                showPopup(
-                  target,
-                  <Popup tab={0} title={null}>
-                    <FilterStatus
-                      filter={taskStatusFilter}
-                      onChangeTaskStatusFilter={filter => {
-                        setTaskStatusFilter(filter);
-                        hidePopup();
-                      }}
-                    />
-                  </Popup>,
-                  { width: 185 },
-                );
-              }}
-            >
-              <CheckCircle width={13} height={13} />
-              <ProjectActionText>{getTaskStatusFilterLabel(taskStatusFilter)}</ProjectActionText>
-            </ProjectAction>
-            <ProjectAction
-              onClick={target => {
-                showPopup(
-                  target,
-                  <Popup tab={0} title={null}>
-                    <SortPopup
-                      sorting={taskSorting}
-                      onChangeTaskSorting={sorting => {
-                        setTaskSorting(sorting);
-                      }}
-                    />
-                  </Popup>,
-                  { width: 185 },
-                );
-              }}
-            >
-              <Sort width={13} height={13} />
-              <ProjectActionText>{renderTaskSortingLabel(taskSorting)}</ProjectActionText>
-            </ProjectAction>
-            <ProjectAction
-              onClick={target => {
-                showPopup(
-                  target,
-                  <FilterMeta
-                    filters={taskMetaFilters}
-                    onChangeTaskMetaFilter={filter => {
-                      setTaskMetaFilters(filter);
-                    }}
-                    userID={user?.id}
-                    labels={labelsRef}
-                    members={membersRef}
-                  />,
-                  { width: 200 },
-                );
-              }}
-            >
-              <Filter width={13} height={13} />
-              <ProjectActionText>Filter</ProjectActionText>
-            </ProjectAction>
-            {renderMetaFilters(taskMetaFilters, (meta, id) => {
-              setTaskMetaFilters(
-                produce(taskMetaFilters, draftFilters => {
-                  if (meta === TaskMeta.MEMBER) {
-                    draftFilters.members = draftFilters.members.filter(m => m.id !== id);
-                  } else if (meta === TaskMeta.LABEL) {
-                    draftFilters.labels = draftFilters.labels.filter(m => m.id !== id);
-                  } else if (meta === TaskMeta.TITLE) {
-                    draftFilters.taskName = null;
-                  } else if (meta === TaskMeta.DUE_DATE) {
-                    draftFilters.dueDate = null;
-                  }
-                }),
-              );
-            })}
-          </ProjectActions>
-          <ProjectActions>
-            <ProjectAction
-              onClick={$labelsRef => {
-                showPopup(
-                  $labelsRef,
-                  <LabelManagerEditor
-                    taskLabels={null}
-                    labelColors={data.labelColors}
-                    labels={labelsRef}
-                    projectID={projectID ?? ''}
-                  />,
-                );
-              }}
-            >
-              <Tags width={13} height={13} />
-              <ProjectActionText>Labels</ProjectActionText>
-            </ProjectAction>
-            <ProjectAction disabled>
-              <ToggleOn width={13} height={13} />
-              <ProjectActionText>Fields</ProjectActionText>
-            </ProjectAction>
-            <ProjectAction disabled>
-              <Bolt width={13} height={13} />
-              <ProjectActionText>Rules</ProjectActionText>
-            </ProjectAction>
-          </ProjectActions>
-        </ProjectBar>
-        <SimpleLists
-          onTaskClick={task => {
-            history.push(`${match.url}/c/${task.id}`);
-          }}
-          onCardLabelClick={onCardLabelClick ?? NOOP}
-          cardLabelVariant={cardLabelVariant ?? 'large'}
-          onTaskDrop={(droppedTask, previousTaskGroupID) => {
-            updateTaskLocation({
-              variables: {
-                taskID: droppedTask.id,
-                taskGroupID: droppedTask.taskGroup.id,
-                position: droppedTask.position,
-              },
-              optimisticResponse: {
-                __typename: 'Mutation',
-                updateTaskLocation: {
-                  __typename: 'UpdateTaskLocationPayload',
-                  previousTaskGroupID,
-                  task: {
-                    ...droppedTask,
-                    __typename: 'Task',
-                    name: droppedTask.name,
-                    id: droppedTask.id,
-                    position: droppedTask.position,
-                    taskGroup: {
-                      id: droppedTask.taskGroup.id,
-                      __typename: 'TaskGroup',
-                    },
-                    createdAt: '',
-                  },
-                },
-              },
-            });
-          }}
-          onTaskGroupDrop={droppedTaskGroup => {
-            updateTaskGroupLocation({
-              variables: { taskGroupID: droppedTaskGroup.id, position: droppedTaskGroup.position },
-              optimisticResponse: {
-                __typename: 'Mutation',
-                updateTaskGroupLocation: {
-                  id: droppedTaskGroup.id,
-                  position: droppedTaskGroup.position,
-                  __typename: 'TaskGroup',
-                },
-              },
-            });
-          }}
-          taskGroups={data.findProject.taskGroups}
-          taskStatusFilter={taskStatusFilter}
-          taskMetaFilters={taskMetaFilters}
-          taskSorting={taskSorting}
-          onCreateTask={onCreateTask}
-          onCreateTaskGroup={onCreateList}
-          onCardMemberClick={($targetRef, _taskID, memberID) => {
-            const member = data.findProject.members.find(m => m.id === memberID);
-            if (member) {
-              showPopup(
-                $targetRef,
-                <MiniProfile
-                  user={member}
-                  bio="None"
-                  onRemoveFromTask={() => {
-                    /* unassignTask({ variables: { taskID: data.findTask.id, userID: userID ?? '' } }); */
-                  }}
-                />,
-              );
-            }
-          }}
-          onChangeTaskGroupName={(taskGroupID, name) => {
-            updateTaskGroupName({ variables: { taskGroupID, name } });
-          }}
-          onQuickEditorOpen={onQuickEditorOpen}
-          onExtraMenuOpen={(taskGroupID: string, $targetRef: any) => {
-            showPopup(
-              $targetRef,
-              <ListActions
-                taskGroupID={taskGroupID}
-                onDeleteTaskGroupTasks={() => {
-                  deleteTaskGroupTasks({ variables: { taskGroupID } });
-                  hidePopup();
-                }}
-                onSortTaskGroup={taskSort => {
-                  const taskGroup = data.findProject.taskGroups.find(t => t.id === taskGroupID);
-                  if (taskGroup) {
-                    const tasks: Array<{ taskID: string; position: number }> = taskGroup.tasks
-                      .sort((a, b) => sortTasks(a, b, taskSort))
-                      .reduce((prevTasks: Array<{ taskID: string; position: number }>, t, idx) => {
-                        prevTasks.push({ taskID: t.id, position: (idx + 1) * 2048 });
-                        return tasks;
-                      }, []);
-                    sortTaskGroup({ variables: { taskGroupID, tasks } });
-                    hidePopup();
-                  }
-                }}
-                onDuplicateTaskGroup={newName => {
-                  const idx = data.findProject.taskGroups.findIndex(t => t.id === taskGroupID);
-                  if (idx !== -1) {
-                    const taskGroups = data.findProject.taskGroups.sort((a, b) => a.position - b.position);
-                    const prevPos = taskGroups[idx].position;
-                    const next = taskGroups[idx + 1];
-                    let newPos = prevPos * 2;
-                    if (next) {
-                      newPos = (prevPos + next.position) / 2.0;
-                    }
-                    duplicateTaskGroup({ variables: { projectID, taskGroupID, name: newName, position: newPos } });
-                    hidePopup();
-                  }
-                }}
-                onArchiveTaskGroup={tgID => {
-                  deleteTaskGroup({ variables: { taskGroupID: tgID } });
-                  hidePopup();
-                }}
-              />,
-            );
-          }}
-        />
-        {quickCardEditor.isOpen && currentQuickTask && quickCardEditor.target && (
-          <QuickCardEditor
-            task={currentQuickTask}
-            onCloseEditor={() => setQuickCardEditor(initialQuickCardEditorState)}
-            onEditCard={(_taskGroupID: string, taskID: string, cardName: string) => {
-              updateTaskName({ variables: { taskID, name: cardName } });
-            }}
-            onOpenMembersPopup={($targetRef, task) => {
-              showPopup(
-                $targetRef,
-                <Popup title="Members" tab={0} onClose={() => hidePopup()}>
-                  <MemberManager
-                    availableMembers={data.findProject.members}
-                    activeMembers={task.assigned ?? []}
-                    onMemberChange={(member, isActive) => {
-                      if (isActive) {
-                        assignTask({ variables: { taskID: task.id, userID: member.id } });
-                      } else {
-                        unassignTask({ variables: { taskID: task.id, userID: member.id } });
-                      }
-                    }}
-                  />
-                </Popup>,
-              );
-            }}
-            onCardMemberClick={($targetRef, _taskID, memberID) => {
-              const member = data.findProject.members.find(m => m.id === memberID);
-              if (member) {
-                showPopup(
-                  $targetRef,
-                  <MiniProfile
-                    bio="None"
-                    user={member}
-                    onRemoveFromTask={() => {
-                      /* unassignTask({ variables: { taskID: data.findTask.id, userID: userID ?? '' } }); */
-                    }}
-                  />,
-                );
-              }
-            }}
-            onOpenLabelsPopup={($targetRef, task) => {
-              taskLabelsRef.current = task.labels;
-              showPopup(
-                $targetRef,
-                <LabelManagerEditor
-                  onLabelToggle={labelID => {
-                    toggleTaskLabel({ variables: { taskID: task.id, projectLabelID: labelID } });
-                  }}
-                  labelColors={data.labelColors}
-                  labels={labelsRef}
-                  taskLabels={taskLabelsRef}
-                  projectID={projectID ?? ''}
-                />,
-              );
-            }}
-            onArchiveCard={(_listId: string, cardId: string) => {
-              return deleteTask({
-                variables: { taskID: cardId },
-                update: client => {
-                  updateApolloCache<FindProjectQuery>(
-                    client,
-                    FindProjectDocument,
-                    cache =>
-                      produce(cache, draftCache => {
-                        draftCache.findProject.taskGroups = cache.findProject.taskGroups.map(taskGroup => ({
-                          ...taskGroup,
-                          tasks: taskGroup.tasks.filter(t => t.id !== cardId),
-                        }));
-                      }),
-                    { projectID },
-                  );
-                },
-              });
-            }}
-            onOpenDueDatePopup={($targetRef, task) => {
-              showPopup(
-                $targetRef,
-                <Popup title="Change Due Date" tab={0} onClose={() => hidePopup()}>
-                  <DueDateManager
-                    task={task}
-                    onRemoveDueDate={t => {
-                      updateTaskDueDate({ variables: { taskID: t.id, dueDate: null } });
-                      hidePopup();
-                    }}
-                    onDueDateChange={(t, newDueDate) => {
-                      updateTaskDueDate({ variables: { taskID: t.id, dueDate: newDueDate } });
-                      hidePopup();
-                    }}
-                    onCancel={NOOP}
-                  />
-                </Popup>,
-              );
-            }}
-            onToggleComplete={task => {
-              setTaskComplete({ variables: { taskID: task.id, complete: !task.complete } });
-            }}
-            target={quickCardEditor.target}
-          />
-        )}
-      </>
-    );
-  }
-
-  return <span>Error</span>;
-};
-
-export default ProjectBoard;

frontend/src/Projects/Project/Details/index.tsx

@@ -1,519 +0,0 @@
-import React, { useState } from 'react';
-import Modal from 'shared/components/Modal';
-import TaskDetails from 'shared/components/TaskDetails';
-import { Popup, usePopup } from 'shared/components/PopupMenu';
-import MemberManager from 'shared/components/MemberManager';
-import { useRouteMatch, useHistory } from 'react-router';
-import {
-  useDeleteTaskChecklistMutation,
-  useUpdateTaskChecklistNameMutation,
-  useUpdateTaskChecklistItemLocationMutation,
-  useCreateTaskChecklistMutation,
-  useFindTaskQuery,
-  useUpdateTaskDueDateMutation,
-  useSetTaskCompleteMutation,
-  useAssignTaskMutation,
-  useUnassignTaskMutation,
-  useSetTaskChecklistItemCompleteMutation,
-  useUpdateTaskChecklistLocationMutation,
-  useDeleteTaskChecklistItemMutation,
-  useUpdateTaskChecklistItemNameMutation,
-  useCreateTaskChecklistItemMutation,
-  FindTaskDocument,
-  FindTaskQuery,
-} from 'shared/generated/graphql';
-import { useCurrentUser } from 'App/context';
-import MiniProfile from 'shared/components/MiniProfile';
-import DueDateManager from 'shared/components/DueDateManager';
-import produce from 'immer';
-import styled from 'styled-components';
-import Button from 'shared/components/Button';
-import Input from 'shared/components/Input';
-import { useForm } from 'react-hook-form';
-import updateApolloCache from 'shared/utils/cache';
-import NOOP from 'shared/utils/noop';
-
-const calculateChecklistBadge = (checklists: Array<TaskChecklist>) => {
-  const total = checklists.reduce((prev: any, next: any) => {
-    return (
-      prev +
-      next.items.reduce((innerPrev: any, _item: any) => {
-        return innerPrev + 1;
-      }, 0)
-    );
-  }, 0);
-  const complete = checklists.reduce(
-    (prev: any, next: any) =>
-      prev +
-      next.items.reduce((innerPrev: any, item: any) => {
-        return innerPrev + (item.complete ? 1 : 0);
-      }, 0),
-    0,
-  );
-  return { total, complete };
-};
-
-const DeleteChecklistButton = styled(Button)`
-  width: 100%;
-  padding: 6px 12px;
-  margin-top: 8px;
-`;
-type CreateChecklistData = {
-  name: string;
-};
-const CreateChecklistForm = styled.form`
-  display: flex;
-  flex-direction: column;
-`;
-
-const CreateChecklistButton = styled(Button)`
-  margin-top: 8px;
-  padding: 6px 12px;
-  width: 100%;
-`;
-
-const CreateChecklistInput = styled(Input)`
-  margin-bottom: 8px;
-`;
-
-type CreateChecklistPopupProps = {
-  onCreateChecklist: (data: CreateChecklistData) => void;
-};
-
-const CreateChecklistPopup: React.FC<CreateChecklistPopupProps> = ({ onCreateChecklist }) => {
-  const { register, handleSubmit } = useForm<CreateChecklistData>();
-  const createUser = (data: CreateChecklistData) => {
-    onCreateChecklist(data);
-  };
-  return (
-    <CreateChecklistForm onSubmit={handleSubmit(createUser)}>
-      <CreateChecklistInput
-        floatingLabel
-        autoFocus
-        autoSelect
-        defaultValue="Checklist"
-        width="100%"
-        label="Name"
-        id="name"
-        name="name"
-        variant="alternate"
-        ref={register({ required: 'Checklist name is required' })}
-      />
-      <CreateChecklistButton type="submit">Create</CreateChecklistButton>
-    </CreateChecklistForm>
-  );
-};
-
-type DetailsProps = {
-  taskID: string;
-  projectURL: string;
-  onTaskNameChange: (task: Task, newName: string) => void;
-  onTaskDescriptionChange: (task: Task, newDescription: string) => void;
-  onDeleteTask: (task: Task) => void;
-  onOpenAddLabelPopup: (task: Task, $targetRef: React.RefObject<HTMLElement>) => void;
-  availableMembers: Array<TaskUser>;
-  refreshCache: () => void;
-};
-
-const initialMemberPopupState = { taskID: '', isOpen: false, top: 0, left: 0 };
-
-const Details: React.FC<DetailsProps> = ({
-  projectURL,
-  taskID,
-  onTaskNameChange,
-  onTaskDescriptionChange,
-  onDeleteTask,
-  onOpenAddLabelPopup,
-  availableMembers,
-  refreshCache,
-}) => {
-  const { user } = useCurrentUser();
-  const { showPopup, hidePopup } = usePopup();
-  const history = useHistory();
-  const [updateTaskChecklistLocation] = useUpdateTaskChecklistLocationMutation();
-  const [updateTaskChecklistItemLocation] = useUpdateTaskChecklistItemLocationMutation({
-    update: (client, response) => {
-      updateApolloCache<FindTaskQuery>(
-        client,
-        FindTaskDocument,
-        cache =>
-          produce(cache, draftCache => {
-            const { prevChecklistID, checklistID, checklistItem } = response.data.updateTaskChecklistItemLocation;
-            if (checklistID !== prevChecklistID) {
-              const oldIdx = cache.findTask.checklists.findIndex(c => c.id === prevChecklistID);
-              const newIdx = cache.findTask.checklists.findIndex(c => c.id === checklistID);
-              if (oldIdx > -1 && newIdx > -1) {
-                const item = cache.findTask.checklists[oldIdx].items.find(i => i.id === checklistItem.id);
-                if (item) {
-                  draftCache.findTask.checklists[oldIdx].items = cache.findTask.checklists[oldIdx].items.filter(
-                    i => i.id !== checklistItem.id,
-                  );
-                  draftCache.findTask.checklists[newIdx].items.push({
-                    ...item,
-                    position: checklistItem.position,
-                    taskChecklistID: checklistID,
-                  });
-                }
-              }
-            }
-          }),
-        { taskID },
-      );
-    },
-  });
-  const [setTaskChecklistItemComplete] = useSetTaskChecklistItemCompleteMutation({
-    update: client => {
-      updateApolloCache<FindTaskQuery>(
-        client,
-        FindTaskDocument,
-        cache =>
-          produce(cache, draftCache => {
-            const { complete, total } = calculateChecklistBadge(draftCache.findTask.checklists);
-            draftCache.findTask.badges.checklist = {
-              __typename: 'ChecklistBadge',
-              complete,
-              total,
-            };
-          }),
-        { taskID },
-      );
-    },
-  });
-  const [deleteTaskChecklist] = useDeleteTaskChecklistMutation({
-    update: (client, deleteData) => {
-      updateApolloCache<FindTaskQuery>(
-        client,
-        FindTaskDocument,
-        cache =>
-          produce(cache, draftCache => {
-            const { checklists } = cache.findTask;
-            draftCache.findTask.checklists = checklists.filter(
-              c => c.id !== deleteData.data.deleteTaskChecklist.taskChecklist.id,
-            );
-            const { complete, total } = calculateChecklistBadge(draftCache.findTask.checklists);
-            draftCache.findTask.badges.checklist = {
-              __typename: 'ChecklistBadge',
-              complete,
-              total,
-            };
-            if (complete === 0 && total === 0) {
-              draftCache.findTask.badges.checklist = null;
-            }
-          }),
-        { taskID },
-      );
-    },
-  });
-  const [updateTaskChecklistItemName] = useUpdateTaskChecklistItemNameMutation();
-  const [createTaskChecklist] = useCreateTaskChecklistMutation({
-    update: (client, createData) => {
-      updateApolloCache<FindTaskQuery>(
-        client,
-        FindTaskDocument,
-        cache =>
-          produce(cache, draftCache => {
-            const item = createData.data.createTaskChecklist;
-            draftCache.findTask.checklists.push({ ...item });
-          }),
-        { taskID },
-      );
-    },
-  });
-  const [updateTaskChecklistName] = useUpdateTaskChecklistNameMutation();
-  const [deleteTaskChecklistItem] = useDeleteTaskChecklistItemMutation({
-    update: (client, deleteData) => {
-      updateApolloCache<FindTaskQuery>(
-        client,
-        FindTaskDocument,
-        cache =>
-          produce(cache, draftCache => {
-            const item = deleteData.data.deleteTaskChecklistItem.taskChecklistItem;
-            const targetIdx = cache.findTask.checklists.findIndex(c => c.id === item.taskChecklistID);
-            if (targetIdx > -1) {
-              draftCache.findTask.checklists[targetIdx].items = cache.findTask.checklists[targetIdx].items.filter(
-                c => item.id !== c.id,
-              );
-            }
-            const { complete, total } = calculateChecklistBadge(draftCache.findTask.checklists);
-            draftCache.findTask.badges.checklist = {
-              __typename: 'ChecklistBadge',
-              complete,
-              total,
-            };
-          }),
-        { taskID },
-      );
-    },
-  });
-  const [createTaskChecklistItem] = useCreateTaskChecklistItemMutation({
-    update: (client, newTaskItem) => {
-      updateApolloCache<FindTaskQuery>(
-        client,
-        FindTaskDocument,
-        cache =>
-          produce(cache, draftCache => {
-            const item = newTaskItem.data.createTaskChecklistItem;
-            const { checklists } = cache.findTask;
-            const idx = checklists.findIndex(c => c.id === item.taskChecklistID);
-            if (idx !== -1) {
-              draftCache.findTask.checklists[idx].items.push({ ...item });
-              const { complete, total } = calculateChecklistBadge(draftCache.findTask.checklists);
-              draftCache.findTask.badges.checklist = {
-                __typename: 'ChecklistBadge',
-                complete,
-                total,
-              };
-            }
-          }),
-        { taskID },
-      );
-    },
-  });
-  const { loading, data, refetch } = useFindTaskQuery({ variables: { taskID } });
-  const [setTaskComplete] = useSetTaskCompleteMutation();
-  const [updateTaskDueDate] = useUpdateTaskDueDateMutation({
-    onCompleted: () => {
-      refetch();
-      refreshCache();
-    },
-  });
-  const [assignTask] = useAssignTaskMutation({
-    onCompleted: () => {
-      refetch();
-      refreshCache();
-    },
-  });
-  const [unassignTask] = useUnassignTaskMutation({
-    onCompleted: () => {
-      refetch();
-      refreshCache();
-    },
-  });
-  if (loading) {
-    return null;
-  }
-  if (!data) {
-    return null;
-  }
-  return (
-    <>
-      <Modal
-        width={1070}
-        onClose={() => {
-          history.push(projectURL);
-        }}
-        renderContent={() => {
-          return (
-            <TaskDetails
-              me={data.me.user}
-              task={data.findTask}
-              onChecklistDrop={checklist => {
-                updateTaskChecklistLocation({
-                  variables: { taskChecklistID: checklist.id, position: checklist.position },
-
-                  optimisticResponse: {
-                    __typename: 'Mutation',
-                    updateTaskChecklistLocation: {
-                      __typename: 'UpdateTaskChecklistLocationPayload',
-                      checklist: {
-                        __typename: 'TaskChecklist',
-                        position: checklist.position,
-                        id: checklist.id,
-                      },
-                    },
-                  },
-                });
-              }}
-              onChecklistItemDrop={(prevChecklistID, taskChecklistID, checklistItem) => {
-                updateTaskChecklistItemLocation({
-                  variables: {
-                    taskChecklistID,
-                    taskChecklistItemID: checklistItem.id,
-                    position: checklistItem.position,
-                  },
-                  optimisticResponse: {
-                    __typename: 'Mutation',
-                    updateTaskChecklistItemLocation: {
-                      __typename: 'UpdateTaskChecklistItemLocationPayload',
-                      prevChecklistID,
-                      taskChecklistID,
-                      checklistItem: {
-                        __typename: 'TaskChecklistItem',
-                        position: checklistItem.position,
-                        id: checklistItem.id,
-                        taskChecklistID,
-                      },
-                    },
-                  },
-                });
-              }}
-              onTaskNameChange={onTaskNameChange}
-              onTaskDescriptionChange={onTaskDescriptionChange}
-              onToggleTaskComplete={task => {
-                setTaskComplete({ variables: { taskID: task.id, complete: !task.complete } });
-              }}
-              onDeleteTask={onDeleteTask}
-              onChangeItemName={(itemID, itemName) => {
-                updateTaskChecklistItemName({ variables: { taskChecklistItemID: itemID, name: itemName } });
-              }}
-              onCloseModal={() => history.push(projectURL)}
-              onChangeChecklistName={(checklistID, newName) => {
-                updateTaskChecklistName({ variables: { taskChecklistID: checklistID, name: newName } });
-              }}
-              onDeleteItem={(checklistID, itemID) => {
-                deleteTaskChecklistItem({
-                  variables: { taskChecklistItemID: itemID },
-                  optimisticResponse: {
-                    __typename: 'Mutation',
-                    deleteTaskChecklistItem: {
-                      __typename: 'DeleteTaskChecklistItemPayload',
-                      ok: true,
-                      taskChecklistItem: {
-                        __typename: 'TaskChecklistItem',
-                        id: itemID,
-                        taskChecklistID: checklistID,
-                      },
-                    },
-                  },
-                });
-              }}
-              onToggleChecklistItem={(itemID, complete) => {
-                setTaskChecklistItemComplete({
-                  variables: { taskChecklistItemID: itemID, complete },
-                  optimisticResponse: {
-                    __typename: 'Mutation',
-                    setTaskChecklistItemComplete: {
-                      __typename: 'TaskChecklistItem',
-                      id: itemID,
-                      complete,
-                    },
-                  },
-                });
-              }}
-              onAddItem={(taskChecklistID, name, position) => {
-                createTaskChecklistItem({ variables: { taskChecklistID, name, position } });
-              }}
-              onMemberProfile={($targetRef, memberID) => {
-                const member = data.findTask.assigned.find(m => m.id === memberID);
-                if (member) {
-                  showPopup(
-                    $targetRef,
-                    <Popup title={null} onClose={NOOP} tab={0}>
-                      <MiniProfile
-                        user={member}
-                        bio="None"
-                        onRemoveFromTask={() => {
-                          if (user) {
-                            unassignTask({ variables: { taskID: data.findTask.id, userID: user.id } });
-                          }
-                        }}
-                      />
-                    </Popup>,
-                  );
-                }
-              }}
-              onOpenAddMemberPopup={(_task, $targetRef) => {
-                showPopup(
-                  $targetRef,
-                  <Popup title="Members" tab={0} onClose={NOOP}>
-                    <MemberManager
-                      availableMembers={availableMembers}
-                      activeMembers={data.findTask.assigned}
-                      onMemberChange={(member, isActive) => {
-                        if (user) {
-                          if (isActive) {
-                            assignTask({ variables: { taskID: data.findTask.id, userID: member.id } });
-                          } else {
-                            unassignTask({ variables: { taskID: data.findTask.id, userID: member.id } });
-                          }
-                        }
-                      }}
-                    />
-                  </Popup>,
-                );
-              }}
-              onOpenAddLabelPopup={onOpenAddLabelPopup}
-              onOpenAddChecklistPopup={(_task, $target) => {
-                showPopup(
-                  $target,
-                  <Popup
-                    title="Add checklist"
-                    tab={0}
-                    onClose={() => {
-                      hidePopup();
-                    }}
-                  >
-                    <CreateChecklistPopup
-                      onCreateChecklist={checklistData => {
-                        let position = 65535;
-                        if (data.findTask.checklists) {
-                          const [lastChecklist] = data.findTask.checklists.slice(-1);
-                          if (lastChecklist) {
-                            position = lastChecklist.position * 2 + 1;
-                          }
-                        }
-                        createTaskChecklist({
-                          variables: {
-                            taskID: data.findTask.id,
-                            name: checklistData.name,
-                            position,
-                          },
-                        });
-                        hidePopup();
-                      }}
-                    />
-                  </Popup>,
-                );
-              }}
-              onDeleteChecklist={($target, checklistID) => {
-                showPopup(
-                  $target,
-                  <Popup tab={0} title="Delete checklist?" onClose={() => hidePopup()}>
-                    <p>Deleting a checklist is permanent and there is no way to get it back.</p>
-                    <DeleteChecklistButton
-                      color="danger"
-                      onClick={() => {
-                        deleteTaskChecklist({ variables: { taskChecklistID: checklistID } });
-                        hidePopup();
-                      }}
-                    >
-                      Delete Checklist
-                    </DeleteChecklistButton>
-                  </Popup>,
-                );
-              }}
-              onOpenDueDatePopop={(task, $targetRef) => {
-                showPopup(
-                  $targetRef,
-                  <Popup
-                    title="Change Due Date"
-                    tab={0}
-                    onClose={() => {
-                      hidePopup();
-                    }}
-                  >
-                    <DueDateManager
-                      task={task}
-                      onRemoveDueDate={t => {
-                        updateTaskDueDate({ variables: { taskID: t.id, dueDate: null } });
-                        hidePopup();
-                      }}
-                      onDueDateChange={(t, newDueDate) => {
-                        updateTaskDueDate({ variables: { taskID: t.id, dueDate: newDueDate } });
-                        hidePopup();
-                      }}
-                      onCancel={NOOP}
-                    />
-                  </Popup>,
-                  { showDiamond: false, targetPadding: '0' },
-                );
-              }}
-            />
-          );
-        }}
-      />
-    </>
-  );
-};
-
-export default Details;

frontend/src/Projects/Project/LabelManagerEditor/index.tsx

@@ -1,131 +0,0 @@
-import React, { useState } from 'react';
-import updateApolloCache from 'shared/utils/cache';
-import { usePopup, Popup } from 'shared/components/PopupMenu';
-import produce from 'immer';
-import {
-  useUpdateProjectLabelMutation,
-  useDeleteProjectLabelMutation,
-  FindProjectDocument,
-  useCreateProjectLabelMutation,
-  FindProjectQuery,
-} from 'shared/generated/graphql';
-import LabelManager from 'shared/components/PopupMenu/LabelManager';
-import LabelEditor from 'shared/components/PopupMenu/LabelEditor';
-
-type LabelManagerEditorProps = {
-  labels: React.RefObject<Array<ProjectLabel>>;
-  taskLabels: null | React.RefObject<Array<TaskLabel>>;
-  projectID: string;
-  labelColors: Array<LabelColor>;
-  onLabelToggle?: (labelId: string) => void;
-};
-
-const LabelManagerEditor: React.FC<LabelManagerEditorProps> = ({
-  labels: labelsRef,
-  projectID,
-  labelColors,
-  onLabelToggle,
-  taskLabels: taskLabelsRef,
-}) => {
-  const [currentLabel, setCurrentLabel] = useState('');
-  const { setTab, hidePopup } = usePopup();
-  const [createProjectLabel] = useCreateProjectLabelMutation({
-    update: (client, newLabelData) => {
-      updateApolloCache<FindProjectQuery>(
-        client,
-        FindProjectDocument,
-        cache =>
-          produce(cache, draftCache => {
-            draftCache.findProject.labels.push({ ...newLabelData.data.createProjectLabel });
-          }),
-        {
-          projectID,
-        },
-      );
-    },
-  });
-  const [updateProjectLabel] = useUpdateProjectLabelMutation();
-  const [deleteProjectLabel] = useDeleteProjectLabelMutation({
-    update: (client, newLabelData) => {
-      updateApolloCache<FindProjectQuery>(
-        client,
-        FindProjectDocument,
-        cache =>
-          produce(cache, draftCache => {
-            draftCache.findProject.labels = cache.findProject.labels.filter(
-              label => label.id !== newLabelData.data.deleteProjectLabel.id,
-            );
-          }),
-        { projectID },
-      );
-    },
-  });
-  const labels = labelsRef.current ? labelsRef.current : [];
-  const taskLabels = taskLabelsRef && taskLabelsRef.current ? taskLabelsRef.current : [];
-  const [currentTaskLabels, setCurrentTaskLabels] = useState(taskLabels);
-  return (
-    <>
-      <Popup title="Labels" tab={0} onClose={() => hidePopup()}>
-        <LabelManager
-          labels={labels}
-          taskLabels={currentTaskLabels}
-          onLabelCreate={() => {
-            setTab(2);
-          }}
-          onLabelEdit={labelId => {
-            setCurrentLabel(labelId);
-            setTab(1);
-          }}
-          onLabelToggle={labelId => {
-            if (onLabelToggle) {
-              if (currentTaskLabels.find(t => t.projectLabel.id === labelId)) {
-                setCurrentTaskLabels(currentTaskLabels.filter(t => t.projectLabel.id !== labelId));
-              } else {
-                const newProjectLabel = labels.find(l => l.id === labelId);
-                if (newProjectLabel) {
-                  setCurrentTaskLabels([
-                    ...currentTaskLabels,
-                    { id: '', assignedDate: '', projectLabel: { ...newProjectLabel } },
-                  ]);
-                }
-              }
-              setCurrentLabel(labelId);
-              onLabelToggle(labelId);
-            } else {
-              setCurrentLabel(labelId);
-              setTab(1);
-            }
-          }}
-        />
-      </Popup>
-      <Popup onClose={() => hidePopup()} title="Edit label" tab={1}>
-        <LabelEditor
-          labelColors={labelColors}
-          label={labels.find(label => label.id === currentLabel) ?? null}
-          onLabelEdit={(projectLabelID, name, color) => {
-            if (projectLabelID) {
-              updateProjectLabel({ variables: { projectLabelID, labelColorID: color.id, name: name ?? '' } });
-            }
-            setTab(0);
-          }}
-          onLabelDelete={labelID => {
-            deleteProjectLabel({ variables: { projectLabelID: labelID } });
-            setTab(0);
-          }}
-        />
-      </Popup>
-      <Popup onClose={() => hidePopup()} title="Create new label" tab={2}>
-        <LabelEditor
-          labelColors={labelColors}
-          label={null}
-          onLabelEdit={(_labelId, name, color) => {
-            createProjectLabel({ variables: { projectID, labelColorID: color.id, name: name ?? '' } });
-            setTab(0);
-          }}
-        />
-      </Popup>
-    </>
-  );
-};
-
-export default LabelManagerEditor;

frontend/src/Projects/Project/index.tsx

@@ -1,645 +0,0 @@
-// LOC830
-import React, { useState, useRef, useEffect, useContext } from 'react';
-import updateApolloCache from 'shared/utils/cache';
-import GlobalTopNavbar, { ProjectPopup } from 'App/TopNavbar';
-import styled from 'styled-components/macro';
-import AsyncSelect from 'react-select/async';
-import { usePopup, Popup } from 'shared/components/PopupMenu';
-import {
-  useParams,
-  Route,
-  useRouteMatch,
-  useHistory,
-  RouteComponentProps,
-  useLocation,
-  Redirect,
-} from 'react-router-dom';
-import {
-  useUpdateProjectMemberRoleMutation,
-  useInviteProjectMembersMutation,
-  useDeleteProjectMemberMutation,
-  useToggleTaskLabelMutation,
-  useUpdateProjectNameMutation,
-  useFindProjectQuery,
-  useDeleteInvitedProjectMemberMutation,
-  useUpdateTaskNameMutation,
-  useCreateTaskMutation,
-  useDeleteTaskMutation,
-  useUpdateTaskLocationMutation,
-  useUpdateTaskGroupLocationMutation,
-  useCreateTaskGroupMutation,
-  useUpdateTaskDescriptionMutation,
-  FindProjectDocument,
-  FindProjectQuery,
-} from 'shared/generated/graphql';
-
-import produce from 'immer';
-import UserContext, { useCurrentUser } from 'App/context';
-import Input from 'shared/components/Input';
-import Member from 'shared/components/Member';
-import EmptyBoard from 'shared/components/EmptyBoard';
-import NOOP from 'shared/utils/noop';
-import { Lock, Cross } from 'shared/icons';
-import Button from 'shared/components/Button';
-import { useApolloClient } from '@apollo/react-hooks';
-import TaskAssignee from 'shared/components/TaskAssignee';
-import gql from 'graphql-tag';
-import { colourStyles } from 'shared/components/Select';
-import Board, { BoardLoading } from './Board';
-import Details from './Details';
-import LabelManagerEditor from './LabelManagerEditor';
-import { mixin } from '../../shared/utils/styles';
-
-const CARD_LABEL_VARIANT_STORAGE_KEY = 'card_label_variant';
-
-const RFC2822_EMAIL = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;
-
-const useStateWithLocalStorage = (localStorageKey: string): [string, React.Dispatch<React.SetStateAction<string>>] => {
-  const [value, setValue] = React.useState<string>(localStorage.getItem(localStorageKey) || '');
-
-  React.useEffect(() => {
-    localStorage.setItem(localStorageKey, value);
-  }, [value]);
-
-  return [value, setValue];
-};
-
-const SearchInput = styled(Input)`
-  margin: 0;
-`;
-
-const UserMember = styled(Member)`
-  padding: 4px 0;
-  cursor: pointer;
-  &:hover {
-    background: ${props => mixin.rgba(props.theme.colors.bg.primary, 0.4)};
-  }
-  border-radius: 6px;
-`;
-
-const MemberList = styled.div`
-  margin: 8px 0;
-`;
-
-type InviteUserData = {
-  email?: string;
-  suerID?: string;
-};
-type UserManagementPopupProps = {
-  projectID: string;
-  users: Array<User>;
-  projectMembers: Array<TaskUser>;
-  onInviteProjectMembers: (data: Array<InviteUserData>) => void;
-};
-
-const VisibiltyPrivateIcon = styled(Lock)`
-  padding-right: 4px;
-`;
-
-const VisibiltyButtonText = styled.span`
-  color: rgba(${props => props.theme.colors.text.primary});
-`;
-
-const ShareActions = styled.div`
-  border-top: 1px solid #414561;
-  margin-top: 8px;
-  padding-top: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-`;
-
-const VisibiltyButton = styled.button`
-  cursor: pointer;
-  margin: 2px 4px;
-  padding: 2px 4px;
-  align-items: center;
-  justify-content: center;
-  border-bottom: 1px solid transparent;
-  &:hover ${VisibiltyButtonText} {
-    color: rgba(${props => props.theme.colors.text.secondary});
-  }
-  &:hover ${VisibiltyPrivateIcon} {
-    fill: rgba(${props => props.theme.colors.text.secondary});
-    stroke: rgba(${props => props.theme.colors.text.secondary});
-  }
-  &:hover {
-    border-bottom: 1px solid rgba(${props => props.theme.colors.primary});
-  }
-`;
-
-type MemberFilterOptions = {
-  projectID?: null | string;
-  teamID?: null | string;
-  organization?: boolean;
-};
-
-const fetchMembers = async (client: any, projectID: string, options: MemberFilterOptions, input: string, cb: any) => {
-  console.log(input.trim().length < 3);
-  if (input && input.trim().length < 3) {
-    return [];
-  }
-  const res = await client.query({
-    query: gql`
-    query {
-      searchMembers(input: {searchFilter:"${input}", projectID:"${projectID}"}) {
-        id
-        similarity
-        status
-        user {
-          id
-          fullName
-          email
-          profileIcon {
-            url
-            initials
-            bgColor
-          }
-        }
-      }
-    }
-    `,
-  });
-
-  let results: any = [];
-  const emails: Array<string> = [];
-  console.log(res.data && res.data.searchMembers);
-  if (res.data && res.data.searchMembers) {
-    results = [
-      ...res.data.searchMembers.map((m: any) => {
-        if (m.status === 'INVITED') {
-          console.log(`${m.id} is added`);
-          return {
-            label: m.id,
-            value: {
-              id: m.id,
-              type: 2,
-              profileIcon: {
-                bgColor: '#ccc',
-                initials: m.id.charAt(0),
-              },
-            },
-          };
-        } else {
-          console.log(`${m.user.email} is added`);
-          emails.push(m.user.email);
-          return {
-            label: m.user.fullName,
-            value: { id: m.user.id, type: 0, profileIcon: m.user.profileIcon },
-          };
-        }
-      }),
-    ];
-    console.log(results);
-  }
-
-  if (RFC2822_EMAIL.test(input) && !emails.find(e => e === input)) {
-    results = [
-      ...results,
-      {
-        label: input,
-        value: {
-          id: input,
-          type: 1,
-          profileIcon: {
-            bgColor: '#ccc',
-            initials: input.charAt(0),
-          },
-        },
-      },
-    ];
-  }
-
-  return results;
-};
-
-type UserOptionProps = {
-  innerProps: any;
-  isDisabled: boolean;
-  isFocused: boolean;
-  label: string;
-  data: any;
-  getValue: any;
-};
-
-const OptionWrapper = styled.div<{ isFocused: boolean }>`
-  cursor: pointer;
-  padding: 4px 8px;
-  ${props => props.isFocused && `background: rgba(${props.theme.colors.primary});`}
-  display: flex;
-  align-items: center;
-`;
-const OptionContent = styled.div`
-  display: flex;
-  flex-direction: column;
-  margin-left: 12px;
-`;
-
-const OptionLabel = styled.span<{ fontSize: number; quiet: boolean }>`
-  display: flex;
-  align-items: center;
-  font-size: ${p => p.fontSize}px;
-  color: rgba(${p => (p.quiet ? p.theme.colors.text.primary : p.theme.colors.text.primary)});
-`;
-
-const UserOption: React.FC<UserOptionProps> = ({ isDisabled, isFocused, innerProps, label, data }) => {
-  console.log(data);
-  return !isDisabled ? (
-    <OptionWrapper {...innerProps} isFocused={isFocused}>
-      <TaskAssignee
-        size={32}
-        member={{
-          id: '',
-          fullName: data.value.label,
-          profileIcon: data.value.profileIcon,
-        }}
-      />
-      <OptionContent>
-        <OptionLabel fontSize={16} quiet={false}>
-          {label}
-        </OptionLabel>
-        {data.value.type === 2 && (
-          <OptionLabel fontSize={14} quiet>
-            Joined
-          </OptionLabel>
-        )}
-      </OptionContent>
-    </OptionWrapper>
-  ) : null;
-};
-
-const OptionValueWrapper = styled.div`
-  background: rgba(${props => props.theme.colors.bg.primary});
-  border-radius: 4px;
-  margin: 2px;
-  padding: 3px 6px 3px 4px;
-  display: flex;
-  align-items: center;
-`;
-
-const OptionValueLabel = styled.span`
-  font-size: 12px;
-  color: rgba(${props => props.theme.colors.text.secondary});
-`;
-
-const OptionValueRemove = styled.button`
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: none;
-  border: none;
-  outline: none;
-  padding: 0;
-  margin: 0;
-  margin-left: 4px;
-`;
-const OptionValue = ({ data, removeProps }: any) => {
-  return (
-    <OptionValueWrapper>
-      <OptionValueLabel>{data.label}</OptionValueLabel>
-      <OptionValueRemove {...removeProps}>
-        <Cross width={14} height={14} />
-      </OptionValueRemove>
-    </OptionValueWrapper>
-  );
-};
-
-const InviteButton = styled(Button)`
-  margin-top: 12px;
-  height: 32px;
-  padding: 4px 12px;
-  width: 100%;
-  justify-content: center;
-`;
-
-const InviteContainer = styled.div`
-  min-height: 300px;
-  display: flex;
-  flex-direction: column;
-`;
-
-const UserManagementPopup: React.FC<UserManagementPopupProps> = ({
-  projectID,
-  users,
-  projectMembers,
-  onInviteProjectMembers,
-}) => {
-  const client = useApolloClient();
-  const [invitedUsers, setInvitedUsers] = useState<Array<any> | null>(null);
-  return (
-    <Popup tab={0} title="Invite a user">
-      <InviteContainer>
-        <AsyncSelect
-          getOptionValue={option => option.value.id}
-          placeholder="Email address or username"
-          noOptionsMessage={() => null}
-          onChange={(e: any) => {
-            setInvitedUsers(e);
-          }}
-          isMulti
-          autoFocus
-          cacheOptions
-          styles={colourStyles}
-          defaultOption
-          components={{
-            MultiValue: OptionValue,
-            Option: UserOption,
-            IndicatorSeparator: null,
-            DropdownIndicator: null,
-          }}
-          loadOptions={(i, cb) => fetchMembers(client, projectID, {}, i, cb)}
-        />
-      </InviteContainer>
-      <InviteButton
-        onClick={() => {
-          if (invitedUsers) {
-            onInviteProjectMembers(
-              invitedUsers.map(user => {
-                if (user.value.type === 0) {
-                  return {
-                    userID: user.value.id,
-                  };
-                }
-                return {
-                  email: user.value.id,
-                };
-              }),
-            );
-          }
-        }}
-        disabled={invitedUsers === null}
-        hoverVariant="none"
-        fontSize="16px"
-      >
-        Send Invite
-      </InviteButton>
-    </Popup>
-  );
-};
-
-type TaskRouteProps = {
-  taskID: string;
-};
-
-interface QuickCardEditorState {
-  isOpen: boolean;
-  target: React.RefObject<HTMLElement> | null;
-  taskID: string | null;
-  taskGroupID: string | null;
-}
-
-interface ProjectParams {
-  projectID: string;
-}
-
-const initialQuickCardEditorState: QuickCardEditorState = {
-  taskID: null,
-  taskGroupID: null,
-  isOpen: false,
-  target: null,
-};
-
-const Project = () => {
-  const { projectID } = useParams<ProjectParams>();
-  const history = useHistory();
-  const match = useRouteMatch();
-
-  const [updateTaskDescription] = useUpdateTaskDescriptionMutation();
-  const taskLabelsRef = useRef<Array<TaskLabel>>([]);
-  const [toggleTaskLabel] = useToggleTaskLabelMutation({
-    onCompleted: newTaskLabel => {
-      taskLabelsRef.current = newTaskLabel.toggleTaskLabel.task.labels;
-    },
-  });
-
-  const [value, setValue] = useStateWithLocalStorage(CARD_LABEL_VARIANT_STORAGE_KEY);
-  const [updateProjectMemberRole] = useUpdateProjectMemberRoleMutation();
-
-  const [deleteTask] = useDeleteTaskMutation({
-    update: (client, resp) =>
-      updateApolloCache<FindProjectQuery>(
-        client,
-        FindProjectDocument,
-        cache =>
-          produce(cache, draftCache => {
-            const taskGroupIdx = draftCache.findProject.taskGroups.findIndex(
-              tg => tg.tasks.findIndex(t => t.id === resp.data.deleteTask.taskID) !== -1,
-            );
-
-            if (taskGroupIdx !== -1) {
-              draftCache.findProject.taskGroups[taskGroupIdx].tasks = cache.findProject.taskGroups[
-                taskGroupIdx
-              ].tasks.filter(t => t.id !== resp.data.deleteTask.taskID);
-            }
-          }),
-        { projectID },
-      ),
-  });
-
-  const [updateTaskName] = useUpdateTaskNameMutation();
-
-  const { loading, data, error } = useFindProjectQuery({
-    variables: { projectID },
-  });
-
-  const [updateProjectName] = useUpdateProjectNameMutation({
-    update: (client, newName) => {
-      updateApolloCache<FindProjectQuery>(
-        client,
-        FindProjectDocument,
-        cache =>
-          produce(cache, draftCache => {
-            draftCache.findProject.name = newName.data.updateProjectName.name;
-          }),
-        { projectID },
-      );
-    },
-  });
-
-  const [inviteProjectMembers] = useInviteProjectMembersMutation({
-    update: (client, response) => {
-      updateApolloCache<FindProjectQuery>(
-        client,
-        FindProjectDocument,
-        cache =>
-          produce(cache, draftCache => {
-            draftCache.findProject.members = [
-              ...cache.findProject.members,
-              ...response.data.inviteProjectMembers.members,
-            ];
-            draftCache.findProject.invitedMembers = [
-              ...cache.findProject.invitedMembers,
-              ...response.data.inviteProjectMembers.invitedMembers,
-            ];
-          }),
-        { projectID },
-      );
-    },
-  });
-  const [deleteInvitedProjectMember] = useDeleteInvitedProjectMemberMutation({
-    update: (client, response) => {
-      updateApolloCache<FindProjectQuery>(
-        client,
-        FindProjectDocument,
-        cache =>
-          produce(cache, draftCache => {
-            draftCache.findProject.invitedMembers = cache.findProject.invitedMembers.filter(
-              m => m.email !== response.data.deleteInvitedProjectMember.invitedMember.email,
-            );
-          }),
-        { projectID },
-      );
-    },
-  });
-  const [deleteProjectMember] = useDeleteProjectMemberMutation({
-    update: (client, response) => {
-      updateApolloCache<FindProjectQuery>(
-        client,
-        FindProjectDocument,
-        cache =>
-          produce(cache, draftCache => {
-            draftCache.findProject.members = cache.findProject.members.filter(
-              m => m.id !== response.data.deleteProjectMember.member.id,
-            );
-          }),
-        { projectID },
-      );
-    },
-  });
-
-  const { user } = useCurrentUser();
-  const location = useLocation();
-
-  const { showPopup, hidePopup } = usePopup();
-  const $labelsRef = useRef<HTMLDivElement>(null);
-  const labelsRef = useRef<Array<ProjectLabel>>([]);
-  useEffect(() => {
-    if (data) {
-      document.title = `${data.findProject.name} | Taskcafé`;
-    }
-  }, [data]);
-  if (loading) {
-    return (
-      <>
-        <GlobalTopNavbar onSaveProjectName={NOOP} name="" projectID={null} />
-        <BoardLoading />
-      </>
-    );
-  }
-  if (error) {
-    history.push('/projects');
-  }
-  if (data) {
-    labelsRef.current = data.findProject.labels;
-
-    return (
-      <>
-        <GlobalTopNavbar
-          onChangeRole={(userID, roleCode) => {
-            updateProjectMemberRole({ variables: { userID, roleCode, projectID } });
-          }}
-          onChangeProjectOwner={uid => {
-            hidePopup();
-          }}
-          onRemoveFromBoard={userID => {
-            deleteProjectMember({ variables: { userID, projectID } });
-            hidePopup();
-          }}
-          onRemoveInvitedFromBoard={email => {
-            deleteInvitedProjectMember({ variables: { projectID, email } });
-            hidePopup();
-          }}
-          onSaveProjectName={projectName => {
-            updateProjectName({ variables: { projectID, name: projectName } });
-          }}
-          onInviteUser={$target => {
-            showPopup(
-              $target,
-              <UserManagementPopup
-                projectID={projectID}
-                onInviteProjectMembers={members => {
-                  inviteProjectMembers({ variables: { projectID, members } });
-                  hidePopup();
-                }}
-                users={data.users}
-                projectMembers={data.findProject.members}
-              />,
-            );
-          }}
-          popupContent={<ProjectPopup history={history} name={data.findProject.name} projectID={projectID} />}
-          menuType={[{ name: 'Board', link: location.pathname }]}
-          currentTab={0}
-          projectMembers={data.findProject.members}
-          projectInvitedMembers={data.findProject.invitedMembers}
-          projectID={projectID}
-          teamID={data.findProject.team ? data.findProject.team.id : null}
-          name={data.findProject.name}
-        />
-        <Route path={`${match.path}`} exact render={() => <Redirect to={`${match.url}/board`} />} />
-        <Route
-          path={`${match.path}/board`}
-          render={() => (
-            <Board
-              cardLabelVariant={value === 'small' ? 'small' : 'large'}
-              onCardLabelClick={() => {
-                const variant = value === 'small' ? 'large' : 'small';
-                setValue(() => variant);
-              }}
-              projectID={projectID}
-            />
-          )}
-        />
-        <Route
-          path={`${match.path}/board/c/:taskID`}
-          render={(routeProps: RouteComponentProps<TaskRouteProps>) => (
-            <Details
-              refreshCache={NOOP}
-              availableMembers={data.findProject.members}
-              projectURL={`${match.url}/board`}
-              taskID={routeProps.match.params.taskID}
-              onTaskNameChange={(updatedTask, newName) => {
-                updateTaskName({ variables: { taskID: updatedTask.id, name: newName } });
-              }}
-              onTaskDescriptionChange={(updatedTask, newDescription) => {
-                updateTaskDescription({
-                  variables: { taskID: updatedTask.id, description: newDescription },
-                  optimisticResponse: {
-                    __typename: 'Mutation',
-                    updateTaskDescription: {
-                      __typename: 'Task',
-                      id: updatedTask.id,
-                      description: newDescription,
-                    },
-                  },
-                });
-              }}
-              onDeleteTask={deletedTask => {
-                deleteTask({ variables: { taskID: deletedTask.id } });
-                history.push(`${match.url}/board`);
-              }}
-              onOpenAddLabelPopup={(task, $targetRef) => {
-                taskLabelsRef.current = task.labels;
-                showPopup(
-                  $targetRef,
-                  <LabelManagerEditor
-                    onLabelToggle={labelID => {
-                      toggleTaskLabel({ variables: { taskID: task.id, projectLabelID: labelID } });
-                    }}
-                    labelColors={data.labelColors}
-                    labels={labelsRef}
-                    taskLabels={taskLabelsRef}
-                    projectID={projectID}
-                  />,
-                );
-              }}
-            />
-          )}
-        />
-      </>
-    );
-  }
-  return <div>Error</div>;
-};
-
-export default Project;

frontend/src/Projects/index.tsx

@@ -1,397 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import styled from 'styled-components/macro';
-import GlobalTopNavbar from 'App/TopNavbar';
-import Empty from 'shared/undraw/Empty';
-import {
-  useCreateTeamMutation,
-  useGetProjectsQuery,
-  useCreateProjectMutation,
-  GetProjectsDocument,
-  GetProjectsQuery,
-} from 'shared/generated/graphql';
-
-import { Link } from 'react-router-dom';
-import NewProject from 'shared/components/NewProject';
-import { PermissionLevel, PermissionObjectType, useCurrentUser } from 'App/context';
-import Button from 'shared/components/Button';
-import { usePopup, Popup } from 'shared/components/PopupMenu';
-import { useForm } from 'react-hook-form';
-import Input from 'shared/components/Input';
-import updateApolloCache from 'shared/utils/cache';
-import produce from 'immer';
-import NOOP from 'shared/utils/noop';
-import theme from 'App/ThemeStyles';
-import { mixin } from '../shared/utils/styles';
-
-type CreateTeamData = { teamName: string };
-
-type CreateTeamFormProps = {
-  onCreateTeam: (teamName: string) => void;
-};
-
-const CreateTeamFormContainer = styled.form``;
-
-const CreateTeamButton = styled(Button)`
-  width: 100%;
-`;
-
-const CreateTeamForm: React.FC<CreateTeamFormProps> = ({ onCreateTeam }) => {
-  const { register, handleSubmit } = useForm<CreateTeamData>();
-  const createTeam = (data: CreateTeamData) => {
-    onCreateTeam(data.teamName);
-  };
-  return (
-    <CreateTeamFormContainer onSubmit={handleSubmit(createTeam)}>
-      <Input
-        width="100%"
-        label="Team name"
-        id="teamName"
-        name="teamName"
-        variant="alternate"
-        ref={register({ required: 'Team name is required' })}
-      />
-      <CreateTeamButton type="submit">Create</CreateTeamButton>
-    </CreateTeamFormContainer>
-  );
-};
-
-const ProjectAddTile = styled.div`
-  background-color: ${props => mixin.rgba(props.theme.colors.bg.primary, 0.4)};
-  background-size: cover;
-  background-position: 50%;
-  color: #fff;
-  line-height: 20px;
-  padding: 8px;
-  position: relative;
-  text-decoration: none;
-
-  border-radius: 3px;
-  display: block;
-`;
-
-const ProjectTile = styled(Link)<{ color: string }>`
-  background-color: ${props => props.color};
-  background-size: cover;
-  background-position: 50%;
-  color: #fff;
-  line-height: 20px;
-  padding: 8px;
-  position: relative;
-  text-decoration: none;
-
-  border-radius: 3px;
-  display: block;
-`;
-
-const ProjectTileFade = styled.div`
-  background-color: rgba(0, 0, 0, 0.15);
-  bottom: 0;
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-`;
-
-const ProjectListItem = styled.li`
-  width: 23.5%;
-  padding: 0;
-  margin: 0 2% 2% 0;
-
-  box-sizing: border-box;
-  position: relative;
-  cursor: pointer;
-
-  &:hover ${ProjectTileFade} {
-    background-color: rgba(0, 0, 0, 0.25);
-  }
-`;
-
-const ProjectList = styled.ul`
-  display: flex;
-  flex-wrap: wrap;
-
-  & ${ProjectListItem}:nth-of-type(4n) {
-    margin-right: 0;
-  }
-`;
-
-const ProjectTileDetails = styled.div`
-  display: flex;
-  height: 80px;
-  position: relative;
-  flex-direction: column;
-  justify-content: space-between;
-`;
-
-const ProjectAddTileDetails = styled.div`
-  display: flex;
-  height: 80px;
-  position: relative;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-`;
-
-const ProjectTileName = styled.div<{ centered?: boolean }>`
-  flex: 0 0 auto;
-  font-size: 16px;
-  font-weight: 700;
-  display: inline-block;
-  overflow: hidden;
-  max-height: 40px;
-  width: 100%;
-  word-wrap: break-word;
-  ${props => props.centered && 'text-align: center;'}
-`;
-
-const Wrapper = styled.div`
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  justify-content: center;
-`;
-
-const ProjectSectionTitleWrapper = styled.div`
-  align-items: center;
-  display: flex;
-  justify-content: space-between;
-  height: 32px;
-  margin-bottom: 24px;
-  padding: 8px 0;
-  position: relative;
-  margin-top: 16px;
-`;
-
-const SectionActions = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
-const SectionAction = styled(Button)`
-  padding: 6px 12px;
-`;
-
-const SectionActionLink = styled(Link)`
-  margin-right: 8px;
-`;
-
-const ProjectSectionTitle = styled.h3`
-  font-size: 16px;
-  color: ${props => props.theme.colors.text.primary};
-`;
-
-const ProjectsContainer = styled.div`
-  margin: 40px 16px 0;
-  width: 100%;
-  max-width: 825px;
-  min-width: 288px;
-`;
-
-const AddTeamButton = styled(Button)`
-  padding: 6px 12px;
-  position: absolute;
-  top: 6px;
-  right: 12px;
-`;
-
-type ShowNewProject = {
-  open: boolean;
-  initialTeamID: null | string;
-};
-
-const Projects = () => {
-  const { showPopup, hidePopup } = usePopup();
-  const { loading, data } = useGetProjectsQuery({ fetchPolicy: 'network-only' });
-  useEffect(() => {
-    document.title = 'Taskcafé';
-  }, []);
-  const [createProject] = useCreateProjectMutation({
-    update: (client, newProject) => {
-      updateApolloCache<GetProjectsQuery>(client, GetProjectsDocument, cache =>
-        produce(cache, draftCache => {
-          draftCache.projects.push({ ...newProject.data.createProject });
-        }),
-      );
-    },
-  });
-
-  const [showNewProject, setShowNewProject] = useState<ShowNewProject>({ open: false, initialTeamID: null });
-  const { user } = useCurrentUser();
-  const [createTeam] = useCreateTeamMutation({
-    update: (client, createData) => {
-      updateApolloCache<GetProjectsQuery>(client, GetProjectsDocument, cache =>
-        produce(cache, draftCache => {
-          draftCache.teams.push({ ...createData.data.createTeam });
-        }),
-      );
-    },
-  });
-  if (loading) {
-    return <GlobalTopNavbar onSaveProjectName={NOOP} projectID={null} name={null} />;
-  }
-
-  const colors = theme.colors.multiColors;
-  if (data && user) {
-    const { projects, teams, organizations } = data;
-    const organizationID = organizations[0].id ?? null;
-    const personalProjects = projects
-      .filter(p => p.team === null)
-      .sort((a, b) => {
-        const textA = a.name.toUpperCase();
-        const textB = b.name.toUpperCase();
-        return textA < textB ? -1 : textA > textB ? 1 : 0; // eslint-disable-line no-nested-ternary
-      });
-    const projectTeams = teams
-      .sort((a, b) => {
-        const textA = a.name.toUpperCase();
-        const textB = b.name.toUpperCase();
-        return textA < textB ? -1 : textA > textB ? 1 : 0; // eslint-disable-line no-nested-ternary
-      })
-      .map(team => {
-        return {
-          id: team.id,
-          name: team.name,
-          projects: projects
-            .filter(project => project.team && project.team.id === team.id)
-            .sort((a, b) => {
-              const textA = a.name.toUpperCase();
-              const textB = b.name.toUpperCase();
-              return textA < textB ? -1 : textA > textB ? 1 : 0; // eslint-disable-line no-nested-ternary
-            }),
-        };
-      });
-    return (
-      <>
-        <GlobalTopNavbar onSaveProjectName={NOOP} projectID={null} name={null} />
-        <Wrapper>
-          <ProjectsContainer>
-            {user.roles.org === 'admin' && (
-              <AddTeamButton
-                variant="outline"
-                onClick={$target => {
-                  showPopup(
-                    $target,
-                    <Popup
-                      title="Create team"
-                      tab={0}
-                      onClose={() => {
-                        hidePopup();
-                      }}
-                    >
-                      <CreateTeamForm
-                        onCreateTeam={teamName => {
-                          if (organizationID) {
-                            createTeam({ variables: { name: teamName, organizationID } });
-                            hidePopup();
-                          }
-                        }}
-                      />
-                    </Popup>,
-                  );
-                }}
-              >
-                Add Team
-              </AddTeamButton>
-            )}
-            <div>
-              <ProjectSectionTitleWrapper>
-                <ProjectSectionTitle>Personal Projects</ProjectSectionTitle>
-              </ProjectSectionTitleWrapper>
-              <ProjectList>
-                {personalProjects.map((project, idx) => (
-                  <ProjectListItem key={project.id}>
-                    <ProjectTile color={colors[idx % 5]} to={`/projects/${project.id}`}>
-                      <ProjectTileFade />
-                      <ProjectTileDetails>
-                        <ProjectTileName>{project.name}</ProjectTileName>
-                      </ProjectTileDetails>
-                    </ProjectTile>
-                  </ProjectListItem>
-                ))}
-                <ProjectListItem>
-                  <ProjectAddTile
-                    onClick={() => {
-                      setShowNewProject({ open: true, initialTeamID: 'no-team' });
-                    }}
-                  >
-                    <ProjectTileFade />
-                    <ProjectAddTileDetails>
-                      <ProjectTileName centered>Create new project</ProjectTileName>
-                    </ProjectAddTileDetails>
-                  </ProjectAddTile>
-                </ProjectListItem>
-              </ProjectList>
-            </div>
-            {projectTeams.map(team => {
-              return (
-                <div key={team.id}>
-                  <ProjectSectionTitleWrapper>
-                    <ProjectSectionTitle>{team.name}</ProjectSectionTitle>
-                    {user.isAdmin(PermissionLevel.TEAM, PermissionObjectType.TEAM, team.id) && (
-                      <SectionActions>
-                        <SectionActionLink to={`/teams/${team.id}`}>
-                          <SectionAction variant="outline">Projects</SectionAction>
-                        </SectionActionLink>
-                        <SectionActionLink to={`/teams/${team.id}/members`}>
-                          <SectionAction variant="outline">Members</SectionAction>
-                        </SectionActionLink>
-                        <SectionActionLink to={`/teams/${team.id}/settings`}>
-                          <SectionAction variant="outline">Settings</SectionAction>
-                        </SectionActionLink>
-                      </SectionActions>
-                    )}
-                  </ProjectSectionTitleWrapper>
-                  <ProjectList>
-                    {team.projects.map((project, idx) => (
-                      <ProjectListItem key={project.id}>
-                        <ProjectTile color={colors[idx % 5]} to={`/projects/${project.id}`}>
-                          <ProjectTileFade />
-                          <ProjectTileDetails>
-                            <ProjectTileName>{project.name}</ProjectTileName>
-                          </ProjectTileDetails>
-                        </ProjectTile>
-                      </ProjectListItem>
-                    ))}
-                    {user.isAdmin(PermissionLevel.TEAM, PermissionObjectType.TEAM, team.id) && (
-                      <ProjectListItem>
-                        <ProjectAddTile
-                          onClick={() => {
-                            setShowNewProject({ open: true, initialTeamID: team.id });
-                          }}
-                        >
-                          <ProjectTileFade />
-                          <ProjectAddTileDetails>
-                            <ProjectTileName centered>Create new project</ProjectTileName>
-                          </ProjectAddTileDetails>
-                        </ProjectAddTile>
-                      </ProjectListItem>
-                    )}
-                  </ProjectList>
-                </div>
-              );
-            })}
-            {showNewProject.open && (
-              <NewProject
-                initialTeamID={showNewProject.initialTeamID}
-                onCreateProject={(name, teamID) => {
-                  if (user) {
-                    createProject({ variables: { teamID, name } });
-                    setShowNewProject({ open: false, initialTeamID: null });
-                  }
-                }}
-                onClose={() => {
-                  setShowNewProject({ open: false, initialTeamID: null });
-                }}
-                teams={teams}
-              />
-            )}
-          </ProjectsContainer>
-        </Wrapper>
-      </>
-    );
-  }
-  return <div>Error!</div>;
-};
-
-export default Projects;

frontend/src/Register/Styles.ts

@@ -1,13 +0,0 @@
-import styled from 'styled-components';
-
-export const Container = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100vw;
-  height: 100vh;
-`;
-
-export const LoginWrapper = styled.div`
-  width: 60%;
-`;

frontend/src/Register/index.tsx

@@ -1,62 +0,0 @@
-import React, { useState } from 'react';
-import axios from 'axios';
-import Register from 'shared/components/Register';
-import { useHistory, useLocation } from 'react-router';
-import * as QueryString from 'query-string';
-import { toast } from 'react-toastify';
-import { Container, LoginWrapper } from './Styles';
-
-const UsersRegister = () => {
-  const history = useHistory();
-  const location = useLocation();
-  const [registered, setRegistered] = useState(false);
-  const params = QueryString.parse(location.search);
-  return (
-    <Container>
-      <LoginWrapper>
-        <Register
-          registered={registered}
-          onSubmit={(data, setComplete, setError) => {
-            if (data.password !== data.password_confirm) {
-              setError('password', { type: 'error', message: 'Passwords must match' });
-              setError('password_confirm', { type: 'error', message: 'Passwords must match' });
-            } else {
-              // TODO: change to fetch?
-              fetch('/auth/register', {
-                method: 'POST',
-                body: JSON.stringify({
-                  user: {
-                    username: data.username,
-                    roleCode: 'admin',
-                    email: data.email,
-                    password: data.password,
-                    initials: data.initials,
-                    fullname: data.fullname,
-                  },
-                }),
-              })
-                .then(async x => {
-                  const response = await x.json();
-                  const { setup } = response;
-                  console.log(response);
-                  if (setup) {
-                    history.replace(`/confirm?confirmToken=xxxx`);
-                  } else if (params.confirmToken) {
-                    history.replace(`/confirm?confirmToken=${params.confirmToken}`);
-                  } else {
-                    setRegistered(true);
-                  }
-                })
-                .catch(() => {
-                  toast('There was an issue trying to register');
-                });
-            }
-            setComplete(true);
-          }}
-        />
-      </LoginWrapper>
-    </Container>
-  );
-};
-
-export default UsersRegister;

frontend/src/Teams/Members/index.tsx

@@ -1,562 +0,0 @@
-import React, { useState } from 'react';
-import Input from 'shared/components/Input';
-import updateApolloCache from 'shared/utils/cache';
-import produce from 'immer';
-import Button from 'shared/components/Button';
-import { useCurrentUser, PermissionLevel, PermissionObjectType } from 'App/context';
-import Select from 'shared/components/Select';
-import {
-  useGetTeamQuery,
-  RoleCode,
-  useCreateTeamMemberMutation,
-  useDeleteTeamMemberMutation,
-  useUpdateTeamMemberRoleMutation,
-  GetTeamQuery,
-  GetTeamDocument,
-} from 'shared/generated/graphql';
-import { UserPlus, Checkmark } from 'shared/icons';
-import styled, { css } from 'styled-components/macro';
-import { usePopup, Popup } from 'shared/components/PopupMenu';
-import TaskAssignee from 'shared/components/TaskAssignee';
-import Member from 'shared/components/Member';
-import ControlledInput from 'shared/components/ControlledInput';
-import NOOP from 'shared/utils/noop';
-import { mixin } from 'shared/utils/styles';
-
-const MemberListWrapper = styled.div`
-  flex: 1 1;
-`;
-
-const SearchInput = styled(ControlledInput)`
-  margin: 0 12px;
-`;
-
-const UserMember = styled(Member)`
-  padding: 4px 0;
-  cursor: pointer;
-  &:hover {
-    background: ${props => mixin.rgba(props.theme.colors.bg.primary, 0.4)};
-  }
-  border-radius: 6px;
-`;
-
-const TeamMemberList = styled.div`
-  margin: 8px 12px;
-`;
-
-type UserManagementPopupProps = {
-  users: Array<User>;
-  teamMembers: Array<TaskUser>;
-  onAddTeamMember: (userID: string) => void;
-};
-
-const UserManagementPopup: React.FC<UserManagementPopupProps> = ({ users, teamMembers, onAddTeamMember }) => {
-  return (
-    <Popup tab={0} title="Invite a user">
-      <SearchInput width="100%" variant="alternate" placeholder="Email address or name" name="search" />
-      <TeamMemberList>
-        {users
-          .filter(u => u.id !== teamMembers.find(p => p.id === u.id)?.id)
-          .map(user => (
-            <UserMember
-              key={user.id}
-              onCardMemberClick={() => onAddTeamMember(user.id)}
-              showName
-              member={user}
-              taskID=""
-            />
-          ))}
-      </TeamMemberList>
-    </Popup>
-  );
-};
-
-export const RoleCheckmark = styled(Checkmark)`
-  padding-left: 4px;
-`;
-
-const permissions = [
-  {
-    code: 'owner',
-    name: 'Owner',
-    description:
-      'Can view, create and edit team projects, and change settings for the team. Will have admin rights on all projects in this team. Can delete the team and all team projects.',
-  },
-  {
-    code: 'admin',
-    name: 'Admin',
-    description:
-      'Can view, create and edit team projects, and change settings for the team. Will have admin rights on all projects in this team.',
-  },
-
-  { code: 'member', name: 'Member', description: 'Can view, create, and edit team projects, but not change settings.' },
-];
-
-export const RoleName = styled.div`
-  font-size: 14px;
-  font-weight: 700;
-`;
-export const RoleDescription = styled.div`
-  margin-top: 4px;
-  font-size: 14px;
-`;
-
-export const MiniProfileActions = styled.ul`
-  list-style-type: none;
-`;
-
-export const MiniProfileActionWrapper = styled.li``;
-
-export const MiniProfileActionItem = styled.span<{ disabled?: boolean }>`
-  color: #c2c6dc;
-  display: block;
-  font-weight: 400;
-  padding: 6px 12px;
-  position: relative;
-  text-decoration: none;
-
-  ${props =>
-    props.disabled
-      ? css`
-          user-select: none;
-          pointer-events: none;
-          color: ${mixin.rgba(props.theme.colors.text.primary, 0.4)};
-        `
-      : css`
-          cursor: pointer;
-          &:hover {
-            background: ${props.theme.colors.primary};
-          }
-        `}
-`;
-
-export const Content = styled.div`
-  padding: 0 12px 12px;
-`;
-
-export const CurrentPermission = styled.span`
-  margin-left: 4px;
-  color: ${props => mixin.rgba(props.theme.colors.text.secondary, 0.4)};
-`;
-
-export const Separator = styled.div`
-  height: 1px;
-  border-top: 1px solid #414561;
-  margin: 0.25rem !important;
-`;
-
-export const WarningText = styled.span`
-  display: flex;
-  color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.4)};
-  padding: 6px;
-`;
-
-export const DeleteDescription = styled.div`
-  font-size: 14px;
-  color: ${props => props.theme.colors.text.primary};
-`;
-
-export const RemoveMemberButton = styled(Button)`
-  margin-top: 16px;
-  padding: 6px 12px;
-  width: 100%;
-`;
-
-type TeamRoleManagerPopupProps = {
-  currentUserID: string;
-  subject: User;
-  members: Array<User>;
-  warning?: string | null;
-  canChangeRole: boolean;
-  onChangeRole: (roleCode: RoleCode) => void;
-  onRemoveFromTeam?: (newOwnerID: string | null) => void;
-};
-
-const TeamRoleManagerPopup: React.FC<TeamRoleManagerPopupProps> = ({
-  members,
-  warning,
-  subject,
-  currentUserID,
-  canChangeRole,
-  onRemoveFromTeam,
-  onChangeRole,
-}) => {
-  const { hidePopup, setTab } = usePopup();
-  const [orphanedProjectOwner, setOrphanedProjectOwner] = useState<{ label: string; value: string } | null>(null);
-  return (
-    <>
-      <Popup title={null} tab={0}>
-        <MiniProfileActions>
-          <MiniProfileActionWrapper>
-            {subject.role && (
-              <MiniProfileActionItem
-                onClick={() => {
-                  setTab(1);
-                }}
-              >
-                Change permissions...
-                <CurrentPermission>{`(${subject.role.name})`}</CurrentPermission>
-              </MiniProfileActionItem>
-            )}
-            {onRemoveFromTeam && (
-              <MiniProfileActionItem
-                onClick={() => {
-                  setTab(2);
-                }}
-              >
-                {currentUserID === subject.id ? 'Leave team...' : 'Remove from team...'}
-              </MiniProfileActionItem>
-            )}
-          </MiniProfileActionWrapper>
-        </MiniProfileActions>
-        {warning && (
-          <>
-            <Separator />
-            <WarningText>{warning}</WarningText>
-          </>
-        )}
-      </Popup>
-      <Popup title="Change Permissions" onClose={() => hidePopup()} tab={1}>
-        <MiniProfileActions>
-          <MiniProfileActionWrapper>
-            {permissions
-              .filter(p => (subject.role && subject.role.code === 'owner') || p.code !== 'owner')
-              .map(perm => (
-                <MiniProfileActionItem
-                  disabled={subject.role && perm.code !== subject.role.code && !canChangeRole}
-                  key={perm.code}
-                  onClick={() => {
-                    if (onChangeRole && subject.role && perm.code !== subject.role.code) {
-                      switch (perm.code) {
-                        case 'owner':
-                          onChangeRole(RoleCode.Owner);
-                          break;
-                        case 'admin':
-                          onChangeRole(RoleCode.Admin);
-                          break;
-                        case 'member':
-                          onChangeRole(RoleCode.Member);
-                          break;
-                        default:
-                          break;
-                      }
-                      hidePopup();
-                    }
-                  }}
-                >
-                  <RoleName>
-                    {perm.name}
-                    {subject.role && perm.code === subject.role.code && <RoleCheckmark width={12} height={12} />}
-                  </RoleName>
-                  <RoleDescription>{perm.description}</RoleDescription>
-                </MiniProfileActionItem>
-              ))}
-          </MiniProfileActionWrapper>
-          {subject.role && subject.role.code === 'owner' && (
-            <>
-              <Separator />
-              <WarningText>You can not change roles because there must be an owner.</WarningText>
-            </>
-          )}
-        </MiniProfileActions>
-      </Popup>
-      <Popup title="Remove from Team?" onClose={() => hidePopup()} tab={2}>
-        <Content>
-          <DeleteDescription>
-            The member will be removed from all team project tasks. They will receive a notification.
-          </DeleteDescription>
-          {subject.owned && subject.owned.projects.length !== 0 && (
-            <>
-              <DeleteDescription>
-                {`The member is the owner of ${subject.owned.projects.length} project${
-                  subject.owned.projects.length > 1 ? 's' : ''
-                }. You can give the projects a new owner but it is not needed`}
-              </DeleteDescription>
-              <Select
-                label="New projects owner"
-                value={orphanedProjectOwner}
-                onChange={value => setOrphanedProjectOwner(value)}
-                options={members.filter(m => m.id !== subject.id).map(m => ({ label: m.fullName, value: m.id }))}
-              />
-            </>
-          )}
-          <RemoveMemberButton
-            color="danger"
-            onClick={() => {
-              if (onRemoveFromTeam) {
-                onRemoveFromTeam(orphanedProjectOwner ? orphanedProjectOwner.value : null);
-              }
-            }}
-          >
-            Remove Member
-          </RemoveMemberButton>
-        </Content>
-      </Popup>
-    </>
-  );
-};
-
-const MemberItemOptions = styled.div``;
-
-const MemberItemOption = styled(Button)`
-  padding: 7px 9px;
-  margin: 4px 0 2px 8px;
-  float: left;
-  min-width: 95px;
-`;
-
-const MemberList = styled.div`
-  border-top: 1px solid ${props => props.theme.colors.border};
-`;
-
-const MemberListItem = styled.div`
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: space-between;
-  border-bottom: 1px solid ${props => props.theme.colors.border};
-  min-height: 40px;
-  padding: 12px 0 12px 40px;
-  position: relative;
-`;
-
-const MemberListItemDetails = styled.div`
-  float: left;
-  flex: 1 0 auto;
-  padding-left: 8px;
-`;
-
-const InviteIcon = styled(UserPlus)`
-  padding-right: 4px;
-`;
-
-const MemberProfile = styled(TaskAssignee)`
-  position: absolute;
-  top: 16px;
-  left: 0;
-  margin: 0;
-`;
-
-const MemberItemName = styled.p`
-  color: ${props => props.theme.colors.text.secondary};
-`;
-
-const MemberItemUsername = styled.p`
-  color: ${props => props.theme.colors.text.primary};
-`;
-
-const MemberListHeader = styled.div`
-  display: flex;
-  flex-direction: column;
-`;
-const ListTitle = styled.h3`
-  font-size: 18px;
-  color: ${props => props.theme.colors.text.secondary};
-  margin-bottom: 12px;
-`;
-const ListDesc = styled.span`
-  font-size: 16px;
-  color: ${props => props.theme.colors.text.primary};
-`;
-const FilterSearch = styled(Input)`
-  margin: 0;
-`;
-
-const ListActions = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 8px;
-  margin-bottom: 18px;
-`;
-
-const InviteMemberButton = styled(Button)`
-  padding: 6px 12px;
-`;
-const FilterTab = styled.div`
-  max-width: 240px;
-  flex: 0 0 240px;
-  margin: 0;
-  padding-right: 32px;
-`;
-
-const FilterTabItems = styled.ul``;
-const FilterTabItem = styled.li`
-  cursor: pointer;
-  border-radius: 3px;
-  display: block;
-  font-weight: 700;
-  text-decoration: none;
-  padding: 6px 8px;
-  color: ${props => props.theme.colors.text.primary};
-  &:hover {
-    border-radius: 6px;
-    background: ${props => props.theme.colors.primary};
-    color: ${props => props.theme.colors.text.secondary};
-  }
-`;
-
-const FilterTabTitle = styled.h2`
-  color: #5e6c84;
-  font-size: 12px;
-  font-weight: 500;
-  letter-spacing: 0.04em;
-  line-height: 16px;
-  margin-top: 16px;
-  text-transform: uppercase;
-  padding: 8px;
-  margin: 0;
-`;
-
-const MemberContainer = styled.div`
-  margin-top: 45px;
-  display: flex;
-  width: 100%;
-`;
-
-type MembersProps = {
-  teamID: string;
-};
-
-const Members: React.FC<MembersProps> = ({ teamID }) => {
-  const { showPopup, hidePopup } = usePopup();
-  const { loading, data } = useGetTeamQuery({ variables: { teamID } });
-  const { user, setUserRoles } = useCurrentUser();
-  const warning =
-    'You can’t leave because you are the only admin. To make another user an admin, click their avatar, select “Change permissions…”, and select “Admin”.';
-  const [createTeamMember] = useCreateTeamMemberMutation({
-    update: (client, response) => {
-      updateApolloCache<GetTeamQuery>(
-        client,
-        GetTeamDocument,
-        cache =>
-          produce(cache, draftCache => {
-            draftCache.findTeam.members.push({
-              ...response.data.createTeamMember.teamMember,
-              member: { __typename: 'MemberList', projects: [], teams: [] },
-              owned: { __typename: 'OwnedList', projects: [], teams: [] },
-            });
-          }),
-        { teamID },
-      );
-    },
-  });
-  const [updateTeamMemberRole] = useUpdateTeamMemberRoleMutation({
-    onCompleted: r => {
-      if (user) {
-        setUserRoles(
-          produce(user.roles, draftRoles => {
-            draftRoles.teams.set(r.updateTeamMemberRole.teamID, r.updateTeamMemberRole.member.role.code);
-          }),
-        );
-      }
-    },
-  });
-  const [deleteTeamMember] = useDeleteTeamMemberMutation({
-    update: (client, response) => {
-      updateApolloCache<GetTeamQuery>(
-        client,
-        GetTeamDocument,
-        cache =>
-          produce(cache, draftCache => {
-            draftCache.findTeam.members = cache.findTeam.members.filter(
-              member => member.id !== response.data.deleteTeamMember.userID,
-            );
-          }),
-        { teamID },
-      );
-    },
-  });
-  if (loading) {
-    return <span>loading</span>;
-  }
-
-  if (data && user) {
-    return (
-      <MemberContainer>
-        <FilterTab>
-          <FilterTabTitle>MEMBERS OF TEAM PROJECTS</FilterTabTitle>
-          <FilterTabItems>
-            <FilterTabItem>{`Team Members (${data.findTeam.members.length})`}</FilterTabItem>
-            <FilterTabItem>Observers</FilterTabItem>
-          </FilterTabItems>
-        </FilterTab>
-        <MemberListWrapper>
-          <MemberListHeader>
-            <ListTitle>{`Team Members (${data.findTeam.members.length})`}</ListTitle>
-            <ListDesc>
-              Team members can view and join all Team Visible boards and create new boards in the team.
-            </ListDesc>
-            <ListActions>
-              <FilterSearch width="250px" variant="alternate" placeholder="Filter by name" />
-              {user.isAdmin(PermissionLevel.TEAM, PermissionObjectType.TEAM, data.findTeam.id) && (
-                <InviteMemberButton
-                  onClick={$target => {
-                    showPopup(
-                      $target,
-                      <UserManagementPopup
-                        users={data.users}
-                        teamMembers={data.findTeam.members}
-                        onAddTeamMember={userID => {
-                          createTeamMember({ variables: { userID, teamID } });
-                        }}
-                      />,
-                    );
-                  }}
-                >
-                  <InviteIcon width={16} height={16} />
-                  Invite Team Members
-                </InviteMemberButton>
-              )}
-            </ListActions>
-          </MemberListHeader>
-          <MemberList>
-            {data.findTeam.members.map(member => (
-              <MemberListItem>
-                <MemberProfile showRoleIcons size={32} onMemberProfile={NOOP} member={member} />
-                <MemberListItemDetails>
-                  <MemberItemName>{member.fullName}</MemberItemName>
-                  <MemberItemUsername>{`@${member.username}`}</MemberItemUsername>
-                </MemberListItemDetails>
-                <MemberItemOptions>
-                  <MemberItemOption variant="flat">On 2 projects</MemberItemOption>
-                  <MemberItemOption
-                    variant="outline"
-                    onClick={$target => {
-                      showPopup(
-                        $target,
-                        <TeamRoleManagerPopup
-                          currentUserID={user.id ?? ''}
-                          subject={member}
-                          members={data.findTeam.members}
-                          warning={member.role && member.role.code === 'owner' ? warning : null}
-                          canChangeRole={user.isAdmin(PermissionLevel.TEAM, PermissionObjectType.TEAM, teamID)}
-                          onChangeRole={roleCode => {
-                            updateTeamMemberRole({ variables: { userID: member.id, teamID, roleCode } });
-                          }}
-                          onRemoveFromTeam={
-                            member.role && member.role.code === 'owner'
-                              ? undefined
-                              : newOwnerID => {
-                                  deleteTeamMember({ variables: { teamID, newOwnerID, userID: member.id } });
-                                  hidePopup();
-                                }
-                          }
-                        />,
-                      );
-                    }}
-                  >
-                    Manage
-                  </MemberItemOption>
-                </MemberItemOptions>
-              </MemberListItem>
-            ))}
-          </MemberList>
-        </MemberListWrapper>
-      </MemberContainer>
-    );
-  }
-
-  return <div>error</div>;
-};
-
-export default Members;

frontend/src/Teams/Projects/index.tsx

@@ -1,195 +0,0 @@
-import React from 'react';
-import styled, { css } from 'styled-components/macro';
-import {
-  useGetTeamQuery,
-  useDeleteTeamMutation,
-  GetProjectsDocument,
-  GetProjectsQuery,
-} from 'shared/generated/graphql';
-import { Link } from 'react-router-dom';
-import Input from 'shared/components/Input';
-import theme from 'App/ThemeStyles';
-
-const FilterSearch = styled(Input)`
-  margin: 0;
-`;
-
-const ProjectsContainer = styled.div`
-  margin-top: 45px;
-  display: flex;
-  width: 100%;
-`;
-
-const FilterTab = styled.div`
-  max-width: 240px;
-  flex: 0 0 240px;
-  margin: 0;
-  padding-right: 32px;
-`;
-
-const FilterTabItems = styled.ul``;
-const FilterTabItem = styled.li`
-  cursor: pointer;
-  border-radius: 3px;
-  display: block;
-  font-weight: 700;
-  text-decoration: none;
-  padding: 6px 8px;
-  color: ${props => props.theme.colors.text.primary};
-  &:hover {
-    border-radius: 6px;
-    background: ${props => props.theme.colors.primary};
-    color: ${props => props.theme.colors.text.secondary};
-  }
-`;
-
-const FilterTabTitle = styled.h2`
-  color: #5e6c84;
-  font-size: 12px;
-  font-weight: 500;
-  letter-spacing: 0.04em;
-  line-height: 16px;
-  margin-top: 16px;
-  text-transform: uppercase;
-  padding: 8px;
-  margin: 0;
-`;
-
-const ProjectAddTile = styled.div`
-  background-color: ${props => props.theme.colors.bg.primary};
-  background-size: cover;
-  background-position: 50%;
-  color: #fff;
-  line-height: 20px;
-  padding: 8px;
-  position: relative;
-  text-decoration: none;
-
-  border-radius: 3px;
-  display: block;
-`;
-
-const ProjectTile = styled(Link)<{ color: string }>`
-  background-color: ${props => props.color};
-  background-size: cover;
-  background-position: 50%;
-  color: #fff;
-  line-height: 20px;
-  padding: 8px;
-  position: relative;
-  text-decoration: none;
-
-  border-radius: 3px;
-  display: block;
-`;
-
-const ProjectTileFade = styled.div`
-  background-color: rgba(0, 0, 0, 0.15);
-  bottom: 0;
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-`;
-
-const ProjectListItem = styled.li`
-  width: 23.5%;
-  padding: 0;
-  margin: 0 2% 2% 0;
-
-  box-sizing: border-box;
-  position: relative;
-  cursor: pointer;
-
-  &:hover ${ProjectTileFade} {
-    background-color: rgba(0, 0, 0, 0.25);
-  }
-`;
-
-const ProjectList = styled.ul`
-  display: flex;
-  flex-wrap: wrap;
-  padding-top: 16px;
-
-  & ${ProjectListItem}:nth-of-type(4n) {
-    margin-right: 0;
-  }
-`;
-
-const ProjectTileDetails = styled.div`
-  display: flex;
-  height: 80px;
-  position: relative;
-  flex-direction: column;
-  justify-content: space-between;
-`;
-
-const ProjectAddTileDetails = styled.div`
-  display: flex;
-  height: 80px;
-  position: relative;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-`;
-
-const ProjectTileName = styled.div<{ centered?: boolean }>`
-  flex: 0 0 auto;
-  font-size: 16px;
-  font-weight: 700;
-  display: inline-block;
-  overflow: hidden;
-  max-height: 40px;
-  width: 100%;
-  word-wrap: break-word;
-  ${props => props.centered && 'text-align: center;'}
-`;
-const ProjectListWrapper = styled.div`
-  flex: 1 1;
-`;
-
-const colors = theme.colors.multiColors;
-
-type TeamProjectsProps = {
-  teamID: string;
-};
-
-const TeamProjects: React.FC<TeamProjectsProps> = ({ teamID }) => {
-  const { loading, data } = useGetTeamQuery({ variables: { teamID } });
-  if (loading) {
-    return <span>loading</span>;
-  }
-  if (data) {
-    return (
-      <ProjectsContainer>
-        <FilterTab>
-          <FilterSearch placeholder="Search for projects..." width="100%" variant="alternate" />
-          <FilterTabTitle>SORT</FilterTabTitle>
-          <FilterTabItems>
-            <FilterTabItem>Most Recently Active</FilterTabItem>
-            <FilterTabItem>Number of Members</FilterTabItem>
-            <FilterTabItem>Number of Stars</FilterTabItem>
-            <FilterTabItem>Alphabetical</FilterTabItem>
-          </FilterTabItems>
-        </FilterTab>
-        <ProjectListWrapper>
-          <ProjectList>
-            {data.projects.map((project, idx) => (
-              <ProjectListItem key={project.id}>
-                <ProjectTile color={colors[idx % 5]} to={`/projects/${project.id}`}>
-                  <ProjectTileFade />
-                  <ProjectTileDetails>
-                    <ProjectTileName>{project.name}</ProjectTileName>
-                  </ProjectTileDetails>
-                </ProjectTile>
-              </ProjectListItem>
-            ))}
-          </ProjectList>
-        </ProjectListWrapper>
-      </ProjectsContainer>
-    );
-  }
-  return <span>error</span>;
-};
-
-export default TeamProjects;

frontend/src/Teams/Settings/index.tsx

@@ -1,7 +0,0 @@
-import React from 'react';
-
-const TeamSettings = () => {
-  return <h1>HI!</h1>;
-};
-
-export default TeamSettings;

frontend/src/Teams/index.tsx

@@ -1,152 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import styled from 'styled-components/macro';
-import GlobalTopNavbar from 'App/TopNavbar';
-import updateApolloCache from 'shared/utils/cache';
-import { Route, Switch, useRouteMatch, Redirect, useParams, useHistory } from 'react-router';
-import {
-  useGetTeamQuery,
-  useDeleteTeamMutation,
-  GetProjectsDocument,
-  GetProjectsQuery,
-} from 'shared/generated/graphql';
-import { usePopup, Popup } from 'shared/components/PopupMenu';
-import { History } from 'history';
-import produce from 'immer';
-import { TeamSettings, DeleteConfirm, DELETE_INFO } from 'shared/components/ProjectSettings';
-import { PermissionObjectType, PermissionLevel, useCurrentUser } from 'App/context';
-import NOOP from 'shared/utils/noop';
-import Members from './Members';
-import Projects from './Projects';
-
-const OuterWrapper = styled.div`
-  display: flex;
-  justify-content: center;
-`;
-
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  justify-content: center;
-  max-width: 1400px;
-  width: 100%;
-`;
-
-type TeamPopupProps = {
-  history: History<History.PoorMansUnknown>;
-  name: string;
-  teamID: string;
-};
-
-export const TeamPopup: React.FC<TeamPopupProps> = ({ history, name, teamID }) => {
-  const { hidePopup, setTab } = usePopup();
-  const [deleteTeam] = useDeleteTeamMutation({
-    update: (client, deleteData) => {
-      updateApolloCache<GetProjectsQuery>(client, GetProjectsDocument, cache =>
-        produce(cache, draftCache => {
-          draftCache.teams = cache.teams.filter((team: any) => team.id !== deleteData.data.deleteTeam.team.id);
-          draftCache.projects = cache.projects.filter(
-            (project: any) => project.team.id !== deleteData.data.deleteTeam.team.id,
-          );
-        }),
-      );
-    },
-  });
-  return (
-    <>
-      <Popup title={null} tab={0}>
-        <TeamSettings
-          onDeleteTeam={() => {
-            setTab(1, { width: 340 });
-          }}
-        />
-      </Popup>
-      <Popup title={`Delete the "${name}" team?`} tab={1} onClose={() => hidePopup()}>
-        <DeleteConfirm
-          description={DELETE_INFO.DELETE_TEAMS.description}
-          deletedItems={DELETE_INFO.DELETE_TEAMS.deletedItems}
-          onConfirmDelete={() => {
-            if (teamID) {
-              deleteTeam({ variables: { teamID } });
-              hidePopup();
-              history.push('/projects');
-            }
-          }}
-        />
-      </Popup>
-    </>
-  );
-};
-
-type TeamsRouteProps = {
-  teamID: string;
-};
-
-const Teams = () => {
-  const { teamID } = useParams<TeamsRouteProps>();
-  const history = useHistory();
-  const { loading, data } = useGetTeamQuery({
-    variables: { teamID },
-    onCompleted: resp => {
-      document.title = `${resp.findTeam.name} | Taskcafé`;
-    },
-  });
-  const { user } = useCurrentUser();
-  const [currentTab, setCurrentTab] = useState(0);
-  const match = useRouteMatch();
-  if (loading) {
-    return (
-      <GlobalTopNavbar
-        menuType={[
-          { name: 'Projects', link: `${match.url}` },
-          { name: 'Members', link: `${match.url}/members` },
-        ]}
-        currentTab={currentTab}
-        onSetTab={tab => {
-          setCurrentTab(tab);
-        }}
-        onSaveProjectName={NOOP}
-        projectID={null}
-        name={null}
-      />
-    );
-  }
-  if (data && user) {
-    if (!user.isVisible(PermissionLevel.TEAM, PermissionObjectType.TEAM, teamID)) {
-      return <Redirect to="/" />;
-    }
-    return (
-      <>
-        <GlobalTopNavbar
-          menuType={[
-            { name: 'Projects', link: `${match.url}` },
-            { name: 'Members', link: `${match.url}/members` },
-          ]}
-          currentTab={currentTab}
-          onSetTab={tab => {
-            setCurrentTab(tab);
-          }}
-          popupContent={<TeamPopup history={history} name={data.findTeam.name} teamID={teamID} />}
-          onSaveProjectName={NOOP}
-          projectID={null}
-          name={data.findTeam.name}
-        />
-        <OuterWrapper>
-          <Wrapper>
-            <Switch>
-              <Route exact path={match.path}>
-                <Projects teamID={teamID} />
-              </Route>
-              <Route path={`${match.path}/members`}>
-                <Members teamID={teamID} />
-              </Route>
-            </Switch>
-          </Wrapper>
-        </OuterWrapper>
-      </>
-    );
-  }
-  return <div>Error!</div>;
-};
-
-export default Teams;

frontend/src/app/BaseStyles.ts

@@ -1,26 +1,25 @@
 import { createGlobalStyle } from 'styled-components';
 
-import { color, font, mixin } from 'shared/utils/styles';
+import { font, mixin } from 'shared/utils/styles';
 
 export default createGlobalStyle`
   html, body, #root {
     height: 100%;
     min-height: 100%;
-    min-width: 768px;
-    background: #262c49;
   }
 
   body {
-    color: ${color.textDarkest};
-    -webkit-tap-highlight-color: transparent;
+    color: ${(props) => props.theme.colors.text.primary};
     line-height: 1.2;
-    ${font.size(16)}
+    font-size: 14px;
     ${font.regular}
   }
 
   #root {
     display: flex;
     flex-direction: column;
+    flex-grow: 1;
+    background: ${(props) => props.theme.colors.bg.secondary};
   }
 
   button,
@@ -83,15 +82,9 @@ export default createGlobalStyle`
   select::-ms-expand {
     display: none;
   }
-  select option {
-    color: ${color.textDarkest};
-  }
 
   p {
     line-height: 1.4285;
-    a {
-      ${mixin.link()}
-    }
   }
 
   textarea {
@@ -125,5 +118,7 @@ export default createGlobalStyle`
     border-radius: 20px;
   }
 
-  ${mixin.placeholderColor(color.textLight)}
+  .picker-hidden {
+    display: none;
+  }
 `;

frontend/src/app/ThemeStyles.ts

@@ -0,0 +1,113 @@
+import { DefaultTheme } from 'styled-components';
+import Color from 'color';
+
+export const darkTheme: DefaultTheme = {
+  borderRadius: {
+    primary: '3x',
+    alternate: '6px',
+  },
+  colors: {
+    multiColors: ['#e362e3', '#7a6ff0', '#37c5ab', '#aa62e3', '#e8384f'],
+    primary: 'rgb(115, 103, 240)',
+    secondary: 'rgb(216, 93, 216)',
+    alternate: 'rgb(65, 69, 97)',
+    success: 'rgb(40, 199, 111)',
+    danger: 'rgb(234, 84, 85)',
+    warning: 'rgb(255, 159, 67)',
+    dark: 'rgb(30, 30, 30)',
+    form: {
+      textfield: {
+        background: 'rgb(38, 44, 73)',
+        text: 'rgb(255, 255, 255)',
+        label: 'rgb(194, 198, 220)',
+        placeholder: 'rgb(64, 70, 86)',
+        error: 'rgb(234, 84, 85)',
+        borderColor: 'rgb(65, 69, 97)',
+        secondaryLabel: 'rgb(115, 103, 240)',
+        hover: {
+          text: 'rgb(255, 255, 255)',
+          background: 'none',
+          borderColor: 'rgb(115, 103, 240)',
+        },
+      },
+    },
+    icon: {
+      primary: 'rgb(194, 198, 220)',
+      secondary: 'rgb(255, 255, 255)',
+      alternate: 'rgb(0, 0, 0)',
+      danger: 'rgb(234, 84, 85)',
+      colored: 'rgb(115, 103, 240)',
+    },
+    text: {
+      primary: 'rgb(194, 198, 220)',
+      secondary: 'rgb(255, 255, 255)',
+      alternate: 'rgb(0, 0, 0)',
+    },
+    border: {
+      primary: 'rgb(65, 69, 97)',
+      secondary: 'rgb(115, 103, 240)',
+    },
+    bg: {
+      primary: 'rgb(16, 22, 58)',
+      secondary: 'rgb(38, 44, 73)',
+    },
+  },
+};
+
+export const lightTheme: DefaultTheme = {
+  borderRadius: {
+    primary: '3x',
+    alternate: '6px',
+  },
+  colors: {
+    multiColors: ['#e362e3', '#7a6ff0', '#37c5ab', '#aa62e3', '#e8384f'],
+    primary: 'rgb(115, 103, 240)',
+    secondary: 'rgb(216, 93, 216)',
+    alternate: 'rgb(65, 69, 97)',
+    success: 'rgb(40, 199, 111)',
+    danger: 'rgb(234, 84, 85)',
+    warning: 'rgb(255, 159, 67)',
+    dark: 'rgb(30, 30, 30)',
+    form: {
+      textfield: {
+        background: 'rgb(250, 251, 252)',
+        error: 'rgb(234, 84, 85)',
+        text: 'rgb(23, 43, 77)',
+        label: 'rgb(94, 108, 132)',
+        secondaryLabel: 'rgb(115, 103, 240)',
+        borderColor: 'rgb( 233, 225, 230)',
+        placeholder: 'rgb(64, 70, 86)',
+        hover: {
+          text: 'rgb(23, 43, 77)',
+          background: 'rgb(255, 255, 255)',
+          borderColor: 'rgb(115, 103, 240)',
+        },
+      },
+    },
+    icon: {
+      primary: 'rgb(194, 198, 220)',
+      secondary: 'rgb(0, 0, 0)',
+      alternate: 'rgb(0, 0, 0)',
+      colored: 'rgb(115, 103, 240)',
+      danger: 'rgb(234, 84, 85)',
+    },
+    text: {
+      primary: 'rgb(194, 198, 220)',
+      secondary: 'rgb(255, 255, 255)',
+      alternate: 'rgb(0, 0, 0)',
+    },
+    border: {
+      primary: 'rgb(223, 225,  230)',
+      secondary: 'rgb(115, 103, 240)',
+    },
+    bg: {
+      primary: 'rgb(0, 22, 58)',
+      secondary: 'rgb(250, 251, 252)',
+    },
+  },
+};
+
+export default {
+  darkTheme,
+  lightTheme,
+};

frontend/src/app/font.css

@@ -0,0 +1,4 @@
+@font-face {
+  font-family: 'Open Sans';
+  src: url(/assets/fonts/OpenSans-Regular.ttf) format('truetype');
+}

frontend/src/app/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import Login from 'pages/Login';
+
+import NormalizeStyles from './NormalizeStyles';
+import BaseStyles from './BaseStyles';
+
+const App = () => {
+  return (
+    <>
+      <NormalizeStyles />
+      <BaseStyles />
+      <BrowserRouter>
+        <Routes>
+          <Route path="/login" element={<Login />} />
+        </Routes>
+      </BrowserRouter>
+    </>
+  );
+};
+
+export default App;

frontend/src/index.tsx

@@ -1,170 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import axios from 'axios';
-import createAuthRefreshInterceptor from 'axios-auth-refresh';
-import { ApolloProvider } from '@apollo/react-hooks';
-import { ApolloClient } from 'apollo-client';
-import { HttpLink } from 'apollo-link-http';
-import { onError } from 'apollo-link-error';
-import { enableMapSet } from 'immer';
-import { ApolloLink, Observable, fromPromise } from 'apollo-link';
-import dayjs from 'dayjs';
-import updateLocale from 'dayjs/plugin/updateLocale';
-import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
-import customParseFormat from 'dayjs/plugin/customParseFormat';
-import isBetween from 'dayjs/plugin/isBetween';
-import weekday from 'dayjs/plugin/weekday';
-import { getAccessToken, getNewToken, setAccessToken } from 'shared/utils/accessToken';
-import cache from './App/cache';
-import App from './App';
 
-// https://able.bio/AnasT/apollo-graphql-async-access-token-refresh--470t1c8
-
-dayjs.extend(isSameOrAfter);
-
-dayjs.extend(weekday);
-dayjs.extend(isBetween);
-dayjs.extend(customParseFormat);
-enableMapSet();
-
-dayjs.extend(updateLocale);
-
-dayjs.updateLocale('en', {
-  week: {
-    dow: 1, // First day of week is Monday
-    doy: 7, // First week of year must contain 1 January (7 + 1 - 1)
-  },
-});
-
-let forward$;
-let isRefreshing = false;
-let pendingRequests: any = [];
-
-const refreshAuthLogic = (failedRequest: any) =>
-  axios.post('/auth/refresh_token', {}, { withCredentials: true }).then(tokenRefreshResponse => {
-    setAccessToken(tokenRefreshResponse.data.accessToken);
-    failedRequest.response.config.headers.Authorization = `Bearer ${tokenRefreshResponse.data.accessToken}`;
-    return Promise.resolve();
-  });
-
-createAuthRefreshInterceptor(axios, refreshAuthLogic);
-
-const resolvePendingRequests = () => {
-  pendingRequests.map((callback: any) => callback());
-  pendingRequests = [];
-};
-
-const resolvePromise = (resolve: () => void) => {
-  pendingRequests.push(() => resolve());
-};
-
-const resetPendingRequests = () => {
-  pendingRequests = [];
-};
-
-const setRefreshing = (newVal: boolean) => {
-  isRefreshing = newVal;
-};
-
-const errorLink = onError(({ graphQLErrors, networkError, operation, forward }) => {
-  if (graphQLErrors) {
-    for (const err of graphQLErrors) {
-      if (err.extensions && err.extensions.code) {
-        switch (err.extensions.code) {
-          case 'UNAUTHENTICATED':
-            if (!isRefreshing) {
-              setRefreshing(true);
-              forward$ = fromPromise(
-                getNewToken()
-                  .then((response: any) => {
-                    setAccessToken(response.accessToken);
-                    resolvePendingRequests();
-                    return response.accessToken;
-                  })
-                  .catch(() => {
-                    resetPendingRequests();
-                    // TODO
-                    // Handle token refresh errors e.g clear stored tokens, redirect to login, ...
-                    return undefined;
-                  })
-                  .finally(() => {
-                    setRefreshing(false);
-                  }),
-              ).filter(value => Boolean(value));
-            } else {
-              forward$ = fromPromise(new Promise(resolvePromise));
-            }
-            return forward$.flatMap(() => forward(operation));
-          default:
-          // pass
-        }
-      }
-    }
-  }
-  if (networkError) {
-    console.log(`[Network error]: ${networkError}`); // eslint-disable-line no-console
-  }
-  return undefined;
-});
-
-const requestLink = new ApolloLink(
-  (operation, forward) =>
-    new Observable((observer: any) => {
-      let handle: any;
-      Promise.resolve(operation)
-        .then((op: any) => {
-          const accessToken = getAccessToken();
-          if (accessToken) {
-            op.setContext({
-              headers: {
-                Authorization: `Bearer ${accessToken}`,
-              },
-            });
-          }
-        })
-        .then(() => {
-          handle = forward(operation).subscribe({
-            next: observer.next.bind(observer),
-            error: observer.error.bind(observer),
-            complete: observer.complete.bind(observer),
-          });
-        })
-        .catch(observer.error.bind(observer));
-
-      return () => {
-        if (handle) {
-          handle.unsubscribe();
-        }
-      };
-    }),
-);
-
-const client = new ApolloClient({
-  link: ApolloLink.from([
-    onError(({ graphQLErrors, networkError }) => {
-      if (graphQLErrors) {
-        graphQLErrors.forEach(
-          ({ message, locations, path }) =>
-            console.log(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`), // eslint-disable-line no-console
-        );
-      }
-      if (networkError) {
-        console.log(`[Network error]: ${networkError}`); // eslint-disable-line no-console
-      }
-    }),
-    errorLink,
-    requestLink,
-    new HttpLink({
-      uri: '/graphql',
-      credentials: 'same-origin',
-    }),
-  ]),
-  cache,
-});
+import App from 'app';
 
 ReactDOM.render(
-  <ApolloProvider client={client}>
+  <React.StrictMode>
     <App />
-  </ApolloProvider>,
+  </React.StrictMode>,
   document.getElementById('root'),
 );

frontend/src/pages/Login/form/LoginForm.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { FieldError, useForm, UseFormSetError } from 'react-hook-form';
+import Form from 'shared/components/form';
+import styled from 'styled-components';
+import DefaultFormButton from 'shared/components/form/FormButton';
+import DefaultFormTextField from 'shared/components/form/FormTextField';
+import DefaultFormPasswordField from 'shared/components/form/FormPasswordField';
+
+const FormTextField = styled(DefaultFormTextField)`
+  margin-top: 12px;
+`;
+
+const FormPasswordField = styled(DefaultFormPasswordField)`
+  margin-top: 12px;
+`;
+
+const FormButton = styled(DefaultFormButton)`
+  margin-top: 20px;
+  margin-bottom: 12px;
+`;
+
+export type LoginFormData = {
+  username: string;
+  password: string;
+};
+
+export type OnLoginFn = (data: LoginFormData, setError: UseFormSetError<LoginFormData>) => void;
+
+type LoginFormProps = {
+  onLogin: OnLoginFn;
+  onForgotPassword: () => void;
+  isLoading: boolean;
+};
+
+const LoginForm: React.FC<LoginFormProps> = ({ onLogin, onForgotPassword, isLoading }) => {
+  const {
+    register,
+    setError,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<LoginFormData>();
+  const onSubmit = (data: LoginFormData) => {
+    onLogin(data, setError);
+  };
+  return (
+    <Form>
+      <FormTextField
+        error={errors.username?.message}
+        label="Username"
+        {...register('username', { required: 'Username is required' })}
+      />
+      <FormPasswordField
+        label="Password"
+        error={errors.password?.message}
+        secondaryLabel={{ label: 'Forgot Password?', onClick: onForgotPassword }}
+        {...register('password', { required: 'Password is required' })}
+      />
+      <FormButton disabled={isLoading} width="100%" onClick={handleSubmit(onSubmit)}>
+        Login
+      </FormButton>
+    </Form>
+  );
+};
+
+export default LoginForm;

frontend/src/pages/Login/index.tsx

@@ -0,0 +1,26 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import LoginPage from './page/LoginPage';
+
+const Login: React.FC = () => {
+  const [settings, setSettings] = useState<null | { allowRegistration: string }>(null);
+  const navigate = useNavigate();
+  useEffect(() => {
+    fetch('/public_settings')
+      .then((r) => r.json())
+      .then((data) => {
+        if (!data.isInstalled) {
+          navigate('/register');
+        }
+      });
+  }, []);
+  return (
+    <LoginPage
+      onLogin={(data, setError) => {
+        console.log(data);
+      }}
+    />
+  );
+};
+
+export default Login;

frontend/src/pages/Login/page/LoginPage.stories.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import LoginPage from './LoginPage';
+
+export default {
+  title: 'Pages/LoginPage',
+  component: LoginPage,
+  argTypes: {
+    onLogin: {
+      action: 'on login',
+    },
+    onRegister: {
+      options: ['None', 'Standard'],
+      defaultValue: 'Standard',
+      mapping: {
+        Standard: () => action('on register'),
+        None: undefined,
+      },
+    },
+  },
+} as ComponentMeta<typeof LoginPage>;
+
+const Template: ComponentStory<typeof LoginPage> = ({ children, ...args }) => <LoginPage {...args} />;
+
+export const Primary = Template.bind({});
+
+Primary.args = { isLoading: true };

frontend/src/pages/Login/page/LoginPage.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import InfoCircle from 'shared/components/icons/solid/InfoCircle';
+import AuthPageLayout from 'shared/components/layout/AuthPageLayout';
+import LoginForm, { OnLoginFn } from 'pages/Login/form/LoginForm';
+import * as S from './Styles';
+
+type LoginPageProps = {
+  isLoading: boolean;
+  onLogin: OnLoginFn;
+  onRegister?: () => void;
+  alert?: string;
+};
+
+const LoginPage: React.FC<LoginPageProps> = ({ isLoading, alert, onRegister }) => {
+  return (
+    <AuthPageLayout>
+      <S.Welcome>Welcome to Taskcafe</S.Welcome>
+      {alert && (
+        <S.Alert>
+          <S.AlertContent>{alert}</S.AlertContent>
+          <S.AlertIcon>
+            <InfoCircle stroke="danger" fill="danger" />
+          </S.AlertIcon>
+        </S.Alert>
+      )}
+      <LoginForm
+        isLoading={isLoading}
+        onLogin={() => {
+          // TODO
+        }}
+        onForgotPassword={() => {
+          // TODO
+        }}
+      />
+      {!isLoading && (
+        <>
+          {onRegister && (
+            <S.Register>
+              New to Taskcafe? <S.RegisterLink to="/register">Create an account</S.RegisterLink>
+            </S.Register>
+          )}
+          <S.Divider>
+            <S.DividerText>or</S.DividerText>
+          </S.Divider>
+        </>
+      )}
+    </AuthPageLayout>
+  );
+};
+
+export default LoginPage;

frontend/src/pages/Login/page/Styles.ts

@@ -0,0 +1,72 @@
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+import { mixin } from 'shared/utils/styles';
+
+export const Register = styled.div`
+  margin-top: 16px;
+  display: flex;
+  align-items: center;
+  white-space: break-spaces;
+  justify-content: center;
+`;
+
+export const RegisterLink = styled(Link)`
+  color: ${(props) => props.theme.colors.primary};
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+export const Divider = styled.div`
+  margin: 21px 0;
+  text-align: center;
+  overflow: hidden;
+`;
+
+export const Alert = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  padding: 10px 14px;
+  background-color: ${(props) => mixin.rgba(props.theme.colors.danger, 0.12)};
+`;
+
+export const AlertIcon = styled.div`
+  position: absolute;
+  top: 10px;
+  right: 10px;
+`;
+
+export const AlertContent = styled.div`
+  font-size: 14px;
+  color: ${(props) => props.theme.colors.danger};
+`;
+
+export const DividerText = styled.div`
+  position: relative;
+  display: inline-block;
+  padding: 0 14px;
+  &:before {
+    right: 100%;
+    border-top: 1px solid ${(props) => props.theme.colors.border.primary};
+    content: '';
+    position: absolute;
+    top: 50%;
+    width: 9999px;
+  }
+  &:after {
+    left: 100%;
+    border-top: 1px solid ${(props) => props.theme.colors.border.primary};
+    content: '';
+    position: absolute;
+    top: 50%;
+    width: 9999px;
+  }
+`;
+
+export const Welcome = styled.h2`
+  font-size: 24px;
+  color: ${(props) => props.theme.colors.text.primary};
+  margin-bottom: 16px;
+`;

frontend/src/setupTests.ts

@@ -1,5 +1 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';

frontend/src/shared/components/AddList/AddList.stories.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import { action } from '@storybook/addon-actions';
-import theme from 'App/ThemeStyles';
-import AddList from '.';
-
-export default {
-  component: AddList,
-  title: 'AddList',
-  parameters: {
-    backgrounds: [
-      { name: 'gray', value: theme.colors.bg.secondary, default: true },
-      { name: 'white', value: '#ffffff' },
-    ],
-  },
-};
-
-export const Default = () => {
-  return <AddList onSave={action('on save')} />;
-};

frontend/src/shared/components/AddList/Styles.ts

@@ -1,112 +0,0 @@
-import styled, { css } from 'styled-components';
-import TextareaAutosize from 'react-autosize-textarea/lib';
-import { mixin } from 'shared/utils/styles';
-import Button from 'shared/components/Button';
-
-export const Container = styled.div`
-  width: 272px;
-  margin: 0 4px;
-  height: 100%;
-  box-sizing: border-box;
-  display: inline-block;
-  vertical-align: top;
-  white-space: nowrap;
-`;
-
-export const Wrapper = styled.div<{ editorOpen: boolean }>`
-  display: inline-block;
-  background-color: hsla(0, 0%, 100%, 0.24);
-  cursor: pointer;
-  border-radius: 3px;
-  height: auto;
-  min-height: 32px;
-  padding: 4px;
-  transition: background 85ms ease-in, opacity 40ms ease-in, border-color 85ms ease-in;
-  width: 272px;
-  margin: 0 4px;
-  margin-right: 8px;
-
-  ${props =>
-    !props.editorOpen &&
-    css`
-      &:hover {
-        background-color: hsla(0, 0%, 100%, 0.32);
-      }
-    `}
-
-  ${props =>
-    props.editorOpen &&
-    css`
-      background-color: #10163a;
-      border-radius: 3px;
-      height: auto;
-      min-height: 32px;
-      padding: 8px;
-      transition: background 85ms ease-in, opacity 40ms ease-in, border-color 85ms ease-in;
-    `}
-`;
-
-export const AddListButton = styled(Button)`
-  padding: 6px 12px;
-`;
-
-export const Placeholder = styled.span`
-  color: #c2c6dc;
-  display: flex;
-  align-items: center;
-  padding: 6px 8px;
-  transition: color 85ms ease-in;
-`;
-
-export const AddIconWrapper = styled.div`
-  color: #fff;
-  margin-right: 6px;
-`;
-
-export const ListNameEditorWrapper = styled.div`
-  display: flex;
-`;
-export const ListNameEditor = styled(TextareaAutosize)`
-  background-color: ${props => mixin.lighten(props.theme.colors.bg.secondary, 0.05)};
-  border: none;
-  box-shadow: inset 0 0 0 2px #0079bf;
-  transition: margin 85ms ease-in, background 85ms ease-in;
-  line-height: 20px;
-  padding: 8px 12px;
-
-  overflow: hidden;
-  overflow-wrap: break-word;
-  resize: none;
-  height: 54px;
-  width: 100%;
-
-  border: none;
-  border-radius: 3px;
-  box-shadow: none;
-  margin-bottom: 4px;
-  max-height: 162px;
-  min-height: 54px;
-  font-size: 14px;
-  line-height: 20px;
-
-  color: #c2c6dc;
-  l &:focus {
-    background-color: ${props => mixin.lighten(props.theme.colors.bg.secondary, 0.05)};
-  }
-`;
-
-export const ListAddControls = styled.div`
-  height: 32px;
-  transition: margin 85ms ease-in, height 85ms ease-in;
-  overflow: hidden;
-  margin: 4px 0 0;
-`;
-
-export const CancelAdd = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 32px;
-  width: 32px;
-  cursor: pointer;
-`;

frontend/src/shared/components/AddList/index.tsx

@@ -1,117 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { Plus, Cross } from 'shared/icons';
-import useOnOutsideClick from 'shared/hooks/onOutsideClick';
-import Button from 'shared/components/Button';
-
-import {
-  Container,
-  Wrapper,
-  Placeholder,
-  AddIconWrapper,
-  AddListButton,
-  ListNameEditor,
-  ListAddControls,
-  CancelAdd,
-  ListNameEditorWrapper,
-} from './Styles';
-
-type NameEditorProps = {
-  buttonLabel?: string;
-  onSave: (listName: string) => void;
-  onCancel: () => void;
-};
-
-export const NameEditor: React.FC<NameEditorProps> = ({ onSave: handleSave, onCancel, buttonLabel = 'Save' }) => {
-  const $editorRef = useRef<HTMLTextAreaElement>(null);
-  const [listName, setListName] = useState('');
-  useEffect(() => {
-    if ($editorRef && $editorRef.current) {
-      $editorRef.current.focus();
-    }
-  });
-  const onSave = (newName: string) => {
-    if (newName.replace(/\s+/g, '') !== '') {
-      handleSave(newName);
-    }
-  };
-  const onKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      onSave(listName);
-      setListName('');
-      if ($editorRef && $editorRef.current) {
-        $editorRef.current.focus();
-      }
-    }
-  };
-  return (
-    <>
-      <ListNameEditorWrapper>
-        <ListNameEditor
-          ref={$editorRef}
-          onKeyDown={onKeyDown}
-          value={listName}
-          onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setListName(e.currentTarget.value)}
-          placeholder="Enter a title for this list..."
-        />
-      </ListNameEditorWrapper>
-      <ListAddControls>
-        <AddListButton
-          variant="relief"
-          onClick={() => {
-            onSave(listName);
-            setListName('');
-            if ($editorRef && $editorRef.current) {
-              $editorRef.current.focus();
-            }
-          }}
-        >
-          {buttonLabel}
-        </AddListButton>
-        <CancelAdd onClick={() => onCancel()}>
-          <Cross width={16} height={16} />
-        </CancelAdd>
-      </ListAddControls>
-    </>
-  );
-};
-
-type AddListProps = {
-  onSave: (listName: string) => void;
-};
-
-const AddList: React.FC<AddListProps> = ({ onSave }) => {
-  const [editorOpen, setEditorOpen] = useState(false);
-  const $wrapperRef = useRef<HTMLDivElement>(null);
-  const onOutsideClick = () => {
-    setEditorOpen(false);
-  };
-  useOnOutsideClick($wrapperRef, editorOpen, onOutsideClick, null);
-
-  return (
-    <Container>
-      <Wrapper
-        ref={$wrapperRef}
-        editorOpen={editorOpen}
-        onClick={() => {
-          if (!editorOpen) {
-            setEditorOpen(true);
-          }
-        }}
-      >
-        {editorOpen ? (
-          <NameEditor onCancel={() => setEditorOpen(false)} onSave={onSave} />
-        ) : (
-          <Placeholder>
-            <AddIconWrapper>
-              <Plus width={12} height={12} />
-            </AddIconWrapper>
-            Add another list
-          </Placeholder>
-        )}
-      </Wrapper>
-    </Container>
-  );
-};
-
-export default AddList;

frontend/src/shared/components/Admin/Admin.stories.tsx

@@ -1,61 +0,0 @@
-import React from 'react';
-import { ThemeProvider } from 'styled-components';
-import { action } from '@storybook/addon-actions';
-import theme from 'App/ThemeStyles';
-import NormalizeStyles from 'App/NormalizeStyles';
-import BaseStyles from 'App/BaseStyles';
-import Admin from '.';
-
-export default {
-  component: Admin,
-  title: 'Admin',
-  parameters: {
-    backgrounds: [
-      { name: 'gray', value: '#f8f8f8', default: true },
-      { name: 'white', value: '#ffffff' },
-    ],
-  },
-};
-
-export const Default = () => {
-  return (
-    <>
-      <NormalizeStyles />
-      <BaseStyles />
-      <ThemeProvider theme={theme}>
-        <Admin
-          onInviteUser={action('invite user')}
-          canInviteUser
-          initialTab={1}
-          onUpdateUserPassword={action('update user password')}
-          onDeleteUser={action('delete user')}
-          users={[
-            {
-              id: '1',
-              username: 'jordanthedev',
-              email: 'jordan@jordanthedev.com',
-              role: { code: 'admin', name: 'Admin' },
-              fullName: 'Jordan Knott',
-              profileIcon: {
-                bgColor: '#fff',
-                initials: 'JK',
-                url: null,
-              },
-              owned: {
-                teams: [{ id: '1', name: 'Team' }],
-                projects: [{ id: '2', name: 'Project' }],
-              },
-              member: {
-                teams: [],
-                projects: [],
-              },
-            },
-          ]}
-          invitedUsers={[]}
-          onAddUser={action('add user')}
-          onDeleteInvitedUser={action('delete invited user')}
-        />
-      </ThemeProvider>
-    </>
-  );
-};

frontend/src/shared/components/Admin/index.tsx

@@ -1,710 +0,0 @@
-import React, { useState, useRef } from 'react';
-import styled, { css } from 'styled-components';
-import TaskAssignee from 'shared/components/TaskAssignee';
-import Select from 'shared/components/Select';
-import { User, UserPlus, Checkmark } from 'shared/icons';
-import { usePopup, Popup } from 'shared/components/PopupMenu';
-import { RoleCode, useUpdateUserRoleMutation } from 'shared/generated/graphql';
-import Input from 'shared/components/Input';
-import Button from 'shared/components/Button';
-import NOOP from 'shared/utils/noop';
-import { mixin } from 'shared/utils/styles';
-
-export const RoleCheckmark = styled(Checkmark)`
-  padding-left: 4px;
-`;
-
-const permissions = [
-  {
-    code: 'owner',
-    name: 'Owner',
-    description:
-      'Can view, create and edit team projects, and change settings for the team. Will have admin rights on all projects in this team. Can delete the team and all team projects.',
-  },
-  {
-    code: 'admin',
-    name: 'Admin',
-    description:
-      'Can view, create and edit team projects, and change settings for the team. Will have admin rights on all projects in this team.',
-  },
-
-  { code: 'member', name: 'Member', description: 'Can view, create, and edit team projects, but not change settings.' },
-];
-
-export const RoleName = styled.div`
-  font-size: 14px;
-  font-weight: 700;
-`;
-export const RoleDescription = styled.div`
-  margin-top: 4px;
-  font-size: 14px;
-`;
-
-export const MiniProfileActions = styled.ul`
-  list-style-type: none;
-`;
-
-export const MiniProfileActionWrapper = styled.li``;
-
-export const MiniProfileActionItem = styled.span<{ disabled?: boolean }>`
-  color: #c2c6dc;
-  display: block;
-  font-weight: 400;
-  padding: 6px 12px;
-  position: relative;
-  text-decoration: none;
-
-  ${props =>
-    props.disabled
-      ? css`
-          user-select: none;
-          pointer-events: none;
-          color: ${mixin.rgba(props.theme.colors.text.primary, 0.4)};
-        `
-      : css`
-          cursor: pointer;
-          &:hover {
-            background: ${props.theme.colors.primary};
-          }
-        `}
-`;
-
-export const Content = styled.div`
-  padding: 0 12px 12px;
-`;
-
-export const CurrentPermission = styled.span`
-  margin-left: 4px;
-  color: ${props => mixin.rgba(props.theme.colors.text.secondary, 0.4)};
-`;
-
-export const Separator = styled.div`
-  height: 1px;
-  border-top: 1px solid #414561;
-  margin: 0.25rem !important;
-`;
-
-export const WarningText = styled.span`
-  display: flex;
-  color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.4)};
-  padding: 6px;
-`;
-
-export const DeleteDescription = styled.div`
-  font-size: 14px;
-  color: ${props => props.theme.colors.text.primary};
-`;
-
-export const RemoveMemberButton = styled(Button)`
-  margin-top: 16px;
-  padding: 6px 12px;
-  width: 100%;
-`;
-
-type TeamRoleManagerPopupProps = {
-  user: User;
-  users: Array<User>;
-  warning?: string | null;
-  canChangeRole?: boolean;
-  onChangeRole?: (roleCode: RoleCode) => void;
-  updateUserPassword?: (user: TaskUser, password: string) => void;
-  onDeleteUser?: (userID: string, newOwnerID: string | null) => void;
-};
-
-const TeamRoleManagerPopup: React.FC<TeamRoleManagerPopupProps> = ({
-  warning,
-  user,
-  users,
-  canChangeRole,
-  onDeleteUser,
-  updateUserPassword,
-  onChangeRole,
-}) => {
-  const { hidePopup, setTab } = usePopup();
-  const [userPass] = useState({ pass: '', passConfirm: '' });
-  const [deleteUser, setDeleteUser] = useState<{ label: string; value: string } | null>(null);
-  const hasOwned = user.owned.projects.length !== 0 || user.owned.teams.length !== 0;
-  return (
-    <>
-      <Popup title={null} tab={0}>
-        <MiniProfileActions>
-          <MiniProfileActionWrapper>
-            {user.role && (
-              <MiniProfileActionItem
-                onClick={() => {
-                  setTab(1);
-                }}
-              >
-                Change permissions...
-                <CurrentPermission>{`(${user.role.name})`}</CurrentPermission>
-              </MiniProfileActionItem>
-            )}
-            <MiniProfileActionItem
-              disabled
-              onClick={() => {
-                setTab(3);
-              }}
-            >
-              Reset password...
-            </MiniProfileActionItem>
-            <MiniProfileActionItem onClick={() => setTab(2)}>Remove from organzation...</MiniProfileActionItem>
-          </MiniProfileActionWrapper>
-        </MiniProfileActions>
-        {warning && (
-          <>
-            <Separator />
-            <WarningText>{warning}</WarningText>
-          </>
-        )}
-      </Popup>
-      <Popup title="Change Permissions" onClose={() => hidePopup()} tab={1}>
-        <MiniProfileActions>
-          <MiniProfileActionWrapper>
-            {permissions
-              .filter(p => (user.role && user.role.code === 'owner') || p.code !== 'owner')
-              .map(perm => (
-                <MiniProfileActionItem
-                  disabled={user.role && perm.code !== user.role.code && !canChangeRole}
-                  key={perm.code}
-                  onClick={() => {
-                    if (onChangeRole && user.role && perm.code !== user.role.code) {
-                      switch (perm.code) {
-                        case 'owner':
-                          onChangeRole(RoleCode.Owner);
-                          break;
-                        case 'admin':
-                          onChangeRole(RoleCode.Admin);
-                          break;
-                        case 'member':
-                          onChangeRole(RoleCode.Member);
-                          break;
-                        default:
-                          break;
-                      }
-                      hidePopup();
-                    }
-                  }}
-                >
-                  <RoleName>
-                    {perm.name}
-                    {user.role && perm.code === user.role.code && <RoleCheckmark width={12} height={12} />}
-                  </RoleName>
-                  <RoleDescription>{perm.description}</RoleDescription>
-                </MiniProfileActionItem>
-              ))}
-          </MiniProfileActionWrapper>
-          {user.role && user.role.code === 'owner' && (
-            <>
-              <Separator />
-              <WarningText>You can not change roles because there must be an owner.</WarningText>
-            </>
-          )}
-        </MiniProfileActions>
-      </Popup>
-      <Popup title="Remove from Organization?" onClose={() => hidePopup()} tab={2}>
-        <Content>
-          <DeleteDescription>
-            Removing this user from the organzation will remove them from assigned tasks, projects, and teams.
-          </DeleteDescription>
-          {hasOwned && (
-            <>
-              <DeleteDescription>{`The user is the owner of ${user.owned.projects.length} projects & ${user.owned.teams.length} teams.`}</DeleteDescription>
-              <DeleteDescription>
-                Choose a new user to take over ownership of the users teams & projects.
-              </DeleteDescription>
-              <UserSelect
-                onChange={v => setDeleteUser(v)}
-                value={deleteUser}
-                options={users.map(u => ({ label: u.fullName, value: u.id }))}
-              />
-            </>
-          )}
-          <UserPassConfirmButton
-            disabled={!(!hasOwned || (hasOwned && deleteUser))}
-            onClick={() => {
-              if (onDeleteUser) {
-                if (!hasOwned || (hasOwned && deleteUser)) {
-                  onDeleteUser(user.id, deleteUser ? deleteUser.value : null);
-                }
-              }
-            }}
-            color="danger"
-          >
-            Delete user
-          </UserPassConfirmButton>
-        </Content>
-      </Popup>
-      <Popup title="Really remove from Team?" onClose={() => hidePopup()} tab={4}>
-        <Content>
-          <DeleteDescription>
-            Removing this user from the organzation will remove them from assigned tasks, projects, and teams.
-          </DeleteDescription>
-          <DeleteDescription>{`The user is the owner of ${user.owned.projects.length} projects & ${user.owned.teams.length} teams.`}</DeleteDescription>
-          <UserSelect onChange={NOOP} value={null} options={users.map(u => ({ label: u.fullName, value: u.id }))} />
-          <UserPassConfirmButton
-            onClick={() => {
-              // onDeleteUser();
-            }}
-            color="danger"
-          >
-            Delete user
-          </UserPassConfirmButton>
-        </Content>
-      </Popup>
-      <Popup title="Reset password?" onClose={() => hidePopup()} tab={3}>
-        <Content>
-          <DeleteDescription>
-            You can either set the users new password directly or send the user an email allowing them to reset their
-            own password.
-          </DeleteDescription>
-          <UserPassBar>
-            <UserPassButton onClick={() => setTab(4)} color="warning">
-              Set password...
-            </UserPassButton>
-            <UserPassButton color="warning" variant="outline">
-              Send reset link
-            </UserPassButton>
-          </UserPassBar>
-        </Content>
-      </Popup>
-      <Popup title="Reset password" onClose={() => hidePopup()} tab={4}>
-        <Content>
-          <NewUserPassInput defaultValue={userPass.pass} width="100%" variant="alternate" placeholder="New password" />
-          <NewUserPassInput
-            defaultValue={userPass.passConfirm}
-            width="100%"
-            variant="alternate"
-            placeholder="New password (confirm)"
-          />
-          <UserPassConfirmButton
-            disabled={userPass.pass === '' || userPass.passConfirm === ''}
-            onClick={() => {
-              if (userPass.pass === userPass.passConfirm && updateUserPassword) {
-                updateUserPassword(user, userPass.pass);
-              }
-            }}
-            color="danger"
-          >
-            Set password
-          </UserPassConfirmButton>
-        </Content>
-      </Popup>
-    </>
-  );
-};
-
-const UserSelect = styled(Select)`
-  margin: 8px 0;
-  padding: 8px 0;
-`;
-
-const NewUserPassInput = styled(Input)`
-  margin: 8px 0;
-`;
-
-const InviteMemberButton = styled(Button)`
-  padding: 7px 12px;
-`;
-
-const UserPassBar = styled.div`
-  display: flex;
-  padding-top: 8px;
-`;
-
-const UserPassConfirmButton = styled(Button)`
-  width: 100%;
-  padding: 7px 12px;
-`;
-
-const UserPassButton = styled(Button)`
-  width: 50%;
-  padding: 7px 12px;
-  & ~ & {
-    margin-left: 6px;
-  }
-`;
-
-const MemberItemOptions = styled.div``;
-
-const MemberItemOption = styled(Button)`
-  padding: 7px 9px;
-  margin: 4px 0 4px 8px;
-  float: left;
-  min-width: 95px;
-`;
-
-const MemberList = styled.div`
-  border-top: 1px solid ${props => props.theme.colors.border};
-`;
-
-const MemberListItem = styled.div`
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: space-between;
-  border-bottom: 1px solid ${props => props.theme.colors.border};
-  min-height: 40px;
-  padding: 12px 0 12px 40px;
-  position: relative;
-`;
-
-const MemberListItemDetails = styled.div`
-  float: left;
-  flex: 1 0 auto;
-  padding-left: 8px;
-`;
-
-const InviteIcon = styled(UserPlus)`
-  padding-right: 4px;
-`;
-
-const MemberProfile = styled(TaskAssignee)`
-  position: absolute;
-  top: 16px;
-  left: 0;
-  margin: 0;
-`;
-
-const MemberItemName = styled.p`
-  color: ${props => props.theme.colors.text.secondary};
-`;
-
-const MemberItemUsername = styled.p`
-  color: ${props => props.theme.colors.text.primary};
-`;
-
-const MemberListHeader = styled.div`
-  display: flex;
-  flex-direction: column;
-`;
-const ListTitle = styled.h3`
-  font-size: 18px;
-  color: ${props => props.theme.colors.text.secondary};
-  margin-bottom: 12px;
-`;
-const ListDesc = styled.span`
-  font-size: 16px;
-  color: ${props => props.theme.colors.text.primary};
-`;
-const FilterSearch = styled(Input)`
-  margin: 0;
-`;
-
-const ListActions = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 8px;
-  margin-bottom: 18px;
-`;
-
-const MemberListWrapper = styled.div`
-  flex: 1 1;
-`;
-
-const Container = styled.div`
-  padding: 2.2rem;
-  display: flex;
-  width: 100%;
-  max-width: 1400px;
-  position: relative;
-  margin: 0 auto;
-`;
-
-const TabNav = styled.div`
-  float: left;
-  width: 220px;
-  height: 100%;
-  display: block;
-  position: relative;
-`;
-
-const TabNavContent = styled.ul`
-  display: block;
-  width: auto;
-  border-bottom: 0 !important;
-  border-right: 1px solid rgba(0, 0, 0, 0.05);
-`;
-
-const TabNavItem = styled.li`
-  padding: 0.35rem 0.3rem;
-  height: 48px;
-  display: block;
-  position: relative;
-`;
-
-const TabNavItemButton = styled.button<{ active: boolean }>`
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-
-  padding-top: 10px !important;
-  padding-bottom: 10px !important;
-  padding-left: 12px !important;
-  padding-right: 8px !important;
-  width: 100%;
-  position: relative;
-
-  color: ${props => (props.active ? `${props.theme.colors.secondary}` : props.theme.colors.text.primary)};
-  &:hover {
-    color: ${props => `${props.theme.colors.primary}`};
-  }
-  &:hover svg {
-    fill: ${props => props.theme.colors.primary};
-  }
-`;
-const TabItemUser = styled(User)<{ active: boolean }>`
-fill: ${props => (props.active ? `${props.theme.colors.primary}` : props.theme.colors.text.primary)}
-stroke: ${props => (props.active ? `${props.theme.colors.primary}` : props.theme.colors.text.primary)}
-`;
-
-const TabNavItemSpan = styled.span`
-  text-align: left;
-  padding-left: 9px;
-  font-size: 14px;
-`;
-
-const TabNavLine = styled.span<{ top: number }>`
-  left: auto;
-  right: 0;
-  width: 2px;
-  height: 48px;
-  transform: scaleX(1);
-  top: ${props => props.top}px;
-
-  background: linear-gradient(30deg, ${props => props.theme.colors.primary}, ${props => props.theme.colors.primary});
-  box-shadow: 0 0 8px 0 ${props => props.theme.colors.primary};
-  display: block;
-  position: absolute;
-  transition: all 0.2s ease;
-`;
-
-const TabContentWrapper = styled.div`
-  position: relative;
-  display: block;
-  overflow: hidden;
-  width: 100%;
-  margin-left: 1rem;
-`;
-
-const TabContent = styled.div`
-  position: relative;
-  width: 100%;
-  display: block;
-  padding: 0;
-  padding: 1.5rem;
-  background-color: #10163a;
-  border-radius: 0.5rem;
-`;
-
-const items = [{ name: 'Members' }];
-
-type NavItemProps = {
-  active: boolean;
-  name: string;
-  tab: number;
-  onClick: (tab: number, top: number) => void;
-};
-const NavItem: React.FC<NavItemProps> = ({ active, name, tab, onClick }) => {
-  const $item = useRef<HTMLLIElement>(null);
-  return (
-    <TabNavItem
-      key={name}
-      ref={$item}
-      onClick={() => {
-        if ($item && $item.current) {
-          const pos = $item.current.getBoundingClientRect();
-          onClick(tab, pos.top);
-        }
-      }}
-    >
-      <TabNavItemButton active={active}>
-        <TabItemUser width={14} height={14} active={active} />
-        <TabNavItemSpan>{name}</TabNavItemSpan>
-      </TabNavItemButton>
-    </TabNavItem>
-  );
-};
-
-type AdminProps = {
-  initialTab: number;
-  onAddUser: ($target: React.RefObject<HTMLElement>) => void;
-  onDeleteUser: (userID: string, newOwnerID: string | null) => void;
-  onInviteUser: ($target: React.RefObject<HTMLElement>) => void;
-  users: Array<User>;
-  invitedUsers: Array<InvitedUserAccount>;
-  canInviteUser: boolean;
-  onUpdateUserPassword: (user: TaskUser, password: string) => void;
-  onDeleteInvitedUser: (invitedUserID: string) => void;
-};
-
-const Admin: React.FC<AdminProps> = ({
-  initialTab,
-  onAddUser,
-  onUpdateUserPassword,
-  canInviteUser,
-  onDeleteUser,
-  onDeleteInvitedUser,
-  onInviteUser,
-  invitedUsers,
-  users,
-}) => {
-  const warning =
-    'You can’t leave because you are the only admin. To make another user an admin, click their avatar, select “Change permissions…”, and select “Admin”.';
-  const [currentTop, setTop] = useState(initialTab * 48);
-  const [currentTab, setTab] = useState(initialTab);
-  const { showPopup } = usePopup();
-  const $tabNav = useRef<HTMLDivElement>(null);
-
-  const [updateUserRole] = useUpdateUserRoleMutation();
-  return (
-    <Container>
-      <TabNav ref={$tabNav}>
-        <TabNavContent>
-          {items.map((item, idx) => (
-            <NavItem
-              key={item.name}
-              onClick={(tab, top) => {
-                if ($tabNav && $tabNav.current) {
-                  const pos = $tabNav.current.getBoundingClientRect();
-                  setTab(tab);
-                  setTop(top - pos.top);
-                }
-              }}
-              name={item.name}
-              tab={idx}
-              active={idx === currentTab}
-            />
-          ))}
-          <TabNavLine top={currentTop} />
-        </TabNavContent>
-      </TabNav>
-      <TabContentWrapper>
-        <TabContent>
-          <MemberListWrapper>
-            <MemberListHeader>
-              <ListTitle>{`Members (${users.length + invitedUsers.length})`}</ListTitle>
-              <ListDesc>
-                Organization admins can create / manage / delete all projects & teams. Members only have access to teams
-                or projects they have been added to.
-              </ListDesc>
-              <ListActions>
-                <FilterSearch width="250px" variant="alternate" placeholder="Filter by name" />
-                {canInviteUser && (
-                  <InviteMemberButton
-                    onClick={$target => {
-                      onAddUser($target);
-                    }}
-                  >
-                    <InviteIcon width={16} height={16} />
-                    New Member
-                  </InviteMemberButton>
-                )}
-              </ListActions>
-            </MemberListHeader>
-            <MemberList>
-              {users.map(member => {
-                const projectTotal = member.owned.projects.length + member.member.projects.length;
-                return (
-                  <MemberListItem>
-                    <MemberProfile showRoleIcons size={32} onMemberProfile={NOOP} member={member} />
-                    <MemberListItemDetails>
-                      <MemberItemName>{member.fullName}</MemberItemName>
-                      <MemberItemUsername>{`@${member.username}`}</MemberItemUsername>
-                    </MemberListItemDetails>
-                    <MemberItemOptions>
-                      <MemberItemOption variant="flat">{`On ${projectTotal} projects`}</MemberItemOption>
-                      <MemberItemOption
-                        variant="outline"
-                        onClick={$target => {
-                          showPopup(
-                            $target,
-                            <TeamRoleManagerPopup
-                              user={member}
-                              users={users}
-                              warning={member.role && member.role.code === 'owner' ? warning : null}
-                              updateUserPassword={(user, password) => {
-                                onUpdateUserPassword(user, password);
-                              }}
-                              canChangeRole={(member.role && member.role.code !== 'owner') ?? false}
-                              onChangeRole={roleCode => {
-                                updateUserRole({ variables: { userID: member.id, roleCode } });
-                              }}
-                              onDeleteUser={onDeleteUser}
-                            />,
-                          );
-                        }}
-                      >
-                        Manage
-                      </MemberItemOption>
-                    </MemberItemOptions>
-                  </MemberListItem>
-                );
-              })}
-              {invitedUsers.map(member => {
-                return (
-                  <MemberListItem>
-                    <MemberProfile
-                      showRoleIcons
-                      size={32}
-                      onMemberProfile={NOOP}
-                      member={{
-                        id: member.id,
-                        fullName: member.email,
-                        profileIcon: {
-                          bgColor: '#fff',
-                          url: null,
-                          initials: member.email.charAt(0),
-                        },
-                      }}
-                    />
-                    <MemberListItemDetails>
-                      <MemberItemName>{member.email}</MemberItemName>
-                      <MemberItemUsername>Invited</MemberItemUsername>
-                    </MemberListItemDetails>
-                    <MemberItemOptions>
-                      <MemberItemOption
-                        variant="outline"
-                        onClick={$target => {
-                          showPopup(
-                            $target,
-                            <TeamRoleManagerPopup
-                              user={{
-                                id: member.id,
-                                fullName: member.email,
-                                profileIcon: {
-                                  bgColor: '#fff',
-                                  url: null,
-                                  initials: member.email.charAt(0),
-                                },
-                                member: {
-                                  teams: [],
-                                  projects: [],
-                                },
-                                owned: {
-                                  teams: [],
-                                  projects: [],
-                                },
-                              }}
-                              users={users}
-                              onDeleteUser={() => {
-                                onDeleteInvitedUser(member.id);
-                              }}
-                            />,
-                          );
-                        }}
-                      >
-                        Manage
-                      </MemberItemOption>
-                    </MemberItemOptions>
-                  </MemberListItem>
-                );
-              })}
-            </MemberList>
-          </MemberListWrapper>
-        </TabContent>
-      </TabContentWrapper>
-    </Container>
-  );
-};
-
-export default Admin;

frontend/src/shared/components/Button/Button.stories.tsx

@@ -1,138 +0,0 @@
-import React from 'react';
-import { action } from '@storybook/addon-actions';
-import BaseStyles from 'App/BaseStyles';
-import NormalizeStyles from 'App/NormalizeStyles';
-import theme from 'App/ThemeStyles';
-import styled, { ThemeProvider } from 'styled-components';
-import Button from '.';
-
-export default {
-  component: Button,
-  title: 'Button',
-  parameters: {
-    backgrounds: [
-      { name: 'gray', value: '#f8f8f8', default: true },
-      { name: 'white', value: '#ffffff' },
-    ],
-  },
-};
-
-const ButtonRow = styled.div`
-  display: flex;
-  align-items: center;
-  justify-items: center;
-  margin: 25px;
-  width: 100%;
-  & > button {
-    margin-right: 1.5rem;
-  }
-`;
-
-export const Default = () => {
-  return (
-    <>
-      <BaseStyles />
-      <NormalizeStyles />
-      <ThemeProvider theme={theme}>
-        <ButtonRow>
-          <Button>Primary</Button>
-          <Button color="success">Success</Button>
-          <Button color="danger">Danger</Button>
-          <Button color="warning">Warning</Button>
-          <Button color="dark">Dark</Button>
-          <Button disabled>Disabled</Button>
-        </ButtonRow>
-        <ButtonRow>
-          <Button variant="outline">Primary</Button>
-          <Button variant="outline" color="success">
-            Success
-          </Button>
-          <Button variant="outline" color="danger">
-            Danger
-          </Button>
-          <Button variant="outline" color="warning">
-            Warning
-          </Button>
-          <Button variant="outline" color="dark">
-            Dark
-          </Button>
-          <Button variant="outline" disabled>
-            Disabled
-          </Button>
-        </ButtonRow>
-        <ButtonRow>
-          <Button variant="flat">Primary</Button>
-          <Button variant="flat" color="success">
-            Success
-          </Button>
-          <Button variant="flat" color="danger">
-            Danger
-          </Button>
-          <Button variant="flat" color="warning">
-            Warning
-          </Button>
-          <Button variant="flat" color="dark">
-            Dark
-          </Button>
-          <Button variant="flat" disabled>
-            Disabled
-          </Button>
-        </ButtonRow>
-        <ButtonRow>
-          <Button variant="lineDown">Primary</Button>
-          <Button variant="lineDown" color="success">
-            Success
-          </Button>
-          <Button variant="lineDown" color="danger">
-            Danger
-          </Button>
-          <Button variant="lineDown" color="warning">
-            Warning
-          </Button>
-          <Button variant="lineDown" color="dark">
-            Dark
-          </Button>
-          <Button variant="lineDown" disabled>
-            Disabled
-          </Button>
-        </ButtonRow>
-        <ButtonRow>
-          <Button variant="gradient">Primary</Button>
-          <Button variant="gradient" color="success">
-            Success
-          </Button>
-          <Button variant="gradient" color="danger">
-            Danger
-          </Button>
-          <Button variant="gradient" color="warning">
-            Warning
-          </Button>
-          <Button variant="gradient" color="dark">
-            Dark
-          </Button>
-          <Button variant="gradient" disabled>
-            Disabled
-          </Button>
-        </ButtonRow>
-        <ButtonRow>
-          <Button variant="relief">Primary</Button>
-          <Button variant="relief" color="success">
-            Success
-          </Button>
-          <Button variant="relief" color="danger">
-            Danger
-          </Button>
-          <Button variant="relief" color="warning">
-            Warning
-          </Button>
-          <Button variant="relief" color="dark">
-            Dark
-          </Button>
-          <Button variant="relief" disabled>
-            Disabled
-          </Button>
-        </ButtonRow>
-      </ThemeProvider>
-    </>
-  );
-};

frontend/src/shared/components/Button/index.tsx

@@ -1,253 +0,0 @@
-import React, { useRef } from 'react';
-import styled, { css } from 'styled-components/macro';
-import { mixin } from '../../utils/styles';
-
-const Text = styled.span<{ fontSize: string; justifyTextContent: string; hasIcon?: boolean }>`
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: ${props => props.justifyTextContent};
-  transition: all 0.2s ease;
-  font-size: ${props => props.fontSize};
-  color: ${props => props.theme.colors.text.secondary};
-  ${props =>
-    props.hasIcon &&
-    css`
-      padding-left: 4px;
-    `}
-`;
-
-const Base = styled.button<{ color: string; disabled: boolean }>`
-  transition: all 0.2s ease;
-  position: relative;
-  border: none;
-  cursor: pointer;
-  padding: 0.75rem 2rem;
-  border-radius: ${props => props.theme.borderRadius.alternate};
-  display: flex;
-  align-items: center;
-
-  ${props =>
-    props.disabled &&
-    css`
-      opacity: 0.5;
-      cursor: default;
-      pointer-events: none;
-    `}
-`;
-
-const Filled = styled(Base)<{ hoverVariant: HoverVariant }>`
-  background: ${props => props.theme.colors[props.color]};
-  ${props =>
-    props.hoverVariant === 'boxShadow' &&
-    css`
-      &:hover {
-        box-shadow: 0 8px 25px -8px ${props.theme.colors[props.color]};
-      }
-    `}
-`;
-
-const Outline = styled(Base)<{ invert: boolean }>`
-  border: 1px solid ${props => props.theme.colors[props.color]};
-  background: transparent;
-  ${props =>
-    props.invert
-      ? css`
-          background: ${props.theme.colors[props.color]});
-          & ${Text} {
-            color: ${props.theme.colors.text.secondary});
-          }
-          &:hover {
-            background: ${mixin.rgba(props.theme.colors[props.color], 0.8)};
-          }
-        `
-      : css`
-          & ${Text} {
-            color: ${props.theme.colors[props.color]});
-          }
-          &:hover {
-            background: ${mixin.rgba(props.theme.colors[props.color], 0.08)};
-          }
-        `}
-`;
-
-const Flat = styled(Base)`
-  background: transparent;
-  &:hover {
-    background: ${props => mixin.rgba(props.theme.colors[props.color], 0.2)};
-  }
-`;
-
-const LineX = styled.span<{ color: string }>`
-  transition: all 0.2s ease;
-  position: absolute;
-  height: 2px;
-  width: 0;
-  top: auto;
-  bottom: -2px;
-  left: 50%;
-  transform: translate(-50%);
-  background: ${props => mixin.rgba(props.theme.colors[props.color], 1)};
-`;
-
-const LineDown = styled(Base)`
-  background: transparent;
-  border-radius: 0;
-  border-width: 0;
-  border-style: solid;
-  border-bottom-width: 2px;
-  border-color: ${props => mixin.rgba(props.theme.colors[props.color], 0.2)};
-
-  &:hover ${LineX} {
-    width: 100%;
-  }
-  &:hover ${Text} {
-    transform: translateY(2px);
-  }
-`;
-
-const Gradient = styled(Base)`
-  background: linear-gradient(
-    30deg,
-    ${props => mixin.rgba(props.theme.colors[props.color], 1)},
-    ${props => mixin.rgba(props.theme.colors[props.color], 0.5)}
-  );
-  text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
-  &:hover {
-    transform: translateY(-2px);
-  }
-`;
-
-const Relief = styled(Base)`
-  background: ${props => mixin.rgba(props.theme.colors[props.color], 1)};
-  -webkit-box-shadow: 0 -3px 0 0 rgba(0, 0, 0, 0.2) inset;
-  box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.2);
-
-  &:active {
-    transform: translateY(3px);
-    box-shadow: none !important;
-  }
-`;
-
-type HoverVariant = 'boxShadow' | 'none';
-type ButtonProps = {
-  fontSize?: string;
-  variant?: 'filled' | 'outline' | 'flat' | 'lineDown' | 'gradient' | 'relief';
-  hoverVariant?: HoverVariant;
-  color?: 'primary' | 'danger' | 'success' | 'warning' | 'dark';
-  disabled?: boolean;
-  type?: 'button' | 'submit';
-  icon?: JSX.Element;
-  invert?: boolean;
-  className?: string;
-  onClick?: ($target: React.RefObject<HTMLButtonElement>) => void;
-  justifyTextContent?: string;
-};
-
-const Button: React.FC<ButtonProps> = ({
-  disabled = false,
-  fontSize = '14px',
-  invert = false,
-  color = 'primary',
-  variant = 'filled',
-  hoverVariant = 'boxShadow',
-  type = 'button',
-  justifyTextContent = 'center',
-  icon,
-  onClick,
-  className,
-  children,
-}) => {
-  const $button = useRef<HTMLButtonElement>(null);
-  const handleClick = () => {
-    if (onClick) {
-      onClick($button);
-    }
-  };
-  switch (variant) {
-    case 'filled':
-      return (
-        <Filled
-          ref={$button}
-          hoverVariant={hoverVariant}
-          type={type}
-          onClick={handleClick}
-          className={className}
-          disabled={disabled}
-          color={color}
-        >
-          {icon && icon}
-          <Text hasIcon={typeof icon !== 'undefined'} justifyTextContent={justifyTextContent} fontSize={fontSize}>
-            {children}
-          </Text>
-        </Filled>
-      );
-    case 'outline':
-      return (
-        <Outline
-          ref={$button}
-          invert={invert}
-          type={type}
-          onClick={handleClick}
-          className={className}
-          disabled={disabled}
-          color={color}
-        >
-          <Text justifyTextContent={justifyTextContent} fontSize={fontSize}>
-            {children}
-          </Text>
-        </Outline>
-      );
-    case 'flat':
-      return (
-        <Flat ref={$button} type={type} onClick={handleClick} className={className} disabled={disabled} color={color}>
-          <Text justifyTextContent={justifyTextContent} fontSize={fontSize}>
-            {children}
-          </Text>
-        </Flat>
-      );
-    case 'lineDown':
-      return (
-        <LineDown
-          ref={$button}
-          type={type}
-          onClick={handleClick}
-          className={className}
-          disabled={disabled}
-          color={color}
-        >
-          <Text justifyTextContent={justifyTextContent} fontSize={fontSize}>
-            {children}
-          </Text>
-          <LineX color={color} />
-        </LineDown>
-      );
-    case 'gradient':
-      return (
-        <Gradient
-          ref={$button}
-          type={type}
-          onClick={handleClick}
-          className={className}
-          disabled={disabled}
-          color={color}
-        >
-          <Text justifyTextContent={justifyTextContent} fontSize={fontSize}>
-            {children}
-          </Text>
-        </Gradient>
-      );
-    case 'relief':
-      return (
-        <Relief ref={$button} type={type} onClick={handleClick} className={className} disabled={disabled} color={color}>
-          <Text justifyTextContent={justifyTextContent} fontSize={fontSize}>
-            {children}
-          </Text>
-        </Relief>
-      );
-    default:
-      throw new Error('not a valid variant');
-  }
-};
-
-export default Button;

frontend/src/shared/components/Card/Card.stories.tsx

@@ -1,174 +0,0 @@
-import React, { useRef } from 'react';
-import { action } from '@storybook/addon-actions';
-import LabelColors from 'shared/constants/labelColors';
-import Card from '.';
-
-export default {
-  component: Card,
-  title: 'Card',
-  parameters: {
-    backgrounds: [
-      { name: 'gray', value: '#f8f8f8', default: true },
-      { name: 'white', value: '#ffffff' },
-    ],
-  },
-};
-
-const labelData: Array<ProjectLabel> = [
-  {
-    id: 'development',
-    name: 'Development',
-    createdDate: new Date().toString(),
-    labelColor: {
-      id: '1',
-      colorHex: LabelColors.BLUE,
-      name: 'blue',
-      position: 1,
-    },
-  },
-];
-
-export const Default = () => {
-  const $ref = useRef<HTMLDivElement>(null);
-  return (
-    <Card
-      taskID="1"
-      taskGroupID="1"
-      description=""
-      ref={$ref}
-      title="Hello, world"
-      onClick={action('on click')}
-      onContextMenu={action('on context click')}
-    />
-  );
-};
-
-export const Labels = () => {
-  const $ref = useRef<HTMLDivElement>(null);
-  return (
-    <Card
-      taskID="1"
-      taskGroupID="1"
-      description=""
-      ref={$ref}
-      title="Hello, world"
-      labels={labelData}
-      onClick={action('on click')}
-      onContextMenu={action('on context click')}
-    />
-  );
-};
-
-export const Badges = () => {
-  const $ref = useRef<HTMLDivElement>(null);
-  return (
-    <Card
-      taskID="1"
-      taskGroupID="1"
-      description="hello!"
-      ref={$ref}
-      title="Hello, world"
-      onClick={action('on click')}
-      onContextMenu={action('on context click')}
-      watched
-      checklists={{ complete: 1, total: 4 }}
-      dueDate={{ isPastDue: false, formattedDate: 'Oct 26, 2020' }}
-    />
-  );
-};
-
-export const PastDue = () => {
-  const $ref = useRef<HTMLDivElement>(null);
-  return (
-    <Card
-      taskID="1"
-      taskGroupID="1"
-      description="hello!"
-      ref={$ref}
-      title="Hello, world"
-      onClick={action('on click')}
-      onContextMenu={action('on context click')}
-      watched
-      checklists={{ complete: 1, total: 4 }}
-      dueDate={{ isPastDue: true, formattedDate: 'Oct 26, 2020' }}
-    />
-  );
-};
-
-export const Everything = () => {
-  const $ref = useRef<HTMLDivElement>(null);
-  return (
-    <Card
-      taskID="1"
-      taskGroupID="1"
-      description="hello!"
-      ref={$ref}
-      title="Hello, world"
-      onClick={action('on click')}
-      onContextMenu={action('on context click')}
-      watched
-      members={[
-        {
-          id: '1',
-          fullName: 'Jordan Knott',
-          profileIcon: {
-            bgColor: '#0079bf',
-            initials: 'JK',
-            url: null,
-          },
-        },
-      ]}
-      labels={labelData}
-      checklists={{ complete: 1, total: 4 }}
-      dueDate={{ isPastDue: false, formattedDate: 'Oct 26, 2020' }}
-    />
-  );
-};
-
-export const Members = () => {
-  const $ref = useRef<HTMLDivElement>(null);
-  return (
-    <Card
-      description={null}
-      taskID="1"
-      taskGroupID="1"
-      ref={$ref}
-      title="Hello, world"
-      onClick={action('on click')}
-      onContextMenu={action('on context click')}
-      members={[
-        {
-          id: '1',
-          fullName: 'Jordan Knott',
-          profileIcon: {
-            bgColor: '#0079bf',
-            initials: 'JK',
-            url: null,
-          },
-        },
-      ]}
-      labels={[]}
-    />
-  );
-};
-
-export const Editable = () => {
-  const $ref = useRef<HTMLDivElement>(null);
-  return (
-    <Card
-      taskID="1"
-      taskGroupID="1"
-      description="hello!"
-      ref={$ref}
-      title="Hello, world"
-      onClick={action('on click')}
-      onContextMenu={action('on context click')}
-      watched
-      labels={labelData}
-      checklists={{ complete: 1, total: 4 }}
-      dueDate={{ isPastDue: false, formattedDate: 'Oct 26, 2020' }}
-      editable
-      onEditCard={action('edit card')}
-    />
-  );
-};

frontend/src/shared/components/Card/Styles.ts

@@ -1,258 +0,0 @@
-import styled, { css, keyframes } from 'styled-components';
-import { mixin } from 'shared/utils/styles';
-import TextareaAutosize from 'react-autosize-textarea';
-import { CheckCircle, CheckSquareOutline, Clock } from 'shared/icons';
-import TaskAssignee from 'shared/components/TaskAssignee';
-
-export const CardMember = styled(TaskAssignee)<{ zIndex: number }>`
-  box-shadow: 0 0 0 2px ${props => props.theme.colors.bg.secondary},
-    inset 0 0 0 1px ${props => mixin.rgba(props.theme.colors.bg.secondary, 0.07)};
-  z-index: ${props => props.zIndex};
-  position: relative;
-`;
-export const ChecklistIcon = styled(CheckSquareOutline)<{ color: 'success' | 'normal' }>`
-  ${props =>
-    props.color === 'success' &&
-    css`
-      fill: ${props.theme.colors.success};
-      stroke: ${props.theme.colors.success};
-    `}
-`;
-export const ClockIcon = styled(Clock)<{ color: string }>`
-  fill: ${props => props.color};
-`;
-
-export const EditorTextarea = styled(TextareaAutosize)`
-  overflow: hidden;
-  overflow-wrap: break-word;
-  resize: none;
-  height: 90px;
-  width: 100%;
-
-  background: none;
-  border: none;
-  box-shadow: none;
-  margin-bottom: 4px;
-  max-height: 162px;
-  min-height: 54px;
-  padding: 0;
-  font-size: 14px;
-  line-height: 18px;
-  color: ${props => props.theme.colors.text.primary};
-  &:focus {
-    border: none;
-    outline: none;
-  }
-`;
-
-export const ListCardBadges = styled.div`
-  float: left;
-  display: flex;
-  max-width: 100%;
-  margin-left: -2px;
-`;
-
-export const ListCardBadge = styled.div`
-  color: #5e6c84;
-  display: flex;
-  align-items: center;
-  margin: 0 6px 4px 0;
-  font-size: 12px;
-  max-width: 100%;
-  min-height: 20px;
-  overflow: hidden;
-  position: relative;
-  padding: 2px;
-  text-decoration: none;
-  text-overflow: ellipsis;
-  vertical-align: top;
-`;
-
-export const DescriptionBadge = styled(ListCardBadge)`
-  padding-right: 6px;
-`;
-
-export const DueDateCardBadge = styled(ListCardBadge)<{ isPastDue: boolean }>`
-  font-size: 12px;
-  ${props =>
-    props.isPastDue &&
-    css`
-      padding-left: 4px;
-      background-color: #ec9488;
-      border-radius: 3px;
-      color: #fff;
-    `}
-`;
-
-export const ListCardBadgeText = styled.span<{ color?: 'success' | 'normal' }>`
-  font-size: 12px;
-  padding: 0 4px 0 6px;
-  vertical-align: top;
-  white-space: nowrap;
-  ${props => props.color === 'success' && `color: ${props.theme.colors.success};`}
-`;
-
-export const ListCardContainer = styled.div<{ isActive: boolean; editable: boolean }>`
-  max-width: 256px;
-  margin-bottom: 8px;
-  border-radius: 3px;
-  ${mixin.boxShadowCard}
-  cursor: pointer !important;
-  position: relative;
-
-  background-color: ${props =>
-    props.isActive && !props.editable
-      ? mixin.darken(props.theme.colors.bg.secondary, 0.1)
-      : `${props.theme.colors.bg.secondary}`};
-`;
-
-export const ListCardInnerContainer = styled.div`
-  width: 100%;
-  height: 100%;
-`;
-
-export const ListCardDetails = styled.div<{ complete: boolean }>`
-  overflow: hidden;
-  padding: 6px 8px 2px;
-  position: relative;
-  z-index: 10;
-
-  ${props => props.complete && 'opacity: 0.6;'}
-`;
-
-const labelVariantExpandAnimation = keyframes`
-  0%   {min-width: 40px; width: 40px; height: 8px;}
-  50%  {min-width: 56px; width: auto; height: 8px;}
-  100% {min-width: 56px; width: auto; height: 16px;}
-`;
-
-const labelTextVariantExpandAnimation = keyframes`
-  0%   {transform: scale(0); visibility: hidden; pointer-events: none;}
-  75%   {transform: scale(0); visibility: hidden; pointer-events: none;}
-  100%   {transform: scale(1); visibility: visible; pointer-events: all;}
-`;
-
-const labelVariantShrinkAnimation = keyframes`
-  0% {min-width: 56px; width: auto; height: 16px;}
-  50%  {min-width: 56px; width: auto; height: 8px;}
-  100%   {min-width: 40px; width: 40px; height: 8px;}
-`;
-
-const labelTextVariantShrinkAnimation = keyframes`
-  0%   {transform: scale(1); visibility: visible; pointer-events: all;}
-  75%   {transform: scale(0); visibility: hidden; pointer-events: none;}
-  100%   {transform: scale(0); visibility: hidden; pointer-events: none;}
-`;
-export const ListCardLabelText = styled.span`
-  font-size: 12px;
-  font-weight: 700;
-  line-height: 16px;
-`;
-
-export const ListCardLabelsWrapper = styled.div`
-  overflow: auto;
-  position: relative;
-`;
-
-export const ListCardLabel = styled.span<{ variant: 'small' | 'large' }>`
-  ${props =>
-    props.variant === 'small'
-      ? css`
-          height: 8px;
-          min-width: 40px;
-          width: 40px;
-          & ${ListCardLabelText} {
-            transform: scale(0);
-            visibility: hidden;
-            pointer-events: none;
-          }
-        `
-      : css`
-          height: 16px;
-          min-width: 56px;
-          width: auto;
-        `}
-
-  padding: 0 8px;
-  max-width: 198px;
-  float: left;
-  margin: 0 4px 4px 0;
-  border-radius: 4px;
-  color: #fff;
-  display: flex;
-  position: relative;
-  background-color: ${props => props.color};
-`;
-
-export const ListCardLabels = styled.div<{ toggleLabels: boolean; toggleDirection: 'expand' | 'shrink' }>`
-  &:hover {
-    opacity: 0.8;
-  }
-  ${props =>
-    props.toggleLabels &&
-    props.toggleDirection === 'expand' &&
-    css`
-      & ${ListCardLabel} {
-        animation: ${labelVariantExpandAnimation} 0.45s ease-out;
-      }
-      & ${ListCardLabelText} {
-        animation: ${labelTextVariantExpandAnimation} 0.45s ease-out;
-      }
-    `}
-  ${props =>
-    props.toggleLabels &&
-    props.toggleDirection === 'shrink' &&
-    css`
-      & ${ListCardLabel} {
-        animation: ${labelVariantShrinkAnimation} 0.45s ease-out;
-      }
-      & ${ListCardLabelText} {
-        animation: ${labelTextVariantShrinkAnimation} 0.45s ease-out;
-      }
-    `}
-`;
-export const ListCardOperation = styled.span`
-  display: flex;
-  align-content: center;
-  justify-content: center;
-  border-radius: 3px;
-  opacity: 0.8;
-  padding: 6px;
-  position: absolute;
-  right: 2px;
-  top: 2px;
-  z-index: 100;
-  &:hover {
-    background-color: ${props => mixin.darken(props.theme.colors.bg.secondary, 0.25)};
-  }
-`;
-
-export const CardTitle = styled.span`
-  clear: both;
-  margin: 0 0 4px;
-  overflow: hidden;
-  text-decoration: none;
-  word-wrap: break-word;
-  line-height: 18px;
-  font-size: 14px;
-  color: ${props => props.theme.colors.text.primary};
-
-  display: flex;
-  align-items: center;
-`;
-
-export const CardMembers = styled.div`
-  float: right;
-  margin: 0 -2px 4px 0;
-  display: flex;
-`;
-
-export const CompleteIcon = styled(CheckCircle)`
-  fill: ${props => props.theme.colors.success};
-  margin-right: 4px;
-  flex-shrink: 0;
-`;
-
-export const EditorContent = styled.div`
-  display: flex;
-`;

frontend/src/shared/components/Card/index.tsx

@@ -1,271 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { Pencil, Eye, List } from 'shared/icons';
-import {
-  EditorTextarea,
-  CardMember,
-  EditorContent,
-  ChecklistIcon,
-  CompleteIcon,
-  DescriptionBadge,
-  DueDateCardBadge,
-  ListCardBadges,
-  ListCardBadge,
-  ListCardBadgeText,
-  ListCardContainer,
-  ListCardInnerContainer,
-  ListCardDetails,
-  ClockIcon,
-  ListCardLabels,
-  ListCardLabel,
-  ListCardLabelText,
-  ListCardLabelsWrapper,
-  ListCardOperation,
-  CardTitle,
-  CardMembers,
-} from './Styles';
-
-type DueDate = {
-  isPastDue: boolean;
-  formattedDate: string;
-};
-
-type Checklist = {
-  complete: number;
-  total: number;
-};
-
-type Props = {
-  title: string;
-  taskID: string;
-  taskGroupID: string;
-  complete?: boolean;
-  position?: string | number;
-  onContextMenu?: ($target: React.RefObject<HTMLElement>, taskID: string, taskGroupID: string) => void;
-  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
-  description?: null | string;
-  dueDate?: DueDate;
-  checklists?: Checklist | null;
-  labels?: Array<ProjectLabel>;
-  watched?: boolean;
-  wrapperProps?: any;
-  members?: Array<TaskUser> | null;
-  onCardLabelClick?: () => void;
-  onCardMemberClick?: OnCardMemberClick;
-  editable?: boolean;
-  setToggleLabels?: (toggle: false) => void;
-  onEditCard?: (taskGroupID: string, taskID: string, cardName: string) => void;
-  onCardTitleChange?: (name: string) => void;
-  labelVariant?: CardLabelVariant;
-  toggleLabels?: boolean;
-  toggleDirection?: 'shrink' | 'expand';
-};
-
-const Card = React.forwardRef(
-  (
-    {
-      wrapperProps,
-      onContextMenu,
-      taskID,
-      taskGroupID,
-      complete,
-      toggleLabels = false,
-      toggleDirection = 'shrink',
-      setToggleLabels,
-      onClick,
-      labels,
-      title,
-      dueDate,
-      description,
-      checklists,
-      position,
-      watched,
-      members,
-      labelVariant,
-      onCardMemberClick,
-      editable,
-      onCardLabelClick,
-      onEditCard,
-      onCardTitleChange,
-    }: Props,
-    $cardRef: any,
-  ) => {
-    const [currentCardTitle, setCardTitle] = useState(title);
-    const $editorRef: any = useRef();
-
-    useEffect(() => {
-      setCardTitle(title);
-    }, [title]);
-
-    useEffect(() => {
-      if ($editorRef && $editorRef.current) {
-        $editorRef.current.focus();
-        $editorRef.current.select();
-      }
-    }, []);
-
-    const handleKeyDown = (e: any) => {
-      if (e.key === 'Enter') {
-        e.preventDefault();
-        if (onEditCard) {
-          onEditCard(taskGroupID, taskID, currentCardTitle);
-        }
-      }
-    };
-    const [isActive, setActive] = useState(false);
-    const $innerCardRef: any = useRef(null);
-    const onOpenComposer = () => {
-      if (onContextMenu) {
-        onContextMenu($innerCardRef, taskID, taskGroupID);
-      }
-    };
-    const onTaskContext = (e: React.MouseEvent) => {
-      e.preventDefault();
-      e.stopPropagation();
-      onOpenComposer();
-    };
-    const onOperationClick = (e: React.MouseEvent<HTMLOrSVGElement>) => {
-      e.preventDefault();
-      e.stopPropagation();
-      onOpenComposer();
-    };
-    return (
-      <ListCardContainer
-        onMouseEnter={() => setActive(true)}
-        onMouseLeave={() => setActive(false)}
-        ref={$cardRef}
-        onClick={e => {
-          if (onClick) {
-            onClick(e);
-          }
-        }}
-        onContextMenu={onTaskContext}
-        isActive={isActive}
-        editable={editable}
-        {...wrapperProps}
-      >
-        <ListCardInnerContainer ref={$innerCardRef}>
-          {isActive && !editable && (
-            <ListCardOperation
-              onClick={e => {
-                e.stopPropagation();
-                if (onContextMenu) {
-                  onContextMenu($innerCardRef, taskID, taskGroupID);
-                }
-              }}
-            >
-              <Pencil width={8} height={8} />
-            </ListCardOperation>
-          )}
-          <ListCardDetails complete={complete ?? false}>
-            {labels && labels.length !== 0 && (
-              <ListCardLabelsWrapper>
-                <ListCardLabels
-                  toggleLabels={toggleLabels}
-                  toggleDirection={toggleDirection}
-                  onClick={e => {
-                    e.stopPropagation();
-                    if (onCardLabelClick) {
-                      onCardLabelClick();
-                    }
-                  }}
-                >
-                  {labels
-                    .slice()
-                    .sort((a, b) => a.labelColor.position - b.labelColor.position)
-                    .map(label => (
-                      <ListCardLabel
-                        onAnimationEnd={() => {
-                          if (setToggleLabels) {
-                            setToggleLabels(false);
-                          }
-                        }}
-                        variant={labelVariant ?? 'large'}
-                        color={label.labelColor.colorHex}
-                        key={label.id}
-                      >
-                        <ListCardLabelText>{label.name}</ListCardLabelText>
-                      </ListCardLabel>
-                    ))}
-                </ListCardLabels>
-              </ListCardLabelsWrapper>
-            )}
-            {editable ? (
-              <EditorContent>
-                {complete && <CompleteIcon width={16} height={16} />}
-                <EditorTextarea
-                  onChange={e => {
-                    setCardTitle(e.currentTarget.value);
-                    if (onCardTitleChange) {
-                      onCardTitleChange(e.currentTarget.value);
-                    }
-                  }}
-                  onClick={e => {
-                    e.stopPropagation();
-                  }}
-                  onKeyDown={handleKeyDown}
-                  value={currentCardTitle}
-                  ref={$editorRef}
-                />
-              </EditorContent>
-            ) : (
-              <CardTitle>
-                {complete && <CompleteIcon width={16} height={16} />}
-                {`${title}${position ? ` - ${position}` : ''}`}
-              </CardTitle>
-            )}
-            <ListCardBadges>
-              {watched && (
-                <ListCardBadge>
-                  <Eye width={8} height={8} />
-                </ListCardBadge>
-              )}
-              {dueDate && (
-                <DueDateCardBadge isPastDue={dueDate.isPastDue}>
-                  <ClockIcon color={dueDate.isPastDue ? '#fff' : '#6b778c'} width={8} height={8} />
-                  <ListCardBadgeText>{dueDate.formattedDate}</ListCardBadgeText>
-                </DueDateCardBadge>
-              )}
-              {description && (
-                <DescriptionBadge>
-                  <List width={8} height={8} />
-                </DescriptionBadge>
-              )}
-              {checklists && (
-                <ListCardBadge>
-                  <ChecklistIcon
-                    color={checklists.complete === checklists.total ? 'success' : 'normal'}
-                    width={8}
-                    height={8}
-                  />
-                  <ListCardBadgeText color={checklists.complete === checklists.total ? 'success' : 'normal'}>
-                    {`${checklists.complete}/${checklists.total}`}
-                  </ListCardBadgeText>
-                </ListCardBadge>
-              )}
-            </ListCardBadges>
-            <CardMembers>
-              {members &&
-                members.map((member, idx) => (
-                  <CardMember
-                    key={member.id}
-                    size={28}
-                    zIndex={members.length - idx}
-                    member={member}
-                    onMemberProfile={$target => {
-                      if (onCardMemberClick) {
-                        onCardMemberClick($target, taskID, member.id);
-                      }
-                    }}
-                  />
-                ))}
-            </CardMembers>
-          </ListCardDetails>
-        </ListCardInnerContainer>
-      </ListCardContainer>
-    );
-  },
-);
-
-Card.displayName = 'Card';
-
-export default Card;

frontend/src/shared/components/CardComposer/CardComposer.stories.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import { action } from '@storybook/addon-actions';
-import CardComposer from '.';
-
-export default {
-  component: CardComposer,
-  title: 'CardComposer',
-  parameters: {
-    backgrounds: [
-      { name: 'gray', value: '#f8f8f8', default: true },
-      { name: 'white', value: '#ffffff' },
-    ],
-  },
-};
-
-export const Default = () => {
-  return <CardComposer isOpen onClose={action('on close')} onCreateCard={action('on create card')} />;
-};

frontend/src/shared/components/CardComposer/Styles.ts

@@ -1,34 +0,0 @@
-import styled from 'styled-components';
-import Button from 'shared/components/Button';
-import TextareaAutosize from 'react-autosize-textarea';
-import { mixin } from 'shared/utils/styles';
-
-export const CancelIconWrapper = styled.div`
-  opacity: 0.8;
-  cursor: pointer;
-  font-size: 1.25em;
-  padding-left: 5px;
-`;
-
-export const CardComposerWrapper = styled.div<{ isOpen: boolean }>`
-  padding-bottom: 8px;
-  display: ${props => (props.isOpen ? 'flex' : 'none')};
-  flex-direction: column;
-`;
-
-export const ComposerControls = styled.div``;
-
-export const ComposerControlsSaveSection = styled.div`
-  display: flex;
-  float: left;
-  align-items: center;
-  justify-content: center;
-`;
-export const ComposerControlsActionsSection = styled.div`
-  float: right;
-`;
-export const AddCardButton = styled(Button)`
-  margin-right: 4px;
-  padding: 6px 12px;
-  border-radius: 3px;
-`;

frontend/src/shared/components/CardComposer/index.tsx

@@ -1,73 +0,0 @@
-import React, { useState, useRef } from 'react';
-import PropTypes from 'prop-types';
-import useOnEscapeKeyDown from 'shared/hooks/onEscapeKeyDown';
-import useOnOutsideClick from 'shared/hooks/onOutsideClick';
-import { Cross } from 'shared/icons';
-
-import {
-  CardComposerWrapper,
-  CancelIconWrapper,
-  AddCardButton,
-  ComposerControls,
-  ComposerControlsSaveSection,
-  ComposerControlsActionsSection,
-} from './Styles';
-import Card from '../Card';
-
-type Props = {
-  isOpen: boolean;
-  onCreateCard: (cardName: string) => void;
-  onClose: () => void;
-};
-
-const CardComposer = ({ isOpen, onCreateCard, onClose }: Props) => {
-  const [cardName, setCardName] = useState('');
-  const $cardRef = useRef<HTMLDivElement>(null);
-  useOnOutsideClick($cardRef, true, onClose, null);
-  useOnEscapeKeyDown(isOpen, onClose);
-  return (
-    <CardComposerWrapper isOpen={isOpen} ref={$cardRef}>
-      <Card
-        title={cardName}
-        taskID=""
-        taskGroupID=""
-        editable
-        onEditCard={(_taskGroupID, _taskID, name) => {
-          onCreateCard(name);
-          setCardName('');
-        }}
-        onCardTitleChange={name => {
-          setCardName(name);
-        }}
-      />
-      <ComposerControls>
-        <ComposerControlsSaveSection>
-          <AddCardButton
-            variant="relief"
-            onClick={() => {
-              onCreateCard(cardName);
-              setCardName('');
-            }}
-          >
-            Add Card
-          </AddCardButton>
-          <CancelIconWrapper onClick={() => onClose()}>
-            <Cross width={12} height={12} />
-          </CancelIconWrapper>
-        </ComposerControlsSaveSection>
-        <ComposerControlsActionsSection />
-      </ComposerControls>
-    </CardComposerWrapper>
-  );
-};
-
-CardComposer.propTypes = {
-  isOpen: PropTypes.bool,
-  onClose: PropTypes.func.isRequired,
-  onCreateCard: PropTypes.func.isRequired,
-};
-CardComposer.defaultProps = {
-  isOpen: true,
-};
-
-export default CardComposer;

frontend/src/shared/components/Checklist/Checklist.stories.tsx

@@ -1,155 +0,0 @@
-import React, { useState } from 'react';
-import { action } from '@storybook/addon-actions';
-import BaseStyles from 'App/BaseStyles';
-import NormalizeStyles from 'App/NormalizeStyles';
-import theme from 'App/ThemeStyles';
-import produce from 'immer';
-import styled, { ThemeProvider } from 'styled-components';
-import NOOP from 'shared/utils/noop';
-import Checklist, { ChecklistItem } from '.';
-
-export default {
-  component: Checklist,
-  title: 'Checklist',
-  parameters: {
-    backgrounds: [
-      { name: 'gray', value: '#f8f8f8', default: true },
-      { name: 'white', value: '#ffffff' },
-    ],
-  },
-};
-
-const Container = styled.div`
-  width: 552px;
-  margin: 25px;
-  border: 1px solid ${props => props.theme.colors.bg.primary};
-`;
-
-const defaultItems = [
-  {
-    id: '1',
-    position: 1,
-    taskChecklistID: '1',
-    complete: false,
-    name: 'Tasks',
-    assigned: null,
-    dueDate: null,
-  },
-  {
-    id: '2',
-    taskChecklistID: '1',
-    position: 2,
-    complete: false,
-    name: 'Projects',
-    assigned: null,
-    dueDate: null,
-  },
-  {
-    id: '3',
-    position: 3,
-    taskChecklistID: '1',
-    complete: false,
-    name: 'Teams',
-    assigned: null,
-    dueDate: null,
-  },
-  {
-    id: '4',
-    position: 4,
-    complete: false,
-    taskChecklistID: '1',
-    name: 'Organizations',
-    assigned: null,
-    dueDate: null,
-  },
-];
-
-export const Default = () => {
-  const [checklistName, setChecklistName] = useState('Checklist');
-  const [items, setItems] = useState(defaultItems);
-  const onToggleItem = (itemID: string, complete: boolean) => {
-    setItems(
-      produce(items, draftState => {
-        const idx = items.findIndex(item => item.id === itemID);
-        if (idx !== -1) {
-          draftState[idx] = {
-            ...draftState[idx],
-            complete,
-          };
-        }
-      }),
-    );
-  };
-  return (
-    <>
-      <BaseStyles />
-      <NormalizeStyles />
-      <ThemeProvider theme={theme}>
-        <Container>
-          <Checklist
-            wrapperProps={{}}
-            handleProps={{}}
-            name={checklistName}
-            checklistID="checklist-one"
-            items={items}
-            onDeleteChecklist={action('delete checklist')}
-            onChangeName={currentName => {
-              setChecklistName(currentName);
-            }}
-            onAddItem={itemName => {
-              let position = 1;
-              const lastItem = items[-1];
-              if (lastItem) {
-                position = lastItem.position * 2 + 1;
-              }
-              setItems([
-                ...items,
-                {
-                  id: `${Math.random()}`,
-                  name: itemName,
-                  complete: false,
-                  assigned: null,
-                  dueDate: null,
-                  position,
-                  taskChecklistID: '1',
-                },
-              ]);
-            }}
-            onDeleteItem={itemID => {
-              setItems(items.filter(item => item.id !== itemID));
-            }}
-            onChangeItemName={(itemID, currentName) => {
-              setItems(
-                produce(items, draftState => {
-                  const idx = items.findIndex(item => item.id === itemID);
-                  if (idx !== -1) {
-                    draftState[idx] = {
-                      ...draftState[idx],
-                      name: currentName,
-                    };
-                  }
-                }),
-              );
-            }}
-            onToggleItem={onToggleItem}
-          >
-            {items.map(item => (
-              <ChecklistItem
-                key={item.id}
-                wrapperProps={{}}
-                handleProps={{}}
-                checklistID="id"
-                itemID={item.id}
-                name={item.name}
-                complete={item.complete}
-                onDeleteItem={NOOP}
-                onChangeName={NOOP}
-                onToggleItem={NOOP}
-              />
-            ))}
-          </Checklist>
-        </Container>
-      </ThemeProvider>
-    </>
-  );
-};

frontend/src/shared/components/Checklist/index.tsx

@@ -1,635 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-import styled from 'styled-components';
-import { CheckSquare, Trash, Square, CheckSquareOutline, Clock, Cross, AccountPlus } from 'shared/icons';
-import { DragDropContext, Droppable, Draggable, DropResult } from 'react-beautiful-dnd';
-import {
-  isPositionChanged,
-  getSortedDraggables,
-  getNewDraggablePosition,
-  getAfterDropDraggableList,
-} from 'shared/utils/draggables';
-import Button from 'shared/components/Button';
-import TextareaAutosize from 'react-autosize-textarea';
-import Control from 'react-select/src/components/Control';
-import useOnOutsideClick from 'shared/hooks/onOutsideClick';
-import { mixin } from 'shared/utils/styles';
-
-const Wrapper = styled.div`
-  margin-bottom: 24px;
-`;
-
-const WindowTitle = styled.div`
-  padding: 8px 0;
-  position: relative;
-  margin: 0 0 4px 40px;
-`;
-
-const WindowTitleIcon = styled(CheckSquareOutline)`
-  top: 10px;
-  left: -32px;
-  position: absolute;
-`;
-
-const WindowChecklistTitle = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-flow: row wrap;
-`;
-
-const WindowTitleText = styled.h3`
-  cursor: pointer;
-  color: ${props => props.theme.colors.text.primary};
-  margin: 6px 0;
-  display: inline-block;
-  width: auto;
-  min-height: 18px;
-  font-size: 16px;
-  line-height: 20px;
-  min-width: 40px;
-`;
-
-const WindowOptions = styled.div`
-  margin: 0 2px 0 auto;
-  float: right;
-`;
-
-const DeleteButton = styled(Button)`
-  padding: 6px 12px;
-`;
-
-const ChecklistProgress = styled.div`
-  margin-bottom: 6px;
-  position: relative;
-`;
-const ChecklistProgressPercent = styled.span`
-  color: #5e6c84;
-  font-size: 11px;
-  line-height: 10px;
-  position: absolute;
-  left: 5px;
-  top: -1px;
-  text-align: center;
-  width: 32px;
-`;
-
-const ChecklistProgressBar = styled.div`
-  background: ${props => props.theme.colors.bg.primary};
-  border-radius: 4px;
-  clear: both;
-  height: 8px;
-  margin: 0 0 0 40px;
-  overflow: hidden;
-  position: relative;
-`;
-const ChecklistProgressBarCurrent = styled.div<{ width: number }>`
-  width: ${props => props.width}%;
-  background: ${props => (props.width === 100 ? props.theme.colors.success : props.theme.colors.primary)};
-  bottom: 0;
-  left: 0;
-  position: absolute;
-  top: 0;
-  transition: width 0.14s ease-in, background 0.14s ease-in;
-`;
-
-export const ChecklistItems = styled.div`
-  min-height: 8px;
-`;
-
-const ChecklistItemUncheckedIcon = styled(Square)``;
-
-const ChecklistIcon = styled.div`
-  cursor: pointer;
-  position: absolute;
-  left: 0;
-  top: 0;
-  margin: 10px;
-  text-align: center;
-
-  &:hover {
-    opacity: 0.8;
-  }
-`;
-
-const ChecklistItemCheckedIcon = styled(CheckSquare)`
-  fill: ${props => props.theme.colors.primary};
-`;
-
-const ChecklistItemDetails = styled.div`
-  word-break: break-word;
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-`;
-const ChecklistItemRow = styled.div`
-  cursor: pointer;
-  display: flex;
-  flex-direction: row;
-`;
-
-const ChecklistItemTextControls = styled.div`
-  padding: 6px 0;
-  width: 100%;
-  display: inline-flex;
-  align-items: center;
-`;
-
-const ChecklistItemText = styled.span<{ complete: boolean }>`
-  color: ${props => (props.complete ? '#5e6c84' : `${props.theme.colors.text.primary}`)};
-  ${props => props.complete && 'text-decoration: line-through;'}
-  line-height: 20px;
-  font-size: 16px;
-
-  min-height: 20px;
-  margin-bottom: 0;
-  align-self: center;
-  flex: 1;
-`;
-
-const ChecklistControls = styled.div`
-  display: inline-flex;
-  flex-direction: row;
-  float: right;
-`;
-
-const ControlButton = styled.div`
-  opacity: 0;
-  margin-left: 4px;
-  padding: 4px 6px;
-  border-radius: 6px;
-  background-color: ${props => mixin.rgba(props.theme.colors.bg.primary, 0.8)};
-  display: flex;
-  width: 32px;
-  height: 32px;
-  align-items: center;
-  justify-content: center;
-  &:hover {
-    background-color: ${props => mixin.rgba(props.theme.colors.primary, 1)};
-  }
-`;
-
-const ChecklistNameEditorWrapper = styled.div`
-  display: block;
-  float: left;
-  padding-top: 6px;
-  padding-bottom: 8px;
-  z-index: 50;
-  width: 100%;
-`;
-export const ChecklistNameEditor = styled(TextareaAutosize)`
-  overflow: hidden;
-  overflow-wrap: break-word;
-  resize: none;
-  height: 54px;
-  width: 100%;
-
-  background: none;
-  border: none;
-  box-shadow: none;
-  max-height: 162px;
-  min-height: 54px;
-  padding: 8px 12px;
-  font-size: 16px;
-  line-height: 20px;
-  border: 1px solid ${props => props.theme.colors.primary};
-  border-radius: 3px;
-  color: ${props => props.theme.colors.text.primary};
-
-  border-color: ${props => props.theme.colors.border};
-  background-color: ${props => mixin.rgba(props.theme.colors.bg.primary, 0.4)};
-  &:focus {
-    border-color: ${props => props.theme.colors.primary};
-  }
-`;
-
-const AssignUserButton = styled(AccountPlus)`
-  fill: ${props => props.theme.colors.text.primary};
-`;
-
-const ClockButton = styled(Clock)`
-  fill: ${props => props.theme.colors.text.primary};
-`;
-
-const TrashButton = styled(Trash)`
-  fill: ${props => props.theme.colors.text.primary};
-`;
-
-const ChecklistItemWrapper = styled.div<{ ref: any }>`
-  user-select: none;
-  clear: both;
-  padding-left: 40px;
-  position: relative;
-  border-radius: 6px;
-
-  & ${ControlButton}:last-child {
-    margin-right: 4px;
-  }
-
-  &:hover {
-    background-color: ${props => mixin.rgba(props.theme.colors.bg.primary, 0.4)};
-  }
-  &:hover ${ControlButton} {
-    opacity: 1;
-  }
-`;
-
-const EditControls = styled.div`
-  clear: both;
-  display: flex;
-  padding-bottom: 9px;
-  flex-direction: row;
-`;
-
-const SaveButton = styled(Button)`
-  margin-right: 4px;
-  padding: 6px 12px;
-`;
-const CancelButton = styled.div`
-  cursor: pointer;
-  margin: 5px;
-  & svg {
-    fill: ${props => props.theme.colors.text.primary};
-  }
-  &:hover svg {
-    fill: ${props => props.theme.colors.text.secondary};
-  }
-`;
-
-const Spacer = styled.div`
-  flex: 1;
-`;
-
-const EditableDeleteButton = styled.button`
-  cursor: pointer;
-  display: flex;
-  margin: 0 2px;
-  padding: 6px 8px;
-  border-radius: 3px;
-
-  &:hover {
-    background: ${props => mixin.rgba(props.theme.colors.primary, 0.8)};
-  }
-`;
-
-const NewItemButton = styled(Button)`
-  padding: 6px 8px;
-`;
-
-const ChecklistNewItem = styled.div`
-  margin: 8px 0;
-  margin-left: 40px;
-`;
-
-type ChecklistItemProps = {
-  itemID: string;
-  checklistID: string;
-  complete: boolean;
-  name: string;
-  onChangeName: (itemID: string, currentName: string) => void;
-  wrapperProps: any;
-  handleProps: any;
-  onToggleItem: (itemID: string, complete: boolean) => void;
-  onDeleteItem: (checklistIDID: string, itemID: string) => void;
-};
-
-export const ChecklistItem = React.forwardRef(
-  (
-    {
-      itemID,
-      checklistID,
-      complete,
-      name,
-      wrapperProps,
-      handleProps,
-      onChangeName,
-      onToggleItem,
-      onDeleteItem,
-    }: ChecklistItemProps,
-    $item,
-  ) => {
-    const $editor = useRef<HTMLTextAreaElement>(null);
-    const [editting, setEditting] = useState(false);
-    const [currentName, setCurrentName] = useState(name);
-    useEffect(() => {
-      if (editting && $editor && $editor.current) {
-        $editor.current.focus();
-        $editor.current.select();
-      }
-    }, [editting]);
-    // useOnOutsideClick($item, true, () => setEditting(false), null);
-    return (
-      <ChecklistItemWrapper ref={$item} {...wrapperProps} {...handleProps}>
-        <ChecklistIcon
-          onClick={e => {
-            e.stopPropagation();
-            onToggleItem(itemID, !complete);
-          }}
-        >
-          {complete ? (
-            <ChecklistItemCheckedIcon width={20} height={20} />
-          ) : (
-            <ChecklistItemUncheckedIcon width={20} height={20} />
-          )}
-        </ChecklistIcon>
-        {editting ? (
-          <>
-            <ChecklistNameEditorWrapper>
-              <ChecklistNameEditor
-                ref={$editor}
-                onKeyDown={e => {
-                  if (e.key === 'Enter') {
-                    onChangeName(itemID, currentName);
-                    setEditting(false);
-                  }
-                }}
-                onChange={e => {
-                  setCurrentName(e.currentTarget.value);
-                }}
-                value={currentName}
-              />
-            </ChecklistNameEditorWrapper>
-            <EditControls>
-              <SaveButton
-                onClick={() => {
-                  onChangeName(itemID, currentName);
-                  setEditting(false);
-                }}
-                variant="relief"
-              >
-                Save
-              </SaveButton>
-              <CancelButton
-                onClick={e => {
-                  e.stopPropagation();
-                  setEditting(false);
-                }}
-              >
-                <Cross width={20} height={20} />
-              </CancelButton>
-              <Spacer />
-              <EditableDeleteButton
-                onClick={e => {
-                  e.stopPropagation();
-                  setEditting(false);
-                  onDeleteItem(checklistID, itemID);
-                }}
-              >
-                <Trash width={16} height={16} />
-              </EditableDeleteButton>
-            </EditControls>
-          </>
-        ) : (
-          <ChecklistItemDetails
-            onClick={() => {
-              setEditting(true);
-            }}
-          >
-            <ChecklistItemRow>
-              <ChecklistItemTextControls>
-                <ChecklistItemText complete={complete}>{name}</ChecklistItemText>
-                <ChecklistControls>
-                  <ControlButton>
-                    <AssignUserButton width={14} height={14} />
-                  </ControlButton>
-                  <ControlButton>
-                    <ClockButton width={14} height={14} />
-                  </ControlButton>
-                  <ControlButton
-                    onClick={e => {
-                      e.stopPropagation();
-                      onDeleteItem(checklistID, itemID);
-                    }}
-                  >
-                    <TrashButton width={14} height={14} />
-                  </ControlButton>
-                </ChecklistControls>
-              </ChecklistItemTextControls>
-            </ChecklistItemRow>
-          </ChecklistItemDetails>
-        )}
-      </ChecklistItemWrapper>
-    );
-  },
-);
-
-type AddNewItemProps = {
-  onAddItem: (name: string) => void;
-};
-
-const AddNewItem: React.FC<AddNewItemProps> = ({ onAddItem }) => {
-  const $editor = useRef<HTMLTextAreaElement>(null);
-  const $wrapper = useRef<HTMLDivElement>(null);
-  const [currentName, setCurrentName] = useState('');
-  const [editting, setEditting] = useState(false);
-  useEffect(() => {
-    if (editting && $editor && $editor.current) {
-      $editor.current.focus();
-      $editor.current.select();
-    }
-  }, [editting]);
-  useOnOutsideClick($wrapper, true, () => setEditting(false), null);
-  return (
-    <ChecklistNewItem ref={$wrapper}>
-      {editting ? (
-        <>
-          <ChecklistNameEditorWrapper>
-            <ChecklistNameEditor
-              ref={$editor}
-              onKeyDown={e => {
-                if (e.key === 'Enter') {
-                  e.preventDefault();
-                  onAddItem(currentName);
-                  setCurrentName('');
-                }
-              }}
-              onChange={e => {
-                setCurrentName(e.currentTarget.value);
-              }}
-              value={currentName}
-            />
-          </ChecklistNameEditorWrapper>
-          <EditControls>
-            <SaveButton
-              onClick={() => {
-                onAddItem(currentName);
-                setCurrentName('');
-                if (editting && $editor && $editor.current) {
-                  $editor.current.focus();
-                  $editor.current.select();
-                }
-              }}
-              variant="relief"
-            >
-              Save
-            </SaveButton>
-            <CancelButton
-              onClick={e => {
-                e.stopPropagation();
-                setEditting(false);
-              }}
-            >
-              <Cross width={20} height={20} />
-            </CancelButton>
-          </EditControls>
-        </>
-      ) : (
-        <NewItemButton onClick={() => setEditting(true)}>Add an item</NewItemButton>
-      )}
-    </ChecklistNewItem>
-  );
-};
-
-type ChecklistTitleEditorProps = {
-  name: string;
-  onChangeName: (item: string) => void;
-  onCancel: () => void;
-};
-
-const ChecklistTitleEditor = React.forwardRef(
-  ({ name, onChangeName, onCancel }: ChecklistTitleEditorProps, $name: any) => {
-    const [currentName, setCurrentName] = useState(name);
-    return (
-      <>
-        <ChecklistNameEditor
-          ref={$name}
-          value={currentName}
-          onChange={e => {
-            setCurrentName(e.currentTarget.value);
-          }}
-          onKeyDown={e => {
-            if (e.key === 'Enter') {
-              onChangeName(currentName);
-            }
-          }}
-        />
-        <EditControls>
-          <SaveButton
-            onClick={() => {
-              onChangeName(currentName);
-            }}
-            variant="relief"
-          >
-            Save
-          </SaveButton>
-          <CancelButton
-            onClick={e => {
-              e.stopPropagation();
-              onCancel();
-            }}
-          >
-            <Cross width={20} height={20} />
-          </CancelButton>
-        </EditControls>
-      </>
-    );
-  },
-);
-type ChecklistProps = {
-  checklistID: string;
-  onDeleteChecklist: ($target: React.RefObject<HTMLElement>, checklistID: string) => void;
-  name: string;
-  children: React.ReactNode;
-  onChangeName: (item: string) => void;
-  onToggleItem: (taskID: string, complete: boolean) => void;
-  onChangeItemName: (itemID: string, currentName: string) => void;
-  wrapperProps: any;
-  handleProps: any;
-  onDeleteItem: (checklistID: string, itemID: string) => void;
-  onAddItem: (itemName: string) => void;
-  items: Array<TaskChecklistItem>;
-};
-
-const Checklist = React.forwardRef(
-  (
-    {
-      checklistID,
-      children,
-      onDeleteChecklist,
-      name,
-      items,
-      wrapperProps,
-      handleProps,
-      onToggleItem,
-      onAddItem,
-      onChangeItemName,
-      onChangeName,
-      onDeleteItem,
-    }: ChecklistProps,
-    $container,
-  ) => {
-    const $name = useRef<HTMLTextAreaElement>(null);
-    const complete = items.reduce((prev, item) => prev + (item.complete ? 1 : 0), 0);
-    const percent = items.length === 0 ? 0 : Math.floor((complete / items.length) * 100);
-    const [editting, setEditting] = useState(false);
-    // useOnOutsideClick($name, true, () => setEditting(false), null);
-    useEffect(() => {
-      if (editting && $name && $name.current) {
-        $name.current.focus();
-        $name.current.select();
-      }
-    }, [editting]);
-    return (
-      <Wrapper ref={$container} {...wrapperProps}>
-        <WindowTitle>
-          <WindowTitleIcon width={24} height={24} />
-          {editting ? (
-            <ChecklistTitleEditor
-              ref={$name}
-              name={name}
-              onChangeName={currentName => {
-                onChangeName(currentName);
-                setEditting(false);
-              }}
-              onCancel={() => {
-                setEditting(false);
-              }}
-            />
-          ) : (
-            <WindowChecklistTitle {...handleProps}>
-              <WindowTitleText onClick={() => setEditting(true)}>{name}</WindowTitleText>
-              <WindowOptions>
-                <DeleteButton
-                  onClick={$target => {
-                    onDeleteChecklist($target, checklistID);
-                  }}
-                  color="danger"
-                  variant="outline"
-                >
-                  Delete
-                </DeleteButton>
-              </WindowOptions>
-            </WindowChecklistTitle>
-          )}
-        </WindowTitle>
-        <ChecklistProgress>
-          <ChecklistProgressPercent>{`${percent}%`}</ChecklistProgressPercent>
-          <ChecklistProgressBar>
-            <ChecklistProgressBarCurrent width={percent} />
-          </ChecklistProgressBar>
-        </ChecklistProgress>
-        {children}
-        <AddNewItem onAddItem={onAddItem} />
-      </Wrapper>
-    );
-  },
-);
-/*
-  <ChecklistItems>
-    {items
-      .slice()
-      .sort((a, b) => a.position - b.position)
-      .map((item, idx) => (
-        <ChecklistItem
-          index={idx}
-          key={item.id}
-          itemID={item.id}
-          name={item.name}
-          complete={item.complete}
-          onDeleteItem={onDeleteItem}
-          onChangeName={onChangeItemName}
-          onToggleItem={onToggleItem}
-        />
-      ))}
-
- </ChecklistItems>
- */
-export default Checklist;

frontend/src/shared/components/Chip/index.tsx

@@ -1,71 +0,0 @@
-import React from 'react';
-import styled, { css } from 'styled-components';
-import { Cross } from 'shared/icons';
-
-const LabelText = styled.span`
-  margin-left: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: ${props => props.theme.colors.text.primary};
-`;
-
-const Container = styled.div<{ color?: string }>`
-  min-height: 26px;
-  min-width: 26px;
-  font-size: 0.8rem;
-  border-radius: 20px;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  ${props =>
-    props.color
-      ? css`
-          background: ${props.color};
-          & ${LabelText} {
-            color: ${props.theme.colors.text.secondary};
-          }
-        `
-      : css`
-          background: ${props.theme.colors.bg.primary};
-        `}
-`;
-
-const CloseButton = styled.button`
-  cursor: pointer;
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  margin: 0 4px;
-  background: rgba(0, 0, 0, 0.15);
-  &:hover {
-    background: rgba(0, 0, 0, 0.25);
-  }
-`;
-
-type ChipProps = {
-  label: string;
-  onClose?: () => void;
-  color?: string;
-  className?: string;
-};
-
-const Chip: React.FC<ChipProps> = ({ label, onClose, color, className }) => {
-  return (
-    <Container className={className} color={color}>
-      <LabelText>{label}</LabelText>
-      {onClose && (
-        <CloseButton onClick={() => onClose()}>
-          <Cross width={12} height={12} />
-        </CloseButton>
-      )}
-    </Container>
-  );
-};
-
-export default Chip;

frontend/src/shared/components/Confirm/Styles.ts

@@ -1,103 +0,0 @@
-import styled from 'styled-components';
-import Button from 'shared/components/Button';
-
-export const Wrapper = styled.div`
-  background: #eff2f7;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-wrap: wrap;
-`;
-
-export const Column = styled.div`
-  width: 50%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-
-export const LoginFormWrapper = styled.div`
-  background: #10163a;
-  width: 100%;
-`;
-
-export const LoginFormContainer = styled.div`
-  min-height: 505px;
-  padding: 2rem;
-`;
-
-export const Title = styled.h1`
-  color: #ebeefd;
-  font-size: 18px;
-  margin-bottom: 14px;
-`;
-
-export const SubTitle = styled.h2`
-  color: #c2c6dc;
-  font-size: 14px;
-  margin-bottom: 14px;
-`;
-export const Form = styled.form`
-  display: flex;
-  flex-direction: column;
-`;
-
-export const FormLabel = styled.label`
-  color: #c2c6dc;
-  font-size: 12px;
-  position: relative;
-  margin-top: 14px;
-`;
-
-export const FormTextInput = styled.input`
-  width: 100%;
-  background: #262c49;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  margin-top: 4px;
-  padding: 0.7rem 1rem 0.7rem 3rem;
-  font-size: 1rem;
-  color: #c2c6dc;
-  border-radius: 5px;
-`;
-
-export const FormIcon = styled.div`
-  top: 30px;
-  left: 16px;
-  position: absolute;
-`;
-
-export const FormError = styled.span`
-  font-size: 0.875rem;
-  color: rgb(234, 84, 85);
-`;
-
-export const LoginButton = styled(Button)``;
-
-export const ActionButtons = styled.div`
-  margin-top: 17.5px;
-  display: flex;
-  justify-content: space-between;
-`;
-
-export const RegisterButton = styled(Button)``;
-
-export const LogoTitle = styled.div`
-  font-size: 24px;
-  font-weight: 600;
-  margin-left: 12px;
-  transition: visibility, opacity, transform 0.25s ease;
-  color: #7367f0;
-`;
-
-export const LogoWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: row;
-  position: relative;
-  width: 100%;
-  padding-bottom: 16px;
-  margin-bottom: 24px;
-  color: rgb(222, 235, 255);
-  border-bottom: 1px solid rgba(65, 69, 97, 0.65);
-`;

frontend/src/shared/components/Confirm/index.tsx

@@ -1,62 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import AccessAccount from 'shared/undraw/AccessAccount';
-import { User, Lock, Taskcafe } from 'shared/icons';
-import { useForm } from 'react-hook-form';
-import LoadingSpinner from 'shared/components/LoadingSpinner';
-import {
-  Form,
-  LogoWrapper,
-  LogoTitle,
-  ActionButtons,
-  RegisterButton,
-  FormError,
-  FormIcon,
-  FormLabel,
-  FormTextInput,
-  Wrapper,
-  Column,
-  LoginFormWrapper,
-  LoginFormContainer,
-  Title,
-  SubTitle,
-} from './Styles';
-
-const Confirm = ({ onConfirmUser, hasConfirmToken }: ConfirmProps) => {
-  const [hasFailed, setFailed] = useState(false);
-  const setHasFailed = () => {
-    setFailed(true);
-  };
-  useEffect(() => {
-    onConfirmUser(setHasFailed);
-  });
-  return (
-    <Wrapper>
-      <Column>
-        <AccessAccount width={275} height={250} />
-      </Column>
-      <Column>
-        <LoginFormWrapper>
-          <LoginFormContainer>
-            <LogoWrapper>
-              <Taskcafe width={42} height={42} />
-              <LogoTitle>Taskcafé</LogoTitle>
-            </LogoWrapper>
-            {hasConfirmToken ? (
-              <>
-                <Title>Confirming user...</Title>
-                {hasFailed ? <SubTitle>There was an error while confirming your user</SubTitle> : <LoadingSpinner />}
-              </>
-            ) : (
-              <>
-                <Title>There is no confirmation token</Title>
-                <SubTitle>There seems to have been an error.</SubTitle>
-              </>
-            )}
-          </LoginFormContainer>
-        </LoginFormWrapper>
-      </Column>
-    </Wrapper>
-  );
-};
-
-export default Confirm;

frontend/src/shared/components/ControlledInput/Input.stories.tsx

@@ -1,43 +0,0 @@
-import React from 'react';
-import BaseStyles from 'App/BaseStyles';
-import NormalizeStyles from 'App/NormalizeStyles';
-import theme from 'App/ThemeStyles';
-import styled, { ThemeProvider } from 'styled-components';
-import { User } from 'shared/icons';
-
-import Input from '.';
-
-export default {
-  component: Input,
-  title: 'Input',
-  parameters: {
-    backgrounds: [
-      { name: 'white', value: '#ffffff', default: true },
-      { name: 'gray', value: '#f8f8f8' },
-    ],
-  },
-};
-
-const Wrapper = styled.div`
-  background: ${props => props.theme.colors.bg.primary};
-  padding: 45px;
-  margin: 25px;
-  display: flex;
-  flex-direction: column;
-`;
-
-export const Default = () => {
-  return (
-    <>
-      <NormalizeStyles />
-      <BaseStyles />
-      <ThemeProvider theme={theme}>
-        <Wrapper>
-          <Input label="Label placeholder" />
-          <Input width="100%" placeholder="Placeholder" />
-          <Input icon={<User width={20} height={20} />} width="100%" placeholder="Placeholder" />
-        </Wrapper>
-      </ThemeProvider>
-    </>
-  );
-};

frontend/src/shared/components/ControlledInput/index.tsx

@@ -1,156 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import styled, { css } from 'styled-components/macro';
-import theme from '../../../App/ThemeStyles';
-
-const InputWrapper = styled.div<{ width: string }>`
-  position: relative;
-  width: auto;
-  display: flex;
-  align-items: flex-start;
-  flex-direction: column;
-  position: relative;
-  justify-content: center;
-
-  margin-bottom: 2.2rem;
-  margin-top: 24px;
-`;
-
-const InputLabel = styled.span<{ width: string }>`
-  width: ${props => props.width};
-  padding: 0.7rem !important;
-  color: #c2c6dc;
-  left: 0;
-  top: 0;
-  transition: all 0.2s ease;
-  position: absolute;
-  border-radius: 5px;
-  overflow: hidden;
-  font-size: 0.85rem;
-  cursor: text;
-  font-size: 12px;
-      user-select: none;
-    pointer-events: none;
-}
-`;
-
-const InputInput = styled.input<{
-  hasValue: boolean;
-  hasIcon: boolean;
-  width: string;
-  focusBg: string;
-  borderColor: string;
-}>`
-  width: ${props => props.width};
-  font-size: 14px;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  border-color: ${props => props.borderColor};
-  background: #262c49;
-  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.15);
-  ${props => (props.hasIcon ? 'padding: 0.7rem 1rem 0.7rem 3rem;' : 'padding: 0.7rem;')}
-  line-height: 16px;
-  color: #c2c6dc;
-  position: relative;
-  border-radius: 5px;
-  transition: all 0.3s ease;
-  &:focus {
-    box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.15);
-    border: 1px solid rgba(115, 103, 240);
-    background: ${props => props.focusBg};
-  }
-  &:focus ~ ${InputLabel} {
-    color: ${props => props.theme.colors.primary};
-    transform: translate(-3px, -90%);
-  }
-  ${props =>
-    props.hasValue &&
-    css`
-      & ~ ${InputLabel} {
-        color: ${props.theme.colors.primary};
-        transform: translate(-3px, -90%);
-      }
-    `}
-`;
-
-const Icon = styled.div`
-  display: flex;
-  left: 16px;
-  position: absolute;
-`;
-
-type ControlledInputProps = {
-  variant?: 'normal' | 'alternate';
-  label?: string;
-  width?: string;
-  floatingLabel?: boolean;
-  placeholder?: string;
-  icon?: JSX.Element;
-  type?: string;
-  autocomplete?: boolean;
-  autoFocus?: boolean;
-  id?: string;
-  name?: string;
-  className?: string;
-  defaultValue?: string;
-  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  value?: string;
-  onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;
-};
-
-const ControlledInput = ({
-  width = 'auto',
-  variant = 'normal',
-  type = 'text',
-  autocomplete,
-  autoFocus = false,
-  label,
-  placeholder,
-  icon,
-  name,
-  className,
-  onChange,
-  value,
-  onClick,
-  floatingLabel = false,
-  defaultValue,
-  id,
-}: ControlledInputProps) => {
-  const $input = useRef<HTMLInputElement>(null);
-  const [hasValue, setHasValue] = useState(false);
-  const borderColor = variant === 'normal' ? 'rgba(0, 0, 0, 0.2)' : theme.colors.alternate;
-  const focusBg = variant === 'normal' ? theme.colors.bg.secondary : theme.colors.bg.primary;
-  useEffect(() => {
-    if (autoFocus && $input && $input.current) {
-      $input.current.focus();
-    }
-  }, []);
-  return (
-    <InputWrapper className={className} width={width}>
-      <InputInput
-        hasValue={hasValue}
-        onChange={e => {
-          if (onChange) {
-            setHasValue(e.currentTarget.value !== '' || floatingLabel);
-            onChange(e);
-          }
-        }}
-        value={value}
-        id={id}
-        type={type}
-        name={name}
-        ref={$input}
-        onClick={onClick}
-        autoComplete={autocomplete ? 'on' : 'off'}
-        defaultValue={defaultValue}
-        hasIcon={typeof icon !== 'undefined'}
-        width={width}
-        placeholder={placeholder}
-        focusBg={focusBg}
-        borderColor={borderColor}
-      />
-      {label && <InputLabel width={width}>{label}</InputLabel>}
-      <Icon>{icon && icon}</Icon>
-    </InputWrapper>
-  );
-};
-
-export default ControlledInput;

frontend/src/shared/components/DropdownMenu/DropdownMenu.stories.tsx

@@ -1,65 +0,0 @@
-import React, { createRef, useState } from 'react';
-import styled from 'styled-components';
-import { action } from '@storybook/addon-actions';
-import DropdownMenu from '.';
-import theme from '../../../App/ThemeStyles';
-
-export default {
-  component: DropdownMenu,
-  title: 'DropdownMenu',
-  parameters: {
-    backgrounds: [
-      { name: 'white', value: '#ffffff' },
-      { name: 'gray', value: '#f8f8f8' },
-      { name: 'darkBlue', value: theme.colors.bg.secondary, default: true },
-    ],
-  },
-};
-
-const Container = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-const Button = styled.div`
-  font-size: 18px;
-  padding: 15px 20px;
-  color: #fff;
-  background: #000;
-`;
-
-export const Default = () => {
-  const [menu, setMenu] = useState({
-    top: 0,
-    left: 0,
-    isOpen: false,
-  });
-  const $buttonRef: any = createRef();
-  const onClick = () => {
-    setMenu({
-      isOpen: !menu.isOpen,
-      left: $buttonRef.current.getBoundingClientRect().right,
-      top: $buttonRef.current.getBoundingClientRect().bottom,
-    });
-  };
-  return (
-    <>
-      <Container>
-        <Button onClick={onClick} ref={$buttonRef}>
-          Click me
-        </Button>
-      </Container>
-      {menu.isOpen && (
-        <DropdownMenu
-          onAdminConsole={action('admin')}
-          onCloseDropdown={() => {
-            setMenu({ top: 0, left: 0, isOpen: false });
-          }}
-          onLogout={action('on logout')}
-          left={menu.left}
-          top={menu.top}
-        />
-      )}
-    </>
-  );
-};

frontend/src/shared/components/DropdownMenu/Styles.ts

@@ -1,74 +0,0 @@
-import styled from 'styled-components/macro';
-
-export const Container = styled.div<{ left: number; top: number }>`
-  position: absolute;
-  left: ${props => props.left}px;
-  top: ${props => props.top}px;
-  position: absolute;
-  padding-top: 10px;
-  height: auto;
-  width: auto;
-  transform: translate(-100%);
-  transition: opacity 0.25s, transform 0.25s, width 0.3s ease;
-  z-index: 40000;
-`;
-
-export const Wrapper = styled.div`
-  padding: 5px;
-  padding-top: 8px;
-  border-radius: 5px;
-  box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.1);
-  position: relative;
-  margin: 0;
-
-  color: #c2c6dc;
-  background: #262c49;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  border-color: #414561;
-`;
-
-export const WrapperDiamond = styled.div`
-  top: 10px;
-  right: 10px;
-  position: absolute;
-  width: 10px;
-  height: 10px;
-  display: block;
-  transform: rotate(45deg) translate(-7px);
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
-  border-left: 1px solid rgba(0, 0, 0, 0.1);
-  z-index: 10;
-
-  background: #262c49;
-  border-color: #414561;
-`;
-
-export const ActionsList = styled.ul`
-  min-width: 9rem;
-  margin: 0;
-  padding: 0;
-`;
-
-export const ActionItem = styled.li`
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-top: 0.5rem !important;
-  padding-bottom: 0.5rem !important;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  font-size: 14px;
-  &:hover {
-    background: ${props => props.theme.colors.primary};
-  }
-`;
-
-export const ActionTitle = styled.span`
-  margin-left: 0.5rem;
-`;
-
-export const Separator = styled.div`
-  height: 1px;
-  border-top: 1px solid #414561;
-  margin: 0.25rem !important;
-`;

frontend/src/shared/components/DropdownMenu/index.tsx

@@ -1,72 +0,0 @@
-import React, { useRef } from 'react';
-import useOnOutsideClick from 'shared/hooks/onOutsideClick';
-import { Exit, User, Cog } from 'shared/icons';
-import { Separator, Container, WrapperDiamond, Wrapper, ActionsList, ActionItem, ActionTitle } from './Styles';
-
-type DropdownMenuProps = {
-  left: number;
-  top: number;
-  onLogout: () => void;
-  onCloseDropdown: () => void;
-  onAdminConsole: () => void;
-};
-
-const DropdownMenu: React.FC<DropdownMenuProps> = ({ left, top, onLogout, onCloseDropdown, onAdminConsole }) => {
-  const $containerRef = useRef<HTMLDivElement>(null);
-  useOnOutsideClick($containerRef, true, onCloseDropdown, null);
-  return (
-    <Container ref={$containerRef} left={left} top={top}>
-      <Wrapper>
-        <ActionItem onClick={onAdminConsole}>
-          <User width={16} height={16} />
-          <ActionTitle>Profile</ActionTitle>
-        </ActionItem>
-        <Separator />
-        <ActionsList>
-          <ActionItem onClick={onLogout}>
-            <Exit size={16} color="#c2c6dc" />
-            <ActionTitle>Logout</ActionTitle>
-          </ActionItem>
-        </ActionsList>
-      </Wrapper>
-      <WrapperDiamond />
-    </Container>
-  );
-};
-
-type ProfileMenuProps = {
-  onProfile: () => void;
-  onLogout: () => void;
-  showAdminConsole: boolean;
-  onAdminConsole: () => void;
-};
-
-const ProfileMenu: React.FC<ProfileMenuProps> = ({ showAdminConsole, onAdminConsole, onProfile, onLogout }) => {
-  return (
-    <>
-      {showAdminConsole && (
-        <>
-          <ActionItem onClick={onAdminConsole}>
-            <Cog size={16} color="#c2c6dc" />
-            <ActionTitle>Admin Console</ActionTitle>
-          </ActionItem>
-          <Separator />
-        </>
-      )}
-      <ActionItem onClick={onProfile}>
-        <User width={16} height={16} />
-        <ActionTitle>Profile</ActionTitle>
-      </ActionItem>
-      <ActionsList>
-        <ActionItem onClick={onLogout}>
-          <Exit size={16} color="#c2c6dc" />
-          <ActionTitle>Logout</ActionTitle>
-        </ActionItem>
-      </ActionsList>
-    </>
-  );
-};
-
-export { ProfileMenu };
-
-export default DropdownMenu;

frontend/src/shared/components/DueDateManager/DueDateManager.stories.tsx

@@ -1,74 +0,0 @@
-import React from 'react';
-import { action } from '@storybook/addon-actions';
-import BaseStyles from 'App/BaseStyles';
-import NormalizeStyles from 'App/NormalizeStyles';
-import theme from 'App/ThemeStyles';
-import styled, { ThemeProvider } from 'styled-components';
-import { Popup } from '../PopupMenu';
-import DueDateManager from '.';
-
-const PopupWrapper = styled.div`
-  width: 310px;
-`;
-
-export default {
-  component: DueDateManager,
-  title: 'DueDateManager',
-  parameters: {
-    backgrounds: [
-      { name: 'gray', value: '#f8f8f8', default: true },
-      { name: 'white', value: '#ffffff' },
-    ],
-  },
-};
-
-export const Default = () => {
-  return (
-    <>
-      <NormalizeStyles />
-      <BaseStyles />
-      <ThemeProvider theme={theme}>
-        <PopupWrapper>
-          <Popup title={null} tab={0}>
-            <DueDateManager
-              task={{
-                id: '1',
-                taskGroup: { name: 'General', id: '1', position: 1 },
-                name: 'Hello, world',
-                position: 1,
-                labels: [
-                  {
-                    id: 'soft-skills',
-                    assignedDate: new Date().toString(),
-                    projectLabel: {
-                      createdDate: new Date().toString(),
-                      id: 'label-soft-skills',
-                      name: 'Soft Skills',
-                      labelColor: {
-                        id: '1',
-                        name: 'white',
-                        colorHex: '#fff',
-                        position: 1,
-                      },
-                    },
-                  },
-                ],
-                description: 'hello!',
-                assigned: [
-                  {
-                    id: '1',
-                    profileIcon: { url: null, initials: null, bgColor: null },
-                    fullName: 'Jordan Knott',
-                  },
-                ],
-              }}
-              onCancel={action('cancel')}
-              onDueDateChange={action('due date change')}
-              onRemoveDueDate={action('remove due date')}
-            />
-          </Popup>
-        </PopupWrapper>
-      </ThemeProvider>
-    </>
-  );
-};

frontend/src/shared/components/DueDateManager/Styles.ts

@@ -1,133 +0,0 @@
-import styled from 'styled-components';
-import Button from 'shared/components/Button';
-import { mixin } from 'shared/utils/styles';
-import Input from 'shared/components/Input';
-
-export const Wrapper = styled.div`
-display: flex
-  flex-direction: column;
-  & .react-datepicker {
-    background: #262c49;
-    border: none;
-  }
-  & .react-datepicker__triangle {
-    display: none;
-  }
-  & .react-datepicker-popper {
-    z-index: 10000;
-    margin-top: 0;
-  }
-
-  & .react-datepicker-time__header {
-    color: ${props => props.theme.colors.text.primary};
-  }
-  & .react-datepicker__time-list-item {
-    color: ${props => props.theme.colors.text.primary};
-  }
-  & .react-datepicker__time-container .react-datepicker__time
-  .react-datepicker__time-box ul.react-datepicker__time-list
-  li.react-datepicker__time-list-item:hover {
-    color: ${props => props.theme.colors.text.secondary};
-    background: ${props => props.theme.colors.bg.secondary};
-  }
-  & .react-datepicker__time-container .react-datepicker__time {
-    background: ${props => props.theme.colors.bg.primary};
-  }
-  & .react-datepicker--time-only {
-    background: ${props => props.theme.colors.bg.primary};
-    border: 1px solid ${props => props.theme.colors.border};
-  }
-
-  & .react-datepicker * {
-    box-sizing: content-box;
-  }
-  & .react-datepicker__day-name {
-    color: #c2c6dc;
-    outline: none;
-    box-shadow: none;
-    padding: 4px;
-    font-size: 12px40px
-    line-height: 40px;
-  }
-  & .react-datepicker__day-name:hover {
-    background: #10163a;
-  }
-  & .react-datepicker__month {
-    margin: 0;
-  }
-
-  & .react-datepicker__day,
-  & .react-datepicker__time-name {
-    color: #c2c6dc;
-    outline: none;
-    box-shadow: none;
-    padding: 4px;
-    font-size: 14px;
-  }
-
-  & .react-datepicker__day--outside-month {
-    opacity: 0.6;
-  }
-
-  & .react-datepicker__day:hover {
-    border-radius: 50%;
-    background: #10163a;
-  }
-  & .react-datepicker__day--selected {
-    border-radius: 50%;
-    background: ${props => props.theme.colors.primary};
-    color: #fff;
-  }
-  & .react-datepicker__day--selected:hover {
-    border-radius: 50%;
-    background: ${props => props.theme.colors.primary};
-    color: #fff;
-  }
-  & .react-datepicker__header {
-    background: none;
-    border: none;
-  }
-  & .react-datepicker__header--time {
-    border-bottom: 1px solid ${props => props.theme.colors.border};
-  }
-
-`;
-
-export const DueDatePickerWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-`;
-
-export const ConfirmAddDueDate = styled(Button)`
-  margin: 0 4px 0 0;
-  padding: 6px 12px;
-`;
-
-export const RemoveDueDate = styled(Button)`
-  padding: 6px 12px;
-  margin: 0 0 0 4px;
-`;
-
-export const CancelDueDate = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 32px;
-  width: 32px;
-  cursor: pointer;
-`;
-
-export const DueDateInput = styled(Input)`
-  margin-top: 15px;
-  margin-bottom: 5px;
-  padding-right: 10px;
-`;
-
-export const ActionWrapper = styled.div`
-  padding-top: 8px;
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-`;

frontend/src/shared/components/DueDateManager/index.tsx

@@ -1,269 +0,0 @@
-import React, { useState, useEffect, forwardRef } from 'react';
-import dayjs from 'dayjs';
-import styled from 'styled-components';
-import DatePicker from 'react-datepicker';
-import _ from 'lodash';
-import 'react-datepicker/dist/react-datepicker.css';
-import { getYear, getMonth } from 'date-fns';
-import { useForm, Controller } from 'react-hook-form';
-import NOOP from 'shared/utils/noop';
-
-import { Wrapper, ActionWrapper, RemoveDueDate, DueDateInput, DueDatePickerWrapper, ConfirmAddDueDate } from './Styles';
-
-type DueDateManagerProps = {
-  task: Task;
-  onDueDateChange: (task: Task, newDueDate: Date) => void;
-  onRemoveDueDate: (task: Task) => void;
-  onCancel: () => void;
-};
-
-const Form = styled.form`
-  padding-top: 25px;
-`;
-
-const FormField = styled.div`
-  width: 50%;
-  display: inline-block;
-`;
-const HeaderSelectLabel = styled.div`
-  display: inline-block;
-  position: relative;
-  z-index: 9999;
-  border-radius: 3px;
-  cursor: pointer;
-  padding: 6px 10px;
-  text-decoration: underline;
-  margin: 6px 0;
-  font-size: 14px;
-  line-height: 16px;
-  margin-left: 0;
-  margin-right: 0;
-  padding-left: 4px;
-  padding-right: 4px;
-  color: #c2c6dc;
-
-  &:hover {
-    background: ${props => props.theme.colors.primary};
-    color: #c2c6dc;
-  }
-`;
-
-const HeaderSelect = styled.select`
-  text-decoration: underline;
-  font-size: 14px;
-  text-align: center;
-  padding: 4px 6px;
-  background: none;
-  outline: none;
-  border: none;
-  border-radius: 3px;
-  appearance: none;
-
-  &:hover {
-    background: ${props => props.theme.colors.bg.secondary};
-    border: 1px solid ${props => props.theme.colors.primary};
-    outline: none !important;
-    box-shadow: none;
-    color: #c2c6dc;
-  }
-
-  &::-ms-expand {
-    display: none;
-  }
-
-  cursor: pointer;
-  position: absolute;
-  z-index: 9998;
-  margin: 0;
-  left: 0;
-  top: 5px;
-  opacity: 0;
-`;
-
-const HeaderButton = styled.button`
-  cursor: pointer;
-  color: #c2c6dc;
-  text-decoration: underline;
-  font-size: 14px;
-  text-align: center;
-  padding: 6px 10px;
-  margin: 6px 0;
-  background: none;
-  outline: none;
-  border: none;
-  border-radius: 3px;
-  &:hover {
-    background: ${props => props.theme.colors.primary};
-    color: #fff;
-  }
-`;
-
-const HeaderActions = styled.div`
-  position: relative;
-  text-align: center;
-  & > button:first-child {
-    float: left;
-  }
-  & > button:last-child {
-    float: right;
-  }
-`;
-
-const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange, onRemoveDueDate, onCancel }) => {
-  const now = dayjs();
-  const { register, handleSubmit, errors, setValue, setError, formState, control } = useForm<DueDateFormData>();
-  const [startDate, setStartDate] = useState(new Date());
-
-  useEffect(() => {
-    const newDate = dayjs(startDate).format('YYYY-MM-DD');
-    setValue('endDate', newDate);
-  }, [startDate]);
-
-  const years = _.range(2010, getYear(new Date()) + 10, 1);
-  const months = [
-    'January',
-    'February',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December',
-  ];
-  const saveDueDate = (data: any) => {
-    const newDate = dayjs(`${data.endDate} ${dayjs(data.endTime).format('h:mm A')}`, 'YYYY-MM-DD h:mm A');
-    if (newDate.isValid()) {
-      onDueDateChange(task, newDate.toDate());
-    }
-  };
-  const CustomTimeInput = forwardRef(({ value, onClick }: any, $ref: any) => {
-    return (
-      <DueDateInput
-        id="endTime"
-        value={value}
-        name="endTime"
-        ref={$ref}
-        width="100%"
-        variant="alternate"
-        label="Time"
-        onClick={onClick}
-      />
-    );
-  });
-  return (
-    <Wrapper>
-      <Form onSubmit={handleSubmit(saveDueDate)}>
-        <FormField>
-          <DueDateInput
-            id="endDate"
-            name="endDate"
-            width="100%"
-            variant="alternate"
-            label="Date"
-            defaultValue={now.format('YYYY-MM-DD')}
-            ref={register({
-              required: 'End date is required.',
-            })}
-          />
-        </FormField>
-        <FormField>
-          <Controller
-            control={control}
-            defaultValue={now.toDate()}
-            name="endTime"
-            render={({ onChange, onBlur, value }) => (
-              <DatePicker
-                onChange={onChange}
-                selected={value}
-                onBlur={onBlur}
-                showTimeSelect
-                showTimeSelectOnly
-                timeIntervals={15}
-                timeCaption="Time"
-                dateFormat="h:mm aa"
-                customInput={<CustomTimeInput />}
-              />
-            )}
-          />
-        </FormField>
-        <DueDatePickerWrapper>
-          <DatePicker
-            useWeekdaysShort
-            renderCustomHeader={({
-              date,
-              changeYear,
-              changeMonth,
-              decreaseMonth,
-              increaseMonth,
-              prevMonthButtonDisabled,
-              nextMonthButtonDisabled,
-            }) => (
-              <HeaderActions>
-                <HeaderButton onClick={decreaseMonth} disabled={prevMonthButtonDisabled}>
-                  Prev
-                </HeaderButton>
-                <HeaderSelectLabel>
-                  {months[date.getMonth()]}
-                  <HeaderSelect
-                    value={getYear(date)}
-                    onChange={({ target: { value } }) => changeYear(parseInt(value, 10))}
-                  >
-                    {years.map(option => (
-                      <option key={option} value={option}>
-                        {option}
-                      </option>
-                    ))}
-                  </HeaderSelect>
-                </HeaderSelectLabel>
-                <HeaderSelectLabel>
-                  {date.getFullYear()}
-                  <HeaderSelect
-                    value={months[getMonth(date)]}
-                    onChange={({ target: { value } }) => changeMonth(months.indexOf(value))}
-                  >
-                    {months.map(option => (
-                      <option key={option} value={option}>
-                        {option}
-                      </option>
-                    ))}
-                  </HeaderSelect>
-                </HeaderSelectLabel>
-
-                <HeaderButton onClick={increaseMonth} disabled={nextMonthButtonDisabled}>
-                  Next
-                </HeaderButton>
-              </HeaderActions>
-            )}
-            selected={startDate}
-            inline
-            onChange={date => {
-              if (date) {
-                setStartDate(date);
-              }
-            }}
-          />
-        </DueDatePickerWrapper>
-        <ActionWrapper>
-          <ConfirmAddDueDate type="submit" onClick={NOOP}>
-            Save
-          </ConfirmAddDueDate>
-          <RemoveDueDate
-            variant="outline"
-            color="danger"
-            onClick={() => {
-              onRemoveDueDate(task);
-            }}
-          >
-            Remove
-          </RemoveDueDate>
-        </ActionWrapper>
-      </Form>
-    </Wrapper>
-  );
-};
-
-export default DueDateManager;

frontend/src/shared/components/EmptyBoard/index.tsx

@@ -1,95 +0,0 @@
-import React from 'react';
-import styled, { keyframes } from 'styled-components/macro';
-import { mixin } from 'shared/utils/styles';
-import theme from '../../../App/ThemeStyles';
-
-export const BoardContainer = styled.div`
-  position: relative;
-  overflow-y: auto;
-  outline: none;
-  flex-grow: 1;
-`;
-
-export const BoardWrapper = styled.div`
-  display: flex;
-
-  user-select: none;
-  white-space: nowrap;
-  margin-bottom: 8px;
-  overflow-x: auto;
-  overflow-y: hidden;
-  padding-bottom: 8px;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-`;
-export const Container = styled.div`
-  width: 272px;
-  margin: 0 4px;
-  height: 100%;
-  box-sizing: border-box;
-  display: inline-block;
-  vertical-align: top;
-  white-space: nowrap;
-`;
-
-export const defaultBaseColor = theme.colors.bg.primary;
-
-export const defaultHighlightColor = mixin.lighten(theme.colors.bg.primary, 0.25);
-
-export const skeletonKeyframes = keyframes`
-  0% {
-    background-position: -200px 0;
-  }
-  100% {
-    background-position: calc(200px + 100%) 0;
-  }
-  `;
-
-export const Wrapper = styled.div`
-  // background-color: #ebecf0;
-  // background: rgb(244, 245, 247);
-  min-height: 120px;
-  opacity: 0.8;
-  background: #10163a;
-  color: #c2c6dc;
-
-  border-radius: 5px;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  max-height: 100%;
-  position: relative;
-  white-space: normal;
-
-  background-image: linear-gradient(90deg, ${defaultBaseColor}, ${defaultHighlightColor}, ${defaultBaseColor});
-  background-size: 200px 100%;
-  background-repeat: no-repeat;
-
-  animation: ${skeletonKeyframes} 1.2s ease-in-out infinite;
-`;
-
-const EmptyBoard: React.FC = () => {
-  return (
-    <BoardContainer>
-      <BoardWrapper>
-        <Container>
-          <Wrapper />
-        </Container>
-        <Container>
-          <Wrapper />
-        </Container>
-        <Container>
-          <Wrapper />
-        </Container>
-        <Container>
-          <Wrapper />
-        </Container>
-      </BoardWrapper>
-    </BoardContainer>
-  );
-};
-
-export default EmptyBoard;

frontend/src/shared/components/Input/Input.stories.tsx

@@ -1,43 +0,0 @@
-import React from 'react';
-import BaseStyles from 'App/BaseStyles';
-import NormalizeStyles from 'App/NormalizeStyles';
-import theme from 'App/ThemeStyles';
-import styled, { ThemeProvider } from 'styled-components';
-import { User } from 'shared/icons';
-
-import Input from '.';
-
-export default {
-  component: Input,
-  title: 'Input',
-  parameters: {
-    backgrounds: [
-      { name: 'white', value: '#ffffff', default: true },
-      { name: 'gray', value: '#f8f8f8' },
-    ],
-  },
-};
-
-const Wrapper = styled.div`
-  background: ${props => props.theme.colors.bg.primary};
-  padding: 45px;
-  margin: 25px;
-  display: flex;
-  flex-direction: column;
-`;
-
-export const Default = () => {
-  return (
-    <>
-      <NormalizeStyles />
-      <BaseStyles />
-      <ThemeProvider theme={theme}>
-        <Wrapper>
-          <Input label="Label placeholder" />
-          <Input width="100%" placeholder="Placeholder" />
-          <Input icon={<User width={20} height={20} />} width="100%" placeholder="Placeholder" />
-        </Wrapper>
-      </ThemeProvider>
-    </>
-  );
-};

frontend/src/shared/components/Input/index.tsx

@@ -1,189 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import styled, { css } from 'styled-components/macro';
-import theme from '../../../App/ThemeStyles';
-
-const InputWrapper = styled.div<{ width: string }>`
-  position: relative;
-  width: ${props => props.width};
-  display: flex;
-  align-items: flex-start;
-  flex-direction: column;
-  position: relative;
-  justify-content: center;
-
-  margin-bottom: 2.2rem;
-  margin-top: 24px;
-`;
-
-const InputLabel = styled.span<{ width: string }>`
-  width: ${props => props.width};
-  padding: 0.7rem !important;
-  color: #c2c6dc;
-  left: 0;
-  top: 0;
-  transition: all 0.2s ease;
-  position: absolute;
-  border-radius: 5px;
-  overflow: hidden;
-  font-size: 0.85rem;
-  cursor: text;
-  font-size: 12px;
-      user-select: none;
-    pointer-events: none;
-}
-`;
-
-const InputInput = styled.input<{
-  hasValue: boolean;
-  hasIcon: boolean;
-  width: string;
-  focusBg: string;
-  borderColor: string;
-}>`
-  width: ${props => props.width};
-  font-size: 14px;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  border-color: ${props => props.borderColor};
-  background: #262c49;
-  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.15);
-  ${props => (props.hasIcon ? 'padding: 0.7rem 1rem 0.7rem 3rem;' : 'padding: 0.7rem;')}
-  line-height: 16px;
-  color: #c2c6dc;
-  position: relative;
-  border-radius: 5px;
-  transition: all 0.3s ease;
-  &:focus {
-    box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.15);
-    border: 1px solid ${props => props.theme.colors.primary};
-    background: ${props => props.focusBg};
-  }
-  &:focus ~ ${InputLabel} {
-    color: ${props => props.theme.colors.primary};
-    transform: translate(-3px, -90%);
-  }
-  ${props =>
-    props.hasValue &&
-    css`
-      & ~ ${InputLabel} {
-        color: ${props.theme.colors.primary};
-        transform: translate(-3px, -90%);
-      }
-    `}
-`;
-
-const Icon = styled.div`
-  display: flex;
-  left: 16px;
-  position: absolute;
-`;
-
-type InputProps = {
-  variant?: 'normal' | 'alternate';
-  disabled?: boolean;
-  label?: string;
-  width?: string;
-  floatingLabel?: boolean;
-  placeholder?: string;
-  icon?: JSX.Element;
-  type?: string;
-  autocomplete?: boolean;
-  autoFocus?: boolean;
-  autoSelect?: boolean;
-  id?: string;
-  name?: string;
-  className?: string;
-  defaultValue?: string;
-  value?: string;
-  onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;
-};
-
-function useCombinedRefs(...refs: any) {
-  const targetRef = React.useRef();
-
-  React.useEffect(() => {
-    refs.forEach((ref: any) => {
-      if (!ref) return;
-
-      if (typeof ref === 'function') {
-        ref(targetRef.current);
-      } else {
-        ref.current = targetRef.current;
-      }
-    });
-  }, [refs]);
-
-  return targetRef;
-}
-
-const Input = React.forwardRef(
-  (
-    {
-      disabled = false,
-      width = 'auto',
-      variant = 'normal',
-      type = 'text',
-      autoFocus = false,
-      autoSelect = false,
-      autocomplete,
-      label,
-      placeholder,
-      icon,
-      name,
-      className,
-      onClick,
-      floatingLabel,
-      defaultValue,
-      value,
-      id,
-    }: InputProps,
-    $ref: any,
-  ) => {
-    const [hasValue, setHasValue] = useState(defaultValue !== '');
-    const borderColor = variant === 'normal' ? 'rgba(0,0,0,0.2)' : theme.colors.alternate;
-    const focusBg = variant === 'normal' ? theme.colors.bg.secondary : theme.colors.bg.primary;
-
-    // Merge forwarded ref and internal ref in order to be able to access the ref in the useEffect
-    // The forwarded ref is not accessible by itself, which is what the innerRef & combined ref is for
-    // TODO(jordanknott): This is super ugly, find a better approach?
-    const $innerRef = React.useRef<HTMLInputElement>(null);
-    const combinedRef: any = useCombinedRefs($ref, $innerRef);
-    useEffect(() => {
-      if (combinedRef && combinedRef.current) {
-        if (autoFocus) {
-          combinedRef.current.focus();
-        }
-        if (autoSelect) {
-          combinedRef.current.select();
-        }
-      }
-    }, []);
-    return (
-      <InputWrapper className={className} width={width}>
-        <InputInput
-          onChange={e => {
-            setHasValue((e.currentTarget.value !== '' || floatingLabel) ?? false);
-          }}
-          disabled={disabled}
-          hasValue={hasValue}
-          ref={combinedRef}
-          id={id}
-          type={type}
-          name={name}
-          onClick={onClick}
-          autoComplete={autocomplete ? 'on' : 'off'}
-          defaultValue={defaultValue}
-          value={value}
-          hasIcon={typeof icon !== 'undefined'}
-          width={width}
-          placeholder={placeholder}
-          focusBg={focusBg}
-          borderColor={borderColor}
-        />
-        {label && <InputLabel width={width}>{label}</InputLabel>}
-        <Icon>{icon && icon}</Icon>
-      </InputWrapper>
-    );
-  },
-);
-
-export default Input;

frontend/src/shared/components/List/List.stories.tsx

@@ -1,146 +0,0 @@
-import React, { createRef } from 'react';
-import { action } from '@storybook/addon-actions';
-import Card from 'shared/components/Card';
-import CardComposer from 'shared/components/CardComposer';
-import LabelColors from 'shared/constants/labelColors';
-import NOOP from 'shared/utils/noop';
-import List, { ListCards } from '.';
-
-export default {
-  component: List,
-  title: 'List',
-  parameters: {
-    backgrounds: [
-      { name: 'white', value: '#ffffff', default: true },
-      { name: 'gray', value: '#f8f8f8' },
-    ],
-  },
-};
-
-const labelData: Array<ProjectLabel> = [
-  {
-    id: 'development',
-    name: 'Development',
-    createdDate: new Date().toString(),
-    labelColor: {
-      id: '1',
-      colorHex: LabelColors.BLUE,
-      name: 'blue',
-      position: 1,
-    },
-  },
-];
-
-const createCard = () => {
-  const $ref = createRef<HTMLDivElement>();
-  return (
-    <Card
-      taskID="1"
-      taskGroupID="1"
-      description="hello!"
-      ref={$ref}
-      title="Hello, world"
-      onClick={action('on click')}
-      onContextMenu={action('on context click')}
-      watched
-      labels={labelData}
-      checklists={{ complete: 1, total: 4 }}
-      dueDate={{ isPastDue: false, formattedDate: 'Oct 26, 2020' }}
-    />
-  );
-};
-
-export const Default = () => {
-  return (
-    <List
-      id=""
-      name="General"
-      isComposerOpen={false}
-      onSaveName={action('on save name')}
-      onOpenComposer={action('on open composer')}
-      onExtraMenuOpen={action('extra menu open')}
-    >
-      <ListCards>
-        <CardComposer onClose={NOOP} onCreateCard={NOOP} isOpen={false} />
-      </ListCards>
-    </List>
-  );
-};
-
-export const WithCardComposer = () => {
-  return (
-    <List
-      id="1"
-      name="General"
-      isComposerOpen
-      onSaveName={action('on save name')}
-      onOpenComposer={action('on open composer')}
-      onExtraMenuOpen={action('extra menu open')}
-    >
-      <ListCards>
-        <CardComposer onClose={NOOP} onCreateCard={NOOP} isOpen />
-      </ListCards>
-    </List>
-  );
-};
-
-export const WithCard = () => {
-  const $cardRef: any = createRef();
-  return (
-    <List
-      id="1"
-      name="General"
-      isComposerOpen={false}
-      onSaveName={action('on save name')}
-      onOpenComposer={action('on open composer')}
-      onExtraMenuOpen={action('extra menu open')}
-    >
-      <ListCards>
-        <Card
-          taskID="1"
-          taskGroupID="1"
-          description="hello!"
-          ref={$cardRef}
-          title="Hello, world"
-          onClick={action('on click')}
-          onContextMenu={action('on context click')}
-          watched
-          labels={labelData}
-          checklists={{ complete: 1, total: 4 }}
-          dueDate={{ isPastDue: false, formattedDate: 'Oct 26, 2020' }}
-        />
-        <CardComposer onClose={NOOP} onCreateCard={NOOP} isOpen={false} />
-      </ListCards>
-    </List>
-  );
-};
-export const WithCardAndComposer = () => {
-  const $cardRef: any = createRef();
-  return (
-    <List
-      id="1"
-      name="General"
-      isComposerOpen
-      onSaveName={action('on save name')}
-      onOpenComposer={action('on open composer')}
-      onExtraMenuOpen={action('extra menu open')}
-    >
-      <ListCards>
-        <Card
-          taskID="1"
-          taskGroupID="1"
-          description="hello!"
-          ref={$cardRef}
-          title="Hello, world"
-          onClick={action('on click')}
-          onContextMenu={action('on context click')}
-          watched
-          labels={labelData}
-          checklists={{ complete: 1, total: 4 }}
-          dueDate={{ isPastDue: false, formattedDate: 'Oct 26, 2020' }}
-        />
-        <CardComposer onClose={NOOP} onCreateCard={NOOP} isOpen />
-      </ListCards>
-    </List>
-  );
-};