Refactored Storybook UI (#2020)

* refactored Storybook UI * refactored Storybook UI * removed extra cards from the doc, added card for ui components
2023-10-14 21:22:47 +02:00
parent 04090446cc
commit fa9303f545
94 changed files with 98 additions and 112 deletions
@@ -1,12 +1,10 @@
 ---
 title: Contributing
 sidebar_position: 1
+description: Learn how you can contribute to the project
 sidebar_custom_props:
  icon: TbTopologyStar
 ---
-import DocCardList from '@theme/DocCardList';
-
-<DocCardList />

 ## Pre-requesites

@@ -1,15 +1,10 @@
 ---
 title: Design System
+description: What our design system looks like
 sidebar_position: 7
 sidebar_custom_props:
  icon: TbPaint
 ---

-import DocCardList from '@theme/DocCardList';
-
-<DocCardList />
-
-# Design System
-
 We rely on our internal and custom design system, that is built on top of styled-components.

@@ -1,16 +1,11 @@
 ---
 title: Folder Architecture
 sidebar_position: 5
+description: A detailed look into our folder architecture
 sidebar_custom_props:
  icon: TbFolder
 ---

-import DocCardList from '@theme/DocCardList';
-
-<DocCardList />
-
-# Folder Architecture
-
 In this guide, you will explore the details of the project directory structure and how it contributes to the organization and maintainability of Twenty.

 By following this folder architecture convention, it is easier to find the files related to specific features and ensure that the application is scalable and maintainable.
@@ -1,14 +1,11 @@
 ---
 title: Work with Figma
+description: Learn how you can collaborate with Twenty's Figma
 sidebar_position: 2
 sidebar_custom_props:
  icon: TbBrandFigma
 ---

-import DocCardList from '@theme/DocCardList';
-
-<DocCardList />
-
 Figma is a collaborative interface design tool that aids in bridging the communication barrier between designers and developers.
 In this guide, we'll go over how to collaborate with Twenty’s Figma.

@@ -4,5 +4,6 @@ sidebar_position: 0
 sidebar_custom_props:
  icon: TbBrandFigma
 ---
+import DocCardList from '@theme/DocCardList';

-WIP
+<DocCardList />
@@ -98,7 +98,7 @@ make server-database-reset

 ## Step 5: Start Twenty

-Run the project with the following commands from the `root folder`:
+Run the project with the following commands from the `root` folder:

 ```bash
 make server-start
@@ -113,7 +113,7 @@ You should now have:
 - **Server** available on: [http://localhost:3000/graphql](http://localhost:3000/graphql)
 - **Postgres** available on [http://localhost:5432](http://localhost:5432) and containing database named `default`

-Sign in using our seeded demo account `tim@apple.dev` (password: `Applecar2025`) to start using Twenty
+Sign in using our seeded demo account `tim@apple.dev` (password: `Applecar2025`) to start using Twenty.

 ### Optional

@@ -23,8 +23,8 @@ Try installing [yarn classic](https://classic.yarnpkg.com/lang/en/)!

 ## Missing metadata schema

-During Twenty installation, your postgres database needs to be provisionned with right schemas, extensions and users.
-We provide [different ways](/contributor/local-setup/yarn-setup#step-2-set-up-postgresql-database) to set up your postgres instance
+During Twenty installation, your postgres database needs to be provisioned with right schemas, extensions and users.
+We provide [different ways](/contributor/local-setup/yarn-setup#step-2-set-up-postgresql-database) to set up your postgres instance.

-If you have sucessfully run this provisionning, you should have a `default` and a `metadata` schemas in your database.
+If you sucessfully run this provisioning, you should have a `default` and a `metadata` schemas in your database.
 If you don't, make sure you don't have multiple postgres instance running on your computer.
@@ -214,7 +214,7 @@ li.coming-soon a::after {
 }

 .table-of-contents__link {
-  text-decoration: underline;
+  text-decoration: none;
 }

 a.table-of-contents__link:hover{
@@ -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,
 };