Refactor/components folder structure (#24)

* refactor components/navigation

* refactor components/orders

* refactor components/profile

* refactor components/schedule

* remove components/common/spinner

apps/web/components/common/spinner.tsx

@@ -1,9 +0,0 @@
-import { Loader2 } from 'lucide-react';
-
-export function LoadingSpinner() {
-  return (
-    <div className="flex h-full items-center justify-center">
-      <Loader2 className="size-8 animate-spin text-primary" />
-    </div>
-  );
-}

apps/web/components/contacts/contacts-list.tsx

@@ -1,9 +1,9 @@
 'use client';
 
-import { LoadingSpinner } from '../common/spinner';
 import { useCustomerContacts } from '@/hooks/api/contacts';
 import * as GQL from '@repo/graphql/types';
 import { Avatar, AvatarFallback, AvatarImage } from '@repo/ui/components/ui/avatar';
+import { LoadingSpinner } from '@repo/ui/components/ui/spinner';
 import Link from 'next/link';
 import { memo } from 'react';
 

apps/web/components/navigation/bottom-nav/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { NavButton } from './components/nav-button';
+import { NavButton } from './nav-button';
 import { BookOpen, Newspaper, PlusCircle, User, Users } from 'lucide-react';
 import { usePathname } from 'next/navigation';
 

apps/web/components/navigation/header/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { BackButton } from './components/back-button';
+import { BackButton } from './back-button';
 
 type Props = { title: string | undefined };
 

apps/web/components/orders/components/index.ts

@@ -1,7 +0,0 @@
-export * from './back-button';
-export * from './contacts-grid';
-export * from './datetime-select';
-export * from './next-button';
-export * from './result';
-export * from './service-select';
-export * from './submit-button';

apps/web/components/orders/order-form/contacts-grid.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { LoadingSpinner } from '@/components/common/spinner';
 import { CardSectionHeader } from '@/components/ui';
 import { ContactsContextProvider } from '@/context/contacts';
 import { useCustomerContacts } from '@/hooks/api/contacts';
@@ -11,6 +10,7 @@ import { withContext } from '@/utils/context';
 import { type CustomerFieldsFragment } from '@repo/graphql/types';
 import { Card } from '@repo/ui/components/ui/card';
 import { Label } from '@repo/ui/components/ui/label';
+import { LoadingSpinner } from '@repo/ui/components/ui/spinner';
 import { cn } from '@repo/ui/lib/utils';
 import Image from 'next/image';
 import { useEffect } from 'react';

apps/web/components/orders/order-form/index.tsx

@@ -1,19 +1,15 @@
 'use client';
 
-import { LoadingSpinner } from '../common/spinner';
-import {
-  BackButton,
-  ClientsGrid,
-  DateTimeSelect,
-  ErrorPage,
-  MastersGrid,
-  NextButton,
-  ServiceSelect,
-  SuccessPage,
-} from './components';
-import { SubmitButton } from './components/submit-button';
+import { BackButton } from './back-button';
+import { ClientsGrid, MastersGrid } from './contacts-grid';
+import { DateTimeSelect } from './datetime-select';
+import { NextButton } from './next-button';
+import { ErrorPage, SuccessPage } from './result';
+import { ServiceSelect } from './service-select';
+import { SubmitButton } from './submit-button';
 import { OrderStoreProvider, useInitOrderStore, useOrderStore } from '@/stores/order';
 import { withContext } from '@/utils/context';
+import { LoadingSpinner } from '@repo/ui/components/ui/spinner';
 import { type JSX } from 'react';
 
 const STEP_COMPONENTS: Record<string, JSX.Element> = {

apps/web/components/profile/components/index.ts

@@ -1,3 +0,0 @@
-export * from './checkbox-field';
-export * from './link-button';
-export * from './text-field';

apps/web/components/profile/data-card/index.tsx

@@ -1,8 +1,9 @@
 'use client';
 
-import { CardSectionHeader } from '../ui';
-import { CheckboxWithText, DataField } from './components';
-import { type ProfileProps } from './types';
+import { type ProfileProps } from '../types';
+import { CheckboxWithText } from './checkbox-field';
+import { DataField } from './text-field';
+import { CardSectionHeader } from '@/components/ui';
 import { useCustomerMutation, useCustomerQuery } from '@/hooks/api/customers';
 import { Enum_Customer_Role as Role } from '@repo/graphql/types';
 import { Button } from '@repo/ui/components/ui/button';

apps/web/components/profile/links-card/index.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable canonical/id-match */
 'use client';
 
-import { LinkButton } from './components';
-import { type ProfileProps } from './types';
+import { type ProfileProps } from '../types';
+import { LinkButton } from './link-button';
 import { useCustomerQuery } from '@/hooks/api/customers';
 import { Enum_Customer_Role } from '@repo/graphql/types';
 

apps/web/components/profile/person-card.tsx

@@ -1,10 +1,10 @@
 'use client';
 
-import { LoadingSpinner } from '../common/spinner';
 import { type ProfileProps } from './types';
 import { useCustomerQuery } from '@/hooks/api/customers';
 import { Avatar, AvatarFallback, AvatarImage } from '@repo/ui/components/ui/avatar';
 import { Card } from '@repo/ui/components/ui/card';
+import { LoadingSpinner } from '@repo/ui/components/ui/spinner';
 
 export function PersonCard({ telegramId }: Readonly<ProfileProps>) {
   const { data: { customer } = {}, isLoading } = useCustomerQuery({ telegramId });

apps/web/components/schedule/day-slots-list/day-slot-add-form.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable canonical/id-match */
 'use client';
 
-import { EditableTimeRangeForm } from './components/time-range';
+import { EditableTimeRangeForm } from '@/components/shared/time-range';
 import { useSlotCreate } from '@/hooks/api/slots';
 import { ScheduleStoreProvider, useScheduleStore } from '@/stores/schedule';
 import { withContext } from '@/utils/context';

apps/web/components/schedule/day-slots-list/index.tsx

@@ -1,10 +1,10 @@
 'use client';
 
-import { SlotCard } from './components/slot-card';
 import { DaySlotAddForm } from './day-slot-add-form';
-import { LoadingSpinner } from '@/components/common/spinner';
+import { SlotCard } from './slot-card';
 import { DateContext } from '@/context/date';
 import { useSlotsQuery } from '@/hooks/api/slots';
+import { LoadingSpinner } from '@repo/ui/components/ui/spinner';
 import { use } from 'react';
 
 export function DaySlotsList() {

apps/web/components/schedule/index.ts

@@ -1,5 +1,4 @@
 export * from './calendar';
-export * from './day-slot-add-form';
 export * from './day-slots-list';
 export * from './slot-buttons';
 export * from './slot-datetime';

apps/web/components/schedule/slot-datetime/index.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import { SlotDate } from './components/slot-date';
-import { SlotTime } from './components/slot-time';
-import { type SlotComponentProps } from './types';
+import { type SlotComponentProps } from '../types';
+import { SlotDate } from './slot-date';
+import { SlotTime } from './slot-time';
 import { ScheduleStoreProvider } from '@/stores/schedule';
 import { withContext } from '@/utils/context';
 

apps/web/components/schedule/slot-datetime/slot-time.tsx

@@ -2,8 +2,7 @@
 'use client';
 
 import { type SlotComponentProps } from '../types';
-import { EditableTimeRangeForm } from './time-range';
-import { ReadonlyTimeRange } from '@/components/shared/time-range';
+import { EditableTimeRangeForm, ReadonlyTimeRange } from '@/components/shared/time-range';
 import { useSlotMutation, useSlotQuery } from '@/hooks/api/slots';
 import { useZustandStore } from '@/stores/schedule';
 import { Button } from '@repo/ui/components/ui/button';

apps/web/components/schedule/slot-orders-list.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { OrderCard } from '../shared/order-card';
 import { type SlotComponentProps } from './types';
+import { OrderCard } from '@/components/shared/order-card';
 import { useSlotQuery } from '@/hooks/api/slots';
 
 export function SlotOrdersList({ documentId }: Readonly<SlotComponentProps>) {

apps/web/components/shared/order-card.tsx

@@ -2,7 +2,7 @@
 'use client';
 
 import { type OrderClient, type OrderComponentProps } from '../schedule/types';
-import { ReadonlyTimeRange } from './time-range';
+import { ReadonlyTimeRange } from './time-range/readonly';
 import { useOrderQuery } from '@/hooks/api/orders';
 import { Enum_Order_State } from '@repo/graphql/types';
 import { Avatar, AvatarFallback, AvatarImage } from '@repo/ui/components/ui/avatar';

apps/web/components/shared/time-range/editable.tsx

@@ -1,4 +1,5 @@
 'use client';
+
 import { useScheduleStore } from '@/stores/schedule';
 import { Input } from '@repo/ui/components/ui/input';
 import { type FormEvent, type PropsWithChildren } from 'react';

apps/web/components/shared/time-range/index.ts

@@ -0,0 +1,2 @@
+export * from './editable';
+export * from './readonly';