Adds tags to tools-table (#203)

src/components/ui/tables/CommunityToolsTable.astro

@@ -7,28 +7,41 @@ interface Props {
 }
 
 function getUniqueAttributes(tools: CommunityToolCollection) {
-  const creatorNames = new Set<string>();
-  const tags = new Set<string>();
-  const licenses = new Set<string>();
+  const creatorNames = new Map<string, true>();
+  const tags = new Map<string, true>();
+  const licenses = new Map<string, true>();
 
   for (const tool of tools) {
-    if (!tool.creators) {
-      continue;
+    if (tool.creators) {
+      for (const creator of tool.creators) {
+        creatorNames.set(creator.name, true);
+      }
+    }
+    if (tool.tags) {
+      for (const tag of tool.tags) {
+        tags.set(tag.toLowerCase(), true);
+      }
     }
-    tool.creators.forEach(creator => creatorNames.add(creator.name));
-    (tool.tags || []).forEach(tag => tags.add(tag));
-    licenses.add(tool.license);
+    licenses.set(tool.license, true);
   }
 
   return {
-    creatorNames: Array.from(creatorNames),
-    tags: Array.from(tags),
-    licenses: Array.from(licenses),
+    creatorNames: Array.from(creatorNames.keys()).sort((a, b) => a.localeCompare(b)),
+    tags: Array.from(tags.keys()).sort((a, b) => a.localeCompare(b)),
+    licenses: Array.from(licenses.keys()).sort((a, b) => a.localeCompare(b)),
   };
 }
 
 const { tools } = Astro.props;
 const { creatorNames, tags, licenses } = getUniqueAttributes(tools);
+
+// Process tools: lowercase and sort tags
+const processedTools = tools.map((tool) => ({
+  ...tool,
+  tags: tool.tags
+    ? tool.tags.map((tag) => tag.toLowerCase()).sort((a, b) => a.localeCompare(b))
+    : [],
+}));
 ---
 
 <div class="mx-auto max-w-[85rem] px-4 py-8 sm:px-6 sm:py-16 lg:px-8 lg:py-14 2xl:max-w-full">
@@ -69,7 +82,7 @@ const { creatorNames, tags, licenses } = getUniqueAttributes(tools);
 
   </div>
   <div id="community-tools-table-wrapper"
-       data-community-tools={JSON.stringify(tools)}
+       data-community-tools={JSON.stringify(processedTools)}
        class="overflow-hidden border border-gray-200 dark:border-gray-700 md:rounded-lg">
   </div>
 </div>
@@ -233,19 +246,33 @@ const { creatorNames, tags, licenses } = getUniqueAttributes(tools);
       },
       enableSorting: false,
       cell: (props) => {
-        const { description } = props.row.original;
+        const { description, tags } = props.row.original;
 
-        if (!description) {
-          return '';
-        }
+        const tagsHtml = tags?.map((tag) => `
+          <span class="inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium text-gray-500 ring-1 ring-inset ring-pink-500/60">
+            ${tag}
+          </span>
+        `).join('') || '';
 
-        return `
+        const tagsWrapper = tagsHtml
+          ? `<div class="flex flex-wrap justify-start gap-1 mt-4 first:mt-0">${tagsHtml}</div>`
+          : '';
+
+        const descriptionHtml = description
+          ? `
           <div class="prose inline py-1 text-sm font-normal rounded-full text-gray-500 gap-x-2 dark:text-gray-400 prose-a:cursor-pointer prose-a:transition-colors prose-a:duration-200 dark:hover:prose-a:text-gray-500 dark:prose-a:text-gray-300 hover:prose-a:text-gray-500 focus:prose-a:outline-none">
             ${description}
           </div>
-        `;
+        `
+          : '';
+
+        return `${descriptionHtml}${tagsWrapper}`;
       }
     }),
+    columnHelper.accessor('tags', {
+      cell: props => props.getValue(),
+      filterFn: 'arrIncludesSome',
+    }),
     columnHelper.accessor('license', {
       header: () => 'License',
       filterFn: 'arrIncludesSome',
@@ -310,6 +337,9 @@ const { creatorNames, tags, licenses } = getUniqueAttributes(tools);
     getFilteredRowModel: getFilteredRowModel(),
     state: {
       columnPinning: {},
+      columnVisibility: {
+        tags: false,
+      },
       pagination: {
         pageIndex: 0,
         pageSize: 20,

src/components/ui/tables/TableSelectFilter.astro

@@ -14,6 +14,10 @@ const { selectId, placeholder, options } = Astro.props;
           multiple=""
           class="hidden"
           data-hs-select=`{
+  "hasSearch": true,
+  "searchPlaceholder": "Search...",
+  "searchClasses": "block w-full text-sm border-gray-200 rounded-lg focus:border-blue-500 focus:ring-blue-500 before:absolute before:inset-0 before:z-[1] dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 py-2 px-3",
+  "searchWrapperClasses": "bg-white p-2 -mx-1 sticky top-0 dark:bg-neutral-900",
   "placeholder": "${placeholder}",
     "toggleTag": "<button type=\\"button\\" aria-expanded=\\"false\\"></button>",
     "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 ps-4 pe-9 flex gap-x-2 text-nowrap w-full cursor-pointer bg-white border border-gray-200 rounded-lg text-start text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-neutral-600",

src/content/community-tools/cli-toolkit.yaml

@@ -3,7 +3,7 @@ subtitle: Spryker Community CLI Toolkit
 description: >-
   A suite of utilities designed to enhance performance in your day-to-day
   operations with Spryker Cloud Commerce OS.
-tags: []
+tags: ["dev", "cli"]
 license: MIT
 creators:
   - name: Community

src/content/community-tools/codeception-module.yaml

@@ -1,7 +1,7 @@
 title: "Codeception Module"
 subtitle: ""
 description: "This module allows developers to test Spryker modules isolated."
-tags: []
+tags: ["testing", "dev"]
 license: "MIT"
 creators:
   - name: "Fond Of"

src/content/community-tools/contentful-connector.yaml

@@ -1,7 +1,7 @@
 title: "Contentful connector"
 subtitle: ""
 description: "A Spryker-Contentful connector. Import content from Contentful to storage and updates it via cronjob."
-tags: []
+tags: ["cms"]
 license: "MIT"
 creators:
   - name: "Fond Of"

src/content/community-tools/google-tag-manager-integration.yaml

@@ -1,7 +1,7 @@
 title: "Google Tag Manager integration"
 subtitle: ""
 description: "The title speaks for itself 🙂"
-tags: []
+tags: ["analytics"]
 license: "MIT"
 creators:
   - name: "Fond Of"

src/content/community-tools/i18n-translations.yaml

@@ -1,7 +1,7 @@
 title: "i18n Translations"
 subtitle: ""
 description: "Adds support for multiple languages to Spryker OS"
-tags: []
+tags: ["translation"]
 license: "MIT"
 creators:
   - name: "Community"

src/content/community-tools/novalnet-b2b-payment-integration.yaml

@@ -1,7 +1,7 @@
 title: "Novalnet B2B Payment integration"
 subtitle: ""
 description: "Novalnet payment module for Spryker simplifies your daily work by automating the entire payment process, from checkout till collection. This module is designed to help you increase your sales by offering various payment methods on a one-page checkout. The module which is perfectly adjusted to the Spryker shop with top-quality range of services of the payment provider."
-tags: []
+tags: ["payment"]
 license: "Custom"
 creators:
   - name: "Novalnet"

src/content/community-tools/novalnet-b2c-marketplace-payment-integration.yaml

@@ -1,7 +1,7 @@
 title: "Novalnet B2C Marketplace Payment Integration"
 subtitle: ""
 description: "Novalnet payment module for Spryker simplifies your daily work by automating the entire payment process, from checkout till collection. This module is designed to help you increase your sales by offering various payment methods on a one-page checkout. The module which is perfectly adjusted to the Spryker shop with top-quality range of services of the payment provider."
-tags: []
+tags: ["payment"]
 license: "Custom"
 creators:
   - name: "Novalnet"

src/content/community-tools/product-management-ai-translator-module.yaml

@@ -1,7 +1,7 @@
 title: "ProductManagementAiTranslator Module"
 subtitle: ""
 description: "This module provides product-related AI translation functionality."
-tags: []
+tags: ["translation", "ai"]
 license: "MIT"
 creators:
   - name: "Community"

src/content/community-tools/pyz-for-php-storm.yaml

@@ -9,7 +9,7 @@ description: >
     <li>Goto-handling for Zed stub calls and their gateway controller actions (URLs are clickable)</li>
     <li>Resolve usages of gateway controller actions in Zed stub calls</li>
   </ul>
-tags: []
+tags: ["phpstorm", "dev", "ide"]
 license: MIT
 creators:
   - name: Turbine Kreuzberg

src/content/community-tools/spryker-debug.yaml

@@ -1,7 +1,7 @@
 title: "Spryker Debug"
 subtitle: ""
 description: "Collection of Spryker-compatible debug and development tools."
-tags: []
+tags: ["dev"]
 license: "MIT"
 creators:
   - name: "Inviqa"

src/content/community-tools/spryker-kit-for-php-storm.yaml

@@ -9,7 +9,7 @@ description: |
     <li>Supported Layers Client, Glue, Service, Shared, Yves, Zed</li>
     <li>Configure desired project namespace</li>
   </ul>
-tags: []
+tags: ["phpstorm", "dev", "ide"]
 license: "MIT"
 creators:
   - name: "Valantic"

src/content/community-tools/two-factor-backend-authentication.yaml

@@ -1,7 +1,7 @@
 title: "Two-factor Backend Authentication"
 subtitle: ""
 description: "Second Factor Authentication for the Spryker Administration Interface"
-tags: []
+tags: ["backoffice", "authentication", "2fa", "security"]
 license: "MIT"
 creators:
   - name: "UFirst Group"