Migrate Container component from useStyles to useDefinition

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

packages/ui/src/components/Container/Container.tsx

@@ -15,34 +15,28 @@
  */
 
 import { forwardRef } from 'react';
-import { ContainerProps } from './types';
-import clsx from 'clsx';
-import { useStyles } from '../../hooks/useStyles';
+import type { ContainerProps } from './types';
+import { useDefinition } from '../../hooks/useDefinition';
 import { ContainerDefinition } from './definition';
-import styles from './Container.module.css';
 
 /** @public */
 export const Container = forwardRef<HTMLDivElement, ContainerProps>(
   (props, ref) => {
-    const { classNames, utilityClasses, style, cleanedProps } = useStyles(
+    const { ownProps, restProps, utilityStyle } = useDefinition(
       ContainerDefinition,
       props,
     );
-
-    const { className, ...rest } = cleanedProps;
+    const { classes, style } = ownProps;
 
     return (
       <div
         ref={ref}
-        className={clsx(
-          classNames.root,
-          utilityClasses,
-          styles[classNames.root],
-          className,
-        )}
-        style={style}
-        {...rest}
+        className={classes.root}
+        style={{ ...utilityStyle, ...style }}
+        {...restProps}
       />
     );
   },
 );
+
+Container.displayName = 'Container';

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

@@ -14,15 +14,23 @@
  * limitations under the License.
  */
 
-import type { ComponentDefinition } from '../../types';
+import { defineComponent } from '../../hooks/useDefinition';
+import type { ContainerOwnProps } from './types';
+import styles from './Container.module.css';
 
 /**
  * Component definition for Container
  * @public
  */
-export const ContainerDefinition = {
+export const ContainerDefinition = defineComponent<ContainerOwnProps>()({
+  styles,
   classNames: {
     root: 'bui-Container',
   },
+  propDefs: {
+    children: {},
+    className: {},
+    style: {},
+  },
   utilityProps: ['my', 'mt', 'mb', 'py', 'pt', 'pb', 'display'],
-} as const satisfies ComponentDefinition;
+});

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

@@ -15,4 +15,4 @@
  */
 export { Container } from './Container';
 export { ContainerDefinition } from './definition';
-export type { ContainerProps } from './types';
+export type { ContainerOwnProps, ContainerProps } from './types';

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

@@ -13,17 +13,21 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { SpaceProps } from '../../types';
+import type { SpaceProps } from '../../types';
 
 /** @public */
-export interface ContainerProps {
+export type ContainerOwnProps = {
   children?: React.ReactNode;
   className?: string;
+  style?: React.CSSProperties;
+};
+
+/** @public */
+export interface ContainerProps extends ContainerOwnProps {
   my?: SpaceProps['my'];
   mb?: SpaceProps['mb'];
   mt?: SpaceProps['mt'];
   py?: SpaceProps['py'];
   pb?: SpaceProps['pb'];
   pt?: SpaceProps['pt'];
-  style?: React.CSSProperties;
 }