From 1360b095be57bda205962fe04127855dc0325e9c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Sun, 11 Jun 2023 20:23:18 +0200
Subject: [PATCH] refactor: use classic for conditional classes

---
 apps/website/package.json                                  | 1 +
 apps/website/src/components/SplitText.svelte               | 6 +++++-
 apps/website/src/components/atoms/AboutGridPhoto.svelte    | 5 +++--
 apps/website/src/components/atoms/Button.svelte            | 5 +++--
 apps/website/src/components/atoms/ButtonCircle.svelte      | 6 ++++--
 apps/website/src/components/atoms/Icon.svelte              | 4 +++-
 apps/website/src/components/atoms/IconEarth.svelte         | 7 ++++++-
 apps/website/src/components/atoms/ScrollingTitle.svelte    | 5 +++--
 apps/website/src/components/molecules/Location.svelte      | 3 ++-
 apps/website/src/components/molecules/PostCard.svelte      | 5 +++--
 .../src/components/molecules/ShopLocationSwitcher.svelte   | 5 +++--
 pnpm-lock.yaml                                             | 7 +++++++
 12 files changed, 43 insertions(+), 16 deletions(-)

diff --git a/apps/website/package.json b/apps/website/package.json
index d1ae878..2002731 100644
--- a/apps/website/package.json
+++ b/apps/website/package.json
@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@studio-freight/lenis": "^1.0.14",
+    "classix": "^2.1.32",
     "dayjs": "^1.11.8",
     "embla-carousel": "^7.1.0",
     "focus-visible": "^5.2.0",
diff --git a/apps/website/src/components/SplitText.svelte b/apps/website/src/components/SplitText.svelte
index cc50ba7..1e8d185 100644
--- a/apps/website/src/components/SplitText.svelte
+++ b/apps/website/src/components/SplitText.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { cx } from 'classix'
     import { splitText } from 'utils/text'
 
     export let text: string
@@ -7,7 +8,10 @@
 
     $: split = splitText(text, mode)
 
-    const classes = ['text-split', $$props.class].join(' ').trim()
+    $: classes = cx(
+        'text-split',
+        $$props.class,
+    )
 </script>
 
 {#if clone}
diff --git a/apps/website/src/components/atoms/AboutGridPhoto.svelte b/apps/website/src/components/atoms/AboutGridPhoto.svelte
index 664e37f..283fce7 100644
--- a/apps/website/src/components/atoms/AboutGridPhoto.svelte
+++ b/apps/website/src/components/atoms/AboutGridPhoto.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { cx } from 'classix'
     import Image from './Image.svelte'
 
     export let id: string
@@ -8,11 +9,11 @@
     let hovering = false
     let timer: ReturnType<typeof setTimeout> | number = null
 
-    $: classes = [
+    $: classes = cx(
         hovering ? 'is-hovered' : undefined,
         disabled ? 'is-disabled' : undefined,
         $$props.class
-    ].join(' ').trim()
+    )
 
     // Hovering functions
     const handleMouseEnter = () => {
diff --git a/apps/website/src/components/atoms/Button.svelte b/apps/website/src/components/atoms/Button.svelte
index 262d361..24f5db1 100644
--- a/apps/website/src/components/atoms/Button.svelte
+++ b/apps/website/src/components/atoms/Button.svelte
@@ -3,6 +3,7 @@
 </style>
 
 <script lang="ts">
+    import { cx } from 'classix'
     import SplitText from '$components/SplitText.svelte'
 
     export let tag = 'a'
@@ -15,13 +16,13 @@
     export let slotPosition = 'before'
 
     const className = 'button'
-    const classes = [
+    $: classes = cx(
         className,
         effect ? effect : undefined,
         ...[color, size].map(variant => variant && `${className}--${variant}`),
         Object.keys($$slots).length !== 0 ? `has-icon-${slotPosition}` : undefined,
         $$props.class
-    ].join(' ').trim()
+    )
 
     // Define external links
     $: isExternal = /^(http|https):\/\//i.test(url)
diff --git a/apps/website/src/components/atoms/ButtonCircle.svelte b/apps/website/src/components/atoms/ButtonCircle.svelte
index 7307de7..827c3d0 100644
--- a/apps/website/src/components/atoms/ButtonCircle.svelte
+++ b/apps/website/src/components/atoms/ButtonCircle.svelte
@@ -3,6 +3,8 @@
 </style>
 
 <script lang="ts">
+    import { cx } from 'classix'
+
     export let tag = 'button'
     export let url: string = undefined
     export let color: string = undefined
@@ -13,12 +15,12 @@
     export let label: string = undefined
 
     const className = 'button-circle'
-    const classes = [
+    $: classes = cx(
         className,
         ...[color, size].map(variant => variant && `${className}--${variant}`),
         clone ? 'has-clone' : null,
         $$props.class
-    ].join(' ').trim()
+    )
 </script>
 
 {#if tag === 'a'}
diff --git a/apps/website/src/components/atoms/Icon.svelte b/apps/website/src/components/atoms/Icon.svelte
index f4bb6a4..c810948 100644
--- a/apps/website/src/components/atoms/Icon.svelte
+++ b/apps/website/src/components/atoms/Icon.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
+    import { cx } from 'classix'
+
     export let icon: string
     export let label: string = undefined
 
-    const classes = [$$props.class].join(' ').trim()
+    $: classes = cx($$props.class)
 </script>
 
 <svg class={classes} aria-label={label} width="32" height="32">
diff --git a/apps/website/src/components/atoms/IconEarth.svelte b/apps/website/src/components/atoms/IconEarth.svelte
index 6ccb07f..a5ff124 100644
--- a/apps/website/src/components/atoms/IconEarth.svelte
+++ b/apps/website/src/components/atoms/IconEarth.svelte
@@ -7,9 +7,14 @@
 </style>
 
 <script lang="ts">
+    import { cx } from 'classix'
+
     export let animate = false
 
-    const classes = ['icon-earth', $$props.class].join(' ').trim()
+    $: classes = cx(
+        'icon-earth',
+        $$props.class,
+    )
 </script>
 
 <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"
diff --git a/apps/website/src/components/atoms/ScrollingTitle.svelte b/apps/website/src/components/atoms/ScrollingTitle.svelte
index 741fc84..e862765 100644
--- a/apps/website/src/components/atoms/ScrollingTitle.svelte
+++ b/apps/website/src/components/atoms/ScrollingTitle.svelte
@@ -8,6 +8,7 @@
 </style>
 
 <script lang="ts">
+    import cx from 'classix'
     import { map } from 'utils/math'
     import reveal from '$animations/reveal'
 
@@ -39,11 +40,11 @@
         parallax = isLarger ? map(scrollY, offsetStart, offsetEnd, 0, -toTranslate, true) : 0
     }
 
-    const classes = [
+    $: classes = cx(
         'scrolling-title',
         'title-huge',
         $$props.class
-    ].join(' ').trim()
+    )
 
     const revealOptions = animate ? {
         children: '.char',
diff --git a/apps/website/src/components/molecules/Location.svelte b/apps/website/src/components/molecules/Location.svelte
index 449ef19..1d2a6f6 100644
--- a/apps/website/src/components/molecules/Location.svelte
+++ b/apps/website/src/components/molecules/Location.svelte
@@ -6,6 +6,7 @@
     import { getContext } from 'svelte'
     import { spring } from 'svelte/motion'
     import dayjs from 'dayjs'
+    import { cx } from 'classix'
     import { lerp } from 'utils/math'
     import { PUBLIC_PREVIEW_COUNT } from '$env/static/public'
     import { seenLocations } from '$utils/stores'
@@ -110,7 +111,7 @@
         <div class="location__photos">
             {#each location.photos as { image }, index}
                 {#if image}
-                    {@const classes = ['location__photo', index === photoIndex ? 'is-visible' : null].join(' ').trim()}
+                    {@const classes = cx('location__photo', index === photoIndex && 'is-visible')}
                     <Image
                         class={classes}
                         id={image.id}
diff --git a/apps/website/src/components/molecules/PostCard.svelte b/apps/website/src/components/molecules/PostCard.svelte
index 631d58a..3ad1452 100644
--- a/apps/website/src/components/molecules/PostCard.svelte
+++ b/apps/website/src/components/molecules/PostCard.svelte
@@ -3,6 +3,7 @@
 </style>
 
 <script lang="ts">
+    import { cx } from 'classix'
     import Image from '$components/atoms/Image.svelte'
 
     export let street: string
@@ -13,11 +14,11 @@
     export let size: string = undefined
 
     const className = 'postcard'
-    $: classes = [
+    $: classes = cx(
         className,
         ...[size].map(variant => variant && `${className}--${variant}`),
         $$props.class
-    ].join(' ').trim()
+    )
 </script>
 
 <div class={classes}>
diff --git a/apps/website/src/components/molecules/ShopLocationSwitcher.svelte b/apps/website/src/components/molecules/ShopLocationSwitcher.svelte
index f95a0f2..14803ff 100644
--- a/apps/website/src/components/molecules/ShopLocationSwitcher.svelte
+++ b/apps/website/src/components/molecules/ShopLocationSwitcher.svelte
@@ -5,6 +5,7 @@
 <script lang="ts">
     import { goto } from '$app/navigation'
     import { getContext, tick } from 'svelte'
+    import { cx } from 'classix'
     import { shopCurrentProductSlug } from '$utils/stores/shop'
     import { smoothScroll } from '$utils/stores'
 
@@ -12,11 +13,11 @@
 
     const { shopLocations }: any = getContext('shop')
 
-    const classes = [
+    const classes = cx(
         'shop-locationswitcher',
         isOver && 'is-over',
         $$props.class
-    ].join(' ').trim()
+    )
 
 
     // Quick location change
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 47f239c..7aa6fb4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -29,6 +29,9 @@ importers:
       '@studio-freight/lenis':
         specifier: ^1.0.14
         version: 1.0.14
+      classix:
+        specifier: ^2.1.32
+        version: 2.1.32
       dayjs:
         specifier: ^1.11.8
         version: 1.11.8
@@ -3940,6 +3943,10 @@ packages:
     resolution: {integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==}
     engines: {node: '>=10'}
 
+  /classix@2.1.32:
+    resolution: {integrity: sha512-E08TD9XlszvcuOzEQJnjQEibqQp6qJH5idbjh8l5pWDV2poJwk0Gexcra0ZdMITUuqAveHju4A9B/HKk1pk7sA==}
+    dev: false
+
   /clean-stack@2.2.0:
     resolution: {integrity: sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==}
     engines: {node: '>=6'}