From e76a4538c40245d7a0d8cf88575e930e18ca7702 Mon Sep 17 00:00:00 2001
From: Stephan <57194608+stephan418@users.noreply.github.com>
Date: Fri, 30 Sep 2022 22:19:24 +0200
Subject: [PATCH] Additional setup

---
 .storybook/main.cjs         | 9 ++++++++-
 package.json                | 6 +++++-
 src/assets/search.svg       | 1 +
 src/assets/svgr-custom.d.ts | 1 +
 vite.config.ts              | 3 ++-
 5 files changed, 17 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/search.svg
 create mode 100644 src/assets/svgr-custom.d.ts

diff --git a/.storybook/main.cjs b/.storybook/main.cjs
index e9c7678..1483938 100644
--- a/.storybook/main.cjs
+++ b/.storybook/main.cjs
@@ -1,3 +1,6 @@
+const { mergeConfig } = require( "vite")
+const svgr = require("vite-plugin-svgr");
+
 module.exports = {
   "stories": [
     "../src/**/*.stories.mdx",
@@ -6,7 +9,8 @@ module.exports = {
   "addons": [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
-    "@storybook/addon-interactions"
+    "@storybook/addon-interactions",
+    "storybook-addon-react-router-v6"
   ],
   "framework": "@storybook/react",
   "core": {
@@ -14,5 +18,8 @@ module.exports = {
   },
   "features": {
     "storyStoreV7": true
+  },
+  async viteFinal(config, {configType}) {
+    return mergeConfig(config, {plugins: [svgr()]})
   }
 }
\ No newline at end of file
diff --git a/package.json b/package.json
index 1476caf..100a9d6 100644
--- a/package.json
+++ b/package.json
@@ -11,8 +11,12 @@
     "build-storybook": "build-storybook"
   },
   "dependencies": {
+    "framer-motion": "^7.5.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.4.1",
+    "storybook-addon-react-router-v6": "^0.2.1",
+    "vite-plugin-svgr": "^2.2.1"
   },
   "devDependencies": {
     "@babel/core": "^7.19.3",
diff --git a/src/assets/search.svg b/src/assets/search.svg
new file mode 100644
index 0000000..f23b57d
--- /dev/null
+++ b/src/assets/search.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
\ No newline at end of file
diff --git a/src/assets/svgr-custom.d.ts b/src/assets/svgr-custom.d.ts
new file mode 100644
index 0000000..c0af2bd
--- /dev/null
+++ b/src/assets/svgr-custom.d.ts
@@ -0,0 +1 @@
+export const ReactComponent: React.FunctionComponent<Component<React.SVGProps<SVGSVGElement>>> & { title?: string };
diff --git a/vite.config.ts b/vite.config.ts
index b1b5f91..fabbca6 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,7 +1,8 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import svgr from "vite-plugin-svgr"
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()]
+  plugins: [react(), svgr()]
 })