Remove antd

demo/next.config.js

@@ -7,7 +7,6 @@ const withBundleAnalyzer = require('@next/bundle-analyzer')({
   enabled: process.env.ANALYZE === 'true',
 })
 const withLess = require('next-with-less')
-const { getThemeVariables } = require('antd/dist/theme')
 const { withSentryConfig } = require('@sentry/nextjs')
 
 const sentryWebpackPluginOptions = {
@@ -33,10 +32,6 @@ const withLessOptions = {
     lessOptions: {
       /* ... */
       modifyVars: {
-        ...getThemeVariables({
-          dark: true, // Enable dark mode
-          compact: true, // Enable compact mode
-        }),
 
         // Light
         // 'primary-color': '#237f61',

demo/pages/_app.tsx

@@ -2,9 +2,6 @@ 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 '@fortawesome/fontawesome-svg-core/styles.css'
 
 config.autoAddCss = false

demo/src/ballots.tsx

@@ -1,5 +1,4 @@
-import { Button, Typography } from 'antd'
-import { ArrowRight, Delete, Minus, Plus } from 'lucide-react'
+import { ArrowRight, Delete, Edit, Minus, Plus } from 'lucide-react'
 
 import {
   selectAddRandomBallot,
@@ -17,7 +16,7 @@ export const BallotsComp = () => {
   const normalizeWeights100 = useStore(selectNormalizeWeights100)
   return (
     <div className="container">
-      <Typography.Title level={4}>{totalW} voters</Typography.Title>
+      <h1 level={4}>{totalW} voters</h1>
 
       <p>
         Preferences can be edited by clicking the buttons <Edit />
@@ -26,20 +25,20 @@ export const BallotsComp = () => {
         <Delete />
       </p>
       <div className="flex-horiz">
-        <Button
+        <button
           size="small"
           onClick={addRandomBallot}
           style={{ marginLeft: 20 }}
         >
           +1 random vote
-        </Button>
-        <Button
+        </button>
+        <button
           icon={<ArrowRight />}
           size="small"
           onClick={normalizeWeights100}
         >
           Normalize to 100
-        </Button>
+        </button>
       </div>
       <style jsx>{`
         .container {

demo/src/candidates.tsx

@@ -1,5 +1,4 @@
 import React, { useState } from 'react'
-import { Button, Input, Tag, type TagProps, Typography } from 'antd'
 import { Plus } from 'lucide-react'
 
 import {
@@ -29,9 +28,9 @@ export const Candidates: React.FC = () => {
   }
   return (
     <div className="container">
-      <Typography.Title level={4}>
+      <h2 level={4}>
         {candidates.length} candidates
-      </Typography.Title>
+      </h2>
       <div className="tags">
         {candidates.map((c) => (
           <CandiTag
@@ -46,23 +45,23 @@ export const Candidates: React.FC = () => {
       </div>
 
       <div className="flex-horiz">
-        <Tag
+        <span
           style={{
             width: 150,
             paddingRight: 23,
             paddingLeft: 0,
             margin: 0,
           }}
         >
-          <Input
+          <input
             placeholder="Add candidate"
             size="small"
             style={{ height: 19, border: 0, background: 'transparent' }}
             value={adding}
             onChange={(v) => setAdding(v.target.value)}
             onPressEnter={submit}
           />
-          <Button
+          <button
             disabled={disabled}
             // type="text"
             type="primary"
@@ -71,9 +70,9 @@ export const Candidates: React.FC = () => {
             onClick={submit}
             style={{ height: 20 }}
           />
-        </Tag>
+        </span>
         <span>or</span>
-        <Tag
+        <span
           tabIndex={0}
           style={{
             cursor: 'pointer',
@@ -86,7 +85,7 @@ export const Candidates: React.FC = () => {
           }}
         >
           <Plus /> Add random emoji
-        </Tag>
+        </span>
       </div>
       <style jsx>{`
         .container {
@@ -125,17 +124,17 @@ export const CandiTag: React.FC<
   {
     candidate: Candidate
     onClose?: (candidate: Candidate) => void
-  } & TagProps
+  }
 > = ({ candidate, onClose, ...rest }) => (
-  <Tag
+  <span
     closable={!!onClose}
     onClose={onClose ? () => onClose(candidate) : undefined}
     color={candidate.color}
     style={{ margin: 0 }}
     {...rest}
   >
     {candidate.id}
-  </Tag>
+  </span>
 )
 
 export const CandiTagList: React.FC<

demo/src/edit-ballot-rank.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import { Button } from 'antd'
 
 import Ranker from './react-ranker/ranker'
 import { WithWidth } from './react-ranker/use-width'
@@ -33,7 +32,7 @@ export const EditBallotRank: React.FC = () => {
           }
           showHovers
         />
-        <Button onClick={() => selectBallot(null)}>Done</Button>
+        <button onClick={() => selectBallot(null)}>Done</button>
       </>
     )) ||
     null

demo/src/layout/index.tsx

@@ -1,17 +1,14 @@
 import React from 'react'
-import { Layout } from 'antd'
 import { Github } from 'lucide-react'
 import Link from 'next/link'
 
-const { Header, Content } = Layout
-
 export const MyLayout: React.FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
   return (
-    <Layout id="layout">
+    <div id="layout">
       {/*<div id="scroll" className="scroll">*/}
-      <Header id="header">
+      <div id="header">
         <h1>
           <Link href="/">
             <span className="white">Ranked votes</span>
@@ -28,8 +25,8 @@ export const MyLayout: React.FC<{ children: React.ReactNode }> = ({
           <Github />
         </a>
         {/*<Me />*/}
-      </Header>
-      <Content id="content">{children}</Content>
+      </div>
+      <div id="content">{children}</div>
       {/*</div>*/}
       {/*<Foot />*/}
       <style jsx>{`
@@ -57,6 +54,6 @@ export const MyLayout: React.FC<{ children: React.ReactNode }> = ({
           display: flex;
         }
       `}</style>
-    </Layout>
+    </div>
   )
 }

demo/src/list-votes-group.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import { Button } from 'antd'
 import _ from 'lodash-es'
 import { Delete, Edit, Minus, Plus } from 'lucide-react'
 
@@ -51,27 +50,27 @@ export const ListVotesGroup: React.FC = () => {
               <th className="th" key={b.id}>
                 {numberToLetters(b.idx)}
                 <br />
-                <Button
+                <button
                   type="text"
                   icon={<Minus />}
                   size="small"
                   onClick={() => changeBallotWeight(-1)(b.id)}
                 />
                 {b.weight}
-                <Button
+                <button
                   type="text"
                   icon={<Plus />}
                   size="small"
                   onClick={() => changeBallotWeight(1)(b.id)}
                 />
                 <br />
-                <Button
+                <button
                   type="text"
                   icon={<Delete />}
                   size="small"
                   onClick={() => changeBallotWeight(-b.weight)(b.id)}
                 />
-                <Button
+                <button
                   type="text"
                   icon={<Edit />}
                   size="small"

demo/src/matrix.tsx

@@ -1,5 +1,4 @@
 import React, { useState } from 'react'
-import { Checkbox, Typography } from 'antd'
 import { shallow } from 'zustand/shallow'
 
 import { utils } from 'votes'
@@ -33,14 +32,14 @@ export const MatrixComp: React.FC = () => {
 
   return (
     <div className="container">
-      <Typography.Title level={5}>Matrix of duels</Typography.Title>
-      <Checkbox
+      <h2 level={5}>Matrix of duels</h2>
+      <span
         checked={skew}
         name="Ske"
         onChange={(v) => setSkew(v.target.checked)}
       >
         Normalize to skew matrix
-      </Checkbox>
+      </span>
       <div className="scroll">
         <table>
           <thead>

demo/src/methods/borda/result.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import { Typography } from 'antd'
 
 import { Borda } from 'votes'
 
@@ -25,7 +24,7 @@ export const VizBorda: React.FC = () => {
     <>
       <ScoresSummary scores={bordiScores} candidatesById={candidatesById} />
 
-      <Typography.Title level={4}>Visualization</Typography.Title>
+      <h3 level={4}>Visualization</h3>
       <BordaTreeMap />
     </>
   )

demo/src/methods/borda/viz-borda.tsx

@@ -1,7 +1,6 @@
 import React, { useLayoutEffect, useMemo, useRef, useState } from 'react'
 import { a, to, useSpring } from '@react-spring/web'
 import { useHover } from '@use-gesture/react'
-import { Button } from 'antd'
 import type * as d3 from 'd3'
 import { hierarchy, treemap } from 'd3-hierarchy'
 import { scaleBand } from 'd3-scale'
@@ -470,23 +469,23 @@ export const BordaTreeMapInner: React.FC<{
       </div>
       <div className="buttons">
         {step !== Step.INIT && (
-          <Button
+          <button
             style={{ flex: '0 0 auto' }}
             onClick={() => setStep((s) => s - 1)}
           >
             <ArrowLeft /> {BUTTONS[steps[step - 1]]}
-          </Button>
+          </button>
         )}
         {step !== Step.TREEMAP && (
-          <Button
+          <button
             style={{
               flex: '0 0 auto',
               marginLeft: 'auto',
             }}
             onClick={() => setStep((s) => s + 1)}
           >
             {BUTTONS[steps[step + 1]]} <ArrowRight />
-          </Button>
+          </button>
         )}
       </div>
       <style jsx>{`

demo/src/methods/instant-runoff/viz-rounds.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useRef, useState } from 'react'
-import { Button, Typography } from 'antd'
 import _ from 'lodash-es'
 import numeral from 'numeral'
 import type { Ballot, Round } from 'votes'
@@ -60,16 +59,16 @@ export const RoundsSummary: React.FC<{
     .at(-1)?.roundResult.eliminated
   return (
     <>
-      <Typography.Title level={4}>Summary</Typography.Title>
-      <Typography.Title level={5}>
+      <h2 level={4}>Summary</h2>
+      <h2 level={5}>
         Winner{winners && winners.length > 1 && 's'}
-      </Typography.Title>
+      </h2>
       <div className="block">
         {winners && (
           <CandiTagList candidates={winners.map((c) => candidatesById[c])} />
         )}
       </div>
-      <Typography.Title level={5}>Iterations</Typography.Title>
+      <h2 level={5}>Iterations</h2>
       {[...rounds].reverse().map((round, reverseRoundIdx) => {
         const roundIdx = rounds.length - reverseRoundIdx - 1
         if (roundIdx === rounds.length - 1) return null
@@ -107,7 +106,7 @@ export const RoundDescription: React.FC<{
     : roundR.roundResult.qualified
   return (
     <div className="container">
-      <Typography.Title level={4}>Round #{roundIdx + 1}</Typography.Title>
+      <h2 level={4}>Round #{roundIdx + 1}</h2>
       {roundIdx > 0 && (
         <div>
           Eliminated in previous rounds:{' '}
@@ -218,18 +217,18 @@ export const VizRoundsBallots: React.FC<{
       </div>
       <div className="buttons">
         {roundIdx > 0 && (
-          <Button
+          <button
             style={{
               flex: '0 0 auto',
             }}
             onClick={() => setRoundIdx((r) => r - 1)}
             disabled={roundIdx <= 0}
           >
             {roundName(roundIdx - 1)}
-          </Button>
+          </button>
         )}
         {roundIdx < roundsToShow.length - 1 && (
-          <Button
+          <button
             style={{
               flex: '0 0 auto',
               marginLeft: 'auto',
@@ -238,7 +237,7 @@ export const VizRoundsBallots: React.FC<{
             disabled={roundIdx >= roundsToShow.length - 1}
           >
             {roundName(roundIdx + 1)}
-          </Button>
+          </button>
         )}
       </div>
       <style jsx>{`