Merge branch 'develop'

.dockerignore

@@ -52,9 +52,7 @@ jspm_packages/
 
 # nuxt.js build output
 .nuxt
-
-# Nuxt generate
-dist
+.output
 
 # IDE / Editor
 .idea
@@ -68,6 +66,18 @@ dist
 # VS Code
 .vscode/settings.json
 
+# Histoire
+.histoire
+
 # Storybook
 .nuxt-storybook
 storybook-static
+
+# Cypress
+cypress
+
+# Vido
+**/*.stories.ts
+**/*.story.vue
+vidos.config.ts
+vidos-config.json

.eslintrc.js

@@ -10,6 +10,7 @@ module.exports = {
     sourceType: 'module',
   },
   extends: [
+    'plugin:@typescript-eslint/recommended',
     // '@nuxtjs/eslint-config-typescript',
     'plugin:vue/vue3-recommended',
     'plugin:prettier/recommended',
@@ -22,9 +23,18 @@ module.exports = {
   plugins: ['prettier', 'import', '@typescript-eslint', 'vue'],
   // add your custom rules here
   rules: {
+    '@typescript-eslint/ban-ts-comment': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/no-var-requires': 'off',
+    '@typescript-eslint/no-namespace': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+      },
+    ],
     'vue/multi-word-component-names': 'off',
-    'vue/require-explicit-emits': 'off',
-    'vue/no-deprecated-slot-scope-attribute': 'off',
     'import/order': [
       'error',
       {
@@ -38,9 +48,6 @@ module.exports = {
         'newlines-between': 'always',
       },
     ],
-    'vue/no-v-for-template-key-on-child': 'off',
-    'vue/no-deprecated-dollar-listeners-api': 'off', // Vue3 rule
-    'vue/no-reserved-component-names': 'off',
   },
   settings: {
     'import/internal-regex': '^@/',

.github/actions/install/action.yaml

@@ -11,7 +11,7 @@ runs:
     - name: Get yarn cache directory path 🛠
       id: yarn-cache-dir-path
       shell: bash
-      run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
+      run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT
 
     - name: Cache node_modules 📦
       uses: actions/cache@v3

.github/workflows/ci.yml

@@ -41,27 +41,6 @@ jobs:
       - name: Run linter 👀
         run: yarn lint
 
-  tests:
-    needs: install_cache
-    name: Jest Test
-    runs-on: ${{ matrix.os }}
-
-    strategy:
-      matrix:
-        os:
-          - ubuntu-latest
-        node:
-          - 18
-
-    steps:
-      - name: Checkout 🛎
-        uses: actions/checkout@master
-
-      - uses: ./.github/actions/install
-
-      - name: Run Jest tests 🧪
-        run: yarn test:jest
-
   cypress:
     needs: install_cache
     name: Cypress
@@ -85,25 +64,32 @@ jobs:
           sudo apt-get install -y ruby &&
           ruby poi_explode.rb cypress/fixtures/teritorio/references/pois.geojson
 
-      - name: yarn build
+      - name: Prepare
         run: |
-          ln -s ../cypress/fixtures/ static/fixtures &&
-          NODE_OPTIONS=--openssl-legacy-provider NODE_ENV=development CONFIG=vidos-config-cypress.json yarn build
+          cp -R cypress/fixtures/ public/fixtures &&
+          CONFIG=vidos-config-cypress.json CYPRESS=true yarn build
 
       - name: Run Cypress Tests 🧪
         uses: cypress-io/github-action@v5
         env:
-          NODE_ENV: development
-          CONFIG: vidos-config-cypress.json
+          CONFIG: ../vidos-config-cypress.json
+          CYPRESS: true
         with:
           install-command: yarn --silent
-          start: yarn start4cypress
+          start: yarn start
           wait-on: 'http://127.0.0.1:3000'
           wait-on-timeout: 30
 
-  storybook:
+      - name: Keep failled cypress-screenshots
+        uses: actions/upload-artifact@v3
+        if: failure()
+        with:
+          name: cypress-screenshots
+          path: cypress/screenshots
+
+  histoire:
     needs: install_cache
-    name: Storybook
+    name: Histoire
     runs-on: ${{ matrix.os }}
 
     strategy:
@@ -120,42 +106,35 @@ jobs:
       - uses: ./.github/actions/install
 
       - name: Install more packages
-        run: sudo apt-get install -y ruby
-
-      - name: Build Storybook 👀
-        run: NODE_OPTIONS=--openssl-legacy-provider yarn build:storybook
+        run: |
+          sudo apt-get install -y ruby &&
+          ruby poi_explode.rb cypress/fixtures/teritorio/references/pois.geojson
 
-      - name: Storycap
+      - name: Test Histoire
         run: |
-          STORYCAP_OPS="--serverCmd 'npx --yes -- http-server storybook-static -p 4000'" yarn test:storybook:report || true
-          zip -r __screenshots__.zip __screenshots__ > /dev/null
-          echo "https://gist.github.com/frodrigo/7c470b063ff1efa19022eec2f394319f"
+          CONFIG=vidos-config-empty.json yarn prepare &&
+          CONFIG=vidos-config-empty.json yarn test:histoire
 
-      - name: Export as Gist
-        uses: exuanbo/actions-deploy-gist@v1
+      - name: Keep failled histoire-screenshots
+        uses: actions/upload-artifact@v3
+        if: failure()
         with:
-          token: ${{ secrets.GIST_STORYCAP_REPORT_TOKEN }}
-          gist_id: 7c470b063ff1efa19022eec2f394319f
-          file_path: __screenshots__.zip
-          file_type: binary
-
-      - name: Test Storybook
-        run: yarn test:storybook
+          name: histoire-screenshots
+          path: __screenshots__
 
       - name: Deploy to gh-pages
         if: github.ref == 'refs/heads/develop'
         uses: peaceiris/actions-gh-pages@v3
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./storybook-static
+          publish_dir: ./.histoire/dist
 
   deploy_dev:
     needs:
       - install_cache
       - lint
-      - tests
       - cypress
-      - storybook
+      - histoire
     if: github.ref == 'refs/heads/develop'
     name: Deploy Dev
     runs-on: ${{ matrix.os }}
@@ -190,8 +169,10 @@ jobs:
           POST_SCRIPT: |
             cd /var/www/clients/client3/web3/web/vido &&
             ruby poi_explode.rb cypress/fixtures/teritorio/references/pois.geojson &&
-            yarn build-config &&
             sed -i "s/# restart: unless-stopped/restart: unless-stopped/" docker-compose.yml &&
-            docker-compose build && docker-compose up -d &&
+            docker-compose build &&
+            touch vidos-config.json &&
+            docker-compose run --rm vido yarn build-config &&
+            docker-compose up -d &&
             echo -n 'VIDO: Deployment completed at: ' &&
             date -u

.gitignore

@@ -106,9 +106,8 @@ sw.*
 # VS Code
 .vscode/settings.json
 
-# Storybook
-.nuxt-storybook
-storybook-static
+# Histoire
+.histoire
 __screenshots__/current
 __screenshots__/diff
 
@@ -121,3 +120,4 @@ cypress/fixtures/teritorio/references/pois/
 
 # Vido
 vidos-config.json
+public/fixtures

.lintstagedrc

@@ -1,5 +1,4 @@
 {
   "*.{js,ts,vue}": "yarn eslint --fix",
   "*.{css,vue}": "yarn stylelint",
-  "*.svg": "yarn svgo --disable=removeViewBox --enable=removeOffCanvasPaths"
 }

.storybook/main.ts

@@ -0,0 +1,42 @@
+const path = require("path")
+
+module.exports = {
+  stories: [
+    "../stories/**/*.stories.mdx",
+    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
+    "../components/**/*.stories.@(js|jsx|ts|tsx)",
+  ],
+  addons: [
+    "@storybook/addon-essentials",
+    {
+      name: '@storybook/addon-postcss',
+      options: {
+        cssLoaderOptions: {
+          importLoaders: 1,
+        },
+        postcssLoaderOptions: {
+          implementation: require('postcss'),
+        }
+      }
+    },
+    "storybook-addon-mock",
+    "storybook-addon-validate-html",
+  ],
+  framework: "@storybook/vue3",
+  core: {
+    builder: "@storybook/builder-vite"
+  },
+  async viteFinal(config, options) {
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      '~': path.resolve(__dirname, "../"),
+      "#app": path.resolve(__dirname, "../node_modules/nuxt/dist/app"),
+      "#app/*": path.resolve(__dirname, "../node_modules/nuxt/dist/app/*"),
+      "#head": path.resolve(__dirname, "../node_modules/nuxt/dist/head/runtime"),
+      "#head/*": path.resolve(__dirname, "../node_modules/nuxt/dist/head/runtime/*"),
+      "#build": path.resolve(__dirname, "../.nuxt"),
+      "#build/*": path.resolve(__dirname, "../.nuxt/*"),
+    }
+    return config
+  },
+}

.yarn/plugins/@yarnpkg/plugin-compat.cjs

@@ -0,0 +1,8 @@
+// https://github.com/yarnpkg/berry/issues/2384
+module.exports = {
+  name: `@yarnpkg/plugin-compat`,
+  factory: (require) => {
+    // dummy implementation to override the built-in version of this plugin
+    return {}
+  },
+}

.yarnrc.yml

@@ -3,5 +3,8 @@ nodeLinker: node-modules
 plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
     spec: "@yarnpkg/plugin-interactive-tools"
+  # https://github.com/yarnpkg/berry/issues/2384
+  - path: .yarn/plugins/@yarnpkg/plugin-compat.cjs
+    spec: '@yarnpkg/plugin-compat'
 
 yarnPath: .yarn/releases/yarn-2.4.1.cjs

CONTRIBUTING

@@ -0,0 +1,18 @@
+# Contributing to the Code
+- Follow the existing code style when making changes or adding new code.
+- Add code typing, more is better than less.
+- Indent with 2 spaces, no tab, and use Unix line endings.
+- If modifying the code requires a hack, avoid making the change.
+
+## Vue3 and Nuxt3
+- Use the option API when possible.
+- Avoid using the store in low-level components to make them easier to manipulate and test.
+
+# Testing
+- Include tests with any changes made.
+- Add Histoire stories for new components or when modifying existing ones.
+- Maintain and add Cypress tests for new features.
+
+# Contributing on GitHub
+- Split changes into coherent commits, ensuring that the commit comments and messages remain readable for years.
+- Only include one fix or feature per PR. If the feature is large, split it into multiple PRs.

Dockerfile

@@ -14,6 +14,7 @@ COPY . /usr/src/app
 RUN yarn install
 
 ENV NODE_OPTIONS --openssl-legacy-provider
+COPY vidos-config-empty.json vidos-config.json
 RUN yarn build
 
 # Set environment variables