From 15af7547dcb30330c4b8b7e96dd8d79d13a24bd2 Mon Sep 17 00:00:00 2001 From: lzear Date: Sat, 5 Nov 2022 09:50:00 +0100 Subject: [PATCH 1/3] Start changing antd to chakra-ui --- demo/next.config.js | 98 ++++--------------- demo/package.json | 5 + demo/pages/_app.tsx | 7 +- demo/src/ballots.tsx | 4 +- demo/src/candidates.tsx | 31 +++--- demo/src/edit-ballot-rank.tsx | 2 +- demo/src/layout/index.tsx | 13 +-- demo/src/list-votes-group.tsx | 2 +- demo/src/matrix.tsx | 4 +- demo/src/methods/borda/result.tsx | 4 +- demo/src/methods/borda/viz-borda.tsx | 2 +- .../src/methods/instant-runoff/viz-rounds.tsx | 12 +-- .../methods/ranked-pairs/viz-ranked-pairs.tsx | 2 +- demo/src/methods/viz/quick-scores.tsx | 2 +- demo/src/methods/viz/scores-summary.tsx | 10 +- demo/src/results.tsx | 4 +- demo/src/sandbox.tsx | 4 +- demo/src/select-method.tsx | 4 +- demo/src/select-premade.tsx | 2 +- 19 files changed, 83 insertions(+), 129 deletions(-) diff --git a/demo/next.config.js b/demo/next.config.js index 2ea5168..f9936ea 100644 --- a/demo/next.config.js +++ b/demo/next.config.js @@ -6,91 +6,35 @@ const withPlugins = require('next-compose-plugins') const withBundleAnalyzer = require('@next/bundle-analyzer')({ enabled: process.env.ANALYZE === 'true', }) -const withLess = require('next-with-less') const withPreconstruct = require('@preconstruct/next') -const { getThemeVariables } = require('antd/dist/theme') // const dark = getThemeVariables({ // dark: true, // Enable dark mode // compact: true, // Enable compact mode // }) -module.exports = withPlugins( - [ - [withPreconstruct], - [withBundleAnalyzer], - [ - withLess, - { - lessLoaderOptions: { - /* ... */ - lessOptions: { - /* ... */ - modifyVars: { - ...getThemeVariables({ - dark: true, // Enable dark mode - compact: true, // Enable compact mode - }), - - // Light - // 'primary-color': '#237f61', - // 'info-color': '#7ea695', - // 'text-selection-bg': '#7ea695', - // 'body-background': '#ccc', - // 'text-color': '#333', // major text color - - // Dark - 'layout-header-background': '#4c527f', - // 'primary-color': '#7fdcbd', - 'primary-color': '#67b59a', - 'info-color': '#589b84', - 'text-selection-bg': '#5a8171', - 'body-background': '#202020', - 'text-color': '#ddd', // major text color - - // Other - // 'font-size-base': '16px', - 'link-focus-outline': 'auto', - 'border-radius-base': '2px', - 'font-family': - "'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji','Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'", - 'code-family': - "'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace", - - /* ... */ - }, - }, - }, - lessOptions: { - /* ... */ - }, - }, - ], - ], - { - reactStrictMode: true, - pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'], - images: { - formats: ['image/avif', 'image/webp'], - domains: ['i.scdn.co'], - }, - webpack5: true, +module.exports = withPlugins([[withPreconstruct], [withBundleAnalyzer]], { + reactStrictMode: true, + pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'], + images: { + formats: ['image/avif', 'image/webp'], + domains: ['i.scdn.co'], + }, - swcMinify: true, - experimental: { - // concurrentFeatures: true, - // serverComponents: true, - // esmExternals: true, - externalDir: true, - }, + swcMinify: true, + experimental: { + // concurrentFeatures: true, + // serverComponents: true, + // esmExternals: true, + externalDir: true, + }, - webpack(config) { - config.module.rules.push({ - test: /\.svg$/, - use: ['@svgr/webpack'], - }) + webpack(config) { + config.module.rules.push({ + test: /\.svg$/, + use: ['@svgr/webpack'], + }) - return config - }, + return config }, -) +}) diff --git a/demo/package.json b/demo/package.json index 9f8ce70..2944e0f 100644 --- a/demo/package.json +++ b/demo/package.json @@ -10,6 +10,10 @@ }, "dependencies": { "@ant-design/icons": "^4.7.0", + "@chakra-ui/icons": "^2.0.11", + "@chakra-ui/react": "^2.3.7", + "@emotion/react": "^11", + "@emotion/styled": "^11", "@fortawesome/fontawesome-free": "^6.2.1", "@fortawesome/fontawesome-svg-core": "^6.2.1", "@fortawesome/free-regular-svg-icons": "^6.2.1", @@ -40,6 +44,7 @@ "d3-selection": "^3.0.0", "d3-timer": "^3.0.1", "eslint-config-next": "^13.1.6", + "framer-motion": "^6", "hsluv": "^1.0.0", "less": "^4.1.3", "less-loader": "^11.1.0", diff --git a/demo/pages/_app.tsx b/demo/pages/_app.tsx index 996c571..ad59dbf 100644 --- a/demo/pages/_app.tsx +++ b/demo/pages/_app.tsx @@ -1,8 +1,7 @@ import type { AppProps } from 'next/app' import PlausibleProvider from 'next-plausible' +import { ChakraProvider } from '@chakra-ui/react' -import '../assets/antd-custom.less' -import 'antd/dist/antd.less' import { config } from '@fortawesome/fontawesome-svg-core' import '@fortawesome/fontawesome-svg-core/styles.css' @@ -11,7 +10,9 @@ config.autoAddCss = false function MyApp({ Component, pageProps }: AppProps): JSX.Element { return ( - + + + ) } diff --git a/demo/src/ballots.tsx b/demo/src/ballots.tsx index 989ff88..ca2ee7b 100644 --- a/demo/src/ballots.tsx +++ b/demo/src/ballots.tsx @@ -5,7 +5,7 @@ import { selectNormalizeWeights100, } from './store/selectors' import { totalWeight } from './generate-ballots' -import { Button, Typography } from 'antd' +import { Button, Text } from '@chakra-ui/react' import { ArrowRightOutlined, DeleteOutlined, @@ -22,7 +22,7 @@ export const BallotsComp = () => { const normalizeWeights100 = useStore(selectNormalizeWeights100) return (
- {totalW} voters + {totalW} voters

Preferences can be edited by clicking the buttons diff --git a/demo/src/candidates.tsx b/demo/src/candidates.tsx index 0f9ee2a..b2bd3e0 100644 --- a/demo/src/candidates.tsx +++ b/demo/src/candidates.tsx @@ -1,5 +1,15 @@ import React, { useState } from 'react' -import { Button, Input, Tag, type TagProps, Typography } from 'antd' +import { + Button, + Input, + Tag, + type TagProps, + Text, + TagLabel, + TagCloseButton, + TagLeftIcon, +} from '@chakra-ui/react' +import { PlusSquareIcon } from '@chakra-ui/icons' import { useStore } from './store' import { selectAddCandidate, @@ -7,7 +17,6 @@ import { selectUpdateCandidateCount, useCandidates, } from './store/selectors' -import { PlusOutlined } from '@ant-design/icons' import { Candidate } from './generate-ballots' export const Candidates: React.FC = () => { @@ -28,9 +37,7 @@ export const Candidates: React.FC = () => { } return (

- - {candidates.length} candidates - + {candidates.length} candidates
{candidates.map((c) => ( { disabled={disabled} // type="text" type="primary" - icon={} + icon={} size="small" onClick={submit} style={{ height: 20 }} @@ -74,7 +81,7 @@ export const Candidates: React.FC = () => { or { if (e.key === 'Enter') updateCandidateCount(candidates.length + 1) }} > - Add random emoji + + Add random emoji
- +
) } diff --git a/demo/src/list-votes-group.tsx b/demo/src/list-votes-group.tsx index 7ebf761..8b5752c 100644 --- a/demo/src/list-votes-group.tsx +++ b/demo/src/list-votes-group.tsx @@ -4,7 +4,7 @@ import { MinusOutlined, PlusOutlined, } from '@ant-design/icons' -import { Button } from 'antd' +import { Button } from '@chakra-ui/react' import _ from 'lodash' import React from 'react' import { useStore } from './store' diff --git a/demo/src/matrix.tsx b/demo/src/matrix.tsx index e00a53f..e625024 100644 --- a/demo/src/matrix.tsx +++ b/demo/src/matrix.tsx @@ -6,7 +6,7 @@ import { selectSetHighlightCandidates, useCandidatesById, } from './store/selectors' -import { Checkbox, Typography } from 'antd' +import { Checkbox, Text } from '@chakra-ui/react' import { CandiTag } from './candidates' import shallow from 'zustand/shallow' import { utils } from 'votes' @@ -31,7 +31,7 @@ export const MatrixComp: React.FC = () => { return (
- Matrix of duels + Matrix of duels { const ballots = useStore(selectBallots) @@ -22,7 +22,7 @@ export const VizBorda: React.FC = () => { <> - Visualization + Visualization ) diff --git a/demo/src/methods/borda/viz-borda.tsx b/demo/src/methods/borda/viz-borda.tsx index 4d2906c..053a0ca 100644 --- a/demo/src/methods/borda/viz-borda.tsx +++ b/demo/src/methods/borda/viz-borda.tsx @@ -2,7 +2,7 @@ import React, { useLayoutEffect, useMemo, useRef, useState } from 'react' import { a, to, useSpring } from '@react-spring/web' import { useHover } from '@use-gesture/react' import _ from 'lodash' -import { Button } from 'antd' +import { Button } from '@chakra-ui/react' import * as d3 from 'd3' import { hierarchy, treemap } from 'd3-hierarchy' import { scaleBand } from 'd3-scale' diff --git a/demo/src/methods/instant-runoff/viz-rounds.tsx b/demo/src/methods/instant-runoff/viz-rounds.tsx index 30b684c..d7703c4 100644 --- a/demo/src/methods/instant-runoff/viz-rounds.tsx +++ b/demo/src/methods/instant-runoff/viz-rounds.tsx @@ -10,7 +10,7 @@ import { } from '../../store/selectors' import { useStore } from '../../store' import { CandiTagList } from '../../candidates' -import { Button, Typography } from 'antd' +import { Button, Text } from '@chakra-ui/react' import { BallotWithId, StoreBallots } from '../../ballot-with-id' import _ from 'lodash' import { QuickScores } from '../viz/quick-scores' @@ -58,16 +58,16 @@ export const RoundsSummary: React.FC<{ .at(-1)?.roundResult.eliminated return ( <> - Summary - + Summary + Winner{winners && winners.length > 1 && 's'} - +
{winners && ( candidatesById[c])} /> )}
- Iterations + Iterations {[...rounds].reverse().map((round, reverseRoundIdx) => { const roundIdx = rounds.length - reverseRoundIdx - 1 if (roundIdx === rounds.length - 1) return null @@ -105,7 +105,7 @@ export const RoundDescription: React.FC<{ : roundR.roundResult.qualified return (
- Round #{roundIdx + 1} + Round #{roundIdx + 1} {roundIdx > 0 && (
Eliminated in previous rounds:{' '} diff --git a/demo/src/methods/ranked-pairs/viz-ranked-pairs.tsx b/demo/src/methods/ranked-pairs/viz-ranked-pairs.tsx index 379169e..fcd72df 100644 --- a/demo/src/methods/ranked-pairs/viz-ranked-pairs.tsx +++ b/demo/src/methods/ranked-pairs/viz-ranked-pairs.tsx @@ -8,7 +8,7 @@ import { import { ScoresSummary } from '../viz/scores-summary' import { RankedPairs, utils } from 'votes' import _ from 'lodash' -import { Tag } from 'antd' +import { Tag } from '@chakra-ui/react' import { trafficColor } from '../../traffic-color' type Edge = { from: number; to: number; value: number } diff --git a/demo/src/methods/viz/quick-scores.tsx b/demo/src/methods/viz/quick-scores.tsx index babd18d..229aaa5 100644 --- a/demo/src/methods/viz/quick-scores.tsx +++ b/demo/src/methods/viz/quick-scores.tsx @@ -6,7 +6,7 @@ import { AxisCandidatesBot } from '../../axis' import { useStore } from '../../store' import { selectWidth, useCandidatesString } from '../../store/selectors' import _ from 'lodash' -import { Checkbox } from 'antd' +import { Checkbox } from '@chakra-ui/react' const HEIGHT = 100 diff --git a/demo/src/methods/viz/scores-summary.tsx b/demo/src/methods/viz/scores-summary.tsx index 89644e9..a133815 100644 --- a/demo/src/methods/viz/scores-summary.tsx +++ b/demo/src/methods/viz/scores-summary.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { Typography } from 'antd' +import { Text } from '@chakra-ui/react' import type { ScoreObject } from 'votes' import { CandiTagList } from '../../candidates' import { Candidate } from '../../generate-ballots' @@ -13,14 +13,14 @@ export const ScoresSummary: React.FC<{ const winners = Object.keys(scores).filter((c) => scores[c] === maxScore) return ( <> - Scores summary - Winner + Scores summary + Winner
candidatesById[c])} />
- + Scores - +