migrate copybutton to tailwind

Author: xyzqm

.eslintrc.js

@@ -18,14 +18,13 @@ module.exports = {
     ecmaVersion: 12,
     sourceType: 'module',
   },
-  plugins: ['react', '@typescript-eslint', 'jest', '@emotion'],
+  plugins: ['react', '@typescript-eslint', 'jest'],
   rules: {
     'no-prototype-builtins': 'off',
     'react/no-unescaped-entities': 'off',
     'no-useless-escape': 'warn',
     '@typescript-eslint/no-empty-function': 'off',
     curly: ['error', 'multi-line'],
-    'react/no-unknown-property': ['error', { ignore: ['css'] }],
     // some of these are just too hard to fix at the moment :(
     'react/prop-types': 'off',
   },

package.json

@@ -12,35 +12,57 @@
     "@dnd-kit/core": "^3.1.1",
     "@dnd-kit/sortable": "^4.0.0",
     "@emotion/core": "^11.0.0",
-    "@emotion/react": "^11.11.3",
+    "@emotion/eslint-plugin": "^11.11.0",
     "@headlessui/react": "^1.6.4",
     "@heroicons/react": "^1.0.6",
+    "@mdx-js/loader": "^1.6.22",
     "@monaco-editor/react": "^4.4.5",
-    "@primer/primitives": "^2.0.0",
     "@sentry/gatsby": "^7.2.0",
+    "@storybook/addon-a11y": "^6.5.16",
+    "@storybook/addon-actions": "^6.5.16",
+    "@storybook/addon-essentials": "^6.5.16",
+    "@storybook/addon-links": "^6.5.16",
+    "@storybook/addon-postcss": "^2.0.0",
     "@storybook/builder-webpack5": "^6.5.16",
     "@storybook/manager-webpack5": "^6.5.16",
+    "@storybook/react": "^6.5.16",
     "@tailwindcss/aspect-ratio": "^0.4.0",
     "@tailwindcss/forms": "^0.5.2",
     "@tailwindcss/typography": "^0.5.2",
     "@tailwindcss/ui": "^0.7.2",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.1.0",
     "@tippyjs/react": "^4.2.5",
+    "@types/bad-words": "^3.0.1",
     "@types/reach__router": "^1.3.10",
+    "@types/react": "^17.0.37",
     "@types/react-calendar-heatmap": "^1.6.6",
     "@types/seedrandom": "^3.0.8",
     "@types/styled-components": "^5.1.34",
+    "@typescript-eslint/eslint-plugin": "^5.28.0",
+    "@typescript-eslint/parser": "^5.28.0",
     "algoliasearch": "^4.10.5",
+    "babel-jest": "^28.1.1",
+    "babel-loader": "^8.2.5",
     "babel-plugin-remove-graphql-queries": "^4.16.0",
     "babel-plugin-styled-components": "^2.0.7",
+    "babel-preset-gatsby": "^2.16.0",
+    "babel-preset-react-app": "^10.0.1",
     "bad-words": "^3.0.4",
+    "blob-polyfill": "^5.0.20210201",
     "broken-link-checker": "^0.7.8",
     "buffer": "^6.0.3",
+    "bundlewatch": "^0.3.2",
+    "chromatic": "^5.9.2",
     "classnames": "^2.3.1",
     "cssnano": "^5.0.8",
     "dayjs": "^1.11.3",
     "diff-match-patch": "^1.0.5",
     "dotenv": "^16.3.1",
+    "eslint-plugin-jest": "^24.4.0",
     "firebase": "9.8.3",
+    "firebase-admin": "^9.11.1",
+    "firestore-export-import": "^0.17.0",
     "gatsby": "^4.25.7",
     "gatsby-image": "^3.11.0",
     "gatsby-plugin-algolia": "^0.24.0",
@@ -58,22 +80,29 @@
     "gatsby-plugin-sharp": "^4.16.1",
     "gatsby-plugin-sitemap": "^5.16.0",
     "gatsby-plugin-styled-components": "^5.16.0",
+    "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.32",
     "gatsby-remark-autolink-headers": "^5.16.0",
     "gatsby-source-filesystem": "^4.16.0",
     "gatsby-transformer-sharp": "^4.16.0",
     "github-slugger": "^1.4.0",
     "gray-matter": "^4.0.3",
     "hast-util-to-string": "1.0.4",
     "hast-util-to-text": "2.0.0",
+    "identity-obj-proxy": "^3.0.0",
     "import-fresh": "^3.3.0",
+    "jest": "^27.1.1",
     "jotai": "^2.6.1",
     "katex": "^0.16.0",
+    "lint-staged": "^11.1.2",
     "loader-utils": "^2.0.4",
     "loadjs": "^4.2.0",
     "octokit": "^3.1.2",
     "postcss": "^8.4.31",
+    "postcss-cli": "^8.3.1",
     "postcss-import": "^14.1.0",
     "postcss-nested": "^5.0.6",
+    "prettier": "^2.7.1",
+    "prettier-plugin-organize-imports": "^3.0.0",
     "prism-react-renderer": "^2.3.1",
     "prismjs": "^1.28.0",
     "process": "^0.11.10",
@@ -94,6 +123,7 @@
     "react-share": "^4.4.0",
     "react-simplemde-editor": "4.1.3",
     "react-split": "^2.0.14",
+    "react-test-renderer": "^17.0.2",
     "react-youtube": "^7.13.1",
     "readline": "^1.3.0",
     "recharts": "^2.1.2",
@@ -110,7 +140,9 @@
     "remark-mdx-frontmatter": "1.1.1",
     "remark-slug": "6.0.0",
     "seedrandom": "^3.0.5",
+    "serve": "^12.0.1",
     "storybook-addon-gatsby": "^0.0.5",
+    "storybook-dark-mode": "^2.0.5",
     "styled-components": "^5.3.5",
     "tailwindcss": "^3.1.3",
     "tippy.js": "^6.3.1",
@@ -121,41 +153,7 @@
     "uuid": "^8.3.2",
     "webpack-filter-warnings-plugin": "^1.2.1",
     "worker-loader": "^3.0.8",
-    "xdm": "1.12.2",
-    "@emotion/eslint-plugin": "^11.11.0",
-    "@mdx-js/loader": "^1.6.22",
-    "@storybook/addon-a11y": "^6.5.16",
-    "@storybook/addon-actions": "^6.5.16",
-    "@storybook/addon-essentials": "^6.5.16",
-    "@storybook/addon-links": "^6.5.16",
-    "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/react": "^6.5.16",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.1.0",
-    "@types/bad-words": "^3.0.1",
-    "@types/react": "^17.0.37",
-    "@typescript-eslint/eslint-plugin": "^5.28.0",
-    "@typescript-eslint/parser": "^5.28.0",
-    "babel-jest": "^28.1.1",
-    "babel-loader": "^8.2.5",
-    "babel-preset-gatsby": "^2.16.0",
-    "babel-preset-react-app": "^10.0.1",
-    "blob-polyfill": "^5.0.20210201",
-    "bundlewatch": "^0.3.2",
-    "chromatic": "^5.9.2",
-    "eslint-plugin-jest": "^24.4.0",
-    "firebase-admin": "^9.11.1",
-    "firestore-export-import": "^0.17.0",
-    "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.32",
-    "identity-obj-proxy": "^3.0.0",
-    "jest": "^27.1.1",
-    "lint-staged": "^11.1.2",
-    "postcss-cli": "^8.3.1",
-    "prettier": "^2.7.1",
-    "prettier-plugin-organize-imports": "^3.0.0",
-    "react-test-renderer": "^17.0.2",
-    "serve": "^12.0.1",
-    "storybook-dark-mode": "^2.0.5"
+    "xdm": "1.12.2"
   },
   "resolutions": {
     "@types/react": "^17.0.37"

src/components/Editor/AddProblemModal.tsx

@@ -3,7 +3,7 @@ import prettier from 'prettier';
 import babelParser from 'prettier/parser-babel';
 import React, { useRef, useState } from 'react';
 import CopyButton from './CopyButton';
-import parse from './parsers/parse';
+import parse, { parsers } from './parsers/parse';
 async function getHtml(url: string): Promise<string> {
   const res = await fetch('/api/fetch-html', {
     method: 'POST',
@@ -42,7 +42,13 @@ async function addProblem(
     );
     setStatus('Get Metadata');
   } catch (e) {
-    alert(e);
+    setMetadata(
+      `No parser found for this url.
+Available parsers:
+${Object.keys(parsers)
+  .map(key => `  - ${key}`)
+  .join('\n')}`
+    );
     setStatus('Get Metadata');
   }
 }

src/components/Editor/CopyButton.tsx

@@ -1,9 +1,4 @@
 // source: https://codesandbox.io/p/sandbox/copy-to-clipboard-animation-qt8pf
-// organize-imports-ignore
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { colors } from '@primer/primitives';
-import { jsx } from '@emotion/react';
 import React from 'react';
 
 export default function CopyButton({ className, onClick }) {
@@ -23,44 +18,18 @@ export default function CopyButton({ className, onClick }) {
         setCopied(true);
         onClick();
       }}
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      css={{
-        appearance: 'none',
-        padding: 8,
-        border: 0,
-        outline: 0,
-        cursor: 'pointer',
-      }}
-      className={className}
+      className={`appearance-none p-2 border-0 outline-none cursor-pointer ${className}`}
     >
-      <div
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        css={{
-          position: 'relative',
-          height: 16,
-          width: 16,
-        }}
-      >
+      <div className="relative h-4 w-4">
         <Clippy
-          css={{
-            color: colors.gray[4],
-            position: 'absolute',
-            top: 0,
-            left: 0,
+          style={{
             strokeDasharray: 50,
             strokeDashoffset: copied ? -50 : 0,
             transition: 'all 300ms ease-in-out',
           }}
         />
         <Check
-          isVisible={copied}
-          css={{
-            color: colors.green[5],
-            position: 'absolute',
-            top: 0,
-            left: 0,
+          style={{
             strokeDasharray: 50,
             strokeDashoffset: copied ? 0 : -50,
             transition: 'all 300ms ease-in-out',
@@ -78,10 +47,9 @@ function Clippy(props) {
       height="16"
       viewBox="0 0 16 16"
       fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
+      className="stroke-gray-400 stroke-[1.5] absolute top-0 left-0"
       {...props}
     >
       <path d="M5.75 4.75H10.25V1.75H5.75V4.75Z" />
@@ -97,11 +65,10 @@ function Check(props) {
       height="16"
       viewBox="0 0 16 16"
       fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
       {...props}
+      className="stroke-green-500 stroke-[1.5] absolute top-0 left-0"
     >
       <path d="M13.25 4.75L6 12L2.75 8.75" />
     </svg>

src/components/Editor/parsers/parse.ts

@@ -1,12 +1,14 @@
 import parseCf from './cf';
 import parseUsaco from './usaco';
-
+export const parsers = {
+  'codeforces.com': parseCf,
+  'usaco.org': parseUsaco,
+};
 export default function parse(url: string, html: string) {
-  if (url.includes('codeforces.com')) {
-    return parseCf(url, html);
-  } else if (url.includes('usaco.org')) {
-    return parseUsaco(url, html);
-  } else {
-    throw new Error(`Problem source not supported yet :(`);
+  for (const [domain, parser] of Object.entries(parsers)) {
+    if (url.includes(domain)) {
+      return parser(url, html);
+    }
   }
+  throw new Error('No parser found for this URL');
 }

yarn.lock

@@ -2010,7 +2010,7 @@
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.1.tgz#c1ddb040429c6d21d38cc945fe75c818cfb68e17"
   integrity sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==
 
-"@emotion/react@^11.1.1", "@emotion/react@^11.11.3":
+"@emotion/react@^11.1.1":
   version "11.11.3"
   resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.11.3.tgz#96b855dc40a2a55f52a72f518a41db4f69c31a25"
   integrity sha512-Cnn0kuq4DoONOMcnoVsTOR8E+AdnKFf//6kUWc4LCdnxj31pZWn7rIULd6Y7/Js1PiPHzn7SKCM9vB/jBni8eA==
@@ -4393,11 +4393,6 @@
   resolved "https://registry.npmjs.org/@popperjs/core/-/core-2.11.0.tgz"
   integrity sha512-zrsUxjLOKAzdewIDRWy9nsV1GQsKBCWaGwsZQlCgr6/q+vjyZhFgqedLfFBuI9anTPEUT4APq9Mu0SZBTzIcGQ==
 
-"@primer/primitives@^2.0.0":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-2.0.1.tgz#060b0882cdf75c3100db84100bb40538628bb63f"
-  integrity sha512-1zMGwqAfeTU3bOcsxzVgJlCPKTeDtDIP3h+Hm7qTvU0ez/87WZqjLKY6Jl7EBp9WH5VSm+LNwo56KfajInd3/w==
-
 "@protobufjs/aspromise@^1.1.1", "@protobufjs/aspromise@^1.1.2":
   version "1.1.2"
   resolved "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz"