Skip to content

Commit 619d60c

Browse files
navin-moorthynavin-moorthy
authored
Merge pull request #55 from adaptui/refactoring-components
2 parents 0303e84 + 79dea75 commit 619d60c

38 files changed

+1845
-1092
lines changed

‎.vscode/settings.json‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,12 @@
1212
"primitives",
1313
"tooltip",
1414
"tag",
15-
"progress-bar"
15+
"progress-bar",
16+
"switch",
17+
"radio",
18+
"slider",
19+
"circular-progress",
20+
"input"
1621
],
1722
"git.branchProtection": ["main"]
1823
}

‎example/src/AppRoot.tsx‎

Lines changed: 40 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,16 @@ import {
66
AvatarScreen,
77
BadgeScreen,
88
ButtonScreen,
9+
CheckboxGroupScreen,
910
CheckboxScreen,
11+
CircularProgressScreen,
12+
InputScreen,
1013
MeterComponentScreen,
1114
ProgressScreen,
15+
RadioScreen,
16+
SliderComponentScreen,
1217
SpinnerScreen,
18+
SwitchComponentScreen,
1319
TagScreen,
1420
TooltipScreen,
1521
} from "./modules";
@@ -18,7 +24,7 @@ const Drawer = createDrawerNavigator();
1824

1925
const AppRoot = () => {
2026
return (
21-
<Drawer.Navigator initialRouteName="TooltipScreen">
27+
<Drawer.Navigator initialRouteName="CheckboxGroupScreen">
2228
<Drawer.Screen
2329
options={{ title: "Avatar" }}
2430
name="AvatarScreen"
@@ -50,7 +56,7 @@ const AppRoot = () => {
5056
component={SpinnerScreen}
5157
/>
5258
<Drawer.Screen
53-
options={{ title: "MeterComponent" }}
59+
options={{ title: "Meter" }}
5460
name="MeterComponentScreen"
5561
component={MeterComponentScreen}
5662
/>
@@ -60,15 +66,45 @@ const AppRoot = () => {
6066
component={TooltipScreen}
6167
/>
6268
<Drawer.Screen
63-
options={{ title: "TagScreen" }}
69+
options={{ title: "Tag " }}
6470
name="TagScreen"
6571
component={TagScreen}
6672
/>
6773
<Drawer.Screen
68-
options={{ title: "ProgressScreen" }}
74+
options={{ title: "Progress " }}
6975
name="ProgressScreen"
7076
component={ProgressScreen}
7177
/>
78+
<Drawer.Screen
79+
options={{ title: "Switch" }}
80+
name="SwitchComponentScreen"
81+
component={SwitchComponentScreen}
82+
/>
83+
<Drawer.Screen
84+
options={{ title: "Radio" }}
85+
name="RadioComponentScreen"
86+
component={RadioScreen}
87+
/>
88+
<Drawer.Screen
89+
options={{ title: "Slider" }}
90+
name="SliderComponentScreen"
91+
component={SliderComponentScreen}
92+
/>
93+
<Drawer.Screen
94+
options={{ title: "Circular Progress" }}
95+
name="CircularProgressScreen"
96+
component={CircularProgressScreen}
97+
/>
98+
<Drawer.Screen
99+
options={{ title: "Input" }}
100+
name="InputScreen"
101+
component={InputScreen}
102+
/>
103+
<Drawer.Screen
104+
options={{ title: "Checkbox Group" }}
105+
name="CheckboxGroupScreen"
106+
component={CheckboxGroupScreen}
107+
/>
72108
</Drawer.Navigator>
73109
);
74110
};

‎example/src/modules/feedback/CircularProgressScreen.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from "react";
2+
import {
3+
Box,
4+
CircularProgress,
5+
useTheme,
6+
} from "@adaptui/react-native-tailwind";
7+
8+
export const CircularProgressScreen = () => {
9+
const tailwind = useTheme();
10+
return (
11+
<Box
12+
style={tailwind.style(
13+
"flex-1 justify-center items-center px-2 bg-white-900",
14+
)}
15+
>
16+
<CircularProgress size="sm" />
17+
<CircularProgress />
18+
<CircularProgress size="lg" />
19+
<CircularProgress size="xl" />
20+
</Box>
21+
);
22+
};

example/src/modules/primitives/MeterComponentScreen.tsx renamed to example/src/modules/feedback/MeterComponentScreen.tsx

File renamed without changes.

‎example/src/modules/feedback/ProgressScreen.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,12 @@ export const ProgressScreen = () => {
1818
style={tailwind.style("my-2")}
1919
trackStyle={tailwind.style("bg-green-600")}
2020
/>
21+
{/* With Label and Hint */}
22+
<ProgressBar
23+
label="Progress"
24+
hint="26.6%"
25+
style={tailwind.style("my-2")}
26+
/>
2127
</Box>
2228
);
2329
};

example/src/modules/primitives/SpinnerScreen.tsx renamed to example/src/modules/feedback/SpinnerScreen.tsx

File renamed without changes.

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,4 @@
1+
export * from "./CircularProgressScreen";
2+
export * from "./MeterComponentScreen";
13
export * from "./ProgressScreen";
4+
export * from "./SpinnerScreen";

‎example/src/modules/forms/CheckboxGroupScreen.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React from "react";
2+
import {
3+
Box,
4+
Checkbox,
5+
CheckboxGroup,
6+
Text,
7+
useTheme,
8+
} from "@adaptui/react-native-tailwind";
9+
10+
export const CheckboxGroupScreen = () => {
11+
const tailwind = useTheme();
12+
const [value, setValue] = React.useState<string[]>([]);
13+
return (
14+
<Box style={tailwind.style("flex-1 px-2 justify-center bg-white-900")}>
15+
<Text>Pick fruits to eat</Text>
16+
<CheckboxGroup value={value} onChange={setValue}>
17+
<Checkbox value="apple" label="Apple" />
18+
<Checkbox value="orange" label="Orange" />
19+
<Checkbox value="watermelon" label="Watermelon" />
20+
<Checkbox value="sapota" label="Sapota" />
21+
<Checkbox value="cherry" label="Cherry" />
22+
</CheckboxGroup>
23+
<Box style={tailwind.style("mt-2")}>
24+
<Text>Picked fruits</Text>
25+
{value.map((item, index) => {
26+
return (
27+
<Text style={tailwind.style("my-1")} key={index}>
28+
- {item}
29+
</Text>
30+
);
31+
})}
32+
</Box>
33+
</Box>
34+
);
35+
};

‎example/src/modules/forms/InputScreen.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import React from "react";
2+
import {
3+
Box,
4+
Icon,
5+
Info,
6+
Input,
7+
useTheme,
8+
} from "@adaptui/react-native-tailwind";
9+
10+
export const InputScreen = () => {
11+
const tailwind = useTheme();
12+
13+
return (
14+
<Box style={tailwind.style("flex-1 px-2 justify-center bg-white-900")}>
15+
<Input
16+
textInputWrapperProps={{ style: tailwind.style("my-2") }}
17+
placeholder={"Placeholder"}
18+
suffix={<Icon icon={<Info />} />}
19+
/>
20+
<Input
21+
textInputWrapperProps={{ style: tailwind.style("my-2") }}
22+
placeholder={"Placeholder"}
23+
variant="subtle"
24+
suffix={<Icon icon={<Info />} />}
25+
/>
26+
<Input
27+
textInputWrapperProps={{ style: tailwind.style("my-2") }}
28+
placeholder={"Placeholder"}
29+
variant="underline"
30+
suffix={<Icon icon={<Info />} />}
31+
/>
32+
<Input
33+
textInputWrapperProps={{ style: tailwind.style("my-2") }}
34+
placeholder={"Placeholder"}
35+
variant="ghost"
36+
suffix={<Icon icon={<Info />} />}
37+
/>
38+
</Box>
39+
);
40+
};

‎example/src/modules/forms/RadioScreen.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React from "react";
2+
import {
3+
Box,
4+
Radio,
5+
RadioGroup,
6+
useTheme,
7+
} from "@adaptui/react-native-tailwind";
8+
9+
export const RadioScreen = () => {
10+
const tailwind = useTheme();
11+
return (
12+
<Box
13+
style={tailwind.style("flex-1 justify-center items-center bg-white-900")}
14+
>
15+
<RadioGroup>
16+
<Radio label="Apple" value="Apple" />
17+
<Radio isDisabled label="Orange" value="Orange" />
18+
</RadioGroup>
19+
20+
<RadioGroup themeColor="danger">
21+
<Radio label="Apple" value="Apple" />
22+
<Radio label="Orange" value="Orange" />
23+
</RadioGroup>
24+
25+
<RadioGroup themeColor="primary" defaultValue="Apple">
26+
<Radio
27+
description="Used when the checkbox is selected and will use its value for the form submission."
28+
label="Apple"
29+
value="Apple"
30+
/>
31+
<Radio
32+
description="Used when the checkbox is selected and will use its value for the form submission."
33+
label="Orange"
34+
value="Orange"
35+
/>
36+
</RadioGroup>
37+
</Box>
38+
);
39+
};

0 commit comments

Comments
 (0)