whelk-ui 0.0.0

package/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}

package/README.md

@@ -0,0 +1,5 @@
+# Vue 3 + TypeScript + Vite
+
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "whelk-ui",
+  "private": false,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "lucide-vue-next": "^0.562.0",
+    "vue": "^3.5.24"
+  },
+  "devDependencies": {
+    "@csstools/postcss-global-data": "^3.1.0",
+    "@types/node": "^24.10.1",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vitest/browser-playwright": "^4.0.7",
+    "@vitest/coverage-v8": "^4.0.8",
+    "@vitest/eslint-plugin": "^1.4.0",
+    "@vue/tsconfig": "^0.8.1",
+    "postcss": "^8.5.6",
+    "postcss-custom-media": "^11.0.6",
+    "postcss-nesting": "^13.0.2",
+    "typescript": "~5.9.3",
+    "vite": "^7.2.4",
+    "vite-plugin-vue-devtools": "^8.0.3",
+    "vitest": "^4.0.8",
+    "vitest-browser-vue": "^2.0.1",
+    "vue-tsc": "^3.1.4"
+  }
+}

package/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/src/components/button/ButtonComponent.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+</script>
+
+<template>
+    <button>
+	    Hello World
+    </button>
+</template>
+
+<style scoped>
+button {
+    padding: 0.5rem 1rem;
+    border: var(--border);
+    border-radius: var(--border-radius);
+    border-width: var(--border-width);
+    border-style: var(--border-style);
+    color: var(--text);
+
+	&.compact {
+		padding: 0.25rem 0.125rem;
+		font-size: 0.75rem;
+		line-height: 1rem;
+	}
+
+	&.tiny {
+		padding: 0.125rem 0rem;
+		font-size: 0.75rem;
+		line-height: 0.75rem;
+	}
+
+    &.primary {
+        background-color: var(--primary);
+        border-color: var(--primary);
+
+        &:hover {
+            &:enabled {
+                background-color: var(--primary-hover);
+            }
+        }
+    }
+
+    &.secondary {
+        background-color: var(--secondary);
+        border-color: var(--secondary);
+
+        &:hover {
+            &:enabled {
+                background-color: var(--secondary-hover);
+            }
+        }
+    }
+
+    &.danger {
+        background-color: var(--danger);
+        border-color: var(--danger);
+
+        &:hover {
+            &:enabled {
+                background-color: var(--danger-hover);
+            }
+        }
+    }
+
+    &.warning {
+        background-color: var(--warning);
+        border-color: var(--warning);
+
+        &:hover {
+            &:enabled {
+                background-color: var(--warning-hover);
+            }
+        }
+    }
+
+    &.success {
+        background-color: var(--success);
+        border-color: var(--success);
+
+        &:hover {
+            &:enabled {
+                background-color: var(--success-hover);
+            }
+        }
+    }
+
+    &.info {
+        background-color: var(--info);
+        border-color: var(--info);
+
+        &:hover {
+            &:enabled {
+                background-color: var(--info-hover);
+            }
+        }
+    }
+
+    &.loading {
+        animation: loading-animation 1s infinite linear;
+    }
+}
+
+@keyframes loading-animation {
+    0% {
+        color: var(--text);
+    }
+    50% {
+        color: var(--text-muted);
+    }
+    100% {
+        color: var(--text);
+    }
+}
+</style>

package/src/index.ts

@@ -0,0 +1,3 @@
+import ButtonComponent from './components/button/ButtonComponent.vue';
+
+export { ButtonComponent };

package/src/styles/_accessibility.css

@@ -0,0 +1,11 @@
+.hidden-visually {
+    position: absolute;
+    overflow: hidden;
+    white-space: nowrap;
+    margin: 0;
+    padding: 0;
+    height: 1px;
+    width: 1px;
+    clip: rect(0 0 0 0);
+    clip-path: inset(100%);
+}

package/src/styles/main.css

@@ -0,0 +1,84 @@
+@import "_accessibility.css";
+@import "@/styles/variables/_general_variables.css";
+
+@font-face {
+    font-family: "Roboto";
+    src: url("@/assets/fonts/Roboto-Regular.ttf") format("truetype");
+    font-weight: 400;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "Roboto";
+    src: url("@/assets/fonts/Roboto-Thin.ttf") format("truetype");
+    font-weight: 100;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "CalSans";
+    src: url("@/assets/fonts/CalSans-Regular.ttf") format("truetype");
+    font-style: normal;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    margin: 0;
+    font-family: "CalSans",
+    sans-serif;
+    font-weight: normal;
+    font-style: normal;
+    color: var(--text-red);
+}
+
+h1 {
+    font-size: 2rem;
+    line-height: 2.125rem;
+    font-weight: bold;
+    @media (--large-screen) {
+        font-size: 3rem;
+        line-height: 3.25rem;
+    }
+}
+
+h2 {
+    font-size: 1.5rem;
+    line-height: 1.625rem;
+    font-weight: bold;
+    @media (--large-screen) {
+        font-size: 2rem;
+        line-height: 2.25rem;
+    }
+}
+
+p, label, button {
+    font-size: 1.25rem;
+    font-family: "Roboto", sans-serif;
+    line-height: 1.5rem;
+    color: var(--text);
+    margin-bottom: 0;
+    @meida (--large-screen) {
+        font-size: 1rem;
+        line-height: 1.25rem;
+    }
+}
+
+input, textarea {
+    font-family: "Roboto", sans-serif;
+    font-size: 1.5rem;
+    line-height: 1.75rem;
+    padding: 0.5rem;
+}
+
+.sub-text {
+    font-family: "Roboto", sans-serif;
+    font-weight: 100;
+    margin: 0.5rem 0 3rem 0;
+}
+
+.mt-0 {
+    margin-top: 0 !important;
+}
+
+.mb-0 {
+    margin-bottom: 0 !important;
+}

package/src/styles/variables/_general_variables.css

@@ -0,0 +1,84 @@
+:root { /* Set all the grid size here */
+    --xx-small-grid-width: 320px;
+    --x-small-grid-width: 400px;
+    --small-grid-width: 640px;
+    --medium-grid-width: 768px;
+    --large-grid-width: 1024px;
+    --x-large-grid-width: 1280px;
+    --xx-large-grid-width: 1536px; /* Set all variables in here for globals */
+    /*--xx-small-card-width: 320px;*/ /*--x-small-card-width: 400px;*/
+    /*--small-card-width: 640px;*/ /*--medium-card-width: 768px;*/
+    /*--large-card-width: 1024px;*/ /*--x-large-card-width: 1280px;*/
+    /*--xx-large-card-width: 1536px;*/ /* Set all the border variables here */
+    --border-radius: 5px;
+    --border-style: solid;
+    --border-width: 1px;
+    /* Set all the
+   colour variables here */
+    --bg-dark: hsl(26 53% 89%);
+    --bg: hsl(26 100% 94%);
+    --bg-light: hsl(26 100% 100%);
+    --text: hsl(16 100% 4%);
+    --text-red: hsl(8, 93%, 43%);
+    --text-muted: hsl(26 35% 27%);
+    --highlight: hsl(26 100% 99%);
+    --border: hsl(26 21% 49%);
+    --border-muted: hsl(26 27% 61%);
+    --primary: hsl(27 65% 66%);
+    --primary-hover: hsl(27 65% 76%);
+    --secondary: hsl(204 74% 68%);
+    --secondary-hover: hsl(204 74% 78%);
+    --danger: hsl(9 26% 64%);
+    --danger-hover: hsl(9 26% 74%);
+    --warning: hsl(52 19% 57%);
+    --warning-hover: hsl(52 19% 67%);
+    --success: hsl(146 17% 59%);
+    --success-hover: hsl(146 17% 69%);
+    --info: hsl(217 28% 65%);
+    --info-hover: hsl(217 28% 75%); /* Set all the object colours here */
+    --document-links: hsl(203.53, 40.8%, 24.51%);
+    --document-links-hover: hsl(203.53, 40.8%, 75.51%);
+    --customer-background: hsl(203.53, 40.8%, 75.49%);
+    --customer-text: hsl(203.53, 40.8%, 24.51%);
+    --kanban-board-background: hsl(78.26, 88.46%, 89.8%);
+    --kanban-board-text: hsl(78.26, 88.46%, 10.2%);
+    --kanban-card-background: hsl(74.12, 35.56%, 53.14%);
+    --kanban-card-text: hsl(74.12, 35.56%, 10.86%);
+    --organisation-background: hsl(52.05, 85.57%, 61.96%);
+    --organisation-text: hsl(52.05, 85.57%, 8.04%);
+    --request-for-change-background: hsl(67.61, 100%, 72.16%);
+    --request-for-change-text: hsl(67.61, 100%, 7.84%);
+    --requirement-background: hsl(200.31, 94.2%, 86.47%);
+    --requirement-text: hsl(200.31, 94.2%, 10.53%);
+    --requirement-item-background: hsl(322.8, 29.76%, 67.06%);
+    --requirement-item-text: hsl(322.8, 29.76%, 8.94%);
+    --project-background: hsl(333.62, 49.57%, 45.88%);
+    --project-text: hsl(333.62, 49.57%, 8.12%);
+    --task-background: hsl(224, 10.2%, 71.82%);
+    --task-text: hsl(224, 10.2%, 7.18%);
+}
+
+.dark {
+    --bg-dark: hsl(16 100% 2%);
+    --bg: hsl(22 76% 4%);
+    --bg-light: hsl(26 50% 8%);
+    --text: hsl(26 100% 94%);
+    --text-red: hsl(8,
+    93%, 23%);
+    --text-muted: hsl(26 34% 68%);
+    --highlight: hsl(26 26% 38%);
+    --border: hsl(26 35% 27%);
+    --border-muted: hsl(27 56% 16%);
+    --primary: hsl(32 100% 20%);
+    --primary-hover: hsl(32 100% 10%);
+    --secondary: hsl(198 100% 20%);
+    --secondary-hover: hsl(198 100% 10%);
+    --danger: hsl(9 21% 41%);
+    --danger-hover: hsl(9 21% 31%);
+    --warning: hsl(52 23% 34%);
+    --warning-hover: hsl(52 23% 24%);
+    --success: hsl(147 19% 36%);
+    --success-hover: hsl(147 19% 26%);
+    --info: hsl(217 22% 41%);
+    --info-hover: hsl(217 22% 31%);
+}

package/src/styles/variables/_media_variables.css

@@ -0,0 +1,10 @@
+/* Mobile phone screens will have a screen size smaller than 640 * Small screens
+will have a screen size of 640px or larger * Medium screen will have a screen
+size of 768px or larger * etc. * * Small screens are considered mobile phones *
+Medium screens are considered tables * Large screens are considered laptops *
+etc. */
+@custom-media --small-screen (min-width: 640px);
+@custom-media --medium-screen (min-width: 768px);
+@custom-media --large-screen (min-width: 1024px);
+@custom-media --x-large-screen (min-width: 1280px);
+@custom-media --2x-large-screen (min-width: 1536px);

package/tsconfig.app.json

@@ -0,0 +1,16 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "types": ["vite/client"],
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+//    "verbatimModuleSyntax": true,
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,50 @@
+import { fileURLToPath, URL } from 'node:url'
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueDevTools from 'vite-plugin-vue-devtools'
+import postcssCustomMedia from 'postcss-custom-media'
+import postcssNesting from 'postcss-nesting'
+import postcssGlobalData from '@csstools/postcss-global-data'
+import { resolve } from 'path'
+
+
+// https://vite.dev/config/
+export default defineConfig({
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.ts'),
+      name: 'whelk-ui',
+      fileName: 'whelk-ui',
+    },
+    rollupOptions: {
+      external: ['vue'],
+      output: {
+        globals: {
+          vue: 'Vue',
+        },
+      },
+    },
+  },
+    css: {
+        postcss: {
+            plugins: [
+                postcssNesting,
+                postcssGlobalData({
+                    files: [
+                        './src/styles/variables/_media_variables.css',
+                    ]
+                }),
+                postcssCustomMedia,
+            ]
+        }
+    },
+  plugins: [
+    vue(),
+    vueDevTools(),
+  ],
+  resolve: {
+    alias: {
+        '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
+})