Merge pull request #2829 from udecode/refactor/plate-ui

Refactor/plate UI
udecode · Dec 27, 2023 · b3e41a0 · b3e41a0
2 parents 2355f86 + ec73a6a
commit b3e41a0
Show file tree

Hide file tree

Showing 400 changed files with 2,493 additions and 2,977 deletions.
diff --git a/.changeset/clever-games-type.md 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
@@ -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
@@ -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
@@ -0,0 +1,5 @@
+---
+'@udecode/plate-common': patch
+---
+
+- Fix import from RSC
diff --git a/.changeset/commonm.md 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
@@ -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/api/cn.mdx b/apps/www/content/docs/api/cn.mdx
@@ -0,0 +1,78 @@
+---
+title: cn
+description: API reference for @udecode/cn.
+---
+
+`@udecode/cn` contains utility functions for React & Tailwind.
+
+### cn
+
+Conditionally add Tailwind CSS classes without conflicts.
+
+<APIParameters>
+  <APIItem name="...inputs" type="CxOptions">
+    Class values set using `clsx` and `tailwind-merge`.
+  </APIItem>
+</APIParameters>
+<APIReturns>
+
+`className` string.
+
+</APIReturns>
+
+### withCn
+
+Set default `className` to a component.
+
+<APIParameters>
+  <APIItem name="Component" type="React.ComponentType">
+    The component to which props will be added.
+  </APIItem>
+  <APIItem name="...inputs" type="CxOptions">
+    The default `className` to set using `cn`.
+  </APIItem>
+</APIParameters>
+<APIReturns>
+
+A new component that includes the default `className`.
+
+</APIReturns>
+
+### withProps
+
+Set default props to a component.
+
+<APIParameters>
+  <APIItem name="Component" type="React.ComponentType | ElementType">
+    The component to which props will be added.
+  </APIItem>
+  <APIItem name="props" type="Partial<T>">
+    The props to be added to the component.
+  </APIItem>
+</APIParameters>
+<APIReturns>
+
+A new component that includes the default props.
+
+</APIReturns>
+
+### withVariants
+
+Set default `className` to a component using variants from `class-variance-authority`.
+
+<APIParameters>
+  <APIItem name="Component" type="React.ComponentType | ElementType">
+    The component to which props will be added.
+  </APIItem>
+  <APIItem name="variants" type="V extends ReturnType<typeof cva>">
+    The variants as the default `className`.
+  </APIItem>
+  <APIItem name="onlyVariantsProps" type="(keyof VariantProps<V>)[]">
+    The props to exclude from `Component`. Set the props that are only used for variants.
+  </APIItem>
+</APIParameters>
+<APIReturns>
+
+A new component that includes the default `className`.
+
+</APIReturns>
diff --git a/apps/www/content/docs/api/react-utils.mdx b/apps/www/content/docs/api/react-utils.mdx
@@ -0,0 +1,82 @@
+---
+title: React Utils
+description: API reference for @udecode/react-utils.
+---
+
+`@udecode/react-utils` contains utility functions for React.
+
+### PortalBody
+
+Renders a React component in the `document.body` using a portal.
+
+### Text
+
+Generic component for rendering a span.
+
+### Box
+
+Generic component for rendering a div.
+
+### createPrimitiveComponent
+
+Creates a primitive component factory which utilizes hooks for managing state, props, and forwards references to child components.
+
+<APIParameters>
+  <APIItem name="element" type="React.ElementType">
+    The base component or native HTML element.
+  </APIItem>
+</APIParameters>
+<APIReturns>
+  A function returning a primitive component with hooks for state and props
+  management.
+</APIReturns>
+
+### createPrimitiveElement
+
+Creates a component from an element type.
+
+<APIParameters>
+  <APIItem name="element" type="React.ElementType">
+    The native HTML element.
+  </APIItem>
+</APIParameters>
+<APIReturns>
+  A function component that renders the specified element.
+</APIReturns>
+
+### createSlotComponent
+
+Creates a Slot component, which is useful when you want a component to behave as its child.
+
+<APIParameters>
+  <APIItem name="element" type="React.ElementType">
+    The base component or native HTML element.
+  </APIItem>
+</APIParameters>
+<APIReturns>
+
+A function returning a Slot component.
+
+</APIReturns>
+
+### withProviders
+
+A function that wraps a component into multiple providers.
+
+<APIParameters>
+<APIItem name="providers" type="any[]">
+Providers with which to wrap the component.
+
+If there are any props that you want a provider to receive, you can simply pass an array.
+
+</APIItem>
+<APIItem name="WrappedComponent" type="FunctionComponent<T>">
+The component to be wrapped.
+</APIItem>
+<APIItem name="props" type="T">
+The props to be passed to the wrapped component.
+</APIItem>
+</APIParameters>
+<APIReturns>
+A new component that is wrapped by the specified providers.
+</APIReturns>
diff --git a/apps/www/content/docs/api/utils.mdx b/apps/www/content/docs/api/utils.mdx
@@ -119,18 +119,6 @@ If true, merges its props onto its immediate child.
 </APIItem>
 </APIAttributes>
 
-### PortalBody
-
-Renders a React component in the `document.body` using a portal.
-
-### Text
-
-Generic component for rendering a span.
-
-### Box
-
-Generic component for rendering a div.
-
 ## Hooks
 
 ### useMarkToolbarButtonState
@@ -306,35 +294,6 @@ Selects an editor at a target location or an edge (start, end).
 
 ## Utils
 
-### createPrimitiveComponent
-
-Creates a primitive component factory which utilizes hooks for managing state, props, and forwards references to child components.
-
-<APIParameters>
-  <APIItem name="element" type="React.ElementType">
-    The base component or native HTML element.
-  </APIItem>
-</APIParameters>
-<APIReturns>
-  A function returning a primitive component with hooks for state and props
-  management.
-</APIReturns>
-
-### createSlotComponent
-
-Creates a Slot component, which is useful when you want a component to behave as its child.
-
-<APIParameters>
-  <APIItem name="element" type="React.ElementType">
-    The base component or native HTML element.
-  </APIItem>
-</APIParameters>
-<APIReturns>
-
-A function returning a Slot component.
-
-</APIReturns>
-
 ### defaultsDeepToNodes
 
 Recursively merges a source object into children nodes using a query.
@@ -349,20 +308,6 @@ Recursively merges a source object into children nodes using a query.
   options.
 </APIReturns>
 
-### getRootProps
-
-Gets the Plate component root props.
-
-<APIParameters>
-  <APIItem name="props" type="T">
-    The properties of the Plate component.
-  </APIItem>
-</APIParameters>
-<APIReturns>
-  An object containing all props except 'editor', 'attributes', 'children',
-  'nodeProps', 'element', 'leaf', and 'text'.
-</APIReturns>
-
 ### onKeyDownToggleElement
 
 A function that toggles the type of the node in the editor when a hotkey is pressed.
@@ -398,43 +343,3 @@ A function that toggles the mark of the node in the editor when a hotkey is pres
   A keyboard handler function that toggles the mark when a specified hotkey is
   pressed.
 </APIReturns>
-
-### withProps
-
-A Higher-Order Component (HOC) that adds props to a component.
-
-<APIParameters>
-  <APIItem name="Component" type="FunctionComponent<T>">
-    The component to which props will be added.
-  </APIItem>
-  <APIItem name="props" type="Partial<T>">
-    The props to be added to the component.
-  </APIItem>
-</APIParameters>
-<APIReturns>
-
-A new component that includes the additional props.
-
-</APIReturns>
-
-### withProviders
-
-A function that wraps a component into multiple providers.
-
-<APIParameters>
-<APIItem name="providers" type="any[]">
-Providers with which to wrap the component.
-
-If there are any props that you want a provider to receive, you can simply pass an array.
-
-</APIItem>
-<APIItem name="WrappedComponent" type="FunctionComponent<T>">
-The component to be wrapped.
-</APIItem>
-<APIItem name="props" type="T">
-The props to be passed to the wrapped component.
-</APIItem>
-</APIParameters>
-<APIReturns>
-A new component that is wrapped by the specified providers.
-</APIReturns>
diff --git 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<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
+      className
+    )}
+    {...props}
+  />
+));
+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
@@ -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: › @/lib/utils
 Are you using React Server Components? › no / yes
 ```
 

diff --git a/apps/www/content/docs/components/components-json.mdx b/apps/www/content/docs/components/components-json.mdx
@@ -143,7 +143,7 @@ Import alias for your utility functions.
 ```json title="components.json"
 {
   "aliases": {
-    "utils": "@/lib/utils"
+    "utils": "@udecode/cn"
   }
 }
 ```