Merge pull request #12 from baptistelechat:v0.4.0

V0.4.0

Author: baptistelechat

CHANGELOG.md

@@ -7,6 +7,24 @@ and this project adheres to [Semantic Versioning].
 
 <!-- ## Unreleased -->
 
+## [0.4.0] - 2024-09-02
+
+### Added
+
+- Reading composer.json for projects written in PHP
+- Display the registry where documentation is located with a colored circle (red = npm / yellow = packagist)
+- Add the ability to search documentation in the packagist's registry
+- Adding a list of keywords that filter the search results with a specific registry
+- Filter the list of documentation by registry at the click of a button below the search bar
+
+### Changed
+- Keep only one lottie animation for the loader
+
+### Fixed
+
+- Fix reload command that not correctly refresh documentation list after installing or removing packages
+- User can click on the navigation button in the search bar and switch to the search documentation list even if the button is disabled
+
 ## [0.3.0] - 2024-08-27
 
 ### Added
@@ -78,3 +96,4 @@ and this project adheres to [Semantic Versioning].
 [0.2.0]: https://github.com/baptistelechat/codeX/releases/tag/v0.2.0
 [0.2.1]: https://github.com/baptistelechat/codeX/releases/tag/v0.2.1
 [0.3.0]: https://github.com/baptistelechat/codeX/releases/tag/v0.3.0
+[0.4.0]: https://github.com/baptistelechat/codeX/releases/tag/v0.4.0

README.md

@@ -12,12 +12,43 @@ The codeX extension allows the user to read dependency documentation in VSCode:
 - Display of dependency name, available documentation version and short description if available
 - Opening documentation in an editor side panel
 - Display of a markdown interpreter for documentation hosted on GitHub
-- Search a package documentation in the NPM registry
+- Search a package documentation
 
 Go to your activity bar to see all available websites. After installation, a new icon appears to access the extension!
 
 ![Sidebar](https://raw.githubusercontent.com/baptistelechat/codeX/main/src/lib/assets/images/captures/sidebar.png)
 
+## 🔎 Search a package
+
+With codeX, you can effortlessly search for documentation for any package directly from Visual Studio Code. Simply use the search bar provided by the extension to find the relevant documentation for your dependencies. Whether you're working with npm or packagist **(other popular package managers will be available soon).**
+
+<u>Quick access :</u>
+Open documentation in a side panel or directly in your default web browser with a single click.
+<u>Automatic registry detection :</u>
+CodeX intelligently detects the registry based on your query and directs you to the correct documentation source.
+<u>Use keywords :</u>
+You can filter results according to specific registries (npm or packagist for the moment).
+
+![Sidebar](https://raw.githubusercontent.com/baptistelechat/codeX/main/src/lib/assets/images/captures/searchbar.png)
+
+### 🧙‍♂️ Keywords
+
+You can add keywords to your search if you want to search in a particular registry :
+
+- NPM :
+  - #npm
+  - #js
+  - #node
+  - #nodejs
+  - #javascript
+- Packagist :
+  - #packagist
+  - #pkg
+  - #php
+  - #composer
+
+Examples : "#npm React" or "React #node" or "#php React" or "#javascript #php React" or "#js #php React"
+
 ## 🐛 Error
 
 If you encounter a problem while navigation through the documentation, you can open the current documentation directly in your default web browser at any time. A footer is always available for this eventuality.
@@ -32,7 +63,6 @@ We appreciate your feedback and suggestions for improving this project. If you h
 
 Your feedback is important to us, and will help us make this project even better. Thank you for your participation! 🙏
 
-
 ## 🔄 Translation
 
 This extension will soon use l10n (localization) and is currently available in :

package.json

@@ -68,6 +68,12 @@
         "category": "CodeX",
         "title": "Feedback",
         "icon": "$(comment)"
+      },
+      {
+        "command": "codeX.getHelp",
+        "category": "CodeX",
+        "title": "Get Help",
+        "icon": "$(question)"
       }
     ],
     "menus": {
@@ -78,13 +84,18 @@
           "when": "view == codeX.documentations"
         },
         {
-          "command": "codeX.feedback",
+          "command": "codeX.getHelp",
           "group": "navigation@2",
+            "when": "view == codeX.documentations"
+        },
+        {
+          "command": "codeX.feedback",
+          "group": "navigation@3",
           "when": "view == codeX.documentations"
         },
         {
           "command": "codeX.reset",
-          "group": "navigation@3",
+          "group": "navigation@4",
           "when": "view == codeX.documentations"
         }
       ]

src/app/Sidebar/components/loader.ts

@@ -1,6 +1,3 @@
-import lottieFiles from "../constants/lottieFiles";
-import getRandomLottieFile from "../utils/getRandomLottieFile";
-
 const loader = () => {
   const skeleton = `<div class="flex animate-pulse items-center gap-4">
     <div class="size-10 rounded-md bg-slate-300"></div>
@@ -17,26 +14,16 @@ const loader = () => {
         </div>`;
 
   const skeletons = Array.from({ length: 20 }, () => skeleton).join("");
-  const activeLottieFileId = getRandomLottieFile().id;
-  const lottieAnimations = lottieFiles
-    .map(
-      (lottieFile) => `<div id="lottie-animation-${
-        lottieFile.id
-      }" class="lottieAnimation relative z-10 size-full px-6 py-4 ${
-        lottieFile.id === activeLottieFileId ? "" : "hidden"
-      }">
-        <dotlottie-player id="loader-dotlottie-player" src="${
-          lottieFile.url
-        }" background="transparent" speed="1" loop autoplay class="size-full"></dotlottie-player>
-      </div>`
-    )
-    .join("");
+  const lottieAnimation = `
+      <div id="lottie-animation-10" class="lottieAnimation relative z-10 size-full px-6 py-4">
+        <dotlottie-player id="loader-dotlottie-player" src="https://lottie.host/3ad18b31-d21a-4126-a571-fba2a51ca606/kizxZU1mun.lottie" background="transparent" speed="1" loop autoplay class="size-full"></dotlottie-player>
+      </div>`;
 
   return `<div id="loader" class="hidden relative h-screen w-full overflow-hidden">
       <div class="absolute inset-0 z-0 space-y-4 blur-sm mt-20 p-4 size-full">
         ${skeletons}
       </div>
-      ${lottieAnimations}
+      ${lottieAnimation}
     </div>`;
 };
 

src/app/Sidebar/components/registryButton.ts

@@ -0,0 +1,27 @@
+const registryButton = (
+  hideRegistries: ("npm" | "packagist")[],
+  registry: "npm" | "packagist",
+  dependenciesCount: number
+) => {
+  const isRegistryHidden = hideRegistries.includes(registry);
+
+  return `<div id="registry-${registry}" class="action-item registry-action-item ${
+    dependenciesCount > 0 ? "flex" : "hidden"
+  } ${
+    !isRegistryHidden ? "hover:brightness-90" : ""
+  } w-fit items-center justify-center rounded py-1.5 px-2 bg-[--vscode-toolbar-hoverBackground] hover:cursor-pointer">
+        <div class="${
+          isRegistryHidden ? "brightness-50" : ""
+        } registry-data flex items-center justify-center gap-1">
+          <div class="size-2.5 rounded-full ${
+            registry === "npm" ? "bg-red-400" : "bg-yellow-400"
+          }"></div>
+          <p id="${registry}-dependencies" class="font-semibold italic">${dependenciesCount}</p>
+        </div>
+        <div class="tooltip tooltip-registry-subtitle tooltip-registry-${registry}-subtitle">${
+    registry === "npm" ? "Npm" : "Packagist"
+  }</div>
+      </div>`;
+};
+
+export default registryButton;

src/app/Sidebar/components/searchInput.ts

@@ -1,23 +1,47 @@
+import IDocumentation from "../../../lib/interfaces/IDocumentation";
 import navigationButton from "./navigationButton";
+import registryButton from "./registryButton";
 
 const searchInput = (
   searchValue: string,
   searchMode: boolean,
-  documentationLength: number,
-  searchDocumentationLength: number
+  documentations: IDocumentation[],
+  searchDocumentations: IDocumentation[],
+  hideRegistries: ("npm" | "packagist")[]
 ) => {
   const subtitle = searchMode
-    ? searchDocumentationLength + " documentation(s) found"
-    : documentationLength + " documentation(s) installed";
+    ? searchDocumentations.length + " documentation(s) found"
+    : documentations.length + " documentation(s) loaded";
+
+  const npm = searchMode
+    ? searchDocumentations.filter(
+        (documentation) => documentation.registry === "npm"
+      ).length
+    : documentations.filter((documentation) => documentation.registry === "npm")
+        .length;
+
+  const packagist = searchMode
+    ? searchDocumentations.filter(
+        (documentation) => documentation.registry === "packagist"
+      ).length
+    : documentations.filter(
+        (documentation) => documentation.registry === "packagist"
+      ).length;
 
   return `<div class="flex w-full gap-2">
-    ${navigationButton(searchMode, searchDocumentationLength)}
-    <input id="search-package-input" type="text" placeholder="Search documentations..." class="w-full appearance-none rounded-md p-4 leading-tight ring-1 ring-inset focus:outline-none focus:ring-sky-500" value="${searchValue}" />
+    ${navigationButton(searchMode, searchDocumentations.length)}
+      <input id="search-package-input" type="text" placeholder="Search documentations..." class="w-full appearance-none rounded-md p-4 leading-tight ring-1 ring-inset focus:outline-none focus:ring-sky-500" value="${searchValue}" />
     <div id="search-package-button" class="flex items-center justify-center gap-2 rounded bg-sky-500 px-3 py-2 text-slate-50 hover:cursor-pointer hover:bg-sky-400">
       <div class="codicon codicon-search" aria-label="search"></div>
     </div>
   </div>
-  <p id="documentation-found-length" class="italic">${subtitle}</p>`;
+  <div id="subtitle" class="flex items-center gap-4">
+    <p class="italic">${subtitle}</p>
+    <div class="flex gap-3">
+      ${registryButton(hideRegistries, "npm", npm)}
+      ${registryButton(hideRegistries, "packagist", packagist)}
+    </div>
+  </div>`;
 };
 
 export default searchInput;