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
--- a/front/src/modules/ui/data/data-table/options/components/stories/TableOptionsDropdown.stories.tsx
+++ b/front/src/modules/ui/data/data-table/options/components/stories/TableOptionsDropdown.stories.tsx
@ -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) => (
--- a/front/src/modules/ui/data/field/meta-types/display/components/stories/DateFieldDisplay.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/display/components/stories/DateFieldDisplay.stories.tsx
@ -47,7 +47,7 @@ const DateFieldDisplayWithContext = ({
 };

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

--- a/front/src/modules/ui/data/field/meta-types/display/components/stories/DoubleTextFieldDisplay.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/display/components/stories/DoubleTextFieldDisplay.stories.tsx
@ -60,7 +60,7 @@ const DoubleTextFieldDisplayWithContext = ({
 };

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

--- a/front/src/modules/ui/data/field/meta-types/display/components/stories/EmailFieldDisplay.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/display/components/stories/EmailFieldDisplay.stories.tsx
@ -49,7 +49,7 @@ const EmailFieldDisplayWithContext = ({
 };

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

--- a/front/src/modules/ui/data/field/meta-types/display/components/stories/MoneyFieldDisplay.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/display/components/stories/MoneyFieldDisplay.stories.tsx
@ -50,7 +50,7 @@ const MoneyFieldDisplayWithContext = ({
 };

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

--- a/front/src/modules/ui/data/field/meta-types/display/components/stories/NumberFieldDisplay.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/display/components/stories/NumberFieldDisplay.stories.tsx
@ -50,7 +50,7 @@ const NumberFieldDisplayWithContext = ({
 };

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

--- a/front/src/modules/ui/data/field/meta-types/display/components/stories/PhoneFieldDisplay.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/display/components/stories/PhoneFieldDisplay.stories.tsx
@ -49,7 +49,7 @@ const PhoneFieldDisplayWithContext = ({
 };

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

--- a/front/src/modules/ui/data/field/meta-types/display/components/stories/TextFieldDisplay.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/display/components/stories/TextFieldDisplay.stories.tsx
@ -49,7 +49,7 @@ const TextFieldDisplayWithContext = ({
 };

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

--- a/front/src/modules/ui/data/field/meta-types/display/components/stories/URLFieldDisplay.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/display/components/stories/URLFieldDisplay.stories.tsx
@ -49,7 +49,7 @@ const URLFieldDisplayWithContext = ({
 };

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

--- a/front/src/modules/ui/data/field/meta-types/display/content-display/components/stories/PhoneInputDisplay.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/display/content-display/components/stories/PhoneInputDisplay.stories.tsx
@ -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: {
--- a/front/src/modules/ui/data/field/meta-types/input/components/stories/BooleanFieldInput.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/input/components/stories/BooleanFieldInput.stories.tsx
@ -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,
--- a/front/src/modules/ui/data/field/meta-types/input/components/stories/ChipFieldInput.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/input/components/stories/ChipFieldInput.stories.tsx
@ -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',
--- a/front/src/modules/ui/data/field/meta-types/input/components/stories/DateFieldInput.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/input/components/stories/DateFieldInput.stories.tsx
@ -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,
--- a/front/src/modules/ui/data/field/meta-types/input/components/stories/DoubleTextChipFieldInput.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/input/components/stories/DoubleTextChipFieldInput.stories.tsx
@ -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',
--- a/front/src/modules/ui/data/field/meta-types/input/components/stories/DoubleTextFieldInput.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/input/components/stories/DoubleTextFieldInput.stories.tsx
@ -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',
--- a/front/src/modules/ui/data/field/meta-types/input/components/stories/EmailFieldInput.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/input/components/stories/EmailFieldInput.stories.tsx
@ -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',
--- a/front/src/modules/ui/data/field/meta-types/input/components/stories/MoneyFieldInput.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/input/components/stories/MoneyFieldInput.stories.tsx
@ -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,
--- a/front/src/modules/ui/data/field/meta-types/input/components/stories/NumberFieldInput.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/input/components/stories/NumberFieldInput.stories.tsx
@ -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,
--- a/front/src/modules/ui/data/field/meta-types/input/components/stories/PhoneFieldInput.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/input/components/stories/PhoneFieldInput.stories.tsx
@ -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',
--- a/front/src/modules/ui/data/field/meta-types/input/components/stories/ProbabilityFieldInput.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/input/components/stories/ProbabilityFieldInput.stories.tsx
@ -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,
--- a/front/src/modules/ui/data/field/meta-types/input/components/stories/RelationFieldInput.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/input/components/stories/RelationFieldInput.stories.tsx
@ -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,
--- a/front/src/modules/ui/data/field/meta-types/input/components/stories/TextFieldInput.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/input/components/stories/TextFieldInput.stories.tsx
@ -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',
--- a/front/src/modules/ui/data/field/meta-types/input/components/stories/URLFieldInput.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/input/components/stories/URLFieldInput.stories.tsx
@ -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',
--- a/front/src/modules/ui/display/checkmark/components/stories/Checkmark.stories.tsx
+++ b/front/src/modules/ui/display/checkmark/components/stories/Checkmark.stories.tsx
@ -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],
 };
--- a/front/src/modules/ui/display/chip/components/stories/Chip.stories.tsx
+++ b/front/src/modules/ui/display/chip/components/stories/Chip.stories.tsx
@ -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,
 };

--- a/front/src/modules/ui/display/chip/components/stories/EntityChip.stories.tsx
+++ b/front/src/modules/ui/display/chip/components/stories/EntityChip.stories.tsx
@ -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: {
--- a/front/src/modules/ui/display/pill/components/stories/SoonPill.stories.tsx
+++ b/front/src/modules/ui/display/pill/components/stories/SoonPill.stories.tsx
@ -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],
 };
--- a/front/src/modules/ui/display/tag/components/stories/Tag.stories.tsx
+++ b/front/src/modules/ui/display/tag/components/stories/Tag.stories.tsx
@ -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,
 };

--- a/front/src/modules/ui/display/tooltip/stories/OverflowTextWithTooltip.stories.tsx
+++ b/front/src/modules/ui/display/tooltip/stories/OverflowTextWithTooltip.stories.tsx
@ -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,
 };

--- a/front/src/modules/ui/display/tooltip/stories/Tooltip.stories.tsx
+++ b/front/src/modules/ui/display/tooltip/stories/Tooltip.stories.tsx
@ -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,
 };

--- a/front/src/modules/ui/display/typography/components/stories/H1Title.stories.tsx
+++ b/front/src/modules/ui/display/typography/components/stories/H1Title.stories.tsx
@ -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],
 };
--- a/front/src/modules/ui/display/typography/components/stories/H2Title.stories.tsx
+++ b/front/src/modules/ui/display/typography/components/stories/H2Title.stories.tsx
@ -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: {
--- a/front/src/modules/ui/feedback/progress-bar/components/stories/CircularProgressBar.stories.tsx
+++ b/front/src/modules/ui/feedback/progress-bar/components/stories/CircularProgressBar.stories.tsx
@ -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,
--- a/front/src/modules/ui/feedback/progress-bar/components/stories/ProgressBar.stories.tsx
+++ b/front/src/modules/ui/feedback/progress-bar/components/stories/ProgressBar.stories.tsx
@ -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,
--- a/front/src/modules/ui/input/button/components/stories/Button.stories.tsx
+++ b/front/src/modules/ui/input/button/components/stories/Button.stories.tsx
@ -14,7 +14,7 @@ import {
 } from '../Button';

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

--- a/front/src/modules/ui/input/button/components/stories/ButtonGroup.stories.tsx
+++ b/front/src/modules/ui/input/button/components/stories/ButtonGroup.stories.tsx
@ -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,
 };

--- a/front/src/modules/ui/input/button/components/stories/FloatingButton.stories.tsx
+++ b/front/src/modules/ui/input/button/components/stories/FloatingButton.stories.tsx
@ -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,
 };

--- a/front/src/modules/ui/input/button/components/stories/FloatingButtonGroup.stories.tsx
+++ b/front/src/modules/ui/input/button/components/stories/FloatingButtonGroup.stories.tsx
@ -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,
 };

--- a/front/src/modules/ui/input/button/components/stories/FloatingIconButton.stories.tsx
+++ b/front/src/modules/ui/input/button/components/stories/FloatingIconButton.stories.tsx
@ -11,7 +11,7 @@ import {
 } from '../FloatingIconButton';

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

--- a/front/src/modules/ui/input/button/components/stories/FloatingIconButtonGroup.stories.tsx
+++ b/front/src/modules/ui/input/button/components/stories/FloatingIconButtonGroup.stories.tsx
@ -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: [
--- a/front/src/modules/ui/input/button/components/stories/IconButton.stories.tsx
+++ b/front/src/modules/ui/input/button/components/stories/IconButton.stories.tsx
@ -14,7 +14,7 @@ import {
 } from '../IconButton';

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

--- a/front/src/modules/ui/input/button/components/stories/IconButtonGroup.stories.tsx
+++ b/front/src/modules/ui/input/button/components/stories/IconButtonGroup.stories.tsx
@ -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: [
--- a/front/src/modules/ui/input/button/components/stories/LightButton.stories.tsx
+++ b/front/src/modules/ui/input/button/components/stories/LightButton.stories.tsx
@ -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,
 };

--- a/front/src/modules/ui/input/button/components/stories/LightIconButton.stories.tsx
+++ b/front/src/modules/ui/input/button/components/stories/LightIconButton.stories.tsx
@ -12,7 +12,7 @@ import {
 } from '../LightIconButton';

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

--- a/front/src/modules/ui/input/button/components/stories/MainButton.stories.tsx
+++ b/front/src/modules/ui/input/button/components/stories/MainButton.stories.tsx
@ -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 },
--- a/front/src/modules/ui/input/button/components/stories/RoundedIconButton.stories.tsx
+++ b/front/src/modules/ui/input/button/components/stories/RoundedIconButton.stories.tsx
@ -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,
 };

--- a/front/src/modules/ui/input/color-scheme/components/stories/ColorSchemeCard.stories.tsx
+++ b/front/src/modules/ui/input/color-scheme/components/stories/ColorSchemeCard.stories.tsx
@ -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) => (
--- a/front/src/modules/ui/input/components/stories/AutosizeTextInput.stories.tsx
+++ b/front/src/modules/ui/input/components/stories/AutosizeTextInput.stories.tsx
@ -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],
 };
--- a/front/src/modules/ui/input/components/stories/Checkbox.stories.tsx
+++ b/front/src/modules/ui/input/components/stories/Checkbox.stories.tsx
@ -12,7 +12,7 @@ import {
 } from '../Checkbox';

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

--- a/front/src/modules/ui/input/components/stories/IconPicker.stories.tsx
+++ b/front/src/modules/ui/input/components/stories/IconPicker.stories.tsx
@ -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],
 };
--- a/front/src/modules/ui/input/components/stories/ImageInput.stories.tsx
+++ b/front/src/modules/ui/input/components/stories/ImageInput.stories.tsx
@ -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],
 };
--- a/front/src/modules/ui/input/components/stories/Radio.stories.tsx
+++ b/front/src/modules/ui/input/components/stories/Radio.stories.tsx
@ -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,
 };

--- a/front/src/modules/ui/input/components/internal/date/components/stories/DatePicker.stories.tsx
+++ b/front/src/modules/ui/input/components/internal/date/components/stories/DatePicker.stories.tsx
@ -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: {
--- a/front/src/modules/ui/layout/board/components/stories/BoardColumnEditTitleMenu.stories.tsx
+++ b/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: {
--- a/front/src/modules/ui/layout/board/components/stories/BoardOptionsDropdown.stories.tsx
+++ b/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 }) => (
--- a/front/src/modules/ui/layout/draggable-list/stories/DraggableItem.stories.tsx
+++ b/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) => (
--- a/front/src/modules/ui/layout/draggable-list/stories/DraggableList.stories.tsx
+++ b/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: {
--- a/front/src/modules/ui/layout/dropdown/components/stories/DropdownMenu.stories.tsx
+++ b/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: {
--- a/front/src/modules/ui/layout/dropdown/components/stories/DropdownMenuInput.stories.tsx
+++ b/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' },
--- a/front/src/modules/ui/layout/modal/components/stories/ConfirmModal.stories.tsx
+++ b/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],
 };
--- a/front/src/modules/ui/layout/modal/components/stories/Modal.stories.tsx
+++ b/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,
 };

--- a/front/src/modules/ui/layout/right-drawer/components/stories/RightDrawerTopBar.stories.tsx
+++ b/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) => (
--- a/front/src/modules/ui/layout/tab/components/stories/Tab.stories.tsx
+++ b/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,
 };

--- a/front/src/modules/ui/layout/tab/components/stories/Tablist.stories.tsx
+++ b/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,
--- a/front/src/modules/ui/layout/table/components/stories/Table.stories.tsx
+++ b/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: {
--- a/front/src/modules/ui/navigation/action-bar/components/stories/ActionBar.stories.tsx
+++ b/front/src/modules/ui/navigation/action-bar/components/stories/ActionBar.stories.tsx
@ -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) => (
--- a/front/src/modules/ui/navigation/bread-crumb/components/stories/Breadcrumb.stories.tsx
+++ b/front/src/modules/ui/navigation/bread-crumb/components/stories/Breadcrumb.stories.tsx
@ -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: {
--- a/front/src/modules/ui/navigation/context-menu/components/stories/ContextMenu.stories.tsx
+++ b/front/src/modules/ui/navigation/context-menu/components/stories/ContextMenu.stories.tsx
@ -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) => (
--- a/front/src/modules/ui/navigation/link/components/stories/ContactLink.stories.tsx
+++ b/front/src/modules/ui/navigation/link/components/stories/ContactLink.stories.tsx
@ -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: {
--- a/front/src/modules/ui/navigation/link/components/stories/RawLink.stories.tsx
+++ b/front/src/modules/ui/navigation/link/components/stories/RawLink.stories.tsx
@ -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: {
--- a/front/src/modules/ui/navigation/link/components/stories/RoundedLink.stories.tsx
+++ b/front/src/modules/ui/navigation/link/components/stories/RoundedLink.stories.tsx
@ -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: {
--- a/front/src/modules/ui/navigation/link/components/stories/SocialLink.stories.tsx
+++ b/front/src/modules/ui/navigation/link/components/stories/SocialLink.stories.tsx
@ -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: {
--- a/front/src/modules/ui/navigation/menu-item/components/stories/MenuItem.stories.tsx
+++ b/front/src/modules/ui/navigation/menu-item/components/stories/MenuItem.stories.tsx
@ -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,
 };

--- a/front/src/modules/ui/navigation/menu-item/components/stories/MenuItemCommand.stories.tsx
+++ b/front/src/modules/ui/navigation/menu-item/components/stories/MenuItemCommand.stories.tsx
@ -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,
 };

--- a/front/src/modules/ui/navigation/menu-item/components/stories/MenuItemDraggable.stories.tsx
+++ b/front/src/modules/ui/navigation/menu-item/components/stories/MenuItemDraggable.stories.tsx
@ -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,
 };

--- a/front/src/modules/ui/navigation/menu-item/components/stories/MenuItemMultiSelect.stories.tsx
+++ b/front/src/modules/ui/navigation/menu-item/components/stories/MenuItemMultiSelect.stories.tsx
@ -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,
 };

--- a/front/src/modules/ui/navigation/menu-item/components/stories/MenuItemMultiSelectAvatar.stories.tsx
+++ b/front/src/modules/ui/navigation/menu-item/components/stories/MenuItemMultiSelectAvatar.stories.tsx
@ -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,
 };

--- a/front/src/modules/ui/navigation/menu-item/components/stories/MenuItemNavigate.stories.tsx
+++ b/front/src/modules/ui/navigation/menu-item/components/stories/MenuItemNavigate.stories.tsx
@ -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,
 };

--- a/front/src/modules/ui/navigation/menu-item/components/stories/MenuItemSelect.stories.tsx
+++ b/front/src/modules/ui/navigation/menu-item/components/stories/MenuItemSelect.stories.tsx
@ -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,
 };

--- a/front/src/modules/ui/navigation/menu-item/components/stories/MenuItemSelectAvatar.stories.tsx
+++ b/front/src/modules/ui/navigation/menu-item/components/stories/MenuItemSelectAvatar.stories.tsx
@ -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,
 };

--- a/front/src/modules/ui/navigation/menu-item/components/stories/MenuItemSelectColor.stories.tsx
+++ b/front/src/modules/ui/navigation/menu-item/components/stories/MenuItemSelectColor.stories.tsx
@ -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,
 };

--- a/front/src/modules/ui/navigation/menu-item/components/stories/MenuItemToggle.stories.tsx
+++ b/front/src/modules/ui/navigation/menu-item/components/stories/MenuItemToggle.stories.tsx
@ -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,
 };

--- a/front/src/modules/ui/navigation/navbar/components/stories/MainNavbar.stories.tsx
+++ b/front/src/modules/ui/navigation/navbar/components/stories/MainNavbar.stories.tsx
@ -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,
 };

--- a/front/src/modules/ui/navigation/navbar/components/stories/NavCollapseButton.stories.tsx
+++ b/front/src/modules/ui/navigation/navbar/components/stories/NavCollapseButton.stories.tsx
@ -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,
 };

--- a/front/src/modules/ui/navigation/navbar/components/stories/NavItem.stories.tsx
+++ b/front/src/modules/ui/navigation/navbar/components/stories/NavItem.stories.tsx
@ -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,
 };

--- a/front/src/modules/ui/navigation/navbar/components/stories/SubMenuNavbar.stories.tsx
+++ b/front/src/modules/ui/navigation/navbar/components/stories/SubMenuNavbar.stories.tsx
@ -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,
 };