refactor(ui): migrate Box to use useDefinition hook

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

packages/ui/src/components/Box/Box.tsx

@@ -16,47 +16,27 @@
 
 import { createElement, forwardRef } from 'react';
 import { BoxProps } from './types';
-import clsx from 'clsx';
-import { useStyles } from '../../hooks/useStyles';
-import styles from './Box.module.css';
+import { useDefinition } from '../../hooks/useDefinition';
 import { BoxDefinition } from './definition';
-import { SurfaceProvider, useSurface } from '../../hooks/useSurface';
 
 /** @public */
 export const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
-  // Resolve the surface this Box creates for its children
-  // Using 'surface' parameter = container behavior (auto increments)
-  const { surface: resolvedSurface } = useSurface({
-    surface: props.surface,
-  });
-
-  const { classNames, dataAttributes, utilityClasses, style, cleanedProps } =
-    useStyles(BoxDefinition, {
-      ...props,
-      surface: resolvedSurface, // Use resolved surface for data attribute
-    });
-
-  const { as = 'div', children, className, surface, ...rest } = cleanedProps;
+  const { ownProps, restProps, dataAttributes, utilityStyle } = useDefinition(
+    BoxDefinition,
+    props,
+  );
+  const { classes, as = 'div', surfaceChildren } = ownProps;
 
   return createElement(
     as,
     {
       ref,
-      className: clsx(
-        classNames.root,
-        styles[classNames.root],
-        utilityClasses,
-        className,
-      ),
-      style,
+      className: classes.root,
+      style: { ...ownProps.style, ...utilityStyle },
       ...dataAttributes,
-      ...rest,
+      ...restProps,
     },
-    resolvedSurface ? (
-      <SurfaceProvider surface={resolvedSurface}>{children}</SurfaceProvider>
-    ) : (
-      children
-    ),
+    surfaceChildren,
   );
 });
 

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

@@ -14,16 +14,35 @@
  * limitations under the License.
  */
 
-import type { ComponentDefinition } from '../../types';
+import { defineComponent } from '../../hooks/useDefinition';
+import type { BoxOwnProps } from './types';
+import styles from './Box.module.css';
 
 /**
  * Component definition for Box
  * @public
  */
-export const BoxDefinition = {
+export const BoxDefinition = defineComponent<BoxOwnProps, typeof styles>()({
+  styles,
   classNames: {
     root: 'bui-Box',
   },
+  surface: 'container',
+  propDefs: {
+    as: { default: 'div' },
+    surface: { dataAttribute: true },
+    display: {},
+    position: {},
+    width: {},
+    minWidth: {},
+    maxWidth: {},
+    height: {},
+    minHeight: {},
+    maxHeight: {},
+    children: {},
+    className: {},
+    style: {},
+  },
   utilityProps: [
     'm',
     'mb',
@@ -39,16 +58,5 @@ export const BoxDefinition = {
     'pt',
     'px',
     'py',
-    'position',
-    'display',
-    'width',
-    'minWidth',
-    'maxWidth',
-    'height',
-    'minHeight',
-    'maxHeight',
   ],
-  dataAttributes: {
-    surface: ['0', '1', '2', '3', 'danger', 'warning', 'success'] as const,
-  },
-} as const satisfies ComponentDefinition;
+});

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

@@ -14,23 +14,27 @@
  * limitations under the License.
  */
 
-import type { SpaceProps, Responsive, Surface } from '../../types';
+import type { ReactNode, CSSProperties } from 'react';
+import type { Responsive, Surface, SpaceProps } from '../../types';
 
 /** @public */
-export interface BoxProps extends SpaceProps {
-  display?: Responsive<'none' | 'flex' | 'block' | 'inline'>;
+export type BoxOwnProps = {
   as?: keyof JSX.IntrinsicElements;
+  surface?: Responsive<Surface>;
+  display?: Responsive<'none' | 'flex' | 'block' | 'inline'>;
+  position?: Responsive<
+    'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'
+  >;
   width?: Responsive<string>;
   minWidth?: Responsive<string>;
   maxWidth?: Responsive<string>;
   height?: Responsive<string>;
   minHeight?: Responsive<string>;
   maxHeight?: Responsive<string>;
-  position?: Responsive<
-    'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'
-  >;
-  children?: React.ReactNode;
+  children?: ReactNode;
   className?: string;
-  style?: React.CSSProperties;
-  surface?: Responsive<Surface>;
-}
+  style?: CSSProperties;
+};
+
+/** @public */
+export interface BoxProps extends SpaceProps, BoxOwnProps {}