73 Common structure (#74)

common folder

src/App.tsx

@@ -2,15 +2,15 @@ import { RouterProvider } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
-import ErrorBoundary from 'components/Errors/ErrorBoundary';
-import ErrorFallback from 'components/Errors/ErrorFallback';
-import ConfigContextProvider from 'providers/ConfigProvider';
-import SettingsContextProvider from 'providers/SettingsProvider';
-import AxiosContextProvider from 'providers/AxiosProvider';
-import { router } from 'components/Router/Router';
-import Theme from 'components/Theme/Theme';
-import AuthContextProvider from 'providers/AuthProvider';
-import ToastsProvider from 'providers/ToastsProvider';
+import ErrorBoundary from 'common/components/Errors/ErrorBoundary';
+import ErrorFallback from 'common/components/Errors/ErrorFallback';
+import ConfigContextProvider from 'common/providers/ConfigProvider';
+import SettingsContextProvider from 'common/providers/SettingsProvider';
+import AxiosContextProvider from 'common/providers/AxiosProvider';
+import { router } from 'common/components/Router/Router';
+import Theme from 'common/components/Theme/Theme';
+import AuthContextProvider from 'common/providers/AuthProvider';
+import ToastsProvider from 'common/providers/ToastsProvider';
 
 /**
  * React Query `QueryClient` and configuration.

src/__fixtures__/settings.ts

@@ -1,3 +1,3 @@
-import { Settings } from 'api/useGetSettings';
+import { Settings } from 'common/api/useGetSettings';
 
 export const settingsFixture: Settings = { theme: 'dark' };

src/__fixtures__/toasts.ts

@@ -1,4 +1,4 @@
-import { ToastDetail } from 'providers/ToastsContext';
+import { ToastDetail } from 'common/providers/ToastsContext';
 
 export const toastFixture: ToastDetail = {
   id: 'toast1',

src/__fixtures__/tokens.ts

@@ -1,4 +1,4 @@
-import { UserTokens } from 'api/useGetUserTokens';
+import { UserTokens } from 'common/api/useGetUserTokens';
 
 export const userTokensFixture: UserTokens = {
   id_token: 'id-token',

src/__fixtures__/users.ts

@@ -1,4 +1,4 @@
-import { User } from 'api/useGetUser';
+import { User } from 'common/api/useGetUser';
 
 export const userFixture1: User = {
   id: 1,

src/api/__tests__/useGetCurrentUser.test.ts → src/common/api/__tests__/useGetCurrentUser.test.ts

@@ -2,9 +2,9 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { renderHook, waitFor } from 'test/test-utils';
 
 import { userFixture1 } from '__fixtures__/users';
-import storage from 'utils/storage';
+import storage from 'common/utils/storage';
 
-import { useGetCurrentUser } from 'api/useGetCurrentUser';
+import { useGetCurrentUser } from 'common/api/useGetCurrentUser';
 
 describe('useGetCurrentUser', () => {
   const getItemSpy = vi.spyOn(storage, 'getItem');

src/api/__tests__/useGetSettings.test.ts → src/common/api/__tests__/useGetSettings.test.ts

@@ -2,10 +2,10 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { renderHook, waitFor } from 'test/test-utils';
 
 import { settingsFixture } from '__fixtures__/settings';
-import { DEFAULT_SETTINGS, StorageKeys } from 'utils/constants';
-import storage from 'utils/storage';
+import { DEFAULT_SETTINGS, StorageKeys } from 'common/utils/constants';
+import storage from 'common/utils/storage';
 
-import { useGetSettings } from 'api/useGetSettings';
+import { useGetSettings } from 'common/api/useGetSettings';
 
 describe('useGetSettings', () => {
   const getItemSpy = vi.spyOn(storage, 'getItem');

src/api/__tests__/useGetUser.test.ts → src/common/api/__tests__/useGetUser.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { useGetUser } from 'api/useGetUser';
+import { useGetUser } from 'common/api/useGetUser';
 import { renderHook, waitFor } from 'test/test-utils';
 
 describe('useGetUser', () => {

src/api/__tests__/useGetUserTokens.test.ts → src/common/api/__tests__/useGetUserTokens.test.ts

@@ -3,10 +3,10 @@ import dayjs from 'dayjs';
 
 import { renderHook, waitFor } from 'test/test-utils';
 import WithQueryClientProvider from 'test/wrappers/WithQueryClientProvider';
-import storage from 'utils/storage';
+import storage from 'common/utils/storage';
 import { userTokensFixture } from '__fixtures__/tokens';
 
-import { UserTokens, useGetUserTokens } from 'api/useGetUserTokens';
+import { UserTokens, useGetUserTokens } from 'common/api/useGetUserTokens';
 
 describe('useGetTokens', () => {
   const getItemSpy = vi.spyOn(storage, 'getItem');

src/api/__tests__/useSetSettings.test.ts → src/common/api/__tests__/useSetSettings.test.ts

@@ -1,10 +1,10 @@
 import { describe, expect, it, vi } from 'vitest';
 import { renderHook, waitFor } from 'test/test-utils';
 
-import storage from 'utils/storage';
-import { Settings } from 'api/useGetSettings';
+import storage from 'common/utils/storage';
+import { Settings } from 'common/api/useGetSettings';
 
-import { useSetSettings } from 'api/useSetSettings';
+import { useSetSettings } from 'common/api/useSetSettings';
 
 describe('useSetSettings', () => {
   const setItemSpy = vi.spyOn(storage, 'setItem');

src/api/useGetCurrentUser.ts → src/common/api/useGetCurrentUser.ts

@@ -1,8 +1,8 @@
 import { useQuery } from '@tanstack/react-query';
 
-import storage from 'utils/storage';
+import storage from 'common/utils/storage';
 import { User } from './useGetUser';
-import { QueryKeys, StorageKeys } from 'utils/constants';
+import { QueryKeys, StorageKeys } from 'common/utils/constants';
 
 /**
  * An API hook which fetches the currently authenticated `User`.

src/api/useGetSettings.ts → src/common/api/useGetSettings.ts

@@ -1,7 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
 
-import { DEFAULT_SETTINGS, QueryKeys, StorageKeys } from 'utils/constants';
-import storage from 'utils/storage';
+import { DEFAULT_SETTINGS, QueryKeys, StorageKeys } from 'common/utils/constants';
+import storage from 'common/utils/storage';
 
 /**
  * The `Settings` are user preferences.

src/api/useGetUser.ts → src/common/api/useGetUser.ts

@@ -1,8 +1,8 @@
 import { UseQueryResult, useQuery } from '@tanstack/react-query';
 
-import { useAxios } from 'hooks/useAxios';
-import { useConfig } from 'hooks/useConfig';
-import { QueryKeys } from 'utils/constants';
+import { useAxios } from 'common/hooks/useAxios';
+import { useConfig } from 'common/hooks/useConfig';
+import { QueryKeys } from 'common/utils/constants';
 
 /**
  * The `Address` type.

src/api/useGetUserTokens.ts → src/common/api/useGetUserTokens.ts

@@ -1,8 +1,8 @@
 import { UseQueryOptions, UseQueryResult, useQuery } from '@tanstack/react-query';
 import dayjs from 'dayjs';
 
-import { QueryKeys, StorageKeys } from 'utils/constants';
-import storage from 'utils/storage';
+import { QueryKeys, StorageKeys } from 'common/utils/constants';
+import storage from 'common/utils/storage';
 
 /**
  * A `UserTokens` object contains OAuth access, id, and refresh tokens

src/api/useSetSettings.ts → src/common/api/useSetSettings.ts

@@ -1,7 +1,7 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 
-import storage from 'utils/storage';
-import { DEFAULT_SETTINGS, QueryKeys, StorageKeys } from 'utils/constants';
+import storage from 'common/utils/storage';
+import { DEFAULT_SETTINGS, QueryKeys, StorageKeys } from 'common/utils/constants';
 import { Settings } from './useGetSettings';
 
 /**

src/components/Button/LanguageToggle.tsx → src/common/components/Button/LanguageToggle.tsx

@@ -1,12 +1,12 @@
 import { ButtonVariant, PropsWithClassName } from '@leanstacks/react-common';
 import { useTranslation } from 'react-i18next';
 
-import { StorageKeys } from 'utils/constants';
-import storage from 'utils/storage';
-import Dropdown from 'components/Dropdown/Dropdown';
-import FAIcon from 'components/Icon/FAIcon';
-import DropdownContent from 'components/Dropdown/DropdownContent';
-import DropdownItem from 'components/Dropdown/DropdownItem';
+import { StorageKeys } from 'common/utils/constants';
+import storage from 'common/utils/storage';
+import Dropdown from 'common/components/Dropdown/Dropdown';
+import FAIcon from 'common/components/Icon/FAIcon';
+import DropdownContent from 'common/components/Dropdown/DropdownContent';
+import DropdownItem from 'common/components/Dropdown/DropdownItem';
 import Button from './Button';
 
 /**

src/components/Button/ThemeToggle.tsx → src/common/components/Button/ThemeToggle.tsx

@@ -1,10 +1,10 @@
 import { ButtonVariant, PropsWithClassName } from '@leanstacks/react-common';
 import classNames from 'classnames';
 
-import { useSetSettings } from 'api/useSetSettings';
-import { useSettings } from 'hooks/useSettings';
+import { useSetSettings } from 'common/api/useSetSettings';
+import { useSettings } from 'common/hooks/useSettings';
 import Button from './Button';
-import FAIcon from 'components/Icon/FAIcon';
+import FAIcon from 'common/components/Icon/FAIcon';
 
 /**
  * Properties for the `ThemeToggle` component.

src/components/Button/__tests__/LanguageToggle.test.tsx → src/common/components/Button/__tests__/LanguageToggle.test.tsx

@@ -1,9 +1,9 @@
 import userEvent from '@testing-library/user-event';
 import { describe, expect, it, vi } from 'vitest';
 
-import { StorageKeys } from 'utils/constants';
+import { StorageKeys } from 'common/utils/constants';
 import { render, screen } from 'test/test-utils';
-import storage from 'utils/storage';
+import storage from 'common/utils/storage';
 
 import LanguageToggle from '../LanguageToggle';
 

src/components/Button/__tests__/ThemeToggle.test.tsx → src/common/components/Button/__tests__/ThemeToggle.test.tsx

@@ -3,9 +3,9 @@ import { UseMutationResult } from '@tanstack/react-query';
 import userEvent from '@testing-library/user-event';
 
 import { render, screen } from 'test/test-utils';
-import { Settings } from 'api/useGetSettings';
-import * as UseSettings from 'hooks/useSettings';
-import * as UseSetSettings from 'api/useSetSettings';
+import { Settings } from 'common/api/useGetSettings';
+import * as UseSettings from 'common/hooks/useSettings';
+import * as UseSetSettings from 'common/api/useSetSettings';
 import { settingsFixture } from '__fixtures__/settings';
 
 import ThemeToggle from '../ThemeToggle';

src/components/Card/MessageCard.tsx → src/common/components/Card/MessageCard.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 
 import Card, { CardProps } from './Card';
-import FAIcon, { FAIconProps } from 'components/Icon/FAIcon';
+import FAIcon, { FAIconProps } from 'common/components/Icon/FAIcon';
 
 /**
  * Properties for the `MessageCard` React component.

src/components/Footer/Footer.tsx → src/common/components/Footer/Footer.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import dayjs from 'dayjs';
 import { useTranslation } from 'react-i18next';
 
-import Link from 'components/Link/Link';
+import Link from 'common/components/Link/Link';
 
 /**
  * Properties for the `Footer` component.

src/components/Form/SearchField.tsx → src/common/components/Form/SearchField.tsx

@@ -2,7 +2,7 @@ import { ChangeEvent, ReactElement, useEffect, useRef } from 'react';
 import { PropsWithClassName, PropsWithTestId } from '@leanstacks/react-common';
 import classNames from 'classnames';
 
-import FAIcon from 'components/Icon/FAIcon';
+import FAIcon from 'common/components/Icon/FAIcon';
 import { SearchResultProps } from './SearchResult';
 
 /**

src/components/Form/SelectField.tsx → src/common/components/Form/SelectField.tsx

@@ -3,7 +3,7 @@ import { PropsWithTestId } from '@leanstacks/react-common';
 import { useField } from 'formik';
 import classNames from 'classnames';
 
-import FAIcon from 'components/Icon/FAIcon';
+import FAIcon from 'common/components/Icon/FAIcon';
 
 /**
  * Describes a single option for a `SelectField`. If `label` is omitted,

src/components/Header/AppMenu.tsx → src/common/components/Header/AppMenu.tsx

@@ -1,11 +1,11 @@
-import { useAuth } from 'hooks/useAuth';
-import { useGetCurrentUser } from 'api/useGetCurrentUser';
+import { useAuth } from 'common/hooks/useAuth';
+import { useGetCurrentUser } from 'common/api/useGetCurrentUser';
 
 import logo from './logo.png';
-import SideMenu, { SideMenuProps } from 'components/Menu/SideMenu/SideMenu';
-import MenuNavLink from 'components/Menu/MenuNavLink';
-import Avatar from 'components/Icon/Avatar';
-import MenuSeparator from 'components/Menu/MenuSeparator';
+import SideMenu, { SideMenuProps } from 'common/components/Menu/SideMenu/SideMenu';
+import MenuNavLink from 'common/components/Menu/MenuNavLink';
+import Avatar from 'common/components/Icon/Avatar';
+import MenuSeparator from 'common/components/Menu/MenuSeparator';
 
 /**
  * Properties fro the `AppMenu` component.

src/components/Header/Header.tsx → src/common/components/Header/Header.tsx

@@ -1,12 +1,12 @@
 import { Link } from 'react-router-dom';
 import { PropsWithTestId } from '@leanstacks/react-common';
 
-import { useAuth } from 'hooks/useAuth';
+import { useAuth } from 'common/hooks/useAuth';
 import logo from './logo.png';
-import ThemeToggle from 'components/Button/ThemeToggle';
+import ThemeToggle from 'common/components/Button/ThemeToggle';
 import AppMenu from './AppMenu';
-import MenuButton from 'components/Menu/MenuButton';
-import LanguageToggle from 'components/Button/LanguageToggle';
+import MenuButton from 'common/components/Menu/MenuButton';
+import LanguageToggle from 'common/components/Button/LanguageToggle';
 
 /**
  * Properties for the `Header` component.

src/components/Header/__tests__/AppMenu.test.tsx → src/common/components/Header/__tests__/AppMenu.test.tsx

@@ -3,9 +3,9 @@ import { render, screen } from 'test/test-utils';
 import { queryClient } from 'test/query-client';
 import { UseQueryResult } from '@tanstack/react-query';
 
-import { User } from 'api/useGetUser';
-import * as UseAuth from 'hooks/useAuth';
-import * as UseGetCurrentUser from 'api/useGetCurrentUser';
+import { User } from 'common/api/useGetUser';
+import * as UseAuth from 'common/hooks/useAuth';
+import * as UseGetCurrentUser from 'common/api/useGetCurrentUser';
 import { userFixture1 } from '__fixtures__/users';
 
 import AppMenu from '../AppMenu';

src/components/Header/__tests__/Header.test.tsx → src/common/components/Header/__tests__/Header.test.tsx

@@ -4,7 +4,7 @@ import { Route, Routes } from 'react-router-dom';
 
 import { render, screen } from 'test/test-utils';
 
-import * as UseAuth from 'hooks/useAuth';
+import * as UseAuth from 'common/hooks/useAuth';
 
 import Header from '../Header';
 

src/components/Layout/StandardLayout.tsx → src/common/components/Layout/StandardLayout.tsx

@@ -1,9 +1,9 @@
 import { PropsWithClassName, PropsWithTestId } from '@leanstacks/react-common';
 import { Outlet } from 'react-router-dom';
 
-import Header from 'components/Header/Header';
-import Footer from 'components/Footer/Footer';
-import Toasts from 'components/Toast/Toasts';
+import Header from 'common/components/Header/Header';
+import Footer from 'common/components/Footer/Footer';
+import Toasts from 'common/components/Toast/Toasts';
 
 /**
  * Properties for the `StandardLayout` component.

src/components/Loader/LoaderSpinner.tsx → src/common/components/Loader/LoaderSpinner.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { BaseComponentProps } from '@leanstacks/react-common';
 
-import FAIcon, { FAIconProps } from 'components/Icon/FAIcon';
+import FAIcon, { FAIconProps } from 'common/components/Icon/FAIcon';
 
 /**
  * Properties for the `LoaderSpinner` component.

src/components/Menu/MenuButton.tsx → src/common/components/Menu/MenuButton.tsx

@@ -3,8 +3,8 @@ import { ButtonVariant, PropsWithClassName, PropsWithTestId } from '@leanstacks/
 import classNames from 'classnames';
 
 import { MenuProps } from './Menu';
-import Button from 'components/Button/Button';
-import FAIcon from 'components/Icon/FAIcon';
+import Button from 'common/components/Button/Button';
+import FAIcon from 'common/components/Icon/FAIcon';
 
 /**
  * Properties for the `MenuButton` component.

src/components/Menu/MenuCloseButton.tsx → src/common/components/Menu/MenuCloseButton.tsx

@@ -1,8 +1,8 @@
 import { ButtonVariant, PropsWithClassName, PropsWithTestId } from '@leanstacks/react-common';
 import classNames from 'classnames';
 
-import Button from 'components/Button/Button';
-import FAIcon from 'components/Icon/FAIcon';
+import Button from 'common/components/Button/Button';
+import FAIcon from 'common/components/Icon/FAIcon';
 
 /**
  * Properties for the `MenuCloseButton` component.

src/components/Menu/MenuNavLink.tsx → src/common/components/Menu/MenuNavLink.tsx

@@ -2,7 +2,7 @@ import { NavLink, NavLinkProps } from 'react-router-dom';
 import { PropsWithTestId } from '@leanstacks/react-common';
 import classNames from 'classnames';
 
-import FAIcon, { FAIconProps } from 'components/Icon/FAIcon';
+import FAIcon, { FAIconProps } from 'common/components/Icon/FAIcon';
 
 /**
  * Properties for the `MenuNavLink` component.

src/components/Router/PrivateOutlet.tsx → src/common/components/Router/PrivateOutlet.tsx

@@ -1,4 +1,4 @@
-import { useAuth } from 'hooks/useAuth';
+import { useAuth } from 'common/hooks/useAuth';
 import { Navigate, Outlet } from 'react-router-dom';
 
 /**

src/components/Router/Router.tsx → src/common/components/Router/Router.tsx

@@ -1,6 +1,6 @@
 import { Navigate, RouteObject, createBrowserRouter } from 'react-router-dom';
 
-import StandardLayout from 'components/Layout/StandardLayout';
+import StandardLayout from 'common/components/Layout/StandardLayout';
 import ErrorPage from 'pages/ErrorPage/ErrorPage';
 import PrivateOutlet from './PrivateOutlet';
 import LandingPage from 'pages/LandingPage/LandingPage';

src/components/Router/__tests__/PrivateOutlet.test.tsx → src/common/components/Router/__tests__/PrivateOutlet.test.tsx

@@ -2,7 +2,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { Navigate, Route, Routes } from 'react-router-dom';
 
 import { render, screen } from 'test/test-utils';
-import * as UseAuth from 'hooks/useAuth';
+import * as UseAuth from 'common/hooks/useAuth';
 
 import PrivateOutlet from '../PrivateOutlet';
 

src/components/Tabs/Tabs.tsx → src/common/components/Tabs/Tabs.tsx

@@ -2,8 +2,8 @@ import { PropsWithTestId } from '@leanstacks/react-common';
 import { useSearchParams } from 'react-router-dom';
 import classNames from 'classnames';
 
-import { toNumberBetween } from 'utils/numbers';
-import { SearchParam } from 'utils/constants';
+import { toNumberBetween } from 'common/utils/numbers';
+import { SearchParam } from 'common/utils/constants';
 import Tab, { TabProps } from './Tab';
 import TabContent, { TabContentProps } from './TabContent';