docs(sb): 📝 fix storybook previews with progress

Author: navin-moorthy

src/progress/ProgressBar.tsx

@@ -28,10 +28,6 @@ export const useProgressBar = createHook<
   compose: [useBox, useReakitProgress],
   keys: PROGRESS_BAR_KEYS,
 
-  useOptions(options, htmlProps) {
-    return options;
-  },
-
   useProps(options, htmlProps) {
     const { percent, isIndeterminate } = options;
     const {

src/progress/ProgressState.ts

@@ -16,7 +16,7 @@ export type ProgressState = RenderlesskitProgressState & {
   /**
    * How large should the progress be?
    *
-   * @default "md"
+   * @default md
    */
   size: keyof Renderlesskit.GetThemeValue<"progress", "track", "size">;
 };

src/progress/ProgressTrack.tsx

@@ -22,10 +22,6 @@ export const useProgressTrack = createHook<
   compose: useBox,
   keys: PROGRESS_TRACK_KEYS,
 
-  useOptions(options, htmlProps) {
-    return options;
-  },
-
   useProps(options, htmlProps) {
     const { size } = options;
     const { className: htmlClassName, ...restHtmlProps } = htmlProps;

src/progress/stories/ProgressBasic.component.tsx

@@ -9,10 +9,10 @@ export const ProgressBasic: React.FC<ProgressBasicProps> = props => {
   const [value, setValue] = useProgressState();
 
   return (
-    <>
+    <div className="w-80">
       <Progress value={value} {...props} />
       <ActionButtons setValue={setValue} />
-    </>
+    </div>
   );
 };
 

src/progress/stories/ProgressBasic.stories.tsx

@@ -17,6 +17,9 @@ export default {
   component: ProgressBasic,
   argTypes: {
     size: createUnionControl(["sm", "md", "lg", "xl"]),
+  },
+  parameters: {
+    layout: "centered",
     options: { showPanel: true },
     preview: createPreviewTabs({ js, ts }),
   },

src/progress/stories/ProgressCustom.component.tsx

@@ -15,13 +15,13 @@ export const ProgressCustom: React.FC<ProgressCustomProps> = props => {
   const [value, setValue] = useProgressState();
 
   return (
-    <>
+    <div className="w-80">
       <Progress value={value} {...props}>
         <ProgressTrack className="bg-red-300" />
         <ProgressBar className="bg-red-800" />
       </Progress>
       <ActionButtons setValue={setValue} />
-    </>
+    </div>
   );
 };
 

src/progress/stories/ProgressCustom.stories.tsx

@@ -17,6 +17,9 @@ export default {
   component: ProgressCustom,
   argTypes: {
     size: createUnionControl(["sm", "md", "lg", "xl"]),
+  },
+  parameters: {
+    layout: "centered",
     options: { showPanel: true },
     preview: createPreviewTabs({ js, ts }),
   },