@hyvor/design 1.1.25-beta-org-2 → 1.1.25-beta-org-4

package/dist/components/HyvorBar/HyvorBar.svelte

@@ -4,6 +4,7 @@
 	import BarProducts, { PRODUCTS } from './BarProducts.svelte';
 	import BarSupport from './BarSupport.svelte';
 	import {
+		barOnOrganizationSwitch,
 		barUser,
 		initBar,
 		setInstanceAndProduct,
@@ -71,13 +72,13 @@
 		}
 	}
 
+	barOnOrganizationSwitch.set(onOrganizationSwitch);
+	setInstanceAndProduct(instance, product);
 	if (authOverride) {
 		barUser.set(authOverride.user);
 	}
 
 	onMount(() => {
-		setInstanceAndProduct(instance, product);
-
 		if (cloud) {
 			initBar();
 		}
@@ -102,7 +103,7 @@
 					{getName()}
 				</span>
 			</a>
-			<BarOrganization onSwitch={onOrganizationSwitch} />
+			<BarOrganization />
 			<BarLicense name={getName()} />
 		</div>
 		<div class="right">

package/dist/components/HyvorBar/Organization/BarOrganization.svelte

@@ -1,13 +1,17 @@
 <script lang="ts">
 	import Tooltip from '../../Tooltip/Tooltip.svelte';
-	import { barOrganizationDropdownOpen, barUser, type BarOrganization } from '../bar.js';
+	import {
+		barOrganizationCreating,
+		barOrganizationDropdownOpen,
+		barUser,
+		type BarOrganization
+	} from '../bar.js';
+	import CreateOrganization from './CreateOrganization.svelte';
 	import OrganizationButton from './OrganizationButton.svelte';
 
 	let disableTooltip = $state(false);
 
-	let props: {
-		onSwitch: (org: BarOrganization) => void;
-	} = $props();
+	let props: {} = $props();
 
 	barOrganizationDropdownOpen.subscribe((value) => {
 		if (value) disableTooltip = true;
@@ -17,15 +21,13 @@
 {#if $barUser}
 	<Tooltip position="bottom" text="Switch Organization" disabled={disableTooltip}>
 		<div class="wrap">
-			<OrganizationButton
-				bind:show={$barOrganizationDropdownOpen}
-				onSwitch={props.onSwitch}
-				style="bordered"
-			/>
+			<OrganizationButton bind:show={$barOrganizationDropdownOpen} style="bordered" />
 		</div>
 	</Tooltip>
 {/if}
 
+<CreateOrganization bind:show={$barOrganizationCreating} />
+
 <style>
 	.wrap {
 		height: 100%;

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

@@ -1,7 +1,5 @@
 import { type BarOrganization } from '../bar.js';
-type $$ComponentProps = {
-    onSwitch: (org: BarOrganization) => void;
-};
+type $$ComponentProps = {};
 declare const BarOrganization: import("svelte").Component<$$ComponentProps, {}, "">;
 type BarOrganization = ReturnType<typeof BarOrganization>;
 export default BarOrganization;

package/dist/components/HyvorBar/Organization/CreateOrganization.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+	import Modal from '../../Modal/Modal.svelte';
+	import SplitControl from '../../SplitControl/SplitControl.svelte';
+	import TextInput from '../../TextInput/TextInput.svelte';
+	import toast from '../../Toast/toast.ts';
+	import {
+		barOnOrganizationSwitch,
+		createOrganization,
+		switchOrganization,
+		type BarOrganization
+	} from '../bar.ts';
+
+	interface Props {
+		show?: boolean;
+	}
+
+	let { show = $bindable(false) }: Props = $props();
+
+	let name = $state('');
+	let input: HTMLInputElement | undefined = $state(undefined);
+	let creating = $state(false);
+
+	async function handleCreate() {
+		if (name.trim() === '') {
+			toast.error('Organization name cannot be empty.');
+			return;
+		}
+
+		creating = true;
+
+		let org: BarOrganization;
+
+		try {
+			org = await createOrganization(name);
+		} catch {
+			toast.error('Failed to create organization.');
+			creating = false;
+			return;
+		}
+
+		show = false;
+		name = '';
+
+		try {
+			await switchOrganization(org.id);
+			$barOnOrganizationSwitch?.(org);
+		} catch {
+			toast.error('Failed to switch to the new organization.');
+			return;
+		} finally {
+			creating = false;
+		}
+	}
+
+	$effect(() => {
+		if (show && input) {
+			input.focus();
+		}
+	});
+</script>
+
+<Modal
+	bind:show
+	title="Create Organization"
+	size="small"
+	footer={{ confirm: { text: 'Create' }, cancel: { text: 'Cancel' } }}
+	on:confirm={handleCreate}
+	loading={creating}
+>
+	<SplitControl label="Name" column>
+		<TextInput
+			name="organizationName"
+			bind:value={name}
+			placeholder="Organization Name"
+			block
+			onkeyup={(e) => {
+				if (e.key === 'Enter') {
+					handleCreate();
+				}
+			}}
+			bind:input
+		/>
+	</SplitControl>
+</Modal>

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

@@ -0,0 +1,6 @@
+interface Props {
+    show?: boolean;
+}
+declare const CreateOrganization: import("svelte").Component<Props, {}, "show">;
+type CreateOrganization = ReturnType<typeof CreateOrganization>;
+export default CreateOrganization;

package/dist/components/HyvorBar/Organization/OrganizationButton.svelte

@@ -2,7 +2,12 @@
 	import Dropdown from '../../Dropdown/Dropdown.svelte';
 	import IconChevronExpand from '@hyvor/icons/IconChevronExpand';
 	import OrgsList from './OrgsList.svelte';
-	import { barUser, switchOrganization, type BarOrganization } from '../bar.js';
+	import {
+		barOnOrganizationSwitch,
+		barUser,
+		switchOrganization,
+		type BarOrganization
+	} from '../bar.js';
 	import toast from '../../Toast/toast.js';
 	import type { DropdownAlign } from '../../Dropdown/dropdown.types.js';
 
@@ -14,17 +19,11 @@
 
 	interface Props {
 		show?: boolean;
-		onSwitch?: (org: BarOrganization) => void;
 		style?: 'bordered' | 'plain';
 		dropdownAlign?: DropdownAlign;
 	}
 
-	let {
-		show = $bindable(false),
-		onSwitch,
-		style = 'plain',
-		dropdownAlign = 'center'
-	}: Props = $props();
+	let { show = $bindable(false), style = 'plain', dropdownAlign = 'center' }: Props = $props();
 	let switching = $state(false);
 
 	async function handleSwitch(org: BarOrganization) {
@@ -32,15 +31,19 @@
 		switching = true;
 
 		try {
-			await switchOrganization(org);
+			await switchOrganization(org.id);
 		} catch (e) {
 			toast.error('Failed to switch organization.');
-			switching = false;
 			return;
+		} finally {
+			switching = false;
 		}
 
-		switching = false;
-		onSwitch?.(org);
+		$barOnOrganizationSwitch?.(org);
+	}
+
+	function handleCreateOrgStart() {
+		show = false;
 	}
 </script>
 
@@ -57,7 +60,7 @@
 			</button>
 		{/snippet}
 		{#snippet content()}
-			<OrgsList onSwitch={handleSwitch} />
+			<OrgsList onSwitch={handleSwitch} onCreateStart={handleCreateOrgStart} />
 		{/snippet}
 	</Dropdown>
 {/if}

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

@@ -1,4 +1,3 @@
-import { type BarOrganization } from '../bar.js';
 import type { DropdownAlign } from '../../Dropdown/dropdown.types.js';
 /**
  * This component depends on data from HyvorBar
@@ -7,7 +6,6 @@ import type { DropdownAlign } from '../../Dropdown/dropdown.types.js';
  */
 interface Props {
     show?: boolean;
-    onSwitch?: (org: BarOrganization) => void;
     style?: 'bordered' | 'plain';
     dropdownAlign?: DropdownAlign;
 }

package/dist/components/HyvorBar/Organization/OrgsList.svelte

@@ -2,17 +2,28 @@
 	import IconMessage from '../../IconMessage/IconMessage.svelte';
 	import Loader from '../../Loader/Loader.svelte';
 	import { onMount } from 'svelte';
-	import { barOrganizations, getMyOrganizations, type BarOrganization } from '../bar.js';
+	import {
+		barOrganizationCreating,
+		barOrganizations,
+		getMyOrganizations,
+		instance,
+		type BarOrganization
+	} from '../bar.js';
 	import ActionList from '../../ActionList/ActionList.svelte';
 	import ActionListItem from '../../ActionList/ActionListItem.svelte';
+	import Button from '../../Button/Button.svelte';
+	import IconPlus from '@hyvor/icons/IconPlus';
+	import IconBoxArrowUpRight from '@hyvor/icons/IconBoxArrowUpRight';
 
 	let loading = $state(true);
 	let error = $state('');
 
 	let {
-		onSwitch
+		onSwitch,
+		onCreateStart
 	}: {
 		onSwitch: (org: BarOrganization) => void;
+		onCreateStart: () => void;
 	} = $props();
 
 	onMount(() => {
@@ -20,6 +31,7 @@
 			loading = false;
 			return;
 		}
+
 		getMyOrganizations()
 			.then((data) => {
 				barOrganizations.set(data);
@@ -31,6 +43,11 @@
 				loading = false;
 			});
 	});
+
+	function handleCreate() {
+		barOrganizationCreating.set(true);
+		onCreateStart();
+	}
 </script>
 
 {#if loading}
@@ -54,6 +71,28 @@
 			{/each}
 		</ActionList>
 	</div>
+
+	<div class="manage-create">
+		<Button size="small" onclick={handleCreate}>
+			Create
+			{#snippet end()}
+				<IconPlus />
+			{/snippet}
+		</Button>
+		<Button
+			size="small"
+			as="a"
+			href={$instance + '/account/org'}
+			color="input"
+			target="_blank"
+			rel="noopener noreferrer"
+		>
+			Manage
+			{#snippet end()}
+				<IconBoxArrowUpRight size={12} />
+			{/snippet}
+		</Button>
+	</div>
 {/if}
 
 <style>
@@ -67,4 +106,15 @@
 		overflow-y: auto;
 		padding: 10px;
 	}
+	.manage-create {
+		border-top: 1px solid var(--border);
+		padding: 10px;
+		display: flex;
+		gap: 10px;
+		align-items: center;
+		justify-content: center;
+	}
+	.manage-create :global(a) {
+		text-decoration: none !important;
+	}
 </style>

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

@@ -1,6 +1,7 @@
 import { type BarOrganization } from '../bar.js';
 type $$ComponentProps = {
     onSwitch: (org: BarOrganization) => void;
+    onCreateStart: () => void;
 };
 declare const OrgsList: import("svelte").Component<$$ComponentProps, {}, "">;
 type OrgsList = ReturnType<typeof OrgsList>;

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

@@ -35,19 +35,24 @@ export interface BarResolvedLicense {
     };
     trial_ends_at: null | number;
 }
+export declare const instance: import("svelte/store").Writable<string>;
 export declare const barUser: import("svelte/store").Writable<BarUser | null>;
 export declare const barUnreadUpdates: import("svelte/store").Writable<number>;
 export declare const barLicense: import("svelte/store").Writable<BarResolvedLicense | null>;
 export declare const barHasFailedInvoices: import("svelte/store").Writable<boolean>;
 export declare const barOrganizationDropdownOpen: import("svelte/store").Writable<boolean>;
 export declare const barOrganizations: import("svelte/store").Writable<BarOrganization[]>;
+export declare const barOnOrganizationSwitch: import("svelte/store").Writable<((org: BarOrganization) => void) | null>;
+export declare const barOrganizationCreating: import("svelte/store").Writable<boolean>;
 export declare function setInstanceAndProduct(instance_: string, product_: string): void;
+export declare function getInstance(): string;
 /**
  * @throws Error if initialization fails
  */
 export declare function initBar(): Promise<void>;
 export declare function getMyOrganizations(): Promise<BarOrganization[]>;
-export declare function switchOrganization(org: BarOrganization): Promise<void>;
+export declare function createOrganization(name: string): Promise<BarOrganization>;
+export declare function switchOrganization(orgId: number): Promise<void>;
 export declare class UnreadUpdatesTimeLocalStorage {
     static KEY: string;
     static get(): number | null;

package/dist/components/HyvorBar/bar.js

@@ -1,17 +1,22 @@
 import { track } from '../../marketing/index.js';
-import { writable } from 'svelte/store';
-let instance = '';
+import { get, writable } from 'svelte/store';
 let product = 'core';
+export const instance = writable('');
 export const barUser = writable(null);
 export const barUnreadUpdates = writable(0);
 export const barLicense = writable(null);
 export const barHasFailedInvoices = writable(false);
 export const barOrganizationDropdownOpen = writable(false);
 export const barOrganizations = writable([]);
+export const barOnOrganizationSwitch = writable(null);
+export const barOrganizationCreating = writable(false);
 export function setInstanceAndProduct(instance_, product_) {
-    instance = instance_;
+    instance.set(instance_);
     product = product_;
 }
+export function getInstance() {
+    return get(instance);
+}
 /**
  * @throws Error if initialization fails
  */
@@ -22,7 +27,7 @@ export async function initBar() {
     if (lastUnreadTime) {
         query.set('last_read_updates_at', lastUnreadTime.toString());
     }
-    const response = await fetch(instance + '/api/public/bar?' + query.toString(), {
+    const response = await fetch(getInstance() + '/api/public/bar?' + query.toString(), {
         credentials: 'include'
     });
     if (!response.ok) {
@@ -39,7 +44,7 @@ export async function initBar() {
     if (data.user && track.ready()) {
         track.identify(data.user.id.toString(), {
             name: data.user.name ?? undefined,
-            avatar: data.user.picture_url ?? undefined,
+            avatar: data.user.picture_url ?? undefined
         });
     }
 }
@@ -48,22 +53,37 @@ export async function getMyOrganizations() {
         { id: 1, name: 'Org 1', role: 'admin' },
         { id: 2, name: 'Org 2', role: 'member' },
         { id: 3, name: 'Org 3', role: 'billing' },
-        { id: 4, name: 'Org 4', role: 'manager' },
-    ] */
-    const response = await fetch(instance + '/api/public/bar/myorgs', {
+        { id: 4, name: 'Org 4', role: 'manager' }
+    ]; */
+    const response = await fetch(getInstance() + '/api/public/bar/orgs/my', {
         credentials: 'include'
     });
     const data = await response.json();
     return data.organizations;
 }
-export async function switchOrganization(org) {
-    const response = await fetch(instance + '/api/public/bar/switch-org', {
+export async function createOrganization(name) {
+    const response = await fetch(getInstance() + '/api/public/bar/orgs', {
+        method: 'POST',
+        credentials: 'include',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ name })
+    });
+    if (!response.ok) {
+        throw new Error('Failed to create organization');
+    }
+    const data = await response.json();
+    return data;
+}
+export async function switchOrganization(orgId) {
+    const response = await fetch(getInstance() + '/api/public/bar/orgs/switch', {
         method: 'POST',
         credentials: 'include',
         headers: {
             'Content-Type': 'application/json'
         },
-        body: JSON.stringify({ organization_id: org.id })
+        body: JSON.stringify({ organization_id: orgId })
     });
     if (!response.ok) {
         throw new Error('Failed to switch organization');

package/package.json

@@ -62,5 +62,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"version": "1.1.25-beta-org-2"
+	"version": "1.1.25-beta-org-4"
 }