feat: eslint package (#377)

* feat: abstract eslint as package

* fix: lint

* Format code with prettier

Co-authored-by: deepsource-autofix[bot] <62050782+deepsource-autofix[bot]@users.noreply.github.com>

apps/embed/.eslintrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  root: true,
+  extends: ['weblint'],
+  ignorePatterns: ['/src/types/lens.ts']
+}

apps/embed/package.json

@@ -25,17 +25,12 @@
     "react-icons": "^4.6.0"
   },
   "devDependencies": {
+    "eslint-config-weblint": "*",
     "@types/mixpanel-browser": "^2.38.0",
     "@types/node": "18.11.9",
     "@types/react": "18.0.25",
     "@types/react-dom": "18.0.9",
-    "@typescript-eslint/eslint-plugin": "^5.43.0",
     "autoprefixer": "^10.4.13",
-    "eslint": "8.27.0",
-    "eslint-config-next": "13.0.4",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-simple-import-sort": "^8.0.0",
-    "eslint-plugin-unused-imports": "^2.0.0",
     "postcss": "^8.4.19",
     "prettier": "^2.7.1",
     "tailwindcss": "^3.2.4",

apps/embed/src/components/MetaTags.tsx

@@ -7,7 +7,8 @@ import {
 } from '@utils/constants'
 import Head from 'next/head'
 import { useRouter } from 'next/router'
-import React, { FC } from 'react'
+import type { FC } from 'react'
+import React from 'react'
 
 type Props = {
   title?: string

apps/embed/src/components/PlayerContextMenu.tsx

@@ -1,7 +1,7 @@
 import { LENSTUBE_URL } from '@utils/constants'
 import useCopyToClipboard from '@utils/hooks/useCopyToClipboard'
 import useOutsideClick from '@utils/hooks/useOutsideClick'
-import { forwardRef, useRef } from 'react'
+import React, { forwardRef, useRef } from 'react'
 import toast from 'react-hot-toast'
 import { AiOutlineLink } from 'react-icons/ai'
 import { BiCheck } from 'react-icons/bi'

apps/embed/src/components/Video.tsx

@@ -5,8 +5,9 @@ import { sanitizeIpfsUrl } from '@utils/functions/sanitizeIpfsUrl'
 import truncate from '@utils/functions/truncate'
 import { Mixpanel, TRACK } from '@utils/track'
 import dynamic from 'next/dynamic'
-import { FC, useEffect } from 'react'
-import { LenstubePublication } from 'src/types/local'
+import type { FC } from 'react'
+import React, { useEffect } from 'react'
+import type { LenstubePublication } from 'src/types/local'
 
 import MetaTags from './MetaTags'
 

apps/embed/src/components/VideoOverlay.tsx

@@ -1,8 +1,9 @@
 import { LENSTUBE_URL } from '@utils/constants'
 import getProfilePicture from '@utils/functions/getProfilePicture'
 import Link from 'next/link'
-import { FC } from 'react'
-import { LenstubePublication } from 'src/types/local'
+import type { FC } from 'react'
+import React from 'react'
+import type { LenstubePublication } from 'src/types/local'
 
 type Props = {
   video: LenstubePublication

apps/embed/src/components/VideoPlayer.tsx

@@ -7,9 +7,9 @@ import {
   Video
 } from '@vime/react'
 import clsx from 'clsx'
-import React, { FC, Ref, useEffect, useRef, useState } from 'react'
-import { HLSData } from 'src/types/local'
-import { LenstubePublication } from 'src/types/local'
+import type { FC, Ref } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
+import type { HLSData, LenstubePublication } from 'src/types/local'
 
 import PlayerContextMenu from './PlayerContextMenu'
 import SensitiveWarning from './SensitiveWarning'

apps/embed/src/pages/[pubId].tsx

@@ -1,9 +1,9 @@
 import Video from '@components/Video'
 import { LENSTUBE_APP_ID, LENSTUBE_BYTE_APP_ID } from '@utils/constants'
-import { GetServerSideProps } from 'next'
+import type { GetServerSideProps } from 'next'
 import apolloNodeClient from 'src/gql/apollo'
 import { VIDEO_DETAIL_QUERY } from 'src/gql/queries'
-import { LenstubePublication } from 'src/types/local'
+import type { LenstubePublication } from 'src/types/local'
 
 export default Video
 

apps/embed/src/pages/_app.tsx

@@ -4,6 +4,7 @@ import '@vime/core/themes/default.css'
 import { MIXPANEL_API_HOST, MIXPANEL_TOKEN } from '@utils/constants'
 import mixpanel from 'mixpanel-browser'
 import type { AppProps } from 'next/app'
+import React from 'react'
 
 function MyApp({ Component, pageProps }: AppProps) {
   if (MIXPANEL_TOKEN) {

apps/embed/src/types/local.ts

@@ -1,4 +1,4 @@
-import {
+import type {
   Attribute,
   Comment,
   FeeCollectModuleSettings,
@@ -9,7 +9,7 @@ import {
   Post,
   RevertCollectModuleSettings,
   TimedFeeCollectModuleSettings
-} from '.'
+} from './lens'
 
 export type VideoDraft = {
   preview: string
@@ -24,6 +24,20 @@ export type FileReaderStreamType = NodeJS.ReadableStream & {
   lastModified: string
 }
 
+export type CollectModuleType = {
+  isTimedFeeCollect?: boolean
+  isFreeCollect?: boolean
+  isFeeCollect?: boolean
+  isRevertCollect?: boolean
+  isLimitedFeeCollect?: boolean
+  isLimitedTimeFeeCollect?: boolean
+  amount?: { currency?: string; value: string }
+  referralFee?: number
+  collectLimit?: string
+  followerOnlyCollect?: boolean
+  recipient?: string
+}
+
 export type UploadedVideo = {
   stream: FileReaderStreamType | null
   preview: string
@@ -48,18 +62,10 @@ export type UploadedVideo = {
   isNSFWThumbnail: boolean
 }
 
-export type CollectModuleType = {
-  isTimedFeeCollect?: boolean
-  isFreeCollect?: boolean
-  isFeeCollect?: boolean
-  isRevertCollect?: boolean
-  isLimitedFeeCollect?: boolean
-  isLimitedTimeFeeCollect?: boolean
-  amount?: { currency?: string; value: string }
-  referralFee?: number
-  collectLimit?: string
-  followerOnlyCollect?: boolean
-  recipient?: string
+export type HLSData = {
+  hrn: string
+  url: string
+  type: string
 }
 
 export type LenstubePublication = Post & Comment & Mirror & { hls: HLSData }
@@ -69,12 +75,6 @@ export type IPFSUploadResult = {
   type: string
 }
 
-export type HLSData = {
-  hrn: string
-  url: string
-  type: string
-}
-
 export type VideoUploadForm = {
   videoThumbnail: IPFSUploadResult | null
   videoSource: string | null

apps/embed/src/utils/functions/getIsSensitiveContent.ts

@@ -1,5 +1,5 @@
 import { SENSITIVE_CONTENT } from '@utils/data/sensitives'
-import { MetadataOutput } from 'src/types'
+import type { MetadataOutput } from 'src/types/lens'
 
 export const getIsSensitiveContent = (
   metadata: MetadataOutput | null,

apps/embed/src/utils/functions/getProfilePicture.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
-import { Profile } from 'src/types'
+import type { Profile } from 'src/types/lens'
 
 import { getIsDicebearImage } from './getIsDicebearImage'
 import { getRandomProfilePicture } from './getRandomProfilePicture'

apps/embed/src/utils/functions/getThumbnailUrl.ts

@@ -1,5 +1,5 @@
 import { STATIC_ASSETS } from '@utils/constants'
-import { LenstubePublication } from 'src/types/local'
+import type { LenstubePublication } from 'src/types/local'
 
 import { sanitizeIpfsUrl } from './sanitizeIpfsUrl'
 

apps/embed/src/utils/functions/getVideoUrl.ts

@@ -1,4 +1,4 @@
-import { LenstubePublication } from 'src/types/local'
+import type { LenstubePublication } from 'src/types/local'
 
 import { sanitizeIpfsUrl } from './sanitizeIpfsUrl'
 

apps/embed/src/utils/hooks/useOutsideClick.ts

@@ -1,4 +1,5 @@
-import { RefObject, useEffect } from 'react'
+import type { RefObject } from 'react'
+import { useEffect } from 'react'
 
 type AnyEvent = MouseEvent | TouchEvent
 

apps/embed/src/utils/track.ts

@@ -1,4 +1,5 @@
-import mixpanel, { Dict } from 'mixpanel-browser'
+import type { Dict } from 'mixpanel-browser'
+import mixpanel from 'mixpanel-browser'
 
 import { IS_MAINNET, MIXPANEL_TOKEN } from './constants'
 

apps/web/.eslintrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  root: true,
+  extends: ['weblint'],
+  ignorePatterns: ['/src/types/lens.ts']
+}

apps/web/package.json

@@ -50,6 +50,7 @@
     "zustand": "^4.1.4"
   },
   "devDependencies": {
+    "eslint-config-weblint": "*",
     "@graphql-codegen/cli": "^2.13.11",
     "@graphql-codegen/fragment-matcher": "^3.3.1",
     "@graphql-codegen/typed-document-node": "^2.3.7",
@@ -63,16 +64,8 @@
     "@types/react-dom": "18.0.9",
     "@types/react-mentions": "^4.1.7",
     "@types/uuid": "^8.3.4",
-    "@typescript-eslint/eslint-plugin": "^5.43.0",
     "autoprefixer": "^10.4.13",
-    "eslint": "8.27.0",
-    "eslint-config-next": "13.0.3",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-simple-import-sort": "^8.0.0",
-    "eslint-plugin-unicorn": "^44.0.2",
-    "eslint-plugin-unused-imports": "^2.0.0",
     "postcss": "^8.4.19",
-    "prettier": "^2.7.1",
     "tailwindcss": "^3.2.4",
     "typescript": "4.9.3"
   }

apps/web/src/utils/functions/getCoverPicture.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
 import { STATIC_ASSETS } from '@utils/constants'
 import type { Profile } from 'src/types/lens'
 

apps/web/src/utils/functions/getProfilePicture.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
 import type { Profile } from 'src/types/lens'
 
 import { getIsDicebearImage } from './getIsDicebearImage'

apps/web/.eslintrc.json → packages/eslint-config-weblint/index.js

@@ -1,23 +1,23 @@
-{
-  "parser": "@typescript-eslint/parser",
-  "env": {
-    "es2022": true
+module.exports = {
+  parser: "@typescript-eslint/parser",
+  env: {
+    es2022: true,
   },
-  "parserOptions": {
-    "ecmaVersion": "latest",
-    "sourceType": "module"
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
   },
-  "plugins": [
+  plugins: [
     "@typescript-eslint",
     "unused-imports",
     "simple-import-sort",
     "prettier",
-    "unicorn"
+    "unicorn",
   ],
-  "extends": ["next", "next/core-web-vitals"],
-  "rules": {
-    "prettier/prettier": ["error", { "endOfLine": "auto" }],
-    "import/no-duplicates": ["error", { "considerQueryString": true }],
+  extends: ["next", "next/core-web-vitals"],
+  rules: {
+    "prettier/prettier": ["error", { endOfLine: "auto" }],
+    "import/no-duplicates": ["error", { considerQueryString: true }],
     "react/prop-types": "off",
     "react/no-unescaped-entities": "off",
     "react/jsx-no-useless-fragment": 2,
@@ -35,7 +35,6 @@
     "simple-import-sort/exports": "error",
     "jsx-a11y/role-supports-aria-props": "off",
     "unicorn/no-lonely-if": "error",
-    "unicorn/no-useless-undefined": "error"
+    "unicorn/no-useless-undefined": "error",
   },
-  "ignorePatterns": ["/src/types/lens.ts"]
-}
+};

packages/eslint-config-weblint/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "eslint-config-weblint",
+  "main": "index.js",
+  "version": "0.0.0",
+  "dependencies": {
+    "eslint": "8.27.0",
+    "eslint-config-next": "13.0.3",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-simple-import-sort": "^8.0.0",
+    "eslint-plugin-unicorn": "^44.0.2",
+    "eslint-plugin-unused-imports": "^2.0.0",
+    "prettier": "^2.7.1",
+    "@typescript-eslint/eslint-plugin": "^5.43.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

yarn.lock

@@ -9425,11 +9425,6 @@ typedarray-to-buffer@3.1.5, typedarray-to-buffer@^3.0.4:
   dependencies:
     is-typedarray "^1.0.0"
 
-typescript@4.8.4:
-  version "4.8.4"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.8.4.tgz#c464abca159669597be5f96b8943500b238e60e6"
-  integrity sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==
-
 typescript@4.9.3:
   version "4.9.3"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.3.tgz#3aea307c1746b8c384435d8ac36b8a2e580d85db"