#221 yarn lint + format (#223)

* #221 yarn lint + format

* #221 Align pre-commit lint and format with scripts

---------

Co-authored-by: wouter-adriaens <[email protected]>

.pre-commit-config.yaml

@@ -5,26 +5,19 @@ repos:
       - id: check-yaml
       - id: end-of-file-fixer
       - id: trailing-whitespace
-  - repo: https://github.com/pre-commit/mirrors-prettier
-    rev: v3.0.0-alpha.9-for-vscode
+  - repo: local
     hooks:
       - id: prettier
-        additional_dependencies:
-          - [email protected]
+        name: run format
+        language: system
+        entry: bash -c 'yarn format'
+        pass_filenames: false
         types_or: [ts, javascript, scss, css, yaml, json, vue]
-  - repo: https://github.com/pre-commit/mirrors-eslint
-    rev: v8.56.0
+  - repo: local
     hooks:
-      - id: eslint
-        additional_dependencies:
-          - [email protected]
-          - [email protected]
-          - [email protected]
-          - [email protected]
-          - [email protected]
-          - [email protected]
-          - [email protected]
-          - '@vue/[email protected]'
-          - '@vue/[email protected]'
-        files: \.[jt]sx|\.vue?$ # *.js, *.jsx, *.ts, *.tsx and *.vue
-        types: [file]
+      - id: lint
+        name: run lint
+        language: system
+        entry: bash -c 'yarn lint'
+        pass_filenames: false
+        types_or: [ts, javascript, scss, css, yaml, json, vue]

src/__tests__/InputPhone.cy.ts

@@ -1,6 +1,6 @@
-import type { CountryCode } from 'libphonenumber-js';
 import { defineComponent, ref } from 'vue';
 import InputPhone from '@components/dumb/InputPhone.vue';
+import type { CountryCode } from 'libphonenumber-js';
 
 const TestComponent = defineComponent({
   components: { InputPhone },

src/__tests__/OeZoneerder.cy.ts

@@ -1,8 +1,8 @@
 /* eslint-disable vue/one-component-per-file */
 import { defineComponent } from 'vue';
 import { LayerType } from '@/models';
-import type { OeZoneerderProps } from '@/models';
 import { OeZoneerder } from '@components/smart';
+import type { OeZoneerderProps } from '@/models';
 
 describe('OeZoneerder', () => {
   describe('default', () => {

src/components/dumb/OeInventarisLoadedLink.vue

@@ -3,11 +3,11 @@
     <template v-if="props.waarnemingen?.length > 0">
       <h5 class="vl-title vl-title--h5" data-cy="gekoppelde-waarnemingen-title">Gekoppelde waarnemingen</h5>
       <a
+        v-for="waarneming of props.waarnemingen"
+        :key="waarneming.id"
         class="vl-u-display-block"
         target="_blank"
-        v-for="waarneming of props.waarnemingen"
         :data-cy="'waarneming-link-' + waarneming.id"
-        :key="waarneming.id"
         :href="waarneming.uri"
         >{{ waarneming.naam }} ({{ waarneming.id }})</a
       >
@@ -20,10 +20,10 @@
     <template v-if="props.gebeurtenissen?.length > 0">
       <h5 class="vl-title vl-title--h5" data-cy="gekoppelde-gebeurtenissen-title">Gekoppelde gebeurtenissen</h5>
       <a
-        class="vl-u-display-block"
-        target="_blank"
         v-for="gebeurtenis of props.gebeurtenissen"
         :key="gebeurtenis.id"
+        class="vl-u-display-block"
+        target="_blank"
         :href="gebeurtenis.uri"
         :data-cy="'gebeurtenis-link-' + gebeurtenis.id"
         >{{ gebeurtenis.titel }} ({{ gebeurtenis.id }})</a

src/components/smart/FilterAOEActor.vue

@@ -11,10 +11,10 @@
 <script setup lang="ts">
 import OeAutocomplete from '../dumb/OeAutocomplete.vue';
 import { computed, ref } from 'vue';
+import { ActorService } from '@services/actor.service';
 import type { IActor } from '@models/actor';
 import type { IAutocompleteOption } from '@models/autocomplete';
 import type { IFilterActorProps } from '@models/index';
-import { ActorService } from '@services/actor.service';
 
 const props = withDefaults(defineProps<IFilterActorProps>(), {
   id: '',

src/components/smart/FilterAanduidingsobject.vue

@@ -13,9 +13,9 @@
 import OeAutocomplete from '../dumb/OeAutocomplete.vue';
 import { toRef } from '@vueuse/core';
 import { ref, watch } from 'vue';
+import { InventarisApiService } from '@services/inventaris-api.service';
 import type { IAutocompleteOption } from '@models/autocomplete';
 import type { IESAanduidingsobject, IFilterAanduidingsobjectProps } from '@models/index';
-import { InventarisApiService } from '@services/inventaris-api.service';
 
 const props = withDefaults(defineProps<IFilterAanduidingsobjectProps>(), {
   id: '',

src/components/smart/FilterGemeente.vue

@@ -22,9 +22,9 @@
 <script setup lang="ts">
 import { VlMultiselect } from '@govflanders/vl-ui-design-system-vue3';
 import { computed, onBeforeMount, ref } from 'vue';
+import { CrabApiService } from '@services/crab-api.service';
 import type { IFilterGemeenteProps } from '@models/index';
 import type { IGemeente } from '@models/locatie';
-import { CrabApiService } from '@services/crab-api.service';
 
 const props = withDefaults(defineProps<IFilterGemeenteProps>(), {
   api: '',

src/components/smart/FilterProvincie.vue

@@ -22,9 +22,9 @@
 <script setup lang="ts">
 import { VlMultiselect } from '@govflanders/vl-ui-design-system-vue3';
 import { computed, onBeforeMount, ref } from 'vue';
+import { CrabApiService } from '@services/crab-api.service';
 import type { IFilterProvincieProps } from '@models/index';
 import type { IProvincie } from '@models/locatie';
-import { CrabApiService } from '@services/crab-api.service';
 
 const props = withDefaults(defineProps<IFilterProvincieProps>(), {
   api: '',

src/components/smart/OeActorWidget.vue

@@ -42,8 +42,8 @@ import { ref } from 'vue';
 import OeLoader from '@components/dumb/OeLoader.vue';
 import Detail from '@components/smart/OeActorWidgetDetail.vue';
 import Grid from '@components/smart/OeActorWidgetGrid.vue';
-import type { IActor } from '@models/actor';
 import { ActorService } from '@services/actor.service';
+import type { IActor } from '@models/actor';
 
 interface IOeActorWidgetProps {
   id: string;

src/components/smart/OeActorWidgetGrid.vue

@@ -43,11 +43,11 @@
 import OeGrid from '../dumb/OeGrid.vue';
 import OeActorWidgetGridActies from './OeActorWidgetGridActies.vue';
 import { VlButton, VlSearch } from '@govflanders/vl-ui-design-system-vue3';
-import type { ColDef, FirstDataRenderedEvent, GridOptions, IGetRowsParams, RowClickedEvent } from 'ag-grid-community';
 import { isEmpty, omitBy } from 'lodash';
 import { computed, getCurrentInstance, ref } from 'vue';
-import type { IActor } from '@models/actor';
 import { ActorService, type IActorenQuery } from '@services/actor.service';
+import type { ColDef, FirstDataRenderedEvent, GridOptions, IGetRowsParams, RowClickedEvent } from 'ag-grid-community';
+import type { IActor } from '@models/actor';
 
 interface IOeActorWidgetGridProps {
   api: string;

src/components/smart/OeZoneerder.vue

@@ -37,28 +37,28 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import Map from 'ol/Map';
 import View from 'ol/View';
 import { Attribution, Control, FullScreen, Rotate, ScaleLine, Zoom, ZoomToExtent } from 'ol/control';
-import type { Coordinate } from 'ol/coordinate';
 import { getCenter, getTopLeft, getWidth } from 'ol/extent';
-import type { Extent } from 'ol/extent';
 import Point from 'ol/geom/Point';
 import { Group, Layer, Tile } from 'ol/layer';
 import { type ProjectionLike, get as getOlProj, transformExtent } from 'ol/proj';
-import type { Projection } from 'ol/proj';
 import { register } from 'ol/proj/proj4';
 import { TileWMS, WMTS } from 'ol/source';
 import WMTSTileGrid from 'ol/tilegrid/WMTS';
 import proj4 from 'proj4';
 import { onMounted, onUnmounted, provide, ref, watch } from 'vue';
-import type { Ref } from 'vue';
 import { LayerType, defaultControlConfig, defaultLayerConfig } from '@/models';
-import type { IBoundingBox, LayerOptions, OeZoneerderProps } from '@/models';
 import { CrabApiService } from '@/services';
 import OeAutocomplete from '@components/dumb/OeAutocomplete.vue';
 import Layerswitcher from '@components/smart/OeZoneerderLayerswitcher.vue';
 import ZonePanel from '@components/smart/OeZoneerderZonePanel.vue';
+import { Geolocate } from '@utils/openlayers/oe-ol-geolocate';
+import type { Coordinate } from 'ol/coordinate';
+import type { Extent } from 'ol/extent';
+import type { Projection } from 'ol/proj';
+import type { Ref } from 'vue';
+import type { IBoundingBox, LayerOptions, OeZoneerderProps } from '@/models';
 import type { IAutocompleteOption } from '@models/autocomplete';
 import type { Contour } from '@models/oe-openlayers';
-import { Geolocate } from '@utils/openlayers/oe-ol-geolocate';
 
 const props = withDefaults(defineProps<OeZoneerderProps>(), {
   controlConfig: () => defaultControlConfig,

src/components/smart/OeZoneerderLayerswitcher.vue

@@ -52,14 +52,14 @@
 import 'ol/ol.css';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { VlCheckbox, VlRadio, VlTitle } from '@govflanders/vl-ui-design-system-vue3';
-import type Map from 'ol/Map';
 import { Group } from 'ol/layer';
-import type BaseLayer from 'ol/layer/Base';
 import { v4 as uuidv4 } from 'uuid';
 import { inject, onMounted, onUnmounted, ref, watch } from 'vue';
+import { vClickOutside } from '@directives/click-outside.directive';
+import type Map from 'ol/Map';
+import type BaseLayer from 'ol/layer/Base';
 import type { Ref } from 'vue';
 import type { CrabApiService } from '@/services';
-import { vClickOutside } from '@directives/click-outside.directive';
 
 const buttonRef = ref<HTMLElement>();
 const elementRef = ref<HTMLElement>();

src/components/smart/OeZoneerderZonePanel.vue

@@ -83,10 +83,6 @@ import 'ol/ol.css';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { VlButton, VlIcon, VlInputField, VlInputGroup, VlLink, VlTitle } from '@govflanders/vl-ui-design-system-vue3';
 import { Feature, Map, MapBrowserEvent } from 'ol';
-import type { FeatureLike } from 'ol/Feature';
-import type { ColorLike } from 'ol/colorlike';
-import type { Listener } from 'ol/events';
-import type { Extent } from 'ol/extent';
 import { GeoJSON, WKT } from 'ol/format';
 import { Circle, Geometry, MultiPolygon, Polygon } from 'ol/geom';
 import { fromCircle } from 'ol/geom/Polygon';
@@ -95,6 +91,10 @@ import VectorLayer from 'ol/layer/Vector';
 import VectorSource from 'ol/source/Vector';
 import { Fill, Text as OlText, Stroke, Style } from 'ol/style';
 import { inject, onMounted, onUnmounted, ref, watch } from 'vue';
+import type { FeatureLike } from 'ol/Feature';
+import type { ColorLike } from 'ol/colorlike';
+import type { Listener } from 'ol/events';
+import type { Extent } from 'ol/extent';
 import type { CrabApiService } from '@/services';
 import type { Contour, IDrawGeomType } from '@models/oe-openlayers';
 

src/models/aanduidingsobject.ts

@@ -1,5 +1,5 @@
-import type { IDataverantwoordelijke } from './dataverantwoordelijke';
 import { Serializable } from './serializable';
+import type { IDataverantwoordelijke } from './dataverantwoordelijke';
 import type { IStatus } from './status';
 import type { ISystemFields } from './system-fields';
 

src/scss/_override-fonts.scss

@@ -1,34 +1,30 @@
 @font-face {
   font-family: 'Flanders Art Sans';
-  src:
-    url('/node_modules/pyoes/fonts/FlandersArtSans-Light.ttf') format('truetype'),
+  src: url('/node_modules/pyoes/fonts/FlandersArtSans-Light.ttf') format('truetype'),
     url('/node_modules/pyoes/fonts/FlandersArtSans-Light.woff') format('woff');
   font-weight: 300;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Flanders Art Sans';
-  src:
-    url('/node_modules/pyoes/fonts/FlandersArtSans-Regular.ttf') format('truetype'),
+  src: url('/node_modules/pyoes/fonts/FlandersArtSans-Regular.ttf') format('truetype'),
     url('/node_modules/pyoes/fonts/FlandersArtSans-Regular.woff') format('woff');
   font-weight: 400;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Flanders Art Sans';
-  src:
-    url('/node_modules/pyoes/fonts/FlandersArtSans-Medium.ttf') format('truetype'),
+  src: url('/node_modules/pyoes/fonts/FlandersArtSans-Medium.ttf') format('truetype'),
     url('/node_modules/pyoes/fonts/FlandersArtSans-Medium.woff') format('woff');
   font-weight: 500;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Flanders Art Sans';
-  src:
-    url('/node_modules/pyoes/fonts/FlandersArtSans-Bold.ttf') format('truetype'),
+  src: url('/node_modules/pyoes/fonts/FlandersArtSans-Bold.ttf') format('truetype'),
     url('/node_modules/pyoes/fonts/FlandersArtSans-Bold.woff') format('woff');
   font-weight: 700;
   font-style: normal;

src/services/crab-api.service.ts

@@ -1,9 +1,10 @@
 import { HttpService } from './http.service';
 import { sortBy } from 'lodash';
-import type { Coordinate } from 'ol/coordinate';
 import WFS from 'ol/format/WFS';
 import Intersects from 'ol/format/filter/Intersects';
 import Point from 'ol/geom/Point';
+import { Niscode } from '@models/niscode.enum';
+import type { Coordinate } from 'ol/coordinate';
 import type {
   IAdres,
   IGemeente,
@@ -15,7 +16,6 @@ import type {
   IProvincie,
   IStraat,
 } from '@models/locatie';
-import { Niscode } from '@models/niscode.enum';
 
 export class CrabApiService extends HttpService {
   readonly API_URL: string;

src/stories/dumb-components/autocomplete.stories.ts

@@ -1,8 +1,8 @@
 import '@/scss/main.scss';
 import OeAutocomplete from '../../components/dumb/OeAutocomplete.vue';
+import { ref } from 'vue';
 import type { IAutocompleteOption } from '../../models/autocomplete';
 import type { Meta, StoryObj } from '@storybook/vue3';
-import { ref } from 'vue';
 
 const meta: Meta<typeof OeAutocomplete> = {
   title: 'Dumb components/Autocomplete',

src/stories/dumb-components/button.stories.ts

@@ -1,6 +1,6 @@
 import '@/scss/main.scss';
-import type { Meta, StoryObj } from '@storybook/vue3';
 import OeButton from '@components/dumb/OeButton.vue';
+import type { Meta, StoryObj } from '@storybook/vue3';
 
 // More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
 const meta: Meta<typeof OeButton> = {

src/stories/dumb-components/container.stories.ts

@@ -1,9 +1,9 @@
 import '@/scss/main.scss';
 import { VlButton } from '@govflanders/vl-ui-design-system-vue3';
-import type { Meta, StoryObj } from '@storybook/vue3';
 import { last, remove } from 'lodash';
 import { ref } from 'vue';
 import OeContainer from '@components/dumb/OeContainer.vue';
+import type { Meta, StoryObj } from '@storybook/vue3';
 import type { ITab } from '@models/container';
 
 // More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction

src/stories/dumb-components/filter-radio.stories.ts

@@ -1,7 +1,7 @@
 import '@/scss/main.scss';
 import FilterRadio from '../../components/dumb/FilterRadio.vue';
-import type { Meta, StoryObj } from '@storybook/vue3';
 import { ref } from 'vue';
+import type { Meta, StoryObj } from '@storybook/vue3';
 
 // More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
 const meta: Meta<typeof FilterRadio> = {

src/stories/dumb-components/grid.stories.ts

@@ -1,4 +1,5 @@
 import '@/scss/main.scss';
+import OeGrid from '@components/dumb/OeGrid.vue';
 import type { Meta, StoryObj } from '@storybook/vue3';
 import type {
   FirstDataRenderedEvent,
@@ -7,7 +8,6 @@ import type {
   ICellRendererParams,
   IGetRowsParams,
 } from 'ag-grid-community';
-import OeGrid from '@components/dumb/OeGrid.vue';
 
 // More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
 const meta: Meta<typeof OeGrid> = {

src/stories/dumb-components/header.stories.ts

@@ -1,6 +1,6 @@
 import '@/scss/main.scss';
-import type { Meta, StoryObj } from '@storybook/vue3';
 import OeHeader from '@components/dumb/OeHeader.vue';
+import type { Meta, StoryObj } from '@storybook/vue3';
 
 // More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
 const meta: Meta<typeof OeHeader> = {

src/stories/dumb-components/input-phone.stories.ts

@@ -1,7 +1,7 @@
 import '@/scss/main.scss';
-import type { Meta, StoryObj } from '@storybook/vue3';
 import { ref } from 'vue';
 import InputPhone from '@components/dumb/InputPhone.vue';
+import type { Meta, StoryObj } from '@storybook/vue3';
 
 // More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
 const meta: Meta<typeof InputPhone> = {

src/stories/dumb-components/loader.stories.ts

@@ -1,8 +1,8 @@
 import '@/scss/main.scss';
 import OeLoader from '../../components/dumb/OeLoader.vue';
 import { VlButton } from '@govflanders/vl-ui-design-system-vue3';
-import type { Meta, StoryObj } from '@storybook/vue3';
 import { ref } from 'vue';
+import type { Meta, StoryObj } from '@storybook/vue3';
 
 const meta: Meta<typeof OeLoader> = {
   title: 'Dumb components/Loader',

src/stories/dumb-components/no-rows-overlay.stories.ts

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
 import NoRowsOverlay from '@components/dumb/NoRowsOverlay.vue';
+import type { Meta, StoryObj } from '@storybook/vue3';
 
 const meta: Meta<typeof NoRowsOverlay> = {
   title: 'Dumb components/NoRowsOverlay',

src/stories/dumb-components/select.stories.ts

@@ -1,7 +1,7 @@
 import '@/scss/main.scss';
 import OeSelect from '../../components/dumb/OeSelect.vue';
-import type { Meta, StoryObj } from '@storybook/vue3';
 import { ref } from 'vue';
+import type { Meta, StoryObj } from '@storybook/vue3';
 import type { ISelectOption } from '@models/select';
 
 const meta: Meta<typeof OeSelect> = {

src/stories/dumb-components/system-fields.stories.ts

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
 import SystemFields from '@components/dumb/SystemFields.vue';
+import type { Meta, StoryObj } from '@storybook/vue3';
 
 const meta: Meta<typeof SystemFields> = {
   title: 'Dumb components/SystemFields',