feat: templates framework

.env

@@ -1,3 +1,5 @@
 PUBLIC_URL=/
 REACT_APP_PUBLIC_URL=/
-REACT_APP_VERSION=$npm_package_version  
+REACT_APP_VERSION=$npm_package_version
+
+REACT_APP_LEGACY_CREATE_BOARD=true

.env.development

@@ -4,3 +4,5 @@ REACT_APP_VERSION=$npm_package_version
 SKIP_PREFLIGHT_CHECK=true
 PUBLIC_URL=http://localhost:3000
 REACT_APP_PUBLIC_URL=http://localhost:3000
+
+REACT_APP_LEGACY_CREATE_BOARD=false

cypress/e2e/landingPageToBoard-spec.cy.ts

@@ -1,7 +1,7 @@
 /// <reference types="cypress" />
 /// <reference path="../support/index.d.ts" />
 
-import { columnTemplates } from "../../src/routes/NewBoard/columnTemplates"
+import { legacyColumnTemplates } from "../../src/routes/Boards/Legacy/legacyColumnTemplates"
 import translationEn from "../../src/i18n/en/translation.json"
 
 describe("Navigation from landing page to board", () => {
@@ -28,31 +28,31 @@ describe("Navigation from landing page to board", () => {
         cy.get("button").contains(translationEn.LoginBoard.login).click()
 
         // check templates
-        cy.get("h1").contains(translationEn.NewBoard.basicConfigurationTitle)
-        Object.values(columnTemplates).forEach(templateName => {
+        cy.get("h1").contains(translationEn.LegacyNewBoard.basicConfigurationTitle)
+        Object.values(legacyColumnTemplates).forEach(templateName => {
             cy.contains(templateName.name)
         })
 
         cy.get("button")
-        .contains(translationEn.NewBoard.createNewBoard)
+        .contains(translationEn.LegacyNewBoard.createNewBoard)
         .parent()
         .should("be.disabled")
 
         // select template
         cy.get("input[type='radio']").siblings().contains("Lean Coffee").click()
 
         cy.get("button")
-        .contains(translationEn.NewBoard.createNewBoard)
+        .contains(translationEn.LegacyNewBoard.createNewBoard)
         .parent()
         .should("not.be.disabled")
 
         // click CTA
         cy.get("button")
-        .contains(translationEn.NewBoard.createNewBoard)
+        .contains(translationEn.LegacyNewBoard.createNewBoard)
         .click()
 
         // navigates to the board
         cy.url().should("include", "/board/")
         cy.get("h2").contains("Lean Coffee")
     })
-  })
+  })

src/components/SearchBar/SearchBar.scss

@@ -0,0 +1,142 @@
+@import "constants/style";
+
+$padding--default: $spacing--base;
+$padding--mobile: 12.5px $spacing--base;
+
+.search-bar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: $spacing--xs;
+
+  width: 100%;
+  padding: $padding--default;
+  border-radius: $rounded--full;
+
+  background-color: $gray--000;
+
+  &:not(&--disabled) {
+    @include default-states($padding: $padding--default);
+
+    // alternatively, this could be split up and put in their respective classes,
+    // which might be more readable but also requires a little bit more code
+    &:hover,
+    &:focus-within {
+      .search-bar__icon-container--search-icon {
+        color: $navy--600;
+      }
+
+      .search-bar__input {
+        color: $navy--600;
+      }
+    }
+  }
+
+  &--disabled {
+    background-color: $gray--300;
+
+    .search-bar__icon-container {
+      &--search-icon,
+      &--clear-icon {
+        color: $gray--800;
+      }
+    }
+  }
+}
+
+.search-bar__icon-container {
+  width: $icon--large;
+  height: $icon--large;
+
+  &--search-icon {
+    color: $gray--800;
+  }
+
+  &--clear-icon {
+    cursor: pointer;
+  }
+}
+
+.search-bar__input {
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  border: none;
+
+  font-size: $text--base;
+  font-weight: 600;
+
+  color: $gray--800;
+  background-color: $gray--000;
+
+  &:focus {
+    outline: none;
+
+    color: $navy--600;
+  }
+
+  &::placeholder {
+    opacity: 100%;
+  }
+
+  &:disabled {
+    background-color: $gray--300;
+  }
+}
+
+@media screen and (max-width: $breakpoint--smartphone) {
+  .search-bar {
+    padding: $padding--mobile;
+
+    &:not(&--disabled) {
+      @include default-states($padding: $padding--mobile);
+    }
+  }
+}
+
+[theme="dark"] {
+  .search-bar {
+    background-color: $navy--400;
+
+    &:not(&--disabled) {
+      &:hover,
+      &:focus-within {
+        .search-bar__icon-container--search-icon {
+          color: $gray--000;
+        }
+
+        .search-bar__input {
+          color: $gray--000;
+        }
+      }
+    }
+
+    &--disabled {
+      background-color: $navy--700;
+
+      .search-bar__icon-container {
+        &--search-icon,
+        &--clear-icon {
+          color: $navy--300;
+        }
+      }
+    }
+  }
+
+  .search-bar__input {
+    color: $blue--50;
+    background-color: $navy--400;
+
+    &:disabled {
+      color: $navy--300;
+      background-color: $navy--700;
+    }
+  }
+
+  .search-bar__icon-container {
+    &--search-icon,
+    &--clear-icon {
+      color: $blue--50;
+    }
+  }
+}

src/components/SearchBar/SearchBar.tsx

@@ -0,0 +1,38 @@
+import {Dispatch, FormEvent, SetStateAction} from "react";
+import {useTranslation} from "react-i18next";
+import classNames from "classnames";
+import {ReactComponent as SearchIcon} from "assets/icons/search.svg";
+import {ReactComponent as ClearIcon} from "assets/icons/close.svg";
+import "./SearchBar.scss";
+
+type SearchBarProps = {
+  className?: string;
+  disabled?: boolean;
+  input: string;
+  setInput: Dispatch<SetStateAction<string>>;
+};
+
+/*
+ * stateless search bar component.
+ * if the input is not empty, it's clearable using the X button
+ */
+export const SearchBar = (props: SearchBarProps) => {
+  const {t} = useTranslation();
+
+  const updateInput = (e: FormEvent<HTMLInputElement>) => props.setInput(e.currentTarget.value);
+  const clearInput = () => props.setInput("");
+
+  return (
+    <div className={classNames(props.className, "search-bar", {"search-bar--disabled": props.disabled})}>
+      <div className="search-bar__icon-container search-bar__icon-container--search-icon">
+        <SearchIcon className="search-bar__icon" aria-label="logo of magnifying glass" />
+      </div>
+      <input className="search-bar__input" type="text" placeholder={t("SearchBar.placeholder")} disabled={props.disabled} tabIndex={0} value={props.input} onInput={updateInput} />
+      {props.input && (
+        <div className="search-bar__icon-container search-bar__icon-container--clear-icon" role="button" tabIndex={0} onClick={clearInput}>
+          <ClearIcon className="search-bar__icon" aria-label="clear button" />
+        </div>
+      )}
+    </div>
+  );
+};

src/components/SettingsDialog/Components/AvatarSettings.tsx

@@ -4,7 +4,6 @@ import {Avatar, generateRandomProps} from "components/Avatar";
 import {Fragment, useEffect, useState} from "react";
 import {useTranslation} from "react-i18next";
 import {useAppDispatch, useAppSelector} from "store";
-import {isEqual} from "underscore";
 import {AVATAR_CONFIG} from "constants/avatar";
 import {AvataaarProps, AvatarGroup} from "types/avatar";
 import {editSelf} from "store/features";
@@ -19,14 +18,9 @@ export interface AvatarSettingsProps {
 export const AvatarSettings = (props: AvatarSettingsProps) => {
   const dispatch = useAppDispatch();
   const {t} = useTranslation();
-  const state = useAppSelector(
-    (applicationState) => ({
-      participant: applicationState.participants!.self!,
-    }),
-    isEqual
-  );
+  const self = useAppSelector((state) => state.auth.user!);
 
-  let initialState = state.participant?.user.avatar;
+  let initialState = self.avatar;
   if (initialState === null || initialState === undefined) {
     initialState = generateRandomProps(props.id ?? "");
   }
@@ -46,7 +40,12 @@ export const AvatarSettings = (props: AvatarSettingsProps) => {
   };
 
   useEffect(() => {
-    dispatch(editSelf({...state.participant.user, avatar: properties}));
+    dispatch(
+      editSelf({
+        auth: {...self, avatar: properties},
+        applyOptimistically: true,
+      })
+    );
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [properties]);
 

src/components/SettingsDialog/ProfileSettings/ProfileSettings.tsx

@@ -5,7 +5,6 @@ import {useAppDispatch, useAppSelector} from "store";
 import {editSelf, setHotkeyState} from "store/features";
 import {Info} from "components/Icon";
 import {Toggle} from "components/Toggle";
-import {isEqual} from "underscore";
 import {useOutletContext} from "react-router";
 import {MenuItemConfig} from "constants/settings";
 import {getColorClassName} from "constants/colors";
@@ -20,16 +19,11 @@ export const ProfileSettings = () => {
 
   const activeMenuItem: MenuItemConfig = useOutletContext();
 
-  const state = useAppSelector(
-    (applicationState) => ({
-      participant: applicationState.participants.self!,
-      hotkeysAreActive: applicationState.view.hotkeysAreActive,
-    }),
-    isEqual
-  );
+  const self = useAppSelector((state) => state.auth.user!);
+  const hotkeysAreActive = useAppSelector((state) => state.view.hotkeysAreActive);
 
-  const [userName, setUserName] = useState<string>(state.participant?.user.name);
-  const [id] = useState<string | undefined>(state.participant?.user.id);
+  const [userName, setUserName] = useState<string>(self.name);
+  const [id] = useState<string | undefined>(self.id);
 
   return (
     <div className={classNames("settings-dialog__container", getColorClassName(activeMenuItem?.color))}>
@@ -44,7 +38,7 @@ export const ProfileSettings = () => {
             value={userName}
             maxLength={64}
             onChange={(e) => setUserName(e.target.value)}
-            submit={() => dispatch(editSelf({...state.participant.user, name: userName}))}
+            submit={() => dispatch(editSelf({auth: {...self, name: userName}, applyOptimistically: true}))}
           />
 
           <AvatarSettings id={id} />
@@ -53,10 +47,10 @@ export const ProfileSettings = () => {
               className="profile-settings__toggle-hotkeys-button"
               label={t("Hotkeys.hotkeyToggle")}
               onClick={() => {
-                dispatch(setHotkeyState(!state.hotkeysAreActive));
+                dispatch(setHotkeyState(!hotkeysAreActive));
               }}
             >
-              <Toggle active={state.hotkeysAreActive} />
+              <Toggle active={hotkeysAreActive} />
             </SettingsButton>
             <a className="profile-settings__open-cheat-sheet-button" href={`${process.env.PUBLIC_URL}/hotkeys.pdf`} target="_blank" rel="noopener noreferrer">
               <p>{t("Hotkeys.cheatSheet")}</p>

src/components/SettingsDialog/SettingsDialog.tsx

@@ -21,7 +21,7 @@ export const SettingsDialog = (props: SettingsDialogProps) => {
   const {t} = useTranslation();
   const location = useLocation();
   const navigate = useNavigate();
-  const me = useAppSelector((applicationState) => applicationState.participants?.self?.user)!;
+  const me = useAppSelector((state) => state.auth.user!);
   const isBoardModerator = useAppSelector((state) => state.participants?.self?.role === "MODERATOR" || state.participants?.self?.role === "OWNER");
 
   const [activeMenuItem, setActiveMenuItem] = useState<MenuItemConfig>();