Refacto developer documentation

site/source/components/ChiffreAffairesActivitéMixte.tsx

@@ -143,6 +143,7 @@ function ActivitéMixte() {
 const StyledActivitéMixteContainer = styled.div`
 	display: flex;
 	align-items: center;
+	justify-content: flex-end;
 
 	@media (min-width: ${({ theme }) => theme.breakpointsWidth.sm}) {
 		text-align: right;
@@ -150,7 +151,6 @@ const StyledActivitéMixteContainer = styled.div`
 		position: relative;
 		z-index: 2;
 		display: flex;
-		justify-content: flex-end;
 		align-items: center;
 	}
 `

site/source/design-system/accordion/index.stories.tsx

@@ -1,7 +1,7 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react'
 import { Accordion } from '@/design-system'
 import { Body } from '@/design-system/typography/paragraphs'
 import { Item } from '@react-stately/collections'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
 
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {

site/source/design-system/accordion/index.tsx

@@ -9,9 +9,7 @@ import useMeasure from 'react-use-measure'
 import styled, { css } from 'styled-components'
 import chevronImg from './chevron.svg'
 
-export default function Accordion<T extends object>(
-	props: AriaAccordionProps<T>
-) {
+export const Accordion = <T extends object>(props: AriaAccordionProps<T>) => {
 	const state = useTreeState<T>(props)
 	const ref = useRef<HTMLDivElement>(null)
 	const { accordionProps } = useAccordion(props, state, ref)
@@ -64,7 +62,10 @@ function AccordionItem<T>(props: AccordionItemProps<T>) {
 					<ChevronRightMedium aria-hidden="true" $isOpen={isOpen} />
 				</StyledButton>
 			</StyledTitle>
-			<StyledContent {...regionProps} style={animatedStyle}>
+			<StyledContent
+				{...(regionProps as Omit<typeof regionProps, 'css'>)}
+				style={animatedStyle}
+			>
 				<div ref={regionRef}>{item.props.children}</div>
 			</StyledContent>
 		</StyledAccordionItem>
@@ -74,11 +75,13 @@ function AccordionItem<T>(props: AccordionItemProps<T>) {
 const StyledTitle = styled.h3`
 	margin: 0;
 `
+
 const StyledAccordionItem = styled.div`
 	:not(:first-child) {
 		border-top: 1px solid ${({ theme }) => theme.colors.bases.primary[400]};
 	}
 `
+
 const StyledButton = styled.button`
 	display: flex;
 	width: 100%;
@@ -105,9 +108,12 @@ const StyledButton = styled.button`
 		${FocusStyle}
 	}
 `
-const ChevronRightMedium = styled.img.attrs({ src: chevronImg })<{
+
+interface Chevron {
 	$isOpen: boolean
-}>`
+}
+
+const ChevronRightMedium = styled.img.attrs({ src: chevronImg })<Chevron>`
 	transition: transform 0.3s;
 	${({ $isOpen }) =>
 		$isOpen &&
@@ -116,9 +122,11 @@ const ChevronRightMedium = styled.img.attrs({ src: chevronImg })<{
 		`}
 `
 
-const StyledContent: any = styled(animated.div)`
+const StyledContent = styled(animated.div)`
 	overflow: hidden;
 	> div {
 		margin: ${({ theme }) => theme.spacings.lg};
 	}
 `
+
+Accordion.StyledTitle = StyledTitle

site/source/design-system/index.ts

@@ -6,5 +6,5 @@ export { default as Popover } from './popover/Popover'
 export { default as PopoverWithTrigger } from './popover/PopoverWithTrigger'
 export * as typography from './typography'
 export * from './message'
-export { default as Accordion } from './accordion'
+export { Accordion } from './accordion'
 export { Step, Stepper } from './stepper'

site/source/design-system/switch/Switch.tsx

@@ -66,7 +66,7 @@ const StyledSwitch = styled.span<StyledProps>`
 					? ''
 					: checked
 					? theme.colors.bases.primary[700]
-					: theme.colors.extended.grey[500]}42;
+					: theme.colors.extended.grey[500]}42; // 42 is alpha
 	}
 	${({ disabled, theme }) =>
 		disabled

site/source/pages/Documentation.tsx

@@ -5,6 +5,7 @@ import { useEngine } from '@/components/utils/EngineContext'
 import { Markdown } from '@/components/utils/markdown'
 import Meta from '@/components/utils/Meta'
 import { ScrollToTop } from '@/components/utils/Scroll'
+import { Accordion } from '@/design-system'
 import { Button } from '@/design-system/buttons'
 import { Grid, Spacing } from '@/design-system/layout'
 import { H1, H2, H3, H4, H5 } from '@/design-system/typography/heading'
@@ -12,7 +13,9 @@ import { Link, StyledLink } from '@/design-system/typography/link'
 import { Li, Ul } from '@/design-system/typography/list'
 import { Body } from '@/design-system/typography/paragraphs'
 import { RootState } from '@/reducers/rootReducer'
+import { situationSelector } from '@/selectors/simulationSelectors'
 import { useSitePaths } from '@/sitePaths'
+import { Item } from '@react-stately/collections'
 import rules, { DottedName } from 'modele-social'
 import { getDocumentationSiteMap, RulePage } from 'publicodes-react'
 import { ComponentProps, useMemo, useRef } from 'react'
@@ -70,18 +73,52 @@ export default function MonEntrepriseRulePage() {
 	)
 }
 
+const Pre = styled.pre`
+	overflow: auto;
+	padding: 0.5rem;
+	background-color: ${({ theme }) => theme.colors.extended.grey[300]};
+	border-radius: 0.25rem;
+`
+
+const StyledAccordion = styled(Accordion)`
+	margin: 1.5rem 0;
+
+	${Accordion.StyledTitle} {
+		margin: 0;
+		& span {
+			font-weight: bold;
+		}
+	}
+`
+
+type Renderers = ComponentProps<typeof RulePage>['renderers']
+type AccordionProps = ComponentProps<NonNullable<Renderers['Accordion']>>
+
+const CustomAccordion = ({ items }: AccordionProps) => (
+	<StyledAccordion>
+		{items.map(({ title, id, children }) => (
+			<Item title={title} key={id} hasChildItems={false}>
+				{children}
+			</Item>
+		))}
+	</StyledAccordion>
+)
+
 function DocumentationPageBody() {
 	const engine = useEngine()
 	const { absoluteSitePaths } = useSitePaths()
 	const documentationPath = absoluteSitePaths.documentation.index
 	const { i18n } = useTranslation()
 	const params = useParams<{ '*': string }>()
+	const situation = useSelector(situationSelector)
 
 	const { current: renderers } = useRef({
 		Head: Helmet,
 		Link,
 		Text: Markdown,
+		Pre,
 		References,
+		Accordion: CustomAccordion,
 	} as ComponentProps<typeof RulePage>['renderers'])
 
 	return (
@@ -90,6 +127,7 @@ function DocumentationPageBody() {
 				language={i18n.language as 'fr' | 'en'}
 				rulePath={params['*'] ?? ''}
 				engine={engine}
+				situation={situation}
 				documentationPath={documentationPath}
 				renderers={renderers}
 			/>

site/source/pages/gerer/declaration-revenu-independants/declaration.tsx

@@ -3,8 +3,7 @@ import { Condition } from '@/components/EngineValue'
 import { FromTop } from '@/components/ui/animate'
 import { useEngine } from '@/components/utils/EngineContext'
 import { Markdown } from '@/components/utils/markdown'
-import { Message } from '@/design-system'
-import Accordion from '@/design-system/accordion'
+import { Accordion, Message } from '@/design-system'
 import { Button } from '@/design-system/buttons'
 import { Grid, Spacing } from '@/design-system/layout'
 import { Strong } from '@/design-system/typography'

site/source/pages/gerer/declaration-revenu-independants/imposition.tsx

@@ -11,8 +11,7 @@ import { RuleReferences } from '@/components/References'
 import { FromTop } from '@/components/ui/animate'
 import { useEngine } from '@/components/utils/EngineContext'
 import { Markdown } from '@/components/utils/markdown'
-import { Message } from '@/design-system'
-import Accordion from '@/design-system/accordion'
+import { Accordion, Message } from '@/design-system'
 import { Button } from '@/design-system/buttons'
 import { Container, Grid, Spacing } from '@/design-system/layout'
 import PopoverWithTrigger from '@/design-system/popover/PopoverWithTrigger'