Replace classnames utility with clsx

package.json

@@ -24,6 +24,7 @@
   "homepage": "https://gitlab.com/caleb531/flip-book#README",
   "dependencies": {
     "@fontsource/roboto-slab": "^5.0.20",
+    "clsx": "^2.1.1",
     "fastclick": "^1.0.6",
     "gif.js.optimized": "^1.0.1",
     "mithril": "^2.2.2",

scripts/components/control.jsx

@@ -1,12 +1,12 @@
 import m from 'mithril';
-import classNames from '../classnames.js';
+import clsx from 'clsx';
 import PanelComponent from './panel.jsx';
 
 class ControlComponent {
 
   view({attrs: {id, title, icon = null, label = null, action = null, panel = null, panelPosition = 'top'}}) {
     return m(`div.control.control-${id}`, {
-      class: classNames({'control-has-label': label})
+      class: clsx({'control-has-label': label})
     }, [
       panel ? m(PanelComponent, {id, position: panelPosition}, panel) : null,
       m('button.control-button', {

scripts/components/export-gif.jsx

@@ -1,13 +1,13 @@
 import m from 'mithril';
-import classNames from '../classnames.js';
+import clsx from 'clsx';
 import ControlComponent from './control.jsx';
 import ProgressBarComponent from './progress-bar.jsx';
 
 class ExportGifComponent {
 
   view({attrs: {isExportingGif, exportProgress, isGifExportFinished, exportedImageUrl, abort}}) {
     return m('div.export-gif-screen', {
-      class: classNames({'visible': isExportingGif || isGifExportFinished})
+      class: clsx({'visible': isExportingGif || isGifExportFinished})
     }, [
       m(ControlComponent, {
         id: 'close-export-gif-overlay',

scripts/components/progress-bar.jsx

@@ -1,12 +1,12 @@
 import m from 'mithril';
-import classNames from '../classnames.js';
+import clsx from 'clsx';
 
 class ProgressBarComponent {
 
   view({attrs: {progress = 0}}) {
     return m('div.progress-bar', [
       m('div.progress-bar-current-progress', {
-        class: classNames({'no-progress': progress === 0}),
+        class: clsx({'no-progress': progress === 0}),
         style: {width: `${progress * 100}%`}
       })
     ]);

scripts/components/story-editor.jsx

@@ -1,5 +1,5 @@
 import m from 'mithril';
-import classNames from '../classnames.js';
+import clsx from 'clsx';
 import FrameComponent from './frame.jsx';
 import DrawingAreaComponent from './drawing-area.jsx';
 import StoryControlsComponent from './story-controls.jsx';
@@ -8,7 +8,7 @@ class StoryEditorComponent {
 
   view({attrs: {story}}) {
     return m('div.story-editor', {
-      class: classNames({'story-playing': story.playing})
+      class: clsx({'story-playing': story.playing})
     }, [
 
       m('div.story-stage', [

scripts/components/timeline.jsx

@@ -1,5 +1,5 @@
 import m from 'mithril';
-import classNames from '../classnames.js';
+import clsx from 'clsx';
 import FrameComponent from './frame.jsx';
 
 const FRAME_THUMBNAIL_WIDTH = 128;
@@ -88,7 +88,7 @@ class TimelineComponent {
         oncreate: ({dom}) => this.scrollSelectedThumbnailIntoView(dom),
         // Scroll selected frame into view when navigating frames (Prev/Next)
         onupdate: ({dom}) => this.scrollSelectedThumbnailIntoView(dom),
-        class: classNames({'selected': story.selectedFrameIndex === f}),
+        class: clsx({'selected': story.selectedFrameIndex === f}),
         'data-index': f
       }, m(FrameComponent, {
         className: 'timeline-thumbnail-canvas',

scripts/components/update-notification.jsx

@@ -1,5 +1,5 @@
 import m from 'mithril';
-import classNames from '../classnames.js';
+import clsx from 'clsx';
 import { registerSW } from 'virtual:pwa-register';
 
 class UpdateNotificationComponent {
@@ -30,7 +30,7 @@ class UpdateNotificationComponent {
 
   view() {
     return m('div.update-notification', {
-      class: classNames({ 'update-available': this.isUpdateAvailable }),
+      class: clsx({ 'update-available': this.isUpdateAvailable }),
       onclick: () => this.update()
     }, [
       m('span.update-notification-message', 'Update available! Click here to update.')