diff --git a/packages/react/components/tag/Tag.tsx b/packages/react/components/tag/Tag.tsx
index 93f8b5dd..8267261d 100644
--- a/packages/react/components/tag/Tag.tsx
+++ b/packages/react/components/tag/Tag.tsx
@@ -1,4 +1,3 @@
-import { useTrilogyContext } from '@/context'
import { hashClass } from '@/helpers'
import { getColorClassName, TrilogyColor, TrilogyColorValues } from '@/objects/facets/Color'
import { is } from '@/services/classify'
@@ -19,10 +18,7 @@ import { TagProps } from './TagProps'
* @param className {string} Additionnal CSS Classes
**/
const Tag = ({ label, className, id, variant, inverted, small, iconName, ...others }: TagProps): JSX.Element => {
- const { styled } = useTrilogyContext()
-
const tagClassNames = hashClass(
- styled,
clsx(
'tag',
variant && is(getColorClassName(variant as TrilogyColor | TrilogyColorValues)),
@@ -33,7 +29,6 @@ const Tag = ({ label, className, id, variant, inverted, small, iconName, ...othe
)
const tagIconClassNames = hashClass(
- styled,
clsx(variant && is(getColorClassName(variant as TrilogyColor | TrilogyColorValues))),
)
diff --git a/packages/react/components/tag/list/TagList.tsx b/packages/react/components/tag/list/TagList.tsx
index e3c1ce2a..0896f8f2 100644
--- a/packages/react/components/tag/list/TagList.tsx
+++ b/packages/react/components/tag/list/TagList.tsx
@@ -1,10 +1,9 @@
-import * as React from 'react'
-import clsx from 'clsx'
-import { TagListProps } from './TagListProps'
import { hashClass } from '@/helpers'
-import { useTrilogyContext } from '@/context'
-import { is } from '@/services'
import { getJustifiedClassName } from '@/objects'
+import { is } from '@/services'
+import clsx from 'clsx'
+import * as React from 'react'
+import { TagListProps } from './TagListProps'
/**
* Tag List Component
@@ -14,13 +13,10 @@ import { getJustifiedClassName } from '@/objects'
* @param className {string} Additionnal CSS Classes
*/
const TagList = ({ className, id, align, marginless, ...others }: TagListProps) => {
- const { styled } = useTrilogyContext()
-
return (
{
- const { styled } = useTrilogyContext()
-
const levelText = () => {
if (level) {
switch (level) {
@@ -55,7 +52,6 @@ const Text = ({
}
const classes = hashClass(
- styled,
clsx(
'text',
level && levelText(),
diff --git a/packages/react/components/textarea/Textarea.tsx b/packages/react/components/textarea/Textarea.tsx
index 3141ed74..d78fee37 100644
--- a/packages/react/components/textarea/Textarea.tsx
+++ b/packages/react/components/textarea/Textarea.tsx
@@ -1,13 +1,12 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
-import React, { useEffect, useState } from 'react'
-import clsx from 'clsx'
-import { Text, TextLevels, TextMarkup } from '@/components/text'
-import { TextareaProps } from './TextareaProps'
-import { has, is } from '@/services'
import { Icon } from '@/components/icon'
+import { Text, TextLevels, TextMarkup } from '@/components/text'
import { hashClass } from '@/helpers'
-import { useTrilogyContext } from '@/context'
import { TypographyColor } from '@/objects'
+import { has, is } from '@/services'
+import clsx from 'clsx'
+import React, { useEffect, useState } from 'react'
+import { TextareaProps } from './TextareaProps'
/**
* Textarea Component
@@ -55,20 +54,16 @@ const Textarea = ({
...others
}: TextareaProps): JSX.Element => {
const [value, setValue] = useState(defaultValue || '')
- const { styled } = useTrilogyContext()
useEffect(() => {
setValue(defaultValue || '')
}, [defaultValue])
- const wrapperClasses = hashClass(styled, clsx('textarea-wrapper', className, status && is(status)))
- const classes = hashClass(
- styled,
- clsx('textarea', dynamicPlaceholder && has('dynamic-label'), iconNameLeft && has('icon')),
- )
+ const wrapperClasses = hashClass(clsx('textarea-wrapper', className, status && is(status)))
+ const classes = hashClass(clsx('textarea', dynamicPlaceholder && has('dynamic-label'), iconNameLeft && has('icon')))
const helpClasses = clsx('help', status && is(status))
- const counterClasses = hashClass(styled, clsx('counter', maxLength))
+ const counterClasses = hashClass(clsx('counter', maxLength))
return (
@@ -112,11 +107,7 @@ const Textarea = ({
{dynamicPlaceholder &&
}
{iconNameLeft &&
}
{iconNameRight &&
}
- {help && (
-
- {help}
-
- )}
+ {help &&
{help}}
{maxLength &&
{`${value.length}/${maxLength?.toString()}`}
}
)
diff --git a/packages/react/components/timeline/Timeline.tsx b/packages/react/components/timeline/Timeline.tsx
index 1bf4e52d..bea67b8a 100644
--- a/packages/react/components/timeline/Timeline.tsx
+++ b/packages/react/components/timeline/Timeline.tsx
@@ -1,9 +1,8 @@
-import * as React from 'react'
-import { TimelineProps } from './TimelineProps'
import { hashClass } from '@/helpers'
-import clsx from 'clsx'
-import { useTrilogyContext } from '@/context'
import { is } from '@/services'
+import clsx from 'clsx'
+import * as React from 'react'
+import { TimelineProps } from './TimelineProps'
/**
* Timeline Component
@@ -13,8 +12,7 @@ import { is } from '@/services'
* @param className {string} Additionnal CSS Classes
*/
const Timeline = ({ className, id, horizontal, ...others }: TimelineProps) => {
- const { styled } = useTrilogyContext()
- const classes = hashClass(styled, clsx('timeline', horizontal && is('horizontal'), className))
+ const classes = hashClass(clsx('timeline', horizontal && is('horizontal'), className))
return
}
diff --git a/packages/react/components/timeline/content/TimelineContent.tsx b/packages/react/components/timeline/content/TimelineContent.tsx
index ba8f3c3b..1be31751 100644
--- a/packages/react/components/timeline/content/TimelineContent.tsx
+++ b/packages/react/components/timeline/content/TimelineContent.tsx
@@ -1,10 +1,9 @@
-import * as React from 'react'
-import clsx from 'clsx'
-import { TimelineContentWebProps } from './TimelineContentProps'
-import { Text, TextMarkup } from '@/components/text'
import { Link } from '@/components/link'
+import { Text, TextMarkup } from '@/components/text'
import { hashClass } from '@/helpers'
-import { useTrilogyContext } from '@/context'
+import clsx from 'clsx'
+import * as React from 'react'
+import { TimelineContentWebProps } from './TimelineContentProps'
/**
* Timeline Content Component
@@ -25,8 +24,7 @@ const TimelineContent = ({
linkTo,
...others
}: TimelineContentWebProps): JSX.Element => {
- const { styled } = useTrilogyContext()
- const classes = hashClass(styled, clsx('timeline-content', className))
+ const classes = hashClass(clsx('timeline-content', className))
if (children) {
return (
diff --git a/packages/react/components/timeline/item/TimelineItem.tsx b/packages/react/components/timeline/item/TimelineItem.tsx
index 1e9c1997..e1d5f057 100644
--- a/packages/react/components/timeline/item/TimelineItem.tsx
+++ b/packages/react/components/timeline/item/TimelineItem.tsx
@@ -1,8 +1,7 @@
-import * as React from 'react'
+import { hashClass } from '@/helpers'
import clsx from 'clsx'
+import * as React from 'react'
import { TimelineItemWebProps } from './TimelineItemProps'
-import { useTrilogyContext } from '@/context'
-import { hashClass } from '@/helpers'
/**
* Timeline Item Component
@@ -14,11 +13,7 @@ import { hashClass } from '@/helpers'
* @param className {string} Additionnal CSS Classes
*/
const TimelineItem = ({ className, id, done, active, cancel, ...others }: TimelineItemWebProps) => {
- const { styled } = useTrilogyContext()
- const classes = hashClass(
- styled,
- clsx('timeline-item', done && 'done', active && 'active', cancel && 'cancel', className),
- )
+ const classes = hashClass(clsx('timeline-item', done && 'done', active && 'active', cancel && 'cancel', className))
return
}
diff --git a/packages/react/components/timeline/marker/TimelineMarker.tsx b/packages/react/components/timeline/marker/TimelineMarker.tsx
index 7c73ce04..44ef75eb 100644
--- a/packages/react/components/timeline/marker/TimelineMarker.tsx
+++ b/packages/react/components/timeline/marker/TimelineMarker.tsx
@@ -1,10 +1,9 @@
-import * as React from 'react'
-import clsx from 'clsx'
-import { TimelineMarkerWebProps } from './TimelineMarkerProps'
-import { is } from '@/services/classify'
import { Icon, IconSize } from '@/components/icon'
-import { useTrilogyContext } from '@/context'
import { hashClass } from '@/helpers'
+import { is } from '@/services/classify'
+import clsx from 'clsx'
+import * as React from 'react'
+import { TimelineMarkerWebProps } from './TimelineMarkerProps'
/**
* Timeline Marker Component
@@ -15,15 +14,8 @@ import { hashClass } from '@/helpers'
* @param className {string} Additionnal CSS Classes
* @param iconClassname {string} Additionnal CSS Classes for icon
*/
-const TimelineMarker = ({
- className,
- id,
- iconClassname,
- iconName,
- ...others
-}: TimelineMarkerWebProps): JSX.Element => {
- const { styled } = useTrilogyContext()
- const classes = hashClass(styled, clsx('timeline-marker', is('icon'), className))
+const TimelineMarker = ({ className, id, iconClassname, iconName, ...others }: TimelineMarkerWebProps): JSX.Element => {
+ const classes = hashClass(clsx('timeline-marker', is('icon'), className))
const iconClasses = clsx(iconClassname)
return (
diff --git a/packages/react/components/title/Title.tsx b/packages/react/components/title/Title.tsx
index a90541b1..5ac489b2 100644
--- a/packages/react/components/title/Title.tsx
+++ b/packages/react/components/title/Title.tsx
@@ -1,10 +1,9 @@
-import React from 'react'
-import clsx from 'clsx'
-import { TitleProps } from './TitleProps'
+import { hashClass } from '@/helpers/hashClassesHelpers'
import { is } from '@/services'
+import clsx from 'clsx'
+import React from 'react'
import { TitleLevels, TitleLevelValues, TitleMarkup, TitleMarkupValues } from './TitleEnum'
-import { hashClass } from '@/helpers/hashClassesHelpers'
-import { useTrilogyContext } from '@/context/index'
+import { TitleProps } from './TitleProps'
const getTitleLevel = (level: TitleLevelValues | TitleLevels) => {
if (level) {
@@ -73,10 +72,7 @@ const Title = ({
marginless,
...others
}: TitleProps): JSX.Element => {
- const { styled } = useTrilogyContext()
-
const classes = hashClass(
- styled,
clsx(
'title',
level && getTitleLevel(level),
@@ -88,8 +84,8 @@ const Title = ({
),
)
- const subtitleClasses = hashClass(styled, clsx('subtitle', typo, className))
- const overlineClasses = hashClass(styled, clsx('overline', typo, className))
+ const subtitleClasses = hashClass(clsx('subtitle', typo, className))
+ const overlineClasses = hashClass(clsx('overline', typo, className))
const Tag = markup && isCorrectMarkup(markup) ? markup : 'p'
diff --git a/packages/react/components/view/View.tsx b/packages/react/components/view/View.tsx
index 38475db1..eb474116 100644
--- a/packages/react/components/view/View.tsx
+++ b/packages/react/components/view/View.tsx
@@ -1,14 +1,9 @@
-import * as React from "react"
-import { ViewMarkup, ViewMarkupValues, ViewProps } from "./ViewProps"
-import clsx from "clsx"
-import { has, is } from "@/services"
-import {
- getLoadingClassName,
- getJustifyClassName,
- getAlignClassName, getBackgroundClassName,
-} from "@/objects"
-import { hashClass } from "@/helpers"
-import { useTrilogyContext } from "@/context"
+import { hashClass } from '@/helpers'
+import { getAlignClassName, getBackgroundClassName, getJustifyClassName, getLoadingClassName } from '@/objects'
+import { has, is } from '@/services'
+import clsx from 'clsx'
+import * as React from 'react'
+import { ViewMarkup, ViewMarkupValues, ViewProps } from './ViewProps'
/**
* View Component (DIV EQUIVALENT)
@@ -46,32 +41,25 @@ const View = ({
align,
...others
}: ViewProps): JSX.Element => {
- const { styled } = useTrilogyContext()
-
const isCorrectMarkup = (stringMarkup: ViewMarkup | ViewMarkupValues) => {
- if (
- stringMarkup in ViewMarkup ||
- Object.values(ViewMarkup).includes(stringMarkup as ViewMarkup)
- )
- return true
+ if (stringMarkup in ViewMarkup || Object.values(ViewMarkup).includes(stringMarkup as ViewMarkup)) return true
}
- const Tag = markup && isCorrectMarkup(markup) ? markup : "div"
+ const Tag = markup && isCorrectMarkup(markup) ? markup : 'div'
const classes = hashClass(
- styled,
clsx(
- typeof loading === "string" && is(getLoadingClassName(loading)),
- typeof loading === "boolean" ? is("loading") : is("loaded"),
+ typeof loading === 'string' && is(getLoadingClassName(loading)),
+ typeof loading === 'boolean' ? is('loading') : is('loaded'),
backgroundColor && has(getBackgroundClassName(backgroundColor)),
backgroundSrc && has('background'),
- inverted && is('inverted') || is('base'),
- fullwidth && is("fullwidth"),
- flexable && is("flex"),
- typeof justify === "string" && is(getJustifyClassName(justify)),
- typeof align === "string" && is(getAlignClassName(align)),
- className
- )
+ (inverted && is('inverted')) || is('base'),
+ fullwidth && is('fullwidth'),
+ flexable && is('flex'),
+ typeof justify === 'string' && is(getJustifyClassName(justify)),
+ typeof align === 'string' && is(getAlignClassName(align)),
+ className,
+ ),
)
return (
@@ -82,8 +70,8 @@ const View = ({
{...(backgroundSrc && {
style: {
backgroundImage: `url(${backgroundSrc})`,
- backgroundSize: "cover",
- backgroundPosition: "50%",
+ backgroundSize: 'cover',
+ backgroundPosition: '50%',
},
})}
{...others}
diff --git a/packages/react/context/index.tsx b/packages/react/context/index.tsx
index 14882b88..07c12bea 100644
--- a/packages/react/context/index.tsx
+++ b/packages/react/context/index.tsx
@@ -1,4 +1,6 @@
-import * as React from 'react'
+'use client'
+
+import React from 'react'
interface ITrilogyContext {
styled: boolean
diff --git a/packages/react/context/providerStates.tsx b/packages/react/context/providerStates.tsx
index ba9d3826..eaf40cca 100644
--- a/packages/react/context/providerStates.tsx
+++ b/packages/react/context/providerStates.tsx
@@ -1,4 +1,6 @@
-import { createContext } from "react"
+'use client'
+
+import { createContext } from 'react'
export const StatesContext = createContext({
inverted: false,
diff --git a/packages/react/context/providerTheme.tsx b/packages/react/context/providerTheme.tsx
index 9faeaef3..443c86a7 100644
--- a/packages/react/context/providerTheme.tsx
+++ b/packages/react/context/providerTheme.tsx
@@ -1,3 +1,5 @@
+'use client'
+
import React, { Dispatch, ReactNode, SetStateAction } from 'react'
import { ITrilogyTheme } from './interfaces'
diff --git a/packages/react/helpers/hashClassesHelpers.tsx b/packages/react/helpers/hashClassesHelpers.tsx
index 0f052a27..9728e8cb 100644
--- a/packages/react/helpers/hashClassesHelpers.tsx
+++ b/packages/react/helpers/hashClassesHelpers.tsx
@@ -1,19 +1,22 @@
-import { useTrilogyContext } from '@/context'
+import React from 'react'
+
+import { TrilogyContext } from '@/context'
/**
- * Used to hash classes if styled components
- * @param styled Apply only if styled props
* @param classes String classes
*/
-export const hashClass = (styled = false, classes: string): string => {
- const { hash } = useTrilogyContext()
-
- if (classes.trim().length < 1) return ''
- if (styled) {
+export const hashClass = (classes: string): string => {
+ try {
+ const { hash, styled } = React.useContext(TrilogyContext)
+ if (classes.trim().length < 1) return ''
+ if (styled) {
+ return classes
+ .split(' ')
+ .map((classe: string) => (classe = `${classe}__${hash}`))
+ .join(' ')
+ }
+ return classes
+ } catch {
return classes
- .split(' ')
- .map((classe: string) => (classe = `${classe}__${hash}`))
- .join(' ')
}
- return classes
}