♻️ [App] Replace all utilities imports with beeftools

beefchimi · Apr 28, 2024 · 924d4c2 · 924d4c2
1 parent d3bfb62
commit 924d4c2
Show file tree

Hide file tree

Showing 16 changed files with 27 additions and 72 deletions.
diff --git a/app/website/package.json b/app/website/package.json
@@ -26,7 +26,7 @@
     "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false"
   },
   "dependencies": {
-    "@earwurm/utilities": "workspace:*",
+    "beeftools": "^0.0.5",
     "earwurm": "workspace:*",
     "vue": "^3.4.25"
   },

diff --git a/app/website/src/components/DragHandle.vue b/app/website/src/components/DragHandle.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {classNames} from '@/helpers';
+import {clx} from 'beeftools';
 
 export interface DragHandleProps {
   invert?: boolean;
@@ -9,7 +9,7 @@ defineProps<DragHandleProps>();
 </script>
 
 <template>
-  <div :class="classNames('DragHandle', {invert})">
+  <div :class="clx('DragHandle', {invert})">
     <div class="Column">
       <div class="Dot" />
     </div>

diff --git a/app/website/src/components/IconAction.vue b/app/website/src/components/IconAction.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {classNames} from '@/helpers';
+import {clx} from 'beeftools';
 import {
   MotionFadeScale,
   SquareAction,
@@ -29,7 +29,7 @@ defineEmits<IconActionEmits>();
 <template>
   <SquareAction
     :classes="
-      classNames('IconAction', {
+      clx('IconAction', {
         hasLabel: label?.length,
         disabled,
         filledLabel,

diff --git a/app/website/src/components/MuteBar.vue b/app/website/src/components/MuteBar.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import {computed} from 'vue';
-import {arrayOfLength} from '@earwurm/utilities';
-import {classNames} from '@/helpers';
+import {arrayOfLength, clx} from 'beeftools';
 
 export interface MuteBarProps {
   count?: number;
@@ -16,7 +15,7 @@ const barItems = computed(() => arrayOfLength(Math.max(count + 1, 1)));
 </script>
 
 <template>
-  <ul :class="classNames('MuteBar', {collapsed})">
+  <ul :class="clx('MuteBar', {collapsed})">
     <li v-for="bar in barItems" :key="`MuteBar-Item-${bar}`" class="Item" />
   </ul>
 </template>

diff --git a/app/website/src/components/SpeedSlider.vue b/app/website/src/components/SpeedSlider.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import {computed} from 'vue';
+import {calcProgress, clx} from 'beeftools';
 import {tokens} from 'earwurm';
-import {calcProgress} from '@earwurm/utilities';
 
-import {classNames} from '@/helpers';
 import {InputRange, type InputRangeProps} from '@/primitives';
 import {MuteBar} from '@/components';
 
@@ -37,7 +36,7 @@ const stripes = computed(() => {
 
 <template>
   <div
-    :class="classNames('SpeedSlider', {disabled})"
+    :class="clx('SpeedSlider', {disabled})"
     :style="{'--slider-progress': progress}"
   >
     <div class="BackgroundStripes">

diff --git a/app/website/src/components/StackLabel.vue b/app/website/src/components/StackLabel.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {classNames} from '@/helpers';
+import {clx} from 'beeftools';
 
 export interface StackLabelProps {
   label: string;
@@ -11,8 +11,8 @@ defineProps<StackLabelProps>();
 </script>
 
 <template>
-  <div :class="classNames('StackLabel', {populated})">
-    <p :class="classNames('Text', {truncate})">{{ label }}</p>
+  <div :class="clx('StackLabel', {populated})">
+    <p :class="clx('Text', {truncate})">{{ label }}</p>
   </div>
 </template>
 

diff --git a/app/website/src/components/VolumeManager.vue b/app/website/src/components/VolumeManager.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import {computed} from 'vue';
-import {calcProgress} from '@earwurm/utilities';
+import {calcProgress, clx} from 'beeftools';
 
-import {classNames} from '@/helpers';
 import {InputRange, type InputRangeProps} from '@/primitives';
 import {DragHandle, MuteBar} from '@/components';
 
@@ -27,7 +26,7 @@ const progress = computed(() => {
 
 <template>
   <div class="VolumeManager" :style="{'--slider-progress': progress}">
-    <div :class="classNames('MuteBarWrapper', {show: disabled})">
+    <div :class="clx('MuteBarWrapper', {show: disabled})">
       <MuteBar :count="MUTE_BAR_COUNT" />
     </div>
 

diff --git a/app/website/src/components/VolumeSound.vue b/app/website/src/components/VolumeSound.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import {computed, ref} from 'vue';
-import {arrayOfLength, clamp, roundNumber} from '@earwurm/utilities';
+import {arrayOfLength, clamp, clx, roundNumber} from 'beeftools';
 
-import {classNames} from '@/helpers';
 import {MuteBar} from '@/components';
 
 export interface VolumeSoundProps {
@@ -52,8 +51,8 @@ function handleChange(volume: number) {
 </script>
 
 <template>
-  <div :class="classNames('VolumeSound', {disabled})">
-    <div :class="classNames('MuteBarWrapper', {show: disabled})">
+  <div :class="clx('VolumeSound', {disabled})">
+    <div :class="clx('MuteBarWrapper', {show: disabled})">
       <MuteBar :count="TICK_LENGTH" />
     </div>
 
@@ -66,7 +65,7 @@ function handleChange(volume: number) {
         <button
           type="button"
           :class="
-            classNames(
+            clx(
               'Action',
               interactIndex !== undefined
                 ? {

diff --git a/app/website/src/components/VolumeStack.vue b/app/website/src/components/VolumeStack.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import {computed} from 'vue';
-
-import {calcProgress} from '@earwurm/utilities';
+import {calcProgress} from 'beeftools';
 
 import {InputRange, type InputRangeProps} from '@/primitives';
 import {MuteBar} from '@/components';

diff --git a/app/website/src/helpers/classNames.ts b/app/website/src/helpers/classNames.ts
diff --git a/app/website/src/helpers/index.ts b/app/website/src/helpers/index.ts
@@ -1,5 +1,2 @@
 export {assertSynthType, assertSynthValues, filterSynthValues} from './app';
-
-export {classNames, variationName} from './classNames';
-
 export {toValue, tryOnScopeDispose} from './vue';
diff --git a/app/website/src/hooks/useMediaQuery.ts b/app/website/src/hooks/useMediaQuery.ts
@@ -1,5 +1,5 @@
 import {ref, watchEffect} from 'vue';
-import {supportMatchMedia} from '@earwurm/utilities';
+import {supportMatchMedia} from 'beeftools';
 
 import type {MaybeRefOrGetter} from '@/types';
 import {toValue, tryOnScopeDispose} from '@/helpers';

diff --git a/app/website/src/hooks/useMetronome.ts b/app/website/src/hooks/useMetronome.ts
@@ -1,5 +1,5 @@
 import {computed, ref} from 'vue';
-import {clamp} from '@earwurm/utilities';
+import {clamp} from 'beeftools';
 
 // TODO: `volume` range may actually need to be `0-100`.
 const INITIAL_VOLUME = 1;

diff --git a/app/website/src/primitives/ProgressBar.vue b/app/website/src/primitives/ProgressBar.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import {computed} from 'vue';
-import {clamp, calcProgress} from '@earwurm/utilities';
-import {classNames} from '@/helpers';
+import {calcProgress, clamp, clx} from 'beeftools';
 
 export interface ProgressBarProps {
   id: string;
@@ -19,7 +18,7 @@ const progress = computed(() => calcProgress(value, {min, max, round: true}));
 <template>
   <div
     :class="
-      classNames('ProgressBar', 'pattern-diagonal', {
+      clx('ProgressBar', 'pattern-diagonal', {
         'pattern-diagonal--animated': speed,
         disabled,
       })

diff --git a/app/website/src/primitives/SquareAction.vue b/app/website/src/primitives/SquareAction.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {classNames} from '@/helpers';
+import {clx} from 'beeftools';
 
 export interface SquareActionProps {
   classes?: string;
@@ -24,7 +24,7 @@ defineEmits<SquareActionEmits>();
   <a
     v-if="url?.length"
     :href="url"
-    :class="classNames('SquareAction', 'link', {disabled}, classes)"
+    :class="clx('SquareAction', 'link', {disabled}, classes)"
     :target="external ? '_blank' : undefined"
     :rel="external ? 'noopener noreferrer' : undefined"
   >
@@ -34,7 +34,7 @@ defineEmits<SquareActionEmits>();
   <button
     v-else
     type="button"
-    :class="classNames('SquareAction', 'button', classes)"
+    :class="clx('SquareAction', 'button', classes)"
     :aria-label="a11y"
     :aria-pressed="pressed ? true : undefined"
     :disabled="disabled"

diff --git a/app/website/src/store/useDebugManager.ts b/app/website/src/store/useDebugManager.ts
@@ -8,7 +8,7 @@ type ErrorResponse = Parameters<ManagerEventMap['error']>[0];
 const MAX_HISTORY_LENGTH = 44;
 
 // TODO: Consider enabling a auto-suspension option.
-// import {clamp, timeMeasurement} from '@earwurm/utilities';
+// import {clamp, timeMeasurement} from 'beeftools';
 // const safeAutoSuspend = clamp(0, autoSuspend, timeMeasurement.msPerMin);
 
 const {manager, activeStacks} = useEarwurmStore();