Feature/UI revamp (#2)

* wip: recommendation engine
* add search; add voting in media view
* add positive vote animation
* fix MediaItem poster not in sync with media
* add `Poster` class for better media poster management
* add votes overview
* ui revamp

.gitignore

@@ -1,2 +1 @@
 .idea/
-*.iml

app/.gitignore

@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
+.pnpm-store
 
 # Editor directories and files
 .vscode/*

app/.nvmrc

@@ -1 +1 @@
-18
+18.16

app/.storybook/main.ts

@@ -0,0 +1,18 @@
+import type { StorybookConfig } from '@storybook/vue3-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/vue3-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+};
+export default config;

app/.storybook/preview.ts

@@ -0,0 +1,36 @@
+import type { Preview } from '@storybook/vue3';
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+
+import '../src/assets/styles/index.scss';
+import Poster from '../src/common/Poster';
+import { vueRouter } from 'storybook-vue3-router';
+import router from '../src/router';
+
+Poster.startGC();
+
+const preview: Preview = {
+  decorators: [
+    (story) => ({
+      components: {
+        story,
+      },
+      template: '<Suspense><story /></Suspense>',
+    }),
+    vueRouter(router.getRoutes()),
+  ],
+  parameters: {
+    viewport: {
+      viewports: INITIAL_VIEWPORTS,
+    },
+    layout: 'centered',
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

app/app.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.pnpm-store" />
+      <excludeFolder url="file://$MODULE_DIR$/dist" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

app/package.json

@@ -4,9 +4,12 @@
   "version": "2.2.0",
   "type": "module",
   "scripts": {
+    "preinstall": "npx only-allow pnpm",
     "dev": "vite",
     "build": "vue-tsc && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "storybook": "storybook dev --port 6006 --host 0.0.0.0",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@phosphor-icons/vue": "2.0.1",
@@ -15,18 +18,28 @@
     "js-cookie": "^3.0.5",
     "jwt-decode": "^3.1.2",
     "localforage": "^1.10.0",
-    "vue": "^3.3.2",
-    "vue-router": "^4.2.0",
-    "vue3-lottie": "^2.7.0"
+    "vue": "^3.3.4",
+    "vue-router": "^4.2.2"
   },
   "devDependencies": {
+    "@storybook/addon-essentials": "^7.0.22",
+    "@storybook/addon-interactions": "^7.0.22",
+    "@storybook/addon-links": "^7.0.22",
+    "@storybook/addon-viewport": "^7.0.22",
+    "@storybook/blocks": "^7.0.22",
+    "@storybook/testing-library": "0.0.14-next.2",
+    "@storybook/vue3": "^7.0.22",
+    "@storybook/vue3-vite": "^7.0.22",
     "@types/js-cookie": "^3.0.3",
     "@vitejs/plugin-vue": "^4.2.3",
     "prettier": "^2.8.8",
-    "sass": "^1.62.1",
-    "terser": "^5.17.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sass": "^1.63.4",
+    "storybook": "^7.0.22",
+    "storybook-vue3-router": "^3.0.0",
     "typescript": "5.0.4",
-    "vite": "^4.3.5",
-    "vue-tsc": "^1.6.5"
+    "vite": "^4.3.9",
+    "vue-tsc": "^1.8.0"
   }
 }