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 />),
+};