@hyvor/design 0.0.67 → 1.0.3

package/dist/components/HyvorBar/BarUpdatesList.svelte

@@ -0,0 +1,159 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import Loader from '../Loader/Loader.svelte';
+	import ActionList from '../ActionList/ActionList.svelte';
+	import ActionListItem from '../ActionList/ActionListItem.svelte';
+	import {
+		barUnreadUpdates,
+		UnreadUpdatesTimeLocalStorage,
+		type BarProduct,
+		type BarUpdate
+	} from './bar.js';
+	import { IconBoxArrowUpRight } from '@hyvor/icons';
+	import Button from '../Button/Button.svelte';
+	import Tag from '../Tag/Tag.svelte';
+	import IconMessage from '../IconMessage/IconMessage.svelte';
+
+	interface Props {
+		instance: string;
+		product: BarProduct;
+	}
+
+	let { instance, product }: Props = $props();
+
+	let updates: BarUpdate[] = $state([]);
+	let loading = $state(true);
+	let error = $state(false);
+
+	let lastReadTime: null | number = $state(null);
+
+	function fetchUpdates() {
+		error = false;
+		lastReadTime = UnreadUpdatesTimeLocalStorage.get();
+		loading = true;
+
+		fetch(instance + '/api/public/updates?types=company,' + product)
+			.then((response) => response.json())
+			.then((data) => {
+				updates = data;
+
+				barUnreadUpdates.set(0);
+				// set as last read now
+				UnreadUpdatesTimeLocalStorage.setNow();
+			})
+			.catch(() => {
+				error = true;
+			})
+			.finally(() => {
+				loading = false;
+			});
+	}
+
+	onMount(() => {
+		fetchUpdates();
+	});
+</script>
+
+{#if loading}
+	<Loader padding={80} block size="small" />
+{:else if error}
+	<IconMessage
+		error
+		cta={{
+			text: 'Try again',
+			onClick: (e) => {
+				e.stopPropagation();
+				fetchUpdates();
+			},
+			props: { color: 'input' }
+		}}>Failed to load updates.</IconMessage
+	>
+{:else if updates.length === 0}
+	<IconMessage empty>There are no updates to show.</IconMessage>
+{:else}
+	<div class="updates-wrap">
+		<ActionList>
+			{#each updates as update}
+				<a href={update.url || '#'} target="_blank" rel="noopener noreferrer">
+					<ActionListItem>
+						{#if update.type === 'company' || (lastReadTime && update.created_at > lastReadTime)}
+							<div class="company-update">
+								{#if lastReadTime && update.created_at > lastReadTime}
+									<Tag size="x-small" color="green">New</Tag>
+								{/if}
+								{#if update.type === 'company'}
+									<Tag size="x-small" color="blue">Company Update</Tag>
+								{/if}
+							</div>
+						{/if}
+						<div class="title">
+							{update.title}
+						</div>
+						{#snippet description()}
+							<div>
+								<div class="description">
+									{update.content}
+								</div>
+								<div class="date">
+									{new Intl.DateTimeFormat('en-US').format(new Date(update.created_at * 1000))}
+								</div>
+							</div>
+						{/snippet}
+						{#snippet end()}
+							<span>
+								{#if update.url}
+									<IconBoxArrowUpRight size={12} />
+								{/if}
+							</span>
+						{/snippet}
+					</ActionListItem>
+				</a>
+			{/each}
+		</ActionList>
+	</div>
+{/if}
+
+<div class="top">
+	<Button size="small" color="input" as="a" href={instance + '/updates'} target="_blank">
+		View all updates
+		{#snippet end()}
+			<IconBoxArrowUpRight size={12} />
+		{/snippet}
+	</Button>
+</div>
+
+<style>
+	.title {
+		font-weight: 600;
+		font-size: 16px;
+	}
+	.description {
+		font-size: 14px;
+		color: var(--text);
+	}
+	.date {
+		margin-top: 4px;
+		font-weight: normal;
+	}
+	a :global(.action-list-item) {
+		padding: 12px 20px;
+	}
+	.updates-wrap {
+		max-height: 600px;
+		overflow-y: auto;
+		padding: 10px;
+	}
+	.top {
+		padding: 10px 20px;
+		display: flex;
+		justify-content: center;
+		border-top: 1px solid var(--border);
+	}
+	.company-update {
+		margin-bottom: 4px;
+		font-weight: normal;
+	}
+	.description {
+		margin-top: 4px;
+	}
+</style>

package/dist/components/HyvorBar/BarUpdatesList.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type BarProduct } from './bar.js';
+declare const BarUpdatesList: import("svelte").Component<{
+    instance: string;
+    product: BarProduct;
+}, {}, "">;
+type BarUpdatesList = ReturnType<typeof BarUpdatesList>;
+export default BarUpdatesList;

package/dist/components/HyvorBar/BarUser.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+	import ActionList from '../ActionList/ActionList.svelte';
+	import ActionListItem from '../ActionList/ActionListItem.svelte';
+	import Dropdown from '../Dropdown/Dropdown.svelte';
+	import { IconBoxArrowUpRight } from '@hyvor/icons';
+	import { barUser } from './bar.js';
+	import BarUserPreview from './BarUserPreview.svelte';
+
+	interface Props {
+		instance: string;
+	}
+
+	let { instance }: Props = $props();
+</script>
+
+<div class="wrap">
+	<Dropdown align="end" width={325}>
+		{#snippet trigger()}
+			<button class="user-wrap">
+				{#if $barUser}
+					<img class="user-picture" src={$barUser?.picture_url} alt={$barUser?.name} />
+				{/if}
+			</button>
+		{/snippet}
+
+		{#snippet content()}
+			<ActionList>
+				<BarUserPreview />
+
+				<a href="{instance}/account" target="_blank">
+					<ActionListItem>
+						Manage Account
+						{#snippet end()}
+							<IconBoxArrowUpRight size={12} />
+						{/snippet}
+					</ActionListItem>
+				</a>
+				<a href="{instance}/account/logout">
+					<ActionListItem>Logout</ActionListItem>
+				</a>
+			</ActionList>
+		{/snippet}
+	</Dropdown>
+</div>
+
+<style>
+	.wrap,
+	.wrap :global(.dropdown),
+	:global(.dropdown > .trigger) {
+		display: inline-flex;
+		align-items: center;
+	}
+	.user-wrap {
+		display: inline-flex;
+		align-items: center;
+		margin-left: 5px;
+		border-radius: 50%;
+		width: 30px;
+		height: 30px;
+		overflow: hidden;
+		transition: 0.3s box-shadow;
+		cursor: pointer;
+		background-color: var(--input);
+	}
+	.user-wrap:hover {
+		box-shadow: 0 0 0 4px var(--input);
+	}
+	img {
+		width: 100%;
+		height: 100%;
+	}
+</style>

package/dist/components/HyvorBar/BarUser.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const BarUser: import("svelte").Component<{
+    instance: string;
+}, {}, "">;
+type BarUser = ReturnType<typeof BarUser>;
+export default BarUser;

package/dist/components/HyvorBar/BarUserPreview.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { barUser } from './bar.js';
+</script>
+
+{#if $barUser}
+	<div class="preview">
+		<div class="left">
+			<img src={$barUser.picture_url} alt={$barUser.name} />
+		</div>
+		<div class="right">
+			<div class="username">@{$barUser.username}</div>
+			<div class="email">{$barUser.email}</div>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.preview {
+		display: flex;
+		align-items: center;
+		padding: 8px 14px;
+	}
+	.left {
+		flex-shrink: 0;
+		margin-right: 8px;
+	}
+	img {
+		width: 40px;
+		height: 40px;
+		border-radius: 50%;
+	}
+	.right {
+		flex: 1;
+		line-height: 18px;
+	}
+	.username {
+		font-weight: 600;
+	}
+	.email {
+		color: var(--text-light);
+		font-size: 14px;
+	}
+</style>

package/dist/components/HyvorBar/BarUserPreview.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const BarUserPreview: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type BarUserPreview = InstanceType<typeof BarUserPreview>;
+export default BarUserPreview;

package/dist/components/HyvorBar/HyvorBar.svelte

@@ -0,0 +1,183 @@
+<script lang="ts">
+	import BarUser from './BarUser.svelte';
+	import { onMount } from 'svelte';
+	import BarProducts, { PRODUCTS } from './BarProducts.svelte';
+	import BarSupport from './BarSupport.svelte';
+	import { loadBarUser, type BarConfig, type BarProduct } from './bar.js';
+	import BarUpdates from './BarUpdates.svelte';
+	import { IconCaretDownFill } from '@hyvor/icons';
+	import LogoTalk from '../../marketing/Logo/LogoTalk.svelte';
+	import LogoBlogs from '../../marketing/Logo/LogoBlogs.svelte';
+	import LogoCore from '../../marketing/Logo/LogoCore.svelte';
+
+	interface Props {
+		instance?: string;
+		product: BarProduct;
+		config?: Partial<BarConfig>;
+	}
+
+	let { instance = 'https://hyvor.com', product, config = {} }: Props = $props();
+
+	let mobileShow = $state(false);
+
+	const configComplete: BarConfig = {
+		...{
+			name: null,
+			docs: true,
+			chat: true,
+			twitter: null,
+			g2: null
+		},
+		...config
+	};
+
+	function handleBarClick(e: MouseEvent) {
+		if (mobileShow && e.target instanceof Element && e.target.closest('.dropdown .trigger')) {
+			return;
+		}
+		if (window.innerWidth <= 600) {
+			mobileShow = !mobileShow;
+		}
+	}
+
+	onMount(() => {
+		loadBarUser(instance, product);
+	});
+
+	function getLogo() {
+		if (product === 'talk') {
+			return LogoTalk;
+		} else if (product === 'blogs') {
+			return LogoBlogs;
+		} else {
+			return LogoCore;
+		}
+	}
+
+	function getName() {
+		if (config.name) {
+			return config.name;
+		}
+		return (PRODUCTS as any)[product]?.name || 'HYVOR';
+	}
+
+	const LogoComponent = getLogo();
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div id="bar" onclick={handleBarClick} class:mobile-show={mobileShow}>
+	<div class="inner hds-box">
+		<div class="left">
+			<a class="logo" href="/">
+				<LogoComponent size={20} />
+				<span class="name">
+					{getName()}
+				</span>
+			</a>
+		</div>
+		<div class="right">
+			<div class="hidden-on-mobile">
+				<BarSupport config={configComplete} {product} mobile={mobileShow} />
+				<BarProducts mobile={mobileShow} />
+				<BarUpdates {instance} {product} />
+			</div>
+
+			<div class="mobile">
+				<IconCaretDownFill />
+			</div>
+
+			<BarUser {instance} />
+		</div>
+	</div>
+
+	{#if mobileShow}
+		<div class="mobile-layer"></div>
+	{/if}
+</div>
+
+<style>
+	#bar {
+		height: 50px;
+		padding: 0 15px;
+		z-index: 100;
+	}
+	.inner {
+		padding: 10px 29px;
+		display: flex;
+		align-items: center;
+		border-top-left-radius: 0;
+		border-top-right-radius: 0;
+		height: 100%;
+	}
+	.left {
+		display: flex;
+		align-items: center;
+		flex: 1;
+	}
+	.logo {
+		display: flex;
+		align-items: center;
+		text-decoration: none;
+		gap: 5px;
+		font-weight: 600;
+	}
+	.right {
+		display: flex;
+		align-items: center;
+		gap: 10px;
+	}
+	.hidden-on-mobile {
+		display: flex;
+		align-items: center;
+		gap: 10px;
+	}
+
+	.mobile {
+		display: none;
+	}
+
+	@media (max-width: 600px) {
+		.mobile {
+			display: block;
+		}
+		#bar {
+			cursor: pointer;
+		}
+		.hidden-on-mobile {
+			display: none;
+			animation: 0.2s slideIn;
+		}
+		#bar.mobile-show .hidden-on-mobile {
+			display: flex;
+			position: fixed;
+			top: 60px;
+			z-index: 100;
+			left: 15px;
+			right: 15px;
+			flex-direction: column;
+		}
+		.mobile-layer {
+			position: fixed;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			background: rgba(0, 0, 0, 0.5);
+			z-index: 99;
+			backdrop-filter: blur(3px);
+		}
+		#bar.mobile-show :global(button.button) {
+			background-color: #fff;
+		}
+	}
+
+	@keyframes slideIn {
+		from {
+			transform: translateY(-20px);
+		}
+		to {
+			transform: translateY(0);
+		}
+	}
+</style>

package/dist/components/HyvorBar/HyvorBar.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type BarConfig, type BarProduct } from './bar.js';
+declare const HyvorBar: import("svelte").Component<{
+    instance?: string;
+    product: BarProduct;
+    config?: Partial<BarConfig>;
+}, {}, "">;
+type HyvorBar = ReturnType<typeof HyvorBar>;
+export default HyvorBar;

package/dist/components/HyvorBar/bar.d.ts

@@ -0,0 +1,33 @@
+export type BarProduct = 'core' | 'talk' | 'blogs';
+export interface BarConfig {
+    name: string | null;
+    docs: boolean;
+    chat: boolean;
+    twitter: string | null;
+    g2: string | null;
+}
+interface BarUser {
+    name: string | null;
+    username: string;
+    email: string;
+    picture_url: string;
+}
+export interface BarUpdate {
+    id: number;
+    created_at: number;
+    type: BarUpdateType;
+    title: string;
+    content: string;
+    url?: string;
+}
+export type BarUpdateType = 'company' | 'core' | 'talk' | 'blogs' | 'fortguard';
+export declare const barUser: import("svelte/store").Writable<BarUser | null>;
+export declare const barUnreadUpdates: import("svelte/store").Writable<number>;
+export declare function loadBarUser(instance: string, product: BarProduct): void;
+export declare class UnreadUpdatesTimeLocalStorage {
+    static KEY: string;
+    static get(): number | null;
+    static set(value: string): void;
+    static setNow(): void;
+}
+export {};

package/dist/components/HyvorBar/bar.js

@@ -0,0 +1,74 @@
+import { writable } from 'svelte/store';
+export const barUser = writable(null);
+export const barUnreadUpdates = writable(0);
+export function loadBarUser(instance, product) {
+    const query = new URLSearchParams();
+    query.set('product', product);
+    const lastUnreadTime = UnreadUpdatesTimeLocalStorage.get();
+    if (lastUnreadTime) {
+        query.set('last_read_updates_at', lastUnreadTime.toString());
+    }
+    fetch(instance + '/api/public/bar?' + query.toString(), {
+        credentials: 'include'
+    })
+        .then((response) => response.json())
+        .then((data) => {
+        barUser.set(data.user);
+        barUnreadUpdates.set(data.updates.unread);
+        if (lastUnreadTime === null) {
+            UnreadUpdatesTimeLocalStorage.setNow();
+        }
+    })
+        .catch((error) => {
+        console.error('Error:', error);
+    });
+}
+export class UnreadUpdatesTimeLocalStorage {
+    static KEY = 'unread_updates';
+    static get() {
+        const val = BarLocalStorage.get(UnreadUpdatesTimeLocalStorage.KEY);
+        if (val) {
+            return Number(val);
+        }
+        return null;
+    }
+    static set(value) {
+        BarLocalStorage.set(UnreadUpdatesTimeLocalStorage.KEY, value);
+    }
+    static setNow() {
+        UnreadUpdatesTimeLocalStorage.set(Math.floor(Date.now() / 1000).toString());
+    }
+}
+class BarLocalStorage {
+    static KEY = 'hyvor_bar';
+    static getJson() {
+        try {
+            const data = localStorage.getItem(BarLocalStorage.KEY);
+            if (data) {
+                return JSON.parse(data);
+            }
+        }
+        catch (e) {
+            console.error(e);
+            return null;
+        }
+        return null;
+    }
+    static get(key) {
+        const data = BarLocalStorage.getJson();
+        if (data) {
+            return data[key];
+        }
+        return null;
+    }
+    static set(key, value) {
+        try {
+            const data = BarLocalStorage.getJson() || {};
+            data[key] = value;
+            localStorage.setItem(BarLocalStorage.KEY, JSON.stringify(data));
+        }
+        catch (e) {
+            console.error(e);
+        }
+    }
+}

package/dist/components/HyvorBar/img/G2.svelte

@@ -0,0 +1,9 @@
+<svg height="12" viewBox="-36.72 -19.24 748.01 780.17" width="12" xmlns="http://www.w3.org/2000/svg"
+	><g fill="#000"
+		><path
+			d="m501.22 521c26.9 46.68 53.5 92.83 80.08 138.93-117.7 90.11-300.82 101-436.38-2.77-156-119.51-181.64-323.43-98.12-470.22 96.06-168.84 275.82-206.18 391.56-178.8-3.13 6.8-72.45 150.61-72.45 150.61s-5.48.36-8.58.42c-34.21 1.45-59.69 9.41-87 23.53a206.93 206.93 0 0 0 -109.84 159.76 201.71 201.71 0 0 0 13.68 100.29c11 26.82 26.56 50.64 47.42 70.75 32 30.88 70.08 50 114.22 56.33 41.8 6 82 .06 119.67-18.87 14.13-7.09 26.15-14.92 40.2-25.66 1.79-1.16 3.38-2.63 5.54-4.3z"
+		/><path
+			d="m501.48 111.61c-6.83-6.72-13.16-12.92-19.46-19.16-3.76-3.72-7.38-7.59-11.23-11.22-1.38-1.31-3-3.1-3-3.1s1.31-2.78 1.87-3.92c7.37-14.79 18.92-25.6 32.62-34.2a90.65 90.65 0 0 1 50.72-14.01c22.93.45 44.25 6.16 62.24 21.54 13.28 11.35 20.09 25.75 21.29 42.94 2 29-10 51.21-33.83 66.71-14 9.12-29.1 16.17-44.24 24.52-8.35 4.61-15.49 8.66-23.65 17-7.18 8.37-7.53 16.26-7.53 16.26l108.47-.14v48.31h-167.43v-4.67c-.64-23.74 2.13-46.08 13-67.64 10-19.78 25.54-34.26 44.21-45.41 14.38-8.59 29.52-15.9 43.93-24.45 8.89-5.27 15.17-13 15.12-24.21 0-9.62-7-18.17-17-20.84-23.58-6.36-47.58 3.79-60.06 25.37-1.82 3.15-3.68 6.28-6.04 10.32zm209.81 358.04-91.41-157.86h-180.89l-92 159.49h182.22l89.92 157.11z"
+		/></g
+	></svg
+>

package/dist/components/HyvorBar/img/G2.svelte.d.ts

@@ -0,0 +1,26 @@
+export default G2;
+type G2 = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const G2: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/HyvorBar/img/Trustpilot.svelte

@@ -0,0 +1,11 @@
+<svg
+	fill="#000000"
+	width="12"
+	height="12"
+	viewBox="0 0 24 24"
+	role="img"
+	xmlns="http://www.w3.org/2000/svg"
+	><path
+		d="M12,17.964l5.214-1.321l2.179,6.714L12,17.964z M24,9.286h-9.179L12,0.643L9.179,9.286 H0l7.429,5.357l-2.821,8.643l7.429-5.357l4.571-3.286L24,9.286L24,9.286L24,9.286L24,9.286z"
+	/>
+</svg>

package/dist/components/HyvorBar/img/Trustpilot.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Trustpilot;
+type Trustpilot = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Trustpilot: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}