Refacto components organization (#111)

* refacto(front): move Alert component in atoms

* refacto(front): create component for create stack card

* refacto(front): create generic Card component

front/src/views/molecules/Alerts/Notice.molecule.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Alert from '../../organisms/Alert.atom'
+import Alert from '../../atoms/Alert.atom'
 import { type AlertProps } from '../../../interfaces/Alert.interface'
 
 const Notice = ({ message }: AlertProps): JSX.Element => {

front/src/views/molecules/Alerts/Success.molecule.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Alert from '../../organisms/Alert.atom'
+import Alert from '../../atoms/Alert.atom'
 import { type AlertProps } from '../../../interfaces/Alert.interface'
 
 const Warning = ({ message }: AlertProps): JSX.Element => {

front/src/views/molecules/Alerts/Warning.molecule.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Alert from '../../organisms/Alert.atom'
+import Alert from '../../atoms/Alert.atom'
 import { type AlertProps } from '../../../interfaces/Alert.interface'
 
 const Warning = ({ message }: AlertProps): JSX.Element => {

front/src/views/organisms/Card.organism.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import Button from "../atoms/forms/Button.atom";
+import { BiTrash, BiEdit, BiCopy } from "react-icons/bi";
+import { IStack } from "../../interfaces/Stack.interface";
+
+const CardOrganism = ({ id, name, description, linkUrl, isEditable, onDelete, onEdit, onDuplicate } : {
+  id: string
+  name: string
+  description: string
+  linkUrl: string
+  isEditable: boolean
+  onDelete: (id: string) => void
+  onEdit: () => void
+  onDuplicate: (id: string) => void
+}) => {
+  return (
+    <div className="card shadow-md mb-2 rounded border border-blue-100 hover:border-blue-200">
+      <Link to={`${linkUrl}/${id}`} key={id}>
+        <div className="card-body">
+          <h2 className="card-title">{name}</h2>
+          <p className="truncate">{description}</p>
+        </div>
+      </Link>
+
+      { isEditable && (
+        <div className="card-actions justify-end">
+          <Button className="btn-ghost" icon={<BiTrash/>} onClick={() => { onDelete(id) }} />
+          <Button className="btn-ghost" icon={<BiEdit/>} onClick={onEdit} />
+          <Button className="btn-ghost" icon={<BiCopy/>} onClick={() => { onDuplicate(id) }} />
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default CardOrganism;

front/src/views/organisms/CreateStackCard.organism.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+const StackCardOrganism = ({ onOpenModal }: {
+  onOpenModal: (undefined: undefined) => void
+}): JSX.Element => {
+  return (
+    <button
+      onClick={() => { onOpenModal(undefined) }}
+      className="card shadow-md mb-2 rounded bg-blue-100 border border-blue-100 hover:border-blue-200">
+      <div className="card-body">
+        <h2 className="card-title">+ Create a new stack</h2>
+        <p>Click here to create a new stack</p>
+      </div>
+    </button>
+  );
+}
+
+export default StackCardOrganism;

front/src/views/organisms/StackCard.organism.tsx

@@ -1,8 +1,6 @@
 import React from 'react'
-import { Link } from 'react-router-dom'
 import { type IStack } from '../../interfaces/Stack.interface'
-import Button from '../atoms/forms/Button.atom'
-import { BiTrash, BiEdit, BiCopy } from 'react-icons/bi'
+import CardOrganism from './Card.organism'
 
 const StackCardOrganism = ({ stack, id, name, description, onEdit, onDelete, onDuplicate }: {
   stack: IStack
@@ -13,22 +11,18 @@ const StackCardOrganism = ({ stack, id, name, description, onEdit, onDelete, onD
   onDelete: (id: string) => void
   onDuplicate: (id: string) => void
 }): JSX.Element => {
-  return (
-    <div className="card shadow-md mb-2 rounded border border-blue-100 hover:border-blue-200">
-      <Link to={`/stacks/${id}`} key={id}>
-        <div className="card-body">
-          <h2 className="card-title">{name}</h2>
-          <p className="truncate">{description}</p>
-        </div>
-      </Link>
-      <div className="card-actions justify-end">
-        <Button className="btn-ghost" icon={<BiTrash/>} onClick={() => { onDelete(id) }} />
-
-        <Button className="btn-ghost" icon={<BiEdit/>} onClick={() => { onEdit(stack) }} />
 
-        <Button className="btn-ghost" icon={<BiCopy/>} onClick={() => { onDuplicate(id) }} />
-      </div>
-    </div>
+  return (
+    <CardOrganism
+      id={id}
+      name={name}
+      description={description}
+      linkUrl={'/stacks'}
+      isEditable={true}
+      onDelete={onDelete}
+      onEdit={() => onEdit(stack)}
+      onDuplicate={onDuplicate}
+    />
   )
 }
 

front/src/views/pages/StacksPage.tsx

@@ -5,6 +5,7 @@ import useToggle from '../../hooks/useToggle'
 import StackCardOrganism from '../organisms/StackCard.organism'
 import CreateStackFormModalOrganism from '../organisms/CreateStackFormModal.organism'
 import EditStackFormModalOrganism from '../organisms/EditStackFormModal.organism'
+import CreateStackCardOrganism from '../organisms/CreateStackCard.organism'
 
 const StacksPage = (): JSX.Element => {
   const [open, toggle] = useToggle()
@@ -50,14 +51,7 @@ const StacksPage = (): JSX.Element => {
   return (
     <section>
       <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-4 p-5'>
-        <button
-          onClick={() => { onOpenModal(undefined) }}
-          className="card shadow-md mb-2 rounded bg-blue-100 border border-blue-100 hover:border-blue-200">
-          <div className="card-body">
-            <h2 className="card-title">+ Create a new stack</h2>
-            <p>Click here to create a new stack</p>
-          </div>
-        </button>
+        <CreateStackCardOrganism onOpenModal={onOpenModal} />
         {
           (stacks.map((stack: IStack) => (
             <StackCardOrganism