betagouv
/
mon-entreprise
mirror of https://github.com/betagouv/mon-entreprise
1
0
Fork 0
Code Releases Activity

Composant UI Grid (#2147) 

* Intégration d'un composant Grid

Pour supprimer @mui/material

* Utilisation CSS Grid

* Retour sur l'implémentation flexbox

* Retire @mui/material

* Retire emotion

* Corrections de type

* Suport de toutes les props d'un div sur la grid
pull/2178/head
Maxime Quandalle 2022-06-22 12:35:50 +02:00 committed by GitHub
parent 4f3004932a
commit d5873a806e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
64 changed files with 646 additions and 695 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -31,9 +31,6 @@
"i18n:check": "yarn workspace site i18n:check",
"i18n:translate": "yarn workspace site i18n:translate"
},
"resolutions": {
"@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"
},
"devDependencies": {
"@actions/core": "^1.9.0",
"@typescript-eslint/eslint-plugin": "^5.25.0",

8
site/package.json
View File

@ -46,16 +46,8 @@
"storybook": "start-storybook -p 6006",
"build:storybook": "build-storybook"
},
"resolutions": {
"@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"
},
"dependencies": {
"@emotion/react": "^11.7.1",
"@emotion/styled": "^11.6.0",
"@icons/material": "^0.4.1",
"@internationalized/number": "^3.0.3",
"@mui/material": "^5.0.4",
"@mui/styled-engine": "npm:@mui/styled-engine-sc@latest",
"@react-aria/accordion": "^3.0.0-alpha.5",
"@react-aria/button": "^3.4.1",
"@react-aria/checkbox": "^3.2.3",

11
site/source/components/BetaBanner/index.tsx
View File

@ -1,5 +1,4 @@
import { Container } from '@/design-system/layout'
import { Grid } from '@mui/material'
import { Container, Grid } from '@/design-system/layout'
import React from 'react'
import wipSvg from './undraw_qa_engineers_dg-5-p.svg'
@ -10,7 +9,13 @@ export default function BetaBanner({
}) {
return (
<Container backgroundColor={(theme) => theme.colors.bases.tertiary[100]}>
<Grid container spacing={4} alignItems="center">
<Grid
container
spacing={4}
css={`
align-items: center;
`}
>
<Grid item sm={3}>
<img src={wipSvg} style={{ width: '100%', padding: '0.25rem' }} />
</Grid>

2
site/source/components/MoreInfosOnUs.tsx
View File

@ -1,4 +1,4 @@
import { Grid } from '@mui/material'
import { Grid } from '@/design-system/layout'
import { SmallCard } from '@/design-system/card'
import { H2 } from '@/design-system/typography/heading'
import { useContext } from 'react'

33
site/source/components/PageHeader.tsx
View File

@ -1,4 +1,4 @@
import { Grid } from '@mui/material'
import { Grid } from '@/design-system/layout'
import { H1 } from '@/design-system/typography/heading'
import { ReactNode } from 'react'
import styled from 'styled-components'
@ -8,8 +8,6 @@ const Illustration = styled.img<{ titre: ReactNode }>`
width: 100%;
vertical-align: bottom;
padding-top: ${({ theme }) => theme.spacings.xl};
/* transform-origin: center right;
transform: scale(1.25); */
`
export default function PageHeader({
@ -22,7 +20,13 @@ export default function PageHeader({
picture?: string
}) {
return (
<Grid container spacing={3} alignItems="center">
<Grid
container
spacing={3}
css={`
align-items: center;
`}
>
<Grid
item
sm={12}
@ -39,17 +43,20 @@ export default function PageHeader({
</Grid>
{picture && (
<Grid
item
className="hide-mobile"
md={3}
lg={4}
alignSelf="flex-end"
sx={{ zIndex: '-1', display: { xs: 'none', md: 'block' } }}
>
<InnerGrid item className="hide-mobile" md={3} lg={4}>
<Illustration className="hide-mobile" titre={titre} src={picture} />
</Grid>
</InnerGrid>
)}
</Grid>
)
}
const InnerGrid = styled(Grid)`
align-self: flex-end;
z-index: -1;
display: none;
@media (min-width: ${({ theme }) => theme.breakpointsWidth.md}) {
display: block;
}
`

2
site/source/components/SchemeComparaison.tsx
View File

@ -11,7 +11,7 @@ import { H2, H3 } from '@/design-system/typography/heading'
import { SmallBody } from '@/design-system/typography/paragraphs'
import revenusSVG from '@/images/revenus.svg'
import { situationSelector } from '@/selectors/simulationSelectors'
import { Grid } from '@mui/material'
import { Grid } from '@/design-system/layout'
import { useCallback, useContext, useMemo, useState } from 'react'
import { Trans } from 'react-i18next'
import { useSelector } from 'react-redux'

2
site/source/components/ShareSimulationBanner/ShareSimulationPopup.tsx
View File

@ -3,7 +3,7 @@ import { TextField } from '@/design-system/field'
import { Strong } from '@/design-system/typography'
import { H3 } from '@/design-system/typography/heading'
import { Body, Intro, SmallBody } from '@/design-system/typography/paragraphs'
import { Grid } from '@mui/material'
import { Grid } from '@/design-system/layout'
import { useContext, useEffect, useRef, useState } from 'react'
import { Trans, useTranslation } from 'react-i18next'
import { TrackingContext } from '../../ATInternetTracking'

7
site/source/components/ShareSimulationBanner/index.tsx
View File

@ -1,12 +1,11 @@
import Emoji from '@/components/utils/Emoji'
import { PopoverWithTrigger } from '@/design-system'
import { Button } from '@/design-system/buttons'
import { Spacing } from '@/design-system/layout'
import { Grid, Spacing } from '@/design-system/layout'
import {
companySituationSelector,
situationSelector,
} from '@/selectors/simulationSelectors'
import { Grid } from '@mui/material'
import { useContext } from 'react'
import { Trans, useTranslation } from 'react-i18next'
import { useSelector } from 'react-redux'
@ -83,7 +82,9 @@ export default function ShareOrSaveSimulationBanner({
container
className=" print-hidden"
spacing={4}
justifyContent="center"
css={`
justify-content: center;
`}
>
{share && (
<Grid item xs={12} sm="auto">

28
site/source/components/Simulation/SimulationGoal.tsx
View File

@ -1,7 +1,7 @@
import { updateSituation } from '@/actions/actions'
import { Grid } from '@/design-system/layout'
import { SmallBody } from '@/design-system/typography/paragraphs'
import { targetUnitSelector } from '@/selectors/simulationSelectors'
import { Grid } from '@mui/material'
import { DottedName } from 'modele-social'
import { formatValue, PublicodesExpression } from 'publicodes'
import React, { useCallback, useState } from 'react'
@ -66,9 +66,11 @@ export function SimulationGoal({
<StyledGoal>
<Grid
container
alignItems="baseline"
css={`
align-items: baseline;
justify-content: space-between;
`}
spacing={2}
justifyContent="space-between"
>
<Grid item md="auto" sm={small ? 9 : 8} xs={8}>
<StyledGoalHeader>
@ -85,13 +87,9 @@ export function SimulationGoal({
</SmallBody>
</StyledGoalHeader>
</Grid>
<Grid
item
md
sx={{ display: { sm: 'none', xs: 'none', md: 'block' } }}
>
<StyledGuideLectureContainer>
<StyledGuideLecture small={small} />
</Grid>
</StyledGuideLectureContainer>
{editable ? (
<Grid item md={small ? 2 : 3} sm={small ? 3 : 4} xs={4}>
{!isFocused && !small && (
@ -132,6 +130,18 @@ export function SimulationGoal({
</Appear>
)
}
const StyledGuideLectureContainer = styled(Grid).attrs({
item: true,
md: true,
})`
display: none;
@media (min-width: ${({ theme }) => theme.breakpointsWidth.md}) {
display: block;
}
`
const StyledGuideLecture = styled.div.attrs({ 'aria-hidden': true })<{
small: boolean
}>`

18
site/source/components/Simulation/SimulationGoals.tsx
View File

@ -1,6 +1,6 @@
import { Grid } from '@/design-system/layout'
import { Link } from '@/design-system/typography/link'
import { firstStepCompletedSelector } from '@/selectors/simulationSelectors'
import { Grid } from '@mui/material'
import React from 'react'
import { useSelector } from 'react-redux'
import styled, { css, ThemeProvider } from 'styled-components'
@ -88,15 +88,16 @@ function TopSection({ toggles }: { toggles?: React.ReactNode }) {
const inIframe = useIsEmbedded()
return (
<Grid container justifyContent="space-between" gap={1}>
<Section>
{inIframe && (
<Grid
item
xs={12}
sm="auto"
container
alignItems="flex-end"
justifyContent="center"
css={`
justify-content: center;
align-items: flex-end;
`}
>
<LogoContainer
href={import.meta.env.VITE_FR_BASE_URL}
@ -112,10 +113,15 @@ function TopSection({ toggles }: { toggles?: React.ReactNode }) {
<ToggleSection>{toggles}</ToggleSection>
</Grid>
)}
</Grid>
</Section>
)
}
const Section = styled(Grid).attrs({ container: true })`
justify-content: space-between;
gap: ${({ theme }) => theme.spacings.xs};
`
const ToggleSection = styled.div`
padding: ${({ theme }) => theme.spacings.sm} 0;

12
site/source/components/Simulation/index.tsx
View File

@ -2,16 +2,16 @@ import { ConversationProps } from '@/components/conversation/Conversation'
import PageFeedback from '@/components/Feedback'
import ShareOrSaveSimulationBanner from '@/components/ShareSimulationBanner'
import { PopoverWithTrigger } from '@/design-system'
import { Spacing } from '@/design-system/layout'
import { Grid, Spacing } from '@/design-system/layout'
import { Link } from '@/design-system/typography/link'
import {
companySituationSelector,
firstStepCompletedSelector,
} from '@/selectors/simulationSelectors'
import { Grid, styled } from '@mui/material'
import React from 'react'
import { Trans } from 'react-i18next'
import { useSelector } from 'react-redux'
import styled from 'styled-components'
import { TrackPage } from '../../ATInternetTracking'
import Banner from '../Banner'
import AnswerList from '../conversation/AnswerList'
@ -58,7 +58,13 @@ export default function Simulation({
return (
<>
{!firstStepCompleted && <TrackPage name="accueil" />}
<Grid container spacing={2} justifyContent="center">
<Grid
container
spacing={2}
css={`
justify-content: center;
`}
>
<StyledGrid item xl={9} lg={10} md={11} sm={12}>
<PrintExportRecover />
{children}

9
site/source/components/company/Details.tsx
View File

@ -1,9 +1,8 @@
import { Message } from '@/design-system'
import { Spacing } from '@/design-system/layout'
import { Grid, Spacing } from '@/design-system/layout'
import { Strong } from '@/design-system/typography'
import { H4 } from '@/design-system/typography/heading'
import { Body } from '@/design-system/typography/paragraphs'
import { Grid } from '@mui/material'
import { Trans } from 'react-i18next'
import styled from 'styled-components'
import SeeAnswersButton from '../conversation/SeeAnswersButton'
@ -18,8 +17,10 @@ export function CompanyDetails({
<StyledCompanyContainer>
<Grid
container
alignItems={'flex-end'}
justifyContent={'center'}
css={`
align-items: flex-end;
justify-content: center;
`}
spacing={3}
>
<Grid item xs={12} lg>

2
site/source/components/company/SearchField.tsx
View File

@ -1,4 +1,4 @@
import { Grid } from '@mui/material'
import { Grid } from '@/design-system/layout'
import { useSearchFieldState } from '@react-stately/searchfield'
import { FabriqueSocialEntreprise } from '@/api/fabrique-social'
import { Card } from '@/design-system/card'

14
site/source/components/conversation/AnswerList.tsx
View File

@ -5,7 +5,7 @@ import { useEngine } from '@/components/utils/EngineContext'
import { useNextQuestions } from '@/components/utils/useNextQuestion'
import { Message, PopoverWithTrigger } from '@/design-system'
import { Button } from '@/design-system/buttons'
import { Spacing } from '@/design-system/layout'
import { Grid, Spacing } from '@/design-system/layout'
import { H2, H3 } from '@/design-system/typography/heading'
import { Link } from '@/design-system/typography/link'
import { Body } from '@/design-system/typography/paragraphs'
@ -15,7 +15,6 @@ import {
situationSelector,
} from '@/selectors/simulationSelectors'
import { evaluateQuestion } from '@/utils'
import { Grid } from '@mui/material'
import { DottedName } from 'modele-social'
import { EvaluatedNode } from 'publicodes'
import { useCallback, useMemo } from 'react'
@ -161,13 +160,7 @@ function StepsTable({
{rules
.filter((rule) => rule.nodeValue !== null)
.map((rule) => (
<StyledAnswerList
container
alignItems={'baseline'}
justifyContent="flex-end"
key={rule.dottedName}
gap={2}
>
<StyledAnswerList container key={rule.dottedName}>
<Grid item xs>
{rule.title}
<ExplicableRule light dottedName={rule.dottedName} />
@ -241,6 +234,9 @@ const StyledAnswer = styled(Grid)`
`
const StyledAnswerList = styled(Grid)`
margin: ${({ theme }) => `${theme.spacings.md} 0`};
align-items: baseline;
justify-content: flex-end;
gap: ${({ theme }) => theme.spacings.sm};
font-family: ${({ theme }) => theme.fonts.main};
:nth-child(2n) {

21
site/source/components/conversation/Conversation.tsx
View File

@ -11,7 +11,7 @@ import Emoji from '@/components/utils/Emoji'
import { EngineContext } from '@/components/utils/EngineContext'
import { useNextQuestions } from '@/components/utils/useNextQuestion'
import { Button } from '@/design-system/buttons'
import { Spacing } from '@/design-system/layout'
import { Grid, Spacing } from '@/design-system/layout'
import { H3 } from '@/design-system/typography/heading'
import { Body } from '@/design-system/typography/paragraphs'
import {
@ -19,7 +19,6 @@ import {
situationSelector,
} from '@/selectors/simulationSelectors'
import { evaluateQuestion } from '@/utils'
import { Grid } from '@mui/material'
import { PublicodesExpression } from 'publicodes'
import React, { useContext, useEffect } from 'react'
import { Trans } from 'react-i18next'
@ -136,7 +135,14 @@ export default function Conversation({
→
</Button>
</Grid>
<Grid container item xs={12} sm justifyContent="flex-end">
<Grid
item
xs={12}
sm
css={`
justify-content: flex-end;
`}
>
<SeeAnswersButton>
{customSituationVisualisation}
</SeeAnswersButton>
@ -171,7 +177,14 @@ export default function Conversation({
</Button>
</Grid>
)}
<Grid container item xs={6} sm justifyContent="flex-end">
<Grid
item
xs={6}
sm
css={`
justify-content: flex-end;
`}
>
<SeeAnswersButton>
{customSituationVisualisation}
</SeeAnswersButton>

2
site/source/components/search/SimulatorHits.tsx
View File

@ -1,4 +1,4 @@
import { Grid } from '@mui/material'
import { Grid } from '@/design-system/layout'
import Emoji from '@/components/utils/Emoji'
import { SitePathsContext } from '@/components/utils/SitePathsContext'
import { SmallCard } from '@/design-system/card'

6
site/source/components/simulationExplanation/InstitutionsPartenaires.tsx
View File

@ -1,4 +1,3 @@
import { Grid } from '@mui/material'
import Value, {
Condition,
WhenApplicable,
@ -8,18 +7,19 @@ import RuleLink from '@/components/RuleLink'
import { FromBottom } from '@/components/ui/animate'
import Emoji from '@/components/utils/Emoji'
import { useEngine } from '@/components/utils/EngineContext'
import { Message } from '@/design-system'
import { Grid } from '@/design-system/layout'
import { H2, H3 } from '@/design-system/typography/heading'
import { Body, SmallBody } from '@/design-system/typography/paragraphs'
import assuranceMaladieSrc from '@/images/assurance-maladie.svg'
import dgfipSrc from '@/images/logo-dgfip.svg'
import * as logosSrc from '@/images/logos-caisses-retraite'
import urssafSrc from '@/images/Urssaf.svg'
import { targetUnitSelector } from '@/selectors/simulationSelectors'
import { DottedName } from 'modele-social'
import { Trans } from 'react-i18next'
import { useSelector } from 'react-redux'
import { targetUnitSelector } from '@/selectors/simulationSelectors'
import styled from 'styled-components'
import { Message } from '@/design-system'
export default function InstitutionsPartenaires() {
const unit = useSelector(targetUnitSelector)

10
site/source/components/simulationExplanation/SalaryExplanation.tsx
View File

@ -1,11 +1,10 @@
import { Grid } from '@mui/material'
import Distribution from '@/components/Distribution'
import PaySlip from '@/components/PaySlip'
import StackedBarChart from '@/components/StackedBarChart'
import { FromTop } from '@/components/ui/animate'
import Emoji from '@/components/utils/Emoji'
import { useInversionFail } from '@/components/utils/EngineContext'
import { Container, Spacing } from '@/design-system/layout'
import { Container, Grid, Spacing } from '@/design-system/layout'
import { H2 } from '@/design-system/typography/heading'
import { Link } from '@/design-system/typography/link'
import { SmallBody } from '@/design-system/typography/paragraphs'
@ -36,7 +35,12 @@ export default function SalaryExplanation() {
<Container backgroundColor={(theme) => theme.colors.bases.primary[100]}>
<div ref={payslipRef} />
<Grid container justifyContent="center">
<Grid
container
css={`
justify-content: center;
`}
>
<Grid item xl={9} lg={10}>
<H2>
<Trans>Fiche de paie</Trans>

3
site/source/components/ui/Checklist/index.tsx
View File

@ -1,8 +1,7 @@
import { Grid } from '@mui/material'
import { Markdown } from '@/components/utils/markdown'
import { ScrollToElement } from '@/components/utils/Scroll'
import { Checkbox } from '@/design-system/field'
import { Spacing } from '@/design-system/layout'
import { Grid, Spacing } from '@/design-system/layout'
import { Link } from '@/design-system/typography/link'
import React, { useEffect, useState } from 'react'
import { Trans } from 'react-i18next'

5
site/source/design-system/accordion/index.tsx
View File

@ -116,11 +116,8 @@ const ChevronRightMedium = styled.img.attrs({ src: chevronImg })<{
`}
`
const StyledContent = styled(animated.div)`
const StyledContent: any = styled(animated.div)`
overflow: hidden;
${({ theme }) => css`
/* border-top: 1px solid ${theme.colors.bases.primary[400]}; */
`}
> div {
margin: ${({ theme }) => theme.spacings.lg};
}

23
site/source/design-system/answer-group/index.tsx
View File

@ -1,22 +1,21 @@
import { Grid } from '@mui/material'
import { Children, ComponentProps, FunctionComponent, ReactNode } from 'react'
import { Children, FunctionComponent, ReactNode } from 'react'
type AnswerGroupProps = {
children: ReactNode
} & ComponentProps<typeof Grid>
}
const AnswerGroup: FunctionComponent<AnswerGroupProps> = ({
children,
...props
}) => {
const AnswerGroup: FunctionComponent<AnswerGroupProps> = ({ children }) => {
return (
<Grid container spacing={3} {...props}>
<div
css={`
display: flex;
gap: 18px;
`}
>
{Children.map(children, (c, i) => (
<Grid key={`answerGroup-${i}`} item sm={12} md="auto">
{c}
</Grid>
<div key={`answerGroup-${i}`}>{c}</div>
))}
</Grid>
</div>
)
}

3
site/source/design-system/card/Card.tsx
View File

@ -8,7 +8,6 @@ import {
useExternalLinkProps,
} from '@/design-system/typography/link'
import { Body } from '@/design-system/typography/paragraphs'
import { PropsOf } from '@emotion/react'
import React, { ReactHTML, useRef } from 'react'
import styled, { css, ThemeProvider } from 'styled-components'
@ -22,7 +21,7 @@ type CardProps = GenericCardProps & {
ctaLabel?: React.ReactNode
children: React.ReactNode
compact?: boolean
bodyAs?: PropsOf<typeof Body>['as']
bodyAs?: React.ComponentProps<typeof Body>['as']
}
export function Card({

2
site/source/design-system/footer/column.tsx
View File

@ -1,4 +1,4 @@
import { Grid } from '@mui/material'
import { Grid } from '@/design-system/layout'
import { H1 } from '@/design-system/typography/heading'
import { ReactNode } from 'react'
import styled from 'styled-components'

2
site/source/design-system/footer/container.tsx
View File

@ -1,4 +1,4 @@
import Grid from '@mui/material/Grid'
import { Grid } from '@/design-system/layout'
import { ReactNode } from 'react'
import styled from 'styled-components'

146
site/source/design-system/layout/Grid.tsx Normal file
View File

@ -0,0 +1,146 @@
import styled, { css } from 'styled-components'
import { SpacingKey } from '../theme'
import { useContext, createContext } from 'react'
const breakPoints = ['sm', 'md', 'lg', 'xl'] as Array<SpacingKey>
type ContainerContext = {
nbColumns: number
rowSpacing: number
columnSpacing: number
}
const GridContainerContext = createContext<ContainerContext>({
nbColumns: 12,
columnSpacing: 0,
rowSpacing: 0,
})
type BreakpointConfig = number | true | 'auto' | undefined
const breakPointCss = (
breakPointConfig: BreakpointConfig,
nbColumns: number
) => {
if (breakPointConfig === undefined) {
return ''
} else if (breakPointConfig === true) {
return css`
max-width: 100%;
flex-basis: 0;
flex-grow: 1;
`
} else if (breakPointConfig === 'auto') {
return css`
flex: 0 0 auto;
width: auto;
`
} else {
return css`
flex-basis: ${(breakPointConfig / nbColumns) * 100}%;
flex-grow: 0;
`
}
}
type GridProps =
| ({ item: true; container?: false } & GridItemProps)
| ({ item?: false; container: true } & GridContainerProps)
/**
* An hybrid Flexbox/Grid layout component
*/
export default function FluidGrid(props: GridProps) {
if (props.container === true) {
return <GridContainer {...props} />
} else if (props?.item === true) {
return <GridItem {...props} />
}
return null
}
const StyledGridContainer = styled.div<GridContainerProps>`
display: flex;
flex-wrap: wrap;
flex-direction: row;
margin-left: -${({ theme, columnSpacing }) => theme.spacing[columnSpacing ?? 0]};
margin-top: -${({ theme, rowSpacing }) => theme.spacing[rowSpacing ?? 0]};
`
const StyledGridItem = styled.div<GridItemProps & ContainerContext>`
padding-left: ${({ theme, columnSpacing }) =>
theme.spacing[columnSpacing ?? 0]};
padding-top: ${({ theme, rowSpacing }) => theme.spacing[rowSpacing ?? 0]};
${(props) => breakPointCss(props.xs, props.nbColumns)}
${(props) =>
breakPoints
.filter((id) => props[id])
.map(
(id) => css`
@media (min-width: ${({ theme }) => theme.breakpointsWidth[id]}) {
${breakPointCss(props[id], props.nbColumns)}
}
`
)}
`
type GridContainerProps = {
columns?: number
spacing?: number
columnSpacing?: number
rowSpacing?: number
children: React.ReactNode
} & React.ComponentPropsWithoutRef<'div'>
function GridContainer({
columns = 12,
spacing = 0,
columnSpacing,
rowSpacing,
children,
...otherProps
}: GridContainerProps) {
return (
<GridContainerContext.Provider
value={{
nbColumns: columns,
columnSpacing: columnSpacing ?? spacing,
rowSpacing: rowSpacing ?? spacing,
}}
>
<StyledGridContainer
columnSpacing={columnSpacing ?? spacing}
rowSpacing={rowSpacing ?? spacing}
{...otherProps}
>
{children}
</StyledGridContainer>
</GridContainerContext.Provider>
)
}
type GridItemProps = {
children?: React.ReactNode
className?: string
} & Partial<Record<SpacingKey | 'xs', BreakpointConfig>> &
React.ComponentPropsWithoutRef<'div'>
function GridItem({
xs,
sm,
md,
lg,
xl,
children,
...otherProps
}: GridItemProps) {
const containerContext = useContext(GridContainerContext)
return (
<StyledGridItem
{...{ xs, sm, md, lg, xl, ...containerContext, ...otherProps }}
>
{children}
</StyledGridItem>
)
}

1
site/source/design-system/layout/index.ts
View File

@ -1,6 +1,7 @@
import styled from 'styled-components'
export { default as Container } from './Container'
export { default as Grid } from './Grid'
export const Spacing = styled.div<
| { xxl: true }

10
site/source/design-system/message/index.tsx
View File

@ -1,11 +1,11 @@
import { Palette, SmallPalette } from '@/types/styled'
import React from 'react'
import styled, { css, ThemeProvider } from 'styled-components'
import baseIcon from './baseIcon.svg'
import infoIcon from './infoIcon.svg'
import errorIcon from './errorIcon.svg'
import successIcon from './successIcon.svg'
import { Body } from '../typography/paragraphs'
import { Palette, SmallPalette } from '../styled'
import baseIcon from './baseIcon.svg'
import errorIcon from './errorIcon.svg'
import infoIcon from './infoIcon.svg'
import successIcon from './successIcon.svg'
type MessageType = 'primary' | 'secondary' | 'info' | 'error' | 'success'
type MessageProps = {

18
site/source/design-system/popover/Popover.tsx
View File

@ -1,5 +1,5 @@
import { Grid } from '@/design-system/layout'
import { getIframeOffset, wrapperDebounceEvents } from '@/utils'
import { Grid } from '@mui/material'
import { useButton } from '@react-aria/button'
import { useDialog } from '@react-aria/dialog'
import { FocusScope } from '@react-aria/focus'
@ -73,8 +73,20 @@ export default function Popover(
<OverlayContainer>
<Underlay {...underlayProps} $offsetTop={offsetTop}>
<Container>
<Grid container justifyContent="center">
<Grid item sm={small ? 10 : 12} md={small ? 8 : 12} zeroMinWidth>
<Grid
container
css={`
justify-content: center;
`}
>
<Grid
item
sm={small ? 10 : 12}
md={small ? 8 : 12}
css={`
min-width: 0;
`}
>
<PopoverContainer
{...dialogProps}
{...modalProps}

2
site/source/design-system/root.tsx
View File

@ -1,4 +1,4 @@
import { theme as urssafTheme } from '@/design-system/theme'
import urssafTheme from '@/design-system/theme'
import { ReactNode } from 'react'
import { ThemeProvider } from 'styled-components'

110
site/source/design-system/styled.d.ts vendored
View File

@ -1,110 +0,0 @@
import {
Theme as SystemTheme,
ThemeOptions as SystemThemeOptions,
} from '@mui/system'
import 'styled-components'
type Color = string
type Palette = {
100: Color
200: Color
300: Color
400: Color
500: Color
600: Color
700: Color
800: Color
}
type SmallPalette = {
100: Color
200: Color
300: Color
400: Color
500: Color
600: Color
}
type Metric = string
type Spacing = Metric
type Font = string
type FontSize = Metric
type ShadowDefinition = string
interface CustomTheme {
colors: {
bases: {
primary: Palette
secondary: Palette
tertiary: Palette
}
publics: {
employeur: Palette
particulier: Palette
independant: Palette
artisteAuteur: Palette
marin: Palette
}
extended: {
grey: Palette
error: SmallPalette
success: SmallPalette
info: SmallPalette
}
}
spacings: {
xxs: Spacing
xs: Spacing
sm: Spacing
md: Spacing
lg: Spacing
xl: Spacing
xxl: Spacing
xxxl: Spacing
}
fonts: {
main: Font
heading: Font
}
baseFontSize: FontSize
box: {
borderRadius: Metric
borderWidth: Metric
}
elevations: {
2: ShadowDefinition
3: ShadowDefinition
4: ShadowDefinition
5: ShadowDefinition
6: ShadowDefinition
}
breakpointsWidth: {
xl: Metric
lg: Metric
md: Metric
sm: Metric
}
darkMode: boolean
}
declare module '@mui/material/styles' {
export interface Theme extends SystemTheme, CustomTheme {}
export interface ThemeOptions extends SystemThemeOptions, CustomTheme {}
}
declare module 'styled-components' {
export interface DefaultTheme extends SystemTheme, CustomTheme {}
}

17
site/source/design-system/theme.ts
View File

@ -1,7 +1,6 @@
import { createTheme } from '@mui/material'
import { DefaultTheme } from 'styled-components'
export const defaultTheme = {
const baseTheme = {
colors: {
bases: {
primary: {
@ -168,22 +167,24 @@ export const defaultTheme = {
// We use the Grid from material-ui, we need to uniformise
// breakpoints and spacing with the Urssaf design system
type SpacingKey = keyof typeof defaultTheme.breakpointsWidth
export type SpacingKey = keyof typeof baseTheme.breakpointsWidth
const breakpoints = Object.fromEntries(
Object.entries(defaultTheme.breakpointsWidth).map(([key, value]) => [
Object.entries(baseTheme.breakpointsWidth).map(([key, value]) => [
key,
Number.parseInt(value),
])
) as Record<SpacingKey, number>
export const theme: DefaultTheme = createTheme({
const theme: DefaultTheme = {
breakpoints: {
values: {
xs: 0,
...breakpoints,
},
},
spacing: Object.values(defaultTheme.spacings),
spacing: Object.values(baseTheme.spacings),
...defaultTheme,
})
...baseTheme,
}
export default theme

2
site/source/pages/Budget/Budget.tsx
View File

@ -1,4 +1,4 @@
import { Grid } from '@mui/material'
import { Grid } from '@/design-system/layout'
import MoreInfosOnUs from '@/components/MoreInfosOnUs'
import Emoji from '@/components/utils/Emoji'
import { Markdown } from '@/components/utils/markdown'

3
site/source/pages/Creer/CreationChecklist.tsx
View File

@ -10,14 +10,13 @@ import Scroll from '@/components/utils/Scroll'
import { SitePathsContext } from '@/components/utils/SitePathsContext'
import { Button } from '@/design-system/buttons'
import { Article } from '@/design-system/card'
import { Spacing } from '@/design-system/layout'
import { Grid, Spacing } from '@/design-system/layout'
import { H1, H2 } from '@/design-system/typography/heading'
import { Link } from '@/design-system/typography/link'
import { Li, Ul } from '@/design-system/typography/list'
import { Body, SmallBody } from '@/design-system/typography/paragraphs'
import { RootState } from '@/reducers/rootReducer'
import { LegalStatus } from '@/selectors/companyStatusSelectors'
import { Grid } from '@mui/material'
import { useContext } from 'react'
import { Helmet } from 'react-helmet-async'
import { Trans, useTranslation } from 'react-i18next'

6
site/source/pages/Creer/Home.tsx
View File

@ -1,18 +1,18 @@
import { Grid } from '@mui/material'
import PageHeader from '@/components/PageHeader'
import { FromBottom } from '@/components/ui/animate'
import Meta from '@/components/utils/Meta'
import { SitePathsContext } from '@/components/utils/SitePathsContext'
import { Button } from '@/design-system/buttons'
import { Card } from '@/design-system/card'
import { Grid } from '@/design-system/layout'
import { H2 } from '@/design-system/typography/heading'
import { Intro, SmallBody } from '@/design-system/typography/paragraphs'
import { RootState } from '@/reducers/rootReducer'
import { useNextQuestionUrl } from '@/selectors/companyStatusSelectors'
import { useContext } from 'react'
import { Helmet } from 'react-helmet-async'
import { Trans, useTranslation } from 'react-i18next'
import { useSelector } from 'react-redux'
import { RootState } from '@/reducers/rootReducer'
import { useNextQuestionUrl } from '@/selectors/companyStatusSelectors'
import { TrackPage } from '../../ATInternetTracking'
import créerSvg from './créer.svg'

3
site/source/pages/Documentation.tsx
View File

@ -7,13 +7,12 @@ import Meta from '@/components/utils/Meta'
import { ScrollToTop } from '@/components/utils/Scroll'
import { SitePathsContext } from '@/components/utils/SitePathsContext'
import { Button } from '@/design-system/buttons'
import { Spacing } from '@/design-system/layout'
import { Grid, Spacing } from '@/design-system/layout'
import { H1, H2, H3, H4, H5 } from '@/design-system/typography/heading'
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 { Grid } from '@mui/material'
import rules, { DottedName } from 'modele-social'
import { getDocumentationSiteMap, RulePage } from 'publicodes-react'
import { ComponentType, useContext, useMemo } from 'react'

34
site/source/pages/Landing/Landing.tsx
View File

@ -4,13 +4,13 @@ import PageHeader from '@/components/PageHeader'
import Meta from '@/components/utils/Meta'
import { SitePathsContext } from '@/components/utils/SitePathsContext'
import { Button } from '@/design-system/buttons'
import { Container, Spacing } from '@/design-system/layout'
import { Container, Grid, Spacing } from '@/design-system/layout'
import { H2 } from '@/design-system/typography/heading'
import { Link } from '@/design-system/typography/link'
import { Body, Intro } from '@/design-system/typography/paragraphs'
import { Grid } from '@mui/material'
import { useContext } from 'react'
import { Trans } from 'react-i18next'
import styled from 'styled-components'
import { TrackPage } from '../../ATInternetTracking'
import { SimulateurCard } from '../Simulateurs/Home'
import useSimulatorsData from '../Simulateurs/metadata'
@ -69,8 +69,10 @@ export default function Landing() {
<Grid
container
spacing={4}
alignItems="stretch"
justifyContent="center"
css={`
align-items: stretch;
justify-content: center;
`}
>
<SimulateurCard {...simulators.salarié} />
<SimulateurCard {...simulators['auto-entrepreneur']} />
@ -101,13 +103,13 @@ export default function Landing() {
</Container>
<Container backgroundColor={(theme) => theme.colors.bases.primary[100]}>
<Spacing lg />
<Grid container alignItems="flex-end">
<Grid
item
xs={2}
md={2}
sx={{ display: { xs: 'none', md: 'block' } }}
>
<Grid
container
css={`
align-items: flex-end;
`}
>
<HideOnMobile item xs={2} md={2}>
<img
src={illustration2Svg}
css={`
@ -116,7 +118,7 @@ export default function Landing() {
padding-bottom: 1rem;
`}
/>
</Grid>
</HideOnMobile>
<Grid item md={10}>
<Trans i18nKey="landing.aboutUs">
<H2>Qui sommes-nous ?</H2>
@ -155,3 +157,11 @@ export default function Landing() {
</>
)
}
const HideOnMobile = styled(Grid)`
display: none;
@media (min-width: ${({ theme }) => theme.breakpointsWidth.md}) {
display: block;
}
`

3
site/source/pages/Landing/SearchOrCreate.tsx
View File

@ -10,12 +10,11 @@ import { useEngine } from '@/components/utils/EngineContext'
import { SitePathsContext } from '@/components/utils/SitePathsContext'
import AnswerGroup from '@/design-system/answer-group'
import { Button } from '@/design-system/buttons'
import { Spacing } from '@/design-system/layout'
import { Grid, Spacing } from '@/design-system/layout'
import { H3 } from '@/design-system/typography/heading'
import { useSetEntreprise } from '@/hooks/useSetEntreprise'
import { RootState } from '@/reducers/rootReducer'
import { getCookieValue } from '@/storage/readCookie'
import { Grid } from '@mui/material'
import { useCallback, useContext, useEffect } from 'react'
import { Trans } from 'react-i18next'
import { useDispatch, useSelector } from 'react-redux'

29
site/source/pages/Nouveautes/Nouveautes.tsx
View File

@ -1,4 +1,3 @@
import { Grid } from '@mui/material'
import { determinant, hideNewsBanner } from '@/components/layout/NewsBanner'
import MoreInfosOnUs from '@/components/MoreInfosOnUs'
import Emoji from '@/components/utils/Emoji'
@ -7,7 +6,7 @@ import Meta from '@/components/utils/Meta'
import { ScrollToTop } from '@/components/utils/Scroll'
import { SitePathsContext } from '@/components/utils/SitePathsContext'
import { Item, Select } from '@/design-system/field/Select'
import { Container } from '@/design-system/layout'
import { Container, Grid } from '@/design-system/layout'
import { H1 } from '@/design-system/typography/heading'
import { GenericButtonOrLinkProps, Link } from '@/design-system/typography/link'
import { Body } from '@/design-system/typography/paragraphs'
@ -89,7 +88,7 @@ export default function Nouveautés() {
</Body>
<Grid container spacing={2}>
<Grid item xs={12} sx={{ display: { xs: 'block', lg: 'none' } }}>
<MobileGridItem>
<Select
label="Date de la newsletter"
value={selectedRelease}
@ -102,8 +101,8 @@ export default function Nouveautés() {
<Item textValue={release.name}>{release.name}</Item>
)}
</Select>
</Grid>
<Grid item lg={3} sx={{ display: { xs: 'none', lg: 'block' } }}>
</MobileGridItem>
<DesktopGridItem>
<Sidebar>
{data.map(({ name }, index) => (
<li key={name}>
@ -111,7 +110,7 @@ export default function Nouveautés() {
</li>
))}
</Sidebar>
</Grid>
</DesktopGridItem>
<Grid item xs={12} lg={9}>
<MainBlock>
<MarkdownWithAnchorLinks renderers={{ text: TextRenderer }}>
@ -148,13 +147,19 @@ const TextRenderer = ({ children }: { children: string }) => (
<Emoji emoji={removeGithubIssuesReferences(children)} />
)
const NewsSection = styled.section`
display: flex;
justify-content: space-between;
align-items: flex-start;
const MobileGridItem = styled(Grid).attrs({ item: true, xs: 12 })`
display: block;
@media (min-width: 1250px) {
margin-left: -175px;
@media (min-width: ${({ theme }) => theme.breakpointsWidth.lg}) {
display: none;
}
`
const DesktopGridItem = styled(Grid).attrs({ item: true, lg: 3 })`
display: none;
@media (min-width: ${({ theme }) => theme.breakpointsWidth.lg}) {
display: block;
}
`

3
site/source/pages/Simulateurs/EconomieCollaborative/ActivitésSelection.tsx
View File

@ -1,8 +1,7 @@
import { Grid } from '@mui/material'
import { FromBottom } from '@/components/ui/animate'
import Emoji from '@/components/utils/Emoji'
import { ScrollToTop } from '@/components/utils/Scroll'
import { Spacing } from '@/design-system/layout'
import { Grid, Spacing } from '@/design-system/layout'
import { H1, H2 } from '@/design-system/typography/heading'
import { Body, SmallBody } from '@/design-system/typography/paragraphs'
import { useContext } from 'react'

2
site/source/pages/Simulateurs/EconomieCollaborative/VotreSituation.tsx
View File

@ -1,10 +1,10 @@
import { Grid } from '@mui/material'
import PageFeedback from '@/components/Feedback'
import { FromBottom } from '@/components/ui/animate'
import Emoji from '@/components/utils/Emoji'
import { ScrollToTop } from '@/components/utils/Scroll'
import { SitePathsContext } from '@/components/utils/SitePathsContext'
import { Button } from '@/design-system/buttons'
import { Grid } from '@/design-system/layout'
import { Strong } from '@/design-system/typography'
import { H1, H2, H3 } from '@/design-system/typography/heading'
import { Link } from '@/design-system/typography/link'

5
site/source/pages/Simulateurs/ExonerationCovid/ExonérationCovid.tsx
View File

@ -6,9 +6,8 @@ import {
useSynchronizedSituationState,
} from '@/components/utils/SituationContext'
import { Button } from '@/design-system/buttons'
import { Spacing } from '@/design-system/layout'
import { Grid, Spacing } from '@/design-system/layout'
import { H3 } from '@/design-system/typography/heading'
import { Grid } from '@mui/material'
import { DottedName as ExoCovidDottedNames } from 'exoneration-covid'
import { PublicodesExpression } from 'publicodes'
import { useCallback, useEffect } from 'react'
@ -115,7 +114,7 @@ export const ExonérationCovid = () => {
<Spacing lg />
<Grid container justifyContent={step2 ? '' : 'end'}>
<Grid container css={step2 ? '' : `justify-content: end`}>
<Grid item xs={6} sm="auto">
{step2 ? (
<Button

35
site/source/pages/Simulateurs/ExonerationCovid/FormulaireS1S1Bis.tsx
View File

@ -1,11 +1,10 @@
import { ExplicableRule } from '@/components/conversation/Explicable'
import Value from '@/components/EngineValue'
import { Situation } from '@/components/utils/SituationContext'
import { Spacing } from '@/design-system/layout'
import { Grid, Spacing } from '@/design-system/layout'
import { H3 } from '@/design-system/typography/heading'
import { Li, Ul } from '@/design-system/typography/list'
import { Body } from '@/design-system/typography/paragraphs'
import { Grid } from '@mui/material'
import { DottedName as ExoCovidDottedNames } from 'exoneration-covid'
import Engine, {
EvaluatedNode,
@ -161,7 +160,13 @@ export const FormulaireS1S1Bis = ({ onChange }: Props) => {
</Trans>
</Grid>
<Grid item xs="auto" alignSelf={'end'}>
<Grid
item
xs="auto"
css={`
align-self: end;
`}
>
<Total>
<Value
engine={engine}
@ -180,7 +185,13 @@ export const FormulaireS1S1Bis = ({ onChange }: Props) => {
</Trans>
</Grid>
<Grid item xs="auto" alignSelf={'end'}>
<Grid
item
xs="auto"
css={`
align-self: end;
`}
>
<Total>
<Value
engine={engine}
@ -205,7 +216,13 @@ export const FormulaireS1S1Bis = ({ onChange }: Props) => {
</Trans>
</Grid>
<Grid item xs="auto" alignSelf={'end'}>
<Grid
item
xs="auto"
css={`
align-self: end;
`}
>
<Total>
<Value
engine={engine}
@ -237,7 +254,13 @@ export const FormulaireS1S1Bis = ({ onChange }: Props) => {
</Trans>
</Grid>
<Grid item xs="auto" alignSelf={'end'}>
<Grid
item
xs="auto"
css={`
align-self: end;
`}
>
<Total>
<Value
engine={engine}

19
site/source/pages/Simulateurs/ExonerationCovid/FormulaireS2.tsx
View File

@ -1,10 +1,9 @@
import Value from '@/components/EngineValue'
import { Radio, ToggleGroup } from '@/design-system/field'
import { Spacing } from '@/design-system/layout'
import { Grid, Spacing } from '@/design-system/layout'
import { H3 } from '@/design-system/typography/heading'
import { Li } from '@/design-system/typography/list'
import { Body } from '@/design-system/typography/paragraphs'
import { Grid } from '@mui/material'
import { DottedName as ExoCovidDottedNames } from 'exoneration-covid'
import { Evaluation, PublicodesExpression } from 'publicodes'
import { Trans, useTranslation } from 'react-i18next'
@ -125,7 +124,13 @@ export const FormulaireS2 = ({
</Trans>
</Grid>
<Grid item xs="auto" alignSelf={'end'}>
<Grid
item
xs="auto"
css={`
align-self: end;
`}
>
<Total>
<Value
engine={engine}
@ -158,7 +163,13 @@ export const FormulaireS2 = ({
</Trans>
</Grid>
<Grid item xs="auto" alignSelf={'end'}>
<Grid
item
xs="auto"
css={`
align-self: end;
`}
>
<Total>
<Value
engine={engine}

2
site/source/pages/Simulateurs/ExonerationCovid/Recap.tsx
View File

@ -1,6 +1,6 @@
import { Ul } from '@/design-system/typography/list'
import { baseParagraphStyle } from '@/design-system/typography/paragraphs'
import { Grid } from '@mui/material'
import { Grid } from '@/design-system/layout'
import styled, { css } from 'styled-components'
export const Recap = styled.div`

2
site/source/pages/Simulateurs/Home.tsx
View File

@ -5,12 +5,12 @@ import Emoji from '@/components/utils/Emoji'
import { SitePathsContext } from '@/components/utils/SitePathsContext'
import { Card } from '@/design-system/card'
import { SmallCard } from '@/design-system/card/SmallCard'
import { Grid } from '@/design-system/layout'
import { Strong } from '@/design-system/typography'
import { H2, H3 } from '@/design-system/typography/heading'
import { Link } from '@/design-system/typography/link'
import { Li, Ul } from '@/design-system/typography/list'
import { Body, Intro } from '@/design-system/typography/paragraphs'
import { Grid } from '@mui/material'
import { useContext } from 'react'
import { Helmet } from 'react-helmet-async'
import { Trans, useTranslation } from 'react-i18next'

8
site/source/pages/Simulateurs/NextSteps.tsx
View File

@ -1,15 +1,15 @@
import { Grid } from '@mui/material'
import { Condition } from '@/components/EngineValue'
import { useEngine } from '@/components/utils/EngineContext'
import { SitePathsContext } from '@/components/utils/SitePathsContext'
import { Grid } from '@/design-system/layout'
import { H2 } from '@/design-system/typography/heading'
import { useContext } from 'react'
import { Trans, useTranslation } from 'react-i18next'
import { FAQAutoEntrepreneurArticle } from '@/pages/Creer/CreationChecklist'
import { GuideURSSAFCard } from '@/pages/Simulateurs/cards/GuideURSSAFCard'
import { SimulatorRessourceCard } from '@/pages/Simulateurs/cards/SimulatorRessourceCard'
import { IframeIntegrationCard } from '@/pages/Simulateurs/cards/IframeIntegrationCard'
import { SimulatorRessourceCard } from '@/pages/Simulateurs/cards/SimulatorRessourceCard'
import { ExtractFromSimuData } from '@/pages/Simulateurs/metadata'
import { useContext } from 'react'
import { Trans, useTranslation } from 'react-i18next'
interface NextStepsProps {
iframePath: ExtractFromSimuData<'iframePath'>

3
site/source/pages/Stats/GlobalStats.tsx
View File

@ -1,6 +1,5 @@
import { Grid } from '@mui/material'
import Emoji from '@/components/utils/Emoji'
import { Spacing } from '@/design-system/layout'
import { Grid, Spacing } from '@/design-system/layout'
import { Link } from '@/design-system/typography/link'
import { useTranslation } from 'react-i18next'
import { SatisfactionStyle } from './SatisfactionChart'

41
site/source/pages/Stats/Stats.tsx
View File

@ -1,17 +1,18 @@
import { Grid } from '@mui/material'
import PagesChart from '@/components/charts/PagesCharts'
import InfoBulle from '@/components/ui/InfoBulle'
import Emoji from '@/components/utils/Emoji'
import { useScrollToHash } from '@/components/utils/markdown'
import statsJson from '@/data/stats.json'
import { Radio, ToggleGroup } from '@/design-system/field'
import { Item, Select } from '@/design-system/field/Select'
import { Spacing } from '@/design-system/layout'
import { Grid, Spacing } from '@/design-system/layout'
import { H2, H3 } from '@/design-system/typography/heading'
import { formatValue } from 'publicodes'
import { useCallback, useEffect, useMemo, useState } from 'react'
import { Trans } from 'react-i18next'
import { useSearchParams } from 'react-router-dom-v5-compat'
import styled from 'styled-components'
import { toAtString } from '../../ATInternetTracking'
import statsJson from '@/data/stats.json'
import { debounce, groupBy } from '../../utils'
import { SimulateurCard } from '../Simulateurs/Home'
import useSimulatorsData, { SimulatorData } from '../Simulateurs/metadata'
@ -21,7 +22,6 @@ import GlobalStats, { BigIndicator } from './GlobalStats'
import SatisfactionChart from './SatisfactionChart'
import { Page, PageChapter2, PageSatisfaction, StatsStruct } from './types'
import { formatDay, formatMonth } from './utils'
import { useSearchParams } from 'react-router-dom-v5-compat'
const stats = statsJson as unknown as StatsStruct
@ -186,13 +186,12 @@ const StatsDetail = () => {
return (
<>
<H2>Statistiques détaillées</H2>
<Grid
container
spacing={2}
justifyContent="space-between"
alignItems="flex-end"
>
<Grid item xs={12} sm={6} md={4}>
<Indicators>
<div
css={`
flex-basis: 50%;
`}
>
<SimulateursChoice
onChange={setChapter2}
value={chapter2}
@ -202,8 +201,8 @@ const StatsDetail = () => {
<Grid container columns={4}>
<SelectedSimulator chapter2={chapter2} />
</Grid>
</Grid>
<Grid item>
</div>
<div>
<ToggleGroup onChange={setPeriod as any} defaultValue={period}>
<Radio value="jours">
<Trans>jours</Trans>
@ -212,8 +211,8 @@ const StatsDetail = () => {
<Trans>mois</Trans>
</Radio>
</ToggleGroup>
</Grid>
</Grid>
</div>
</Indicators>
<Spacing lg />
@ -289,6 +288,18 @@ const StatsDetail = () => {
)
}
const Indicators = styled.div`
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
@media (min-width: ${({ theme }) => theme.breakpointsWidth.sm}) {
flex-direction: row;
align-items: flex-end;
}
`
export default function Stats() {
return (
<>

3
site/source/pages/gerer/declaration-charges-sociales-independant/_components/RésultatSimple.tsx
View File

@ -1,4 +1,3 @@
import { Grid } from '@mui/material'
import Value, { Condition } from '@/components/EngineValue'
import RuleLink from '@/components/RuleLink'
import { FromTop } from '@/components/ui/animate'
@ -6,12 +5,12 @@ import Emoji from '@/components/utils/Emoji'
import { useEngine } from '@/components/utils/EngineContext'
import { Markdown } from '@/components/utils/markdown'
import { Article } from '@/design-system/card'
import { Container, Grid, Spacing } from '@/design-system/layout'
import { H2, H3 } from '@/design-system/typography/heading'
import { Link } from '@/design-system/typography/link'
import { Body, Intro } from '@/design-system/typography/paragraphs'
import { utils } from 'publicodes'
import { Trans } from 'react-i18next'
import { Container, Spacing } from '@/design-system/layout'
export default function ResultatsSimples() {
const engine = useEngine()

2
site/source/pages/gerer/declaration-charges-sociales-independant/index.tsx
View File

@ -6,12 +6,12 @@ import { FromTop } from '@/components/ui/animate'
import Warning from '@/components/ui/WarningBlock'
import { SitePathsContext } from '@/components/utils/SitePathsContext'
import useSimulationConfig from '@/components/utils/useSimulationConfig'
import { Grid } from '@/design-system/layout'
import { Strong } from '@/design-system/typography'
import { H2, H3 } from '@/design-system/typography/heading'
import { Li, Ul } from '@/design-system/typography/list'
import { Body, Intro, SmallBody } from '@/design-system/typography/paragraphs'
import { situationSelector } from '@/selectors/simulationSelectors'
import { Grid } from '@mui/material'
import { useCallback, useContext } from 'react'
import { Trans } from 'react-i18next'
import { useDispatch, useSelector } from 'react-redux'

15
site/source/pages/gerer/declaration-revenu-independants/_components/DéclarationRevenu.tsx
View File

@ -9,12 +9,11 @@ import { useEngine } from '@/components/utils/EngineContext'
import { SitePathsContext } from '@/components/utils/SitePathsContext'
import { Message } from '@/design-system'
import { Button } from '@/design-system/buttons'
import { Container, Spacing } from '@/design-system/layout'
import { Container, Grid, Spacing } from '@/design-system/layout'
import { Strong } from '@/design-system/typography'
import { H2, H3, H4 } from '@/design-system/typography/heading'
import { Body, SmallBody } from '@/design-system/typography/paragraphs'
import { getMeta } from '@/utils'
import { Grid } from '@mui/material'
import { DottedName } from 'modele-social'
import { Rule, RuleNode } from 'publicodes'
import { Fragment, useCallback, useContext } from 'react'
@ -124,8 +123,10 @@ export function DéclarationRevenuSection({ progress }: { progress: number }) {
<Grid
container
spacing={3}
alignItems="stretch"
flexWrap="wrap-reverse"
css={`
align-items: stretch;
flex-wrap: wrap-reverse;
`}
>
<Grid
item
@ -141,9 +142,11 @@ export function DéclarationRevenuSection({ progress }: { progress: number }) {
<Message border={false}>
<Grid
container
alignItems="center"
css={`
align-items: center;
justify-content: space-between;
`}
spacing={1}
justifyContent="space-between"
>
<SimpleField dottedName="DRI . déclarant" />
<DéclarationRevenu editable={déclarationRevenusManuel} />

24
site/source/pages/gerer/declaration-revenu-independants/_components/NotHandledCase.tsx
View File

@ -1,9 +1,10 @@
import { SitePathsContext } from '@/components/utils/SitePathsContext'
import { Message } from '@/design-system'
import { Button } from '@/design-system/buttons'
import { Grid } from '@/design-system/layout'
import { SmallBody } from '@/design-system/typography/paragraphs'
import { Grid } from '@mui/material'
import { useContext } from 'react'
import styled from 'styled-components'
import notHandled from './undraw_access_denied_re_awnf.svg'
export default function NotHandledCase({
@ -15,8 +16,15 @@ export default function NotHandledCase({
return (
<Message type="info">
<Grid container justifyContent="center" spacing={3} alignItems="center">
<Grid item xs={6} md={3} sx={{ order: { md: 0, xs: 1, sm: 1 } }}>
<Grid
container
css={`
justify-content: center;
align-items: center;
`}
spacing={3}
>
<ReverseOrderOnMobile item xs={6} md={3}>
<img
src={notHandled}
alt=""
@ -25,7 +33,7 @@ export default function NotHandledCase({
padding: 1rem;
`}
/>
</Grid>
</ReverseOrderOnMobile>
<Grid item md={9}>
{children}
</Grid>
@ -46,3 +54,11 @@ export default function NotHandledCase({
</Message>
)
}
const ReverseOrderOnMobile = styled(Grid)`
order: 1;
@media (max-width: ${({ theme }) => theme.breakpointsWidth.md}) {
order: 0;
}
`

3
site/source/pages/gerer/declaration-revenu-independants/cotisations.tsx
View File

@ -8,11 +8,10 @@ import { useEngine } from '@/components/utils/EngineContext'
import { Markdown } from '@/components/utils/markdown'
import { useSimulationProgress } from '@/components/utils/useNextQuestion'
import { Message } from '@/design-system'
import { Container, Spacing } from '@/design-system/layout'
import { Container, Grid, Spacing } from '@/design-system/layout'
import { Strong } from '@/design-system/typography'
import { H2, H3 } from '@/design-system/typography/heading'
import { Body, Intro } from '@/design-system/typography/paragraphs'
import { Grid } from '@mui/material'
import { SimpleField } from '../_components/Fields'
import { DéclarationRevenu } from './_components/DéclarationRevenu'

11
site/source/pages/gerer/declaration-revenu-independants/declaration.tsx
View File

@ -6,14 +6,13 @@ import { Markdown } from '@/components/utils/markdown'
import { Message } from '@/design-system'
import Accordion from '@/design-system/accordion'
import { Button } from '@/design-system/buttons'
import { Spacing } from '@/design-system/layout'
import { Grid, Spacing } from '@/design-system/layout'
import { Strong } from '@/design-system/typography'
import { H2, H3, H6 } from '@/design-system/typography/heading'
import { Link } from '@/design-system/typography/link'
import { Li, Ol } from '@/design-system/typography/list'
import { Body, Intro } from '@/design-system/typography/paragraphs'
import { getMeta } from '@/utils'
import { Grid } from '@mui/material'
import { Item } from '@react-stately/collections'
import { DottedName } from 'modele-social'
import { RuleNode } from 'publicodes'
@ -62,7 +61,13 @@ export default function Déclaration() {
<>
<Condition expression="DRI . déclaration revenus manuelle = non">
<TrackPage name="declaration_resultat">
<Grid container spacing={2} alignItems="flex-end">
<Grid
container
spacing={2}
css={`
align-items: flex-end;
`}
>
<Grid item lg={10} xl={8}>
<FromTop>
<Trans i18nKey="assistant-DRI.declaration.intro">

3
site/source/pages/gerer/declaration-revenu-independants/entreprise.tsx
View File

@ -17,14 +17,13 @@ import { Markdown } from '@/components/utils/markdown'
import { SitePathsContext } from '@/components/utils/SitePathsContext'
import { Message } from '@/design-system'
import { Button } from '@/design-system/buttons'
import { Spacing } from '@/design-system/layout'
import { Grid, Spacing } from '@/design-system/layout'
import { Strong } from '@/design-system/typography'
import { H3 } from '@/design-system/typography/heading'
import { Link } from '@/design-system/typography/link'
import { Li, Ul } from '@/design-system/typography/list'
import { Body, Intro } from '@/design-system/typography/paragraphs'
import { useSetEntreprise } from '@/hooks/useSetEntreprise'
import { Grid } from '@mui/material'
import { useContext } from 'react'
import { Trans } from 'react-i18next'
import { useDispatch } from 'react-redux'

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

@ -15,14 +15,13 @@ import { SitePathsContext } from '@/components/utils/SitePathsContext'
import { Message } from '@/design-system'
import Accordion from '@/design-system/accordion'
import { Button } from '@/design-system/buttons'
import { Container, Spacing } from '@/design-system/layout'
import { Container, Grid, Spacing } from '@/design-system/layout'
import PopoverWithTrigger from '@/design-system/popover/PopoverWithTrigger'
import { Strong } from '@/design-system/typography'
import { H2, H3, H5 } from '@/design-system/typography/heading'
import { Link } from '@/design-system/typography/link'
import { Body, Intro, SmallBody } from '@/design-system/typography/paragraphs'
import { getMeta } from '@/utils'
import { Grid } from '@mui/material'
import { Item } from '@react-stately/collections'
import { formatValue } from 'publicodes'
import { useCallback, useContext } from 'react'

3
site/source/pages/gerer/demande-mobilité/EndBlock.tsx
View File

@ -4,13 +4,12 @@ import { EngineContext, EngineProvider } from '@/components/utils/EngineContext'
import { PopoverWithTrigger } from '@/design-system'
import { Button } from '@/design-system/buttons'
import { Checkbox, TextField } from '@/design-system/field'
import { Spacing } from '@/design-system/layout'
import { Grid, Spacing } from '@/design-system/layout'
import { Strong } from '@/design-system/typography'
import { H2 } from '@/design-system/typography/heading'
import { Link } from '@/design-system/typography/link'
import { Li, Ul } from '@/design-system/typography/list'
import { Body, Intro, SmallBody } from '@/design-system/typography/paragraphs'
import { Grid } from '@mui/material'
import { BlobProvider } from '@react-pdf/renderer'
import { RuleNode, utils } from 'publicodes'
import { lazy, Suspense, useContext, useRef, useState } from 'react'

3
site/source/pages/gerer/demande-mobilité/index.tsx
View File

@ -8,11 +8,10 @@ import { Markdown } from '@/components/utils/markdown'
import { usePersistingState } from '@/components/utils/persistState'
import useSimulationConfig from '@/components/utils/useSimulationConfig'
import { Button } from '@/design-system/buttons'
import { Spacing } from '@/design-system/layout'
import { Spacing, Grid } from '@/design-system/layout'
import { headings } from '@/design-system/typography'
import { Intro, SmallBody } from '@/design-system/typography/paragraphs'
import { evaluateQuestion, getMeta, hash, omit } from '@/utils'
import { Grid } from '@mui/material'
import { DottedName } from 'modele-social'
import Engine, { PublicodesExpression } from 'publicodes'
import { Fragment, lazy, Suspense, useCallback, useContext } from 'react'

78
site/source/pages/gerer/index.tsx
View File

@ -20,7 +20,7 @@ import { SitePathsContext } from '@/components/utils/SitePathsContext'
import useSimulationConfig from '@/components/utils/useSimulationConfig'
import { Message, Popover } from '@/design-system'
import { Button } from '@/design-system/buttons'
import { Container, Spacing } from '@/design-system/layout'
import { Container, Grid, Spacing } from '@/design-system/layout'
import { Strong } from '@/design-system/typography'
import { H2, H4 } from '@/design-system/typography/heading'
import { Link } from '@/design-system/typography/link'
@ -30,7 +30,6 @@ import { useQuestionList } from '@/hooks/useQuestionList'
import { useSetEntreprise } from '@/hooks/useSetEntreprise'
import { companySituationSelector } from '@/selectors/simulationSelectors'
import { evaluateQuestion } from '@/utils'
import { Grid } from '@mui/material'
import { useOverlayTriggerState } from '@react-stately/overlays'
import { DottedName } from 'modele-social'
import Engine, { Evaluation } from 'publicodes'
@ -267,7 +266,13 @@ function Home() {
<FormsImage src={forms} alt="" />
<Spacing xs />
<H2>Simulateurs pour votre entreprise</H2>
<Grid container spacing={3} position="relative">
<Grid
container
spacing={3}
css={`
position: relative;
`}
>
{dirigeantSimulateur ? (
<SimulateurCard fromGérer {...simulateurs[dirigeantSimulateur]} />
) : (
@ -302,7 +307,15 @@ function Home() {
/>
</WhenApplicable>
<Condition expression="entreprise . imposition . IS">
<Grid item xs={12} md={6} lg={4} alignSelf="flex-end">
<Grid
item
xs={12}
md={6}
lg={4}
css={`
align-self: flex-end;
`}
>
<Grid container spacing={3} columns={2}>
<SimulateurCard fromGérer {...simulateurs.is} small />
<SimulateurCard fromGérer {...simulateurs.dividendes} small />
@ -332,35 +345,17 @@ function Home() {
</H2>
<Body as="div">
<span>Vous souhaitez :</span>
<Grid component={Ul} container>
<Grid component={Li} item xs={12} md={6} lg={4}>
recruter, former vos salariés
</Grid>
<Grid component={Li} item xs={12} md={6} lg={4}>
financer vos projets d'investissement
</Grid>
<Grid component={Li} item xs={12} md={6} lg={4}>
résoudre un problème de trésorerie
</Grid>
<Grid component={Li} item xs={12} md={6} lg={4}>
être conseillé(e) en droit du travail
</Grid>
<Grid component={Li} item xs={12} md={6} lg={4}>
développer votre activité commerciale
</Grid>
<Grid component={Li} item xs={12} md={6} lg={4}>
vendre sur internet
</Grid>
<Grid component={Li} item xs={12} md={6} lg={4}>
vendre ou reprendre une entreprise
</Grid>
<Grid component={Li} item xs={12} md={6} lg={4}>
améliorer la santé et sécurité au travail
</Grid>
<Grid component={Li} item xs={12} md={6} lg={4}>
entrer dans une démarche de transition écologique & RSE
</Grid>
</Grid>
<UlInColumns>
<li>recruter, former vos salariés</li>
<li>financer vos projets d'investissement</li>
<li>résoudre un problème de trésorerie</li>
<li>être conseillé(e) en droit du travail</li>
<li>développer votre activité commerciale</li>
<li>vendre sur internet</li>
<li>vendre ou reprendre une entreprise</li>
<li>améliorer la santé et sécurité au travail</li>
<li>entrer dans une démarche de transition écologique & RSE</li>
</UlInColumns>
</Body>
<Body>
<Strong>
@ -428,6 +423,15 @@ const companyDetailsConfig = {
] as DottedName[],
}
const UlInColumns = styled.ul`
@media (min-width: ${({ theme }) => theme.breakpointsWidth.md}) {
columns: 2;
}
@media (min-width: ${({ theme }) => theme.breakpointsWidth.lg}) {
columns: 3;
}
`
export const AskCompanyMissingDetails = () => {
const sitePaths = useContext(SitePathsContext)
useSimulationConfig(companyDetailsConfig, { path: sitePaths.gérer.index })
@ -502,7 +506,13 @@ const PopoverOverwriteSituation = ({
l'écraser ?
</Body>
</Message>
<Grid container justifyContent="end" spacing={2}>
<Grid
container
css={`
justify-content: end;
`}
spacing={2}
>
<Grid item>
<Button
size="XS"

11
site/source/pages/integration/Iframe.tsx
View File

@ -6,12 +6,11 @@ import { SitePathsContext } from '@/components/utils/SitePathsContext'
import { PopoverWithTrigger } from '@/design-system'
import { Article } from '@/design-system/card'
import { Item, Select } from '@/design-system/field/Select'
import { Spacing } from '@/design-system/layout'
import { Grid, Spacing } from '@/design-system/layout'
import { H1, H2, H3 } from '@/design-system/typography/heading'
import { Link } from '@/design-system/typography/link'
import { Body, Intro } from '@/design-system/typography/paragraphs'
import urssafLogo from '@/images/Urssaf.svg'
import { Grid } from '@mui/material'
import { lazy, Suspense, useContext, useEffect, useRef, useState } from 'react'
import { Trans, useTranslation } from 'react-i18next'
import { Route } from 'react-router'
@ -79,7 +78,13 @@ function IntegrationCustomizer() {
<Trans>Personnalisez l'intégration</Trans>
</H2>
<Grid container spacing={4} justifyContent={'space-between'}>
<Grid
container
spacing={4}
css={`
justify-content: space-between;
`}
>
<Grid item xl={4} lg={5} md>
<H3>
<Trans i18nKey="pages.développeur.module">Quel module ?</Trans>

2
site/source/pages/integration/Options.tsx
View File

@ -3,8 +3,8 @@ import { icons } from '@/components/ui/SocialIcon'
import Emoji from '@/components/utils/Emoji'
import { SitePathsContext } from '@/components/utils/SitePathsContext'
import { Card } from '@/design-system/card'
import { Grid } from '@/design-system/layout'
import { Body, Intro } from '@/design-system/typography/paragraphs'
import { Grid } from '@mui/material'
import { useContext } from 'react'
import { Trans, useTranslation } from 'react-i18next'
import Meta from '../../components/utils/Meta'

103
site/source/types/styled.d.ts vendored Normal file
View File

@ -0,0 +1,103 @@
import 'styled-components'
import { SpacingKey } from '@/design-system/theme'
type Color = string
type Palette = {
100: Color
200: Color
300: Color
400: Color
500: Color
600: Color
700: Color
800: Color
}
type SmallPalette = {
100: Color
200: Color
300: Color
400: Color
500: Color
600: Color
}
type Metric = string
type Spacing = Metric
type Font = string
type FontSize = Metric
type ShadowDefinition = string
declare module 'styled-components' {
export interface DefaultTheme {
colors: {
bases: {
primary: Palette
secondary: Palette
tertiary: Palette
}
publics: {
employeur: Palette
particulier: Palette
independant: Palette
artisteAuteur: Palette
marin: Palette
}
extended: {
grey: Palette
error: SmallPalette
success: SmallPalette
info: SmallPalette
}
}
spacings: {
xxs: Spacing
xs: Spacing
sm: Spacing
md: Spacing
lg: Spacing
xl: Spacing
xxl: Spacing
xxxl: Spacing
}
fonts: {
main: Font
heading: Font
}
baseFontSize: FontSize
box: {
borderRadius: Metric
borderWidth: Metric
}
elevations: {
2: ShadowDefinition
3: ShadowDefinition
4: ShadowDefinition
5: ShadowDefinition
6: ShadowDefinition
}
breakpointsWidth: {
xl: Metric
lg: Metric
md: Metric
sm: Metric
}
darkMode: boolean
breakpoints: { values: Record<SpacingKey | 'xs', number> }
spacing: Array<string>
}
}

2
site/tsconfig.json
View File

@ -15,7 +15,7 @@
"@/*": ["*"]
},
"types": ["vite/client"],
"typeRoots": ["./types/", "./node_modules/@types"],
"typeRoots": ["./node_modules/@types", "./types/"],
"noEmit": true,
"strict": true
},

343
yarn.lock
View File

@ -1109,7 +1109,7 @@ __metadata:
languageName: node
linkType: hard
"@babel/plugin-syntax-jsx@npm:^7.12.13, @babel/plugin-syntax-jsx@npm:^7.16.7":
"@babel/plugin-syntax-jsx@npm:^7.16.7":
version: 7.16.7
resolution: "@babel/plugin-syntax-jsx@npm:7.16.7"
dependencies:
@ -1849,7 +1849,7 @@ __metadata:
languageName: node
linkType: hard
"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.13, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.14.5, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.16.4, @babel/runtime@npm:^7.16.7, @babel/runtime@npm:^7.17.0, @babel/runtime@npm:^7.17.2, @babel/runtime@npm:^7.5.0, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.2, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.13, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.5, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.16.4, @babel/runtime@npm:^7.16.7, @babel/runtime@npm:^7.17.0, @babel/runtime@npm:^7.17.2, @babel/runtime@npm:^7.5.0, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.2, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2":
version: 7.17.8
resolution: "@babel/runtime@npm:7.17.8"
dependencies:
@ -2031,28 +2031,6 @@ __metadata:
languageName: node
linkType: hard
"@emotion/babel-plugin@npm:^11.7.1":
version: 11.7.2
resolution: "@emotion/babel-plugin@npm:11.7.2"
dependencies:
"@babel/helper-module-imports": ^7.12.13
"@babel/plugin-syntax-jsx": ^7.12.13
"@babel/runtime": ^7.13.10
"@emotion/hash": ^0.8.0
"@emotion/memoize": ^0.7.5
"@emotion/serialize": ^1.0.2
babel-plugin-macros: ^2.6.1
convert-source-map: ^1.5.0
escape-string-regexp: ^4.0.0
find-root: ^1.1.0
source-map: ^0.5.7
stylis: 4.0.13
peerDependencies:
"@babel/core": ^7.0.0
checksum: eb9607356663c3e158b91ae7b8fde7335c74e6302d1671da1ca0b34142f762e1354bac8cb0bdf5baedf1278912eeea01e103b8f5c59ee107746d1b03f56aa664
languageName: node
linkType: hard
"@emotion/cache@npm:^10.0.27":
version: 10.0.29
resolution: "@emotion/cache@npm:10.0.29"
@ -2065,19 +2043,6 @@ __metadata:
languageName: node
linkType: hard
"@emotion/cache@npm:^11.7.1":
version: 11.7.1
resolution: "@emotion/cache@npm:11.7.1"
dependencies:
"@emotion/memoize": ^0.7.4
"@emotion/sheet": ^1.1.0
"@emotion/utils": ^1.0.0
"@emotion/weak-memoize": ^0.2.5
stylis: 4.0.13
checksum: cf7aa8fe3bacfdedcda94b53e76a7635e122043439715fcfbf7f1a81340cfe6099a59134481a03ec3e0437466566d18528577d1e6ea92f5b98c372b8b38a8f35
languageName: node
linkType: hard
"@emotion/core@npm:^10.1.1":
version: 10.3.1
resolution: "@emotion/core@npm:10.3.1"
@ -2105,7 +2070,7 @@ __metadata:
languageName: node
linkType: hard
"@emotion/hash@npm:0.8.0, @emotion/hash@npm:^0.8.0":
"@emotion/hash@npm:0.8.0":
version: 0.8.0
resolution: "@emotion/hash@npm:0.8.0"
checksum: 4b35d88a97e67275c1d990c96d3b0450451d089d1508619488fc0acb882cb1ac91e93246d471346ebd1b5402215941ef4162efe5b51534859b39d8b3a0e3ffaa
@ -2121,7 +2086,7 @@ __metadata:
languageName: node
linkType: hard
"@emotion/is-prop-valid@npm:^1.1.0, @emotion/is-prop-valid@npm:^1.1.2":
"@emotion/is-prop-valid@npm:^1.1.0":
version: 1.1.2
resolution: "@emotion/is-prop-valid@npm:1.1.2"
dependencies:
@ -2137,36 +2102,13 @@ __metadata:
languageName: node
linkType: hard
"@emotion/memoize@npm:^0.7.4, @emotion/memoize@npm:^0.7.5":
"@emotion/memoize@npm:^0.7.4":
version: 0.7.5
resolution: "@emotion/memoize@npm:0.7.5"
checksum: 83da8d4a7649a92c72f960817692bc6be13cc13e107b9f7e878d63766525ed4402881bfeb3cda61145c050281e7e260f114a0a2870515527346f2ef896b915b3
languageName: node
linkType: hard
"@emotion/react@npm:^11.7.1":
version: 11.8.2
resolution: "@emotion/react@npm:11.8.2"
dependencies:
"@babel/runtime": ^7.13.10
"@emotion/babel-plugin": ^11.7.1
"@emotion/cache": ^11.7.1
"@emotion/serialize": ^1.0.2
"@emotion/utils": ^1.1.0
"@emotion/weak-memoize": ^0.2.5
hoist-non-react-statics: ^3.3.1
peerDependencies:
"@babel/core": ^7.0.0
react: ">=16.8.0"
peerDependenciesMeta:
"@babel/core":
optional: true
"@types/react":
optional: true
checksum: a8733f8375f9798953019872137326f39e5171b3286535fe34a695d63067a2c0f0f154beb6d117361206ef04a584fa4adef0ecc450654b6af4695b1d893d2496
languageName: node
linkType: hard
"@emotion/serialize@npm:^0.11.15, @emotion/serialize@npm:^0.11.16":
version: 0.11.16
resolution: "@emotion/serialize@npm:0.11.16"
@ -2180,19 +2122,6 @@ __metadata:
languageName: node
linkType: hard
"@emotion/serialize@npm:^1.0.2":
version: 1.0.2
resolution: "@emotion/serialize@npm:1.0.2"
dependencies:
"@emotion/hash": ^0.8.0
"@emotion/memoize": ^0.7.4
"@emotion/unitless": ^0.7.5
"@emotion/utils": ^1.0.0
csstype: ^3.0.2
checksum: ff84fbe09ec06e7ad3deaef5c5b5ea6af6a522e8efe49c2b398b875d06872626284a83b6b18b7f777750c94264a61e7924157d869d9bca2f675731bbb91a6055
languageName: node
linkType: hard
"@emotion/sheet@npm:0.9.4":
version: 0.9.4
resolution: "@emotion/sheet@npm:0.9.4"
@ -2200,13 +2129,6 @@ __metadata:
languageName: node
linkType: hard
"@emotion/sheet@npm:^1.1.0":
version: 1.1.0
resolution: "@emotion/sheet@npm:1.1.0"
checksum: a4b74e16a8fea1157413efe4904f5f679d724323cb605d66d20a0b98744422f5d411fca927ceb52e4de454a0a819c5273ca9496db9f011b4ecd17b9f1b212007
languageName: node
linkType: hard
"@emotion/styled-base@npm:^10.3.0":
version: 10.3.0
resolution: "@emotion/styled-base@npm:10.3.0"
@ -2235,28 +2157,6 @@ __metadata:
languageName: node
linkType: hard
"@emotion/styled@npm:^11.6.0":
version: 11.8.1
resolution: "@emotion/styled@npm:11.8.1"
dependencies:
"@babel/runtime": ^7.13.10
"@emotion/babel-plugin": ^11.7.1
"@emotion/is-prop-valid": ^1.1.2
"@emotion/serialize": ^1.0.2
"@emotion/utils": ^1.1.0
peerDependencies:
"@babel/core": ^7.0.0
"@emotion/react": ^11.0.0-rc.0
react: ">=16.8.0"
peerDependenciesMeta:
"@babel/core":
optional: true
"@types/react":
optional: true
checksum: 67150fa788785c34e285b90acecc91fe7a63babceaefbeffd053bed0fa31f72a05bfeeb9d15620766e543e007b9ccac2e836812eec2e791f962ec4e52731ae4c
languageName: node
linkType: hard
"@emotion/stylis@npm:0.8.5, @emotion/stylis@npm:^0.8.4":
version: 0.8.5
resolution: "@emotion/stylis@npm:0.8.5"
@ -2264,7 +2164,7 @@ __metadata:
languageName: node
linkType: hard
"@emotion/unitless@npm:0.7.5, @emotion/unitless@npm:^0.7.4, @emotion/unitless@npm:^0.7.5":
"@emotion/unitless@npm:0.7.5, @emotion/unitless@npm:^0.7.4":
version: 0.7.5
resolution: "@emotion/unitless@npm:0.7.5"
checksum: f976e5345b53fae9414a7b2e7a949aa6b52f8bdbcc84458b1ddc0729e77ba1d1dfdff9960e0da60183877873d3a631fa24d9695dd714ed94bcd3ba5196586a6b
@ -2278,14 +2178,7 @@ __metadata:
languageName: node
linkType: hard
"@emotion/utils@npm:^1.0.0, @emotion/utils@npm:^1.1.0":
version: 1.1.0
resolution: "@emotion/utils@npm:1.1.0"
checksum: d3b681ca3a23b07033ac6c6937e71010a5549ac8ccec325eb6c91a7e48d9a73db83fa5dadc58be981bb125d7c00fedca868ea4362b1da9e02866615f96be4df1
languageName: node
linkType: hard
"@emotion/weak-memoize@npm:0.2.5, @emotion/weak-memoize@npm:^0.2.5":
"@emotion/weak-memoize@npm:0.2.5":
version: 0.2.5
resolution: "@emotion/weak-memoize@npm:0.2.5"
checksum: 27d402b0c683b94658220b6d47840346ee582329ca2a15ec9c233492e0f1a27687ccb233b76eedc922f2e185e444cc89f7b97a81a1d3e5ae9f075bab08e965ea
@ -2408,15 +2301,6 @@ __metadata:
languageName: node
linkType: hard
"@icons/material@npm:^0.4.1":
version: 0.4.1
resolution: "@icons/material@npm:0.4.1"
peerDependencies:
react: "*"
checksum: c199c98d72f939faae2da78dc3c573d2a66e4970d153ab7dc9c22ab233e1302145f68a700045050d3f2fb0e8a0b91c599374dd0cd7b5be32a847783177bf7d67
languageName: node
linkType: hard
"@internationalized/date@npm:3.0.0-alpha.4":
version: 3.0.0-alpha.4
resolution: "@internationalized/date@npm:3.0.0-alpha.4"
@ -2700,149 +2584,6 @@ __metadata:
languageName: node
linkType: hard
"@mui/base@npm:5.0.0-alpha.74":
version: 5.0.0-alpha.74
resolution: "@mui/base@npm:5.0.0-alpha.74"
dependencies:
"@babel/runtime": ^7.17.2
"@emotion/is-prop-valid": ^1.1.2
"@mui/types": ^7.1.3
"@mui/utils": ^5.5.3
"@popperjs/core": ^2.11.4
clsx: ^1.1.1
prop-types: ^15.7.2
react-is: ^17.0.2
peerDependencies:
"@types/react": ^16.8.6 || ^17.0.0
react: ^17.0.0
react-dom: ^17.0.0
peerDependenciesMeta:
"@types/react":
optional: true
checksum: e66a77933274eff27011bbe5a634c5812efdc0c7b96d1cf00cf7406080459919631fd929c0652ed18c5169d21ea7f3cac041b0f5a7473a984a915dacf9afe751
languageName: node
linkType: hard
"@mui/material@npm:^5.0.4":
version: 5.5.3
resolution: "@mui/material@npm:5.5.3"
dependencies:
"@babel/runtime": ^7.17.2
"@mui/base": 5.0.0-alpha.74
"@mui/system": ^5.5.3
"@mui/types": ^7.1.3
"@mui/utils": ^5.5.3
"@types/react-transition-group": ^4.4.4
clsx: ^1.1.1
csstype: ^3.0.11
hoist-non-react-statics: ^3.3.2
prop-types: ^15.7.2
react-is: ^17.0.2
react-transition-group: ^4.4.2
peerDependencies:
"@emotion/react": ^11.5.0
"@emotion/styled": ^11.3.0
"@types/react": ^16.8.6 || ^17.0.0
react: ^17.0.0
react-dom: ^17.0.0
peerDependenciesMeta:
"@emotion/react":
optional: true
"@emotion/styled":
optional: true
"@types/react":
optional: true
checksum: 4a66c00d07aa15ea229a1bb20025d240556d582f195e4d7ac5080a81c4fa45aa2cc294c0fbfc165d0d2acc0d4c545e0e7ba2d09f1cf0ed5ec8d7a38de4955aa3
languageName: node
linkType: hard
"@mui/private-theming@npm:^5.5.3":
version: 5.5.3
resolution: "@mui/private-theming@npm:5.5.3"
dependencies:
"@babel/runtime": ^7.17.2
"@mui/utils": ^5.5.3
prop-types: ^15.7.2
peerDependencies:
"@types/react": ^16.8.6 || ^17.0.0
react: ^17.0.0
peerDependenciesMeta:
"@types/react":
optional: true
checksum: aa7a0cecc8cdc261650d8ba8639ce59ec2dd69b59cd326fc31c48e7fd7d49d85d2ddbabfb1b3a61d253b9d9c8a4dfdc6c537e0eff0469ea92e3570e0e3a776fa
languageName: node
linkType: hard
"@mui/styled-engine@npm:@mui/styled-engine-sc@latest":
version: 5.5.2
resolution: "@mui/styled-engine-sc@npm:5.5.2"
dependencies:
prop-types: ^15.7.2
peerDependencies:
"@types/styled-components": ^5.1.14
styled-components: ^5.3.1
peerDependenciesMeta:
"@types/styled-components":
optional: true
checksum: c4d10f589655f37f56d05c99cb012ce7f44c467c808ae7173a5904a6f3080c9867dba77353e8e2ca85447cfc1fefe105345a9dae9a066fb13412688609a7da99
languageName: node
linkType: hard
"@mui/system@npm:^5.5.3":
version: 5.5.3
resolution: "@mui/system@npm:5.5.3"
dependencies:
"@babel/runtime": ^7.17.2
"@mui/private-theming": ^5.5.3
"@mui/styled-engine": ^5.5.2
"@mui/types": ^7.1.3
"@mui/utils": ^5.5.3
clsx: ^1.1.1
csstype: ^3.0.11
prop-types: ^15.7.2
peerDependencies:
"@emotion/react": ^11.5.0
"@emotion/styled": ^11.3.0
"@types/react": ^16.8.6 || ^17.0.0
react: ^17.0.0
peerDependenciesMeta:
"@emotion/react":
optional: true
"@emotion/styled":
optional: true
"@types/react":
optional: true
checksum: 7f2e7a1c4b1947e4d6a6efb70197f2978b45c56d09534e047c10d72c641dd338f1399972b7e47077d9e721ccb3ebe6e9161f122e59b99e7e39c1601f2d2c9f39
languageName: node
linkType: hard
"@mui/types@npm:^7.1.3":
version: 7.1.3
resolution: "@mui/types@npm:7.1.3"
peerDependencies:
"@types/react": "*"
peerDependenciesMeta:
"@types/react":
optional: true
checksum: 4990f505f1058bdd4c01ea21a6a6f788e5d3ff73b50962879d33bbf9c98ef1f18d8b6664025ce1dbd42544a79d7697d0011834f8fd83d12c9705f2c702829bb4
languageName: node
linkType: hard
"@mui/utils@npm:^5.5.3":
version: 5.5.3
resolution: "@mui/utils@npm:5.5.3"
dependencies:
"@babel/runtime": ^7.17.2
"@types/prop-types": ^15.7.4
"@types/react-is": ^16.7.1 || ^17.0.0
prop-types: ^15.7.2
react-is: ^17.0.2
peerDependencies:
react: ^17.0.0
checksum: 0c7c73aaeeb75792620a11aaca66c3c325777b16388559c7ac7ad60d80a9db82e09af40e76b62ae15c9d92a1d90aaad353e05e8774f3f50399f2af9ebb6ef4f5
languageName: node
linkType: hard
"@nodelib/fs.scandir@npm:2.1.5":
version: 2.1.5
resolution: "@nodelib/fs.scandir@npm:2.1.5"
@ -2946,13 +2687,6 @@ __metadata:
languageName: node
linkType: hard
"@popperjs/core@npm:^2.11.4":
version: 2.11.4
resolution: "@popperjs/core@npm:2.11.4"
checksum: 36168d274aa164368a50aef2e7b2f858e1b9145d9250af9dc1315ff719d874a367177760f8285efb75c8cf48267194a50e7dc9cdb41bf0b1958c38805c13564c
languageName: node
linkType: hard
"@publicodes/api@npm:^1.0.0-beta.43":
version: 1.0.0-beta.43
resolution: "@publicodes/api@npm:1.0.0-beta.43"
@ -6635,7 +6369,7 @@ __metadata:
languageName: node
linkType: hard
"@types/prop-types@npm:*, @types/prop-types@npm:^15.7.4":
"@types/prop-types@npm:*":
version: 15.7.4
resolution: "@types/prop-types@npm:15.7.4"
checksum: ef6e1899e59b876c273811b1bd845022fc66d5a3d11cb38a25b6c566b30514ae38fe20a40f67622f362a4f4f7f9224e22d8da101cff3d6e97e11d7b4c307cfc1
@ -6696,15 +6430,6 @@ __metadata:
languageName: node
linkType: hard
"@types/react-is@npm:^16.7.1 || ^17.0.0":
version: 17.0.3
resolution: "@types/react-is@npm:17.0.3"
dependencies:
"@types/react": "*"
checksum: 6abb7c47d54f012272650df8a962a28bd82f219291e5ef8b4dfa7fe0bb98ae243b060bf9fbe8ceff6213141794855a006db194b490b00ffd15842ae19d0ce1f0
languageName: node
linkType: hard
"@types/react-redux@npm:^7.1.20, @types/react-redux@npm:^7.1.23":
version: 7.1.23
resolution: "@types/react-redux@npm:7.1.23"
@ -6738,15 +6463,6 @@ __metadata:
languageName: node
linkType: hard
"@types/react-transition-group@npm:^4.4.4":
version: 4.4.4
resolution: "@types/react-transition-group@npm:4.4.4"
dependencies:
"@types/react": "*"
checksum: 86e9ff9731798e12bc2afe0304678918769633b531dcf6397f86af81718fb7930ef8648e894eeb3718fc6eab6eb885cfb9b82a44d1d74e10951ee11ebc4643ae
languageName: node
linkType: hard
"@types/react@npm:*, @types/react@npm:^17.0.0":
version: 17.0.43
resolution: "@types/react@npm:17.0.43"
@ -8461,7 +8177,7 @@ __metadata:
languageName: node
linkType: hard
"babel-plugin-macros@npm:^2.0.0, babel-plugin-macros@npm:^2.6.1":
"babel-plugin-macros@npm:^2.0.0":
version: 2.8.0
resolution: "babel-plugin-macros@npm:2.8.0"
dependencies:
@ -10393,7 +10109,7 @@ __metadata:
languageName: node
linkType: hard
"csstype@npm:^3.0.11, csstype@npm:^3.0.2":
"csstype@npm:^3.0.2":
version: 3.0.11
resolution: "csstype@npm:3.0.11"
checksum: 95e56abfe9ca219ae065acb4e43f61771a03170eed919127f558dfa168240867aba7629c8d98a201a0dd06d9a5ce82686f0570031c928516c61816adbc7c877f
@ -10983,16 +10699,6 @@ __metadata:
languageName: node
linkType: hard
"dom-helpers@npm:^5.0.1":
version: 5.2.1
resolution: "dom-helpers@npm:5.2.1"
dependencies:
"@babel/runtime": ^7.8.7
csstype: ^3.0.2
checksum: 863ba9e086f7093df3376b43e74ce4422571d404fc9828bf2c56140963d5edf0e56160f9b2f3bb61b282c07f8fc8134f023c98fd684bddcb12daf7b0f14d951c
languageName: node
linkType: hard
"dom-serializer@npm:^1.0.1, dom-serializer@npm:^1.3.2":
version: 1.3.2
resolution: "dom-serializer@npm:1.3.2"
@ -13855,7 +13561,7 @@ __metadata:
languageName: node
linkType: hard
"hoist-non-react-statics@npm:^3.0.0, hoist-non-react-statics@npm:^3.1.0, hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.1, hoist-non-react-statics@npm:^3.3.2":
"hoist-non-react-statics@npm:^3.0.0, hoist-non-react-statics@npm:^3.1.0, hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.2":
version: 3.3.2
resolution: "hoist-non-react-statics@npm:3.3.2"
dependencies:
@ -19070,21 +18776,6 @@ __metadata:
languageName: node
linkType: hard
"react-transition-group@npm:^4.4.2":
version: 4.4.2
resolution: "react-transition-group@npm:4.4.2"
dependencies:
"@babel/runtime": ^7.5.5
dom-helpers: ^5.0.1
loose-envify: ^1.4.0
prop-types: ^15.6.2
peerDependencies:
react: ">=16.6.0"
react-dom: ">=16.6.0"
checksum: b67bf5b3e86dbab72d658b9a52a3589e5960583ab28c7c66272427d8fe30d4c7de422d5046ae96bd2683cdf80cc3264b2516f5ce80cae1dbe6cf3ca6dda392c5
languageName: node
linkType: hard
"react-use-measure@npm:^2.0.4":
version: 2.1.1
resolution: "react-use-measure@npm:2.1.1"
@ -20337,12 +20028,7 @@ __metadata:
version: 0.0.0-use.local
resolution: "site@workspace:site"
dependencies:
"@emotion/react": ^11.7.1
"@emotion/styled": ^11.6.0
"@icons/material": ^0.4.1
"@internationalized/number": ^3.0.3
"@mui/material": ^5.0.4
"@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"
"@react-aria/accordion": ^3.0.0-alpha.5
"@react-aria/button": ^3.4.1
"@react-aria/checkbox": ^3.2.3
@ -21066,13 +20752,6 @@ __metadata:
languageName: node
linkType: hard
"stylis@npm:4.0.13":
version: 4.0.13
resolution: "stylis@npm:4.0.13"
checksum: 8ea7a87028b6383c6a982231c4b5b6150031ce028e0fdaf7b2ace82253d28a8af50cc5a9da8a421d3c7c4441592f393086e332795add672aa4a825f0fe3713a3
languageName: node
linkType: hard
"superagent@npm:^3.7.0":
version: 3.8.3
resolution: "superagent@npm:3.8.3"