refactor: separation of shared components

src/app/consent/page.tsx

@@ -1,6 +1,6 @@
-import PageContainer from "@/components/PageContainer/PageContainer";
-import PageItem from "@/components/PageBlock/PageItem";
-import Logo from "@/components/Logo/Logo";
+import PageContainer from "@/components/layout/PageContainer/PageContainer";
+import PageItem from "@/components/layout/PageBlock/PageItem";
+import Logo from "@/components/ui/Logo/Logo";
 import ConsentForm from "@/app/consent/components/ConsentForm/ConsentForm";
 
 

src/app/create-id/page.tsx

@@ -1,7 +1,7 @@
-import LoginForm from "@/components/LoginForm/LoginForm";
-import Logo from "@/components/Logo/Logo";
-import PageItem from "@/components/PageBlock/PageItem";
-import PageContainer from "@/components/PageContainer/PageContainer";
+import LoginForm from "@/components/features/LoginForm/LoginForm";
+import Logo from "@/components/ui/Logo/Logo";
+import PageItem from "@/components/layout/PageBlock/PageItem";
+import PageContainer from "@/components/layout/PageContainer/PageContainer";
 
 export default function CreateIdPage() {
     return (

src/app/layout.tsx

@@ -6,11 +6,11 @@ import {
     mantineHtmlProps,
     MantineProvider,
 } from "@mantine/core";
-import Header from "@/components/Header/Header";
+import Header from "@/components/layout/Header/Header";
 import { theme } from "@/theme";
 import "@/app/global.css";
 import { Notifications } from "@mantine/notifications";
-import Footer from "@/components/Footer/Footer";
+import Footer from "@/components/layout/Footer/Footer";
 import ReduxProvider from "@/providers/ReduxProvider";
 
 export const metadata = {

src/app/login/page.tsx

@@ -1,7 +1,7 @@
-import LoginForm from "@/components/LoginForm/LoginForm";
-import Logo from "@/components/Logo/Logo";
-import PageItem from "@/components/PageBlock/PageItem";
-import PageContainer from "@/components/PageContainer/PageContainer";
+import LoginForm from "@/components/features/LoginForm/LoginForm";
+import PageItem from "@/components/layout/PageBlock/PageItem";
+import PageContainer from "@/components/layout/PageContainer/PageContainer";
+import Logo from "@/components/ui/Logo/Logo";
 
 interface LoginPageProps {
     searchParams: Promise<{ login_challenge?: string }>;

src/app/services/components/ServicesList/ServicesList.tsx

@@ -4,7 +4,7 @@ import { useMemo } from "react";
 import { redirect } from "next/navigation";
 import { Button, Stack, Title } from "@mantine/core";
 import styles from "@/app/services/components/ServicesList/ServicesList.module.css";
-import TitleWithLines from "@/components/TitleWithLines/TitleWithLines";
+import TitleWithLines from "@/components/ui/TitleWithLines/TitleWithLines";
 import SCOPES from "@/constants/scopes";
 import { Scopes } from "@/enums/Scopes";
 import { setTargetService } from "@/lib/store/features/targetService/targetServiceSlice";

src/app/services/page.tsx

@@ -1,6 +1,6 @@
-import Logo from "@/components/Logo/Logo";
-import PageItem from "@/components/PageBlock/PageItem";
-import PageContainer from "@/components/PageContainer/PageContainer";
+import Logo from "@/components/ui/Logo/Logo";
+import PageItem from "@/components/layout/PageBlock/PageItem";
+import PageContainer from "@/components/layout/PageContainer/PageContainer";
 import ServicesList from "@/app/services/components/ServicesList/ServicesList";
 
 export default function ServicesPage() {

src/app/verify-phone/page.tsx

@@ -1,7 +1,7 @@
-import Logo from "@/components/Logo/Logo";
-import PageItem from "@/components/PageBlock/PageItem";
-import PageContainer from "@/components/PageContainer/PageContainer";
 import VerifyPhoneForm from "@/app/verify-phone/components/VerifyPhoneForm/VerifyPhoneForm";
+import PageItem from "@/components/layout/PageBlock/PageItem";
+import PageContainer from "@/components/layout/PageContainer/PageContainer";
+import Logo from "@/components/ui/Logo/Logo";
 
 export default function CreateIdPage() {
     return (

src/components/MotionWrapper/MotionWrapper.tsx

@@ -1,12 +0,0 @@
-'use client';
-
-import { motion, MotionProps } from 'framer-motion';
-import { ReactNode } from 'react';
-
-interface MotionWrapperProps extends MotionProps {
-  children: ReactNode;
-}
-
-export function MotionWrapper({ children, ...props }: MotionWrapperProps) {
-  return <motion.div {...props}>{children}</motion.div>;
-}

src/components/features/LoginForm/LoginForm.tsx

@@ -5,7 +5,7 @@ import { useRouter } from "next/navigation";
 import { Button, Stack } from "@mantine/core";
 import { useForm } from "@mantine/form";
 import { Auth } from "@/client";
-import PhoneInput from "@/components/PhoneInput/PhoneInput";
+import PhoneInput from "@/components/ui/PhoneInput/PhoneInput";
 import {
     setLoginChallenge,
     setPhoneNumber,

src/components/layout/Header/Header.tsx

@@ -1,5 +1,5 @@
 import { Group } from "@mantine/core";
-import { ColorSchemeToggle } from "@/components/ColorSchemeToggle/ColorSchemeToggle";
+import { ColorSchemeToggle } from "@/components/ui/ColorSchemeToggle/ColorSchemeToggle";
 
 const Header = () => {
     return (

src/components/layout/MotionWrapper/MotionWrapper.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import { ReactNode } from "react";
+import { motion, MotionProps } from "framer-motion";
+
+interface MotionWrapperProps extends MotionProps {
+    children: ReactNode;
+}
+
+export function MotionWrapper({ children, ...props }: MotionWrapperProps) {
+    return <motion.div {...props}>{children}</motion.div>;
+}

src/components/layout/PageBlock/PageItem.tsx

@@ -1,6 +1,6 @@
 import { CSSProperties, FC, ReactNode } from "react";
 import classNames from "classnames";
-import { MotionWrapper } from "@/components/MotionWrapper/MotionWrapper";
+import { MotionWrapper } from "@/components/layout/MotionWrapper/MotionWrapper";
 import styles from "./PageItem.module.css";
 
 type Props = {

src/components/ui/ColorSchemeToggle/ColorSchemeToggle.tsx

@@ -7,7 +7,7 @@ import {
     useComputedColorScheme,
     useMantineColorScheme,
 } from "@mantine/core";
-import style from "@/components/ColorSchemeToggle/ColorSchemeToggle.module.css";
+import style from "./ColorSchemeToggle.module.css";
 
 export function ColorSchemeToggle() {
     const { setColorScheme } = useMantineColorScheme();

src/components/ui/PhoneInput/PhoneInput.tsx

@@ -7,10 +7,10 @@ import {
     type InputBaseProps,
     type PolymorphicComponentProps,
 } from "@mantine/core";
-import CountrySelect from "@/components/PhoneInput/components/CountrySelect";
-import { Country } from "@/components/PhoneInput/types";
-import getInitialDataFromValue from "@/components/PhoneInput/utils/getInitialDataFromValue";
-import getPhoneMask from "@/components/PhoneInput/utils/getPhoneMask";
+import CountrySelect from "@/components/ui/PhoneInput/components/CountrySelect";
+import { Country } from "@/components/ui/PhoneInput/types";
+import getInitialDataFromValue from "@/components/ui/PhoneInput/utils/getInitialDataFromValue";
+import getPhoneMask from "@/components/ui/PhoneInput/utils/getPhoneMask";
 
 type AdditionalProps = {
     onChange: (value: string | null) => void;

src/components/ui/PhoneInput/components/CountrySelect.tsx

@@ -10,9 +10,10 @@ import {
     Text,
     useCombobox,
 } from "@mantine/core";
-import style from "@/components/PhoneInput/PhoneInput.module.css";
-import { Country } from "@/components/PhoneInput/types";
-import countryOptionsDataMap from "@/components/PhoneInput/utils/countryOptionsDataMap";
+import style from "@/components/ui/PhoneInput/PhoneInput.module.css";
+import { Country } from "@/components/ui/PhoneInput/types";
+import countryOptionsDataMap from "@/components/ui/PhoneInput/utils/countryOptionsDataMap";
+
 
 const countryOptionsData = Object.values(countryOptionsDataMap);
 

src/components/ui/PhoneInput/utils/countryOptionsDataMap.ts

@@ -1,9 +1,9 @@
 import countries from "i18n-iso-countries";
 import ru from "i18n-iso-countries/langs/ru.json";
 import { type CountryCode, getCountries } from "libphonenumber-js";
-import getFlagEmoji from "@/components/PhoneInput/utils/getFlagEmoji";
+import getFlagEmoji from "@/components/ui/PhoneInput/utils/getFlagEmoji";
 import { getCountryCallingCode } from "libphonenumber-js/max";
-import { Country } from "@/components/PhoneInput/types";
+import { Country } from "@/components/ui/PhoneInput/types";
 
 countries.registerLocale(ru);
 

src/components/ui/PhoneInput/utils/getInitialDataFromValue.ts

@@ -1,7 +1,7 @@
 import { CountryCode } from "libphonenumber-js";
-import { Country } from "@/components/PhoneInput/types";
-import countryOptionsDataMap from "@/components/PhoneInput/utils/countryOptionsDataMap";
-import getPhoneMask from "@/components/PhoneInput/utils/getPhoneMask";
+import { Country } from "@/components/ui/PhoneInput/types";
+import countryOptionsDataMap from "@/components/ui/PhoneInput/utils/countryOptionsDataMap";
+import getPhoneMask from "@/components/ui/PhoneInput/utils/getPhoneMask";
 
 type InitialDataFromValue = {
     country: Country;