style: linting

.eslintrc.cjs

@@ -10,8 +10,10 @@ module.exports = {
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
     'plugin:@typescript-eslint/eslint-recommended',
-    'plugin:@typescript-eslint/recommended',
+    'plugin:markdown/recommended',
     'plugin:import/recommended',
+    'plugin:import/errors',
+    'plugin:import/typescript',
     'plugin:unicorn/recommended',
     'prettier',
   ],
@@ -30,19 +32,69 @@ module.exports = {
   plugins: [
     '@typescript-eslint',
     'eslint-plugin-tsdoc',
+    'react',
     'unicorn',
     'prettier',
+    'simple-import-sort',
   ],
   rules: {
+    // '@typescript-eslint/no-floating-promises': 2,
+
+    '@typescript-eslint/ban-ts-comment': 0,
+    '@typescript-eslint/consistent-type-imports': 2,
+    '@typescript-eslint/explicit-module-boundary-types': 0,
+    '@typescript-eslint/no-unused-vars': [
+      2,
+      {
+        ignoreRestSiblings: true,
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+        caughtErrorsIgnorePattern: `^_`,
+      },
+    ],
+    'import/first': 2,
+    'import/newline-after-import': 2,
+    'import/no-duplicates': 2,
+    'import/order': 0,
+    'jsx-quotes': 2,
+    'object-shorthand': 2,
+    'prettier/prettier': 2,
+    'react/jsx-curly-brace-presence': [2, 'never'],
+    'simple-import-sort/exports': 2,
+    'simple-import-sort/imports': [
+      2,
+      {
+        groups: [
+          // Node.js builtins. You could also generate this regex if you use a `.js` config.
+          // For example: `^(${require("module").builtinModules.join("|")})(/|$)`
+          // Note that if you use the `node:` prefix for Node.js builtins,
+          // you can avoid this complexity: You can simply use "^node:".
+          ['^node:'],
+          [
+            '^(assert|buffer|child_process|cluster|console|constants|crypto|dgram|dns|domain|events|fs|http|https|module|net|os|path|punycode|querystring|readline|repl|stream|string_decoder|sys|timers|tls|tty|url|util|vm|zlib|freelist|v8|process|async_hooks|http2|perf_hooks)(/.*|$)',
+          ],
+          // Packages. `react` related packages come first.
+          ['^react', '^@?\\w'],
+          // Internal packages.
+          ['^(votes)(\\/.*|$)'],
+          // Side effect imports.
+          ['^\\u0000'],
+          // Parent imports. Put `..` last.
+          ['^\\.\\.(?!/?$)', '^\\.\\./?$'],
+          // Other relative imports. Put same-folder imports and `.` last.
+          ['^\\./(?=.*/)(?!/?$)', '^\\.(?!/?$)', '^\\./?$'],
+          // Style imports.
+          ['^.+\\.s?css$'],
+        ],
+      },
+    ],
     'tsdoc/syntax': 1,
-    'unicorn/prevent-abbreviations': 0,
-    'unicorn/prefer-object-from-entries': 0,
     'unicorn/no-array-reduce': 0,
+    'unicorn/no-new-array': 0,
     'unicorn/no-null': 0,
     'unicorn/prefer-number-properties': 0,
-    'unicorn/no-new-array': 0,
-    '@typescript-eslint/explicit-module-boundary-types': 0,
-    'prettier/prettier': 2,
+    'unicorn/prefer-object-from-entries': 0,
+    'unicorn/prevent-abbreviations': 0,
   },
   overrides: [
     {

demo/package.json

@@ -49,7 +49,6 @@
     "numeral": "^2.0.6",
     "react": "^18",
     "react-dom": "^18",
-    "react-spring": "^9.7.1",
     "react-with-gesture": "^4.0.8",
     "tsconfig": "*",
     "typescript": "5.0.4",

demo/pages/_app.tsx

@@ -1,9 +1,10 @@
+import { config } from '@fortawesome/fontawesome-svg-core'
 import type { AppProps } from 'next/app'
 import PlausibleProvider from 'next-plausible'
 
 import '../assets/antd-custom.less'
 import 'antd/dist/antd.less'
-import { config } from '@fortawesome/fontawesome-svg-core'
+
 import '@fortawesome/fontawesome-svg-core/styles.css'
 
 config.autoAddCss = false

demo/pages/index.tsx

@@ -1,6 +1,7 @@
 import type { NextPage } from 'next'
-import Head from 'next/head'
 import dynamic from 'next/dynamic'
+import Head from 'next/head'
+
 import { MyLayout } from '../src/layout'
 
 const Sandbox = dynamic(() => import('../src/sandbox'), { ssr: false })

demo/src/axis.tsx

@@ -1,6 +1,7 @@
-import _ from 'lodash'
 import React from 'react'
-import { StoreBallots } from './ballot-with-id'
+import _ from 'lodash'
+
+import type { StoreBallots } from './ballot-with-id'
 import { numberToLetters } from './list-votes-group'
 
 export const AxisBallot: React.FC<{

demo/src/ballot-utils.ts

@@ -1,6 +1,8 @@
 import _ from 'lodash'
 import type { Ballot } from 'votes'
-import { totalWeight, WithWeights } from './generate-ballots'
+
+import type { WithWeights } from './generate-ballots'
+import { totalWeight } from './generate-ballots'
 
 export const serializeRank = (rank: string[]): string =>
   JSON.stringify(rank.sort((a, b) => a.localeCompare(b)))

demo/src/ballots-ui.tsx

@@ -1,7 +1,8 @@
 import type { Ballot, Round } from 'votes'
+
+import type { BallotWithId } from './ballot-with-id'
 import { totalWeight } from './generate-ballots'
-import { BallotWithId } from './ballot-with-id'
-import { Scale } from './scale'
+import type { Scale } from './scale'
 
 export type WithOffset = Ballot & {
   offset: number

demo/src/ballots.tsx

@@ -1,18 +1,19 @@
-import { useStore } from './store'
-import {
-  selectAddRandomBallot,
-  selectBallots,
-  selectNormalizeWeights100,
-} from './store/selectors'
-import { totalWeight } from './generate-ballots'
-import { Button, Typography } from 'antd'
 import {
   ArrowRightOutlined,
   DeleteOutlined,
   EditOutlined,
   MinusOutlined,
   PlusOutlined,
 } from '@ant-design/icons'
+import { Button, Typography } from 'antd'
+
+import {
+  selectAddRandomBallot,
+  selectBallots,
+  selectNormalizeWeights100,
+} from './store/selectors'
+import { totalWeight } from './generate-ballots'
+import { useStore } from './store'
 
 export const BallotsComp = () => {
   const groupedBallots = useStore(selectBallots)

demo/src/boxes-transition.tsx

@@ -1,8 +1,9 @@
-import { a, useTransition } from '@react-spring/web'
 import type { TransitionFn } from '@react-spring/core'
-import { useHover } from '@use-gesture/react'
+import { a, useTransition } from '@react-spring/web'
+import type { useHover } from '@use-gesture/react'
 import _ from 'lodash'
-import { BoxMeta, BoxPosition, WithColor } from './ballots-ui'
+
+import type { BoxMeta, BoxPosition, WithColor } from './ballots-ui'
 
 type TrState = {
   x: number
@@ -79,7 +80,7 @@ export const renderBoxes = (
         y={y}
         // transform={`translate(${offset[0]}, ${offset[1]})`}
         style={{
-          opacity: opacity, //.to({ range: [1, 0], output: [1, 0] }),
+          opacity, //.to({ range: [1, 0], output: [1, 0] }),
           x,
           filter,
           y,

demo/src/candidates.tsx

@@ -1,14 +1,15 @@
 import React, { useState } from 'react'
+import { PlusOutlined } from '@ant-design/icons'
 import { Button, Input, Tag, type TagProps, Typography } from 'antd'
-import { useStore } from './store'
+
 import {
   selectAddCandidate,
   selectRemoveCandidate,
   selectUpdateCandidateCount,
   useCandidates,
 } from './store/selectors'
-import { PlusOutlined } from '@ant-design/icons'
-import { Candidate } from './generate-ballots'
+import type { Candidate } from './generate-ballots'
+import { useStore } from './store'
 
 export const Candidates: React.FC = () => {
   const candidates = useCandidates()

demo/src/display-ballots.tsx

@@ -1,20 +1,14 @@
 import React, { useMemo } from 'react'
 import type { Ballot, Round } from 'votes'
+
 import { useCandidatesColors } from './store/selectors'
-import { StoreBallots } from './ballot-with-id'
-import {
-  BoxBase,
-  BoxPosition,
-  toBoxes,
-  withBallotX,
-  withColor,
-  WithColor,
-  withQualified,
-} from './ballots-ui'
-import { renderBoxes, useBoxesTransition } from './boxes-transition'
-import { SvgBallots } from './svg-ballots'
 import { AxisBallot } from './axis'
+import type { StoreBallots } from './ballot-with-id'
+import type { BoxBase, BoxPosition, WithColor } from './ballots-ui'
+import { toBoxes, withBallotX, withColor, withQualified } from './ballots-ui'
+import { renderBoxes, useBoxesTransition } from './boxes-transition'
 import { scaling } from './scale'
+import { SvgBallots } from './svg-ballots'
 
 const getHighestBallot = (ballots: Ballot[]) =>
   Math.max(...ballots.map((b) => b.ranking.length))

demo/src/edit-ballot-rank.tsx

@@ -1,15 +1,16 @@
 import React from 'react'
-import { useStore } from './store'
+import { Button } from 'antd'
+
+import Ranker from './react-ranker/ranker'
+import { WithWidth } from './react-ranker/use-width'
 import {
   selectChangeBallotRanking,
   selectSelectBallot,
   selectSelectedBallot,
   selectWidth,
   useCandidates,
 } from './store/selectors'
-import { Button } from 'antd'
-import { WithWidth } from './react-ranker/use-width'
-import Ranker from './react-ranker/ranker'
+import { useStore } from './store'
 
 export const RankedWithWidth = WithWidth(Ranker)
 

demo/src/force-graph-spring.tsx

@@ -1,18 +1,19 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { a, useSprings } from '@react-spring/web'
+import { dispatch } from 'd3-dispatch'
 import {
   forceCenter,
   forceManyBody,
   forceSimulation,
   type Simulation,
 } from 'd3-force'
-import React, { useEffect, useRef, useState } from 'react'
-import { dispatch } from 'd3-dispatch'
 import { interval } from 'd3-timer'
-import { forceLink } from './force-link'
-import { a, useSprings } from '@react-spring/web'
+
+import { selectSkewMatrix } from './store/selectors'
 import { curvedPath } from './curved-path'
+import { forceLink } from './force-link'
 import { randomString } from './random-string'
 import { useStore } from './store'
-import { selectSkewMatrix } from './store/selectors'
 
 const width = 600
 const height = 600

demo/src/generate-ballots.ts

@@ -1,8 +1,10 @@
 import _ from 'lodash'
-import { emojis } from './emojis'
+
 import { utils } from 'votes'
+
+import type { BallotWithId, StoreBallots } from './ballot-with-id'
+import { emojis } from './emojis'
 import { randomString } from './random-string'
-import { BallotWithId, StoreBallots } from './ballot-with-id'
 
 const { groupBallots } = utils
 

demo/src/generate-votes.ts

@@ -1,4 +1,5 @@
 import _ from 'lodash'
+
 import { emojis } from './emojis'
 
 const mergeDraw = <T>(initial: T[][], toAdd: T) => {

demo/src/layout/index.tsx

@@ -1,7 +1,7 @@
+import React from 'react'
 import { GithubOutlined } from '@ant-design/icons'
 import { Layout } from 'antd'
 import Link from 'next/link'
-import React from 'react'
 
 const { Header, Content } = Layout
 

demo/src/list-votes-group.tsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import {
   DeleteOutlined,
   EditOutlined,
@@ -6,8 +7,7 @@ import {
 } from '@ant-design/icons'
 import { Button } from 'antd'
 import _ from 'lodash'
-import React from 'react'
-import { useStore } from './store'
+
 import {
   selectBallots,
   selectChangeBallotWeight,
@@ -16,6 +16,7 @@ import {
   selectSelectedBallot,
   useCandidatesById,
 } from './store/selectors'
+import { useStore } from './store'
 
 export function numberToLetters(num: number) {
   let letters = ''

demo/src/matrix.tsx

@@ -1,15 +1,17 @@
 import React, { useState } from 'react'
-import { trafficColor } from './traffic-color'
-import { useStore } from './store'
+import { Checkbox, Typography } from 'antd'
+import { shallow } from 'zustand/shallow'
+
+import { utils } from 'votes'
+
 import {
   selectMatrix,
   selectSetHighlightCandidates,
   useCandidatesById,
 } from './store/selectors'
-import { Checkbox, Typography } from 'antd'
 import { CandiTag } from './candidates'
-import { shallow } from 'zustand/shallow'
-import { utils } from 'votes'
+import { useStore } from './store'
+import { trafficColor } from './traffic-color'
 
 export const MatrixComp: React.FC = () => {
   const [skew, setSkew] = useState(false)
@@ -34,7 +36,7 @@ export const MatrixComp: React.FC = () => {
       <Typography.Title level={5}>Matrix of duels</Typography.Title>
       <Checkbox
         checked={skew}
-        name={'Ske'}
+        name="Ske"
         onChange={(v) => setSkew(v.target.checked)}
       >
         Normalize to skew matrix

demo/src/methods/baldwin/index.tsx

@@ -1,6 +1,8 @@
-import { MethodElements } from '../types'
 import { VotingSystem } from 'votes'
+
 import { votingTypeData } from '../descriptions'
+import type { MethodElements } from '../types'
+
 import { VizBaldin } from './result'
 
 export const baldwin: MethodElements = {