Clean and re-organize post table refactoring (#1000)

* Clean and re-organize post table refactoring

* Fix tests

front/src/modules/ui/input/text/components/TextInput.tsx

@@ -0,0 +1,191 @@
+import {
+  ChangeEvent,
+  FocusEventHandler,
+  InputHTMLAttributes,
+  useRef,
+  useState,
+} from 'react';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { Key } from 'ts-key-enum';
+
+import { IconAlertCircle } from '@/ui/icon';
+import { IconEye, IconEyeOff } from '@/ui/icon/index';
+import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
+import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+
+import { InputHotkeyScope } from '../types/InputHotkeyScope';
+
+type OwnProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> & {
+  label?: string;
+  onChange?: (text: string) => void;
+  fullWidth?: boolean;
+  disableHotkeys?: boolean;
+  error?: string;
+};
+
+const StyledContainer = styled.div<Pick<OwnProps, 'fullWidth'>>`
+  display: flex;
+  flex-direction: column;
+  width: ${({ fullWidth }) => (fullWidth ? `100%` : 'auto')};
+`;
+
+const StyledLabel = styled.span`
+  color: ${({ theme }) => theme.font.color.light};
+  font-size: ${({ theme }) => theme.font.size.xs};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  margin-bottom: ${({ theme }) => theme.spacing(1)};
+  text-transform: uppercase;
+`;
+
+const StyledInputContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+
+  width: 100%;
+`;
+
+const StyledInput = styled.input<Pick<OwnProps, 'fullWidth'>>`
+  background-color: ${({ theme }) => theme.background.tertiary};
+  border: none;
+  border-bottom-left-radius: ${({ theme }) => theme.border.radius.sm};
+  border-top-left-radius: ${({ theme }) => theme.border.radius.sm};
+  color: ${({ theme }) => theme.font.color.primary};
+  display: flex;
+  flex-grow: 1;
+  font-family: ${({ theme }) => theme.font.family};
+
+  font-weight: ${({ theme }) => theme.font.weight.regular};
+  outline: none;
+  padding: ${({ theme }) => theme.spacing(2)};
+
+  width: 100%;
+
+  &::placeholder,
+  &::-webkit-input-placeholder {
+    color: ${({ theme }) => theme.font.color.light};
+    font-family: ${({ theme }) => theme.font.family};
+    font-weight: ${({ theme }) => theme.font.weight.medium};
+  }
+`;
+
+const StyledErrorHelper = styled.div`
+  color: ${({ theme }) => theme.color.red};
+  font-size: ${({ theme }) => theme.font.size.xs};
+  padding: ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledTrailingIconContainer = styled.div`
+  align-items: center;
+  background-color: ${({ theme }) => theme.background.tertiary};
+  border-bottom-right-radius: ${({ theme }) => theme.border.radius.sm};
+  border-top-right-radius: ${({ theme }) => theme.border.radius.sm};
+  display: flex;
+  justify-content: center;
+  padding-right: ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledTrailingIcon = styled.div`
+  align-items: center;
+  color: ${({ theme }) => theme.font.color.light};
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+`;
+
+const INPUT_TYPE_PASSWORD = 'password';
+
+export function TextInput({
+  label,
+  value,
+  onChange,
+  onFocus,
+  onBlur,
+  fullWidth,
+  error,
+  required,
+  type,
+  disableHotkeys = false,
+  ...props
+}: OwnProps): JSX.Element {
+  const theme = useTheme();
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const {
+    goBackToPreviousHotkeyScope,
+    setHotkeyScopeAndMemorizePreviousScope,
+  } = usePreviousHotkeyScope();
+
+  const handleFocus: FocusEventHandler<HTMLInputElement> = (e) => {
+    onFocus?.(e);
+    if (!disableHotkeys) {
+      setHotkeyScopeAndMemorizePreviousScope(InputHotkeyScope.TextInput);
+    }
+  };
+
+  const handleBlur: FocusEventHandler<HTMLInputElement> = (e) => {
+    onBlur?.(e);
+    if (!disableHotkeys) {
+      goBackToPreviousHotkeyScope();
+    }
+  };
+
+  useScopedHotkeys(
+    [Key.Escape, Key.Enter],
+    () => {
+      inputRef.current?.blur();
+    },
+    InputHotkeyScope.TextInput,
+  );
+
+  const [passwordVisible, setPasswordVisible] = useState(false);
+
+  const handleTogglePasswordVisibility = () => {
+    setPasswordVisible(!passwordVisible);
+  };
+
+  return (
+    <StyledContainer fullWidth={fullWidth ?? false}>
+      {label && <StyledLabel>{label + (required ? '*' : '')}</StyledLabel>}
+      <StyledInputContainer>
+        <StyledInput
+          autoComplete="off"
+          ref={inputRef}
+          tabIndex={props.tabIndex ?? 0}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          value={value}
+          required={required}
+          type={passwordVisible ? 'text' : type}
+          onChange={(event: ChangeEvent<HTMLInputElement>) => {
+            if (onChange) {
+              onChange(event.target.value);
+            }
+          }}
+          {...props}
+        />
+        <StyledTrailingIconContainer>
+          {error && (
+            <StyledTrailingIcon>
+              <IconAlertCircle size={16} color={theme.color.red} />
+            </StyledTrailingIcon>
+          )}
+          {!error && type === INPUT_TYPE_PASSWORD && (
+            <StyledTrailingIcon
+              onClick={handleTogglePasswordVisibility}
+              data-testid="reveal-password-button"
+            >
+              {passwordVisible ? (
+                <IconEyeOff size={theme.icon.size.md} />
+              ) : (
+                <IconEye size={theme.icon.size.md} />
+              )}
+            </StyledTrailingIcon>
+          )}
+        </StyledTrailingIconContainer>
+      </StyledInputContainer>
+      {error && <StyledErrorHelper>{error}</StyledErrorHelper>}
+    </StyledContainer>
+  );
+}

front/src/modules/ui/input/text/components/TextInputContainer.tsx

@@ -0,0 +1,17 @@
+import styled from '@emotion/styled';
+
+import { overlayBackground } from '@/ui/theme/constants/effects';
+
+export const TextInputContainer = styled.div`
+  align-items: center;
+  border: 1px solid ${({ theme }) => theme.border.color.medium};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  display: flex;
+  margin-left: -1px;
+  min-height: 32px;
+  width: inherit;
+
+  ${overlayBackground}
+
+  z-index: 10;
+`;

front/src/modules/ui/input/text/components/TextInputDisplay.tsx

@@ -0,0 +1,8 @@
+import styled from '@emotion/styled';
+
+export const TextInputDisplay = styled.div`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+`;

front/src/modules/ui/input/text/components/TextInputEdit.tsx

@@ -0,0 +1,37 @@
+import styled from '@emotion/styled';
+
+import { textInputStyle } from '@/ui/theme/constants/effects';
+
+import { TextInputContainer } from './TextInputContainer';
+
+export const InplaceInputTextInput = styled.input`
+  margin: 0;
+  width: 100%;
+  ${textInputStyle}
+`;
+
+type OwnProps = {
+  placeholder?: string;
+  value?: string;
+  onChange?: (newValue: string) => void;
+  autoFocus?: boolean;
+};
+
+export function TextInputEdit({
+  placeholder,
+  value,
+  onChange,
+  autoFocus,
+}: OwnProps) {
+  return (
+    <TextInputContainer>
+      <InplaceInputTextInput
+        autoComplete="off"
+        autoFocus={autoFocus}
+        placeholder={placeholder}
+        value={value}
+        onChange={(e) => onChange?.(e.target.value)}
+      />
+    </TextInputContainer>
+  );
+}

front/src/modules/ui/input/text/components/__stories__/TextInput.stories.tsx

@@ -0,0 +1,84 @@
+import { useState } from 'react';
+import { expect } from '@storybook/jest';
+import { jest } from '@storybook/jest';
+import type { Meta, StoryObj } from '@storybook/react';
+import { userEvent, within } from '@storybook/testing-library';
+
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+
+import { TextInput } from '../TextInput';
+
+const changeJestFn = jest.fn();
+
+const meta: Meta<typeof TextInput> = {
+  title: 'UI/Input/TextInput',
+  component: TextInput,
+  decorators: [ComponentDecorator],
+  args: { value: '', onChange: changeJestFn, placeholder: 'Placeholder' },
+};
+
+export default meta;
+type Story = StoryObj<typeof TextInput>;
+
+function FakeTextInput({
+  onChange,
+  value: initialValue,
+  ...props
+}: React.ComponentProps<typeof TextInput>) {
+  const [value, setValue] = useState(initialValue);
+  return (
+    <TextInput
+      {...props}
+      value={value}
+      onChange={(text) => {
+        setValue(text);
+        onChange?.(text);
+      }}
+    />
+  );
+}
+
+export const Default: Story = {
+  argTypes: { value: { control: false } },
+  args: { value: 'A good value ' },
+  render: (args) => <FakeTextInput {...args} />,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const input = canvas.getByRole('textbox');
+    await userEvent.type(input, 'cou', { delay: 100 });
+
+    expect(changeJestFn).toHaveBeenNthCalledWith(1, 'A good value c');
+    expect(changeJestFn).toHaveBeenNthCalledWith(2, 'A good value co');
+    expect(changeJestFn).toHaveBeenNthCalledWith(3, 'A good value cou');
+  },
+};
+
+export const Placeholder: Story = {};
+
+export const FullWidth: Story = {
+  args: { value: 'A good value', fullWidth: true },
+};
+
+export const WithLabel: Story = {
+  args: { label: 'Lorem ipsum' },
+};
+
+export const WithError: Story = {
+  args: { error: 'Lorem ipsum' },
+};
+
+export const PasswordInput: Story = {
+  args: { type: 'password', placeholder: 'Password' },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const input = canvas.getByPlaceholderText('Password');
+    await userEvent.type(input, 'pa$$w0rd');
+
+    const revealButton = canvas.getByTestId('reveal-password-button');
+    await userEvent.click(revealButton);
+
+    expect(input).toHaveAttribute('type', 'text');
+  },
+};

front/src/modules/ui/input/text/types/InputHotkeyScope.ts

@@ -0,0 +1,3 @@
+export enum InputHotkeyScope {
+  TextInput = 'text-input',
+}