@hyvor/design 0.0.66 → 0.0.68

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

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { BarConfig, BarProduct } from './bar.js';
+declare const __propDef: {
+    props: {
+        mobile?: boolean | undefined;
+        product: BarProduct;
+        config: BarConfig;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BarSupportProps = typeof __propDef.props;
+export type BarSupportEvents = typeof __propDef.events;
+export type BarSupportSlots = typeof __propDef.slots;
+export default class BarSupport extends SvelteComponent<BarSupportProps, BarSupportEvents, BarSupportSlots> {
+}
+export {};

package/dist/components/HyvorBar/BarUpdates.svelte

@@ -0,0 +1,58 @@
+<script>import { IconButton, Dropdown } from "../index.js";
+import { IconMegaphone } from "@hyvor/icons";
+import BarUpdatesList from "./BarUpdatesList.svelte";
+import { barUnreadUpdates } from "./bar.js";
+export let instance;
+export let product;
+</script>
+
+<div class="updates">
+	<Dropdown align="end" width={525}>
+		<IconButton color="input" variant="invisible" slot="trigger">
+			<IconMegaphone size={14} />
+
+			{#if $barUnreadUpdates > 0}
+				<span class="unread">{$barUnreadUpdates}</span>
+			{/if}
+		</IconButton>
+
+		<div slot="content" class="content-inner">
+			<BarUpdatesList {instance} {product} />
+		</div>
+	</Dropdown>
+</div>
+
+<style>
+	.updates {
+		height: 100%;
+	}
+	.content-inner {
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+	}
+	.updates :global(.dropdown .content) {
+		padding: 0;
+		height: 100%;
+	}
+	.unread {
+		position: absolute;
+		top: 0;
+		right: 0;
+		font-size: 8px;
+		width: 15px;
+		height: 15px;
+		display: inline-flex;
+		border-radius: 50%;
+		margin-right: -5px;
+		margin-top: -3px;
+		background: var(--accent);
+		align-items: center;
+		justify-content: center;
+		color: var(--accent-text);
+		font-weight: 600;
+	}
+	.updates :global(.trigger) {
+		position: relative;
+	}
+</style>

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

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+import { type BarProduct } from './bar.js';
+declare const __propDef: {
+    props: {
+        instance: string;
+        product: BarProduct;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BarUpdatesProps = typeof __propDef.props;
+export type BarUpdatesEvents = typeof __propDef.events;
+export type BarUpdatesSlots = typeof __propDef.slots;
+export default class BarUpdates extends SvelteComponent<BarUpdatesProps, BarUpdatesEvents, BarUpdatesSlots> {
+}
+export {};

package/dist/components/HyvorBar/BarUpdatesList.svelte

@@ -0,0 +1,134 @@
+<script>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
+} 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";
+export let instance;
+export let product;
+let updates = [];
+let loading = true;
+let error = false;
+let lastReadTime = 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);
+    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>
+						<div slot="description">
+							<div class="description">
+								{update.content}
+							</div>
+							<div class="date">
+								{new Intl.DateTimeFormat('en-US').format(new Date(update.created_at * 1000))}
+							</div>
+						</div>
+						<span slot="end">
+							{#if update.url}
+								<IconBoxArrowUpRight size={12} />
+							{/if}
+						</span>
+					</ActionListItem>
+				</a>
+			{/each}
+		</ActionList>
+	</div>
+{/if}
+
+<div class="top">
+	<Button size="small" color="input" as="a" href={instance + '/updates'} target="_blank">
+		View all updates
+		<IconBoxArrowUpRight size={12} slot="end" />
+	</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,18 @@
+import { SvelteComponent } from "svelte";
+import { type BarProduct } from './bar.js';
+declare const __propDef: {
+    props: {
+        instance: string;
+        product: BarProduct;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BarUpdatesListProps = typeof __propDef.props;
+export type BarUpdatesListEvents = typeof __propDef.events;
+export type BarUpdatesListSlots = typeof __propDef.slots;
+export default class BarUpdatesList extends SvelteComponent<BarUpdatesListProps, BarUpdatesListEvents, BarUpdatesListSlots> {
+}
+export {};

package/dist/components/HyvorBar/BarUser.svelte

@@ -0,0 +1,60 @@
+<script>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";
+export let instance;
+</script>
+
+<div class="wrap">
+	<Dropdown align="end" width={325}>
+		<button class="user-wrap" slot="trigger">
+			{#if $barUser}
+				<img class="user-picture" src={$barUser?.picture_url} alt={$barUser?.name} />
+			{/if}
+		</button>
+
+		<ActionList slot="content">
+			<BarUserPreview />
+
+			<a href="{instance}/account" target="_blank">
+				<ActionListItem>
+					Manage Account
+					<IconBoxArrowUpRight slot="end" size={12} />
+				</ActionListItem>
+			</a>
+			<a href="{instance}/account/logout">
+				<ActionListItem>Logout</ActionListItem>
+			</a>
+		</ActionList>
+	</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,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        instance: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BarUserProps = typeof __propDef.props;
+export type BarUserEvents = typeof __propDef.events;
+export type BarUserSlots = typeof __propDef.slots;
+export default class BarUser extends SvelteComponent<BarUserProps, BarUserEvents, BarUserSlots> {
+}
+export {};

package/dist/components/HyvorBar/BarUserPreview.svelte

@@ -0,0 +1,42 @@
+<script>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,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BarUserPreviewProps = typeof __propDef.props;
+export type BarUserPreviewEvents = typeof __propDef.events;
+export type BarUserPreviewSlots = typeof __propDef.slots;
+export default class BarUserPreview extends SvelteComponent<BarUserPreviewProps, BarUserPreviewEvents, BarUserPreviewSlots> {
+}
+export {};

package/dist/components/HyvorBar/HyvorBar.svelte

@@ -0,0 +1,150 @@
+<script>import BarUser from "./BarUser.svelte";
+import { onMount } from "svelte";
+import BarProducts, { PRODUCTS } from "./BarProducts.svelte";
+import BarSupport from "./BarSupport.svelte";
+import { loadBarUser } from "./bar.js";
+import BarUpdates from "./BarUpdates.svelte";
+import { IconCaretDownFill } from "@hyvor/icons";
+export let instance = "https://hyvor.com";
+export let product;
+export let config = {};
+let mobileShow = false;
+const configComplete = {
+  ...{
+    docs: true,
+    chat: true,
+    twitter: null,
+    g2: null
+  },
+  ...config
+};
+function handleBarClick(e) {
+  if (mobileShow && e.target instanceof Element && e.target.closest(".dropdown .trigger")) {
+    return;
+  }
+  if (window.innerWidth <= 600) {
+    mobileShow = !mobileShow;
+  }
+}
+onMount(() => {
+  loadBarUser(instance, product);
+});
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div id="bar" on:click={handleBarClick} class:mobile-show={mobileShow}>
+	<div class="inner hds-box">
+		<div class="left">
+			<a class="logo" href="/">
+				<svelte:component this={PRODUCTS[product].logo} size={20} />
+				<span class="name">
+					{PRODUCTS[product].name}
+				</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,19 @@
+import { SvelteComponent } from "svelte";
+import { type BarConfig, type BarProduct } from './bar.js';
+declare const __propDef: {
+    props: {
+        instance?: string | undefined;
+        product: BarProduct;
+        config?: Partial<BarConfig> | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type HyvorBarProps = typeof __propDef.props;
+export type HyvorBarEvents = typeof __propDef.events;
+export type HyvorBarSlots = typeof __propDef.slots;
+export default class HyvorBar extends SvelteComponent<HyvorBarProps, HyvorBarEvents, HyvorBarSlots> {
+}
+export {};

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

@@ -0,0 +1,33 @@
+/// <reference types="svelte" />
+export type BarProduct = 'talk' | 'blogs';
+export interface BarConfig {
+    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
+>