feat: Visual regression tests

client/.lostpixel/.gitignore

@@ -0,0 +1,2 @@
+current
+difference

client/components/Card.story.vue

@@ -0,0 +1,28 @@
+<template>
+  <Story
+    title="Card"
+    :layout="{
+      type: 'grid',
+      width: 200
+    }"
+  >
+    <Variant title="Regular card" :init-state="initState">
+      <Card href="/sdf" heading-level="3" has-cover-link>
+        <template #headingTitle>What is an RFC?</template>
+        <p class="text-base mt-2 text-blue-900 dark:text-white">
+          Short description of the page here if it seems useful to show
+        </p>
+      </Card>
+    </Variant>
+  </Story>
+</template>
+
+<script lang="ts" setup>
+import Card from './Card.vue'
+
+function initState() {
+  return {
+    disabled: false
+  }
+}
+</script>

client/histoire.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'histoire'
+import { HstVue } from '@histoire/plugin-vue'
+import { HstNuxt } from '@histoire/plugin-nuxt'
+
+export default defineConfig({
+  plugins: [HstVue(), HstNuxt()]
+})

client/lostpixel.config.ts

@@ -0,0 +1,9 @@
+import type { CustomProjectConfig } from 'lost-pixel'
+
+export const config: CustomProjectConfig = {
+  histoireShots: {
+    histoireUrl: './.histoire/dist'
+  },
+  generateOnly: true,
+  failOnDifference: true
+}

client/nuxt.config.ts

@@ -1,3 +1,5 @@
+/// <reference types="histoire" />
+
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   compatibilityDate: '2024-04-03',