(vite) feature flow as a VueJS app

This commit is contained in:
Julien Calixte
2023-07-21 00:25:17 +02:00
parent 64eaf8dfd8
commit 390f34012e
10 changed files with 1783 additions and 126 deletions

View File

@@ -1,3 +1,6 @@
{
"semi": false
"semi": false,
"singleQuote": true,
"trailingComma": "none",
"arrowParens": "always"
}

View File

@@ -1 +1,3 @@
{}
{
"typescript.tsdk": "node_modules/typescript/lib"
}

View File

@@ -15,90 +15,14 @@
<link rel="icon" href="people-improvement.svg" />
<link rel="mask-icon" href="people-improvement.svg" color="#ffffff" />
</head>
<!--
Why not adding some animation? And random problems to simulate and see what we are our options.
-->
<body>
<main>
<ul>
<li>
<header>Pitch</header>
<section class="doing">
<h5>📝</h5>
<ul>
<li>Feature 3</li>
<li>Feature 4</li>
</ul>
</section>
<section class="done">
<h5></h5>
<ul>
<li class="blue-bin">feature 1</li>
<li class="blue-bin">feature 2</li>
</ul>
</section>
</li>
<li>
<header>Design</header>
<section class="doing">
<h5>📝</h5>
</section>
<section class="done">
<h5></h5>
</section>
</li>
<li>
<header>Investigation</header>
<section class="doing">
<h5>📝</h5>
</section>
<section class="done">
<h5></h5>
</section>
</li>
<li>
<header>Product design</header>
<section class="doing">
<h5>📝</h5>
<ul>
<li></li>
<li></li>
</ul>
</section>
<section class="done">
<h5></h5>
<div class="blue-bin">Blue bucket</div>
<div class="blue-bin">Blue bucket</div>
</section>
</li>
<li>
<header>Development</header>
<section class="doing">
<h5>📝</h5>
</section>
<section class="done">
<h5></h5>
</section>
</li>
<li>
<header>UAT</header>
<section class="doing">
<h5>📝</h5>
</section>
<section class="done">
<h5></h5>
</section>
</li>
<li>
<header>Release</header>
<section class="doing">
<h5>📝</h5>
</section>
<section class="done">
<h5></h5>
</section>
</li>
</ul>
</main>
<noscript>
<strong
>We're sorry but this app doesn't work properly without JavaScript
enabled. Please enable it to continue.</strong
>
</noscript>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

View File

@@ -1,17 +1,24 @@
{
"name": "tps",
"version": "1.0.0",
"description": "",
"main": "index.js",
"private": true,
"description": "Thinking People System",
"scripts": {
"dev": "vite",
"build": "vite build",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"author": "Julien Calixte <julienc@bam.tech>",
"license": "ISC",
"dependencies": {
"vite": "^4.4.1"
"vite": "^4.4.1",
"vue": "^3.3.4"
},
"devDependencies": {
"@types/node": "^20.4.2",
"@vitejs/plugin-vue": "^4.2.3",
"node-sass": "^9.0.0",
"typescript": "^5.1.6"
}
}

1647
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff

90
src/App.vue Normal file
View File

@@ -0,0 +1,90 @@
<script setup lang="ts"></script>
<template>
<main id="main-app">
<ul>
<li>
<header>Pitch</header>
<section class="doing">
<h5>📝</h5>
<ul>
<li>Feature 3</li>
<li>Feature 4</li>
</ul>
</section>
<section class="done">
<h5></h5>
<ul>
<li class="blue-bin">feature 1</li>
<li class="blue-bin">feature 2</li>
</ul>
</section>
</li>
<li>
<header>Design</header>
<section class="doing">
<h5>📝</h5>
</section>
<section class="done">
<h5></h5>
</section>
</li>
<li>
<header>Investigation</header>
<section class="doing">
<h5>📝</h5>
</section>
<section class="done">
<h5></h5>
</section>
</li>
<li>
<header>Product design</header>
<section class="doing">
<h5>📝</h5>
<ul>
<li></li>
<li></li>
</ul>
</section>
<section class="done">
<h5></h5>
<div class="blue-bin">Blue bucket</div>
<div class="blue-bin">Blue bucket</div>
</section>
</li>
<li>
<header>Development</header>
<section class="doing">
<h5>📝</h5>
</section>
<section class="done">
<h5></h5>
</section>
</li>
<li>
<header>UAT</header>
<section class="doing">
<h5>📝</h5>
</section>
<section class="done">
<h5></h5>
</section>
</li>
<li>
<header>Release</header>
<section class="doing">
<h5>📝</h5>
</section>
<section class="done">
<h5></h5>
</section>
</li>
</ul>
</main>
</template>
<!-- <style scoped lang="scss">
#main-app {
}
</style> -->

4
src/main.ts Normal file
View File

@@ -0,0 +1,4 @@
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

5
src/shims-vue.d.ts vendored Normal file
View File

@@ -0,0 +1,5 @@
declare module '*.vue' {
import { defineComponent } from 'vue'
const component: ReturnType<typeof defineComponent>
export default component
}

29
tsconfig.json Normal file
View File

@@ -0,0 +1,29 @@
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"resolveJsonModule": true,
"types": ["node", "vite/client"],
"paths": {
"@/*": ["src/*"]
},
"lib": ["esnext", "dom", "dom.iterable", "scripthost", "ES2015"]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": ["node_modules"]
}

View File

@@ -1,10 +1,20 @@
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default {
plugins: [vue()],
build: {
rollupOptions: {
input: {
index: "index.html",
"feature-flow": "feature-flow.html",
},
},
index: 'index.html',
'feature-flow': 'feature-flow.html'
}
}
},
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
'node-fetch': 'isomorphic-fetch'
}
}
}