Fix cn when strict: true

.changeset/odd-waves-judge.md

@@ -0,0 +1,5 @@
+---
+"@udecode/react-utils": patch
+---
+
+Fix `withRef` component type error in strict mode

.changeset/witty-ways-tickle.md

@@ -0,0 +1,5 @@
+---
+"@udecode/cn": patch
+---
+
+Fix `withCn`, `withProps` and `withVariants` component type errors in strict mode

apps/www/src/app/_components/installation-tab.tsx

@@ -13,14 +13,20 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from '@/components/ui/accordion';
-import { settingsStore } from '@/components/context/settings-store';
+import {
+  settingsStore,
+  SettingsStoreValue,
+} from '@/components/context/settings-store';
 import { Link } from '@/components/link';
 import * as Typography from '@/components/typography';
 import { H2, Step, Steps } from '@/components/typography';
 
 import { InstallationCode } from './installation-code';
 
-function getEditorCodeGeneratorResult({ checkedPlugins, checkedComponents }) {
+function getEditorCodeGeneratorResult({
+  checkedPlugins,
+  checkedComponents,
+}: Pick<SettingsStoreValue, 'checkedPlugins' | 'checkedComponents'>) {
   const plugins = allPlugins.filter((plugin) => {
     return checkedPlugins[plugin.id];
   });
@@ -221,6 +227,7 @@ export default function InstallationTab() {
       ...componentImportsGroup,
     ].join('\n');
   }, [
+    cnImports,
     componentImports,
     customImports,
     groupedImportsByPackage,

apps/www/src/components/badge-popover.tsx

@@ -3,7 +3,7 @@ import React, { ReactNode } from 'react';
 import { Badge } from './ui/badge';
 import { HoverCard, HoverCardContent, HoverCardTrigger } from './ui/hover-card';
 
-export function BadgeList({ children }) {
+export function BadgeList({ children }: { children: ReactNode }) {
   return <div className="flex gap-2">{children}</div>;
 }
 

apps/www/src/components/context/providers.tsx

@@ -4,7 +4,7 @@ import { TooltipProvider } from '@/registry/default/plate-ui/tooltip';
 
 import { ThemeProvider } from './theme-provider';
 
-export function Providers({ children }) {
+export function Providers({ children }: { children: React.ReactNode }) {
   return (
     <ThemeProvider
       attribute="class"

apps/www/src/components/context/settings-store.ts

@@ -5,7 +5,7 @@ import { toast } from 'sonner';
 
 import { customizerItems, SettingPlugin } from '@/config/customizer-items';
 import { customizerList } from '@/config/customizer-list';
-import { customizerPlugins } from '@/config/customizer-plugins';
+import { customizerPlugins, ValueId } from '@/config/customizer-plugins';
 
 export const categoryIds = customizerList.map((item) => item.id);
 
@@ -40,21 +40,35 @@ export const getDefaultCheckedComponents = () => {
   } as Record<string, boolean>;
 };
 
-export const settingsStore = createZustandStore('settings')({
+export type SettingsStoreValue = {
+  showSettings: boolean;
+  loadingSettings: boolean;
+  showComponents: boolean;
+  homeTab: string;
+  customizerTab: string;
+  valueId: ValueId;
+  checkedPluginsNext: Record<string, boolean>;
+  checkedPlugins: Record<string, boolean>;
+  checkedComponents: Record<string, boolean>;
+};
+
+const initialState: SettingsStoreValue = {
   showSettings: false,
   loadingSettings: true,
   showComponents: true,
   homeTab: 'playground',
   // homeTab: 'installation',
   customizerTab: 'plugins',
 
-  valueId: customizerPlugins.playground.id,
+  valueId: customizerPlugins.playground.id as ValueId,
 
   checkedPluginsNext: getDefaultCheckedPlugins(),
 
   checkedPlugins: getDefaultCheckedPlugins(),
   checkedComponents: getDefaultCheckedComponents(),
-})
+};
+
+export const settingsStore = createZustandStore('settings')(initialState)
   .extendActions((set) => ({
     resetPlugins: ({
       exclude,

apps/www/src/components/counting-numbers.tsx

@@ -50,6 +50,16 @@ export const useCounting = ({
   return number;
 };
 
+export interface CountingNumbersProps {
+  value: number;
+  className?: string;
+  reverse?: boolean;
+  start?: number;
+  interval?: number;
+  duration?: number;
+  noAnimation?: boolean;
+}
+
 export function CountingNumbers({
   value,
   className,
@@ -58,7 +68,7 @@ export function CountingNumbers({
   interval = 10,
   duration = 800,
   noAnimation,
-}) {
+}: CountingNumbersProps) {
   const ref = useRef(null);
 
   let number = value;

apps/www/src/components/plate-ui/playground-mode-dropdown-menu.tsx

@@ -24,9 +24,6 @@ export function PlaygroundModeDropdownMenu(props: DropdownMenuProps) {
   const readOnly = useEditorReadOnly();
   const openState = useOpenState();
 
-  let value = 'editing';
-  if (readOnly) value = 'viewing';
-
   const item = {
     editing: (
       <>
@@ -48,6 +45,9 @@ export function PlaygroundModeDropdownMenu(props: DropdownMenuProps) {
     ),
   };
 
+  let value: keyof typeof item = 'editing';
+  if (readOnly) value = 'viewing';
+
   return (
     <DropdownMenu modal={false} {...openState} {...props}>
       <DropdownMenuTrigger asChild>

apps/www/src/components/settings-combobox.tsx

@@ -4,7 +4,7 @@ import { cn } from '@udecode/cn';
 import { Check } from 'lucide-react';
 
 import { customizerItems, SettingPlugin } from '@/config/customizer-items';
-import { customizerPlugins } from '@/config/customizer-plugins';
+import { customizerPlugins, ValueId } from '@/config/customizer-plugins';
 import { useFixHydration } from '@/hooks/use-fix-hydration';
 import { Button, buttonVariants } from '@/registry/default/plate-ui/button';
 import {
@@ -76,7 +76,7 @@ export function SettingsCombobox() {
 
   const loaded = useFixHydration();
 
-  const route = customizerPlugins[valueId]?.route;
+  const route: string | undefined = (customizerPlugins as any)[valueId]?.route;
 
   return (
     <>
@@ -95,7 +95,8 @@ export function SettingsCombobox() {
                 }, 0);
               }}
             >
-              {customizerPlugins[valueId]?.label ?? 'Select a value...'}
+              {(customizerPlugins as any)[valueId]?.label ??
+                'Select a value...'}
               <Icons.chevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
             </Button>
           )}
@@ -114,10 +115,10 @@ export function SettingsCombobox() {
                         key={item.id}
                         value={item.id}
                         onSelect={(newId) => {
-                          settingsStore.set.valueId(newId);
+                          settingsStore.set.valueId(newId as ValueId);
 
-                          const valuePlugins =
-                            customizerPlugins[newId]?.plugins ?? [];
+                          const valuePlugins: string[] =
+                            (customizerPlugins as any)[newId]?.plugins ?? [];
 
                           valuePlugins.forEach((pluginKey) => {
                             const deps = (

apps/www/src/config/doc-to-package.ts

@@ -38,10 +38,11 @@ const plateOverrides = {
 };
 
 export const docToPackage = (name?: string) => {
-  if (name && plateOverrides[name]) {
+  if (name && name in plateOverrides) {
+    const packageName: string = (plateOverrides as any)[name];
     return {
-      name: plateOverrides[name],
-      sourcePath: plateOverrides[name].replace('plate-', ''),
+      name: packageName,
+      sourcePath: packageName.replace('plate-', ''),
     };
   }
 };

apps/www/src/lib/bundlephobia.ts

@@ -1,6 +1,6 @@
 import fetch from 'node-fetch';
 
-export function formatBytes(bytes, decimals = 2) {
+export function formatBytes(bytes: number, decimals = 2) {
   if (bytes === 0) return '0 Bytes';
   const k = 1024;
   const dm = decimals < 0 ? 0 : decimals;
@@ -11,7 +11,7 @@ export function formatBytes(bytes, decimals = 2) {
   );
 }
 
-export async function getPackageData(name) {
+export async function getPackageData(name: string) {
   // export async function getPackageData(name, version) {
   const bundlephobiaResponse = await fetch(
     // `https://bundlephobia.com/api/size?package=@udecode/${name}@${version}`

apps/www/src/lib/plate/demo/mapNodeId.ts

@@ -1,5 +1,5 @@
 const cleanNode = (nodes: any) => {
-  nodes.forEach((node) => {
+  nodes.forEach((node: any) => {
     delete node.__source;
     delete node.__self;
 

apps/www/src/lib/plate/demo/serializing-html/formatHTML.ts

@@ -16,7 +16,7 @@ export const formatHTML = (html: string) => {
       const tag = new RegExp(`<\\/?([^\\s/>]+)`).exec(x)?.[1];
       const p = new RegExp('<--TEMPPRE(\\d+)/-->').exec(x);
 
-      if (p) pre[p[1]].indent = indent;
+      if (p) pre[Number(p[1])].indent = indent;
 
       if (
         [

apps/www/src/lib/plate/demo/values/usePlaygroundValue.ts

@@ -53,11 +53,7 @@ export const usePlaygroundValue = (id?: ValueId) => {
     }
 
     if (valueId !== customizerPlugins.playground.id) {
-      const newValue = customizerPlugins[valueId]?.value ?? [];
-
-      if (newValue.length === 0) {
-        return mapNodeId(value);
-      }
+      const newValue = (customizerPlugins as any)[valueId]?.value ?? value;
       return mapNodeId(newValue);
     }
 

apps/www/src/registry/default/example/hundreds-blocks-demo.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useMemo, useState } from 'react';
 import { editableProps } from '@/plate/demo/editableProps';
 import { basicNodesPlugins } from '@/plate/demo/plugins/basicNodesPlugins';
 import { createHugeDocumentValue } from '@/plate/demo/values/createHugeDocumentValue';
-import { Plate, TElement } from '@udecode/plate-common';
+import { Plate, TElement, Value } from '@udecode/plate-common';
 import { createEditor } from 'slate';
 import {
   Editable,
@@ -37,15 +37,12 @@ function Element({ attributes, children, element }: RenderElementProps) {
 
 function WithoutPlate() {
   const [value, setValue] = useState(initialValue);
-  const renderElement = useCallback((p) => <Element {...p} />, []);
+  const renderElement = useCallback((p: any) => <Element {...p} />, []);
   const editor = useMemo(() => withReact(createEditor() as ReactEditor), []);
+  const onChange = useCallback((newValue: Value) => setValue(newValue), []);
 
   return (
-    <Slate
-      editor={editor}
-      initialValue={value}
-      onChange={useCallback((v) => setValue(v), [])}
-    >
+    <Slate editor={editor} initialValue={value} onChange={onChange as any}>
       <Editable renderElement={renderElement} {...(editableProps as any)} />
     </Slate>
   );

apps/www/tsconfig.json

@@ -4,7 +4,7 @@
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
-    "strict": false,
+    "strict": true,
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
     "esModuleInterop": true,

packages/cn/src/withCn.tsx

@@ -9,7 +9,7 @@ import { withProps } from './withProps';
  * - IntelliSense: add `withCn` to `classAttributes`
  * - ESLint: add `withCn` to `settings.tailwindcss.callees`
  */
-export function withCn<T extends React.ComponentType<object>>(
+export function withCn<T extends React.ComponentType<any>>(
   Component: T,
   ...inputs: CxOptions
 ) {

packages/cn/src/withProps.tsx

@@ -7,7 +7,7 @@ import { cn } from './cn';
  * - Use `withCn` if only setting `className`
  */
 export function withProps<
-  T extends keyof HTMLElementTagNameMap | React.ComponentType<object>,
+  T extends keyof HTMLElementTagNameMap | React.ComponentType<any>,
 >(Component: T, defaultProps: Partial<React.ComponentPropsWithoutRef<T>>) {
   const ComponentWithClassName = Component as React.FC<{ className: string }>;
 

packages/cn/src/withVariants.tsx

@@ -10,7 +10,7 @@ import { cn } from './cn';
  * @param onlyVariantsProps - Props to exclude from `Component`. Set the props that are only used for variants.
  */
 export function withVariants<
-  T extends keyof HTMLElementTagNameMap | React.ComponentType<object>,
+  T extends keyof HTMLElementTagNameMap | React.ComponentType<any>,
   V extends ReturnType<typeof cva>,
 >(Component: T, variants: V, onlyVariantsProps?: (keyof VariantProps<V>)[]) {
   const ComponentWithClassName = Component as React.FC<{ className: string }>;

packages/react-utils/src/withRef.tsx

@@ -6,7 +6,7 @@ import React from 'react';
  * @generic2 Extended prop types
  */
 export function withRef<
-  T extends keyof HTMLElementTagNameMap | React.ComponentType<object>,
+  T extends keyof HTMLElementTagNameMap | React.ComponentType<any>,
   E = {},
 >(
   renderFunction: React.ForwardRefRenderFunction<