fix(classNames context): general improvements

.eslintrc

@@ -12,6 +12,7 @@
   ],
   "parser": "@typescript-eslint/parser",
   "rules": {
+    "@typescript-eslint/no-unused-vars": "error",
     "@typescript-eslint/explicit-module-boundary-types": "off",
     "no-console": ["error", { "allow": ["error", "warn"] }],
     "@typescript-eslint/explicit-function-return-type": "off",

sandpack-react/package.json

@@ -51,7 +51,6 @@
     "README.md"
   ],
   "dependencies": {
-    "@code-hike/classer": "^0.0.0-aa6efee",
     "@codemirror/autocomplete": "^6.4.0",
     "@codemirror/commands": "^6.1.3",
     "@codemirror/lang-css": "^6.0.1",

sandpack-react/rollup.config.js

@@ -15,7 +15,7 @@ const external = [
   ...Object.keys(pkg.dependencies),
   ...Object.keys(pkg.devDependencies),
   ...Object.keys(pkg.peerDependencies),
-]
+];
 
 const baseConfig = { input: "src/index.ts", external };
 

sandpack-react/src/Issues.stories.tsx

@@ -1,7 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { useState } from "react";
-
-import { SandpackPreview } from "./components";
+import React, { useState } from "react";
 
 import {
   Sandpack,

sandpack-react/src/Playground.stories.tsx

@@ -2,16 +2,16 @@
 import * as themes from "@codesandbox/sandpack-themes";
 import React from "react";
 
-import { SandpackCodeEditor, SandpackConsole } from "./components";
-
-import { Sandpack, SandpackLayout, SandpackProvider } from "./";
-
-export default {
-  title: "Intro/Playground",
-};
+import { Sandpack } from "./";
 
 export const Basic: React.FC = () => {
-  return <Sandpack template="nextjs" theme={themes.sandpackDark} />;
+  return (
+    <Sandpack
+      options={{ classes: { "sp-layout": "fooo" } }}
+      template="nextjs"
+      theme={themes.sandpackDark}
+    />
+  );
 };
 
 export const EslintBasic = () => (

sandpack-react/src/components/CodeEditor/CodeMirror.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
-import { useClasser } from "@code-hike/classer";
 import { closeBrackets, closeBracketsKeymap } from "@codemirror/autocomplete";
 import {
   defaultKeymap,
@@ -34,7 +33,7 @@ import type {
   SandpackInitMode,
 } from "../../types";
 import { shallowEqual } from "../../utils/array";
-import { classNames } from "../../utils/classNames";
+import { useClassNames } from "../../utils/classNames";
 import { getFileName } from "../../utils/stringUtils";
 
 import { highlightDecorators } from "./highlightDecorators";
@@ -131,7 +130,7 @@ export const CodeMirror = React.forwardRef<CodeMirrorRef, CodeMirrorProps>(
       initMode === "immediate"
     );
 
-    const c = useClasser(THEME_PREFIX);
+    const classNames = useClassNames();
     const { listen } = useSandpack();
 
     const prevExtension = React.useRef<Extension[]>([]);
@@ -437,15 +436,16 @@ export const CodeMirror = React.forwardRef<CodeMirrorRef, CodeMirrorProps>(
         <>
           <pre
             ref={combinedRef}
-            className={classNames(
-              c("cm", editorState, languageExtension),
+            className={classNames("cm", [
+              classNames(editorState),
+              classNames(languageExtension),
               cmClassName,
-              tokensClassName
-            )}
+              tokensClassName,
+            ])}
             translate="no"
           >
             <code
-              className={classNames(c("pre-placeholder"), placeholderClassName)}
+              className={classNames("pre-placeholder", [placeholderClassName])}
               style={{ marginLeft: gutterLineOffset() }}
             >
               {syntaxHighlightRender}
@@ -454,7 +454,7 @@ export const CodeMirror = React.forwardRef<CodeMirrorRef, CodeMirrorProps>(
 
           {readOnly && showReadOnly && (
             <span
-              className={classNames(c("read-only"), readOnlyClassName)}
+              className={classNames("read-only", [readOnlyClassName])}
               {...(process.env.TEST_ENV ? { "data-testId": "read-only" } : {})}
             >
               Read-only
@@ -472,19 +472,20 @@ export const CodeMirror = React.forwardRef<CodeMirrorRef, CodeMirrorProps>(
           filePath ? `Code Editor for ${getFileName(filePath)}` : `Code Editor`
         }
         aria-multiline="true"
-        className={classNames(
-          c("cm", editorState, languageExtension),
+        className={classNames("cm", [
+          classNames(editorState),
+          classNames(languageExtension),
           cmClassName,
-          tokensClassName
-        )}
+          tokensClassName,
+        ])}
         onKeyDown={handleContainerKeyDown}
         role="textbox"
         tabIndex={0}
         translate="no"
         suppressHydrationWarning
       >
         <pre
-          className={classNames(c("pre-placeholder"), placeholderClassName)}
+          className={classNames("pre-placeholder", [placeholderClassName])}
           style={{ marginLeft: gutterLineOffset() }}
         >
           {syntaxHighlightRender}

sandpack-react/src/components/CodeEditor/index.tsx

@@ -1,13 +1,11 @@
-import { useClasser } from "@code-hike/classer";
 import type { Extension } from "@codemirror/state";
 import type { KeyBinding } from "@codemirror/view";
-import * as React from "react";
+import { forwardRef } from "react";
 
 import { useActiveCode } from "../../hooks/useActiveCode";
 import { useSandpack } from "../../hooks/useSandpack";
-import { THEME_PREFIX } from "../../styles";
 import type { CustomLanguage, SandpackInitMode } from "../../types";
-import { classNames } from "../../utils/classNames";
+import { useClassNames } from "../../utils/classNames";
 import { FileTabs } from "../FileTabs";
 import { RunButton } from "../common/RunButton";
 import { SandpackStack } from "../common/Stack";
@@ -61,10 +59,7 @@ export interface CodeEditorProps {
 
 export { CodeMirror as CodeEditor };
 
-export const SandpackCodeEditor = React.forwardRef<
-  CodeMirrorRef,
-  CodeEditorProps
->(
+export const SandpackCodeEditor = forwardRef<CodeMirrorRef, CodeEditorProps>(
   (
     {
       showTabs,
@@ -88,17 +83,17 @@ export const SandpackCodeEditor = React.forwardRef<
     const { activeFile, status, editorState } = sandpack;
     const shouldShowTabs = showTabs ?? sandpack.visibleFiles.length > 1;
 
-    const c = useClasser(THEME_PREFIX);
+    const classNames = useClassNames();
 
     const handleCodeUpdate = (newCode: string): void => {
       updateCode(newCode);
     };
 
     return (
-      <SandpackStack className={c("editor")} {...props}>
+      <SandpackStack className={classNames("editor")} {...props}>
         {shouldShowTabs && <FileTabs closableTabs={closableTabs} />}
 
-        <div className={classNames(c("code-editor"), editorClassName)}>
+        <div className={classNames("code-editor", [editorClassName])}>
           <CodeMirror
             key={activeFile}
             ref={ref}

sandpack-react/src/components/CodeViewer/index.tsx

@@ -1,11 +1,9 @@
-import { useClasser } from "@code-hike/classer";
 import * as React from "react";
 
 import type { CustomLanguage, SandpackInitMode } from "../..";
 import { useActiveCode } from "../../hooks/useActiveCode";
 import { useSandpack } from "../../hooks/useSandpack";
-import { THEME_PREFIX } from "../../styles";
-import { classNames } from "../../utils/classNames";
+import { useClassNames } from "../../utils/classNames";
 import { CodeEditor } from "../CodeEditor";
 import type { CodeEditorRef } from "../CodeEditor";
 import type { Decorators } from "../CodeEditor/CodeMirror";
@@ -57,15 +55,15 @@ export const SandpackCodeViewer = React.forwardRef<
   ) => {
     const { sandpack } = useSandpack();
     const { code } = useActiveCode();
-    const c = useClasser(THEME_PREFIX);
+    const classNames = useClassNames();
 
     const shouldShowTabs = showTabs ?? sandpack.visibleFiles.length > 1;
 
     return (
-      <SandpackStack className={c("editor-viewer")} {...props}>
+      <SandpackStack className={classNames("editor-viewer")} {...props}>
         {shouldShowTabs ? <FileTabs /> : null}
 
-        <div className={classNames(c("code-editor"), editorClassName)}>
+        <div className={classNames("code-editor", [editorClassName])}>
           <CodeEditor
             ref={ref}
             additionalLanguages={additionalLanguages}

sandpack-react/src/components/Console/ConsoleList.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 
 import { css, THEME_PREFIX } from "../../styles";
-import { classNames } from "../../utils/classNames";
+import { useClassNames } from "../../utils/classNames";
 import { CodeEditor } from "../CodeEditor";
 
 import { fromConsoleToString } from "./utils/fromConsoleToString";
@@ -11,6 +11,8 @@ import { getType } from "./utils/getType";
 export const ConsoleList: React.FC<{ data: SandpackConsoleData }> = ({
   data,
 }) => {
+  const classNames = useClassNames();
+
   return (
     <>
       {data.map(({ data, id, method }, logIndex, references) => {
@@ -28,9 +30,9 @@ export const ConsoleList: React.FC<{ data: SandpackConsoleData }> = ({
                 return (
                   <div
                     key={`${id}-${msgIndex}`}
-                    className={classNames(
-                      consoleItemClassName({ variant: getType(method) })
-                    )}
+                    className={classNames("console-item", [
+                      consoleItemClassName({ variant: getType(method) }),
+                    ])}
                   >
                     <CodeEditor
                       code={

sandpack-react/src/components/Console/Header.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import { css } from "../../styles";
 import { buttonClassName, roundedButtonClassName } from "../../styles/shared";
-import { classNames } from "../../utils/classNames";
+import { useClassNames } from "../../utils/classNames";
 import { ConsoleIcon } from "../icons";
 
 const wrapperClassName = css({
@@ -23,21 +23,28 @@ const flexClassName = css({
   gap: "$space$2",
 });
 
-const buttonsClassName = classNames(
-  buttonClassName,
-  roundedButtonClassName,
-  css({ padding: "$space$1 $space$3" })
-);
-
 export const Header: React.FC<{
   currentTab: "server" | "client";
   setCurrentTab: (value: "server" | "client") => void;
   node: boolean;
 }> = ({ currentTab, setCurrentTab, node }) => {
+  const classNames = useClassNames();
+
+  const buttonsClassName = classNames("console-header-button", [
+    buttonClassName,
+    roundedButtonClassName,
+    css({ padding: "$space$1 $space$3" }),
+  ]);
+
   return (
-    <div className={classNames(wrapperClassName, flexClassName)}>
+    <div
+      className={classNames("console-header", [
+        wrapperClassName,
+        flexClassName,
+      ])}
+    >
       <p
-        className={classNames(
+        className={classNames("console-header-title", [
           css({
             lineHeight: 1,
             margin: 0,
@@ -48,15 +55,15 @@ export const Header: React.FC<{
             alignItems: "center",
 
             gap: "$space$2",
-          })
-        )}
+          }),
+        ])}
       >
         <ConsoleIcon />
         <span>Terminal</span>
       </p>
 
       {node && (
-        <div className={classNames(flexClassName)}>
+        <div className={classNames("console-header-actions", [flexClassName])}>
           <button
             className={buttonsClassName}
             data-active={currentTab === "server"}

sandpack-react/src/components/Console/SandpackConsole.tsx

@@ -7,7 +7,7 @@ import {
   useSandpackShellStdout,
 } from "../../hooks";
 import { css, THEME_PREFIX } from "../../styles";
-import { classNames } from "../../utils/classNames";
+import { useClassNames } from "../../utils/classNames";
 import { SandpackStack, DependenciesProgress, RoundedButton } from "../common";
 import { CleanIcon, RestartIcon } from "../icons";
 
@@ -105,9 +105,11 @@ export const SandpackConsole = React.forwardRef<
       },
     }));
 
+    const classNames = useClassNames();
+
     return (
       <SandpackStack
-        className={classNames(
+        className={classNames("console", [
           css({
             height: "100%",
             background: "$surface1",
@@ -126,9 +128,8 @@ export const SandpackConsole = React.forwardRef<
               pointerEvents: "none",
             },
           }),
-          `${THEME_PREFIX}-console`,
-          className
-        )}
+          className,
+        ])}
         {...props}
       >
         {showHeader && isNodeEnvironment && (
@@ -141,9 +142,9 @@ export const SandpackConsole = React.forwardRef<
 
         <div
           ref={wrapperRef}
-          className={classNames(
-            css({ overflow: "auto", scrollBehavior: "smooth" })
-          )}
+          className={classNames("console-list", [
+            css({ overflow: "auto", scrollBehavior: "smooth" }),
+          ])}
         >
           {isServerTab ? (
             <StdoutList data={stdoutData} />
@@ -153,15 +154,15 @@ export const SandpackConsole = React.forwardRef<
         </div>
 
         <div
-          className={classNames(
+          className={classNames("console-actions", [
             css({
               position: "absolute",
               bottom: "$space$2",
               right: "$space$2",
               display: "flex",
               gap: "$space$2",
-            })
-          )}
+            }),
+          ])}
         >
           {actionsChildren}