From ec73a6acc167610b03415e1dc88752db04df9ee5 Mon Sep 17 00:00:00 2001 From: zbeyens Date: Wed, 27 Dec 2023 02:43:34 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/clever-games-type.md | 10 ++++++ .changeset/clever-games-types.md | 8 +++++ .changeset/cli.md | 6 ++++ .changeset/common.md | 5 +++ .changeset/commonm.md | 5 +++ .changeset/utils.md | 7 ++++ .../www/content/docs/components/changelog.mdx | 36 +++++++++++++++++++ apps/www/content/docs/components/cli.mdx | 1 - .../docs/components/installation/next.mdx | 1 - .../docs/components/installation/vite.mdx | 1 - .../src/app/_components/installation-tab.tsx | 27 ++++++++++++-- apps/www/src/app/docs/[[...slug]]/page.tsx | 2 +- apps/www/src/config/customizer-items.ts | 23 ++++++++---- apps/www/src/config/docs.ts | 2 +- apps/www/src/lib/absoluteUrl.ts | 3 ++ apps/www/src/lib/utils.ts | 21 ----------- 16 files changed, 124 insertions(+), 34 deletions(-) create mode 100644 .changeset/clever-games-type.md create mode 100644 .changeset/clever-games-types.md create mode 100644 .changeset/cli.md create mode 100644 .changeset/common.md create mode 100644 .changeset/commonm.md create mode 100644 .changeset/utils.md create mode 100644 apps/www/src/lib/absoluteUrl.ts delete mode 100644 apps/www/src/lib/utils.ts diff --git a/.changeset/clever-games-type.md b/.changeset/clever-games-type.md new file mode 100644 index 0000000000..abd41f28da --- /dev/null +++ b/.changeset/clever-games-type.md @@ -0,0 +1,10 @@ +--- +'@udecode/cn': minor +--- + +New package + +- `cn`: utility function to conditionally join classNames +- `withCn`: Set default `className` to a component using `cn` +- `withProps`: Set default props to a component +- `withVariants`: Set default `className` to a component using variants from `class-variance-authority` diff --git a/.changeset/clever-games-types.md b/.changeset/clever-games-types.md new file mode 100644 index 0000000000..07b6f2642d --- /dev/null +++ b/.changeset/clever-games-types.md @@ -0,0 +1,8 @@ +--- +'@udecode/react-utils': minor +--- + +New package + +- `PortalBody`, `Text`, `Box`, `createPrimitiveComponent`, `createSlotComponent`, `withProviders` from `@udecode/plate-utils` +- `createPrimitiveElement`: Creates a component from an element type diff --git a/.changeset/cli.md b/.changeset/cli.md new file mode 100644 index 0000000000..1e26ed128b --- /dev/null +++ b/.changeset/cli.md @@ -0,0 +1,6 @@ +--- +'@udecode/plate-ui': minor +--- + +- Remove `utils` aliases: `@udecode/cn` dependency is now used +- Remove `clsx` dependency diff --git a/.changeset/common.md b/.changeset/common.md new file mode 100644 index 0000000000..8135befc40 --- /dev/null +++ b/.changeset/common.md @@ -0,0 +1,5 @@ +--- +'@udecode/plate-common': patch +--- + +- Fix import from RSC diff --git a/.changeset/commonm.md b/.changeset/commonm.md new file mode 100644 index 0000000000..2c86eae581 --- /dev/null +++ b/.changeset/commonm.md @@ -0,0 +1,5 @@ +--- +'@udecode/plate-common': minor +--- + +- re-export `@udecode/react-utils` diff --git a/.changeset/utils.md b/.changeset/utils.md new file mode 100644 index 0000000000..b988609fb2 --- /dev/null +++ b/.changeset/utils.md @@ -0,0 +1,7 @@ +--- +'@udecode/plate-utils': major +--- + +- Moved `withProps` to `@udecode/cn` +- Moved `PortalBody`, `Text`, `Box`, `createPrimitiveComponent`, `createSlotComponent`, `withProviders` to `@udecode/react-utils` +- Removed `getRootProps` (unused) diff --git a/apps/www/content/docs/components/changelog.mdx b/apps/www/content/docs/components/changelog.mdx index c9f58fd9f9..af002c0281 100644 --- a/apps/www/content/docs/components/changelog.mdx +++ b/apps/www/content/docs/components/changelog.mdx @@ -10,6 +10,42 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver ## December 2023 #6 +### December 27 #6.3 + +- remove `clsx` from dependency: `class-variance-utility` already exports it as `cx` +- new dependency: `@udecode/cn` +- remove `@/lib/utils.ts` in favor of `cn` from `@udecode/cn`. Replace all imports from `@/lib/utils` with `@udecode/cn` +- import `withProps` from `@udecode/cn` instead of `@udecode/plate-common` +- all components using `forwardRef` are now using `withRef`. `withProps`, `withCn` and `withVariants` are also used to reduce boilerplate. +- add `withCn` to ESLint `settings.tailwindcss.callees` and `classAttributes` in your IDE settings + +```tsx +// before +const Avatar = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +Avatar.displayName = AvatarPrimitive.Root.displayName; + +export { Avatar }; + +// after +export const Avatar = withCn( + AvatarPrimitive.Root, + 'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full' +); +``` + + ### December 25 #6.2 - [dialog](https://github.com/udecode/plate/pull/2824/files#diff-5f7205cdd85718b7f26cef1e746ad67d69c83703135a7e3ad1a9a09ca69c38c8) diff --git a/apps/www/content/docs/components/cli.mdx b/apps/www/content/docs/components/cli.mdx index 9c6ae55309..7cb94a5fff 100644 --- a/apps/www/content/docs/components/cli.mdx +++ b/apps/www/content/docs/components/cli.mdx @@ -22,7 +22,6 @@ Where is your global CSS file? › src/style/globals.css Do you want to use CSS variables for colors? › no / yes Where is your tailwind.config.js located? › tailwind.config.js Configure the import alias for components: › @/components -Configure the import alias for utils: › @udecode/cn Are you using React Server Components? › no / yes ``` diff --git a/apps/www/content/docs/components/installation/next.mdx b/apps/www/content/docs/components/installation/next.mdx index c655b50ff1..e9fa7aa373 100644 --- a/apps/www/content/docs/components/installation/next.mdx +++ b/apps/www/content/docs/components/installation/next.mdx @@ -36,7 +36,6 @@ Where is your global CSS file? › src/style/globals.css Do you want to use CSS variables for colors? › no / yes Where is your tailwind.config.js located? › tailwind.config.js Configure the import alias for components: › @/components -Configure the import alias for utils: › @udecode/cn Are you using React Server Components? › no / yes ``` diff --git a/apps/www/content/docs/components/installation/vite.mdx b/apps/www/content/docs/components/installation/vite.mdx index 3322bcde3e..9dba467a95 100644 --- a/apps/www/content/docs/components/installation/vite.mdx +++ b/apps/www/content/docs/components/installation/vite.mdx @@ -85,7 +85,6 @@ Where is your global CSS file? › › src/styles/globals.css Do you want to use CSS variables for colors? › no / yes Where is your tailwind.config.js located? › tailwind.config.js Configure the import alias for components: › @/components -Configure the import alias for utils: › @udecode/cn Are you using React Server Components? › no / yes (no) ``` diff --git a/apps/www/src/app/_components/installation-tab.tsx b/apps/www/src/app/_components/installation-tab.tsx index 9de0f67028..c9b33031a6 100644 --- a/apps/www/src/app/_components/installation-tab.tsx +++ b/apps/www/src/app/_components/installation-tab.tsx @@ -85,6 +85,23 @@ export default function InstallationTab() { return Array.from(uniqueImports).join(', '); }, [plugins, components]); + // Create cnImports string + const cnImports = useMemo(() => { + const combinedArray = [...plugins, ...components]; + + const uniqueImports = combinedArray.reduce( + (acc, { cnImports: _cnImports }) => { + if (_cnImports) { + _cnImports.forEach((importItem) => acc.add(importItem)); + } + return acc; + }, + new Set() + ); + + return Array.from(uniqueImports).join(', '); + }, [plugins, components]); + const installCommands = useMemo(() => { return { plugins: `npm install ${Array.from( @@ -191,7 +208,11 @@ export default function InstallationTab() { )} } from '@/components/plate-ui/${componentId}';` ); return [ - `import { createPlugins, Plate${hasEditor ? '' : ', PlateContent'}${ + `${ + cnImports.length > 0 + ? `import { ${cnImports} } from '@udecode/cn';\n` + : '' + }import { createPlugins, Plate${hasEditor ? '' : ', PlateContent'}${ plateImports.length > 0 ? ', ' + plateImports : '' } } from '@udecode/plate-common';`, ...importsGroups, @@ -397,7 +418,9 @@ export default function InstallationTab() { bash code={[ `npm install react react-dom slate slate-react slate-history slate-hyperscript`, - `npm install @udecode/plate-common`, + `npm install @udecode/plate-common${ + someComponents ? ' @udecode/cn' : '' + }`, ].join('\n')} > Start from our{' '} diff --git a/apps/www/src/app/docs/[[...slug]]/page.tsx b/apps/www/src/app/docs/[[...slug]]/page.tsx index 5043c98e1a..b669710d97 100644 --- a/apps/www/src/app/docs/[[...slug]]/page.tsx +++ b/apps/www/src/app/docs/[[...slug]]/page.tsx @@ -9,9 +9,9 @@ import Balancer from 'react-wrap-balancer'; import { docToPackage } from '@/config/doc-to-package'; import { siteConfig } from '@/config/site'; +import { absoluteUrl } from '@/lib/absoluteUrl'; import { formatBytes, getPackageData } from '@/lib/bundlephobia'; import { getTableOfContents } from '@/lib/toc'; -import { absoluteUrl } from '@/lib/utils'; import { PackageInfoType } from '@/hooks/use-package-info'; import { badgeVariants } from '@/components/ui/badge'; import { ScrollArea } from '@/components/ui/scroll-area'; diff --git a/apps/www/src/config/customizer-items.ts b/apps/www/src/config/customizer-items.ts index aef2bd67c6..2794de203d 100644 --- a/apps/www/src/config/customizer-items.ts +++ b/apps/www/src/config/customizer-items.ts @@ -57,6 +57,7 @@ export type SettingPlugin = { npmPackage?: string; packageImports?: string[]; customImports?: string[]; + cnImports?: string[]; plateImports?: string[]; pluginFactory?: string; pluginOptions?: string[]; @@ -71,6 +72,7 @@ export type SettingPlugin = { registry?: string; filename?: string; // e.g. 'blockquote-element' (default: id) customImports?: string[]; + cnImports?: string[]; plateImports?: string[]; pluginOptions?: string[]; route?: string; @@ -264,7 +266,7 @@ export const customizerItems: Record = { { id: 'h1', filename: 'heading-element', - plateImports: ['withProps'], + cnImports: ['withProps'], label: 'H1Element', pluginKey: 'ELEMENT_H1', import: 'HeadingElement', @@ -274,7 +276,7 @@ export const customizerItems: Record = { { id: 'h2', filename: 'heading-element', - plateImports: ['withProps'], + cnImports: ['withProps'], label: 'H2Element', pluginKey: 'ELEMENT_H2', import: 'HeadingElement', @@ -284,7 +286,7 @@ export const customizerItems: Record = { { id: 'h3', filename: 'heading-element', - plateImports: ['withProps'], + cnImports: ['withProps'], label: 'H3Element', pluginKey: 'ELEMENT_H3', import: 'HeadingElement', @@ -294,7 +296,7 @@ export const customizerItems: Record = { { id: 'h4', filename: 'heading-element', - plateImports: ['withProps'], + cnImports: ['withProps'], label: 'H4Element', pluginKey: 'ELEMENT_H4', import: 'HeadingElement', @@ -304,7 +306,7 @@ export const customizerItems: Record = { { id: 'h5', filename: 'heading-element', - plateImports: ['withProps'], + cnImports: ['withProps'], label: 'H5Element', pluginKey: 'ELEMENT_H5', import: 'HeadingElement', @@ -314,7 +316,7 @@ export const customizerItems: Record = { { id: 'h6', filename: 'heading-element', - plateImports: ['withProps'], + cnImports: ['withProps'], label: 'H6Element', pluginKey: 'ELEMENT_H6', import: 'HeadingElement', @@ -335,6 +337,7 @@ export const customizerItems: Record = { { id: 'ul', filename: 'list-element', + cnImports: ['withProps'], label: 'BulletedListElement', pluginKey: 'ELEMENT_UL', import: 'ListElement', @@ -344,6 +347,7 @@ export const customizerItems: Record = { { id: 'ol', filename: 'list-element', + cnImports: ['withProps'], label: 'NumberedListElement', pluginKey: 'ELEMENT_OL', noImport: true, @@ -354,6 +358,7 @@ export const customizerItems: Record = { { id: 'li', filename: 'list-element', + cnImports: ['withProps'], plateImports: ['PlateElement'], label: 'ListItemElement', pluginKey: 'ELEMENT_LI', @@ -499,6 +504,7 @@ export const customizerItems: Record = { { id: 'bold', label: 'BoldLeaf', + cnImports: ['withProps'], plateImports: ['PlateLeaf'], pluginKey: 'MARK_BOLD', noImport: true, @@ -599,6 +605,7 @@ export const customizerItems: Record = { { id: 'italic', label: 'ItalicLeaf', + cnImports: ['withProps'], plateImports: ['PlateLeaf'], pluginKey: 'MARK_ITALIC', noImport: true, @@ -634,6 +641,7 @@ export const customizerItems: Record = { { id: 'strikethrough', label: 'StrikethroughLeaf', + cnImports: ['withProps'], plateImports: ['PlateLeaf'], pluginKey: 'MARK_STRIKETHROUGH', noImport: true, @@ -652,6 +660,7 @@ export const customizerItems: Record = { { id: 'subscript', label: 'SubscriptLeaf', + cnImports: ['withProps'], plateImports: ['PlateLeaf'], pluginKey: 'MARK_SUBSCRIPT', noImport: true, @@ -670,6 +679,7 @@ export const customizerItems: Record = { { id: 'superscript', label: 'SuperscriptLeaf', + cnImports: ['withProps'], plateImports: ['PlateLeaf'], pluginKey: 'MARK_SUPERSCRIPT', noImport: true, @@ -688,6 +698,7 @@ export const customizerItems: Record = { { id: 'underline', label: 'UnderlineLeaf', + cnImports: ['withProps'], plateImports: ['PlateLeaf'], pluginKey: 'MARK_UNDERLINE', noImport: true, diff --git a/apps/www/src/config/docs.ts b/apps/www/src/config/docs.ts index b060d0843f..3dc8a1735a 100644 --- a/apps/www/src/config/docs.ts +++ b/apps/www/src/config/docs.ts @@ -650,7 +650,7 @@ export const docsConfig: DocsConfig = { { title: 'cn', href: '/docs/api/cn', - headings: ['withCn', 'withProps', 'withVariants'], + headings: ['cn', 'withCn', 'withProps', 'withVariants'], }, ], }, diff --git a/apps/www/src/lib/absoluteUrl.ts b/apps/www/src/lib/absoluteUrl.ts new file mode 100644 index 0000000000..7d51787990 --- /dev/null +++ b/apps/www/src/lib/absoluteUrl.ts @@ -0,0 +1,3 @@ +export function absoluteUrl(path: string) { + return `${process.env.NEXT_PUBLIC_APP_URL}${path}`; +} diff --git a/apps/www/src/lib/utils.ts b/apps/www/src/lib/utils.ts deleted file mode 100644 index 30dca119d2..0000000000 --- a/apps/www/src/lib/utils.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { cx } from 'class-variance-authority'; -import { twMerge } from 'tailwind-merge'; - -import type { CxOptions } from 'class-variance-authority'; - -export function cn(...inputs: CxOptions) { - return twMerge(cx(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}`; -}