Continue changing Antd components to Chakra-UI

demo/package.json

@@ -34,7 +34,6 @@
     "@types/numeral": "^2.0.2",
     "@types/react": "18.0.27",
     "@use-gesture/react": "^10.2.24",
-    "antd": "^4.24.1",
     "babel-preset-next": "^1.4.0",
     "d3": "^7.8.2",
     "d3-dispatch": "^3.0.1",

demo/src/ballots.tsx

@@ -5,14 +5,15 @@ import {
   selectNormalizeWeights100,
 } from './store/selectors'
 import { totalWeight } from './generate-ballots'
-import { Button, Text } from '@chakra-ui/react'
+import { Button } from '@chakra-ui/react'
 import {
   ArrowRightOutlined,
   DeleteOutlined,
   EditOutlined,
   MinusOutlined,
   PlusOutlined,
 } from '@ant-design/icons'
+import { H4 } from './layout/headings'
 
 export const BallotsComp = () => {
   const groupedBallots = useStore(selectBallots)
@@ -22,7 +23,7 @@ export const BallotsComp = () => {
   const normalizeWeights100 = useStore(selectNormalizeWeights100)
   return (
     <div className="container">
-      <Text level={4}>{totalW} voters</Text>
+      <H4>{totalW} voters</H4>
 
       <p>
         Preferences can be edited by clicking the buttons <EditOutlined />
@@ -39,7 +40,7 @@ export const BallotsComp = () => {
           +1 random vote
         </Button>
         <Button
-          icon={<ArrowRightOutlined />}
+          rightIcon={<ArrowRightOutlined />}
           size="small"
           onClick={normalizeWeights100}
         >

demo/src/candidates.tsx

@@ -4,7 +4,6 @@ import {
   Input,
   Tag,
   type TagProps,
-  Text,
   TagLabel,
   TagCloseButton,
   TagLeftIcon,
@@ -17,7 +16,9 @@ import {
   selectUpdateCandidateCount,
   useCandidates,
 } from './store/selectors'
+import { PlusOutlined } from '@ant-design/icons'
 import { Candidate } from './generate-ballots'
+import { H4 } from './layout/headings'
 
 export const Candidates: React.FC = () => {
   const candidates = useCandidates()
@@ -37,7 +38,7 @@ export const Candidates: React.FC = () => {
   }
   return (
     <div className="container">
-      <Text level={4}>{candidates.length} candidates</Text>
+      <H4>{candidates.length} candidates</H4>
       <div className="tags">
         {candidates.map((c) => (
           <CandiTag
@@ -52,27 +53,19 @@ export const Candidates: React.FC = () => {
       </div>
 
       <div className="flex-horiz">
-        <Tag
-          style={{
-            width: 150,
-            paddingRight: 23,
-            paddingLeft: 0,
-            margin: 0,
-          }}
-        >
+        <Tag>
           <Input
             placeholder="Add candidate"
             size="small"
             style={{ height: 19, border: 0, background: 'transparent' }}
             value={adding}
             onChange={(v) => setAdding(v.target.value)}
-            onPressEnter={submit}
+            onSubmit={submit}
           />
           <Button
             disabled={disabled}
             // type="text"
-            type="primary"
-            icon={<PlusSquareIcon />}
+            rightIcon={<PlusOutlined />}
             size="small"
             onClick={submit}
             style={{ height: 20 }}

demo/src/layout/headings.tsx

@@ -0,0 +1,8 @@
+import { Heading, HeadingProps } from '@chakra-ui/react'
+
+export const H1 = (p: HeadingProps) => <Heading as="h1" size="2xl" {...p} />
+export const H2 = (p: HeadingProps) => <Heading as="h2" size="xl" {...p} />
+export const H3 = (p: HeadingProps) => <Heading as="h3" size="lg" {...p} />
+export const H4 = (p: HeadingProps) => <Heading as="h4" size="md" {...p} />
+export const H5 = (p: HeadingProps) => <Heading as="h5" size="sm" {...p} />
+export const H6 = (p: HeadingProps) => <Heading as="h6" size="xs" {...p} />

demo/src/list-votes-group.tsx

@@ -56,28 +56,24 @@ export const ListVotesGroup: React.FC = () => {
                 {numberToLetters(b.idx)}
                 <br />
                 <Button
-                  type="text"
-                  icon={<MinusOutlined />}
+                  rightIcon={<MinusOutlined />}
                   size="small"
                   onClick={() => changeBallotWeight(-1)(b.id)}
                 />
                 {b.weight}
                 <Button
-                  type="text"
-                  icon={<PlusOutlined />}
+                  rightIcon={<PlusOutlined />}
                   size="small"
                   onClick={() => changeBallotWeight(1)(b.id)}
                 />
                 <br />
                 <Button
-                  type="text"
-                  icon={<DeleteOutlined />}
+                  rightIcon={<DeleteOutlined />}
                   size="small"
                   onClick={() => changeBallotWeight(-b.weight)(b.id)}
                 />
                 <Button
-                  type="text"
-                  icon={<EditOutlined />}
+                  rightIcon={<EditOutlined />}
                   size="small"
                   onClick={() =>
                     selectBallot(selectedBallot?.id === b.id ? null : b.id)

demo/src/matrix.tsx

@@ -6,10 +6,11 @@ import {
   selectSetHighlightCandidates,
   useCandidatesById,
 } from './store/selectors'
-import { Checkbox, Text } from '@chakra-ui/react'
+import { Checkbox } from '@chakra-ui/react'
 import { CandiTag } from './candidates'
-import shallow from 'zustand/shallow'
+import { shallow } from 'zustand/shallow'
 import { utils } from 'votes'
+import { H5 } from './layout/headings'
 
 export const MatrixComp: React.FC = () => {
   const [skew, setSkew] = useState(false)
@@ -31,7 +32,7 @@ export const MatrixComp: React.FC = () => {
 
   return (
     <div className="container">
-      <Text level={5}>Matrix of duels</Text>
+      <H5>Matrix of duels</H5>
       <Checkbox
         checked={skew}
         name={'Ske'}

demo/src/methods/borda/result.tsx

@@ -8,7 +8,7 @@ import { useStore } from '../../store'
 import { ScoresSummary } from '../viz/scores-summary'
 import { Borda } from 'votes'
 import { BordaTreeMap } from './viz-borda'
-import { Text } from '@chakra-ui/react'
+import { H4 } from '../../layout/headings'
 
 export const VizBorda: React.FC = () => {
   const ballots = useStore(selectBallots)
@@ -22,7 +22,7 @@ export const VizBorda: React.FC = () => {
     <>
       <ScoresSummary scores={bordiScores} candidatesById={candidatesById} />
 
-      <Text>Visualization</Text>
+      <H4>Visualization</H4>
       <BordaTreeMap />
     </>
   )

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

@@ -6,7 +6,7 @@ import { Button } from '@chakra-ui/react'
 import * as d3 from 'd3'
 import { hierarchy, treemap } from 'd3-hierarchy'
 import { scaleBand } from 'd3-scale'
-import shallow from 'zustand/shallow'
+import { shallow } from 'zustand/shallow'
 import {
   selectBallots,
   selectWidth,

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

@@ -10,11 +10,12 @@ import {
 } from '../../store/selectors'
 import { useStore } from '../../store'
 import { CandiTagList } from '../../candidates'
-import { Button, Text } from '@chakra-ui/react'
+import { Button } from '@chakra-ui/react'
 import { BallotWithId, StoreBallots } from '../../ballot-with-id'
 import _ from 'lodash'
 import { QuickScores } from '../viz/quick-scores'
 import { useElementWidth } from '../../width-setter'
+import { H4, H5 } from '../../layout/headings'
 
 type RR<B extends Ballot> = Round & {
   eliminated: string[]
@@ -58,16 +59,14 @@ export const RoundsSummary: React.FC<{
     .at(-1)?.roundResult.eliminated
   return (
     <>
-      <Text level={4}>Summary</Text>
-      <Text level={5}>
-        Winner{winners && winners.length > 1 && 's'}
-      </Text>
+      <H4>Summary</H4>
+      <H5>Winner{winners && winners.length > 1 && 's'}</H5>
       <div className="block">
         {winners && (
           <CandiTagList candidates={winners.map((c) => candidatesById[c])} />
         )}
       </div>
-      <Text level={5}>Iterations</Text>
+      <H5>Iterations</H5>
       {[...rounds].reverse().map((round, reverseRoundIdx) => {
         const roundIdx = rounds.length - reverseRoundIdx - 1
         if (roundIdx === rounds.length - 1) return null
@@ -105,7 +104,7 @@ export const RoundDescription: React.FC<{
     : roundR.roundResult.qualified
   return (
     <div className="container">
-      <Text level={4}>Round #{roundIdx + 1}</Text>
+      <H4>Round #{roundIdx + 1}</H4>
       {roundIdx > 0 && (
         <div>
           Eliminated in previous rounds:{' '}

demo/src/methods/viz/scores-summary.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
-import { Text } from '@chakra-ui/react'
 import type { ScoreObject } from 'votes'
 import { CandiTagList } from '../../candidates'
 import { Candidate } from '../../generate-ballots'
 import { QuickScores } from './quick-scores'
+import { H4, H5 } from '../../layout/headings'
 
 export const ScoresSummary: React.FC<{
   scores: ScoreObject
@@ -13,14 +13,14 @@ export const ScoresSummary: React.FC<{
   const winners = Object.keys(scores).filter((c) => scores[c] === maxScore)
   return (
     <>
-      <Text level={4}>Scores summary</Text>
-      <Text level={5}>Winner</Text>
+      <H4>Scores summary</H4>
+      <H5>Winner</H5>
       <div className="block">
         <CandiTagList candidates={winners.map((c) => candidatesById[c])} />
       </div>
-      <Text level={5} style={{ marginBottom: 0 }}>
+      <H5 style={{ marginBottom: 0 }}>
         Scores
-      </Text>
+      </H5>
       <QuickScores candidatesById={candidatesById} scoreObject={scores} />
       <style jsx>{`
         .block {

demo/src/results.tsx

@@ -2,15 +2,15 @@ import React from 'react'
 import { useStore } from './store'
 import { selectMethod } from './store/selectors'
 import { methods } from './methods'
-import { Text } from '@chakra-ui/react'
+import { H3 } from './layout/headings';
 
 export const Results: React.FC = () => {
   const method = useStore(selectMethod)
 
   const MethodObj = methods[method]
   return (
     <div className="container">
-      <Text level={3}>{MethodObj.data.name}</Text>
+      <H3>{MethodObj.data.name}</H3>
       <div className="block">{MethodObj.data.description}</div>
       <MethodObj.Visualisation />
       <style jsx>{`

demo/src/sandbox.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import { ListVotesGroup } from './list-votes-group'
-import { Text } from '@chakra-ui/react'
 import { Candidates } from './candidates'
 import { SelectPremade } from './select-premade'
 import { WidthSetter } from './width-setter'
@@ -17,6 +16,7 @@ import {
 } from '@fortawesome/fontawesome-svg-core'
 import { fas } from '@fortawesome/free-solid-svg-icons'
 import { BallotsComp } from './ballots'
+import { H3 } from './layout/headings';
 
 library.add(fas)
 
@@ -26,7 +26,7 @@ const coffeeIconDefinition: IconDefinition = findIconDefinition(coffeeLookup)
 export const Sandbox: React.FC = () => {
   return (
     <div className="container">
-      <Text>A sandbox for ranked voting systems</Text>
+      <H3>A sandbox for ranked voting systems</H3>
       <p>
         This website showcases some ranked voting systems. Simulate an election
         by adding candidates, and voter preferences. Read more on{' '}

demo/src/select-method.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import { DemoSystems, useStore } from './store'
 import { selectMethod, selectSetMethod } from './store/selectors'
-import { Select, Text } from '@chakra-ui/react'
+import { Select } from '@chakra-ui/react'
 import { votingTypeData } from './methods/descriptions'
 import { methods } from './methods'
+import { H4 } from './layout/headings'
 
 const options = Object.values(DemoSystems).filter(
   (v) => votingTypeData[v]?.name && methods[v]?.data,
@@ -14,19 +15,21 @@ export const SelectMethod: React.FC = () => {
   const method = useStore(selectMethod)
   return (
     <div className="container">
-      <Text level={4}>Voting system</Text>
-      <Select<DemoSystems>
+      <H4>Voting system</H4>
+      <Select
         size="large"
         style={{ minWidth: 250 }}
         placeholder="Select a voting system"
-        onSelect={(v: DemoSystems) => setMethod(v)}
+        onChange={(v) => setMethod(v.target.value as DemoSystems)}
         value={method}
-        getPopupContainer={(triggerNode) => triggerNode.parentElement}
-        options={options.map((value) => ({
-          value,
-          label: votingTypeData[value].name,
-        }))}
-      />
+        // getPopupContainer={(triggerNode) => triggerNode.parentElement}
+      >
+        {options.map((value) => (
+          <option key={value} value={value}>
+            {votingTypeData[value].name}
+          </option>
+        ))}
+      </Select>
       <style jsx>{`
         .container {
           margin-top: 50px;

demo/src/select-premade.tsx

@@ -35,12 +35,13 @@ export const SelectPremade: React.FC = () => {
         voting systems.
       </label>
       <br />
-      <Select<string>
+      <Select
         id="presets"
         size="small"
         style={{ minWidth: 250 }}
         placeholder="Preset"
-        onSelect={(v: string) => {
+        onChange={(e) => {
+          const v = e.target.value
           if (v in premades) {
             const vv = premades[v]
             if (vv) {
@@ -49,12 +50,14 @@ export const SelectPremade: React.FC = () => {
             }
           }
         }}
-        getPopupContainer={(triggerNode) => triggerNode.parentElement}
-        options={Object.keys(premades).map((value) => ({
-          label: premades[value].name,
-          value,
-        }))}
-      />
+        // getPopupContainer={(triggerNode) => triggerNode.parentElement}
+      >
+        {Object.keys(premades).map((value) => (
+          <option key={value} value={value}>
+            {premades[value].name}
+          </option>
+        ))}
+      </Select>
       {selected && (
         <div className="descr">
           <strong>{premades[selected].name}</strong>