feat: [P4PU-338] Storybook components (#90)

- Storybook pinned 8.1.11
- Vite latest
- Adds missing components stories
- Storybook render tree refactoring

package.json

@@ -28,14 +28,14 @@
     "@babel/plugin-transform-modules-commonjs": "^7.24.1",
     "@chromatic-com/storybook": "^1.3.1",
     "@preact/signals-react": "^2.1.0",
-    "@storybook/addon-essentials": "^8.0.6",
-    "@storybook/addon-interactions": "^8.0.6",
-    "@storybook/addon-links": "^8.0.6",
-    "@storybook/addon-onboarding": "^8.0.6",
-    "@storybook/blocks": "^8.0.6",
-    "@storybook/react": "^8.0.6",
-    "@storybook/react-vite": "^8.0.6",
-    "@storybook/test": "^8.0.6",
+    "@storybook/addon-essentials": "8.1.11",
+    "@storybook/addon-interactions": "8.1.11",
+    "@storybook/addon-links": "8.1.11",
+    "@storybook/addon-onboarding": "8.1.11",
+    "@storybook/blocks": "8.1.11",
+    "@storybook/react": "8.1.11",
+    "@storybook/react-vite": "8.1.11",
+    "@storybook/test": "8.1.11",
     "@testing-library/react": "^14.3.0",
     "@types/jest": "^29.5.12",
     "@types/react": "^18.2.74",
@@ -56,14 +56,14 @@
     "prettier": "^3.2.5",
     "process": "^0.11.10",
     "rimraf": "^5.0.5",
-    "storybook": "^8.0.6",
+    "storybook": "8.1.11",
     "swagger-typescript-api": "^13.0.3",
     "ts-jest": "^29.1.2",
     "ts-node": "^10.9.2",
     "ts-to-zod": "^3.8.5",
     "tsconfig.json": "^1.0.11",
     "typescript": "^5.4.3",
-    "vite": "^5.2.8",
+    "vite": "^5.3.4",
     "vite-tsconfig-paths": "^4.3.2"
   },
   "dependencies": {

src/components/BackButton/BackButton.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
-interface BackButtonProps {
+export interface BackButtonProps {
   text?: string;
 }
 

src/components/QueryLoader/index.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { CircularProgress } from '@mui/material';
 import { useIsFetching } from '@tanstack/react-query';
 
-interface QueryLoaderProps {
+export interface QueryLoaderProps {
   queryKey: string;
   children: React.ReactNode;
   loaderComponent?: React.ReactNode;

src/components/Transactions/TransactionDetail.tsx

@@ -2,7 +2,7 @@ import { Download } from '@mui/icons-material';
 import { Box, Button, Chip, Divider, Grid, Stack, Typography, useTheme } from '@mui/material';
 import { CopyToClipboardButton } from '@pagopa/mui-italia';
 import MasterCard from '../../assets/creditcard/mastercard.png';
-import { TransactionDetail } from '../../models/TransactionDetail';
+import { type TransactionDetail as TransactionDetailType } from '../../models/TransactionDetail';
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import utils from 'utils';
@@ -11,7 +11,7 @@ import { getReceipt } from 'utils/files';
 export default function TransactionDetail({
   transactionData
 }: {
-  transactionData: TransactionDetail;
+  transactionData: TransactionDetailType;
 }) {
   const theme = useTheme();
   const { t } = useTranslation();
@@ -194,7 +194,7 @@ export default function TransactionDetail({
                 </Typography>
               </Stack>
 
-              {transactionData.payer && (
+              {transactionData?.payer && (
                 <Grid item xs={12} sm={12}>
                   <Typography sx={{ wordBreak: 'break-word' }} color={theme.palette.text.secondary}>
                     {t('app.transactionDetail.paidBy')}
@@ -218,7 +218,7 @@ export default function TransactionDetail({
 
               <Grid item xs={12} sm={12}>
                 <Stack spacing={2}>
-                  {transactionData.walletInfo && (
+                  {transactionData?.walletInfo && (
                     <>
                       <Grid container>
                         <Grid item xs={1} paddingTop={3.065} pr={2}>

src/stories/AssistanceBackModal.stories.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import AssistanceBackModalComponent from 'components/Modals/AssistanceBackModal';
+
+const meta: Meta = {
+  title: 'Modal',
+  component: AssistanceBackModalComponent
+};
+
+export default meta;
+
+const Template: StoryFn<{ open: boolean }> = (args) => <AssistanceBackModalComponent {...args} />;
+
+export const AssistanceBackModal = Template.bind({});
+AssistanceBackModal.args = {
+  open: true
+};

src/stories/BackButton.stories.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { BackButton, BackButtonProps } from 'components/BackButton/BackButton';
+
+const meta: Meta<BackButtonProps> = {
+  title: 'Button/BackButton',
+  component: BackButton
+};
+
+export default meta;
+
+const Template: StoryFn<BackButtonProps> = (args) => <BackButton {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  text: 'back'
+} as BackButtonProps;
+
+export const CustomText = Template.bind({});
+CustomText.args = {
+  text: 'home'
+} as BackButtonProps;

src/stories/ErrorFallback.stories.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { ErrorFallback, ErrorFallbackProps } from 'components/ErrorFallback/ErrorFallback';
+
+const meta: Meta<ErrorFallbackProps> = {
+  title: 'Components/ErrorFallback',
+  component: ErrorFallback
+};
+
+export default meta;
+
+const Template: StoryFn<ErrorFallbackProps> = (args) => <ErrorFallback {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  message: 'This is a default error message'
+};
+
+export const WithReset = Template.bind({});
+WithReset.args = {
+  message: 'This is an error with a reset button',
+  onReset: () => alert('Reset button clicked!')
+};

src/stories/Header.stories.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { Header as HeaderComponent, HeaderProps } from 'components/Header';
+
+const meta: Meta<HeaderProps> = {
+  title: 'Layout',
+  component: HeaderComponent
+};
+
+export default meta;
+
+const Template: StoryFn<HeaderProps> = (args) => <HeaderComponent {...args} />;
+
+export const Header = Template.bind({});
+Header.args = {
+  onAssistanceClick: () => alert('Assistance clicked!')
+};

src/stories/PaymentButton.stories.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import PaymentButtonComponent from 'components/PaymentButton';
+
+const meta: Meta = {
+  title: 'Button/PaymentButton',
+  component: PaymentButtonComponent
+};
+
+export default meta;
+
+const Template: StoryFn = (args) => <PaymentButtonComponent {...args} />;
+
+export const PaymentButton = Template.bind({});
+PaymentButton.args = {};

src/stories/PaymentNotice.stories.tsx → src/stories/PaymentNotice/Cards.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { PaymentNotice } from 'components/PaymentNotice';
 
 const meta: Meta<typeof PaymentNotice.Preview> = {
-  title: 'PaymentNotice',
+  title: 'Payment Notice/Cards',
   parameters: {
     backgrounds: {
       default: 'paper',
@@ -15,13 +15,8 @@ const meta: Meta<typeof PaymentNotice.Preview> = {
 };
 
 export default meta;
-type StoryPreview = StoryObj<typeof PaymentNotice.Preview>;
-type StoryCard = StoryObj<typeof PaymentNotice.Card>;
-
-export const Preview: StoryPreview = {
-  render: PaymentNotice.Preview
-};
 
+type StoryCard = StoryObj<typeof PaymentNotice.Card>;
 export const CardSinglePayment: StoryCard = {
   render: PaymentNotice.Card,
   args: {
@@ -33,3 +28,21 @@ export const CardSinglePayment: StoryCard = {
     expiringDate: '31/01/2099'
   }
 };
+
+type StoryPreview = StoryObj<typeof PaymentNotice.Preview>;
+export const Preview: StoryPreview = {
+  render: PaymentNotice.Preview,
+  args: {}
+};
+
+export const CardEmpty = {
+  render: PaymentNotice.Empty
+};
+
+export const Error = {
+  render: PaymentNotice.Error
+};
+
+export const Info = {
+  render: PaymentNotice.Info
+};

src/stories/PaymentNotice/Detail.stories.tsx

@@ -0,0 +1,28 @@
+import { Meta } from '@storybook/react';
+import { PaymentNotice } from 'components/PaymentNotice';
+import { PaymentNoticeDetail } from 'models/PaymentNoticeDetail';
+import React from 'react';
+
+const mockPaymentNoticeDetail: PaymentNoticeDetail = {
+  amount: '€100.00',
+  paFullName: 'John Doe',
+  subject: 'Invoice for Service',
+  dueDate: '2024-12-31',
+  iupd: '12345678901234567890',
+  paTaxCode: 'ABC12345678',
+  firstInstallmentDate: '2024-10-01',
+  firstInstallmentAmount: '€50.00'
+};
+
+const meta: Meta = {
+  title: 'Payment Notice',
+  args: {
+    paymentNoticeDetail: mockPaymentNoticeDetail
+  }
+};
+
+export default meta;
+
+export const Detail = {
+  render: (args: { paymentNoticeDetail: PaymentNoticeDetail }) => <PaymentNotice.Detail {...args} />
+};

src/stories/PaymentNotice/List.stories.tsx

@@ -0,0 +1,41 @@
+import { Meta } from '@storybook/react';
+import { PaymentNotice } from 'components/PaymentNotice';
+import { PaymentNotices } from 'components/PaymentNotice/List';
+import React from 'react';
+
+// Define mock data
+const mockPaymentNoticesList: PaymentNotices[] = [
+  {
+    id: '1',
+    payee: {
+      name: 'Company A',
+      altImg: 'Company A Logo'
+    },
+    paymentInfo: 'Payment for Service A',
+    amount: '€150.00',
+    expiringDate: '2024-09-30'
+  },
+  {
+    id: '2',
+    payee: {
+      name: 'Company B',
+      altImg: 'Company B Logo'
+    },
+    paymentInfo: 'Payment for Service B',
+    amount: '€200.00',
+    expiringDate: '2024-10-15'
+  }
+];
+
+const meta: Meta = {
+  title: 'Payment Notice',
+  args: {
+    paymentNoticesList: mockPaymentNoticesList
+  }
+};
+
+export default meta;
+
+export const List = {
+  render: (args: { paymentNoticesList: PaymentNotices[] }) => <PaymentNotice.List {...args} />
+};

src/stories/PullPaymentsModal.stories.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Meta } from '@storybook/react';
+import PullPaymentsModalComponent from 'components/Modals/PullPaymentsModal';
+
+const meta: Meta = {
+  title: 'Modal/PullPayments Modal',
+  component: PullPaymentsModalComponent,
+  args: { open: true }
+};
+
+export default meta;
+
+export const PullPaymentsModal = {
+  render: (args: { open: boolean }) => <PullPaymentsModalComponent {...args} />
+};

src/stories/QueryLoader.stories.tsx

@@ -0,0 +1,60 @@
+import React, { useState, useEffect } from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { CircularProgress, Box } from '@mui/material';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import QueryLoader, { QueryLoaderProps } from 'components/QueryLoader';
+
+// Create a QueryClient instance
+const queryClient = new QueryClient();
+
+const MockFetchingComponent = () => {
+  const [fetching, setFetching] = useState(true);
+
+  // Simulate fetching
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setFetching(false);
+    }, 2000); // Simulate a 2-second fetch
+    return () => clearTimeout(timer);
+  }, []);
+
+  return fetching;
+};
+
+const QueryLoaderWrapper = ({ queryKey, loaderComponent, children }: QueryLoaderProps) => {
+  const isFetching = MockFetchingComponent();
+
+  return (
+    <QueryLoader queryKey={queryKey} loaderComponent={loaderComponent}>
+      {isFetching ? loaderComponent : children}
+    </QueryLoader>
+  );
+};
+
+const MetaData: Meta<typeof QueryLoader> = {
+  title: 'Components/QueryLoader',
+  component: QueryLoader,
+  decorators: [
+    (Story) => (
+      <QueryClientProvider client={queryClient}>
+        <Story />
+      </QueryClientProvider>
+    )
+  ]
+};
+
+export default MetaData;
+
+const Template: StoryFn<typeof QueryLoader> = (args) => (
+  <Box sx={{ width: '100%', mt: '100px', textAlign: 'center' }}>
+    <QueryLoaderWrapper {...args}>
+      <div>Content Loaded!</div>
+    </QueryLoaderWrapper>
+  </Box>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  loaderComponent: <CircularProgress />,
+  atLeast: 1000
+};

src/stories/Skeleton/PaymentNoticeList.stories.tsx

@@ -0,0 +1,12 @@
+import { Meta } from '@storybook/react';
+import PaymentNoticesList from 'components/Skeleton/PaymentNoticesList';
+
+const meta: Meta<typeof PaymentNoticesList> = {
+  title: 'Payment Notice/Skeletons'
+};
+
+export default meta;
+
+export const List = {
+  render: PaymentNoticesList
+};