refactor(stories): reorder stories items

heroui-inc · May 4, 2024 · cae7fca · cae7fca
1 parent cb8d2cc
commit cae7fca
Show file tree

Hide file tree

Showing 3 changed files with 124 additions and 124 deletions.
diff --git a/packages/components/autocomplete/stories/autocomplete.stories.tsx b/packages/components/autocomplete/stories/autocomplete.stories.tsx
@@ -773,15 +773,6 @@ export const DisabledOptions = {
   },
 };
 
-export const WithDescription = {
-  render: MirrorTemplate,
-
-  args: {
-    ...defaultProps,
-    description: "Select your favorite animal",
-  },
-};
-
 export const LabelPlacement = {
   render: LabelPlacementTemplate,
 
@@ -822,6 +813,27 @@ export const EndContent = {
   },
 };
 
+export const IsInvalid = {
+  render: Template,
+
+  args: {
+    ...defaultProps,
+    isInvalid: true,
+    variant: "bordered",
+    defaultSelectedKey: "dog",
+    errorMessage: "Please select a valid animal",
+  },
+};
+
+export const WithDescription = {
+  render: MirrorTemplate,
+
+  args: {
+    ...defaultProps,
+    description: "Select your favorite animal",
+  },
+};
+
 export const WithoutScrollShadow = {
   render: Template,
 
@@ -887,67 +899,63 @@ export const WithValidation = {
   },
 };
 
-export const IsInvalid = {
-  render: Template,
+export const WithSections = {
+  render: WithSectionsTemplate,
 
   args: {
     ...defaultProps,
-    isInvalid: true,
-    variant: "bordered",
-    defaultSelectedKey: "dog",
-    errorMessage: "Please select a valid animal",
   },
 };
 
-export const Controlled = {
-  render: ControlledTemplate,
+export const WithCustomSectionsStyles = {
+  render: WithCustomSectionsStylesTemplate,
 
   args: {
     ...defaultProps,
   },
 };
 
-export const CustomSelectorIcon = {
-  render: Template,
+export const WithAriaLabel = {
+  render: WithAriaLabelTemplate,
 
   args: {
     ...defaultProps,
-    disableSelectorIconRotation: true,
-    selectorIcon: <SelectorIcon />,
+    label: "Select an animal 🐹",
+    "aria-label": "Select an animal",
   },
 };
 
-export const CustomItems = {
-  render: CustomItemsTemplate,
+export const WithReactHookForm = {
+  render: WithReactHookFormTemplate,
 
   args: {
     ...defaultProps,
   },
 };
 
-export const WithSections = {
-  render: WithSectionsTemplate,
+export const Controlled = {
+  render: ControlledTemplate,
 
   args: {
     ...defaultProps,
   },
 };
 
-export const WithCustomSectionsStyles = {
-  render: WithCustomSectionsStylesTemplate,
+export const CustomSelectorIcon = {
+  render: Template,
 
   args: {
     ...defaultProps,
+    disableSelectorIconRotation: true,
+    selectorIcon: <SelectorIcon />,
   },
 };
 
-export const WithAriaLabel = {
-  render: WithAriaLabelTemplate,
+export const CustomItems = {
+  render: CustomItemsTemplate,
 
   args: {
     ...defaultProps,
-    label: "Select an animal 🐹",
-    "aria-label": "Select an animal",
   },
 };
 
@@ -967,11 +975,3 @@ export const CustomStylesWithCustomItems = {
     ...defaultProps,
   },
 };
-
-export const WithReactHookForm = {
-  render: WithReactHookFormTemplate,
-
-  args: {
-    ...defaultProps,
-  },
-};
diff --git a/packages/components/select/stories/select.stories.tsx b/packages/components/select/stories/select.stories.tsx
@@ -673,23 +673,15 @@ export const DisabledOptions = {
   },
 };
 
-export const WithDescription = {
-  render: MirrorTemplate,
-
-  args: {
-    ...defaultProps,
-    description: "Select your favorite animal",
-  },
-};
-
-export const WithoutLabel = {
+export const IsInvalid = {
   render: Template,
 
   args: {
     ...defaultProps,
-    label: null,
-    "aria-label": "Select an animal",
-    placeholder: "Select an animal",
+    isInvalid: true,
+    variant: "bordered",
+    defaultSelectedKeys: ["dog"],
+    errorMessage: "Please select a valid animal",
   },
 };
 
@@ -717,6 +709,26 @@ export const StartContent = {
   },
 };
 
+export const WithDescription = {
+  render: MirrorTemplate,
+
+  args: {
+    ...defaultProps,
+    description: "Select your favorite animal",
+  },
+};
+
+export const WithoutLabel = {
+  render: Template,
+
+  args: {
+    ...defaultProps,
+    label: null,
+    "aria-label": "Select an animal",
+    placeholder: "Select an animal",
+  },
+};
+
 export const WithoutScrollShadow = {
   render: Template,
 
@@ -768,15 +780,62 @@ export const WithErrorMessageFunction = {
   },
 };
 
-export const IsInvalid = {
-  render: Template,
+export const WithChips = {
+  render: CustomItemsTemplate,
 
   args: {
     ...defaultProps,
-    isInvalid: true,
     variant: "bordered",
-    defaultSelectedKeys: ["dog"],
-    errorMessage: "Please select a valid animal",
+    selectionMode: "multiple",
+    isMultiline: true,
+    labelPlacement: "outside",
+    classNames: {
+      base: "max-w-xs",
+      trigger: "min-h-12 py-2",
+    },
+    renderValue: (items: SelectedItems<User>) => {
+      return (
+        <div className="flex flex-wrap gap-2">
+          {items.map((item) => (
+            <Chip key={item.key}>{item.data?.name}</Chip>
+          ))}
+        </div>
+      );
+    },
+  },
+};
+
+export const WithSections = {
+  render: WithSectionsTemplate,
+
+  args: {
+    ...defaultProps,
+  },
+};
+
+export const WithCustomSectionsStyles = {
+  render: WithCustomSectionsStylesTemplate,
+
+  args: {
+    ...defaultProps,
+  },
+};
+
+export const WithAriaLabel = {
+  render: WithAriaLabelTemplate,
+
+  args: {
+    ...defaultProps,
+    label: "Select an animal 🐹",
+    "aria-label": "Select an animal",
+  },
+};
+
+export const WithReactHookForm = {
+  render: WithReactHookFormTemplate,
+
+  args: {
+    ...defaultProps,
   },
 };
 
@@ -850,57 +909,6 @@ export const CustomRenderValue = {
   },
 };
 
-export const WithChips = {
-  render: CustomItemsTemplate,
-
-  args: {
-    ...defaultProps,
-    variant: "bordered",
-    selectionMode: "multiple",
-    isMultiline: true,
-    labelPlacement: "outside",
-    classNames: {
-      base: "max-w-xs",
-      trigger: "min-h-12 py-2",
-    },
-    renderValue: (items: SelectedItems<User>) => {
-      return (
-        <div className="flex flex-wrap gap-2">
-          {items.map((item) => (
-            <Chip key={item.key}>{item.data?.name}</Chip>
-          ))}
-        </div>
-      );
-    },
-  },
-};
-
-export const WithSections = {
-  render: WithSectionsTemplate,
-
-  args: {
-    ...defaultProps,
-  },
-};
-
-export const WithCustomSectionsStyles = {
-  render: WithCustomSectionsStylesTemplate,
-
-  args: {
-    ...defaultProps,
-  },
-};
-
-export const WithAriaLabel = {
-  render: WithAriaLabelTemplate,
-
-  args: {
-    ...defaultProps,
-    label: "Select an animal 🐹",
-    "aria-label": "Select an animal",
-  },
-};
-
 export const CustomStyles = {
   render: CustomStylesTemplate,
 
@@ -925,11 +933,3 @@ export const CustomStyles = {
     },
   },
 };
-
-export const WithReactHookForm = {
-  render: WithReactHookFormTemplate,
-
-  args: {
-    ...defaultProps,
-  },
-};
diff --git a/packages/components/switch/stories/switch.stories.tsx b/packages/components/switch/stories/switch.stories.tsx
@@ -221,32 +221,32 @@ export const WithIcons = {
   },
 };
 
-export const Controlled = {
-  render: ControlledTemplate,
+export const WithReactHookForm = {
+  render: WithReactHookFormTemplate,
 
   args: {
     ...defaultProps,
   },
 };
 
-export const CustomWithClassNames = {
-  render: CustomWithClassNamesTemplate,
+export const Controlled = {
+  render: ControlledTemplate,
 
   args: {
     ...defaultProps,
   },
 };
 
-export const CustomWithHooks = {
-  render: CustomWithHooksTemplate,
+export const CustomWithClassNames = {
+  render: CustomWithClassNamesTemplate,
 
   args: {
     ...defaultProps,
   },
 };
 
-export const WithReactHookForm = {
-  render: WithReactHookFormTemplate,
+export const CustomWithHooks = {
+  render: CustomWithHooksTemplate,
 
   args: {
     ...defaultProps,