✨ Nouveau layout [NGC-1085] (#662)

package.json

@@ -139,4 +139,4 @@
     "jackspeak": "2.1.1"
   },
   "packageManager": "[email protected]"
-}
+}

src/app/(large-layout)/layout.tsx

@@ -0,0 +1,12 @@
+import ContentLarge from '@/components/layout/ContentLarge'
+import Header from '@/components/layout/Header'
+import { PropsWithChildren } from 'react'
+
+export default async function LargeLayout({ children }: PropsWithChildren) {
+  return (
+    <>
+      <Header />
+      <ContentLarge>{children}</ContentLarge>
+    </>
+  )
+}

src/app/(layout-with-navigation)/stats/_components/StatsContent.tsx → src/app/(large-layout)/stats/_components/StatsContent.tsx

@@ -2,8 +2,6 @@
 
 import Trans from '@/components/translation/Trans'
 import Title from '@/design-system/layout/Title'
-import { useNumberSubscribers } from '@/hooks/useNumberSubscriber'
-import { UseQueryResult } from '@tanstack/react-query'
 import {
   useAllSimulationsTerminees,
   useAllTimeVisits,
@@ -13,7 +11,9 @@ import {
   useCurrentMonthVisits,
   useCurrentMonthWebsites,
   useGetSharedSimulationEvents,
-} from '../_helpers/matomo'
+} from '@/helpers/matomo'
+import { useNumberSubscribers } from '@/hooks/useNumberSubscriber'
+import { UseQueryResult } from '@tanstack/react-query'
 import AcquisitionBlock from './content/AcquisitionBlock'
 import MetabaseIframe from './content/MetabaseIframe'
 import SimulationsBlock from './content/SimulationsBlock'

src/app/(layout-with-navigation)/stats/_components/content/SimulationsChart.tsx → src/app/(large-layout)/stats/_components/content/SimulationsChart.tsx

@@ -1,6 +1,5 @@
+import { useSimulationsChart } from '@/helpers/matomo'
 import { useEffect, useState } from 'react'
-
-import { useSimulationsChart } from '../../_helpers/matomo'
 import Chart from './chart/Chart'
 
 type Props = {

src/app/(layout-with-navigation)/stats/_components/content/VisitsChart.tsx → src/app/(large-layout)/stats/_components/content/VisitsChart.tsx

@@ -1,6 +1,5 @@
+import { useVisitsChart } from '@/helpers/matomo'
 import { useEffect, useState } from 'react'
-
-import { useVisitsChart } from '../../_helpers/matomo'
 import Chart from './chart/Chart'
 
 type Props = {

src/app/(layout-with-navigation)/blog/[slug]/page.tsx → src/app/(narrow-layout)/blog/[slug]/page.tsx

@@ -7,8 +7,8 @@ import Markdown from '@/design-system/utils/Markdown'
 import { getServerTranslation } from '@/helpers/getServerTranslation'
 import { getPost } from '@/helpers/markdown/getPost'
 import { getMetadataObject } from '@/helpers/metadata/getMetadataObject'
-import { Post } from '@/types/posts'
 import { capitalizeString } from '@/utils/capitalizeString'
+import { notFound } from 'next/navigation'
 
 type Props = {
   params: { slug: string }
@@ -17,7 +17,7 @@ type Props = {
 export async function generateMetadata({ params: { slug } }: Props) {
   const { t } = await getServerTranslation()
 
-  const post = (await getPost('src/locales/blog/fr/', slug)) as Post
+  const post = await getPost('src/locales/blog/fr/', slug)
 
   return getMetadataObject({
     title: `${capitalizeString(decodeURI(slug))?.replaceAll(
@@ -26,15 +26,15 @@ export async function generateMetadata({ params: { slug } }: Props) {
     )}, ${t('article du blog - Nos Gestes Climat')}`,
     description: t('Découvrez les articles de blog du site Nos Gestes Climat.'),
     params: { slug },
-    image: post.data.image,
+    image: post?.data?.image,
     alternates: {
       canonical: `/blog/${slug}`,
     },
   })
 }
 
 export default async function BlogPost({ params: { slug } }: Props) {
-  const post = (await getPost('src/locales/blog/fr/', slug)) as Post
+  const post = await getPost('src/locales/blog/fr/', slug)
 
   const lastEditDate = await fetch(
     `https://api.github.com/repos/incubateur-ademe/nosgestesclimat-site-nextjs/commits?path=src%2Flocales%2Fblog%2Ffr%2F${slug}.mdx&page=1&per_page=1`
@@ -44,16 +44,20 @@ export default async function BlogPost({ params: { slug } }: Props) {
       return json[0]?.commit?.committer?.date
     })
 
-  const content = post.content
-  const data = post.data
+  if (!post) {
+    return notFound()
+  }
+
+  const { content, data } = post
 
   return (
-    <div>
-      <Link href="/blog" className="mb-6 block text-sm">
+    <div className="m-auto max-w-2xl">
+      <Link href="/blog" className="mb-8 block text-sm">
         ← <Trans>Retour à la liste des articles</Trans>
       </Link>
 
       <PasserTestBanner />
+
       <Title title={data.title} />
 
       {content ? (

src/app/(narrow-layout)/layout.tsx

@@ -0,0 +1,12 @@
+import ContentNarrow from '@/components/layout/ContentNarrow'
+import Header from '@/components/layout/Header'
+import { PropsWithChildren } from 'react'
+
+export default async function NarrowLayout({ children }: PropsWithChildren) {
+  return (
+    <>
+      <Header />
+      <ContentNarrow>{children}</ContentNarrow>
+    </>
+  )
+}

src/app/(layout-with-navigation)/(simulation)/actions/[...dottedName]/_components/ActionDetail.tsx → src/app/(simulation)/(large-layout)/actions/[...dottedName]/_components/ActionDetail.tsx

@@ -5,6 +5,7 @@ import { actionsClickYes } from '@/constants/tracking/pages/actions'
 import ButtonLink from '@/design-system/inputs/ButtonLink'
 import Card from '@/design-system/layout/Card'
 import Markdown from '@/design-system/utils/Markdown'
+import { filterRelevantMissingVariables } from '@/helpers/actions/filterRelevantMissingVariables'
 import {
   FormProvider,
   useCurrentSimulation,
@@ -17,7 +18,6 @@ import { DottedName, NGCRuleNode } from '@/publicodes-state/types'
 import { trackEvent } from '@/utils/matomo/trackEvent'
 import { utils } from 'publicodes'
 import ActionForm from '../../_components/actions/_components/ActionForm'
-import { filterRelevantMissingVariables } from '../../_helpers/filterRelevantMissingVariables'
 
 const { decodeRuleName, encodeRuleName } = utils
 

src/app/(layout-with-navigation)/(simulation)/actions/_components/ActionsTutorial.tsx → src/app/(simulation)/(large-layout)/actions/_components/ActionsTutorial.tsx

@@ -5,10 +5,10 @@ import { actionsClickStart } from '@/constants/tracking/pages/actions'
 import Button from '@/design-system/inputs/Button'
 import Card from '@/design-system/layout/Card'
 import Emoji from '@/design-system/utils/Emoji'
+import { getCarbonFootprint } from '@/helpers/actions/getCarbonFootprint'
 import { useClientTranslation } from '@/hooks/useClientTranslation'
 import { useEngine, useUser } from '@/publicodes-state'
 import { trackEvent } from '@/utils/matomo/trackEvent'
-import { getCarbonFootprint } from '../_helpers/getCarbonFootprint'
 
 export default function ActionsTutorial() {
   const { t, i18n } = useClientTranslation()

src/app/(layout-with-navigation)/(simulation)/actions/_components/actions/_components/ActionCard.tsx → src/app/(simulation)/(large-layout)/actions/_components/actions/_components/ActionCard.tsx

@@ -11,6 +11,8 @@ import {
 } from '@/constants/tracking/pages/actions'
 import NotificationBubble from '@/design-system/alerts/NotificationBubble'
 import Emoji from '@/design-system/utils/Emoji'
+import { filterRelevantMissingVariables } from '@/helpers/actions/filterRelevantMissingVariables'
+import { getIsActionDisabled } from '@/helpers/actions/getIsActionDisabled'
 import { getIsCustomAction } from '@/helpers/actions/getIsCustomAction'
 import {
   getBackgroundLightColor,
@@ -28,8 +30,6 @@ import { DottedName } from '@/publicodes-state/types'
 import { trackEvent } from '@/utils/matomo/trackEvent'
 import { encodeRuleName } from '@/utils/publicodes/encodeRuleName'
 import { useCallback } from 'react'
-import { filterRelevantMissingVariables } from '../../../_helpers/filterRelevantMissingVariables'
-import { getIsActionDisabled } from '../../../_helpers/getIsActionDisabled'
 import ActionValue from './ActionValue'
 
 type Props = {

src/app/(layout-with-navigation)/(simulation)/actions/_components/actions/_components/ActionValue.tsx → src/app/(simulation)/(large-layout)/actions/_components/actions/_components/ActionValue.tsx

@@ -1,9 +1,9 @@
+import { getCarbonFootprint } from '@/helpers/actions/getCarbonFootprint'
 import { useClientTranslation } from '@/hooks/useClientTranslation'
 import { useRule } from '@/publicodes-state'
 import { DottedName, NodeValue } from '@/publicodes-state/types'
 import { TranslationFunctionType } from '@/types/translation'
 import { getCorrectedValue } from '@/utils/getCorrectedValue'
-import { getCarbonFootprint } from '../../../_helpers/getCarbonFootprint'
 
 const getFormattedActionValue = (
   { t, i18n }: { t: TranslationFunctionType; i18n: any },

src/app/(layout-with-navigation)/(simulation)/actions/page.tsx → src/app/(simulation)/(large-layout)/actions/page.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import getActions from '@/helpers/actions/getActions'
 import {
   useCurrentSimulation,
   useEngine,
@@ -14,7 +15,6 @@ import OptionBar from './_components/OptionBar'
 import SimulationMissing from './_components/SimulationMissing'
 import Actions from './_components/actions/Actions'
 import CategoryFilters from './_components/categoryFilters/CategoryFilters'
-import getActions from './_helpers/getActions'
 
 export default function ActionsPage({
   searchParams,

src/app/(layout-with-navigation)/(simulation)/amis/invitation/layout.tsx → src/app/(simulation)/(large-layout)/amis/invitation/layout.tsx

@@ -1,6 +1,5 @@
 import { getServerTranslation } from '@/helpers/getServerTranslation'
 import { getMetadataObject } from '@/helpers/metadata/getMetadataObject'
-import { FormProvider } from '@/publicodes-state'
 import { PropsWithChildren } from 'react'
 
 export async function generateMetadata() {
@@ -20,5 +19,5 @@ export async function generateMetadata() {
 export default async function SimulateurLayout({
   children,
 }: PropsWithChildren) {
-  return <FormProvider>{children}</FormProvider>
+  return <>{children}</>
 }

src/app/(layout-with-navigation)/(simulation)/amis/resultats/layout.tsx → src/app/(simulation)/(large-layout)/amis/resultats/layout.tsx

@@ -1,6 +1,5 @@
 import { getServerTranslation } from '@/helpers/getServerTranslation'
 import { getMetadataObject } from '@/helpers/metadata/getMetadataObject'
-import { FormProvider } from '@/publicodes-state'
 import { PropsWithChildren } from 'react'
 
 export async function generateMetadata() {
@@ -17,9 +16,6 @@ export async function generateMetadata() {
   })
 }
 
-export default function Layout({
-  params,
-  children,
-}: PropsWithChildren<{ params: { root: string } }>) {
-  return <FormProvider root={params.root}>{children}</FormProvider>
+export default function Layout({ children }: PropsWithChildren) {
+  return <>{children}</>
 }