Refactored Storybook UI (#2020)

* refactored Storybook UI * refactored Storybook UI * removed extra cards from the doc, added card for ui components
2023-10-15 00:22:47 +05:00
parent 04090446cc
commit fa9303f545
94 changed files with 98 additions and 112 deletions
@@ -9,7 +9,7 @@ import { TableRecoilScopeContext } from '../../../states/recoil-scope-contexts/T
 import { TableOptionsDropdown } from '../TableOptionsDropdown';

 const meta: Meta<typeof TableOptionsDropdown> = {
-  title: 'UI/Table/Options/TableOptionsDropdown',
+  title: 'UI/Data/DataTable/Options/TableOptionsDropdown',
  component: TableOptionsDropdown,
  decorators: [
    (Story) => (
@@ -47,7 +47,7 @@ const DateFieldDisplayWithContext = ({
 };

 const meta: Meta = {
-  title: 'UI/Field/display/DateFieldDisplay',
+  title: 'UI/Data/Field/Display/DateFieldDisplay',
  component: DateFieldDisplayWithContext,
 };

@@ -60,7 +60,7 @@ const DoubleTextFieldDisplayWithContext = ({
 };

 const meta: Meta = {
-  title: 'UI/Field/display/DoubleTextFieldDisplay',
+  title: 'UI/Data/Field/Display/DoubleTextFieldDisplay',
  component: DoubleTextFieldDisplayWithContext,
 };

@@ -49,7 +49,7 @@ const EmailFieldDisplayWithContext = ({
 };

 const meta: Meta = {
-  title: 'UI/Field/display/EmailFieldDisplay',
+  title: 'UI/Data/Field/Display/EmailFieldDisplay',
  component: EmailFieldDisplayWithContext,
 };

@@ -50,7 +50,7 @@ const MoneyFieldDisplayWithContext = ({
 };

 const meta: Meta = {
-  title: 'UI/Field/display/MoneyFieldDisplay',
+  title: 'UI/Data/Field/Display/MoneyFieldDisplay',
  component: MoneyFieldDisplayWithContext,
 };

@@ -50,7 +50,7 @@ const NumberFieldDisplayWithContext = ({
 };

 const meta: Meta = {
-  title: 'UI/Field/display/NumberFieldDisplay',
+  title: 'UI/Data/Field/Display/NumberFieldDisplay',
  component: NumberFieldDisplayWithContext,
 };

@@ -49,7 +49,7 @@ const PhoneFieldDisplayWithContext = ({
 };

 const meta: Meta = {
-  title: 'UI/Field/display/PhoneFieldDisplay',
+  title: 'UI/Data/Field/Display/PhoneFieldDisplay',
  component: PhoneFieldDisplayWithContext,
 };

@@ -49,7 +49,7 @@ const TextFieldDisplayWithContext = ({
 };

 const meta: Meta = {
-  title: 'UI/Field/display/TextFieldDisplay',
+  title: 'UI/Data/Field/Display/TextFieldDisplay',
  component: TextFieldDisplayWithContext,
 };

@@ -49,7 +49,7 @@ const URLFieldDisplayWithContext = ({
 };

 const meta: Meta = {
-  title: 'UI/Field/display/URLFieldDisplay',
+  title: 'UI/Data/Field/Display/URLFieldDisplay',
  component: URLFieldDisplayWithContext,
 };

@@ -5,7 +5,7 @@ import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWith
 import { PhoneDisplay } from '../PhoneDisplay'; // Adjust the import path as needed

 const meta: Meta = {
-  title: 'UI/Input/PhoneInputDisplay',
+  title: 'UI/Input/PhoneInputDisplay/PhoneInputDisplay',
  component: PhoneDisplay,
  decorators: [ComponentWithRouterDecorator],
  args: {
@@ -50,7 +50,7 @@ const BooleanFieldInputWithContext = ({
 };

 const meta: Meta = {
-  title: 'UI/Field/input/BooleanFieldInput',
+  title: 'UI/Data/Field/Input/BooleanFieldInput',
  component: BooleanFieldInputWithContext,
  args: {
    value: true,
@@ -88,7 +88,7 @@ const clearMocksDecorator: Decorator = (Story, context) => {
 };

 const meta: Meta = {
-  title: 'UI/Field/input/ChipFieldInput',
+  title: 'UI/Data/Field/Input/ChipFieldInput',
  component: ChipFieldInputWithContext,
  args: {
    value: 'chip',
@@ -70,7 +70,7 @@ const enterJestFn = jest.fn();
 const clickOutsideJestFn = jest.fn();

 const meta: Meta = {
-  title: 'UI/Field/input/DateFieldInput',
+  title: 'UI/Data/Field/Input/DateFieldInput',
  component: DateFieldInputWithContext,
  args: {
    value: formattedDate,
@@ -105,7 +105,7 @@ const clearMocksDecorator: Decorator = (Story, context) => {
 };

 const meta: Meta = {
-  title: 'UI/Field/input/DoubleTextChipFieldInput',
+  title: 'UI/Data/Field/Input/DoubleTextChipFieldInput',
  component: DoubleTextChipFieldInputWithContext,
  args: {
    firstValue: 'first value',
@@ -99,7 +99,7 @@ const clearMocksDecorator: Decorator = (Story, context) => {
 };

 const meta: Meta = {
-  title: 'UI/Field/input/DoubleTextFieldInput',
+  title: 'UI/Data/Field/Input/DoubleTextFieldInput',
  component: DoubleTextFieldInputWithContext,
  args: {
    firstValue: 'first value',
@@ -85,7 +85,7 @@ const clearMocksDecorator: Decorator = (Story, context) => {
 };

 const meta: Meta = {
-  title: 'UI/Field/input/EmailFieldInput',
+  title: 'UI/Data/Field/Input/EmailFieldInput',
  component: EmailFieldInputWithContext,
  args: {
    value: 'username@email.com',
@@ -85,7 +85,7 @@ const clearMocksDecorator: Decorator = (Story, context) => {
 };

 const meta: Meta = {
-  title: 'UI/Field/input/MoneyFieldInput',
+  title: 'UI/Data/Field/Input/MoneyFieldInput',
  component: MoneyFieldInputWithContext,
  args: {
    value: 1000,
@@ -85,7 +85,7 @@ const clearMocksDecorator: Decorator = (Story, context) => {
 };

 const meta: Meta = {
-  title: 'UI/Field/input/NumberFieldInput',
+  title: 'UI/Data/Field/Input/NumberFieldInput',
  component: NumberFieldInputWithContext,
  args: {
    value: 1000,
@@ -85,7 +85,7 @@ const clearMocksDecorator: Decorator = (Story, context) => {
 };

 const meta: Meta = {
-  title: 'UI/Field/input/PhoneFieldInput',
+  title: 'UI/Data/Field/Input/PhoneFieldInput',
  component: PhoneFieldInputWithContext,
  args: {
    value: '+1-12-123-456',
@@ -66,7 +66,7 @@ const clearMocksDecorator: Decorator = (Story, context) => {
 };

 const meta: Meta = {
-  title: 'UI/Field/input/ProbabilityFieldInput',
+  title: 'UI/Data/Field/Input/ProbabilityFieldInput',
  component: ProbabilityFieldInputWithContext,
  args: {
    value: 25,
@@ -76,7 +76,7 @@ const clearMocksDecorator: Decorator = (Story, context) => {
 };

 const meta: Meta = {
-  title: 'UI/Field/input/RelationFieldInput',
+  title: 'UI/Data/Field/Input/RelationFieldInput',
  component: RelationFieldInputWithContext,
  args: {
    useEditButton: true,
@@ -85,7 +85,7 @@ const clearMocksDecorator: Decorator = (Story, context) => {
 };

 const meta: Meta = {
-  title: 'UI/Field/input/TextFieldInput',
+  title: 'UI/Data/Field/Input/TextFieldInput',
  component: TextFieldInputWithContext,
  args: {
    value: 'text',
@@ -85,7 +85,7 @@ const clearMocksDecorator: Decorator = (Story, context) => {
 };

 const meta: Meta = {
-  title: 'UI/Field/input/URLFieldInput',
+  title: 'UI/Data/Field/Input/URLFieldInput',
  component: URLFieldInputWithContext,
  args: {
    value: 'https://username.domain',
@@ -5,7 +5,7 @@ import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 import { Checkmark } from '../Checkmark';

 const meta: Meta<typeof Checkmark> = {
-  title: 'UI/Checkmark/Checkmark',
+  title: 'UI/Display/Checkmark/Checkmark',
  component: Checkmark,
  decorators: [ComponentDecorator],
 };
@@ -7,7 +7,7 @@ import { CatalogStory } from '~/testing/types';
 import { Chip, ChipAccent, ChipSize, ChipVariant } from '../Chip';

 const meta: Meta<typeof Chip> = {
-  title: 'UI/Chip/Chip',
+  title: 'UI/Display/Chip/Chip',
  component: Chip,
 };

@@ -5,7 +5,7 @@ import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWith
 import { EntityChip } from '../EntityChip';

 const meta: Meta<typeof EntityChip> = {
-  title: 'UI/Chip/EntityChip',
+  title: 'UI/Display/Chip/EntityChip',
  component: EntityChip,
  decorators: [ComponentWithRouterDecorator],
  args: {
@@ -5,7 +5,7 @@ import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 import { SoonPill } from '../SoonPill';

 const meta: Meta<typeof SoonPill> = {
-  title: 'UI/Accessories/SoonPill',
+  title: 'UI/Display/Pill/SoonPill',
  component: SoonPill,
  decorators: [ComponentDecorator],
 };
@@ -10,7 +10,7 @@ import { CatalogStory } from '~/testing/types';
 import { Tag, TagColor } from '../Tag';

 const meta: Meta<typeof Tag> = {
-  title: 'UI/Tag/Tag',
+  title: 'UI/Display/Tag/Tag',
  component: Tag,
 };

@@ -9,7 +9,7 @@ const placeholderText =
  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tellus diam, rhoncus nec consequat quis, dapibus quis massa. Praesent tincidunt augue at ex bibendum, non finibus augue faucibus. In at gravida orci. Nulla facilisi. Proin ut augue ut nisi pellentesque tristique. Proin sodales libero id turpis tincidunt posuere.';

 const meta: Meta<typeof OverflowingTextWithTooltip> = {
-  title: 'UI/Tooltip/OverflowingTextWithTooltip',
+  title: 'UI/Display/Tooltip/OverflowingTextWithTooltip',
  component: OverflowingTextWithTooltip,
 };

@@ -7,7 +7,7 @@ import { CatalogStory } from '~/testing/types';
 import { AppTooltip as Tooltip, TooltipPosition } from '../AppTooltip';

 const meta: Meta<typeof Tooltip> = {
-  title: 'UI/Tooltip/Tooltip',
+  title: 'UI/Display/Tooltip/Tooltip',
  component: Tooltip,
 };

@@ -7,7 +7,7 @@ import { CatalogStory } from '~/testing/types';
 import { H1Title, H1TitleFontColor } from '../H1Title';

 const meta: Meta<typeof H1Title> = {
-  title: 'UI/Title/H1Title',
+  title: 'UI/Display/Typography/Title/H1Title',
  component: H1Title,
  decorators: [ComponentDecorator],
 };
@@ -10,7 +10,7 @@ const args = {
 };

 const meta: Meta<typeof H2Title> = {
-  title: 'UI/Title/H2Title',
+  title: 'UI/Display/Typography/Title/H2Title',
  component: H2Title,
  decorators: [ComponentDecorator],
  args: {
@@ -7,7 +7,7 @@ import { CatalogStory } from '~/testing/types';
 import { CircularProgressBar } from '../CircularProgressBar';

 const meta: Meta<typeof CircularProgressBar> = {
-  title: 'UI/CircularProgressBar/CircularProgressBar',
+  title: 'UI/Feedback/CircularProgressBar/CircularProgressBar',
  component: CircularProgressBar,
  args: {
    size: 50,
@@ -7,7 +7,7 @@ import { CatalogStory } from '~/testing/types';
 import { ProgressBar } from '../ProgressBar';

 const meta: Meta<typeof ProgressBar> = {
-  title: 'UI/ProgressBar/ProgressBar',
+  title: 'UI/Feedback/ProgressBar/ProgressBar',
  component: ProgressBar,
  args: {
    duration: 10000,
@@ -14,7 +14,7 @@ import {
 } from '../Button';

 const meta: Meta<typeof Button> = {
-  title: 'UI/Button/Button',
+  title: 'UI/Input/Button/Button',
  component: Button,
 };

@@ -9,7 +9,7 @@ import { Button, ButtonAccent, ButtonSize, ButtonVariant } from '../Button';
 import { ButtonGroup } from '../ButtonGroup';

 const meta: Meta<typeof ButtonGroup> = {
-  title: 'UI/Button/ButtonGroup',
+  title: 'UI/Input/Button/ButtonGroup',
  component: ButtonGroup,
 };

@@ -8,7 +8,7 @@ import { CatalogStory } from '~/testing/types';
 import { FloatingButton, FloatingButtonSize } from '../FloatingButton';

 const meta: Meta<typeof FloatingButton> = {
-  title: 'UI/Button/FloatingButton',
+  title: 'UI/Input/Button/FloatingButton',
  component: FloatingButton,
 };

@@ -9,7 +9,7 @@ import { FloatingButton, FloatingButtonSize } from '../FloatingButton';
 import { FloatingButtonGroup } from '../FloatingButtonGroup';

 const meta: Meta<typeof FloatingButtonGroup> = {
-  title: 'UI/Button/FloatingButtonGroup',
+  title: 'UI/Input/Button/FloatingButtonGroup',
  component: FloatingButtonGroup,
 };

@@ -11,7 +11,7 @@ import {
 } from '../FloatingIconButton';

 const meta: Meta<typeof FloatingIconButton> = {
-  title: 'UI/Button/FloatingIconButton',
+  title: 'UI/Input/Button/FloatingIconButton',
  component: FloatingIconButton,
 };

@@ -9,7 +9,7 @@ import { FloatingIconButtonSize } from '../FloatingIconButton';
 import { FloatingIconButtonGroup } from '../FloatingIconButtonGroup';

 const meta: Meta<typeof FloatingIconButtonGroup> = {
-  title: 'UI/Button/FloatingIconButtonGroup',
+  title: 'UI/Input/Button/FloatingIconButtonGroup',
  component: FloatingIconButtonGroup,
  args: {
    iconButtons: [
@@ -14,7 +14,7 @@ import {
 } from '../IconButton';

 const meta: Meta<typeof IconButton> = {
-  title: 'UI/Button/IconButton',
+  title: 'UI/Input/Button/IconButton',
  component: IconButton,
 };

@@ -13,7 +13,7 @@ import {
 import { IconButtonGroup } from '../IconButtonGroup';

 const meta: Meta<typeof IconButtonGroup> = {
-  title: 'UI/Button/IconButtonGroup',
+  title: 'UI/Input/Button/IconButtonGroup',
  component: IconButtonGroup,
  args: {
    iconButtons: [
@@ -8,7 +8,7 @@ import { CatalogStory } from '~/testing/types';
 import { LightButton, LightButtonAccent } from '../LightButton';

 const meta: Meta<typeof LightButton> = {
-  title: 'UI/Button/LightButton',
+  title: 'UI/Input/Button/LightButton',
  component: LightButton,
 };

@@ -12,7 +12,7 @@ import {
 } from '../LightIconButton';

 const meta: Meta<typeof LightIconButton> = {
-  title: 'UI/Button/LightIconButton',
+  title: 'UI/Input/Button/LightIconButton',
  component: LightIconButton,
 };

@@ -10,7 +10,7 @@ import { MainButton } from '../MainButton';
 const clickJestFn = jest.fn();

 const meta: Meta<typeof MainButton> = {
-  title: 'UI/Button/MainButton',
+  title: 'UI/Input/Button/MainButton',
  component: MainButton,
  decorators: [ComponentDecorator],
  args: { title: 'A primary Button', onClick: clickJestFn },
@@ -10,7 +10,7 @@ import { RoundedIconButton } from '../RoundedIconButton';
 const clickJestFn = jest.fn();

 const meta: Meta<typeof RoundedIconButton> = {
-  title: 'UI/Button/RoundedIconButton',
+  title: 'UI/Input/Button/RoundedIconButton',
  component: RoundedIconButton,
 };

@@ -14,7 +14,7 @@ const StyledContainer = styled.div`
 `;

 const meta: Meta<typeof ColorSchemeCard> = {
-  title: 'UI/ColorScheme/ColorSchemeCard',
+  title: 'UI/Input/ColorScheme/ColorSchemeCard',
  component: ColorSchemeCard,
  decorators: [
    (Story) => (
@@ -10,7 +10,7 @@ import {
 } from '../AutosizeTextInput';

 const meta: Meta<typeof AutosizeTextInput> = {
-  title: 'UI/Input/AutosizeTextInput',
+  title: 'UI/Input/AutosizeTextInput/AutosizeTextInput',
  component: AutosizeTextInput,
  decorators: [ComponentDecorator],
 };
@@ -12,7 +12,7 @@ import {
 } from '../Checkbox';

 const meta: Meta<typeof Checkbox> = {
-  title: 'UI/Input/Checkbox',
+  title: 'UI/Input/Checkbox/Checkbox',
  component: Checkbox,
 };

@@ -8,7 +8,7 @@ import { sleep } from '~/testing/sleep';
 import { IconPicker } from '../IconPicker';

 const meta: Meta<typeof IconPicker> = {
-  title: 'UI/Input/IconPicker',
+  title: 'UI/Input/IconPicker/IconPicker',
  component: IconPicker,
  decorators: [ComponentDecorator],
 };
@@ -6,7 +6,7 @@ import { workspaceLogoUrl } from '~/testing/mock-data/users';
 import { ImageInput } from '../ImageInput';

 const meta: Meta<typeof ImageInput> = {
-  title: 'UI/Input/ImageInput',
+  title: 'UI/Input/ImageInput/ImageInput',
  component: ImageInput,
  decorators: [ComponentDecorator],
 };
@@ -7,7 +7,7 @@ import { CatalogStory } from '~/testing/types';
 import { LabelPosition, Radio, RadioSize } from '../Radio';

 const meta: Meta<typeof Radio> = {
-  title: 'UI/Input/Radio',
+  title: 'UI/Input/Radio/Radio',
  component: Radio,
 };

@@ -7,7 +7,7 @@ import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 import { InternalDatePicker } from '../InternalDatePicker';

 const meta: Meta<typeof InternalDatePicker> = {
-  title: 'UI/Input/InternalDatePicker',
+  title: 'UI/Input/Internal/InternalDatePicker',
  component: InternalDatePicker,
  decorators: [ComponentDecorator],
  argTypes: {
@@ -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: {
@@ -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 }) => (
@@ -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) => (
@@ -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: {
@@ -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: {
@@ -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' },
@@ -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],
 };
@@ -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,
 };

@@ -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) => (
@@ -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,
 };

@@ -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,
@@ -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: {
@@ -20,7 +20,7 @@ const FilledActionBar = (props: { selectedIds: string[] }) => {
 };

 const meta: Meta<typeof ActionBar> = {
-  title: 'UI/ActionBar/ActionBar',
+  title: 'UI/Navigation/ActionBar/ActionBar',
  component: FilledActionBar,
  decorators: [
    (Story) => (
@@ -6,7 +6,7 @@ import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWith
 import { Breadcrumb } from '../Breadcrumb';

 const meta: Meta<typeof Breadcrumb> = {
-  title: 'UI/Breadcrumb/Breadcrumb',
+  title: 'UI/Navigation/Breadcrumb/Breadcrumb',
  component: Breadcrumb,
  decorators: [ComponentDecorator, ComponentWithRouterDecorator],
  args: {
@@ -26,7 +26,7 @@ const FilledContextMenu = (props: { selectedIds: string[] }) => {
 };

 const meta: Meta<typeof ContextMenu> = {
-  title: 'UI/ContextMenu/ContextMenu',
+  title: 'UI/Navigation/ContextMenu/ContextMenu',
  component: FilledContextMenu,
  decorators: [
    (Story) => (
@@ -6,7 +6,7 @@ import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWith
 import { ContactLink } from '../ContactLink';

 const meta: Meta<typeof ContactLink> = {
-  title: 'UI/Link/ContactLink',
+  title: 'UI/Navigation/Link/ContactLink',
  component: ContactLink,
  decorators: [ComponentWithRouterDecorator],
  args: {
@@ -8,7 +8,7 @@ import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWith
 import { RawLink } from '../RawLink';

 const meta: Meta<typeof RawLink> = {
-  title: 'UI/Link/RawLink',
+  title: 'UI/Navigation/Link/RawLink',
  component: RawLink,
  decorators: [ComponentWithRouterDecorator],
  args: {
@@ -8,7 +8,7 @@ import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWith
 import { RoundedLink } from '../RoundedLink';

 const meta: Meta<typeof RoundedLink> = {
-  title: 'UI/Link/RoundedLink',
+  title: 'UI/Navigation/Link/RoundedLink',
  component: RoundedLink,
  decorators: [ComponentWithRouterDecorator],
  args: {
@@ -8,7 +8,7 @@ import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWith
 import { LinkType, SocialLink } from '../SocialLink';

 const meta: Meta<typeof SocialLink> = {
-  title: 'UI/Link/SocialLink',
+  title: 'UI/Navigation/Link/SocialLink',
  component: SocialLink,
  decorators: [ComponentWithRouterDecorator],
  args: {
@@ -9,7 +9,7 @@ import { MenuItemAccent } from '../../types/MenuItemAccent';
 import { MenuItem } from '../MenuItem';

 const meta: Meta<typeof MenuItem> = {
-  title: 'UI/MenuItem/MenuItem',
+  title: 'UI/Navigation/MenuItem/MenuItem',
  component: MenuItem,
 };

@@ -9,7 +9,7 @@ import { CatalogStory } from '~/testing/types';
 import { MenuItemCommand } from '../MenuItemCommand';

 const meta: Meta<typeof MenuItemCommand> = {
-  title: 'UI/MenuItem/MenuItemCommand',
+  title: 'UI/Navigation/MenuItem/MenuItemCommand',
  component: MenuItemCommand,
 };

@@ -12,7 +12,7 @@ import { MenuItemAccent } from '../../types/MenuItemAccent';
 import { MenuItemDraggable } from '../MenuItemDraggable';

 const meta: Meta<typeof MenuItemDraggable> = {
-  title: 'ui/MenuItem/MenuItemDraggable',
+  title: 'ui/Navigation/MenuItem/MenuItemDraggable',
  component: MenuItemDraggable,
 };

@@ -12,7 +12,7 @@ import { CatalogStory } from '~/testing/types';
 import { MenuItemMultiSelect } from '../MenuItemMultiSelect';

 const meta: Meta<typeof MenuItemMultiSelect> = {
-  title: 'UI/MenuItem/MenuItemMultiSelect',
+  title: 'UI/Navigation/MenuItem/MenuItemMultiSelect',
  component: MenuItemMultiSelect,
 };

@@ -13,7 +13,7 @@ import { CatalogStory } from '~/testing/types';
 import { MenuItemMultiSelectAvatar } from '../MenuItemMultiSelectAvatar';

 const meta: Meta<typeof MenuItemMultiSelectAvatar> = {
-  title: 'UI/MenuItem/MenuItemMultiSelectAvatar',
+  title: 'UI/Navigation/MenuItem/MenuItemMultiSelectAvatar',
  component: MenuItemMultiSelectAvatar,
 };

@@ -12,7 +12,7 @@ import { CatalogStory } from '~/testing/types';
 import { MenuItemNavigate } from '../MenuItemNavigate';

 const meta: Meta<typeof MenuItemNavigate> = {
-  title: 'UI/MenuItem/MenuItemNavigate',
+  title: 'UI/Navigation/MenuItem/MenuItemNavigate',
  component: MenuItemNavigate,
 };

@@ -12,7 +12,7 @@ import { CatalogStory } from '~/testing/types';
 import { MenuItemSelect } from '../MenuItemSelect';

 const meta: Meta<typeof MenuItemSelect> = {
-  title: 'UI/MenuItem/MenuItemSelect',
+  title: 'UI/Navigation/MenuItem/MenuItemSelect',
  component: MenuItemSelect,
 };

@@ -13,7 +13,7 @@ import { CatalogStory } from '~/testing/types';
 import { MenuItemSelectAvatar } from '../MenuItemSelectAvatar';

 const meta: Meta<typeof MenuItemSelectAvatar> = {
-  title: 'UI/MenuItem/MenuItemSelectAvatar',
+  title: 'UI/Navigation/MenuItem/MenuItemSelectAvatar',
  component: MenuItemSelectAvatar,
 };

@@ -12,7 +12,7 @@ import { CatalogStory } from '~/testing/types';
 import { MenuItemSelectColor } from '../MenuItemSelectColor';

 const meta: Meta<typeof MenuItemSelectColor> = {
-  title: 'UI/MenuItem/MenuItemSelectColor',
+  title: 'UI/Navigation/MenuItem/MenuItemSelectColor',
  component: MenuItemSelectColor,
 };

@@ -12,7 +12,7 @@ import { CatalogStory } from '~/testing/types';
 import { MenuItemToggle } from '../MenuItemToggle';

 const meta: Meta<typeof MenuItemToggle> = {
-  title: 'UI/MenuItem/MenuItemToggle',
+  title: 'UI/Navigation/MenuItem/MenuItemToggle',
  component: MenuItemToggle,
 };

@@ -17,7 +17,7 @@ import NavItem from '../NavItem';
 import NavTitle from '../NavTitle';

 const meta: Meta<typeof MainNavbar> = {
-  title: 'UI/Navbar/MainNavbar',
+  title: 'UI/Navigation/Navbar/MainNavbar',
  component: MainNavbar,
 };

@@ -5,7 +5,7 @@ import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 import NavCollapseButton from '../NavCollapseButton';

 const meta: Meta<typeof NavCollapseButton> = {
-  title: 'UI/Navbar/NavCollapseButton',
+  title: 'UI/Navigation/Navbar/NavCollapseButton',
  component: NavCollapseButton,
 };

@@ -9,7 +9,7 @@ import { CatalogStory } from '~/testing/types';
 import NavItem from '../NavItem';

 const meta: Meta<typeof NavItem> = {
-  title: 'UI/Navbar/NavItem',
+  title: 'UI/Navigation/Navbar/NavItem',
  component: NavItem,
 };

@@ -14,7 +14,7 @@ import NavTitle from '../NavTitle';
 import SubMenuNavbar from '../SubMenuNavbar';

 const meta: Meta<typeof SubMenuNavbar> = {
-  title: 'UI/Navbar/SubMenuNavbar',
+  title: 'UI/Navigation/Navbar/SubMenuNavbar',
  component: SubMenuNavbar,
 };