@hyvor/design 2.0.0-beta.1 → 2.0.1

package/README.md

@@ -14,4 +14,13 @@ docker compose up
 
 # visit https://design.hyvor.localhost
 # API calls will work as long as you set instance to https://hyvor.localhost
+## Commands
+```
+
+```bash
+# fix prettier
+npm run format
+
+# fix prettier via Docker (recommended for compatibility issues with CI)
+docker compose run design npm run format
 ```

package/dist/cloud/HyvorBar/BarProducts/BarProducts.svelte

@@ -43,10 +43,7 @@
 												<product.logo size={20} />
 											{:else}
 												<img
-													src={instance +
-														'/api/public/logo/' +
-														product.component +
-														'.svg'}
+													src={instance + '/api/public/logo/' + product.component + '.svg'}
 													alt={product.name}
 													width="20"
 													height="20"

package/dist/cloud/HyvorBar/BarUpdatesList.svelte

@@ -89,9 +89,7 @@
 									{update.content}
 								</div>
 								<div class="date">
-									{new Intl.DateTimeFormat('en-US').format(
-										new Date(update.created_at * 1000)
-									)}
+									{new Intl.DateTimeFormat('en-US').format(new Date(update.created_at * 1000))}
 								</div>
 							</div>
 						{/snippet}

package/dist/cloud/HyvorBar/HyvorBar.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import BarUser from './BarUser.svelte';
-	import { onMount } from 'svelte';
 	import BarProducts from './BarProducts/BarProducts.svelte';
 	import BarSupport from './BarSupport.svelte';
 	import { initBar, type BarConfig } from './bar.js';
@@ -11,7 +10,6 @@
 	import BarOrganization from './Organization/BarOrganization.svelte';
 	import { cloudContextId, getCloudContext } from '../CloudContext/cloudContext.svelte.js';
 	import { PRODUCTS } from './BarProducts/products.js';
-	import { get } from 'svelte/store';
 
 	interface Props {
 		config?: Partial<BarConfig>;

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

@@ -12,7 +12,7 @@ export interface BarUpdate {
     content: string;
     url?: string;
 }
-export type BarUpdateType = 'company' | 'core' | 'talk' | 'blogs' | 'fortguard';
+export type BarUpdateType = 'company' | 'core' | 'talk' | 'blogs' | 'post' | 'relay' | 'fortguard';
 export declare const barUnreadUpdates: import("svelte/store").Writable<number>;
 export declare const barHasFailedInvoices: import("svelte/store").Writable<boolean>;
 export declare function initBar(): Promise<void>;

package/dist/cloud/OrganizationMembers/OrganizationMembersSearch.svelte

@@ -2,10 +2,7 @@
 	import { clickOutside, IconMessage, toast } from '../../components/index.js';
 	import Loader from '../../components/Loader/Loader.svelte';
 	import TextInput from '../../components/TextInput/TextInput.svelte';
-	import {
-		getCloudContext,
-		type OrganizationMember
-	} from '../CloudContext/cloudContext.svelte.js';
+	import { getCloudContext, type OrganizationMember } from '../CloudContext/cloudContext.svelte.js';
 	import { searchMembers } from './members.js';
 	import { dropdownSlide } from '../../components/Dropdown/dropdownSlide.js';
 	import UserPicture from '../@components/UserPicture.svelte';

package/dist/cloud/ResourceCreator/Accordian.svelte

@@ -94,10 +94,8 @@
 					{#if loading}
 						<Loader size="small" />
 					{/if}
-					<Button
-						size="large"
-						onclick={onButtonClick}
-						disabled={loading || buttonDisabled}>{buttonText}</Button
+					<Button size="large" onclick={onButtonClick} disabled={loading || buttonDisabled}
+						>{buttonText}</Button
 					>
 				</div>
 			</div>

package/dist/components/Accordion/Accordion.svelte

@@ -1,143 +1,143 @@
 <script lang="ts">
-    import type { Component, Snippet } from 'svelte';
-    import IconCaretDownFill from '@hyvor/icons/IconCaretDownFill';
-
-    interface Props {
-        title: string;
-        children?: Snippet;
-        open?: boolean;
-        icon?: Component;
-        headerColor?: string;
-        textColor?: string;
-        openedColor?: string;
-        borderColor?: string;
-        topBorderColor?: string;
-    }
-
-    let {
-        title,
-        children,
-        open = $bindable(false),
-        icon,
-        headerColor,
-        textColor,
-        openedColor,
-        borderColor,
-        topBorderColor
-    }: Props = $props();
-
-    const Icon = icon;
-
-    function handleClick() {
-        open = !open;
-    }
+	import type { Component, Snippet } from 'svelte';
+	import IconCaretDownFill from '@hyvor/icons/IconCaretDownFill';
+
+	interface Props {
+		title: string;
+		children?: Snippet;
+		open?: boolean;
+		icon?: Component;
+		headerColor?: string;
+		textColor?: string;
+		openedColor?: string;
+		borderColor?: string;
+		topBorderColor?: string;
+	}
+
+	let {
+		title,
+		children,
+		open = $bindable(false),
+		icon,
+		headerColor,
+		textColor,
+		openedColor,
+		borderColor,
+		topBorderColor
+	}: Props = $props();
+
+	const Icon = icon;
+
+	function handleClick() {
+		open = !open;
+	}
 </script>
 
 <div
-    class="accordion-item"
-    style:--custom-border={borderColor}
-    style:--custom-text={textColor}
-    style:--custom-opened={openedColor}
-    style:--custom-header={headerColor}
+	class="accordion-item"
+	style:--custom-border={borderColor}
+	style:--custom-text={textColor}
+	style:--custom-opened={openedColor}
+	style:--custom-header={headerColor}
 >
-    <button class="accordion-header" class:open onclick={handleClick}>
-        {#if icon}
-          <span class="icon">
-             <Icon size={20} />
-          </span>
-        {/if}
-        <span class="title">{title}</span>
-        <span class="chevron" class:rotated={open}>
-          <IconCaretDownFill />
-       </span>
-    </button>
-
-    <div class="accordion-content"
-         class:show={open}>
-        <div class="content-text"
-             style:--custom-top-border={topBorderColor}
-             style:--custom-header={headerColor}
-        >
-            {@render children?.()}
-        </div>
-    </div>
+	<button class="accordion-header" class:open onclick={handleClick}>
+		{#if icon}
+			<span class="icon">
+				<Icon size={20} />
+			</span>
+		{/if}
+		<span class="title">{title}</span>
+		<span class="chevron" class:rotated={open}>
+			<IconCaretDownFill />
+		</span>
+	</button>
+
+	<div class="accordion-content" class:show={open}>
+		<div
+			class="content-text"
+			style:--custom-top-border={topBorderColor}
+			style:--custom-header={headerColor}
+		>
+			{@render children?.()}
+		</div>
+	</div>
 </div>
 
 <style>
-    .accordion-item {
-        overflow: hidden;
-        border-radius: 20px;
-        border: 1px solid var(--custom-border, var(--border));
-    }
-
-    .accordion-header {
-        width: 100%;
-        padding: 14px 20px;
-        background: var(--custom-header, none);
-        border: none;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        cursor: pointer;
-        font-size: 16px;
-        border-radius: 20px;
-        color: var(--custom-text, var(--text));
-    }
-
-    .accordion-header.open {
-        border-radius: 20px 20px 0 0;
-        background-color: var(--custom-opened, var(--hover));
-    }
-
-    .title {
-        font-weight: 500;
-        text-align: left;
-    }
-
-    .chevron {
-        display: flex;
-        align-items: center;
-        transition: transform 0.3s ease;
-        color: var(--custom-text, var(--text));
-    }
-
-    .chevron.rotated {
-        transform: rotate(180deg);
-    }
-
-    .accordion-content {
-        height: 0;
-        overflow: hidden;
-    }
-
-    .accordion-content.show {
-        height: auto;
-        overflow: visible;
-        animation: slideDown 0.3s ease-out;
-    }
-
-    .content-text {
-        padding: 20px;
-        color: var(--custom-text, var(--text));
-        line-height: 1.6;
-        border-top: 1px solid var(--custom-top-border, var(--border));
-        background: var(--custom-header, none);
-    }
-
-    .icon {
-        display: inline-block;
-        margin-right: 10px;
-        vertical-align: middle;
-    }
-
-    @keyframes slideDown {
-        from {
-            opacity: 0;
-            transform: translateY(-10px);
-        }
-        to {
-            opacity: 1;
-            transform: translateY(0);
-        }
-    }
+	.accordion-item {
+		overflow: hidden;
+		border-radius: 20px;
+		border: 1px solid var(--custom-border, var(--border));
+	}
+
+	.accordion-header {
+		width: 100%;
+		padding: 14px 20px;
+		background: var(--custom-header, none);
+		border: none;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		cursor: pointer;
+		font-size: 16px;
+		border-radius: 20px;
+		color: var(--custom-text, var(--text));
+	}
+
+	.accordion-header.open {
+		border-radius: 20px 20px 0 0;
+		background-color: var(--custom-opened, var(--hover));
+	}
+
+	.title {
+		font-weight: 500;
+		text-align: left;
+	}
+
+	.chevron {
+		display: flex;
+		align-items: center;
+		transition: transform 0.3s ease;
+		color: var(--custom-text, var(--text));
+	}
+
+	.chevron.rotated {
+		transform: rotate(180deg);
+	}
+
+	.accordion-content {
+		height: 0;
+		overflow: hidden;
+	}
+
+	.accordion-content.show {
+		height: auto;
+		overflow: visible;
+		animation: slideDown 0.3s ease-out;
+	}
+
+	.content-text {
+		padding: 20px;
+		color: var(--custom-text, var(--text));
+		line-height: 1.6;
+		border-top: 1px solid var(--custom-top-border, var(--border));
+		background: var(--custom-header, none);
+	}
+
+	.icon {
+		display: inline-block;
+		margin-right: 10px;
+		vertical-align: middle;
+	}
+
+	@keyframes slideDown {
+		from {
+			opacity: 0;
+			transform: translateY(-10px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
 </style>

package/dist/components/ActionList/ActionList.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
-
 	import { setContext } from 'svelte';
 
 	interface Props {
@@ -12,12 +10,8 @@
 
 	let { selection = 'none', selectionAlign = 'start', children, ...rest }: Props = $props();
 
-	run(() => {
-		setContext('action-list-selection', selection);
-	});
-	run(() => {
-		setContext('action-list-selection-align', selectionAlign);
-	});
+	setContext('action-list-selection', () => selection);
+	setContext('action-list-selection-align', () => selectionAlign);
 </script>
 
 <div class="action-list" {...rest}>

package/dist/components/ActionList/ActionListGroup.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
-
 	import { setContext } from 'svelte';
 
 	interface Props {
@@ -12,9 +10,7 @@
 
 	let { title = undefined, divider = false, selection = undefined, children }: Props = $props();
 
-	run(() => {
-		if (selection !== undefined) setContext('action-list-selection', selection);
-	});
+	setContext('action-list-selection', () => selection);
 </script>
 
 <div class="action-list-group" class:has-divider={divider}>

package/dist/components/ActionList/ActionListItem.svelte

@@ -5,8 +5,8 @@
 	import { getContext, createEventDispatcher } from 'svelte';
 	import Selected from './Selected.svelte';
 
-	const selection: 'none' | 'single' | 'multi' = getContext('action-list-selection');
-	const selectionAlign: 'start' | 'end' = getContext('action-list-selection-align');
+	const selection: () => 'none' | 'single' | 'multi' = getContext('action-list-selection');
+	const selectionAlign: () => 'start' | 'end' = getContext('action-list-selection-align');
 
 	interface Props {
 		selected?: boolean;
@@ -30,7 +30,7 @@
 		...rest
 	}: Props = $props();
 
-	selected = selection !== 'none' && selected;
+	selected = selection() !== 'none' && selected;
 
 	const dispatch = createEventDispatcher();
 
@@ -53,8 +53,8 @@
 	}}
 	{...rest}
 >
-	{#if selectionAlign === 'start'}
-		<Selected {selection} bind:selected />
+	{#if selectionAlign() === 'start'}
+		<Selected selection={selection()} bind:selected />
 	{/if}
 
 	{#if start}
@@ -79,8 +79,8 @@
 		</span>
 	{/if}
 
-	{#if selectionAlign === 'end'}
-		<Selected {selection} bind:selected />
+	{#if selectionAlign() === 'end'}
+		<Selected selection={selection()} bind:selected />
 	{/if}
 </div>
 

package/dist/components/Button/Button.svelte

@@ -62,7 +62,6 @@
 	this={as}
 	class="button {size} {color} {variant} {align}"
 	class:block
-
 	onkeyup={legacyHandlers(onkeyup, bubble('keyup'))}
 	onkeydown={legacyHandlers(onkeydown, bubble('keydown'))}
 	onkeypress={legacyHandlers(onkeypress, bubble('keypress'))}
@@ -73,7 +72,6 @@
 	onmouseenter={legacyHandlers(onmouseenter, bubble('mouseenter'))}
 	onmouseleave={legacyHandlers(onmouseleave, bubble('mouseleave'))}
 	onchange={legacyHandlers(onchange, bubble('change'))}
-
 	role="button"
 	tabindex="0"
 	bind:this={button}
@@ -282,11 +280,7 @@
   background-color: var(--orange-light);
   color: var(--orange-dark);
   transition: 0.2s box-shadow;
-  --local-hover-shadow-color: color-mix(
-  	in srgb,
-  	var(--orange-light) 40%,
-  	transparent
-  );
+  --local-hover-shadow-color: color-mix(in srgb, var(--orange-light) 40%, transparent);
 }
 .button.outline {
   border: 1px solid;
@@ -341,11 +335,7 @@
   border-color: var(--accent);
   color: var(--accent);
   transition: 0.2s box-shadow;
-  --local-hover-shadow-color: color-mix(
-  	in srgb,
-  	var(--accent-light) 40%,
-  	transparent
-  );
+  --local-hover-shadow-color: color-mix(in srgb, var(--accent-light) 40%, transparent);
 }
 .button.outline-fill.gray {
   background-color: var(--gray-light);

package/dist/components/CodeBlock/CodeBlock.svelte

@@ -1,39 +1,52 @@
 <script lang="ts">
-	//import './prism.scss';
-	import './hljs.scss';
+	import Button from '../Button/Button.svelte';
+	import IconCopy from '@hyvor/icons/IconCopy';
+	import toast from '../Toast/toast.js';
+	import { getCode, sanitizeLines, type Language } from './getCode.js';
 
-	type InputLanguage = 'html' | 'css' | 'js' | 'ts' | 'yaml' | 'json' | 'svelte' | 'jsx' | 'php';
-
-	const languagesMap: Partial<Record<InputLanguage, Language>> = {
-		svelte: 'html',
-		jsx: 'js'
-	};
-
-	type Language = any;
-
-	// import getCode, { type Language } from './getCode.js';
 	interface Props {
 		code: string;
-		language?: InputLanguage | null;
+		language?: Language | null;
 	}
 
 	let { code, language = 'html' }: Props = $props();
 
-	let languageCode = $derived(
-		language ? languagesMap[language] || language : null
-	) as Language | null;
+	let sanitizedCode = $derived(sanitizeLines(code));
 
-	function getCode(code: string, languageCode: any) {
-		// TODO: must change
-		return code.replace(/</g, '&lt;').replace(/>/g, '&gt;').trim();
+	function copyToClipboard() {
+		navigator.clipboard.writeText(sanitizedCode);
+		toast.success('Copied');
 	}
 </script>
 
-<pre class="language-{languageCode} hljs"><code>{@html getCode(code, languageCode)}</code></pre>
+<div class="code-container">
+	<div class="copy-button">
+		<Button color="input" size="x-small" onclick={copyToClipboard}>
+			<IconCopy size={10} />
+		</Button>
+	</div>
+	{@html await getCode(sanitizedCode, language)}
+</div>
 
 <style>
 	/*styles for CodeBlock component */
-	pre {
+	.code-container {
+		position: relative;
+	}
+
+	.code-container .copy-button {
+		position: absolute;
+		top: 0px;
+		right: 12px;
+		transform: translateY(-40%);
+		z-index: 10;
+	}
+
+	.copy-button :global(button) {
+		border: 1px solid var(--border);
+	}
+
+	.code-container :global(pre) {
 		text-align: left;
 		white-space: pre;
 		word-spacing: normal;
@@ -43,18 +56,22 @@
 		border-radius: 20px;
 		padding: 20px;
 		line-height: 1.2;
+		background-color: #f4f2f0 !important;
 	}
-	pre code {
+
+	.code-container :global(pre code) {
 		all: unset;
-		font-family:
-			Consolas,
-			Monaco,
-			Andale Mono,
-			Ubuntu Mono,
-			monospace;
 		font-size: 14px;
 		line-height: 1.5 !important;
 		tab-size: 4;
 		hyphens: none;
 	}
+
+	:global(:root.dark .shiki, :root.dark .shiki span) {
+		color: var(--shiki-dark) !important;
+		background-color: var(--shiki-dark-bg) !important;
+		font-style: var(--shiki-dark-font-style) !important;
+		font-weight: var(--shiki-dark-font-weight) !important;
+		text-decoration: var(--shiki-dark-text-decoration) !important;
+	}
 </style>

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

@@ -1,8 +1,7 @@
-import './hljs.scss';
-type InputLanguage = 'html' | 'css' | 'js' | 'ts' | 'yaml' | 'json' | 'svelte' | 'jsx' | 'php';
+import { type Language } from './getCode.js';
 interface Props {
     code: string;
-    language?: InputLanguage | null;
+    language?: Language | null;
 }
 declare const CodeBlock: import("svelte").Component<Props, {}, "">;
 type CodeBlock = ReturnType<typeof CodeBlock>;