✨ extend, create

.changeset/mean-taxis-tie.md

@@ -3,4 +3,5 @@
 ---
 
 - add support for custom tailwind prefix
+- add `extend` and `create` to `lib/utils.tsx`
 - minify build

apps/www/content/docs/components/changelog.mdx

@@ -10,6 +10,10 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver
 
 ## December 2023 #6
 
+### December 23 #6.2
+
+- add `extend` and `create` to `lib/utils.tsx`
+
 ### December 10 #6.1
 
 - `image-element`: wrap the component with `withHOC(ResizableProvide, ...)`

apps/www/src/lib/utils.tsx

@@ -0,0 +1,53 @@
+import {
+  createElement,
+  ElementRef,
+  forwardRef,
+  ForwardRefExoticComponent,
+} from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+import type { ClassValue } from 'clsx';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export function extend<T extends { className?: string }>(
+  Component: ForwardRefExoticComponent<T>,
+  defaultProps: T
+) {
+  return forwardRef<ElementRef<typeof Component>, T>(
+    function ExtendComponent(props, ref) {
+      return (
+        <Component
+          ref={ref}
+          {...defaultProps}
+          {...props}
+          className={cn(defaultProps.className, props.className)}
+        />
+      );
+    }
+  );
+}
+
+export function create<T extends keyof HTMLElementTagNameMap>(tag: T) {
+  return forwardRef<HTMLElementTagNameMap[T], JSX.IntrinsicElements[T]>(
+    function CreateComponent(props, ref) {
+      return createElement(tag, { ...props, ref });
+    }
+  );
+}
+
+export function formatDate(input: string | number): string {
+  const date = new Date(input);
+  return date.toLocaleDateString('en-US', {
+    month: 'long',
+    day: 'numeric',
+    year: 'numeric',
+  });
+}
+
+export function absoluteUrl(path: string) {
+  return `${process.env.NEXT_PUBLIC_APP_URL}${path}`;
+}

packages/cli/src/commands/init.ts

@@ -266,9 +266,9 @@ export async function runInit(cwd: string, config: Config) {
     );
   }
 
-  // Write cn file.
+  // Write utils file.
   await fs.writeFile(
-    `${config.resolvedPaths.utils}.ts`,
+    `${config.resolvedPaths.utils}.tsx`,
     templates.UTILS,
     'utf8'
   );

packages/cli/src/utils/templates.ts

@@ -1,9 +1,41 @@
-export const UTILS = `import { type ClassValue, clsx } from 'clsx'
+export const UTILS = `import {
+  createElement,
+  ElementRef,
+  forwardRef,
+  ForwardRefExoticComponent,
+} from 'react';
+import { type ClassValue, clsx } from 'clsx'
 import { twMerge } from 'tailwind-merge'
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
+
+export function extend<T extends { className?: string }>(
+  Component: ForwardRefExoticComponent<T>,
+  defaultProps: T
+) {
+  return forwardRef<ElementRef<typeof Component>, T>(
+    function ExtendComponent(props, ref) {
+      return (
+        <Component
+          ref={ref}
+          {...defaultProps}
+          {...props}
+          className={cn(defaultProps.className, props.className)}
+        />
+      );
+    }
+  );
+}
+
+export function create<T extends keyof HTMLElementTagNameMap>(tag: T) {
+  return forwardRef<HTMLElementTagNameMap[T], JSX.IntrinsicElements[T]>(
+    function CreateComponent(props, ref) {
+      return createElement(tag, { ...props, ref });
+    }
+  );
+}
 `;
 
 export const TAILWIND_CONFIG = `/** @type {import('tailwindcss').Config} */

packages/cli/test/commands/init.test.ts

@@ -68,7 +68,7 @@ test('init config-full', async () => {
   );
   expect(mockWriteFile).toHaveBeenNthCalledWith(
     3,
-    expect.stringMatching(/src\/lib\/utils.ts$/),
+    expect.stringMatching(/src\/lib\/utils.tsx$/),
     expect.stringContaining(`import { type ClassValue, clsx } from 'clsx'`),
     'utf8'
   );
@@ -138,7 +138,7 @@ test('init config-partial', async () => {
   );
   expect(mockWriteFile).toHaveBeenNthCalledWith(
     3,
-    expect.stringMatching(/utils.ts$/),
+    expect.stringMatching(/utils.tsx$/),
     expect.stringContaining(`import { type ClassValue, clsx } from 'clsx'`),
     'utf8'
   );