feature(frontend): Button component (#616)

* feature(frontend): Button component

* feature(frontend): Ajust style

frontend/src/lib/components/EditorBar.svelte

@@ -13,6 +13,7 @@
 	import Modal from './Modal.svelte'
 	import ResourceEditor from './ResourceEditor.svelte'
 	import VariableEditor from './VariableEditor.svelte'
+	import Button from './common/button/Button.svelte'
 
 	export let lang: 'python3' | 'deno' | 'go'
 	export let editor: Editor
@@ -171,65 +172,40 @@
 <ResourceEditor bind:this={resourceEditor} on:refresh={resourcePicker.openModal} />
 <VariableEditor bind:this={variableEditor} on:create={variablePicker.openModal} />
 
-<div class="flex divide-x items-center overflow-x-auto">
+<div class="flex divide-x items-center">
 	<div>
-		<button
-			type="button"
-			class="mr-1 bg-white rounded-md items-center flex hover:bg-gray-100 font-medium text-xs p-2"
-			on:click={() => {
-				variablePicker.openModal()
-			}}
+		<Button
+			color="light"
+			btnClasses="mr-1"
+			on:click={variablePicker.openModal}
+			size="xs"
+			startIcon={{ icon: faFile }}
 		>
-			<Icon data={faFile} class="h-4 w-4 mr-2" />
 			Insert variable
-		</button>
+		</Button>
 	</div>
 	<div>
-		<button
-			type="button"
-			class="mx-1 bg-white rounded-md items-center flex hover:bg-gray-100 font-medium text-xs p-2"
-			on:click={() => {
-				resourcePicker.openModal()
-			}}
-		>
-			<Icon data={faCube} class="h-4 w-4 mr-2" />
+		<Button btnClasses="mx-1" size="xs" color="light" on:click={resourcePicker.openModal}>
+			<Icon data={faCube} class="mr-2" />
 			Insert resource
-		</button>
+		</Button>
 	</div>
 
 	<div>
-		<button
-			type="button"
-			class="mx-1  bg-white rounded-md items-center flex hover:bg-gray-100 font-medium  text-xs p-2"
-			on:click={() => {
-				scriptPicker.openModal()
-			}}
-		>
-			<Icon data={faCode} class="h-4 w-4 mr-2" />
+		<Button btnClasses="mx-1" size="xs" color="light" on:click={scriptPicker.openModal}>
+			<Icon data={faCode} class="mr-2" />
 			Search script
-		</button>
+		</Button>
 	</div>
 
 	<div>
-		<button
-			type="button"
-			class="mx-1 bg-white rounded-md items-center flex hover:bg-gray-100 font-medium  text-xs p-2"
-			on:click={() => {
-				editor.clearContent()
-			}}
-		>
-			<Icon data={faRotateLeft} class="h-4 w-4 mr-2" />
+		<Button btnClasses="mx-1" size="xs" color="light" on:click={editor.clearContent}>
+			<Icon data={faRotateLeft} class="mr-2" />
 			Reset content
-		</button>
+		</Button>
 	</div>
 	<div>
-		<button
-			type="button"
-			class="ml-1 bg-white rounded-md items-center flex hover:bg-gray-100 font-medium text-xs p-2"
-			on:click={() => {
-				editor.reloadWebsocket()
-			}}
-		>
+		<Button btnClasses="ml-1" size="xs" color="light" on:click={editor.reloadWebsocket}>
 			<Icon data={faRotate} class="h-4 w-4 mr-2" />
 
 			Reload assistants
@@ -242,6 +218,6 @@
 					<span class={websocketAlive.black ? 'text-green-600' : 'text-red-700'}>Black</span>)
 				{/if}
 			</span>
-		</button>
+		</Button>
 	</div>
 </div>

frontend/src/lib/components/FlowBuilder.svelte

@@ -16,7 +16,7 @@
 	import CenteredPage from './CenteredPage.svelte'
 	import { OFFSET } from './CronInput.svelte'
 	import FlowEditor from './flows/FlowEditor.svelte'
-	import { flowStateStore, type FlowState } from './flows/flowState'
+	import { flowStateStore } from './flows/flowState'
 	import { flowStore } from './flows/flowStore'
 	import FlowImportExportMenu from './flows/header/FlowImportExportMenu.svelte'
 	import { loadFlowSchedule, type Schedule } from './flows/scheduleUtils'

frontend/src/lib/components/ScriptEditor.svelte

@@ -22,6 +22,7 @@
 	import { HSplitPane, VSplitPane } from 'svelte-split-pane'
 	import { faGithub } from '@fortawesome/free-brands-svg-icons'
 	import EditorBar from './EditorBar.svelte'
+	import Button from './common/button/Button.svelte'
 
 	// Exported
 	export let schema: Schema = emptySchema()
@@ -196,30 +197,33 @@
 
 		<div class="flex divide-x">
 			<div>
-				<a
+				<Button
 					target="_blank"
 					href="https://github.com/windmill-labs/windmill-gh-action-deploy"
-					class="text-gray-800 mx-1 bg-white rounded-md items-center flex border-gray-300  hover:bg-gray-100 font-medium text-xs p-2"
+					color="light"
+					size="xs"
+					btnClasses="mr-1"
+					startIcon={{
+						icon: faGithub
+					}}
 				>
-					<Icon data={faGithub} class="h-4 w-4 mr-2" />
 					Sync from Github
-				</a>
+				</Button>
 			</div>
 
 			<div>
-				<button
-					type="button"
-					on:click|stopPropagation={() => runPreview()}
+				<Button
+					on:click={() => runPreview()}
 					disabled={previewIsLoading}
-					class="text-white ml-1 w-28 bg-blue-500 hover:bg-blue-700 rounded-md flex justify-center items-center  focus:outline-none font-medium text-xs p-2"
+					btnClasses="w-32 ml-1"
+					size="xs"
+					startIcon={{
+						icon: previewIsLoading ? faRotateRight : faPlay,
+						classes: classNames(previewIsLoading ? 'animate-spin' : 'animate-none')
+					}}
 				>
-					<Icon
-						data={previewIsLoading ? faRotateRight : faPlay}
-						class={classNames('h-4 w-4 mr-2', previewIsLoading ? 'animate-spin' : 'animate-none')}
-					/>
-
 					{previewIsLoading ? 'Running' : 'Run preview'}
-				</button>
+				</Button>
 			</div>
 		</div>
 	</div>

frontend/src/lib/components/common/button/Button.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import { classNames } from '$lib/utils'
+	import Icon from 'svelte-awesome'
+
+	export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'
+	export let color: 'blue' | 'dark' | 'light' = 'blue'
+	export let variant: 'contained' | 'border' = 'contained'
+	export let btnClasses: string = ''
+	export let disabled: boolean = false
+	export let href: string | undefined = undefined
+	export let target: '_self' | '_blank' = '_self'
+
+	export let startIcon: { icon: any; classes?: string } | undefined = undefined
+	export let endIcon: { icon: any; classes?: string } | undefined = undefined
+
+	function getColorClasses() {
+		switch (color) {
+			case 'blue':
+				return 'bg-blue-500 hover:bg-blue-700 focus:ring-blue-300 text-white '
+			case 'light':
+				return 'text-gray-800 bg-white hover:bg-gray-100 focus:ring-gray-300'
+			default:
+				return ''
+		}
+	}
+
+	function getSizeClasses() {
+		switch (size) {
+			case 'xs':
+				return 'text-xs'
+			case 'sm':
+				return 'text-sm'
+			case 'md':
+				return 'text-md'
+			case 'lg':
+				return 'text-lg'
+			case 'xl':
+				return 'text-xl'
+			default:
+				return ''
+		}
+	}
+
+	const buttonProps = {
+		class: classNames(
+			getColorClasses(),
+			getSizeClasses(),
+			'focus:ring-4 font-medium',
+			'px-4 py-2',
+			'rounded-md',
+			'flex justify-center items-center',
+			variant === 'border' ? 'border' : '',
+			btnClasses
+		),
+		disabled
+	}
+</script>
+
+{#if href}
+	<a {href} {target} on:click|stopPropagation {...buttonProps}>
+		{#if startIcon}
+			<Icon data={startIcon.icon} class={classNames('mr-2', startIcon.classes)} />
+		{/if}
+		<slot />
+		{#if endIcon}
+			<Icon data={endIcon.icon} class={classNames('ml-2', endIcon.classes)} />
+		{/if}
+	</a>
+{:else}
+	<button type="button" on:click|stopPropagation {...buttonProps}>
+		{#if startIcon}
+			<Icon data={startIcon.icon} class={classNames('mr-2', startIcon.classes)} />
+		{/if}
+		<slot />
+		{#if endIcon}
+			<Icon data={endIcon.icon} class={classNames('ml-2', endIcon.classes)} />
+		{/if}
+	</button>
+{/if}

frontend/src/lib/components/flows/header/FlowImportExportMenu.svelte

@@ -7,15 +7,7 @@
 	import FlowViewer from '$lib/components/FlowViewer.svelte'
 	import SimpleEditor from '$lib/components/SimpleEditor.svelte'
 	import { sendUserToast } from '$lib/utils'
-	import { faCloudscale } from '@fortawesome/free-brands-svg-icons'
-	import {
-		faCloud,
-		faCloudUpload,
-		faFileExport,
-		faFileImport,
-		faGlobe,
-		faUpload
-	} from '@fortawesome/free-solid-svg-icons'
+	import { faFileExport, faFileImport, faGlobe } from '@fortawesome/free-solid-svg-icons'
 	import Icon from 'svelte-awesome'
 	import { flowStore, initFlow } from '../flowStore'
 	import { cleanInputs } from '../utils'

frontend/src/lib/components/flows/header/FlowPreviewButtons.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import Button from '$lib/components/common/button/Button.svelte'
+
 	import Drawer from '$lib/components/common/drawer/Drawer.svelte'
 	import FlowPreviewContent from '$lib/components/FlowPreviewContent.svelte'
 	import { faPlay } from '@fortawesome/free-solid-svg-icons'
@@ -20,31 +22,31 @@
 </script>
 
 <span class="space-x-2 flex h-8">
-	<button
-		type="button"
+	<Button
+		size="sm"
 		disabled={upToDisabled}
+		color="light"
+		variant="border"
 		on:click={() => {
 			previewMode = 'upTo'
 
 			previewOpen = !previewOpen
 		}}
-		class="flex items-center text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-4 py-2"
 	>
 		Test up to this step
 		<Icon data={faPlay} class="ml-2" scale={0.8} />
-	</button>
+	</Button>
 
-	<button
-		type="button"
+	<Button
 		on:click={() => {
 			previewMode = 'whole'
 			previewOpen = !previewOpen
 		}}
-		class="flex items-center  text-white bg-blue-500 hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-1 focus:outline-none "
+		size="sm"
 	>
 		Test flow
 		<Icon data={faPlay} class="ml-2" scale={0.8} />
-	</button>
+	</Button>
 </span>
 
 <Drawer bind:open={previewOpen} size="800px">

frontend/src/lib/utils.ts

@@ -558,7 +558,7 @@ export function scriptToHubUrl(
 	return url
 }
 
-export function classNames(...classes: string[]): string {
+export function classNames(...classes: Array<string | undefined>): string {
 	return classes.filter(Boolean).join(' ')
 }