Replace classnames dependency with equivalent helper function

davidje13 · Dec 4, 2024 · 77fc9a9 · 77fc9a9
1 parent 072626a
commit 77fc9a9
Show file tree

Hide file tree

Showing 13 changed files with 65 additions and 48 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -11,7 +11,6 @@
   },
   "dependencies": {
     "@openfonts/open-sans_all": "1.x",
-    "classnames": "2.x",
     "json-immutability-helper": "4.0.x",
     "lean-qr": "2.x",
     "react": "18.x",

diff --git a/frontend/src/components/common/ExpandingTextEntry.tsx b/frontend/src/components/common/ExpandingTextEntry.tsx
@@ -5,7 +5,7 @@ import {
   SyntheticEvent,
   MouseEvent,
 } from 'react';
-import classNames from 'classnames';
+import { classNames } from '../../helpers/classNames';
 import { isFocusable } from '../../helpers/isFocusable';
 import { useKeyHandler } from '../../hooks/useKeyHandler';
 import { useStateMap } from '../../hooks/useStateMap';

diff --git a/frontend/src/components/common/PickerInput.tsx b/frontend/src/components/common/PickerInput.tsx
@@ -1,5 +1,5 @@
 import { memo, ReactNode } from 'react';
-import classNames from 'classnames';
+import { classNames } from '../../helpers/classNames';
 import './PickerInput.less';
 
 interface OptionT {

diff --git a/frontend/src/components/common/TabControl.tsx b/frontend/src/components/common/TabControl.tsx
@@ -1,5 +1,5 @@
 import { useState, memo, ReactNode } from 'react';
-import classNames from 'classnames';
+import { classNames } from '../../helpers/classNames';
 import './TabControl.less';
 
 interface TabT {

diff --git a/frontend/src/components/common/Textarea.tsx b/frontend/src/components/common/Textarea.tsx
@@ -8,7 +8,7 @@ import {
   CSSProperties,
   useEffect,
 } from 'react';
-import classNames from 'classnames';
+import { classNames } from '../../helpers/classNames';
 import { useDebounced } from '../../hooks/useDebounced';
 import {
   getEmptyHeight,

diff --git a/frontend/src/components/retro-formats/mood/MoodRetro.tsx b/frontend/src/components/retro-formats/mood/MoodRetro.tsx
@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import classNames from 'classnames';
+import { classNames } from '../../../helpers/classNames';
 import { type RetroItem } from '../../../shared/api-entities';
 import { MoodSection } from './categories/MoodSection';
 import { ActionsPane } from './actions/ActionsPane';

diff --git a/frontend/src/components/retro-formats/mood/actions/ActionItem.tsx b/frontend/src/components/retro-formats/mood/actions/ActionItem.tsx
@@ -1,5 +1,5 @@
 import { useState, memo } from 'react';
-import classNames from 'classnames';
+import { classNames } from '../../../../helpers/classNames';
 import {
   type RetroItem,
   type UserProvidedRetroItemDetails,

diff --git a/frontend/src/components/retro-formats/mood/actions/ActionsPane.tsx b/frontend/src/components/retro-formats/mood/actions/ActionsPane.tsx
@@ -1,5 +1,5 @@
 import { memo } from 'react';
-import classNames from 'classnames';
+import { classNames } from '../../../../helpers/classNames';
 import {
   type RetroItem,
   type UserProvidedRetroItemDetails,

diff --git a/frontend/src/components/retro-formats/mood/categories/FaceIcon.tsx b/frontend/src/components/retro-formats/mood/categories/FaceIcon.tsx
@@ -1,5 +1,5 @@
 import { memo } from 'react';
-import classNames from 'classnames';
+import { classNames } from '../../../../helpers/classNames';
 import './FaceIcon.less';
 
 type Type = 'happy' | 'meh' | 'sad';

diff --git a/frontend/src/components/retro-formats/mood/categories/MoodItemPlain.tsx b/frontend/src/components/retro-formats/mood/categories/MoodItemPlain.tsx
@@ -1,5 +1,5 @@
 import { memo } from 'react';
-import classNames from 'classnames';
+import { classNames } from '../../../../helpers/classNames';
 import { type RetroItem } from '../../../../shared/api-entities';
 import { VoteCount } from './VoteCount';
 import { WrappedButton } from '../../../common/WrappedButton';

diff --git a/frontend/src/components/retro-formats/mood/categories/VoteCount.tsx b/frontend/src/components/retro-formats/mood/categories/VoteCount.tsx
@@ -1,5 +1,5 @@
 import { memo } from 'react';
-import classNames from 'classnames';
+import { classNames } from '../../../../helpers/classNames';
 import { WrappedButton } from '../../../common/WrappedButton';
 import { useThrottled } from '../../../../hooks/useThrottled';
 import Heart from '../../../../../resources/heart.svg';

diff --git a/frontend/src/helpers/classNames.ts b/frontend/src/helpers/classNames.ts
@@ -0,0 +1,19 @@
+type ClassNamePart = string | Record<string, boolean> | null | undefined;
+
+export function classNames(...parts: ClassNamePart[]): string {
+  const r: string[] = [];
+  for (const part of parts) {
+    if (part) {
+      if (typeof part === 'string') {
+        r.push(part);
+      } else {
+        r.push(
+          ...Object.entries(part)
+            .filter(([, v]) => v)
+            .map(([k]) => k),
+        );
+      }
+    }
+  }
+  return r.join(' ');
+}