Migrate Skeleton component from useStyles to useDefinition

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

packages/ui/src/components/Skeleton/Skeleton.tsx

@@ -14,32 +14,28 @@
  * limitations under the License.
  */
 
-import { useStyles } from '../../hooks/useStyles';
+import type { SkeletonProps } from './types';
+import { useDefinition } from '../../hooks/useDefinition';
 import { SkeletonDefinition } from './definition';
-import { SkeletonProps } from './types';
-import styles from './Skeleton.module.css';
-import clsx from 'clsx';
 
 /** @public */
 export const Skeleton = (props: SkeletonProps) => {
-  const { classNames, cleanedProps } = useStyles(SkeletonDefinition, {
-    width: 80,
-    height: 24,
-    rounded: false,
-    ...props,
-  });
-  const { className, width, height, rounded, style, ...rest } = cleanedProps;
+  const { ownProps, restProps, dataAttributes } = useDefinition(
+    SkeletonDefinition,
+    props,
+  );
+  const { classes, width, height, style } = ownProps;
 
   return (
     <div
-      className={clsx(classNames.root, styles[classNames.root], className)}
-      data-rounded={rounded}
+      className={classes.root}
+      {...dataAttributes}
       style={{
         width,
         height,
         ...style,
       }}
-      {...rest}
+      {...restProps}
     />
   );
 };

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

@@ -14,14 +14,25 @@
  * limitations under the License.
  */
 
-import type { ComponentDefinition } from '../../types';
+import { defineComponent } from '../../hooks/useDefinition';
+import type { SkeletonOwnProps } from './types';
+import styles from './Skeleton.module.css';
 
 /**
  * Component definition for Skeleton
  * @public
  */
-export const SkeletonDefinition = {
+export const SkeletonDefinition = defineComponent<SkeletonOwnProps>()({
+  styles,
   classNames: {
     root: 'bui-Skeleton',
   },
-} as const satisfies ComponentDefinition;
+  propDefs: {
+    width: { default: 80 },
+    height: { default: 24 },
+    rounded: { dataAttribute: true, default: false },
+    children: {},
+    className: {},
+    style: {},
+  },
+});

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

@@ -15,5 +15,5 @@
  */
 
 export { Skeleton } from './Skeleton';
-export type { SkeletonProps } from './types';
+export type { SkeletonOwnProps, SkeletonProps } from './types';
 export { SkeletonDefinition } from './definition';

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

@@ -14,11 +14,19 @@
  * limitations under the License.
  */
 
-import { ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
 
 /** @public */
-export interface SkeletonProps extends ComponentProps<'div'> {
+export type SkeletonOwnProps = {
   width?: number | string;
   height?: number | string;
   rounded?: boolean;
-}
+  children?: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+/** @public */
+export interface SkeletonProps
+  extends Omit<ComponentProps<'div'>, 'children' | 'className' | 'style'>,
+    SkeletonOwnProps {}