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/components/SettingsObjectFormSection.tsx

@@ -1,14 +1,22 @@
 import styled from '@emotion/styled';
 
 import { H2Title } from '@/ui/display/typography/components/H2Title';
-import { AutosizeTextInput } from '@/ui/input/components/AutosizeTextInput';
+import { TextArea } from '@/ui/input/components/TextArea';
 import { TextInput } from '@/ui/input/components/TextInput';
 import { Section } from '@/ui/layout/section/components/Section';
 
 type SettingsObjectFormSectionProps = {
+  disabled?: boolean;
   singularName?: string;
   pluralName?: string;
   description?: string;
+  onChange?: (
+    formValues: Partial<{
+      singularName: string;
+      pluralName: string;
+      description: string;
+    }>,
+  ) => void;
 };
 
 const StyledInputsContainer = styled.div`
@@ -23,9 +31,11 @@ const StyledTextInput = styled(TextInput)`
 `;
 
 export const SettingsObjectFormSection = ({
-  singularName,
-  pluralName,
-  description,
+  disabled,
+  singularName = '',
+  pluralName = '',
+  description = '',
+  onChange,
 }: SettingsObjectFormSectionProps) => (
   <Section>
     <H2Title
@@ -35,19 +45,25 @@ export const SettingsObjectFormSection = ({
     <StyledInputsContainer>
       <StyledTextInput
         label="Singular"
-        placeholder="Invoice"
+        placeholder="Investor"
         value={singularName}
+        onChange={(value) => onChange?.({ singularName: value })}
+        disabled={disabled}
       />
       <StyledTextInput
         label="Plural"
-        placeholder="Invoices"
+        placeholder="Investors"
         value={pluralName}
+        onChange={(value) => onChange?.({ pluralName: value })}
+        disabled={disabled}
       />
     </StyledInputsContainer>
-    <AutosizeTextInput
+    <TextArea
       placeholder="Write a description"
       minRows={4}
       value={description}
+      onChange={(value) => onChange?.({ description: value })}
+      disabled={disabled}
     />
   </Section>
 );

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>
   );
 };
 

front/src/modules/settings/data-model/object-edit/SettingsObjectIconSection.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 
+import { IconPigMoney } from '@/ui/display/icon';
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { IconPicker } from '@/ui/input/components/IconPicker';
@@ -23,15 +24,19 @@ const StyledArrowContainer = styled.div`
 `;
 
 type SettingsObjectIconSectionProps = {
-  Icon: IconComponent;
-  iconKey: string;
-  setIconPicker?: (icon: { Icon: IconComponent; iconKey: string }) => void;
+  disabled?: boolean;
+  Icon?: IconComponent;
+  iconKey?: string;
+  label?: string;
+  onChange?: (icon: { Icon: IconComponent; iconKey: string }) => void;
 };
 
 export const SettingsObjectIconSection = ({
-  Icon,
-  iconKey,
-  setIconPicker,
+  disabled,
+  Icon = IconPigMoney,
+  iconKey = 'IconPigMoney',
+  label,
+  onChange,
 }: SettingsObjectIconSectionProps) => {
   return (
     <Section>
@@ -41,15 +46,16 @@ export const SettingsObjectIconSection = ({
       />
       <StyledContainer>
         <IconPicker
+          disabled={disabled}
           selectedIconKey={iconKey}
           onChange={(icon) => {
-            setIconPicker?.({ Icon: icon.Icon, iconKey: icon.iconKey });
+            onChange?.({ Icon: icon.Icon, iconKey: icon.iconKey });
           }}
         />
         <StyledArrowContainer>
           <img src={ArrowRight} alt="Arrow right" width={32} height={16} />
         </StyledArrowContainer>
-        <SettingsObjectIconWithLabel Icon={Icon} label="Workspaces" />
+        <SettingsObjectIconWithLabel Icon={Icon} label={label || 'Investors'} />
       </StyledContainer>
     </Section>
   );