Select the types of activity you want to include in your feed.
[READ-ONLY] Mirror of https://github.com/graphieros/vue-data-ui. An open source user-empowering data visualization Vue 3 components library for eloquent data storytelling
vue-data-ui.graphieros.com/
···11+# manual-testing
22+33+This template should help get you started developing with Vue 3 in Vite.
44+55+## Recommended IDE Setup
66+77+[VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
88+99+## Recommended Browser Setup
1010+1111+- Chromium-based browsers (Chrome, Edge, Brave, etc.):
1212+ - [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
1313+ - [Turn on Custom Object Formatter in Chrome DevTools](http://bit.ly/object-formatters)
1414+- Firefox:
1515+ - [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
1616+ - [Turn on Custom Object Formatter in Firefox DevTools](https://fxdx.dev/firefox-devtools-custom-object-formatters/)
1717+1818+## Type Support for `.vue` Imports in TS
1919+2020+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
2121+2222+## Customize configuration
2323+2424+See [Vite Configuration Reference](https://vite.dev/config/).
2525+2626+## Project Setup
2727+2828+```sh
2929+npm install
3030+```
3131+3232+### Compile and Hot-Reload for Development
3333+3434+```sh
3535+npm run dev
3636+```
3737+3838+### Type-Check, Compile and Minify for Production
3939+4040+```sh
4141+npm run build
4242+```
+23
manual-testing/add-dev-dep.cjs
···11+const fs = require('fs');
22+33+fs.readFile('package.json', 'utf8', (err, data) => {
44+ if (err) {
55+ console.error('Error reading package.json:', err);
66+ return;
77+ }
88+ let packageJson = JSON.parse(data);
99+1010+ // Add the local build generated in the main project
1111+ packageJson.devDependencies = {
1212+ ...packageJson.devDependencies,
1313+ "vue-data-ui": "file:../../vue-data-ui"
1414+ };
1515+1616+ fs.writeFile('package.json', JSON.stringify(packageJson, null, 2), 'utf8', (err) => {
1717+ if (err) {
1818+ console.error('Error writing to package.json:', err);
1919+ return;
2020+ }
2121+ console.log('-- DEV MODE : Local vue-data-ui package added successfully --');
2222+ });
2323+});
···11+<script setup lang="ts">
22+//@ts-ignore
33+import BaseIcon from "../../../src/atoms/BaseIcon.vue"
44+</script>
55+66+<template>
77+ <main>
88+ <h1 class="gradient-text">Welcome to the vue-data-ui manual testing arena</h1>
99+ <div class="prereq">
1010+ <ol>
1111+ <li>
1212+ Make sure to build the package at the root of the main project:
1313+ <ul>
1414+ <li><code>npm i</code></li>
1515+ <li><code>npm run prod</code> runs all tests before building the package. Run it when it is your first time, or before submitting a PR, since <strong>all tests must pass.</strong></li>
1616+ <li><code>npm run preprod</code> skips tests and builds the package. Run this during dev, to test the build versions of modified components in the arena.</li>
1717+ </ul>
1818+ </li>
1919+2020+ <li>
2121+ cd into the manual-testing directory:
2222+ <ul>
2323+ <li><code>npm run dev</code> adds the local package to the testing directory and runs the testing app</li>
2424+ <li>changes made to the library components will be reflected live on the local instances of tested components, which can be compared to their state from the current build.</li>
2525+ </ul>
2626+ </li>
2727+2828+ <li>
2929+ Change datasets, tweak configs inside Arena{component} files
3030+ </li>
3131+3232+ <li>
3333+ 🎉 Thank you for contributing to vue-data-ui !
3434+ </li>
3535+ </ol>
3636+ </div>
3737+3838+ <div class="hint">
3939+ <BaseIcon stroke="#83a4f2" name="arrowLeft"/>Select a component to start testing...
4040+ </div>
4141+ </main>
4242+</template>
4343+4444+<style scoped>
4545+h1 {
4646+ margin-bottom: 2rem;
4747+ width: fit-content;
4848+ font-weight: bolder;
4949+}
5050+5151+.hint {
5252+ display: flex;
5353+ flex-direction: row;
5454+ align-items:center;
5555+ gap: 1rem;
5656+ font-size: 1.5rem;
5757+}
5858+5959+.prereq {
6060+ margin-bottom: 2rem;
6161+}
6262+6363+code {
6464+ color: #42d392;
6565+ background: #2A2A2A;
6666+ padding: 0.2rem;
6767+}
6868+strong {
6969+ font-weight:bolder;
7070+ color: #5f8aee;
7171+}
7272+7373+ol li {
7474+ font-weight: bolder;
7575+ margin-bottom: 1rem;
7676+}
7777+7878+ul li {
7979+ font-weight: normal;
8080+ margin-bottom: 0;
8181+}
8282+</style>