fix some warnings

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nwl-components",
-  "version": "1.3.9",
+  "version": "1.3.10",
   "files": [
     "dist"
   ],

src/components/layout/Nav.vue

@@ -77,7 +77,7 @@ import useProject from '@/store/project';
 const { githubURL, issuesURL, searchURL, docURL } = inject('config');
 const user = inject('user');
 
-const displaySettings = inject('displaySettings');
+const displaySettings = inject('displaySettings', false);
 const { project } = useProject();
 </script>
 <style scoped>

src/components/pages/BrainboxProjectPage.stories.js

@@ -1,6 +1,6 @@
 import { action } from '@storybook/addon-actions';
 import { get, forEach } from 'lodash-es';
-import { inject, ref } from 'vue';
+import { ref } from 'vue';
 
 import Button from '@/components/common/Button.vue';
 import ProjectPage from '@/components/pages/ProjectPage.vue';
@@ -27,14 +27,14 @@ const Template = (args) => ({
     Row
   },
   setup () {
-    const { baseURL } = inject('config');
     const fullscreen = ref(false);
     const ret = {
       ...args,
       handleFullscreen: () => {
         fullscreen.value = !fullscreen.value;
       },
-      fullscreen
+      fullscreen,
+      value: ref(50)
     };
 
     return ret;
@@ -54,7 +54,7 @@ const Template = (args) => ({
           <Editor>
             <template v-slot:tools>
               <Row centered>
-                <RangeSlider max=100 v-model="value" @input="sliceChange" />
+                <RangeSlider :max="100" v-model="value" @input="sliceChange" />
               </Row>
               <Row centered>
                 <ButtonsGroup>
@@ -118,7 +118,7 @@ Default.args = {
     keys.set('File', 'source');
     files.forEach((file) => {
       const annotations = get(file, ['mri', 'annotations', brainboxProject.shortname]);
-      if (annotations == null) { return; }
+      if (annotations === null) { return; }
       forEach(annotations, (_value, key) => {
         keys.set(key, ['mri', 'annotations', brainboxProject.shortname, key, 'data']);
       });

src/components/pages/NewProjectPage.vue

@@ -61,15 +61,18 @@
   </Wrapper>
 </template>
 <script setup>
-import { ref, inject } from 'vue';
+import { inject } from 'vue';
 
 import Button from '@/components/common/Button.vue';
 import Footer from '@/components/layout/Footer.vue';
 import Header from '@/components/layout/Header.vue';
 import Wrapper from '@/components/layout/Wrapper.vue';
 
-const props = defineProps({
-  onKeyDown: Function,
+defineProps({
+  onKeyDown: {
+    type: Function,
+    required: true
+  },
   validInput: Boolean,
   existingProject: Boolean
 });
@@ -78,6 +81,7 @@ const createProject = (value) => {
   location.pathname = `/project/${value}/settings`;
 };
 const cancel = () => location.assign('/');
+const value = '';
 </script>
 <style scoped>
 .container {

src/components/pages/ProjectPage.vue

@@ -50,11 +50,8 @@ import { Splitpanes, Pane } from 'splitpanes';
 import { ref } from 'vue';
 
 import 'splitpanes/dist/splitpanes.css';
-import Footer from '@/components/layout/Footer.vue';
 import Header from '@/components/layout/Header.vue';
-import TwoCols from '@/components/layout/TwoCols.vue';
 import Wrapper from '@/components/layout/Wrapper.vue';
-import Settings from '@/components/settings/Settings.vue';
 import useProject from '@/store/project';
 
 const vertical = ref(true);

src/components/pages/SettingsPage.stories.js

@@ -11,7 +11,7 @@ const Template = (args) => ({
     return {
       ...args,
       project: {
-        name: '',
+        name: 'test project',
         shortname: 'testproject',
         url: '',
         brainboxURL: '/project/testproject',

src/components/pages/SettingsPage.vue

@@ -28,16 +28,22 @@ const props = defineProps({
     type: Object,
     required: true
   },
-  files: Object
+  files: {
+    type: Object,
+    required: false,
+    default: null
+  }
 });
 
-const { project, setProject, updateProject } = useProject();
+const { setProject, updateProject } = useProject();
 
 setProject(props.project);
-// update store on prop change
-watch(props.files, (files) => updateProject({ files: { list: files } }));
+if (props.files !== null) {
+  // update store on prop change
+  watch(props.files, (files) => updateProject({ files: { list: files } }));
+}
 
-const content = ref(project.value.name);
+const content = ref(props.project.name);
 
 const onTitleInput = (event) => {
   content.value = event.currentTarget.textContent;

src/components/project/BrainboxProject.stories.js

@@ -1,7 +1,4 @@
-import { action } from "@storybook/addon-actions";
-import { get, forEach } from "lodash-es";
-import brainboxProject from '@/components/project/TextAnnotations.brainbox.fixtures.json';
-
+import { action } from '@storybook/addon-actions';
 import { ref, inject } from 'vue';
 
 import alpha from '@/assets/alpha.svg';
@@ -13,6 +10,7 @@ import Editor from '@/components/project/Editor.vue';
 import EditorLayout from '@/components/project/EditorLayout.vue';
 import RangeSlider from '@/components/project/RangeSlider.vue';
 import Row from '@/components/project/Row.vue';
+import brainboxProject from '@/components/project/TextAnnotations.brainbox.fixtures.json';
 import TextAnnotations from '@/components/project/TextAnnotations.vue';
 
 export default {

src/components/project/OntologySelector.stories.js

@@ -1,3 +1,4 @@
+/* eslint-disable max-lines */
 import { action } from '@storybook/addon-actions';
 import { ref } from 'vue';
 

src/components/project/OntologySelector.vue

@@ -33,10 +33,11 @@
 </template>
 <script setup>
 
-const props = defineProps({
+defineProps({
   ontology: {
     type: Object,
-    required: true
+    required: false,
+    default: null
   },
   open: Boolean
 });

src/components/project/RangeSlider.stories.js

@@ -18,7 +18,7 @@ const Template = (args) => ({
     };
   },
   template: `
-    <RangeSlider max="100" v-model="value" @update:modelValue="change" />
+    <RangeSlider :max="100" v-model="value" @update:modelValue="change" />
   `
 });
 

src/components/settings/PureAnnotations.stories.js

@@ -1,4 +1,3 @@
-import faker from '@faker-js/faker';
 import { action } from '@storybook/addon-actions';
 import { reactive } from 'vue';
 
@@ -27,13 +26,13 @@ Default.args = {
       'type': 'volume',
       'name': 'A volume annotation',
       'values': 'axolotl_labels.json',
-      'display': 'true'
+      'display': true
     },
     {
       'type': 'text',
       'name': 'texte',
       'values': 'A text annotation',
-      'display': 'true'
+      'display': true
     }
   ]),
   addAnnotation: action('add annotation'),

src/components/settings/PureAnnotations.vue

@@ -91,7 +91,7 @@ import Select from '@/components/common/Select.vue';
 import Table from '@/components/common/Table.vue';
 import TextInput from '@/components/common/TextInput.vue';
 
-const { baseURL, fetchLabelSets, annotationTypes } = inject('config');
+const { fetchLabelSets, annotationTypes } = inject('config');
 
 const props = defineProps({
   annotations: {

src/services/project.js

@@ -1,59 +1,64 @@
-import { get } from "lodash";
+import { get } from 'lodash';
 
 export default class ProjectService {
-  baseURL = "";
 
-  constructor(baseURL) {
+  constructor (baseURL) {
     this.baseURL = baseURL;
   }
 
-  transformProjectFiles(project) {
-    if (get(project, "files.list") != null) {
+  // eslint-disable-next-line class-methods-use-this
+  transformProjectFiles (project) {
+    if (get(project, 'files.list') !== null) {
       return {
         ...project,
         files: {
           ...project.files,
           list: project.files.list.map((file) => {
-            if (typeof file === "string") {
-              const splitAt = file.lastIndexOf("/");
+            if (typeof file === 'string') {
+              const splitAt = file.lastIndexOf('/');
+
               return {
                 source: file,
-                name: splitAt > 0 ? file.substring(splitAt + 1) : "",
+                name: splitAt > 0 ? file.substring(splitAt + 1) : ''
               };
             }
+
             return file;
-          }),
-        },
+          })
+        }
       };
     }
+
     return project;
   }
 
-  async fetch(id) {
+  async fetch (id) {
     return this.transformProjectFiles(
       await (await fetch(`${this.baseURL}/project/json/${id}`)).json()
     );
   }
 
-  async save(data) {
+  async save (data) {
     const res = await fetch(`${this.baseURL}/project/json/${data.shortname}`, {
-      method: "POST",
+      method: 'POST',
       headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json",
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
       },
       body: JSON.stringify({
-        data,
-      }),
+        data
+      })
     });
-    return await res.json();
+
+    return res.json();
   }
 
-  async delete(id) {
+  async delete (id) {
     const res = await fetch(`${this.baseURL}/project/json/${id}`, {
-      method: "DELETE",
-      headers: { "Content-Type": "application/json" },
+      method: 'DELETE',
+      headers: { 'Content-Type': 'application/json' }
     });
-    return await res.json();
+
+    return res.json();
   }
 }

src/store/project.js

@@ -7,6 +7,7 @@ const state = reactive({
   loading: true
 });
 
+// eslint-disable-next-line max-statements
 export default function useProject () {
   const { baseURL, usernameField } = inject('config');
   const service = new ProjectService(baseURL);
@@ -21,9 +22,9 @@ export default function useProject () {
     state.loading = false;
   };
 
-  const saveProject = async (project) => await service.save(project);
+  const saveProject = (project) => service.save(project);
 
-  const deleteProject = async (id) => await service.delete(id);
+  const deleteProject = (id) => service.delete(id);
 
   const updateProject = (data) => {
     if (!state.project) { return; }