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

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

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

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

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

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

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

package/src/lib/styles.css

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

package/src/routes/index.svelte

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

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

@@ -0,0 +1,31 @@
+{
+	"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"]
+}