feat(component): add storybook (#5079)

packages/frontend/component/src/ui/skeleton/skeleton.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryFn } from '@storybook/react';
+
+import { Skeleton, type SkeletonProps } from '.';
+
+export default {
+  title: 'UI/Skeleton',
+  component: Skeleton,
+} satisfies Meta<typeof Skeleton>;
+
+const Template: StoryFn<SkeletonProps> = args => (
+  <>
+    {Array.from({ length: 4 }).map(i => (
+      <div
+        key={`${i}`}
+        style={{ width: '100%', maxWidth: '300px', marginBottom: '4px' }}
+      >
+        <Skeleton {...args} />
+      </div>
+    ))}
+  </>
+);
+
+export const Default: StoryFn<SkeletonProps> = Template.bind(undefined);
+Default.args = {};
+
+export const Circle: StoryFn<SkeletonProps> = Template.bind(undefined);
+Circle.args = {
+  variant: 'circular',
+};
+
+export const Rectangle: StoryFn<SkeletonProps> = Template.bind(undefined);
+Rectangle.args = {
+  variant: 'rectangular',
+};
+
+export const Text: StoryFn<SkeletonProps> = Template.bind(undefined);
+Text.args = {
+  variant: 'text',
+};

packages/frontend/component/src/ui/skeleton/types.ts

@@ -1,5 +1,8 @@
 import type { HTMLAttributes, PropsWithChildren } from 'react';
 
+/**
+ * @reference These props are migrated from [MUI Skeleton props](https://mui.com/material-ui/api/skeleton/#props)
+ */
 export interface SkeletonProps
   extends PropsWithChildren,
     HTMLAttributes<HTMLElement> {
@@ -12,22 +15,19 @@ export interface SkeletonProps
    * The type of content that will be rendered.
    * @default `'text'`
    */
-  variant?: 'circular' | 'rectangular' | 'rounded' | 'text' | string;
+  variant?: 'circular' | 'rectangular' | 'rounded' | 'text';
 
   /**
    * Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own.
+   * Number values are treated as pixels.
    */
   width?: number | string;
 
   /**
    * Height of the skeleton. Useful when you don't want to adapt the skeleton to a text element but for instance a card.
+   * Number values are treated as pixels.
    */
   height?: number | string;
-
-  /**
-   * Wrapper component. If not provided, the default element is a div.
-   */
-  wrapper?: string;
 }
 
 export type PickStringFromUnion<T> = T extends string ? T : never;