Organize storybook stories

Author: jeradrutnam

packages/oxygen-ui-docs/.storybook/preview.js

@@ -170,7 +170,36 @@ const preview = {
 
     options: {
       storySort: {
-        order: ['Welcome', 'Inputs', 'DataDisplay', '*', 'Theming', 'Animations', 'Utils', 'MUI X'],
+        order: [
+          'Welcome',
+          'App Elements', [
+            'App Shell',
+            'Header',
+            'User Menu',
+            'Sidebar',
+            'Footer',
+            'Page Content',
+            'Page Title',
+            '*'
+          ],
+          'Tables',
+          'Inputs',
+          'Data Display',
+          '*',
+          'Theming',
+          'Animations',
+          'Templates', [
+            'Overview',
+            '*',
+          ],
+          'Utils', [
+            '*',
+            'useTheme',
+            'useThemeContent',
+            'useMediaQuery',
+          ],
+          'MUI X'
+        ],
       },
     },
 

packages/oxygen-ui-docs/stories/AppElements/CodeBlock.stories.tsx

@@ -22,7 +22,7 @@ import { Stack, Typography } from '@wso2/oxygen-ui';
 import React from 'react';
 
 const meta: Meta<typeof CodeBlock> = {
-  title: 'App Elements/CodeBlock',
+  title: 'App Elements/Code Block',
   component: CodeBlock,
   tags: ['autodocs'],
   parameters: {

packages/oxygen-ui-docs/stories/AppElements/FormElements.stories.tsx

@@ -38,7 +38,7 @@ import { PencilIcon, GitBranchIcon, BoxIcon } from '@wso2/oxygen-ui-icons-react'
  * Built using MUI components with Form wrappers for consistent styling.
  */
 const meta: Meta = {
-  title: 'App Elements/FormElements',
+  title: 'App Elements/Form Elements',
   parameters: {
     layout: 'padded',
     docs: {

packages/oxygen-ui-docs/stories/AppElements/NotificationBanner.stories.tsx

@@ -25,7 +25,7 @@ import { NotificationBanner, Box, Button } from '@wso2/oxygen-ui';
  * important announcements or notifications at the top of the application.
  */
 const meta: Meta<typeof NotificationBanner> = {
-  title: 'App Elements/NotificationBanner',
+  title: 'App Elements/Notification Banner',
   component: NotificationBanner,
   tags: ['autodocs'],
   parameters: {

packages/oxygen-ui-docs/stories/AppElements/NotificationPanel.stories.tsx

@@ -35,7 +35,7 @@ import {
  * headers, tabs, action buttons, and notification lists.
  */
 const meta: Meta<typeof NotificationPanel> = {
-  title: 'App Elements/NotificationPanel',
+  title: 'App Elements/Notification Panel',
   component: NotificationPanel,
   tags: ['autodocs'],
   parameters: {

…-docs/stories/MUI X/DataGrid.stories.tsx …stories/DataDisplay/DataGrid.stories.tsxpackages/oxygen-ui-docs/stories/MUI X/DataGrid.stories.tsx renamed to packages/oxygen-ui-docs/stories/DataDisplay/DataGrid.stories.tsx packages/oxygen-ui-docs/stories/MUI X/DataGrid.stories.tsx renamed to packages/oxygen-ui-docs/stories/DataDisplay/DataGrid.stories.tsx

@@ -23,7 +23,7 @@ import { DataGrid } from '@wso2/oxygen-ui';
 const { DataGrid: DataGridComponent } = DataGrid;
 
 const meta: Meta<typeof DataGridComponent> = {
-  title: 'MUI X/DataGrid',
+  title: 'Data Display/DataGrid',
   component: DataGridComponent,
   parameters: {
     layout: 'centered',

…-docs/stories/MUI X/TreeView.stories.tsx …stories/DataDisplay/TreeView.stories.tsxpackages/oxygen-ui-docs/stories/MUI X/TreeView.stories.tsx renamed to packages/oxygen-ui-docs/stories/DataDisplay/TreeView.stories.tsx packages/oxygen-ui-docs/stories/MUI X/TreeView.stories.tsx renamed to packages/oxygen-ui-docs/stories/DataDisplay/TreeView.stories.tsx

@@ -28,7 +28,7 @@ const { SimpleTreeView, TreeItem } = TreeView;
  * Read more at: https://mui.com/x/react-tree-view/
  */
 const meta: Meta<typeof SimpleTreeView> = {
-  title: 'MUI X/TreeView',
+  title: 'Data Display/TreeView',
   component: SimpleTreeView,
   parameters: {
     layout: 'centered',