(PC-33522) refactor(cheatcode): reorganize cheatcode

.eslintrc.js

@@ -305,17 +305,18 @@ module.exports = {
       },
       alias: {
         map: [
+          ['__mocks__', './__mocks__'],
           ['api', './src/api'],
+          ['cheatcodes', './src/cheatcodes'],
           ['features', './src/features'],
           ['fixtures', './src/fixtures'],
           ['libs', './src/libs'],
           ['shared', './src/shared'],
+          ['tests', './src/tests'],
           ['theme', './src/theme'],
           ['types', './src/types'],
-          ['tests', './src/tests'],
           ['ui', './src/ui'],
           ['web', './src/web'],
-          ['__mocks__', './__mocks__'],
         ],
         extensions: ['.ts', '.tsx', '.js', '.jsx', '.json', '.mjs'],
       },

.storybook/main.js

@@ -12,17 +12,18 @@ module.exports = {
       name: '@storybook/addon-react-native-web',
       options: {
         modulesToAlias: {
+          __mocks__: './__mocks__',
           api: './src/api',
+          cheatcodes: './src/cheatcodes',
           features: './src/features',
           fixtures: './src/fixtures',
           libs: './src/libs',
           shared: './src/shared',
+          tests: './src/tests',
           theme: './src/theme',
           types: './src/types',
-          tests: './src/tests',
           ui: './src/ui',
           web: './src/web',
-          __mocks__: './__mocks__',
 
           'react-native-linear-gradient': 'react-native-web-linear-gradient',
           'react-native-fast-image': path.join(appSrc, 'libs/react-native-web-fast-image'),

CODEOWNERS

@@ -13,7 +13,7 @@ src/features/favorites/                              @pass-culture/jeunes-decouv
 src/features/gtlPlaylist/                            @pass-culture/jeunes-conversion
 src/features/home/                                   @pass-culture/jeunes-decouverte
 src/features/identityCheck/                          @pass-culture/jeunes-activation
-src/features/internal/marketingAndCommunication/     @pass-culture/jeunes-decouverte
+src/features/internal/                               @pass-culture/jeunes-decouverte
 src/features/location/                               @pass-culture/jeunes-conversion
 src/features/notifications/                          @pass-culture/jeunes-activation
 src/features/offer/                                  @pass-culture/jeunes-decouverte

__snapshots__/features/profile/pages/Profile.native.test.tsx.native-snap

@@ -53,7 +53,7 @@ exports[`Profile component should render correctly 1`] = `
             topSafeInsets={16}
           >
             <View
-              accessibilityLabel="CheatMenu"
+              accessibilityLabel="Cheatcodes"
               accessibilityState={
                 {
                   "busy": undefined,
@@ -108,7 +108,7 @@ exports[`Profile component should render correctly 1`] = `
                   },
                 ]
               }
-              testID="CheatMenu"
+              testID="Cheatcodes"
             >
               <View
                 style={
@@ -135,7 +135,7 @@ exports[`Profile component should render correctly 1`] = `
                     ]
                   }
                 >
-                  CheatMenu
+                  Cheatcodes
                 </Text>
               </View>
             </View>

__snapshots__/features/profile/pages/Profile.web.test.tsx.web-snap

@@ -189,9 +189,9 @@ exports[`<Profile/> should render correctly on desktop 1`] = `
               class="css-view-175oi2r r-borderColor-uj9wiw r-borderRadius-1xfd6ze r-borderStyle-1phboty r-borderWidth-d045u9 r-paddingHorizontal-s1qlax r-position-u8s1d r-right-yj30ev r-top-9dmdro r-zIndex-1ym3atv"
             >
               <button
-                aria-label="CheatMenu"
+                aria-label="Cheatcodes"
                 class="c0 c1"
-                data-testid="CheatMenu"
+                data-testid="Cheatcodes"
                 tabindex="0"
                 type="button"
               >
@@ -202,7 +202,7 @@ exports[`<Profile/> should render correctly on desktop 1`] = `
                     class="css-text-1rynq56 r-overflow-1udh08x r-textOverflow-1udbk01 r-whiteSpace-3s2u2q r-wordWrap-1iln25a r-color-v2ubm6 r-fontFamily-1gknse6 r-fontSize-a023e6 r-lineHeight-rjixqe r-maxWidth-dnmrzs"
                     dir="ltr"
                   >
-                    CheatMenu
+                    Cheatcodes
                   </div>
                 </div>
               </button>
@@ -1347,9 +1347,9 @@ exports[`<Profile/> should render correctly on mobile browser 1`] = `
               class="css-view-175oi2r r-borderColor-uj9wiw r-borderRadius-1xfd6ze r-borderStyle-1phboty r-borderWidth-d045u9 r-paddingHorizontal-s1qlax r-position-u8s1d r-right-yj30ev r-top-9dmdro r-zIndex-1ym3atv"
             >
               <button
-                aria-label="CheatMenu"
+                aria-label="Cheatcodes"
                 class="c0 c1"
-                data-testid="CheatMenu"
+                data-testid="Cheatcodes"
                 tabindex="0"
                 type="button"
               >
@@ -1360,7 +1360,7 @@ exports[`<Profile/> should render correctly on mobile browser 1`] = `
                     class="css-text-1rynq56 r-overflow-1udh08x r-textOverflow-1udbk01 r-whiteSpace-3s2u2q r-wordWrap-1iln25a r-color-v2ubm6 r-fontFamily-1gknse6 r-fontSize-a023e6 r-lineHeight-rjixqe r-maxWidth-dnmrzs"
                     dir="ltr"
                   >
-                    CheatMenu
+                    Cheatcodes
                   </div>
                 </div>
               </button>

babel.config.js

@@ -9,21 +9,22 @@ module.exports = {
         extensions: ['.js', '.jsx', '.ts', '.tsx', '.js', '.ios.js', '.android.js'],
         root: ['./src/'],
         alias: {
+          __mocks__: './__mocks__',
           api: './src/api',
+          cheatcodes: './src/cheatcodes',
           features: './src/features',
           fixtures: './src/fixtures',
           libs: './src/libs',
           shared: './src/shared',
+          tests: './src/tests',
           theme: './src/theme',
           types: './src/types',
-          tests: './src/tests',
           ui: './src/ui',
           web: './src/web',
-          __mocks__: './__mocks__',
         },
       },
     ],
-    "@babel/plugin-transform-numeric-separator",
+    '@babel/plugin-transform-numeric-separator',
     '@babel/plugin-proposal-unicode-property-regex',
     '@babel/plugin-proposal-export-namespace-from',
     'react-native-reanimated/plugin',

jest.config.js

@@ -2,19 +2,31 @@ const { excludeCollectCoverageFrom } = require('./jest.excludeCollectCoverageFro
 
 module.exports = {
   preset: 'react-native',
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node','android.tsx','android.ts','android.jsx','android.js'],
+  moduleFileExtensions: [
+    'ts',
+    'tsx',
+    'js',
+    'jsx',
+    'json',
+    'node',
+    'android.tsx',
+    'android.ts',
+    'android.jsx',
+    'android.js',
+  ],
   testEnvironmentOptions: { customExportConditions: [''] },
   moduleNameMapper: {
+    '^__mocks__(.*)$': '<rootDir>/__mocks__$1',
     '^api(.*)$': '<rootDir>/src/api$1',
+    '^cheatcodes(.*)$': '<rootDir>/src/cheatcodes$1',
     '^features(.*)$': '<rootDir>/src/features$1',
     '^fixtures(.*)$': '<rootDir>/src/fixtures$1',
     '^libs(.*)$': '<rootDir>/src/libs$1',
     '^shared(.*)$': '<rootDir>/src/shared$1',
+    '^tests(.*)$': '<rootDir>/src/tests$1',
     '^theme(.*)$': '<rootDir>/src/theme$1',
     '^types(.*)$': '<rootDir>/src/types$1',
-    '^tests(.*)$': '<rootDir>/src/tests$1',
     '^ui(.*)$': '<rootDir>/src/ui$1',
-    '^__mocks__(.*)$': '<rootDir>/__mocks__$1',
   },
   snapshotResolver: '<rootDir>/jest/custom-snapshot-resolver-native.js',
   setupFiles: [

src/features/internal/cheatcodes/components/CheatMenuButton.native.test.tsx → src/cheatcodes/components/CheatMenuButton.native.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { CheatMenuButton } from 'features/internal/cheatcodes/components/CheatMenuButton'
+import { CheatMenuButton } from 'cheatcodes/components/CheatMenuButton'
 import { env } from 'libs/environment'
 import { act, render, screen } from 'tests/utils'
 

src/features/internal/cheatcodes/components/CheatMenuButton.tsx → src/cheatcodes/components/CheatMenuButton.tsx

@@ -1,6 +1,5 @@
 import { useNavigation } from '@react-navigation/native'
 import React from 'react'
-import { Platform } from 'react-native'
 import styled from 'styled-components/native'
 
 import { UseNavigationType } from 'features/navigation/RootNavigator/types'
@@ -17,8 +16,8 @@ export const CheatMenuButton: React.FC = () => {
     <CheatMenuButtonContainer topSafeInsets={top}>
       <ButtonTertiaryNeutralInfo
         buttonHeight="extraSmall"
-        wording="CheatMenu"
-        onPress={() => navigate(Platform.OS === 'web' ? 'Navigation' : 'CheatMenu')}
+        wording="Cheatcodes"
+        onPress={() => navigate('CheatcodesMenu')}
       />
     </CheatMenuButtonContainer>
   ) : null

src/cheatcodes/components/CheatcodesTemplateScreen.tsx

@@ -0,0 +1,52 @@
+import React, { PropsWithChildren } from 'react'
+import styled from 'styled-components/native'
+
+import {
+  PageHeaderWithoutPlaceholder,
+  useGetHeaderHeight,
+} from 'ui/components/headers/PageHeaderWithoutPlaceholder'
+import { Spacer } from 'ui/theme'
+
+type Props = PropsWithChildren<{
+  title: string
+  flexDirection?: 'row' | 'column'
+}>
+
+export const CheatcodesTemplateScreen: React.FC<Props> = ({
+  title,
+  flexDirection = 'row',
+  children,
+}) => {
+  const headerHeight = useGetHeaderHeight()
+
+  return (
+    <React.Fragment>
+      <PageHeaderWithoutPlaceholder title={title} />
+      <Placeholder height={headerHeight} />
+      <ScrollView>
+        <StyledContainer flexDirection={flexDirection}>{children}</StyledContainer>
+        <Spacer.BottomScreen />
+      </ScrollView>
+    </React.Fragment>
+  )
+}
+
+const Placeholder = styled.View<{ height: number }>(({ height }) => ({
+  height,
+  backgroundColor: 'white',
+}))
+
+const ScrollView = styled.ScrollView.attrs(({ theme }) => ({
+  contentContainerStyle: {
+    backgroundColor: theme.colors.white,
+  },
+}))``
+
+const StyledContainer = styled.View<{ flexDirection: 'row' | 'column' }>(
+  ({ theme, flexDirection }) => ({
+    flexDirection,
+    flexWrap: flexDirection === 'row' ? 'wrap' : 'nowrap',
+    paddingVertical: theme.contentPage.marginVertical,
+    paddingHorizontal: theme.contentPage.marginHorizontal,
+  })
+)

src/features/internal/cheatcodes/components/LinkToComponent.tsx → src/cheatcodes/components/LinkToComponent.tsx

@@ -1,36 +1,35 @@
 import { useNavigation } from '@react-navigation/native'
 import React from 'react'
+import styled from 'styled-components/native'
 
-import { Row } from 'features/internal/cheatcodes/components/Row'
 import {
   RootScreenNames,
   RootStackParamList,
   UseNavigationType,
 } from 'features/navigation/RootNavigator/types'
 import { ButtonPrimary } from 'ui/components/buttons/ButtonPrimary'
+import { padding } from 'ui/theme'
 
 interface LinkToComponentProps {
   name?: RootScreenNames
   onPress?: () => void
   title?: string
   navigationParams?: RootStackParamList[RootScreenNames]
-  half?: boolean
   disabled?: boolean
 }
 
 export const LinkToComponent = ({
-  name = 'NavigationSignUp',
+  name = 'CheatcodesNavigationSignUp',
   onPress,
   title,
   navigationParams,
-  half = true,
   disabled = false,
 }: LinkToComponentProps) => {
   const { navigate } = useNavigation<UseNavigationType>()
   const navigateToComponent = () => navigate(name, navigationParams)
 
   return (
-    <Row half={half}>
+    <Row>
       <ButtonPrimary
         wording={title ?? name}
         onPress={onPress ?? navigateToComponent}
@@ -39,3 +38,8 @@ export const LinkToComponent = ({
     </Row>
   )
 }
+
+const Row = styled.View(({ theme }) => ({
+  width: theme.appContentWidth > theme.breakpoints.sm ? '50%' : '100%',
+  ...padding(2, 0.5),
+}))