feat: add New Object Custom form (#2105)

* feat: add New Object Custom form

Closes #1808

* fix: fix lint error

front/src/modules/settings/data-model/new-object/components/SettingsNewObjectType.tsx

@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
@@ -6,6 +5,13 @@ import { IconBox, IconDatabase, IconFileCheck } from '@/ui/display/icon';
 
 import { SettingsObjectTypeCard } from './SettingsObjectTypeCard';
 
+export type NewObjectType = 'Standard' | 'Custom' | 'Remote';
+
+type SettingsNewObjectTypeProps = {
+  selectedType?: NewObjectType;
+  onTypeSelect?: (type: NewObjectType) => void;
+};
+
 const StyledContainer = styled.div`
   display: flex;
   flex-direction: row;
@@ -13,12 +19,11 @@ const StyledContainer = styled.div`
   width: 100%;
 `;
 
-export const SettingsNewObjectType = () => {
+export const SettingsNewObjectType = ({
+  selectedType = 'Standard',
+  onTypeSelect,
+}: SettingsNewObjectTypeProps) => {
   const theme = useTheme();
-  const [selectedType, setSelectedType] = useState<string | null>(null);
-  const handleCardClick = (selectedType: string) => {
-    setSelectedType(selectedType);
-  };
   return (
     <StyledContainer>
       <SettingsObjectTypeCard
@@ -32,8 +37,8 @@ export const SettingsNewObjectType = () => {
             color={theme.font.color.tertiary}
           />
         }
-        onClick={() => handleCardClick('Standard')}
-      ></SettingsObjectTypeCard>
+        onClick={() => onTypeSelect?.('Standard')}
+      />
       <SettingsObjectTypeCard
         title="Custom"
         color="orange"
@@ -45,8 +50,8 @@ export const SettingsNewObjectType = () => {
             color={theme.font.color.tertiary}
           />
         }
-        onClick={() => handleCardClick('Custom')}
-      ></SettingsObjectTypeCard>
+        onClick={() => onTypeSelect?.('Custom')}
+      />
       <SettingsObjectTypeCard
         title="Remote"
         soon
@@ -60,7 +65,7 @@ export const SettingsNewObjectType = () => {
             color={theme.font.color.tertiary}
           />
         }
-      ></SettingsObjectTypeCard>
+      />
     </StyledContainer>
   );
 };

front/src/modules/settings/data-model/new-object/components/SettingsObjectTypeCard.tsx

@@ -58,21 +58,19 @@ export const SettingsObjectTypeCard = ({
 }: SettingsObjectTypeCardProps) => {
   const theme = useTheme();
   return (
-    <div onClick={() => onclick}>
-      <StyledObjectTypeCard
-        title={title}
-        soon={soon}
-        disabled={disabled}
-        color={color}
-        selected={selected}
-        onClick={onClick}
-      >
-        {prefixIcon}
-        <StyledTag color={color} text={title} />
-        {soon && <SoonPill />}
-        {!disabled && selected && <StyledIconCheck size={theme.icon.size.md} />}
-      </StyledObjectTypeCard>
-    </div>
+    <StyledObjectTypeCard
+      title={title}
+      soon={soon}
+      disabled={disabled}
+      color={color}
+      selected={selected}
+      onClick={onClick}
+    >
+      {prefixIcon}
+      <StyledTag color={color} text={title} />
+      {soon && <SoonPill />}
+      {!disabled && selected && <StyledIconCheck size={theme.icon.size.md} />}
+    </StyledObjectTypeCard>
   );
 };