refactor: remove ui-kit classNames

.github/workflows/ci.yml

@@ -122,7 +122,7 @@ jobs:
 
   screen-test:
     name: Screen tests
-    runs-on: ubuntu-latest
+    runs-on: macos-latest
 
     needs: detect-changes
     if: needs.detect-changes.outputs.src == 'true' || needs.detect-changes.outputs.screenshots == 'true'

apps/synth-playground/package.json

@@ -11,10 +11,8 @@
         "build": "next build",
         "start": "next start",
         "ts:check": "tsc --noEmit",
-        "test:screen": "PLAYWRIGHT_PORT=6002 playwright test",
+        "test:screen": "PLAYWRIGHT_SERVER=dev:storybook PLAYWRIGHT_PORT=6002 playwright test",
         "test:screen:update": "pnpm run test:screen --update-snapshots",
-        "playwright:install": "playwright install chromium --with-deps",
-        "playwright:server": "pnpm run dev:storybook",
         "setup:copy-synth-dts": "node ./scripts/copy-synth-dts.js"
     },
     "imports": {
@@ -53,7 +51,6 @@
         "@types/node": "catalog:",
         "@types/react": "catalog:",
         "@types/react-dom": "catalog:",
-        "playwright": "catalog:",
         "storybook": "catalog:",
         "typescript": "catalog:"
     }

apps/synth-playground/src/screens/editor-screen/ui/editor-header.tsx

@@ -14,7 +14,7 @@ export const EditorHeader: FC = () => {
         <Tooltip.Trigger>
           <Heading.Root>
             <Heading.SuperTitle>@kepvox/synth</Heading.SuperTitle>
-            <Heading.Title variant="text-m">Playground</Heading.Title>
+            <Heading.Title>Playground</Heading.Title>
           </Heading.Root>
         </Tooltip.Trigger>
         <Tooltip.Content>TODO: about</Tooltip.Content>

apps/synth-playground/src/screens/editor-screen/ui/editor-status.tsx

@@ -17,9 +17,7 @@ export const EditorStatus: FC = () => {
     return (
       <Heading.Root>
         <Heading.SuperTitle color="destructive">{error.name}:</Heading.SuperTitle>
-        <Heading.Title variant="text-m" color="destructive">
-          {error.message}
-        </Heading.Title>
+        <Heading.Description color="destructive">{error.message}</Heading.Description>
       </Heading.Root>
     )
   }

package.json

@@ -6,19 +6,20 @@
     "description": "Web audio synthesizer inspired by SunVox",
     "scripts": {
         "build": "turbo build --",
-        "start": "turbo start --",
-        "test:unit": "turbo run test:unit --",
-        "test:screen": "turbo run test:screen --",
-        "ts:check": "turbo run ts:check --",
-        "lint": "biome lint .",
         "ci:check": "biome check .",
         "ci:pre-commit": "biome check --write",
-        "format": "biome format --write .",
-        "fix": "biome check --write .",
-        "fix-unsafe": "biome check --write --unsafe .",
         "dev": "turbo dev --",
+        "dev:storybook": "turbo dev:storybook --",
         "dev:unit": "turbo dev:unit --",
-        "dev:storybook": "turbo dev:storybook --"
+        "fix": "biome check --write .",
+        "fix-unsafe": "biome check --write --unsafe .",
+        "format": "biome format --write .",
+        "lint": "biome lint .",
+        "start": "turbo start --",
+        "test:screen": "turbo run test:screen --",
+        "test:screen:install-playwright": "playwright install chromium --with-deps",
+        "test:unit": "turbo run test:unit --",
+        "ts:check": "turbo run ts:check --"
     },
     "keywords": [],
     "author": "picalines",
@@ -27,6 +28,7 @@
     "devDependencies": {
         "@biomejs/biome": "1.9.4",
         "lefthook": "^1.7.9",
+        "playwright": "^1.49.1",
         "turbo": "^2.5.0"
     }
 }

packages/editor/package.json

@@ -11,11 +11,9 @@
     "scripts": {
         "dev": "pnpm run dev:storybook",
         "dev:storybook": "storybook dev -p 6004 --no-open",
-        "test:screen": "PLAYWRIGHT_PORT=6004 playwright test",
+        "test:screen": "PLAYWRIGHT_SERVER=dev:storybook PLAYWRIGHT_PORT=6004 playwright test",
         "test:screen:update": "pnpm run test:screen --update-snapshots",
-        "ts:check": "tsc --noEmit",
-        "playwright:install": "playwright install chromium --with-deps",
-        "playwright:server": "pnpm run dev:storybook"
+        "ts:check": "tsc --noEmit"
     },
     "imports": {
         "#components/*": "./src/components/*/index.ts",
@@ -51,7 +49,6 @@
         "@testing-library/user-event": "catalog:",
         "@types/react": "catalog:",
         "jsdom": "catalog:",
-        "playwright": "catalog:",
         "storybook": "catalog:",
         "typescript": "catalog:"
     }

packages/editor/src/components/editor/editor-panels.tsx

@@ -9,22 +9,22 @@ import { editorModel } from '#model'
 
 export const EditorPanels: FC = () => {
   return (
-    <Resizable.Group direction="vertical" className="h-full w-full">
-      <Resizable.Panel defaultSize={50} className="relative">
+    <Resizable.Group direction="vertical">
+      <Resizable.Panel defaultSize={50}>
         <LoaderFallback>
           <MusicSheetTile />
         </LoaderFallback>
       </Resizable.Panel>
       <Resizable.Handle />
       <Resizable.Panel defaultSize={50}>
         <Resizable.Group direction="horizontal">
-          <Resizable.Panel defaultSize={25} className="relative">
+          <Resizable.Panel defaultSize={25}>
             <LoaderFallback>
               <NodeTile />
             </LoaderFallback>
           </Resizable.Panel>
           <Resizable.Handle />
-          <Resizable.Panel defaultSize={75} className="relative">
+          <Resizable.Panel defaultSize={75}>
             <LoaderFallback>
               <SynthTreeTile />
             </LoaderFallback>

packages/editor/src/components/music-sheet-tile/music-sheet-flow/music-sheet-flow-nodes.tsx

@@ -32,20 +32,18 @@ const NoteFlowNodeComponent: FC<NodeProps<SheetNoteFlowNode>> = props => {
   })
 
   return (
-    <>
-      <div
-        className={cn(
-          'relative flex items-center rounded-md bg-gradient-to-r px-1 ring-offset-background transition-all',
-          SYNTH_COLOR_CLASSNAMES[synthColor],
-          selected && 'ring-2 ring-offset-2',
-        )}
-        style={{ width, height }}
-      >
-        <Text color="inherit" className="font-bold">
-          {synthNumber ?? <XIcon className="zoom-in-75 fade-in-0 animate-in" />}
-        </Text>
-      </div>
-    </>
+    <div
+      className={cn(
+        'relative flex items-center rounded-md bg-gradient-to-r px-1 ring-offset-background transition-all',
+        SYNTH_COLOR_CLASSNAMES[synthColor],
+        selected && 'ring-2 ring-offset-2',
+      )}
+      style={{ width, height }}
+    >
+      <Text color="inherit" weight="bold">
+        {synthNumber ?? <XIcon className="zoom-in-75 fade-in-0 animate-in" />}
+      </Text>
+    </div>
   )
 }
 

packages/editor/src/components/music-sheet-tile/music-sheet-tile.tsx

@@ -21,13 +21,13 @@ const DIMENSIONS = musicSheetDimensions({
 export const MusicSheetTile: FC = () => {
   return (
     <div className="relative h-full bg-background">
-      <Resizable.Group direction="horizontal" className="isolate">
+      <Resizable.Group direction="horizontal">
         <Resizable.Panel defaultSize={15} maxSize={30}>
           <div className="relative z-1 border-b bg-background" style={{ height: DIMENSIONS.timeline.height }} />
           <MusicSheetPianoRoll dimensions={DIMENSIONS} />
         </Resizable.Panel>
         <Resizable.Handle />
-        <Resizable.Panel defaultSize={85} className="relative">
+        <Resizable.Panel defaultSize={85}>
           <MusicSheetTimeline dimensions={DIMENSIONS} />
           <TimeMarkers />
           <ReactFlowProvider>

packages/editor/src/components/music-sheet-tile/readonly-indicator/readonly-indicator.tsx

@@ -11,8 +11,10 @@ export const ReadonlyIndicator: FC = () => {
   }
 
   return (
-    <Text color="accent" weight="medium" className="pointer-events-none select-none rounded-md bg-accent p-1">
-      non-editable
-    </Text>
+    <div className="pointer-events-none select-none rounded-md bg-accent p-1">
+      <Text color="accent" weight="medium">
+        non-editable
+      </Text>
+    </div>
   )
 }

packages/editor/src/components/music-sheet-tile/tempo-controls/tempo-controls.tsx

@@ -41,12 +41,7 @@ export const TempoControls: FC = () => {
           </Select.Group>
         </Select.Content>
       </Select.Root>
-      <NumberInput.Root
-        value={beatsPerMinute}
-        onValueChange={onBeatsPerMinuteChange}
-        disabled={isReadonly}
-        className="w-30"
-      >
+      <NumberInput.Root value={beatsPerMinute} onValueChange={onBeatsPerMinuteChange} disabled={isReadonly}>
         <NumberInput.Label>BPM</NumberInput.Label>
       </NumberInput.Root>
     </>

packages/editor/src/components/node-tile/node-control-grid.tsx

@@ -18,7 +18,7 @@ export const NodeControlGrid: FC = () => {
   })
 
   return (
-    <ScrollArea.Root className="bg-background">
+    <ScrollArea.Root>
       <ScrollArea.Bar orientation="vertical" />
       <ScrollArea.Content>
         <div className="@container p-3">

packages/editor/src/components/node-tile/node-heading.tsx

@@ -21,8 +21,8 @@ export const NodeHeading: FC<Props> = () => {
 
   return (
     <Heading.Root>
-      <Heading.Title variant="text-s">{capitalize(nodeType)}</Heading.Title>
-      <Heading.Description variant="text-xs">#{nodeNumber}</Heading.Description>
+      <Heading.Title>{capitalize(nodeType)}</Heading.Title>
+      <Heading.Description>#{nodeNumber}</Heading.Description>
     </Heading.Root>
   )
 }

packages/editor/src/components/node-tile/node-tile.tsx

@@ -17,19 +17,17 @@ export const NodeTile: FC = () => {
   if (!hasActiveNode) {
     return (
       <div className="relative size-full bg-background">
-        <div className="-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-1/2 text-nowrap">
-          <Text color="muted" className="flex flex-col items-center">
-            <MousePointerClickIcon />
-            select node
-          </Text>
+        <div className="-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-1/2 flex flex-col items-center text-nowrap text-muted-foreground">
+          <MousePointerClickIcon />
+          <Text>select node</Text>
         </div>
       </div>
     )
   }
 
   return (
-    <div className="flex h-full flex-col">
-      <div className="flex shrink-0 items-center border-b bg-background p-3">
+    <div className="flex h-full flex-col bg-background">
+      <div className="flex shrink-0 items-center border-b p-3">
         <NodeHeading />
         <div className="grow" />
         <NodeColorSelect />

packages/editor/src/components/synth-tree-tile/synth-tree-flow-nodes.tsx

@@ -47,24 +47,26 @@ const SynthFlowNodeComponent: FC<NodeProps<SynthFlowNode>> = props => {
 
   return (
     <>
-      <Text
+      <div
         className={cn(
-          '-top-[1rlh] pointer-events-none absolute left-1 font-bold text-muted-foreground transition-all ease-out',
+          '-top-[1rlh] pointer-events-none absolute left-1 transition-all ease-out',
           selected && '-translate-y-1',
         )}
       >
-        {number}
-      </Text>
+        <Text color="muted" weight="bold">
+          {number}
+        </Text>
+      </div>
       <div
         className={cn(
-          'rounded-md border-2 border-accent bg-gradient-to-b p-1 px-2 ring-offset-background transition-all ease-out',
+          'rounded-md border-2 border-accent bg-gradient-to-b p-1 px-2 text-white ring-offset-background transition-all ease-out',
           selected && 'ring-2 ring-offset-2',
           NODE_COLOR_CLASSNAMES[color],
           isPlaying && !outgoingConnections && numberOfOutputs && 'opacity-65',
         )}
         style={{ width: `${width}px`, height: `${height}px` }}
       >
-        <Text className="text-white">{capitalize(type)}</Text>
+        <Text>{capitalize(type)}</Text>
       </div>
       {Array.from({ length: numberOfInputs }).map((_, i) => (
         <Handle key={String(i)} type="target" id={String(i)} position={Position.Left} className="!h-3 !w-3" />

packages/synth/package.json

@@ -18,10 +18,8 @@
         "dev:unit": "vitest watch",
         "ts:check": "tsc --noEmit",
         "test:unit": "vitest run",
-        "test:screen": "PLAYWRIGHT_PORT=6003 playwright test",
-        "test:screen:update": "pnpm run test:screen --update-snapshots",
-        "playwright:install": "playwright install chromium --with-deps",
-        "playwright:server": "pnpm run dev:storybook"
+        "test:screen": "PLAYWRIGHT_SERVER=dev:storybook PLAYWRIGHT_PORT=6003 playwright test",
+        "test:screen:update": "pnpm run test:screen --update-snapshots"
     },
     "imports": {
         "#automation": "./src/automation/internals.ts",
@@ -47,7 +45,6 @@
         "@repo/web-audio": "workspace:*",
         "@storybook/react": "catalog:",
         "@types/react": "catalog:",
-        "playwright": "catalog:",
         "react": "catalog:",
         "storybook": "catalog:",
         "tsup": "catalog:",

packages/ui-kit/package.json

@@ -11,10 +11,8 @@
         "dev:unit": "vitest watch",
         "ts:check": "tsc --noEmit",
         "test:unit": "vitest run",
-        "test:screen": "PLAYWRIGHT_PORT=6001 playwright test",
-        "test:screen:update": "pnpm run test:screen --update-snapshots",
-        "playwright:install": "playwright install chromium --with-deps",
-        "playwright:server": "pnpm run dev:storybook"
+        "test:screen": "PLAYWRIGHT_SERVER=dev:storybook PLAYWRIGHT_PORT=6001 playwright test",
+        "test:screen:update": "pnpm run test:screen --update-snapshots"
     },
     "exports": {
         "./style.css": "./src/styles/index.css",
@@ -71,7 +69,6 @@
         "@types/react": "catalog:",
         "@types/react-is": "catalog:",
         "jsdom": "catalog:",
-        "playwright": "catalog:",
         "storybook": "catalog:",
         "typescript": "catalog:",
         "vitest": "catalog:"

packages/ui-kit/src/components/checkbox/checkbox.tsx

@@ -1,12 +1,9 @@
 import * as RadixCheckbox from '@radix-ui/react-checkbox'
-import type { OmitExisting } from '@repo/common/typing'
-import { type ComponentProps, type FC, type ReactNode, useId } from 'react'
+import { type FC, type ReactNode, useId } from 'react'
 import { CheckIcon } from '#icons'
-import { cn } from '#lib/classnames'
 import { createSlot, useSlots } from '#lib/slots'
 
 export type RootProps = {
-  className?: string
   name?: string
   /**
    * @default "on"
@@ -20,19 +17,19 @@ export type RootProps = {
   onCheckedChange?: (checked: boolean) => void
 }
 
-export type LabelProps = OmitExisting<ComponentProps<'label'>, 'color' | 'htmlFor'>
+export type LabelProps = { children: ReactNode }
 
 export const Label = createSlot({ name: 'Label' }).component<LabelProps>()
 
 export const Root: FC<RootProps> = props => {
-  const { className, children, ...rootProps } = props
+  const { children, ...rootProps } = props
 
   const { label } = useSlots(children, { label: Label })
 
   const checkboxId = useId()
 
   return (
-    <div className={cn('flex items-center space-x-2', className)}>
+    <div className="flex items-center space-x-2">
       <RadixCheckbox.Root
         {...rootProps}
         id={checkboxId}
@@ -43,12 +40,7 @@ export const Root: FC<RootProps> = props => {
         </RadixCheckbox.Indicator>
       </RadixCheckbox.Root>
       {label && (
-        <label
-          {...label.props}
-          ref={label.ref}
-          htmlFor={checkboxId}
-          className={cn('peer-disabled:opacity-50', label.props.className)}
-        >
+        <label {...label.props} htmlFor={checkboxId} className="peer-disabled:opacity-50">
           {label.children}
         </label>
       )}