️(app-desk) clean build pages

Prob:
Next.js transpiles all the files present in the
`pages` directory. But we don't want to transpile
the providers neither the Layout components.

Solution:
We export these components to a core folder.
This commit is contained in:
Anthony LC
2024-04-02 11:02:55 +02:00
committed by Anthony LC
parent 775b32ff45
commit 591045b0ec
30 changed files with 29 additions and 44 deletions

View File

@@ -1,7 +1,7 @@
import fetchMock from 'fetch-mock'; import fetchMock from 'fetch-mock';
import { fetchAPI } from '@/api'; import { fetchAPI } from '@/api';
import { useAuthStore } from '@/features/auth'; import { useAuthStore } from '@/core/auth';
describe('fetchAPI', () => { describe('fetchAPI', () => {
beforeEach(() => { beforeEach(() => {

View File

@@ -1,4 +1,4 @@
import { login, useAuthStore } from '@/features/auth'; import { login, useAuthStore } from '@/core/auth';
/** /**
* Retrieves the CSRF token from the document's cookies. * Retrieves the CSRF token from the document's cookies.

View File

@@ -3,9 +3,10 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { useCunninghamTheme } from '@/cunningham'; import { useCunninghamTheme } from '@/cunningham';
import { Auth } from '@/features/auth/Auth';
import '@/i18n/initI18n'; import '@/i18n/initI18n';
import { Auth } from './auth/Auth';
/** /**
* QueryClient: * QueryClient:
* - defaultOptions: * - defaultOptions:
@@ -21,11 +22,7 @@ const queryClient = new QueryClient({
}, },
}); });
export default function AppProvider({ export function AppProvider({ children }: { children: React.ReactNode }) {
children,
}: {
children: React.ReactNode;
}) {
const { theme } = useCunninghamTheme(); const { theme } = useCunninghamTheme();
return ( return (

View File

@@ -2,11 +2,7 @@ import { Box } from '@/components';
import { HEADER_HEIGHT, Header } from '@/features/header'; import { HEADER_HEIGHT, Header } from '@/features/header';
import { Menu } from '@/features/menu'; import { Menu } from '@/features/menu';
export default function MainLayout({ export function MainLayout({ children }: { children: React.ReactNode }) {
children,
}: {
children: React.ReactNode;
}) {
return ( return (
<Box $height="100vh" $css="overflow:hidden;"> <Box $height="100vh" $css="overflow:hidden;">
<Header /> <Header />

View File

@@ -1,6 +1,6 @@
import { create } from 'zustand'; import { create } from 'zustand';
import { User, getMe } from '@/features/auth/api'; import { User, getMe } from './api';
export const login = () => { export const login = () => {
window.location.replace( window.location.replace(

View File

@@ -0,0 +1,2 @@
export * from './AppProvider';
export * from './MainLayout';

View File

@@ -1,7 +1,7 @@
import { useMutation } from '@tanstack/react-query'; import { useMutation } from '@tanstack/react-query';
import { APIError, errorCauses, fetchAPI } from '@/api'; import { APIError, errorCauses, fetchAPI } from '@/api';
import { User } from '@/features/auth'; import { User } from '@/core/auth';
import { Invitation } from '@/features/members'; import { Invitation } from '@/features/members';
import { Role, Team } from '@/features/teams'; import { Role, Team } from '@/features/teams';

View File

@@ -1,7 +1,7 @@
import { useMutation, useQueryClient } from '@tanstack/react-query'; import { useMutation, useQueryClient } from '@tanstack/react-query';
import { APIError, errorCauses, fetchAPI } from '@/api'; import { APIError, errorCauses, fetchAPI } from '@/api';
import { User } from '@/features/auth'; import { User } from '@/core/auth';
import { Access, KEY_LIST_TEAM_ACCESSES } from '@/features/members'; import { Access, KEY_LIST_TEAM_ACCESSES } from '@/features/members';
import { KEY_LIST_TEAM, KEY_TEAM, Role, Team } from '@/features/teams'; import { KEY_LIST_TEAM, KEY_TEAM, Role, Team } from '@/features/teams';

View File

@@ -1,7 +1,7 @@
import { UseQueryOptions, useQuery } from '@tanstack/react-query'; import { UseQueryOptions, useQuery } from '@tanstack/react-query';
import { APIError, APIList, errorCauses, fetchAPI } from '@/api'; import { APIError, APIList, errorCauses, fetchAPI } from '@/api';
import { User } from '@/features/auth'; import { User } from '@/core/auth';
export type UsersParams = { export type UsersParams = {
query: string; query: string;

View File

@@ -1,4 +1,4 @@
import { User } from '@/features/auth'; import { User } from '@/core/auth';
export enum OptionType { export enum OptionType {
INVITATION = 'invitation', INVITATION = 'invitation',

View File

@@ -3,7 +3,7 @@ import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event'; import userEvent from '@testing-library/user-event';
import fetchMock from 'fetch-mock'; import fetchMock from 'fetch-mock';
import { useAuthStore } from '@/features/auth'; import { useAuthStore } from '@/core/auth';
import { Role } from '@/features/teams'; import { Role } from '@/features/teams';
import { AppWrapper } from '@/tests/utils'; import { AppWrapper } from '@/tests/utils';

View File

@@ -1,4 +1,4 @@
import { useAuthStore } from '@/features/auth'; import { useAuthStore } from '@/core/auth';
import { Role } from '@/features/teams'; import { Role } from '@/features/teams';
import { Access } from '../types'; import { Access } from '../types';

View File

@@ -1,4 +1,4 @@
import { User } from '@/features/auth/'; import { User } from '@/core/auth';
import { Role, Team } from '@/features/teams/'; import { Role, Team } from '@/features/teams/';
export interface Access { export interface Access {

View File

@@ -1,12 +1,11 @@
import { PropsWithChildren } from 'react'; import { PropsWithChildren } from 'react';
import { Box } from '@/components'; import { Box } from '@/components';
import { MainLayout } from '@/core';
import { useCunninghamTheme } from '@/cunningham'; import { useCunninghamTheme } from '@/cunningham';
import { Panel } from '@/features/teams'; import { Panel } from '@/features/teams';
import MainLayout from '../MainLayout'; export function TeamLayout({ children }: PropsWithChildren) {
export default function TeamLayout({ children }: PropsWithChildren) {
const { colorsTokens } = useCunninghamTheme(); const { colorsTokens } = useCunninghamTheme();
return ( return (

View File

@@ -1,3 +1,4 @@
export * from './CardCreateTeam'; export * from './CardCreateTeam';
export * from './Panel/Panel'; export * from './Panel/Panel';
export * from './TeamInfo'; export * from './TeamInfo';
export * from './TeamLayout';

View File

@@ -5,10 +5,9 @@ import styled from 'styled-components';
import Icon404 from '@/assets/icons/icon-404.svg'; import Icon404 from '@/assets/icons/icon-404.svg';
import { Box, StyledLink, Text } from '@/components'; import { Box, StyledLink, Text } from '@/components';
import { MainLayout } from '@/core';
import { NextPageWithLayout } from '@/types/next'; import { NextPageWithLayout } from '@/types/next';
import MainLayout from './MainLayout';
const StyledButton = styled(Button)` const StyledButton = styled(Button)`
width: fit-content; width: fit-content;
padding-left: 2rem; padding-left: 2rem;

View File

@@ -2,9 +2,9 @@ import type { AppProps } from 'next/app';
import Head from 'next/head'; import Head from 'next/head';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { AppProvider } from '@/core/';
import { NextPageWithLayout } from '@/types/next'; import { NextPageWithLayout } from '@/types/next';
import AppProvider from './AppProvider';
import './globals.css'; import './globals.css';
type AppPropsWithLayout = AppProps & { type AppPropsWithLayout = AppProps & {

View File

@@ -1,10 +1,9 @@
import { ReactElement } from 'react'; import { ReactElement } from 'react';
import { Box } from '@/components'; import { Box } from '@/components';
import { MainLayout } from '@/core';
import { NextPageWithLayout } from '@/types/next'; import { NextPageWithLayout } from '@/types/next';
import MainLayout from '../MainLayout';
const Page: NextPageWithLayout = () => { const Page: NextPageWithLayout = () => {
return <Box>Contacts</Box>; return <Box>Contacts</Box>;
}; };

View File

@@ -1,10 +1,9 @@
import { ReactElement } from 'react'; import { ReactElement } from 'react';
import { Box } from '@/components'; import { Box } from '@/components';
import { MainLayout } from '@/core';
import { NextPageWithLayout } from '@/types/next'; import { NextPageWithLayout } from '@/types/next';
import MainLayout from '../MainLayout';
const Page: NextPageWithLayout = () => { const Page: NextPageWithLayout = () => {
return <Box>Favorite</Box>; return <Box>Favorite</Box>;
}; };

View File

@@ -1,10 +1,9 @@
import { ReactElement } from 'react'; import { ReactElement } from 'react';
import { Box } from '@/components'; import { Box } from '@/components';
import { MainLayout } from '@/core';
import { NextPageWithLayout } from '@/types/next'; import { NextPageWithLayout } from '@/types/next';
import MainLayout from '../MainLayout';
const Page: NextPageWithLayout = () => { const Page: NextPageWithLayout = () => {
return <Box>Groups</Box>; return <Box>Groups</Box>;
}; };

View File

@@ -1,9 +1,9 @@
import type { ReactElement } from 'react'; import type { ReactElement } from 'react';
import { TeamLayout } from '@/features/teams/';
import { NextPageWithLayout } from '@/types/next'; import { NextPageWithLayout } from '@/types/next';
import Teams from './teams/'; import Teams from './teams/';
import TeamLayout from './teams/TeamLayout';
const Page: NextPageWithLayout = () => { const Page: NextPageWithLayout = () => {
return <Teams />; return <Teams />;

View File

@@ -1,10 +1,9 @@
import { ReactElement } from 'react'; import { ReactElement } from 'react';
import { Box } from '@/components'; import { Box } from '@/components';
import { MainLayout } from '@/core/';
import { NextPageWithLayout } from '@/types/next'; import { NextPageWithLayout } from '@/types/next';
import MainLayout from '../MainLayout';
const Page: NextPageWithLayout = () => { const Page: NextPageWithLayout = () => {
return <Box>Recent</Box>; return <Box>Recent</Box>;
}; };

View File

@@ -6,11 +6,9 @@ import { ReactElement } from 'react';
import { Box } from '@/components'; import { Box } from '@/components';
import { TextErrors } from '@/components/TextErrors'; import { TextErrors } from '@/components/TextErrors';
import { MemberGrid } from '@/features/members'; import { MemberGrid } from '@/features/members';
import { Role, TeamInfo, useTeam } from '@/features/teams/'; import { Role, TeamInfo, TeamLayout, useTeam } from '@/features/teams/';
import { NextPageWithLayout } from '@/types/next'; import { NextPageWithLayout } from '@/types/next';
import TeamLayout from './TeamLayout';
const Page: NextPageWithLayout = () => { const Page: NextPageWithLayout = () => {
const { const {
query: { id }, query: { id },

View File

@@ -1,11 +1,9 @@
import { ReactElement } from 'react'; import { ReactElement } from 'react';
import { Box } from '@/components'; import { Box } from '@/components';
import { CardCreateTeam } from '@/features/teams'; import { CardCreateTeam, TeamLayout } from '@/features/teams/';
import { NextPageWithLayout } from '@/types/next'; import { NextPageWithLayout } from '@/types/next';
import TeamLayout from './TeamLayout';
const Page: NextPageWithLayout = () => { const Page: NextPageWithLayout = () => {
return ( return (
<Box className="p-l" $justify="center" $align="start" $height="inherit"> <Box className="p-l" $justify="center" $align="start" $height="inherit">

View File

@@ -4,10 +4,9 @@ import { useTranslation } from 'react-i18next';
import styled from 'styled-components'; import styled from 'styled-components';
import { Box, StyledLink } from '@/components'; import { Box, StyledLink } from '@/components';
import { TeamLayout } from '@/features/teams/';
import { NextPageWithLayout } from '@/types/next'; import { NextPageWithLayout } from '@/types/next';
import TeamLayout from './TeamLayout';
const StyledButton = styled(Button)` const StyledButton = styled(Button)`
width: fit-content; width: fit-content;
`; `;