feat: publish Skeleton Component.

packages/ui/Skeleton/Skeleton.tsx

@@ -1,22 +1,20 @@
-import type { HTMLAttributes, ReactNode } from 'react';
+import type { HTMLAttributes } from 'react';
 import { forwardRef } from 'react';
+import { root } from './style.css';
+import createSkeletonStyle from './utils';
 
-export interface SkeletonProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
-  children: ReactNode;
+export interface SkeletonProps extends HTMLAttributes<HTMLSpanElement> {
   width: number | string;
   height: number | string;
-  variant: 'circular' | 'rectangular' | 'rounded' | 'text';
-  animation: 'pulse' | 'wave';
+  variant: 'default' | 'circular' | 'rounded';
 }
 
 export const Skeleton = forwardRef<HTMLSpanElement, SkeletonProps>((props, forwardedRef) => {
-  const { children, ...restProps } = props;
+  const { width, height, variant, ...restProps } = props;
 
-  return (
-    <span ref={forwardedRef} {...restProps}>
-      {children}
-    </span>
-  );
+  const style = createSkeletonStyle(variant);
+
+  return <span className={`${root} ${style}`} ref={forwardedRef} style={{ width, height }} {...restProps} />;
 });
 
 Skeleton.displayName = 'Skeleton';

packages/ui/Skeleton/constants.ts

@@ -0,0 +1,9 @@
+import type { SkeletonVariant } from './types';
+
+const SkeletonBorderRadius: Record<SkeletonVariant, string> = {
+  default: '12px',
+  circular: '100%',
+  rounded: '100%',
+};
+
+export default SkeletonBorderRadius;

packages/ui/Skeleton/style.css.ts

@@ -0,0 +1,32 @@
+import { colors } from '@sopt-makers/colors';
+import { keyframes, style } from '@vanilla-extract/css';
+import { createSprinkles, defineProperties } from '@vanilla-extract/sprinkles';
+import SkeletonBorderRadius from './constants';
+
+const pulseKeyframe = keyframes({
+  '0%': {
+    opacity: 1,
+  },
+
+  '50%': {
+    opacity: 0.4,
+  },
+
+  '100%': {
+    opacity: 1,
+  },
+});
+
+export const root = style({
+  display: 'block',
+  backgroundColor: colors.gray700,
+  animation: `${pulseKeyframe} 2s ease-in-out 0.5s infinite`,
+});
+
+const sprinkleProperties = defineProperties({
+  properties: {
+    borderRadius: SkeletonBorderRadius,
+  },
+});
+
+export const sprinkles = createSprinkles(sprinkleProperties);

packages/ui/Skeleton/types.ts

@@ -0,0 +1 @@
+export type SkeletonVariant = 'default' | 'circular' | 'rounded';

packages/ui/Skeleton/utils.ts

@@ -0,0 +1,8 @@
+import { sprinkles } from './style.css';
+import type { SkeletonVariant } from './types';
+
+const createSkeletonStyle = (variant: SkeletonVariant) => {
+  return sprinkles({ borderRadius: variant });
+};
+
+export default createSkeletonStyle;