Skip to content

Commit 85d1770

Browse files
Karthik-B-06Karthik-B-06
authored
Merge pull request #90 from adaptui/refactoring-components
2 parents 14b63c1 + 5dd67ff commit 85d1770

File tree

5 files changed

+422
-332
lines changed

5 files changed

+422
-332
lines changed

‎example/app.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"displayName": "React Native System Playground",
44
"expo": {
55
"name": "React Native System Playground",
6+
"jsEngine": "hermes",
67
"slug": "react-native-system-playground",
78
"description": "Collection of components that are accessible, composable, customizable from low level to build your own UI & Design System",
89
"version": "1.0.0",

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

Lines changed: 80 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,90 @@
1-
import React from "react";
2-
import { Box, Switch, useTheme } from "@adaptui/react-native-tailwind";
1+
import React, { useState } from "react";
2+
import {
3+
Box,
4+
Radio,
5+
RadioGroup,
6+
Switch,
7+
SwitchSize,
8+
SwitchTheme,
9+
useTheme,
10+
} from "@adaptui/react-native-tailwind";
311

412
export const SwitchComponentScreen = () => {
513
const tailwind = useTheme();
14+
15+
const [selectedSize, setSelectedSize] = useState<SwitchSize>("md");
16+
const [selectedTheme, setSelectedTheme] = useState<SwitchTheme>("base");
17+
18+
const [hasLabel, setHasLabel] = useState(false);
19+
const [hasDesc, setHasDesc] = useState(false);
20+
21+
const [isSwitchDisabled, setIsSwitchDisabled] = useState<boolean>(false);
22+
623
return (
7-
<Box style={tailwind.style("flex-1 justify-center bg-white-900")}>
8-
<Box style={tailwind.style("my-2 items-center")}>
9-
<Switch />
10-
</Box>
11-
<Box style={tailwind.style("my-2")}>
12-
<Switch style={tailwind.style("mx-2 justify-between")} label="Wifi" />
13-
</Box>
14-
<Box style={tailwind.style("my-2 items-center")}>
15-
<Switch disabled label="Disabled-Off" />
16-
</Box>
17-
<Box style={tailwind.style("my-2 items-center")}>
18-
<Switch defaultState={true} disabled label="Disabled-On" />
19-
</Box>
20-
<Box style={tailwind.style("my-2 mx-4")}>
24+
<Box style={tailwind.style("flex-1 items-center bg-white-900")}>
25+
<Box style={tailwind.style("flex-1 px-2 justify-center")}>
2126
<Switch
22-
label="Isolation"
23-
description="Utilities for controlling whether an element should explicitly create a new stacking context."
27+
size={selectedSize}
28+
themeColor={selectedTheme}
29+
label={hasLabel ? "Isolation" : null}
30+
description={
31+
hasLabel && hasDesc
32+
? "Utilities for controlling whether an element should explicitly create a new stacking context."
33+
: null
34+
}
35+
disabled={isSwitchDisabled}
2436
/>
2537
</Box>
26-
<Box style={tailwind.style("my-2 items-center")}>
27-
<Switch themeColor="primary" />
28-
</Box>
29-
<Box style={tailwind.style("my-2 items-center")}>
30-
<Switch themeColor="primary" label="Wifi" />
31-
</Box>
32-
<Box style={tailwind.style("my-2 items-center")}>
33-
<Switch themeColor="primary" disabled label="Disabled-Off" />
34-
</Box>
35-
<Box style={tailwind.style("my-2 items-center")}>
36-
<Switch
37-
themeColor="primary"
38-
defaultState={true}
39-
disabled
40-
label="Disabled-On"
41-
/>
42-
</Box>
43-
<Box style={tailwind.style("my-2 mx-4")}>
44-
<Switch
45-
themeColor="primary"
46-
label="Isolation"
47-
description="Utilities for controlling whether an element should explicitly create a new stacking context."
48-
/>
38+
<Box
39+
style={tailwind.style(
40+
"w-full py-2 rounded-t-lg shadow-lg bg-gray-100 justify-end items-center",
41+
)}
42+
>
43+
<RadioGroup
44+
value={selectedSize}
45+
onChange={value => setSelectedSize(value as SwitchSize)}
46+
orientation="horizontal"
47+
>
48+
<Radio value="sm" label="sm" />
49+
<Radio value="md" label="md" />
50+
<Radio value="lg" label="lg" />
51+
<Radio value="xl" label="xl" />
52+
</RadioGroup>
53+
<RadioGroup
54+
value={selectedTheme}
55+
onChange={value => setSelectedTheme(value as SwitchTheme)}
56+
orientation="horizontal"
57+
>
58+
<Radio value="base" label="base" />
59+
<Radio value="primary" label="primary" />
60+
</RadioGroup>
61+
<Box
62+
style={tailwind.style(
63+
"flex flex-row justify-center flex-wrap w-full",
64+
)}
65+
>
66+
<Switch
67+
state={hasLabel}
68+
size="md"
69+
onStateChange={value => setHasLabel(value)}
70+
style={tailwind.style("ml-1 mt-1")}
71+
label="Has Label"
72+
/>
73+
<Switch
74+
state={hasDesc}
75+
size="md"
76+
onStateChange={value => setHasDesc(value)}
77+
style={tailwind.style("ml-1 mt-1")}
78+
label="Has Description"
79+
/>
80+
<Switch
81+
state={isSwitchDisabled}
82+
onStateChange={value => setIsSwitchDisabled(value)}
83+
size="md"
84+
style={tailwind.style("ml-1 mt-1")}
85+
label="Disabled"
86+
/>
87+
</Box>
4988
</Box>
5089
</Box>
5190
);

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

Lines changed: 86 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,104 @@
11
import React, { useState } from "react";
22
import {
33
Box,
4-
Checkbox,
5-
CheckboxGroup,
64
Icon,
5+
Radio,
6+
RadioGroup,
77
Slot,
8+
Switch,
89
Tag,
9-
TagSizes,
10+
TagSize,
1011
TagTheme,
1112
TagVariant,
1213
useTheme,
1314
} from "@adaptui/react-native-tailwind";
1415

1516
export const TagScreen = () => {
1617
const tailwind = useTheme();
17-
const sizes: TagSizes[] = ["sm", "md", "lg", "xl"];
18-
const themeColors: TagTheme[] = ["base", "primary"];
19-
const variants: TagVariant[] = ["solid", "subtle", "outline"];
20-
const [value, setValue] = useState<string[]>([]);
18+
const [selectedSize, setSelectedSize] = useState<TagSize>("md");
19+
const [selectedVariant, setSelectedVariant] = useState<TagVariant>("solid");
20+
const [selectedTheme, setSelectedTheme] = useState<TagTheme>("base");
21+
const [hasPrefix, setHasPrefix] = useState<boolean>(false);
22+
const [hasSuffix, setHasSuffix] = useState<boolean>(false);
23+
const [isClosable, setIsClosable] = useState<boolean>(false);
2124

2225
return (
23-
<Box
24-
style={tailwind.style("flex-1 justify-center items-center bg-white-900")}
25-
>
26-
<CheckboxGroup value={value} onChange={setValue}>
27-
<Checkbox label="Closable" value="closable" />
28-
<Checkbox label="Show Prefix" value="showprefix" />
29-
</CheckboxGroup>
30-
{sizes.map((size, index) => {
31-
return (
32-
<Box style={tailwind.style("flex-col my-1")} key={size + index}>
33-
{variants.map((variant, variantIndex) => {
34-
return (
35-
<Box
36-
style={tailwind.style("flex-row my-1")}
37-
key={variant + variantIndex}
38-
>
39-
{themeColors.map((theme, themeIndex) => {
40-
return (
41-
<Tag
42-
style={tailwind.style("mx-1")}
43-
size={size}
44-
key={theme + themeIndex}
45-
variant={variant}
46-
themeColor={theme}
47-
closable={value.includes("closable")}
48-
prefix={
49-
value.includes("showprefix") ? (
50-
<Icon icon={<Slot />} />
51-
) : null
52-
}
53-
>
54-
Continue
55-
</Tag>
56-
);
57-
})}
58-
</Box>
59-
);
60-
})}
61-
</Box>
62-
);
63-
})}
26+
<Box style={tailwind.style("flex-1 items-center bg-white-900")}>
27+
<Box style={tailwind.style("flex-1 px-2 justify-center")}>
28+
<Tag
29+
size={selectedSize}
30+
variant={selectedVariant}
31+
themeColor={selectedTheme}
32+
prefix={hasPrefix ? <Icon icon={<Slot />} /> : null}
33+
suffix={hasSuffix ? <Icon icon={<Slot />} /> : null}
34+
closable={isClosable}
35+
style={tailwind.style("mx-1")}
36+
>
37+
Continue
38+
</Tag>
39+
</Box>
40+
41+
<Box
42+
style={tailwind.style(
43+
"w-full py-2 rounded-t-lg shadow-lg bg-gray-100 justify-end items-center",
44+
)}
45+
>
46+
<RadioGroup
47+
value={selectedSize}
48+
onChange={value => setSelectedSize(value as TagSize)}
49+
orientation="horizontal"
50+
>
51+
<Radio value="sm" label="sm" />
52+
<Radio value="md" label="md" />
53+
<Radio value="lg" label="lg" />
54+
<Radio value="xl" label="xl" />
55+
</RadioGroup>
56+
<RadioGroup
57+
value={selectedVariant}
58+
onChange={value => setSelectedVariant(value as TagVariant)}
59+
orientation="horizontal"
60+
>
61+
<Radio value="outline" label="outline" />
62+
<Radio value="subtle" label="subtle" />
63+
<Radio value="solid" label="solid" />
64+
</RadioGroup>
65+
<RadioGroup
66+
value={selectedTheme}
67+
onChange={value => setSelectedTheme(value as TagTheme)}
68+
orientation="horizontal"
69+
>
70+
<Radio value="base" label="base" />
71+
<Radio value="primary" label="primary" />
72+
</RadioGroup>
73+
<Box
74+
style={tailwind.style(
75+
"flex flex-row justify-center flex-wrap w-full",
76+
)}
77+
>
78+
<Switch
79+
state={hasPrefix}
80+
onStateChange={value => setHasPrefix(value)}
81+
size="md"
82+
style={tailwind.style("ml-1 mt-1")}
83+
label="Prefix"
84+
/>
85+
<Switch
86+
state={hasSuffix}
87+
onStateChange={value => setHasSuffix(value)}
88+
size="md"
89+
style={tailwind.style("ml-1 mt-1")}
90+
label="Suffix"
91+
/>
92+
93+
<Switch
94+
state={isClosable}
95+
onStateChange={value => setIsClosable(value)}
96+
size="md"
97+
style={tailwind.style("ml-1 mt-1")}
98+
label="Closable"
99+
/>
100+
</Box>
101+
</Box>
64102
</Box>
65103
);
66104
};

0 commit comments

Comments
 (0)