chore: improved styling process with tailwind-merge

components/Editor/EditorControls.tsx

@@ -1,12 +1,13 @@
 import { useRef } from 'react'
 
 import { RiLinksLine, RiQuestionLine } from '@remixicon/react'
-import cn from 'classnames'
 import { Priority, useRegisterActions } from 'kbar'
 import { OnChangeValue } from 'react-select'
 
 import { Button, Input } from 'components/ui'
 
+import { cn } from '../../util/styles'
+
 import ExampleSelector from './ExampleSelector'
 
 type SelectOption = {

components/Editor/EditorFooter.tsx

@@ -1,9 +1,8 @@
 import { useContext } from 'react'
 
-import cn from 'classnames'
-
 import { AppUiContext } from '../../context/appUiContext'
 import { CairoVMApiContext } from '../../context/cairoVMApiContext'
+import { cn } from '../../util/styles'
 import KBarButton from '../KBar/Button'
 import ThemeSelector from '../ThemeSelector'
 import ToggleFullScreen from '../ToggleFullScreen'

components/Editor/ExampleSelector.tsx

@@ -1,17 +1,17 @@
-import React, { useId } from 'react'
+import { useId } from 'react'
 
 import { RiFileCodeLine } from '@remixicon/react'
-import cn from 'classnames'
 import Select, {
   components,
   DropdownIndicatorProps,
-  StylesConfig,
   GroupBase,
+  StylesConfig,
 } from 'react-select'
 
+import { cn } from '../../util/styles'
 import { Button } from '../ui'
 
-import { Examples, CairoExampleNames } from './examples'
+import { CairoExampleNames, Examples } from './examples'
 
 type SelectOption = {
   value: number

components/Editor/ExtraColumn.tsx

@@ -1,11 +1,11 @@
 import { useContext, useState } from 'react'
 
 import { Editor as MonacoEditor, Monaco } from '@monaco-editor/react'
-import cn from 'classnames'
 import { editor } from 'monaco-editor'
 
 import { CodeType } from '../../context/appUiContext'
 import { CairoVMApiContext } from '../../context/cairoVMApiContext'
+import { cn } from '../../util/styles'
 
 import Header from './Header'
 import { InstructionsTable } from './InstructionsTable'

components/Editor/InstructionRow.tsx

@@ -1,8 +1,7 @@
-import { useState, forwardRef, ForwardedRef, useCallback } from 'react'
-
-import cn from 'classnames'
+import { ForwardedRef, forwardRef, useCallback, useState } from 'react'
 
 import { toHex } from '../../util/string'
+import { cn } from '../../util/styles'
 
 type RowProps = {
   instructionId: number

components/Editor/InstructionsTable.tsx

@@ -1,6 +1,5 @@
 import React, { memo, useCallback, useEffect, useRef } from 'react'
 
-import cn from 'classnames'
 import ReactTooltip from 'react-tooltip'
 import { TableVirtuoso, TableVirtuosoHandle } from 'react-virtuoso'
 import { IInstruction } from 'types'
@@ -9,6 +8,8 @@ import { CodeType } from 'context/appUiContext'
 
 import { SierraVariables } from 'components/Tracer'
 
+import { cn } from '../../util/styles'
+
 const sierraVariableRe = /\[(\d+)\]/
 
 export const InstructionsTable = ({

components/Editor/index.tsx

@@ -1,4 +1,4 @@
-import React, {
+import {
   useCallback,
   useContext,
   useEffect,
@@ -8,8 +8,7 @@ import React, {
 } from 'react'
 
 import { decode, encode } from '@kunigi/string-compression'
-import { Editor as MonacoEditor, useMonaco, Monaco } from '@monaco-editor/react'
-import cn from 'classnames'
+import { Editor as MonacoEditor, Monaco, useMonaco } from '@monaco-editor/react'
 import copy from 'copy-to-clipboard'
 import { Priority, useRegisterActions } from 'kbar'
 import { editor } from 'monaco-editor'
@@ -31,6 +30,7 @@ import { Examples } from 'components/Editor/examples'
 import { Tracer } from 'components/Tracer'
 
 import { AppUiContext, CodeType, LogType } from '../../context/appUiContext'
+import { cn } from '../../util/styles'
 
 import { ArgumentsHelperModal } from './ArgumentsHelperModal'
 import { registerCairoLanguageSupport } from './cairoLangConfig'

components/KBar/ResultItem.tsx

@@ -1,8 +1,9 @@
 import { forwardRef } from 'react'
 
-import cn from 'classnames'
 import { Action } from 'kbar'
 
+import { cn } from '../../util/styles'
+
 type Props = {
   action: Action
   active: boolean

components/NavLink.tsx

@@ -1,8 +1,9 @@
 import React from 'react'
 
-import cn from 'classnames'
 import Link from 'next/link'
 
+import { cn } from '../util/styles'
+
 type Props = {
   href: string
   external?: boolean

components/Tracer/ExecutionStatus.tsx

@@ -6,6 +6,7 @@ import {
 import { Priority, useRegisterActions } from 'kbar'
 
 import { Button } from 'components/ui'
+
 import { TraceEntry } from '.'
 
 const ExecutionStatus = ({

components/Tracer/index.tsx

@@ -1,22 +1,22 @@
 import {
+  memo,
   useContext,
   useEffect,
-  useState,
-  useRef,
   useReducer,
-  memo,
+  useRef,
+  useState,
 } from 'react'
 
-import cn from 'classnames'
 import { Priority, useRegisterActions } from 'kbar'
 import { TableVirtuoso, TableVirtuosoHandle } from 'react-virtuoso'
 
 import {
-  CairoVMApiContext,
   BreakPoints,
+  CairoVMApiContext,
   ProgramExecutionState,
 } from 'context/cairoVMApiContext'
 
+import { cn } from '../../util/styles'
 import Console from '../Editor/Console'
 
 import ExecutionStatus from './ExecutionStatus'
@@ -222,28 +222,30 @@ export const Tracer = () => {
         <div className="px-4">
           <nav className="-mb-px uppercase flex space-x-8" aria-label="Tabs">
             <button
-              className={`hover:text-gray-700 whitespace-nowrap border-b py-1 mt-2 mb-4 text-xs font-thin ${cn(
+              className={cn(
+                'hover:text-gray-700 whitespace-nowrap border-b py-1 mt-2 mb-4 text-xs font-thin',
                 {
                   'border-indigo-600 text-gray-700':
                     selectedConsoleTab === IConsoleTab.DebugInfo,
                   'border-transparent text-gray-500':
                     selectedConsoleTab !== IConsoleTab.DebugInfo,
                 },
-              )}`}
+              )}
               onClick={() => setSelectedConsoleTab(IConsoleTab.DebugInfo)}
             >
               Debug Info [d]
             </button>
             <button
               onClick={() => setSelectedConsoleTab(IConsoleTab.Console)}
-              className={`hover:text-gray-700 whitespace-nowrap border-b py-1 mt-2 mb-4 text-xs font-thin ${cn(
+              className={cn(
+                'hover:text-gray-700 whitespace-nowrap border-b py-1 mt-2 mb-4 text-xs font-thin',
                 {
                   'border-indigo-600 text-gray-700':
                     selectedConsoleTab === IConsoleTab.Console,
                   'border-transparent text-gray-500':
                     selectedConsoleTab !== IConsoleTab.Console,
                 },
-              )}`}
+              )}
             >
               Console [e]
             </button>

components/layouts/Home.tsx

@@ -1,14 +1,15 @@
-import { useContext, PropsWithChildren } from 'react'
+import { PropsWithChildren, useContext } from 'react'
 
 import { GoogleAnalytics } from '@next/third-parties/google'
-import cn from 'classnames'
 import type { NextPage } from 'next'
 import Head from 'next/head'
 
 import { AppUiContext } from 'context/appUiContext'
 
 import { getAbsoluteURL } from 'util/browser'
 
+import { cn } from '../../util/styles'
+
 import Footer from './Footer'
 import Nav from './Nav'
 

components/layouts/Nav.tsx

@@ -1,4 +1,3 @@
-import cn from 'classnames'
 import Link from 'next/link'
 
 import { GITHUB_REPO_URL } from 'util/constants'
@@ -10,6 +9,8 @@ import ToggleFullScreen from 'components/ToggleFullScreen'
 import ToggleThreeColumnLayout from 'components/ToggleThreeColumnLayout'
 import { Container, Logo } from 'components/ui'
 
+import { cn } from '../../util/styles'
+
 const Nav = () => {
   return (
     <nav

components/ui/Button.tsx

@@ -1,8 +1,9 @@
 import React from 'react'
 
-import cn from 'classnames'
 import ReactTooltip from 'react-tooltip'
 
+import { cn } from '../../util/styles'
+
 type Props = {
   children: React.ReactNode | string
   href?: string

components/ui/Container.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import cn from 'classnames'
+import { cn } from '../../util/styles'
 
 type Props = {
   children: React.ReactNode

components/ui/Doc.tsx

@@ -1,8 +1,9 @@
 import React from 'react'
 
-import cn from 'classnames'
 import Link from 'next/link'
 
+import { cn } from '../../util/styles'
+
 // The mark identifying an empty table cell, in order to avoid applying styles
 const EMPTY_MARK = '*'
 

components/ui/Hamburger.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-unknown-property */
 import React from 'react'
 
-import cn from 'classnames'
+import { cn } from '../../util/styles'
 
 type Props = {
   isActive?: boolean

components/ui/Heading.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import cn from 'classnames'
+import { cn } from '../../util/styles'
 
 type Props = {
   children: React.ReactNode

components/ui/Input.tsx

@@ -1,6 +1,6 @@
-import React, { useState, ForwardedRef, forwardRef } from 'react'
+import React, { ForwardedRef, forwardRef, useState } from 'react'
 
-import cn from 'classnames'
+import { cn } from '../../util/styles'
 
 type Props = {
   searchable?: boolean

components/ui/Message.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react'
 
-import cn from 'classnames'
+import { cn } from '../../util/styles'
 
 type Props = {
   type: 'success' | 'warning' | 'error'

components/ui/StackBox.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import cn from 'classnames'
+import { cn } from '../../util/styles'
 
 type Props = {
   value: string

package.json

@@ -27,7 +27,7 @@
     "assert": "^2.0.0",
     "babel-preset-es2020": "^1.0.2",
     "bn.js": "^5.2.1",
-    "classnames": "^2.3.1",
+    "clsx": "^2.1.0",
     "copy-to-clipboard": "^3.3.1",
     "events": "^3.3.0",
     "gray-matter": "^4.0.3",
@@ -48,6 +48,7 @@
     "react-tooltip": "^4.2.21",
     "react-use-id": "^1.0.0",
     "react-virtuoso": "^4.7.7",
+    "tailwind-merge": "^2.2.2",
     "vercel": "^33.2.0",
     "wrangler": "^3.24.0"
   },