add stories to roles components (#10503)

## Context
Adding stories for roles components. Also moving modules components to
the proper "modules" folder, "pages" folder being only for entry points.

## Test
Run storybook

<img width="1145" alt="Screenshot 2025-02-26 at 13 40 40"
src="https://github.com/user-attachments/assets/bc184ab0-c590-4362-8c5a-1bf5ef176e6c"
/>
<img width="1149" alt="Screenshot 2025-02-26 at 13 40 32"
src="https://github.com/user-attachments/assets/699cd205-31db-45e9-b9c1-caff1832bd47"
/>
<img width="1153" alt="Screenshot 2025-02-26 at 13 40 11"
src="https://github.com/user-attachments/assets/72e45a67-ea89-4999-8b16-6f7d027d07f6"
/>
<img width="471" alt="Screenshot 2025-02-26 at 13 38 16"
src="https://github.com/user-attachments/assets/62676943-9935-42b5-b769-5544f7eed85f"
/>
<img width="472" alt="Screenshot 2025-02-26 at 13 38 12"
src="https://github.com/user-attachments/assets/946baab9-1be4-439e-bf99-0ebeab0995f7"
/>

packages/twenty-front/src/modules/settings/roles/role-settings/components/RoleSettings.tsx

@@ -0,0 +1,46 @@
+import styled from '@emotion/styled';
+import { t } from '@lingui/core/macro';
+
+import { IconPicker } from '@/ui/input/components/IconPicker';
+import { TextArea } from '@/ui/input/components/TextArea';
+import { TextInput } from '@/ui/input/components/TextInput';
+import { Role } from '~/generated-metadata/graphql';
+
+const StyledInputsContainer = styled.div`
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(2)};
+  margin-bottom: ${({ theme }) => theme.spacing(2)};
+  width: 100%;
+`;
+
+const StyledInputContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+type RoleSettingsProps = {
+  role: Pick<Role, 'id' | 'label' | 'description'>;
+};
+
+export const RoleSettings = ({ role }: RoleSettingsProps) => {
+  return (
+    <>
+      <StyledInputsContainer>
+        <StyledInputContainer>
+          <IconPicker
+            disabled={true}
+            selectedIconKey={'IconUser'}
+            onChange={() => {}}
+          />
+        </StyledInputContainer>
+        <TextInput value={role.label} disabled fullWidth />
+      </StyledInputsContainer>
+      <TextArea
+        minRows={4}
+        placeholder={t`Write a description`}
+        value={role.description || ''}
+        disabled
+      />
+    </>
+  );
+};