Skip to content

Commit 534f25b

Browse files
bobborbobbor
authored
feat: add docs for svelte (#6761)
* feat: add docs for svelte * Create beige-coins-type.md * test: update snapshots * chore: address review feedback
1 parent 70f0cb1 commit 534f25b

Some content is hidden

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

46 files changed

+824
-146
lines changed

‎.changeset/beige-coins-type.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@aws-amplify/ui-docs": patch
3+
---
4+
5+
feat: add docs for svelte

‎docs/__tests__/__snapshots__/sitemap.test.ts.snap‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,15 @@ exports[`Sitemap Snapshot 1`] = `
135135
/react/theming/responsive,
136136
/react/theming/style-props,
137137
/react/theming/theme-provider,
138+
/svelte,
139+
/svelte/connected-components/authenticator,
140+
/svelte/connected-components/authenticator/advanced,
141+
/svelte/connected-components/authenticator/configuration,
142+
/svelte/connected-components/authenticator/customization,
143+
/svelte/getting-started/accessibility,
144+
/svelte/getting-started/installation,
145+
/svelte/getting-started/introduction,
146+
/svelte/getting-started/usage,
138147
/swift,
139148
/swift/connected-components/authenticator,
140149
/swift/connected-components/authenticator/configuration,

‎docs/src/components/FunctionOverridesTable.tsx‎

Lines changed: 101 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -26,16 +26,21 @@ export const FunctionOverridesTable = ({ framework }) => {
2626
}
2727

2828
const latestVersion = CURRENT_MAJOR_VERSIONS[framework].toString();
29-
const amplify5FrameworkVersion = AMPLIFY_5_UI_VERSIONS[framework].toString();
29+
const amplify5FrameworkVersion =
30+
framework in AMPLIFY_5_UI_VERSIONS
31+
? AMPLIFY_5_UI_VERSIONS[framework].toString()
32+
: null;
3033
return (
3134
<Tabs.Container defaultValue={latestVersion}>
3235
<Tabs.List>
3336
<Tabs.Item value={latestVersion}>
3437
<code>@aws-amplify/ui-{framework}</code> v{latestVersion} (latest)
3538
</Tabs.Item>
36-
<Tabs.Item value={amplify5FrameworkVersion}>
37-
<code>@aws-amplify/ui-{framework}</code> v{amplify5FrameworkVersion}
38-
</Tabs.Item>
39+
{amplify5FrameworkVersion && (
40+
<Tabs.Item value={amplify5FrameworkVersion}>
41+
<code>@aws-amplify/ui-{framework}</code> v{amplify5FrameworkVersion}
42+
</Tabs.Item>
43+
)}
3944
</Tabs.List>
4045
<Tabs.Panel value={latestVersion}>
4146
<ResponsiveTable labelWidth="10rem">
@@ -127,96 +132,98 @@ export const FunctionOverridesTable = ({ framework }) => {
127132
</TableBody>
128133
</ResponsiveTable>
129134
</Tabs.Panel>
130-
<Tabs.Panel value={amplify5FrameworkVersion}>
131-
<ResponsiveTable labelWidth="10rem">
132-
<TableHead>
133-
<TableRow>
134-
<TableCell as="th">Function Call</TableCell>
135-
<TableCell as="th">Override Name</TableCell>
136-
<TableCell as="th">formData Properties</TableCell>
137-
</TableRow>
138-
</TableHead>
139-
<TableBody>
140-
<TableRow>
141-
<ResponsiveTableCell label="Function Call">
142-
<code>Auth.signUp</code>
143-
</ResponsiveTableCell>
144-
<ResponsiveTableCell label="Override Name">
145-
<code>handleSignUp</code>
146-
</ResponsiveTableCell>
147-
<ResponsiveTableCell label="formData Properties">
148-
<code>{'{username, password, attributes}'}</code>
149-
</ResponsiveTableCell>
150-
</TableRow>
151-
<TableRow>
152-
<ResponsiveTableCell label="Function Call">
153-
<code>Auth.signIn</code>
154-
</ResponsiveTableCell>
155-
<ResponsiveTableCell label="Override Name">
156-
<code>handleSignIn</code>
157-
</ResponsiveTableCell>
158-
<ResponsiveTableCell label="formData Properties">
159-
<code>{'{username, password}'}</code>
160-
</ResponsiveTableCell>
161-
</TableRow>
162-
<TableRow>
163-
<ResponsiveTableCell label="Function Call">
164-
<code>Auth.confirmSignIn</code>
165-
</ResponsiveTableCell>
166-
<ResponsiveTableCell label="Override Name">
167-
<code>handleConfirmSignIn</code>
168-
</ResponsiveTableCell>
169-
<ResponsiveTableCell label="formData Properties">
170-
<code>{'{user, code, mfaType}'}</code>
171-
</ResponsiveTableCell>
172-
</TableRow>
173-
<TableRow>
174-
<ResponsiveTableCell label="Function Call">
175-
<code>Auth.confirmSignUp</code>
176-
</ResponsiveTableCell>
177-
<ResponsiveTableCell label="Override Name">
178-
<code>handleConfirmSignUp</code>
179-
</ResponsiveTableCell>
180-
<ResponsiveTableCell label="formData Properties">
181-
<code>{'{username, code}'}</code>
182-
</ResponsiveTableCell>
183-
</TableRow>
184-
<TableRow>
185-
<ResponsiveTableCell label="Function Call">
186-
<code>Auth.resendSignUpCode</code>
187-
</ResponsiveTableCell>
188-
<ResponsiveTableCell label="Override Name">
189-
<code>handleResendSignUpCode</code>
190-
</ResponsiveTableCell>
191-
<ResponsiveTableCell label="formData Properties">
192-
<code>{'{username}'}</code>
193-
</ResponsiveTableCell>
194-
</TableRow>
195-
<TableRow>
196-
<ResponsiveTableCell label="Function Call">
197-
<code>Auth.forgotPassword</code>
198-
</ResponsiveTableCell>
199-
<ResponsiveTableCell label="Override Name">
200-
<code>handleForgotPassword</code>
201-
</ResponsiveTableCell>
202-
<ResponsiveTableCell label="formData Properties">
203-
<code>{`{username}`}</code>
204-
</ResponsiveTableCell>
205-
</TableRow>
206-
<TableRow>
207-
<ResponsiveTableCell label="Function Call">
208-
<code>Auth.forgotPasswordSubmit</code>
209-
</ResponsiveTableCell>
210-
<ResponsiveTableCell label="Override Name">
211-
<code>handleForgotPasswordSubmit</code>
212-
</ResponsiveTableCell>
213-
<ResponsiveTableCell label="formData Properties">
214-
<code>{'{username, code, password}'}</code>
215-
</ResponsiveTableCell>
216-
</TableRow>
217-
</TableBody>
218-
</ResponsiveTable>
219-
</Tabs.Panel>
135+
{amplify5FrameworkVersion && (
136+
<Tabs.Panel value={amplify5FrameworkVersion}>
137+
<ResponsiveTable labelWidth="10rem">
138+
<TableHead>
139+
<TableRow>
140+
<TableCell as="th">Function Call</TableCell>
141+
<TableCell as="th">Override Name</TableCell>
142+
<TableCell as="th">formData Properties</TableCell>
143+
</TableRow>
144+
</TableHead>
145+
<TableBody>
146+
<TableRow>
147+
<ResponsiveTableCell label="Function Call">
148+
<code>Auth.signUp</code>
149+
</ResponsiveTableCell>
150+
<ResponsiveTableCell label="Override Name">
151+
<code>handleSignUp</code>
152+
</ResponsiveTableCell>
153+
<ResponsiveTableCell label="formData Properties">
154+
<code>{'{username, password, attributes}'}</code>
155+
</ResponsiveTableCell>
156+
</TableRow>
157+
<TableRow>
158+
<ResponsiveTableCell label="Function Call">
159+
<code>Auth.signIn</code>
160+
</ResponsiveTableCell>
161+
<ResponsiveTableCell label="Override Name">
162+
<code>handleSignIn</code>
163+
</ResponsiveTableCell>
164+
<ResponsiveTableCell label="formData Properties">
165+
<code>{'{username, password}'}</code>
166+
</ResponsiveTableCell>
167+
</TableRow>
168+
<TableRow>
169+
<ResponsiveTableCell label="Function Call">
170+
<code>Auth.confirmSignIn</code>
171+
</ResponsiveTableCell>
172+
<ResponsiveTableCell label="Override Name">
173+
<code>handleConfirmSignIn</code>
174+
</ResponsiveTableCell>
175+
<ResponsiveTableCell label="formData Properties">
176+
<code>{'{user, code, mfaType}'}</code>
177+
</ResponsiveTableCell>
178+
</TableRow>
179+
<TableRow>
180+
<ResponsiveTableCell label="Function Call">
181+
<code>Auth.confirmSignUp</code>
182+
</ResponsiveTableCell>
183+
<ResponsiveTableCell label="Override Name">
184+
<code>handleConfirmSignUp</code>
185+
</ResponsiveTableCell>
186+
<ResponsiveTableCell label="formData Properties">
187+
<code>{'{username, code}'}</code>
188+
</ResponsiveTableCell>
189+
</TableRow>
190+
<TableRow>
191+
<ResponsiveTableCell label="Function Call">
192+
<code>Auth.resendSignUpCode</code>
193+
</ResponsiveTableCell>
194+
<ResponsiveTableCell label="Override Name">
195+
<code>handleResendSignUpCode</code>
196+
</ResponsiveTableCell>
197+
<ResponsiveTableCell label="formData Properties">
198+
<code>{'{username}'}</code>
199+
</ResponsiveTableCell>
200+
</TableRow>
201+
<TableRow>
202+
<ResponsiveTableCell label="Function Call">
203+
<code>Auth.forgotPassword</code>
204+
</ResponsiveTableCell>
205+
<ResponsiveTableCell label="Override Name">
206+
<code>handleForgotPassword</code>
207+
</ResponsiveTableCell>
208+
<ResponsiveTableCell label="formData Properties">
209+
<code>{`{username}`}</code>
210+
</ResponsiveTableCell>
211+
</TableRow>
212+
<TableRow>
213+
<ResponsiveTableCell label="Function Call">
214+
<code>Auth.forgotPasswordSubmit</code>
215+
</ResponsiveTableCell>
216+
<ResponsiveTableCell label="Override Name">
217+
<code>handleForgotPasswordSubmit</code>
218+
</ResponsiveTableCell>
219+
<ResponsiveTableCell label="formData Properties">
220+
<code>{'{username, code, password}'}</code>
221+
</ResponsiveTableCell>
222+
</TableRow>
223+
</TableBody>
224+
</ResponsiveTable>
225+
</Tabs.Panel>
226+
)}
220227
</Tabs.Container>
221228
);
222229
};

‎docs/src/components/Layout/Sidebar.tsx‎

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,26 @@
11
import * as React from 'react';
22
import { useRouter } from 'next/router';
33
import {
4-
MdOutlineChecklist,
5-
MdOutlineWidgets,
6-
MdOutlineAutoAwesome,
7-
MdWebAssetOff,
84
MdOutlineArticle,
5+
MdOutlineAutoAwesome,
6+
MdOutlineChecklist,
97
MdOutlinePower,
8+
MdOutlineWidgets,
109
} from 'react-icons/md';
1110
import {
12-
Text,
13-
Flex,
14-
Collection,
1511
Accordion,
12+
Collection,
13+
Flex,
14+
Text,
1615
useTheme,
1716
} from '@aws-amplify/ui-react';
1817
import {
1918
ComponentNavItem,
2019
connectedComponents,
21-
guides,
22-
theming,
2320
gettingStarted,
21+
guides,
2422
primitiveComponents,
23+
theming,
2524
} from '../../data/links';
2625

2726
import NextLink from 'next/link';
@@ -142,11 +141,18 @@ const SecondaryNav = (props) => {
142141
const isAndroid = platform === 'android';
143142
const isSwift = platform === 'swift';
144143
const isAngular = platform === 'angular';
144+
const isSvelte = platform === 'svelte';
145145
const isVue = platform === 'vue';
146146

147-
const hideTheming = isAndroid || isSwift;
147+
const hideTheming = isAndroid || isSwift || isSvelte;
148148
const hideGuidesExpander =
149-
isFlutter || isReactNative || isAndroid || isSwift || isAngular || isVue;
149+
isFlutter ||
150+
isReactNative ||
151+
isAndroid ||
152+
isSwift ||
153+
isAngular ||
154+
isVue ||
155+
isSvelte;
150156

151157
return (
152158
<Accordion.Container value={value} onValueChange={setValue}>

‎docs/src/components/Logo.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,30 @@ export const VueLogo = (props) => (
5252
</Icon>
5353
);
5454

55+
export const SvelteLogo = (props) => (
56+
<Icon {...props} viewBox={integrationViewbox}>
57+
<g transform="scale(0.55) translate(5.00000000, 5.00000000)">
58+
<path
59+
fill="#FF3E00"
60+
d="M91.8,15.6C80.9-0.1,59.2-4.7,43.6,5.2L16.1,22.8C8.6,27.5,3.4,35.2,1.9,43.9c-1.3,7.3-0.2,14.8,3.3,21.3
61+
c-2.4,3.6-4,7.6-4.7,11.8c-1.6,8.9,0.5,18.1,5.7,25.4c11,15.7,32.6,20.3,48.2,10.4l27.5-17.5c7.5-4.7,12.7-12.4,14.2-21.1
62+
c1.3-7.3,0.2-14.8-3.3-21.3c2.4-3.6,4-7.6,4.7-11.8C99.2,32.1,97.1,22.9,91.8,15.6"
63+
/>
64+
<path
65+
fill="#FFFFFF"
66+
d="M40.9,103.9c-8.9,2.3-18.2-1.2-23.4-8.7c-3.2-4.4-4.4-9.9-3.5-15.3c0.2-0.9,0.4-1.7,0.6-2.6l0.5-1.6l1.4,1
67+
c3.3,2.4,6.9,4.2,10.8,5.4l1,0.3l-0.1,1c-0.1,1.4,0.3,2.9,1.1,4.1c1.6,2.3,4.4,3.4,7.1,2.7c0.6-0.2,1.2-0.4,1.7-0.7L65.5,72
68+
c1.4-0.9,2.3-2.2,2.6-3.8c0.3-1.6-0.1-3.3-1-4.6c-1.6-2.3-4.4-3.3-7.1-2.6c-0.6,0.2-1.2,0.4-1.7,0.7l-10.5,6.7
69+
c-1.7,1.1-3.6,1.9-5.6,2.4c-8.9,2.3-18.2-1.2-23.4-8.7c-3.1-4.4-4.4-9.9-3.4-15.3c0.9-5.2,4.1-9.9,8.6-12.7l27.5-17.5
70+
c1.7-1.1,3.6-1.9,5.6-2.5c8.9-2.3,18.2,1.2,23.4,8.7c3.2,4.4,4.4,9.9,3.5,15.3c-0.2,0.9-0.4,1.7-0.7,2.6l-0.5,1.6l-1.4-1
71+
c-3.3-2.4-6.9-4.2-10.8-5.4l-1-0.3l0.1-1c0.1-1.4-0.3-2.9-1.1-4.1c-1.6-2.3-4.4-3.3-7.1-2.6c-0.6,0.2-1.2,0.4-1.7,0.7L32.4,46.1
72+
c-1.4,0.9-2.3,2.2-2.6,3.8s0.1,3.3,1,4.6c1.6,2.3,4.4,3.3,7.1,2.6c0.6-0.2,1.2-0.4,1.7-0.7l10.5-6.7c1.7-1.1,3.6-1.9,5.6-2.5
73+
c8.9-2.3,18.2,1.2,23.4,8.7c3.2,4.4,4.4,9.9,3.5,15.3c-0.9,5.2-4.1,9.9-8.6,12.7l-27.5,17.5C44.8,102.5,42.9,103.3,40.9,103.9"
74+
/>
75+
</g>
76+
</Icon>
77+
);
78+
5579
export const FlutterLogo = (props) => (
5680
<Icon
5781
{...props}
@@ -127,6 +151,8 @@ export const FrameworkLogo = ({ framework, ...rest }) => {
127151
return <AndroidLogo {...rest} />;
128152
case 'swift':
129153
return <SwiftLogo {...rest} />;
154+
case 'svelte':
155+
return <SvelteLogo {...rest} />;
130156
default:
131157
return <ReactLogo {...rest} />;
132158
}

‎docs/src/components/MigrationChanges/ForgotPasswordCallout.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,12 @@ export const ForgotPasswordCallout = ({ framework }) => {
1212
}
1313

1414
const isReactNative = framework === 'react-native';
15-
const amplify5FrameworkVersion = AMPLIFY_5_UI_VERSIONS[framework];
15+
let amplify5FrameworkVersion = null;
16+
if (framework in AMPLIFY_5_UI_VERSIONS) {
17+
amplify5FrameworkVersion = AMPLIFY_5_UI_VERSIONS[framework];
18+
}
19+
20+
if (!amplify5FrameworkVersion) return null;
1621

1722
return (
1823
<Alert

‎docs/src/components/home/sections/AuthenticationSection.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -132,13 +132,33 @@ function App() {
132132
}
133133
134134
export default App;
135+
`,
136+
svelte: `<script lang="ts">
137+
import { Amplify } from 'aws-amplify';
138+
import { Authenticator } from '@aws-amplify/ui-svelte'
139+
import "@aws-amplify/ui-svelte/styles.css";
140+
// on gen1
141+
import awsconfig from './aws-exports';
142+
// on gen2
143+
import awsconfig from './amplify-output.json';
144+
145+
Amplify.configure(awsconfig);
146+
</script>
147+
148+
<Authenticator>
149+
{#snippet children({ user, signOut })}
150+
<h1>Hello {user.username}!</h1>
151+
<button onclick={signOut}>Sign Out</button>
152+
{/snippet}
153+
</Authenticator>
135154
`,
136155
};
137156

138157
const languages = {
139158
react: 'jsx',
140159
angular: 'javascript', // is this the best primsa language?
141160
vue: 'javascript',
161+
svelte: 'html',
142162
flutter: 'dart',
143163
'react-native': 'jsx',
144164
};
@@ -147,6 +167,7 @@ const fileName = {
147167
react: 'index.tsx',
148168
angular: 'index.html',
149169
vue: 'index.vue',
170+
svelte: 'index.svelte',
150171
flutter: 'main.dart',
151172
'react-native': 'App.jsx',
152173
};

0 commit comments

Comments
 (0)