Update storybook directory

web/.cursor/rules/components_features_rules.mdc

@@ -32,7 +32,7 @@ features/
    - Handle their own state management when necessary
    - Be fully typed using TypeScript
    - Include proper documentation and props interface
-   - Have a corresponding Storybook story showcasing different states and variations
+   - Have a corresponding Storybook story showcasing different states and variations (The storybook should be titled Features/{feature_name})
 
 2. Components should be:
    - Reusable across different parts of the application
@@ -45,9 +45,11 @@ features/
 // features/PaginatedTable/PaginatedTable.tsx
 import { Table, Pagination } from '../ui';
 
-export const PaginatedTable: React.FC<PaginatedTableProps> = (props) => {
+export const PaginatedTable: React.FC<PaginatedTableProps> = React.memo((props) => {
   // Implementation
-};
+});
+
+PaginatedTable.displayName = 'PaginatedTable';
 ```
 
 ## Best Practices

web/src/components/ui/avatar/Avatar.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Avatar } from './Avatar';
 
 const meta = {
-  title: 'Base/Avatar',
+  title: 'UI/Avatar',
   component: Avatar,
   parameters: {
     layout: 'centered'

web/src/components/ui/breadcrumb/Breadcrumb.stories.tsx

@@ -3,7 +3,7 @@ import { Breadcrumb } from './Breadcrumb';
 import { BusterAppRoutes } from '@/routes/busterRoutes/busterAppRoutes';
 
 const meta: Meta<typeof Breadcrumb> = {
-  title: 'Base/Breadcrumb',
+  title: 'UI/Breadcrumb',
   component: Breadcrumb,
   tags: ['autodocs'],
   parameters: {

web/src/components/ui/buttons/BackButton.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { BackButton } from './BackButton';
 
 const meta: Meta<typeof BackButton> = {
-  title: 'Base/Buttons/BackButton',
+  title: 'UI/Buttons/BackButton',
   component: BackButton,
   tags: ['autodocs'],
   argTypes: {

web/src/components/ui/buttons/Button.stories.tsx

@@ -7,7 +7,7 @@ const IconSelect = Object.keys(OutlinedIcons).map((icon) => {
 });
 
 const meta: Meta<typeof Button> = {
-  title: 'Base/Buttons/Button',
+  title: 'UI/Buttons/Button',
   component: Button,
   tags: ['autodocs'],
   args: {

web/src/components/ui/buttons/ButtonDropdown.stories.tsx

@@ -3,7 +3,7 @@ import { ButtonDropdown } from './ButtonDropdown';
 import { PaintRoller } from '../icons/NucleoIconOutlined';
 
 const meta: Meta<typeof ButtonDropdown> = {
-  title: 'Base/Buttons/Button Dropdown',
+  title: 'UI/Buttons/Button Dropdown',
   component: ButtonDropdown,
   parameters: {
     layout: 'centered'

web/src/components/ui/card/CardBase.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } from './CardBase';
 
 const meta = {
-  title: 'Base/Cards/Card',
+  title: 'UI/Cards/Card',
   component: Card,
   parameters: {
     layout: 'centered'

web/src/components/ui/card/CodeCard.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { CodeCard } from './CodeCard';
 
 const meta: Meta<typeof CodeCard> = {
-  title: 'Base/Cards/CodeCard',
+  title: 'UI/Cards/CodeCard',
   component: CodeCard,
   parameters: {
     layout: 'centered'

web/src/components/ui/card/InfoCard.stories.tsx

@@ -4,7 +4,7 @@ import { BellOutlined } from '@ant-design/icons';
 import { faker } from '@faker-js/faker';
 
 const meta: Meta<typeof InfoCard> = {
-  title: 'Base/Cards/InfoCard',
+  title: 'UI/Cards/InfoCard',
   component: InfoCard,
   tags: ['autodocs'],
   args: {

web/src/components/ui/charts/BusterChartLegend/stories/BusterChartLegend.stories.tsx

@@ -3,7 +3,7 @@ import { BusterChartLegend } from '../BusterChartLegend';
 import { ChartType } from '../../interfaces';
 
 const meta: Meta<typeof BusterChartLegend> = {
-  title: 'Base/Charts/BusterChartLegend',
+  title: 'UI/Charts/BusterChartLegend',
   component: BusterChartLegend,
   parameters: {
     layout: 'centered'

web/src/components/ui/charts/BusterChartLegend/stories/LegendDot.stories.tsx

@@ -3,7 +3,7 @@ import { LegendItemDot } from '../LegendDot';
 import { ChartType } from '../../interfaces';
 
 const meta = {
-  title: 'Base/Charts/LegendDot',
+  title: 'UI/Charts/LegendDot',
   component: LegendItemDot,
   parameters: {
     layout: 'centered'

web/src/components/ui/charts/BusterChartLegend/stories/LegendItem.stories.tsx

@@ -3,7 +3,7 @@ import { LegendItem } from '../LegendItem';
 import { ChartType } from '../../interfaces';
 
 const meta = {
-  title: 'Base/Charts/LegendItem',
+  title: 'UI/Charts/LegendItem',
   component: LegendItem,
   parameters: {
     layout: 'centered'

web/src/components/ui/charts/BusterChartLegend/stories/OverflowButton.stories.tsx

@@ -3,7 +3,7 @@ import { OverflowButton } from '../OverflowContainer';
 import { ChartType } from '../../interfaces';
 
 const meta = {
-  title: 'Base/Charts/OverflowButton',
+  title: 'UI/Charts/OverflowButton',
   component: OverflowButton,
   parameters: {
     layout: 'centered'

web/src/components/ui/charts/BusterChartTooltip/BusterChartTooltip.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { BusterChartTooltip } from './BusterChartTooltip';
 
 const meta: Meta<typeof BusterChartTooltip> = {
-  title: 'Base/Charts/BusterChartTooltip',
+  title: 'UI/Charts/BusterChartTooltip',
   component: BusterChartTooltip,
   parameters: {
     layout: 'centered'

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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Checkbox } from './Checkbox';
 
 const meta: Meta<typeof Checkbox> = {
-  title: 'Base/Inputs/Checkbox',
+  title: 'UI/Inputs/Checkbox',
   component: Checkbox,
   tags: ['autodocs'],
   argTypes: {

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

@@ -6,7 +6,7 @@ import { faker } from '@faker-js/faker';
 import React from 'react';
 
 const meta: Meta<typeof Dropdown> = {
-  title: 'Base/Dropdowns/Dropdown',
+  title: 'UI/Dropdowns/Dropdown',
   component: Dropdown,
   parameters: {
     layout: 'centered'

web/src/components/ui/dropdown/SearchDropdown.stories.tsx

@@ -3,7 +3,7 @@ import { SearchDropdown } from './SearchDropdown';
 import { User, MapSettings, Mailbox } from '../icons';
 
 const meta: Meta<typeof SearchDropdown> = {
-  title: 'Base/Dropdowns/SearchDropdown',
+  title: 'UI/Dropdowns/SearchDropdown',
   component: SearchDropdown,
   parameters: {
     layout: 'centered'

web/src/components/ui/error/GlobalErrorComponent.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { GlobalErrorComponent } from './GlobalErrorComponent';
 
 const meta: Meta<typeof GlobalErrorComponent> = {
-  title: 'Base/Error/GlobalErrorComponent',
+  title: 'UI/Error/GlobalErrorComponent',
   component: GlobalErrorComponent,
   parameters: {
     layout: 'fullscreen'

web/src/components/ui/grid/BusterResizeableGrid.stories.tsx

@@ -9,7 +9,7 @@ import { Hand } from '../icons';
 import { cn } from '@/lib/classMerge';
 
 const meta: Meta<typeof BusterResizeableGrid> = {
-  title: 'Base/Grid/BusterResizeableGrid',
+  title: 'UI/Grid/BusterResizeableGrid',
   component: BusterResizeableGrid,
   parameters: {
     layout: 'padded'

web/src/components/ui/icons/AppDataSourceIcons.stories.tsx

@@ -3,7 +3,7 @@ import { AppDataSourceIcon } from './AppDataSourceIcons';
 import { DataSourceTypes } from '@/api/asset_interfaces';
 
 const meta: Meta<typeof AppDataSourceIcon> = {
-  title: 'Base/Icons/DataSourceIcon',
+  title: 'UI/Icons/DataSourceIcon',
   component: AppDataSourceIcon,
   parameters: {
     layout: 'centered'

web/src/components/ui/indicators/StatusIndicator.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { StatusIndicator } from './StatusIndicator';
 
 const meta = {
-  title: 'Base/StatusIndicator',
+  title: 'UI/StatusIndicator',
   component: StatusIndicator,
   parameters: {
     layout: 'centered'

web/src/components/ui/inputs/AppCodeEditor/AppCodeEditor.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { AppCodeEditor } from './AppCodeEditor';
 
 const meta: Meta<typeof AppCodeEditor> = {
-  title: 'Base/Inputs/AppCodeEditor',
+  title: 'UI/Inputs/AppCodeEditor',
   component: AppCodeEditor,
   parameters: {
     layout: 'centered'

web/src/components/ui/inputs/Input.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Input } from './Input';
 
 const meta: Meta<typeof Input> = {
-  title: 'Base/Inputs/Input',
+  title: 'UI/Inputs/Input',
   component: Input,
   tags: ['autodocs'],
   argTypes: {

web/src/components/ui/inputs/InputTextArea.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { InputTextArea } from './InputTextArea';
 
 const meta: Meta<typeof InputTextArea> = {
-  title: 'Base/Inputs/InputTextArea',
+  title: 'UI/Inputs/InputTextArea',
   component: InputTextArea,
   tags: ['autodocs'],
   args: {

web/src/components/ui/inputs/InputTextAreaButton.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { InputTextAreaButton } from './InputTextAreaButton';
 
 const meta: Meta<typeof InputTextAreaButton> = {
-  title: 'Base/Inputs/InputTextAreaButton',
+  title: 'UI/Inputs/InputTextAreaButton',
   component: InputTextAreaButton,
   tags: ['autodocs'],
   args: {},

web/src/components/ui/layout/AppSplitter/AppSplitter.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { AppSplitter } from './AppSplitter';
 
 const meta = {
-  title: 'Base/Layouts/AppSplitter',
+  title: 'UI/Layouts/AppSplitter',
   component: AppSplitter,
   parameters: {
     layout: 'fullscreen'

web/src/components/ui/layout/AppVerticalSplitterWithGap/AppVerticalSplitterWithGap.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { AppVerticalSplitterWithGap } from './AppVerticalSplitterWithGap';
 
 const meta: Meta<typeof AppVerticalSplitterWithGap> = {
-  title: 'Base/Layouts/AppVerticalSplitterWithGap',
+  title: 'UI/Layouts/AppVerticalSplitterWithGap',
   component: AppVerticalSplitterWithGap,
   parameters: {
     layout: 'fullscreen'

web/src/components/ui/pills/KeyboardShortcutPills.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { KeyboardShortcutPill } from './KeyboardShortcutPills';
 
 const meta: Meta<typeof KeyboardShortcutPill> = {
-  title: 'Base/Pills/KeyboardShortcutPill',
+  title: 'UI/Pills/KeyboardShortcutPill',
   component: KeyboardShortcutPill,
   tags: ['autodocs']
 };

web/src/components/ui/segmented/Segmented.stories.tsx

@@ -3,7 +3,7 @@ import { Segmented } from './Segmented';
 import { BottleChampagne, Grid, HouseModern, PaintRoller } from '../icons';
 
 const meta: Meta<typeof Segmented> = {
-  title: 'Base/Segmented',
+  title: 'UI/Segmented',
   component: Segmented,
   parameters: {
     layout: 'centered'

web/src/components/ui/select/Select.stories.tsx

@@ -3,7 +3,7 @@ import { Select } from './Select';
 import { User, MapSettings, Mailbox } from '../icons';
 
 const meta: Meta<typeof Select> = {
-  title: 'Base/Select/Select',
+  title: 'UI/Select/Select',
   component: Select,
   parameters: {
     layout: 'centered'

web/src/components/ui/select/SelectTagInput.stories.tsx

@@ -4,7 +4,7 @@ import { useState } from 'react';
 import { type SelectItem } from './Select';
 
 const meta = {
-  title: 'Base/Select/SelectTagInput',
+  title: 'UI/Select/SelectTagInput',
   component: SelectTagInput,
   parameters: {
     layout: 'centered'

web/src/components/ui/switch/AppSwitch.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { AppSwitch } from './AppSwitch';
 
 const meta: Meta<typeof AppSwitch> = {
-  title: 'Base/Inputs/Switch',
+  title: 'UI/Inputs/Switch',
   component: AppSwitch,
   tags: ['autodocs'],
   argTypes: {

web/src/components/ui/toaster/Toaster.stories.tsx

@@ -70,7 +70,7 @@ const TestComponent = ({
 };
 
 const meta: Meta<typeof TestComponent> = {
-  title: 'Base/Toast',
+  title: 'UI/Toast',
   component: TestComponent,
   tags: ['autodocs'],
   argTypes: {

web/src/components/ui/tooltip/Popover.stories.tsx

@@ -3,7 +3,7 @@ import { Popover } from './Popover';
 import { Button } from '../buttons/Button';
 
 const meta = {
-  title: 'Base/Tooltip/Popover',
+  title: 'UI/Tooltip/Popover',
   component: Popover,
   tags: ['autodocs'],
   parameters: {

web/src/components/ui/tooltip/Tooltip.stories.tsx

@@ -3,7 +3,7 @@ import { Button } from '../buttons/Button';
 import { Tooltip } from './Tooltip';
 
 const meta = {
-  title: 'Base/Tooltip',
+  title: 'UI/Tooltip',
   component: Tooltip,
   parameters: {
     layout: 'centered'