@softwareone/spi-sv5-library 0.1.3 → 1.1.0

package/dist/ProgressWizard/ProgressWizard.svelte

@@ -1,370 +1,349 @@
 <script lang="ts">
-	import { addToast } from '../Toast/toastState.svelte';
- 
-	interface Step {
-		title: string;
-		description: string;
-		isValid?: boolean;
-	}
+	import { type Snippet } from 'svelte';
+
+	import { Button, ErrorPage, type ProgressWizardStep } from '../index.js';
 
-	interface StepProps {
-		steps: Step[];
-		currentStep?: number;
-		isFormValid?: boolean;
-		onFinalStepAction?: () => void;
-		useAsPopUp?: boolean;
-		children?: () => any;
+	interface ProgressWizardProps {
+		steps: ProgressWizardStep[];
+		readonly?: boolean;
+		currentStep: number;
+		lastActiveStep: number;
+		content: Snippet;
+		additionalButtons: Snippet;
+		oncancel: VoidFunction;
 	}
 
 	let {
-		steps = $bindable(),
-		currentStep = $bindable(1),
-		isFormValid = $bindable(),
-		onFinalStepAction,
-		useAsPopUp = false,
-		children
-	}: StepProps = $props();
-
-	steps = steps.map((step) => ({
-		...step,
-		isValid: step.isValid ?? true
-	}));
-
-	let completedSteps = $state<Set<number>>(new Set());
-	let stepsFormInstance: any;
-
-	const goToStep = (step: number) => {
-		if (step <= steps.length) {
-			for (let i = 1; i <= step; i++) {
-				completedSteps.add(i);
-			}
-			currentStep = step;
-		}
+		steps,
+		readonly = false,
+		currentStep = $bindable(0),
+		lastActiveStep = $bindable(0),
+		content,
+		additionalButtons,
+		oncancel
+	}: ProgressWizardProps = $props();
+
+	const allStepsDisabled: boolean = steps.every((step) => step.disabled);
+	const firstActiveStep: number = steps.findIndex((step) => !step.disabled) + 1;
+
+	const onclickNext = () => {
+		const nextStepIndex = steps.slice(currentStep).findIndex((step) => !step.disabled);
+		currentStep = currentStep + nextStepIndex + 1;
 	};
 
-	const nextStep = () => {
-		if (stepsFormInstance && !stepsFormInstance.validateCurrentStep()) {
-			isFormValid = false;
-			return;
-		}
-		if (currentStep < steps.length) { 
-			goToStep(currentStep + 1);
-		} else {
-			addToast({
-				type: 'success',
-				message: 'Form submitted successfully!'
-			});
-		}
+	const onclickBack = () => {
+		const previousStepIndex = steps
+			.slice(0, currentStep - 1)
+			.reverse()
+			.findIndex((step) => !step.disabled);
+
+		currentStep = currentStep - previousStepIndex - 1;
 	};
 
-	const previousStep = () => {
-		if (currentStep > 1) goToStep(currentStep - 1);
+	const stepToStart = (): number => {
+		if (readonly && allStepsDisabled) return -1;
+
+		if (readonly && !allStepsDisabled) return steps.length;
+
+		return firstActiveStep;
 	};
 
-	const onClose = () => {
-		if (useAsPopUp) {
-			// Logic to close the pop-up
+	currentStep = stepToStart();
+	lastActiveStep = steps.findLastIndex((step) => !step.disabled) + 1;
+
+	$effect(() => {
+		if (!readonly) {
+			currentStep = firstActiveStep;
 		}
-	};
+	});
 </script>
 
 <div class="progress-wizard">
-	<!-- Header -->
-	<div class="progress-header">
-		<div class="title">Create workspace</div>
-		<div class="header-actions">
-			{#if useAsPopUp}
-				<button class="link close" onclick={onClose}>
-					<span class="material-icons-outlined">close</span>
-				</button>
+	<section class="progress-wizard-container">
+		<ol class={['progress-wizard-steps', readonly ? 'readonly' : 'editing-mode']}>
+			{#each steps as step, index}
+				{@const stepIndex = index + 1}
+				{@const isActive = stepIndex === currentStep}
+				{@const isPreviousStep = currentStep > stepIndex}
+				{@const isValid = isPreviousStep && step.isValid}
+				{@const isInvalid = isPreviousStep && !step.isValid}
+				{@const disabled = step.disabled}
+
+				{@const circleContent = (): string => {
+					if (isActive) return stepIndex.toString();
+					if (readonly || disabled) return 'ー';
+					if (isValid) return '✔';
+					if (isInvalid) return '✖';
+					return stepIndex.toString();
+				}}
+
+				<li
+					class={[
+						'progress-wizard-step',
+						isActive && 'active',
+						!readonly && [
+							isPreviousStep && 'previous',
+							isValid && 'valid',
+							isInvalid && 'invalid',
+							disabled && 'disabled'
+						]
+					]}
+				>
+					<div class="time-line">
+						<span class="circle">
+							{circleContent()}
+						</span>
+						<span class="line"></span>
+					</div>
+					<button
+						class="details"
+						disabled={disabled || readonly}
+						onclick={() => (currentStep = stepIndex)}
+					>
+						<h2>{step.title}</h2>
+						{#if step.description}
+							<p>{step.description}</p>
+						{/if}
+					</button>
+				</li>
+			{/each}
+		</ol>
+		<article class="progress-wizard-content">
+			{#if allStepsDisabled}
+				<ErrorPage status={403} title="All steps disabled" />
+			{:else}
+				{@render content()}
 			{/if}
-		</div>
-	</div>
-
-	<!-- Sidebar + Content -->
-	<div class="progress-body">
-		<!-- Sidebar -->
-		<div class="progress-sidebar">
-			<ol>
-				{#each steps as step, index}
-					<li
-						class:completed={completedSteps.has(index + 1)}
-						class:active={currentStep === index + 1}
+		</article>
+	</section>
+	<section class="progress-wizard-footer">
+		<Button variant="outline-none" onclick={oncancel}>Cancel</Button>
+
+		<div class="actions">
+			{#if !allStepsDisabled}
+				{#if !readonly}
+					<Button
+						variant="secondary"
+						disabled={currentStep === firstActiveStep}
+						onclick={onclickBack}>Back</Button
 					>
-						<button
-							type="button"
-							onclick={() => goToStep(index + 1)}
-							class="step-button"
-							class:done={index + 1 < currentStep}
-						>
-							<div class="step-line-wrapper">
-								{#if index < steps.length - 1}
-									<div class="step-line"></div>
-								{/if}
-								<span class="step-icon" class:error={!step.isValid && index + 1 < currentStep}>
-									{#if index + 1 < currentStep && step.isValid}
-										✔
-									{:else if !step.isValid && index + 1 < currentStep}
-										x
-									{:else}
-										{index + 1}
-									{/if}
-								</span>
-							</div>
-							<div class="step-details">
-								<strong>{step.title}</strong>
-								<small>{step.description}</small>
-							</div>
-						</button>
-					</li>
-				{/each}
-			</ol>
-		</div>
 
-		<!-- Main Content -->
-		<div class="progress-content">
-			<div class="step-content">
-				{@render children?.()}
-			</div>
-		</div>
-	</div>
-
-	<!-- Footer -->
-	<div class="progress-footer">
-		<button class="btn link">Cancel</button>
-		<div class="action-buttons">
-			<button class="btn secondary" onclick={previousStep} disabled={currentStep === 1}>Back</button
-			>
-			<button
-				class="btn primary"
-				onclick={nextStep}
-				disabled={currentStep === steps.length && !isFormValid}
-			>
-				{currentStep === steps.length ? 'Create' : 'Next'}
-			</button>
+					{#if currentStep < lastActiveStep}
+						<Button variant="primary" onclick={onclickNext}>Next</Button>
+					{/if}
+				{/if}
+
+				{@render additionalButtons()}
+			{/if}
 		</div>
-	</div>
+	</section>
 </div>
 
 <style>
-	/* Layout */
 	.progress-wizard {
+		--primary-color: #472aff;
+		--red-5: #c41e3a;
+		--red-2: #fdedec;
+		--info-1: #eaecff;
+		--gray-1: #f4f6f8;
+		--gray-2: #e0e5e8;
+		--gray-3: #aeb1b9;
+		--gray-4: #6b7180;
+		--border-wizard: 1px solid var(--gray-3);
+		--circle-size: 32px;
+
 		display: flex;
 		flex-direction: column;
 		width: 100%;
-		max-width: 97vw;
-		margin: 0 auto;
-		background: #fff;
-		border-radius: 8px;
-		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-		overflow: hidden;
-		font-family: 'Haas Grotesk Display Pro', sans-serif;
-		font-size: 14px;
+		height: 100vh;
 	}
 
-	.progress-body {
+	.progress-wizard-container {
 		display: flex;
-		width: 100%;
+		flex: 1;
 	}
 
-	.progress-sidebar {
-		width: 100%;
-		min-width: 226px;
-		max-width: 226px;
-		min-height: 50vh;
-		border-right: 1px solid #e6e6e6;
+	.progress-wizard-steps {
+		display: flex;
+		flex-direction: column;
+		width: fit-content;
+		max-width: 250px;
+		border-right: var(--border-wizard);
 	}
 
-	.progress-content {
-		flex-grow: 1;
-		padding: 24px;
-		margin-bottom: -20px;
+	.progress-wizard-step {
+		display: grid;
+		grid-template-columns: auto 1fr;
+		max-height: 70px;
+		padding: 16px 24px;
+		gap: 8px;
+		align-items: center;
+		border: none;
 	}
 
-	/* Header */
-	.progress-header {
+	.time-line {
+		position: relative;
 		display: flex;
+		flex-direction: column;
 		align-items: center;
-		justify-content: space-between;
-		padding: 24px;
-		gap: var(--spacing-2, 16px);
-		border-bottom: 2px solid transparent;
-		border-image: linear-gradient(259deg, #00c9cd 16.32%, #472aff 59.03%, #392d9c 99.99%);
-		border-image-slice: 1;
 	}
 
-	.progress-header .title {
-		color: var(--brand-type, #000);
-		font-size: 18px;
-		font-weight: 600;
-		line-height: 26px;
-		flex: 1 0 0;
-	}
-
-	.progress-header .header-actions button span {
-		font-size: 24px;
-	}
-
-	/* Sidebar Steps */
-	.progress-sidebar ol {
-		list-style: none;
-		padding: 0;
-		margin: 0;
-	}
-
-	.progress-sidebar li {
+	.circle {
 		display: flex;
-		position: relative;
-		cursor: default;
-		padding: 16px 24px;
-		gap: 8px;
-		color: inherit;
+		width: var(--circle-size);
+		height: var(--circle-size);
+		align-items: center;
+		justify-content: center;
+		font-size: 12px;
+		font-weight: 600;
+		border-radius: 50%;
+		background: var(--info-1);
+		color: var(--primary-color);
 	}
 
-	.progress-sidebar li.completed {
-		color: #4caf50;
+	.line {
+		position: absolute;
+		top: var(--circle-size);
+		width: 1px;
+		height: 50px;
+		background: var(--gray-2);
+		transition: background 500ms ease;
 	}
 
-	.progress-sidebar li.active {
-		color: var(--brand-primary, #472aff);
+	.progress-wizard-step:last-child .time-line .line {
+		display: none;
 	}
 
-	/* Step Button */
-	.step-button {
-		all: unset;
-		width: 100%;
-		display: flex;
-		align-items: flex-start;
-		border-radius: 4px;
+	.details {
+		padding: 4px 8px;
+		text-align: left;
+		border: none;
+		border-radius: 8px;
+		background: transparent;
 		cursor: pointer;
-		transition: background 0.3s;
-	}
 
-	.step-button:hover .step-icon,
-	li.active .step-icon {
-		border-color: var(--brand-primary, #472aff);
-	}
+		h2 {
+			font-size: 16px;
+			font-weight: 600;
+			color: #000;
+		}
 
-	.step-button:hover .step-details,
-	.step-button:hover .step-details small,
-	li.active .step-button .step-details small {
-		color: var(--brand-primary, #472aff);
+		p {
+			font-size: 12px;
+			word-break: keep-all;
+			color: var(--gray-4);
+		}
 	}
 
-	/* Step Icon & Line */
-	.step-icon {
-		width: 24px;
-		height: 24px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		background: var(--brand-alert-1, #eaecff);
-		border: 2px solid var(--brand-alert-1, #eaecff);
-		border-radius: 50%;
-		margin-right: 10px;
-		font-size: 0.9rem;
-		color: var(--brand-primary, #472aff);
+	.details:hover {
+		background: var(--gray-1);
 	}
 
-	li .done .step-icon {
-		background: var(--brand-primary, #472aff);
-		color: white;
-		border-color: var(--brand-primary, #472aff);
+	.details:focus-visible:not(:disabled) {
+		background: var(--gray-1);
+		box-shadow: 0px 0px 0px 3px var(--info-1);
+		outline: none;
 	}
 
-	.step-button .step-icon.error {
-		background: var(--alerts-danger-3, #fce8ea);
-		color: #bb1425;
-		border-color: var(--alerts-danger-3, #bb1425);
+	.progress-wizard-content {
+		flex: 1;
+		padding: 24px;
 	}
 
-	.step-line-wrapper {
-		position: relative;
+	.progress-wizard-footer {
 		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: flex-start;
-		margin-right: 10px;
-	}
+		padding: 24px;
+		border-top: var(--border-wizard);
 
-	.step-line {
-		width: 1px;
-		height: 40px;
-		background: #e6e6e6;
-		position: absolute;
-		top: 100%;
-		left: 37%;
-		transform: translateX(-50%);
-		z-index: 0;
-		transition: background 0.3s ease;
+		.actions {
+			display: flex;
+			gap: 12px;
+			margin-left: auto;
+		}
 	}
 
-	li.completed .step-line,
-	li .done .step-line {
-		background: var(--brand-primary, #472aff);
-	}
+	.progress-wizard-step.active {
+		.time-line .circle {
+			border: 2px solid var(--primary-color);
+		}
 
-	/* Step Details */
-	.step-details {
-		display: flex;
-		flex-direction: column;
-	}
+		.details {
+			box-shadow: none;
+			background: transparent;
 
-	.step-details strong {
-		font-size: 16px;
+			h2,
+			p {
+				color: var(--primary-color);
+			}
+		}
 	}
 
-	.step-details small {
-		font-size: 12px;
-		color: #999;
-	}
+	.progress-wizard-steps:is(.readonly) {
+		.progress-wizard-step:not(.active) {
+			.line {
+				background: var(--gray-2);
+			}
 
-	.step-content {
-		margin-bottom: 20px;
-	}
+			.circle {
+				border: 2px solid var(--gray-2);
+				background: var(--gray-2);
+				color: var(--gray-4);
+			}
 
-	/* Footer */
-	.progress-footer {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		padding: 10px 20px;
-		border-top: 1px solid #e6e6e6;
-	}
+			.details {
+				h2 {
+					color: var(--gray-4);
+				}
+				p {
+					color: var(--gray-3);
+				}
+			}
 
-	/* Buttons */
-	.btn {
-		padding: 10px 20px;
-		border-radius: 4px;
-		border: none;
-		cursor: pointer;
-		font-size: 0.9rem;
+			.details:hover {
+				background: transparent;
+				cursor: not-allowed;
+			}
+		}
 	}
 
-	.btn.primary {
-		background: var(--brand-primary, #472aff);
-		color: white;
-	}
+	.progress-wizard-steps:is(.editing-mode) {
+		.progress-wizard-step.previous .time-line .line {
+			background: var(--primary-color);
+		}
 
-	.btn.secondary {
-		background: var(--alerts-info-1, #eaecff);
-		color: var(--brand-primary, #472aff);
-		margin-right: 10px;
-	}
+		.progress-wizard-step.previous.valid .time-line .circle {
+			color: white;
+			background: var(--primary-color);
+			border: 2px solid var(--primary-color);
+		}
 
-	.btn:disabled {
-		cursor: not-allowed;
-		opacity: 0.5;
-	}
+		.progress-wizard-step.previous.invalid .time-line .circle {
+			color: var(--red-5);
+			background: var(--red-2);
+			border: 2px solid var(--red-5);
+		}
 
-	.link {
-		background: transparent;
-		color: var(--brand-primary, #472aff);
-		font-size: 0.9rem;
-	}
+		.progress-wizard-step:is(.disabled, .previous.disabled) {
+			.details {
+				h2 {
+					color: var(--gray-4);
+				}
+				p {
+					color: var(--gray-3);
+				}
+			}
+			.details:hover {
+				background: transparent;
+				cursor: not-allowed;
+			}
 
-	.close {
-		color: #25282d;
-		border: none;
+			.time-line {
+				.circle {
+					color: var(--gray-4);
+					background: var(--gray-2);
+					border: 2px solid var(--gray-2);
+				}
+			}
+		}
 	}
 </style>

package/dist/ProgressWizard/ProgressWizard.svelte.d.ts

@@ -1,16 +1,14 @@
-interface Step {
-    title: string;
-    description: string;
-    isValid?: boolean;
+import { type Snippet } from 'svelte';
+import { type ProgressWizardStep } from '../index.js';
+interface ProgressWizardProps {
+    steps: ProgressWizardStep[];
+    readonly?: boolean;
+    currentStep: number;
+    lastActiveStep: number;
+    content: Snippet;
+    additionalButtons: Snippet;
+    oncancel: VoidFunction;
 }
-interface StepProps {
-    steps: Step[];
-    currentStep?: number;
-    isFormValid?: boolean;
-    onFinalStepAction?: () => void;
-    useAsPopUp?: boolean;
-    children?: () => any;
-}
-declare const ProgressWizard: import("svelte").Component<StepProps, {}, "steps" | "currentStep" | "isFormValid">;
+declare const ProgressWizard: import("svelte").Component<ProgressWizardProps, {}, "currentStep" | "lastActiveStep">;
 type ProgressWizard = ReturnType<typeof ProgressWizard>;
 export default ProgressWizard;

package/dist/ProgressWizard/progressWizardState.svelte.d.ts

@@ -0,0 +1,6 @@
+export type ProgressWizardStep = {
+    title: string;
+    description?: string;
+    isValid: boolean;
+    disabled: boolean;
+};

package/dist/ProgressWizard/progressWizardState.svelte.js

@@ -0,0 +1 @@
+export {};