npm - @aws-amplify/ui-svelte - Versions diffs - 0.0.0-next-c8114c5-20220105200507 - Mend

@aws-amplify/ui-svelte 0.0.0-next-c8114c5-20220105200507

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (57) hide show

package/.eslintrc.cjs +20 -0
package/.turbo/turbo-build.log +135 -0
package/CHANGELOG.md +15 -0
package/README.md +38 -0
package/dist/README.md +38 -0
package/dist/components/Authenticator.svelte +43 -0
package/dist/components/Authenticator.svelte.d.ts +22 -0
package/dist/components/SignIn.svelte +69 -0
package/dist/components/SignIn.svelte.d.ts +14 -0
package/dist/components/UserNameAlias.svelte +29 -0
package/dist/components/UserNameAlias.svelte.d.ts +19 -0
package/dist/components/authStore.d.ts +20 -0
package/dist/components/authStore.js +100 -0
package/dist/components/primitives/AmplifyButton.svelte +23 -0
package/dist/components/primitives/AmplifyButton.svelte.d.ts +25 -0
package/dist/components/primitives/AmplifyError.svelte +46 -0
package/dist/components/primitives/AmplifyError.svelte.d.ts +16 -0
package/dist/components/primitives/AmplifyFormField.svelte +121 -0
package/dist/components/primitives/AmplifyFormField.svelte.d.ts +25 -0
package/dist/components/primitives/AmplifyFormSelect.svelte +38 -0
package/dist/components/primitives/AmplifyFormSelect.svelte.d.ts +20 -0
package/dist/components/primitives/AmplifyPasswordField.svelte +75 -0
package/dist/components/primitives/AmplifyPasswordField.svelte.d.ts +26 -0
package/dist/components/primitives/AmplifyPhoneNumberField.svelte +50 -0
package/dist/components/primitives/AmplifyPhoneNumberField.svelte.d.ts +27 -0
package/dist/components/primitives/AmplifyTabItem.svelte +0 -0
package/dist/components/primitives/AmplifyTabItem.svelte.d.ts +19 -0
package/dist/components/primitives/AmplifyTabs.svelte +50 -0
package/dist/components/primitives/AmplifyTabs.svelte.d.ts +14 -0
package/dist/components/primitives/AmplifyTextField.svelte +31 -0
package/dist/components/primitives/AmplifyTextField.svelte.d.ts +28 -0
package/dist/index.d.ts +3 -0
package/dist/index.js +3 -0
package/dist/package.json +60 -0
package/dist/styles.css +1 -0
package/package.json +57 -0
package/src/app.html +21 -0
package/src/global.d.ts +1 -0
package/src/lib/components/Authenticator.svelte +52 -0
package/src/lib/components/SignIn.svelte +79 -0
package/src/lib/components/UserNameAlias.svelte +32 -0
package/src/lib/components/authStore.ts +138 -0
package/src/lib/components/primitives/AmplifyButton.svelte +25 -0
package/src/lib/components/primitives/AmplifyError.svelte +48 -0
package/src/lib/components/primitives/AmplifyFormField.svelte +146 -0
package/src/lib/components/primitives/AmplifyFormSelect.svelte +39 -0
package/src/lib/components/primitives/AmplifyPasswordField.svelte +78 -0
package/src/lib/components/primitives/AmplifyPhoneNumberField.svelte +52 -0
package/src/lib/components/primitives/AmplifyTabItem.svelte +0 -0
package/src/lib/components/primitives/AmplifyTabs.svelte +52 -0
package/src/lib/components/primitives/AmplifyTextField.svelte +33 -0
package/src/lib/index.ts +4 -0
package/src/lib/styles.css +1 -0
package/src/routes/index.svelte +8 -0
package/static/favicon.png +0 -0
package/svelte.config.js +41 -0
package/tsconfig.json +31 -0

package/package.json ADDED Viewed

@@ -0,0 +1,57 @@
+{
+	"name": "@aws-amplify/ui-svelte",
+	"version": "0.0.0-next-c8114c5-20220105200507",
+	"type": "module",
+	"main": "dist/index.js",
+	"svelte": "index.js",
+	"exports": {
+		".": {
+			"import": "./dist/index.js"
+		},
+		"./styles.css": "./dist/styles.css"
+	},
+	"browser": {
+		"./styles.css": "./dist/styles.css"
+	},
+	"scripts": {
+		"dev": "svelte-kit dev",
+		"build": "svelte-kit build",
+		"postbuild": "svelte-kit package",
+		"package": "svelte-kit package",
+		"preview": "svelte-kit preview",
+		"check": "svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
+		"format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "next",
+		"@sveltejs/adapter-node": "^1.0.0-next.56",
+		"@sveltejs/adapter-static": "^1.0.0-next.23",
+		"@sveltejs/kit": "next",
+		"@typescript-eslint/eslint-plugin": "^4.31.1",
+		"@typescript-eslint/parser": "^4.31.1",
+		"eslint": "^7.32.0",
+		"eslint-config-prettier": "^8.3.0",
+		"eslint-plugin-svelte3": "^3.2.1",
+		"prettier": "^2.4.1",
+		"prettier-plugin-svelte": "^2.4.0",
+		"svelte": "^3.44.0",
+		"svelte-check": "^2.2.6",
+		"svelte-preprocess": "^4.9.4",
+		"svelte2tsx": "^0.4.12",
+		"tslib": "^2.3.1",
+		"typescript": "^4.4.3"
+	},
+	"peerDependencies": {
+		"aws-amplify": "^4.2.2"
+	},
+	"dependencies": {
+		"@aws-amplify/ui": "^0.0.0-next-c8114c5-20220105200507",
+		"@rollup/plugin-replace": "^3.0.0",
+		"nanoid": "^3.1.30",
+		"qrcode": "^1.5.0",
+		"svelte2tsx": "^0.4.12",
+		"xstate": "^4.26.1"
+	}
+}

package/src/app.html ADDED Viewed

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="description" content="" />
+		<link rel="icon" href="/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%svelte.head%
+	</head>
+	<body>
+		<div id="svelte">%svelte.body%</div>
+	</body>
+</html>
+<script>
+	const isBrowser = () => typeof window !== 'undefined';
+	const isGlobal = () => typeof global !== 'undefined';
+	var exports = {};
+	if (!isGlobal() && isBrowser()) {
+		var global = window;
+	}
+</script>

package/src/global.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ /// <reference types="@sveltejs/kit" />

package/src/lib/components/Authenticator.svelte ADDED Viewed

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import { onDestroy } from 'svelte';
+  import { setupMachine, route, toSignIn } from '$lib/components/authStore';
+  import SignIn from './SignIn.svelte';
+  import AmplifyTabs from './primitives/AmplifyTabs.svelte';
+  export let initialState = undefined;
+  export let loginMechanisms = undefined;
+  export let services = undefined;
+  export let signUpAttributes = undefined;
+  export let socialProviders = undefined;
+  const _subscription = setupMachine(
+    initialState,
+    loginMechanisms,
+    services,
+    signUpAttributes,
+    socialProviders
+  );
+  onDestroy(() => {
+    if (_subscription) _subscription.unsubscribe();
+  });
+</script>
+{#if $route !== 'authenticated'}
+  <div data-amplify-authenticator>
+    <div data-amplify-container>
+      <!--Slot header goes here-->
+      <div data-amplify-router>
+        {#if $route === 'signIn' || $route === 'signUp'}
+          <AmplifyTabs />
+        {/if}
+        {#if $route === 'signIn'}
+          <SignIn />
+        {/if}
+        {#if $route === 'signUp'}
+          <p>Sign Up</p>
+          <button on:click={toSignIn}>To Sign In</button>
+        {/if}
+        {#if $route === 'resetPassword'}
+          <p>reset password</p>
+          <button on:click={toSignIn}>To Sign In</button>
+        {/if}
+      </div>
+    </div>
+  </div>
+{/if}
+{#if $route === 'authenticated'}
+  <slot />
+{/if}

package/src/lib/components/SignIn.svelte ADDED Viewed

@@ -0,0 +1,79 @@
+<script lang="ts">
+  import AmplifyFormField from './primitives/AmplifyFormField.svelte';
+  import AmplifyError from './primitives/AmplifyError.svelte';
+  import UserNameAlias from './UserNameAlias.svelte';
+  import AmplifyButton from './primitives/AmplifyButton.svelte';
+  import { translate } from '@aws-amplify/ui';
+  import {
+    updateForm,
+    submitForm,
+    isPending,
+    error,
+    toResetPassword,
+  } from '$lib/components/authStore';
+  const forgotPasswordText = translate('Forgot your password? ');
+  const signInButtonText = translate('Sign in');
+  const signingButtonText = translate('Signing in');
+  function onInput(event: Event) {
+    event.preventDefault();
+    const { name, value } = <HTMLInputElement>event.target;
+    updateForm({ name, value });
+  }
+  function onSubmit(event: Event): void {
+    event.preventDefault();
+    submitForm();
+  }
+</script>
+<div data-amplify-container>
+  <form
+    data-amplify-form
+    on:submit|preventDefault={onSubmit}
+    on:input={onInput}
+  >
+    <fieldset
+      class="amplify-flex"
+      style="flex-direction: column"
+      data-amplify-fieldset
+      disabled={$isPending}
+    >
+      <UserNameAlias />
+      <AmplifyFormField
+        data-amplify-password
+        name="password"
+        type="password"
+        autocomplete="current-password"
+      />
+      <AmplifyButton
+        disabled={$isPending}
+        variation="primary"
+        fullWidth="true"
+        type="submit"
+      >
+        {$isPending ? signingButtonText : signInButtonText}
+      </AmplifyButton>
+      {#if $error}
+        <AmplifyError>
+          {$error}
+        </AmplifyError>
+      {/if}
+    </fieldset>
+  </form>
+  <div data-amplify-footer>
+    <AmplifyButton
+      amplify-button
+      fontWeight="normal"
+      data-size="small"
+      variation="link"
+      fullWidth="true"
+      on:click={toResetPassword}
+    >
+      {forgotPasswordText}
+    </AmplifyButton>
+  </div>
+</div>

package/src/lib/components/UserNameAlias.svelte ADDED Viewed

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import AmplifyFormField from './primitives/AmplifyFormField.svelte';
+  import { onMount } from 'svelte';
+  import { authState } from '$lib/components/authStore';
+  import { getAliasInfoFromContext } from '@aws-amplify/ui';
+  export let name: string = 'username';
+  export let disabled: boolean = false;
+  export let initialValue: string = '';
+  export let required: boolean = true;
+  let label: string;
+  let type: string;
+  let error: string;
+  let placeholder: string;
+  onMount(() => {
+    const { label, type } = getAliasInfoFromContext($authState.context);
+    placeholder = label;
+  });
+</script>
+<AmplifyFormField
+  data-amplify-usernamealias
+  {name}
+  {label}
+  {type}
+  {placeholder}
+  {initialValue}
+  {disabled}
+  {required}
+  autocomplete="username"
+/>

package/src/lib/components/authStore.ts ADDED Viewed

@@ -0,0 +1,138 @@
+import {
+  createAuthenticatorMachine,
+  getServiceContextFacade,
+  getSendEventAliases,
+  translate,
+} from '@aws-amplify/ui';
+import { interpret } from 'xstate';
+import { writable, get } from 'svelte/store';
+let _facade = writable<ReturnType<typeof getServiceContextFacade>>(null);
+export const error = writable(null);
+export const route = writable(null);
+export const isPending = writable(null);
+export const hasValidationErrors = writable(null);
+export const user = writable(null);
+export const validationErrors = writable(null);
+export const codeDeliveryDetails = writable(null);
+const _sendEventAliases =
+  writable<ReturnType<typeof getSendEventAliases>>(null);
+/** @deprecated For internal use only */
+export const authState = writable(null);
+export function setupMachine(
+  initialState,
+  loginMechanisms,
+  services,
+  signUpAttributes,
+  socialProviders
+) {
+  const machine = createAuthenticatorMachine({
+    initialState,
+    loginMechanisms,
+    services,
+    signUpAttributes,
+    socialProviders,
+  });
+  const authService = interpret(machine, {
+    devTools: process.env.NODE_ENV === 'development',
+  }).start();
+  const subscription = authService.subscribe((state) => {
+    authState.update(() => state);
+    _facade.update(() => getServiceContextFacade(state));
+    setError();
+    setRoute();
+    setHasValidationErrors();
+    setCodeDeliveryDetails();
+    setIsPending();
+    setUser();
+    setValidationErrors();
+  });
+  _sendEventAliases.set(getSendEventAliases(authService.send));
+  const _authService = authService;
+  return subscription;
+}
+/**
+ * Context facades
+ */
+function setError() {
+  error.set(translate(get(_facade).error));
+}
+function setRoute() {
+  route.set(get(_facade).route);
+}
+function setHasValidationErrors() {
+  hasValidationErrors.set(get(_facade).hasValidationErrors);
+}
+function setIsPending() {
+  isPending.set(get(_facade).isPending);
+}
+function setUser() {
+  user.set(get(_facade).user);
+}
+function setValidationErrors() {
+  validationErrors.set(get(_facade).validationErrors);
+}
+function setCodeDeliveryDetails() {
+  codeDeliveryDetails.set(get(_facade).codeDeliveryDetails);
+}
+// /**
+//  * Service facades
+//  */
+export function updateForm(...args) {
+  return get(_sendEventAliases).updateForm(...args);
+}
+export function updateBlur(...args) {
+  return get(_sendEventAliases).updateBlur(...args);
+}
+export function resendCode(...args) {
+  return get(_sendEventAliases).resendCode(...args);
+}
+export function signOut(...args) {
+  return get(_sendEventAliases).signOut(...args);
+}
+export function submitForm(...args) {
+  return get(_sendEventAliases).submitForm(...args);
+}
+// /**
+//  * Transition facades
+//  */
+export function toFederatedSignIn(...args) {
+  return get(_sendEventAliases).toFederatedSignIn(...args);
+}
+export function toResetPassword(...args) {
+  return get(_sendEventAliases).toResetPassword(...args);
+}
+export function toSignIn(...args) {
+  return get(_sendEventAliases).toSignIn(...args);
+}
+export function toSignUp(...args) {
+  return get(_sendEventAliases).toSignUp(...args);
+}
+export function skipVerification(...args) {
+  return get(_sendEventAliases).skipVerification(...args);
+}

package/src/lib/components/primitives/AmplifyButton.svelte ADDED Viewed

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  export let type: 'submit' | 'button' = 'button';
+  export let fullWidth: boolean | string = false;
+  export let size: 'small' | 'medium' | 'large' = 'medium';
+  export let variation: 'primary' | 'default' | 'link' = 'default';
+  export let fontWeight: 'normal' | 'bold' | 'lighter' = 'normal';
+  const dispatch = createEventDispatcher();
+</script>
+<button
+  {...$$restProps}
+  on:click={() => dispatch('click')}
+  class={`amplify-button ${$$props.class ?? ''}`}
+  {type}
+  style="font-weight: {fontWeight} "
+  data-fullwidth={fullWidth}
+  data-size={size}
+  data-fontWeight={fontWeight}
+  data-variation={variation}
+  data-amplify-button=""
+>
+  <slot />
+</button>

package/src/lib/components/primitives/AmplifyError.svelte ADDED Viewed

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import AmplifyButton from './AmplifyButton.svelte';
+	let isVisible = true;
+	function close() {
+		isVisible = false;
+	}
+</script>
+{#if isVisible}
+	<div
+		class="amplify-flex amplify-alert"
+		data-variation="error"
+		style="align-items: center; justify-content: space-between"
+		role="alert"
+	>
+		<div class="amplify-flex" style="align-items: center">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="amplify-icon"
+				viewBox="0 0 24 24"
+				fill="currentColor"
+			>
+				<path
+					d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"
+				/>
+			</svg>
+			<div><slot /></div>
+		</div>
+		<AmplifyButton
+			class="amplify-field-group__control"
+			variation="link"
+			fullWidth={false}
+			on:click={close}
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="amplify-icon"
+				viewBox="0 0 24 24"
+				fill="currentColor"
+			>
+				<path
+					d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+				/>
+			</svg>
+		</AmplifyButton>
+	</div>
+{/if}

package/src/lib/components/primitives/AmplifyFormField.svelte ADDED Viewed

@@ -0,0 +1,146 @@
+<script lang="ts">
+  import AmplifyPhoneNumberField from './AmplifyPhoneNumberField.svelte';
+  import AmplifyPasswordField from './AmplifyPasswordField.svelte';
+  import AmplifyTextField from './AmplifyTextField.svelte';
+  import AmplifyError from './AmplifyError.svelte';
+  import { authState, updateForm, updateBlur } from '$lib/components/authStore';
+  import {
+    ActorContextWithForms,
+    authInputAttributes,
+    AuthInputAttributes,
+    getActorContext,
+    translate,
+  } from '@aws-amplify/ui';
+  import { onMount } from 'svelte';
+  export let name: string;
+  export let type: string;
+  export let required = true;
+  export let placeholder = '';
+  export let label = '';
+  export let initialValue = '';
+  export let disabled = false;
+  export let autocomplete = '';
+  export let labelHidden = true;
+  const getAttributeMap: AttributeInfoProvider = () => authInputAttributes;
+  type AttributeInfoProvider = () => AuthInputAttributes;
+  let defaultCountryCode: string;
+  onMount(() => {
+    if (isPhoneField) {
+      const state = $authState;
+      const { country_code }: ActorContextWithForms = getActorContext(state);
+      defaultCountryCode = country_code;
+      // TODO: remove this side-effect
+      updateForm({
+        name: 'country_code',
+        value: country_code,
+      });
+    }
+  });
+  const attributeMap = getAttributeMap();
+  let error: string;
+  $: {
+    const formContext: ActorContextWithForms = getActorContext($authState);
+    const { validationError } = formContext;
+    error = translate(validationError[name]);
+  }
+  function onBlur($event) {
+    let { name } = <HTMLInputElement>$event?.detail?.target;
+    updateBlur({ name });
+  }
+  let inferLabel: string;
+  $: {
+    const myLabel = label || attributeMap[name]?.label;
+    inferLabel = translate<string>(myLabel);
+  }
+  let inferPlaceholder: string;
+  $: {
+    const myPlaceholder =
+      placeholder || attributeMap[name]?.placeholder || inferLabel;
+    inferPlaceholder = translate<string>(myPlaceholder);
+  }
+  // infers what the `type` of underlying input element should be.
+  let inferType: string;
+  $: {
+    inferType = type ?? attributeMap[name]?.type ?? 'text';
+  }
+  let inferAutocomplete: string;
+  $: {
+    inferAutocomplete = autocomplete || attributeMap[name]?.autocomplete;
+  }
+  // TODO(enhancement): use enum to differentiate special field types
+  let isPasswordField: boolean;
+  $: {
+    isPasswordField = inferType === 'password';
+  }
+  let isPhoneField: boolean;
+  isPhoneField = inferType === 'tel';
+</script>
+<div class="amplify-flex amplify-field" style="flex-direction: column">
+  <!-- Country code field -->
+  {#if isPhoneField}
+    <AmplifyPhoneNumberField
+      {defaultCountryCode}
+      type={inferType}
+      {name}
+      label={inferLabel}
+      placeholder={inferPlaceholder}
+      {required}
+      {initialValue}
+      {disabled}
+      {labelHidden}
+      autocomplete={inferAutocomplete}
+    />
+  {/if}
+  {#if isPasswordField}
+    <AmplifyPasswordField
+      {...$$restProps}
+      {name}
+      label={inferLabel}
+      placeholder={inferPlaceholder}
+      {required}
+      {initialValue}
+      {disabled}
+      {labelHidden}
+      autocomplete={inferAutocomplete}
+    />
+  {/if}
+  {#if !isPasswordField && !isPhoneField}
+    <AmplifyTextField
+      on:blur={onBlur}
+      type={inferType}
+      {name}
+      label={inferLabel}
+      placeholder={inferPlaceholder}
+      {required}
+      {initialValue}
+      {disabled}
+      {labelHidden}
+      autocomplete={inferAutocomplete}
+    />
+  {/if}
+  {#if error}
+    <AmplifyError>
+      {error}
+    </AmplifyError>
+  {/if}
+</div>

package/src/lib/components/primitives/AmplifyFormSelect.svelte ADDED Viewed

@@ -0,0 +1,39 @@
+<script lang="ts">
+	export let items: string[];
+	export let name: string;
+	export let label: string;
+	export let id: string;
+	export let defaultValue: string;
+</script>
+<label class="amplify-label sr-only" for={id}>
+	{label}
+</label>
+<div class="amplify-select__wrapper">
+	<select
+		class="amplify-select amplify-field-group__control"
+		autocomplete="tel-country-code"
+		{id}
+		{name}
+	>
+		{#each items as item}
+			<option value={item} selected={item === defaultValue}>
+				{item}
+			</option>
+		{/each}
+	</select>
+	<div
+		class="amplify-flex amplify-select__icon-wrapper"
+		style="align-items: center; justify-content: center"
+	>
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			class="amplify-icon"
+			viewBox="0 0 24 24"
+			data-size="large"
+			fill="currentColor"
+		>
+			<path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" />
+		</svg>
+	</div>
+</div>