refactor(object-storage): rename folder and files following new naming conventions

packages/manager/apps/pci-object-storage/src/components/breadcrumb/Breadcrumb.component.tsx

@@ -23,7 +23,7 @@ type BreadcrumbHandle = {
   }) => React.ReactElement | null;
 };
 
-function Breadcrumb(): JSX.Element {
+const Breadcrumb = (): JSX.Element => {
   const { projectId } = useParams();
   const { data: project } = usePciProject();
 
@@ -79,6 +79,6 @@ function Breadcrumb(): JSX.Element {
       ))}
     </>
   );
-}
+};
 
 export default Breadcrumb;

packages/manager/apps/pci-object-storage/src/components/browser/BrowserFileList.component.tsx

@@ -19,10 +19,10 @@ type Row<T> =
   | { type: RowType.folder; prefix: string }
   | { type: RowType.file; file: T };
 
-export function BrowserFileList<T extends { name: string }>({
+const BrowserFileList = <T extends { name: string }>({
   className,
   renderFileRow,
-}: BrowserFileListProps<T>) {
+}: BrowserFileListProps<T>) => {
   const {
     prefix,
     setPrefix,
@@ -137,4 +137,6 @@ export function BrowserFileList<T extends { name: string }>({
       )}
     </div>
   );
-}
+};
+
+export { BrowserFileList };

packages/manager/apps/pci-object-storage/src/components/browser/BrowserFileListTopbar.component.tsx

@@ -1,11 +1,13 @@
 import { useBrowser } from './BrowserRoot.component';
 
-export function BrowserFileListTopbar<T extends { name: string }>() {
+const BrowserFileListTopbar = <T extends { name: string }>() => {
   const { prefix } = useBrowser<T>();
   return (
     <div className="py-2 px-3 border-b bg-muted/50 text-sm shrink-0">
       <strong>Prefix:</strong>{' '}
       <code className="font-mono">{prefix || '(root)'}</code>
     </div>
   );
-}
+};
+
+export { BrowserFileListTopbar };

packages/manager/apps/pci-object-storage/src/components/browser/BrowserRoot.component.tsx

@@ -31,20 +31,20 @@ const BrowserContext = createContext<BrowserContextValue<{
   name: string;
 }> | null>(null);
 
-export function useBrowser<T extends { name: string }>() {
+const useBrowser = <T extends { name: string }>() => {
   const ctx = useContext(BrowserContext);
   if (!ctx) throw new Error('useBrowser must be used within <BrowserRoot>');
   return ctx as BrowserContextValue<T>;
-}
+};
 
-export function BrowserRoot<T extends NonNullable<unknown>>({
+const BrowserRoot = <T extends NonNullable<unknown>>({
   objects,
   keyField,
   getObjectKey,
   onDropFiles,
   onObjectClick,
   children,
-}: BrowserRootProps<T>) {
+}: BrowserRootProps<T>) => {
   const [prefix, setPrefix] = useState('');
   const contentScrollRef = useRef<HTMLDivElement>(null);
 
@@ -76,4 +76,6 @@ export function BrowserRoot<T extends NonNullable<unknown>>({
   return (
     <BrowserContext.Provider value={value}>{children}</BrowserContext.Provider>
   );
-}
+};
+
+export { BrowserRoot, useBrowser };

packages/manager/apps/pci-object-storage/src/components/data-table/DataTable.component.tsx

@@ -15,13 +15,11 @@ import { useDataTableContext } from './DataTable.context';
 
 export const MENU_COLUMN_ID = 'actions_menu_column';
 
-interface DatatableProps<TData> {
+export interface DatatableProps<TData> {
   renderRowExpansion?: (row: TData) => ReactElement | null;
 }
 
-export function DataTable<TData>({
-  renderRowExpansion,
-}: DatatableProps<TData>) {
+const DataTable = <TData,>({ renderRowExpansion }: DatatableProps<TData>) => {
   const { table, rows } = useDataTableContext<TData>();
   const { t } = useTranslation('components/data-table');
   const [expandedRows, setExpandedRows] = useState<Record<string, boolean>>({});
@@ -115,4 +113,6 @@ export function DataTable<TData>({
       </TableBody>
     </Table>
   );
-}
+};
+
+export { DataTable };

packages/manager/apps/pci-object-storage/src/components/data-table/DataTable.context.tsx

@@ -16,7 +16,7 @@ import { ColumnFilter } from './DatatableDefaultFilterButton.component';
 import { DataTable } from './DataTable.component';
 import { DataTablePagination } from './DatatablePagination.component';
 
-interface DataTableProviderProps<TData, TValue> {
+export interface DataTableProviderProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[];
   data: TData[];
   pageSize?: number;
@@ -39,13 +39,13 @@ interface DataTableContextValue<TData> {
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const DataTableContext = createContext<DataTableContextValue<any> | null>(null);
 
-export function DataTableProvider<TData, TValue>({
+const DataTableProvider = <TData, TValue>({
   columns,
   data,
   pageSize,
   filtersDefinition,
   children,
-}: DataTableProviderProps<TData, TValue>) {
+}: DataTableProviderProps<TData, TValue>) => {
   const [sorting, setSorting] = useState<SortingState>([
     {
       id: columns[0]?.id || '',
@@ -110,14 +110,16 @@ export function DataTableProvider<TData, TValue>({
       )}
     </DataTableContext.Provider>
   );
-}
+};
 
-export function useDataTableContext<TData>() {
+const useDataTableContext = <TData,>() => {
   const context = useContext<DataTableContextValue<TData>>(DataTableContext);
   if (!context) {
     throw new Error(
       'useDataTableContext must be used within a DataTableProvider',
     );
   }
   return context;
-}
+};
+
+export { DataTableProvider, useDataTableContext };

packages/manager/apps/pci-object-storage/src/components/data-table/DatatableAction.component.tsx

@@ -1,5 +1,7 @@
 import { ReactNode } from 'react';
 
-export function DatatableAction({ children }: { children: ReactNode }) {
-  return <>{children || <></>}</>;
-}
+const DatatableAction = ({ children }: { children: ReactNode }) => (
+  <>{children || <></>}</>
+);
+
+export { DatatableAction };

packages/manager/apps/pci-object-storage/src/components/data-table/DatatableFiltersButton.component.tsx

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 import { useDataTableContext } from './DataTable.context';
 import DataTableDefaultFilterButton from './DatatableDefaultFilterButton.component';
 
-export function DatatableFiltersButton({ children }: { children?: ReactNode }) {
+const DatatableFiltersButton = ({ children }: { children?: ReactNode }) => {
   const { filtersDefinition, columnFilters } = useDataTableContext();
   if (!filtersDefinition?.length) return <></>;
   return (
@@ -20,4 +20,6 @@ export function DatatableFiltersButton({ children }: { children?: ReactNode }) {
       )}
     </>
   );
-}
+};
+
+export { DatatableFiltersButton };

packages/manager/apps/pci-object-storage/src/components/data-table/DatatableFiltersList.component.tsx

@@ -32,7 +32,7 @@ export type FilterListProps = {
   onRemoveFilter: (filter: FilterWithLabel) => void;
 };
 
-export function DatatableFiltersList() {
+const DatatableFiltersList = () => {
   const { t } = useTranslation('filters');
   const { columnFilters } = useDataTableContext();
   const locale = useLocale();
@@ -87,4 +87,6 @@ export function DatatableFiltersList() {
       ))}
     </div>
   );
-}
+};
+
+export { DatatableFiltersList };

packages/manager/apps/pci-object-storage/src/components/data-table/DatatableHeader.component.tsx

@@ -1,7 +1,7 @@
 import { Children, ReactElement, ReactNode } from 'react';
 import DataTable from './index';
 
-export function DatatableHeader({ children }: { children: ReactNode }) {
+const DatatableHeader = ({ children }: { children: ReactNode }) => {
   // Helper function to check if a child is a ReactElement
   const isReactElement = (child: ReactNode): child is ReactElement =>
     !!child && typeof child === 'object' && 'type' in child;
@@ -29,4 +29,6 @@ export function DatatableHeader({ children }: { children: ReactNode }) {
       </div>
     </div>
   );
-}
+};
+
+export { DatatableHeader };

packages/manager/apps/pci-object-storage/src/components/data-table/DatatablePagination.component.tsx

@@ -15,7 +15,7 @@ import {
 } from '@datatr-ux/uxlib';
 import { useDataTableContext } from './DataTable.context';
 
-export function DataTablePagination() {
+const DataTablePagination = () => {
   const { t } = useTranslation('components/data-table');
   const { table } = useDataTableContext();
   const itemCount = table.getRowCount();
@@ -96,4 +96,6 @@ export function DataTablePagination() {
       </div>
     </div>
   );
-}
+};
+
+export { DataTablePagination };

packages/manager/apps/pci-object-storage/src/components/data-table/DatatableSearchBar.component.tsx

@@ -4,7 +4,7 @@ import { Search } from 'lucide-react';
 import { Button, Input } from '@datatr-ux/uxlib';
 import { useDataTableContext } from './DataTable.context';
 
-export function DatatableSearchBar({ children }: { children?: ReactNode }) {
+const DatatableSearchBar = ({ children }: { children?: ReactNode }) => {
   const { t } = useTranslation('components/data-table');
   const { table, globalFilter } = useDataTableContext();
   return (
@@ -27,4 +27,6 @@ export function DatatableSearchBar({ children }: { children?: ReactNode }) {
       )}
     </>
   );
-}
+};
+
+export { DatatableSearchBar };

packages/manager/apps/pci-object-storage/src/components/data-table/DatatableSkeleton.component.tsx

@@ -8,49 +8,49 @@ import {
   Skeleton,
 } from '@datatr-ux/uxlib';
 
-interface DataTableSkeletonProps {
+export interface DataTableSkeletonProps {
   rows?: number;
   columns?: number;
   height?: number;
   width?: number;
 }
-export function DatatableSkeleton({
+const DatatableSkeleton = ({
   height = 16,
   width = 80,
   rows = 5,
   columns = 5,
-}: DataTableSkeletonProps) {
-  return (
-    <Table data-testid="datatable.skeleton">
-      <TableHeader className="border bg-gray-50">
-        <TableRow>
-          {Array.from({ length: columns }).map((colHead, iColHead) => (
-            <TableHead
-              key={`${colHead}${iColHead}`}
-              className="border font-semibold text-primary-800"
-            >
+}: DataTableSkeletonProps) => (
+  <Table data-testid="datatable.skeleton">
+    <TableHeader className="border bg-gray-50">
+      <TableRow>
+        {Array.from({ length: columns }).map((colHead, iColHead) => (
+          <TableHead
+            key={`${colHead}${iColHead}`}
+            className="border font-semibold text-primary-800"
+          >
+            <Skeleton
+              className="block"
+              style={{ width: `${width}px`, height: `${height}px` }}
+            />
+          </TableHead>
+        ))}
+      </TableRow>
+    </TableHeader>
+    <TableBody className="border border-primary-100">
+      {Array.from({ length: rows }).map((row, iRow) => (
+        <TableRow key={`${row}${iRow}`}>
+          {Array.from({ length: columns }).map((col, iCol) => (
+            <TableCell key={`${col}${iCol}`}>
               <Skeleton
                 className="block"
                 style={{ width: `${width}px`, height: `${height}px` }}
               />
-            </TableHead>
+            </TableCell>
           ))}
         </TableRow>
-      </TableHeader>
-      <TableBody className="border border-primary-100">
-        {Array.from({ length: rows }).map((row, iRow) => (
-          <TableRow key={`${row}${iRow}`}>
-            {Array.from({ length: columns }).map((col, iCol) => (
-              <TableCell key={`${col}${iCol}`}>
-                <Skeleton
-                  className="block"
-                  style={{ width: `${width}px`, height: `${height}px` }}
-                />
-              </TableCell>
-            ))}
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
-  );
-}
+      ))}
+    </TableBody>
+  </Table>
+);
+
+export { DatatableSkeleton };

packages/manager/apps/pci-object-storage/src/components/data-table/DatatableSortableHeader.component.tsx

@@ -3,14 +3,14 @@ import { SortingColumn } from '@tanstack/react-table';
 import { Button } from '@datatr-ux/uxlib';
 import { cn } from '@/lib/utils';
 
-interface SortableHeaderProps<TData> {
+export interface SortableHeaderProps<TData> {
   column: SortingColumn<TData>;
   children: React.ReactNode;
 }
-export function DatatableSortableHeader<TData>({
+const DatatableSortableHeader = <TData,>({
   column,
   children,
-}: SortableHeaderProps<TData>) {
+}: SortableHeaderProps<TData>) => {
   const sort = column.getIsSorted();
   let icon = <ChevronsUpDown className="ml-2 h-4 w-4" />;
   if (sort === 'asc') {
@@ -34,4 +34,6 @@ export function DatatableSortableHeader<TData>({
       {icon}
     </Button>
   );
-}
+};
+
+export { DatatableSortableHeader };

packages/manager/apps/pci-object-storage/src/components/data-table/useColumnFilters.hook.tsx

@@ -5,7 +5,7 @@ import { FilterWithLabel } from './DatatableFiltersList.component';
 const filterEquals = (a: Filter, b: Filter) =>
   a.key === b.key && a.value === b.value && a.comparator === b.comparator;
 
-export function useColumnFilters() {
+const useColumnFilters = () => {
   const [filters, setFilters] = useState<FilterWithLabel[]>([]);
 
   return {
@@ -29,4 +29,6 @@ export function useColumnFilters() {
       );
     },
   };
-}
+};
+
+export { useColumnFilters };