chakra-ui

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
   },
-)
+})

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",

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 (
     <PlausibleProvider domain="rank-votes.vercel.app">
-      <Component {...pageProps} />
+      <ChakraProvider>
+        <Component {...pageProps} />
+      </ChakraProvider>
     </PlausibleProvider>
   )
 }

demo/src/ballots.tsx

@@ -5,14 +5,15 @@ import {
   selectNormalizeWeights100,
 } from './store/selectors'
 import { totalWeight } from './generate-ballots'
-import { Button, Typography } from 'antd'
+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">
-      <Typography.Title level={4}>{totalW} voters</Typography.Title>
+      <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

@@ -1,5 +1,14 @@
 import React, { useState } from 'react'
-import { Button, Input, Tag, type TagProps, Typography } from 'antd'
+import {
+  Button,
+  Input,
+  Tag,
+  type TagProps,
+  TagLabel,
+  TagCloseButton,
+  TagLeftIcon,
+} from '@chakra-ui/react'
+import { PlusSquareIcon } from '@chakra-ui/icons'
 import { useStore } from './store'
 import {
   selectAddCandidate,
@@ -9,6 +18,7 @@ import {
 } 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()
@@ -28,9 +38,7 @@ export const Candidates: React.FC = () => {
   }
   return (
     <div className="container">
-      <Typography.Title level={4}>
-        {candidates.length} candidates
-      </Typography.Title>
+      <H4>{candidates.length} candidates</H4>
       <div className="tags">
         {candidates.map((c) => (
           <CandiTag
@@ -45,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={<PlusOutlined />}
+            rightIcon={<PlusOutlined />}
             size="small"
             onClick={submit}
             style={{ height: 20 }}
@@ -74,7 +74,7 @@ export const Candidates: React.FC = () => {
         <span>or</span>
         <Tag
           tabIndex={0}
-          style={{
+          sx={{
             cursor: 'pointer',
             float: 'right',
           }}
@@ -84,7 +84,8 @@ export const Candidates: React.FC = () => {
             if (e.key === 'Enter') updateCandidateCount(candidates.length + 1)
           }}
         >
-          <PlusOutlined /> Add random emoji
+          <TagLeftIcon as={PlusSquareIcon}></TagLeftIcon>
+          Add random emoji
         </Tag>
       </div>
       <style jsx>{`
@@ -128,12 +129,11 @@ export const CandiTag: React.FC<
 > = ({ candidate, onClose, ...rest }) => (
   <Tag
     closable={!!onClose}
-    onClose={onClose ? () => onClose(candidate) : undefined}
-    color={candidate.color}
-    style={{ margin: 0 }}
+    sx={{ margin: 0, background: candidate.color }}
     {...rest}
   >
-    {candidate.id}
+    <TagLabel>{candidate.id}</TagLabel>
+    {onClose && <TagCloseButton onClick={() => onClose(candidate)} />}
   </Tag>
 )
 

demo/src/edit-ballot-rank.tsx

@@ -7,7 +7,7 @@ import {
   selectWidth,
   useCandidates,
 } from './store/selectors'
-import { Button } from 'antd'
+import { Button } from '@chakra-ui/react'
 import { WithWidth } from './react-ranker/use-width'
 import Ranker from './react-ranker/ranker'
 

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/layout/index.tsx

@@ -1,17 +1,14 @@
 import { GithubOutlined } from '@ant-design/icons'
-import { Layout } from 'antd'
 import Link from 'next/link'
 import React from 'react'
 
-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 }> = ({
           <GithubOutlined />
         </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

@@ -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)}
                 <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)