From ef78dfa54f1501b5961a3b17e3208cdcd5460f24 Mon Sep 17 00:00:00 2001 From: vik378 Date: Thu, 27 Jun 2024 17:25:02 +0200 Subject: [PATCH] feat: Template card shows badges --- frontend/src/components/Badge.jsx | 15 ++++++ frontend/src/components/TemplateCard.jsx | 49 ++++++++++++++++---- frontend/src/components/ViewsList.jsx | 2 +- frontend/src/stories/TemplateCard.stories.js | 34 +++++++------- templates/cross-cutting/index.yaml | 1 + templates/logical-architecture/index.yaml | 3 ++ templates/physical-architecture/index.yaml | 4 ++ templates/system-analysis/index.yaml | 2 + 8 files changed, 83 insertions(+), 27 deletions(-) create mode 100644 frontend/src/components/Badge.jsx diff --git a/frontend/src/components/Badge.jsx b/frontend/src/components/Badge.jsx new file mode 100644 index 0000000..c15c79f --- /dev/null +++ b/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" }) => ( +
+ {children} +
+); diff --git a/frontend/src/components/TemplateCard.jsx b/frontend/src/components/TemplateCard.jsx index 1495688..67345e0 100644 --- a/frontend/src/components/TemplateCard.jsx +++ b/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="" +}) => (
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' }>
-
- {template.name} -
-

- {template.description} +

+
+ {name} +
+ {instances > 0 && {instances}} +
+

+ {description}

+
+ {isBroken && Broken} + {isExperimental && Experimental} + {isDocument && Document} +
); diff --git a/frontend/src/components/ViewsList.jsx b/frontend/src/components/ViewsList.jsx index e09370f..d7fa2d0 100644 --- a/frontend/src/components/ViewsList.jsx +++ b/frontend/src/components/ViewsList.jsx @@ -42,7 +42,7 @@ export const ViewsList = ({ templates, cardClickCallback }) => { {templates[cat].map((template) => ( ))} diff --git a/frontend/src/stories/TemplateCard.stories.js b/frontend/src/stories/TemplateCard.stories.js index 466a560..0f2417e 100644 --- a/frontend/src/stories/TemplateCard.stories.js +++ b/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) } }; diff --git a/templates/cross-cutting/index.yaml b/templates/cross-cutting/index.yaml index bce67bb..672be64 100644 --- a/templates/cross-cutting/index.yaml +++ b/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 diff --git a/templates/logical-architecture/index.yaml b/templates/logical-architecture/index.yaml index b60fe08..20b67cd 100644 --- a/templates/logical-architecture/index.yaml +++ b/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 diff --git a/templates/physical-architecture/index.yaml b/templates/physical-architecture/index.yaml index 2157c50..7fed073 100644 --- a/templates/physical-architecture/index.yaml +++ b/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 diff --git a/templates/system-analysis/index.yaml b/templates/system-analysis/index.yaml index d4a96a5..40012be 100644 --- a/templates/system-analysis/index.yaml +++ b/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