Renamed cn utility class to cls.

Still in the code with a deprecation warning.

Author: fgatti675

examples/example_cloud/src/custom_entity_view/ProductDetailPreview.tsx

@@ -2,7 +2,7 @@ import {
     AddIcon,
     Button,
     CenteredView,
-    cn,
+    cls,
     defaultBorderMixin,
     Label,
     RadioGroup,
@@ -45,7 +45,7 @@ export function ProductDetailPreview({
                         {product.images?.map((image, index) => (
                             <button
                                 onClick={() => setSelectedImage(image)}
-                                className={cn("border hover:border-gray-900 rounded-lg overflow-hidden transition-colors dark:hover:border-gray-50", defaultBorderMixin)}>
+                                className={cls("border hover:border-gray-900 rounded-lg overflow-hidden transition-colors dark:hover:border-gray-50", defaultBorderMixin)}>
                                 <StorageImage storagePath={image}
                                               className="aspect-[5/6] object-contain bg-white"
                                               style={{

examples/example_cloud/src/custom_entity_view/components/StorageImage.tsx

@@ -1,5 +1,5 @@
 import { useStorageSource } from "@firecms/core";
-import { cn } from "@firecms/cloud";
+import { cls } from "@firecms/cloud";
 import { useEffect, useState } from "react";
 
 export function StorageImage({ storagePath, style, className, alt }: {
@@ -23,7 +23,7 @@ export function StorageImage({ storagePath, style, className, alt }: {
 
     return (<img
         alt={alt ?? "Generic"}
-        className={cn("object-contain", className)}
+        className={cls("object-contain", className)}
         style={{
             ...style
         }} src={url}/>);

examples/example_pro/src/FirestoreApp/BoardView/QuoteItem.tsx

@@ -2,7 +2,7 @@ import React, { CSSProperties, FC } from "react";
 import { DraggableProvided } from "@hello-pangea/dnd";
 import type { ItemViewProps } from "./components/types";
 import { Quote } from "./data";
-import { cn, defaultBorderMixin } from "@firecms/ui";
+import { cls, defaultBorderMixin } from "@firecms/ui";
 
 const getBackgroundColor = (
     isDragging: boolean,
@@ -47,7 +47,7 @@ const QuoteItemView: FC<ItemViewProps<Quote>> = ({
         data-index={index}
         aria-label={`${item.content.author}`}
     >
-        <div className={cn(
+        <div className={cls(
             "p-2 items-start flex border rounded-lg",
             defaultBorderMixin,
             getBorderColor(isDragging),

examples/example_pro/src/FirestoreApp/BoardView/components/Board.tsx

@@ -4,7 +4,7 @@ import { DragDropContext, Droppable } from "@hello-pangea/dnd";
 import Column from "./Column";
 import reorder, { reorderItemMap } from "./reorder";
 import { Item, ItemMap, ItemViewProps } from "./types";
-import { cn } from "@firecms/ui";
+import { cls } from "@firecms/ui";
 
 export interface BoardProps<T extends object, COLUMN extends string> {
     data: Item<T>[];
@@ -105,7 +105,7 @@ export const Board = <T extends object, COLUMN extends string>({
             {(provided: DroppableProvided) => (
                 <div ref={provided.innerRef}
                      {...provided.droppableProps}
-                     className={cn("md:p-4 h-full min-w-full inline-flex", className)}>
+                     className={cls("md:p-4 h-full min-w-full inline-flex", className)}>
                     {ordered.map((key: string, index: number) => (
                         <Column key={key}
                                 index={index}

examples/example_pro/src/FirestoreApp/BoardView/components/Column.tsx

@@ -4,7 +4,7 @@ import { Draggable } from "@hello-pangea/dnd";
 import SortableList from "./SortableList";
 import { ColumnTitle } from "./ColumnTitle";
 import type { Item } from "./types";
-import { cn, defaultBorderMixin } from "@firecms/ui";
+import { cls, defaultBorderMixin } from "@firecms/ui";
 
 interface ColumnProps {
     title: string;
@@ -30,7 +30,7 @@ export default class Column extends Component<ColumnProps> {
                 {(provided: DraggableProvided, snapshot: DraggableStateSnapshot) => (
                     <div ref={provided.innerRef}
                          {...provided.draggableProps}
-                         className={cn("border h-full w-80 m-2 flex flex-col",
+                         className={cls("border h-full w-80 m-2 flex flex-col",
                              "rounded-md",
                              defaultBorderMixin,
                              snapshot.isDragging ? "ring-2 ring-primary" : "",)}>

examples/example_pro/src/FirestoreApp/BoardView/components/ColumnTitle.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@firecms/ui";
+import { cls } from "@firecms/ui";
 import React from "react";
 
 export const ColumnTitle = ({
@@ -9,7 +9,7 @@ export const ColumnTitle = ({
     return (
         <h4
             className={
-                cn("py-2 px-4 transition-colors duration-200 flex-grow select-none relative outline-none focus:outline focus:outline-2 focus:outline-offset-2",
+                cls("py-2 px-4 transition-colors duration-200 flex-grow select-none relative outline-none focus:outline focus:outline-2 focus:outline-offset-2",
                     "text-sm font-semibold text-gray-800 dark:text-gray-200",
                     className)
             }

examples/example_pro/src/FirestoreApp/BoardView/components/SortableList.tsx

@@ -6,7 +6,7 @@ import type {
     DroppableStateSnapshot
 } from "@hello-pangea/dnd";
 import { Draggable, Droppable } from "@hello-pangea/dnd";
-import { cn } from "@firecms/ui";
+import { cls } from "@firecms/ui";
 import { ColumnTitle } from "./ColumnTitle";
 import type { Item, ItemViewProps } from "./types";
 
@@ -80,7 +80,7 @@ function InnerList<T extends object>(props: InnerListProps<T>) {
             {title}
 
             <div ref={dropProvided.innerRef}
-                 className={cn("min-h-full pb-4",)}>
+                 className={cls("min-h-full pb-4",)}>
                 <InnerItemListMemo items={items}
                                    ItemComponent={ItemComponent}
                 />
@@ -133,7 +133,7 @@ export default function SortableList(props: SortableListProps): ReactElement {
                     style={style}
                     // isDropDisabled={Boolean(isDropDisabled)}
                     {...dropProvided.droppableProps}
-                    className={cn("flex flex-col p-4 transition-opacity duration-100 transition-bg ease-linear w-64",
+                    className={cls("flex flex-col p-4 transition-opacity duration-100 transition-bg ease-linear w-64",
                         "h-full w-full overflow-y-auto flex-1",
                         "rounded-md",
                         isDropDisabled ? "opacity-50" : "opacity-100",

examples/example_pro/src/FirestoreApp/custom_entity_view/ProductDetailPreview.tsx

@@ -2,7 +2,7 @@ import {
     AddIcon,
     Button,
     CenteredView,
-    cn,
+    cls,
     defaultBorderMixin,
     Label,
     RadioGroup,
@@ -46,7 +46,7 @@ export function ProductDetailPreview({
                             <button
                                 key={`image_${index}`}
                                 onClick={() => setSelectedImage(image)}
-                                className={cn("border hover:border-gray-900 rounded-lg overflow-hidden transition-colors dark:hover:border-gray-50", defaultBorderMixin)}>
+                                className={cls("border hover:border-gray-900 rounded-lg overflow-hidden transition-colors dark:hover:border-gray-50", defaultBorderMixin)}>
                                 <StorageImage storagePath={image}
                                               className="aspect-[5/6] object-contain bg-white"
                                               style={{

examples/example_pro/src/FirestoreApp/custom_entity_view/components/StorageImage.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { useStorageSource } from "@firecms/core";
-import { cn } from "@firecms/ui";
+import { cls } from "@firecms/ui";
 
 export function StorageImage({ storagePath, style, className, alt }: {
     alt?: string,
@@ -23,7 +23,7 @@ export function StorageImage({ storagePath, style, className, alt }: {
 
     return (<img
         alt={alt ?? "Generic"}
-        className={cn("object-contain", className)}
+        className={cls("object-contain", className)}
         style={{
             ...style
         }} src={url}/>);

packages/cli/package.json

@@ -70,5 +70,5 @@
     "node_modules",
     "template/node_modules"
   ],
-  "gitHead": "54c0d79d2648c937d055bacab2d7d92fbd294c7b"
+  "gitHead": "8fb738b6abf384c0cba679f293b049a0ac56a7c2"
 }