@aws-amplify/ui-svelte 0.0.0-next-c8114c5-20220105200613 → 0.0.0-next-3785286-20220106221746

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

@@ -1,25 +0,0 @@
-<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

@@ -1,48 +0,0 @@
-<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

@@ -1,146 +0,0 @@
-<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

@@ -1,39 +0,0 @@
-<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>

package/src/lib/components/primitives/AmplifyPasswordField.svelte

@@ -1,78 +0,0 @@
-<script lang="ts">
-	import AmplifyButton from './AmplifyButton.svelte';
-	import { nanoid } from 'nanoid';
-	import { translate } from '@aws-amplify/ui';
-	export let autocomplete = 'new-password';
-	export let disabled = false;
-	export let fieldId: string = `amplify-field-${nanoid(12)}`;
-	export let initialValue = '';
-	export let label = '';
-	export let name: string;
-	export let placeholder = '';
-	export let required = true;
-	export let labelHidden = false;
-
-	export let type: 'text' | 'password' = 'password';
-
-	let showPassword = false;
-	let showPasswordButtonlabel = translate('Show password');
-	function togglePasswordText() {
-		showPassword = !showPassword;
-		showPasswordButtonlabel = showPassword
-			? translate('Show password')
-			: translate('Hide password');
-		type = showPassword ? 'text' : 'password';
-	}
-</script>
-
-<label class="amplify-label {labelHidden ? 'sr-only' : ''}" for={fieldId}>
-	{label}
-</label>
-<div class="amplify-flex amplify-field-group">
-	<input
-		{...$$restProps}
-		class={`amplify-input amplify-field-group__control ${$$props.class ?? ''}`}
-		id={fieldId}
-		{type}
-		{name}
-		{placeholder}
-		{required}
-		value={initialValue}
-		{disabled}
-		{autocomplete}
-	/>
-	<div class="amplify-field-group__outer-end">
-		<AmplifyButton
-			amplify-button
-			aria-label={showPasswordButtonlabel}
-			class="amplify-field-group__control amplify-field__show-password"
-			on:click={togglePasswordText}
-		>
-			{#if !showPassword}
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					fill="currentColor"
-					viewBox="0 0 24 24"
-					class="amplify-icon"
-				>
-					<path
-						d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
-					/>
-				</svg>
-			{/if}
-			{#if showPassword}
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					fill="currentColor"
-					viewBox="0 0 24 24"
-					class="amplify-icon"
-				>
-					<path d="M0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0z" fill="none" />
-					<path
-						d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"
-					/>
-				</svg>
-			{/if}
-		</AmplifyButton>
-	</div>
-</div>

package/src/lib/components/primitives/AmplifyPhoneNumberField.svelte

@@ -1,52 +0,0 @@
-<script lang="ts">
-	import AmplifyFormSelect from './AmplifyFormSelect.svelte';
-	import { nanoid } from 'nanoid';
-	import { countryDialCodes } from '@aws-amplify/ui';
-
-	export let autocomplete = 'new-password';
-	export let disabled = false;
-	export let defaultCountryCode: string;
-	export let selectFieldId: string = `amplify-field-${nanoid(12)}`;
-	export let textFieldId: string = `amplify-field-${nanoid(12)}`;
-	export let initialValue = '';
-	export let label = '';
-	export let name: string;
-	export let placeholder = '';
-	export let required = true;
-	export let type: string;
-	export let labelHidden = false;
-</script>
-
-<label class="amplify-label {labelHidden ? 'sr-only' : ''}" for={textFieldId}>
-	{label}
-</label>
-<div class="amplify-flex amplify-phonenumberfield" amplify-field-group style="gap: 0px">
-	<div class="amplify-field-group__outer-start">
-		<div
-			class="
-        amplify-flex amplify-field amplify-selectfield amplify-countrycodeselect
-      "
-			style="flex-direction: column"
-		>
-			<AmplifyFormSelect
-				name="country_code"
-				label="Country Code"
-				id={selectFieldId}
-				items={countryDialCodes}
-				defaultValue={defaultCountryCode}
-			/>
-		</div>
-	</div>
-
-	<input
-		class="amplify-input"
-		id={textFieldId}
-		{type}
-		{name}
-		{placeholder}
-		{required}
-		value={initialValue}
-		{disabled}
-		{autocomplete}
-	/>
-</div>

package/src/lib/components/primitives/AmplifyTabs.svelte

@@ -1,52 +0,0 @@
-<script lang="ts">
-	//tab list
-	const tabs = [
-		{
-			active: true,
-			labelledById: '1',
-			id: '1',
-			title: 'Sign In'
-		},
-		{
-			active: false,
-			labelledById: '2',
-			id: '2',
-			title: 'Sign Up'
-		}
-	];
-
-	function handleTabClick(e) {
-		// future
-	}
-</script>
-
-<div
-	tabindex="0"
-	aria-orientation="horizontal"
-	data-orientation="horizontal"
-	role="tablist"
-	style="outline: none"
->
-	<div
-		class="amplify-flex amplify-tabs"
-		data-indicator-position="top"
-		style="gap: 0px; justify-content: center"
-	>
-		{#each tabs as tab}
-			<div
-				class="amplify-tabs-item"
-				data-spacing="equal"
-				data-orientation="horizontal"
-				role="tab"
-				id={tab.labelledById}
-				tabindex={tab.active ? 0 : 1}
-				aria-selected={tab.active}
-				aria-controls={tab.id}
-				data-state={tab.active ? 'active' : 'inactive'}
-				on:click={() => handleTabClick(tab)}
-			>
-				{tab.title}
-			</div>
-		{/each}
-	</div>
-</div>

package/src/lib/components/primitives/AmplifyTextField.svelte

@@ -1,33 +0,0 @@
-<script lang="ts">
-	import { createEventDispatcher } from 'svelte';
-	import { nanoid } from 'nanoid';
-	export let autocomplete = 'new-password';
-	export let disabled = false;
-	export let fieldId: string = `amplify-field-${nanoid(12)}`;
-	export let initialValue = '';
-	export let label = '';
-	export let name: string;
-	export let placeholder = '';
-	export let required = true;
-	export let type: string;
-	export let labelHidden = false;
-
-	const dispatch = createEventDispatcher();
-</script>
-
-<label class="amplify-label {labelHidden ? 'sr-only' : ''}" for={fieldId}>
-	{label}
-</label>
-<input
-	{...$$restProps}
-	on:blur={($event) => dispatch('blur', $event)}
-	class={`amplify-input ${$$props.class ?? ''}`}
-	id={fieldId}
-	{type}
-	{name}
-	{placeholder}
-	{required}
-	value={initialValue}
-	{disabled}
-	{autocomplete}
-/>

package/src/lib/index.ts

@@ -1,4 +0,0 @@
-import Authenticator from './components/Authenticator.svelte';
-import * as authStore from '$lib/components/authStore';
-
-export { Authenticator, authStore };

package/src/lib/styles.css

@@ -1 +0,0 @@
-@import '@aws-amplify/ui/styles.css';

package/src/routes/index.svelte

@@ -1,8 +0,0 @@
-<script>
-	import Authenticator from '$lib/components/Authenticator.svelte';
-	import '$lib/styles.css';
-</script>
-
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
-<Authenticator loginMechanisms={['email']} />

package/svelte.config.js

@@ -1,41 +0,0 @@
-import adapter from '@sveltejs/adapter-static';
-import preprocess from 'svelte-preprocess';
-import path from 'path';
-import { fileURLToPath } from 'url';
-import { dirname } from 'path';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-
-/** @type {import('@sveltejs/kit').Config} */
-const config = {
-	// Consult https://github.com/sveltejs/svelte-preprocess
-	// for more information about preprocessors
-	preprocess: preprocess(),
-
-	kit: {
-		adapter: adapter(),
-		package: {
-			dir: 'dist'
-		},
-
-		// hydrate the <div id="svelte"> element in src/app.html
-		target: '#svelte',
-		vite: {
-			ssr: {
-				noExternal:
-					process.env.NODE_ENV !== 'development' ? ['lodash', 'xstate', 'style-dictionary'] : []
-			},
-			resolve: {
-				alias: {
-					'./runtimeConfig': './runtimeConfig.browser',
-					entries: {
-						svelte: path.join(__dirname, '../../node_modules/svelte')
-					}
-				}
-			}
-		}
-	}
-};
-
-export default config;

package/tsconfig.json

@@ -1,31 +0,0 @@
-{
-	"compilerOptions": {
-		"moduleResolution": "node",
-		"module": "es2020",
-		"lib": ["es2020", "DOM"],
-		"target": "es2020",
-		/**
-			svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
-			to enforce using \`import type\` instead of \`import\` for Types.
-			*/
-		"importsNotUsedAsValues": "error",
-		"isolatedModules": true,
-		"resolveJsonModule": true,
-		/**
-			To have warnings/errors of the Svelte compiler at the correct position,
-			enable source maps by default.
-			*/
-		"sourceMap": true,
-		"esModuleInterop": true,
-		"skipLibCheck": true,
-		"forceConsistentCasingInFileNames": true,
-		"baseUrl": ".",
-		"allowJs": true,
-		"checkJs": true,
-		"paths": {
-			"$lib": ["src/lib"],
-			"$lib/*": ["src/lib/*"]
-		}
-	},
-	"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"]
-}