style: code formatted using new rules for jsx

therealokoro · Nov 19, 2022 · b7525e6 · b7525e6
1 parent 00fb497
commit b7525e6
Show file tree

Hide file tree

Showing 23 changed files with 880 additions and 332 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -21,6 +21,7 @@ module.exports = {
     'vue',
     '@typescript-eslint',
     'import',
+    'react',
   ],
   ignorePatterns: ['node_modules/*', 'dist/*', '*.yaml', '*.yml', '*.json', '*.md'],
   rules: {
@@ -60,24 +61,51 @@ module.exports = {
 
     // Plugin: eslint-plugin-import
     // For omitting extension for ts files
-    'import/extensions': [
-      'error',
-      'ignorePackages',
-      {
-        js: 'never',
-        jsx: 'never',
-        ts: 'never',
-        tsx: 'never',
-      },
-    ],
+    // 'import/extensions': [
+    //   'error',
+    //   'ignorePackages',
+    //   {
+    //     js: 'never',
+    //     jsx: 'never',
+    //     ts: 'never',
+    //     tsx: 'never',
+    //   },
+    // ],
+    // ℹ️ Temporary disabled rules
+    'import/extensions': 'off',
 
     '@typescript-eslint/consistent-type-imports': 'error',
 
-    'vue/custom-event-name-casing': ['error',
-      {
-        ignores: ['click:close', 'click:appendIcon'],
-      },
-    ],
+    // JSX rules
+    'react/jsx-boolean-value': ['error', 'never'],
+    'react/jsx-child-element-spacing': 'error',
+    'react/jsx-closing-bracket-location': 'error',
+
+    // 'react/jsx-closing-tag-location': 'error',
+    'react/jsx-curly-brace-presence': 'error',
+    'react/jsx-curly-newline': 'error',
+    'react/jsx-curly-spacing': 'error',
+    'react/jsx-equals-spacing': 'error',
+    'react/jsx-filename-extension': ['error', { extensions: ['.tsx', '.jsx'] }],
+    'react/jsx-first-prop-new-line': 'error',
+    'react/jsx-indent-props': [2, 2],
+    'react/jsx-indent': [2, 2],
+    'react/jsx-max-props-per-line': 'error',
+    'react/jsx-no-comment-textnodes': 'error',
+    'react/jsx-no-duplicate-props': 'error',
+    'react/jsx-no-leaked-render': 'error',
+    'react/jsx-no-target-blank': 'error',
+    'react/jsx-no-useless-fragment': 'error',
+    'react/jsx-one-expression-per-line': 'error',
+    'react/jsx-pascal-case': 'error',
+    'react/jsx-props-no-multi-spaces': 'error',
+    'react/jsx-sort-props': 'error',
+    'react/jsx-tag-spacing': 'error',
+    'react/self-closing-comp': 'error',
+
+    // 'react/no-unknown-property': ['error', { ignore: ['class', 'v-show', 'v-model', 'v-slots', 'for', 'tabindex'] }],
+    'react/no-unescaped-entities': 'error',
+    'react/no-invalid-html-attribute': 'error',
   },
   settings: {
     'import/parsers': {

diff --git a/package.json b/package.json
@@ -11,8 +11,7 @@
     "docs:build": "nr --filter anu-vue build && nr --filter @anu-vue/documentation build",
     "clean": "rimraf packages/anu-vue/dist",
     "release": "bumpp package.json packages/anu-vue/package.json --execute 'nr --filter anu-vue build' && na --filter anu-vue publish --no-git-checks",
-    "lint": "eslint .",
-    "lint:fix": "eslint . --fix"
+    "lint": "nr --filter anu-vue lint"
   },
   "keywords": [],
   "author": "",
@@ -27,7 +26,10 @@
     "eslint": "^8.26.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-import-resolver-typescript": "^3.5.2",
+    "eslint-plugin-eslint-comments": "^3.2.0",
     "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsonc": "^2.5.0",
+    "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-unicorn": "^44.0.2",
     "eslint-plugin-vue": "^9.6.0",
     "fast-glob": "^3.2.11",

diff --git a/packages/anu-vue/package.json b/packages/anu-vue/package.json
@@ -40,7 +40,8 @@
     "dev": "nr gen-comp-meta && vite build --watch",
     "gen-comp-meta": "na tsx ../../scripts/gen-component-meta.ts",
     "build": "nr gen-comp-meta && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "lint": "eslint . --fix"
   },
   "dependencies": {
     "@floating-ui/dom": "^1.0.3",
@@ -68,4 +69,4 @@
     "@vueuse/core": "^8.7.5",
     "vue-router": "4"
   }
-}
+}
diff --git a/packages/anu-vue/src/components/alert/AAlert.tsx b/packages/anu-vue/src/components/alert/AAlert.tsx
@@ -47,6 +47,7 @@ export const AAlert = defineComponent({
       default: null,
     },
   },
+  emits: ['click:appendIcon', 'update:modelValue'],
   setup(props, { slots, emit }) {
     const spacing = useSpacing(toRef(props, 'spacing'))
     const { getLayerClasses } = useLayer()
@@ -63,7 +64,7 @@ export const AAlert = defineComponent({
 
     // 👉 Append icon
     const appendIcon = props.appendIcon || (props.dismissible ? 'i-bx-x' : null)
-    const handleAppendIconClick = (e: Event) => {
+    const handleAppendIconClick = () => {
       // If alert is dismissible remove/close alert
       if (props.dismissible)
         isAlertVisible.value = false
@@ -73,16 +74,32 @@ export const AAlert = defineComponent({
     }
 
     // TODO: Omit writing `props.modelValue ??` multiple times
-    return () => <div style={[...styles.value, { '--a-spacing': spacing.value / 100 }]} class={['a-alert items-start w-full', props.modelValue ?? isAlertVisible.value ? 'flex' : 'hidden', ...classes.value]}>
-      {/* ℹ️ We need div as wrapper with span having `vertical-align: text-top` to center the icon with the text */}
-      {props.icon ? <div><span class={props.icon}></span></div> : null}
-      <div class="flex-grow">{slots.default?.()}</div>
-      {
+    return () => (
+      <div
+        class={['a-alert items-start w-full', props.modelValue ?? isAlertVisible.value ? 'flex' : 'hidden', ...classes.value]}
+        style={[...styles.value, { '--a-spacing': spacing.value / 100 }]}
+      >
+        {/* ℹ️ We need div as wrapper with span having `vertical-align: text-top` to center the icon with the text */}
+        {props.icon
+          ? <div>
+            <span class={props.icon} />
+          </div>
+          : null}
+        <div class="flex-grow">
+          {slots.default?.()}
+        </div>
+        {
         appendIcon
-          ? <div><span class={['align-text-top', appendIcon, { 'cursor-pointer': props.dismissible }]} onClick={handleAppendIconClick}></span></div>
+          ? <div>
+            <span
+              class={['align-text-top', appendIcon, { 'cursor-pointer': props.dismissible }]}
+              onClick={handleAppendIconClick}
+            />
+          </div>
           : null
       }
-    </div>
+      </div>
+    )
   },
 })
 

diff --git a/packages/anu-vue/src/components/avatar/AAvatar.tsx b/packages/anu-vue/src/components/avatar/AAvatar.tsx
@@ -28,20 +28,31 @@ export const AAvatar = defineComponent({
 
     const defaultSlotContent = computed(() => {
       if (props.icon)
-        return <i class={props.icon}></i>
-      if (props.src)
-        return <img src={props.src} alt={props.alt} />
+        return <i class={props.icon} />
+      if (props.src) {
+        return (
+          <img
+            alt={props.alt}
+            src={props.src}
+          />
+        )
+      }
 
       return props.content
     })
 
-    return () => <div style={[...styles.value, { '--a-spacing': spacing.value / 100 }]} class={['a-avatar overflow-hidden inline-flex items-center justify-center', ...classes.value]}>
-      {
+    return () => (
+      <div
+        class={['a-avatar overflow-hidden inline-flex items-center justify-center', ...classes.value]}
+        style={[...styles.value, { '--a-spacing': spacing.value / 100 }]}
+      >
+        {
         slots.default
           ? slots.default()
           : defaultSlotContent.value
       }
-    </div>
+      </div>
+    )
   },
 })
 

diff --git a/packages/anu-vue/src/components/badge/ABadge.tsx b/packages/anu-vue/src/components/badge/ABadge.tsx
@@ -16,7 +16,7 @@ export const ABadge = defineComponent({
   inheritAttrs: false,
   props: {
     spacing: spacingProp,
-    
+
     /**
      * Show/Hide badge based on v-model value
      */
@@ -142,7 +142,12 @@ export const ABadge = defineComponent({
     return () => <div class={['a-badge-wrapper relative']}>
       {slots.default?.()}
       <Transition name="scale">
-        <div v-show={props.modelValue} {...attrs} style={[positionStyles.value, { '--a-spacing': spacing.value / 100 }]} class={[`a-badge bg-${props.color} absolute`, { 'a-badge-dot': props.dot }, { 'a-badge-bordered': props.bordered }]}>
+        <div
+          v-show={props.modelValue}
+          {...attrs}
+          class={[`a-badge bg-${props.color} absolute`, { 'a-badge-dot': props.dot }, { 'a-badge-bordered': props.bordered }]}
+          style={[positionStyles.value, { '--a-spacing': spacing.value / 100 }]}
+        >
           {badgeSlotContent.value}
         </div>
       </Transition>