feat: add Object Edit form (#2090)

Closes #1910

front/src/modules/settings/data-model/components/SettingsObjectFormSection.tsx

@@ -0,0 +1,53 @@
+import styled from '@emotion/styled';
+
+import { H2Title } from '@/ui/display/typography/components/H2Title';
+import { AutosizeTextInput } from '@/ui/input/components/AutosizeTextInput';
+import { TextInput } from '@/ui/input/components/TextInput';
+import { Section } from '@/ui/layout/section/components/Section';
+
+type SettingsObjectFormSectionProps = {
+  singularName?: string;
+  pluralName?: string;
+  description?: string;
+};
+
+const StyledInputsContainer = styled.div`
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(2)};
+  margin-bottom: ${({ theme }) => theme.spacing(2)};
+  width: 100%;
+`;
+
+const StyledTextInput = styled(TextInput)`
+  flex: 1 0 auto;
+`;
+
+export const SettingsObjectFormSection = ({
+  singularName,
+  pluralName,
+  description,
+}: SettingsObjectFormSectionProps) => (
+  <Section>
+    <H2Title
+      title="Name and description"
+      description="Name in both singular (e.g., 'Invoice') and plural (e.g., 'Invoices') forms."
+    />
+    <StyledInputsContainer>
+      <StyledTextInput
+        label="Singular"
+        placeholder="Invoice"
+        value={singularName}
+      />
+      <StyledTextInput
+        label="Plural"
+        placeholder="Invoices"
+        value={pluralName}
+      />
+    </StyledInputsContainer>
+    <AutosizeTextInput
+      placeholder="Write a description"
+      minRows={4}
+      value={description}
+    />
+  </Section>
+);