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..1e495e4 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", @@ -30,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", @@ -40,6 +43,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..8b7d50e 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 } from '@chakra-ui/react' import { ArrowRightOutlined, DeleteOutlined, @@ -13,6 +13,7 @@ import { 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 (
- {totalW} voters +

{totalW} voters

Preferences can be edited by clicking the buttons @@ -39,7 +40,7 @@ export const BallotsComp = () => { +1 random vote

- + ) } diff --git a/demo/src/list-votes-group.tsx b/demo/src/list-votes-group.tsx index 7ebf761..84e3b89 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' @@ -56,28 +56,24 @@ export const ListVotesGroup: React.FC = () => { {numberToLetters(b.idx)}