@hyvor/design 2.0.18 → 2.1.0

package/dist/marketing/Docs/OpenApi/openapi.js

@@ -0,0 +1,267 @@
+import { dereference } from '@apidevtools/json-schema-ref-parser';
+// @apidevtools/json-schema-ref-parser calls Buffer.isBuffer(...) internally to detect
+// binary/text input, even when we hand it an already-parsed plain JS object - it never
+// actually needs a real Buffer for that case, so a minimal shim is enough to stop it
+// throwing "Buffer is not defined" in the browser.
+const globalWithBuffer = globalThis;
+if (typeof globalWithBuffer.Buffer === 'undefined') {
+    globalWithBuffer.Buffer = { isBuffer: () => false };
+}
+const HTTP_METHODS = [
+    'get',
+    'put',
+    'post',
+    'delete',
+    'options',
+    'head',
+    'patch',
+    'trace'
+];
+export async function loadOpenApi(path) {
+    // fetch the JSON ourselves and dereference the in-memory object, rather than handing
+    // the library a URL - its HTTP resolver relies on Node's Buffer, which isn't available
+    // in the browser
+    const response = await fetch(path);
+    if (!response.ok) {
+        throw new Error(`Failed to fetch ${path}: ${response.status} ${response.statusText}`);
+    }
+    const schema = await response.json();
+    const doc = (await dereference(schema));
+    // $RefParser resolves every occurrence of the same $ref to the exact same object
+    // instance, so object identity can be used to recognize a named schema wherever
+    // it shows up in the tree.
+    const schemaNames = new Map();
+    for (const [name, s] of Object.entries(doc.components?.schemas ?? {})) {
+        if (s && typeof s === 'object')
+            schemaNames.set(s, name);
+    }
+    return { doc, schemaNames };
+}
+function slugify(text) {
+    return text
+        .toLowerCase()
+        .replace(/[{}]/g, '')
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/(^-|-$)/g, '');
+}
+// finds path segments that are common to every path in the doc (eg. "api", "console")
+// so that grouping/titles can ignore that shared, uninformative prefix
+function commonSegmentPrefix(paths) {
+    const segmentLists = paths.map((p) => p.split('/').filter(Boolean));
+    if (segmentLists.length === 0)
+        return [];
+    const prefix = [];
+    const first = segmentLists[0];
+    for (let i = 0; i < first.length; i++) {
+        const segment = first[i];
+        if (segment.startsWith('{'))
+            break;
+        if (segmentLists.every((segments) => segments[i] === segment)) {
+            prefix.push(segment);
+        }
+        else {
+            break;
+        }
+    }
+    return prefix;
+}
+export function titleCase(segment) {
+    const overrides = { api: 'API', id: 'ID', url: 'URL' };
+    return segment
+        .split('-')
+        .map((word) => overrides[word] ?? word.charAt(0).toUpperCase() + word.slice(1))
+        .join(' ');
+}
+export function groupOperations(doc) {
+    const paths = Object.keys(doc.paths ?? {});
+    const prefix = commonSegmentPrefix(paths);
+    const groups = new Map();
+    for (const path of paths) {
+        const item = doc.paths[path];
+        const segments = path.split('/').filter(Boolean);
+        const rest = segments.slice(prefix.length);
+        const groupSegment = rest.find((s) => !s.startsWith('{')) ?? rest[0] ?? path;
+        const groupKey = groupSegment;
+        if (!groups.has(groupKey)) {
+            groups.set(groupKey, {
+                key: groupKey,
+                title: titleCase(groupKey),
+                operations: []
+            });
+        }
+        for (const method of HTTP_METHODS) {
+            const op = item[method];
+            if (!op)
+                continue;
+            const parameters = op.parameters ?? [];
+            const content = op.requestBody?.content?.['application/json'];
+            let response;
+            const responses = op.responses ?? {};
+            const responseEntry = responses['200'] ?? responses['201'] ?? responses['default'];
+            const responseContent = responseEntry?.content?.['application/json'];
+            if (responseEntry && (responseEntry.description || responseContent?.schema)) {
+                response = { description: responseEntry.description, schema: responseContent?.schema };
+            }
+            groups.get(groupKey).operations.push({
+                id: slugify(`${method}-${path}`),
+                method,
+                path,
+                operationId: op.operationId,
+                summary: op.summary,
+                description: op.description,
+                pathParams: parameters.filter((p) => p.in === 'path'),
+                queryParams: parameters.filter((p) => p.in === 'query'),
+                headerParams: parameters.filter((p) => p.in === 'header'),
+                requestBodySchema: content?.schema,
+                requestBodyRequired: op.requestBody?.required ?? false,
+                response
+            });
+        }
+    }
+    return Array.from(groups.values()).filter((g) => g.operations.length > 0);
+}
+export function methodColor(method) {
+    switch (method) {
+        case 'get':
+            return 'blue';
+        case 'post':
+            return 'green';
+        case 'patch':
+        case 'put':
+            return 'orange';
+        case 'delete':
+            return 'red';
+        default:
+            return 'default';
+    }
+}
+export function describeType(schema, schemaNames) {
+    if (!schema)
+        return 'any';
+    // named object schemas (eg. "SendingProfileObject") are shown by name rather than
+    // inlined as a generic "object" - scalars/enums keep showing their literal values
+    if (schema.type === 'object' && schemaNames?.has(schema)) {
+        return schemaNames.get(schema);
+    }
+    if (schema.oneOf?.length)
+        return schema.oneOf.map((s) => describeType(s, schemaNames)).join(' | ');
+    if (schema.anyOf?.length)
+        return schema.anyOf.map((s) => describeType(s, schemaNames)).join(' | ');
+    if (schema.allOf?.length)
+        return schema.allOf.map((s) => describeType(s, schemaNames)).join(' & ');
+    if (schema.enum)
+        return schema.enum.map((v) => JSON.stringify(v)).join(' | ');
+    if (schema.type === 'array') {
+        return `${describeType(schema.items, schemaNames)}[]`;
+    }
+    if (schema.type === 'object') {
+        if (schema.additionalProperties && typeof schema.additionalProperties === 'object') {
+            return `object<string, ${describeType(schema.additionalProperties, schemaNames)}>`;
+        }
+        return 'object';
+    }
+    return schema.type ?? 'any';
+}
+// unwraps a top-level "array of X" schema (eg. a `SendingProfileObject[]` response) so
+// callers can render the item schema's fields directly, with the array-ness shown separately
+export function unwrapArraySchema(schema) {
+    if (schema.type === 'array' && schema.items) {
+        return { isArray: true, itemSchema: schema.items };
+    }
+    return { isArray: false, itemSchema: schema };
+}
+const STRING_EXAMPLES = [
+    [/e-?mail/i, 'jane@example.com'],
+    [/subdomain/i, 'my-newsletter'],
+    [/domain/i, 'example.com'],
+    [/^(website|.*url|.*logo)$/i, 'https://example.com'],
+    [/name/i, 'My List'],
+    [/^id$/i, '123']
+];
+function stringExample(propName, schema) {
+    if (schema.format === 'date-time')
+        return new Date().toISOString();
+    for (const [pattern, example] of STRING_EXAMPLES) {
+        if (pattern.test(propName))
+            return example;
+    }
+    return 'string';
+}
+export function exampleValue(schema, propName = '') {
+    if (!schema)
+        return null;
+    if (schema.example !== undefined)
+        return schema.example;
+    if (schema.default !== undefined)
+        return schema.default;
+    if (schema.enum?.length)
+        return schema.enum[0];
+    if (schema.oneOf?.length)
+        return exampleValue(schema.oneOf[0], propName);
+    if (schema.anyOf?.length)
+        return exampleValue(schema.anyOf[0], propName);
+    if (schema.allOf?.length)
+        return exampleValue(schema.allOf[schema.allOf.length - 1], propName);
+    switch (schema.type) {
+        case 'object': {
+            const props = schema.properties ?? {};
+            const keys = schema.required?.length ? schema.required : Object.keys(props);
+            if (keys.length) {
+                const obj = {};
+                for (const key of keys) {
+                    obj[key] = exampleValue(props[key], key);
+                }
+                return obj;
+            }
+            if (schema.additionalProperties && typeof schema.additionalProperties === 'object') {
+                return { key: exampleValue(schema.additionalProperties, 'key') };
+            }
+            return {};
+        }
+        case 'array':
+            return [exampleValue(schema.items, propName)];
+        case 'integer':
+        case 'number':
+            return 0;
+        case 'boolean':
+            return true;
+        case 'string':
+            return stringExample(propName, schema);
+        default:
+            return null;
+    }
+}
+export function paramExample(param) {
+    const value = exampleValue(param.schema, param.name);
+    return value === null || value === undefined ? 'value' : String(value);
+}
+export function buildUrl(baseUrl, operation) {
+    let path = operation.path;
+    for (const param of operation.pathParams) {
+        path = path.replace(`{${param.name}}`, encodeURIComponent(paramExample(param)));
+    }
+    const query = operation.queryParams
+        .map((p) => `${encodeURIComponent(p.name)}=${encodeURIComponent(paramExample(p))}`)
+        .join('&');
+    const url = baseUrl.replace(/\/$/, '') + path;
+    return query ? `${url}?${query}` : url;
+}
+export function buildCurl(operation, baseUrl) {
+    const url = buildUrl(baseUrl, operation);
+    const lines = [`curl -X ${operation.method.toUpperCase()} '${url}' \\`];
+    lines.push(`  -H 'Authorization: Bearer YOUR_API_KEY' \\`);
+    for (const param of operation.headerParams) {
+        lines.push(`  -H '${param.name}: ${paramExample(param)}' \\`);
+    }
+    if (operation.requestBodySchema) {
+        lines.push(`  -H 'Content-Type: application/json' \\`);
+        const body = exampleValue(operation.requestBodySchema);
+        const json = JSON.stringify(body, null, 2);
+        lines.push(`  -d '${json}'`);
+    }
+    else {
+        // remove the trailing continuation backslash of the last header line
+        lines[lines.length - 1] = lines[lines.length - 1].replace(/\s*\\$/, '');
+    }
+    return lines.join('\n');
+}

package/dist/marketing/Docs/Sidebar/Sidebar.svelte

@@ -9,8 +9,7 @@
 <style>
 	.sidebar {
 		width: 220px;
-		top: var(--header-height, 0);
-		padding: 25px 0;
+		top: calc(var(--header-height, 0) + 15px);
 		position: sticky;
 		flex-shrink: 0;
 		align-self: flex-start;
@@ -22,7 +21,6 @@
 			position: relative;
 			top: initial;
 			padding: 0 15px;
-			margin-bottom: 20px;
 			width: 100%;
 		}
 	}

package/dist/marketing/Docs/fulldocs.d.ts

@@ -0,0 +1,17 @@
+import type { NavSectionConfig, NavConfig, NavPageConfig, NavSubSectionConfig } from './types.js';
+export declare function loadDocsPage(config: {
+    basepath?: string;
+    rootName?: string;
+    sections: NavSectionConfig[];
+    slug: string;
+}): {
+    basepath: string;
+    rootName: string;
+    sections: NavSectionConfig[];
+    slug: string;
+    page: NavPageConfig;
+};
+export declare function getPageFromSections(sections: NavSectionConfig[], slug: string): NavPageConfig | undefined;
+export declare function getPageFromNavs(navs: NavConfig[], slug: string): NavPageConfig | undefined;
+export declare function getSubSectionPathForSlug(sections: NavSectionConfig[], slug: string): NavSubSectionConfig[] | undefined;
+export declare function getFirstPageSlug(sections: NavSectionConfig[]): string | undefined;

package/dist/marketing/Docs/fulldocs.js

@@ -0,0 +1,106 @@
+import { error } from '@sveltejs/kit';
+// for docs, create a /docs/[[slug]]/+page.svelte and +page.ts files
+// add this to +page.ts in the load function
+// return loadDocsPage(sections, slug);
+export function loadDocsPage(config) {
+    const { basepath = '/', rootName = 'Docs', sections, slug } = config;
+    const page = getPageFromSections(sections, slug);
+    if (!page) {
+        error(404, `Page not found for slug: ${slug}`);
+    }
+    return {
+        basepath,
+        rootName,
+        sections,
+        slug,
+        page
+    };
+}
+export function getPageFromSections(sections, slug) {
+    for (const section of sections) {
+        const page = getPageFromNavs(section.navs, slug);
+        if (page) {
+            return page;
+        }
+    }
+}
+export function getPageFromNavs(navs, slug) {
+    for (const nav of navs) {
+        if (nav.type === 'page' && nav.slug === slug) {
+            return nav;
+        }
+        else if (nav.type === 'folding-section') {
+            const page = getPageFromNavs(nav.navs, slug);
+            if (page) {
+                return page;
+            }
+        }
+        else if (nav.type === 'sub-section') {
+            const page = getPageFromSections(nav.sections, slug);
+            if (page) {
+                return page;
+            }
+        }
+    }
+}
+// returns the chain of sub-sections that need to be opened to reach the page
+// with the given slug, e.g. [subSectionA, subSectionB] means subSectionA is
+// open, and within it, subSectionB is open. returns undefined if the slug
+// isn't found under the given sections.
+export function getSubSectionPathForSlug(sections, slug) {
+    for (const section of sections) {
+        const path = getSubSectionPathForSlugInNavs(section.navs, slug);
+        if (path) {
+            return path;
+        }
+    }
+}
+function getSubSectionPathForSlugInNavs(navs, slug) {
+    for (const nav of navs) {
+        if (nav.type === 'page' && nav.slug === slug) {
+            return [];
+        }
+        else if (nav.type === 'folding-section') {
+            const path = getSubSectionPathForSlugInNavs(nav.navs, slug);
+            if (path) {
+                return path;
+            }
+        }
+        else if (nav.type === 'sub-section') {
+            const path = getSubSectionPathForSlug(nav.sections, slug);
+            if (path) {
+                return [nav, ...path];
+            }
+        }
+    }
+}
+// returns the slug of the first page found (in traversal order) under the
+// given sections. used to know where a sub-section link or breadcrumb item
+// should navigate to.
+export function getFirstPageSlug(sections) {
+    for (const section of sections) {
+        const slug = getFirstPageSlugInNavs(section.navs);
+        if (slug !== undefined) {
+            return slug;
+        }
+    }
+}
+function getFirstPageSlugInNavs(navs) {
+    for (const nav of navs) {
+        if (nav.type === 'page') {
+            return nav.slug;
+        }
+        else if (nav.type === 'folding-section') {
+            const slug = getFirstPageSlugInNavs(nav.navs);
+            if (slug !== undefined) {
+                return slug;
+            }
+        }
+        else if (nav.type === 'sub-section') {
+            const slug = getFirstPageSlug(nav.sections);
+            if (slug !== undefined) {
+                return slug;
+            }
+        }
+    }
+}

package/dist/marketing/Docs/types.d.ts

@@ -0,0 +1,23 @@
+import type { Component } from 'svelte';
+export interface NavSectionConfig {
+    name?: string;
+    navs: NavConfig[];
+}
+export type NavConfig = NavPageConfig | NavFoldingSectionConfig | NavSubSectionConfig;
+export interface NavPageConfig {
+    type: 'page';
+    name: string;
+    slug: string;
+    content: Component;
+    wide?: boolean;
+}
+export interface NavFoldingSectionConfig {
+    type: 'folding-section';
+    name: string;
+    navs: NavConfig[];
+}
+export interface NavSubSectionConfig {
+    type: 'sub-section';
+    name: string;
+    sections: NavSectionConfig[];
+}

package/dist/marketing/Docs/types.js

@@ -0,0 +1 @@
+export {};

package/dist/marketing/index.d.ts

@@ -2,12 +2,9 @@ export { default as Accordion } from './DetailsAccordion/DetailsAccordion.svelte
 export { default as Header } from './Header/Header.svelte';
 export { default as Container } from './Container/Container.svelte';
 export { default as Docs } from './Docs/Docs.svelte';
-export { default as DocsNav } from './Docs/Nav/Nav.svelte';
-export { default as DocsNavItem } from './Docs/Nav/NavItem.svelte';
-export { default as DocsNavCategory } from './Docs/Nav/NavCategory.svelte';
-export { default as DocsContent } from './Docs/Content/Content.svelte';
-export { default as DocsImage } from './Docs/Content/DocsImage.svelte';
+export { default as DocsImage } from './Docs/DocsImage.svelte';
+export { loadDocsPage } from './Docs/fulldocs.js';
+export type { NavSectionConfig, NavConfig, NavPageConfig, NavFoldingSectionConfig, NavSubSectionConfig } from './Docs/types.js';
 export { default as Footer } from './Footer/Footer.svelte';
 export { default as FooterLinkList } from './Footer/FooterLinkList.svelte';
 export { default as Document } from './Document/Document.svelte';
-export { default as track } from './track/track.js';

package/dist/marketing/index.js

@@ -2,12 +2,8 @@ export { default as Accordion } from './DetailsAccordion/DetailsAccordion.svelte
 export { default as Header } from './Header/Header.svelte';
 export { default as Container } from './Container/Container.svelte';
 export { default as Docs } from './Docs/Docs.svelte';
-export { default as DocsNav } from './Docs/Nav/Nav.svelte';
-export { default as DocsNavItem } from './Docs/Nav/NavItem.svelte';
-export { default as DocsNavCategory } from './Docs/Nav/NavCategory.svelte';
-export { default as DocsContent } from './Docs/Content/Content.svelte';
-export { default as DocsImage } from './Docs/Content/DocsImage.svelte';
+export { default as DocsImage } from './Docs/DocsImage.svelte';
+export { loadDocsPage } from './Docs/fulldocs.js';
 export { default as Footer } from './Footer/Footer.svelte';
 export { default as FooterLinkList } from './Footer/FooterLinkList.svelte';
 export { default as Document } from './Document/Document.svelte';
-export { default as track } from './track/track.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hyvor/design",
-	"version": "2.0.18",
+	"version": "2.1.0",
 	"license": "MIT",
 	"private": false,
 	"repository": {
@@ -58,10 +58,9 @@
 		"vite": "^7.3"
 	},
 	"dependencies": {
+		"@apidevtools/json-schema-ref-parser": "^15.5.1",
 		"@fontsource/readex-pro": "^5.2.11",
 		"@hyvor/icons": "^1.1.1",
-		"@openpanel/sdk": "^1.0.4",
-		"@openpanel/web": "^1.0.7",
 		"deepmerge-ts": "^7.1.5",
 		"emojibase-data": "^17.0.0",
 		"intl-messageformat": "^11.1.2",

package/dist/marketing/Docs/Content/Content.svelte

@@ -1,181 +0,0 @@
-<script lang="ts">
-	import Box from '../../../components/Box/Box.svelte';
-	import { page } from '$app/stores';
-	import { onMount } from 'svelte';
-	interface Props {
-		children?: import('svelte').Snippet;
-	}
-
-	let { children }: Props = $props();
-
-	function linkifyHeadings() {
-		var hs = document.querySelectorAll('h2[id],h3[id],h4[id]');
-		for (var i = 0; i < hs.length; i++) {
-			var h = hs[i];
-
-			var icon = document.createElement('a');
-			icon.className = 'heading-anchor-link';
-			icon.innerHTML =
-				'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-link-45deg" viewBox="0 0 16 16"><path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/><path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/></svg>';
-			icon.tabIndex = -1;
-			h.appendChild(icon);
-
-			var id = h.getAttribute('id');
-			var link = document.createElement('a');
-			link.className = 'heading-anchor';
-			link.setAttribute('href', '#' + id);
-			link.innerHTML = h.innerHTML;
-			h.innerHTML = link.outerHTML;
-		}
-	}
-
-	onMount(() => {
-		const unsubscribe = page.subscribe(() => {
-			linkifyHeadings();
-		});
-
-		return () => {
-			unsubscribe();
-		};
-	});
-</script>
-
-<div class="content-wrap">
-	<Box>
-		<content>
-			{@render children?.()}
-		</content>
-	</Box>
-</div>
-
-<style>.content-wrap {
-  flex: 1;
-  padding: 25px 0;
-  margin: 0 15px;
-  min-width: 0;
-}
-
-content {
-  display: block;
-  padding: 30px 50px;
-}
-
-content :global(p),
-content :global(li) {
-  line-height: var(--line-height-content);
-}
-
-content :global(h1:first-child) {
-  margin-top: 0;
-  font-size: 36px;
-  font-weight: 600;
-  letter-spacing: -0.03em;
-  margin: 0 0 30px;
-  position: relative;
-  display: table;
-}
-content :global(h1:first-child):after {
-  position: absolute;
-  content: "";
-  bottom: -13px;
-  left: 0px;
-  width: 30%;
-  height: 3px;
-  background: var(--accent);
-  margin-top: 10px;
-}
-
-content :global(a:not(.no-link-color a)) {
-  color: var(--link);
-  text-decoration: underline;
-}
-
-content :global(li) {
-  margin-bottom: 8px;
-}
-
-content :global(ul) {
-  margin-top: 8px;
-}
-
-content :global(.table) {
-  margin: 20px 0;
-}
-
-content :global(code) {
-  font-size: 14px;
-  padding: 0.2em 0.4em;
-  display: inline-block;
-  background-color: #f4f2f0;
-  color: #905;
-  font-family: inherit;
-  border-radius: 4px;
-  line-height: normal;
-  font-weight: 400;
-}
-
-:global(:root.dark) content :global(code) {
-  background-color: #282c34;
-  color: #e06c75;
-}
-
-content :global(a.heading-anchor-link) {
-  position: absolute;
-  right: 100%;
-  margin-right: 7px;
-  opacity: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  display: inline-flex;
-  align-items: center;
-}
-
-content :global(h1),
-content :global(h2),
-content :global(h3),
-content :global(h4),
-content :global(h5),
-content :global(h6) {
-  position: relative;
-  margin: 20px 0;
-}
-content :global(h1) {
-  font-size: 2em;
-}
-content :global(h2) {
-  font-size: 1.5em;
-}
-content :global(h3) {
-  font-size: 1.3em;
-}
-content :global(h4) {
-  font-size: 1.2em;
-}
-content :global(h5) {
-  font-size: 1.1em;
-}
-content :global(h6) {
-  font-size: 1em;
-}
-
-content :global(.heading-anchor:hover + .heading-anchor-link) {
-  opacity: 1;
-}
-content :global(h2 a:not(.heading-anchor-link)),
-content :global(h3 a:not(.heading-anchor-link)),
-content :global(h4 a:not(.heading-anchor-link)),
-content :global(h5 a:not(.heading-anchor-link)),
-content :global(h6 a:not(.heading-anchor-link)) {
-  text-decoration: none;
-  color: inherit;
-}
-
-@media (max-width: 992px) {
-  .content-wrap {
-    padding-top: 0;
-    order: 2;
-  }
-  content {
-    padding: 20px 25px;
-  }
-}</style>

package/dist/marketing/Docs/Content/Content.svelte.d.ts

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