feat(extension): create setup and first feature

Features for extension - Search section - Navigate using scroll and see the documentation as a extension - Extension saves the last section that the user read in order to show it again when he going the extension
CharlyJazz · Aug 8, 2023 · 0aab859 · 0aab859
2 parents 4961f60 + b406cc8
commit 0aab859
Show file tree

Hide file tree

Showing 18 changed files with 9,952 additions and 16,323 deletions.
diff --git a/.env b/.env
@@ -0,0 +1,2 @@
+INLINE_RUNTIME_CHUNK=false
+PUBLIC_URL=./
diff --git a/README.md b/README.md
@@ -4,15 +4,13 @@
 
 This is a template created in React to easily customize and build a REST API Documentation for commercial or development purposes. Project created using using create-react-app wth the typescript template
 
-Roles and Permissions      |  Preview Schema
-:-------------------------:|:-------------------------:
-![](https://user-images.githubusercontent.com/12489333/124013991-59944b00-d9b9-11eb-825e-5a02a9b99487.jpeg)  |  ![](https://user-images.githubusercontent.com/12489333/124013983-57ca8780-d9b9-11eb-90b6-6a0227e8bac3.jpeg)
-
-Search      |  Endpoint Section
-:-------------------------:|:-------------------------:
-![](https://user-images.githubusercontent.com/12489333/124014002-5b5e0e80-d9b9-11eb-90ae-90e42f798149.jpeg)  |  ![](https://user-images.githubusercontent.com/12489333/124014698-3a49ed80-d9ba-11eb-9357-4678e4ebe17c.jpeg)
-
+|                                            Roles and Permissions                                            |                                               Preview Schema                                                |
+| :---------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------: |
+| ![](https://user-images.githubusercontent.com/12489333/124013991-59944b00-d9b9-11eb-825e-5a02a9b99487.jpeg) | ![](https://user-images.githubusercontent.com/12489333/124013983-57ca8780-d9b9-11eb-90b6-6a0227e8bac3.jpeg) |
 
+|                                                   Search                                                    |                                              Endpoint Section                                               |
+| :---------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------: |
+| ![](https://user-images.githubusercontent.com/12489333/124014002-5b5e0e80-d9b9-11eb-90ae-90e42f798149.jpeg) | ![](https://user-images.githubusercontent.com/12489333/124014698-3a49ed80-d9ba-11eb-9357-4678e4ebe17c.jpeg) |
 
 ### Merge Between custom content and your API contract
 
@@ -103,11 +101,13 @@ The structure of the project is very easy to understand. The code of the documen
 This Repository have a example using the PetStore from Swagger with the sections Pet, Store and User. But with three sections introductories using the power of `SectionsItem` structures. Also there are a section for **Roles and Permissions**
 
 ### Run Documentation in your local Browser
+
 ```bash
 npm install && npm run start
 ```
 
-### Run Tests 
+### Run Tests
+
 ```bash
 npm install && npm run test
 ```

diff --git a/constants.ts b/constants.ts
@@ -0,0 +1 @@
+export const SECTION_ID = "SECTION_ID";
diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,13 @@
+{
+  "short_name": "Prettyrest",
+  "name": "Pretty Rest API Documentacion",
+  "manifest_version": 3,
+  "version": "0.0.1",
+  "icons": {},
+  "action": {
+    "default_title": "Pretty Rest API Documentacion",
+    "default_popup": "index.html"
+  },
+  "permissions": ["fileBrowserHandler", "background", "storage"],
+  "host_permissions": ["*://*/*"]
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,30 +1,30 @@
 {
-  "name": "prettyrestdoc",
-  "version": "1.0.0",
-  "private": false,
-  "homepage": "https://charlyjazz.github.io/prettyrestdoc",
+  "name": "prettyrestdoc2",
+  "version": "0.1.0",
+  "private": true,
   "dependencies": {
-    "@stoplight/json-ref-resolver": "^3.1.2",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/user-event": "^12.8.3",
-    "@types/jest": "^26.0.23",
-    "@types/node": "^12.20.15",
-    "@types/react": "^17.0.11",
-    "@types/react-dom": "^17.0.8",
-    "node-sass": "^6.0.1",
-    "openapi-types": "^9.0.3",
-    "react": "^17.0.2",
-    "react-collapse": "^5.1.0",
-    "react-dom": "^17.0.2",
-    "react-highlight": "^0.14.0",
-    "react-scripts": "4.0.3",
-    "typescript": "^4.3.4",
-    "web-vitals": "^1.1.2"
+    "@stoplight/json-ref-resolver": "^3.1.6",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/chrome": "^0.0.243",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.18.39",
+    "@types/react": "^18.2.18",
+    "@types/react-dom": "^18.2.7",
+    "openapi-types": "^12.1.3",
+    "react": "^18.2.0",
+    "react-collapse": "^5.1.1",
+    "react-dom": "^18.2.0",
+    "react-highlight": "^0.15.0",
+    "react-scripts": "5.0.1",
+    "sass": "^1.64.2",
+    "typescript": "^4.9.5",
+    "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "CI=false && react-scripts build",
+    "build": "CI=false && react-scripts build && cp manifest.json build/manifest.json",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },

diff --git a/src/constants.ts b/src/constants.ts
@@ -0,0 +1 @@
+export const SECTION_ID = "SECTION_ID";
diff --git a/src/global.d.ts b/src/global.d.ts
@@ -69,8 +69,7 @@ interface SectionItem {
   is_core_resource?: boolean;
 }
 
-
 interface Role {
   label: string;
   value: string;
-}
+}
diff --git a/src/index.css b/src/index.css
@@ -1,5 +1,8 @@
 html,
 body {
-  margin: 0;
   padding: 0;
+  margin: 0;
+  /* Just for the extension */
+  height: 600px;
+  width: 800px;
 }
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,26 +1,31 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import PrettyRestDoc from './lib/PrettyRestDoc';
-import docSwagger from "./petstore.json";
-import APIDoc from "./doc";
 import { OpenAPIV3 } from "openapi-types";
-import './index.css'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import APIDoc from "./doc";
+import "./index.css";
+import PrettyRestDoc from "./lib/PrettyRestDoc";
+import docSwagger from "./petstore.json";
 
-ReactDOM.render(
+const root = ReactDOM.createRoot(
+  document.getElementById("root") as HTMLElement
+);
+root.render(
   <React.StrictMode>
-    <PrettyRestDoc
-     docCustom={APIDoc}
-      docSwagger={docSwagger as unknown as OpenAPIV3.Document}
-      roles={[
-        {
-        label: "Client",
-        value: 'client'
-      },
-      {
-        label: "Admin",
-        value: 'admin'
-      }]}
+    <React.StrictMode>
+      <PrettyRestDoc
+        docCustom={APIDoc}
+        docSwagger={docSwagger as unknown as OpenAPIV3.Document}
+        roles={[
+          {
+            label: "Client",
+            value: "client",
+          },
+          {
+            label: "Admin",
+            value: "admin",
+          },
+        ]}
       />
-  </React.StrictMode>,
-  document.getElementById('root')
-);  
+    </React.StrictMode>
+  </React.StrictMode>
+);
diff --git a/src/lib/PrettyRestDoc.tsx b/src/lib/PrettyRestDoc.tsx
@@ -1,27 +1,56 @@
-import React, { FC, useEffect, useMemo, useState } from "react";
+import { OpenAPIV3 } from "openapi-types";
+import React, {
+  FC,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useState,
+} from "react";
+import { SECTION_ID } from "../constants";
+import AdaptarOA3 from "./adapter-oa3/adapter/Adapter";
 import style from "./api.module.scss";
-import Section from "./components/Section";
+import Header from "./components/Header";
 import { Navigation } from "./components/Navigation";
 import { SearchModal } from "./components/SearchModal";
-import Header from "./components/Header";
-import AdaptarOA3 from "./adapter-oa3/adapter/Adapter";
-import { OpenAPIV3 } from "openapi-types";
+import Section from "./components/Section";
 
 interface Props {
   docSwagger: OpenAPIV3.Document;
   docCustom: SectionItem[];
   roles?: Role[];
 }
 
-const PrettyRestDoc: FC<Props> = ({docCustom, docSwagger, roles}) => {
+const PrettyRestDoc: FC<Props> = ({ docCustom, docSwagger, roles }) => {
   const [APIDoc, setAPIDOC] = useState<SectionItem[]>([]);
   const [section, setSection] = useState<string>("");
   const [searchModal, setSearchModal] = useState<boolean>(false);
+
   const initDoc = async () => {
     const adapter = new AdaptarOA3(docSwagger, docCustom);
     const docMerged = await adapter.createDocumentation();
     setAPIDOC(docMerged);
   };
+
+  const isChromeExtensionMode =
+    window.chrome && chrome.runtime && chrome.runtime.id;
+
+  // Persitency of the navigation
+  useLayoutEffect(() => {
+    if (!isChromeExtensionMode) return;
+
+    if (chrome.storage) {
+      chrome.storage.local.get([SECTION_ID]).then((result) => {
+        setTimeout(() => {
+          const anchorElement = document.getElementById(result.SECTION_ID);
+          if (anchorElement) {
+            window.scrollTo(0, anchorElement.offsetTop);
+          }
+          setSection(result.SECTION_ID);
+        }, 1000);
+      });
+    }
+  }, []);
+
   useEffect(() => {
     initDoc();
     document.title = "Pretty Rest Doc";
@@ -57,17 +86,29 @@ const PrettyRestDoc: FC<Props> = ({docCustom, docSwagger, roles}) => {
       document.removeEventListener("keyup", eventsHandlers["keyup"]);
     };
   }, []);
+
+  // Persitency of the navigation
+  React.useEffect(() => {
+    if (!isChromeExtensionMode) return;
+
+    if (chrome.storage) {
+      chrome.storage.local.set({ [SECTION_ID]: section });
+    }
+  }, [section]);
+
   const openSearchModal = () => {
     setSearchModal(true);
   };
+
   const closeSearchModal = () => {
     setSearchModal(false);
   };
+
   // Optimization of items
   // https://stackoverflow.com/questions/63531652/how-do-i-apply-react-memo-to-all-components-in-an-array
   const items = APIDoc.map((n, i) => {
     return (
-      <div key={i}>
+      <div key={n.title}>
         <Section
           {...n}
           onIntercepted={(id) => setSection(id)}
@@ -77,15 +118,19 @@ const PrettyRestDoc: FC<Props> = ({docCustom, docSwagger, roles}) => {
       </div>
     );
   });
+
   const memoizedItems = useMemo(() => {
     return items.map((item) => React.memo(() => item));
   }, [APIDoc]);
+
   let itemarray = [];
   let index = 0;
+
   for (const MemoizedItem of memoizedItems) {
     itemarray.push(<MemoizedItem key={index} />);
     index++;
   }
+
   return (
     <>
       <Header openSearchModal={openSearchModal} />