Skip to content

Commit ba54036

Browse files
SutuSebastianSutuSebastian
committed
apply all args to resolveTheme #1 
1 parent b03938f commit ba54036

File tree

89 files changed

+702
-190
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

89 files changed

+702
-190
lines changed

‎packages/ui/src/components/Accordion/Accordion.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ const AccordionComponent: FC<AccordionProps> = ({
4545
className,
4646
theme: customTheme,
4747
resetTheme,
48+
applyTheme,
4849
...props
4950
}) => {
5051
const [isOpen, setOpen] = useState(collapseAll ? -1 : 0);
@@ -67,6 +68,7 @@ const AccordionComponent: FC<AccordionProps> = ({
6768
const theme = resolveTheme(
6869
[accordionTheme.root, provider.theme?.accordion?.root, customTheme],
6970
[get(provider.resetTheme, "accordion.root"), get(resetTheme, "root")],
71+
[get(provider.applyTheme, "accordion.root"), get(applyTheme, "root")],
7072
);
7173

7274
return (

‎packages/ui/src/components/Accordion/AccordionContent.tsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,17 @@ export const AccordionContent: FC<AccordionContentProps> = ({
1919
className,
2020
theme: customTheme,
2121
resetTheme,
22+
applyTheme,
2223
...props
2324
}) => {
2425
const { isOpen } = useAccordionContext();
2526

2627
const provider = useThemeProvider();
27-
const theme = resolveTheme([accordionTheme.content, provider.theme?.accordion?.content, customTheme], [resetTheme]);
28+
const theme = resolveTheme(
29+
[accordionTheme.content, provider.theme?.accordion?.content, customTheme],
30+
[get(provider.resetTheme, "carousel"), resetTheme],
31+
[get(provider.applyTheme, "carousel"), applyTheme],
32+
);
2833

2934
return (
3035
<div

‎packages/ui/src/components/Accordion/AccordionTitle.tsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -31,13 +31,18 @@ export const AccordionTitle: FC<AccordionTitleProps> = ({
3131
className,
3232
theme: customTheme,
3333
resetTheme,
34+
applyTheme,
3435
...props
3536
}) => {
3637
const { arrowIcon: ArrowIcon, flush, isOpen, setOpen } = useAccordionContext();
3738
const onClick = () => typeof setOpen !== "undefined" && setOpen();
3839

3940
const provider = useThemeProvider();
40-
const theme = resolveTheme([accordionTheme.title, provider.theme?.accordion?.title, customTheme], [resetTheme]);
41+
const theme = resolveTheme(
42+
[accordionTheme.title, provider.theme?.accordion?.title, customTheme],
43+
[get(provider.resetTheme, "carousel"), resetTheme],
44+
[get(provider.applyTheme, "carousel"), applyTheme],
45+
);
4146

4247
return (
4348
<button

‎packages/ui/src/components/Alert/Alert.tsx

+8-2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
import type { ComponentProps, FC, ReactNode } from "react";
44
import { HiX } from "react-icons/hi";
5+
import { get } from "../../helpers/get";
56
import { resolveTheme } from "../../helpers/resolve-theme";
67
import { twMerge } from "../../helpers/tailwind-merge";
78
import { useThemeProvider } from "../../theme/provider";
@@ -42,13 +43,18 @@ export const Alert: FC<AlertProps> = ({
4243
icon: Icon,
4344
onDismiss,
4445
rounded = true,
46+
withBorderAccent,
4547
theme: customTheme,
4648
resetTheme,
47-
withBorderAccent,
49+
applyTheme,
4850
...props
4951
}) => {
5052
const provider = useThemeProvider();
51-
const theme = resolveTheme([alertTheme, provider.theme?.alert, customTheme], [resetTheme]);
53+
const theme = resolveTheme(
54+
[alertTheme, provider.theme?.alert, customTheme],
55+
[get(provider.resetTheme, "alert"), resetTheme],
56+
[get(provider.applyTheme, "alert"), applyTheme],
57+
);
5258

5359
return (
5460
<div

‎packages/ui/src/components/Avatar/Avatar.tsx

+7-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
"use client";
22

33
import type { ComponentProps, FC, ReactElement } from "react";
4+
import { get } from "../../helpers/get";
45
import { resolveTheme } from "../../helpers/resolve-theme";
56
import { twMerge } from "../../helpers/tailwind-merge";
67
import { useThemeProvider } from "../../theme/provider";
@@ -92,10 +93,15 @@ const AvatarComponent: FC<AvatarProps> = ({
9293
statusPosition = "top-left",
9394
theme: customTheme,
9495
resetTheme,
96+
applyTheme,
9597
...props
9698
}) => {
9799
const provider = useThemeProvider();
98-
const theme = resolveTheme([avatarTheme, provider.theme?.avatar, customTheme], [resetTheme]);
100+
const theme = resolveTheme(
101+
[avatarTheme, provider.theme?.avatar, customTheme],
102+
[get(provider.resetTheme, "avatar"), resetTheme],
103+
[get(provider.applyTheme, "avatar"), applyTheme],
104+
);
99105

100106
const imgClassName = twMerge(
101107
theme.root.img.base,

‎packages/ui/src/components/Avatar/AvatarGroup.tsx

+7-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
"use client";
22

33
import type { ComponentProps } from "react";
4+
import { get } from "../../helpers/get";
45
import { resolveTheme } from "../../helpers/resolve-theme";
56
import { twMerge } from "../../helpers/tailwind-merge";
67
import { useThemeProvider } from "../../theme/provider";
@@ -18,10 +19,15 @@ export const AvatarGroup: React.FC<AvatarGroupProps> = ({
1819
className,
1920
theme: customTheme,
2021
resetTheme,
22+
applyTheme,
2123
...props
2224
}) => {
2325
const provider = useThemeProvider();
24-
const theme = resolveTheme([avatarTheme.group, provider.theme?.avatar?.group, customTheme], [resetTheme]);
26+
const theme = resolveTheme(
27+
[avatarTheme.group, provider.theme?.avatar?.group, customTheme],
28+
[get(provider.resetTheme, "avatar"), resetTheme],
29+
[get(provider.applyTheme, "avatar"), applyTheme],
30+
);
2531

2632
return (
2733
<div data-testid="avatar-group-element" className={twMerge(theme.base, className)} {...props}>

‎packages/ui/src/components/Avatar/AvatarGroupCounter.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
"use client";
22

33
import type { ComponentProps, FC } from "react";
4+
import { get } from "../../helpers/get";
45
import { resolveTheme } from "../../helpers/resolve-theme";
56
import { twMerge } from "../../helpers/tailwind-merge";
67
import { useThemeProvider } from "../../theme/provider";
@@ -21,12 +22,14 @@ export const AvatarGroupCounter: FC<AvatarGroupCounterProps> = ({
2122
total,
2223
theme: customTheme,
2324
resetTheme,
25+
applyTheme,
2426
...props
2527
}) => {
2628
const provider = useThemeProvider();
2729
const theme = resolveTheme(
2830
[avatarTheme.groupCounter, provider.theme?.avatar?.groupCounter, customTheme],
29-
[resetTheme],
31+
[get(provider.resetTheme, "avatar.groupCounter"), resetTheme],
32+
[get(provider.applyTheme, "avatar.groupCounter"), applyTheme],
3033
);
3134

3235
return (

‎packages/ui/src/components/Badge/Badge.tsx

+7-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
"use client";
22

33
import type { ComponentProps, FC } from "react";
4+
import { get } from "../../helpers/get";
45
import { resolveTheme } from "../../helpers/resolve-theme";
56
import { twMerge } from "../../helpers/tailwind-merge";
67
import { useThemeProvider } from "../../theme/provider";
@@ -44,10 +45,15 @@ export const Badge: FC<BadgeProps> = ({
4445
className,
4546
theme: customTheme,
4647
resetTheme,
48+
applyTheme,
4749
...props
4850
}) => {
4951
const provider = useThemeProvider();
50-
const theme = resolveTheme([badgeTheme, provider.theme?.badge, customTheme], [resetTheme]);
52+
const theme = resolveTheme(
53+
[badgeTheme, provider.theme?.badge, customTheme],
54+
[get(provider.resetTheme, "badge"), resetTheme],
55+
[get(provider.applyTheme, "badge"), applyTheme],
56+
);
5157

5258
const Content: FC = () => (
5359
<span

‎packages/ui/src/components/Blockquote/Blockquote.tsx

+14-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
"use client";
22

33
import type { ComponentProps, FC } from "react";
4+
import { get } from "../../helpers/get";
45
import { resolveTheme } from "../../helpers/resolve-theme";
56
import { twMerge } from "../../helpers/tailwind-merge";
67
import { useThemeProvider } from "../../theme/provider";
@@ -17,9 +18,20 @@ export interface BlockquoteRootTheme {
1718

1819
export interface BlockquoteProps extends ComponentProps<"blockquote">, ThemingProps<BlockquoteTheme> {}
1920

20-
export const Blockquote: FC<BlockquoteProps> = ({ children, className, theme: customTheme, resetTheme, ...props }) => {
21+
export const Blockquote: FC<BlockquoteProps> = ({
22+
children,
23+
className,
24+
theme: customTheme,
25+
resetTheme,
26+
applyTheme,
27+
...props
28+
}) => {
2129
const provider = useThemeProvider();
22-
const theme = resolveTheme([blockquoteTheme, provider.theme?.blockquote, customTheme], [resetTheme]);
30+
const theme = resolveTheme(
31+
[blockquoteTheme, provider.theme?.blockquote, customTheme],
32+
[get(provider.resetTheme, "blockquote"), resetTheme],
33+
[get(provider.applyTheme, "blockquote"), applyTheme],
34+
);
2335

2436
return (
2537
<blockquote className={twMerge(theme.root.base, className)} data-testid="flowbite-blockquote" {...props}>

‎packages/ui/src/components/Breadcrumb/Breadcrumb.tsx

+7-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
"use client";
22

33
import type { ComponentProps, FC } from "react";
4+
import { get } from "../../helpers/get";
45
import { resolveTheme } from "../../helpers/resolve-theme";
56
import { twMerge } from "../../helpers/tailwind-merge";
67
import { useThemeProvider } from "../../theme/provider";
@@ -26,10 +27,15 @@ const BreadcrumbComponent: FC<BreadcrumbComponentProps> = ({
2627
className,
2728
theme: customTheme,
2829
resetTheme,
30+
applyTheme,
2931
...props
3032
}) => {
3133
const provider = useThemeProvider();
32-
const theme = resolveTheme([breadcrumbTheme.root, provider.theme?.breadcrumb?.root, customTheme], [resetTheme]);
34+
const theme = resolveTheme(
35+
[breadcrumbTheme.root, provider.theme?.breadcrumb?.root, customTheme],
36+
[get(provider.resetTheme, "breadcrumb.root"), resetTheme],
37+
[get(provider.applyTheme, "breadcrumb.root"), applyTheme],
38+
);
3339

3440
return (
3541
<nav aria-label="Breadcrumb" className={twMerge(theme.base, className)} {...props}>

‎packages/ui/src/components/Breadcrumb/BreadcrumbItem.tsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import type { ComponentProps, FC } from "react";
44
import { forwardRef } from "react";
55
import { HiOutlineChevronRight } from "react-icons/hi";
6+
import { get } from "../../helpers/get";
67
import { resolveTheme } from "../../helpers/resolve-theme";
78
import { twMerge } from "../../helpers/tailwind-merge";
89
import { useThemeProvider } from "../../theme/provider";
@@ -23,14 +24,15 @@ export interface BreadcrumbItemProps extends Omit<ComponentProps<"li">, "ref">,
2324
}
2425

2526
export const BreadcrumbItem = forwardRef<HTMLAnchorElement | HTMLSpanElement, BreadcrumbItemProps>(
26-
({ children, className, href, icon: Icon, theme: customTheme, resetTheme, ...props }, ref) => {
27+
({ children, className, href, icon: Icon, theme: customTheme, resetTheme, applyTheme, ...props }, ref) => {
2728
const isLink = typeof href !== "undefined";
2829
const Component = isLink ? "a" : "span";
2930

3031
const provider = useThemeProvider();
3132
const theme = resolveTheme(
32-
[breadcrumbTheme.item, provider.theme?.breadcrumb?.item, customTheme, resetTheme],
33-
[resetTheme],
33+
[breadcrumbTheme.item, provider.theme?.breadcrumb?.item, customTheme],
34+
[get(provider.resetTheme, "breadcrumb.item"), resetTheme],
35+
[get(provider.applyTheme, "breadcrumb.item"), applyTheme],
3436
);
3537

3638
return (

‎packages/ui/src/components/Button/Button.tsx

+12-2
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import type { ElementType } from "react";
44
import { forwardRef, type ReactNode } from "react";
55
import type { PolymorphicComponentPropWithRef, PolymorphicRef } from "../../helpers/generic-as-prop";
6+
import { get } from "../../helpers/get";
67
import { resolveTheme } from "../../helpers/resolve-theme";
78
import { twMerge } from "../../helpers/tailwind-merge";
89
import { useThemeProvider } from "../../theme/provider";
@@ -120,13 +121,22 @@ export const Button = forwardRef(
120121
size = "md",
121122
theme: customTheme,
122123
resetTheme,
124+
applyTheme,
123125
...props
124126
}: ButtonProps<T>,
125127
ref: PolymorphicRef<T>,
126128
) => {
127129
const provider = useThemeProvider();
128-
const theme = resolveTheme([buttonTheme, provider.theme?.button, customTheme], [resetTheme]);
129-
const groupTheme = resolveTheme([buttonGroupTheme, provider.theme?.buttonGroup], [resetTheme]);
130+
const theme = resolveTheme(
131+
[buttonTheme, provider.theme?.button, customTheme],
132+
[get(provider.resetTheme, "button"), resetTheme],
133+
[get(provider.applyTheme, "button"), applyTheme],
134+
);
135+
const groupTheme = resolveTheme(
136+
[buttonGroupTheme, provider.theme?.buttonGroup],
137+
[get(provider.resetTheme, "buttonGroup"), resetTheme],
138+
[get(provider.applyTheme, "buttonGroup"), applyTheme],
139+
);
130140

131141
const theirProps = props as ButtonBaseProps<T>;
132142

‎packages/ui/src/components/Button/ButtonGroup.tsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -65,10 +65,15 @@ export const ButtonGroup: FC<ButtonGroupProps> = ({
6565
pill,
6666
theme: customTheme,
6767
resetTheme,
68+
applyTheme,
6869
...props
6970
}: ButtonGroupProps) => {
7071
const provider = useThemeProvider();
71-
const theme = resolveTheme([buttonGroupTheme, provider.theme?.buttonGroup, customTheme], [resetTheme]);
72+
const theme = resolveTheme(
73+
[buttonGroupTheme, provider.theme?.buttonGroup, customTheme],
74+
[get(provider.resetTheme, "carousel"), resetTheme],
75+
[get(provider.applyTheme, "carousel"), applyTheme],
76+
);
7277

7378
const items = useMemo(() => processChildren(children, outline, pill), [children, outline, pill]);
7479

‎packages/ui/src/components/Card/Card.tsx

+13-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
"use client";
22

33
import type { ComponentProps, FC } from "react";
4+
import { get } from "../../helpers/get";
45
import { omit } from "../../helpers/omit";
56
import { resolveTheme } from "../../helpers/resolve-theme";
67
import { twMerge } from "../../helpers/tailwind-merge";
@@ -44,12 +45,16 @@ export type CardProps = (
4445
CommonCardProps;
4546

4647
export const Card: FC<CardProps> = (props) => {
47-
const { children, className, horizontal, href, theme: customTheme, resetTheme } = props;
48+
const { children, className, horizontal, href, theme: customTheme, resetTheme, applyTheme } = props;
4849
const Component = typeof href === "undefined" ? "div" : "a";
4950
const theirProps = removeCustomProps(props);
5051

5152
const provider = useThemeProvider();
52-
const theme = resolveTheme([cardTheme, provider.theme?.card, customTheme], [resetTheme]);
53+
const theme = resolveTheme(
54+
[cardTheme, provider.theme?.card, customTheme],
55+
[get(provider.resetTheme, "card"), resetTheme],
56+
[get(provider.applyTheme, "card"), applyTheme],
57+
);
5358

5459
return (
5560
<Component
@@ -69,9 +74,13 @@ export const Card: FC<CardProps> = (props) => {
6974
);
7075
};
7176

72-
const Image: FC<CardProps> = ({ theme: customTheme, resetTheme, ...props }) => {
77+
const Image: FC<CardProps> = ({ theme: customTheme, resetTheme, applyTheme, ...props }) => {
7378
const provider = useThemeProvider();
74-
const theme = resolveTheme([cardTheme, provider.theme?.card, customTheme], [resetTheme]);
79+
const theme = resolveTheme(
80+
[cardTheme, provider.theme?.card, customTheme],
81+
[get(provider.resetTheme, "carousel"), resetTheme],
82+
[get(provider.applyTheme, "carousel"), applyTheme],
83+
);
7584

7685
if (props.renderImage) {
7786
return props.renderImage(theme, props.horizontal ?? false);

0 commit comments

Comments
 (0)