Revert "chore: upgrade vue 3 (#118)" (#119)

This reverts commit 65f176f.

.gitignore

@@ -1,6 +1,8 @@
 node_modules
 node_modules/.bin/acorn
 dist/*
+app/storybook-static/*
+app/.nuxt-storybook/*
 
 .idea/
 .DS_Store

.nvmrc

@@ -1 +1 @@
-v20.17.0
+v16.16.0

README.md

@@ -17,11 +17,11 @@ Delivering HTML structures, CSS assets and design elements to build frontends fo
 $ npm install
 ```
 
-Adapt your Node version to `^20.17.0`, for example using `nvm`:
+Adapt your Node version to `^16.13.2`, for example using `nvm`:
 
 ```bash
 # Choose the right Node version
-$ nvm use 20.17
+$ nvm use 16
 ```
 
 ## Run Storybook
@@ -66,7 +66,7 @@ $ npm run build-css
 
 - Edit the `package.json` file and increment the `version` of the package, for example `1.0.0`
 - Create and publish a new tag with the same version number as the one in the `package.json` file, with a `v` prefix, for example `v1.0.0`
-- Create a new release on Github, document your changes, and name it for example `Release 1.0.0`
+- Create a new release on Github, document your changes, and name it for example ` Release 1.0.0`
 
 ## CSS files
 

app/.gitignore

@@ -7,9 +7,6 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-# Storybook build
-storybook-static/
-
 # Runtime data
 pids
 *.pid
@@ -70,7 +67,6 @@ typings/
 
 # nuxt.js build output
 .nuxt
-.output
 
 # Nuxt generate
 dist

app/.storybook/BundTheme.js

@@ -0,0 +1,8 @@
+import { create } from '@storybook/theming';
+import logo from '../assets/logos/BundLogo.svg';
+
+export default create({
+  base: 'light',
+  brandTitle: 'My custom storybook',
+  brandImage: logo,
+});

app/.storybook/main.js

@@ -0,0 +1,21 @@
+const { nuxifyStorybook } = require('../.nuxt-storybook/storybook/main.js')
+const path = require('path')
+
+module.exports = nuxifyStorybook({
+  stories: [
+    '../components/stories/**/*.stories.mdx',
+    '../components/stories/**/*.stories.@(js|jsx|ts|tsx)',
+  ],
+  addons: [],
+
+  webpackFinal: async (config) => {
+    // tell webpack to accept vtt files
+    config.module.rules.push({
+      test: /\.vtt$/,
+      use: ['url-loader'],
+    });
+
+    // Return the altered config
+    return config;
+  },
+})

app/.storybook/manager.js

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/addons';
+import bundTheme from './BundTheme';
+
+addons.setConfig({
+  theme: bundTheme,
+});

app/.storybook/preview.js

@@ -0,0 +1,55 @@
+import './docs-fullscreen.css'
+
+import { parameters as nuxtParameters } from '~~/.nuxt-storybook/storybook/preview.js'
+
+export const parameters = {
+  ...nuxtParameters,
+  layout: 'fullscreen',
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  html: {
+    prettier: {
+      tabWidth: 2,
+      useTabs: false,
+      // htmlWhitespaceSensitivity: 'strict',
+    },
+  },
+  viewMode: 'docs',
+  options: {
+    storySort: {
+      order: [
+        'Introduction',
+        'Doc for developers',
+        ['HTML Structure', 'Add CSS classes'],
+        'Foundations',
+        [
+          'Overview',
+          'Fonts',
+          'Backgrounds',
+          'Colors',
+          'Icons',
+          ['List', 'Implementation'],
+        ],
+        'Layouts',
+        ['General', 'Sections', 'Containers', 'Grids', 'Spacings', 'Ratios'],
+        'Components',
+        ['Logo', 'Button'],
+        'Sections',
+        [
+          'Header',
+          ['TopBar', 'TopHeader', 'DesktopMenu'],
+          'Hero',
+          'Content',
+          'Footer',
+        ],
+        'Pages',
+        ['Homepage'],
+      ],
+    },
+  },
+}

app/.storybook/store.js

@@ -0,0 +1,19 @@
+import Vue from "vue";
+import Vuex from "vuex";
+
+Vue.use(Vuex);
+
+const store = new Vuex.Store({
+
+  modules: {
+    layout: {
+      namespaced: true,
+      state: require("../store/layout.js").state,
+      getters: require("../store/layout.js").getters,
+      actions: require("../store/layout.js").actions,
+      mutations: require("../store/layout.js").mutations
+    }
+  }
+});
+
+export default store

app/README.md

@@ -2,42 +2,31 @@
 
 ```bash
 # install dependencies
-$ pnpm install
+$ npm install
 ```
 
-## Storybook
+# Storybook
 
 ```bash
 # serve Storybook with hot reload
-$ pnpm run storybook
+$ npm run storybook
 
 # build Storybook
-$ pnpm run build-storybook
+$ npm run build-storybook
 ```
 
-## Nuxt application
+# Nuxt application
 
 ```bash
 # serve with hot reload
-$ pnpm run dev
+$ npm run dev
 
 # build for production and launch server
-$ pnpm run build
-$ pnpm run start
+$ npm run build
+$ npm run start
 
 # generate static project
-$ pnpm run generate
+$ npm run generate
 ```
 
 For detailed explanation on how Nuxt work, check out [Nuxt.js docs](https://nuxtjs.org).
-
-## Pre-merge on main
-
-Before merging a branch into the main branch for a new release, please follow these steps:
-
-1. Run `pnpm run check` to let prettier check the new code for formatting issues
-2. If any issues arise, fix them with `pnpm run check:format:write`
-3. Run `pnpm run check:lint` to let eslint check the new code for open bugs or ts problems
-4. If any issues arise, fix them automatically with `pnpm run check:lint:fix` or manually (You might also update the eslint config file and add new rules (set to 'off') if you come across something that eslint shouldn't catch).
-
-In general, the rules currently defined in the eslint config file are carefully selected and should be kept in there.

app/components/ch/components/Accordion.vue

@@ -1,29 +1,37 @@
 <template>
   <ul
     :id="`accordion-${id}`"
-    class="accordion"
+    class="accordion "
     :class="spaced ? 'accordion--spaced' : ''"
   >
     <slot />
-  </ul>
+</ul>
 </template>
 
-<script setup lang="ts">
+<script>
 import Accordion from '../../../scripts/Accordion.js'
-import { onMounted } from 'vue'
 
-const props = defineProps({
-  id: {
-    type: String,
-    required: true,
+export default {
+  name: 'Accordion',
+  components: {
+    Accordion
   },
-  spaced: {
-    type: Boolean,
-    default: () => false,
+  props: {
+    id: {
+      type: String,
+      required: true
+    },
+    spaced: {
+      type: Boolean,
+      default: false
+    }
   },
-})
 
-onMounted(() => {
-  Accordion.init(`#accordion-${props.id} button`)
-})
+  mounted () {
+    Accordion.init (
+      `#accordion-${this.id} button`
+    )
+  }
+}
 </script>
+