Fix examples

BouyguesTelecom · Oct 29, 2024 · efd31f0 · efd31f0
1 parent e962840
commit efd31f0
Show file tree

Hide file tree

Showing 30 changed files with 150 additions and 183 deletions.
diff --git a/packages/react/components/accordion/item/AccordionItem.tsx b/packages/react/components/accordion/item/AccordionItem.tsx
@@ -28,7 +28,7 @@ const AccordionItem = ({
   ...others
 }: AccordionItemProps): JSX.Element => {
   const ref = useRef<HTMLDetailsElement>(null)
-  const {styled} = useTrilogyContext()
+  const { styled } = useTrilogyContext()
 
   const [isActive, setIsActive] = useState<boolean>(active || false)
   const [expandedHeight, setExpandedHeight] = useState<string>()

diff --git a/packages/react/components/alert/Alert.example.tsx b/packages/react/components/alert/Alert.example.tsx
@@ -6,31 +6,31 @@ const AlertExample: React.ReactNode =
 <Columns multiline>
             <ColumnsItem size={6}>
             <Alert
-              alert='INFO'
+              status='INFO'
               description='Lorem Ipsum is simply dummy text type and scrambled it to make a type specimen book..'
               display
               title='Alert information'
             />
             </ColumnsItem>
             <ColumnsItem size={6}>
             <Alert
-              alert='ERROR'
+              status='ERROR'
               description='Lorem Ipsum is simply dummy text type and scrambled it to make a type specimen book..'
               display
               title='Alert information'
             />
             </ColumnsItem>
             <ColumnsItem size={6}>
             <Alert
-              alert='SUCCESS'
+              status='SUCCESS'
               description='Lorem Ipsum is simply dummy text type and scrambled it to make a type specimen book..'
               display
               title='Alert information'
             />
             </ColumnsItem>
             <ColumnsItem size={6}>
             <Alert
-              alert='WARNING'
+              status='WARNING'
               description='Lorem Ipsum is simply dummy text type and scrambled it to make a type specimen book..'
               display
               title='Alert information'

diff --git a/packages/react/components/autocomplete/AutoComplete.native.tsx b/packages/react/components/autocomplete/AutoComplete.native.tsx
@@ -7,7 +7,6 @@ import { defaultMatching, getLabel } from './Autocomplete.helpers'
 import AutoCompleteMenuNative from './menu/AutoCompleteMenu.native'
 import { debounce } from './utils'
 
-
 /**
  * AutoComplete Component
  * @param placeholder {string} placeholder for input

diff --git a/packages/react/components/autocomplete/AutoCompleteProps.ts b/packages/react/components/autocomplete/AutoCompleteProps.ts
@@ -1,4 +1,4 @@
-import { InputChangeEventWeb,InputChangeEventNative, InputClickEvent, InputProps } from '@/components/input/InputProps'
+import { InputChangeEventWeb, InputChangeEventNative, InputClickEvent, InputProps } from '@/components/input/InputProps'
 import { FocusEventHandler } from 'react'
 
 /**

diff --git a/packages/react/components/autolayout/DefaultSpacingMatrix.ts b/packages/react/components/autolayout/DefaultSpacingMatrix.ts
@@ -39,4 +39,4 @@ export const DEFAULT_SPACING_MATRIX: SpacingMatrix = [
   [INSERT_SPACE_BETWEEN, 'Link', 'default', TWO],
   [INSERT_SPACE_BETWEEN, 'Sticker', 'default', TWO],
   [INSERT_SPACE_BETWEEN, 'Tag', 'default', TWO],
-];
+]
diff --git a/packages/react/components/badge/Badge.tsx b/packages/react/components/badge/Badge.tsx
@@ -4,7 +4,7 @@ import { Text, TextMarkup } from "@/components/text"
 import clsx from "clsx"
 import { hashClass } from "@/helpers"
 import { useTrilogyContext } from "@/context"
-import {is} from "@/services";
+import { is } from "@/services"
 
 /**
  * Badge Component

diff --git a/packages/react/components/box/Box.example.tsx b/packages/react/components/box/Box.example.tsx
@@ -1,67 +1,49 @@
 import React from 'react'
 import { Box, BoxContent, BoxFooter } from './index'
-import { Title } from '@/components/title'
+import { Title, TitleLevels } from '@/components/title'
 import { Text } from '@/components/text'
 import { Columns, ColumnsItem } from '../columns'
 import { Link } from '../link'
+import { TrilogyColor } from '@/objects'
 
-const BoxExample: React.ReactNode =
+const BoxExample: React.ReactNode = (
   <Columns multiline>
-      <ColumnsItem size={4}>
-        <Box>
-          <BoxContent>
-            <Title level='ONE'>
-              Box Title
-            </Title>
-            <Text>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
-            </Text>
-          </BoxContent>
-        </Box>
-      </ColumnsItem>
-      <ColumnsItem size={4}>
-        <Box flat>
-          <BoxContent>
-            <Title level='ONE'>
-              Box Title
-            </Title>
-            <Text>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
-            </Text>
-          </BoxContent>
-        </Box>
-      </ColumnsItem>
-      <ColumnsItem size={4}>
-        <Box
-          leftBorder='WARNING'
-        >
-          <BoxContent>
-            <Title level='ONE'>
-              Box Title
-            </Title>
-            <Text>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
-            </Text>
-          </BoxContent>
-        </Box>
-      </ColumnsItem>
-      <ColumnsItem size={12}>
-        <Box>
-          <BoxContent>
-            <Title level='ONE'>
-              Box Title
-            </Title>
-            <Text>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
-            </Text>
-          </BoxContent>
-          <BoxFooter>
-            <Link>
-              Link
-            </Link>
-          </BoxFooter>
-        </Box>
-      </ColumnsItem>
-    </Columns>
+    <ColumnsItem size={4}>
+      <Box>
+        <BoxContent>
+          <Title level={TitleLevels.ONE}>Box Title</Title>
+          <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.</Text>
+        </BoxContent>
+      </Box>
+    </ColumnsItem>
+    <ColumnsItem size={4}>
+      <Box flat>
+        <BoxContent>
+          <Title level={TitleLevels.ONE}>Box Title</Title>
+          <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.</Text>
+        </BoxContent>
+      </Box>
+    </ColumnsItem>
+    <ColumnsItem size={4}>
+      <Box highlighted={TrilogyColor.WARNING}>
+        <BoxContent>
+          <Title level={TitleLevels.ONE}>Box Title</Title>
+          <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.</Text>
+        </BoxContent>
+      </Box>
+    </ColumnsItem>
+    <ColumnsItem size={12}>
+      <Box>
+        <BoxContent>
+          <Title level={TitleLevels.ONE}>Box Title</Title>
+          <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.</Text>
+        </BoxContent>
+        <BoxFooter>
+          <Link>Link</Link>
+        </BoxFooter>
+      </Box>
+    </ColumnsItem>
+  </Columns>
+)
 
 export default BoxExample
diff --git a/packages/react/components/card/Card.example.tsx b/packages/react/components/card/Card.example.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Card, CardImage, CardContent } from './index'
-import { Title } from '@/components/title'
-import { Text } from '@/components/text'
+import { Title, TitleLevels } from '@/components/title'
+import { Text, TextLevels } from '@/components/text'
 import { Button } from '@/components/button'
 import { Rows, RowItem } from '@/components/rows'
 
@@ -14,10 +14,10 @@ const CardExample: React.ReactNode =
           <Title>
             Présentation
           </Title>
-          <Title level='ONE'>
+          <Title level={TitleLevels.ONE}>
             Title lorem
           </Title>
-          <Text level='ONE'>
+          <Text level={TextLevels.ONE}>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula ex, neque eu,
             vulputate vera.
           </Text>
@@ -36,10 +36,10 @@ const CardExample: React.ReactNode =
           <Title>
             Présentation
           </Title>
-          <Title level='ONE'>
+          <Title level={TitleLevels.ONE}>
             Title lorem
           </Title>
-          <Text level='ONE'>
+          <Text level={TextLevels.ONE}>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula ex, neque eu,
             vulputate vera.
           </Text>

diff --git a/packages/react/components/card/image/CardImage.native.tsx b/packages/react/components/card/image/CardImage.native.tsx
@@ -18,7 +18,6 @@ const CardImage = ({ src, size, alt, onClick, contain, ...others }: CardImagePro
   const maxSize = horizontal ? '50%' : '100%'
   const [ratio, setRatio] = useState(1)
 
-
   const getBorderRadius = (isHorizontal: boolean, isReversed: boolean, isActive: boolean) => ({
     borderBottomRightRadius: (isHorizontal && 1) || (isReversed && 8) || 0,
     borderBottomLeftRadius: (isHorizontal && 8) || (isReversed && 8) || 0,

diff --git a/packages/react/components/columns/Columns.example.tsx b/packages/react/components/columns/Columns.example.tsx
@@ -1,26 +1,26 @@
 import React from 'react'
 import { Columns, ColumnsItem } from './index'
-import { Title } from '@/components/title'
+import { Title, TitleLevels } from '@/components/title'
 import { Box } from '@/components/box'
 
 const ColumnsExample: React.ReactNode = <Columns>
   <ColumnsItem>
     <Box flat>
-      <Title level='TWO'>
+      <Title level={TitleLevels.TWO}>
         Column
       </Title>
     </Box>
   </ColumnsItem>
   <ColumnsItem>
     <Box flat>
-      <Title level='TWO'>
+      <Title level={TitleLevels.TWO}>
         Column
       </Title>
     </Box>
   </ColumnsItem>
   <ColumnsItem>
     <Box flat>
-      <Title level='TWO'>
+      <Title level={TitleLevels.TWO}>
         Column
       </Title>
     </Box>

diff --git a/packages/react/components/columns/Columns.native.tsx b/packages/react/components/columns/Columns.native.tsx
@@ -1,11 +1,10 @@
-import React, {createContext, useState} from "react"
-import {Dimensions, LayoutChangeEvent, StyleSheet} from "react-native"
-import {View} from "@/components/view"
-import {ColumnsProps} from "./ColumnsProps"
-import {ComponentName} from "@/components/enumsComponentsName"
-import {ScrollView} from 'react-native'
-import {ColumnsGap, ColumnsGapValue} from "@/components/columns/ColumnsTypes"
-import {Text} from "@/components/text";
+import React, { createContext, useState } from "react"
+import { Dimensions, LayoutChangeEvent, StyleSheet, ScrollView } from "react-native"
+import { View } from "@/components/view"
+import { ColumnsProps } from "./ColumnsProps"
+import { ComponentName } from "@/components/enumsComponentsName"
+import { ColumnsGap, ColumnsGapValue } from "@/components/columns/ColumnsTypes"
+import { Text } from "@/components/text"
 
 /**
  * Columns Native Component
@@ -17,7 +16,7 @@ import {Text} from "@/components/text";
  * @param gap {ColumnsGap} Gap between columns
  */
 
-export const ColumnsContext = createContext({scrollable: false})
+export const ColumnsContext = createContext({ scrollable: false })
 
 const Columns = ({
                    children,
@@ -36,7 +35,7 @@ const Columns = ({
 
   const onLayoutHandler = (event: LayoutChangeEvent) => {
     if (!width) {
-      const {width} = event.nativeEvent.layout
+      const { width } = event.nativeEvent.layout
       if (fullBleed) {
         setEnlarge((Dimensions.get('screen').width - width) / 2)
       }
@@ -86,15 +85,15 @@ const Columns = ({
           verticalCentered && styles.verticalAlign,
         ]}
               {...others}
-              {...{onLayout: onLayoutHandler}}
+              {...{ onLayout: onLayoutHandler }}
         >
           {// eslint-disable-next-line @typescript-eslint/no-explicit-any
             React.Children.map(children, (child: any) =>
 
                 child && React.cloneElement(child, {
                   style: [child.props.style,
-                    {width: nbCols && (width / nbCols) - realGap || child.props.size && (width * child.props.size / 12) - realGap || 'auto'},
-                    child.props.narrow && {flex: 'none', flexShrink: 1},
+                    { width: nbCols && (width / nbCols) - realGap || child.props.size && (width * child.props.size / 12) - realGap || 'auto' },
+                    child.props.narrow && { flex: 'none', flexShrink: 1 },
                   ]
                 })
             )}
@@ -106,15 +105,15 @@ const Columns = ({
   return <View style={{
     width: `100% + ${enlarge * 2}px`,
     marginHorizontal: -(enlarge)
-  }} {...{onLayout: onLayoutHandler}}>
+  }} {...{ onLayout: onLayoutHandler }}>
     <ScrollView horizontal contentContainerStyle={styles.scrollContainer}>
       {// eslint-disable-next-line @typescript-eslint/no-explicit-any
         React.Children.map(children, (child: any) =>
           React.cloneElement(child, {
             style: [child.props.style, {
               width: width / (12 / (child.props.size || child.props.mobileSize || 12)) - 2 * realGap,
               flexGrow: 0,
-            }, child.props.narrow && {flex: 'none', flexShrink: 1}],
+            }, child.props.narrow && { flex: 'none', flexShrink: 1 }],
           })
         )}
     </ScrollView>

diff --git a/packages/react/components/columns/Columns.tsx b/packages/react/components/columns/Columns.tsx
@@ -4,7 +4,7 @@ import { ColumnsProps } from "./ColumnsProps"
 import { is, has } from "@/services/classify"
 import { hashClass } from "@/helpers"
 import { useTrilogyContext } from "@/context"
-import {ColumnsGap} from "@/components/columns/ColumnsTypes";
+import { ColumnsGap } from "@/components/columns/ColumnsTypes"
 
 /**
  * Columns Component

diff --git a/packages/react/components/hero/Hero.example.tsx b/packages/react/components/hero/Hero.example.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Hero } from './index'
 import { Container } from '@/components/container'
-import { Title } from '@/components/title'
+import { Title, TitleLevels } from '@/components/title'
 import { Columns, ColumnsItem } from '@/components/columns'
 import { Section } from '@/components/section'
 import { Box, BoxContent } from '@/components/box'
@@ -12,7 +12,7 @@ const HeroExample: React.ReactNode = (
     <ColumnsItem>
       <Hero overlap className='has-pattern-dark'>
         <Container>
-          <Title inverted level='TWO' markup='h1'>
+          <Title inverted level={TitleLevels.TWO} markup='h1'>
             Internet garanti
           </Title>
           <Text className='is-inverted has-text-weight-bold' inverted>
@@ -25,7 +25,7 @@ const HeroExample: React.ReactNode = (
         <Container>
           <Box>
             <BoxContent>
-              <Title level='TWO'>Internet garanti</Title>
+              <Title level={TitleLevels.TWO}>Internet garanti</Title>
             </BoxContent>
           </Box>
         </Container>

diff --git a/packages/react/components/input/Input.native.tsx b/packages/react/components/input/Input.native.tsx
@@ -1,7 +1,7 @@
 import { ComponentName } from '@/components/enumsComponentsName'
 import { Icon, IconName, IconSize } from '@/components/icon'
 import { Text, TextLevels } from '@/components/text'
-import {grayscale, TypographyColor} from '@/objects'
+import { grayscale, TypographyColor } from '@/objects'
 import { Alignable } from '@/objects/facets/Alignable'
 import { TrilogyColor, getColorStyle } from '@/objects/facets/Color'
 import { StatusState } from '@/objects/facets/Status'

diff --git a/packages/react/components/modal/Modal.tsx b/packages/react/components/modal/Modal.tsx
@@ -40,7 +40,7 @@ const idTitle = shortid.generate()
  * @param panel {boolean} Panel Side Modal
  * @param accessibilityLabel {string} Accessibility label
  * @param testId {string} Test id
- * @param ctaCancelContent {string} content of button close 
+ * @param ctaCancelContent {string} content of button close
  * @param footer {React.ReactNode}
  * @param footerClassNames {string} Additionnal CSS Classes for footer
  * - -------------------------- NATIVE PROPERTIES -------------------------------

diff --git a/packages/react/components/otp/Otp.tsx b/packages/react/components/otp/Otp.tsx
@@ -7,8 +7,6 @@ import { hashClass } from "@/helpers/hashClassesHelpers"
 import { is } from "@/services/classify"
 import { useTrilogyContext } from "@/context/index"
 
-
-
 type NumberOrNull = number | null;
 
 const stringToCode = (str: string|undefined, codeSize: number): Array<NumberOrNull> => {