✨(app-impress) create feature pads-create

Create a new feature pads-create for the app impress.
It will be used to create a pad in the app.

src/frontend/apps/impress/src/features/pads/pads-create/api/useCreatePad.tsx

@@ -0,0 +1,41 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { APIError, errorCauses, fetchAPI } from '@/api';
+import { KEY_LIST_PAD } from '@/features/pads';
+
+type CreatePadResponse = {
+  id: string;
+  name: string;
+};
+
+export const createPad = async (name: string): Promise<CreatePadResponse> => {
+  const response = await fetchAPI(`pads/`, {
+    method: 'POST',
+    body: JSON.stringify({
+      name,
+    }),
+  });
+
+  if (!response.ok) {
+    throw new APIError('Failed to create the pad', await errorCauses(response));
+  }
+
+  return response.json() as Promise<CreatePadResponse>;
+};
+
+interface CreatePadProps {
+  onSuccess: (data: CreatePadResponse) => void;
+}
+
+export function useCreatePad({ onSuccess }: CreatePadProps) {
+  const queryClient = useQueryClient();
+  return useMutation<CreatePadResponse, APIError, string>({
+    mutationFn: createPad,
+    onSuccess: (data) => {
+      void queryClient.invalidateQueries({
+        queryKey: [KEY_LIST_PAD],
+      });
+      onSuccess(data);
+    },
+  });
+}

src/frontend/apps/impress/src/features/pads/pads-create/components/CardCreatePad.tsx

@@ -0,0 +1,66 @@
+import { Button } from '@openfun/cunningham-react';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import IconGroup from '@/assets/icons/icon-group2.svg';
+import { Box, Card, StyledLink, Text } from '@/components';
+import { useCunninghamTheme } from '@/cunningham';
+
+import { useCreatePad } from '../api/useCreatePad';
+
+import { InputPadName } from './InputPadName';
+
+export const CardCreatePad = () => {
+  const { t } = useTranslation();
+  const router = useRouter();
+  const {
+    mutate: createPad,
+    isError,
+    isPending,
+    error,
+  } = useCreatePad({
+    onSuccess: (pad) => {
+      router.push(`/pads/${pad.id}`);
+    },
+  });
+  const [padName, setPadName] = useState('');
+  const { colorsTokens } = useCunninghamTheme();
+
+  return (
+    <Card
+      className="p-b"
+      $height="70%"
+      $justify="space-between"
+      $width="100%"
+      $maxWidth="24rem"
+      $minWidth="22rem"
+      aria-label={t('Create new pad card')}
+    >
+      <Box $gap="1rem">
+        <Box $align="center">
+          <IconGroup
+            width={44}
+            color={colorsTokens()['primary-text']}
+            aria-label={t('icon group')}
+          />
+          <Text as="h3" $textAlign="center">
+            {t('Name the pad')}
+          </Text>
+        </Box>
+        <InputPadName
+          label={t('Pad name')}
+          {...{ error, isError, isPending, setPadName }}
+        />
+      </Box>
+      <Box $justify="space-between" $direction="row" $align="center">
+        <StyledLink href="/">
+          <Button color="secondary">{t('Cancel')}</Button>
+        </StyledLink>
+        <Button onClick={() => createPad(padName)} disabled={!padName}>
+          {t('Create the pad')}
+        </Button>
+      </Box>
+    </Card>
+  );
+};

src/frontend/apps/impress/src/features/pads/pads-create/components/InputPadName.tsx

@@ -0,0 +1,54 @@
+import { Input, Loader } from '@openfun/cunningham-react';
+import { useEffect, useState } from 'react';
+
+import { APIError } from '@/api';
+import { Box, TextErrors } from '@/components';
+
+interface InputPadNameProps {
+  error: APIError | null;
+  isError: boolean;
+  isPending: boolean;
+  label: string;
+  setPadName: (newPadName: string) => void;
+  defaultValue?: string;
+}
+
+export const InputPadName = ({
+  defaultValue,
+  error,
+  isError,
+  isPending,
+  label,
+  setPadName,
+}: InputPadNameProps) => {
+  const [isInputError, setIsInputError] = useState(isError);
+
+  useEffect(() => {
+    if (isError) {
+      setIsInputError(true);
+    }
+  }, [isError]);
+
+  return (
+    <>
+      <Input
+        fullWidth
+        type="text"
+        label={label}
+        defaultValue={defaultValue}
+        onChange={(e) => {
+          setPadName(e.target.value);
+          setIsInputError(false);
+        }}
+        rightIcon={<span className="material-icons">edit</span>}
+        state={isInputError ? 'error' : 'default'}
+      />
+      {isError && error && <TextErrors causes={error.cause} />}
+      {isPending && (
+        <Box $align="center">
+          <Loader />
+        </Box>
+      )}
+    </>
+  );
+};

src/frontend/apps/impress/src/features/pads/pads-create/components/index.ts

@@ -0,0 +1 @@
+export * from './CardCreatePad';

src/frontend/apps/impress/src/features/pads/pads-create/index.ts

@@ -0,0 +1 @@
+export * from './components';

src/frontend/apps/impress/src/pages/pads/create.tsx

@@ -0,0 +1,20 @@
+import { ReactElement } from 'react';
+
+import { Box } from '@/components';
+import { CardCreatePad } from '@/features/pads/';
+import { PadLayout } from '@/layouts';
+import { NextPageWithLayout } from '@/types/next';
+
+const Page: NextPageWithLayout = () => {
+  return (
+    <Box className="p-l" $justify="center" $align="start" $height="inherit">
+      <CardCreatePad />
+    </Box>
+  );
+};
+
+Page.getLayout = function getLayout(page: ReactElement) {
+  return <PadLayout>{page}</PadLayout>;
+};
+
+export default Page;

src/frontend/apps/impress/src/pages/pads/index.tsx

@@ -0,0 +1,30 @@
+import { Button } from '@openfun/cunningham-react';
+import type { ReactElement } from 'react';
+import { useTranslation } from 'react-i18next';
+import styled from 'styled-components';
+
+import { Box, StyledLink } from '@/components';
+import { PadLayout } from '@/layouts';
+import { NextPageWithLayout } from '@/types/next';
+
+const StyledButton = styled(Button)`
+  width: fit-content;
+`;
+
+const Page: NextPageWithLayout = () => {
+  const { t } = useTranslation();
+
+  return (
+    <Box $align="center" $justify="center" $height="inherit">
+      <StyledLink href="/pads/create">
+        <StyledButton>{t('Create a new pad')}</StyledButton>
+      </StyledLink>
+    </Box>
+  );
+};
+
+Page.getLayout = function getLayout(page: ReactElement) {
+  return <PadLayout>{page}</PadLayout>;
+};
+
+export default Page;