docs: add DatePicker and ImageInput stories (#980)

Closes #979

front/src/modules/ui/input/components/DatePicker.tsx

@@ -7,7 +7,6 @@ import { overlayBackground } from '@/ui/themes/effects';
 import 'react-datepicker/dist/react-datepicker.css';
 
 export type DatePickerProps = {
-  isOpen?: boolean;
   date: Date;
   onChangeHandler: (date: Date) => void;
   customInput?: ReactElement;
@@ -129,11 +128,10 @@ const StyledContainer = styled.div`
     &:hover {
       background: ${({ theme }) => theme.background.transparent.light};
     }
+  }
 
-    &:first-of-type {
-      display: none;
-    }
-
+  & .react-datepicker__year-option {
+    &:first-of-type,
     &:last-of-type {
       display: none;
     }

front/src/modules/ui/input/components/__stories__/DatePicker.stories.tsx

@@ -0,0 +1,50 @@
+import { expect } from '@storybook/jest';
+import type { Meta, StoryObj } from '@storybook/react';
+import { userEvent, within } from '@storybook/testing-library';
+
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+
+import DatePicker from '../DatePicker';
+
+const meta: Meta<typeof DatePicker> = {
+  title: 'UI/Input/DatePicker',
+  component: DatePicker,
+  decorators: [ComponentDecorator],
+  argTypes: {
+    customInput: { control: false },
+    date: { control: 'date' },
+  },
+  args: { date: new Date('January 1, 2023 00:00:00') },
+};
+
+export default meta;
+type Story = StoryObj<typeof DatePicker>;
+
+export const Default: Story = {};
+
+export const WithOpenMonthSelect: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const monthSelect = canvas.getByText('January');
+
+    await userEvent.click(monthSelect);
+
+    expect(canvas.getAllByText('January')).toHaveLength(2);
+    [
+      'February',
+      'March',
+      'April',
+      'May',
+      'June',
+      'July',
+      'August',
+      'September',
+      'October',
+      'November',
+      'December',
+    ].forEach((monthLabel) =>
+      expect(canvas.getByText(monthLabel)).toBeInTheDocument(),
+    );
+  },
+};

front/src/modules/ui/input/components/__stories__/ImageInput.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+import { workspaceLogoUrl } from '~/testing/mock-data/users';
+
+import { ImageInput } from '../ImageInput';
+
+const meta: Meta<typeof ImageInput> = {
+  title: 'UI/Input/ImageInput',
+  component: ImageInput,
+  decorators: [ComponentDecorator],
+};
+
+export default meta;
+type Story = StoryObj<typeof ImageInput>;
+
+export const Default: Story = {};
+
+export const WithPicture: Story = { args: { picture: workspaceLogoUrl } };
+
+export const Disabled: Story = { args: { disabled: true } };