Reafactor/UI input and displays (#1544)

* WIP

* Text field

* URL

* Finished PhoneInput

* Refactored input sub-folders

* Boolean

* Fix lint

* Fix lint

* Fix useOutsideClick

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

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

@@ -0,0 +1,234 @@
+import { useState } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
+import { HotkeysEvent } from 'react-hotkeys-hook/dist/types';
+import TextareaAutosize from 'react-textarea-autosize';
+import styled from '@emotion/styled';
+
+import { Button } from '@/ui/button/components/Button';
+import { RoundedIconButton } from '@/ui/button/components/RoundedIconButton';
+import { IconArrowRight } from '@/ui/icon/index';
+
+const MAX_ROWS = 5;
+
+export enum AutosizeTextInputVariant {
+  Icon = 'icon',
+  Button = 'button',
+}
+
+type OwnProps = {
+  onValidate?: (text: string) => void;
+  minRows?: number;
+  placeholder?: string;
+  onFocus?: () => void;
+  variant?: AutosizeTextInputVariant;
+  buttonTitle?: string;
+};
+
+const StyledContainer = styled.div`
+  width: 100%;
+`;
+
+const StyledInputContainer = styled.div`
+  display: flex;
+  position: relative;
+  width: 100%;
+`;
+
+type StyledTextAreaProps = {
+  variant: AutosizeTextInputVariant;
+};
+
+const StyledTextArea = styled(TextareaAutosize)<StyledTextAreaProps>`
+  background: ${({ theme, variant }) =>
+    variant === AutosizeTextInputVariant.Button
+      ? 'transparent'
+      : theme.background.tertiary};
+  border: none;
+  border-radius: 5px;
+  color: ${({ theme }) => theme.font.color.primary};
+  font-family: inherit;
+  font-size: ${({ theme }) => theme.font.size.md};
+  font-weight: ${({ theme }) => theme.font.weight.regular};
+  line-height: 16px;
+  overflow: auto;
+
+  &:focus {
+    border: none;
+    outline: none;
+  }
+
+  &::placeholder {
+    color: ${({ theme }) => theme.font.color.light};
+    font-weight: ${({ theme }) => theme.font.weight.regular};
+  }
+  padding: ${({ variant }) =>
+    variant === AutosizeTextInputVariant.Button ? '8px 0' : '8px'};
+  resize: none;
+  width: 100%;
+`;
+
+// TODO: this messes with the layout, fix it
+const StyledBottomRightRoundedIconButton = styled.div`
+  height: 0;
+  position: relative;
+  right: 26px;
+  top: 6px;
+  width: 0px;
+`;
+
+const StyledSendButton = styled(Button)`
+  margin-left: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledWordCounter = styled.div`
+  color: ${({ theme }) => theme.font.color.light};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  line-height: 150%;
+  width: 100%;
+`;
+
+type StyledBottomContainerProps = {
+  isTextAreaHidden: boolean;
+};
+
+const StyledBottomContainer = styled.div<StyledBottomContainerProps>`
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  margin-top: ${({ theme, isTextAreaHidden }) =>
+    isTextAreaHidden ? 0 : theme.spacing(4)};
+`;
+
+const StyledCommentText = styled.div`
+  cursor: text;
+  padding-bottom: ${({ theme }) => theme.spacing(1)};
+  padding-top: ${({ theme }) => theme.spacing(1)};
+`;
+
+export function AutosizeTextInput({
+  placeholder,
+  onValidate,
+  minRows = 1,
+  onFocus,
+  variant = AutosizeTextInputVariant.Icon,
+  buttonTitle,
+}: OwnProps) {
+  const [isFocused, setIsFocused] = useState(false);
+  const [isHidden, setIsHidden] = useState(
+    variant === AutosizeTextInputVariant.Button,
+  );
+  const [text, setText] = useState('');
+
+  const isSendButtonDisabled = !text;
+  const words = text.split(/\s|\n/).filter((word) => word).length;
+
+  useHotkeys(
+    ['shift+enter', 'enter'],
+    (event: KeyboardEvent, handler: HotkeysEvent) => {
+      if (handler.shift || !isFocused) {
+        return;
+      } else {
+        event.preventDefault();
+
+        onValidate?.(text);
+
+        setText('');
+      }
+    },
+    {
+      enableOnContentEditable: true,
+      enableOnFormTags: true,
+    },
+    [onValidate, text, setText, isFocused],
+  );
+
+  useHotkeys(
+    'esc',
+    (event: KeyboardEvent) => {
+      if (!isFocused) {
+        return;
+      }
+
+      event.preventDefault();
+
+      setText('');
+    },
+    {
+      enableOnContentEditable: true,
+      enableOnFormTags: true,
+    },
+    [onValidate, setText, isFocused],
+  );
+
+  function handleInputChange(event: React.FormEvent<HTMLTextAreaElement>) {
+    const newText = event.currentTarget.value;
+
+    setText(newText);
+  }
+
+  function handleOnClickSendButton() {
+    onValidate?.(text);
+
+    setText('');
+  }
+
+  const computedMinRows = minRows > MAX_ROWS ? MAX_ROWS : minRows;
+
+  return (
+    <>
+      <StyledContainer>
+        <StyledInputContainer>
+          {!isHidden && (
+            <StyledTextArea
+              autoFocus={variant === AutosizeTextInputVariant.Button}
+              placeholder={placeholder ?? 'Write a comment'}
+              maxRows={MAX_ROWS}
+              minRows={computedMinRows}
+              onChange={handleInputChange}
+              value={text}
+              onFocus={() => {
+                onFocus?.();
+                setIsFocused(true);
+              }}
+              onBlur={() => setIsFocused(false)}
+              variant={variant}
+            />
+          )}
+          {variant === AutosizeTextInputVariant.Icon && (
+            <StyledBottomRightRoundedIconButton>
+              <RoundedIconButton
+                onClick={handleOnClickSendButton}
+                Icon={IconArrowRight}
+                disabled={isSendButtonDisabled}
+              />
+            </StyledBottomRightRoundedIconButton>
+          )}
+        </StyledInputContainer>
+
+        {variant === AutosizeTextInputVariant.Button && (
+          <StyledBottomContainer isTextAreaHidden={isHidden}>
+            <StyledWordCounter>
+              {isHidden ? (
+                <StyledCommentText
+                  onClick={() => {
+                    setIsHidden(false);
+                    onFocus?.();
+                  }}
+                >
+                  Write a comment
+                </StyledCommentText>
+              ) : (
+                `${words} word${words === 1 ? '' : 's'}`
+              )}
+            </StyledWordCounter>
+            <StyledSendButton
+              title={buttonTitle ?? 'Comment'}
+              disabled={isSendButtonDisabled}
+              onClick={handleOnClickSendButton}
+            />
+          </StyledBottomContainer>
+        )}
+      </StyledContainer>
+    </>
+  );
+}

front/src/modules/ui/input/components/BooleanInput.tsx

@@ -0,0 +1,48 @@
+import { useEffect, useState } from 'react';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { IconCheck, IconX } from '@/ui/icon';
+
+const StyledEditableBooleanFieldContainer = styled.div`
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+`;
+
+const StyledEditableBooleanFieldValue = styled.div`
+  margin-left: ${({ theme }) => theme.spacing(1)};
+`;
+
+type OwnProps = {
+  value: boolean;
+  onToggle?: (newValue: boolean) => void;
+};
+
+export function BooleanInput({ value, onToggle }: OwnProps) {
+  const [internalValue, setInternalValue] = useState(value);
+
+  useEffect(() => {
+    setInternalValue(value);
+  }, [value]);
+
+  function handleClick() {
+    setInternalValue(!internalValue);
+    onToggle?.(!internalValue);
+  }
+
+  const theme = useTheme();
+
+  return (
+    <StyledEditableBooleanFieldContainer onClick={handleClick}>
+      {internalValue ? (
+        <IconCheck size={theme.icon.size.sm} />
+      ) : (
+        <IconX size={theme.icon.size.sm} />
+      )}
+      <StyledEditableBooleanFieldValue>
+        {internalValue ? 'True' : 'False'}
+      </StyledEditableBooleanFieldValue>
+    </StyledEditableBooleanFieldContainer>
+  );
+}

front/src/modules/ui/input/components/Checkbox.tsx

@@ -0,0 +1,159 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+
+import { IconCheck, IconMinus } from '@/ui/icon';
+
+export enum CheckboxVariant {
+  Primary = 'primary',
+  Secondary = 'secondary',
+  Tertiary = 'tertiary',
+}
+
+export enum CheckboxShape {
+  Squared = 'squared',
+  Rounded = 'rounded',
+}
+
+export enum CheckboxSize {
+  Large = 'large',
+  Small = 'small',
+}
+
+type OwnProps = {
+  checked: boolean;
+  indeterminate?: boolean;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onCheckedChange?: (value: boolean) => void;
+  variant?: CheckboxVariant;
+  size?: CheckboxSize;
+  shape?: CheckboxShape;
+};
+
+const StyledInputContainer = styled.div`
+  align-items: center;
+  display: flex;
+  position: relative;
+`;
+
+type InputProps = {
+  checkboxSize: CheckboxSize;
+  variant: CheckboxVariant;
+  indeterminate?: boolean;
+  shape?: CheckboxShape;
+  isChecked?: boolean;
+};
+
+const StyledInput = styled.input<InputProps>`
+  cursor: pointer;
+  margin: 0;
+  opacity: 0;
+  position: absolute;
+  z-index: 10;
+
+  & + label {
+    --size: ${({ checkboxSize }) =>
+      checkboxSize === CheckboxSize.Large ? '18px' : '12px'};
+    cursor: pointer;
+    height: calc(var(--size) + 2px);
+    padding: 0;
+    position: relative;
+    width: calc(var(--size) + 2px);
+  }
+
+  & + label:before {
+    --size: ${({ checkboxSize }) =>
+      checkboxSize === CheckboxSize.Large ? '18px' : '12px'};
+    background: ${({ theme, indeterminate, isChecked }) =>
+      indeterminate || isChecked ? theme.color.blue : 'transparent'};
+    border-color: ${({ theme, indeterminate, isChecked, variant }) => {
+      switch (true) {
+        case indeterminate || isChecked:
+          return theme.color.blue;
+        case variant === CheckboxVariant.Primary:
+          return theme.border.color.inverted;
+        case variant === CheckboxVariant.Tertiary:
+          return theme.border.color.medium;
+        default:
+          return theme.border.color.secondaryInverted;
+      }
+    }};
+    border-radius: ${({ theme, shape }) =>
+      shape === CheckboxShape.Rounded
+        ? theme.border.radius.rounded
+        : theme.border.radius.sm};
+    border-style: solid;
+    border-width: ${({ variant }) =>
+      variant === CheckboxVariant.Tertiary ? '2px' : '1px'};
+    content: '';
+    cursor: pointer;
+    display: inline-block;
+    height: var(--size);
+    width: var(--size);
+  }
+
+  & + label > svg {
+    --padding: ${({ checkboxSize, variant }) =>
+      checkboxSize === CheckboxSize.Large ||
+      variant === CheckboxVariant.Tertiary
+        ? '2px'
+        : '1px'};
+    --size: ${({ checkboxSize }) =>
+      checkboxSize === CheckboxSize.Large ? '16px' : '12px'};
+    height: var(--size);
+    left: var(--padding);
+    position: absolute;
+    stroke: ${({ theme }) => theme.grayScale.gray0};
+    top: var(--padding);
+    width: var(--size);
+  }
+`;
+
+export function Checkbox({
+  checked,
+  onChange,
+  onCheckedChange,
+  indeterminate,
+  variant = CheckboxVariant.Primary,
+  size = CheckboxSize.Small,
+  shape = CheckboxShape.Squared,
+}: OwnProps) {
+  const [isInternalChecked, setIsInternalChecked] =
+    React.useState<boolean>(false);
+
+  React.useEffect(() => {
+    setIsInternalChecked(checked);
+  }, [checked]);
+
+  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
+    onChange?.(event);
+    onCheckedChange?.(event.target.checked);
+    setIsInternalChecked(event.target.checked);
+  }
+
+  return (
+    <StyledInputContainer>
+      <StyledInput
+        autoComplete="off"
+        type="checkbox"
+        name="styled-checkbox"
+        data-testid="input-checkbox"
+        checked={isInternalChecked}
+        indeterminate={indeterminate}
+        variant={variant}
+        checkboxSize={size}
+        shape={shape}
+        isChecked={isInternalChecked}
+        onChange={handleChange}
+      />
+      <label htmlFor="checkbox">
+        {indeterminate ? (
+          <IconMinus />
+        ) : isInternalChecked ? (
+          <IconCheck />
+        ) : (
+          <></>
+        )}
+      </label>
+    </StyledInputContainer>
+  );
+}

front/src/modules/ui/input/components/DateInputDisplay.tsx

@@ -0,0 +1,9 @@
+import { formatToHumanReadableDate } from '~/utils';
+
+type OwnProps = {
+  value: Date | string | null;
+};
+
+export function DateInputDisplay({ value }: OwnProps) {
+  return <div>{value && formatToHumanReadableDate(value)}</div>;
+}

front/src/modules/ui/input/components/DateInputEdit.tsx

@@ -0,0 +1,64 @@
+import { forwardRef } from 'react';
+import styled from '@emotion/styled';
+
+import { formatToHumanReadableDate } from '~/utils';
+
+import DatePicker from './DatePicker';
+
+type StyledCalendarContainerProps = {
+  editModeHorizontalAlign?: 'left' | 'right';
+};
+
+const StyledInputContainer = styled.div`
+  color: ${({ theme }) => theme.font.color.primary};
+  display: flex;
+
+  padding: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledCalendarContainer = styled.div<StyledCalendarContainerProps>`
+  background: ${({ theme }) => theme.background.secondary};
+  border: 1px solid ${({ theme }) => theme.border.color.light};
+  border-radius: ${({ theme }) => theme.border.radius.md};
+  box-shadow: ${({ theme }) => theme.boxShadow.strong};
+
+  margin-top: 1px;
+
+  position: absolute;
+
+  z-index: 1;
+`;
+
+type DivProps = React.HTMLProps<HTMLDivElement>;
+
+const DateDisplay = forwardRef<HTMLDivElement, DivProps>(
+  ({ value, onClick }, ref) => (
+    <StyledInputContainer onClick={onClick} ref={ref}>
+      {value && formatToHumanReadableDate(new Date(value as string))}
+    </StyledInputContainer>
+  ),
+);
+
+type DatePickerContainerProps = {
+  children: React.ReactNode;
+};
+
+const DatePickerContainer = ({ children }: DatePickerContainerProps) => {
+  return <StyledCalendarContainer>{children}</StyledCalendarContainer>;
+};
+
+export type DateInputEditProps = {
+  value: Date | null | undefined;
+  onChange: (newDate: Date) => void;
+};
+
+export function DateInputEdit({ onChange, value }: DateInputEditProps) {
+  return (
+    <DatePicker
+      date={value ?? new Date()}
+      onChangeHandler={onChange}
+      customInput={<DateDisplay />}
+      customCalendarContainer={DatePickerContainer}
+    />
+  );
+}

front/src/modules/ui/input/components/DatePicker.tsx

@@ -0,0 +1,269 @@
+import React, { forwardRef, ReactElement, useState } from 'react';
+import ReactDatePicker, { CalendarContainerProps } from 'react-datepicker';
+import styled from '@emotion/styled';
+
+import { overlayBackground } from '@/ui/theme/constants/effects';
+
+import 'react-datepicker/dist/react-datepicker.css';
+
+export type DatePickerProps = {
+  date: Date;
+  onChangeHandler: (date: Date) => void;
+  customInput?: ReactElement;
+  customCalendarContainer?(props: CalendarContainerProps): React.ReactNode;
+};
+
+const StyledContainer = styled.div`
+  & .react-datepicker {
+    border-color: ${({ theme }) => theme.border.color.light};
+    background: transparent;
+    font-family: 'Inter';
+    font-size: ${({ theme }) => theme.font.size.md};
+    border: none;
+    display: block;
+    font-weight: ${({ theme }) => theme.font.weight.regular};
+  }
+
+  & .react-datepicker-popper {
+    position: relative !important;
+    inset: auto !important;
+    transform: none !important;
+    padding: 0 !important;
+  }
+
+  & .react-datepicker__triangle::after {
+    display: none;
+  }
+
+  & .react-datepicker__triangle::before {
+    display: none;
+  }
+
+  // Header
+
+  & .react-datepicker__header {
+    background: transparent;
+    border: none;
+  }
+
+  & .react-datepicker__header__dropdown {
+    display: flex;
+    color: ${({ theme }) => theme.font.color.primary};
+    margin-left: ${({ theme }) => theme.spacing(1)};
+    margin-bottom: ${({ theme }) => theme.spacing(1)};
+  }
+
+  & .react-datepicker__month-dropdown-container,
+  & .react-datepicker__year-dropdown-container {
+    text-align: left;
+    border-radius: ${({ theme }) => theme.border.radius.sm};
+    margin-left: ${({ theme }) => theme.spacing(1)};
+    margin-right: 0;
+    padding: ${({ theme }) => theme.spacing(2)};
+    padding-right: ${({ theme }) => theme.spacing(4)};
+    background-color: ${({ theme }) => theme.background.tertiary};
+  }
+
+  & .react-datepicker__month-read-view--down-arrow,
+  & .react-datepicker__year-read-view--down-arrow {
+    height: 5px;
+    width: 5px;
+    border-width: 1px 1px 0 0;
+    border-color: ${({ theme }) => theme.border.color.light};
+    top: 3px;
+    right: -6px;
+  }
+
+  & .react-datepicker__year-read-view,
+  & .react-datepicker__month-read-view {
+    padding-right: ${({ theme }) => theme.spacing(2)};
+  }
+
+  & .react-datepicker__month-dropdown-container {
+    width: 80px;
+  }
+
+  & .react-datepicker__year-dropdown-container {
+    width: 50px;
+  }
+
+  & .react-datepicker__month-dropdown,
+  & .react-datepicker__year-dropdown {
+    border: ${({ theme }) => theme.border.color.light};
+    ${overlayBackground}
+    overflow-y: scroll;
+    top: ${({ theme }) => theme.spacing(2)};
+  }
+  & .react-datepicker__month-dropdown {
+    left: ${({ theme }) => theme.spacing(2)};
+    width: 160px;
+    height: 260px;
+  }
+
+  & .react-datepicker__year-dropdown {
+    left: calc(${({ theme }) => theme.spacing(9)} + 80px);
+    width: 100px;
+    height: 260px;
+  }
+
+  & .react-datepicker__navigation--years {
+    display: none;
+  }
+
+  & .react-datepicker__month-option--selected,
+  & .react-datepicker__year-option--selected {
+    display: none;
+  }
+
+  & .react-datepicker__year-option,
+  & .react-datepicker__month-option {
+    text-align: left;
+    padding: ${({ theme }) => theme.spacing(2)}
+      calc(${({ theme }) => theme.spacing(2)} - 2px);
+    width: calc(100% - ${({ theme }) => theme.spacing(4)});
+    border-radius: ${({ theme }) => theme.border.radius.xs};
+    color: ${({ theme }) => theme.font.color.secondary};
+    cursor: pointer;
+    margin: 2px;
+
+    &:hover {
+      background: ${({ theme }) => theme.background.transparent.light};
+    }
+  }
+
+  & .react-datepicker__year-option {
+    &:first-of-type,
+    &:last-of-type {
+      display: none;
+    }
+  }
+
+  & .react-datepicker__current-month {
+    display: none;
+  }
+
+  & .react-datepicker__day-name {
+    color: ${({ theme }) => theme.font.color.secondary};
+    width: 34px;
+    height: 40px;
+    line-height: 40px;
+  }
+
+  & .react-datepicker__month-container {
+    float: none;
+  }
+
+  // Days
+
+  & .react-datepicker__month {
+    margin-top: 0;
+  }
+
+  & .react-datepicker__day {
+    width: 34px;
+    height: 34px;
+    line-height: 34px;
+  }
+
+  & .react-datepicker__navigation--previous,
+  & .react-datepicker__navigation--next {
+    height: 34px;
+    border-radius: ${({ theme }) => theme.border.radius.sm};
+    padding-top: 6px;
+    &:hover {
+      background: ${({ theme }) => theme.background.transparent.light};
+    }
+  }
+  & .react-datepicker__navigation--previous {
+    right: 38px;
+    top: 8px;
+    left: auto;
+
+    & > span {
+      margin-left: -6px;
+    }
+  }
+
+  & .react-datepicker__navigation--next {
+    right: 6px;
+    top: 8px;
+
+    & > span {
+      margin-left: 6px;
+    }
+  }
+
+  & .react-datepicker__navigation-icon::before {
+    height: 7px;
+    width: 7px;
+    border-width: 1px 1px 0 0;
+    border-color: ${({ theme }) => theme.font.color.tertiary};
+  }
+
+  & .react-datepicker__day--keyboard-selected {
+    background-color: inherit;
+  }
+
+  & .react-datepicker__day,
+  .react-datepicker__time-name {
+    color: ${({ theme }) => theme.font.color.primary};
+  }
+
+  & .react-datepicker__day--selected {
+    background-color: ${({ theme }) => theme.color.blue};
+    color: ${({ theme }) => theme.font.color.inverted};
+  }
+
+  & .react-datepicker__day--outside-month {
+    color: ${({ theme }) => theme.font.color.tertiary};
+  }
+
+  & .react-datepicker__day:hover {
+    color: ${({ theme }) => theme.font.color.tertiary};
+  }
+`;
+
+function DatePicker({
+  date,
+  onChangeHandler,
+  customInput,
+  customCalendarContainer,
+}: DatePickerProps) {
+  const [startDate, setStartDate] = useState(date);
+
+  type DivProps = React.HTMLProps<HTMLDivElement>;
+
+  const DefaultDateDisplay = forwardRef<HTMLDivElement, DivProps>(
+    ({ value, onClick }, ref) => (
+      <div onClick={onClick} ref={ref}>
+        {value &&
+          new Intl.DateTimeFormat(undefined, {
+            month: 'short',
+            day: 'numeric',
+            year: 'numeric',
+          }).format(new Date(value as string))}
+      </div>
+    ),
+  );
+
+  return (
+    <StyledContainer>
+      <ReactDatePicker
+        open={true}
+        selected={startDate}
+        showMonthDropdown
+        showYearDropdown
+        onChange={(date: Date) => {
+          setStartDate(date);
+          onChangeHandler(date);
+        }}
+        customInput={customInput ? customInput : <DefaultDateDisplay />}
+        calendarContainer={
+          customCalendarContainer ? customCalendarContainer : undefined
+        }
+      />
+    </StyledContainer>
+  );
+}
+
+export default DatePicker;

front/src/modules/ui/input/components/DoubleTextInputEdit.tsx

@@ -0,0 +1,72 @@
+import { ChangeEvent } from 'react';
+import styled from '@emotion/styled';
+
+import { StyledInput } from '@/ui/input/components/TextInput';
+import { ComputeNodeDimensionsEffect } from '@/ui/utilities/dimensions/components/ComputeNodeDimensionsEffect';
+
+export type DoubleTextInputEditProps = {
+  firstValue: string;
+  secondValue: string;
+  firstValuePlaceholder: string;
+  secondValuePlaceholder: string;
+  onChange: (firstValue: string, secondValue: string) => void;
+};
+
+const StyledDoubleTextContainer = styled.div`
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  text-align: center;
+`;
+
+const StyledTextInput = styled(StyledInput)`
+  margin: 0 ${({ theme }) => theme.spacing(0.5)};
+  padding: 0;
+  width: ${({ width }) => (width ? `${width}px` : 'auto')};
+
+  &:hover:not(:focus) {
+    background-color: ${({ theme }) => theme.background.transparent.light};
+    border-radius: ${({ theme }) => theme.border.radius.sm};
+    cursor: pointer;
+    padding: 0 ${({ theme }) => theme.spacing(1)};
+  }
+`;
+
+export function DoubleTextInputEdit({
+  firstValue,
+  secondValue,
+  firstValuePlaceholder,
+  secondValuePlaceholder,
+  onChange,
+}: DoubleTextInputEditProps) {
+  return (
+    <StyledDoubleTextContainer>
+      <ComputeNodeDimensionsEffect node={firstValue || firstValuePlaceholder}>
+        {(nodeDimensions) => (
+          <StyledTextInput
+            width={nodeDimensions?.width}
+            autoFocus
+            placeholder={firstValuePlaceholder}
+            value={firstValue}
+            onChange={(event: ChangeEvent<HTMLInputElement>) => {
+              onChange(event.target.value, secondValue);
+            }}
+          />
+        )}
+      </ComputeNodeDimensionsEffect>
+      <ComputeNodeDimensionsEffect node={secondValue || secondValuePlaceholder}>
+        {(nodeDimensions) => (
+          <StyledTextInput
+            width={nodeDimensions?.width}
+            autoComplete="off"
+            placeholder={secondValuePlaceholder}
+            value={secondValue}
+            onChange={(event: ChangeEvent<HTMLInputElement>) => {
+              onChange(firstValue, event.target.value);
+            }}
+          />
+        )}
+      </ComputeNodeDimensionsEffect>
+    </StyledDoubleTextContainer>
+  );
+}

front/src/modules/ui/input/components/EmailInputDisplay.tsx

@@ -0,0 +1,27 @@
+import { MouseEvent } from 'react';
+
+import { ContactLink } from '@/ui/link/components/ContactLink';
+
+function validateEmail(email: string) {
+  const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  return emailPattern.test(email.trim());
+}
+
+type OwnProps = {
+  value: string | null;
+};
+
+export function EmailInputDisplay({ value }: OwnProps) {
+  return value && validateEmail(value) ? (
+    <ContactLink
+      href={`mailto:${value}`}
+      onClick={(event: MouseEvent<HTMLElement>) => {
+        event.stopPropagation();
+      }}
+    >
+      {value}
+    </ContactLink>
+  ) : (
+    <ContactLink href="#">{value}</ContactLink>
+  );
+}

front/src/modules/ui/input/components/PhoneInput.tsx

@@ -0,0 +1,122 @@
+import { useEffect, useRef, useState } from 'react';
+import ReactPhoneNumberInput from 'react-phone-number-input';
+import styled from '@emotion/styled';
+
+import { useRegisterInputEvents } from '../hooks/useRegisterInputEvents';
+
+import 'react-phone-number-input/style.css';
+
+const StyledContainer = styled.div`
+  align-items: center;
+
+  border: none;
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+
+  display: flex;
+  justify-content: center;
+`;
+
+const StyledCustomPhoneInput = styled(ReactPhoneNumberInput)`
+  --PhoneInput-color--focus: transparent;
+  --PhoneInputCountryFlag-borderColor--focus: transparent;
+  --PhoneInputCountrySelect-marginRight: ${({ theme }) => theme.spacing(2)};
+  --PhoneInputCountrySelectArrow-color: ${({ theme }) =>
+    theme.font.color.tertiary};
+  --PhoneInputCountrySelectArrow-opacity: 1;
+  font-family: ${({ theme }) => theme.font.family};
+  height: 32px;
+
+  .PhoneInputCountry {
+    --PhoneInputCountryFlag-height: 12px;
+    --PhoneInputCountryFlag-width: 16px;
+    border-right: 1px solid ${({ theme }) => theme.border.color.light};
+    display: flex;
+    justify-content: center;
+    margin-left: ${({ theme }) => theme.spacing(2)};
+  }
+
+  .PhoneInputCountryIcon {
+    background: none;
+    border-radius: ${({ theme }) => theme.border.radius.xs};
+    box-shadow: none;
+    margin-right: 1px;
+    overflow: hidden;
+    &:focus {
+      box-shadow: none !important;
+    }
+  }
+
+  .PhoneInputCountrySelectArrow {
+    margin-right: ${({ theme }) => theme.spacing(2)};
+  }
+
+  .PhoneInputInput {
+    background: ${({ theme }) => theme.background.transparent.secondary};
+    border: none;
+    color: ${({ theme }) => theme.font.color.primary};
+
+    &::placeholder,
+    &::-webkit-input-placeholder {
+      color: ${({ theme }) => theme.font.color.light};
+      font-family: ${({ theme }) => theme.font.family};
+      font-weight: ${({ theme }) => theme.font.weight.medium};
+    }
+
+    :focus {
+      outline: none;
+    }
+  }
+`;
+
+export type PhoneCellEditProps = {
+  placeholder?: string;
+  autoFocus?: boolean;
+  value: string;
+  onEnter: (newText: string) => void;
+  onEscape: (newText: string) => void;
+  onTab?: (newText: string) => void;
+  onShiftTab?: (newText: string) => void;
+  onClickOutside: (event: MouseEvent | TouchEvent, inputValue: string) => void;
+  hotkeyScope: string;
+};
+
+export function PhoneInput({
+  autoFocus,
+  value,
+  onEnter,
+  onEscape,
+  onTab,
+  onShiftTab,
+  onClickOutside,
+  hotkeyScope,
+}: PhoneCellEditProps) {
+  const [internalValue, setInternalValue] = useState<string | undefined>(value);
+
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    setInternalValue(value);
+  }, [value]);
+
+  useRegisterInputEvents({
+    inputRef: wrapperRef,
+    inputValue: internalValue ?? '',
+    onEnter,
+    onEscape,
+    onClickOutside,
+    onTab,
+    onShiftTab,
+    hotkeyScope,
+  });
+
+  return (
+    <StyledContainer ref={wrapperRef}>
+      <StyledCustomPhoneInput
+        autoFocus={autoFocus}
+        placeholder="Phone number"
+        value={value}
+        onChange={setInternalValue}
+      />
+    </StyledContainer>
+  );
+}

front/src/modules/ui/input/components/Radio.tsx

@@ -0,0 +1,157 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+import { motion } from 'framer-motion';
+
+import { rgba } from '@/ui/theme/constants/colors';
+
+import { RadioGroup } from './RadioGroup';
+
+export enum RadioSize {
+  Large = 'large',
+  Small = 'small',
+}
+
+export enum LabelPosition {
+  Left = 'left',
+  Right = 'right',
+}
+
+const StyledContainer = styled.div<{ labelPosition?: LabelPosition }>`
+  ${({ labelPosition }) =>
+    labelPosition === LabelPosition.Left
+      ? `
+    flex-direction: row-reverse;
+  `
+      : `
+    flex-direction: row;
+  `};
+  align-items: center;
+  display: flex;
+`;
+
+type RadioInputProps = {
+  'radio-size'?: RadioSize;
+};
+
+const StyledRadioInput = styled(motion.input)<RadioInputProps>`
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: transparent;
+  border: 1px solid ${({ theme }) => theme.font.color.secondary};
+  border-radius: 50%;
+  :hover {
+    background-color: ${({ theme, checked }) => {
+      if (!checked) {
+        return theme.background.tertiary;
+      }
+    }};
+    outline: 4px solid
+      ${({ theme, checked }) => {
+        if (!checked) {
+          return theme.background.tertiary;
+        }
+        return rgba(theme.color.blue, 0.12);
+      }};
+  }
+  &:checked {
+    background-color: ${({ theme }) => theme.color.blue};
+    border: none;
+    &::after {
+      background-color: ${({ theme }) => theme.grayScale.gray0};
+      border-radius: 50%;
+      content: '';
+      height: ${({ 'radio-size': radioSize }) =>
+        radioSize === RadioSize.Large ? '8px' : '6px'};
+      left: 50%;
+      position: absolute;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      width: ${({ 'radio-size': radioSize }) =>
+        radioSize === RadioSize.Large ? '8px' : '6px'};
+    }
+  }
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.12;
+  }
+  height: ${({ 'radio-size': radioSize }) =>
+    radioSize === RadioSize.Large ? '18px' : '16px'};
+  position: relative;
+  width: ${({ 'radio-size': radioSize }) =>
+    radioSize === RadioSize.Large ? '18px' : '16px'};
+`;
+
+type LabelProps = {
+  disabled?: boolean;
+  labelPosition?: LabelPosition;
+};
+
+const StyledLabel = styled.label<LabelProps>`
+  color: ${({ theme }) => theme.font.color.primary};
+  cursor: pointer;
+  font-size: ${({ theme }) => theme.font.size.sm};
+  font-weight: ${({ theme }) => theme.font.weight.regular};
+  margin-left: ${({ theme, labelPosition }) =>
+    labelPosition === LabelPosition.Right ? theme.spacing(2) : '0px'};
+  margin-right: ${({ theme, labelPosition }) =>
+    labelPosition === LabelPosition.Left ? theme.spacing(2) : '0px'};
+  opacity: ${({ disabled }) => (disabled ? 0.32 : 1)};
+`;
+
+export type RadioProps = {
+  style?: React.CSSProperties;
+  className?: string;
+  checked?: boolean;
+  value?: string;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onCheckedChange?: (checked: boolean) => void;
+  size?: RadioSize;
+  disabled?: boolean;
+  labelPosition?: LabelPosition;
+};
+
+export function Radio({
+  checked,
+  value,
+  onChange,
+  onCheckedChange,
+  size = RadioSize.Small,
+  labelPosition = LabelPosition.Right,
+  disabled = false,
+  ...restProps
+}: RadioProps) {
+  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
+    onChange?.(event);
+    onCheckedChange?.(event.target.checked);
+  }
+
+  return (
+    <StyledContainer {...restProps} labelPosition={labelPosition}>
+      <StyledRadioInput
+        type="radio"
+        id="input-radio"
+        name="input-radio"
+        data-testid="input-radio"
+        checked={checked}
+        value={value}
+        radio-size={size}
+        disabled={disabled}
+        onChange={handleChange}
+        initial={{ scale: 0.95 }}
+        animate={{ scale: checked ? 1.05 : 0.95 }}
+        transition={{ type: 'spring', stiffness: 300, damping: 20 }}
+      />
+      {value && (
+        <StyledLabel
+          htmlFor="input-radio"
+          labelPosition={labelPosition}
+          disabled={disabled}
+        >
+          {value}
+        </StyledLabel>
+      )}
+    </StyledContainer>
+  );
+}
+
+Radio.Group = RadioGroup;

front/src/modules/ui/input/components/RadioGroup.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { useTheme } from '@emotion/react';
+
+import { RadioProps } from './Radio';
+
+type RadioGroupProps = React.PropsWithChildren & {
+  value?: string;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onValueChange?: (value: string) => void;
+};
+
+export function RadioGroup({
+  value,
+  onChange,
+  onValueChange,
+  children,
+}: RadioGroupProps) {
+  const theme = useTheme();
+
+  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
+    onChange?.(event);
+    onValueChange?.(event.target.value);
+  }
+
+  return (
+    <>
+      {React.Children.map(children, (child) => {
+        if (React.isValidElement<RadioProps>(child)) {
+          return React.cloneElement(child, {
+            style: { marginBottom: theme.spacing(2) },
+            checked: child.props.value === value,
+            onChange: handleChange,
+          });
+        }
+        return child;
+      })}
+    </>
+  );
+}

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

@@ -0,0 +1,70 @@
+import { ChangeEvent, useEffect, useRef, useState } from 'react';
+import styled from '@emotion/styled';
+
+import { textInputStyle } from '@/ui/theme/constants/effects';
+
+import { useRegisterInputEvents } from '../hooks/useRegisterInputEvents';
+
+export const StyledInput = styled.input`
+  margin: 0;
+  width: 100%;
+  ${textInputStyle}
+`;
+
+type OwnProps = {
+  placeholder?: string;
+  autoFocus?: boolean;
+  value: string;
+  onEnter: (newText: string) => void;
+  onEscape: (newText: string) => void;
+  onTab?: (newText: string) => void;
+  onShiftTab?: (newText: string) => void;
+  onClickOutside: (event: MouseEvent | TouchEvent, inputValue: string) => void;
+  hotkeyScope: string;
+};
+
+export function TextInput({
+  placeholder,
+  autoFocus,
+  value,
+  hotkeyScope,
+  onEnter,
+  onEscape,
+  onTab,
+  onShiftTab,
+  onClickOutside,
+}: OwnProps) {
+  const [internalText, setInternalText] = useState(value);
+
+  const wrapperRef = useRef(null);
+
+  function handleChange(event: ChangeEvent<HTMLInputElement>) {
+    setInternalText(event.target.value);
+  }
+
+  useEffect(() => {
+    setInternalText(value);
+  }, [value]);
+
+  useRegisterInputEvents({
+    inputRef: wrapperRef,
+    inputValue: internalText,
+    onEnter,
+    onEscape,
+    onClickOutside,
+    onTab,
+    onShiftTab,
+    hotkeyScope,
+  });
+
+  return (
+    <StyledInput
+      autoComplete="off"
+      ref={wrapperRef}
+      placeholder={placeholder}
+      onChange={handleChange}
+      autoFocus={autoFocus}
+      value={internalText}
+    />
+  );
+}

front/src/modules/ui/input/components/Toggle.tsx

@@ -0,0 +1,63 @@
+import React, { useEffect, useState } from 'react';
+import styled from '@emotion/styled';
+import { motion } from 'framer-motion';
+
+type ContainerProps = {
+  isOn: boolean;
+  color?: string;
+};
+
+const StyledContainer = styled.div<ContainerProps>`
+  align-items: center;
+  background-color: ${({ theme, isOn, color }) =>
+    isOn ? color ?? theme.color.blue : theme.background.quaternary};
+  border-radius: 10px;
+  cursor: pointer;
+  display: flex;
+  height: 20px;
+  transition: background-color 0.3s ease;
+  width: 32px;
+`;
+
+const StyledCircle = styled(motion.div)`
+  background-color: #fff;
+  border-radius: 50%;
+  height: 16px;
+  width: 16px;
+`;
+
+const circleVariants = {
+  on: { x: 14 },
+  off: { x: 2 },
+};
+
+export type ToggleProps = {
+  value?: boolean;
+  onChange?: (value: boolean) => void;
+  color?: string;
+};
+
+export function Toggle({ value, onChange, color }: ToggleProps) {
+  const [isOn, setIsOn] = useState(value ?? false);
+
+  function handleChange() {
+    setIsOn(!isOn);
+
+    if (onChange) {
+      onChange(!isOn);
+    }
+  }
+
+  useEffect(() => {
+    if (value !== isOn) {
+      setIsOn(value ?? false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]);
+
+  return (
+    <StyledContainer onClick={handleChange} isOn={isOn} color={color}>
+      <StyledCircle animate={isOn ? 'on' : 'off'} variants={circleVariants} />
+    </StyledContainer>
+  );
+}

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

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+
+import {
+  AutosizeTextInput,
+  AutosizeTextInputVariant,
+} from '../AutosizeTextInput';
+
+const meta: Meta<typeof AutosizeTextInput> = {
+  title: 'UI/Input/AutosizeTextInput',
+  component: AutosizeTextInput,
+  decorators: [ComponentDecorator],
+};
+
+export default meta;
+type Story = StoryObj<typeof AutosizeTextInput>;
+
+export const Default: Story = {};
+
+export const ButtonVariant: Story = {
+  args: { variant: AutosizeTextInputVariant.Button },
+};
+
+export const Catalog: Story = {
+  parameters: {
+    catalog: {
+      dimensions: [
+        {
+          name: 'variants',
+          values: Object.values(AutosizeTextInputVariant),
+          props: (variant: AutosizeTextInputVariant) => ({ variant }),
+          labels: (variant: AutosizeTextInputVariant) =>
+            `variant -> ${variant}`,
+        },
+        {
+          name: 'minRows',
+          values: [1, 4],
+          props: (minRows: number) => ({ minRows }),
+          labels: (minRows: number) => `minRows -> ${minRows}`,
+        },
+      ],
+    },
+  },
+  decorators: [CatalogDecorator],
+};

front/src/modules/ui/input/components/__stories__/Checkbox.stories.tsx

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+
+import {
+  Checkbox,
+  CheckboxShape,
+  CheckboxSize,
+  CheckboxVariant,
+} from '../Checkbox';
+
+const meta: Meta<typeof Checkbox> = {
+  title: 'UI/Input/Checkbox',
+  component: Checkbox,
+};
+
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
+
+export const Default: Story = {
+  args: {
+    checked: false,
+    indeterminate: false,
+    variant: CheckboxVariant.Primary,
+    size: CheckboxSize.Small,
+    shape: CheckboxShape.Squared,
+  },
+  decorators: [ComponentDecorator],
+};
+
+export const Catalog: Story = {
+  args: {},
+  argTypes: {
+    variant: { control: false },
+    size: { control: false },
+    indeterminate: { control: false },
+    checked: { control: false },
+    shape: { control: false },
+  },
+  parameters: {
+    catalog: {
+      dimensions: [
+        {
+          name: 'state',
+          values: ['unchecked', 'checked', 'indeterminate'],
+          props: (state: string) => {
+            if (state === 'checked') {
+              return { checked: true };
+            }
+
+            if (state === 'indeterminate') {
+              return { indeterminate: true };
+            }
+          },
+        },
+        {
+          name: 'shape',
+          values: Object.values(CheckboxShape),
+          props: (shape: CheckboxShape) => ({ shape }),
+        },
+        {
+          name: 'variant',
+          values: Object.values(CheckboxVariant),
+          props: (variant: CheckboxVariant) => ({ variant }),
+        },
+        {
+          name: 'size',
+          values: Object.values(CheckboxSize),
+          props: (size: CheckboxSize) => ({ size }),
+        },
+      ],
+    },
+  },
+  decorators: [CatalogDecorator],
+};

front/src/modules/ui/input/components/__stories__/DatePicker.stories.tsx

@@ -0,0 +1,50 @@
+import { expect } from '@storybook/jest';
+import type { Meta, StoryObj } from '@storybook/react';
+import { userEvent, within } from '@storybook/testing-library';
+
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+
+import DatePicker from '../DatePicker';
+
+const meta: Meta<typeof DatePicker> = {
+  title: 'UI/Input/DatePicker',
+  component: DatePicker,
+  decorators: [ComponentDecorator],
+  argTypes: {
+    customInput: { control: false },
+    date: { control: 'date' },
+  },
+  args: { date: new Date('January 1, 2023 00:00:00') },
+};
+
+export default meta;
+type Story = StoryObj<typeof DatePicker>;
+
+export const Default: Story = {};
+
+export const WithOpenMonthSelect: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const monthSelect = canvas.getByText('January');
+
+    await userEvent.click(monthSelect);
+
+    expect(canvas.getAllByText('January')).toHaveLength(2);
+    [
+      'February',
+      'March',
+      'April',
+      'May',
+      'June',
+      'July',
+      'August',
+      'September',
+      'October',
+      'November',
+      'December',
+    ].forEach((monthLabel) =>
+      expect(canvas.getByText(monthLabel)).toBeInTheDocument(),
+    );
+  },
+};

front/src/modules/ui/input/components/__stories__/EmailInputDisplay.stories.tsx

@@ -0,0 +1,20 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
+
+import { EmailInputDisplay } from '../EmailInputDisplay';
+
+const meta: Meta = {
+  title: 'UI/Input/EmailInputDisplay',
+  component: EmailInputDisplay,
+  decorators: [ComponentWithRouterDecorator],
+  args: {
+    value: 'mustajab.ikram@google.com',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof EmailInputDisplay>;
+
+export const Default: Story = {};

front/src/modules/ui/input/components/__stories__/Radio.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+
+import { LabelPosition, Radio, RadioSize } from '../Radio';
+
+const meta: Meta<typeof Radio> = {
+  title: 'UI/Input/Radio',
+  component: Radio,
+};
+
+export default meta;
+type Story = StoryObj<typeof Radio>;
+
+export const Default: Story = {
+  args: {
+    value: 'Radio',
+    checked: false,
+    disabled: false,
+    size: RadioSize.Small,
+  },
+  decorators: [ComponentDecorator],
+};
+
+export const Catalog: Story = {
+  args: {
+    value: 'Radio',
+  },
+  argTypes: {
+    value: { control: false },
+    size: { control: false },
+  },
+  parameters: {
+    catalog: {
+      dimensions: [
+        {
+          name: 'checked',
+          values: [false, true],
+          props: (checked: boolean) => ({ checked }),
+        },
+        {
+          name: 'disabled',
+          values: [false, true],
+          props: (disabled: boolean) => ({ disabled }),
+        },
+        {
+          name: 'size',
+          values: Object.values(RadioSize),
+          props: (size: RadioSize) => ({ size }),
+        },
+        {
+          name: 'labelPosition',
+          values: Object.values(LabelPosition),
+          props: (labelPosition: string) => ({
+            labelPosition,
+          }),
+        },
+      ],
+    },
+  },
+  decorators: [CatalogDecorator],
+};