WIP JSX -> HTML

front2/.storybook/main.js

@@ -0,0 +1,13 @@
+module.exports = {
+  "staticDirs": ['../public'],
+  "stories": [
+    "../stories/**/*.stories.mdx",
+    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions"
+  ],
+  "framework": "@storybook/html"
+}

front2/.storybook/preview.js

@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

front2/stories/Link.jsx

@@ -0,0 +1,49 @@
+// ./src/stories/Link.jsx
+
+import React from 'react';
+
+/**
+ * A queue as described in a list.
+ */
+const Link = ({text, url}) => {
+    if (text === undefined || text === null) {
+        text = url;
+    }
+    if (url !== undefined && url != null && url !== '') {
+        text = <a href={url}>{text}</a>;
+    }
+
+    return (
+        <>
+            {text}
+            <React.StrictMode/>
+        </>
+    )
+}
+
+
+export const createLink = ({
+                               text = '',
+                               url = '',
+                           }) => {
+    if (text === undefined || text === null) {
+        text = url;
+        const link = document.createTextNode(url);
+    }
+    if (url !== undefined && url != null && url !== '') {
+        text = <a href={url}>{text}</a>;
+        const link = document.createElement('a')
+    }
+
+    const btn = document.createElement('button');
+    btn.type = 'button';
+    btn.innerText = label;
+    btn.addEventListener('click', onClick);
+
+    const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+    btn.className = ['storybook-button', `storybook-button--${size}`, mode].join(' ');
+
+    btn.style.backgroundColor = backgroundColor;
+
+    return btn;
+};

front2/stories/Link.stories.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+
+import {Link} from './Link';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+    component: Link,
+    title:'Example/Link',
+    // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+    argTypes: {
+        backgroundColor: {control: 'color'},
+    },
+};
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+// const Template = (args) => <table><QueueRow {...args} /></table>;
+const Template = (args) => <div className="bg-gray-200 px-4 border-solid border-2 border-pink-600"><Link {...args} /></div>;
+
+export const Undefined = Template.bind({});
+Undefined.args = {
+    text: undefined,
+    url: undefined,
+};
+
+export const EmptyText = Template.bind({});
+EmptyText.args = {
+    text: '',
+    url: 'https://sqs.eu-west-3.amazonaws.com/1234567890/main-queue',
+};
+
+export const NullText = Template.bind({});
+NullText.args = {
+    text: null,
+    url: 'https://sqs.eu-west-3.amazonaws.com/1234567890/main-queue',
+};
+
+export const UndefinedText = Template.bind({});
+UndefinedText.args = {
+    text: undefined,
+    url: 'https://sqs.eu-west-3.amazonaws.com/1234567890/main-queue',
+};
+
+export const NullURL = Template.bind({});
+NullURL.args = {
+    text: "some text, but no URL",
+    url: null,
+};
+export const Normal = Template.bind({});
+Normal.args = {
+    text: 'some text',
+    url: 'https://sqs.eu-west-3.amazonaws.com/1234567890/main-queue',
+};

front2/stories/LoadingSpinner.stories.jsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+import {LoadingSpinner} from "./LoadingSpinner";
+
+export default {
+    component: LoadingSpinner,
+    title: 'Example/LoadingSpinner',
+    // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+    argTypes: {
+        backgroundColor: {control: 'color'},
+    },
+};
+
+const Template = (args) => <LoadingSpinner {...args} />;
+
+export const Basic = Template.bind({});
+Basic.args = {
+    isLoading: true,
+}
+
+export const WithText = Template.bind({});
+WithText.args = {
+    isLoading: true,
+    text: 'Loading...',
+}
+

front2/stories/QueuePage.jsx

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

front2/stories/QueueRow.jsx

@@ -0,0 +1,40 @@
+// ./src/stories/QueueRow.jsx
+
+import React from 'react';
+import {Link} from "./Link";
+
+/**
+ * A queue as described in a list.
+ */
+const QueueRow = ({
+                      arn = undefined,
+                      itemCount = undefined,
+                      qName = undefined,
+                      url = undefined,
+                      index = undefined,
+                      ...props
+                  }) => {
+    if (arn === undefined || arn == null) {
+        arn = '';
+    }
+    if (itemCount === undefined || itemCount === null || itemCount === '') {
+        itemCount = '-';
+    }
+
+    return (
+        <>
+            <tr className="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
+                <td className="px-6 py-4 whitespace-nowrap text-sm font-extralight text-gray-900">{index}</td>
+                <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/>
+        </>
+    )
+}
+
+export {
+    QueueRow,
+}

front2/stories/QueueRow.stories.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+import {QueueRow} from './QueueRow';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+    component: QueueRow,
+    title:'Example/QueueRow',
+    // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+    argTypes: {
+        backgroundColor: {control: 'color'},
+    },
+};
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template = (args) => <table><QueueRow {...args} /></table>;
+
+export const Empty = Template.bind({});
+Empty.args = {
+    arn: '',
+    itemCount: '',
+    qName: '',
+    url: '',
+};
+
+export const UnqueriedNoURL = Template.bind({});
+UnqueriedNoURL.args = {
+    arn: 'arn:sqs:eu-west-3:1234567890:main-queue',
+    itemCount: '',
+    qName: 'main-queue',
+    url: '',
+};
+
+export const Unqueried = Template.bind({});
+Unqueried.args = {
+    arn: 'arn:sqs:eu-west-3:1234567890:main-queue',
+    itemCount: '',
+    qName: 'main-queue',
+    url: 'https://sqs.eu-west-3.amazonaws.com/1234567890/main-queue',
+};
+
+export const Queried = Template.bind({});
+Queried.args = {
+    arn: 'arn:sqs:eu-west-3:1234567890:main-queue',
+    itemCount: 25,
+    qName: 'main-queue',
+    url: 'https://sqs.eu-west-3.amazonaws.com/1234567890/main-queue',
+};

front2/stories/TableRows.jsx

@@ -0,0 +1,54 @@
+// ./src/stories/TableRows.js
+
+import React from 'react';
+import {QueueRow} from "./QueueRow";
+
+/**
+ * A list of queues.
+ *
+ * @param rows
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const TableRows = ({rows = []}) => {
+    return (
+        <>
+            {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>
+            )}
+        </>
+    );
+}
+
+export {
+    TableRows,
+}

front2/stories/TableRows.stories.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import {QueueRow} from './QueueRow';
+import {TableRows} from "./TableRows";
+import {Empty, Queried, Unqueried, UnqueriedNoURL} from './QueueRow.stories';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+    component: TableRows,
+    title: 'Example/TableRows',
+    // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+    argTypes: {
+        backgroundColor: {control: 'color'},
+    },
+};
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template = (args) => <TableRows {...args} />;
+
+var allRows = {
+    Empty,
+    Unqueried,
+    UnqueriedNoURL,
+    Queried,
+};
+
+export var rows = Object.keys(allRows).map((rowKey, index) => {
+    const rowArgs = allRows[rowKey].args
+    return <QueueRow key={index}
+                     arn={rowArgs.arn}
+                     itemCount={rowArgs.itemCount}
+                     qName={rowArgs.qName}
+                     url={rowArgs.url}
+    >{index}</QueueRow>
+});
+
+export const AllRowsKinds = Template.bind({});
+AllRowsKinds.args = {rows};

front2/stories/button.css

@@ -28,3 +28,4 @@
   font-size: 16px;
   padding: 12px 24px;
 }
+