ADDED: Two pages on storybook (home and detail), todo : differente states (empty, with rows)

front/public/tailwind.css

@@ -559,18 +559,6 @@ video {
   --tw-backdrop-sepia:  ;
 }
 
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
 .fixed {
   position: fixed;
 }
@@ -616,30 +604,10 @@ video {
   margin-right: 0.25rem;
 }
 
-.ml-6 {
-  margin-left: 1.5rem;
-}
-
-.ml-40 {
-  margin-left: 10rem;
-}
-
 .mr-2 {
   margin-right: 0.5rem;
 }
 
-.mb-2 {
-  margin-bottom: 0.5rem;
-}
-
-.mb-6 {
-  margin-bottom: 1.5rem;
-}
-
-.mt-9 {
-  margin-top: 2.25rem;
-}
-
 .block {
   display: block;
 }
@@ -672,14 +640,14 @@ video {
   width: 1.5rem;
 }
 
-.w-auto {
-  width: auto;
-}
-
 .w-8 {
   width: 2rem;
 }
 
+.w-auto {
+  width: auto;
+}
+
 .min-w-full {
   min-width: 100%;
 }
@@ -986,11 +954,6 @@ video {
   color: rgb(51 65 85 / var(--tw-text-opacity));
 }
 
-.text-gray-900 {
-  --tw-text-opacity: 1;
-  color: rgb(17 24 39 / var(--tw-text-opacity));
-}
-
 .text-gray-200 {
   --tw-text-opacity: 1;
   color: rgb(229 231 235 / var(--tw-text-opacity));
@@ -1001,6 +964,11 @@ video {
   color: rgb(30 64 175 / var(--tw-text-opacity));
 }
 
+.text-gray-900 {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+}
+
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);

front/src/components/pages/DetailPage.jsx

@@ -4,13 +4,14 @@ import { useHistory } from "react-router-dom";
 const DetailPage = () => {
 
     const history = useHistory();
-    const HomePage = () => {
+    const HomePage = (props) => {
         history.push("/");
     }
     return (
         <>
             <button onClick={HomePage}>Back to home page</button>
         </>
+
     )
 }
 

front/src/stories/HomePage.jsx

@@ -0,0 +1,23 @@
+import React, {useState} from "react";
+
+import {TableRows} from "./TableRows";
+import {QueueRow} from "./QueueRow";
+
+export function HomePage() {
+    {/* TODO : fetch API to get all the rows*/}
+
+    return (
+            <div className="App">
+                <div className="flex flex-col">
+                    <div className="overflow-x-auto sm:mx-0.5 lg:mx-0.5">
+                        <div className="py-2 inline-block min-w-full sm:px-6 lg:px-8">
+                            <div className="overflow-hidden">
+                                <h1 className="font-mono font-bold text-2xl mb-10">Available Queues</h1>
+                                {rows ? <TableRows rows={rows}/> : <p>No queues available</p>}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+    )
+}

front/src/stories/HomePage.stories.jsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+import {HomePage} from "./HomePage";
+import queueRow, {QueueRow} from "./QueueRow";
+
+import {Empty, Queried, Unqueried, UnqueriedNoURL} from './QueueRow.stories';
+import {rows} from "./TableRows.stories";
+
+
+export default {
+    title: 'Pages/HomePage',
+    component: HomePage,
+    parameters: {
+        layout: 'fullscreen',
+    },
+}
+
+const Template = (args) => <HomePage {...args} />;
+
+var allRows = {
+    Empty,
+    Unqueried,
+    UnqueriedNoURL,
+    Queried,
+};
+
+let qRows = rows;
+
+
+export const WithRows = Template.bind({});
+WithRows.args = {qRows};
+
+export const EmptyRows = Template.bind({});

front/src/stories/QueuePage.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export const QueuePage = () => {
+    return (
+        <>
+            <h1>Queue Page</h1>
+        </>
+    )
+}

front/src/stories/QueueRow.jsx

@@ -28,6 +28,7 @@ const QueueRow = ({
                 <td className="text-sm text-gray-900x font-light px-6 py-4 url"><Link text={qName} url={url} /></td>
                 <td className="text-sm text-gray-900 font-light px-6 py-4">{arn}</td>
                 <td className="text-sm text-gray-900 font-light px-6 py-4">{itemCount}</td>
+                <td><button>Detail</button></td>
             </tr>
             <React.StrictMode/>
         </>

front/src/stories/TableRows.jsx

@@ -12,35 +12,40 @@ import {QueueRow} from "./QueueRow";
  */
 const TableRows = ({rows = []}) => {
     return (
-        <table>
-            <thead className="bg-gray-200 border-b">
-            <tr>
-                <th scope="col" className="text-sm font-medium text-gray-900 px-6 py-4 text-left">
-                    #
-                </th>
-                <th scope="col" className="text-sm font-medium text-gray-900 px-6 py-4 text-left">
-                    Nom
-                </th>
-                <th scope="col" className="text-sm font-medium text-gray-900 px-6 py-4 text-left">
-                    ARN
-                </th>
-                <th scope="col" className="text-sm font-medium text-gray-900 px-6 py-4 text-left">
-                Messages
-                </th>
-            </tr>
-            </thead>
-            <tbody>
-            {rows.map((row, index) => {
-                return <QueueRow key={index}
-                                 index={index + 1}
-                                 arn={row.props.arn}
-                                 itemCount={row.props.itemCount}
-                                 qName={row.props.qName}
-                                 url={row.props.url}/>
-            })}
-            </tbody>
-            <React.StrictMode/>
-        </table>
+        <>
+            {rows == [] ? <p>Empty</p> : (
+            <table className="min-w-full">
+                <thead className="bg-gray-200 border-b">
+                <tr>
+                    <th scope="col" className="text-sm font-medium text-gray-900 px-6 py-4 text-left">
+                        #
+                    </th>
+                    <th scope="col" className="text-sm font-medium text-gray-900 px-6 py-4 text-left">
+                        Nom
+                    </th>
+                    <th scope="col" className="text-sm font-medium text-gray-900 px-6 py-4 text-left">
+                        ARN
+                    </th>
+                    <th scope="col" className="text-sm font-medium text-gray-900 px-6 py-4 text-left">
+                    Messages
+                    </th>
+                    <th></th>
+                </tr>
+                </thead>
+                <tbody>
+                {rows.map((row, index) => {
+                    return <QueueRow key={index}
+                                     index={index + 1}
+                                     arn={row.props.arn}
+                                     itemCount={row.props.itemCount}
+                                     qName={row.props.qName}
+                                     url={row.props.url}/>
+                })}
+                </tbody>
+                <React.StrictMode/>
+            </table>
+            )}
+        </>
     );
 }
 

front/src/stories/TableRows.stories.jsx

@@ -24,7 +24,7 @@ var allRows = {
     Queried,
 };
 
-var rows = Object.keys(allRows).map((rowKey, index) => {
+export var rows = Object.keys(allRows).map((rowKey, index) => {
     const rowArgs = allRows[rowKey].args
     return <QueueRow key={index}
                      arn={rowArgs.arn}