Merge master into update-tools/regenerateTools

asyncapi · Jan 28, 2023 · 4d8de55 · 4d8de55
2 parents cff7f2b + 744cce2
commit 4d8de55
Show file tree

Hide file tree

Showing 6 changed files with 388 additions and 153 deletions.
diff --git a/.gitignore b/.gitignore
@@ -8,6 +8,5 @@ out
 config/posts.json
 public/rss.xml
 .env.local
-roadmap.json
 yarn.lock
 meetings.json
diff --git a/components/Modal.js b/components/Modal.js
@@ -0,0 +1,41 @@
+import { useEffect, useRef } from 'react'
+
+export default function Modal({
+  title,
+  children,
+  onModalClose = () => {},
+}) {
+  const modalRef = useRef(null)
+
+  useEffect(() => {
+    modalRef.current.focus()
+  }, [])
+
+  function backdropClickHandler(e) {
+    if (modalRef.current && (modalRef.current === e.target || !modalRef.current.contains(e.target))) {
+      onModalClose()
+    }
+  }
+
+  function onKeyUpHandler(e) {
+    if (e.key === 'Escape') onModalClose()
+  }
+
+  return (
+    <div ref={modalRef} tabIndex={-1} className="backdrop-blur bg-black/30 fixed inset-0 z-30 flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0" onClick={backdropClickHandler} onKeyUp={onKeyUpHandler}>
+      <div className="relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-4xl sm:p-6">
+        <div className="flex justify-between mb-6">
+          <h1 className="text-lg font-bold truncate mr-4">{title}</h1>
+          <button onClick={() => onModalClose()}>
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+        <div className="w-full overflow-auto max-h-120">
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/components/roadmap/RoadmapItem.js b/components/roadmap/RoadmapItem.js
@@ -1,6 +1,7 @@
 import { useState } from "react"
 import RoadmapList from "./RoadmapList"
 import IconArrowRight from '../icons/ArrowRight'
+import Modal from '../Modal'
 
 export default function RoadmapItem({
   item,
@@ -9,7 +10,7 @@ export default function RoadmapItem({
   collapsed = true,
 }) {
   const [isCollapsed, setIsCollapsed] = useState(collapsed)
-  const isCollapsible = item.solutions || item.bets
+  const isCollapsible = item.solutions || item.implementations
 
   const connectorClasses = 'border-l-2 border-dashed border-gray-300'
   const classNames = `pt-2 ${showConnector && connectorClasses}`
@@ -21,25 +22,16 @@ export default function RoadmapItem({
             <div className="border-b-2 border-dashed border-gray-300 w-5 h-1 my-2 ml-0 mr-2"></div>
           </div>
         )}
-        <div className="flex flex-1 shadow-sm rounded-md">
-          <a href={item.html_url} target="_blank" rel="noopener noreferrer" className={`flex-shrink-0 flex items-center justify-center w-4 text-sm font-medium rounded-l-md ${colorClass}`}></a>
-          <div className="flex-1 flex items-center justify-between border-t border-r border-b border-gray-200 bg-white rounded-r-md">
-            <div className="flex flex-1 px-4 py-2 text-sm">
-              {
-                item.state === 'closed' && (<div className="text-xs rounded-md h-6 px-1.5 py-0.5 mr-2 uppercase font-semibold bg-gray-100 text-pink-600">Done</div>)
-              }
-              <a href={item.url || item.html_url} target="_blank" rel="noopener noreferrer" className="block text-gray-900 font-medium hover:text-gray-600">{item.title}</a>
-            </div>
-            { isCollapsible && (
-              <button className="mr-2" onClick={() => setIsCollapsed(!isCollapsed)}>
-                <IconArrowRight className={`h-4 transform ${isCollapsed ? 'rotate-90' : '-rotate-90' }`} />
-              </button>
-            )}
-          </div>
-        </div>
+        <Pill
+          item={item}
+          colorClass={colorClass}
+          isCollapsed={isCollapsed}
+          isCollapsible={isCollapsible}
+          onClickCollapse={() => setIsCollapsed(!isCollapsed)}
+        />
       </div>
 
-      { !isCollapsed && item.solutions && item.solutions.length && (
+      {!isCollapsed && item?.solutions?.length && (
         <RoadmapList
           className="pt-3 ml-2"
           colorClass="bg-blue-400"
@@ -48,14 +40,62 @@ export default function RoadmapItem({
         />
       )}
 
-      { !isCollapsed && item.bets && item.bets.length && (
+      {!isCollapsed && item?.implementations?.length && (
         <RoadmapList
-          className="ml-9"
-          colorClass="bg-gray-700"
-          items={item.bets}
+          className="pt-3 ml-9"
+          colorClass="bg-black"
+          items={item.implementations}
           collapsed={false}
         />
       )}
     </li>
   )
+}
+
+function Pill ({
+  item,
+  colorClass = '',
+  isCollapsible = false,
+  isCollapsed = false,
+  onClickCollapse = () => {},
+}) {
+  const [isDescriptionVisible, setIsDescriptionVisible] = useState(false)
+
+  return (
+    <>
+      <div className={`shadow-sm w-full ${item.done && 'opacity-50'}`}>
+        <div className="flex flex-1">
+          <div className={`flex-shrink-0 flex items-center justify-center w-4 text-sm font-medium rounded-l-md ${colorClass}`}></div>
+          <div className={`flex-1 flex items-center justify-between border-t border-r border-b border-gray-200 bg-white rounded-r-md`}>
+            <div className="px-4 py-2 text-sm">
+              <a href={item.url} rel="noopener noreferrer" onClick={() => !item.url && item.description && setIsDescriptionVisible(true)} className={`block text-gray-900 text-left font-medium ${item.description || item.url ? 'hover:text-gray-600 cursor-pointer' : 'cursor-default'}`}>
+                {
+                  item.done && (
+                    <span title="Done!">
+                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="inline-block mr-2 -mt-0.5 w-6 h-6 text-green-600">
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                      </svg>
+                    </span>
+                  )
+                }
+                <span>{ item.title }</span>
+              </a>
+            </div>
+            {isCollapsible && (
+              <button className="mr-2" onClick={onClickCollapse}>
+                <IconArrowRight className={`h-4 transform ${isCollapsed ? 'rotate-90' : '-rotate-90'}`} />
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+      {
+        isDescriptionVisible && (
+          <Modal title={item.title} onModalClose={() => setIsDescriptionVisible(false)}>
+            <div className="prose">{item.description}</div>
+          </Modal>
+        )
+      }
+    </>
+  )
 }