From 54d4df75a928b7620f7f8e22ff8360e39daa742d Mon Sep 17 00:00:00 2001 From: zbeyens Date: Sat, 23 Dec 2023 17:03:12 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20extend,=20create?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/mean-taxis-tie.md | 1 + .../www/content/docs/components/changelog.mdx | 4 ++ apps/www/src/lib/utils.ts | 21 -------- apps/www/src/lib/utils.tsx | 53 +++++++++++++++++++ packages/cli/src/commands/init.ts | 4 +- packages/cli/src/utils/templates.ts | 34 +++++++++++- packages/cli/test/commands/init.test.ts | 4 +- 7 files changed, 95 insertions(+), 26 deletions(-) delete mode 100644 apps/www/src/lib/utils.ts create mode 100644 apps/www/src/lib/utils.tsx diff --git a/.changeset/mean-taxis-tie.md b/.changeset/mean-taxis-tie.md index 8cd353a316..4ba331699d 100644 --- a/.changeset/mean-taxis-tie.md +++ b/.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 diff --git a/apps/www/content/docs/components/changelog.mdx b/apps/www/content/docs/components/changelog.mdx index f9db7f80a3..ac35337496 100644 --- a/apps/www/content/docs/components/changelog.mdx +++ b/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, ...)` diff --git a/apps/www/src/lib/utils.ts b/apps/www/src/lib/utils.ts deleted file mode 100644 index bf6e9cf52e..0000000000 --- a/apps/www/src/lib/utils.ts +++ /dev/null @@ -1,21 +0,0 @@ -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 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}`; -} diff --git a/apps/www/src/lib/utils.tsx b/apps/www/src/lib/utils.tsx new file mode 100644 index 0000000000..a6d615d55c --- /dev/null +++ b/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( + Component: ForwardRefExoticComponent, + defaultProps: T +) { + return forwardRef, T>( + function ExtendComponent(props, ref) { + return ( + + ); + } + ); +} + +export function create(tag: T) { + return forwardRef( + 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}`; +} diff --git a/packages/cli/src/commands/init.ts b/packages/cli/src/commands/init.ts index 8ab4bc92d8..e38c388008 100644 --- a/packages/cli/src/commands/init.ts +++ b/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' ); diff --git a/packages/cli/src/utils/templates.ts b/packages/cli/src/utils/templates.ts index f3a115ef19..717d2d36f7 100644 --- a/packages/cli/src/utils/templates.ts +++ b/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( + Component: ForwardRefExoticComponent, + defaultProps: T +) { + return forwardRef, T>( + function ExtendComponent(props, ref) { + return ( + + ); + } + ); +} + +export function create(tag: T) { + return forwardRef( + function CreateComponent(props, ref) { + return createElement(tag, { ...props, ref }); + } + ); +} `; export const TAILWIND_CONFIG = `/** @type {import('tailwindcss').Config} */ diff --git a/packages/cli/test/commands/init.test.ts b/packages/cli/test/commands/init.test.ts index e907a0186d..3f7eb5e954 100644 --- a/packages/cli/test/commands/init.test.ts +++ b/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' );