feat/storybook (#10)

* chore: bump deps

* feat: init storybook

* feat: ui stories

* docs: adjust docs

* fix: update stories

* fix: calendar now using radix built in calendar

* feat(ui): carousel

* feat(ui): range calendar

* feat(ui): complete all stories

* ci: test storybook

* chore: use separate vite storybook config, remove prettier and @storybook/builder-vite

* ci: fix lint and comment out storybook-test job

.github/workflows/ci.yml

@@ -96,3 +96,34 @@ jobs:
           name: test-report
           path: html/
           retention-days: 2
+
+  # running pnpm story:build --quiet leads to "FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory"
+  # storybook-test:
+  #   timeout-minutes: 60
+  #   runs-on: ubuntu-latest
+  #   steps:
+  #     - uses: actions/[email protected]
+
+  #     - name: Install pnpm
+  #       uses: pnpm/action-setup@v3
+
+  #     - name: Setup node
+  #       uses: actions/[email protected]
+  #       with:
+  #         node-version: lts/*
+  #         cache: pnpm
+
+  #     - name: Install dependencies
+  #       run: pnpm install
+
+  #     - name: Install Playwright
+  #       run: pnpm dlx playwright install --with-deps
+
+  #     - name: Build Storybook
+  #       run: pnpm story:build --quiet
+
+  #     - name: Serve Storybook and run tests
+  #       run: |
+  #         pnpm dlx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
+  #           "pnpm dlx http-server storybook-static --port 6006 --silent" \
+  #           "pnpm dlx wait-on tcp:6006 && yarn story:test"

.gitignore

@@ -14,12 +14,14 @@ build
 dev-dist
 dist
 dist-ssr
+storybook-static
 *.local
 *.tsbuildinfo
 
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+*storybook.log
 
 # Editor directories and files
 .idea

.storybook/main.ts

@@ -0,0 +1,42 @@
+import type { AddonOptionsVite } from '@storybook/addon-coverage'
+import type { StorybookConfig } from '@storybook/vue3-vite'
+
+const coverageConfig: AddonOptionsVite = {
+  istanbul: {
+    // exclude: ['**/exampleDirectory/**'],
+  },
+}
+
+const config: StorybookConfig = {
+  stories: ['../docs/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  staticDirs: ['../docs/assets'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-a11y',
+    {
+      name: '@storybook/addon-coverage',
+      options: coverageConfig,
+    },
+    '@storybook/addon-themes',
+    '@storybook/addon-designs',
+  ],
+  framework: {
+    name: '@storybook/vue3-vite',
+    options: {
+      docgen: 'vue-component-meta',
+      builder: {
+        viteConfigPath: './vite-storybook.config.ts',
+      },
+    },
+  },
+  docs: {
+    defaultName: 'Documentation',
+  },
+  core: {
+    disableTelemetry: true, // 👈 Disables telemetry
+  },
+}
+
+export default config

.storybook/manager.ts

@@ -0,0 +1,18 @@
+import { addons } from '@storybook/manager-api'
+import { create } from '@storybook/theming/create'
+
+const customTheme = create({
+  base: 'dark',
+  brandTitle: 'Vue App Storybook',
+  brandUrl: 'https://vue-app-rifandani.vercel.app',
+  brandImage: 'https://www.vectorlogo.zone/logos/vuejs/vuejs-icon.svg',
+  brandTarget: '_self',
+
+  // Typography
+  fontBase: '"Lato", sans-serif',
+  fontCode: 'monospace',
+})
+
+addons.setConfig({
+  theme: customTheme,
+})

.storybook/preview.ts

@@ -0,0 +1,62 @@
+import { type Decorator, type Preview, setup } from '@storybook/vue3'
+import { createPinia } from 'pinia'
+import { createI18n } from 'vue-i18n'
+import { VueQueryPlugin } from '@tanstack/vue-query'
+import { withThemeByClassName } from '@storybook/addon-themes'
+import enUS from '../src/i18n/en-US.json'
+import idID from '../src/i18n/id-ID.json'
+import '../src/main.css'
+
+setup((app) => {
+  // Type-define 'en-US' as the master schema for the resource
+  type MessageSchema = typeof enUS
+
+  const i18n = createI18n<[MessageSchema], 'en-US' | 'id-ID'>({
+    legacy: false, // you must set `false`, to use Composition API
+    locale: 'en-US',
+    fallbackLocale: 'en-US', // set fallback locale
+    messages: {
+      'en-US': enUS,
+      'id-ID': idID,
+    },
+  })
+  const pinia = createPinia()
+
+  app.use(i18n)
+  app.use(pinia)
+  app.use(VueQueryPlugin, {
+    queryClientConfig: {
+      defaultOptions: {
+        queries: {
+          // gcTime: 1_000 * 60 * 5, // 5 mins. Defaults to 5 mins
+          staleTime: 1_000 * 30, // 30 secs. Defaults to 0
+          networkMode: 'offlineFirst',
+        },
+      },
+    },
+  })
+})
+
+export const decorators: Decorator[] = [
+  withThemeByClassName({
+    themes: {
+      light: 'light',
+      dark: 'dark',
+    },
+    defaultTheme: 'light',
+  }),
+]
+
+const preview: Preview = {
+  tags: ['autodocs'],
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+}
+
+export default preview

.storybook/test-runner.ts

@@ -0,0 +1,22 @@
+import type { TestRunnerConfig } from '@storybook/test-runner'
+
+// see: https://storybook.js.org/docs/writing-tests/test-runner#test-hook-api
+const config: TestRunnerConfig = {
+  // async preVisit(page) {
+  //   await injectAxe(page);
+  // },
+  // async postVisit(page) {
+  //   await checkA11y(page, '#storybook-root', {
+  //     detailedReport: true,
+  //     detailedReportOptions: {
+  //       html: true,
+  //     },
+  //   });
+  // },
+  tags: {
+    exclude: ['exclude-test'],
+    skip: ['skip-test'],
+  },
+}
+
+export default config

.vscode/settings.json

@@ -88,6 +88,6 @@
   "i18n-ally.localesPaths": "./src/i18n",
   "i18n-ally.enabledFrameworks": ["vue"],
   "veco.packager.versionTarget": "latest",
-  "veco.packager.exclude": ["v-calendar"],
+  "veco.packager.exclude": ["@storybook/*"],
   "typescript.tsdk": "node_modules/typescript/lib",
 }

README.md

@@ -8,22 +8,17 @@
 
 </div>
 
-An opinionated and scalable project starter and reference for building bulletproof production ready vue applications.
+An opinionated and scalable project starter and reference for building bulletproof production ready Vue applications.
 
 ## Intro
 
-vue is an excellent tool for building front-end applications. It has a diverse ecosystem with hundreds of great libraries for literally anything you might need. However, being forced to make so many choices can be overwhelming. It is also very flexible, you can write vue applications in any way you like, but that flexibility comes with a cost. Since there is no pre-defined architecture that developers can follow, it often leads to a messy, inconsistent, and over-complicated codebase.
+Vue is an excellent tool for building front-end applications. It has a diverse ecosystem with hundreds of great libraries for literally anything you might need. However, being forced to make so many choices can be overwhelming. It is also very flexible, you can write Vue applications in any way you like, but that flexibility comes with a cost. Since there is no pre-defined architecture that developers can follow, it often leads to a messy, inconsistent, and over-complicated codebase.
 
-This repo attempts to present a way of creating vue applications using some of the best tools in the ecosystem with a good project structure that scales very well. Based on my experience working with different codebases, this architecture turns out to be the most effective.
+This repo attempts to present a way of creating Vue applications using some of the best tools in the ecosystem with a good project structure that scales very well. Based on my experience working with different codebases, this architecture turns out to be the most effective.
 
-The goal here is to serve as a collection of resources and best practices when developing vue applications. It is supposed to showcase solving most of the real-world problems of an application in a practical way and help developers write better applications.
+The goal here is to serve as a collection of resources and best practices when developing Vue applications. It is supposed to showcase solving most of the real-world problems of an application in a practical way and help developers write better applications.
 
-Feel free to explore the codebase to get the most value out of the repo.
-
-## Table of Contents
-
-- [Application Overview](https://github.com/rifandani/vue-app/tree/main/docs/application-overview.md)
-- [](https://github.com/rifandani/vue-app/tree/main/docs/.md)
+Feel free to explore the codebase to get the most value out of the repo. For a full documentation, check out the `docs` folder in the root of the repo.
 
 ## License
 

components.json

@@ -11,6 +11,7 @@
   "framework": "vite",
   "aliases": {
     "components": "#shared/components",
-    "utils": "./utils"
+    "utils": "#shared/utils/helper",
+    "ui": "#shared/components/ui"
   }
 }