feat: basic flow

Signed-off-by: Gašper Grom <[email protected]>

Author: gaspergrom

frontend/app/components/modules/project/components/security/yaml/generate-yaml-modal.vue

@@ -37,7 +37,7 @@ SPDX-License-Identifier: MIT
               >
                 {{ config.label }}
               </lfx-tag>
-              <p class="text-sm text-neutral-600 leading-5">
+              <p class="text-xs text-neutral-600 leading-5">
                 <span v-if="type && step >= 0">Step {{step + 1}}/{{steps.length + 1}} - </span>
                 <span v-if="!type || step < 0">Choose YAML file template</span>
                 <span v-else-if="step < steps.length">{{ currentStep?.label }}</span>

frontend/app/components/modules/project/components/security/yaml/generate-yaml-type.vue

@@ -4,38 +4,36 @@ SPDX-License-Identifier: MIT
 -->
 <template>
   <div class="relative w-full">
-    <h2 class="text-lg font-semibold text-slate-900 leading-7 mb-2">
+    <h2 class="text-lg font-semibold text-slate-900 leading-7 mb-1">
       Choose YAML file template
     </h2>
-    <p class="text-xs font-normal text-neutral-500 leading-4 mb-4">
+    <p class="text-xs font-normal text-neutral-500 leading-4">
       Please select the YAML template file that better aligns with your project repository and security requirements.
     </p>
 
     <div class="pt-6 flex flex-wrap -mx-1.5 gap-y-3">
       <div
         v-for="(option, key) in yamlGenerationConfig"
         :key="key"
-        class="w-1/2 px-1.5"
+        class="w-1/3 px-1.5"
       >
         <div
           class="p-4 rounded-lg border border-neutral-200 h-full transition hover:bg-neutral-50 cursor-pointer"
           :class="model === key ? 'border-neutral-900 bg-neutral-100' : ''"
           @click="model = key"
         >
-          <div class="flex justify-between items-center pb-6">
+          <div class="flex justify-between pb-6">
             <lfx-icon
               :size="24"
               :name="option.icon || 'file'"
               class="text-neutral-400"
             />
-            <lfx-tag
-              v-if="option.recommended"
-              type="solid"
-              variation="neutral"
-              size="small"
-            >
-              Recommended
-            </lfx-tag>
+            <lfx-icon
+              v-if="model === key"
+              name="check-circle"
+              class="font-black"
+              :size="16"
+            />
           </div>
 
           <div class="flex flex-col gap-3">

frontend/app/components/modules/project/config/yaml-generation/basic/basic-yaml.config.ts

@@ -1,20 +1,33 @@
 // Copyright (c) 2025 The Linux Foundation and each contributor.
 // SPDX-License-Identifier: MIT
 import {DateTime} from 'luxon';
-import YamlBasicProjectDetails
-    from "./yaml-basic-project-details.vue";
+import YamlBasicProject
+    from "./yaml-basic-project.vue";
+import YamlBasicProjectRepositories
+    from "./yaml-basic-project-repositories.vue";
+import YamlBasicProjectVulnerability
+    from "./yaml-basic-project-vulnerability.vue";
+import YamlBasicRepository
+    from "./yaml-basic-repository.vue";
+import YamlBasicRepositoryMembers
+    from "./yaml-basic-repository-members.vue";
+import YamlBasicRepositoryLicense
+    from "./yaml-basic-repository-license.vue";
+import YamlBasicRepositorySecurity
+    from "./yaml-basic-repository-security.vue";
 import type {YamlGenerationConfig} from "~/components/modules/project/config/yaml-generation/yaml-generation.config";
 import YamlHeaderInformation
     from "~/components/modules/project/config/yaml-generation/shared/yaml-header-information.vue";
 
 const basicYamlGenerationConfig: YamlGenerationConfig = {
     label: 'Basic',
     icon: 'file-circle-check',
-    description: 'Starting out with a single repository project.',
+    description: 'Essential project security specifications.',
     features: [
-        'Use when you want to get up and running quickly',
-        'Best for projects just beginning to adopt the specification',
-        'Provides basic security insights coverage',
+        'Use as the master security insights file in your main repository.',
+        'Use when you want to get up and running quickly.',
+        'Best for projects just beginning to adopt the specification.',
+        'Provides basic security insights coverage.',
     ],
     steps: [
         {
@@ -23,33 +36,84 @@ const basicYamlGenerationConfig: YamlGenerationConfig = {
         },
         {
             label: 'Project details',
-            component: YamlBasicProjectDetails,
-        }
+            component: YamlBasicProject,
+        },
+        {
+            label: 'Project details | Repositories',
+            component: YamlBasicProjectRepositories,
+        },
+        {
+            label: 'Project details | Vulnerability reporting',
+            component: YamlBasicProjectVulnerability,
+        },
+        {
+            label: 'Repository details',
+            component: YamlBasicRepository,
+        },
+        {
+            label: 'Repository details | Core team members',
+            component: YamlBasicRepositoryMembers,
+        },
+        {
+            label: 'Repository details | License information',
+            component: YamlBasicRepositoryLicense,
+        },
+        {
+            label: 'Repository details | Security self-assessment',
+            component: YamlBasicRepositorySecurity,
+        },
     ],
     template: {
         header: {
             'schema-version': '2.0.0',
             'last-updated': DateTime.now().toISODate(),
             'last-reviewed': DateTime.now().toISODate(),
             url: '',
-            comment:
-                'This file contains the minimum information for both project and repository.\n' +
+            comment: 'This file contains the minimum information for both project and repository.\n' +
                 'It not required to include both a project and repository section if the project\n' +
                 'section is intended to be inherited by repositories via header.project-si-source'
         },
         project: {
             name: '',
-            administrators: [],
-            repositories: [],
-            'vulnerability-reporting': {}
+            administrators: [
+                {
+                    name: '',
+                    affiliation: '',
+                    email: '',
+                    social: '',
+                    primary: false,
+                }
+            ],
+            repositories: [
+                {
+                    name: '',
+                    url: '',
+                    comment: '',
+                }
+            ],
+            'vulnerability-reporting': {
+                'reports-accepted': false,
+                'bug-bounty-available': false,
+            }
         },
         repository: {
             url: '',
             status: '',
-            'accepts-change-request': true,
-            'accepts-automated-change-request': true,
-            'core-team': [],
-            license: {},
+            'accepts-change-request': false,
+            'accepts-automated-change-request': false,
+            'core-team': [
+                {
+                    name: '',
+                    affiliation: '',
+                    email: '',
+                    social: '',
+                    primary: false,
+                }
+            ],
+            license: {
+                url: '',
+                expression: ''
+            },
             security: {
                 assessments: {
                     self: {

frontend/app/components/modules/project/config/yaml-generation/basic/yaml-basic-project-details-repositories.vue

@@ -0,0 +1,101 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <div class="flex flex-col gap-1 pb-6">
+    <p class="text-sm font-semibold text-brand-600">
+      Project details
+    </p>
+    <p class="text-lg font-semibold text-neutral-900">
+      Repositories
+    </p>
+    <p class="text-xs font-normal text-neutral-500">
+      Details about your project repository and contribution policies.
+    </p>
+  </div>
+
+  <div class="flex flex-col gap-4">
+    <article
+      v-for="(repository, index) of model.project.repositories"
+      :key="index"
+      class="bg-white border border-neutral-200 rounded-xl p-4 flex flex-col gap-4"
+    >
+      <div class="flex justify-between items-center min-h-7">
+        <p class="text-sm font-semibold text-neutral-900">
+          Repository #{{index + 1}}
+        </p>
+
+        <lfx-icon-button
+          v-if="model.project.repositories.length > 1"
+          type="default"
+          icon="trash-can"
+          size="small"
+          @click="model.project.repositories.splice(index, 1)"
+        />
+      </div>
+      <lfx-field label="Repository name">
+        <lfx-input
+          v-model="repository.name"
+          placeholder=" "
+        />
+      </lfx-field>
+
+      <lfx-field label="Repository URL">
+        <lfx-input
+          v-model="repository.url"
+          placeholder="https://github.com/your-project/your-repository"
+        />
+      </lfx-field>
+
+      <lfx-field label="Repository comment">
+        <lfx-textarea
+          v-model="repository.comment"
+          placeholder="Brief description of the repository purpose and scope"
+          class="min-h-18"
+        />
+      </lfx-field>
+    </article>
+  </div>
+
+  <!-- Add repository button -->
+  <div class="flex items-center justify-center pt-4">
+    <lfx-button
+      type="transparent"
+      button-style="pill"
+      @click="addRepository"
+    >
+      <lfx-icon name="plus" />
+      Add repository
+    </lfx-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed} from "vue";
+import LfxInput from '~/components/uikit/input/input.vue';
+import LfxField from '~/components/uikit/field/field.vue';
+import LfxTextarea from '~/components/uikit/textarea/textarea.vue';
+import LfxButton from "~/components/uikit/button/button.vue";
+import LfxIcon from "~/components/uikit/icon/icon.vue";
+import LfxIconButton from "~/components/uikit/icon-button/icon-button.vue";
+
+const props = defineProps<{
+  modelValue: object;
+}>();
+
+const emit = defineEmits<{(e: 'update:modelValue', value: object): void }>();
+
+const model = computed<object>({
+  get: () => props.modelValue,
+  set: (value: object) => emit('update:modelValue', value)
+})
+
+const addRepository = () => {
+  model.value.project.repositories.push({
+    name: '',
+    url: '',
+    comment: '',
+  })
+}
+</script>