feat(validate_image): update form for validate image project & tutorial creation

- add io-ts for validation (with typescript types)
- fix conditional issue with street project

Author: tnagorra

manager-dashboard/app/Base/configs/projectTypes.ts

@@ -5,6 +5,7 @@ import {
     PROJECT_TYPE_CHANGE_DETECTION,
     PROJECT_TYPE_STREET,
     PROJECT_TYPE_COMPLETENESS,
+    PROJECT_TYPE_VALIDATE_IMAGE,
 } from '#utils/common';
 
 const PROJECT_CONFIG_NAME = process.env.REACT_APP_PROJECT_CONFIG_NAME as string;
@@ -15,6 +16,7 @@ const mapswipeProjectTypeOptions: {
 }[] = [
     { value: PROJECT_TYPE_BUILD_AREA, label: 'Find' },
     { value: PROJECT_TYPE_FOOTPRINT, label: 'Validate' },
+    { value: PROJECT_TYPE_VALIDATE_IMAGE, label: 'Validate Image' },
     { value: PROJECT_TYPE_CHANGE_DETECTION, label: 'Compare' },
     { value: PROJECT_TYPE_STREET, label: 'Street' },
     { value: PROJECT_TYPE_COMPLETENESS, label: 'Completeness' },

manager-dashboard/app/Base/styles.css

@@ -105,6 +105,7 @@ p {
     --height-mobile-preview-builarea-content: 30rem;
     --height-mobile-preview-footprint-content: 22rem;
     --height-mobile-preview-change-detection-content: 14rem;
+    --height-mobile-preview-validate-image-content: 22rem;
 
     --radius-popup-border: 0.25rem;
     --radius-scrollbar-border: 0.25rem;

manager-dashboard/app/components/Calendar/CalendarDate/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { _cs } from '@togglecorp/fujs';
 
 import RawButton, { Props as RawButtonProps } from '../../RawButton';
-import { ymdToDateString, typedMemo } from '../../../utils/common.tsx';
+import { ymdToDateString, typedMemo } from '../../../utils/common';
 
 import styles from './styles.css';
 

manager-dashboard/app/components/Calendar/index.tsx

@@ -15,7 +15,7 @@ import Button from '../Button';
 import NumberInput from '../NumberInput';
 import SelectInput from '../SelectInput';
 import useInputState from '../../hooks/useInputState';
-import { typedMemo } from '../../utils/common.tsx';
+import { typedMemo } from '../../utils/common';
 
 import CalendarDate, { Props as CalendarDateProps } from './CalendarDate';
 

manager-dashboard/app/components/DateRangeInput/index.tsx

@@ -19,7 +19,7 @@ import Button from '../Button';
 import Popup from '../Popup';
 import Calendar, { Props as CalendarProps } from '../Calendar';
 import CalendarDate, { Props as CalendarDateProps } from '../Calendar/CalendarDate';
-import { ymdToDateString, dateStringToDate } from '../../utils/common.tsx';
+import { ymdToDateString, dateStringToDate } from '../../utils/common';
 
 import {
     predefinedDateRangeOptions,

manager-dashboard/app/components/InputSection/styles.css

@@ -24,7 +24,7 @@
         display: flex;
         flex-direction: column;
         border-radius: var(--radius-card-border);
-        gap: var(--spacing-extra-large);
+        gap: var(--spacing-large);
         background-color: var(--color-foreground);
         padding: var(--spacing-large);
         min-height: 14rem;

manager-dashboard/app/utils/common.tsx

@@ -66,8 +66,9 @@ export const PROJECT_TYPE_FOOTPRINT = 2;
 export const PROJECT_TYPE_CHANGE_DETECTION = 3;
 export const PROJECT_TYPE_COMPLETENESS = 4;
 export const PROJECT_TYPE_STREET = 7;
+export const PROJECT_TYPE_VALIDATE_IMAGE = 10;
 
-export type ProjectType = 1 | 2 | 3 | 4 | 7;
+export type ProjectType = 1 | 2 | 3 | 4 | 7 | 10;
 
 export const projectTypeLabelMap: {
     [key in ProjectType]: string
@@ -77,6 +78,7 @@ export const projectTypeLabelMap: {
     [PROJECT_TYPE_CHANGE_DETECTION]: 'Compare',
     [PROJECT_TYPE_COMPLETENESS]: 'Completeness',
     [PROJECT_TYPE_STREET]: 'Street',
+    [PROJECT_TYPE_VALIDATE_IMAGE]: 'Validate Image',
 };
 
 export type IconKey = 'add-outline'

manager-dashboard/app/views/NewProject/ImageInput/index.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+
+import {
+    SetValueArg,
+    Error,
+    useFormObject,
+    getErrorObject,
+} from '@togglecorp/toggle-form';
+import TextInput from '#components/TextInput';
+
+import {
+    ImageType,
+} from '../utils';
+
+import styles from './styles.css';
+
+const defaultImageValue: ImageType = {
+    sourceIdentifier: '<unique-identifier>',
+};
+
+interface Props {
+    value: ImageType;
+    onChange: (value: SetValueArg<ImageType>, index: number) => void | undefined;
+    index: number;
+    error: Error<ImageType> | undefined;
+    disabled?: boolean;
+    readOnly?: boolean;
+}
+
+export default function ImageInput(props: Props) {
+    const {
+        value,
+        onChange,
+        index,
+        error: riskyError,
+        disabled,
+        readOnly,
+    } = props;
+
+    const onImageChange = useFormObject(index, onChange, defaultImageValue);
+
+    const error = getErrorObject(riskyError);
+
+    return (
+        <div className={styles.imageInput}>
+            <TextInput
+                label="Identifier"
+                value={value?.sourceIdentifier}
+                name={'sourceIdentifier' as const}
+                // onChange={onImageChange}
+                error={error?.sourceIdentifier}
+                disabled={disabled}
+                readOnly
+            />
+            <TextInput
+                label="File name"
+                value={value.fileName}
+                name={'fileName' as const}
+                onChange={onImageChange}
+                error={error?.fileName}
+                disabled={disabled || readOnly}
+            />
+            <TextInput
+                label="URL"
+                value={value?.url}
+                name={'url' as const}
+                onChange={onImageChange}
+                error={error?.url}
+                disabled={disabled || readOnly}
+            />
+        </div>
+    );
+}

manager-dashboard/app/views/NewProject/ImageInput/styles.css

@@ -0,0 +1,5 @@
+.image-input {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-medium);
+}