Uniformize folder structure (#693)

* Uniformize folder structure

* Fix icons

* Fix icons

* Fix tests

* Fix tests

front/src/modules/ui/inplace-input/components/InplaceInputContainer.tsx

@@ -0,0 +1,17 @@
+import styled from '@emotion/styled';
+
+import { overlayBackground } from '@/ui/themes/effects';
+
+export const InplaceInputContainer = 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/inplace-input/components/InplaceInputDate.tsx

@@ -0,0 +1,66 @@
+import { forwardRef } from 'react';
+import styled from '@emotion/styled';
+
+import DatePicker from '@/ui/input/components/DatePicker';
+import { formatToHumanReadableDate } from '~/utils';
+
+import { InplaceInputContainer } from './InplaceInputContainer';
+
+export type StyledCalendarContainerProps = {
+  editModeHorizontalAlign?: 'left' | 'right';
+};
+
+const StyledInputContainer = styled.div`
+  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>;
+
+export 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;
+};
+
+export const DatePickerContainer = ({ children }: DatePickerContainerProps) => {
+  return <StyledCalendarContainer>{children}</StyledCalendarContainer>;
+};
+
+type OwnProps = {
+  value: Date;
+  onChange: (newDate: Date) => void;
+};
+
+export function InplaceInputDate({ onChange, value }: OwnProps) {
+  return (
+    <InplaceInputContainer>
+      <DatePicker
+        date={value}
+        onChangeHandler={onChange}
+        customInput={<DateDisplay />}
+        customCalendarContainer={DatePickerContainer}
+      />
+    </InplaceInputContainer>
+  );
+}

front/src/modules/ui/inplace-input/components/InplaceInputText.tsx

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

front/src/modules/ui/inplace-input/components/InplaceInputTextEditMode.tsx

@@ -0,0 +1,9 @@
+import styled from '@emotion/styled';
+
+import { textInputStyle } from '@/ui/themes/effects';
+
+export const InplaceInputTextEditMode = styled.input`
+  margin: 0;
+  width: 100%;
+  ${textInputStyle}
+`;