Skip to content

Commit 54e2461

Browse files
Viraj-10Viraj-10
authored
Merge pull request #2291 from gluestack/release/@gluestack-ui/toast@1.0.6
Release/@gluestack UI/toast@1.0.6
2 parents dd90283 + 3cb6ba5 commit 54e2461

File tree

162 files changed

+6571
-37488
lines changed

Some content is hidden

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

162 files changed

+6571
-37488
lines changed

‎example/storybook-nativewind/.ondevice/preview.js‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ export const parameters = {
2424

2525
import { useDarkMode } from '../src/hooks/useDarkMode';
2626
import { Platform } from 'react-native';
27+
import { GestureHandlerRootView } from 'react-native-gesture-handler';
2728

2829
export const decorators = [
2930
withBackgrounds,
@@ -45,11 +46,13 @@ export const decorators = [
4546
}
4647
}
4748
return (
48-
<GluestackUIProvider config={config}>
49-
<Box flex={1} p="$10">
50-
<Story />
51-
</Box>
52-
</GluestackUIProvider>
49+
<GestureHandlerRootView style={{ flex: 1 }}>
50+
<GluestackUIProvider config={config}>
51+
<Box flex={1} p="$10">
52+
<Story />
53+
</Box>
54+
</GluestackUIProvider>
55+
</GestureHandlerRootView>
5356
);
5457
},
5558
];
@@ -75,9 +78,11 @@ addParameters({
7578
}
7679
return (
7780
<DocsContainer context={context}>
78-
<GluestackUIProvider config={config} colorMode={getColorMode()}>
79-
{children}
80-
</GluestackUIProvider>
81+
<GestureHandlerRootView style={{ flex: 1 }}>
82+
<GluestackUIProvider config={config} colorMode={getColorMode()}>
83+
{children}
84+
</GluestackUIProvider>
85+
</GestureHandlerRootView>
8186
</DocsContainer>
8287
);
8388
},

‎example/storybook-nativewind/.storybook/preview.js‎

Lines changed: 43 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { OverlayProvider } from '@gluestack-ui/overlay';
44
import { ToastProvider } from '@gluestack-ui/toast';
55

66
import { GluestackUIProvider as GluestackUIWithNativewindProvider } from '../src/core-components/nativewind/gluestack-ui-provider';
7+
import { GestureHandlerRootView } from 'react-native-gesture-handler';
78

89
// global css getting resolved from babel.config.js
910
import 'global.css';
@@ -33,21 +34,27 @@ export const parameters = {
3334
'Home',
3435
[
3536
'Overview',
36-
['Introduction', 'All Components'],
37+
['Introduction', 'Upgrade to v2'],
3738
'Getting Started',
3839
[
3940
'Installation',
4041
'Tooling Setup',
4142
'VS Code Extensions',
4243
'Figma UI Kit',
44+
'CLI',
45+
'gluestack-ui-nativewind-utils',
4346
],
4447
'Core Concepts',
4548
['Accessibility', 'Universal'],
49+
'Performance',
50+
['Benchmarks'],
4651
'Theme Configuration',
4752
['Default Tokens', 'Customizing Theme', 'Dark Mode'],
4853
],
4954
'Components',
5055
[
56+
'All Components',
57+
['All Components'],
5158
'Typography',
5259
['Heading', 'Text'],
5360
'Layout',
@@ -73,16 +80,23 @@ export const parameters = {
7380
'Overlay',
7481
['AlertDialog', 'Menu', 'Modal', 'Popover', 'Tooltip'],
7582
'Disclosure',
76-
['Actionsheet', 'Accordion'],
83+
['Actionsheet', 'Accordion', 'BottomSheet'],
7784
'Media And Icons',
7885
['Avatar', 'Image', 'Icon'],
7986
'Others',
8087
['Fab', 'Skeleton'],
8188
],
89+
'Hooks',
90+
['useBreakPointValue', 'useMediaQuery'],
8291
'Apps',
8392
['Dashboard App', 'Starter Kit', 'Storybook App'],
8493
'Guides',
85-
['Recipes', ['Linear Gradient'], 'More', ['Changelog']],
94+
[
95+
'Recipes',
96+
['Linear Gradient'],
97+
'More',
98+
['FAQs', 'Releases', 'Roadmap', 'Troubleshooting'],
99+
],
86100
],
87101
icons: [
88102
{
@@ -136,21 +150,27 @@ export const decorators = [
136150

137151
return (
138152
<GluestackUIWithGluestackStyleProvider colorMode={getColorMode()}>
139-
<GluestackUIWithNativewindProvider mode={getColorMode()}>
140-
<OverlayProvider style={{ flex: 1 }}>
141-
<ToastProvider>
142-
<View
143-
style={{
144-
flex: 1,
145-
justifyContent: 'center',
146-
alignItems: 'center',
147-
}}
148-
>
149-
<Story />
150-
</View>
151-
</ToastProvider>
152-
</OverlayProvider>
153-
</GluestackUIWithNativewindProvider>
153+
<GestureHandlerRootView
154+
style={{ flex: 1, display: 'flex', height: '100vh' }}
155+
>
156+
<GluestackUIWithNativewindProvider mode={getColorMode()}>
157+
<OverlayProvider style={{ flex: 1, display: 'flex' }}>
158+
<ToastProvider>
159+
<View
160+
style={{
161+
flex: 1,
162+
display: 'flex',
163+
width: '100%',
164+
justifyContent: 'center',
165+
alignItems: 'center',
166+
}}
167+
>
168+
<Story />
169+
</View>
170+
</ToastProvider>
171+
</OverlayProvider>
172+
</GluestackUIWithNativewindProvider>
173+
</GestureHandlerRootView>
154174
</GluestackUIWithGluestackStyleProvider>
155175
);
156176
},
@@ -165,9 +185,11 @@ addParameters({
165185
<GluestackUIWithGluestackStyleProvider>
166186
<GluestackUIWithNativewindProvider>
167187
<DocsContainer context={context}>
168-
<OverlayProvider style={{ flex: 1 }}>
169-
<ToastProvider>{children}</ToastProvider>
170-
</OverlayProvider>
188+
<GestureHandlerRootView style={{ flex: 1 }}>
189+
<OverlayProvider style={{ flex: 1 }}>
190+
<ToastProvider>{children}</ToastProvider>
191+
</OverlayProvider>
192+
</GestureHandlerRootView>
171193
</DocsContainer>
172194
</GluestackUIWithNativewindProvider>
173195
</GluestackUIWithGluestackStyleProvider>

‎example/storybook-nativewind/babel.config.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,10 @@ module.exports = function (api) {
2222
? path.resolve(__dirname, './global.css')
2323
: path.resolve(__dirname, './global-gluestack.css'),
2424

25+
'@/components/hooks': path.resolve(
26+
__dirname,
27+
'./src/core-components/hooks'
28+
),
2529
'@gluestack-ui/checkbox': path.resolve(
2630
__dirname,
2731
'../../packages/unstyled/checkbox/src'
@@ -78,6 +82,10 @@ module.exports = function (api) {
7882
__dirname,
7983
'../../packages/unstyled/popover/src'
8084
),
85+
'@react-native-aria/overlays': path.resolve(
86+
__dirname,
87+
'../../packages/react-native-aria/overlays/src'
88+
),
8189
'@gluestack-style/react': path.resolve(
8290
__dirname,
8391
'../../packages/styled/react/src'

‎example/storybook-nativewind/package.json‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,9 @@
3232
"@gluestack-style/animation-resolver": "^1.0.4",
3333
"@gluestack-style/react": "^1.0.57",
3434
"@gluestack-ui/config": "^1.1.19",
35-
"@gluestack-ui/themed": "^1.1.34",
35+
"@gluestack-ui/themed": "^1.1.35",
3636
"@gluestack/design-system": "^0.5.36",
37+
"@gorhom/bottom-sheet": "^5.0.0-alpha.10",
3738
"@legendapp/motion": "^2.2.0",
3839
"@react-aria/button": "^3.7.0",
3940
"@react-aria/focus": "^3.11.0",
@@ -62,8 +63,8 @@
6263
"react": "^18.2.0",
6364
"react-dom": "^18.2.0",
6465
"react-native": "0.72.4",
65-
"react-native-gesture-handler": "^2.12.1",
66-
"react-native-reanimated": "~3.3.0",
66+
"react-native-gesture-handler": "~2.14.0",
67+
"react-native-reanimated": "~3.6.2",
6768
"react-native-safe-area-context": "^4.4.1",
6869
"react-native-svg": "13.4.0",
6970
"react-native-vector-icons": "^10.0.0",

‎example/storybook-nativewind/public/images/benchmarks-v2.png‎

165 KB
Loading

‎example/storybook-nativewind/src/apps/dashboard-app/index.stories.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: Dashboard App | gluestack-ui
3-
description: A dashboard app created using all the components of gluestack-ui styled with NativeWind
3+
description: A dashboard app created using all the components of gluestack-ui v2
44
toc: false
55
---
66

@@ -12,7 +12,7 @@ import { kitchensink } from '../../extra-components/nativewind/appConfig';
1212

1313
# Dashboard App
1414

15-
This [Dashboard App](https://ui-example-nativewind.vercel.app/) is built using `gluestack-ui` components styled with `NativeWind`.
15+
This [Dashboard App](https://ui-example-nativewind.vercel.app/) is built using `gluestack-ui v2`.
1616

1717
<Responsiveness {...kitchensink} showMenuItems={true} />
1818

‎example/storybook-nativewind/src/apps/starter-kit/index.stories.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: Starter Kit | gluestack-ui
3-
description: A starter kit created using all the components of gluestack-ui styled with NativeWind
3+
description: A starter kit created using all the components of gluestack-ui v2
44
toc: false
55
---
66

@@ -12,7 +12,7 @@ import { starterKit } from '../../extra-components/nativewind/appConfig';
1212

1313
# Starter Kit
1414

15-
This [Starter Kit](https://gluestack-ui-starter-kits.vercel.app/) is built using `gluestack-ui` components styled with `NativeWind`.
15+
This [Starter Kit](https://gluestack-ui-starter-kits.vercel.app/) is built using `gluestack-ui v2`.
1616

1717
<Responsiveness {...starterKit} />
1818

‎example/storybook-nativewind/src/apps/storybook-app/index.stories.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: Storybook App | gluestack-ui
3-
description: A storybook app created using all the components of gluestack-ui styled with NativeWind
3+
description: A storybook app created using all the components of gluestack-ui v2
44
toc: false
55
---
66

@@ -12,6 +12,6 @@ import { appStoryConfig } from '../../extra-components/nativewind/appConfig';
1212

1313
# Storybook App
1414

15-
This is a [Storybook App](https://storybook-v2.gluestack.io/?path=/story/stories-accordion--accordion) of `gluestack-ui` components styled with `NativeWind`.
15+
This is a [Storybook App](https://storybook-v2.gluestack.io/?path=/story/stories-accordion--accordion) of `gluestack-ui v2`.
1616

1717
<Responsiveness {...appStoryConfig} />

‎example/storybook-nativewind/src/components/Accordion/index.nw.stories.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
---
22
title: Accordion | gluestack-ui | Installation, Usage, and API
33

4-
description: The Accordion component is a versatile and interactive user interface element, designed to efficiently organize and present content in a compact space.
4+
description: Efficiently organize and present content in a compact, interactive interface.
55

66
pageTitle: Accordion
77

8-
pageDescription: The Accordion component is a versatile and interactive user interface element, designed to efficiently organize and present content in a compact space.
8+
pageDescription: Efficiently organize and present content in a compact, interactive interface.
99

1010
showHeader: true
1111
---

‎example/storybook-nativewind/src/components/Actionsheet/Actionsheet.tsx‎

Lines changed: 12 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React from 'react';
22
import { Button, ButtonText } from '@/components/ui/button';
3-
import { Center } from '@/components/ui/center';
43
import {
54
Actionsheet,
65
ActionsheetIcon,
@@ -17,44 +16,40 @@ import {
1716
ActionsheetVirtualizedList,
1817
} from '@/components/ui/actionsheet';
1918

20-
const ActionsheetBasic = ({ showActionsheetProp, ...props }: any) => {
19+
const ActionsheetBasic = ({ ...props }: any) => {
2120
const [showActionsheet, setShowActionsheet] = React.useState(false);
2221

2322
const handleClose = () => setShowActionsheet(false);
2423

2524
return (
26-
<Center>
25+
<>
2726
<Button onPress={() => setShowActionsheet(true)}>
28-
<ButtonText>Open</ButtonText>
27+
<ButtonText>Open Actionsheet</ButtonText>
2928
</Button>
30-
<Actionsheet
31-
isOpen={showActionsheet || showActionsheetProp}
32-
onClose={handleClose}
33-
{...props}
34-
>
29+
<Actionsheet isOpen={showActionsheet} onClose={handleClose} {...props}>
3530
<ActionsheetBackdrop />
3631
<ActionsheetContent>
3732
<ActionsheetDragIndicatorWrapper>
3833
<ActionsheetDragIndicator />
3934
</ActionsheetDragIndicatorWrapper>
4035
<ActionsheetItem onPress={handleClose}>
41-
<ActionsheetItemText>Delete</ActionsheetItemText>
42-
</ActionsheetItem>
43-
<ActionsheetItem isDisabled onPress={handleClose}>
44-
<ActionsheetItemText>Share</ActionsheetItemText>
36+
<ActionsheetItemText>Edit Message</ActionsheetItemText>
4537
</ActionsheetItem>
4638
<ActionsheetItem onPress={handleClose}>
47-
<ActionsheetItemText>Play</ActionsheetItemText>
39+
<ActionsheetItemText>Mark Unread</ActionsheetItemText>
4840
</ActionsheetItem>
4941
<ActionsheetItem onPress={handleClose}>
50-
<ActionsheetItemText>Favourite</ActionsheetItemText>
42+
<ActionsheetItemText>Remind Me</ActionsheetItemText>
5143
</ActionsheetItem>
5244
<ActionsheetItem onPress={handleClose}>
53-
<ActionsheetItemText>Cancel</ActionsheetItemText>
45+
<ActionsheetItemText>Add to Saved Items</ActionsheetItemText>
46+
</ActionsheetItem>
47+
<ActionsheetItem isDisabled onPress={handleClose}>
48+
<ActionsheetItemText>Delete</ActionsheetItemText>
5449
</ActionsheetItem>
5550
</ActionsheetContent>
5651
</Actionsheet>
57-
</Center>
52+
</>
5853
);
5954
};
6055

0 commit comments

Comments
 (0)