chore: storybook: update named export order to be more consistent using babel

.babelrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: ['babel-plugin-named-exports-order'],
+};

package.json

@@ -120,6 +120,7 @@
     "babel-jest": "27.4.2",
     "babel-loader": "8.2.3",
     "babel-plugin-named-asset-import": "0.3.8",
+    "babel-plugin-named-exports-order": "0.0.2",
     "babel-preset-react-app": "10.0.1",
     "bfj": "7.0.2",
     "browserslist": "4.18.1",

src/components/Accordion/Accordion.stories.tsx

@@ -82,19 +82,20 @@ const Single_Story: ComponentStory<typeof Accordion> = (args) => (
   <Accordion {...args} />
 );
 
-export const Single = Single_Story.bind({});
-
-const List_Vertical_Story: ComponentStory<typeof List> = (args) => (
-  <List {...args} />
-);
-
-export const List_Vertical = List_Vertical_Story.bind({});
+const List_Story: ComponentStory<typeof List> = (args) => <List {...args} />;
 
-const List_Horizontal_Story: ComponentStory<typeof List> = (args) => (
-  <List {...args} />
-);
+export const Single = Single_Story.bind({});
+export const List_Vertical = List_Story.bind({});
+export const List_Horizontal = List_Story.bind({});
 
-export const List_Horizontal = List_Horizontal_Story.bind({});
+// Storybook 6.5 using Webpack >= 5.76.0 automatically alphabetizes exports,
+// this line ensures they are exported in the desired order.
+// See https://www.npmjs.com/package/babel-plugin-named-exports-order
+export const __namedExportsOrder = [
+  'Single',
+  'List_Vertical',
+  'List_Horizontal',
+];
 
 Single.args = {
   children: (

src/components/Avatar/Avatar.stories.tsx

@@ -47,42 +47,22 @@ const imageProps = {
   alt: 'random profile image',
 };
 
-const Avatar_Default_Story: ComponentStory<typeof Avatar> = (args) => (
+const Avatar_Story: ComponentStory<typeof Avatar> = (args) => (
   <Avatar {...args} />
 );
 
-export const Avatar_Default = Avatar_Default_Story.bind({});
-
-const Avatar_Icon_Story: ComponentStory<typeof Avatar> = (args) => (
-  <Avatar {...args} />
-);
-
-export const Avatar_Icon = Avatar_Icon_Story.bind({});
-
 const Avatar_Round_Story: ComponentStory<typeof Avatar> = (args) => (
   <Avatar popupProps={{ content: 'A popup' }} {...args} />
 );
 
-export const Avatar_Round = Avatar_Round_Story.bind({});
-
-const Avatar_Round_Icon_Story: ComponentStory<typeof Avatar> = (args) => (
-  <Avatar {...args} />
-);
-
-export const Avatar_Round_Icon = Avatar_Round_Icon_Story.bind({});
-
 const Avatar_Fallback_Theme_Story: ComponentStory<typeof Avatar> = (args) => (
   <Avatar {...args} theme="green" />
 );
 
-export const Avatar_Fallback_Theme = Avatar_Fallback_Theme_Story.bind({});
-
 const Avatar_Fallback_Hashing_Story: ComponentStory<typeof Avatar> = (args) => (
   <Avatar {...args} hashingFunction={() => 3} />
 );
 
-export const Avatar_Fallback_Hashing = Avatar_Fallback_Hashing_Story.bind({});
-
 const Avatar_StatusItem_Story: ComponentStory<typeof Avatar> = (args) => {
   const avatarSize = 100;
   const [statusItemSize] = getStatusItemSizeAndPadding(avatarSize);
@@ -230,14 +210,33 @@ const Avatar_StatusItem_Story: ComponentStory<typeof Avatar> = (args) => {
   );
 };
 
-export const Avatar_StatusItem = Avatar_StatusItem_Story.bind({});
-
 const Avatar_Tooltip_Story: ComponentStory<typeof Avatar> = (args) => (
   <Avatar {...args} theme="red" />
 );
 
+export const Avatar_Default = Avatar_Story.bind({});
+export const Avatar_Icon = Avatar_Story.bind({});
+export const Avatar_Round = Avatar_Round_Story.bind({});
+export const Avatar_Round_Icon = Avatar_Story.bind({});
+export const Avatar_Fallback_Theme = Avatar_Fallback_Theme_Story.bind({});
+export const Avatar_Fallback_Hashing = Avatar_Fallback_Hashing_Story.bind({});
+export const Avatar_StatusItem = Avatar_StatusItem_Story.bind({});
 export const Avatar_Tooltip = Avatar_Tooltip_Story.bind({});
 
+// Storybook 6.5 using Webpack >= 5.76.0 automatically alphabetizes exports,
+// this line ensures they are exported in the desired order.
+// See https://www.npmjs.com/package/babel-plugin-named-exports-order
+export const __namedExportsOrder = [
+  'Avatar_Default',
+  'Avatar_Icon',
+  'Avatar_Round',
+  'Avatar_Round_Icon',
+  'Avatar_Fallback_Theme',
+  'Avatar_Fallback_Hashing',
+  'Avatar_StatusItem',
+  'Avatar_Tooltip',
+];
+
 const avatarArgs: Object = {
   children: 'JD',
   classNames: 'my-avatar-class',

src/components/Avatar/AvatarGroup.stories.tsx

@@ -198,12 +198,6 @@ const Basic_Story: ComponentStory<typeof AvatarGroup> = (args) => (
   </AvatarGroup>
 );
 
-export const Basic = Basic_Story.bind({});
-
-export const Basic_Spaced = Basic_Story.bind({});
-
-export const Basic_Max_Props_Exceed_Children = Basic_Story.bind({});
-
 const List_Story: ComponentStory<typeof AvatarGroup> = (args) => (
   <AvatarGroup
     animateOnHover
@@ -246,12 +240,25 @@ const List_Story: ComponentStory<typeof AvatarGroup> = (args) => (
   />
 );
 
+export const Basic = Basic_Story.bind({});
+export const Basic_Spaced = Basic_Story.bind({});
+export const Basic_Max_Props_Exceed_Children = Basic_Story.bind({});
 export const List_Group = List_Story.bind({});
-
 export const List_Group_Spaced = List_Story.bind({});
-
 export const List_Group_Max_Props_Exceed_Children = List_Story.bind({});
 
+// Storybook 6.5 using Webpack >= 5.76.0 automatically alphabetizes exports,
+// this line ensures they are exported in the desired order.
+// See https://www.npmjs.com/package/babel-plugin-named-exports-order
+export const __namedExportsOrder = [
+  'Basic',
+  'Basic_Spaced',
+  'Basic_Max_Props_Exceed_Children',
+  'List_Group',
+  'List_Group_Spaced',
+  'List_Group_Max_Props_Exceed_Children',
+];
+
 const avatarGroupArgs: Object = {
   classNames: 'my-avatar-group-class',
   'data-test-id': 'my-avatar-group-test-id',

src/components/Badge/Badge.stories.tsx

@@ -28,23 +28,20 @@ export default {
   },
 } as ComponentMeta<typeof Badge>;
 
-const Badge_Default_Story: ComponentStory<typeof Badge> = (args) => (
-  <Badge {...args} />
-);
+const Badge_Story: ComponentStory<typeof Badge> = (args) => <Badge {...args} />;
 
-export const Badge_Default = Badge_Default_Story.bind({});
+export const Badge_Default = Badge_Story.bind({});
+export const Badge_Active = Badge_Story.bind({});
+export const Badge_Disruptive = Badge_Story.bind({});
 
-const Badge_Active_Story: ComponentStory<typeof Badge> = (args) => (
-  <Badge {...args} />
-);
-
-export const Badge_Active = Badge_Active_Story.bind({});
-
-const Badge_Disruptive_Story: ComponentStory<typeof Badge> = (args) => (
-  <Badge {...args} />
-);
-
-export const Badge_Disruptive = Badge_Disruptive_Story.bind({});
+// Storybook 6.5 using Webpack >= 5.76.0 automatically alphabetizes exports,
+// this line ensures they are exported in the desired order.
+// See https://www.npmjs.com/package/babel-plugin-named-exports-order
+export const __namedExportsOrder = [
+  'Badge_Default',
+  'Badge_Active',
+  'Badge_Disruptive',
+];
 
 const badgeArgs: Object = {
   active: false,

src/components/Button/Button.stories.tsx

@@ -179,6 +179,23 @@ export const Split = Button_Story.bind({});
 export const Split_With_Counter = Button_Story.bind({});
 export const Floating_Button = Button_Story.bind({});
 
+// Storybook 6.5 using Webpack >= 5.76.0 automatically alphabetizes exports,
+// this line ensures they are exported in the desired order.
+// See https://www.npmjs.com/package/babel-plugin-named-exports-order
+export const __namedExportsOrder = [
+  'Primary',
+  'Counter',
+  'Secondary',
+  'Default',
+  'Neutral',
+  'System_UI',
+  'Toggle',
+  'Toggle_With_Counter',
+  'Split',
+  'Split_With_Counter',
+  'Floating_Button',
+];
+
 const buttonArgs: Object = {
   alignIcon: ButtonIconAlign.Left,
   alignText: ButtonTextAlign.Center,

src/components/Card/Card.stories.tsx

@@ -31,17 +31,15 @@ export default {
   },
 } as ComponentMeta<typeof Card>;
 
-const Base_Card_Story: ComponentStory<typeof Card> = (args) => (
-  <Card {...args} />
-);
+const Card_Story: ComponentStory<typeof Card> = (args) => <Card {...args} />;
 
-export const BaseCard = Base_Card_Story.bind({});
+export const BaseCard = Card_Story.bind({});
+export const CustomCard = Card_Story.bind({});
 
-const Custom_Card_Story: ComponentStory<typeof Card> = (args) => (
-  <Card {...args} />
-);
-
-export const CustomCard = Custom_Card_Story.bind({});
+// Storybook 6.5 using Webpack >= 5.76.0 automatically alphabetizes exports,
+// this line ensures they are exported in the desired order.
+// See https://www.npmjs.com/package/babel-plugin-named-exports-order
+export const __namedExportsOrder = ['BaseCard', 'CustomCard'];
 
 const baseCardArgs: Object = {
   dropShadow: true,

src/components/Carousel/Carousel.stories.tsx

@@ -98,6 +98,11 @@ export const Slider = Slide_Story.bind({});
 export const Scroller = Scroll_Story.bind({});
 export const Scroller_Single = Scroll_Story.bind({});
 
+// Storybook 6.5 using Webpack >= 5.76.0 automatically alphabetizes exports,
+// this line ensures they are exported in the desired order.
+// See https://www.npmjs.com/package/babel-plugin-named-exports-order
+export const __namedExportsOrder = ['Slider', 'Scroller', 'Scroller_Single'];
+
 const carouselArgs: Object = {
   classNames: 'my-carousel',
   controls: true,

src/components/CheckBox/CheckBox.stories.tsx

@@ -106,16 +106,12 @@ const CheckBox_Story: ComponentStory<typeof CheckBox> = (args) => (
   <CheckBox checked={true} {...args} />
 );
 
-export const Check_Box = CheckBox_Story.bind({});
-
 const CheckBox_Long_text_Story: ComponentStory<typeof CheckBox> = (args) => (
   <div style={{ width: 200 }}>
     <CheckBox checked={true} {...args} />
   </div>
 );
 
-export const Check_Box_Long_Text = CheckBox_Long_text_Story.bind({});
-
 const CheckBoxGroup_Story: ComponentStory<typeof CheckBoxGroup> = (args) => {
   const [selected, setSelected] = useState<CheckboxValueType[]>([]);
   return (
@@ -130,8 +126,19 @@ const CheckBoxGroup_Story: ComponentStory<typeof CheckBoxGroup> = (args) => {
   );
 };
 
+export const Check_Box = CheckBox_Story.bind({});
+export const Check_Box_Long_Text = CheckBox_Long_text_Story.bind({});
 export const Check_Box_Group = CheckBoxGroup_Story.bind({});
 
+// Storybook 6.5 using Webpack >= 5.76.0 automatically alphabetizes exports,
+// this line ensures they are exported in the desired order.
+// See https://www.npmjs.com/package/babel-plugin-named-exports-order
+export const __namedExportsOrder = [
+  'Check_Box',
+  'Check_Box_Long_Text',
+  'Check_Box_Group',
+];
+
 const checkBoxArgs: Object = {
   allowDisabledFocus: false,
   ariaLabel: 'Label',