feat: Template card shows badges

frontend/src/components/Badge.jsx

@@ -0,0 +1,15 @@
+
+const color_classes = {
+    "default": "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300",
+    "danger": "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300",
+    "success": "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300",
+    "warning": "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300"
+}
+/*
+* provides a badge that may have different colors
+*/
+export const Badge = ({ children, color="default" }) => (
+    <div className={"text-xs inline-block font-medium me-2 px-2.5 py-1 rounded-full " + color_classes[color] }>
+        {children}
+    </div>
+);

frontend/src/components/TemplateCard.jsx

@@ -1,24 +1,53 @@
 // Copyright DB InfraGO AG and contributors
 // SPDX-License-Identifier: Apache-2.0
 
-export const TemplateCard = ({ template, onClickCallback }) => (
+import { FlaskConical, TriangleAlert, Book, FileStack } from "lucide-react";
+import { Badge } from "./Badge";
+
+/**
+ * TemplateCard shall introduce the template to the user and provide some basic insights:
+ * - is this a template of a model element or a document
+ * - is it a stable template or an experimental thing / not for production
+ * - how many object / document instances this template applies to
+ * - indicate if the template is broken / cant enumerate objects / other issues
+ * - maybe indicate modeling rules compliance score
+ */
+export const TemplateCard = ({ 
+  name, 
+  description,
+  idx,
+  onClickCallback,
+  isDocument=false,
+  isExperimental=false,
+  instances=0,
+  isBroken=false,
+  errorMessage=""
+}) => (
   <div
-    onClick={() => onClickCallback(template.idx)}
+    onClick={() => onClickCallback(idx)}
     className={
       'm-2 mt-6 max-w-sm cursor-pointer rounded-lg bg-gray-200 shadow-md ' +
       'hover:bg-custom-light dark:bg-custom-dark-2 dark:shadow-dark ' +
       'dark:hover:bg-custom-dark-4'
     }>
     <div className="p-5">
-      <h5
-        className={
-          'mb-2 text-2xl font-normal text-gray-900 dark:text-gray-100'
-        }>
-        {template.name}
-      </h5>
-      <p className="mb-3 font-normal text-gray-700 dark:text-gray-300">
-        {template.description}
+      <div className="flex flex-row justify-between">
+        <h5
+          className={
+            'mb-2 text-2xl font-normal text-left text-gray-900 dark:text-gray-100'
+          } style={{	overflowWrap: "break-word" }} >
+          {name}
+        </h5>
+        {instances > 0 && <span className="ml-0.5"><FileStack size={16} style={{display: "inline-block"}}/> {instances}</span>}
+      </div>
+      <p className="mb-3 font-normal text-gray-700 dark:text-gray-300 text-left">
+        {description}
       </p>
+      <div className={"text-left"}>
+      {isBroken && <Badge color={"danger"}><TriangleAlert  size={16} style={{display: "inline-block"}}/> Broken</Badge>}
+      {isExperimental && <Badge color={"warning"}><FlaskConical  size={16} style={{display: "inline-block"}}/> Experimental</Badge>}
+      {isDocument && <Badge><Book size={16} style={{display: "inline-block"}}/> Document</Badge>}
+      </div>
     </div>
   </div>
 );

frontend/src/components/ViewsList.jsx

@@ -42,7 +42,7 @@ export const ViewsList = ({ templates, cardClickCallback }) => {
                 {templates[cat].map((template) => (
                   <TemplateCard
                     key={template.idx}
-                    template={template}
+                    {...template}
                     onClickCallback={cardClickCallback}
                   />
                 ))}

frontend/src/stories/TemplateCard.stories.js

@@ -8,6 +8,7 @@ import { TemplateCard } from '../components/TemplateCard';
 export default {
   title: 'Example/TemplateCard',
   component: TemplateCard,
+  tags: ['autodocs'],
   // This component will have an automatically generated Autodocs entry:
   //  https://storybook.js.org/docs/writing-docs/autodocs
   parameters: {
@@ -17,38 +18,39 @@ export default {
   }
 };
 
-export const Normal = {
+export const ExperimentalDocument = {
   args: {
-    template: {
-      name: 'System Capability',
-      description: `Specifies what the system should be capable of
+    name: 'System Capability',
+    description: `Specifies what the system should be capable of
       and how it needs to interact with external actors.`,
-      idx: 'THE IDENTIFIER'
-    },
+    idx: 'THE IDENTIFIER',
+    isDocument: true,
+    isExperimental: true,
+    instances: 0, 
+    isBroken: false,
     onClickCallback: (idx) => alert(idx)
   }
 };
 
 export const Draft = {
   args: {
-    template: {
-      name: 'System Capability',
-      description: `Specifies what the system should be capable of
+    name: 'System Capability',
+    description: `Specifies what the system should be capable of
       and how it needs to interact with external actors.`,
-      idx: 'THE IDENTIFIER'
-    },
+    idx: 'THE IDENTIFIER',
+    instances: 42,
+    isExperimental: true,
     onClickCallback: (idx) => alert(idx)
   }
 };
 
 export const Broken = {
   args: {
-    template: {
-      name: 'System Capability',
-      description: `Specifies what the system should be capable of
+    name: 'System Capability',
+    description: `Specifies what the system should be capable of
       and how it needs to interact with external actors.`,
-      idx: 'THE IDENTIFIER'
-    },
+    idx: 'THE IDENTIFIER',
+    isBroken: true,
     onClickCallback: (idx) => alert(idx)
   }
 };

templates/cross-cutting/index.yaml

@@ -35,6 +35,7 @@ templates:
       name: State Machine Regions
       description: Defines a state machine region of a component or an actor
       category: xc
+      isExperimental: true
       variable:
         name: object
         type: Region

templates/logical-architecture/index.yaml

@@ -7,6 +7,7 @@ templates:
   idx: logical-component
   description: Specifies a logical component. This is a ported template from a prototype project.
   category: la
+  isExperimental: true
   variable:
     name: object
     type: LogicalComponent
@@ -17,6 +18,7 @@ templates:
   name: Logical Interfaces
   description: Defines interfaces between actors and logical system components
   category: la
+  isExperimental: true
   variable:
     name: object
     type: ComponentExchange
@@ -37,6 +39,7 @@ templates:
   name: Logical Component States and Modes
   description: Defines states and modes of a system component or an actor
   category: la
+  isExperimental: true
   variable:
     name: object
     type: Mode

templates/physical-architecture/index.yaml

@@ -7,6 +7,7 @@ templates:
   name: Physical Interface
   description: Defines a Physical Interface between 2 components
   category: pa
+  isExperimental: true
   variable:
     name: object
     type: PhysicalLink
@@ -17,6 +18,7 @@ templates:
   name: Physical Component
   description: Defines a Physical Component
   category: pa
+  isExperimental: true
   variable:
     name: object
     type: PhysicalComponent
@@ -27,6 +29,7 @@ templates:
   name: Physical Functions
   description: Defines function of a physical component or an actor
   category: pa
+  isExperimental: true
   variable:
     name: object
     type: PhysicalFunction
@@ -37,6 +40,7 @@ templates:
   name: Software Interfaces
   description: Defines interfaces between software components
   category: pa
+  isExperimental: true
   variable:
     name: object
     type: ComponentExchange

templates/system-analysis/index.yaml

@@ -40,6 +40,8 @@ templates:
   description: defines the need for the system, its boundary and interfaces
   category: sa
   single: true
+  isExperimental: true
+  isDocument: true
   variable:
       name: object
       type: SystemComponent