From 13066bd20dfb2d2834af532f5ed4dfca5c0e6136 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Thu, 8 Feb 2024 00:23:24 +0100
Subject: [PATCH] fix: IconButton story + NuxtLink stub #137

---
 .storybook/preview.ts                 | 15 +++++++++++
 components/Fields/DateRange.story.vue | 38 --------------------------
 components/UI/IconButton.stories.ts   | 39 ++++++++++++++-------------
 components/UI/IconButton.story.vue    | 32 ----------------------
 components/UI/IconButton.vue          | 27 +++++--------------
 5 files changed, 41 insertions(+), 110 deletions(-)
 delete mode 100644 components/Fields/DateRange.story.vue
 delete mode 100644 components/UI/IconButton.story.vue

diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 908442cf2..6fea8f0ae 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -1,5 +1,6 @@
 import { setup } from '@storybook/vue3'
 import type { Preview } from '@storybook/vue3'
+import { action } from '@storybook/addon-actions'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faStar as fasStar } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
@@ -19,6 +20,20 @@ setup((app) => {
   library.add(fasStar)
   app.use(i18n)
   app.component('font-awesome-icon', FontAwesomeIcon)
+  app.component('NuxtLink', {
+    props: {
+      to: {
+        type: String,
+        required: true,
+      },
+    },
+    methods: {
+      log() {
+        action('link target')(this.to)
+      },
+    },
+    template: '<a @click="log"><slot></slot></a>',
+  })
 })
 
 const globalTypes = {
diff --git a/components/Fields/DateRange.story.vue b/components/Fields/DateRange.story.vue
deleted file mode 100644
index a3b8fc65c..000000000
--- a/components/Fields/DateRange.story.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<script lang="ts" setup>
-import DateRange from '~/components/Fields/DateRange.vue'
-
-const defaultProps = {
-  start: '01/01/01',
-  end: '02/02/02',
-}
-
-const props = {
-  Default: {
-    ...defaultProps,
-  },
-  DefaultStart: {
-    ...defaultProps,
-    end: undefined,
-  },
-  DefaultEnd: {
-    ...defaultProps,
-    start: undefined,
-  },
-  DefaultSame: {
-    ...defaultProps,
-    end: defaultProps.start,
-  },
-}
-</script>
-
-<template>
-  <Story title="Fields/DateRange">
-    <Variant
-      v-for="(p, name) in props"
-      :key="name"
-      :title="name.replace(/([A-Z])/g, ' $1').trim()"
-    >
-      <DateRange v-bind="p" />
-    </Variant>
-  </Story>
-</template>
diff --git a/components/UI/IconButton.stories.ts b/components/UI/IconButton.stories.ts
index 69b6f5bc2..53c69eab4 100644
--- a/components/UI/IconButton.stories.ts
+++ b/components/UI/IconButton.stories.ts
@@ -1,29 +1,30 @@
-import IconButton from '~/components/UI/IconButton.vue'
-import { bind } from '~/lib/storybook-types'
-import '@teritorio/font-teritorio/teritorio/teritorio.css'
+import type { Meta, StoryObj } from '@storybook/vue3'
+import IconButton from './IconButton.vue'
 
-export default {
-  title: 'UI/IconButton',
+const meta: Meta<typeof IconButton> = {
   component: IconButton,
 }
 
-const defaultProps = {
-  label: 'Plop',
+export default meta
+type Story = StoryObj<typeof IconButton>
+
+export const Default: Story = {
+  args: {
+    default: 'ABC',
+    label: 'Plop',
+  },
 }
 
-export const DefaultButton = bind(
-  IconButton,
-  {
-    ...defaultProps,
+export const InternalLink: Story = {
+  args: {
+    ...Default.args,
+    href: 'test/1',
   },
-  { slots: 'ABC' },
-)
+}
 
-export const DefaultLink = bind(
-  IconButton,
-  {
-    ...defaultProps,
+export const ExternalLink: Story = {
+  args: {
+    ...Default.args,
     href: 'https://www.teritorio.fr/',
   },
-  { slots: 'ABC' },
-)
+}
diff --git a/components/UI/IconButton.story.vue b/components/UI/IconButton.story.vue
deleted file mode 100644
index d3d08d4ec..000000000
--- a/components/UI/IconButton.story.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<script lang="ts" setup>
-import IconButton from '~/components/UI/IconButton.vue'
-import '@teritorio/font-teritorio/teritorio/teritorio.css'
-
-const defaultProps = {
-  label: 'Plop',
-}
-
-const props = {
-  DefaultButton: {
-    ...defaultProps,
-  },
-  DefaultLink: {
-    ...defaultProps,
-    href: 'https://www.teritorio.fr/',
-  },
-}
-</script>
-
-<template>
-  <Story title="UI/IconButton">
-    <Variant
-      v-for="(p, name) in props"
-      :key="name"
-      :title="name.replace(/([A-Z])/g, ' $1').trim()"
-    >
-      <IconButton v-bind="p">
-        ABC
-      </IconButton>
-    </Variant>
-  </Story>
-</template>
diff --git a/components/UI/IconButton.vue b/components/UI/IconButton.vue
index 62e30c23e..c4b96fff6 100644
--- a/components/UI/IconButton.vue
+++ b/components/UI/IconButton.vue
@@ -1,24 +1,9 @@
-<script lang="ts">
-import type { PropType } from 'vue'
-
-import { defineNuxtComponent } from '#app'
-
-export default defineNuxtComponent({
-  props: {
-    label: {
-      type: String as PropType<string>,
-      required: true,
-    },
-    href: {
-      type: String as PropType<string | undefined>,
-      default: undefined,
-    },
-    target: {
-      type: String as PropType<string | undefined>,
-      default: undefined,
-    },
-  },
-})
+<script setup lang="ts">
+defineProps<{
+  label: string
+  href?: string
+  target?: string
+}>()
 </script>
 
 <template>