chore: add branding page

ui/src/components/BrandUpload/index.tsx

@@ -5,7 +5,7 @@ import { Icon, UploadImg } from '@/components';
 import { uploadAvatar } from '@/services';
 
 interface Props {
-  type: 'logo' | 'avatar';
+  type: 'logo' | 'avatar' | 'mobile_logo' | 'square_icon' | 'favicon';
   value: string;
   onChange: (value: string) => void;
 }

ui/src/components/SchemaForm/index.tsx

@@ -54,7 +54,7 @@ export interface UISchema {
       invalid?: string;
       validator?: (value) => boolean;
       textRender?: () => React.ReactElement;
-      imageType?: 'avatar' | 'logo';
+      imageType?: 'avatar' | 'logo' | 'mobile_logo' | 'square_icon' | 'favicon';
     };
   };
 }

ui/src/i18n/locales/en_US.yaml

@@ -1112,6 +1112,18 @@ ui:
         'no': 'No'
     branding:
       page_title: Branding
+      logo:
+        label: Logo
+        text: The logo image at the top left of your site. Use a wide rectangular image with a height of 56 and an aspect ratio greater than 3:1. If left blank, the site title text will be shown.
+      mobile_logo:
+        label: Mobile Logo (optional)
+        text: The logo used on mobile version of your site. Use a wide rectangular image with a height of 56. If left blank, the image from the “logo” setting will be used.
+      square_icon:
+        label: Square Icon
+        text: Image used as the base for metadata icons. Should ideally be larger than 512x512.
+      favicon:
+        label: Favicon (optional)
+        text: A favicon for your site. To work correctly over a CDN it must be a png. Will be resized to 32x32. If left blank, “square icon” will be used.
   form:
     empty: cannot be empty
     invalid: is invalid

ui/src/pages/Admin/Branding/index.tsx

@@ -1,21 +1,126 @@
 import { FC, memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { BrandUpload } from '@/components';
+import { JSONSchema, SchemaForm, UISchema } from '@/components';
+import { FormDataType } from '@/common/interface';
 
 const Index: FC = () => {
   const { t } = useTranslation('translation', {
     keyPrefix: 'admin.branding',
   });
 
-  const [img, setImg] = useState(
-    'https://image-static.segmentfault.com/405/057/4050570037-636c7b0609a49',
-  );
+  const [formData, setFormData] = useState<FormDataType>({
+    logo: {
+      value: '',
+      isInvalid: false,
+      errorMsg: '',
+    },
+    mobile_logo: {
+      value: '',
+      isInvalid: false,
+      errorMsg: '',
+    },
+    square_icon: {
+      value: '',
+      isInvalid: false,
+      errorMsg: '',
+    },
+    favicon: {
+      value: '',
+      isInvalid: false,
+      errorMsg: '',
+    },
+  });
+
+  // const onChange = (fieldName, fieldValue) => {
+  //   if (!formData[fieldName]) {
+  //     return;
+  //   }
+  //   const fieldData: FormDataType = {
+  //     [fieldName]: {
+  //       value: fieldValue,
+  //       isInvalid: false,
+  //       errorMsg: '',
+  //     },
+  //   };
+  //   setFormData({ ...formData, ...fieldData });
+  // };
+
+  // const [img, setImg] = useState(
+  //   'https://image-static.segmentfault.com/405/057/4050570037-636c7b0609a49',
+  // );
+
+  const schema: JSONSchema = {
+    title: t('page_title'),
+    properties: {
+      logo: {
+        type: 'string',
+        title: t('logo.label'),
+        description: t('logo.text'),
+      },
+      mobile_logo: {
+        type: 'string',
+        title: t('mobile_logo.label'),
+        description: t('mobile_logo.text'),
+      },
+      square_icon: {
+        type: 'string',
+        title: t('square_icon.label'),
+        description: t('square_icon.text'),
+      },
+      favicon: {
+        type: 'string',
+        title: t('favicon.label'),
+        description: t('favicon.text'),
+      },
+    },
+  };
+
+  const uiSchema: UISchema = {
+    logo: {
+      'ui:widget': 'upload',
+      'ui:options': {
+        imageType: 'logo',
+      },
+    },
+    mobile_logo: {
+      'ui:widget': 'upload',
+      'ui:options': {
+        imageType: 'mobile_logo',
+      },
+    },
+    square_icon: {
+      'ui:widget': 'upload',
+      'ui:options': {
+        imageType: 'square_icon',
+      },
+    },
+    favicon: {
+      'ui:widget': 'upload',
+      'ui:options': {
+        imageType: 'favicon',
+      },
+    },
+  };
+
+  const handleOnChange = (data) => {
+    setFormData(data);
+  };
+
+  const onSubmit = () => {
+    // undo
+  };
 
   return (
     <div>
       <h3 className="mb-4">{t('page_title')}</h3>
-      <BrandUpload type="logo" value={img} onChange={setImg} />
+      <SchemaForm
+        schema={schema}
+        uiSchema={uiSchema}
+        formData={formData}
+        onSubmit={onSubmit}
+        onChange={handleOnChange}
+      />
     </div>
   );
 };