Merge branch 'dev' into pr/13783

Author: wackerow

.eslintrc.json

@@ -23,8 +23,6 @@
           // Packages. `react` related packages come first.
           // Also, put `react-icons` in sorting order not with `react`
           ["^react(?!-.)$", "^\\w", "^@\\w"],
-          // The Chakra theme directory if imported to story file or other places
-          ["^@/@chakra-ui"],
           // From the `types` directory.
           ["^@/lib/types", "^@/lib/interfaces"],
           // From the `components` directory.

.github/ISSUE_TEMPLATE/suggest_quiz.yaml

@@ -1,5 +1,5 @@
 name: Suggest quiz
-description: Add, update, delete questions for a quiz on ethereum.osg
+description: Add, update, delete questions for a quiz on ethereum.org
 title: Add/Update/Delete quiz question
 labels: ["feature ✨", "quiz 📚"]
 body:

.github/workflows/chromatic.yml

@@ -15,7 +15,6 @@ on:
       - "src/components/**/*"
       - "src/pages/**/*"
       - "src/layouts/**/*"
-      - "src/@chakra-ui/**/*"
       - ".storybook/**/*"
       - "tailwind.config.ts"
       - "src/styles/**/*"

.storybook/ChakraDecorator.tsx

@@ -1,5 +1,4 @@
 import TsconfigPathsPlugin from "tsconfig-paths-webpack-plugin"
-import { propNames } from "@chakra-ui/react"
 import type { StorybookConfig } from "@storybook/nextjs"
 
 /**
@@ -41,11 +40,6 @@ const config: StorybookConfig = {
   docs: {
     autodocs: "tag",
   },
-  refs: {
-    "@chakra-ui/react": {
-      disable: true,
-    },
-  },
   webpackFinal: async (config) => {
     config.module = config.module || {}
     config.module.rules = config.module.rules || []
@@ -79,23 +73,6 @@ const config: StorybookConfig = {
   typescript: {
     reactDocgenTypescriptOptions: {
       shouldExtractLiteralValuesFromEnum: true,
-      /**
-       * For handling bloated controls table of Chakra Props
-       *
-       * https://github.com/chakra-ui/chakra-ui/issues/2009#issuecomment-852793946
-       */
-      propFilter: (prop) => {
-        const excludedPropNames = propNames.concat([
-          "as",
-          "apply",
-          "sx",
-          "__css",
-        ])
-        const isStyledSystemProp = excludedPropNames.includes(prop.name)
-        const isHTMLElementProp =
-          prop.parent?.fileName.includes("node_modules") ?? false
-        return !(isStyledSystemProp || isHTMLElementProp)
-      },
     },
 
     reactDocgen: "react-docgen-typescript",

.storybook/main.ts

@@ -5,7 +5,6 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "postinstall": "yarn theme",
     "build": "next build",
     "postbuild": "next-sitemap",
     "start": "next start",
@@ -23,16 +22,11 @@
     "markdown-checker": "ts-node -O '{ \"module\": \"commonjs\" }' src/scripts/markdownChecker.ts",
     "events-import": "ts-node -O '{ \"module\": \"commonjs\" }' src/scripts/events-import.ts",
     "crowdin-needs-review": "ts-node -O '{ \"module\": \"commonjs\" }' src/scripts/crowdin/reports/generateReviewReport.ts",
-    "theme": "chakra-cli tokens ./src/@chakra-ui/theme.ts",
-    "theme:watch": "chakra-cli tokens ./src/@chakra-ui/theme.ts --watch",
     "prepare": "husky"
   },
   "dependencies": {
-    "@chakra-ui/react": "^2.8.0",
     "@crowdin/crowdin-api-client": "^1.25.0",
     "@docsearch/react": "^3.5.2",
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
     "@hookform/resolvers": "^3.8.0",
     "@next/bundle-analyzer": "^14.2.5",
     "@radix-ui/react-accordion": "^1.2.0",
@@ -96,7 +90,6 @@
     "yaml-loader": "^0.8.0"
   },
   "devDependencies": {
-    "@chakra-ui/cli": "^2.4.1",
     "@chromatic-com/storybook": "1.5.0",
     "@netlify/plugin-nextjs": "^5.8.0",
     "@storybook/addon-essentials": "8.1.10",
@@ -150,4 +143,4 @@
     "jackspeak": "2.1.1",
     "sharp": "0.32.6"
   }
-}
+}

.storybook/types.ts

@@ -23,7 +23,7 @@ This is a curated list of user research done in web3 that may help with design a
 
 | Area of focus                                           | Name                                                                                                                                                                               |
 | :------------------------------------------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |                                         
-| <Tag variant="solid" status="success">Crypto onboarding</Tag>    | [The WalletConnect Pulse 2024: Crypto Consumer Sentiment & Usage](https://walletconnect.com/pulse-2024-crypto-consumer-report)                                                |
+| <Tag variant="solid" status="success">Crypto onboarding</Tag>    | [The Reown Pulse 2024: Crypto Consumer Sentiment & Usage](https://reown.com/blog/unveiling-walletconnects-consumer-crypto-report)                                                |
 | <Tag variant="solid" status="success">Crypto onboarding</Tag>    | [CRADL: UX in Cryptocurrency](https://docs.google.com/presentation/d/1s2OPSH5sMJzxRYaJSSRTe8W2iIoZx0PseIV-WeZWD1s/edit?usp=sharing)                                                |
 | <Tag variant="solid" status="success">Crypto onboarding</Tag>    | [CRADL: Onboarding to Cryptocurrency](https://docs.google.com/presentation/d/1R9nFuzA-R6SxaGCKhoMbE4Vxe0JxQSTiHXind3LVq_w/edit?usp=sharing)                                        |
 | <Tag variant="solid" status="success">Crypto onboarding</Tag>    | [Bitcoin UX report](https://github.com/patestevao/BitcoinUX-report/blob/master/report.md)                                                                                          |
@@ -45,7 +45,6 @@ This is a curated list of user research done in web3 that may help with design a
 - [Web3 UX Design Handbook](https://web3ux.design/) - Practical guide to designing Web3 apps
 - [Web3 Design Principles](https://medium.com/@lyricalpolymath/web3-design-principles-f21db2f240c1) - A framework of UX rules for blockchain based dapps
 - [Blockchain Design Principles](https://medium.com/design-ibm/blockchain-design-principles-599c5c067b6e) - Lessons learned by the blockchain design team at IBM
-- [Web3 Design Patterns](https://www.web3designpatterns.io/)- A curated library of design patterns from real Web3 products
 - [W3design.io](https://w3design.io/) - A curated library of UI flows of different projects in the ecosystem
 - [Neueux.com](https://neueux.com/apps) - UI library of user flows with diverse filtering options
 - [Web3's Usability Crisis: What You NEED to Know!](https://www.youtube.com/watch?v=oBSXT_6YDzg) - A panel discussion on pitfalls of developer focused project building (video, 34 min)
@@ -58,7 +57,6 @@ This is a curated list of user research done in web3 that may help with design a
 ## Web3 Design Case Studies {#design-case-studies}
 
 - [Deep Work Studio](https://deepwork.studio/case-studies/)
-- [Crypto UX Handbook](https://www.cryptouxhandbook.com/)
 - [Selling an NFT on OpenSea](https://builtformars.com/case-studies/opensea)
 - [Wallet UX teardown how wallets need to change](https://www.youtube.com/watch?v=oTpuxYj8JWI&ab_channel=ETHDenver) (video, 20 min)
 
@@ -79,7 +77,7 @@ Get involved in professional community-driven organizations or join design group
 - [Openux.xyz](https://openux.xyz/)
 - [Open Source Web3Design](https://www.web3designers.org/)
 
-## Design Systems {#design-systems}
+## Design Systems and other design resources {#design-systems-and-resources}
 
 - [Optimism Design](https://www.figma.com/@optimism) (Figma)
 - [Ethereum.org Design system](https://www.figma.com/@ethdotorg) (Figma)