feat(global): initialize project and framework structure, dockerize

app/app.vue

@@ -1,5 +1,7 @@
 <template>
   <div>
-    Welcome to The SYSTEM
+    <h1 class="sr-only">The SYSTEM</h1>
+    <NuxtLoadingIndicator />
+    <NuxtPage />
   </div>
 </template>

app/assets/css/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

app/assets/scss/_base.scss

@@ -0,0 +1,11 @@
+/* Base document styles */
+html,
+body {
+  height: 100%;
+}
+
+body {
+  color: var(--text-primary);
+  background-color: var(--bg-dark);
+  font-family: "Inter", sans-serif;
+}

app/assets/scss/_utilities.scss

@@ -0,0 +1,8 @@
+/* Custom small utilities */
+.no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}

app/assets/scss/_variables.scss

@@ -0,0 +1,4 @@
+$color-primary: #3b82f6;
+$color-muted: #6b7280;
+$text-primary: #ffffff;
+$text-secondary: #e2e8f0;

app/assets/scss/main.scss

@@ -0,0 +1,3 @@
+@use 'variables';
+@use 'base';
+@use 'utilities';

app/components/PrimeButtonDemo.spec.ts

@@ -0,0 +1,22 @@
+import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import PrimeVue from 'primevue/config';
+import Button from 'primevue/button';
+import Dialog from 'primevue/dialog';
+import PrimeButtonDemo from './PrimeButtonDemo.vue';
+import { it, expect } from 'vitest';
+
+it('opens dialog on click', async () => {
+  const wrapper = mount(PrimeButtonDemo, {
+    attachTo: document.body,
+    global: {
+      plugins: [PrimeVue],
+      components: { Button, Dialog },
+    },
+  });
+
+  await wrapper.find('button').trigger('click');
+  await nextTick();
+
+  expect(document.body.innerHTML).toContain('PrimeVue is working');
+});

app/components/PrimeButtonDemo.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const _open = ref(false);
+</script>
+
+
+<template>
+  <div class="space-y-2">
+    <Button type="button" label="Open Dialog" @click="_open = true" @keyup.enter="_open = true" />
+    <Dialog v-model:visible="_open" modal header="Hello" :draggable="false">
+      <p>PrimeVue is working.</p>
+    </Dialog>
+  </div>
+</template>

app/pages/index.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import PrimeButtonDemo from '@/components/PrimeButtonDemo.vue';
+</script>
+
+<template>
+  <main class="p-6 space-y-4">
+    <section>
+      <h2 class="text-xl font-semibold">Welcome</h2>
+      <p class="text-slate-600">This is the foundation of The SYSTEM.</p>
+    </section>
+    <PrimeButtonDemo />
+  </main>
+</template>