@softwareone/spi-sv5-library 0.1.3 → 1.0.0

package/dist/Header/Header.svelte

@@ -1,13 +1,10 @@
 <script lang="ts">
-	import HeaderLogo from './HeaderLogo.svelte';
-	import HeaderAccount from './HeaderAccount.svelte';
-	import HeaderLoader from './HeaderLoader.svelte';
+	import { HeaderAccount, HeaderLoader, HeaderLogo, Menu, type MenuItem } from '../index.js';
 
 	interface HeaderProps {
 		title?: string;
 		homeUrl?: string;
 		disableMenuButton?: boolean;
-		menuButton?: () => void;
 		hideAccount?: boolean;
 		hideHelp?: boolean;
 		hideNotification?: boolean;
@@ -15,165 +12,90 @@
 		userName?: string;
 		profileUrl?: string;
 		hideLoader?: boolean;
+		menuItems: MenuItem[];
 	}
 
-	let { title, homeUrl, disableMenuButton, menuButton, hideAccount, hideHelp, hideNotification, accountName, userName, profileUrl, hideLoader }: HeaderProps =
-		$props();
-
-	title = title || 'Default Title';
-	homeUrl = homeUrl || '/';
-	accountName = accountName || 'Company Name';
-	userName = userName || 'User Name';
-	profileUrl = profileUrl || '/profile';
-
-	if (!menuButton) {
-		menuButton = () => {
-			console.log('Menu button clicked');
-		};
-	}
+	let {
+		title = 'Default Title',
+		homeUrl = '/',
+		disableMenuButton,
+		hideAccount,
+		hideHelp,
+		hideNotification,
+		accountName = 'Company Name',
+		userName = 'User Name',
+		profileUrl = '/profile',
+		hideLoader,
+		menuItems
+	}: HeaderProps = $props();
 </script>
 
-<div class="header-container">
-	<div class="header">
-		<div class="header-left">
-			<div class="header-hamburger">
-				<button class={`header-hamburger ${disableMenuButton ? "cursor-default" : "cursor-pointer"}`} onclick={menuButton} aria-labelledby="menu-button">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						height="24px"
-						viewBox="0 -960 960 960"
-						width="24px"
-						fill="#6b7180"
-						><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z" /></svg
-					>
-				</button>
-			</div>
-			<div class="header-logo">
-				<a href={homeUrl}>
-					<HeaderLogo />
-				</a>
-			</div>
-			<div class="header-title">
-				{title}
-			</div>
-		</div>
-		<div class="header-right">
-			{#if !hideHelp}
+<header class="header">
+	<section class="header-section">
+		<Menu {menuItems} {disableMenuButton} />
+		<a href={homeUrl}>
+			<HeaderLogo />
+		</a>
+		<section class="header-title">
+			{title}
+		</section>
+	</section>
+
+	<section class="header-section">
+		{#if !hideHelp}
 			<button class="header-btn" aria-labelledby="help-button">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					height="24px"
-					viewBox="0 -960 960 960"
-					width="24px"
-					fill="#6b7180"
-					><path
-						d="M478-240q21 0 35.5-14.5T528-290q0-21-14.5-35.5T478-340q-21 0-35.5 14.5T428-290q0 21 14.5 35.5T478-240Zm-36-154h74q0-33 7.5-52t42.5-52q26-26 41-49.5t15-56.5q0-56-41-86t-97-30q-57 0-92.5 30T342-618l66 26q5-18 22.5-39t53.5-21q32 0 48 17.5t16 38.5q0 20-12 37.5T506-526q-44 39-54 59t-10 73Zm38 314q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
-					/></svg
-				>
+				<span class="material-icons-outlined icon-span"> help_outline </span>
 			</button>
-			{/if}
-			{#if !hideNotification}
-			<button class="header-btn" aria-labelledby="notification-button">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					height="24px"
-					viewBox="0 -960 960 960"
-					width="24px"
-					fill="#6b7180"
-					><path
-						d="M160-200v-80h80v-280q0-83 50-147.5T420-792v-28q0-25 17.5-42.5T480-880q25 0 42.5 17.5T540-820v28q80 20 130 84.5T720-560v280h80v80H160Zm320-300Zm0 420q-33 0-56.5-23.5T400-160h160q0 33-23.5 56.5T480-80ZM320-280h320v-280q0-66-47-113t-113-47q-66 0-113 47t-47 113v280Z"
-					/></svg
-				>
+		{/if}
+		{#if !hideNotification}
+			<button class="header-btn" aria-labelledby="notifications-button">
+				<span class="material-icons-outlined icon-span"> notifications </span>
 			</button>
-			{/if}
-			{#if !hideAccount}
-				<div>
-					<a class="header-btn" href={profileUrl}>
-						<HeaderAccount {accountName} {userName} />
-					</a>
-				</div>
-			{/if}
-		</div>
-	</div>
-</div>
+		{/if}
+		{#if !hideAccount}
+			<a href={profileUrl}>
+				<HeaderAccount {accountName} {userName} />
+			</a>
+		{/if}
+	</section>
+</header>
 
 {#if !hideLoader}
 	<HeaderLoader />
 {/if}
 
 <style>
-	.header-container {
-		display: flex;
-		width: auto;
-		align-items: flex-start;
-		flex: 1 0 0;
-	}
 	.header {
 		display: flex;
-		height: 80px;
-		padding: 0px 24px;
 		justify-content: space-between;
 		align-items: center;
-		flex: 1 0 0;
-		border-bottom: 3px solid #aeb1b9;
-		background: #fff;
-	}
-	.header-left {
-		display: flex;
-		height: 41px;
-		align-items: center;
-		gap: 32px;
-	}
-	.header-right {
-		display: flex;
-		max-width: 350px;
-		padding: 8px 24px;
-		align-items: center;
-		gap: 16px;
-		border-radius: 8px;
+		padding: 0px 24px;
 		background: #fff;
-		color: #6b7180;
+		height: 80px;
+		border-bottom: 3px solid #aeb1b9;
 	}
-	.header-hamburger {
+
+	.header-section {
 		display: flex;
-		justify-content: center;
 		align-items: center;
-		gap: 10px;
-		border: none;
-		background-color: transparent;
-		color: #6b7180;
-	}
-	.header-logo {
-		width: 65px;
-		height: 22.941px;
-		flex-shrink: 0;
-		fill: #000;
+		gap: 1.5rem;
 	}
+
 	.header-title {
 		color: #000;
-
-		/* medium/6 */
-		font-family: 'Haas Grotesk Display Pro', sans-serif;
 		font-size: 24px;
-		font-style: normal;
-		font-weight: 500;
-		line-height: normal;
 	}
+
 	.header-btn {
-		text-align: left;
 		border: none;
 		background: transparent;
-		color: #6b7180;
-		text-decoration: none;
-	}
-	.header-btn:hover {
-		cursor: pointer;
 	}
 
-	.cursor-default {
-		cursor: default;
-	}
-	.cursor-pointer {
-		cursor: pointer;
+	.icon-span {
+		color: #6b7180;
+		font-size: 24px;
+		font-weight: 400;
+		line-height: 20px;
+		word-wrap: break-word;
 	}
 </style>

package/dist/Header/Header.svelte.d.ts

@@ -1,8 +1,8 @@
+import { type MenuItem } from '../index.js';
 interface HeaderProps {
     title?: string;
     homeUrl?: string;
     disableMenuButton?: boolean;
-    menuButton?: () => void;
     hideAccount?: boolean;
     hideHelp?: boolean;
     hideNotification?: boolean;
@@ -10,6 +10,7 @@ interface HeaderProps {
     userName?: string;
     profileUrl?: string;
     hideLoader?: boolean;
+    menuItems: MenuItem[];
 }
 declare const Header: import("svelte").Component<HeaderProps, {}, "">;
 type Header = ReturnType<typeof Header>;

package/dist/Header/HeaderAccount.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { Avatar } from '../index.js';
+
 	interface HeaderAccountProps {
 		accountName?: string;
 		userName?: string;
@@ -8,27 +10,11 @@
 
 	accountName = accountName || 'SoftwareOne';
 	userName = userName || 'John Doe';
-
-	let avatarName = $state(
-		userName
-			.split(' ')
-			.map((word) => word[0])
-			.join('')
-	);
 </script>
 
 <div class="account-container">
 	<div class="account-avatar">
-		<svg class="min-w-[40px] min-h-[40px]" width="40" height="40" viewBox="0 0 40 40"
-			><circle cx="20" cy="20" r="20" fill="#25282D"></circle><text
-				x="20"
-				y="25"
-				text-anchor="middle"
-				font-size="14"
-				font-weight="normal"
-				fill="#FFFFFF">{avatarName}</text
-			></svg
-		>
+		<Avatar text={userName} />
 	</div>
 	<div class="account">
 		<div class="account-name">{accountName}</div>
@@ -42,7 +28,6 @@
 	.account-container {
 		display: flex;
 		max-width: 300px;
-		/* padding: 8px 24px; */
 		align-items: center;
 		gap: 16px;
 		border-radius: 8px;
@@ -52,10 +37,8 @@
 		display: flex;
 		width: 48px;
 		height: 48px;
-		/* padding: 15px 0px 15.194px 0px; */
 		justify-content: center;
 		align-items: center;
-		font-family: 'Haas Grotesk Display Pro', sans-serif;
 	}
 	.account {
 		display: flex;
@@ -70,15 +53,12 @@
 		width: auto;
 		max-width: auto;
 		overflow: hidden;
-		color: var(--brand-type, #000);
+		color: #000;
 		text-overflow: ellipsis;
-
-		/* medium/2 */
-		font-family: 'Haas Grotesk Display Pro', sans-serif;
 		font-size: 14px;
 		font-style: normal;
 		font-weight: 500;
-		line-height: 20px; /* 142.857% */
+		line-height: 20px;
 	}
 	.account-more {
 		display: flex;
@@ -93,11 +73,8 @@
 		-webkit-line-clamp: 1;
 		line-clamp: 1;
 		overflow: hidden;
-		color: var(--gray-4, #6b7180);
+		color: #6b7180;
 		text-overflow: ellipsis;
-
-		/* regular/1 */
-		font-family: 'Haas Grotesk Display Pro', sans-serif;
 		font-size: 12px;
 		font-style: normal;
 		font-weight: 400;

package/dist/HighlightPanel/HighlightPanel.svelte

@@ -0,0 +1,125 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	import { Avatar, Chips, ColumnType, ImageType, type HighlightPanelColumn } from '../index.js';
+
+	interface HighlightPanelProps {
+		columns: HighlightPanelColumn[];
+		buttonSection?: Snippet;
+		distributionType?: 'flex' | 'flex-column' | 'grid';
+	}
+
+	let { columns, distributionType = 'flex', buttonSection }: HighlightPanelProps = $props();
+</script>
+
+<div class="highlight-panel">
+	<section class="panel-section-{distributionType}">
+		{#each columns as column}
+			<div class="panel-element">
+				{#if column.type === ColumnType.Text}
+					<h2>{column.label}</h2>
+					<p>{column.value}</p>
+					<p class="text-description">{column.description ?? ''}</p>
+				{/if}
+
+				{#if column.type === ColumnType.Status}
+					<h2>{column.label}</h2>
+					<Chips text={column.value} type={column.chipType} />
+				{/if}
+
+				{#if column.type === ColumnType.Link}
+					<h2>{column.label}</h2>
+					<a rel="noreferrer" class="link" target="_blank" href={column.url}>
+						{column.value}
+					</a>
+				{/if}
+
+				{#if column.type === ColumnType.Image}
+					{@const { content, iconType } = column}
+					<h2>{column.label}</h2>
+					{#if iconType === ImageType.Default}
+						<img src={content} alt="icon" />
+					{:else if iconType === ImageType.Avatar}
+						<Avatar text={content} />
+					{:else if iconType === ImageType.Material}
+						<span class="material-icons">{content}</span>
+					{/if}
+					<p class="text-description">{column.description ?? ''}</p>
+				{/if}
+			</div>
+		{/each}
+	</section>
+
+	{#if buttonSection}
+		<section class="buttons-section">
+			{@render buttonSection()}
+		</section>
+	{/if}
+</div>
+
+<style>
+	h2,
+	p,
+	a {
+		font-size: 14px;
+		line-height: 20px;
+	}
+
+	.text-description {
+		color: #6b7180;
+	}
+
+	.link {
+		color: #472aff;
+	}
+
+	.link:hover {
+		text-decoration-line: underline;
+	}
+
+	.highlight-panel {
+		display: grid;
+		grid-template-columns: 1fr auto;
+		gap: 48px;
+	}
+
+	.panel-section-flex {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 48px;
+	}
+
+	.panel-section-flex-column {
+		display: flex;
+		flex-direction: column;
+		gap: 48px;
+	}
+
+	.panel-section-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(50px, auto));
+		grid-gap: 48px;
+	}
+
+	.buttons-section {
+		display: flex;
+		gap: 12px;
+		align-items: flex-start;
+	}
+
+	.panel-element h2 {
+		margin-bottom: 8px;
+	}
+
+	.panel-element img {
+		width: 40px;
+		height: 40px;
+		border-radius: 9999px;
+	}
+
+	@media screen and (max-width: 700px) {
+		.buttons-section {
+			flex-direction: column;
+		}
+	}
+</style>

package/dist/HighlightPanel/HighlightPanel.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import { type HighlightPanelColumn } from '../index.js';
+interface HighlightPanelProps {
+    columns: HighlightPanelColumn[];
+    buttonSection?: Snippet;
+    distributionType?: 'flex' | 'flex-column' | 'grid';
+}
+declare const HighlightPanel: import("svelte").Component<HighlightPanelProps, {}, "">;
+type HighlightPanel = ReturnType<typeof HighlightPanel>;
+export default HighlightPanel;

package/dist/HighlightPanel/highlightPanelState.svelte.d.ts

@@ -0,0 +1,35 @@
+import type { ChipType } from '../index.js';
+export declare enum ImageType {
+    Default = "image",
+    Avatar = "avatar",
+    Material = "material"
+}
+export declare enum ColumnType {
+    Text = "text",
+    Link = "link",
+    Image = "image",
+    Status = "status"
+}
+type BaseColumn = {
+    label: string;
+    value: string;
+    description?: string;
+};
+type Text = BaseColumn & {
+    type: ColumnType.Text;
+};
+type Link = BaseColumn & {
+    type: ColumnType.Link;
+    url: string;
+};
+type Icon = BaseColumn & {
+    type: ColumnType.Image;
+    iconType: ImageType;
+    content: string;
+};
+type Status = BaseColumn & {
+    type: ColumnType.Status;
+    chipType: ChipType;
+};
+export type HighlightPanelColumn = Text | Link | Icon | Status;
+export {};

package/dist/HighlightPanel/highlightPanelState.svelte.js

@@ -0,0 +1,13 @@
+export var ImageType;
+(function (ImageType) {
+    ImageType["Default"] = "image";
+    ImageType["Avatar"] = "avatar";
+    ImageType["Material"] = "material";
+})(ImageType || (ImageType = {}));
+export var ColumnType;
+(function (ColumnType) {
+    ColumnType["Text"] = "text";
+    ColumnType["Link"] = "link";
+    ColumnType["Image"] = "image";
+    ColumnType["Status"] = "status";
+})(ColumnType || (ColumnType = {}));

package/dist/Menu/Menu.svelte

@@ -0,0 +1,158 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { page } from '$app/state';
+
+	import type { MenuItem } from './SidebarState.svelte';
+	import MainMenuItem from './MenuItem.svelte';
+
+	interface MenuProps {
+		disableMenuButton?: boolean;
+		menuItems: MenuItem[];
+	}
+
+	let showMenu: boolean = $state(false);
+	let isMainMenu: boolean = $state(true);
+	let activeItem: string = $state('');
+
+	const { disableMenuButton = false, menuItems }: MenuProps = $props();
+
+	$effect(() => {
+		if (showMenu) {
+			setActiveMenuItem();
+		}
+	});
+
+	const setActiveMenuItem = () => {
+		activeItem = menuItems.find((menuItem: MenuItem) => isActiveMenuItem(menuItem.url))?.text || '';
+	};
+
+	const isActiveMenuItem = (url: string) => {
+		const firstSegmentUrl = page.url.pathname.split('/')[1];
+		return existRoute(`/${firstSegmentUrl}`, url);
+	};
+
+	const existRoute = (url: string, pathname: string) => {
+		const regex = new RegExp(`${url}(?![\\w-])`);
+		return regex.test(pathname);
+	};
+
+	const onClickMenuItem = (menuItem: MenuItem) => {
+		onHandleMenu();
+		goto(String(menuItem.url));
+	};
+
+	const onHandleMenu = () => {
+		showMenu = !showMenu;
+	};
+</script>
+
+<button
+	type="button"
+	class="menu-button"
+	class:disabled-menu={disableMenuButton}
+	onclick={onHandleMenu}
+	disabled={disableMenuButton}
+	aria-label="menu button"
+>
+	<span class="material-icons icon-span">menu</span>
+</button>
+
+{#if showMenu}
+	<button
+		class="menu-principal"
+		onclick={onHandleMenu}
+		onkeypress={onHandleMenu}
+		aria-label="menu principal"
+	></button>
+
+	<nav class="menu-nav">
+		<menu class="menu-list">
+			{#each menuItems as menuItem}
+				<MainMenuItem
+					item={menuItem}
+					isCollapsed={false}
+					activeItem={activeItem === menuItem.text}
+					{isMainMenu}
+					onClick={onClickMenuItem}
+				/>
+			{/each}
+		</menu>
+	</nav>
+{/if}
+
+<style>
+	.menu-button {
+		border-radius: 0.375rem;
+		background: white;
+		z-index: 40;
+		cursor: pointer;
+		border: none;
+		width: 40px;
+		height: 40px;
+	}
+
+	.icon-span {
+		color: #25282d;
+		font-size: 24px;
+		font-weight: 400;
+		line-height: 20px;
+		word-wrap: break-word;
+	}
+
+	.menu-button:hover {
+		background-color: #f3f4f6;
+	}
+
+	.menu-principal {
+		position: fixed;
+		inset: 0;
+		background-color: rgba(243, 244, 246, 0.5);
+		cursor: pointer;
+		z-index: 30;
+		border: none;
+	}
+
+	.menu-nav {
+		position: absolute;
+		top: 80px;
+		left: 24px;
+		bottom: 24px;
+		display: flex;
+		border: 1px solid #f3f4f6;
+		border-bottom-left-radius: 10px;
+		border-bottom-right-radius: 10px;
+		background-color: white;
+		box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+		min-height: calc(100vh - 80px - 55px);
+		z-index: 40;
+		width: auto;
+	}
+
+	.menu-list {
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+		padding: 0.7rem;
+		width: 150px;
+		overflow-y: auto;
+		overflow-x: hidden;
+	}
+
+	.disabled-menu {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+
+	@media (min-width: 768px) {
+		.menu-list {
+			min-width: 220px;
+		}
+	}
+
+	@media (min-width: 100px) and (max-width: 767px) {
+		.menu-list {
+			width: auto;
+			min-width: none;
+		}
+	}
+</style>

package/dist/Menu/Menu.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { MenuItem } from './SidebarState.svelte';
+interface MenuProps {
+    disableMenuButton?: boolean;
+    menuItems: MenuItem[];
+}
+declare const Menu: import("svelte").Component<MenuProps, {}, "">;
+type Menu = ReturnType<typeof Menu>;
+export default Menu;