typescript

mon-entreprise/cypress/integration/publi.codes/index.js

@@ -3,6 +3,7 @@ describe('Navigation', function () {
 		cy.visit('/')
 	})
 	it('liste des mécanismes should not crash', function () {
+		cy.contains('Documentation').click()
 		cy.contains('Liste des mécanismes').click()
 		cy.contains('barème')
 	})

mon-entreprise/source/sites/publi.codes/Documentation.tsx

@@ -1,32 +1,40 @@
 import { MarkdownWithAnchorLinks } from 'Components/utils/markdown'
 import { ScrollToTop } from 'Components/utils/Scroll'
+import { Redirect, Route, Switch } from 'react-router-dom'
+import api from '../../../../publicodes/docs/api.md'
 import principes from '../../../../publicodes/docs/principes-de-base.md'
 import start from '../../../../publicodes/docs/se-lancer.md'
-import api from '../../../../publicodes/docs/api.md'
-import { Redirect, Route, Switch } from 'react-router-dom'
 import { Navigation } from './Header'
 import Mécanismes from './Mécanismes'
 
 const items = [
-	['se-lancer', 'Se lancer', () => <MarkdownWithAnchorLinks source={start} />],
+	[
+		'se-lancer',
+		'Se lancer',
+		() => <MarkdownWithAnchorLinks source={start} />,
+	] as const,
 	[
 		'principes-de-base',
 		'Principes de base',
 		() => <MarkdownWithAnchorLinks source={principes} />,
-	],
-	['api', 'API', () => <MarkdownWithAnchorLinks source={api} />],
-	['mécanismes', 'Liste des mécanismes', Mécanismes],
+	] as const,
+	['api', 'API', () => <MarkdownWithAnchorLinks source={api} />] as const,
+	['mécanismes', 'Liste des mécanismes', Mécanismes] as const,
 ]
 
 export default function Langage() {
 	return (
 		<div>
 			<ScrollToTop />
-			<Navigation items={items} sub="documentation" />
+			<Navigation items={items.map(([a, b]) => [a, b])} sub="documentation" />
 			<main>
 				<Switch>
 					{items.map(([path, _, component]) => (
-						<Route path={'/documentation/' + path} component={component} />
+						<Route
+							path={'/documentation/' + path}
+							key={path}
+							component={component}
+						/>
 					))}
 					<Redirect
 						exact

mon-entreprise/source/sites/publi.codes/Header.tsx

@@ -1,14 +1,19 @@
 import React from 'react'
 import { Link, NavLink } from 'react-router-dom'
 
-export const Header = ({ noSubtitle = false, sectionName = '' }) => (
+const items = [
+	['documentation', 'Documentation'] as const,
+	['communauté', 'Communauté'] as const,
+	['studio', 'Bac à sable'] as const,
+]
+
+export const Header = () => (
 	<header css="text-align: center; a {text-decoration: none}">
 		<Link to="/">
 			<h1>
 				<Logo />
 			</h1>
 		</Link>
-
 		<Navigation items={items} />
 	</header>
 )
@@ -20,12 +25,11 @@ const activeStyle = {
 	padding: '.1rem .3rem',
 } as React.CSSProperties
 
-const items = [
-	['documentation', 'Documentation'],
-	['communauté', 'Communauté'],
-	['studio', 'Bac à sable'],
-]
-export const Navigation = ({ items, sub = false }) => {
+type NavProps = {
+	items: Array<readonly [path: string, title: string]>
+	sub?: string
+}
+export const Navigation = ({ items, sub }: NavProps) => {
 	return (
 		<nav
 			css={`

mon-entreprise/source/sites/publi.codes/Studio.tsx

@@ -11,8 +11,8 @@ import { useDebounce } from 'Components/utils'
 
 const EXAMPLE_CODE = `
 # Bienvenue dans le bac à sable du langage publicode !
-# Pour en savoir plus sur le langage, consultez le tutoriel :
-# => https://publi.codes
+# Pour en savoir plus sur le langage :
+# => https://publi.codes/documentation/principes-de-base
 
 prix:
 prix . carottes: 2€/kg
@@ -114,7 +114,7 @@ export const Results = ({ onClickShare, rules }: ResultsProps) => {
 
 	return (
 		<>
-			{engine.getWarnings().map((warning) => (
+			{engine.getWarnings().map((warning: string) => (
 				<div
 					css={`
 						background: lightyellow;

publicodes/docs/api.md

@@ -97,7 +97,7 @@ intermédiaires qui permettent d'aboutir au résultat affiché.
 
 [Voir un exemple sur mon-entreprise.fr](https://mon-entreprise.fr/documentation/imp%C3%B4t/foyer-fiscal/imp%C3%B4t-sur-le-revenu/imp%C3%B4t-brut-par-part)
 
-## <Documentation />
+## `<Documentation />`
 
 Composant react permettant d'afficher une documentation explorable d'une base de
 règles publicodes. Se base sur react-router pour créer une arborescence de pages
@@ -114,7 +114,7 @@ action (il est affiché sur l'écran de droite).
 -   `language`: le language dans lequel afficher la documentation (pour l'instant,
     seuls `fr` et `en` sont supportés).
 
-## <RuleLink />
+## `<RuleLink />`
 
 Composant react permettant de faire un lien vers une page de la documentation.
 Par défaut, le texte affiché est le nom de la règle.