[PB-3528]:feat/reestructuration in folders of the components

src/components/list/List.tsx → src/components/data-display/list/List.tsx

@@ -2,10 +2,10 @@ import _ from 'lodash';
 import React, { ReactNode, useEffect, useRef, useState } from 'react';
 import ListItem from './ListItem';
 import ListHeader, { HeaderProps } from './ListHeader';
-import useHotkeys from '../../hooks/useHotKeys';
-import { SkeletonLoader } from '../skeletonLoader';
-import { InfiniteScroll } from '../infiniteScroll';
-import { MenuItemsType } from '../menu/Menu';
+import useHotkeys from '../../../hooks/useHotKeys';
+import { SkeletonLoader } from '../../feedback/skeletonLoader';
+import { InfiniteScroll } from '../../layout/infiniteScroll';
+import { MenuItemsType } from '../../navigation/menu/Menu';
 
 export interface ListProps<T, F> {
   header: HeaderProps<T, F>[];

src/components/list/ListHeader.tsx → src/components/data-display/list/ListHeader.tsx

@@ -1,6 +1,6 @@
 import { ArrowDown, ArrowUp } from '@phosphor-icons/react';
-import Checkbox from '../checkbox/Checkbox';
-import { MenuItemsType } from '../menu/Menu';
+import Checkbox from '../../input/checkbox/Checkbox';
+import { MenuItemsType } from '../../navigation/menu/Menu';
 
 export type HeaderProps<T, F> = {
   label: string;

src/components/list/ListItem.tsx → src/components/data-display/list/ListItem.tsx

@@ -1,9 +1,9 @@
 import { LegacyRef, useEffect, useRef, useState } from 'react';
 import { DotsThree } from '@phosphor-icons/react';
-import ContextMenu from '../contextMenu/ContextMenu';
-import useHotkeys from '../../hooks/useHotKeys';
-import Checkbox from '../checkbox/Checkbox';
-import { MenuItemsType } from '../menu/Menu';
+import ContextMenu from '../../overlay/contextMenu/ContextMenu';
+import useHotkeys from '../../../hooks/useHotKeys';
+import Checkbox from '../../input/checkbox/Checkbox';
+import { MenuItemsType } from '../../navigation/menu/Menu';
 
 interface ListItemProps<T> {
   item: T;

src/components/empty/Empty.tsx → src/components/feedback/empty/Empty.tsx

@@ -1,6 +1,6 @@
 import { Upload } from '@phosphor-icons/react';
 import { ReactNode } from 'react';
-import { Button } from '../button';
+import { Button } from '../../input/button';
 
 export interface EmptyProps {
   icon: JSX.Element;

src/components/loader/Loader.tsx → src/components/feedback/loader/Loader.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import '../../styles/Loader.css';
+import '../../../styles/Loader.css';
 
 export interface LoaderProps {
   classNameContainer?: string;

src/components/skeletonLoader/__test__/SkeletonLoader.test.tsx → src/components/feedback/skeletonLoader/__test__/SkeletonLoader.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
-import { SkeletonLoader } from '../../../components/skeletonLoader/';
+import { SkeletonLoader } from '../';
 import { expect, describe, it } from 'vitest';
 
 describe('SkeletonLoader', () => {

src/components/index.ts

@@ -1,31 +1,44 @@
-export * from './avatar';
-export * from './baseDialog';
-export * from './breadcrumbs';
-export * from './button';
-export * from './buttonCircle';
-export * from './card';
-export * from './checkbox';
-export * from './contextMenu';
-export * from './copyable';
-export * from './dialog';
-export * from './dropdown';
-export * from './empty';
-export * from './header';
-export * from './infiniteScroll';
-export * from './input';
-export * from './list';
-export * from './loader';
-export * from './menu';
-export * from './modal';
-export * from './modalTransparent';
-export * from './popover';
-export * from './radioButton';
-export * from './skeletonLoader';
-export * from './slider';
-export * from './suiteLauncher';
-export * from './switch';
-export * from './table/Table';
-export * from './textArea';
-export * from './tooltip';
-export * from './sidenav';
+// data-display
+export * from './data-display/avatar';
+export * from './data-display/card';
+export * from './data-display/list';
+export * from './data-display/table/Table';
+
+// feedback
+export * from './feedback/empty';
+export * from './feedback/loader';
+export * from './feedback/skeletonLoader';
+
+// input
+export * from './input/button';
+export * from './input/buttonCircle';
+export * from './input/checkbox';
+export * from './input/copyable';
+export * from './input/input';
+export * from './input/radioButton';
+export * from './input/slider';
+export * from './input/switch';
+export * from './input/textArea';
+
+// layout
+export * from './layout/header';
+export * from './layout/infiniteScroll';
+
+// navigation
+export * from './navigation/breadcrumbs';
+export * from './navigation/dropdown';
+export * from './navigation/menu';
+export * from './navigation/sidenav';
+export * from './navigation/suiteLauncher';
+
+// overlay
+export * from './overlay/baseDialog';
+export * from './overlay/contextMenu';
+export * from './overlay/dialog';
+export * from './overlay/modal';
+export * from './overlay/modalTransparent';
+export * from './overlay/popover';
+export * from './overlay/tooltip';
+
+// mail
 export * from './mail';

src/components/button/Button.tsx → src/components/input/button/Button.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import Loader from '../loader/Loader';
+import Loader from '../../feedback/loader/Loader';
 
 export interface ButtonProps {
   id?: string;

src/components/checkbox/Checkbox.tsx → src/components/input/checkbox/Checkbox.tsx

@@ -1,6 +1,6 @@
 /// <reference types="vite-plugin-svgr/client" />
-import Check from '../../assets/icons/check.svg?react';
-import Minus from '../../assets/icons/minus.svg?react';
+import Check from '../../../assets/icons/check.svg?react';
+import Minus from '../../../assets/icons/minus.svg?react';
 
 export interface CheckboxProps {
   id?: string;

src/components/copyable/Copyable.tsx → src/components/input/copyable/Copyable.tsx

@@ -1,6 +1,6 @@
 import { Copy } from '@phosphor-icons/react';
 import { useState } from 'react';
-import Tooltip from '../tooltip/Tooltip';
+import Tooltip from '../../overlay/tooltip/Tooltip';
 
 export interface CopyableProps {
   className?: string;

src/components/slider/RangeSlider.tsx → src/components/input/slider/RangeSlider.tsx

@@ -1,5 +1,5 @@
 import { ChangeEvent } from 'react';
-import '../../styles/RangeSlider.css';
+import '../../../styles/RangeSlider.css';
 
 export interface RangeSliderProps {
   value: number;

src/components/dropdown/Dropdown.tsx → src/components/navigation/dropdown/Dropdown.tsx

@@ -1,5 +1,5 @@
 import { useState, ReactNode, useEffect, useRef } from 'react';
-import { Menu, MenuItemType } from '../';
+import { Menu, MenuItemType } from '../menu';
 
 export type DropdownProps<T> = {
   children: ReactNode | ((obj: { open: boolean }) => JSX.Element);

src/components/menu/Menu.tsx → src/components/navigation/menu/Menu.tsx

@@ -1,5 +1,5 @@
 import { isValidElement, ReactNode, useEffect, useState } from 'react';
-import useHotkeys from '../../hooks/useHotKeys';
+import useHotkeys from '../../../hooks/useHotKeys';
 
 export type MenuItemType<T> =
   | { separator: true }

src/components/suiteLauncher/SuiteLauncher.tsx → src/components/navigation/suiteLauncher/SuiteLauncher.tsx

@@ -1,6 +1,6 @@
 import { DotsNineIcon, LockIcon } from '@phosphor-icons/react';
 import { cloneElement, isValidElement } from 'react';
-import { Popover } from '../popover';
+import { Popover } from '../../overlay/popover';
 
 export interface SuiteLauncherProps {
   className?: string;

src/components/contextMenu/ContextMenu.tsx → src/components/overlay/contextMenu/ContextMenu.tsx

@@ -1,4 +1,4 @@
-import Menu, { MenuItemsType } from '../menu/Menu';
+import Menu, { MenuItemsType } from '../../navigation/menu/Menu';
 
 const MENU_BUTTON_HEIGHT = 40;
 

src/components/dialog/Dialog.tsx → src/components/overlay/dialog/Dialog.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { useState } from 'react';
-import { Button } from '../';
+import { Button } from '../../input/button';
 
 export interface DialogProps {
   isOpen: boolean;

src/stories/components/avatar/Avatar.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Avatar } from '@/components/avatar';
 
 const meta: Meta<typeof Avatar> = {
-  title: 'Components/Avatar',
+  title: 'Data Display/Avatar',
   component: Avatar,
   parameters: {
     layout: 'centered',

src/stories/components/baseDialog/BaseDialog.stories.tsx

@@ -9,7 +9,7 @@ const overlay: Decorator = (Story) => (
 );
 
 const meta: Meta<typeof BaseDialog> = {
-  title: 'Components/BaseDialog',
+  title: 'Overlay/BaseDialog',
   component: BaseDialog,
   parameters: {
     layout: 'centered',

src/stories/components/breadcrumbs/breadcrumbs.stories.tsx

@@ -101,7 +101,7 @@ const defaultBreadcrumbsProps: BreadcrumbsProps<Dispatch, unknown> = {
 };
 
 const meta: Meta<typeof Breadcrumbs> = {
-  title: 'Components/Breadcrumbs',
+  title: 'Navigation/Breadcrumbs',
   component: Breadcrumbs,
   parameters: {
     layout: 'centered',

src/stories/components/button/Button.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { fn } from 'storybook/test';
 
 const meta: Meta<typeof Button> = {
-  title: 'Components/Button',
+  title: 'Input/Button',
   component: Button,
   parameters: {
     layout: 'centered',

src/stories/components/buttonCircle/ButtonCircle.stories.tsx

@@ -4,7 +4,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
 
 const meta = {
-  title: 'Components/CircleButton',
+  title: 'Input/CircleButton',
   component: CircleButton,
   parameters: {
     layout: 'centered',

src/stories/components/card/Card.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Card } from '@/components/card';
 
 const meta: Meta<typeof Card> = {
-  title: 'Components/Card',
+  title: 'Data Display/Card',
   component: Card,
   tags: ['autodocs'],
   parameters: {

src/stories/components/checkbox/Checkbox.stories.tsx

@@ -15,7 +15,7 @@ const onClick: Decorator = (Story, context) => {
 };
 
 const meta: Meta<typeof Checkbox> = {
-  title: 'Components/Checkbox',
+  title: 'Input/Checkbox',
   component: Checkbox,
   parameters: {
     layout: 'centered',

src/stories/components/contextMenu/ContextMenu.stories.tsx

@@ -89,7 +89,7 @@ const onOpenDecorator: Decorator = (Story, context) => {
 };
 
 const meta: Meta<typeof ContextMenuWithNotifications> = {
-  title: 'Components/ContextMenu',
+  title: 'Overlay/ContextMenu',
   component: ContextMenuWithNotifications,
   decorators: [onOpenDecorator],
   tags: ['autodocs'],

src/stories/components/copyable/Copyable.stories.tsx

@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/react-vite';
 import { Copyable } from '@/components/copyable';
 
 const meta: Meta<typeof Copyable> = {
-  title: 'Components/Copyable',
+  title: 'Input/Copyable',
   component: Copyable,
   parameters: {
     layout: 'centered',

src/stories/components/dialog/Dialog.stories.tsx

@@ -24,7 +24,7 @@ const onCloseDecorator: Decorator = (Story, context) => {
 };
 
 const meta: Meta<typeof Dialog> = {
-  title: 'Components/Dialog',
+  title: 'Overlay/Dialog',
   component: Dialog,
   decorators: [onCloseDecorator],
   tags: ['autodocs'],

src/stories/components/dropdown/Dropdown.stories.tsx

@@ -3,7 +3,7 @@ import { Dropdown, DropdownProps } from '@/components/dropdown';
 import { DotsThree } from '@phosphor-icons/react';
 
 const meta: Meta<typeof Dropdown> = {
-  title: 'Components/Dropdown',
+  title: 'Navigation/Dropdown',
   component: Dropdown,
   parameters: {
     layout: 'centered',

src/stories/components/empty/Empty.stories.tsx

@@ -3,7 +3,7 @@ import { Upload } from '@phosphor-icons/react';
 import { Empty } from '@/components/empty';
 
 const meta: Meta<typeof Empty> = {
-  title: 'Components/Empty',
+  title: 'Feedback/Empty',
   component: Empty,
   argTypes: {
     action: {

src/stories/components/header/Header.stories.tsx

@@ -4,7 +4,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 const IMAGE_SRC = 'https://internxt.com/favicon.ico';
 
 const meta: Meta<typeof Header> = {
-  title: 'Components/Header',
+  title: 'Layout/Header',
   component: Header,
   tags: ['autodocs'],
   parameters: {

src/stories/components/infiniteScroll/InfiniteScroll.stories.tsx

@@ -3,7 +3,7 @@ import { InfiniteScroll } from '@/components/infiniteScroll';
 import { useState } from 'react';
 
 const meta: Meta<typeof InfiniteScroll> = {
-  title: 'Components/InfiniteScroll',
+  title: 'Layout/InfiniteScroll',
   component: InfiniteScroll,
   parameters: {
     layout: 'centered',

src/stories/components/input/Input.stories.ts

@@ -23,7 +23,7 @@ const onChange: Decorator = (Story, context) => {
 };
 
 const meta: Meta<typeof Input> = {
-  title: 'Components/Input',
+  title: 'Input/Input',
   component: Input,
   parameters: {
     layout: 'centered',

src/stories/components/list/List.stories.tsx

@@ -65,7 +65,7 @@ const ListWrapper = (props: ListWrapperProps) => {
 };
 
 const meta: Meta<typeof List<DriveItemData, 'name' | 'power' | 'type'>> = {
-  title: 'Components/List',
+  title: 'Data Display/List',
   component: List,
   parameters: {
     layout: 'fullscreen',

src/stories/components/loader/Loader.stories.tsx

@@ -8,7 +8,7 @@ const overlay: Decorator = (Story) => (
 );
 
 const meta: Meta<typeof Loader> = {
-  title: 'Components/Loader',
+  title: 'Feedback/Loader',
   component: Loader,
   parameters: {
     layout: 'fullscreen',

src/stories/components/menu/Menu.stories.tsx

@@ -16,7 +16,7 @@ const withCloseHandler: Decorator = (Story, context) => {
 };
 
 const meta: Meta<typeof Menu> = {
-  title: 'Components/Menu',
+  title: 'Navigation/Menu',
   component: Menu,
   parameters: {
     layout: 'centered',

src/stories/components/modal/Modal.stories.tsx

@@ -24,7 +24,7 @@ const onCloseDecorator: Decorator = (Story, context) => {
 };
 
 const meta: Meta<typeof Modal> = {
-  title: 'Components/Modal',
+  title: 'Overlay/Modal',
   component: Modal,
   decorators: [onCloseDecorator],
   tags: ['autodocs'],

src/stories/components/modalTransparent/TransparentModal.stories.tsx

@@ -26,7 +26,7 @@ const baseModalStyles = {
 };
 
 const meta: Meta<typeof TransparentModal> = {
-  title: 'Components/TransparentModal',
+  title: 'Overlay/TransparentModal',
   component: TransparentModal,
   decorators: [onCloseDecorator],
   tags: ['autodocs'],

src/stories/components/popover/Popover.stories.tsx

@@ -4,7 +4,7 @@ import { Button } from '@/components/button';
 import { UserCircle } from '@phosphor-icons/react';
 
 const meta: Meta<typeof Popover> = {
-  title: 'Components/Popover',
+  title: 'Overlay/Popover',
   component: Popover,
   parameters: {
     layout: 'centered',