Migrate HeaderPage component from useStyles to useDefinition

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

packages/ui/report.api.md

@@ -1321,6 +1321,9 @@ export interface HeaderPageBreadcrumb {
 
 // @public
 export const HeaderPageDefinition: {
+  readonly styles: {
+    readonly [key: string]: string;
+  };
   readonly classNames: {
     readonly root: 'bui-HeaderPage';
     readonly content: 'bui-HeaderPageContent';
@@ -1328,10 +1331,17 @@ export const HeaderPageDefinition: {
     readonly tabsWrapper: 'bui-HeaderPageTabsWrapper';
     readonly controls: 'bui-HeaderPageControls';
   };
+  readonly propDefs: {
+    readonly title: {};
+    readonly customActions: {};
+    readonly tabs: {};
+    readonly breadcrumbs: {};
+    readonly className: {};
+  };
 };
 
 // @public
-export interface HeaderPageProps {
+export interface HeaderPageOwnProps {
   // (undocumented)
   breadcrumbs?: HeaderPageBreadcrumb[];
   // (undocumented)
@@ -1344,6 +1354,9 @@ export interface HeaderPageProps {
   title?: string;
 }
 
+// @public
+export interface HeaderPageProps extends HeaderPageOwnProps {}
+
 // @public
 export interface HeaderTab {
   // (undocumented)

packages/ui/src/components/HeaderPage/HeaderPage.tsx

@@ -18,13 +18,11 @@ import type { HeaderPageProps } from './types';
 import { Text } from '../Text';
 import { RiArrowRightSLine } from '@remixicon/react';
 import { Tabs, TabList, Tab } from '../Tabs';
-import { useStyles } from '../../hooks/useStyles';
+import { useDefinition } from '../../hooks/useDefinition';
 import { HeaderPageDefinition } from './definition';
 import { Container } from '../Container';
 import { Link } from '../Link';
 import { Fragment } from 'react/jsx-runtime';
-import styles from './HeaderPage.module.css';
-import clsx from 'clsx';
 
 /**
  * A component that renders a header page.
@@ -32,20 +30,13 @@ import clsx from 'clsx';
  * @public
  */
 export const HeaderPage = (props: HeaderPageProps) => {
-  const { classNames, cleanedProps } = useStyles(HeaderPageDefinition, props);
-  const { className, title, tabs, customActions, breadcrumbs } = cleanedProps;
+  const { ownProps } = useDefinition(HeaderPageDefinition, props);
+  const { classes, title, tabs, customActions, breadcrumbs } = ownProps;
 
   return (
-    <Container
-      className={clsx(classNames.root, styles[classNames.root], className)}
-    >
-      <div className={clsx(classNames.content, styles[classNames.content])}>
-        <div
-          className={clsx(
-            classNames.breadcrumbs,
-            styles[classNames.breadcrumbs],
-          )}
-        >
+    <Container className={classes.root}>
+      <div className={classes.content}>
+        <div className={classes.breadcrumbs}>
           {breadcrumbs &&
             breadcrumbs.map(breadcrumb => (
               <Fragment key={breadcrumb.label}>
@@ -67,17 +58,10 @@ export const HeaderPage = (props: HeaderPageProps) => {
             {title}
           </Text>
         </div>
-        <div className={clsx(classNames.controls, styles[classNames.controls])}>
-          {customActions}
-        </div>
+        <div className={classes.controls}>{customActions}</div>
       </div>
       {tabs && (
-        <div
-          className={clsx(
-            classNames.tabsWrapper,
-            styles[classNames.tabsWrapper],
-          )}
-        >
+        <div className={classes.tabsWrapper}>
           <Tabs>
             <TabList>
               {tabs.map(tab => (

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

@@ -14,13 +14,16 @@
  * limitations under the License.
  */
 
-import type { ComponentDefinition } from '../../types';
+import { defineComponent } from '../../hooks/useDefinition';
+import type { HeaderPageOwnProps } from './types';
+import styles from './HeaderPage.module.css';
 
 /**
  * Component definition for HeaderPage
  * @public
  */
-export const HeaderPageDefinition = {
+export const HeaderPageDefinition = defineComponent<HeaderPageOwnProps>()({
+  styles,
   classNames: {
     root: 'bui-HeaderPage',
     content: 'bui-HeaderPageContent',
@@ -28,4 +31,11 @@ export const HeaderPageDefinition = {
     tabsWrapper: 'bui-HeaderPageTabsWrapper',
     controls: 'bui-HeaderPageControls',
   },
-} as const satisfies ComponentDefinition;
+  propDefs: {
+    title: {},
+    customActions: {},
+    tabs: {},
+    breadcrumbs: {},
+    className: {},
+  },
+});

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

@@ -16,4 +16,8 @@
 
 export { HeaderPage } from './HeaderPage';
 export { HeaderPageDefinition } from './definition';
-export type { HeaderPageProps, HeaderPageBreadcrumb } from './types';
+export type {
+  HeaderPageOwnProps,
+  HeaderPageProps,
+  HeaderPageBreadcrumb,
+} from './types';

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

@@ -17,11 +17,11 @@
 import type { HeaderTab } from '../PluginHeader/types';
 
 /**
- * Props for the main HeaderPage component.
+ * Own props for the HeaderPage component.
  *
  * @public
  */
-export interface HeaderPageProps {
+export interface HeaderPageOwnProps {
   title?: string;
   customActions?: React.ReactNode;
   tabs?: HeaderTab[];
@@ -29,6 +29,13 @@ export interface HeaderPageProps {
   className?: string;
 }
 
+/**
+ * Props for the main HeaderPage component.
+ *
+ * @public
+ */
+export interface HeaderPageProps extends HeaderPageOwnProps {}
+
 /**
  * Represents a breadcrumb item in the header.
  *