feat: storybook

.storybook/main.ts

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

.storybook/preview.ts

@@ -0,0 +1,33 @@
+import { withThemeByClassName } from '@storybook/addon-styling';
+import type { Preview } from '@storybook/vue3';
+import { setup } from '@storybook/vue3';
+import GlobalComponentsPlugin from '../src/plugin';
+import '../src/style.css';
+
+setup((app) => {
+    app.use(GlobalComponentsPlugin)
+})
+
+const preview: Preview = {
+    parameters: {
+        actions: { argTypesRegex: '^on[A-Z].*' },
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/
+            }
+        }
+    },
+
+    decorators: [
+        withThemeByClassName({
+            themes: {
+                light: 'light',
+                dark: 'dark'
+            },
+            defaultTheme: 'light'
+        })
+    ]
+};
+
+export default preview;

package.json

@@ -5,7 +5,9 @@
     "scripts": {
         "dev": "vite --host",
         "build": "vue-tsc && vite build --emptyOutDir",
-        "format": "prettier --write \"src/**/*.{js,jsx,json,ts,tsx,vue,css}\""
+        "format": "prettier --write \"src/**/*.{js,jsx,json,ts,tsx,vue,css}\"",
+        "sb": "storybook dev -p 6006",
+        "sb:build": "storybook build"
     },
     "dependencies": {
         "@headlessui/vue": "^1.7.14",
@@ -25,6 +27,14 @@
         "vue-router": "^4.2.4"
     },
     "devDependencies": {
+        "@storybook/addon-essentials": "^7.1.0",
+        "@storybook/addon-interactions": "^7.1.0",
+        "@storybook/addon-links": "^7.1.0",
+        "@storybook/addon-styling": "^1.3.4",
+        "@storybook/blocks": "^7.1.0",
+        "@storybook/testing-library": "^0.2.0",
+        "@storybook/vue3": "^7.1.0",
+        "@storybook/vue3-vite": "^7.1.0",
         "@types/aos": "^3.0.4",
         "@types/axios": "^0.14.0",
         "@types/luxon": "^3.3.0",
@@ -35,6 +45,9 @@
         "autoprefixer": "^10.4.14",
         "postcss": "^8.4.21",
         "prettier": "^3.0.0",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "storybook": "^7.1.0",
         "tailwindcss": "^3.2.7",
         "typescript": "^4.9.3",
         "vite": "^4.1.0",

src/App.vue

@@ -16,11 +16,13 @@ onBeforeMount(async () => {
 </script>
 
 <template>
-    <Loader v-if="isLoading" />
-    <div v-else class="flex flex-col h-screen min-h-screen">
-        <Header />
-        <div class="flex flex-col flex-grow justify-evenly">
-            <RouterView />
+    <div class="bg-[#b6e8f2]">
+        <Loader v-if="isLoading" />
+        <div v-else class="flex flex-col h-screen min-h-screen">
+            <Header />
+            <div class="flex flex-col flex-grow justify-evenly">
+                <RouterView />
+            </div>
         </div>
     </div>
 </template>

src/components/Country/Country.vue

@@ -101,7 +101,9 @@ async function loadScore(type: LearningType) {
                     </div>
                     <div class="col-span-1">
                         <dt class="text-gray-500">{{ $t('region') }}</dt>
-                        <dd class="text-gray-900">{{ country.region.continent.name }}</dd>
+                        <dd class="text-gray-900">
+                            {{ country.region.continent.name }}
+                        </dd>
                     </div>
                     <div class="col-span-1">
                         <dt class="text-gray-500">{{ $t('population') }}</dt>

src/components/User/UserSettings.vue

@@ -22,16 +22,17 @@ const errorDisplayed = computed({
             error.value = undefined;
         }
     }
-})
+});
 
 const name = ref(user.value.name);
 const language = ref(user.value.language);
 
-const canSave = computed(() =>
-    name.value.length > 3 && name.value.length < 20 && (
-        name.value !== user.value.name ||
-        language.value !== user.value.language
-    )
+const canSave = computed(
+    () =>
+        name.value.length > 3 &&
+        name.value.length < 20 &&
+        (name.value !== user.value.name ||
+            language.value !== user.value.language)
 );
 
 const loading = ref(false);
@@ -41,9 +42,12 @@ async function saveProfile() {
     loading.value = true;
 
     try {
-        await store.updateAccount({ language: language.value, name: name.value });
+        await store.updateAccount({
+            language: language.value,
+            name: name.value
+        });
         hasSaved.value = true;
-    } catch(e) {
+    } catch (e) {
         error.value = (e as Error).message;
     } finally {
         loading.value = false;
@@ -105,7 +109,11 @@ const deleteAccount = async () => {
             </div>
             <div class="grid grid-cols-3 gap-x-3 items-end">
                 <TextInput v-model="name" :label="$t('name')" />
-                <Select v-model="language" :label="$t('language')" :options="languages.map((l) => ({ ...l, label: l.text }))" />
+                <Select
+                    v-model="language"
+                    :label="$t('language')"
+                    :options="languages.map((l) => ({ ...l, label: l.text }))"
+                />
                 <Button
                     :text="$t('saveProfile')"
                     :disabled="!canSave || loading"

src/components/common/Button.stories.js

@@ -0,0 +1,31 @@
+import Button from './Button.vue';
+
+export default {
+    title: 'Common/Button',
+    component: Button
+};
+
+const Template = (args) => ({
+    components: {
+        Button
+    },
+    setup: () => ({ args }),
+    template: `<Button v-bind="args" />`
+});
+
+export const Success = Template.bind({});
+Success.args = {
+    text: 'A success button'
+};
+
+export const Warning = Template.bind({});
+Warning.args = {
+    text: 'A warning button',
+    type: 'warning'
+};
+
+export const Error = Template.bind({});
+Error.args = {
+    text: 'An error button',
+    type: 'error'
+};

src/components/common/Button.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 interface Properties {
-    type: 'warning' | 'error' | 'success';
+    type?: 'warning' | 'error' | 'success';
     text: string;
     disabled?: boolean;
 }

src/components/common/PasswordInput.stories.js

@@ -0,0 +1,35 @@
+import { ref } from 'vue';
+import PasswordInput from './PasswordInput.vue';
+
+export default {
+    title: 'Common/PasswordInput',
+    component: PasswordInput
+};
+
+const Template = (args) => ({
+    components: {
+        PasswordInput
+    },
+    setup: () => {
+        const value = ref('');
+        return { args, value };
+    },
+    template: `
+        <PasswordInput
+            v-model="value"
+            v-bind="args"
+            class="max-w-md"
+        />
+    `
+});
+
+export const Default = Template.bind({});
+Default.args = {
+    label: 'Your awesome password'
+};
+
+export const Revelable = Template.bind({});
+Revelable.args = {
+    ...Default.args,
+    revelable: true
+};

src/components/common/Select.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { Maybe } from '@/types/common';
 import {
-Listbox,
-ListboxButton,
-ListboxOption,
-ListboxOptions
+    Listbox,
+    ListboxButton,
+    ListboxOption,
+    ListboxOptions
 } from '@headlessui/vue';
 import { IconCheck, IconChevronDown, SVGProps } from '@tabler/icons-vue';
 import { useVModel } from '@vueuse/core';

src/components/common/TextInput.stories.js

@@ -0,0 +1,51 @@
+import { IconLock } from '@tabler/icons-vue';
+import { ref } from 'vue';
+import TextInput from './TextInput.vue';
+
+export default {
+    title: 'Common/TextInput',
+    component: TextInput
+};
+
+const Template = (args) => ({
+    components: {
+        TextInput
+    },
+    setup: () => {
+        const value = ref('');
+        return { args, value };
+    },
+    template: `
+        <TextInput
+            v-model="value"
+            v-bind="args"
+            class="max-w-md"
+        />
+    `
+});
+
+export const Default = Template.bind({});
+Default.args = {
+    label: "What's your name?",
+    placeholder: 'Enter your name'
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+    ...Default.args,
+    disabled: true
+};
+
+export const InError = Template.bind({});
+InError.args = {
+    ...Default.args,
+    error: 'Please a valid name'
+};
+
+export const WithPrependIconAndHint = Template.bind({});
+WithPrependIconAndHint.args = {
+    label: 'Password',
+    placeholder: 'Your password (not even hidden...)',
+    hint: 'Your password must be at least 8 characters long',
+    prependIcon: IconLock
+};

src/components/common/TextInput.vue

@@ -47,10 +47,13 @@ function focusInput() {
             {{ hint }}
         </p>
         <div
-            class="bg-white flex items-center gap-x-2 rounded border px-3 py-2 cursor-text peer-disabled:cursor-not-allowed transition-colors outline outline-2 outline-offset-2"
+            class="flex items-center gap-x-2 rounded border px-3 py-2 transition-colors outline outline-2 outline-offset-2"
             :class="[
                 focused ? 'outline-blue-600/75' : 'outline-transparent',
-                error ? 'border-red-600' : 'border-gray-400/50'
+                error ? 'border-red-600' : 'border-gray-400/50',
+                disabled
+                    ? 'bg-gray-100 cursor-not-allowed'
+                    : 'bg-white cursor-text'
             ]"
             @click="focusInput"
         >
@@ -76,7 +79,7 @@ function focusInput() {
                 :name="inputName"
                 :placeholder="placeholder"
                 :disabled="disabled"
-                class="peer placeholder:text-gray-400 w-full outline-none"
+                class="placeholder:text-gray-400 w-full outline-none bg-white disabled:text-gray-400 disabled:bg-gray-100 disabled:cursor-not-allowed transition-colors"
                 :class="[error ? 'text-red-600' : 'text-gray-700']"
                 @keyup="emit('keyup', $event)"
             />

src/main.ts

@@ -11,7 +11,6 @@ import router from './router';
 import './style.css';
 import type { Lang } from './types/common';
 
-
 const browserLanguage = navigator.language;
 const defaultLocale = browserLanguage.substring(0, 2) as Lang;
 const supportedLocales: Lang[] = ['en', 'fr', 'es', 'it'];
@@ -35,7 +34,7 @@ if (!supportedLocales.includes(defaultLocale)) {
     const i18n = createI18n({
         locale: defaultLocale,
         messages: { fr, en, es, it }
-    })
+    });
 
     app.use(router).use(pinia).use(i18n).use(Plugin);
     app.mount('#app');

src/models/Country.ts

@@ -1,4 +1,3 @@
-
 export interface CountryI {
     id: number;
     name: string;

src/services/apiService.ts

@@ -70,10 +70,12 @@ export default class ApiService {
             scores: {
                 capital: number;
                 flag: number;
-            }
+            };
         }
 
-        const response = await ApiClient.get<ResponseOverallScores>('/scores/overall');
+        const response = await ApiClient.get<ResponseOverallScores>(
+            '/scores/overall'
+        );
         if (!response.success) {
             throw new Error('Failed get global scores');
         }