Refactored Storybook UI (#2020)

* refactored Storybook UI

* refactored Storybook UI

* removed extra cards from the doc, added card for ui components

front/src/modules/ui/layout/board/components/__stories__/BoardColumnEditTitleMenu.stories.tsx

@@ -8,7 +8,7 @@ import {
 } from '../BoardColumnEditTitleMenu';
 
 const meta: Meta<typeof BoardColumnEditTitleMenu> = {
-  title: 'UI/Board/BoardColumnMenu',
+  title: 'UI/Layout/Board/BoardColumnMenu',
   component: BoardColumnEditTitleMenu,
   decorators: [ComponentDecorator],
   argTypes: {

front/src/modules/ui/layout/board/components/__stories__/BoardOptionsDropdown.stories.tsx

@@ -10,7 +10,7 @@ import { ComponentWithRecoilScopeDecorator } from '~/testing/decorators/Componen
 import { BoardOptionsDropdown } from '../BoardOptionsDropdown';
 
 const meta: Meta<typeof BoardOptionsDropdown> = {
-  title: 'UI/Board/Options/BoardOptionsDropdown',
+  title: 'UI/Layout/Board/Options/BoardOptionsDropdown',
   component: BoardOptionsDropdown,
   decorators: [
     (Story, { parameters }) => (

front/src/modules/ui/layout/draggable-list/__stories__/DraggableItem.stories.tsx

@@ -8,7 +8,7 @@ import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 import { DraggableItem } from '../components/DraggableItem';
 
 const meta: Meta<typeof DraggableItem> = {
-  title: 'UI/DraggableList/DraggableItem',
+  title: 'UI/Layout/DraggableList/DraggableItem',
   component: DraggableItem,
   decorators: [
     (Story) => (

front/src/modules/ui/layout/draggable-list/__stories__/DraggableList.stories.tsx

@@ -8,7 +8,7 @@ import { DraggableItem } from '../components/DraggableItem';
 import { DraggableList } from '../components/DraggableList';
 
 const meta: Meta<typeof DraggableList> = {
-  title: 'UI/DraggableList/DraggableList',
+  title: 'UI/Layout/DraggableList/DraggableList',
   component: DraggableList,
   decorators: [ComponentDecorator],
   parameters: {

front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenu.stories.tsx

@@ -19,7 +19,7 @@ import { StyledDropdownMenuSeparator } from '../StyledDropdownMenuSeparator';
 import { StyledDropdownMenuSubheader } from '../StyledDropdownMenuSubheader';
 
 const meta: Meta<typeof StyledDropdownMenu> = {
-  title: 'UI/Dropdown/DropdownMenu',
+  title: 'UI/Layout/Dropdown/DropdownMenu',
   component: StyledDropdownMenu,
   decorators: [ComponentDecorator],
   argTypes: {

front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenuInput.stories.tsx

@@ -5,7 +5,7 @@ import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 import { DropdownMenuInput } from '../DropdownMenuInput';
 
 const meta: Meta<typeof DropdownMenuInput> = {
-  title: 'UI/Dropdown/DropdownMenuInput',
+  title: 'UI/Layout/Dropdown/DropdownMenuInput',
   component: DropdownMenuInput,
   decorators: [ComponentDecorator],
   args: { defaultValue: 'Lorem ipsum' },

front/src/modules/ui/layout/modal/components/__stories__/ConfirmModal.stories.tsx

@@ -5,7 +5,7 @@ import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 import { ConfirmationModal } from '../ConfirmationModal';
 
 const meta: Meta<typeof ConfirmationModal> = {
-  title: 'UI/Modal/ConfirmationModal',
+  title: 'UI/Layout/Modal/ConfirmationModal',
   component: ConfirmationModal,
   decorators: [ComponentDecorator],
 };

front/src/modules/ui/layout/modal/components/__stories__/Modal.stories.tsx

@@ -6,7 +6,7 @@ import { Modal } from '../Modal';
 import { ModalHotkeyScope } from '../types/ModalHotkeyScope';
 
 const meta: Meta<typeof Modal> = {
-  title: 'UI/Modal/Modal',
+  title: 'UI/Layout/Modal/Modal',
   component: Modal,
 };
 

front/src/modules/ui/layout/right-drawer/components/__stories__/RightDrawerTopBar.stories.tsx

@@ -6,7 +6,7 @@ import { graphqlMocks } from '~/testing/graphqlMocks';
 import { RightDrawerTopBar } from '../RightDrawerTopBar';
 
 const meta: Meta<typeof RightDrawerTopBar> = {
-  title: 'UI/RightDrawer/RightDrawerTopBar',
+  title: 'UI/Layout/RightDrawer/RightDrawerTopBar',
   component: RightDrawerTopBar,
   decorators: [
     (Story) => (

front/src/modules/ui/layout/tab/components/__stories__/Tab.stories.tsx

@@ -8,7 +8,7 @@ import { CatalogStory } from '~/testing/types';
 import { Tab } from '../Tab';
 
 const meta: Meta<typeof Tab> = {
-  title: 'UI/Tab/Tab',
+  title: 'UI/Layout/Tab/Tab',
   component: Tab,
 };
 

front/src/modules/ui/layout/tab/components/__stories__/Tablist.stories.tsx

@@ -38,7 +38,7 @@ const tabs = [
 ];
 
 const meta: Meta<typeof TabList> = {
-  title: 'UI/Tab/TabList',
+  title: 'UI/Layout/Tab/TabList',
   component: TabList,
   args: {
     tabs: tabs,

front/src/modules/ui/layout/table/components/__stories__/Table.stories.tsx

@@ -9,7 +9,7 @@ import { TableRow } from '../TableRow';
 import { TableSection } from '../TableSection';
 
 const meta: Meta<typeof Table> = {
-  title: 'UI/Table/Table',
+  title: 'UI/Layout/Table/Table',
   component: Table,
   decorators: [ComponentDecorator],
   argTypes: {