Miscellaneous fixes and improvements (#314)

* display random toasts in demo

* first cleanup pass

* restrain container and toast types

* more optimizations

* fix emitted types

* update linter and build environments

.eslintignore

@@ -5,4 +5,3 @@ dist/
 coverage/
 .github/
 .vscode/
-demo/

.eslintrc.js

@@ -6,27 +6,65 @@ module.exports = {
     "vue/setup-compiler-macros": true,
   },
   extends: [
-    "plugin:vue/vue3-recommended",
     "eslint:recommended",
-    "plugin:import/errors",
-    "plugin:import/warnings",
-    "plugin:import/typescript",
-    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:vue/vue3-recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:prettier/recommended",
+    "plugin:import/recommended",
+    "plugin:import/typescript",
   ],
   parser: "vue-eslint-parser",
   parserOptions: {
     parser: "@typescript-eslint/parser",
     sourceType: "module",
   },
-  plugins: ["vue", "@typescript-eslint"],
+  plugins: ["vue", "@typescript-eslint", "jsx-a11y"],
   rules: {
-    "@typescript-eslint/no-use-before-define": "off",
-    "@typescript-eslint/explicit-module-boundary-types": "off",
     "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
     "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
-    "no-useless-escape": "off",
+    "@typescript-eslint/no-empty-function": ["off"],
+    "import/order": [
+      "error",
+      {
+        groups: [
+          "builtin",
+          "external",
+          "internal",
+          "parent",
+          "object",
+          "type",
+          "sibling",
+          "index",
+        ],
+        warnOnUnassignedImports: true,
+        pathGroups: [
+          {
+            pattern: "vue",
+            group: "builtin",
+            position: "before",
+          },
+          {
+            pattern: "**/*.{css,scss}",
+            group: "index",
+            position: "after",
+          },
+        ],
+        pathGroupsExcludedImportTypes: ["builtin", "vue", "**/*.{css,scss}"],
+        "newlines-between": "always",
+        alphabetize: {
+          order: "asc",
+          caseInsensitive: true,
+        },
+      },
+    ],
+    "import/first": "error",
+    "import/no-duplicates": "error",
+    "import/newline-after-import": "error",
+    "import/no-unassigned-import": [
+      "error",
+      { allow: ["**/*.css", "**/*.scss", "**/*.sass"] },
+    ],
+    "import/no-named-default": "error",
   },
   overrides: [
     {
@@ -39,4 +77,9 @@ module.exports = {
       },
     },
   ],
+  settings: {
+    "import/parsers": {
+      "@typescript-eslint/parser": [".ts", ".tsx"],
+    },
+  },
 }

demo/src/App.vue

@@ -1,12 +1,27 @@
 <template>
-  <img alt="Vue logo" src="./assets/logo.png" />
-  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
+  <img alt="Vue logo" src="./assets/logo.png" /><br />
+  <button @click="showToast">Show toast</button>
 </template>
 
 <script setup lang="ts">
 // This starter template is using Vue 3 <script setup> SFCs
 // Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
-import HelloWorld from "./components/HelloWorld.vue"
+import { POSITION, TYPE, useToast } from "../../src"
+
+const toast = useToast()
+
+const getRandom = <T>(list: T[]) =>
+  list[Math.floor((Math.random() * 10) % list.length)]
+
+const randomType = () => getRandom(Object.values(TYPE))
+
+const randomPosition = () => getRandom(Object.values(POSITION))
+
+const randomMessage = () =>
+  getRandom(["Hello", "I'm a toast!", "Oops!", "Hi :)"])
+
+const showToast = () =>
+  toast(randomMessage(), { type: randomType(), position: randomPosition() })
 </script>
 
 <style>

demo/src/main.ts

@@ -1,5 +1,7 @@
-import { createApp } from 'vue'
-import App from './App.vue'
+import { createApp } from "vue"
+
 import Toast from "../../src"
 
-createApp(App).use(Toast).mount('#app')
+import App from "./App.vue"
+
+createApp(App).use(Toast).mount("#app")

package.json

@@ -8,18 +8,18 @@
     "dev": "yarn vite --mode demo",
     "prebuild": "rimraf ./dist",
     "build": "yarn build:code && yarn build:tsc",
-    "build:code": "vite build --mode lib",
-    "build:tsc": "vue-tsc --emitDeclarationOnly --project tsconfig.build.json",
-    "build:demo": "vite build --mode demo",
+    "build:code": "MODE=lib vite build",
+    "build:tsc": "NODE_ENV=production tsc --emitDeclarationOnly --project tsconfig.build.json",
+    "build:demo": "MODE=demo vite build",
     "test:unit": "jest",
     "test": "yarn test:unit",
     "test:watch": "yarn test --watch",
-    "lint": "yarn lint:tsc && yarn lint:eslint",
-    "lint:fix": "yarn lint:tsc && yarn lint:eslint:fix",
-    "lint:tsc": "vue-tsc --noEmit",
-    "lint:eslint": "eslint --ext .vue,.ts .",
-    "lint:eslint:fix": "yarn lint:eslint --fix",
-    "preview": "vite preview --port 3000 demo",
+    "lint": "yarn lint:tsc && yarn lint:eslint .",
+    "lint:fix": "yarn lint --fix",
+    "lint:tsc": "NODE_ENV=production vue-tsc --noEmit",
+    "lint:eslint": "NODE_ENV=production eslint --ext vue,ts,tsx",
+    "lint:staged": "yarn lint:tsc && yarn lint:eslint --fix",
+    "preview": "NODE_ENV=production vite preview --port 3000 demo",
     "prepublishOnly": "yarn lint && yarn test && yarn build",
     "prepare": "husky install"
   },
@@ -52,6 +52,7 @@
     "eslint": "^8.8.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-vue": "^8.4.0",
     "husky": "^7.0.4",
@@ -68,7 +69,7 @@
   },
   "lint-staged": {
     "*.{js,jsx,vue,ts,tsx}": [
-      "eslint --ext .vue,.ts --fix"
+      "yarn lint:staged"
     ]
   },
   "peerDependencies": {

src/components/VtCloseButton.vue

@@ -9,34 +9,27 @@
   </component>
 </template>
 
-<script lang="ts">
-import { defineComponent, computed } from "vue"
-
-export default defineComponent({
-  name: "VtCloseButton",
-})
-</script>
-
 <script lang="ts" setup>
-import { PluginOptions } from ".."
+import { computed } from "vue"
 
 import { VT_NAMESPACE } from "../ts/constants"
-import { PLUGIN_DEFAULTS } from "../ts/propValidators"
+import { TOAST_DEFAULTS } from "../ts/propValidators"
 import { getVueComponentFromObj } from "../ts/utils"
-import { ClassNames } from "../types"
+
+import type { ClassNames, Button } from "../types/common"
 
 interface CloseButtonProps {
-  component?: NonNullable<PluginOptions["closeButton"]>
+  component?: Button
   classNames?: ClassNames
   showOnHover?: boolean
   ariaLabel?: string
 }
 
 const props = withDefaults(defineProps<CloseButtonProps>(), {
-  component: PLUGIN_DEFAULTS.closeButton,
-  classNames: PLUGIN_DEFAULTS.closeButtonClassName,
-  ariaLabel: PLUGIN_DEFAULTS.accessibility()["closeButtonLabel"],
-  showOnHover: PLUGIN_DEFAULTS.showCloseButtonOnHover,
+  component: TOAST_DEFAULTS.closeButton,
+  classNames: TOAST_DEFAULTS.closeButtonClassName,
+  ariaLabel: TOAST_DEFAULTS.accessibility()["closeButtonLabel"],
+  showOnHover: TOAST_DEFAULTS.showCloseButtonOnHover,
 })
 
 const buttonComponent = computed(() => {

src/components/VtIcon.vue

@@ -4,37 +4,33 @@
   }}</component>
 </template>
 
-<script lang="ts">
-import { defineComponent, computed } from "vue"
-
-export default defineComponent({
-  name: "VtIcon",
-})
-</script>
-
 <script lang="ts" setup>
+import { computed } from "vue"
+
 import { TYPE, VT_NAMESPACE } from "../ts/constants"
+import { TOAST_DEFAULTS } from "../ts/propValidators"
 import {
   isNonEmptyString,
   isToastContent,
   hasProp,
   isString,
   getVueComponentFromObj,
 } from "../ts/utils"
-import { PLUGIN_DEFAULTS } from "../ts/propValidators"
-import SuccessIcon from "./icons/VtSuccessIcon.vue"
+
+import type { Icon } from "../types/common"
+
+import ErrorIcon from "./icons/VtErrorIcon.vue"
 import InfoIcon from "./icons/VtInfoIcon.vue"
+import SuccessIcon from "./icons/VtSuccessIcon.vue"
 import WarningIcon from "./icons/VtWarningIcon.vue"
-import ErrorIcon from "./icons/VtErrorIcon.vue"
-import { PluginOptions } from ".."
 
 interface IconProps {
   type?: TYPE
-  customIcon?: PluginOptions["icon"]
+  customIcon?: Icon
 }
 
 const props = withDefaults(defineProps<IconProps>(), {
-  customIcon: PLUGIN_DEFAULTS.icon,
+  customIcon: TOAST_DEFAULTS.icon,
   type: TYPE.DEFAULT,
 })
 

src/components/VtProgressBar.vue

@@ -2,38 +2,25 @@
   <div ref="el" :style="style" :class="cpClass" />
 </template>
 
-<script lang="ts">
-import {
-  computed,
-  defineComponent,
-  ref,
-  watch,
-  nextTick,
-  onMounted,
-  onBeforeUnmount,
-} from "vue"
-
-export default defineComponent({
-  name: "VtProgressBar",
-})
-</script>
-
 <script lang="ts" setup>
-import { PluginOptions } from ".."
+import { computed, ref, watch, nextTick, onMounted, onBeforeUnmount } from "vue"
+
 import { VT_NAMESPACE } from "../ts/constants"
-import { PLUGIN_DEFAULTS } from "../ts/propValidators"
+import { TOAST_DEFAULTS } from "../ts/propValidators"
+
+import type { BaseToastOptions } from "../types/toast"
 
 interface ProgressBarProps {
-  timeout?: PluginOptions["timeout"]
-  hideProgressBar?: PluginOptions["hideProgressBar"]
+  timeout?: BaseToastOptions["timeout"]
+  hideProgressBar?: BaseToastOptions["hideProgressBar"]
   isRunning?: boolean
 }
 
 const emit = defineEmits(["close-toast"])
 const props = withDefaults(defineProps<ProgressBarProps>(), {
-  hideProgressBar: PLUGIN_DEFAULTS.hideProgressBar,
+  hideProgressBar: TOAST_DEFAULTS.hideProgressBar,
   isRunning: false,
-  timeout: PLUGIN_DEFAULTS.timeout,
+  timeout: TOAST_DEFAULTS.timeout,
 })
 
 const el = ref<HTMLElement>()