Fix issues in pre commit hooks (#159)

* Remove data from jenkinsfile

* Fix pre-commit hooks for linting and playwright tests

Author: gwenf

.husky/_/pre-push

@@ -0,0 +1,60 @@
+#!/bin/sh
+
+if [ "$LEFTHOOK_VERBOSE" = "1" -o "$LEFTHOOK_VERBOSE" = "true" ]; then
+  set -x
+fi
+
+if [ "$LEFTHOOK" = "0" ]; then
+  exit 0
+fi
+
+call_lefthook()
+{
+  if test -n "$LEFTHOOK_BIN"
+  then
+    "$LEFTHOOK_BIN" "$@"
+  elif lefthook -h >/dev/null 2>&1
+  then
+    lefthook "$@"
+  else
+    dir="$(git rev-parse --show-toplevel)"
+    osArch=$(uname | tr '[:upper:]' '[:lower:]')
+    cpuArch=$(uname -m | sed 's/aarch64/arm64/;s/x86_64/x64/')
+    if test -f "$dir/node_modules/lefthook-${osArch}-${cpuArch}/bin/lefthook"
+    then
+      "$dir/node_modules/lefthook-${osArch}-${cpuArch}/bin/lefthook" "$@"
+    elif test -f "$dir/node_modules/@evilmartians/lefthook/bin/lefthook-${osArch}-${cpuArch}/lefthook"
+    then
+      "$dir/node_modules/@evilmartians/lefthook/bin/lefthook-${osArch}-${cpuArch}/lefthook" "$@"
+    elif test -f "$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook"
+    then
+      "$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook" "$@"
+    elif test -f "$dir/node_modules/lefthook/bin/index.js"
+    then
+      "$dir/node_modules/lefthook/bin/index.js" "$@"
+    
+    elif bundle exec lefthook -h >/dev/null 2>&1
+    then
+      bundle exec lefthook "$@"
+    elif yarn lefthook -h >/dev/null 2>&1
+    then
+      yarn lefthook "$@"
+    elif pnpm lefthook -h >/dev/null 2>&1
+    then
+      pnpm lefthook "$@"
+    elif swift package plugin lefthook >/dev/null 2>&1
+    then
+      swift package --disable-sandbox plugin lefthook "$@"
+    elif command -v mint >/dev/null 2>&1
+    then
+      mint run csjones/lefthook-plugin "$@"
+    elif command -v npx >/dev/null 2>&1
+    then
+      npx lefthook "$@"
+    else
+      echo "Can't find lefthook in PATH"
+    fi
+  fi
+}
+
+call_lefthook run "pre-push" "$@"

.stylelintrc.json

@@ -0,0 +1 @@
+{ "extends": ["stylelint-config-standard"] }

curriculum-front/e2e/vue.spec.js

@@ -1,8 +1,8 @@
-import { test, expect } from '@playwright/test';
+import { test, expect } from '@playwright/test'
 
 // See here how to get started:
 // https://playwright.dev/docs/intro
 test('visits the app root url', async ({ page }) => {
-  await page.goto('/');
-  await expect(page.locator('div.greetings > h1')).toHaveText('You did it!');
+  await page.goto('/')
+  await expect(page.locator('h1')).toHaveText('Curricula App');
 })

curriculum-front/playwright.config.js

@@ -51,18 +51,18 @@ export default defineConfig({
         ...devices['Desktop Chrome']
       }
     },
-    {
-      name: 'firefox',
-      use: {
-        ...devices['Desktop Firefox']
-      }
-    },
-    {
-      name: 'webkit',
-      use: {
-        ...devices['Desktop Safari']
-      }
-    }
+    // {
+    //   name: 'firefox',
+    //   use: {
+    //     ...devices['Desktop Firefox']
+    //   }
+    // },
+    // {
+    //   name: 'webkit',
+    //   use: {
+    //     ...devices['Desktop Safari']
+    //   }
+    // }
 
     /* Test against mobile viewports. */
     // {

curriculum-front/src/assets/base.css

@@ -4,39 +4,30 @@
 }
 
 :root {
-  --vt-c-white: #ffffff;
+  --vt-c-white: #fff;
   --vt-c-white-soft: #f8f8f8;
   --vt-c-white-mute: #f2f2f2;
-
   --vt-c-black: #181818;
-  --vt-c-black-soft: #222222;
+  --vt-c-black-soft: #222;
   --vt-c-black-mute: #282828;
-
   --vt-c-indigo: #2c3e50;
-
-  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
-  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
-  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
-  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
-
+  --vt-c-divider-light-1: rgb(60 60 60 / 29%);
+  --vt-c-divider-light-2: rgb(60 60 60 / 12%);
+  --vt-c-divider-dark-1: rgb(84 84 84 / 65%);
+  --vt-c-divider-dark-2: rgb(84 84 84 / 48%);
   --vt-c-text-light-1: var(--vt-c-indigo);
-  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
+  --vt-c-text-light-2: rgb(60 60 60 / 66%);
   --vt-c-text-dark-1: var(--vt-c-white);
-  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
-}
+  --vt-c-text-dark-2: rgb(235 235 235 / 64%);
 
-/* semantic color variables for this project */
-:root {
+  /* semantic color variables for this project */
   --color-background: var(--vt-c-white);
   --color-background-soft: var(--vt-c-white-soft);
   --color-background-mute: var(--vt-c-white-mute);
-
   --color-border: var(--vt-c-divider-light-2);
   --color-border-hover: var(--vt-c-divider-light-1);
-
   --color-heading: var(--vt-c-text-light-1);
   --color-text: var(--vt-c-text-light-1);
-
   --section-gap: 160px;
 }
 
@@ -45,10 +36,8 @@
     --color-background: var(--vt-c-black);
     --color-background-soft: var(--vt-c-black-soft);
     --color-background-mute: var(--vt-c-black-mute);
-
     --color-border: var(--vt-c-divider-dark-2);
     --color-border-hover: var(--vt-c-divider-dark-1);
-
     --color-heading: var(--vt-c-text-dark-1);
     --color-text: var(--vt-c-text-dark-2);
   }
@@ -84,7 +73,7 @@ body {
     'Helvetica Neue',
     sans-serif;
   font-size: 15px;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

curriculum-front/src/assets/main.css

@@ -1,4 +1,4 @@
-@import './base.css';
+@import url('./base.css');
 
 #app {
   max-width: 1280px;
@@ -10,18 +10,18 @@
 a,
 .green {
   text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
+  color: hsl(160deg 100% 37% / 100%);
   transition: 0.4s;
   padding: 3px;
 }
 
 @media (hover: hover) {
   a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
+    background-color: hsl(160deg 100% 37% / 20%);
   }
 }
 
-@media (min-width: 1024px) {
+@media (width >= 1024px) {
   body {
     display: flex;
     place-items: center;

curriculum-front/src/components/create-form/FormSections.vue

@@ -13,7 +13,7 @@
 <script setup>
 import { toRefs } from 'vue'
 
-import { useCurriculumStore } from '@/stores/curricula/curriculums'
+import { useCurriculumStore } from '@/stores/curricula'
 import FormSection from './FormSection.vue'
 
 const curriculumStore = useCurriculumStore()

curriculum-front/src/components/create-form/MainForm.vue

@@ -44,7 +44,7 @@
 <script setup>
 import { computed, toRefs } from 'vue'
 import FormSections from './FormSections.vue'
-import { useCurriculumStore } from '@/stores/curricula/curriculums'
+import { useCurriculumStore } from '@/stores/curricula'
 
 const curriculumStore = useCurriculumStore()
 

curriculum-front/src/components/display-curriculum/Sections.vue

@@ -126,7 +126,7 @@
 <script setup>
 import { ref, computed } from 'vue'
 
-import { useCurriculumStore } from '@/stores/curricula/curriculums'
+import { useCurriculumStore } from '@/stores/curricula'
 import AddItemDialog from './AddItemDialog.vue'
 
 const curriculumStore = useCurriculumStore()

curriculum-front/src/stores/curricula/index.js

@@ -2,7 +2,7 @@ import { defineStore } from 'pinia'
 import { ref } from 'vue'
 
 import axios from '@/utils/axiosConfig'
-import router from '../router'
+import router from '@/router'
 
 export const useCurriculumStore = defineStore('curriculum', () => {
   const state = ref({

curriculum-front/src/views/CreateCurriculum.vue

@@ -12,7 +12,7 @@ import { toRefs } from 'vue'
 import MainForm from '@/components/create-form/MainForm.vue'
 
 import { useAuthStore } from '@/stores/auth'
-import { useCurriculumStore } from '@/stores/curricula/curriculums'
+import { useCurriculumStore } from '@/stores/curricula'
 
 const authStore = useAuthStore()
 const { user } = toRefs(authStore)

curriculum-front/src/views/DisplayCurricula.vue

@@ -60,7 +60,7 @@
 import { toRefs, ref, onMounted } from 'vue'
 
 import { useAuthStore } from '@/stores/auth'
-import { useCurriculumStore } from '@/stores/curriculum'
+import { useCurriculumStore } from '@/stores/curricula'
 
 const authStore = useAuthStore()
 const curriculumStore = useCurriculumStore()

curriculum-front/src/views/DisplayCurriculum.vue

@@ -31,7 +31,7 @@ import { onMounted, ref, toRefs } from 'vue'
 import { useRoute } from 'vue-router'
 
 import { useAuthStore } from '@/stores/auth'
-import { useCurriculumStore } from '@/stores/curricula/curriculums'
+import { useCurriculumStore } from '@/stores/curricula'
 import { useGeneralStore } from '@/stores/general'
 
 import Header from '@/components/display-curriculum/Header.vue'

lefthook.yml

@@ -3,8 +3,10 @@
 #   Refer for explanation to following link:
 #   https://github.com/evilmartians/lefthook/blob/master/docs/configuration.md
 #
-# pre-push:
-#   commands:
+pre-push:
+  commands:
+    # playwright-tests:
+    #   run: npm --prefix ./curriculum-front run test:e2e
 #     packages-audit:
 #       tags: frontend security
 #       run: yarn audit
@@ -21,12 +23,15 @@ pre-commit:
     frontend-style:
       glob: "*.{css,scss,sass}"
       run: npm --prefix ./curriculum-front run stylelint {staged_files}
-    # playwright-tests:
-    #   run: npm --prefix ./curriculum-front run test:e2e
 
 all-files:
   parallel: true
   commands:
     eslint:
       glob: "*.{js,ts,jsx,tsx}"
       run: npm run lint:fix {all_files}
+    frontend-style:
+      glob: "*.{css,scss,sass}"
+      run: npm --prefix ./curriculum-front run stylelint {all_files}
+    playwright-tests:
+      run: npm --prefix ./curriculum-front run test:e2e