refactor: classnames (#5857)

* refactor: classnames

* feat: classname wip

* feat: clean classnames

Author: lisalupi

.changeset/funny-steaks-prove.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/themes": patch
+---
+
+New function `cn` to generate clean classnames

.changeset/great-symbols-burn.md

@@ -0,0 +1,9 @@
+---
+"@ultraviolet/illustrations": patch
+"@ultraviolet/icons": patch
+"@ultraviolet/form": patch
+"@ultraviolet/plus": patch
+"@ultraviolet/ui": patch
+---
+
+Use `cn` function to generate clean classnames

examples/next-app-router/tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -11,22 +15,27 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {
         "name": "next"
       }
     ],
     "paths": {
-      "@/*": ["./*"]
+      "@/*": [
+        "./*"
+      ]
     }
   },
   "include": [
     "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx",
     ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
   ],
-  "exclude": ["node_modules"]
+  "exclude": [
+    "node_modules"
+  ]
 }

packages/form/src/components/DateInputField/__tests__/__snapshots__/index.test.tsx.snap

@@ -61,7 +61,7 @@ exports[`dateInputField > should clear field 1`] = `
             </div>
           </div>
           <div
-            class="uv_705z6f0 uv_9rlyg91 uv_w40vpo4 null"
+            class="uv_705z6f0 uv_9rlyg91 uv_w40vpo4"
             id="_r_3k_"
             role="dialog"
             style="--uv_ozfz3c0: -5px; --uv_ozfz3c1: 0px; --uv_ozfz3c2:  rotate(180deg); --uv_ozfz3c4: translate3d(0px, 4px, 0); --uv_ozfz3c5: 0ms; --uv_ozfz3c6: translate3d(0px, 4px, 0); --uv_ozfz3c7: 16.5rem; opacity: 1;"

packages/form/src/components/SelectInputField/__tests__/__snapshots__/index.test.tsx.snap

@@ -57,7 +57,7 @@ exports[`selectInputField > should display right value on grouped options 1`] =
             </div>
           </div>
           <div
-            class="uv_5kpm8k0 uv_w40vpo4 null"
+            class="uv_5kpm8k0 uv_w40vpo4"
             id="_r_l_"
             role="dialog"
             style="--uv_ozfz3c0: -5px; --uv_ozfz3c1: 0px; --uv_ozfz3c2:  rotate(180deg); --uv_ozfz3c4: translate3d(0px, 4px, 0); --uv_ozfz3c5: 0ms; --uv_ozfz3c6: translate3d(0px, 4px, 0); --uv_ozfz3c7: 100%; opacity: 1;"
@@ -81,7 +81,7 @@ exports[`selectInputField > should display right value on grouped options 1`] =
                       class="uv_5kpm8k5"
                     >
                       <button
-                        class=" uv_5kpm8k3"
+                        class="uv_5kpm8k3"
                         data-selectgroup="false"
                         data-testid="group-0"
                         role="group"
@@ -219,7 +219,7 @@ exports[`selectInputField > should display right value on grouped options 1`] =
                       class="uv_5kpm8k5"
                     >
                       <button
-                        class=" uv_5kpm8k3"
+                        class="uv_5kpm8k3"
                         data-selectgroup="false"
                         data-testid="group-1"
                         role="group"

packages/form/src/components/SelectableCardOptionGroupField/__tests__/__snapshots__/index.test.tsx.snap

@@ -118,7 +118,7 @@ exports[`selectableCardOptionGroupField > should render correctly 1`] = `
                     </div>
                     <div
                       aria-label="selectable-card-option"
-                      class="uv_12n1yvr4   uv_uf6pag0"
+                      class="uv_12n1yvr4 uv_uf6pag0"
                     >
                       <div
                         aria-controls="_r_7_"
@@ -258,7 +258,7 @@ exports[`selectableCardOptionGroupField > should render correctly 1`] = `
                     </div>
                     <div
                       aria-label="selectable-card-option"
-                      class="uv_12n1yvr4   uv_uf6pag0"
+                      class="uv_12n1yvr4 uv_uf6pag0"
                     >
                       <div
                         aria-controls="_r_h_"
@@ -398,7 +398,7 @@ exports[`selectableCardOptionGroupField > should render correctly 1`] = `
                     </div>
                     <div
                       aria-label="selectable-card-option"
-                      class="uv_12n1yvr4   uv_uf6pag0"
+                      class="uv_12n1yvr4 uv_uf6pag0"
                     >
                       <div
                         aria-controls="_r_r_"

packages/form/src/components/UnitInputField/__tests__/__snapshots__/index.test.tsx.snap

@@ -28,7 +28,7 @@ exports[`unitInputField > should handles onChange and selection 1`] = `
           </span>
         </div>
         <div
-          class="uv_gwf0fle uv_gwf0fla uv_gwf0fl5 uv_x6hyh50 "
+          class="uv_gwf0fle uv_gwf0fla uv_gwf0fl5 uv_x6hyh50"
           style="--uv_3mg8xe0: 1fr auto; --uv_3mg8xe1: 1fr auto; --uv_3mg8xe2: 1fr auto; --uv_3mg8xe3: 1fr auto; --uv_3mg8xe4: 1fr auto; --uv_3mg8xe5: 1fr auto;"
         >
           <div
@@ -131,7 +131,7 @@ exports[`unitInputField > should render correctly 1`] = `
           Test
         </label>
         <div
-          class="uv_gwf0fle uv_gwf0fla uv_gwf0fl5 uv_x6hyh50 "
+          class="uv_gwf0fle uv_gwf0fla uv_gwf0fl5 uv_x6hyh50"
           style="--uv_3mg8xe0: 1fr auto; --uv_3mg8xe1: 1fr auto; --uv_3mg8xe2: 1fr auto; --uv_3mg8xe3: 1fr auto; --uv_3mg8xe4: 1fr auto; --uv_3mg8xe5: 1fr auto;"
         >
           <div

packages/icons/src/components/CategoryIcon/Icon.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { cn } from '@ultraviolet/themes'
 import type { CSSProperties, ReactNode } from 'react'
 import type { VARIANTS } from './style.css'
 import { categoryIcon } from './style.css'
@@ -27,7 +28,7 @@ export const Icon = ({
 
   return (
     <svg
-      className={`${className ? `${className} ` : ''}${categoryIcon[computedVariant]}`}
+      className={cn(className, categoryIcon[computedVariant])}
       height="20"
       style={style}
       viewBox="0 0 20 20"

packages/icons/src/components/Flags/Icon.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { cn } from '@ultraviolet/themes'
 import type { ReactNode } from 'react'
 import type { SIZES } from './constant'
 import { flag } from './style.css'
@@ -15,10 +16,7 @@ export type IconProps = {
  * Logo component is used to render a set of flags. Their style cannot be changed
  */
 export const Icon = ({ size = 'medium', className, children }: IconProps) => (
-  <svg
-    className={`${className ? `${className} ` : ''}${flag[size]}`}
-    viewBox="0 0 24 24"
-  >
+  <svg className={cn(className, flag[size])} viewBox="0 0 24 24">
     {children}
   </svg>
 )

packages/icons/src/components/Icon/Icon.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { cn } from '@ultraviolet/themes'
 import type { ReactNode, SVGProps } from 'react'
 import { forwardRef } from 'react'
 import type { PROMINENCES, SENTIMENTS, SIZES } from './constants'
@@ -47,7 +48,7 @@ export const Icon = forwardRef<SVGSVGElement, IconProps>(
   ) => (
     <svg
       aria-label={ariaLabel}
-      className={`${className ? `${className} ` : ''}${icon({ disabled, prominence, sentiment, size })}`}
+      className={cn(className, icon({ disabled, prominence, sentiment, size }))}
       cursor={cursor}
       data-testid={dataTestId}
       ref={ref}