add quasar 그리고 기타 등등

.eslintrc.js

@@ -672,7 +672,7 @@ module.exports = {
     'vue/no-undef-components': [
       'warn',
       {
-        // ignorePatterns: ['i-wavve(\\-\\w+)+'],
+        ignorePatterns: ['q(\\-\\w+)+', 'nuxt(\\-\\w+)+'],
       },
     ],
     'vue/no-undef-properties': 'off',

.npmrc

@@ -1,4 +1,5 @@
 public-hoist-pattern[]=*vue*
 public-hoist-pattern[]=*nuxt*
 public-hoist-pattern[]=defu
-public-hoist-pattern[]=ufo
+public-hoist-pattern[]=ufo
+public-hoist-pattern[]=quasar

apps/nuxt/app.vue

@@ -1,8 +1,9 @@
 <template>
-  <div>
-    hello {{ counter }}
-    <nuxt-page />
-  </div>
+  <q-layout>
+    <q-page-container>
+      <nuxt-page />
+    </q-page-container>
+  </q-layout>
 </template>
 <script lang="ts" setup>
   const counter = useState('counter', () => Math.round(Math.random() * 1000))

apps/nuxt/components/Foo.vue

@@ -0,0 +1,10 @@
+<template>
+  <div>foo</div>
+</template>
+
+<script setup lang="ts">
+  import {PropType} from 'vue'
+
+  const props = defineProps({})
+  const emit = defineEmits([])
+</script>

apps/nuxt/components/__stories__/Hello.story.vue

@@ -0,0 +1,16 @@
+<template>
+  <Story>
+    <div>
+      <span>hello</span>
+      <foo />
+    </div>
+  </Story>
+</template>
+
+<script setup lang="ts">
+  import {PropType} from 'vue'
+  import Foo from 'components/Foo.vue'
+
+  const props = defineProps({})
+  const emit = defineEmits([])
+</script>

apps/nuxt/nuxt.config.ts

@@ -1,15 +1,5 @@
-export default {
-  /**
-   * Add extend the plugin options under the `chakra` key.
-   **/
-  chakra: {
-    extendTheme: {
-      colors: {
-        brand: {
-          //
-          /* ... */
-        },
-      },
-    },
-  },
-}
+import {defineNuxtConfig} from 'nuxt/config'
+export default defineNuxtConfig({
+  modules: ['nuxt-quasar-ui'],
+  // quasar: {},
+})

apps/nuxt/package.json

@@ -9,16 +9,19 @@
     "prepare": "nuxt prepare"
   },
   "dependencies": {
-    "@vueuse/core": "^9.13.0"
+    "@vueuse/core": "^9.13.0",
+    "@quasar/extras": "^1.16.4"
   },
   "devDependencies": {
+    "nuxt-quasar-ui": "^2.0.2",
     "@nuxt/devtools": "latest",
     "@nuxtjs/tailwindcss": "^6.7.2",
     "@types/node": "^18",
     "nuxt": "^3.5.2",
     "vite": "^4.3.9"
   },
   "web-types": [
+    "../../node_modules/quasar/dist/web-types/web-types.json",
     "./web-types.json"
   ]
 }

apps/nuxt/pages/index.vue

@@ -1,5 +1,8 @@
 <template>
-  <div>index page</div>
+  <q-page>
+    index page
+    <q-btn color="primary" label="Primary" />
+  </q-page>
 </template>
 
 <script setup lang="ts">

apps/nuxt/vite.config.ts

@@ -5,7 +5,7 @@ import {defineConfig} from 'vite'
 export default defineConfig({
   resolve: {
     alias: {
-      src: fileURLToPath(new URL('src', import.meta.url)),
+      components: fileURLToPath(new URL('components', import.meta.url)),
     },
   },
   test: {

histoire.config.ts

@@ -0,0 +1,15 @@
+import {defineConfig, getDefaultConfig} from 'histoire'
+import {HstVue} from '@histoire/plugin-vue'
+
+export default defineConfig({
+  backgroundPresets: [
+    ...(getDefaultConfig().backgroundPresets || []),
+    {
+      color: '#cafff5',
+      contrastColor: '#005142',
+      label: 'Custom gray',
+    },
+  ],
+  // outDir: 'hdist',
+  plugins: [HstVue()],
+})

histoire.setup.ts

@@ -0,0 +1,8 @@
+import {defineSetupVue3} from '@histoire/plugin-vue'
+import {createPinia} from 'pinia'
+
+export const setupVue3 = defineSetupVue3(({app}) => {
+  const pinia = createPinia()
+
+  app.use(pinia)
+})

package.json

@@ -3,7 +3,8 @@
   "version": "0.0.1",
   "description": "",
   "scripts": {
-    "test": "vitest"
+    "test": "vitest",
+    "story:dev": "histoire dev"
   },
   "repository": {
     "type": "git",
@@ -21,6 +22,7 @@
     "@typescript-eslint/eslint-plugin": "^5.59.9",
     "@typescript-eslint/parser": "^5.59.9",
     "@vue/eslint-config-typescript": "^11.0.3",
+    "@vitejs/plugin-vue": "4.2.3",
     "eslint": "8.28.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-import-resolver-typescript": "^3.5.5",
@@ -36,6 +38,13 @@
     "eslint-plugin-unicorn": "45.0.0",
     "eslint-plugin-vue": "^9.14.1",
     "histoire": "^0.16.1",
-    "vitest": "^0.32.2"
-  }
+    "vitest": "^0.32.2",
+    "vite": "^4.3.9",
+    "pinia": "^2.1.4",
+    "typescript": "^5.1.3"
+  },
+  "web-types": [
+    "./node_modules/quasar/dist/web-types/web-types.json",
+    "./web-types.json"
+  ]
 }

packages/vite-monorepo-alias/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@byte-abc/vite-monorepo-alias",
+  "version": "1.0.0",
+  "dependencies": {
+    "vue": "3.3.4"
+  },
+  "scripts": {
+    "build": "cross-env NODE_ENV=production vite build",
+    "dev": "cross-env NODE_ENV=dev vite build --watch",
+    "prepare": "cross-env NODE_ENV=dev vite build",
+    "type-check": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "vite": "^4.3.9",
+    "@types/node": "^20.3.1",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "lodash": "^4.17.21",
+    "vite-plugin-dts": "^2.3.0",
+    "@vue/test-utils": "^2.3.2"
+  }
+}

packages/vite-monorepo-alias/src/change-path-delimiter/__tests__/change-path-delimiter.spec.ts

@@ -0,0 +1,8 @@
+import {changePathDelimiter} from '../'
+import {describe, expect, it} from 'vitest'
+
+describe('changePathDelimiter', () => {
+  it('should change the path delimiter', () => {
+    expect(changePathDelimiter('\\a\\b\\c\\', '\\')).toBe('/a/b/c/')
+  })
+})

packages/vite-monorepo-alias/src/change-path-delimiter/index.ts

@@ -0,0 +1,7 @@
+export const changePathDelimiter = (
+  path: string,
+  delimiter: string,
+  targetDelimiter: string = '/',
+) => {
+  return path.split(delimiter).join(targetDelimiter)
+}

packages/vite-monorepo-alias/src/depub-separator/__tests__/index.spec.ts

@@ -0,0 +1,23 @@
+import {createDedupSeparator, dedupSeparator} from '../'
+import {describe, expect, it} from 'vitest'
+
+describe('createTrimDupPath', () => {
+  it('should return the trimmed path', () => {
+    expect(dedupSeparator('a/b/c/d')).toBe('a/b/c/d')
+    expect(dedupSeparator('a///b/c/d')).toBe('a/b/c/d')
+    expect(dedupSeparator('a///b//c/d')).toBe('a/b/c/d')
+    expect(dedupSeparator('a///b//c/d///')).toBe('a/b/c/d/')
+    expect(dedupSeparator('///a///b//c/d///')).toBe('/a/b/c/d/')
+  })
+})
+
+describe('createDedupSeparator', () => {
+  it('should return trimMidPath', () => {
+    const trimMidPath = createDedupSeparator('.')
+    expect(trimMidPath('a.b.c.d')).toBe('a.b.c.d')
+    expect(trimMidPath('a...b.c.d')).toBe('a.b.c.d')
+    expect(trimMidPath('a..b..c.d')).toBe('a.b.c.d')
+    expect(trimMidPath('a...b.c.d...')).toBe('a.b.c.d.')
+    expect(trimMidPath('..a..b..c.d..')).toBe('.a.b.c.d.')
+  })
+})

packages/vite-monorepo-alias/src/depub-separator/index.ts

@@ -0,0 +1,21 @@
+export const createDedupSeparatorRegExp = (pathSeparator: string = '/') => {
+  return RegExp(`[${pathSeparator}]+`, 'giu')
+}
+const MAX_URL_LENGTH = 300
+
+export const createDedupSeparator = (pathSeparator: string = '/', max: number = MAX_URL_LENGTH) => {
+  const MID_TRIM_URL_REGX = createDedupSeparatorRegExp(pathSeparator)
+  return (path: string, replaceValue: string = pathSeparator): string => {
+    if (process.env.NODE_ENV === 'development' && path.length > max) {
+      console.warn('please do not pass a string path too long')
+    }
+    return path.slice(0, max).replace(MID_TRIM_URL_REGX, replaceValue)
+  }
+}
+
+/**
+ * 좌우와 가운데 '/' 패스도 변경 합니다
+ * @param path
+ * @param replaceValue
+ */
+export const dedupSeparator = createDedupSeparator()

packages/vite-monorepo-alias/src/index.ts

@@ -0,0 +1 @@
+export * from './vite-alias'

packages/vite-monorepo-alias/src/resolve-url/__tests__/index.spec.ts

@@ -0,0 +1,26 @@
+import {createResolveUrl, resolveUrl} from '../'
+import {describe, expect, it} from 'vitest'
+
+describe('createResolveUrl', () => {
+  it('should return resolveUrl', () => {
+    const resolveUrl = createResolveUrl()
+    const url = resolveUrl('/foo', '///bar/', 'john')
+    expect(url).toBe('foo/bar/john')
+  })
+  it('should return resolveUrl with a custom separator', () => {
+    const resolveUrl = createResolveUrl('~')
+    const url = resolveUrl('/foo', '///bar/', 'john')
+    expect(url).toBe('foo~bar~john')
+  })
+})
+
+describe('resolve-url', () => {
+  it('should right url', () => {
+    const url = resolveUrl('/foo', '///bar/', 'john')
+    expect(url).toBe('foo/bar/john')
+  })
+  it('should resolve', () => {
+    const url = resolveUrl('foo///bar', '///bar/', 'john')
+    expect(url).toBe('foo/bar/bar/john')
+  })
+})

packages/vite-monorepo-alias/src/resolve-url/index.ts

@@ -0,0 +1,29 @@
+import {trimPath} from '../trim-path'
+import {dedupSeparator} from '../depub-separator'
+
+const MAX_URL_LENGTH = 300
+const MAX_URL_COUNT = 100
+
+export const createResolveUrl = (
+  separator: string = '/',
+  max: number = MAX_URL_LENGTH,
+  maxCount: number = MAX_URL_COUNT,
+) => {
+  return (...urls: string[]): string => {
+    if (process.env.NODE_ENV === 'development' && urls.length > maxCount) {
+      console.warn('please do not pass string url list too long')
+    }
+    const _urls = urls.slice(0, maxCount)
+    return _urls
+      .map((url) => {
+        if (process.env.NODE_ENV === 'development' && url.length > max) {
+          console.warn('please do not pass a string url too long')
+        }
+        const maxedUrl = url.slice(0, max)
+        return trimPath(dedupSeparator(maxedUrl))
+      })
+      .join(separator)
+  }
+}
+
+export const resolveUrl = createResolveUrl()

packages/vite-monorepo-alias/src/split-window-root/__tests__/index.spec.ts

@@ -0,0 +1,11 @@
+import {splitWindowRoot} from '../'
+import {describe, expect, it} from 'vitest'
+
+describe('split-window-root', () => {
+  it('should return path array with window path', () => {
+    expect(splitWindowRoot('C:\\Users\\foo\\web\\')).toEqual(['C:', '\\Users\\foo\\web\\'])
+  })
+  it('should return path array with path ', () => {
+    expect(splitWindowRoot('/users/foo/web/')).toEqual([undefined, '/users/foo/web/'])
+  })
+})

packages/vite-monorepo-alias/src/split-window-root/index.ts

@@ -0,0 +1,10 @@
+const windowRoot = /(?<root>^\w:)(?<restPath>\\.*)/u
+export const splitWindowRoot = (path: string): [undefined | string, string] => {
+  const {root, restPath} = path.match(windowRoot)?.groups ?? {}
+
+  if (!root) {
+    return [undefined, path]
+  }
+
+  return [root, restPath]
+}

packages/vite-monorepo-alias/src/trim-path/__tests__/index.spec.ts

@@ -0,0 +1,28 @@
+import {createTrimPath, trimPath} from '../'
+import {describe, expect, it} from 'vitest'
+
+describe('trimPath', () => {
+  it('should return trimmed path with both', () => {
+    expect(trimPath('/foo')).toBe('foo')
+    expect(trimPath('//foo')).toBe('foo')
+    expect(trimPath('//foo/')).toBe('foo')
+    expect(trimPath('foo/')).toBe('foo')
+    expect(trimPath('foo//')).toBe('foo')
+  })
+  it('should return trimmed path with left', () => {
+    const trimPath = createTrimPath('/', 1000, 'left')
+    expect(trimPath('/foo')).toBe('foo')
+    expect(trimPath('//foo')).toBe('foo')
+    expect(trimPath('//foo/')).toBe('foo/')
+    expect(trimPath('foo/')).toBe('foo/')
+    expect(trimPath('foo//')).toBe('foo//')
+  })
+  it('should return trimmed path with right', () => {
+    const trimPath = createTrimPath('/', 1000, 'right')
+    expect(trimPath('/foo')).toBe('/foo')
+    expect(trimPath('//foo')).toBe('//foo')
+    expect(trimPath('//foo/')).toBe('//foo')
+    expect(trimPath('foo/')).toBe('foo')
+    expect(trimPath('foo//')).toBe('foo')
+  })
+})