feat: add histoire

src/components/base/BaseButton.story.vue

@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+import {logEvent} from 'histoire/client'
+import {reactive} from 'vue'
+import {createRouter, createMemoryHistory} from 'vue-router'
+import BaseButton from './BaseButton.vue'
+
+function setupApp({ app, story, variant }) {
+  // Router mock
+  app.use(createRouter({
+    history: createMemoryHistory(),
+    routes: [
+      { path: '/', name: 'home', component: { render: () => null } },
+    ],
+  }))
+}
+
+
+const state = reactive({
+	disabled: false,
+})
+</script>
+
+<template>
+	<Story :setup-app="setupApp" :layout="{ type: 'grid', width: '200px' }">
+		<Variant title="custom">
+			<template #controls>
+				<HstCheckbox v-model="state.disabled" title="Disabled" />
+			</template>
+			<BaseButton :disabled="state.disabled">
+				Hello!
+			</BaseButton>
+		</Variant>
+
+		<Variant title="disabled">
+			<BaseButton disabled>
+				Hello!
+			</BaseButton>
+		</Variant>
+
+		<Variant title="router link">
+			<BaseButton :to="'home'">
+				Hello!
+			</BaseButton>
+		</Variant>
+
+		<Variant title="external link">
+			<BaseButton href="https://vikunja.io">
+				Hello!
+			</BaseButton>
+		</Variant>
+
+		<Variant title="button">
+			<BaseButton @click="logEvent('Click', $event)">
+				Hello!
+			</BaseButton>
+		</Variant>
+	</Story>
+</template>

src/components/input/ColorPicker.story.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import {reactive} from 'vue'
+import ColorPicker from './ColorPicker.vue'
+
+const state = reactive({
+	color: '#f2f2f2',
+})
+</script>
+
+<template>
+	<Story :layout="{ type: 'grid', width: '200px' }">
+		<ColorPicker v-model="state.color" />
+	</Story>
+</template>

src/components/input/ColorPicker.vue

@@ -37,6 +37,7 @@
 <script setup lang="ts">
 import {computed, ref, toRef, watch} from 'vue'
 import {createRandomID} from '@/helpers/randomId'
+import XButton from '@/components/input/button.vue'
 
 const DEFAULT_COLORS = [
 	'#1973ff',

src/histoire.setup.ts

@@ -0,0 +1,25 @@
+import { defineSetupVue3 } from '@histoire/plugin-vue'
+import {i18n} from './i18n'
+
+// import './histoire.css' // Import global CSS
+import './styles/global.scss'
+
+import {createPinia} from 'pinia'
+
+import FontAwesomeIcon from '@/components/misc/Icon'
+import XButton from '@/components/input/button.vue'
+import Modal from '@/components/misc/modal.vue'
+import Card from '@/components/misc/card.vue'
+
+
+export const setupVue3 = defineSetupVue3(({ app }) => {
+	// Add Pinia store
+  const pinia = createPinia()
+  app.use(pinia)
+	app.use(i18n)
+
+	app.component('icon', FontAwesomeIcon)
+	app.component('XButton', XButton)
+	app.component('modal', Modal)
+	app.component('card', Card)
+})

src/views/labels/ListLabels.vue

@@ -115,7 +115,7 @@ import {useI18n} from 'vue-i18n'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 import Editor from '@/components/input/AsyncEditor'
-import ColorPicker from '@/components/input/colorPicker.vue'
+import ColorPicker from '@/components/input/ColorPicker.vue'
 
 import LabelModel from '@/models/label'
 import type {ILabel} from '@/modelTypes/ILabel'

src/views/labels/NewLabel.vue

@@ -40,7 +40,7 @@ import {useI18n} from 'vue-i18n'
 import {useRouter} from 'vue-router'
 
 import CreateEdit from '@/components/misc/create-edit.vue'
-import ColorPicker from '@/components/input/colorPicker.vue'
+import ColorPicker from '@/components/input/ColorPicker.vue'
 
 import LabelModel from '@/models/label'
 import {useLabelStore} from '@/stores/labels'

src/views/list/NewList.vue

@@ -39,7 +39,7 @@ import {useRouter, useRoute} from 'vue-router'
 import ListService from '@/services/list'
 import ListModel from '@/models/list'
 import CreateEdit from '@/components/misc/create-edit.vue'
-import ColorPicker from '@/components/input/colorPicker.vue'
+import ColorPicker from '@/components/input/ColorPicker.vue'
 
 import {success} from '@/message'
 import {useTitle} from '@/composables/useTitle'

src/views/list/settings/edit.vue

@@ -75,7 +75,7 @@ import {useRouter} from 'vue-router'
 import {useI18n} from 'vue-i18n'
 
 import Editor from '@/components/input/AsyncEditor'
-import ColorPicker from '@/components/input/colorPicker.vue'
+import ColorPicker from '@/components/input/ColorPicker.vue'
 import CreateEdit from '@/components/misc/create-edit.vue'
 
 import type {IList} from '@/modelTypes/IList'

src/views/namespaces/NewNamespace.vue

@@ -50,7 +50,7 @@ import {useRouter} from 'vue-router'
 
 import Message from '@/components/misc/message.vue'
 import CreateEdit from '@/components/misc/create-edit.vue'
-import ColorPicker from '@/components/input/colorPicker.vue'
+import ColorPicker from '@/components/input/ColorPicker.vue'
 
 import NamespaceModel from '@/models/namespace'
 import NamespaceService from '@/services/namespace'

src/views/namespaces/settings/edit.vue

@@ -62,7 +62,7 @@ import router from '@/router'
 
 import AsyncEditor from '@/components/input/AsyncEditor'
 import Fancycheckbox from '@/components/input/fancycheckbox.vue'
-import ColorPicker from '@/components/input/colorPicker.vue'
+import ColorPicker from '@/components/input/ColorPicker.vue'
 import CreateEdit from '@/components/misc/create-edit.vue'
 
 import NamespaceService from '@/services/namespace'

src/views/tasks/TaskDetailView.vue

@@ -465,7 +465,7 @@ import BaseButton from '@/components/base/BaseButton.vue'
 // partials
 import Attachments from '@/components/tasks/partials/attachments.vue'
 import ChecklistSummary from '@/components/tasks/partials/checklist-summary.vue'
-import ColorPicker from '@/components/input/colorPicker.vue'
+import ColorPicker from '@/components/input/ColorPicker.vue'
 import Comments from '@/components/tasks/partials/comments.vue'
 import CreatedUpdated from '@/components/tasks/partials/createdUpdated.vue'
 import Datepicker from '@/components/input/datepicker.vue'