Merge pull request #211 from Lemoncode/feature/#98-implement-about-mo…

…dal-box

Feature/#98 implement about modal box

src/App.tsx

@@ -1,9 +1,11 @@
-import { MainScene } from "./scenes/main.scene";
+import { ModalDialogComponent } from './common/components/modal-dialog';
+import { MainScene } from './scenes/main.scene';
 
 function App() {
   return (
     <>
       <MainScene />
+      <ModalDialogComponent />
     </>
   );
 }

src/common/components/icons/index.ts

@@ -3,3 +3,6 @@ export * from './bring-forward-icon.component';
 export * from './bring-to-front-icon.component';
 export * from './send-backward-icon.component';
 export * from './send-to-back-icon.component';
+export * from './linkedin-icon.component';
+export * from './x-icon.component';
+export * from './quickmock-logo.component';

src/common/components/icons/linkedin-icon.component.tsx

@@ -0,0 +1,15 @@
+export const LinkedinIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1.03em"
+      height="1em"
+      viewBox="0 0 1536 1504"
+    >
+      <path
+        fill="currentColor"
+        d="M349 497v991H19V497zm21-306q1 73-50.5 122T184 362h-2q-82 0-132-49T0 191q0-74 51.5-122.5T186 20t133 48.5T370 191m1166 729v568h-329V958q0-105-40.5-164.5T1040 734q-63 0-105.5 34.5T871 854q-11 30-11 81v553H531q2-399 2-647t-1-296l-1-48h329v144h-2q20-32 41-56t56.5-52t87-43.5T1157 474q171 0 275 113.5T1536 920"
+      />
+    </svg>
+  );
+};

src/common/components/icons/quickmock-logo.component.tsx

@@ -0,0 +1,15 @@
+interface Props {
+  styleClass: string;
+}
+
+export const QuickmockLogoComponent = (props: Props) => {
+  const { styleClass } = props;
+
+  return (
+    <img
+      className={styleClass}
+      src={'public/widgets/bombilla.webp'}
+      alt="Quickmock Logo"
+    />
+  );
+};

src/common/components/icons/x-icon.component.tsx

@@ -0,0 +1,15 @@
+export const XIconComponent = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 256 256"
+    >
+      <path
+        fill="currentColor"
+        d="M204.24 195.76a6 6 0 1 1-8.48 8.48L128 136.49l-67.76 67.75a6 6 0 0 1-8.48-8.48L119.51 128L51.76 60.24a6 6 0 0 1 8.48-8.48L128 119.51l67.76-67.75a6 6 0 0 1 8.48 8.48L136.49 128Z"
+      />
+    </svg>
+  );
+};

src/common/components/modal-dialog/index.ts

@@ -0,0 +1 @@
+export * from './modal-dialog.component';

src/common/components/modal-dialog/modal-dialog.component.module.css

@@ -0,0 +1,43 @@
+.container {
+  z-index: 2;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  background-color: var(--primary-900-50-opacity);
+}
+
+.dialogHeader {
+  background-color: var(--primary-500);
+  width: 70vw;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--space-s) var(--space-md);
+  border-top-left-radius: var(--border-radius-m);
+  border-top-right-radius: var(--border-radius-m);
+}
+
+.dialogTitle {
+  font-size: var(--fs-md);
+  color: var(--pure-white);
+}
+
+.dialogButton {
+  width: fit-content;
+  margin-left: auto;
+  background-color: transparent;
+  color: var(--pure-white);
+  padding: var(--space-xs);
+  line-height: 0;
+  border: none;
+}
+
+.dialogButton:hover {
+  cursor: pointer;
+}

src/common/components/modal-dialog/modal-dialog.component.tsx

@@ -0,0 +1,33 @@
+import { useModalDialogContext } from '@/core/providers/model-dialog-providers/model-dialog.provider';
+import classes from './modal-dialog.component.module.css';
+import React, { useEffect } from 'react';
+import { XIconComponent } from '../icons';
+
+export const ModalDialogComponent: React.FC = () => {
+  const { modalDialog, closeModal } = useModalDialogContext();
+  const { isOpen, title, selectedComponent } = modalDialog;
+
+  useEffect(() => {}, [modalDialog]);
+
+  const handleClick = () => {
+    closeModal();
+  };
+
+  return (
+    isOpen && (
+      <div className={classes.container}>
+        <div className={classes.dialogHeader}>
+          <h2 className={classes.dialogTitle}>{title}</h2>
+          <button
+            className={classes.dialogButton}
+            onClick={handleClick}
+            aria-label="close modal dialog"
+          >
+            <XIconComponent />
+          </button>
+        </div>
+        <div>{selectedComponent}</div>
+      </div>
+    )
+  );
+};

src/core/providers/model-dialog-providers/index.ts

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

src/core/providers/model-dialog-providers/model-dialog.context.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+
+import { ModalDialogContextModel } from './model-dialog.model';
+
+export const ModalDialogContext =
+  React.createContext<ModalDialogContextModel | null>(null);

src/core/providers/model-dialog-providers/model-dialog.model.ts

@@ -0,0 +1,19 @@
+/* import React from 'react'; */
+
+export interface ModalDialogModel {
+  isOpen: boolean;
+  selectedComponent: React.ReactNode | null;
+  title: string;
+}
+
+export const createInitialModalDialog = (): ModalDialogModel => ({
+  isOpen: false,
+  selectedComponent: null,
+  title: '',
+});
+
+export interface ModalDialogContextModel {
+  openModal: (component: React.ReactNode | null, title: string) => void;
+  closeModal: () => void;
+  modalDialog: ModalDialogModel;
+}

src/core/providers/model-dialog-providers/model-dialog.provider.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { ModalDialogContext } from './model-dialog.context';
+import {
+  ModalDialogModel,
+  createInitialModalDialog,
+} from './model-dialog.model';
+
+interface Props {
+  children: React.ReactNode;
+}
+
+export const ModalDialogProvider: React.FC<Props> = props => {
+  const { children } = props;
+  const [modalDialog, setModalDialog] = React.useState<ModalDialogModel>(
+    createInitialModalDialog()
+  );
+
+  const openModal = (component: React.ReactNode | null, title: string) => {
+    setModalDialog({
+      isOpen: true,
+      selectedComponent: component,
+      title,
+    });
+  };
+
+  const closeModal = () => {
+    setModalDialog({
+      isOpen: false,
+      selectedComponent: null,
+      title: '',
+    });
+  };
+
+  return (
+    <ModalDialogContext.Provider value={{ openModal, closeModal, modalDialog }}>
+      {children}
+    </ModalDialogContext.Provider>
+  );
+};
+
+export const useModalDialogContext = () => {
+  const context = React.useContext(ModalDialogContext);
+  if (context === null) {
+    throw 'useModalDialogContext: looks like you have forgotten to add the provider on top of the app :)';
+  }
+
+  return context;
+};

src/main.css

@@ -20,6 +20,7 @@
   --primary-700: #383838;
   --primary-800: #1c1c1c;
   --primary-900: #000000;
+  --primary-900-50-opacity: #00000050;
   --pure-white: #ffffff;
 
   /*font-sizes*/

src/main.tsx

@@ -5,11 +5,14 @@ import './normalize.css';
 import './reset.css';
 import './main.css';
 import { CanvasProvider } from './core/providers';
+import { ModalDialogProvider } from './core/providers/model-dialog-providers/model-dialog.provider.tsx';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <CanvasProvider>
-      <App />
+      <ModalDialogProvider>
+        <App />
+      </ModalDialogProvider>
     </CanvasProvider>
   </React.StrictMode>
 );

src/pods/about/about.pod.module.css

@@ -0,0 +1,41 @@
+.container {
+  background-color: var(--primary-700);
+  width: 70vw;
+  height: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: var(--space-lg);
+  border-bottom-left-radius: var(--border-radius-l);
+  border-bottom-right-radius: var(--border-radius-l);
+  gap: var(--space-s);
+}
+
+.projectLogo {
+  display: block;
+  width: 60px;
+  height: 100%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.projectName {
+  font-size: var(--fs-xxl);
+  margin: 0;
+  color: var(--pure-white);
+  font-weight: var(--fw-extrabold);
+  line-height: 1.3;
+}
+
+.projectVersion {
+  margin: 0;
+  font-size: var(--fs-lg);
+  font-weight: var(--fw-medium);
+  color: var(--pure-white);
+}
+
+.projectCommunity {
+  margin: 0;
+  margin-bottom: var(--space-lg);
+  color: var(--primary-200);
+}

src/pods/about/about.pod.tsx

@@ -0,0 +1,17 @@
+/* import { MemberListComponent } from './components/members.component';
+import { memberList } from './members'; */
+import { QuickmockLogoComponent } from '@/common/components/icons';
+import classes from './about.pod.module.css';
+import { DevelopmentTeamComponent } from './components/developmentTeam.component';
+
+export const AboutPod = () => {
+  return (
+    <div className={classes.container}>
+      <QuickmockLogoComponent styleClass={classes.projectLogo} />
+      <h2 className={classes.projectName}>QuickMock</h2>
+      <p className={classes.projectVersion}>Version 0.0</p>
+      <p className={classes.projectCommunity}>Community preview</p>
+      <DevelopmentTeamComponent />
+    </div>
+  );
+};

src/pods/about/components/developmentTeam.component.module.css

@@ -0,0 +1,16 @@
+.team {
+  font-size: var(--fs-lg);
+  font-weight: var(--fw-medium);
+  color: var(--pure-white);
+  text-align: left;
+  margin: 0;
+  margin-bottom: var(--space-lg);
+  align-self: flex-start;
+  color: var(--primary-300);
+}
+
+.teamWrapper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-md) var(--space-xxl);
+}

src/pods/about/components/developmentTeam.component.tsx

@@ -0,0 +1,16 @@
+import { memberList } from '../members';
+import classes from './developmentTeam.component.module.css';
+import { MemberListComponent } from './members.component';
+
+export const DevelopmentTeamComponent = () => {
+  return (
+    <>
+      <h2 className={classes.team}>Development Team</h2>
+      <div className={classes.teamWrapper}>
+        {memberList.map(member => (
+          <MemberListComponent member={member} key={member.id} />
+        ))}
+      </div>
+    </>
+  );
+};