12 implement twilio sms (#37)

* add twilio sdk

* add twilio config

use app version in config

* remove default config

* phone regex

* bun update

* create client

* fix env var

* create Textarea component

* move TextInput

* allow snippets on labels

* update with label and error

* move button

* make button children snippet

* add form props

* allow region code

* add twilio FROM number

* rename to twilioClient

* implement simple messaging

* add twilio phone number as empty var

* format

* move twilio client to local on requests

* fix story

* on second thought, dont use locals since we are only using twilio in one place

Don't want to init a twilio client on every request when its only used
in on a single page

* use i18n for page text

* validate env with a script

* remove Zod validation when loading env vars

.env

@@ -1,2 +1,7 @@
-VITE_APP_VERSION=1.0.0-alpha
+# TWILIO
+TWILIO_ACCOUNT_SID=
+TWILIO_AUTH_TOKEN=
+TWILIO_PHONE_NUMBER=
+
+# PRISMA
 DATABASE_URL="postgres://hestia:test123@localhost:5432/hestia"

messages/en.json

@@ -13,5 +13,9 @@
 	"login_error_email_incorrect": "Email is incorrect",
 	"login_error_password_incorrect": "Password is incorrect",
 	"login_error_email_inuse": "Email is already in use",
-	"login_error_user_not_found": "The user could not be found"
+	"login_error_user_not_found": "The user could not be found",
+	"sms_prompt": "Send a Message",
+	"sms_label_phone": "Phone Number",
+	"sms_label_message": "Message",
+	"sms_button_submit": "Send Message"
 }

package.json

@@ -3,7 +3,7 @@
 	"version": "0.0.1",
 	"type": "module",
 	"scripts": {
-		"dev": "bun database:up && bun prisma:push && vite dev",
+		"dev": "bun validate-env && bun database:up && bun prisma:push && vite dev",
 		"build": "vite build",
 		"build-storybook": "storybook build",
 		"database:up": "docker compose -p hestia -f devops/docker-compose.dev.yml up -d && docker compose -p hestia -f devops/docker-compose.dev.yml -f devops/docker-compose.wait.yml run --rm wait -c hestia-database:5432",
@@ -24,7 +24,8 @@
 		"prisma:reset": "prisma migrate reset --force",
 		"prisma:studio": "prisma studio",
 		"prisma:validate": "prisma validate",
-		"prepare": "husky"
+		"prepare": "husky",
+		"validate-env": "bun ./scripts/validate-env.ts"
 	},
 	"devDependencies": {
 		"@chromatic-com/storybook": "^3.2.2",
@@ -80,6 +81,7 @@
 		"pino": "^9.5.0",
 		"pino-pretty": "^13.0.0",
 		"tailwind-merge": "^2.5.5",
+		"twilio": "^5.4.0",
 		"zod": "^3.24.0"
 	}
 }

scripts/validate-env.ts

@@ -0,0 +1,19 @@
+import { PhoneRegex } from '../src/lib/regex/phone';
+import { z } from 'zod';
+
+const ValidateEnvironment = () => {
+	const { success, error } = z
+		.object({
+			TWILIO_ACCOUNT_SID: z.string().min(1),
+			TWILIO_AUTH_TOKEN: z.string().min(1),
+			TWILIO_PHONE_NUMBER: z.string().regex(PhoneRegex),
+		})
+		.safeParse(process.env);
+
+	if (!success) {
+		console.error(error.message);
+		process.exit(1);
+	}
+};
+
+ValidateEnvironment();

src/app.d.ts

@@ -1,4 +1,5 @@
 // See https://svelte.dev/docs/kit/types#app.d.ts
+
 // for information about these interfaces
 declare global {
 	namespace App {

src/lib/components/Actions/Button.stories.svelte

@@ -1,7 +1,8 @@
 <script module lang="ts">
 	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import Button from './Button.svelte';
 	import { fn } from '@storybook/test';
+	import type { ComponentProps } from 'svelte';
+	import Button from './Button.svelte';
 
 	const { Story } = defineMeta({
 		title: 'Actions/Button',
@@ -10,6 +11,7 @@
 			onClick: fn(),
 		},
 		argTypes: {
+			block: { control: 'boolean' },
 			color: {
 				control: 'select',
 				options: [
@@ -25,9 +27,12 @@
 					'error',
 				],
 			},
+			full: { control: 'boolean' },
+			glass: { control: 'boolean' },
 			outline: {
 				control: 'boolean',
 			},
+			responsive: { control: 'boolean' },
 			size: {
 				control: 'select',
 				options: ['Default', 'xs', 'sm', 'lg'],
@@ -37,8 +42,13 @@
 				control: 'select',
 				options: ['button', 'reset', 'submit'],
 			},
+			wide: { control: 'boolean' },
 		},
 	});
 </script>
 
-<Story name="Default" args={{ label: 'Button', color: 'primary' }} />
+{#snippet template({ children: _, ...props }: Partial<ComponentProps<typeof Button>>)}
+	<Button {...props}>Button</Button>
+{/snippet}
+
+<Story name="Default" args={{}} children={template} />

src/lib/components/Actions/Button.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
 	import type { DaisyColor, DaisySize } from '$lib/types';
+	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
 
 	interface Props {
 		block?: boolean;
+		children: Snippet;
 		color?: DaisyColor;
+		full?: boolean;
 		glass?: boolean;
-		label: string;
 		outline?: boolean;
 		onClick?: () => void;
 		responsive?: boolean;
@@ -17,9 +19,10 @@
 
 	let {
 		block = false,
+		children,
 		color,
+		full = false,
 		glass = false,
-		label,
 		outline = false,
 		onClick,
 		responsive = false,
@@ -35,6 +38,7 @@
 	class:btn-outline={outline}
 	class:btn-block={block}
 	class:btn-wide={wide}
+	class:w-full={full}
 	class:glass
 	class:btn-xs={size === 'xs'}
 	class:btn-sm={size === 'sm'}
@@ -51,7 +55,7 @@
 	class:btn-error={color === 'error'}
 	class={`btn ${responsive && 'btn-xs sm:btn-sm md:btn-md lg:btn-lg'}`}
 >
-	{label}
+	{@render children()}
 </button>
 
 <style></style>

src/lib/components/Actions/index.ts

@@ -0,0 +1 @@
+export { default as Button } from './Button.svelte';

src/lib/components/DataInput/TextInput.stories.svelte

@@ -6,27 +6,36 @@
 		title: 'Data Input/Text Input',
 		component: TextInput,
 		argTypes: {
+			bordered: {
+				control: 'boolean',
+			},
 			color: {
 				control: 'select',
 				options: [
+					'ghost',
 					'primary',
 					'secondary',
 					'accent',
-					'ghost',
-					'link',
 					'info',
 					'success',
 					'warning',
 					'error',
 				],
 			},
-			bordered: {
+			disabled: {
 				control: 'boolean',
 			},
+			error: {
+				control: 'text',
+			},
+			fade: { control: 'boolean' },
+			start: { control: 'text' },
+			end: { control: 'text' },
+			label: { control: 'text' },
+			placeholder: { control: 'text' },
 			size: {
 				control: 'select',
-				options: ['Default', 'xs', 'sm', 'lg'],
-				defaultValue: 'Default',
+				options: ['xs', 'sm', '-', 'lg'],
 			},
 			type: {
 				control: 'select',

src/lib/components/DataInput/TextInput.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+	import type { DaisyColor, DaisySize } from '$lib/types';
+	import type { Snippet } from 'svelte';
+	import type { HTMLInputTypeAttribute } from 'svelte/elements';
+	import { fade as fadeTransition } from 'svelte/transition';
+
+	type Props = {
+		bordered?: boolean;
+		color?: Exclude<DaisyColor, 'neutral'>;
+		disabled?: boolean;
+		error?: string | Snippet;
+		fade?: boolean;
+		start?: string | Snippet;
+		end?: string | Snippet;
+		label?: string | Snippet;
+		name: string;
+		placeholder?: string;
+		size?: DaisySize;
+		type?: Extract<
+			HTMLInputTypeAttribute,
+			'email' | 'password' | 'search' | 'tel' | 'text' | 'url'
+		>;
+	};
+
+	let {
+		bordered = false,
+		color,
+		disabled,
+		error,
+		fade,
+		start,
+		end,
+		label,
+		name,
+		placeholder,
+		size,
+		type = 'text',
+	}: Props = $props();
+</script>
+
+<label class="form-control w-full">
+	<div class="label">
+		<span
+			class="label-text"
+			class:text-primary={color === 'primary'}
+			class:text-secondary={color === 'secondary'}
+			class:text-accent={color === 'accent'}
+			class:text-info={color === 'info'}
+			class:text-success={color === 'success'}
+			class:text-warning={color === 'warning'}
+			class:text-error={color === 'error' || error}
+		>
+			{#if typeof label === 'string'}
+				{label}
+			{:else if label}
+				{@render label()}
+			{/if}
+		</span>
+		<span class="label-text-alt font-semibold text-error">
+			{#if typeof error === 'string'}
+				{error}
+			{:else if error}
+				{@render error()}
+			{/if}
+		</span>
+	</div>
+	<div
+		transition:fadeTransition={{ duration: fade ? 200 : 0 }}
+		class="input flex w-full items-center gap-2"
+		class:input-bordered={bordered}
+		class:input-xs={size === 'xs'}
+		class:input-sm={size === 'sm'}
+		class:input-lg={size === 'lg'}
+		class:input-primary={color === 'primary'}
+		class:input-secondary={color === 'secondary'}
+		class:input-accent={color === 'accent'}
+		class:input-ghost={color === 'ghost'}
+		class:input-link={color === 'link'}
+		class:input-info={color === 'info'}
+		class:input-success={color === 'success'}
+		class:input-warning={color === 'warning'}
+		class:input-error={color === 'error' || error}
+	>
+		{#if typeof start === 'string'}
+			{start}
+		{:else}
+			{@render start?.()}
+		{/if}
+		<input {disabled} {name} {placeholder} {type} class="grow" />
+		{#if typeof end === 'string'}
+			{end}
+		{:else}
+			{@render end?.()}
+		{/if}
+	</div>
+</label>
+
+<style>
+</style>

src/lib/components/DataInput/Textarea.stories.svelte

@@ -0,0 +1,51 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Textarea from './Textarea.svelte';
+	import type { ComponentProps } from 'svelte';
+
+	const { Story } = defineMeta({
+		title: 'Data Input/Textarea',
+		component: Textarea,
+		argTypes: {
+			bordered: {
+				control: 'boolean',
+			},
+			color: {
+				control: 'select',
+				options: [
+					'default',
+					'ghost',
+					'primary',
+					'secondary',
+					'accent',
+					'info',
+					'success',
+					'warning',
+					'error',
+				],
+			},
+			disabled: {
+				control: 'boolean',
+			},
+			error: {
+				control: 'text',
+			},
+			label: {
+				control: 'text',
+			},
+			placeholder: {
+				control: 'text',
+			},
+			size: {
+				control: 'select',
+				options: ['xs', 'sm', '-', 'lg'],
+			},
+		},
+	});
+</script>
+
+{#snippet template(props: ComponentProps<typeof Textarea>)}
+	<Textarea {...props} />
+{/snippet}
+
+<Story name="Default" args={{ label: 'Label' }} children={template} />

src/lib/components/DataInput/Textarea.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import type { DaisyColor, DaisySize } from '$lib/types';
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		bordered?: boolean;
+		color?: Omit<DaisyColor, 'neutral'>;
+		disabled?: boolean;
+		error?: string | Snippet;
+		form?: string;
+		label?: string | Snippet;
+		name?: string;
+		placeholder?: string;
+		size?: DaisySize;
+	};
+	let { bordered, color, error, label, size, ...props }: Props = $props();
+</script>
+
+<label class="form-control w-full max-w-lg">
+	<div class="label">
+		<span
+			class="label-text"
+			class:text-primary={color === 'primary'}
+			class:text-secondary={color === 'secondary'}
+			class:text-accent={color === 'accent'}
+			class:text-info={color === 'info'}
+			class:text-success={color === 'success'}
+			class:text-warning={color === 'warning'}
+			class:text-error={color === 'error' || error}
+		>
+			{#if typeof label === 'string'}
+				{label}
+			{:else if label}
+				{@render label()}
+			{/if}
+		</span>
+		<span class="label-text-alt font-semibold text-error">
+			{#if typeof error === 'string'}
+				{error}
+			{:else if error}
+				{@render error()}
+			{/if}
+		</span>
+	</div>
+	<textarea
+		class="textarea"
+		class:textarea-bordered={bordered}
+		class:textarea-xs={size === 'xs'}
+		class:textarea-sm={size === 'sm'}
+		class:textarea-lg={size === 'lg'}
+		class:textarea-ghost={color === 'ghost'}
+		class:textarea-primary={color === 'primary'}
+		class:textarea-secondary={color === 'secondary'}
+		class:textarea-accent={color === 'accent'}
+		class:textarea-info={color === 'info'}
+		class:textarea-success={color === 'success'}
+		class:textarea-warning={color === 'warning'}
+		class:textarea-error={color === 'error' || error}
+		{...props}
+	></textarea>
+</label>

src/lib/components/DataInput/index.ts

@@ -0,0 +1,2 @@
+export { default as Textarea } from './Textarea.svelte';
+export { default as TextInput } from './TextInput.svelte';

src/lib/components/common/Button/index.ts

@@ -1,3 +0,0 @@
-import Button from './Button.svelte';
-
-export default Button;

src/lib/components/common/TextInput/TextInput.svelte

@@ -1,68 +0,0 @@
-<script lang="ts">
-	import type { DaisyColor, DaisySize } from '$lib/types';
-	import type { Snippet } from 'svelte';
-	import type { HTMLInputTypeAttribute } from 'svelte/elements';
-	import { fade as fadeTransition } from 'svelte/transition';
-
-	type Props = {
-		bordered?: boolean;
-		color?: Exclude<DaisyColor, 'neutral'>;
-		disabled?: boolean;
-		fade?: boolean;
-		start?: Snippet | string;
-		end?: Snippet | string;
-		name: string;
-		placeholder?: string;
-		size?: DaisySize;
-		type?: Extract<
-			HTMLInputTypeAttribute,
-			'email' | 'password' | 'search' | 'tel' | 'text' | 'url'
-		>;
-	};
-
-	let {
-		bordered = false,
-		color,
-		disabled,
-		fade,
-		start,
-		end,
-		name,
-		placeholder,
-		size,
-		type = 'text',
-	}: Props = $props();
-</script>
-
-<label
-	transition:fadeTransition={{ duration: fade ? 200 : 0 }}
-	class="input flex w-full items-center gap-2"
-	class:input-bordered={bordered}
-	class:input-xs={size === 'xs'}
-	class:input-sm={size === 'sm'}
-	class:input-lg={size === 'lg'}
-	class:input-primary={color === 'primary'}
-	class:input-secondary={color === 'secondary'}
-	class:input-accent={color === 'accent'}
-	class:input-ghost={color === 'ghost'}
-	class:input-link={color === 'link'}
-	class:input-info={color === 'info'}
-	class:input-success={color === 'success'}
-	class:input-warning={color === 'warning'}
-	class:input-error={color === 'error'}
->
-	{#if typeof start === 'string'}
-		{start}
-	{:else}
-		{@render start?.()}
-	{/if}
-	<input {disabled} {name} {placeholder} {type} class="grow" />
-	{#if typeof end === 'string'}
-		{end}
-	{:else}
-		{@render end?.()}
-	{/if}
-</label>
-
-<style>
-</style>

src/lib/components/common/TextInput/index.ts

@@ -1,3 +0,0 @@
-import TextInput from './TextInput.svelte';
-
-export default TextInput;

src/lib/regex/index.ts

@@ -0,0 +1 @@
+export * from './phone';

src/lib/regex/phone.ts

@@ -0,0 +1 @@
+export const PhoneRegex = /^\+?\d?(\d{3}\d{3}\d{4}|\d{3}-\d{3}-\d{4})$/;

src/lib/server/config/index.ts

@@ -1,24 +0,0 @@
-import { logger } from '$lib/server/logger';
-import { z } from 'zod';
-
-export interface Configuration {
-	app_version: string;
-}
-
-export const LoadConfig = (): Configuration => {
-	const { success, data, error } = z
-		.object({
-			VITE_APP_VERSION: z.string().default('development'),
-		})
-		.safeParse(import.meta.env);
-
-	if (!success) {
-		logger.error(error.message);
-	}
-
-	return {
-		app_version: data!.VITE_APP_VERSION,
-	};
-};
-
-export const Config = LoadConfig();

src/lib/server/pothos/schema/index.ts

@@ -1,3 +1,4 @@
+import { version } from '$app/environment';
 import { builder } from '../builder';
 
 builder.queryType({});
@@ -5,7 +6,7 @@ builder.queryType({});
 builder.queryField('version', (t) =>
 	t.string({
 		description: 'Application version',
-		resolve: (parent, args, context) => context.config.app_version,
+		resolve: () => version,
 	})
 );
 

src/lib/server/twilio/client.ts

@@ -0,0 +1,4 @@
+import { TWILIO_ACCOUNT_SID, TWILIO_AUTH_TOKEN } from '$env/static/private';
+import twilio from 'twilio';
+
+export const TwilioClient = twilio(TWILIO_ACCOUNT_SID, TWILIO_AUTH_TOKEN);

src/lib/server/twilio/index.ts

@@ -0,0 +1 @@
+export * from './client';

src/lib/server/yoga/context.ts

@@ -1,7 +1,6 @@
-import { Config } from '$lib/server/config';
 import type { YogaInitialContext } from 'graphql-yoga';
 
 export const Context = (initialContext: YogaInitialContext) => ({
 	...initialContext,
-	config: Config,
+	config: {},
 });

src/routes/app/+page.svelte

@@ -1,2 +1,4 @@
 <script lang="ts">
 </script>
+
+<a href="/app/sms" class="btn btn-ghost">SMS</a>

src/routes/app/sms/+page.server.ts

@@ -0,0 +1,49 @@
+import { TWILIO_PHONE_NUMBER } from '$env/static/private';
+import { PhoneRegex } from '$lib/regex';
+import { logger } from '$lib/server/logger';
+import { TwilioClient } from '$lib/server/twilio';
+import { fail, type Actions } from '@sveltejs/kit';
+import zod from 'zod';
+
+export const actions = {
+	push: async (event) => {
+		const form = await event.request.formData();
+
+		if (!form.has('phone')) {
+			return fail(400, { error: 'phone_missing' });
+		}
+		if (!form.get('message')) {
+			return fail(400, { error: 'message_missing' });
+		}
+
+		const {
+			success: phoneSuccess,
+			data: phone,
+			error: phoneError,
+		} = zod.string().regex(PhoneRegex).safeParse(form.get('phone'));
+		if (!phoneSuccess) {
+			logger.error(phoneError);
+			return fail(400, { error: 'invalid_phone' });
+		}
+
+		const message = form.get('message');
+		if (typeof message !== 'string') {
+			return fail(400, { error: 'invalid_message' });
+		}
+
+		try {
+			const result = await TwilioClient.messages.create({
+				to: phone,
+				body: message,
+				from: TWILIO_PHONE_NUMBER,
+			});
+			logger.debug(result);
+		} catch (e) {
+			logger.error(e);
+			fail(500, { success: false });
+		}
+		return {
+			success: true,
+		};
+	},
+} satisfies Actions;

src/routes/app/sms/+page.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	import { Button } from '$lib/components/Actions';
+	import { Textarea, TextInput } from '$lib/components/DataInput';
+	import { fade } from 'svelte/transition';
+	import type { ActionData } from './$types';
+	import { messages } from '$lib/i18n';
+
+	type Props = {
+		form: ActionData;
+	};
+	let { form }: Props = $props();
+</script>
+
+{#snippet PhoneLabel()}
+	<i class="fi fi-sr-phone-flip"></i> {messages.sms_label_phone()}
+{/snippet}
+
+{#snippet MessageLabel()}
+	<i class="fi fi-sr-comment-alt"></i> {messages.sms_label_message()}
+{/snippet}
+
+{#snippet alert(message: string)}
+	<div role="alert" class="alert alert-error absolute -top-20" transition:fade>
+		<i class="fi fi-bs-octagon-xmark h-6 w-6 shrink-0"></i>
+		<span>{message}</span>
+	</div>
+{/snippet}
+
+<div class="page" transition:fade>
+	<div class="card bg-base-200 px-4 pt-4 shadow-xl">
+		<div class="card-title justify-center">
+			<h2 class="text-2xl font-semibold">{messages.sms_prompt()}</h2>
+			{#if form?.error}
+				{@render alert(form.error)}
+			{/if}
+		</div>
+		<form id="sms" method="POST" action="?/push" use:enhance>
+			<div class="card-body">
+				<TextInput
+					type="tel"
+					name="phone"
+					label={PhoneLabel}
+					placeholder="XXX-XXX-XXXX"
+					bordered
+					fade
+				/>
+				<Textarea
+					label={MessageLabel}
+					size="lg"
+					error={form?.error}
+					name="message"
+					placeholder="..."
+					form="sms"
+				/>
+			</div>
+			<div class="card-actions justify-center px-8 pb-4">
+				<Button outline type="submit" full>{messages.sms_button_submit()}</Button>
+			</div>
+		</form>
+	</div>
+</div>
+
+<style>
+	.page {
+		@apply flex flex-col items-center justify-around gap-24 py-[10%];
+	}
+</style>

src/routes/login/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import Button from '$lib/components/common/Button';
-	import TextInput from '$lib/components/common/TextInput';
+	import { TextInput } from '$lib/components/DataInput';
+	import { Button } from '$lib/components/Actions';
 	import Tabs from '$lib/components/Navigation/Tabs';
 	import { messages } from '$lib/i18n/index.js';
 	import { fade } from 'svelte/transition';
@@ -54,7 +54,7 @@
 			{/if}
 		</div>
 		<div class="card-actions px-4">
-			<Button block type="submit" label={messages.login_button_submit()} outline />
+			<Button block type="submit" outline>{messages.login_button_submit()}</Button>
 		</div>
 	</form>
 {/snippet}

svelte.config.js

@@ -8,6 +8,9 @@ const config = {
 	preprocess: vitePreprocess(),
 
 	kit: {
+		version: {
+			name: '1.0.0-alpha',
+		},
 		// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
 		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
 		// See https://svelte.dev/docs/kit/adapters for more information about adapters.