chore: added enforcing of name components reference (#69)

nethesis · Aug 9, 2024 · 243a23a · 243a23a
1 parent b33b21f
commit 243a23a
Show file tree

Hide file tree

Showing 13 changed files with 25 additions and 22 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -4,13 +4,15 @@ require('@rushstack/eslint-patch/modern-module-resolution')
 module.exports = {
   root: true,
   extends: [
-    'plugin:vue/vue3-essential',
     'plugin:vue/vue3-recommended',
     'eslint:recommended',
     '@vue/eslint-config-typescript',
     '@vue/eslint-config-prettier/skip-formatting',
     'plugin:storybook/recommended'
   ],
+  rules: {
+    "vue/component-name-in-template-casing": ["error"],
+  },
   parserOptions: {
     ecmaVersion: 'latest'
   }

diff --git a/package.json b/package.json
@@ -43,7 +43,8 @@
     "build": "run-p build-types \"build-only {@}\" --",
     "build-only": "vite build",
     "build-types": "vue-tsc --declaration --declarationMap --emitDeclarationOnly -p tsconfig.app.json --composite false",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --ignore-path .gitignore",
+    "lint-fix": "npm run lint -- --fix",
     "format": "prettier --write src/",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"

diff --git a/src/components/NeCombobox.vue b/src/components/NeCombobox.vue
@@ -349,7 +349,7 @@ onClickOutside(comboboxRef, () => onClickOutsideCombobox())
             { 'cursor-not-allowed opacity-50': disabled }
           ]"
         >
-          <font-awesome-icon :icon="fasChevronDown" class="h-3 w-3 shrink-0" aria-hidden="true" />
+          <FontAwesomeIcon :icon="fasChevronDown" class="h-3 w-3 shrink-0" aria-hidden="true" />
         </ComboboxButton>
         <div v-show="open || showOptions">
           <ComboboxOptions
@@ -378,7 +378,7 @@ onClickOutside(comboboxRef, () => onClickOutsideCombobox())
               >
                 <div class="flex items-center truncate">
                   <!-- option icon -->
-                  <font-awesome-icon
+                  <FontAwesomeIcon
                     v-if="option.icon"
                     :icon="option.icon"
                     class="mr-2.5 h-4 w-4 shrink-0"
@@ -403,7 +403,7 @@ onClickOutside(comboboxRef, () => onClickOutsideCombobox())
                     'absolute inset-y-0 right-0 flex items-center pr-4 text-primary-700 dark:text-primary-500'
                   ]"
                 >
-                  <font-awesome-icon :icon="fasCheck" class="h-4 w-4 shrink-0" aria-hidden="true" />
+                  <FontAwesomeIcon :icon="fasCheck" class="h-4 w-4 shrink-0" aria-hidden="true" />
                 </span>
               </li>
             </ComboboxOption>

diff --git a/src/components/NeDropdown.vue b/src/components/NeDropdown.vue
@@ -82,7 +82,7 @@ watch(
       <slot name="button">
         <!-- default kebab button -->
         <NeButton class="py-2" kind="tertiary">
-          <font-awesome-icon
+          <FontAwesomeIcon
             :icon="['fas', 'ellipsis-vertical']"
             aria-hidden="true"
             class="h-5 w-5 shrink-0"
@@ -125,7 +125,7 @@ watch(
                 ]"
                 @click="onItemClick(item)"
               >
-                <font-awesome-icon
+                <FontAwesomeIcon
                   v-if="item.icon"
                   :icon="[item.iconStyle || 'fas', item.icon]"
                   aria-hidden="true"

diff --git a/src/components/NeExpandable.vue b/src/components/NeExpandable.vue
@@ -55,7 +55,7 @@ function toggleExpanded() {
         <template v-if="!fullWidth">
           <NeButton kind="tertiary" size="sm" class="-ml-2">
             <template #suffix>
-              <font-awesome-icon
+              <FontAwesomeIcon
                 :icon="internalIsExpanded ? faChevronUp : faChevronDown"
                 class="h-3 w-3"
                 aria-hidden="true"
@@ -70,7 +70,7 @@ function toggleExpanded() {
             class="flex w-full items-center justify-between rounded border-b border-gray-300 px-2 py-1 text-sm font-medium text-gray-900 hover:bg-gray-200 dark:border-gray-500 dark:text-gray-50 dark:hover:bg-gray-700"
           >
             <span>{{ label }}</span>
-            <font-awesome-icon
+            <FontAwesomeIcon
               :icon="internalIsExpanded ? faChevronUp : faChevronDown"
               class="h-3 w-3"
               aria-hidden="true"

diff --git a/src/components/NeInlineNotification.vue b/src/components/NeInlineNotification.vue
@@ -115,7 +115,7 @@ const closeIconKindStyle: { [index: string]: string } = {
   <div :class="`rounded-md border-l-4 p-4 text-sm ${containerKindStyle[props.kind as string]}`">
     <div class="flex">
       <div class="flex-shrink-0">
-        <font-awesome-icon
+        <FontAwesomeIcon
           :class="`h-4 w-4 ${iconKindStyle[props.kind as string]}`"
           :icon="iconName[props.kind as string]"
           aria-hidden="true"
@@ -149,7 +149,7 @@ const closeIconKindStyle: { [index: string]: string } = {
             @click="isExpandedDetails = !isExpandedDetails"
           >
             <span>{{ showDetailsLabel }}</span>
-            <font-awesome-icon
+            <FontAwesomeIcon
               :icon="isExpandedDetails ? faChevronUp : faChevronDown"
               aria-hidden="true"
               class="ml-2 h-3 w-3"
@@ -204,7 +204,7 @@ const closeIconKindStyle: { [index: string]: string } = {
             @click="emit('close')"
           >
             <span class="sr-only">{{ props.closeAriaLabel }}</span>
-            <font-awesome-icon :icon="faXmark" class="h-4 w-4" aria-hidden="true" />
+            <FontAwesomeIcon :icon="faXmark" class="h-4 w-4" aria-hidden="true" />
           </button>
         </div>
       </div>

diff --git a/src/components/NeListbox.vue b/src/components/NeListbox.vue
@@ -236,7 +236,7 @@ onClickOutside(listboxRef, () => onClickOutsideListbox())
               { 'cursor-not-allowed opacity-50': disabled }
             ]"
           >
-            <font-awesome-icon :icon="fasChevronDown" class="h-3 w-3 shrink-0" aria-hidden="true" />
+            <FontAwesomeIcon :icon="fasChevronDown" class="h-3 w-3 shrink-0" aria-hidden="true" />
           </div>
         </ListboxButton>
         <Teleport to="body">
@@ -283,7 +283,7 @@ onClickOutside(listboxRef, () => onClickOutsideListbox())
                       'absolute inset-y-0 right-0 flex items-center pr-4 text-primary-700 dark:text-primary-500'
                     ]"
                   >
-                    <font-awesome-icon
+                    <FontAwesomeIcon
                       :icon="fasCheck"
                       class="h-4 w-4 shrink-0"
                       aria-hidden="true"

diff --git a/src/components/NeModal.vue b/src/components/NeModal.vue
@@ -141,7 +141,7 @@ function onSecondaryClick() {
                     @click="onClose"
                   >
                     <span class="sr-only">{{ closeAriaLabel }}</span>
-                    <font-awesome-icon
+                    <FontAwesomeIcon
                       :icon="['fas', 'xmark']"
                       class="h-5 w-5"
                       aria-hidden="true"

diff --git a/src/components/NePaginator.vue b/src/components/NePaginator.vue
@@ -150,7 +150,7 @@ function navigateToPage(page: number) {
             @click="navigateToPage(currentPage - 1)"
           >
             <span class="sr-only">{{ previousLabel }}</span>
-            <font-awesome-icon :icon="fasChevronLeft" class="h-3 w-3 shrink-0" aria-hidden="true" />
+            <FontAwesomeIcon :icon="fasChevronLeft" class="h-3 w-3 shrink-0" aria-hidden="true" />
           </button>
         </li>
         <!-- show all page numbers if there are no more than 8 pages in total -->
@@ -231,7 +231,7 @@ function navigateToPage(page: number) {
             @click="navigateToPage(currentPage + 1)"
           >
             <span class="sr-only">{{ nextLabel }}</span>
-            <font-awesome-icon
+            <FontAwesomeIcon
               :icon="fasChevronRight"
               class="h-3 w-3 shrink-0"
               aria-hidden="true"

diff --git a/src/components/NeTextArea.vue b/src/components/NeTextArea.vue
@@ -106,7 +106,7 @@ function emitModelValue(ev: any) {
       />
       <!-- invalid icon -->
       <div v-if="invalidMessage" class="pointer-events-none absolute inset-y-0 right-0 pr-3 pt-2">
-        <font-awesome-icon
+        <FontAwesomeIcon
           :icon="['fas', 'circle-exclamation']"
           class="h-4 w-4 text-rose-700 dark:text-rose-400"
           aria-hidden="true"

diff --git a/src/components/NeTextInput.vue b/src/components/NeTextInput.vue
@@ -171,7 +171,7 @@ function focus() {
           <span class="sr-only">{{
             isPasswordVisible ? hidePasswordLabel : showPasswordLabel
           }}</span>
-          <font-awesome-icon
+          <FontAwesomeIcon
             :icon="['fas', isPasswordVisible ? 'eye-slash' : 'eye']"
             class="h-4 w-4 text-gray-500 dark:text-gray-400"
             aria-hidden="true"
@@ -183,7 +183,7 @@ function focus() {
         v-else-if="invalidMessage"
         class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3"
       >
-        <font-awesome-icon
+        <FontAwesomeIcon
           :icon="['fas', 'circle-exclamation']"
           class="h-4 w-4 text-rose-700 dark:text-rose-400"
           aria-hidden="true"

diff --git a/src/components/NeToastNotification.vue b/src/components/NeToastNotification.vue
@@ -80,7 +80,7 @@ library.add(fasXmark)
           @click="$emit('close')"
         >
           <span class="sr-only">{{ srCloseLabel }}</span>
-          <font-awesome-icon :icon="['fas', 'xmark']" class="h-5 w-5" aria-hidden="true" />
+          <FontAwesomeIcon :icon="['fas', 'xmark']" class="h-5 w-5" aria-hidden="true" />
         </button>
         <!-- timestamp -->
         <NeTooltip

diff --git a/stories/NeDropdown.stories.ts b/stories/NeDropdown.stories.ts
@@ -97,7 +97,7 @@ const withSlotTemplate =
     <template #button>\
       <NeButton>\
         <template #suffix>\
-          <font-awesome-icon :icon="[\'fas\', \'chevron-down\']" class="h-4 w-4" aria-hidden="true" />\
+          <FontAwesomeIcon :icon="[\'fas\', \'chevron-down\']" class="h-4 w-4" aria-hidden="true" />\
         </template>\
         Menu\
       </NeButton>\