Skip to content

Commit da17aa9

Browse files
Karthik-B-06Karthik-B-06
authored
Add theme for components (#47)
* chore(avatar): 💄 update active status bg color * chore(badge): 🎨 add theme and set default theme to base * chore(button): 🎨 add button theme, add themeColor prop & set to `base` * chore(button): 💄 add active styles from figma to pressed state * chore(example-app): ✨ add different Button variant component to Screen * chore(checkbox): 💄 update checkbox theme to have updated colors and other theming * chore(checkbox): ➖ removed invalid utility class select-none * refactor(checkbox): ♻️ wrapped tailwind classnames inside `cx` * chore(checkbox): ✨ wrap checkbox component - add checkbox theming - wrap tailwind classnames inside cx - refactor children func * chore(example-app): ✨ add Checkbox component screen * refactor(badge): 🎨 improve theme structure * chore(spinner): ✨ wrap spinner component - add theming to spinner, - wrap tailwind classnames inside `cx` & - add description to spinner props * refactor(button): ♻️ wrap Button Component - restructured button theme, - changed icon prop to iconOnly, - refactored ButtonSpinner * chore(example-app): 🐛 changed icon prop to iconOnly * chore(example-app): ✨ add Spinner Component Screen * chore(avatar): 💄 update bg of typing container & change font weight of avatar initials * chore(meter): ✨ wrap meter component, add theming to meter & restructured theme * fix(meter): 🐛 set default value for themeColor * chore(meter): 🩹 change order of props * chore(badge): 🚑 fix outline text color, add vertical padding to badge container * chore(example-app): ✨ add outline badge variants to example app * chore(example-app): ♻️ add common component export, add MeterComponent to drawer screen * chore: 🚚 changed folder name circularProgress to circular-progress * chore: 🚚 change folder names to kebab-case * fix: 🩹 fix primitives import * chore(spinner): 🩹 change `h-14px` tailwind classname to `h-3.5` * chore(primitives): 🚚 change primitives folder name (#51) * chore(spinner): 🐛 change border-2 tailwind classname to { borderWidth: 1.5 } * chore(checkbox): 🚑 add optional chaining for null check * chore(button): 🎨 move `opacity-0` tailwind classname to button theme * refactor(button): ♻️ wrap button component - remove usage of useButtonProps, - restructure button render elements (prefix, suffix, iconOnly) * chore(badge): 🔥 remove badge keys
1 parent 2f24edd commit da17aa9

Some content is hidden

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

50 files changed

+1292
-552
lines changed

‎example/src/AppRoot.tsx‎

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
import React from "react";
22
import { createDrawerNavigator } from "@react-navigation/drawer";
33

4-
import AvatarGroupScreen from "./modules/primitives/AvatarGroupScreen";
5-
import AvatarScreen from "./modules/primitives/AvatarScreen";
6-
import BadgeScreen from "./modules/primitives/BadgeScreen";
7-
import ButtonScreen from "./modules/primitives/ButtonScreen";
4+
import {
5+
AvatarGroupScreen,
6+
AvatarScreen,
7+
BadgeScreen,
8+
ButtonScreen,
9+
CheckboxScreen,
10+
MeterComponentScreen,
11+
SpinnerScreen,
12+
} from "./modules/primitives";
813

914
const Drawer = createDrawerNavigator();
1015

@@ -31,6 +36,21 @@ const AppRoot = () => {
3136
name="BadgeScreen"
3237
component={BadgeScreen}
3338
/>
39+
<Drawer.Screen
40+
options={{ title: "Checkbox" }}
41+
name="CheckboxScreen"
42+
component={CheckboxScreen}
43+
/>
44+
<Drawer.Screen
45+
options={{ title: "Spinner" }}
46+
name="SpinnerScreen"
47+
component={SpinnerScreen}
48+
/>
49+
<Drawer.Screen
50+
options={{ title: "MeterComponent" }}
51+
name="MeterComponentScreen"
52+
component={MeterComponentScreen}
53+
/>
3454
</Drawer.Navigator>
3555
);
3656
};

‎example/src/modules/primitives/AvatarGroupScreen.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
useTheme,
77
} from "@adaptui/react-native-tailwind";
88

9-
export default function AvatarGroupScreen() {
9+
export const AvatarGroupScreen = () => {
1010
const tailwind = useTheme();
1111
return (
1212
<Box
@@ -67,4 +67,4 @@ export default function AvatarGroupScreen() {
6767
</AvatarGroup>
6868
</Box>
6969
);
70-
}
70+
};

‎example/src/modules/primitives/AvatarScreen.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from "react";
22
import { Avatar, Box, useTheme } from "@adaptui/react-native-tailwind";
33

4-
export default function AvatarScreen() {
4+
export const AvatarScreen = () => {
55
const tailwind = useTheme();
66
return (
77
<Box
@@ -31,4 +31,4 @@ export default function AvatarScreen() {
3131
/>
3232
</Box>
3333
);
34-
}
34+
};

‎example/src/modules/primitives/BadgeScreen.tsx‎

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
useTheme,
1010
} from "@adaptui/react-native-tailwind";
1111

12-
export default function BadgeScreen() {
12+
export const BadgeScreen = () => {
1313
const tailwind = useTheme();
1414
return (
1515
<Box
@@ -18,6 +18,14 @@ export default function BadgeScreen() {
1818
<Badge style={tailwind.style("my-1")} themeColor="secondary">
1919
Scheduled
2020
</Badge>
21+
<Badge
22+
style={tailwind.style("my-1")}
23+
themeColor="primary"
24+
size="lg"
25+
variant="outline"
26+
>
27+
Assigned
28+
</Badge>
2129
<Badge
2230
style={tailwind.style("my-1")}
2331
themeColor="primary"
@@ -26,6 +34,14 @@ export default function BadgeScreen() {
2634
>
2735
On Progress
2836
</Badge>
37+
<Badge
38+
style={tailwind.style("my-1")}
39+
size="md"
40+
themeColor="secondary"
41+
variant="outline"
42+
>
43+
Confirmed
44+
</Badge>
2945
<Badge
3046
style={tailwind.style("my-1")}
3147
themeColor="danger"
@@ -40,13 +56,15 @@ export default function BadgeScreen() {
4056
>
4157
Completed
4258
</Badge>
59+
4360
<Badge
4461
style={tailwind.style("my-1")}
45-
variant="subtle"
46-
themeColor="secondary"
62+
size="sm"
63+
themeColor="success"
64+
variant="outline"
4765
>
48-
Review
66+
Done
4967
</Badge>
5068
</Box>
5169
);
52-
}
70+
};

‎example/src/modules/primitives/ButtonScreen.tsx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,13 @@ import {
99
useTheme,
1010
} from "@adaptui/react-native-tailwind";
1111

12-
export default function ButtonScreen() {
12+
export const ButtonScreen = () => {
1313
const tailwind = useTheme();
1414
return (
1515
<Box
1616
style={tailwind.style("flex-1 justify-center items-center bg-white-900")}
1717
>
18-
<Button
19-
style={tailwind.style("my-1")}
20-
suffix={<Icon icon={<CaretRight />} />}
21-
>
18+
<Button themeColor="primary" suffix={<Icon icon={<CaretRight />} />}>
2219
Continue
2320
</Button>
2421
<Button style={tailwind.style("my-1")} variant="outline">
@@ -43,12 +40,12 @@ export default function ButtonScreen() {
4340
</Button>
4441
<Button
4542
variant="subtle"
46-
icon={<Icon icon={<CaretRight />} />}
43+
iconOnly={<Icon icon={<CaretRight />} />}
4744
style={tailwind.style("my-1")}
4845
/>
4946
<Button style={tailwind.style("my-1")} prefix={<Icon icon={<Image />} />}>
5047
Upload Image
5148
</Button>
5249
</Box>
5350
);
54-
}
51+
};

‎example/src/modules/primitives/CheckboxScreen.tsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import React from "react";
2+
import {
3+
Box,
4+
Checkbox,
5+
CheckboxTheme,
6+
useTheme,
7+
} from "@adaptui/react-native-tailwind";
8+
9+
export const CheckboxScreen = () => {
10+
const tailwind = useTheme();
11+
const theme: CheckboxTheme[] = ["base", "primary", "danger"];
12+
return (
13+
<Box
14+
style={tailwind.style(
15+
"flex-1 justify-center items-center px-2 bg-white-900",
16+
)}
17+
>
18+
{theme.map((value, index) => {
19+
return <Checkbox size="sm" themeColor={value} key={index} />;
20+
})}
21+
22+
{theme.map((value, index) => {
23+
return (
24+
<Checkbox
25+
defaultSelected
26+
themeColor={value}
27+
key={index}
28+
label="Aeroplane"
29+
/>
30+
);
31+
})}
32+
33+
{theme.map((value, index) => {
34+
return (
35+
<Checkbox
36+
label="Aeroplane"
37+
description="An airplane or aeroplane (informally plane) is a fixed-wing aircraft that is propelled forward by thrust from a jet engine, propeller, or rocket engine."
38+
themeColor={value}
39+
key={index}
40+
/>
41+
);
42+
})}
43+
</Box>
44+
);
45+
};

‎example/src/modules/primitives/MeterComponentScreen.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React from "react";
2+
import { Box, Meter, useTheme } from "@adaptui/react-native-tailwind";
3+
4+
export const MeterComponentScreen = () => {
5+
const tailwind = useTheme();
6+
return (
7+
<Box style={tailwind.style("flex-1 justify-center px-2 bg-white-900")}>
8+
<Box style={tailwind.style("my-2")}>
9+
<Meter intervals={3} value={0.55} />
10+
</Box>
11+
<Box style={tailwind.style("my-2")}>
12+
<Meter themeColor="primary" intervals={3} value={0.85} />
13+
</Box>
14+
<Box style={tailwind.style("my-2")}>
15+
<Meter themeColor="success" intervals={3} value={0.25} />
16+
</Box>
17+
18+
<Box style={tailwind.style("my-2")}>
19+
<Meter label="Stocks" themeColor="success" intervals={3} value={0.25} />
20+
</Box>
21+
22+
<Box style={tailwind.style("my-2")}>
23+
<Meter
24+
label="Progress"
25+
hint="1/3"
26+
themeColor="primary"
27+
intervals={3}
28+
value={0.33}
29+
/>
30+
</Box>
31+
</Box>
32+
);
33+
};

‎example/src/modules/primitives/SpinnerScreen.tsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import React from "react";
2+
import {
3+
Box,
4+
Spinner,
5+
SpinnerTheme,
6+
useTheme,
7+
} from "@adaptui/react-native-tailwind";
8+
9+
export const SpinnerScreen = () => {
10+
const tailwind = useTheme();
11+
const theme: SpinnerTheme[] = [
12+
"base",
13+
"primary",
14+
"secondary",
15+
"success",
16+
"danger",
17+
];
18+
return (
19+
<Box
20+
style={tailwind.style(
21+
"flex-1 justify-center items-center px-2 bg-white-900",
22+
)}
23+
>
24+
{theme.map((value, index) => {
25+
return (
26+
<Spinner
27+
style={tailwind.style("my-2")}
28+
themeColor={value}
29+
key={index}
30+
track="visible"
31+
/>
32+
);
33+
})}
34+
{theme.map((value, index) => {
35+
return (
36+
<Spinner
37+
style={tailwind.style("my-2")}
38+
themeColor={value}
39+
key={index}
40+
/>
41+
);
42+
})}
43+
</Box>
44+
);
45+
};

‎example/src/modules/primitives/index.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export * from "./AvatarGroupScreen";
2+
export * from "./AvatarScreen";
3+
export * from "./BadgeScreen";
4+
export * from "./ButtonScreen";
5+
export * from "./CheckboxScreen";
6+
export * from "./MeterComponentScreen";
7+
export * from "./SpinnerScreen";

‎src/components/badge/Badge.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@ import { Icon } from "../icon";
99
export type BadgeSizes = "sm" | "md" | "lg";
1010

1111
export type BadgeTheme =
12+
| "base"
1213
| "primary"
1314
| "secondary"
14-
| "default"
1515
| "success"
1616
| "danger";
1717

@@ -24,7 +24,7 @@ export interface BadgeProps extends BoxProps {
2424
size?: BadgeSizes;
2525
/**
2626
* How the badge should be themed?
27-
* @default default
27+
* @default base
2828
*/
2929
themeColor?: BadgeTheme;
3030
/**
@@ -50,7 +50,7 @@ const RNBadge: React.FC<Partial<BadgeProps>> = forwardRef<
5050
(
5151
{
5252
size = "md",
53-
themeColor = "default",
53+
themeColor = "base",
5454
variant = "solid",
5555
textProps = {},
5656
prefix,
@@ -70,12 +70,12 @@ const RNBadge: React.FC<Partial<BadgeProps>> = forwardRef<
7070
createIcon({
7171
icon: prefix,
7272
iconFill: tailwind.getColor(
73-
badgeStyles.textVariants[variant][themeColor],
73+
cx(badgeStyles.themeColor[themeColor]?.[variant]?.text),
7474
),
75-
iconStyle: tailwind.style(cx(badgeStyles.prefix.size[size])),
75+
iconStyle: tailwind.style(cx(badgeStyles.size[size]?.prefix)),
7676
})
7777
) : (
78-
<Box style={tailwind.style(cx(badgeStyles.prefix.size[size]))}>
78+
<Box style={tailwind.style(cx(badgeStyles.size[size]?.prefix))}>
7979
{prefix}
8080
</Box>
8181
);
@@ -87,8 +87,8 @@ const RNBadge: React.FC<Partial<BadgeProps>> = forwardRef<
8787
tailwind.style(
8888
cx(
8989
badgeStyles.baseContainer,
90-
badgeStyles.containerVariants[variant][themeColor],
91-
badgeStyles.size.container[size],
90+
badgeStyles.themeColor[themeColor]?.[variant]?.container,
91+
badgeStyles.size[size]?.container,
9292
),
9393
),
9494
styleAdapter(boxStyle, { pressed: false }, false),
@@ -101,8 +101,8 @@ const RNBadge: React.FC<Partial<BadgeProps>> = forwardRef<
101101
style={[
102102
tailwind.style(
103103
cx(
104-
badgeStyles.size.text[size],
105-
badgeStyles.textVariants[variant][themeColor],
104+
badgeStyles.size[size]?.text,
105+
badgeStyles.themeColor[themeColor]?.[variant]?.text,
106106
),
107107
),
108108
styleAdapter(textStyle, { pressed: false }, false),

0 commit comments

Comments
 (0)