revert on related files

.eslintrc.cjs

@@ -3,14 +3,8 @@ require('@rushstack/eslint-patch/modern-module-resolution')
 
 module.exports = {
   root: true,
-  'ignorePatterns': ['*.config.js', '!.storybook'],
-  'extends': [
-    'plugin:vue/vue3-essential',
-    'eslint:recommended',
-    '@vue/eslint-config-typescript',
-    '@vue/eslint-config-prettier/skip-formatting',
-    'plugin:storybook/recommended'
-  ],
+  'ignorePatterns': ['*.config.js'],
+  'extends': ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/eslint-config-typescript', '@vue/eslint-config-prettier/skip-formatting', 'plugin:storybook/recommended'],
   parserOptions: {
     ecmaVersion: 'latest'
   }

.gitignore

@@ -7,7 +7,7 @@ yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 
-node_modules
+node_modules*
 .DS_Store
 dist
 dist-ssr
@@ -27,8 +27,6 @@ coverage
 *.sln
 *.sw?
 
-*.tsbuildinfo
-
 test-results/
 playwright-report/
 vitest-result/
@@ -42,8 +40,5 @@ storybook-static/
 # for VRT original built
 vrt-original/
 
-# for container node_modules
-node_modules*
-
 *~
 /public/v.js

.playwright/Dockerfile

@@ -1,9 +1,8 @@
 FROM mcr.microsoft.com/playwright:v1.40.1-jammy
 
 # Install bun and add it to PATH
-ENV VER_bun=v1.0.20
 RUN apt update -y && apt install -y curl unzip \
-  && curl -fsSL https://bun.sh/install | bash -s "bun-${VER_bun}" \
+  && curl -fsSL https://bun.sh/install | bash \
   && mv ~/.bun/bin/bun /usr/local/bin \
   && cd /usr/local/bin \
   && ln -s bun bunx

.storybook/main.ts

@@ -5,7 +5,8 @@ const config: StorybookConfig = {
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
-    '@storybook/addon-interactions'
+    '@storybook/addon-interactions',
+    '@storybook/addon-mdx-gfm'
   ],
   framework: {
     name: '@storybook/vue3-vite',

.storybook/preview.ts

@@ -1,5 +1,4 @@
 import type { Preview } from '@storybook/vue3'
-import '../src/assets/main.css';
 
 const preview: Preview = {
   parameters: {

.vitestui/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:lts-slim
+FROM node:18-slim
 
 ENV NODE_PATH=/node_modules
 WORKDIR /app

check-scripts.sh

@@ -9,13 +9,6 @@ function run(){
     "$@"
 }
 
-function o(){
-    exists open \
-        && open "$1" \
-            || echo open "$1"
-}
-
-
 run bun run dev
 echo "==========build related=========="
 run bun run build
@@ -29,9 +22,6 @@ run bun run test:unit:show-report
 echo "==========vitest UI. This can show coverage report. This needs node instead of bun. You can use vitest-ui.sh=========="
 # run bun run test:vitestui
 # vitest ui does not work with bun
-docker pull node:lts-slim
-# docker rmi vitestui
-o http://0.0.0.0:51204/__vitest__/
 run ./vitestui.sh
 
 # current playwright doesn't run in old mac
@@ -49,17 +39,14 @@ then
     run bun run test:vrt:preview
     run bun run test:vrt:snapshots
 else
-    # docker rmi playwright
     # runs e2e test in container
-    run ./e2e-update-snapshots.sh
-    # maybe this fails when updated. need to update snapshot by e2e-update-snapshots.sh
-    run ./e2e.sh || echo Please run ./e2e-show-report.sh to show report
+    run ./e2e.sh
     # build as previous version and take snapshots
     run ./vrt-prepare.sh
     # preview built previous version
     run ./vrt-preview.sh
     # build current local and compare it with previous verision's snapshots
-    run ./vrt.sh || echo Please run ./e2e-show-report.sh to show report
+    run ./vrt.sh
 fi
 
 echo "==========coverage=========="

container.sh

@@ -60,13 +60,6 @@ function _container-command(){
     VOLUMES="$5"
     ENVIRONMENT="$6"
 
-    echo IMAGE ${IMAGE}
-    echo CONTAINER_NAME ${CONTAINER_NAME}
-    echo COMMAND ${COMMAND}
-    echo PORT_MAPPINGS ${PORT_MAPPINGS}
-    echo VOLUMES ${VOLUMES}
-    echo ENVIRONMENT ${ENVIRONMENT}
-
     docker run \
            -it \
            --rm \

e2e-update-snapshots.sh

@@ -1,7 +1,8 @@
 #!/bin/bash
 
 echo port mapping is 9323:9323 for playwright show-report
-echo 'update snapshots with "npm run build && npm run test:e2e:update-snapshots"'
+echo 'test with "npm run build && npm run test:e2e"'
+echo 'It includes running "playwright show-report"'
 # https://playwright.dev/docs/ci-intro
 
 CONTAINER_NAME=playwright

e2e.sh

@@ -2,13 +2,14 @@
 
 echo port mapping is 9323:9323 for playwright show-report
 echo 'test with "npm run build && npm run test:e2e"'
+echo 'It includes running "playwright show-report"'
 # https://playwright.dev/docs/ci-intro
 
 CONTAINER_NAME=playwright
 COMMAND="bun run build && bun run test:e2e"
 PORT_MAPPINGS="-p 9323:9323"
 VOLUMES="-v $(PWD)/node_modules_container:/app/node_modules"
-ENVIRONMENT="--env CI=true"
+ENVIRONMENT=""
 
 source container.sh
 if [ ! -d node_modules_container ]

package.json

@@ -2,36 +2,25 @@
   "name": "vue-app",
   "version": "0.0.0",
   "private": true,
-  "type": "module",
   "scripts": {
-    "// dev": "vite",
-    "// build": "run-p type-check \"build-only {@}\" --",
-    "preview": "vite preview",
-    "test:unit": "vitest",
-    "test:e2e": "playwright test",
-    "build-only": "vite build",
-    "type-check": "vue-tsc --build --force",
-    "eslint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
-    "format": "prettier --write src/",
-    "// storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "//== added from here": "",
     "dev": "vite --host",
     "// build related": "",
     "build": "./scripts/v.sh ; npm-run-all -p type-check 'build-only {@}' -s build:make404 --",
+    "build-only": "vite build",
     "build:make404": "cp dist/index.html dist/404.html",
     "build:preview": "vite preview --host 0.0.0.0",
     "// testing": "",
+    "test:unit": "vitest",
     "test:unit:show-report": "vite preview --outDir vitest-result --host 0.0.0.0",
     "// vitest UI. This can show coverage report. This needs node instead of bun. You can use vitest-ui.sh": "",
     "test:vitestui": "vitest --ui --no-open --api.host 0.0.0.0 --coverage.enabled=true",
     "// playwright related tests": "",
+    "test:e2e": "playwright test && run-s test:e2e:show-report",
     "test:e2e:setup": "playwright install",
     "test:e2e:show-report": "playwright show-report --host 0.0.0.0",
     "test:e2e:update-snapshots": "playwright test --update-snapshots",
     "// runs e2e test name starts 'vrt' for VRT": "",
-    "test:vrt": "playwright test -g 'vrt.*'",
-    "test:vrt:show-report": "run-s test:e2e:show-report",
+    "test:vrt": "playwright test -g 'vrt.*' && run-s test:e2e:show-report",
     "test:vrt:preview": "ORIGINAL=vrt-original run-s build:preview",
     "test:vrt:prepare": "ORIGINAL=vrt-original run-s test:vrt:build test:vrt:snapshots",
     "test:vrt:build": "./scripts/v.sh ; ORIGINAL=vrt-original run-s build-only",
@@ -40,15 +29,18 @@
     "coverage": "vitest run --coverage.enabled=true",
     "coverage:show-report": "vite preview --outDir vitest-result/coverage --host 0.0.0.0",
     "// code quality": "",
+    "eslint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "format": "prettier --write src/",
     "lint": "oxlint",
-    "// storybook related": "",
+    "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
+    "// storybook": "",
     "storybook": "storybook dev -h 0.0.0.0 -p 6006",
     "storybook:build": "storybook build",
     "storybook:preview-built": "vite preview --host 0.0.0.0 --outDir storybook-static"
   },
   "dependencies": {
     "pinia": "^2.1.7",
-    "vue": "^3.3.11",
+    "vue": "^3.3.4",
     "vue-router": "^4.2.5"
   },
   "devDependencies": {
@@ -57,38 +49,39 @@
     "@storybook/addon-essentials": "^7.6.7",
     "@storybook/addon-interactions": "^7.6.7",
     "@storybook/addon-links": "^7.6.7",
+    "@storybook/addon-mdx-gfm": "^7.6.7",
     "@storybook/blocks": "^7.6.7",
     "@storybook/test": "^7.6.7",
     "@storybook/vue3": "^7.6.7",
     "@storybook/vue3-vite": "^7.6.7",
     "@tsconfig/node18": "^18.2.2",
-    "@types/jsdom": "^21.1.6",
-    "@types/node": "^18.19.3",
-    "@vitejs/plugin-vue": "^4.5.2",
-    "@vitest/coverage-v8": "^1.1.3",
-    "@vitest/ui": "^1.1.3",
+    "@types/jsdom": "^21.1.3",
+    "@types/node": "^18.18.5",
+    "@vitejs/plugin-vue": "^4.4.0",
+    "@vitest/coverage-v8": "^0.34.6",
+    "@vitest/ui": "^0.34.6",
     "@vue/eslint-config-prettier": "^8.0.0",
     "@vue/eslint-config-typescript": "^12.0.0",
-    "@vue/test-utils": "^2.4.3",
-    "@vue/tsconfig": "^0.5.0",
+    "@vue/test-utils": "^2.4.1",
+    "@vue/tsconfig": "^0.4.0",
     "autoprefixer": "^10.4.16",
-    "dependency-cruiser": "^16.0.0",
+    "dependency-cruiser": "^15.0.0",
     "eslint": "^8.49.0",
     "eslint-plugin-storybook": "^0.6.15",
     "eslint-plugin-vue": "^9.17.0",
-    "jsdom": "^23.0.1",
+    "jsdom": "^22.1.0",
     "npm-run-all2": "^6.1.1",
     "oxlint": "^0.0.22",
-    "postcss": "^8.4.33",
+    "postcss": "^8.4.31",
     "prettier": "^3.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "storybook": "^7.6.7",
-    "tailwindcss": "^3.4.1",
-    "typescript": "~5.3.0",
-    "vite": "^5.0.10",
-    "vitest": "^1.0.4",
-    "vue-tsc": "^1.8.25"
+    "tailwindcss": "^3.3.5",
+    "typescript": "~5.2.0",
+    "vite": "^4.4.11",
+    "vitest": "^0.34.6",
+    "vue-tsc": "^1.8.19"
   },
   "// engines": {
     "node": "16.x"

playwright.config.ts

@@ -1,4 +1,5 @@
-import { defineConfig, devices } from '@playwright/test'
+import type { PlaywrightTestConfig } from '@playwright/test'
+import { devices } from '@playwright/test'
 
 const webServer = (): string => {
   if (process.env.CI || process.env.ORIGINAL) {
@@ -17,7 +18,7 @@ const webServer = (): string => {
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
-export default defineConfig({
+const config: PlaywrightTestConfig = {
   testDir: './e2e',
   /* Maximum time one test can run for. */
   timeout: 30 * 1000,
@@ -113,10 +114,12 @@ export default defineConfig({
     /**
      * Use the dev server by default for faster feedback loop.
      * Use the preview server on CI for more realistic testing.
-     * Playwright will re-use the local server if there is already a dev-server running.
+    Playwright will re-use the local server if there is already a dev-server running.
      */
     command: webServer(),
     port: 5173,
     reuseExistingServer: !process.env.CI
   }
-})
+}
+
+export default config

postcss.config.js

@@ -1,4 +1,4 @@
-export default {
+module.exports = {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},

src/App.vue

@@ -9,7 +9,6 @@ import HelloWorld from './components/HelloWorld.vue'
 
     <div class="wrapper">
       <HelloWorld msg="You did it!" />
-
       <nav>
         <RouterLink to="/">Home</RouterLink>
         <RouterLink to="/about">About</RouterLink>

src/assets/main.css

@@ -4,6 +4,7 @@
   max-width: 1280px;
   margin: 0 auto;
   padding: 2rem;
+
   font-weight: normal;
 }
 
@@ -12,7 +13,6 @@ a,
   text-decoration: none;
   color: hsla(160, 100%, 37%, 1);
   transition: 0.4s;
-  padding: 3px;
 }
 
 @media (hover: hover) {

src/stories/SampleButton.stories.ts

@@ -1,11 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 
-import SampleButton from './SampleButton.vue'
+import Button from './SampleButton.vue'
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 const meta = {
-  title: 'Example/SampleButton',
-  component: SampleButton,
+  title: 'Example/Button',
+  component: Button,
   // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],
   argTypes: {
@@ -14,7 +14,7 @@ const meta = {
     onClick: { action: 'clicked' }
   },
   args: { primary: false } // default value
-} satisfies Meta<typeof SampleButton>
+} satisfies Meta<typeof Button>
 
 export default meta
 type Story = StoryObj<typeof meta>
@@ -26,27 +26,27 @@ type Story = StoryObj<typeof meta>
 export const Primary: Story = {
   args: {
     primary: true,
-    label: 'SampleButton'
+    label: 'Button'
   }
 }
 
 export const Secondary: Story = {
   args: {
     primary: false,
-    label: 'SampleButton'
+    label: 'Button'
   }
 }
 
 export const Large: Story = {
   args: {
-    label: 'SampleButton',
+    label: 'Button',
     size: 'large'
   }
 }
 
 export const Small: Story = {
   args: {
-    label: 'SampleButton',
+    label: 'Button',
     size: 'small'
   }
 }