diff --git a/front/src/modules/settings/data-model/components/SettingsObjectFormSection.tsx b/front/src/modules/settings/data-model/components/SettingsObjectFormSection.tsx
new file mode 100644
index 000000000..2142157ae
--- /dev/null
+++ b/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) => (
+
+);
diff --git a/front/src/modules/settings/data-model/components/__stories__/SettingsObjectFormSection.stories.tsx b/front/src/modules/settings/data-model/components/__stories__/SettingsObjectFormSection.stories.tsx
new file mode 100644
index 000000000..3f82ecff6
--- /dev/null
+++ b/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 = {
+ title: 'Modules/Settings/DataModel/SettingsObjectFormSection',
+ component: SettingsObjectFormSection,
+ decorators: [ComponentDecorator],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};
+
+export const WithDefaultValues: Story = {
+ args: {
+ singularName: 'Company',
+ pluralName: 'Companies',
+ description: 'Lorem ipsum',
+ },
+};
diff --git a/front/src/modules/settings/data-model/constants/mockObjects.ts b/front/src/modules/settings/data-model/constants/mockObjects.ts
index ee97577f6..5d42ac39e 100644
--- a/front/src/modules/settings/data-model/constants/mockObjects.ts
+++ b/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,
diff --git a/front/src/modules/settings/data-model/object-edit/SettingsObjectIconSection.tsx b/front/src/modules/settings/data-model/object-edit/SettingsObjectIconSection.tsx
index 1cb67331f..40a349b8c 100644
--- a/front/src/modules/settings/data-model/object-edit/SettingsObjectIconSection.tsx
+++ b/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 (
-
);
};
diff --git a/front/src/modules/ui/input/components/AutosizeTextInput.tsx b/front/src/modules/ui/input/components/AutosizeTextInput.tsx
index 06ad72815..7f0c8fd0f 100644
--- a/front/src/modules/ui/input/components/AutosizeTextInput.tsx
+++ b/front/src/modules/ui/input/components/AutosizeTextInput.tsx
@@ -13,6 +13,7 @@ import { InputHotkeyScope } from '../types/InputHotkeyScope';
const MAX_ROWS = 5;
export enum AutosizeTextInputVariant {
+ Default = 'default',
Icon = 'icon',
Button = 'button',
}
@@ -24,6 +25,7 @@ type AutosizeTextInputProps = {
onFocus?: () => void;
variant?: AutosizeTextInputVariant;
buttonTitle?: string;
+ value?: string;
};
const StyledContainer = styled.div`
@@ -112,14 +114,15 @@ export const AutosizeTextInput = ({
onValidate,
minRows = 1,
onFocus,
- variant = AutosizeTextInputVariant.Icon,
+ variant = AutosizeTextInputVariant.Default,
buttonTitle,
+ value = '',
}: AutosizeTextInputProps) => {
const [isFocused, setIsFocused] = useState(false);
const [isHidden, setIsHidden] = useState(
variant === AutosizeTextInputVariant.Button,
);
- const [text, setText] = useState('');
+ const [text, setText] = useState(value);
const isSendButtonDisabled = !text;
const words = text.split(/\s|\n/).filter((word) => word).length;
diff --git a/front/src/modules/ui/input/components/TextInput.tsx b/front/src/modules/ui/input/components/TextInput.tsx
index 27c1fc4fa..f8d4490b0 100644
--- a/front/src/modules/ui/input/components/TextInput.tsx
+++ b/front/src/modules/ui/input/components/TextInput.tsx
@@ -23,6 +23,7 @@ type TextInputComponentProps = Omit<
InputHTMLAttributes,
'onChange'
> & {
+ className?: string;
label?: string;
onChange?: (text: string) => void;
fullWidth?: boolean;
@@ -103,6 +104,7 @@ const INPUT_TYPE_PASSWORD = 'password';
const TextInputComponent = (
{
+ className,
label,
value,
onChange,
@@ -160,7 +162,7 @@ const TextInputComponent = (
};
return (
-
+
{label && {label + (required ? '*' : '')}}
{
]}
/>
{activeObject && (
-
+ <>
+
+
+ >
)}