diff --git a/.changeset/beige-coins-type.md b/.changeset/beige-coins-type.md new file mode 100644 index 00000000000..eb44838fd06 --- /dev/null +++ b/.changeset/beige-coins-type.md @@ -0,0 +1,5 @@ +--- +"@aws-amplify/ui-docs": patch +--- + +feat: add docs for svelte diff --git a/docs/__tests__/__snapshots__/sitemap.test.ts.snap b/docs/__tests__/__snapshots__/sitemap.test.ts.snap index 83a7b256462..b22d4cc1711 100644 --- a/docs/__tests__/__snapshots__/sitemap.test.ts.snap +++ b/docs/__tests__/__snapshots__/sitemap.test.ts.snap @@ -135,6 +135,15 @@ exports[`Sitemap Snapshot 1`] = ` /react/theming/responsive, /react/theming/style-props, /react/theming/theme-provider, +/svelte, +/svelte/connected-components/authenticator, +/svelte/connected-components/authenticator/advanced, +/svelte/connected-components/authenticator/configuration, +/svelte/connected-components/authenticator/customization, +/svelte/getting-started/accessibility, +/svelte/getting-started/installation, +/svelte/getting-started/introduction, +/svelte/getting-started/usage, /swift, /swift/connected-components/authenticator, /swift/connected-components/authenticator/configuration, diff --git a/docs/src/components/FunctionOverridesTable.tsx b/docs/src/components/FunctionOverridesTable.tsx index c048126f38c..e6befd9239a 100644 --- a/docs/src/components/FunctionOverridesTable.tsx +++ b/docs/src/components/FunctionOverridesTable.tsx @@ -26,16 +26,21 @@ export const FunctionOverridesTable = ({ framework }) => { } const latestVersion = CURRENT_MAJOR_VERSIONS[framework].toString(); - const amplify5FrameworkVersion = AMPLIFY_5_UI_VERSIONS[framework].toString(); + const amplify5FrameworkVersion = + framework in AMPLIFY_5_UI_VERSIONS + ? AMPLIFY_5_UI_VERSIONS[framework].toString() + : null; return ( @aws-amplify/ui-{framework} v{latestVersion} (latest) - - @aws-amplify/ui-{framework} v{amplify5FrameworkVersion} - + {amplify5FrameworkVersion && ( + + @aws-amplify/ui-{framework} v{amplify5FrameworkVersion} + + )} @@ -127,96 +132,98 @@ export const FunctionOverridesTable = ({ framework }) => { - - - - - Function Call - Override Name - formData Properties - - - - - - Auth.signUp - - - handleSignUp - - - {'{username, password, attributes}'} - - - - - Auth.signIn - - - handleSignIn - - - {'{username, password}'} - - - - - Auth.confirmSignIn - - - handleConfirmSignIn - - - {'{user, code, mfaType}'} - - - - - Auth.confirmSignUp - - - handleConfirmSignUp - - - {'{username, code}'} - - - - - Auth.resendSignUpCode - - - handleResendSignUpCode - - - {'{username}'} - - - - - Auth.forgotPassword - - - handleForgotPassword - - - {`{username}`} - - - - - Auth.forgotPasswordSubmit - - - handleForgotPasswordSubmit - - - {'{username, code, password}'} - - - - - + {amplify5FrameworkVersion && ( + + + + + Function Call + Override Name + formData Properties + + + + + + Auth.signUp + + + handleSignUp + + + {'{username, password, attributes}'} + + + + + Auth.signIn + + + handleSignIn + + + {'{username, password}'} + + + + + Auth.confirmSignIn + + + handleConfirmSignIn + + + {'{user, code, mfaType}'} + + + + + Auth.confirmSignUp + + + handleConfirmSignUp + + + {'{username, code}'} + + + + + Auth.resendSignUpCode + + + handleResendSignUpCode + + + {'{username}'} + + + + + Auth.forgotPassword + + + handleForgotPassword + + + {`{username}`} + + + + + Auth.forgotPasswordSubmit + + + handleForgotPasswordSubmit + + + {'{username, code, password}'} + + + + + + )} ); }; diff --git a/docs/src/components/Layout/Sidebar.tsx b/docs/src/components/Layout/Sidebar.tsx index b6a6966b967..d58c806c572 100644 --- a/docs/src/components/Layout/Sidebar.tsx +++ b/docs/src/components/Layout/Sidebar.tsx @@ -1,27 +1,26 @@ import * as React from 'react'; import { useRouter } from 'next/router'; import { - MdOutlineChecklist, - MdOutlineWidgets, - MdOutlineAutoAwesome, - MdWebAssetOff, MdOutlineArticle, + MdOutlineAutoAwesome, + MdOutlineChecklist, MdOutlinePower, + MdOutlineWidgets, } from 'react-icons/md'; import { - Text, - Flex, - Collection, Accordion, + Collection, + Flex, + Text, useTheme, } from '@aws-amplify/ui-react'; import { ComponentNavItem, connectedComponents, - guides, - theming, gettingStarted, + guides, primitiveComponents, + theming, } from '../../data/links'; import NextLink from 'next/link'; @@ -142,11 +141,18 @@ const SecondaryNav = (props) => { const isAndroid = platform === 'android'; const isSwift = platform === 'swift'; const isAngular = platform === 'angular'; + const isSvelte = platform === 'svelte'; const isVue = platform === 'vue'; - const hideTheming = isAndroid || isSwift; + const hideTheming = isAndroid || isSwift || isSvelte; const hideGuidesExpander = - isFlutter || isReactNative || isAndroid || isSwift || isAngular || isVue; + isFlutter || + isReactNative || + isAndroid || + isSwift || + isAngular || + isVue || + isSvelte; return ( diff --git a/docs/src/components/Logo.tsx b/docs/src/components/Logo.tsx index fe997a7a56c..81eaaf064ea 100644 --- a/docs/src/components/Logo.tsx +++ b/docs/src/components/Logo.tsx @@ -52,6 +52,30 @@ export const VueLogo = (props) => ( ); +export const SvelteLogo = (props) => ( + + + + + + +); + export const FlutterLogo = (props) => ( { return ; case 'swift': return ; + case 'svelte': + return ; default: return ; } diff --git a/docs/src/components/MigrationChanges/ForgotPasswordCallout.tsx b/docs/src/components/MigrationChanges/ForgotPasswordCallout.tsx index 4e77f0a08f6..a67391486da 100644 --- a/docs/src/components/MigrationChanges/ForgotPasswordCallout.tsx +++ b/docs/src/components/MigrationChanges/ForgotPasswordCallout.tsx @@ -12,7 +12,12 @@ export const ForgotPasswordCallout = ({ framework }) => { } const isReactNative = framework === 'react-native'; - const amplify5FrameworkVersion = AMPLIFY_5_UI_VERSIONS[framework]; + let amplify5FrameworkVersion = null; + if (framework in AMPLIFY_5_UI_VERSIONS) { + amplify5FrameworkVersion = AMPLIFY_5_UI_VERSIONS[framework]; + } + + if (!amplify5FrameworkVersion) return null; return ( + import { Amplify } from 'aws-amplify'; + import { Authenticator } from '@aws-amplify/ui-svelte' + import "@aws-amplify/ui-svelte/styles.css"; + // on gen1 + import awsconfig from './aws-exports'; + // on gen2 + import awsconfig from './amplify-output.json'; + + Amplify.configure(awsconfig); + + + + {#snippet children({ user, signOut })} +

Hello {user.username}!

+ + {/snippet} + `, }; @@ -139,6 +158,7 @@ const languages = { react: 'jsx', angular: 'javascript', // is this the best primsa language? vue: 'javascript', + svelte: 'html', flutter: 'dart', 'react-native': 'jsx', }; @@ -147,6 +167,7 @@ const fileName = { react: 'index.tsx', angular: 'index.html', vue: 'index.vue', + svelte: 'index.svelte', flutter: 'main.dart', 'react-native': 'App.jsx', }; diff --git a/docs/src/data/frameworks.ts b/docs/src/data/frameworks.ts index 447ebd58868..6157dc72dd9 100644 --- a/docs/src/data/frameworks.ts +++ b/docs/src/data/frameworks.ts @@ -5,6 +5,7 @@ export type Framework = | 'react' | 'react-native' | 'swift' + | 'svelte' | 'vue'; export type Frameworks = Framework[]; @@ -14,6 +15,7 @@ export const FRAMEWORKS: Frameworks = [ 'flutter', 'react', 'react-native', + 'svelte', 'swift', 'vue', ]; @@ -25,6 +27,7 @@ export const FRAMEWORK_DISPLAY_NAMES: Record = { react: 'React', 'react-native': 'React Native', swift: 'Swift', + svelte: 'Svelte', vue: 'Vue', }; @@ -33,6 +36,7 @@ export const CURRENT_MAJOR_VERSIONS: Record = { 'aws-amplify': 6, react: 6, 'react-native': 2, + svelte: 1, vue: 4, }; @@ -59,6 +63,7 @@ export const REACT_NATIVE_DEPENDENCIES = export const FRAMEWORK_INSTALL_SCRIPTS = { react: 'npm i @aws-amplify/ui-react aws-amplify', vue: 'npm i @aws-amplify/ui-vue aws-amplify', + svelte: 'npm i @aws-amplify/ui-svelte aws-amplify', angular: 'npm i @aws-amplify/ui-angular aws-amplify', flutter: 'flutter pub add amplify_authenticator', android: "implementation 'com.amplifyframework.ui:liveness:1.5.0'", diff --git a/docs/src/data/links.tsx b/docs/src/data/links.tsx index ef68fafba0e..c03d814dd89 100644 --- a/docs/src/data/links.tsx +++ b/docs/src/data/links.tsx @@ -121,6 +121,7 @@ export const connectedComponents: ComponentNavItem[] = [ 'flutter', 'react-native', 'swift', + 'svelte', ], }, { @@ -134,6 +135,7 @@ export const connectedComponents: ComponentNavItem[] = [ 'flutter', 'react-native', 'swift', + 'svelte', ], tertiary: true, }, @@ -148,13 +150,14 @@ export const connectedComponents: ComponentNavItem[] = [ 'flutter', 'react-native', 'swift', + 'svelte', ], tertiary: true, }, { href: '/connected-components/authenticator/advanced', label: 'Advanced Usage', - platforms: ['react', 'vue', 'angular', 'react-native'], + platforms: ['react', 'vue', 'angular', 'react-native', 'svelte'], tertiary: true, }, { @@ -585,6 +588,7 @@ export const gettingStarted: ComponentNavItem[] = [ 'react-native', 'android', 'swift', + 'svelte', ], }, { @@ -597,12 +601,13 @@ export const gettingStarted: ComponentNavItem[] = [ 'flutter', 'react-native', 'android', + 'svelte', ], }, { href: '/getting-started/usage', label: 'Usage', - platforms: ['react', 'vue', 'angular', 'react-native'], + platforms: ['react', 'vue', 'angular', 'react-native', 'svelte'], }, { href: '/getting-started/usage/nextjs', @@ -624,7 +629,7 @@ export const gettingStarted: ComponentNavItem[] = [ { href: '/getting-started/accessibility', label: 'Accessibility', - platforms: ['react', 'vue', 'angular'], + platforms: ['react', 'vue', 'angular', 'svelte'], }, { href: '/getting-started/internationalization', diff --git a/docs/src/pages/[platform]/connected-components/authenticator/advanced/current-route.svelte.mdx b/docs/src/pages/[platform]/connected-components/authenticator/advanced/current-route.svelte.mdx new file mode 100644 index 00000000000..a3af88d7f36 --- /dev/null +++ b/docs/src/pages/[platform]/connected-components/authenticator/advanced/current-route.svelte.mdx @@ -0,0 +1,42 @@ +import RoutesList from './routes-list.mdx'; + +You can use `useAuthenticator` composable to access `route` string that represents the current `authState`. They can be one of: + + + +```html + + + +{#if authenticator.route === 'authenticated'} + +{/if} +``` + +### Authentication Check + +If you just need to check if you're authenticated or not, you can use the more straightforward `useAuthenticator` composable to access the `authStatus` string. The `authStatus` string can represent the following states: + +- `configuring` +- `authenticated` +- `unauthenticated` + +> The `configuring` state only occurs when the `Authenticator` is first loading. + +```html + + + +{#if authenticator.authStatus === 'configuring'} + +{/if} +{#if authenticator.authStatus === 'authenticated'} + +{/if} +``` diff --git a/docs/src/pages/[platform]/connected-components/authenticator/advanced/current-user.svelte.mdx b/docs/src/pages/[platform]/connected-components/authenticator/advanced/current-user.svelte.mdx new file mode 100644 index 00000000000..178a08105be --- /dev/null +++ b/docs/src/pages/[platform]/connected-components/authenticator/advanced/current-user.svelte.mdx @@ -0,0 +1,14 @@ +You can use `useAuthenticator` composable to access current signed in `user`. If no user is authenticated, it'll return `undefined`. + +```html{1,5-8} + + + +{#if a.route === 'authenticated'} +

Hello { a.user?.username }!

+ +{/if} +``` diff --git a/docs/src/pages/[platform]/connected-components/authenticator/advanced/example.svelte.mdx b/docs/src/pages/[platform]/connected-components/authenticator/advanced/example.svelte.mdx new file mode 100644 index 00000000000..c727d1b7d9b --- /dev/null +++ b/docs/src/pages/[platform]/connected-components/authenticator/advanced/example.svelte.mdx @@ -0,0 +1,34 @@ +```html{5} + + +{#snippet signInFooter()} +
+ +
+{/snippet} + + + {#snippet children({ user, signOut })} +

Hello {user.username}!

+ + {/snippet} + +``` diff --git a/docs/src/pages/[platform]/connected-components/authenticator/advanced/index.page.mdx b/docs/src/pages/[platform]/connected-components/authenticator/advanced/index.page.mdx index f4f17afd832..3dd949b8c48 100644 --- a/docs/src/pages/[platform]/connected-components/authenticator/advanced/index.page.mdx +++ b/docs/src/pages/[platform]/connected-components/authenticator/advanced/index.page.mdx @@ -2,7 +2,7 @@ title: Advanced Usage metaTitle: Advanced Usage description: Access Authenticator UI component state outside of the UI component -supportedFrameworks: react|angular|vue|react-native +supportedFrameworks: react|angular|vue|react-native|svelte --- import { useRouter } from 'next/router'; @@ -15,22 +15,27 @@ import UseAuthenticatorAngular from './useAuthenticator.angular.mdx'; import UseAuthenticatorReactNative from './useAuthenticator.react-native.mdx'; import UseAuthenticatorReact from './useAuthenticator.react.mdx'; import UseAuthenticatorVue from './useAuthenticator.vue.mdx'; +import UseAuthenticatorSvelte from './useAuthenticator.svelte.mdx'; import CurrentRouteAngular from './current-route.angular.mdx'; import CurrentRouteReactNative from './current-route.react-native.mdx'; import CurrentRouteReact from './current-route.react.mdx'; import CurrentRouteVue from './current-route.vue.mdx'; +import CurrentRouteSvelte from './current-route.svelte.mdx'; import CurrentUserAngular from './current-user.angular.mdx'; import CurrentUserReactNative from './current-user.react-native.mdx'; import CurrentUserReact from './current-user.react.mdx'; import CurrentUserVue from './current-user.vue.mdx'; +import CurrentUserSvelte from './current-user.svelte.mdx'; import TriggerAngular from './trigger-transitions.angular.mdx'; import TriggerReactNative from './trigger-transitions.react-native.mdx'; import TriggerReact from './trigger-transitions.react.mdx'; import TriggerVue from './trigger-transitions.vue.mdx'; +import TriggerSvelte from './trigger-transitions.svelte.mdx'; import ExampleAngular from './example.angular.mdx'; import ExampleReactNative from './example.react-native.mdx'; import ExampleReact from './example.react.mdx'; import ExampleVue from './example.vue.mdx'; +import ExampleSvelte from './example.svelte.mdx'; import ApiAngular from './full-api.angular.mdx'; import ApiReactNative from './full-api.react-native.mdx'; import ApiReact from './full-api.react.mdx'; @@ -58,6 +63,9 @@ export async function getStaticProps() { + + + ## Access Auth State @@ -73,6 +81,9 @@ export async function getStaticProps() { + + + ## Access Authenticated User @@ -88,6 +99,9 @@ export async function getStaticProps() { + + + ## Trigger Transitions @@ -103,6 +117,9 @@ export async function getStaticProps() { + + + ### Example @@ -120,6 +137,9 @@ Here's an example that uses the `toForgotPassword` trigger transition, to create + + + ## Full API diff --git a/docs/src/pages/[platform]/connected-components/authenticator/advanced/trigger-transitions.svelte.mdx b/docs/src/pages/[platform]/connected-components/authenticator/advanced/trigger-transitions.svelte.mdx new file mode 100644 index 00000000000..dfaafcec606 --- /dev/null +++ b/docs/src/pages/[platform]/connected-components/authenticator/advanced/trigger-transitions.svelte.mdx @@ -0,0 +1,14 @@ +You can use `useAuthenticator` composable to access functions that lets you trigger transitions to the authenticator. Please see [Full API](#full-api) to see all supported transition functions. Any invalid transitions (e.g. `signUp` directly to `authenticated`) will be ignored. + +```html + + + +{#if a.route === 'authenticated'} +

Hello { a.user?.username }!

+ +{/if} +``` diff --git a/docs/src/pages/[platform]/connected-components/authenticator/advanced/useAuthenticator.svelte.mdx b/docs/src/pages/[platform]/connected-components/authenticator/advanced/useAuthenticator.svelte.mdx new file mode 100644 index 00000000000..10dc49cf258 --- /dev/null +++ b/docs/src/pages/[platform]/connected-components/authenticator/advanced/useAuthenticator.svelte.mdx @@ -0,0 +1,39 @@ +import { Alert } from '@aws-amplify/ui-react'; + +## useAuthenticator + +`@aws-amplify/ui-svelte` ships with `useAuthenticator` Svelte composable that can be used to access, modify, and update Authenticator's auth state. + +```html + + +``` + +Note that the `authenticator` is an object wrapped with `$state`, meaning _we cannot destructure it:_ + +```html + +``` + +In order to extract properties from the authenticator while keeping its reactivity, you need to use `$derived`. + +```html + +``` diff --git a/docs/src/pages/[platform]/connected-components/authenticator/configuration/hidesignup.web.mdx b/docs/src/pages/[platform]/connected-components/authenticator/configuration/hidesignup.web.mdx index a2aac04ed44..0f9bd72b9d7 100644 --- a/docs/src/pages/[platform]/connected-components/authenticator/configuration/hidesignup.web.mdx +++ b/docs/src/pages/[platform]/connected-components/authenticator/configuration/hidesignup.web.mdx @@ -36,6 +36,17 @@ The Authenticator has an option to hide the sign up page including the `Create A ``` + +```html{1} + + {#snippet children({ user, signOut })} +

Hello {user.username}!

+ + {/snippet} + +``` + + diff --git a/docs/src/pages/[platform]/connected-components/authenticator/configuration/index.page.mdx b/docs/src/pages/[platform]/connected-components/authenticator/configuration/index.page.mdx index af9162b5994..58dc3722550 100644 --- a/docs/src/pages/[platform]/connected-components/authenticator/configuration/index.page.mdx +++ b/docs/src/pages/[platform]/connected-components/authenticator/configuration/index.page.mdx @@ -2,7 +2,7 @@ title: Configuration metaTitle: Configuration description: How to setup and configure your Authenticator component. -supportedFrameworks: android|angular|flutter|react|react-native|swift|vue +supportedFrameworks: android|angular|flutter|react|react-native|swift|vue|svelte --- import { InlineFilter } from '@/components/InlineFilter'; @@ -22,6 +22,7 @@ import SignupReactNative from './signUpAttributes.default.react-native.mdx'; import SignupReact from './signUpAttributes.default.react.mdx'; import SignupSwift from './signUpAttributes.default.swift.mdx'; import SignupVue from './signUpAttributes.default.vue.mdx'; +import SignupSvelte from './signUpAttributes.default.svelte.mdx'; import SignupExampleFlutter from './signUpAttributes.default.example.flutter.mdx'; import SignupExampleWeb from './signUpAttributes.default.example.web.mdx'; import SignupAllAndroid from './signUpAttributes.all.android.mdx'; @@ -31,6 +32,7 @@ import SignupAllReactNative from './signUpAttributes.all.react-native.mdx'; import SignupAllReact from './signUpAttributes.all.react.mdx'; import SignupAllSwift from './signUpAttributes.all.swift.mdx'; import SignupAllVue from './signUpAttributes.all.vue.mdx'; +import SignupAllSvelte from './signUpAttributes.all.svelte.mdx'; import SignupAllExampleFlutter from './signUpAttributes.all.example.flutter.mdx'; import SignupAllExampleWeb from './signUpAttributes.all.example.web.mdx'; import SocialProviderFlutter from './socialProviders.flutter.mdx'; @@ -65,7 +67,7 @@ By default, unauthenticated users are redirected to the Sign In flow. You can ex ## Login Mechanisms - + @@ -126,6 +128,10 @@ with the exception of `address`, `gender`, `locale`, `picture`, `updated_at`, an + + + + @@ -153,13 +159,17 @@ with the exception of `address`, `gender`, `locale`, `picture`, `updated_at`, an + + + + - + @@ -174,22 +184,8 @@ with the exception of `address`, `gender`, `locale`, `picture`, `updated_at`, an - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/docs/src/pages/[platform]/connected-components/authenticator/configuration/initialState.forgotPassword.svelte.mdx b/docs/src/pages/[platform]/connected-components/authenticator/configuration/initialState.forgotPassword.svelte.mdx new file mode 100644 index 00000000000..d397897fec6 --- /dev/null +++ b/docs/src/pages/[platform]/connected-components/authenticator/configuration/initialState.forgotPassword.svelte.mdx @@ -0,0 +1,3 @@ +```html{3} file=../../../../../../../examples/svelte/src/routes/ui/components/authenticator/forgot-password/+page.svelte + +``` diff --git a/docs/src/pages/[platform]/connected-components/authenticator/configuration/initialState.signIn.svelte.mdx b/docs/src/pages/[platform]/connected-components/authenticator/configuration/initialState.signIn.svelte.mdx new file mode 100644 index 00000000000..293dc2550f7 --- /dev/null +++ b/docs/src/pages/[platform]/connected-components/authenticator/configuration/initialState.signIn.svelte.mdx @@ -0,0 +1,17 @@ +```html + + + + {#snippet children({ user, signOut })} +

Hello {user.username}!

+ + {/snippet} + +``` diff --git a/docs/src/pages/[platform]/connected-components/authenticator/configuration/initialState.signUp.svelte.mdx b/docs/src/pages/[platform]/connected-components/authenticator/configuration/initialState.signUp.svelte.mdx new file mode 100644 index 00000000000..e80d57045b1 --- /dev/null +++ b/docs/src/pages/[platform]/connected-components/authenticator/configuration/initialState.signUp.svelte.mdx @@ -0,0 +1,3 @@ +```html{3} file=../../../../../../../examples/svelte/src/routes/ui/components/authenticator/sign-up-with-username/+page.svelte + +``` diff --git a/docs/src/pages/[platform]/connected-components/authenticator/configuration/loginMechanisms.web.mdx b/docs/src/pages/[platform]/connected-components/authenticator/configuration/loginMechanisms.web.mdx index d0086686a82..34d8ff07fd0 100644 --- a/docs/src/pages/[platform]/connected-components/authenticator/configuration/loginMechanisms.web.mdx +++ b/docs/src/pages/[platform]/connected-components/authenticator/configuration/loginMechanisms.web.mdx @@ -62,6 +62,16 @@ You can provide an alternative to `username` such as `email` or `phone_number`. ``` + + ```html{1} + + {#snippet children({ user, signOut })} +

Hello {user.username}!

+ + {/snippet} + + ``` + @@ -105,6 +115,16 @@ You can provide an alternative to `username` such as `email` or `phone_number`. ``` + + ```html{1} + + {#snippet children({ user, signOut })} +

Hello {user.username}!

+ + {/snippet} + + ``` + @@ -148,6 +168,16 @@ You can provide an alternative to `username` such as `email` or `phone_number`. ``` + + ```html{1} + + {#snippet children({ user, signOut })} +

Hello {user.username}!

+ + {/snippet} + + ``` + diff --git a/docs/src/pages/[platform]/connected-components/authenticator/configuration/signUpAttributes.all.svelte.mdx b/docs/src/pages/[platform]/connected-components/authenticator/configuration/signUpAttributes.all.svelte.mdx new file mode 100644 index 00000000000..54c5d4de869 --- /dev/null +++ b/docs/src/pages/[platform]/connected-components/authenticator/configuration/signUpAttributes.all.svelte.mdx @@ -0,0 +1,22 @@ +```html + +``` diff --git a/docs/src/pages/[platform]/connected-components/authenticator/configuration/signUpAttributes.default.svelte.mdx b/docs/src/pages/[platform]/connected-components/authenticator/configuration/signUpAttributes.default.svelte.mdx new file mode 100644 index 00000000000..cdeed61c894 --- /dev/null +++ b/docs/src/pages/[platform]/connected-components/authenticator/configuration/signUpAttributes.default.svelte.mdx @@ -0,0 +1,3 @@ +```html + +``` diff --git a/docs/src/pages/[platform]/connected-components/authenticator/configuration/socialProviders.web.mdx b/docs/src/pages/[platform]/connected-components/authenticator/configuration/socialProviders.web.mdx index bb29d82c5de..6f215ba69b1 100644 --- a/docs/src/pages/[platform]/connected-components/authenticator/configuration/socialProviders.web.mdx +++ b/docs/src/pages/[platform]/connected-components/authenticator/configuration/socialProviders.web.mdx @@ -58,6 +58,16 @@ export default function App() { ``` + +```html{1} + + {#snippet children({ user, signOut })} +

Hello {user.username}!

+ + {/snippet} + +``` + diff --git a/docs/src/pages/[platform]/connected-components/authenticator/configuration/variation.web.mdx b/docs/src/pages/[platform]/connected-components/authenticator/configuration/variation.web.mdx index e326709069c..bf7fcda163e 100644 --- a/docs/src/pages/[platform]/connected-components/authenticator/configuration/variation.web.mdx +++ b/docs/src/pages/[platform]/connected-components/authenticator/configuration/variation.web.mdx @@ -37,6 +37,17 @@ The Authenticator has multiple variations to meet the needs of your application. ``` + + ```html + + {#snippet children({ user, signOut })} +

Hello {user.username}!

+ + {/snippet} + + ``` + + @@ -62,6 +73,12 @@ The Authenticator has multiple variations to meet the needs of your application. ``` + + ```html{3} file=../../../../../../../examples/svelte/src/routes/ui/components/authenticator/modal/+page.svelte + + ``` + + diff --git a/docs/src/pages/[platform]/connected-components/authenticator/customization/customization.headers-and-footers.web.mdx b/docs/src/pages/[platform]/connected-components/authenticator/customization/customization.headers-and-footers.web.mdx index 1f53aa47653..93edbab2b9e 100644 --- a/docs/src/pages/[platform]/connected-components/authenticator/customization/customization.headers-and-footers.web.mdx +++ b/docs/src/pages/[platform]/connected-components/authenticator/customization/customization.headers-and-footers.web.mdx @@ -67,6 +67,11 @@ _app.component.html_ ```tsx{3,9,15,31,37,53,61,67} file=../../../../../../../examples/vue/src/pages/ui/components/authenticator/custom-slots/index.vue#L16- +``` + + +```html file=../../../../../../../examples/svelte/src/routes/ui/components/authenticator/custom-slots/+page.svelte + ``` diff --git a/docs/src/pages/[platform]/connected-components/authenticator/customization/customization.i18n.web.mdx b/docs/src/pages/[platform]/connected-components/authenticator/customization/customization.i18n.web.mdx index 8480877b3d8..719f447f955 100644 --- a/docs/src/pages/[platform]/connected-components/authenticator/customization/customization.i18n.web.mdx +++ b/docs/src/pages/[platform]/connected-components/authenticator/customization/customization.i18n.web.mdx @@ -88,6 +88,26 @@ I18n.putVocabularies({ ``` + +```js +import { I18n } from 'aws-amplify/utils'; +import { translations } from '@aws-amplify/ui-svelte'; +I18n.putVocabularies(translations); +I18n.setLanguage('fr'); + +I18n.putVocabularies({ + fr: { + 'Sign In': 'Se connecter', + 'Sign Up': "S'inscrire", + }, + es: { + 'Sign In': 'Registrarse', + 'Sign Up': 'Regístrate', + }, +}); +``` + + The list of available keys are available [here](https://github.com/aws-amplify/amplify-ui/blob/main/packages/ui/src/i18n/dictionaries/authenticator/en.ts). ### Confirm Sign Up Page Translations diff --git a/docs/src/pages/[platform]/connected-components/authenticator/customization/customization.override-function-calls.web.mdx b/docs/src/pages/[platform]/connected-components/authenticator/customization/customization.override-function-calls.web.mdx index 1fa70b68b4f..ecdccfeadca 100644 --- a/docs/src/pages/[platform]/connected-components/authenticator/customization/customization.override-function-calls.web.mdx +++ b/docs/src/pages/[platform]/connected-components/authenticator/customization/customization.override-function-calls.web.mdx @@ -5,6 +5,7 @@ import { TableCell, TableBody, TableHead, TableRow, Alert } from '@aws-amplify/u import AngularOverrideExample from './override-function-calls/example.angular.mdx'; import ReactOverrideExample from './override-function-calls/example.react.mdx'; import VueOverrideExample from './override-function-calls/example.vue.mdx'; +import SvelteOverrideExample from './override-function-calls/example.svelte.mdx'; import { FunctionOverridesTable } from '@/components/FunctionOverridesTable'; ## Override Function Calls @@ -26,6 +27,9 @@ This would be overriden like so: + + + Each `handle*` function accepts as input the expected input of its corresponding `Auth` function, allowing you to override the `Auth` function call from within the `handle*` function. Here is a table of each override function name, and the values passed as `input`. diff --git a/docs/src/pages/[platform]/connected-components/authenticator/customization/force-new-password-fields.web.mdx b/docs/src/pages/[platform]/connected-components/authenticator/customization/force-new-password-fields.web.mdx index 46888c9a111..523c36ec4d2 100644 --- a/docs/src/pages/[platform]/connected-components/authenticator/customization/force-new-password-fields.web.mdx +++ b/docs/src/pages/[platform]/connected-components/authenticator/customization/force-new-password-fields.web.mdx @@ -30,3 +30,8 @@ _app.component.html_ ``` + +```html file=../../../../../../../examples/svelte/src/routes/ui/components/authenticator/sign-up-with-attributes/+page.svelte + +``` + diff --git a/docs/src/pages/[platform]/connected-components/authenticator/customization/formfields/form-fields.web.mdx b/docs/src/pages/[platform]/connected-components/authenticator/customization/formfields/form-fields.web.mdx index 0e5ca4d54b1..a9e6de429be 100644 --- a/docs/src/pages/[platform]/connected-components/authenticator/customization/formfields/form-fields.web.mdx +++ b/docs/src/pages/[platform]/connected-components/authenticator/customization/formfields/form-fields.web.mdx @@ -164,6 +164,52 @@ const signUpAttributes={['birthdate', 'family_name', 'preferred_username']} ``` + +```html + + + + {#snippet children({ user, signOut })} +

Hello {user.username}!

+ + {/snippet} + +``` + ``` + +```html + + + + {#snippet children({ user, signOut })} +

Hello {user.username}!

+ + {/snippet} + +``` + + +```html + + + + {#snippet children({ user, signOut })} +

Hello {user.username}!

+ + {/snippet} + +``` + + + +```html + + + + {#snippet children({ user, signOut })} +

Hello {user.username}!

+ + {/snippet} + +``` + + ``` + +```html + + + + {#snippet children({ user, signOut })} +

Hello {user.username}!

+ + {/snippet} + +``` + diff --git a/docs/src/pages/[platform]/connected-components/authenticator/customization/index.page.mdx b/docs/src/pages/[platform]/connected-components/authenticator/customization/index.page.mdx index f2a855f1107..731b072c1ea 100644 --- a/docs/src/pages/[platform]/connected-components/authenticator/customization/index.page.mdx +++ b/docs/src/pages/[platform]/connected-components/authenticator/customization/index.page.mdx @@ -2,7 +2,7 @@ title: Customization metaTitle: Customization description: Override and customize your Authenticator. -supportedFrameworks: android|angular|flutter|react|react-native|swift|vue +supportedFrameworks: android|angular|flutter|react|react-native|swift|vue|svelte --- import { InlineFilter } from '@/components/InlineFilter'; @@ -66,7 +66,7 @@ export async function getStaticProps() { - + @@ -86,7 +86,7 @@ export async function getStaticProps() { - + @@ -128,7 +128,7 @@ export async function getStaticProps() { - + diff --git a/docs/src/pages/[platform]/connected-components/authenticator/customization/override-function-calls/example.svelte.mdx b/docs/src/pages/[platform]/connected-components/authenticator/customization/override-function-calls/example.svelte.mdx new file mode 100644 index 00000000000..2aa2b589606 --- /dev/null +++ b/docs/src/pages/[platform]/connected-components/authenticator/customization/override-function-calls/example.svelte.mdx @@ -0,0 +1,16 @@ +import { Tabs, Alert } from '@aws-amplify/ui-react'; +import { CURRENT_MAJOR_VERSIONS } from '@/data/frameworks'; + +export const latestVersion = CURRENT_MAJOR_VERSIONS['svelte']; +export const amplify5UIVersion = null + + + + `@aws-amplify/ui-svelte` v{latestVersion} (latest) + + + In `@aws-amplify/ui-svelte` version {latestVersion}, `Auth` function calls are imported directly as shown below. + ```html file=../../../../../../../../examples/svelte/src/routes/ui/components/authenticator/override-function-calls/+page.svelte + ``` + + \ No newline at end of file diff --git a/docs/src/pages/[platform]/connected-components/authenticator/customization/sign-up-fields.web.mdx b/docs/src/pages/[platform]/connected-components/authenticator/customization/sign-up-fields.web.mdx index 1b44b6c7d11..f160e74e3ae 100644 --- a/docs/src/pages/[platform]/connected-components/authenticator/customization/sign-up-fields.web.mdx +++ b/docs/src/pages/[platform]/connected-components/authenticator/customization/sign-up-fields.web.mdx @@ -37,6 +37,11 @@ _app.component.html_ ```html file=../../../../../../../examples/vue/src/pages/ui/components/authenticator/custom-sign-up-fields/index.vue +``` + + +```html file=../../../../../../../examples/svelte/src/routes/ui/components/authenticator/custom-sign-up-fields/+page.svelte + ``` diff --git a/docs/src/pages/[platform]/connected-components/authenticator/index.page.mdx b/docs/src/pages/[platform]/connected-components/authenticator/index.page.mdx index 25a6b1c21a1..54ed9dd1f00 100644 --- a/docs/src/pages/[platform]/connected-components/authenticator/index.page.mdx +++ b/docs/src/pages/[platform]/connected-components/authenticator/index.page.mdx @@ -1,7 +1,7 @@ --- title: Authenticator description: Authenticator component adds complete authentication flows to your application with minimal boilerplate. -supportedFrameworks: android|angular|flutter|react|react-native|swift|vue +supportedFrameworks: android|angular|flutter|react|react-native|swift|vue|svelte --- import { InlineFilter } from '@/components/InlineFilter'; @@ -85,12 +85,15 @@ To get up and running with the Authenticator, follow the [Amplify Gen2 quickstar To get up and running with the Authenticator, follow the [Amplify Gen2 quickstart guide](https://docs.amplify.aws/swift/start/quickstart/). + +To get up and running with the Authenticator, follow the [Amplify Gen2 quickstart guide](https://docs.amplify.aws/swift/start/quickstart/). + ### Setup with Amplify Gen 1 backend To setup Amplify using the Gen1 CLI, follow the steps below: - + diff --git a/docs/src/pages/[platform]/connected-components/authenticator/quick-start-add.web.mdx b/docs/src/pages/[platform]/connected-components/authenticator/quick-start-add.web.mdx index 70e5b1ff8b1..c21589be6fc 100644 --- a/docs/src/pages/[platform]/connected-components/authenticator/quick-start-add.web.mdx +++ b/docs/src/pages/[platform]/connected-components/authenticator/quick-start-add.web.mdx @@ -177,3 +177,23 @@ export class UseAuthenticatorComponent { please click here. + + + ```html{3-8} + + + + {#snippet children({ user, signOut })} +

Hello {user.username}!

+ + {/snippet} + + ``` + \ No newline at end of file diff --git a/docs/src/pages/[platform]/connected-components/authenticator/quick-start.mdx b/docs/src/pages/[platform]/connected-components/authenticator/quick-start.mdx index eb786307293..baa698793ef 100644 --- a/docs/src/pages/[platform]/connected-components/authenticator/quick-start.mdx +++ b/docs/src/pages/[platform]/connected-components/authenticator/quick-start.mdx @@ -35,7 +35,7 @@ import AmplifyCLI from './amplify-cli.mdx'; This will update your `amplifyconfiguration.json` with your latest backend configuration for the Authenticator. - + @@ -60,6 +60,7 @@ import AmplifyCLI from './amplify-cli.mdx'; + #### Step 2. Install dependencies @@ -108,7 +109,7 @@ import AmplifyCLI from './amplify-cli.mdx'; ``` - + @@ -273,7 +274,7 @@ import AmplifyCLI from './amplify-cli.mdx'; } ``` - + diff --git a/docs/src/pages/[platform]/getting-started/accessibility/accessibility.svelte.mdx b/docs/src/pages/[platform]/getting-started/accessibility/accessibility.svelte.mdx new file mode 100644 index 00000000000..bf811f2bcee --- /dev/null +++ b/docs/src/pages/[platform]/getting-started/accessibility/accessibility.svelte.mdx @@ -0,0 +1,3 @@ +import Intro from './intro.mdx'; + + diff --git a/docs/src/pages/[platform]/getting-started/accessibility/index.page.mdx b/docs/src/pages/[platform]/getting-started/accessibility/index.page.mdx index fe4e80ac4c9..b0845f24261 100644 --- a/docs/src/pages/[platform]/getting-started/accessibility/index.page.mdx +++ b/docs/src/pages/[platform]/getting-started/accessibility/index.page.mdx @@ -2,7 +2,7 @@ title: Accessibility metaTitle: Accessibility description: An introduction to building accessible apps with Amplify UI. -supportedFrameworks: react|angular|vue +supportedFrameworks: react|angular|vue|svelte --- import { getCustomStaticPath } from '@/utils/getCustomStaticPath'; @@ -10,6 +10,7 @@ import { InlineFilter } from '@/components/InlineFilter'; import AccessibilityAngular from './accessibility.angular.mdx'; import AccessibilityReact from './accessibility.react.mdx'; import AccessibilityVue from './accessibility.vue.mdx'; +import AccessibilitySvelte from './accessibility.svelte.mdx'; export async function getStaticPaths() { return getCustomStaticPath(frontmatter.supportedFrameworks); @@ -30,3 +31,6 @@ export async function getStaticProps() { + + + diff --git a/docs/src/pages/[platform]/getting-started/installation/dependencies.mdx b/docs/src/pages/[platform]/getting-started/installation/dependencies.mdx index d9368d6ea88..a0df6855369 100644 --- a/docs/src/pages/[platform]/getting-started/installation/dependencies.mdx +++ b/docs/src/pages/[platform]/getting-started/installation/dependencies.mdx @@ -181,3 +181,13 @@ import { ReactNativeSafeAreaContextInstallation } from '@/components/ReactNative Otherwise, you can import individual components from the `@aws-amplify/ui-vue` package in each one of your components. + + + For Svelte 5 install `@aws-amplify/ui-svelte` with [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/): + + + + + Svelte versions prior to 5 are not supported by Amplify UI as the components rely on runes, which are available since Svelte v5 only + + \ No newline at end of file diff --git a/docs/src/pages/[platform]/getting-started/installation/index.page.mdx b/docs/src/pages/[platform]/getting-started/installation/index.page.mdx index 94add0aa8b4..4c2de05298b 100644 --- a/docs/src/pages/[platform]/getting-started/installation/index.page.mdx +++ b/docs/src/pages/[platform]/getting-started/installation/index.page.mdx @@ -1,7 +1,7 @@ --- title: Installation metaDescription: Installation Guide - How to install Amplify UI Packages, Styles, and Fonts. -supportedFrameworks: android|angular|flutter|react|react-native|vue +supportedFrameworks: android|angular|flutter|react|react-native|vue|svelte --- import { FRAMEWORKS } from '@/data/frameworks'; @@ -28,7 +28,7 @@ export async function getStaticProps() { - + diff --git a/docs/src/pages/[platform]/getting-started/installation/styles.web.mdx b/docs/src/pages/[platform]/getting-started/installation/styles.web.mdx index 0c5cf940aff..7bbb5754673 100644 --- a/docs/src/pages/[platform]/getting-started/installation/styles.web.mdx +++ b/docs/src/pages/[platform]/getting-started/installation/styles.web.mdx @@ -67,3 +67,9 @@ You can also use this for the main CSS export, `'@aws-amplify/ui-react/styles.la import '@aws-amplify/ui-vue/styles.css'; ``` + + +```js +import '@aws-amplify/ui-svelte/styles.css'; +``` + diff --git a/docs/src/pages/[platform]/getting-started/introduction/index.page.mdx b/docs/src/pages/[platform]/getting-started/introduction/index.page.mdx index 0b4f3897162..cf1635e8e48 100644 --- a/docs/src/pages/[platform]/getting-started/introduction/index.page.mdx +++ b/docs/src/pages/[platform]/getting-started/introduction/index.page.mdx @@ -1,7 +1,7 @@ --- title: Introduction description: What is Amplify UI? -supportedFrameworks: android|angular|flutter|react|react-native|swift|vue +supportedFrameworks: android|angular|flutter|react|react-native|svelte|swift|vue canonicalUrlPath: /react/getting-started/introduction --- @@ -56,9 +56,9 @@ We want to share as much as possible between platforms (like themes and schemas) ## Current status -Currently, the [Authenticator](../connected-components/authenticator) is available for React, Angular, Vue, Flutter and Swift. The Android and React Native Authenticators are currently in developer preview. Primitive components are available for React, with Angular, Vue, and React Native coming soon. +Currently, the [Authenticator](../connected-components/authenticator) is available for React, Angular, Vue, Svelte, Flutter and Swift. The Android and React Native Authenticators are currently in developer preview. Primitive components are available for React, with Angular, Vue, Svelte and React Native in planning. -> If you are an Angular or Vue developer and want to get started, they share the same CSS as React so with the right class names +> If you are an Angular, Svelte or Vue developer and want to get started, they share the same CSS as React so with the right class names > (we use BEM syntax) you can at least get the styling and theming that React has! ## Roadmap @@ -66,8 +66,8 @@ Currently, the [Authenticator](../connected-components/authenticator) is availab Upcoming projects include: * React Native Authenticator -* Improved Storage components for React, Angular, and Vue -* Primitives and theming for Angular and Vue +* Improved Storage components for React, Angular, Svelte, and Vue +* Primitives and theming for Angular, Svelte and Vue * Data components and hooks for React * More primitives diff --git a/docs/src/pages/[platform]/getting-started/usage/index.page.mdx b/docs/src/pages/[platform]/getting-started/usage/index.page.mdx index 1abf7cc2589..6a97f934235 100644 --- a/docs/src/pages/[platform]/getting-started/usage/index.page.mdx +++ b/docs/src/pages/[platform]/getting-started/usage/index.page.mdx @@ -1,7 +1,7 @@ --- title: Usage metaDescription: How to get started using Amplify UI. -supportedFrameworks: react|angular|vue|react-native +supportedFrameworks: react|angular|vue|react-native|svelte --- import { InlineFilter } from '@/components/InlineFilter'; @@ -10,6 +10,7 @@ import AngularPage from './usage.angular.mdx'; import ReactNativePage from './usage.react-native.mdx'; import ReactPage from './usage.react.mdx'; import VuePage from './usage.vue.mdx'; +import SveltePage from './usage.svelte.mdx'; export async function getStaticPaths() { return getCustomStaticPath(frontmatter.supportedFrameworks); @@ -33,3 +34,6 @@ export async function getStaticProps() { + + + diff --git a/docs/src/pages/[platform]/getting-started/usage/usage.svelte.mdx b/docs/src/pages/[platform]/getting-started/usage/usage.svelte.mdx new file mode 100644 index 00000000000..2efe3122e63 --- /dev/null +++ b/docs/src/pages/[platform]/getting-started/usage/usage.svelte.mdx @@ -0,0 +1,7 @@ +import { Alert, Text } from '@aws-amplify/ui-react'; + + + `@aws-amplify/ui-svelte` currently only supports our cloud-connected components. + + +Please view the [Svelte Authenticator](/svelte/connected-components/authenticator#quick-start) documentation for a getting started guide. diff --git a/docs/src/pages/[platform]/index.page.tsx b/docs/src/pages/[platform]/index.page.tsx index 441582694b2..aec7d310ffe 100644 --- a/docs/src/pages/[platform]/index.page.tsx +++ b/docs/src/pages/[platform]/index.page.tsx @@ -8,6 +8,7 @@ import { HeroSection } from '@/components/home/sections'; import ReactHomePage from './index.react'; import ReactNativeHomePage from './index.react-native'; import VueHomePage from './index.vue'; +import SvelteHomePage from './index.svelte'; import AngularHomePage from './index.angular'; import FlutterHomePage from './index.flutter'; import { FRAMEWORKS } from '@/data/frameworks'; @@ -57,6 +58,9 @@ const HomePage = ({ colorMode }) => { case 'vue': pageContent = ; break; + case 'svelte': + pageContent = ; + break; case 'angular': pageContent = ; break; diff --git a/docs/src/pages/[platform]/index.svelte.tsx b/docs/src/pages/[platform]/index.svelte.tsx new file mode 100644 index 00000000000..be0078daffd --- /dev/null +++ b/docs/src/pages/[platform]/index.svelte.tsx @@ -0,0 +1,28 @@ +import * as React from 'react'; +import { useRouter } from 'next/router'; + +import { + A11ySection, + AmplifySection, + AuthenticationSection, + ComingSoonPrimitiveSection, + CompatibleSection, +} from '@/components/home/sections'; + +const SvelteHomePage = ({ colorMode }) => { + const { + query: { platform = 'svelte' }, + } = useRouter(); + + return ( + <> + + + + + + + ); +}; + +export default SvelteHomePage;