Merge pull request #195 from BouyguesTelecom/fix/components

Fix and clean container
BouyguesTelecom · Dec 2, 2024 · e5f847f · e5f847f
2 parents 18d3061 + ae0e87f
commit e5f847f
Show file tree

Hide file tree

Showing 30 changed files with 516 additions and 408 deletions.
diff --git a/examples/mobile-expo/.env b/examples/mobile-expo/.env
@@ -0,0 +1,2 @@
+REACT_NATIVE_PACKAGER_HOSTNAME=127.0.0.1
+NODE_TLS_REJECT_UNAUTHORIZED=0
diff --git a/examples/mobile-expo/package.json b/examples/mobile-expo/package.json
@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "main": "node_modules/expo/AppEntry.js",
   "scripts": {
-    "start": "REACT_NATIVE_PACKAGER_HOSTNAME='127.0.0.1' expo start --offline",
+    "start": "expo start",
     "android": "expo start --android",
     "ios": "expo start --ios",
     "web": "expo start --web"

diff --git a/examples/react-template/Menu.tsx b/examples/react-template/Menu.tsx
@@ -2,8 +2,8 @@ import {
   AutoLayout,
   Box,
   BoxContent,
-  Columns,
   Column,
+  Columns,
   Divider,
   Icon,
   IconName,
@@ -16,9 +16,9 @@ import {
   TitleLevels,
   View,
 } from '@trilogy-ds/react/components'
+import { TypographyAlign } from '@trilogy-ds/react/objects'
 import * as React from 'react'
 import * as Screens from './screens'
-import { Alignable, TypographyAlign } from '@trilogy-ds/react/objects'
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 export const MenuScreen = ({ navigation }: any): JSX.Element => {
@@ -50,31 +50,33 @@ export const MenuScreen = ({ navigation }: any): JSX.Element => {
             <Title level={TitleLevels.THREE} typo={[TypographyAlign.TEXT_CENTERED]}>
               Screens
             </Title>
-            {Object.keys(list).map((name: any, index) => {
-              const [pathName] = list[name].split('Screen')
-              return (
-                <Box
-                  key={index}
-                  onClick={() => {
-                    console.log(navigation)
-                    if (navigation) {
-                      navigation.navigate(pathName)
-                    }
-                  }}
-                >
-                  <BoxContent>
-                    <Columns verticalAlign={Alignable.ALIGNED_CENTER}>
-                      <Column>
-                        <Title level={TitleLevels.THREE}>{pathName}</Title>
-                      </Column>
-                      <Column narrow>
-                        <Icon name={IconName.ARROW_RIGHT} />
-                      </Column>
-                    </Columns>
-                  </BoxContent>
-                </Box>
-              )
-            })}
+            <AutoLayout>
+              {Object.keys(list).map((name, index) => {
+                const [pathName] = list[name].split('Screen')
+                return (
+                  <Box
+                    key={index}
+                    onClick={() => {
+                      console.log(navigation)
+                      if (navigation) {
+                        navigation.navigate(pathName)
+                      }
+                    }}
+                  >
+                    <BoxContent>
+                      <Columns verticalAlign='ALIGNED_CENTER' gap={0}>
+                        <Column size={11}>
+                          <Title level={TitleLevels.THREE}>{pathName}</Title>
+                        </Column>
+                        <Column size={1}>
+                          <Icon name={IconName.ARROW_RIGHT} />
+                        </Column>
+                      </Columns>
+                    </BoxContent>
+                  </Box>
+                )
+              })}
+            </AutoLayout>
           </Section>
         </ScrollView>
       </AutoLayout>

diff --git a/examples/react-template/screens/Autolayout.tsx b/examples/react-template/screens/Autolayout.tsx
@@ -1,27 +1,26 @@
+import { StatusState, TrilogyColor } from '@trilogy-ds/react'
 import {
   Accordion,
   AccordionBody,
   AccordionHeader,
   AccordionItem,
   Alert,
+  AutoComplete,
   AutoLayout,
   Box,
   BoxContent,
   BoxHeader,
   Button,
+  Card,
+  CardContent,
+  Icon,
   IconName,
-  Input,
+  IconSize,
   Text,
   TextLevels,
   Title,
   TitleLevels,
-  Icon,
-  IconSize,
-  Card,
-  CardContent,
-  Divider,
 } from '@trilogy-ds/react/components'
-import { StatusState, TrilogyColor } from '@trilogy-ds/react'
 import * as React from 'react'
 
 export const AutolayoutScreen = (): JSX.Element => {
@@ -77,31 +76,31 @@ export const AutolayoutScreen = (): JSX.Element => {
       <Button variant={'PRIMARY'}>Click</Button>
 
       <Accordion>
-        <AccordionItem id="ONE" active={true}>
+        <AccordionItem id='ONE' active={true}>
           <AccordionHeader>
-            <Text >Hello World 1</Text>
+            <Text>Hello World 1</Text>
           </AccordionHeader>
-          <AccordionBody dataId="totooooo-test-id" testId="totooooo">
+          <AccordionBody dataId='totooooo-test-id' testId='totooooo'>
             <Text>Lorem ipsum dolor sit amet lorem</Text>
           </AccordionBody>
         </AccordionItem>
-        <AccordionItem active={true} id="TWO">
+        <AccordionItem active={true} id='TWO'>
           <AccordionHeader>
             <Text>Hello World 2</Text>
           </AccordionHeader>
           <AccordionBody>
             <Text>Lorem ipsum dolor sit amet</Text>
           </AccordionBody>
         </AccordionItem>
-        <AccordionItem id="THREE">
+        <AccordionItem id='THREE'>
           <AccordionHeader>
             <Text>Hello World 2</Text>
           </AccordionHeader>
           <AccordionBody>
             <Text>Collpased by default</Text>
           </AccordionBody>
         </AccordionItem>
-        <AccordionItem disabled id="FOUR">
+        <AccordionItem disabled id='FOUR'>
           <AccordionHeader>
             <Text>Hello World 3</Text>
           </AccordionHeader>
@@ -118,7 +117,7 @@ export const AutolayoutScreen = (): JSX.Element => {
         description='Lorem Ipsum is simply dummy text of the printing and typesetting industry.'
       />
 
-      <Input.AutoComplete customIcon={IconName.ALERT} displayMenu={true} data={['1', '2']} />
+      <AutoComplete customIcon={IconName.ALERT} displayMenu={true} data={['1', '2']} />
     </AutoLayout>
   )
 }
diff --git a/examples/react-template/screens/TemplateOne.tsx b/examples/react-template/screens/TemplateOne.tsx
@@ -0,0 +1,120 @@
+/* eslint-disable react-native/no-inline-styles */
+import React from 'react'
+
+import {
+  AutoLayout,
+  Box,
+  BoxContent,
+  Button,
+  ButtonVariant,
+  Column,
+  Columns,
+  Container,
+  Divider,
+  Hero,
+  Icon,
+  IconName,
+  IconSize,
+  Link,
+  ScrollView,
+  SpacerSize,
+  Text,
+  TextLevels,
+  Title,
+  TitleLevels,
+  View,
+} from '@trilogy-ds/react/components'
+
+import { TrilogyColor, TypographyAlign, TypographyBold } from '@trilogy-ds/react'
+
+export const TemplateOne = () => {
+  return (
+    <View backgroundColor={TrilogyColor.BACKGROUND} flexable>
+      <ScrollView>
+        <View flexable>
+          <Hero
+            backgroundColor={TrilogyColor.ACCENT}
+            overlap={[
+              <Container key={0}>
+                <AutoLayout edgeSize={SpacerSize.TWO} edges={['bottom']} key={0}>
+                  <Box shadowless>
+                    <BoxContent>
+                      <AutoLayout>
+                        <Title
+                          level={TitleLevels.THREE}
+                          testId='interstitialTitle'
+                          typo={TypographyAlign.TEXT_CENTERED}
+                        >
+                          Heureux de vous accueillir
+                        </Title>
+                        <Text level={TextLevels.ONE} testId='interstitialSubtitle' typo={TypographyAlign.TEXT_CENTERED}>
+                          Connectez-vous pour accéder à votre espace client
+                        </Text>
+                        <Button testId='btnAccessMyCustomerArea' variant={ButtonVariant.CONVERSION}>
+                          Me connecter
+                        </Button>
+                        <AutoLayout edgeSize={SpacerSize.FOUR} edges={['top', 'bottom']}>
+                          <Divider content={'ou'} />
+                        </AutoLayout>
+                        <Text level={TextLevels.ONE} testId='interstitialSubtitle' typo={TypographyAlign.TEXT_CENTERED}>
+                          Première connexion ?
+                        </Text>
+                        <Button testId='accountCreation' variant={ButtonVariant.PRIMARY}>
+                          Créer mon mot de passe
+                        </Button>
+                      </AutoLayout>
+                      <AutoLayout edgeSize={SpacerSize.THREE} edges={['bottom', 'top']}>
+                        <Box flat>
+                          <BoxContent>
+                            <Columns>
+                              <Column size={2}>
+                                <Icon name={IconName.ARROW_RIGHT} />
+                              </Column>
+                              <Column size={8}>
+                                <Text level={TextLevels.TWO} typo={TypographyBold.TEXT_WEIGHT_SEMIBOLD}>
+                                  Obtenir de l'aide
+                                </Text>
+                              </Column>
+                              <Column size={1}>
+                                <Icon name={IconName.ARROW_RIGHT} size={IconSize.SMALL} />
+                              </Column>
+                            </Columns>
+                          </BoxContent>
+                        </Box>
+                      </AutoLayout>
+                      <AutoLayout edgeSize={SpacerSize.THREE} edges={['bottom']}>
+                        <Box flat>
+                          <BoxContent>
+                            <Columns>
+                              <Column size={2}>
+                                <Icon name={IconName.ARROW_RIGHT} />
+                              </Column>
+                              <Column size={9}>
+                                <Text level={TextLevels.ONE} typo={TypographyBold.TEXT_WEIGHT_BOLD}>
+                                  Visiter la boutique en ligne
+                                </Text>
+                              </Column>
+                              <Column size={1}>
+                                <Icon name={IconName.ARROW_RIGHT} size={IconSize.SMALL} />
+                              </Column>
+                            </Columns>
+                          </BoxContent>
+                        </Box>
+                      </AutoLayout>
+                    </BoxContent>
+                  </Box>
+                </AutoLayout>
+                <AutoLayout edgeSize={SpacerSize.ONE} edges={['bottom']}>
+                  <Link testId='legalNotice'>Mention légales</Link>
+                  <Text level={TextLevels.THREE} testId='versionSmall' typo={TypographyAlign.TEXT_CENTERED}>
+                    V24.12.0
+                  </Text>
+                </AutoLayout>
+              </Container>,
+            ]}
+          ></Hero>
+        </View>
+      </ScrollView>
+    </View>
+  )
+}
diff --git a/examples/react-template/screens/index.ts b/examples/react-template/screens/index.ts
@@ -38,6 +38,7 @@ export * from './Switch'
 export * from './Tab'
 export * from './Table'
 export * from './Tag'
+export * from './TemplateOne'
 export * from './Text'
 export * from './Textarea'
 export * from './Timeline'