From 3ba0fde63a143b4141e0d80b1f9014f987605e50 Mon Sep 17 00:00:00 2001 From: erwan Date: Tue, 17 Dec 2024 17:13:27 +0100 Subject: [PATCH 1/3] init server component Update hashClass : delete styled props Clean components with new hashClass --- .../react/components/accordion/Accordion.tsx | 8 ++- .../accordion/item/AccordionItem.tsx | 8 ++- .../accordion/item/body/AccordionBody.tsx | 9 ++-- .../accordion/item/header/AccordionHeader.tsx | 9 ++-- packages/react/components/alert/Alert.tsx | 27 ++++------ .../components/autocomplete/AutoComplete.tsx | 7 +-- .../autocomplete/item/AutoCompleteItem.tsx | 8 ++- .../autocomplete/menu/AutoCompleteMenu.tsx | 17 +++--- packages/react/components/badge/Badge.tsx | 14 ++--- packages/react/components/box/Box.tsx | 13 ++--- .../components/box/content/BoxContent.tsx | 12 ++--- .../react/components/box/footer/BoxFooter.tsx | 10 ++-- .../react/components/box/header/BoxHeader.tsx | 11 ++-- .../react/components/box/item/BoxItem.tsx | 9 ++-- .../box/table-container/BoxTableContainer.tsx | 25 +++------ .../components/breadcrumb/Breadcrumb.tsx | 11 ++-- .../breadcrumb/item/BreadcrumbItem.tsx | 15 +++--- packages/react/components/button/Button.tsx | 4 +- .../components/button/list/ButtonList.tsx | 12 ++--- packages/react/components/card/Card.tsx | 45 ++++++---------- .../components/card/content/CardContent.tsx | 8 ++- .../react/components/card/image/CardImage.tsx | 12 ++--- .../react/components/checkbox/Checkbox.tsx | 11 ++-- .../checkbox/tiles/CheckboxTiles.tsx | 13 ++--- .../checkbox/tiles/tile/CheckboxTile.tsx | 25 ++++----- packages/react/components/chips/Chips.tsx | 32 +++-------- .../react/components/chips/list/ChipsList.tsx | 16 ++---- packages/react/components/columns/Columns.tsx | 36 ++++++------- .../components/columns/column/Column.tsx | 53 +++++++++---------- .../react/components/container/Container.tsx | 4 +- .../react/components/countdown/Countdown.tsx | 28 +++++----- packages/react/components/divider/Divider.tsx | 14 ++--- packages/react/components/fab/Fab.tsx | 12 ++--- packages/react/components/hero/Hero.tsx | 6 +-- packages/react/components/icon/Icon.tsx | 38 ++++++------- packages/react/components/image/Image.tsx | 14 +++-- packages/react/components/input/Input.tsx | 32 ++++------- .../components/input/gauge/InputGauge.tsx | 22 +++----- packages/react/components/link/Link.tsx | 43 +++++++-------- packages/react/components/list/List.tsx | 10 ++-- .../react/components/list/item/ListItem.tsx | 12 ++--- .../item/description/ListItemDescription.tsx | 18 +++---- packages/react/components/modal/Modal.tsx | 13 +++-- .../react/components/modal/body/ModalBody.tsx | 8 ++- .../components/modal/footer/ModalFooter.tsx | 4 +- packages/react/components/otp/Otp.tsx | 8 ++- .../components/pagination/Pagination.tsx | 21 ++++---- packages/react/components/popover/Popover.tsx | 30 +++++------ packages/react/components/price/Price.tsx | 31 +++++------ .../components/product-tour/ProductTour.tsx | 21 +++----- .../react/components/progress/Progress.tsx | 45 ++++++++-------- .../progress/radial/ProgressRadial.tsx | 22 ++++---- .../radial/item/ProgressRadialtem.tsx | 8 ++- packages/react/components/radio/Radio.tsx | 7 +-- .../react/components/radio/list/RadioList.tsx | 12 ++--- .../components/radio/tiles/RadioTiles.tsx | 7 +-- .../components/radio/tiles/tile/RadioTile.tsx | 15 +++--- packages/react/components/range/Range.tsx | 33 ++++++------ packages/react/components/rows/Rows.tsx | 10 ++-- packages/react/components/rows/row/Row.tsx | 10 ++-- .../components/scroll-view/ScrollView.tsx | 30 +++++------ packages/react/components/section/Section.tsx | 12 ++--- .../segment-control/SegmentControl.tsx | 11 ++-- .../item/SegmentControlItem.tsx | 8 ++- .../components/select/option/SelectOption.tsx | 44 +++++++-------- .../components/select/web/SelectDynamic.tsx | 16 +++--- .../components/select/web/SelectNative.tsx | 13 ++--- packages/react/components/spacer/Spacer.tsx | 8 ++- packages/react/components/stepper/Stepper.tsx | 12 ++--- .../react/components/stepper/step/Step.tsx | 15 +++--- packages/react/components/sticker/Sticker.tsx | 12 ++--- packages/react/components/switch/Switch.tsx | 16 +++--- packages/react/components/table/Table.tsx | 10 ++-- .../react/components/table/body/TableBody.tsx | 11 ++-- .../react/components/table/head/TableHead.tsx | 11 ++-- .../react/components/table/td/TableTd.tsx | 9 ++-- .../react/components/table/th/TableTh.tsx | 9 ++-- .../react/components/table/tr/TableTr.tsx | 36 +++++-------- packages/react/components/tabs/Tabs.tsx | 4 +- .../components/tabs/tab-list/TabList.tsx | 4 +- .../components/tabs/tab-list/tab/Tab.tsx | 4 +- .../components/tabs/tab-panels/TabPanels.tsx | 4 +- .../tabs/tab-panels/tab-panel/TabPanel.tsx | 4 +- packages/react/components/tag/Tag.tsx | 5 -- .../react/components/tag/list/TagList.tsx | 12 ++--- packages/react/components/text/Text.tsx | 12 ++--- .../react/components/textarea/Textarea.tsx | 27 ++++------ .../react/components/timeline/Timeline.tsx | 10 ++-- .../timeline/content/TimelineContent.tsx | 12 ++--- .../components/timeline/item/TimelineItem.tsx | 11 ++-- .../timeline/marker/TimelineMarker.tsx | 20 +++---- packages/react/components/title/Title.tsx | 16 +++--- packages/react/components/view/View.tsx | 50 +++++++---------- packages/react/helpers/hashClassesHelpers.tsx | 27 +++++----- 94 files changed, 596 insertions(+), 947 deletions(-) diff --git a/packages/react/components/accordion/Accordion.tsx b/packages/react/components/accordion/Accordion.tsx index 87f729b1..7b0ab68f 100644 --- a/packages/react/components/accordion/Accordion.tsx +++ b/packages/react/components/accordion/Accordion.tsx @@ -1,8 +1,7 @@ +import { hashClass } from '@/helpers/hashClassesHelpers' +import clsx from 'clsx' import * as React from 'react' import { AccordionProps } from './AccordionProps' -import clsx from 'clsx' -import { useTrilogyContext } from '@/context/index' -import { hashClass } from '@/helpers/hashClassesHelpers' /** * Accordion Component @@ -12,8 +11,7 @@ import { hashClass } from '@/helpers/hashClassesHelpers' * @param others */ const Accordion = ({ id, className, children, ...others }: AccordionProps) => { - const { styled } = useTrilogyContext() - const classes = hashClass(styled, clsx('accordion', className)) + const classes = hashClass(clsx('accordion', className)) return (
{children} diff --git a/packages/react/components/accordion/item/AccordionItem.tsx b/packages/react/components/accordion/item/AccordionItem.tsx index 1dd2f188..77324d4d 100644 --- a/packages/react/components/accordion/item/AccordionItem.tsx +++ b/packages/react/components/accordion/item/AccordionItem.tsx @@ -1,9 +1,8 @@ +import { hashClass } from '@/helpers' +import clsx from 'clsx' import React, { useRef } from 'react' import shortid from 'shortid' import { AccordionItemProps, OnClickEvent } from './AccordionItemProps' -import clsx from 'clsx' -import { hashClass } from '@/helpers' -import { useTrilogyContext } from '@/context' /** * Accordion Item Component @@ -24,9 +23,8 @@ const AccordionItem = ({ ...others }: AccordionItemProps): JSX.Element => { const ref = useRef(null) - const { styled } = useTrilogyContext() - const classes = hashClass(styled, clsx('accordion-item', className)) + const classes = hashClass(clsx('accordion-item', className)) const ariaProps: { 'aria-disabled'?: boolean; tabIndex?: number } = {} diff --git a/packages/react/components/accordion/item/body/AccordionBody.tsx b/packages/react/components/accordion/item/body/AccordionBody.tsx index ce984ceb..3ddf384e 100644 --- a/packages/react/components/accordion/item/body/AccordionBody.tsx +++ b/packages/react/components/accordion/item/body/AccordionBody.tsx @@ -1,8 +1,7 @@ +import { hashClass } from '@/helpers' +import clsx from 'clsx' import * as React from 'react' import { AccordionBodyProps } from './AccordionBodyProps' -import clsx from 'clsx' -import { hashClass } from '@/helpers' -import { useTrilogyContext } from '@/context' /** * Accordion Body Component @@ -12,10 +11,8 @@ import { useTrilogyContext } from '@/context' * @param dataId {string} data attribute */ const AccordionBody = ({ children, className, id, ...others }: AccordionBodyProps): React.JSX.Element => { - const { styled } = useTrilogyContext() - return ( -
+
{children}
) diff --git a/packages/react/components/accordion/item/header/AccordionHeader.tsx b/packages/react/components/accordion/item/header/AccordionHeader.tsx index 36897285..d5071450 100644 --- a/packages/react/components/accordion/item/header/AccordionHeader.tsx +++ b/packages/react/components/accordion/item/header/AccordionHeader.tsx @@ -1,8 +1,7 @@ +import { hashClass } from '@/helpers' +import clsx from 'clsx' import * as React from 'react' import { AccordionHeaderProps } from './AccordionHeaderProps' -import clsx from 'clsx' -import { hashClass } from '@/helpers' -import { useTrilogyContext } from '@/context' /** * Accordion Header @@ -12,10 +11,8 @@ import { useTrilogyContext } from '@/context' * @param others */ const AccordionHeader = ({ children, className, id, ...others }: AccordionHeaderProps): React.JSX.Element => { - const { styled } = useTrilogyContext() - return ( - + {children} ) diff --git a/packages/react/components/alert/Alert.tsx b/packages/react/components/alert/Alert.tsx index 020ca2c4..d73c0ed8 100644 --- a/packages/react/components/alert/Alert.tsx +++ b/packages/react/components/alert/Alert.tsx @@ -1,14 +1,13 @@ -import clsx from 'clsx' -import * as React from 'react' -import { CSSProperties, useEffect, useRef, useState } from 'react' -import { getStatusClassName, getStatusIconName } from '@/objects/facets/Status' -import { has, is } from '@/services/classify' import { Icon, IconName, IconSize } from '@/components/icon' import { Text, TextLevels } from '@/components/text' import { Title, TitleLevels } from '@/components/title' -import { AlertProps, ToasterAlertPosition, ToasterStatusProps } from './AlertProps' import { hashClass } from '@/helpers' -import { useTrilogyContext } from '@/context' +import { getStatusClassName, getStatusIconName } from '@/objects/facets/Status' +import { has, is } from '@/services/classify' +import clsx from 'clsx' +import * as React from 'react' +import { CSSProperties, useEffect, useRef, useState } from 'react' +import { AlertProps, ToasterAlertPosition, ToasterStatusProps } from './AlertProps' import ToasterContext from './context' /** @@ -16,8 +15,6 @@ import ToasterContext from './context' * @param children {React.ReactNode} Custom Toast Content */ const ToasterAlert: React.FC<{ props: ToasterStatusProps }> = ({ props, ...others }) => { - const { styled } = useTrilogyContext() - const { title, position, description, iconName, status, closable, onClick, className, id, offset, children } = props const displayed = Boolean(title) @@ -31,10 +28,7 @@ const ToasterAlert: React.FC<{ props: ToasterStatusProps }> = ({ props, ...other position: 'fixed', } - const classes = hashClass( - styled, - clsx('toaster', status && is(getStatusClassName(status)), !alert && is('info'), className), - ) + const classes = hashClass(clsx('toaster', status && is(getStatusClassName(status)), !alert && is('info'), className)) if (!displayed) { return null @@ -78,7 +72,7 @@ const ToasterAlert: React.FC<{ props: ToasterStatusProps }> = ({ props, ...other {...others} > {iconName && } -
+
{title && {title}} {description && {description}}
@@ -111,10 +105,7 @@ const Alert = ({ display = true, ...others }: AlertProps): JSX.Element => { - const { styled } = useTrilogyContext() - const classes = hashClass( - styled, clsx('alert', has('body'), status && is(getStatusClassName(status)), banner && is('banner'), className), ) @@ -137,7 +128,7 @@ const Alert = ({ {...others} > -
+
{title && typeof title.valueOf() === 'string' ? {title} : title} {description && typeof description.valueOf() === 'string' ? ( {description} diff --git a/packages/react/components/autocomplete/AutoComplete.tsx b/packages/react/components/autocomplete/AutoComplete.tsx index 37df7a32..0fbaf785 100644 --- a/packages/react/components/autocomplete/AutoComplete.tsx +++ b/packages/react/components/autocomplete/AutoComplete.tsx @@ -4,7 +4,6 @@ import React, { FocusEvent, useEffect, useState } from 'react' import { Input } from '@/components/input' import { InputAutoCompleteType } from '@/components/input/InputEnum' import { InputChangeEventWeb, InputKeyboardEvent } from '@/components/input/InputProps' -import { useTrilogyContext } from '@/context' import { hashClass } from '@/helpers' import { is } from '@/services' import type { View } from 'react-native' @@ -45,15 +44,13 @@ const AutoCompleteRef = = string>( }: AutoCompletePropsWeb, ref: React.Ref, ): JSX.Element => { - const { styled } = useTrilogyContext() - const [itemSelected, setItemSelected] = useState(null) const [_inputValue, setInputValue] = useState(value ?? '') const [activeItem, setActiveItem] = useState(0) const [isAutocompleteMenuVisible, setIsAutocompleteMenuVisible] = useState(displayMenu || false) const [search, setSearch] = useState([]) - const autocompleteClasses = hashClass(styled, clsx(is('autocomplete'), is('active'))) + const autocompleteClasses = hashClass(clsx(is('autocomplete'), is('active'))) useEffect(() => { setInputValue(value || '') @@ -148,7 +145,7 @@ const AutoCompleteRef = = string>( } return ( -
+
>({ active, id, }: AutoCompleteItemProps): JSX.Element => { - const { styled } = useTrilogyContext() const [isActive, setIsActive] = React.useState(false) return ( @@ -31,7 +29,7 @@ const AutoCompleteItem = >({ onMouseOut={() => setIsActive(false)} role='listitem' data-testid={testId} - className={hashClass(styled, clsx('autocomplete-item', active && is('active'), isActive && is('active')))} + className={hashClass(clsx('autocomplete-item', active && is('active'), isActive && is('active')))} onClick={() => (suggestionSelected ? suggestionSelected(item) : '')} > {children} diff --git a/packages/react/components/autocomplete/menu/AutoCompleteMenu.tsx b/packages/react/components/autocomplete/menu/AutoCompleteMenu.tsx index b7479596..d27e3c75 100644 --- a/packages/react/components/autocomplete/menu/AutoCompleteMenu.tsx +++ b/packages/react/components/autocomplete/menu/AutoCompleteMenu.tsx @@ -1,8 +1,7 @@ -import clsx from 'clsx' -import * as React from 'react' -import { useTrilogyContext } from '@/context' import { hashClass } from '@/helpers' import { is } from '@/services' +import clsx from 'clsx' +import * as React from 'react' import { AutoCompleteMenuProps } from './AutoCompleteMenuProps' /** @@ -13,16 +12,20 @@ import { AutoCompleteMenuProps } from './AutoCompleteMenuProps' * @param absolute {boolean} Absolute position for Menu * @param fullwidth {boolean} Fullwidth size for Menu */ -const AutoCompleteMenu = ({ children, className, id, absolute, fullwidth, testId }: AutoCompleteMenuProps): JSX.Element => { - const { styled } = useTrilogyContext() - +const AutoCompleteMenu = ({ + children, + className, + id, + absolute, + fullwidth, + testId, +}: AutoCompleteMenuProps): JSX.Element => { return (
diff --git a/packages/react/components/badge/Badge.tsx b/packages/react/components/badge/Badge.tsx index 1921cb59..e3275a85 100644 --- a/packages/react/components/badge/Badge.tsx +++ b/packages/react/components/badge/Badge.tsx @@ -1,11 +1,10 @@ -import * as React from 'react' -import { BadgeProps } from './BadgeProps' -import clsx from 'clsx' +import { Icon, IconColor, IconName } from '@/components/icon' import { hashClass } from '@/helpers' -import { useTrilogyContext } from '@/context' -import { has, is } from '@/services' import { getStatusClassName, getVariantClassName, StatusState, TrilogyColor } from '@/objects' -import { Icon, IconColor, IconName } from '@/components/icon' +import { has, is } from '@/services' +import clsx from 'clsx' +import * as React from 'react' +import { BadgeProps } from './BadgeProps' /** * Badge Component @@ -32,10 +31,7 @@ const Badge = ({ status, ...others }: BadgeProps): JSX.Element => { - const { styled } = useTrilogyContext() - const classes = hashClass( - styled, clsx( 'badge', inverted && is('inverted'), diff --git a/packages/react/components/box/Box.tsx b/packages/react/components/box/Box.tsx index 6f7c66bb..799d5e2c 100644 --- a/packages/react/components/box/Box.tsx +++ b/packages/react/components/box/Box.tsx @@ -1,11 +1,10 @@ -import React from 'react' -import { BoxProps } from './BoxProps' -import { has, is } from '@/services/classify' -import { getBackgroundClassName } from '@/objects/atoms/Background' +import { hashClass } from '@/helpers' import { getColorClassName } from '@/objects' +import { getBackgroundClassName } from '@/objects/atoms/Background' +import { has, is } from '@/services/classify' import clsx from 'clsx' -import { hashClass } from '@/helpers' -import { useTrilogyContext } from '@/context' +import React from 'react' +import { BoxProps } from './BoxProps' /** * Box Component @@ -43,9 +42,7 @@ const Box = ({ active, ...others }: BoxProps): JSX.Element => { - const { styled } = useTrilogyContext() const classes = hashClass( - styled, clsx( 'box', shadowless && is('shadowless'), diff --git a/packages/react/components/box/content/BoxContent.tsx b/packages/react/components/box/content/BoxContent.tsx index 360d7f04..a6a4108b 100644 --- a/packages/react/components/box/content/BoxContent.tsx +++ b/packages/react/components/box/content/BoxContent.tsx @@ -1,10 +1,9 @@ -import * as React from 'react' -import { BoxContentProps } from './BoxContentProps' -import { has } from '@/services/classify' +import { hashClass } from '@/helpers' import { getBackgroundClassName } from '@/objects/atoms/Background' +import { has } from '@/services/classify' import clsx from 'clsx' -import { hashClass } from '@/helpers' -import { useTrilogyContext } from '@/context' +import * as React from 'react' +import { BoxContentProps } from './BoxContentProps' /** * Box Content @@ -15,10 +14,7 @@ import { useTrilogyContext } from '@/context' * @param testId test id */ const BoxContent = ({ children, className, id, backgroundColor, ...others }: BoxContentProps): JSX.Element => { - const { styled } = useTrilogyContext() - const classes = hashClass( - styled, clsx('box-content', backgroundColor && has(getBackgroundClassName(backgroundColor)), className), ) return ( diff --git a/packages/react/components/box/footer/BoxFooter.tsx b/packages/react/components/box/footer/BoxFooter.tsx index 822f12e9..77129567 100644 --- a/packages/react/components/box/footer/BoxFooter.tsx +++ b/packages/react/components/box/footer/BoxFooter.tsx @@ -1,10 +1,9 @@ -import * as React from 'react' -import { BoxFooterProps } from './BoxFooterProps' +import { hashClass } from '@/helpers' import { getBackgroundClassName } from '@/objects' import { has } from '@/services/classify' import clsx from 'clsx' -import { hashClass } from '@/helpers' -import { useTrilogyContext } from '@/context' +import * as React from 'react' +import { BoxFooterProps } from './BoxFooterProps' /** * Box Footer Component @@ -16,13 +15,10 @@ import { useTrilogyContext } from '@/context' * @param others */ const BoxFooter = ({ className, children, backgroundColor, id, ...others }: BoxFooterProps): JSX.Element => { - const { styled } = useTrilogyContext() - return (
{ - const { styled } = useTrilogyContext() let alignClass = null if (align) { alignClass = @@ -27,7 +25,6 @@ const BoxHeader = ({ children, className, id, align, variant, ...others }: BoxHe null } const classes = hashClass( - styled, clsx('box-header', className, variant && has(getBackgroundClassName(variant)), align && alignClass), ) diff --git a/packages/react/components/box/item/BoxItem.tsx b/packages/react/components/box/item/BoxItem.tsx index e5d2273c..8be1b907 100644 --- a/packages/react/components/box/item/BoxItem.tsx +++ b/packages/react/components/box/item/BoxItem.tsx @@ -1,8 +1,7 @@ +import { hashClass } from '@/helpers' +import clsx from 'clsx' import * as React from 'react' import { BoxItemProps } from './BoxItemProps' -import clsx from 'clsx' -import { hashClass } from '@/helpers' -import { useTrilogyContext } from '@/context' /** * Box Item Component @@ -12,10 +11,8 @@ import { useTrilogyContext } from '@/context' * @param className {string} Additionnal CSS Classes */ const BoxItem = ({ className, id, children, ...others }: BoxItemProps): JSX.Element => { - const { styled } = useTrilogyContext() - return ( -
+
{children}
) diff --git a/packages/react/components/box/table-container/BoxTableContainer.tsx b/packages/react/components/box/table-container/BoxTableContainer.tsx index 7a498202..c32e58b6 100644 --- a/packages/react/components/box/table-container/BoxTableContainer.tsx +++ b/packages/react/components/box/table-container/BoxTableContainer.tsx @@ -1,8 +1,7 @@ -import * as React from "react" -import { BoxTableContainerProps } from "./BoxTableContainerProps" -import clsx from "clsx" -import { hashClass } from "@/helpers" -import { useTrilogyContext } from "@/context" +import { hashClass } from '@/helpers' +import clsx from 'clsx' +import * as React from 'react' +import { BoxTableContainerProps } from './BoxTableContainerProps' /** * Box Table Component @@ -11,20 +10,8 @@ import { useTrilogyContext } from "@/context" * @param className {string} Additionnal CSS Classes * @param testId {string} Test Id for Test Integration */ -const BoxTableContainer = ({ - className, - testId, - ...others -}: BoxTableContainerProps): JSX.Element => { - const { styled } = useTrilogyContext() - - return ( -
- ) +const BoxTableContainer = ({ className, testId, ...others }: BoxTableContainerProps): JSX.Element => { + return
} export default BoxTableContainer diff --git a/packages/react/components/breadcrumb/Breadcrumb.tsx b/packages/react/components/breadcrumb/Breadcrumb.tsx index 6bc816c4..8554fa7b 100644 --- a/packages/react/components/breadcrumb/Breadcrumb.tsx +++ b/packages/react/components/breadcrumb/Breadcrumb.tsx @@ -1,8 +1,7 @@ +import { hashClass } from '@/helpers' +import clsx from 'clsx' import * as React from 'react' import { BreadcrumbWebProps } from './BreadcrumbProps' -import clsx from 'clsx' -import { hashClass } from '@/helpers' -import { useTrilogyContext } from '@/context' /** * Breadcrumb Component @@ -13,13 +12,11 @@ import { useTrilogyContext } from '@/context' * @param accessibilityLabel {string} Accessibility label */ const Breadcrumb = ({ children, className, id, accessibilityLabel, ...others }: BreadcrumbWebProps) => { - const { styled } = useTrilogyContext() - return (