Skip to content

Commit 3412a7c

Browse files
Karthik-B-06Karthik-B-06
committed
Merge branch 'main' into app-build
2 parents 3ecbe64 + 8e563ec commit 3412a7c

Some content is hidden

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

48 files changed

+729
-367
lines changed

‎.vscode/settings.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,8 @@
2424
"divider",
2525
"select",
2626
"text-area",
27-
"types"
27+
"types",
28+
"theme"
2829
],
2930
"git.branchProtection": ["main"]
3031
}

‎CHANGELOG.md‎

Lines changed: 284 additions & 0 deletions
Large diffs are not rendered by default.

‎docs/select.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,8 @@ export default function App() {
2626

2727
The Select component uses [Gorhom's React Native Bottomsheet](https://github.com/gorhom/react-native-bottom-sheet) to list the options you have provided through `options` prop.
2828

29-
Wrap your app or the screen you are using the <Select/> componente with `<BottomSheetModalProvider>` from `"@gorhom/bottom-sheet"`
29+
Wrap your app or the screen you are using the `<Select/>` component with
30+
`<BottomSheetModalProvider>` from <br /> `"@gorhom/bottom-sheet"`
3031

3132
```jsx
3233

‎docs/tooltip.md‎

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@
33
AdaptUI provides a Tooltip Component which can be used to provide a brief,
44
informative message when a user interacts with an element.
55

6+
<div align='center'>
7+
<img src="https://user-images.githubusercontent.com/35562287/208374706-a85e0bc5-f6c4-4ef4-8c6e-bfb42f69c349.png" style="width:375px;" />
8+
</div>
9+
610
#### Simple Usage
711

812
```js
@@ -28,20 +32,22 @@ export default function App() {
2832
}
2933
```
3034

31-
This component uses <Popover> component from
35+
This component uses `<Popover>` component from
3236
[`react-native-popper`](https://github.com/intergalacticspacehighway/react-native-popper)
3337

3438
## Props
3539

36-
| Name | Description | Type | Default |
37-
| ------------------ | -------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | -------- |
38-
| placement | Tooltip placement | `top` `bottom` `left` `right` `top left` `top right` `bottom left` `bottom right` `right top` `right bottom` `left top` `left bottom` | `bottom` |
39-
| trigger | The trigger of the Tooltip | JSXELement | |
40-
| content | The content of the Tooltip | JSXELement or string | |
41-
| action | Action in which to show the Tooltip | JSXELement or string | |
42-
| mainOffset | Distance between popover and trigger's main axis | number | 0 |
43-
| crossOffset | Distance between popover and trigger's cross axis | number | 0 |
44-
| hasArrow | Whether popover should have an arrow | boolean | false |
45-
| shouldFlip | Whether the popover should flip if there's less space | boolean | true |
46-
| isTooltipOpen | Is the Tooltip Open for Controlled popovers | boolean | |
47-
| handleTooltipState | A callback to listen to change events also to set state for controlled popovers. | (isOpen: boolean) => void | |
40+
| Name | Description | Type | Default |
41+
|--------------------|----------------------------------------------------------------------------------|---------------------------|---------|
42+
| placement | Tooltip placement with respect to the trigger placement | TooltipPlacement | |
43+
| trigger | The trigger of the Tooltip | JSXELement | |
44+
| content | The content of the Tooltip | JSXELement or string | |
45+
| action | Action in which to show the Tooltip | JSXELement or string | |
46+
| mainOffset | Distance between popover and trigger's main axis | number | 0 |
47+
| crossOffset | Distance between popover and trigger's cross axis | number | 0 |
48+
| hasArrow | Whether popover should have an arrow | boolean | false |
49+
| shouldFlip | Whether the popover should flip if there's less space | boolean | true |
50+
| isTooltipOpen | Is the Tooltip Open for Controlled popovers | boolean | |
51+
| handleTooltipState | A callback to listen to change events also to set state for controlled popovers. | (isOpen: boolean) => void | |
52+
53+
> type TooltipPlacement `top` `bottom` `left` `right` `top left` `top right` `bottom left` `bottom right` `right top` `right bottom` `left top`

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@adaptui/react-native-tailwind",
3-
"version": "1.0.0-alpha.8",
3+
"version": "1.0.0-alpha.9",
44
"description": "Collection of components that are accessible, composable, customizable from low level to build your own UI & Design System",
55
"keywords": [
66
"react-native",

‎src/components/avatar-group/AvatarGroup.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from "react";
22
import { isUndefined } from "lodash";
33

44
import { Box, BoxProps } from "../../primitives";
5-
import { useTheme } from "../../theme";
5+
import { useTailwind, useTheme } from "../../theme";
66
import { createContext, getValidChildren } from "../../utils";
77
import { Avatar, AvatarProps } from "../avatar";
88

@@ -48,7 +48,7 @@ export const AvatarGroup: React.FC<Partial<AvatarGroupProps>> = props => {
4848
...rest
4949
} = props;
5050
const validChildren = getValidChildren(children);
51-
const tailwind = useTheme();
51+
const { ts } = useTailwind();
5252
const avatarTheme = useTheme("avatar");
5353
/**
5454
* Get the avatars within the max
@@ -67,7 +67,7 @@ export const AvatarGroup: React.FC<Partial<AvatarGroupProps>> = props => {
6767
<Box
6868
style={[
6969
avatarTheme.borderRadius.size[size],
70-
tailwind.style([
70+
ts([
7171
index !== 0
7272
? avatarTheme.group.avatarWrapper.spacing[size]
7373
: "",
@@ -87,7 +87,7 @@ export const AvatarGroup: React.FC<Partial<AvatarGroupProps>> = props => {
8787
<Box
8888
style={[
8989
avatarTheme.borderRadius.size[size],
90-
tailwind.style([
90+
ts([
9191
avatarTheme.group.avatarWrapper.spacing[size],
9292
!squared ? avatarTheme.group.avatarWrapper.circular : "",
9393
showRing ? avatarTheme.group.avatarWrapper.ringStyle : "",

‎src/components/avatar-group/AvatarGroupWrapper.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from "react";
22

33
import { Box, BoxProps } from "../../primitives";
4-
import { useTheme } from "../../theme";
4+
import { useTailwind, useTheme } from "../../theme";
55
import { styleAdapter } from "../../utils";
66
import { AvatarSizes } from "../avatar";
77

@@ -16,13 +16,10 @@ export const AvatarGroupWrapper: React.FC<AvatarGroupWrapperProps> = ({
1616
...props
1717
}) => {
1818
const avatarTheme = useTheme("avatar");
19-
const tailwind = useTheme();
19+
const { ts } = useTailwind();
2020

2121
return (
22-
<Box
23-
{...props}
24-
style={[tailwind.style([avatarTheme.group.base]), styleAdapter(style)]}
25-
>
22+
<Box {...props} style={[ts([avatarTheme.group.base]), styleAdapter(style)]}>
2623
{children}
2724
</Box>
2825
);

‎src/components/avatar/Avatar.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { ImageProps, ImageSourcePropType } from "react-native";
33

44
import { DefaultUser } from "../../icons";
55
import { Box, BoxProps, Text } from "../../primitives";
6-
import { useTheme } from "../../theme";
6+
import { getTextFontFamily, useTailwind, useTheme } from "../../theme";
77
import { createComponent, cx, isUndefined, styleAdapter } from "../../utils";
88
import { useAvatarGroup } from "../avatar-group";
99
import { Icon } from "../icon";
@@ -75,7 +75,7 @@ const RNAvatar: React.FC<Partial<AvatarProps>> = forwardRef<
7575
typeof Box,
7676
Partial<AvatarProps>
7777
>((props, ref) => {
78-
const tailwind = useTheme();
78+
const { ts, gc } = useTailwind();
7979
const avatarTheme = useTheme("avatar");
8080

8181
const avatarGroupProps = useAvatarGroup();
@@ -104,7 +104,7 @@ const RNAvatar: React.FC<Partial<AvatarProps>> = forwardRef<
104104
<Box
105105
style={[
106106
avatarTheme.borderRadius.size[size],
107-
tailwind.style(
107+
ts(
108108
cx(
109109
avatarTheme.base,
110110
avatarTheme.size[size],
@@ -126,8 +126,9 @@ const RNAvatar: React.FC<Partial<AvatarProps>> = forwardRef<
126126
/>
127127
) : name ? (
128128
<Text
129-
style={tailwind.style(
129+
style={ts(
130130
cx(avatarTheme.initials.base, avatarTheme.initials.size[size]),
131+
getTextFontFamily(avatarTheme.initials.base),
131132
)}
132133
adjustsFontSizeToFit
133134
allowFontScaling={false}
@@ -137,8 +138,8 @@ const RNAvatar: React.FC<Partial<AvatarProps>> = forwardRef<
137138
) : (
138139
<Icon
139140
icon={<DefaultUser />}
140-
style={tailwind.style(cx(avatarTheme.defaultUserIcon[size]))}
141-
color={tailwind.getColor("text-gray-800")}
141+
style={ts(cx(avatarTheme.defaultUserIcon[size]))}
142+
color={gc("text-gray-800")}
142143
/>
143144
)}
144145
{status && (

‎src/components/avatar/AvatarImage.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from "react";
22
import { Image } from "react-native";
33

4-
import { useTheme } from "../../theme";
4+
import { useTailwind, useTheme } from "../../theme";
55
import { cx } from "../../utils";
66

77
import { AvatarProps } from "./Avatar";
@@ -18,16 +18,14 @@ export const AvatarImage: React.FC<AvatarImageProps> = ({
1818
size,
1919
handleFallback,
2020
}) => {
21-
const tailwind = useTheme();
21+
const { ts } = useTailwind();
2222
const avatarTheme = useTheme("avatar");
2323
return (
2424
<Image
2525
source={src}
2626
style={[
2727
avatarTheme.borderRadius.size[size],
28-
tailwind.style(
29-
cx(avatarTheme.image, !squared ? avatarTheme.circular : ""),
30-
),
28+
ts(cx(avatarTheme.image, !squared ? avatarTheme.circular : "")),
3129
]}
3230
onError={handleFallback}
3331
{...imageProps}

‎src/components/avatar/AvatarStatus.tsx‎

Lines changed: 23 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
import Svg, { Path } from "react-native-svg";
1212

1313
import { AnimatedBox, Box } from "../../primitives";
14-
import { useTheme } from "../../theme";
14+
import { useTailwind, useTheme } from "../../theme";
1515
import { cx } from "../../utils";
1616

1717
import { AvatarProps, AvatarSizes } from "./Avatar";
@@ -27,7 +27,7 @@ interface AnimatedDotProps {
2727
}
2828

2929
const AnimatedDot: React.FC<AnimatedDotProps> = ({ size, delay }) => {
30-
const tailwind = useTheme();
30+
const { ts } = useTailwind();
3131
const avatarStatusTheme = useTheme("avatar");
3232
const dotAnimation = useSharedValue(0);
3333
React.useEffect(() => {
@@ -52,7 +52,7 @@ const AnimatedDot: React.FC<AnimatedDotProps> = ({ size, delay }) => {
5252
return (
5353
<AnimatedBox
5454
style={[
55-
tailwind.style(
55+
ts(
5656
cx(
5757
avatarStatusTheme.status.typing.innerDots.base,
5858
avatarStatusTheme.status.typing.innerDots.size[size],
@@ -68,24 +68,24 @@ const TypingComponent: React.FC<TypingStatusProps> = ({
6868
size,
6969
parentsBackground,
7070
}) => {
71-
const tailwind = useTheme();
71+
const { ts, gc } = useTailwind();
7272
const avatarStatusTheme = useTheme("avatar");
7373

7474
const delays = ["xl", "2xl", "3xl"].includes(size) ? [0, 333, 667] : [0, 500];
7575

7676
return (
7777
<Box
7878
style={[
79-
tailwind.style(cx(avatarStatusTheme.status.typing.container)),
79+
ts(cx(avatarStatusTheme.status.typing.container)),
8080
avatarStatusTheme.status.position,
8181
{
82-
borderColor: tailwind.getColor(parentsBackground),
83-
backgroundColor: tailwind.getColor(parentsBackground),
82+
borderColor: gc(parentsBackground),
83+
backgroundColor: gc(parentsBackground),
8484
},
8585
]}
8686
>
8787
<Box
88-
style={tailwind.style(
88+
style={ts(
8989
cx(
9090
avatarStatusTheme.status.typing.base,
9191
avatarStatusTheme.status.typing.size[size],
@@ -103,20 +103,21 @@ const TypingComponent: React.FC<TypingStatusProps> = ({
103103
export const AvatarStatus: React.FC<
104104
Pick<AvatarProps, "status" | "size" | "parentsBackground">
105105
> = ({ status, size, parentsBackground }) => {
106-
const tailwind = useTheme();
106+
const { ts, gc } = useTailwind();
107+
107108
const avatarStatusTheme = useTheme("avatar");
108109
switch (status) {
109110
case "active": {
110111
return (
111112
<Box
112113
style={[
113-
tailwind.style(cx(avatarStatusTheme.status.active.container)),
114+
ts(cx(avatarStatusTheme.status.active.container)),
114115
avatarStatusTheme.status.position,
115-
{ borderColor: tailwind.getColor(parentsBackground) },
116+
{ borderColor: gc(parentsBackground) },
116117
]}
117118
>
118119
<Box
119-
style={tailwind.style(
120+
style={ts(
120121
cx(
121122
avatarStatusTheme.status.active.base,
122123
avatarStatusTheme.status.active.size[size],
@@ -130,23 +131,21 @@ export const AvatarStatus: React.FC<
130131
return (
131132
<Box
132133
style={[
133-
tailwind.style(cx(avatarStatusTheme.status.away.container)),
134+
ts(cx(avatarStatusTheme.status.away.container)),
134135
avatarStatusTheme.status.position,
135136
{
136-
borderColor: tailwind.getColor(parentsBackground),
137-
backgroundColor: tailwind.getColor(parentsBackground),
137+
borderColor: gc(parentsBackground),
138+
backgroundColor: gc(parentsBackground),
138139
},
139140
]}
140141
>
141-
<Box
142-
style={tailwind.style(cx(avatarStatusTheme.status.away.size[size]))}
143-
>
142+
<Box style={ts(cx(avatarStatusTheme.status.away.size[size]))}>
144143
<Svg width="100%" height="100%" viewBox="0 0 4 4" fill="none">
145144
<Path
146145
fillRule="evenodd"
147146
clipRule="evenodd"
148147
d="M2 4C3.10457 4 4 3.10457 4 2C4 0.895431 3.10457 0 2 0C0.895431 0 0 0.895431 0 2C0 3.10457 0.895431 4 2 4ZM2 3.25C2.69036 3.25 3.25 2.69036 3.25 2C3.25 1.30964 2.69036 0.75 2 0.75C1.30964 0.75 0.75 1.30964 0.75 2C0.75 2.69036 1.30964 3.25 2 3.25Z"
149-
fill={tailwind.getColor("text-gray-600")}
148+
fill={gc("text-gray-600")}
150149
/>
151150
</Svg>
152151
</Box>
@@ -157,23 +156,19 @@ export const AvatarStatus: React.FC<
157156
return (
158157
<Box
159158
style={[
160-
tailwind.style(cx(avatarStatusTheme.status.sleep.container)),
159+
ts(cx(avatarStatusTheme.status.sleep.container)),
161160
avatarStatusTheme.status.position,
162161
{
163-
borderColor: tailwind.getColor(parentsBackground),
164-
backgroundColor: tailwind.getColor(parentsBackground),
162+
borderColor: gc(parentsBackground),
163+
backgroundColor: gc(parentsBackground),
165164
},
166165
]}
167166
>
168-
<Box
169-
style={tailwind.style(
170-
cx(avatarStatusTheme.status.sleep.size[size]),
171-
)}
172-
>
167+
<Box style={ts(cx(avatarStatusTheme.status.sleep.size[size]))}>
173168
<Svg width="100%" height="100%" viewBox="0 0 4 4" fill="none">
174169
<Path
175170
d="M3.97107 2.35964C3.98707 2.27194 3.88243 2.2173 3.8072 2.26514C3.57467 2.413 3.29869 2.49864 3.00271 2.49864C2.17354 2.49864 1.50136 1.82646 1.50136 0.997285C1.50136 0.701308 1.587 0.425334 1.73486 0.192796C1.7827 0.117568 1.72806 0.0129337 1.64036 0.0289269C0.707321 0.199076 0 1.01603 0 1.99819C0 3.10376 0.896241 4 2.00181 4C2.98397 4 3.80092 3.29268 3.97107 2.35964Z"
176-
fill={tailwind.getColor("text-gray-600")}
171+
fill={gc("text-gray-600")}
177172
/>
178173
</Svg>
179174
</Box>
@@ -186,5 +181,4 @@ export const AvatarStatus: React.FC<
186181
);
187182
}
188183
}
189-
return null;
190184
};

0 commit comments

Comments
 (0)