feat: new invalid asyncapi template (#524)

Co-authored-by: Maciej Urbańczyk <[email protected]>

src/components/Modals/NewFileModal.tsx

@@ -52,6 +52,7 @@ export const NewFileModal = create(() => {
 
   const realLifeExamples = examples.filter((template) => template.type === 'real-example');
   const templates = examples.filter((template) => template.type === 'protocol-example');
+  const tutorials = examples.filter((template) => template.type === 'tutorial-example');
 
   return (
     <ConfirmModal
@@ -81,6 +82,15 @@ export const NewFileModal = create(() => {
               })}
             </div>
           </div>
+          <div>
+            <span className="uppercase text-gray-800 text-sm underline font-bold">Tutorials</span>
+            <div className="grid grid-cols-3 gap-4 py-4">
+              {tutorials.map(({ title, description, template }) => {
+                const isSelected = selectedTemplate.title === title;
+                return <TemplateListItem title={title} description={description} isSelected={isSelected} key={title} onClick={() => setSelectedTemplate({ title, template })} />;
+              })}
+            </div>
+          </div>
           <span className=" text-xs block text-gray-900 text-right ">
             Don&apos;t see what you&apos;re looking for? <br />
             <a

src/examples/index.tsx

@@ -6,13 +6,17 @@ import websocket from './websocket-gemini.yml';
 import mqtt from './streetlights-mqtt.yml';
 import simple from './simple.yml';
 
+// tutorial example
+import invalid from './tutorials/invalid.yml';
+
 // real world examples
 import slack from './real-world/slack-rtm.yml';
 import gitterStreaming from './real-world/gitter-streaming.yml';
 
 const templateTypes = {
   protocol: 'protocol-example',
-  realExample: 'real-example'
+  realExample: 'real-example',
+  tutorial: 'tutorial-example'
 };
 
 export default [
@@ -22,6 +26,12 @@ export default [
     template: simple,
     type: templateTypes.protocol
   },
+  {
+    title: 'Invalid Example',
+    description: () => <>An example of an invalid AsyncAPI document. This is only for educational purposes, to learn document validation.</>,
+    template: invalid,
+    type: templateTypes.tutorial
+  },
   {
     title: 'Apache Kafka',
     description: () => <>A framework implementation of a software bus using stream-processing. Open Source developed by the Apache Software Foundation.</>,

src/examples/tutorials/invalid.yml

@@ -0,0 +1,33 @@
+asyncapi: '1.0.0'
+info:
+  title: Streetlights API
+  version: '1.0.0'
+  license:
+    name: Apache 2.0
+    url: 'https://www.apache.org/licenses/LICENSE-2.0'
+servers:
+  mosquitto:
+    url: mqtt://test.mosquitto.org
+    protocol: mqtt
+channels:
+  light/measured:
+    publish:
+      summary: Inform about environmental lighting conditions for a particular streetlight.
+      operationId: onLightMeasured
+      message:
+        name: LightMeasured
+        payload:
+          type: object
+          properties:
+            id:
+              type: integer
+              minimum: true
+              description: Id of the streetlight.
+            lumens:
+              type: integer
+              minimum: 0
+              description: Light intensity measured in lumens.
+            sentAt:
+              type: integer
+              format: date-time
+              description: Date and time when the message was sent.