Migrate FullPage component from useStyles to useDefinition

Signed-off-by: Johan Persson <johanopersson@gmail.com>

packages/ui/report.api.md

@@ -10,6 +10,7 @@ import { ColumnProps as ColumnProps_2 } from 'react-aria-components';
 import type { ColumnSize } from '@react-types/table';
 import type { ColumnStaticSize } from '@react-types/table';
 import type { ComponentProps } from 'react';
+import type { ComponentPropsWithoutRef } from 'react';
 import type { ComponentPropsWithRef } from 'react';
 import type { CSSProperties } from 'react';
 import { DetailedHTMLProps } from 'react';
@@ -1116,13 +1117,26 @@ export const FullPage: ForwardRefExoticComponent<
 
 // @public
 export const FullPageDefinition: {
+  readonly styles: {
+    readonly [key: string]: string;
+  };
   readonly classNames: {
     readonly root: 'bui-FullPage';
   };
+  readonly propDefs: {
+    readonly className: {};
+  };
+};
+
+// @public (undocumented)
+export type FullPageOwnProps = {
+  className?: string;
 };
 
 // @public
-export interface FullPageProps extends React.ComponentPropsWithoutRef<'main'> {}
+export interface FullPageProps
+  extends Omit<ComponentPropsWithoutRef<'main'>, 'className'>,
+    FullPageOwnProps {}
 
 // @public (undocumented)
 export const Grid: {

packages/ui/src/components/FullPage/FullPage.tsx

@@ -16,10 +16,8 @@
 
 import { forwardRef } from 'react';
 import type { FullPageProps } from './types';
-import { useStyles } from '../../hooks/useStyles';
+import { useDefinition } from '../../hooks/useDefinition';
 import { FullPageDefinition } from './definition';
-import styles from './FullPage.module.css';
-import clsx from 'clsx';
 
 /**
  * A component that fills the remaining viewport height below the Header.
@@ -32,14 +30,8 @@ import clsx from 'clsx';
  * @public
  */
 export const FullPage = forwardRef<HTMLElement, FullPageProps>((props, ref) => {
-  const { classNames, cleanedProps } = useStyles(FullPageDefinition, props);
-  const { className, ...rest } = cleanedProps;
+  const { ownProps, restProps } = useDefinition(FullPageDefinition, props);
+  const { classes } = ownProps;
 
-  return (
-    <main
-      ref={ref}
-      className={clsx(classNames.root, styles[classNames.root], className)}
-      {...rest}
-    />
-  );
+  return <main ref={ref} className={classes.root} {...restProps} />;
 });

packages/ui/src/components/FullPage/definition.ts

@@ -14,14 +14,20 @@
  * limitations under the License.
  */
 
-import type { ComponentDefinition } from '../../types';
+import { defineComponent } from '../../hooks/useDefinition';
+import type { FullPageOwnProps } from './types';
+import styles from './FullPage.module.css';
 
 /**
  * Component definition for FullPage
  * @public
  */
-export const FullPageDefinition = {
+export const FullPageDefinition = defineComponent<FullPageOwnProps>()({
+  styles,
   classNames: {
     root: 'bui-FullPage',
   },
-} as const satisfies ComponentDefinition;
+  propDefs: {
+    className: {},
+  },
+});

packages/ui/src/components/FullPage/index.tsx

@@ -16,4 +16,4 @@
 
 export { FullPage } from './FullPage';
 export { FullPageDefinition } from './definition';
-export type { FullPageProps } from './types';
+export type { FullPageOwnProps, FullPageProps } from './types';

packages/ui/src/components/FullPage/types.ts

@@ -14,9 +14,18 @@
  * limitations under the License.
  */
 
+import type { ComponentPropsWithoutRef } from 'react';
+
+/** @public */
+export type FullPageOwnProps = {
+  className?: string;
+};
+
 /**
  * Props for the FullPage component.
  *
  * @public
  */
-export interface FullPageProps extends React.ComponentPropsWithoutRef<'main'> {}
+export interface FullPageProps
+  extends Omit<ComponentPropsWithoutRef<'main'>, 'className'>,
+    FullPageOwnProps {}