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

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

@@ -0,0 +1,24 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+
+import { SettingsObjectFormSection } from '../SettingsObjectFormSection';
+
+const meta: Meta<typeof SettingsObjectFormSection> = {
+  title: 'Modules/Settings/DataModel/SettingsObjectFormSection',
+  component: SettingsObjectFormSection,
+  decorators: [ComponentDecorator],
+};
+
+export default meta;
+type Story = StoryObj<typeof SettingsObjectFormSection>;
+
+export const Default: Story = {};
+
+export const WithDefaultValues: Story = {
+  args: {
+    singularName: 'Company',
+    pluralName: 'Companies',
+    description: 'Lorem ipsum',
+  },
+};

front/src/modules/settings/data-model/constants/mockObjects.ts

@@ -20,15 +20,16 @@ import { ObjectFieldItem } from '../types/ObjectFieldItem';
 export const activeObjectItems = [
   {
     name: 'Companies',
-    singularName: 'company',
+    singularName: 'Company',
     Icon: IconBuildingSkyscraper,
     type: 'standard',
     fields: 23,
     instances: 165,
+    description: 'Lorem ipsum',
   },
   {
     name: 'People',
-    singularName: 'person',
+    singularName: 'Person',
     Icon: IconUser,
     type: 'standard',
     fields: 16,

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

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { IconPicker } from '@/ui/input/components/IconPicker';
+import { Section } from '@/ui/layout/section/components/Section';
 
 import ArrowRight from '../assets/ArrowRight.svg';
 
@@ -33,7 +34,7 @@ export const SettingsObjectIconSection = ({
   setIconPicker,
 }: SettingsObjectIconSectionProps) => {
   return (
-    <section>
+    <Section>
       <H2Title
         title="Icon"
         description="The icon that will be displayed in the sidebar."
@@ -50,6 +51,6 @@ export const SettingsObjectIconSection = ({
         </StyledArrowContainer>
         <SettingsObjectIconWithLabel Icon={Icon} label="Workspaces" />
       </StyledContainer>
-    </section>
+    </Section>
   );
 };