@eventcatalog/core 1.0.0 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eventcatalog/core",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "publishConfig": {
     "access": "public"
   },
@@ -16,7 +16,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@asyncapi/react-component": "^1.0.0-next.35",
+    "@asyncapi/react-component": "1.0.0-next.35",
     "@headlessui/react": "^1.4.2",
     "@heroicons/react": "^1.0.5",
     "@mdx-js/react": "^1.6.22",
@@ -59,5 +59,9 @@
     "trim": "0.0.3",
     "typescript": "^4.6.2"
   },
+  "browser": {
+    "fs": false,
+    "os": false
+  },
   "gitHead": "5f82ce7f267e9b3ec771bbd3cc81359ed0a8fd18"
 }

package/pages/domains.tsx

@@ -135,22 +135,24 @@ export default function Page({ domains }: PageProps) {
                     </h3>
                     <div className="pt-6">
                       <div className="space-y-4">
-                        {section.options.map((option, optionIdx) => (
-                          <div key={option.value} className="flex items-center">
-                            <input
-                              id={`filter-${section.id}-${optionIdx}`}
-                              name={`${section.id}[]`}
-                              defaultValue={option.value}
-                              type="checkbox"
-                              onChange={(event) => handleFilterSelection(option, section.id, event)}
-                              defaultChecked={option.checked}
-                              className="h-4 w-4 border-gray-300 rounded text-gray-600 focus:ring-gray-500"
-                            />
-                            <label htmlFor={`filter-${section.id}-${optionIdx}`} className="ml-3 text-sm text-gray-600">
-                              {option.label}
-                            </label>
-                          </div>
-                        ))}
+                        {section.options
+                          .sort((a, b) => a.value.localeCompare(b.value))
+                          .map((option, optionIdx) => (
+                            <div key={option.value} className="flex items-center">
+                              <input
+                                id={`filter-${section.id}-${optionIdx}`}
+                                name={`${section.id}[]`}
+                                defaultValue={option.value}
+                                type="checkbox"
+                                onChange={(event) => handleFilterSelection(option, section.id, event)}
+                                defaultChecked={option.checked}
+                                className="h-4 w-4 border-gray-300 rounded text-gray-600 focus:ring-gray-500"
+                              />
+                              <label htmlFor={`filter-${section.id}-${optionIdx}`} className="ml-3 text-sm text-gray-600">
+                                {option.label}
+                              </label>
+                            </div>
+                          ))}
                       </div>
                     </div>
                   </div>

package/pages/events.tsx

@@ -238,22 +238,24 @@ export default function Page({ events, services, domains }: PageProps) {
                     </h3>
                     <div className="pt-6">
                       <div className="space-y-4">
-                        {section.options.map((option, optionIdx) => (
-                          <div key={option.value} className="flex items-center">
-                            <input
-                              id={`filter-${section.id}-${optionIdx}`}
-                              name={`${section.id}[]`}
-                              defaultValue={option.value}
-                              type="checkbox"
-                              onChange={(event) => handleFilterSelection(option, section.id, event)}
-                              defaultChecked={option.checked}
-                              className="h-4 w-4 border-gray-300 rounded text-gray-600 focus:ring-gray-500"
-                            />
-                            <label htmlFor={`filter-${section.id}-${optionIdx}`} className="ml-3 text-sm text-gray-600">
-                              {option.label}
-                            </label>
-                          </div>
-                        ))}
+                        {section.options
+                          .sort((a, b) => a.value.localeCompare(b.value))
+                          .map((option, optionIdx) => (
+                            <div key={option.value} className="flex items-center">
+                              <input
+                                id={`filter-${section.id}-${optionIdx}`}
+                                name={`${section.id}[]`}
+                                defaultValue={option.value}
+                                type="checkbox"
+                                onChange={(event) => handleFilterSelection(option, section.id, event)}
+                                defaultChecked={option.checked}
+                                className="h-4 w-4 border-gray-300 rounded text-gray-600 focus:ring-gray-500"
+                              />
+                              <label htmlFor={`filter-${section.id}-${optionIdx}`} className="ml-3 text-sm text-gray-600">
+                                {option.label}
+                              </label>
+                            </div>
+                          ))}
                       </div>
                     </div>
                   </div>

package/pages/services.tsx

@@ -193,22 +193,24 @@ export default function Page({ services }: PageProps) {
                     </h3>
                     <div className="pt-6">
                       <div className="space-y-4">
-                        {section.options.map((option, optionIdx) => (
-                          <div key={option.value} className="flex items-center">
-                            <input
-                              id={`filter-${section.id}-${optionIdx}`}
-                              name={`${section.id}[]`}
-                              defaultValue={option.value}
-                              type="checkbox"
-                              onChange={(event) => handleFilterSelection(option, section.id, event)}
-                              defaultChecked={option.checked}
-                              className="h-4 w-4 border-gray-300 rounded text-gray-600 focus:ring-gray-500"
-                            />
-                            <label htmlFor={`filter-${section.id}-${optionIdx}`} className="ml-3 text-sm text-gray-600">
-                              {option.label}
-                            </label>
-                          </div>
-                        ))}
+                        {section.options
+                          .sort((a, b) => a.value.localeCompare(b.value))
+                          .map((option, optionIdx) => (
+                            <div key={option.value} className="flex items-center">
+                              <input
+                                id={`filter-${section.id}-${optionIdx}`}
+                                name={`${section.id}[]`}
+                                defaultValue={option.value}
+                                type="checkbox"
+                                onChange={(event) => handleFilterSelection(option, section.id, event)}
+                                defaultChecked={option.checked}
+                                className="h-4 w-4 border-gray-300 rounded text-gray-600 focus:ring-gray-500"
+                              />
+                              <label htmlFor={`filter-${section.id}-${optionIdx}`} className="ml-3 text-sm text-gray-600">
+                                {option.label}
+                              </label>
+                            </div>
+                          ))}
                       </div>
                     </div>
                   </div>