Lucas/t 369 on comment drawer i can reply to a comment thread and it (#206)

* Added prisma to suggested extension in container

* Added comments and authors on drawer with proper resolving

* Fix lint

* Fix console log

* Fixed generated front graphql from rebase

* Fixed right drawer width and shared in theme

* Added date packages and tooltip

* Added date utils and tests

* Added comment thread components

* Fixed comment chip

* wip

* wip 2

* - Added string typing for DateTime scalar
- Refactored user in a recoil state and workspace using it
- Added comment creation

* Prepared EditableCell refactor

* Fixed line height and tooltip

* Fix lint

front/src/modules/ui/components/editable-cell/EditableCellDisplayMode.tsx

@@ -9,7 +9,7 @@ export const EditableCellNormalModeOuterContainer = styled.div`
   overflow: hidden;
 
   padding-left: ${(props) => props.theme.spacing(2)};
-  padding-right: ${(props) => props.theme.spacing(2)};
+  padding-right: ${(props) => props.theme.spacing(1)};
 `;
 
 export const EditableCellNormalModeInnerContainer = styled.div`

front/src/modules/ui/components/inputs/AutosizeTextInput.tsx

@@ -0,0 +1,123 @@
+import { useState } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
+import { HotkeysEvent } from 'react-hotkeys-hook/dist/types';
+import { HiArrowSmRight } from 'react-icons/hi';
+import TextareaAutosize from 'react-textarea-autosize';
+import styled from '@emotion/styled';
+
+import { IconButton } from '../buttons/IconButton';
+
+type OwnProps = {
+  onSend?: (text: string) => void;
+  placeholder?: string;
+};
+
+const StyledContainer = styled.div`
+  display: flex;
+  min-height: 32px;
+  width: 100%;
+`;
+
+const StyledTextArea = styled(TextareaAutosize)`
+  width: 100%;
+  padding: 8px;
+  font-size: 13px;
+  font-family: inherit;
+  font-weight: 400;
+  line-height: 16px;
+  border: none;
+  border-radius: 5px;
+  background: ${(props) => props.theme.tertiaryBackground};
+  color: ${(props) => props.theme.text80};
+  overflow: auto;
+  resize: none;
+
+  &:focus {
+    outline: none;
+    border: none;
+  }
+
+  &::placeholder {
+    color: ${(props) => props.theme.text30};
+    font-weight: 400;
+  }
+`;
+
+const StyledBottomRightIconButton = styled.div`
+  width: 0px;
+  position: relative;
+  top: calc(100% - 26.5px);
+  right: 26px;
+`;
+
+export function AutosizeTextInput({ placeholder, onSend }: OwnProps) {
+  const [text, setText] = useState('');
+
+  const isSendButtonDisabled = !text;
+
+  useHotkeys(
+    ['shift+enter', 'enter'],
+    (event: KeyboardEvent, handler: HotkeysEvent) => {
+      if (handler.shift) {
+        return;
+      } else {
+        event.preventDefault();
+
+        onSend?.(text);
+
+        setText('');
+      }
+    },
+    {
+      enableOnContentEditable: true,
+      enableOnFormTags: true,
+    },
+    [onSend, text, setText],
+  );
+
+  useHotkeys(
+    'esc',
+    (event: KeyboardEvent) => {
+      event.preventDefault();
+
+      setText('');
+    },
+    {
+      enableOnContentEditable: true,
+      enableOnFormTags: true,
+    },
+    [onSend, setText],
+  );
+
+  function handleInputChange(event: React.FormEvent<HTMLTextAreaElement>) {
+    const newText = event.currentTarget.value;
+
+    setText(newText);
+  }
+
+  function handleOnClickSendButton() {
+    onSend?.(text);
+
+    setText('');
+  }
+
+  return (
+    <>
+      <StyledContainer>
+        <StyledTextArea
+          placeholder={placeholder || 'Write something...'}
+          maxRows={5}
+          onChange={handleInputChange}
+          value={text}
+        />
+        <StyledBottomRightIconButton>
+          <IconButton
+            onClick={handleOnClickSendButton}
+            icon={<HiArrowSmRight size={15} />}
+            disabled={isSendButtonDisabled}
+          />
+        </StyledBottomRightIconButton>
+      </StyledContainer>
+    </>
+  );
+}

front/src/modules/ui/components/inputs/__stories__/AutosizeTextInput.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
+
+import { AutosizeTextInput } from '../AutosizeTextInput';
+
+const meta: Meta<typeof AutosizeTextInput> = {
+  title: 'Components/Common/AutosizeTextInput',
+  component: AutosizeTextInput,
+  argTypes: {
+    onSend: {
+      action: 'onSend',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof AutosizeTextInput>;
+
+export const Default: Story = {
+  render: getRenderWrapperForComponent(<AutosizeTextInput />),
+};

front/src/modules/ui/layout/AppLayout.tsx

@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
+import { useRecoilState } from 'recoil';
 
-import { User } from '@/users/interfaces/user.interface';
+import { currentUserState } from '@/auth/states/currentUserState';
 
 import { Navbar } from './navbar/Navbar';
 
@@ -23,16 +24,17 @@ const MainContainer = styled.div`
 
 type OwnProps = {
   children: JSX.Element;
-  user?: User;
 };
 
-export function AppLayout({ children, user }: OwnProps) {
-  const userIsAuthenticated = !!user;
+export function AppLayout({ children }: OwnProps) {
+  const currentUser = useRecoilState(currentUserState);
+  const userIsAuthenticated = !!currentUser;
+
   return (
     <StyledLayout>
       {userIsAuthenticated ? (
         <>
-          <Navbar user={user} workspace={user?.workspaceMember?.workspace} />
+          <Navbar />
           <MainContainer>{children}</MainContainer>
         </>
       ) : (

front/src/modules/ui/layout/navbar/Navbar.tsx

@@ -2,9 +2,6 @@ import { TbBuilding, TbUser } from 'react-icons/tb';
 import { useMatch, useResolvedPath } from 'react-router-dom';
 import styled from '@emotion/styled';
 
-import { User } from '@/users/interfaces/user.interface';
-import { Workspace } from '@/workspaces/interfaces/workspace.interface';
-
 import NavItem from './NavItem';
 import NavTitle from './NavTitle';
 import WorkspaceContainer from './WorkspaceContainer';
@@ -23,16 +20,11 @@ const NavItemsContainer = styled.div`
   margin-top: 40px;
 `;
 
-type OwnProps = {
-  user?: User;
-  workspace?: Workspace;
-};
-
-export function Navbar({ workspace }: OwnProps) {
+export function Navbar() {
   return (
     <>
       <NavbarContainer>
-        {workspace && <WorkspaceContainer workspace={workspace} />}
+        <WorkspaceContainer />
         <NavItemsContainer>
           <NavTitle label="Workspace" />
           <NavItem

front/src/modules/ui/layout/navbar/WorkspaceContainer.tsx

@@ -1,10 +1,7 @@
 import styled from '@emotion/styled';
+import { useRecoilValue } from 'recoil';
 
-import { Workspace } from '@/workspaces/interfaces/workspace.interface';
-
-type OwnProps = {
-  workspace: Workspace;
-};
+import { currentUserState } from '@/auth/states/currentUserState';
 
 const StyledContainer = styled.button`
   display: inline-flex;
@@ -39,11 +36,19 @@ const StyledName = styled.div`
   color: ${(props) => props.theme.text80};
 `;
 
-function WorkspaceContainer({ workspace }: OwnProps) {
+function WorkspaceContainer() {
+  const currentUser = useRecoilValue(currentUserState);
+
+  const currentWorkspace = currentUser?.workspaceMember?.workspace;
+
+  if (!currentWorkspace) {
+    return null;
+  }
+
   return (
     <StyledContainer>
-      <StyledLogo logo={workspace.logo}></StyledLogo>
-      <StyledName>{workspace?.displayName}</StyledName>
+      <StyledLogo logo={currentWorkspace?.logo}></StyledLogo>
+      <StyledName>{currentWorkspace?.displayName}</StyledName>
     </StyledContainer>
   );
 }

front/src/modules/ui/layout/states/themeEnabledState.ts

@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const themeEnabledState = atom<boolean>({
+  key: 'ui/theme-enabled',
+  default: true,
+});

front/src/modules/ui/layout/styles/themes.ts

@@ -15,6 +15,7 @@ const commonTheme = {
 
   fontWeightBold: 500,
   fontFamily: 'Inter, sans-serif',
+  lineHeight: '150%',
 
   spacing: (multiplicator: number) => `${multiplicator * 4}px`,