Migrate Grid component from useStyles to useDefinition

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

packages/ui/report.api.md

@@ -1157,10 +1157,22 @@ export const Grid: {
 
 // @public
 export const GridDefinition: {
+  readonly styles: {
+    readonly [key: string]: string;
+  };
   readonly classNames: {
     readonly root: 'bui-Grid';
   };
-  readonly utilityProps: [
+  readonly bg: 'provider';
+  readonly propDefs: {
+    readonly bg: {
+      readonly dataAttribute: true;
+    };
+    readonly children: {};
+    readonly className: {};
+    readonly style: {};
+  };
+  readonly utilityProps: readonly [
     'columns',
     'gap',
     'm',
@@ -1178,44 +1190,38 @@ export const GridDefinition: {
     'px',
     'py',
   ];
-  readonly dataAttributes: {
-    readonly bg: readonly [
-      'neutral-1',
-      'neutral-2',
-      'neutral-3',
-      'danger',
-      'warning',
-      'success',
-    ];
-  };
 };
 
 // @public
 export const GridItemDefinition: {
+  readonly styles: {
+    readonly [key: string]: string;
+  };
   readonly classNames: {
     readonly root: 'bui-GridItem';
   };
-  readonly utilityProps: ['colSpan', 'colEnd', 'colStart', 'rowSpan'];
-  readonly dataAttributes: {
-    readonly bg: readonly [
-      'neutral-1',
-      'neutral-2',
-      'neutral-3',
-      'danger',
-      'warning',
-      'success',
-    ];
+  readonly bg: 'provider';
+  readonly propDefs: {
+    readonly bg: {
+      readonly dataAttribute: true;
+    };
+    readonly children: {};
+    readonly className: {};
+    readonly style: {};
   };
+  readonly utilityProps: readonly ['colSpan', 'colEnd', 'colStart', 'rowSpan'];
 };
 
 // @public (undocumented)
-export interface GridItemProps {
-  // (undocumented)
-  bg?: Responsive<ProviderBg>;
-  // (undocumented)
-  children?: React.ReactNode;
-  // (undocumented)
+export type GridItemOwnProps = {
+  children?: ReactNode;
   className?: string;
+  style?: CSSProperties;
+  bg?: Responsive<ProviderBg>;
+};
+
+// @public (undocumented)
+export interface GridItemProps extends GridItemOwnProps {
   // (undocumented)
   colEnd?: Responsive<Columns>;
   // (undocumented)
@@ -1224,24 +1230,22 @@ export interface GridItemProps {
   colStart?: Responsive<Columns>;
   // (undocumented)
   rowSpan?: Responsive<Columns>;
-  // (undocumented)
-  style?: React.CSSProperties;
 }
 
 // @public (undocumented)
-export interface GridProps extends SpaceProps {
-  // (undocumented)
-  bg?: Responsive<ProviderBg>;
-  // (undocumented)
-  children?: React.ReactNode;
-  // (undocumented)
+export type GridOwnProps = {
+  children?: ReactNode;
   className?: string;
+  style?: CSSProperties;
+  bg?: Responsive<ProviderBg>;
+};
+
+// @public (undocumented)
+export interface GridProps extends SpaceProps, GridOwnProps {
   // (undocumented)
   columns?: Responsive<Columns>;
   // (undocumented)
   gap?: Responsive<Space>;
-  // (undocumented)
-  style?: React.CSSProperties;
 }
 
 // @public

packages/ui/src/components/Grid/Grid.tsx

@@ -15,78 +15,47 @@
  */
 
 import { forwardRef } from 'react';
-import clsx from 'clsx';
 import type { GridItemProps, GridProps } from './types';
-import { useStyles } from '../../hooks/useStyles';
+import { useDefinition } from '../../hooks/useDefinition';
 import { GridDefinition, GridItemDefinition } from './definition';
-import styles from './Grid.module.css';
-import { BgProvider, useBgProvider } from '../../hooks/useBg';
 
 const GridRoot = forwardRef<HTMLDivElement, GridProps>((props, ref) => {
-  const { bg: resolvedBg } = useBgProvider(props.bg);
+  const { ownProps, restProps, dataAttributes, utilityStyle } = useDefinition(
+    GridDefinition,
+    { columns: 'auto', gap: '4', ...props },
+  );
+  const { classes, childrenWithBgProvider } = ownProps;
 
-  const { classNames, dataAttributes, utilityClasses, style, cleanedProps } =
-    useStyles(GridDefinition, {
-      columns: 'auto',
-      gap: '4',
-      ...props,
-      bg: resolvedBg, // Use resolved bg for data attribute
-    });
-
-  const { className, bg, ...rest } = cleanedProps;
-
-  const content = (
+  return (
     <div
       ref={ref}
-      className={clsx(
-        classNames.root,
-        utilityClasses,
-        styles[classNames.root],
-        className,
-      )}
-      style={style}
+      className={classes.root}
+      style={{ ...utilityStyle, ...ownProps.style }}
       {...dataAttributes}
-      {...rest}
-    />
-  );
-
-  return resolvedBg ? (
-    <BgProvider bg={resolvedBg}>{content}</BgProvider>
-  ) : (
-    content
+      {...restProps}
+    >
+      {childrenWithBgProvider}
+    </div>
   );
 });
 
 const GridItem = forwardRef<HTMLDivElement, GridItemProps>((props, ref) => {
-  const { bg: resolvedBg } = useBgProvider(props.bg);
+  const { ownProps, restProps, dataAttributes, utilityStyle } = useDefinition(
+    GridItemDefinition,
+    props,
+  );
+  const { classes, childrenWithBgProvider } = ownProps;
 
-  const { classNames, dataAttributes, utilityClasses, style, cleanedProps } =
-    useStyles(GridItemDefinition, {
-      ...props,
-      bg: resolvedBg, // Use resolved bg for data attribute
-    });
-
-  const { className, bg, ...rest } = cleanedProps;
-
-  const content = (
+  return (
     <div
       ref={ref}
-      className={clsx(
-        classNames.root,
-        utilityClasses,
-        styles[classNames.root],
-        className,
-      )}
-      style={style}
+      className={classes.root}
+      style={{ ...utilityStyle, ...ownProps.style }}
       {...dataAttributes}
-      {...rest}
-    />
-  );
-
-  return resolvedBg ? (
-    <BgProvider bg={resolvedBg}>{content}</BgProvider>
-  ) : (
-    content
+      {...restProps}
+    >
+      {childrenWithBgProvider}
+    </div>
   );
 });
 

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

@@ -14,16 +14,26 @@
  * limitations under the License.
  */
 
-import type { ComponentDefinition } from '../../types';
+import { defineComponent } from '../../hooks/useDefinition';
+import type { GridOwnProps, GridItemOwnProps } from './types';
+import styles from './Grid.module.css';
 
 /**
  * Component definition for Grid
  * @public
  */
-export const GridDefinition = {
+export const GridDefinition = defineComponent<GridOwnProps>()({
+  styles,
   classNames: {
     root: 'bui-Grid',
   },
+  bg: 'provider',
+  propDefs: {
+    bg: { dataAttribute: true },
+    children: {},
+    className: {},
+    style: {},
+  },
   utilityProps: [
     'columns',
     'gap',
@@ -42,21 +52,23 @@ export const GridDefinition = {
     'px',
     'py',
   ],
-  dataAttributes: {
-    bg: ['neutral', 'danger', 'warning', 'success'] as const,
-  },
-} as const satisfies ComponentDefinition;
+});
 
 /**
  * Component definition for GridItem
  * @public
  */
-export const GridItemDefinition = {
+export const GridItemDefinition = defineComponent<GridItemOwnProps>()({
+  styles,
   classNames: {
     root: 'bui-GridItem',
   },
-  utilityProps: ['colSpan', 'colEnd', 'colStart', 'rowSpan'],
-  dataAttributes: {
-    bg: ['neutral', 'danger', 'warning', 'success'] as const,
+  bg: 'provider',
+  propDefs: {
+    bg: { dataAttribute: true },
+    children: {},
+    className: {},
+    style: {},
   },
-} as const satisfies ComponentDefinition;
+  utilityProps: ['colSpan', 'colEnd', 'colStart', 'rowSpan'],
+});

packages/ui/src/components/Grid/index.ts

@@ -16,4 +16,9 @@
 
 export { Grid } from './Grid';
 export { GridDefinition, GridItemDefinition } from './definition';
-export type { GridProps, GridItemProps } from './types';
+export type {
+  GridProps,
+  GridOwnProps,
+  GridItemProps,
+  GridItemOwnProps,
+} from './types';

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

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import type { ReactNode, CSSProperties } from 'react';
 import type {
   Space,
   SpaceProps,
@@ -23,23 +24,31 @@ import type {
 } from '../../types';
 
 /** @public */
-export interface GridProps extends SpaceProps {
-  children?: React.ReactNode;
+export type GridOwnProps = {
+  children?: ReactNode;
   className?: string;
+  style?: CSSProperties;
+  bg?: Responsive<ProviderBg>;
+};
+
+/** @public */
+export interface GridProps extends SpaceProps, GridOwnProps {
   columns?: Responsive<Columns>;
   gap?: Responsive<Space>;
-  style?: React.CSSProperties;
-  bg?: Responsive<ProviderBg>;
 }
 
 /** @public */
-export interface GridItemProps {
-  children?: React.ReactNode;
+export type GridItemOwnProps = {
+  children?: ReactNode;
   className?: string;
+  style?: CSSProperties;
+  bg?: Responsive<ProviderBg>;
+};
+
+/** @public */
+export interface GridItemProps extends GridItemOwnProps {
   colSpan?: Responsive<Columns>;
   colEnd?: Responsive<Columns>;
   colStart?: Responsive<Columns>;
   rowSpan?: Responsive<Columns>;
-  style?: React.CSSProperties;
-  bg?: Responsive<ProviderBg>;
 }