refactor(Storybook): improve components hierarchy

packages/storybook/.storybook/preview.tsx

@@ -15,6 +15,11 @@ export const decorators = [
 ];
 
 export const parameters = {
+    options: {
+        storySort: {
+            method: 'alphabetical'
+        }
+    },
     docs: {
         container: DocsContainer,
         page: DocsPage,

packages/storybook/stories/0-intro.stories.mdx

@@ -1,7 +1,7 @@
 import { Button, DesignSystem, InlineMessage, testTheme } from '@equisoft/design-elements-react';
 import { ArgsTable, Canvas, Meta } from '@storybook/addon-docs/blocks';
 
-<Meta title="Intro" />
+<Meta title="Introduction" />
 
 # Equisoft's Design System
 ## Getting Started

packages/storybook/stories/buttons/add-button.stories.tsx → packages/storybook/stories/add-button.stories.tsx

@@ -1,10 +1,10 @@
 import { AddButton } from '@equisoft/design-elements-react';
 import { Story } from '@storybook/react';
 import React from 'react';
-import { InvertedBackground } from '../utils/inverted-background';
+import { InvertedBackground } from './utils/inverted-background';
 
 export default {
-    title: 'Buttons/Add',
+    title: 'Controls/Add Button',
     component: AddButton,
 };
 

packages/storybook/stories/application-menu.stories.tsx

@@ -6,7 +6,7 @@ import { RouterDecorator } from './utils/router-decorator';
 import CustomLogoSvg from './assets/customLogo.svg';
 
 export default {
-    title: 'Application Menu',
+    title: 'Structure/Application Menu',
     component: ApplicationMenu,
     decorators: [RouterDecorator],
 };

packages/storybook/stories/avatar.stories.tsx

@@ -5,7 +5,7 @@ import { DesktopDecorator, MobileDecorator } from './utils/device-context-decora
 import AvatarImg from './assets/avatars.png';
 
 export default {
-    title: 'Avatar',
+    title: 'Data/Avatar',
     component: Avatar,
 };
 

packages/storybook/stories/banner.stories.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { DeviceContextDecorator } from './utils/device-context-decorator';
 
 export default {
-    title: 'Banner',
+    title: 'Feedback/Banner',
     component: Banner,
     decorators: [DeviceContextDecorator],
 };

packages/storybook/stories/navigation/breadcrumb.stories.tsx → packages/storybook/stories/breadcrumb.stories.tsx

@@ -1,7 +1,7 @@
 import { Breadcrumb, BreadcrumbElement } from '@equisoft/design-elements-react';
 import { Story } from '@storybook/react';
 import React from 'react';
-import { RouterDecorator } from '../utils/router-decorator';
+import { RouterDecorator } from './utils/router-decorator';
 
 const routeMap = (length: number): BreadcrumbElement[] => {
     const routes = [];

packages/storybook/stories/buttons/buttons.stories.tsx → packages/storybook/stories/buttons.stories.tsx

@@ -1,10 +1,10 @@
 import { Button } from '@equisoft/design-elements-react';
 import { Story } from '@storybook/react';
 import React from 'react';
-import { InvertedBackground } from '../utils/inverted-background';
+import { InvertedBackground } from './utils/inverted-background';
 
 export default {
-    title: 'Buttons',
+    title: 'Controls/Button',
     component: Button,
 };
 

packages/storybook/stories/card-link.stories.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { RouterDecorator } from './utils/router-decorator';
 
 export default {
-    title: 'Card Link',
+    title: 'Navigation/Card Link',
     component: CardLink,
     decorators: [RouterDecorator],
 };

packages/storybook/stories/card.stories.tsx

@@ -3,7 +3,7 @@ import { Story } from '@storybook/react';
 import * as React from 'react';
 
 export default {
-    title: 'Card',
+    title: 'Structure/Card',
     component: Card,
 };
 

packages/storybook/stories/carousel.stories.tsx

@@ -4,7 +4,7 @@ import React, { ReactNodeArray } from 'react';
 import styled from 'styled-components';
 
 export default {
-    title: 'Carousel',
+    title: 'Disclosure/Carousel',
     component: Carousel,
 };
 

packages/storybook/stories/checkbox-group.stories.tsx

@@ -4,7 +4,7 @@ import { forceReRender, Story } from '@storybook/react';
 import React, { ChangeEvent } from 'react';
 
 export default {
-    title: 'Checkbox Group',
+    title: 'Controls/Checkbox Group',
     component: CheckboxGroup,
 };
 

packages/storybook/stories/chooser-button-group.stories.tsx

@@ -21,7 +21,7 @@ const skipOption = {
 };
 
 export default {
-    title: 'Chooser Button Group',
+    title: 'Controls/Chooser Button Group',
     component: ChooserButtonGroup,
 };
 

packages/storybook/stories/chooser-card.stories.tsx

@@ -3,7 +3,7 @@ import { Story } from '@storybook/react';
 import React, { useState } from 'react';
 
 export default {
-    title: 'Chooser Card',
+    title: 'Controls/Chooser Card',
     component: ChooserCard,
 };
 

packages/storybook/stories/datepicker.stories.tsx

@@ -14,7 +14,7 @@ const upcomingDate = new Date();
 upcomingDate.setDate(upcomingDate.getDate() + 5);
 
 export default {
-    title: 'Datepicker',
+    title: 'Controls/Datepicker',
     component: Datepicker,
     decorators: [decorateWith(Container)],
 };

packages/storybook/stories/enso-spinner.stories.tsx

@@ -3,7 +3,7 @@ import { Story } from '@storybook/react';
 import React from 'react';
 
 export default {
-    title: 'Spinners',
+    title: 'Feedback/Enso Spinner',
     component: EnsoSpinner,
 };
 

packages/storybook/stories/external-link.stories.tsx

@@ -3,7 +3,7 @@ import { Story } from '@storybook/react';
 import React from 'react';
 
 export default {
-    title: 'External Link',
+    title: 'Navigation/External Link',
     component: ExternalLink,
 };
 

packages/storybook/stories/navigation/global-navigation.stories.tsx → packages/storybook/stories/global-navigation.stories.tsx

@@ -1,12 +1,12 @@
 import { GlobalNavigation, GlobalNavigationItem } from '@equisoft/design-elements-react';
 import { Story } from '@storybook/react';
 import React from 'react';
-import { RouterDecorator } from '../utils/router-decorator';
-import { ShadowDomDecorator } from '../utils/shadow-dom-decorator';
-import { ButtonProps } from '../../../react/dist/components/buttons/icon-button';
+import { RouterDecorator } from './utils/router-decorator';
+import { ShadowDomDecorator } from './utils/shadow-dom-decorator';
+import { ButtonProps } from '../../react/dist/components/buttons/icon-button';
 
 export default {
-    title: 'Navigation/Global Navigation',
+    title: 'Structure/Global Navigation',
     component: GlobalNavigation,
     decorators: [RouterDecorator],
 };

packages/storybook/stories/heading.stories.tsx

@@ -2,7 +2,7 @@ import { Heading } from '@equisoft/design-elements-react';
 import React, { VoidFunctionComponent } from 'react';
 
 export default {
-    title: 'Heading',
+    title: 'Text/Heading',
     component: Heading,
 };
 

packages/storybook/stories/buttons/icon-button.stories.tsx → packages/storybook/stories/icon-button.stories.tsx

@@ -1,10 +1,10 @@
 import { IconButton } from '@equisoft/design-elements-react';
 import { Story } from '@storybook/react';
 import React from 'react';
-import { InvertedBackground } from '../utils/inverted-background';
+import { InvertedBackground } from './utils/inverted-background';
 
 export default {
-    title: 'Buttons/Icon',
+    title: 'Controls/Icon Button',
     component: IconButton,
 };
 

packages/storybook/stories/icon/icon-library.stories.tsx → packages/storybook/stories/icon-library.stories.tsx

@@ -3,7 +3,7 @@ import { Story } from '@storybook/react';
 import React, { ComponentType } from 'react';
 
 export default {
-    title: 'Icon/library',
+    title: 'Icons/Library',
     component: Icon,
 };
 

packages/storybook/stories/icon/icon.stories.tsx → packages/storybook/stories/icon.stories.tsx

@@ -3,7 +3,7 @@ import { Story } from '@storybook/react';
 import React from 'react';
 
 export default {
-    title: 'Icon',
+    title: 'Icons/Icon',
     component: Icon,
 };
 

packages/storybook/stories/inline-message.stories.tsx

@@ -3,7 +3,7 @@ import { Story } from '@storybook/react';
 import React from 'react';
 
 export default {
-    title: 'Inline Message',
+    title: 'Feedback/Inline Message',
     component: InlineMessage,
 };
 

packages/storybook/stories/inputs.stories.tsx

@@ -3,7 +3,7 @@ import { Story } from '@storybook/react';
 import React from 'react';
 
 export default {
-    title: 'Input Text Fields',
+    title: 'Controls/Text Input',
     component: TextInput,
 };
 

packages/storybook/stories/results/legend.stories.tsx → packages/storybook/stories/legend.stories.tsx

@@ -20,7 +20,7 @@ const legendItems: LegendItem[] = [
 ];
 
 export default {
-    title: 'Results/Legend',
+    title: 'Data/Legend',
     component: Legend,
 };
 

packages/storybook/stories/listbox.stories.tsx

@@ -3,7 +3,7 @@ import { Story } from '@storybook/react';
 import React from 'react';
 
 export default {
-    title: 'Listbox',
+    title: 'Controls/Listbox',
     component: Listbox,
 };
 

packages/storybook/stories/modal-dialog.stories.mdx

@@ -2,7 +2,7 @@ import {Button, ModalDialog, useModal} from '@equisoft/design-elements-react';
 import {ArgsTable, Meta, Preview, Story} from '@storybook/addon-docs/blocks';
 import {Fragment} from 'react';
 
-<Meta title="Modal / Modal Dialog" component={ModalDialog} />
+<Meta title="Disclosure/Modal Dialog" component={ModalDialog} />
 
 # Modal Dialog
 

packages/storybook/stories/modal.stories.mdx

@@ -2,7 +2,7 @@ import {Button, Modal, useModal} from '@equisoft/design-elements-react';
 import {ArgsTable, Meta, Preview, Story} from '@storybook/addon-docs/blocks';
 import {Fragment} from 'react';
 
-<Meta title="Modal / Modal" component={Modal} />
+<Meta title="Disclosure/Modal" component={Modal} />
 
 # Modal
 

packages/storybook/stories/money-input.stories.tsx

@@ -3,7 +3,7 @@ import { Story } from '@storybook/react';
 import React, { useState } from 'react';
 
 export default {
-    title: 'Money Input',
+    title: 'Controls/Money Input',
     component: MoneyInput,
 };
 

packages/storybook/stories/nav-menu-button.stories.tsx

@@ -7,7 +7,7 @@ import { RouterDecorator } from './utils/router-decorator';
 import { ShadowDomDecorator } from './utils/shadow-dom-decorator';
 
 export default {
-    title: 'Nav Menu Button',
+    title: 'Navigation/Nav Menu Button',
     component: NavMenuButton,
     decorators: [RouterDecorator],
 };

packages/storybook/stories/pagination.stories.tsx

@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import { DeviceContextDecorator } from './utils/device-context-decorator';
 
 export default {
-    title: 'Pagination',
+    title: 'Navigation/Pagination',
     component: Pagination,
     decorators: [DeviceContextDecorator],
 };

packages/storybook/stories/results/progress-bar.stories.tsx → packages/storybook/stories/progress-bar.stories.tsx

@@ -3,7 +3,7 @@ import { Story } from '@storybook/react';
 import React from 'react';
 
 export default {
-    title: 'Results/Progress Bar',
+    title: 'Data/Progress Bar',
     component: ProgressBar,
 };
 

packages/storybook/stories/results/progress-circle.stories.tsx → packages/storybook/stories/progress-circle.stories.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 export default {
-    title: 'Results/Progress Circle',
+    title: 'Data/Progress Circle',
     component: ProgressCircle,
 };
 

packages/storybook/stories/progress.stories.tsx

@@ -3,7 +3,7 @@ import { Story } from '@storybook/react';
 import React from 'react';
 
 export default {
-    title: 'Progress',
+    title: 'Data/Progress',
     component: Progress,
 };
 

packages/storybook/stories/inputs/radio-button-group.stories.tsx → packages/storybook/stories/radio-button-group.stories.tsx

@@ -3,7 +3,7 @@ import { forceReRender, Story } from '@storybook/react';
 import React, { ChangeEvent } from 'react';
 
 export default {
-    title: 'Radio Button Group',
+    title: 'Controls/Radio Button Group',
     component: RadioButtonGroup,
 };
 

packages/storybook/stories/navigation/route-link.stories.tsx → packages/storybook/stories/route-link.stories.tsx

@@ -2,7 +2,7 @@ import { RouteLink } from '@equisoft/design-elements-react';
 import { Story } from '@storybook/react';
 import React from 'react';
 import { Link, NavLink } from 'react-router-dom';
-import { RouterDecorator } from '../utils/router-decorator';
+import { RouterDecorator } from './utils/router-decorator';
 
 export default {
     title: 'Navigation/Route Link',

packages/storybook/stories/inputs/search-contextual.stories.tsx → packages/storybook/stories/search-contextual.stories.tsx

@@ -3,7 +3,7 @@ import { Story } from '@storybook/react';
 import * as React from 'react';
 
 export default {
-    title: 'Search/Search Contextual',
+    title: 'Controls/Search Contextual',
     component: SearchContextual,
 };
 

packages/storybook/stories/inputs/search-global.stories.tsx → packages/storybook/stories/search-global.stories.tsx

@@ -3,7 +3,7 @@ import { Story } from '@storybook/react';
 import React from 'react';
 
 export default {
-    title: 'Search/Search Global',
+    title: 'Controls/Search Global',
     component: SearchGlobal,
 };
 

packages/storybook/stories/select.stories.tsx

@@ -31,7 +31,7 @@ const skipOption = {
 };
 
 export default {
-    title: 'Select',
+    title: 'Controls/Select',
     component: Select,
     decorators: [decorateWith(Container)],
 };

packages/storybook/stories/side-drawer.stories.tsx

@@ -15,7 +15,7 @@ const Box = styled.div`
 `;
 
 export default {
-    title: 'Side Drawer',
+    title: 'Structure/Side Drawer',
     component: SideDrawer,
 };
 

packages/storybook/stories/skip-link.stories.tsx

@@ -3,7 +3,7 @@ import React, { VoidFunctionComponent } from 'react';
 import styled from 'styled-components';
 
 export default {
-    title: 'Skip Link',
+    title: 'Navigation/Skip Link',
     component: SkipLink,
 };