remove flowbite-svelte (#823)

* remove flowbite-svelte

* remove package

* Fix badge

frontend/package-lock.json

@@ -33,7 +33,6 @@
 				"eslint-config-prettier": "^8.3.0",
 				"eslint-plugin-svelte3": "^4.0.0",
 				"flowbite": "^1.5.3",
-				"flowbite-svelte": "^0.27.8",
 				"openapi-typescript-codegen": "^0.23.0",
 				"path-browserify": "^1.0.1",
 				"postcss": "^8.4.18",
@@ -1352,12 +1351,6 @@
 				"fsevents": "~2.3.2"
 			}
 		},
-		"node_modules/classnames": {
-			"version": "2.3.2",
-			"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
-			"integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==",
-			"dev": true
-		},
 		"node_modules/cli-boxes": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-3.0.0.tgz",
@@ -2734,21 +2727,6 @@
 				"mini-svg-data-uri": "^1.4.3"
 			}
 		},
-		"node_modules/flowbite-svelte": {
-			"version": "0.27.8",
-			"resolved": "https://registry.npmjs.org/flowbite-svelte/-/flowbite-svelte-0.27.8.tgz",
-			"integrity": "sha512-yUOBTL+ViiXqHyUMREH/MdTzkuDOuaGrE/3f9NG4fymqVdrT3LLKYoZzlpQ8mW8Vt9uhyvd1w5tzcoydKuORJA==",
-			"dev": true,
-			"dependencies": {
-				"@popperjs/core": "^2.11.6",
-				"classnames": "^2.3.2",
-				"flowbite": "^1.5.3"
-			},
-			"engines": {
-				"node": ">=16.0.0",
-				"npm": ">=7.0.0"
-			}
-		},
 		"node_modules/fraction.js": {
 			"version": "4.2.0",
 			"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
@@ -7484,12 +7462,6 @@
 				"readdirp": "~3.6.0"
 			}
 		},
-		"classnames": {
-			"version": "2.3.2",
-			"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
-			"integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==",
-			"dev": true
-		},
 		"cli-boxes": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-3.0.0.tgz",
@@ -8447,17 +8419,6 @@
 				"mini-svg-data-uri": "^1.4.3"
 			}
 		},
-		"flowbite-svelte": {
-			"version": "0.27.8",
-			"resolved": "https://registry.npmjs.org/flowbite-svelte/-/flowbite-svelte-0.27.8.tgz",
-			"integrity": "sha512-yUOBTL+ViiXqHyUMREH/MdTzkuDOuaGrE/3f9NG4fymqVdrT3LLKYoZzlpQ8mW8Vt9uhyvd1w5tzcoydKuORJA==",
-			"dev": true,
-			"requires": {
-				"@popperjs/core": "^2.11.6",
-				"classnames": "^2.3.2",
-				"flowbite": "^1.5.3"
-			}
-		},
 		"fraction.js": {
 			"version": "4.2.0",
 			"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",

frontend/package.json

@@ -30,7 +30,6 @@
 		"eslint-config-prettier": "^8.3.0",
 		"eslint-plugin-svelte3": "^4.0.0",
 		"flowbite": "^1.5.3",
-		"flowbite-svelte": "^0.27.8",
 		"openapi-typescript-codegen": "^0.23.0",
 		"path-browserify": "^1.0.1",
 		"postcss": "^8.4.18",

frontend/src/lib/components/FlowStatusViewer.svelte

@@ -3,12 +3,12 @@
 	import { workspaceStore } from '$lib/stores'
 	import FlowJobResult from './FlowJobResult.svelte'
 	import FlowPreviewStatus from './preview/FlowPreviewStatus.svelte'
-	import { Button } from 'flowbite-svelte'
 	import Icon from 'svelte-awesome'
 	import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'
 	import { createEventDispatcher } from 'svelte'
 	import { onDestroy } from 'svelte'
 	import { flowStateStore } from './flows/flowState'
+	import Button from './common/button/Button.svelte'
 
 	const dispatch = createEventDispatcher()
 
@@ -73,8 +73,9 @@
 			</h3>
 			{#each flowJobIds.flowJobs as loopJobId, j}
 				<Button
-					color={forloop_selected == loopJobId ? 'dark' : 'light'}
-					class="flex justify-between w-full"
+					variant={forloop_selected === loopJobId ? 'contained' : 'border'}
+					color={forloop_selected === loopJobId ? 'dark' : 'light'}
+					btnClasses="w-full flex justify-start"
 					on:click={() => {
 						if (forloop_selected == loopJobId) {
 							forloop_selected = ''

frontend/src/lib/components/JobStatus.svelte

@@ -12,7 +12,7 @@
 	import Icon from 'svelte-awesome'
 
 	import type { CompletedJob, QueuedJob } from '$lib/gen'
-	import { Badge } from 'flowbite-svelte'
+	import Badge from './common/badge/Badge.svelte'
 
 	const SMALL_ICON_SCALE = 0.7
 

frontend/src/lib/components/SchemaEditorProperty.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { SchemaProperty } from '$lib/common'
-	import { Badge } from 'flowbite-svelte'
+	import Badge from './common/badge/Badge.svelte'
 
 	export let property: SchemaProperty
 </script>

frontend/src/lib/components/ScriptBuilder.svelte

@@ -7,20 +7,18 @@
 	import { initialCode, isInitialCode } from '$lib/script_helpers'
 	import { workspaceStore } from '$lib/stores'
 	import { encodeState, sendUserToast, setQueryWithoutLoad } from '$lib/utils'
-	import { Breadcrumb, BreadcrumbItem } from 'flowbite-svelte'
-	import SvelteMarkdown from 'svelte-markdown'
 	import Path from './Path.svelte'
 	import RadioButton from './RadioButton.svelte'
 	import Required from './Required.svelte'
 	import ScriptEditor from './ScriptEditor.svelte'
 	import ScriptSchema from './ScriptSchema.svelte'
 	import CenteredPage from './CenteredPage.svelte'
-	import Tooltip from './Tooltip.svelte'
 	import UnsavedConfirmationModal from './common/confirmationModal/UnsavedConfirmationModal.svelte'
 	import { dirtyStore } from './common/confirmationModal/dirtyStore'
 	import { Button } from './common'
 	import { slide } from 'svelte/transition'
 	import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'
+	import Breadcrumb from './common/breadcrumb/Breadcrumb.svelte'
 
 	export let script: Script
 	export let initialPath: string = ''
@@ -85,35 +83,18 @@
 <div class="flex flex-col h-screen">
 	<!-- Nav between steps-->
 	<div class="flex flex-col w-full px-4 py-2 border-b shadow-sm">
-		<div class="justify-between flex flex-row drop-shadow-sm w-full">
+		<div class="justify-between flex flex-row w-full">
 			<div class="flex flex-row w-full">
-				<Breadcrumb>
-					<BreadcrumbItem>New Script</BreadcrumbItem>
-					<BreadcrumbItem>
-						<button on:click={() => changeStep(1)} class={step === 1 ? 'font-bold' : null}>
-							Metadata
-						</button>
-					</BreadcrumbItem>
-					<BreadcrumbItem>
-						<button
-							on:click={() => changeStep(2)}
-							class={step === 2 ? 'font-bold' : null}
-							disabled={pathError != ''}
-						>
-							Code
-						</button>
-					</BreadcrumbItem>
-					<BreadcrumbItem>
-						<button
-							on:click={() => changeStep(3)}
-							class={step === 3 ? 'font-bold' : null}
-							disabled={pathError != ''}
-						>
-							UI customisation
-						</button>
-					</BreadcrumbItem>
+				<Breadcrumb
+					items={['Metadata', 'Code', 'UI Customisation']}
+					selectedIndex={step}
+					on:select={(e) => changeStep(e.detail.index + 1)}
+					disabled={pathError != ''}
+				>
+					<svelte:fragment slot="separator">/</svelte:fragment>
 				</Breadcrumb>
 			</div>
+			<span>{script.path}</span>
 			<div class="flex flex-row-reverse ml-2">
 				{#if step != 3}
 					<Button

frontend/src/lib/components/common/badge/Badge.svelte

@@ -52,7 +52,7 @@
 			(color.startsWith(ColorModifier) ? hovers[color.replace(ColorModifier, '')] : hovers[color]),
 		rounded ? 'rounded-full px-2 py-1' : 'rounded px-2.5 py-0.5',
 		index
-			? 'absolute flex justify-center items-center font-bold overflow-hidden border-2 border-white dark:border-gray-900 ' +
+			? 'absolute flex justify-center items-center font-bold overflow-hidden border-2 border-white dark:border-gray-900' +
 					(large ? 'w-7 h-7 -top-3.5 -right-3.5' : 'w-6 h-6 -top-3 -right-3')
 			: '',
 		$$props.class
@@ -61,7 +61,7 @@
 	const handleHide = () => (hidden = !hidden)
 </script>
 
-<span class="inline-flex justify-center items-center">
+<span class="inline-flex justify-center items-center whitespace-nowrap">
 	<svelte:element
 		this={href ? 'a' : 'span'}
 		{href}

frontend/src/lib/components/common/breadcrumb/Breadcrumb.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { classNames } from '$lib/utils'
+	import { createEventDispatcher } from 'svelte'
+	import Button from '../button/Button.svelte'
+
+	export let items: string[]
+	export let selectedIndex: number
+	export let disabled: boolean = false
+
+	const dispatch = createEventDispatcher()
+</script>
+
+<div class="flex items-center justify-center space-x-1">
+	{#each items as item, index}
+		{#if index > 0}
+			<div class="mx-1">
+				<slot name="separator" />
+			</div>
+		{/if}
+		<Button
+			size="sm"
+			color="light"
+			btnClasses={selectedIndex - 1 === index ? 'text-gray-800' : '!text-gray-500'}
+			on:click={() => dispatch('select', { index })}
+			disabled={selectedIndex - 1 !== index ? disabled : false}
+		>
+			{item}
+		</Button>
+	{/each}
+</div>

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

@@ -16,6 +16,7 @@ export { default as TabContent } from './tabs/TabContent.svelte'
 export { default as Tabs } from './tabs/Tabs.svelte'
 export { default as ToggleButton } from './toggleButton/ToggleButton.svelte'
 export { default as ToggleButtonGroup } from './toggleButton/ToggleButtonGroup.svelte'
+export { default as Breadcrumb } from './breadcrumb/Breadcrumb.svelte'
 
 export * from './alert/model'
 export * from './badge/model'

frontend/src/lib/components/flows/content/CopyFirstStepSchema.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Button } from 'flowbite-svelte'
+	import Button from '$lib/components/common/button/Button.svelte'
 	import { copyFirstStepSchema, flowStore } from '../flowStore'
 	import { isEmptyFlowModule } from '../utils'
 </script>
@@ -9,6 +9,7 @@
 	size="xs"
 	disabled={$flowStore.value.modules.length === 0 || isEmptyFlowModule($flowStore.value.modules[0])}
 	on:click={copyFirstStepSchema}
+	variant="border"
 >
 	Copy from first step schema
 </Button>

frontend/src/lib/components/flows/content/FlowSettings.svelte

@@ -9,7 +9,7 @@
 	import FlowCard from '../common/FlowCard.svelte'
 	import FlowSchedules from './FlowSchedules.svelte'
 	import SvelteMarkdown from 'svelte-markdown'
-	import { Toggle } from 'flowbite-svelte'
+	import Toggle from '$lib/components/Toggle.svelte'
 
 	export let initialPath: string
 
@@ -26,9 +26,8 @@
 			<TabContent value="metadata" class="p-4">
 				<Path bind:path={$flowStore.path} {initialPath} namePlaceholder="my_flow" kind="flow">
 					<div slot="ownerToolkit">
-						Flow permissions depend on their path. Select the group <span class="font-mono"
-							>all</span
-						>
+						Flow permissions depend on their path. Select the group
+						<span class="font-mono"> all </span>
 						to share your flow, and <span class="font-mono">user</span> to keep it private.
 						<a href="https://docs.windmill.dev/docs/reference/namespaces">docs</a>
 					</div>
@@ -75,7 +74,7 @@
 				<FlowSchedules />
 			</TabContent>
 
-			<TabContent value="same-worker" class="p-4">
+			<TabContent value="same-worker" class="p-4 flex flex-col">
 				<span class="my-2 text-sm font-bold">Same Worker</span>
 
 				<Toggle

frontend/src/lib/components/flows/pickers/FlowScriptPicker.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
+	import Button from '$lib/components/common/button/Button.svelte'
 	import type { IconDefinition } from '@fortawesome/free-brands-svg-icons'
-	import { Button } from 'flowbite-svelte'
 	import Icon from 'svelte-awesome'
 
 	export let disabled: boolean = false
@@ -9,7 +9,17 @@
 	export let iconColor: string
 </script>
 
-<Button {disabled} on:click size="md" class="text-left" color="alternative">
-	<Icon data={icon} class={`mr-2 ${iconColor} w-4`} scale={1.5} />
-	<span class="text-sm text-left">{label}</span>
+<Button
+	{disabled}
+	on:click
+	size="sm"
+	spacingSize="md"
+	variant="border"
+	color="light"
+	startIcon={{
+		icon,
+		classes: iconColor
+	}}
+>
+	{label}
 </Button>

frontend/src/routes/groups.svelte

@@ -20,8 +20,7 @@
 	import TableCustom from '$lib/components/TableCustom.svelte'
 	import { userStore, workspaceStore } from '$lib/stores'
 	import { faEdit, faPlus, faShare } from '@fortawesome/free-solid-svg-icons'
-	import { Alert } from 'flowbite-svelte'
-	import { Button } from '$lib/components/common'
+	import { Alert, Button } from '$lib/components/common'
 
 	type GroupW = Group & { canWrite: boolean }
 
@@ -83,12 +82,9 @@
 		</div>
 	</PageHeader>
 
-	<Alert accent rounded={false}>
-		<p class="font-bold text-lg">Groups are a team or enterprise feature - Unlimited during beta</p>
-		<p>
-			Groups are a team or enterprise feature and the feature might be significantly different after
-			beta in the community edition
-		</p>
+	<Alert type="info" title="Groups are a team or enterprise feature - Unlimited during beta">
+		Groups are a team or enterprise feature and the feature might be significantly different after
+		beta in the community edition
 	</Alert>
 
 	<div class="relative">
@@ -101,20 +97,21 @@
 			<tbody slot="body">
 				{#each groups as { name, summary, extra_perms, canWrite }}
 					<tr>
-						<td
-							><a
+						<td>
+							<a
 								href="#{name}"
 								on:click={() => {
 									groupModal.openModal(name)
-								}}>{name}</a
-							>
+								}}
+								>{name}
+							</a>
 							<div>
 								<SharedBadge {canWrite} extraPerms={extra_perms} />
 							</div>
 						</td>
 						<td>{summary ?? ''}</td>
-						<td
-							><Dropdown
+						<td>
+							<Dropdown
 								dropdownItems={[
 									{
 										displayName: 'Manage members',
@@ -134,8 +131,8 @@
 									}
 								]}
 								relative={false}
-							/></td
-						>
+							/>
+						</td>
 					</tr>
 				{/each}
 			</tbody>

frontend/src/routes/workers.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
 	import CenteredPage from '$lib/components/CenteredPage.svelte'
+	import Badge from '$lib/components/common/badge/Badge.svelte'
 	import PageHeader from '$lib/components/PageHeader.svelte'
 	import TableCustom from '$lib/components/TableCustom.svelte'
 	import { WorkerService, type WorkerPing } from '$lib/gen'
 	import { displayDate, elapsedSinceSecs, groupBy, sendUserToast } from '$lib/utils'
-	import { Badge } from 'flowbite-svelte'
 	import { onDestroy, onMount } from 'svelte'
 
 	let workers: WorkerPing[] = []