feat(look&feel): fixed errors in modal stories and importing modal from apollo/lf

Author: Abderrahman FAWZY DEV

apps/look-and-feel-stories/src/Modal/FromApolloLF/Modal.stories.tsx

@@ -66,9 +66,9 @@ export const YourComponent = () => {
 };
 ```
 
-<Canvas of={ModalCoreStories.DefaultModalStory} />
+<Canvas of={ModalCoreStories.ModalCore} />
 
-<Controls of={ModalCoreStories.DefaultModalStory} />
+<Controls of={ModalCoreStories.ModalCore} />
 
 ## Modal
 
@@ -94,6 +94,6 @@ Example of usage of Modal component :
 </BooleanModal>
 ```
 
-<Canvas of={ModalStories.DefaultModalStory} />
+<Canvas of={ModalStories.Playground} />
 
-<Controls of={ModalStories.DefaultModalStory} />
+<Controls of={ModalStories.Playground} />

apps/look-and-feel-stories/src/Modal/FromApolloLF/ModalCore.stories.tsx

@@ -1,56 +1,112 @@
-import { Button, Modal } from "@axa-fr/design-system-look-and-feel-react";
-import home from "@material-symbols/svg-400/outlined/home-fill.svg";
+import "./Modal.story.scss";
+
+import { Button, Modal } from "@axa-fr/design-system-apollo-react/lf";
+import bank from "@material-symbols/svg-700/rounded/account_balance.svg";
+import { action } from "@storybook/addon-actions";
 import type { Meta, StoryObj } from "@storybook/react";
 import { fn } from "@storybook/test";
-import { ComponentPropsWithRef, useRef } from "react";
+import { ComponentPropsWithRef, useLayoutEffect, useRef } from "react";
 
 const meta: Meta<typeof Modal> = {
   title: "Components/Modal",
   component: Modal,
   parameters: {
     layout: "fullscreen",
+    viewport: { defaultViewport: "desktop" },
   },
   args: {
-    onSubmit: fn(),
+    onClose: fn(),
     onCancel: fn(),
   },
 };
 export default meta;
 
-type TDefaultModalStory = StoryObj<ComponentPropsWithRef<typeof Modal>>;
+type ModalStory = StoryObj<ComponentPropsWithRef<typeof Modal>>;
 
-export const DefaultModalStory: TDefaultModalStory = {
+export const ModalContent: ModalStory = {
   name: "Modal",
-  render: ({ children, ...args }) => {
-    const ref = useRef<HTMLDialogElement>(null);
-    return (
-      <>
-        <Button onClick={() => ref.current?.showModal()}>Open the Modal</Button>
-        <Modal
-          {...args}
-          ref={ref}
-          onCancel={(e) => {
-            args.onCancel(e as React.MouseEvent | React.KeyboardEvent);
-            ref.current?.close();
-          }}
-          onSubmit={(e) => {
-            args?.onSubmit?.(e as React.MouseEvent | React.KeyboardEvent);
-            // Submit the modal form
-          }}
-        >
-          {children}
-        </Modal>
-      </>
-    );
-  },
+  decorators: [
+    (Story, { args: { open, ...args } }) => {
+      const modalRef = useRef<HTMLDialogElement>(null);
+
+      useLayoutEffect(() => {
+        if (open) {
+          modalRef.current?.showModal();
+          return;
+        }
+
+        modalRef.current?.close();
+      }, [open]);
+
+      return <Story args={{ ...args, ref: modalRef }} />;
+    },
+  ],
   args: {
-    open: false,
+    open: true,
     title: "Modal title",
+    headingProps: {
+      firstSubtitle: "Modal subtitle",
+    },
+    icon: bank,
+    iconProps: { variant: "primary" },
     children:
       "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris",
-    cancelTitle: "Cancel",
-    submitTitle: "Submit",
-    subtitle: "Modal subtitle",
-    iconTitle: home,
+    secondaryButtonProps: {
+      children: "Cancel",
+      onClick: action("[Cancel] onClick"),
+    },
+    primaryButtonProps: {
+      children: "Submit",
+      onClick: action("[Submit] onClick"),
+    },
+  },
+};
+
+export const Playground: ModalStory = {
+  decorators: [
+    (Story, { args: { secondaryButtonProps = {}, ...args } }) => {
+      const ref = useRef<HTMLDialogElement>(null);
+
+      const onClose = () => {
+        args.onClose?.();
+        ref.current?.close();
+      };
+
+      const onClickSecondaryButton: React.MouseEventHandler<
+        HTMLButtonElement
+      > = (e) => {
+        secondaryButtonProps.onClick?.(e);
+        ref.current?.close();
+      };
+
+      return (
+        <>
+          <div className="button-wrapper">
+            <Button onClick={() => ref.current?.showModal()}>
+              Open the Modal
+            </Button>
+          </div>
+          <Story
+            args={{
+              ...args,
+              ref,
+              onClose,
+              secondaryButtonProps: {
+                ...secondaryButtonProps,
+                onClick: onClickSecondaryButton,
+              },
+            }}
+          />
+        </>
+      );
+    },
+  ],
+  args: { ...ModalContent.args, open: undefined },
+};
+
+export const MobilePlayground: ModalStory = {
+  ...Playground,
+  parameters: {
+    viewport: { defaultViewport: "mobile1" },
   },
 };