Skip to content

Commit aaea89c

Browse files
reesscotreesscot
authored
Merge pull request #2808 from aws-amplify/next-release/auto-sign-in-yarn-lock
2 parents 58ddc79 + 778d252 commit aaea89c

File tree

362 files changed

+22064
-368
lines changed

Some content is hidden

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

362 files changed

+22064
-368
lines changed

‎.github/changeset-presets/bump-react.md

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
---
22
'@aws-amplify/ui': patch
3-
'@aws-amplify/ui-react': patch
3+
'@aws-amplify/ui-react': minor
44
'@aws-amplify/ui-react-core': patch
5+
'@aws-amplify/ui-react-native': major
56
---
67

7-
Version bump for ui, ui-react and ui-react-core packages
8+
Version bump for ui, ui-react, ui-react-native and ui-react-core packages

‎.github/workflows/reusable-e2e.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,7 @@ jobs:
112112
- angular
113113
- vue
114114
- react
115+
- react-native
115116
- react-core
116117

117118
steps:

‎.github/workflows/test-in-app-messaging-prs.yml

Lines changed: 0 additions & 68 deletions
This file was deleted.

‎examples/README.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@ This directory contains example apps for each framework we support.
44

55
## Examples Development
66

7-
1. Create or Update an example at [`examples/{next,vue,angular}/...`](examples)
7+
1. Create or Update an example at [`examples/{next,react-native,vue,angular}/...`](examples)
88

99
For your `aws-exports.js`, you can [reference an existing or create a new environment](../environments/README.md).
1010

11-
1. Run your example at monorep root: `yarn {react,vue,angular}-example dev`
11+
1. Run your example at monorep root: `yarn {react,react-native,vue,angular}-example dev`
1212
1. Visit your example (e.g. <http://localhost:3000/ui/components/authenticator/sign-up-with-username>)
13-
1. Make changes to [`@aws-amplify/ui-{react,vue,angular}`](packages) & save.
13+
1. Make changes to [`@aws-amplify/ui-{react,react-native,vue,angular}`](packages) & save.
1414

1515
Examples should automatically hot-reload your changes in the example.

‎examples/next/pages/ui/components/in-app-messaging/demo/aws-exports.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
// This is a temporary amplify exports file.
2+
// You must supply the config from your own in-app env.
3+
// The Demo app will still function without values below,
4+
// but will throw warnings on some displayMessage calls
5+
6+
const awsmobile = {};
7+
8+
export default awsmobile;

‎examples/next/pages/ui/components/in-app-messaging/demo/index.page.tsx

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
import React, { useState } from 'react';
2+
import { Amplify } from 'aws-amplify';
3+
import {
4+
Button,
5+
defaultDarkModeOverride,
6+
ColorMode,
7+
Divider,
8+
Heading,
9+
InAppMessageDisplay,
10+
InAppMessagingProvider,
11+
CheckboxField,
12+
View,
13+
Radio,
14+
RadioGroupField,
15+
ThemeProvider,
16+
useTheme,
17+
} from '@aws-amplify/ui-react';
18+
import '@aws-amplify/ui-react/styles.css';
19+
20+
import config from './aws-exports';
21+
import { ACTIONS, LAYOUTS, ORIENTATIONS, useInAppDemo } from './utils';
22+
23+
Amplify.configure(config);
24+
25+
function DemoCheckbox({ label, onChange, ...rest }) {
26+
return (
27+
<CheckboxField
28+
{...rest}
29+
label={label}
30+
name={label}
31+
onChange={() => {
32+
onChange((prev) => !prev);
33+
}}
34+
value=""
35+
/>
36+
);
37+
}
38+
39+
function DemoDivider() {
40+
return (
41+
<Divider marginBottom="small" marginTop="small" orientation="horizontal" />
42+
);
43+
}
44+
45+
function DemoRadioGroup({ data, label, onChange, ...rest }) {
46+
return (
47+
<RadioGroupField
48+
{...rest}
49+
label={label}
50+
name={label}
51+
onChange={(e) => {
52+
onChange(e.target.value);
53+
}}
54+
>
55+
{data.map((item) => (
56+
<Radio key={`${label}:${item}`} value={item}>
57+
{item}
58+
</Radio>
59+
))}
60+
</RadioGroupField>
61+
);
62+
}
63+
64+
function Content({ colorMode, setColorMode }) {
65+
const theme = useTheme();
66+
67+
const {
68+
displayDemoMessage,
69+
handleAction,
70+
hasHeader,
71+
hasImage,
72+
hasMessage,
73+
hasPrimaryButton,
74+
hasSecondaryButton,
75+
imageOrientation,
76+
layout,
77+
primaryButtonAction,
78+
secondaryButtonAction,
79+
} = useInAppDemo();
80+
81+
return (
82+
<View backgroundColor={theme.tokens.colors.background.primary}>
83+
<div
84+
style={{
85+
alignItems: 'center',
86+
display: 'flex',
87+
flexDirection: 'column',
88+
}}
89+
>
90+
<Heading level={5} margin="medium">
91+
Configure Demo Message
92+
</Heading>
93+
<DemoRadioGroup
94+
data={['dark', 'light']}
95+
direction="row"
96+
label="Color Mode"
97+
marginBottom="medium"
98+
onChange={setColorMode}
99+
value={colorMode}
100+
/>
101+
<div
102+
style={{
103+
display: 'flex',
104+
justifyContent: 'center',
105+
}}
106+
>
107+
<View marginLeft="small" marginRight="small">
108+
<DemoRadioGroup
109+
data={LAYOUTS}
110+
label="Layout"
111+
onChange={handleAction('setLayout')}
112+
value={layout}
113+
/>
114+
<DemoDivider />
115+
<DemoCheckbox
116+
checked={hasHeader}
117+
label="Has Header"
118+
onChange={handleAction('setHasHeader')}
119+
/>
120+
<DemoDivider />
121+
<DemoCheckbox
122+
checked={hasMessage}
123+
label="Has Message"
124+
onChange={handleAction('setHasMessage')}
125+
/>
126+
<DemoDivider />
127+
<DemoCheckbox
128+
checked={hasImage}
129+
label="Has Image"
130+
onChange={handleAction('setHasImage')}
131+
/>
132+
<DemoDivider />
133+
<DemoRadioGroup
134+
data={ORIENTATIONS}
135+
isDisabled={!hasImage}
136+
label="Image Orientation"
137+
onChange={handleAction('setImageOrientation')}
138+
value={imageOrientation}
139+
/>
140+
</View>
141+
<View marginLeft="small" marginRight="small">
142+
<DemoCheckbox
143+
checked={hasPrimaryButton}
144+
label="Has Primary Button"
145+
onChange={handleAction('setHasPrimaryButton')}
146+
/>
147+
<DemoDivider />
148+
<DemoRadioGroup
149+
data={ACTIONS}
150+
isDisabled={!hasPrimaryButton}
151+
label="Primary Button Action"
152+
onChange={handleAction('setPrimaryButtonAction')}
153+
value={primaryButtonAction}
154+
/>
155+
<DemoDivider />
156+
<DemoCheckbox
157+
checked={hasSecondaryButton}
158+
isDisabled={!hasPrimaryButton}
159+
label="Has Secondary Button"
160+
onChange={handleAction('setHasSecondaryButton')}
161+
/>
162+
<DemoDivider />
163+
<DemoRadioGroup
164+
data={ACTIONS}
165+
isDisabled={!hasPrimaryButton || !hasSecondaryButton}
166+
label="Secondary Button Action"
167+
onChange={handleAction('setSecondaryButtonAction')}
168+
value={secondaryButtonAction}
169+
/>
170+
<DemoDivider />
171+
</View>
172+
</div>
173+
<Button margin="medium" onClick={displayDemoMessage}>
174+
Display Demo Message
175+
</Button>
176+
</div>
177+
</View>
178+
);
179+
}
180+
181+
export default function App() {
182+
const [colorMode, setColorMode] = useState<ColorMode>('dark');
183+
return (
184+
<ThemeProvider
185+
colorMode={colorMode}
186+
theme={{ overrides: [defaultDarkModeOverride], name: 'dark' }}
187+
>
188+
<InAppMessagingProvider>
189+
<InAppMessageDisplay />
190+
<Content colorMode={colorMode} setColorMode={setColorMode} />
191+
</InAppMessagingProvider>
192+
</ThemeProvider>
193+
);
194+
}

0 commit comments

Comments
 (0)