ci: add lint check for js sdk (#619)

* ci: add lint for js sdk

* fix: lint issue

* chore: update eslint rules

* chore: add eslint recommened rules

* fix: lint issues

* chore: remove next img lint error

* chore: update eslint package name

* update lockfile

* fix eslint package name

.github/workflows/lint.yml

@@ -21,3 +21,29 @@ jobs:
         uses: golangci/golangci-lint-action@v3
         with:
           version: v1.56.2
+  js-sdk-lint:
+    name: JS SDK Lint
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    defaults:
+      run:
+        working-directory: ./sdks/js
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm 8
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8.6.9
+
+      - name: Setup Node.js 20.x
+        uses: actions/setup-node@v2
+        with:
+          node-version: 20.x
+
+      - name: Install Dependencies 🔧
+        run: pnpm i
+
+      - name: Check Lint 🔧
+        run: npm run lint

sdks/js/.eslintrc.js

@@ -1,6 +1,6 @@
 module.exports = {
   root: true,
-  extends: ['frontier'],
+  extends: ['@raystack/eslint-config'],
   settings: {
     next: {
       rootDir: ['apps/*/']

sdks/js/package.json

@@ -24,7 +24,7 @@
   "dependencies": {
     "@changesets/cli": "^2.26.2",
     "eslint": "^7.32.0",
-    "eslint-config-frontier": "workspace:^"
+    "@raystack/eslint-config": "workspace:^"
   },
   "prettier": {
     "tabWidth": 2,

sdks/js/packages/core/package.json

@@ -15,7 +15,7 @@
     "build": "tsup",
     "dev": "tsup --watch src",
     "size": "size-limit",
-    "lint": "eslint \"./**/*.ts*\"",
+    "lint": "eslint \"./**/*.ts*\" --ignore-pattern \"*.d.ts\" --ignore-pattern \"*.test.ts\"",
     "bump-version": "node scripts/bump-version.js",
     "release:ci": "release-it --ci --no-increment --npm.ignoreVersion",
     "release:dry": "release-it --dry-run --npm.ignoreVersion",
@@ -65,7 +65,7 @@
     "esbuild-css-modules-plugin": "^2.7.1",
     "esbuild-plugin-external-global": "^1.0.1",
     "eslint": "^7.32.0",
-    "eslint-config-frontier": "workspace:^",
+    "@raystack/eslint-config": "workspace:^",
     "jest": "^29.7.0",
     "np": "^7.7.0",
     "prettier": "^2.8.8",

sdks/js/packages/core/react/components/organization/domain/verify-domain.tsx

@@ -99,8 +99,8 @@ export const VerifyDomain = () => {
           ) : (
             <>
               <Text size={2}>
-                Before we can verify {domain?.name}, you'll need to create a TXT
-                record in your DNS configuration for this hostname.
+                Before we can verify {domain?.name}, you&apos;ll need to create
+                a TXT record in your DNS configuration for this hostname.
               </Text>
               <Flex
                 style={{

sdks/js/packages/core/react/components/organization/general/general.workspace.tsx

@@ -9,7 +9,7 @@ import {
   TextField,
   Tooltip
 } from '@raystack/apsara';
-import { forwardRef, useCallback, useEffect, useRef } from 'react';
+import React, { forwardRef, useCallback, useEffect, useRef } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import Skeleton from 'react-loading-skeleton';
 import { toast } from 'sonner';

sdks/js/packages/core/react/components/organization/project/members/index.tsx

@@ -16,7 +16,7 @@ import {
   Tooltip
 } from '@raystack/apsara';
 import { useParams } from '@tanstack/react-router';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import Skeleton from 'react-loading-skeleton';
 import { toast } from 'sonner';
 import { useFrontier } from '~/react/contexts/FrontierContext';

sdks/js/packages/core/react/components/organization/project/members/member.columns.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { DotsHorizontalIcon, UpdateIcon } from '@radix-ui/react-icons';
 import { Avatar, DropdownMenu, Flex, Label, Text } from '@raystack/apsara';
 import { useNavigate } from '@tanstack/react-router';

sdks/js/packages/core/react/components/organization/sidebar/helpers.ts

@@ -1,3 +1,5 @@
+import React from 'react';
+
 export type NavigationItemsTypes = {
   active?: boolean;
   to?: string;

sdks/js/packages/core/react/components/organization/sidebar/index.tsx

@@ -7,7 +7,7 @@ import {
   TextField
 } from '@raystack/apsara';
 import { Link, useRouterContext, useRouterState } from '@tanstack/react-router';
-import { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import organization from '~/react/assets/organization.png';
 import user from '~/react/assets/user.png';
 import { getOrganizationNavItems, userNavItems } from './helpers';

sdks/js/packages/core/react/components/organization/teams/members/index.tsx

@@ -11,7 +11,7 @@ import {
   Tooltip
 } from '@raystack/apsara';
 import { Link, useNavigate, useParams } from '@tanstack/react-router';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { toast } from 'sonner';
 
 import { MagnifyingGlassIcon, PaperPlaneIcon } from '@radix-ui/react-icons';

sdks/js/packages/core/react/components/window/index.tsx

@@ -1,5 +1,5 @@
 import { Dialog, Flex, Image } from '@raystack/apsara';
-import { useState } from 'react';
+import React, { useState } from 'react';
 import closeClose from '~/react/assets/close-close.svg';
 import closeDefault from '~/react/assets/close-default.svg';
 import resizeCollapse from '~/react/assets/resize-collapse.svg';

sdks/js/packages/core/react/hooks/usePermissions.ts

@@ -10,7 +10,7 @@ export const usePermissions = (
   const [permisionValues, setPermisionValues] = useState([]);
   const [fetchingPermissions, setFetchingOrgPermissions] = useState(false);
 
-  const { client, activeOrganization: organization } = useFrontier();
+  const { client } = useFrontier();
 
   const fetchOrganizationPermissions = useCallback(async () => {
     try {

sdks/js/tools/eslint-config/index.js

@@ -1,8 +1,17 @@
 /* eslint-disable strict */
 module.exports = {
-  extends: ['next', 'turbo', 'prettier'],
+  plugins: ["test-selectors"],
+  extends: [
+    'next',
+    'turbo',
+    'prettier',
+    "eslint:recommended",
+    'plugin:test-selectors/recommended'
+  ],
   rules: {
-    '@next/next/no-html-link-for-pages': 'off'
+    '@next/next/no-html-link-for-pages': 'off',
+    "no-unused-vars": "warn",
+    "@next/next/no-img-element": "off"
   },
   parserOptions: {
     babelOptions: {

sdks/js/tools/eslint-config/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "eslint-config-frontier",
+  "name": "@raystack/eslint-config",
   "version": "0.0.0",
   "license": "MIT",
   "main": "index.js",
@@ -9,9 +9,11 @@
     "eslint-config-prettier": "^8.3.0",
     "eslint-config-turbo": "^1.9.3",
     "eslint-plugin-react": "7.28.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-test-selectors": "^2.1.1",
     "next": "^13.4.12"
   },
   "publishConfig": {
     "access": "public"
   }
-}
+}