@hyvor/design 0.0.52 → 0.0.53

package/dist/components/Internationalization/InternationalizationProvider.svelte

@@ -1,6 +1,8 @@
-<script>import { onMount, setContext } from "svelte";
-onMount(() => {
-  setContext("i18n", "not set");
-});
+<script>import { setContext } from "svelte";
+import { InternationalizationService } from "./i18n.js";
+export let languages;
+const i18n = new InternationalizationService(languages);
+setContext("i18n", i18n);
 </script>
 
+<slot />

package/dist/components/Internationalization/InternationalizationProvider.svelte.d.ts

@@ -1,10 +1,15 @@
 import { SvelteComponent } from "svelte";
+import { type Language } from "./i18n.js";
 declare const __propDef: {
-    props: Record<string, never>;
+    props: {
+        languages: Language[];
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
 export type InternationalizationProviderProps = typeof __propDef.props;
 export type InternationalizationProviderEvents = typeof __propDef.events;

package/dist/components/Internationalization/LanguageToggle.svelte

@@ -1,43 +1,63 @@
-<script>import IconButton from "./../IconButton/IconButton.svelte";
-import Box from "../Box/Box.svelte";
-import { IconCaretUp } from "@hyvor/icons";
-import { page } from "$app/stores";
-const i18n = $page.data.i18n;
+<script>import { getContext } from "svelte";
+import Dropdown from "../Dropdown/Dropdown.svelte";
+import Button from "../Button/Button.svelte";
+import {} from "./i18n.js";
+import ActionList from "../ActionList/ActionList.svelte";
+import ActionListItem from "../ActionList/ActionListItem.svelte";
+import Text from "../Text/Text.svelte";
+import { IconCaretDown } from "@hyvor/icons";
+import IconButton from "../IconButton/IconButton.svelte";
+export let position = "bottom";
+export let align = "start";
+export let caret = IconCaretDown;
+export let icon = false;
+export let size = "medium";
+const i18n = getContext("i18n");
+const currentLanguage = i18n ? i18n.localeLanguage : void 0;
+let show = false;
+function handleClick(language) {
+  i18n.setLocale(language.code);
+  show = false;
+}
 </script>
 
 
-{#if i18n}
-    <div class="language-toggle">
-        <span class="current">
-            <span class="flag">🇫🇷</span>
-            <span class="name">Français (France)</span>
-            <span class="icon"><IconCaretUp size={14} /></span>
+{#if i18n && $currentLanguage}
+
+    <Dropdown bind:show={show} {position} {align}>
+        <span slot="trigger">
+            {#if icon}
+                <IconButton color="input" {size}>
+                    {$currentLanguage.flag}
+                </IconButton>
+            {:else}
+                <Button color="input" {size}>
+                    <span slot="start">{$currentLanguage.flag}</span>
+                    {$currentLanguage.name}
+                    <svelte:component slot="end" this={caret} size={12} />
+                </Button>
+            {/if}
         </span>
-    </div>
+        <ActionList slot="content">
+            {#each i18n.languages as language (language.code)}
+                <ActionListItem on:click={() => handleClick(language)}>
+                    <span class="flag" slot="start">{language.flag}</span>
+                    <span class="name">
+                        {language.name}
+                    </span>
+                    <Text small light>
+                        {language.region}
+                    </Text>
+                </ActionListItem>
+            {/each}
+        </ActionList>
+    </Dropdown>
+    
 {/if}
 
 <style>
-    .current {
-        padding: 4px 15px;
-        font-size: 15px;
-        display: flex;
-        align-items: center;
-        cursor: pointer;
-        box-shadow: var(--box-shadow);
-        border-radius: var(--box-radius);
-        background-color: var(--box-background);
-        transition: .2s box-shadow;
-    }
-    .current:hover {
-        box-shadow: var(--box-shadow-dark);
-    }
     .flag {
         margin-right: 6px;
         font-size: 20px;
     }
-    .icon {
-        margin-left: 8px;
-        display: inline-flex;
-        align-items: center;
-    }
 </style>

package/dist/components/Internationalization/LanguageToggle.svelte.d.ts

@@ -1,6 +1,14 @@
 import { SvelteComponent } from "svelte";
+import { type ComponentProps, type ComponentType } from "svelte";
+import Dropdown from "../Dropdown/Dropdown.svelte";
 declare const __propDef: {
-    props: Record<string, never>;
+    props: {
+        position?: ComponentProps<Dropdown>['position'];
+        align?: ComponentProps<Dropdown>['align'];
+        caret?: ComponentType | undefined;
+        icon?: boolean | undefined;
+        size?: "small" | "medium" | undefined;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/Internationalization/T.svelte

@@ -1,5 +1,97 @@
-<script>import { page } from "$app/stores";
-console.log("T", $page.data);
+<script>import { getContext, onMount, tick, afterUpdate } from "svelte";
+import { getStringByKey, InternationalizationService } from "./i18n.js";
+import { IntlMessageFormat } from "intl-messageformat";
+import { browser } from "$app/environment";
+export let key;
+export let params = {};
+let hasComponentParams = false;
+function getParamsForBackend() {
+  let retParams = {};
+  for (let [key2, value] of Object.entries(params)) {
+    let newValue;
+    if (typeof value === "object" && value !== null && value.hasOwnProperty("component")) {
+      newValue = (chunks) => {
+        const children = typeof chunks === "string" ? chunks : chunks.join("");
+        return children;
+      };
+      hasComponentParams = true;
+    } else {
+      newValue = value;
+    }
+    retParams[key2] = newValue;
+  }
+  return retParams;
+}
+const componentBindings = /* @__PURE__ */ new Map();
+function getParamsForFrontend() {
+  let retParams = {};
+  for (let [key2, value] of Object.entries(params)) {
+    let newValue;
+    if (typeof value === "object" && value !== null && value.hasOwnProperty("component")) {
+      const { component, props } = value;
+      newValue = (chunks) => {
+        const children = typeof chunks === "string" ? chunks : chunks.join("");
+        const id = key2 + "-" + Math.random().toString(36).substring(7) + "-" + Date.now().toString();
+        componentBindings.set(id, {
+          component,
+          props: {
+            ...props,
+            children
+          }
+        });
+        return '<span id="' + id + '">' + children + "</span>";
+      };
+    } else {
+      newValue = value;
+    }
+    retParams[key2] = newValue;
+  }
+  return retParams;
+}
+const i18n = getContext("i18n");
+const locale = i18n.locale;
+const strings = i18n.strings;
+let message = getMessage(getParamsForBackend());
+function getMessage(processedParams) {
+  const string = getStringByKey($strings, key);
+  if (string) {
+    const formatter = new IntlMessageFormat(string, $locale);
+    return formatter.format(processedParams);
+  }
+  return "";
+}
+function bindComponents() {
+  for (let [id, binding] of componentBindings) {
+    const el = document.getElementById(id);
+    if (el) {
+      el.innerHTML = "";
+      new binding.component({
+        target: el,
+        hydrate: true,
+        props: binding.props
+      });
+    }
+  }
+}
+async function renderFrontend() {
+  message = getMessage(getParamsForFrontend());
+  await tick();
+  if (hasComponentParams)
+    bindComponents();
+}
+let mounted = false;
+$: {
+  $locale, $strings, params;
+  if (browser && mounted) {
+    renderFrontend();
+  }
+}
+onMount(async () => {
+  mounted = true;
+  if (hasComponentParams) {
+    renderFrontend();
+  }
+});
 </script>
 
-{ $page.data.lang.home.title }
+{@html message}

package/dist/components/Internationalization/T.svelte.d.ts

@@ -1,6 +1,14 @@
 import { SvelteComponent } from "svelte";
+import { type ComponentType } from "svelte";
+import { type PrimitiveType } from 'intl-messageformat';
 declare const __propDef: {
-    props: Record<string, never>;
+    props: {
+        key: string;
+        params?: Record<string, {
+            component: ComponentType;
+            props?: Record<string, any> | undefined;
+        } | PrimitiveType> | undefined;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/Internationalization/i18n.d.ts

@@ -1,18 +1,33 @@
-type LoaderType = () => Promise<any>;
-interface Language {
-    code: string;
+/// <reference types="svelte" />
+import { type Readable, type Writable } from "svelte/store";
+export type i18nLoaderType = () => Promise<any>;
+interface LanguageBase {
     name: string;
-    loader: LoaderType;
-    default: boolean;
+    flag: string;
+    region: string;
+    code: string;
+    default?: boolean;
+}
+interface LanguageWithStrings extends LanguageBase {
+    strings: Record<string, any>;
+}
+interface LanguageWithLoader extends LanguageBase {
+    loader: i18nLoaderType;
 }
-export declare class i18n {
-    private current;
-    private languages;
-    constructor(current: string);
-    register(code: string, name: string, loader: LoaderType, isDefault?: boolean): void;
+export type Language = LanguageWithStrings | LanguageWithLoader;
+export declare class InternationalizationService {
+    languages: LanguageWithLoader[];
+    locale: Writable<string>;
+    localeLanguage: Readable<LanguageWithLoader>;
+    strings: Writable<{}>;
+    stringsCache: Map<string, Record<string, any>>;
+    defaultStrings: Record<string, any>;
+    constructor(languages: Language[]);
+    setStrings(code: string): void;
+    setLocale(code: string): void;
+    register(language: Language): void;
     found(code: string): boolean;
-    languageByCode(code: string): Language | undefined;
-    getCurrent(): Language | undefined;
-    load(code: string): Promise<any>;
+    languageByCode(code: string): LanguageWithLoader | undefined;
 }
+export declare function getStringByKey(messages: Record<string, any>, key: string): string | undefined;
 export {};

package/dist/components/Internationalization/i18n.js

@@ -1,15 +1,54 @@
-export class i18n {
-    current;
+import { deepmerge } from "deepmerge-ts";
+import { writable, derived } from "svelte/store";
+export class InternationalizationService {
     languages = [];
-    constructor(current) {
-        this.current = current;
+    locale;
+    localeLanguage;
+    strings = writable({});
+    stringsCache = new Map();
+    defaultStrings;
+    constructor(languages) {
+        const defaultLanguage = languages.find(l => l.default);
+        if (!defaultLanguage) {
+            throw new Error('Default language not found');
+        }
+        const defaultStrings = defaultLanguage.strings || null;
+        if (!defaultStrings) {
+            throw new Error('Default strings not found for the default language');
+        }
+        this.locale = writable(defaultLanguage.code);
+        this.localeLanguage = derived(this.locale, $locale => this.languageByCode($locale));
+        this.defaultStrings = defaultStrings;
+        this.strings.set(this.defaultStrings);
+        this.stringsCache.set(defaultLanguage.code, this.defaultStrings);
+        for (const language of languages) {
+            this.register(language);
+        }
     }
-    register(code, name, loader, isDefault = false) {
+    setStrings(code) {
+        const defaultStrings = this.defaultStrings;
+        const strings = this.stringsCache.get(code) || {};
+        const merged = deepmerge(defaultStrings, strings);
+        this.strings.set(merged);
+    }
+    setLocale(code) {
+        this.locale.set(code);
+        if (this.stringsCache.has(code)) {
+            this.setStrings(code);
+        }
+        else {
+            this.languageByCode(code)?.loader().then(({ default: strings }) => {
+                this.stringsCache.set(code, strings);
+                this.setStrings(code);
+            });
+        }
+    }
+    register(language) {
         this.languages.push({
-            code,
-            name,
-            loader,
-            default: isDefault
+            ...language,
+            loader: language.hasOwnProperty('strings') ?
+                () => Promise.resolve(language.strings) :
+                language.loader,
         });
     }
     found(code) {
@@ -18,10 +57,17 @@ export class i18n {
     languageByCode(code) {
         return this.languages.find(l => l.code === code);
     }
-    getCurrent() {
-        return this.languageByCode(this.current);
-    }
-    async load(code) {
-        return (await this.languageByCode(code)?.loader()).default;
+}
+export function getStringByKey(messages, key) {
+    const keys = key.split('.');
+    let value = messages;
+    for (const key of keys) {
+        if (value && typeof value === 'object' && key in value) {
+            value = value[key];
+        }
+        else {
+            return undefined; // Key not found or value is not an object
+        }
     }
+    return value;
 }

package/dist/components/index.d.ts

@@ -41,3 +41,7 @@ export { default as toast } from './Toast/toast.js';
 export { default as Tooltip } from './Tooltip/Tooltip.svelte';
 export { default as IconMessage } from './IconMessage/IconMessage.svelte';
 export { clickOutside } from './directives/clickOutside.js';
+export { default as InternationalizationProvider } from './Internationalization/InternationalizationProvider.svelte';
+export { default as LanguageToggle } from './Internationalization/LanguageToggle.svelte';
+export { default as T } from './Internationalization/T.svelte';
+export { type Language as InternationalizationLanguage, InternationalizationService } from './Internationalization/i18n.js';

package/dist/components/index.js

@@ -42,3 +42,8 @@ export { default as Tooltip } from './Tooltip/Tooltip.svelte';
 export { default as IconMessage } from './IconMessage/IconMessage.svelte';
 // directives
 export { clickOutside } from './directives/clickOutside.js';
+// i18n
+export { default as InternationalizationProvider } from './Internationalization/InternationalizationProvider.svelte';
+export { default as LanguageToggle } from './Internationalization/LanguageToggle.svelte';
+export { default as T } from './Internationalization/T.svelte';
+export { InternationalizationService } from './Internationalization/i18n.js';

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

@@ -52,7 +52,7 @@ content :global(p), content :global(li) {
   line-height: var(--line-height-content);
 }
 
-content :global(h1) {
+content :global(h1:first-child) {
   margin-top: 0;
   font-size: 36px;
   font-weight: 600;
@@ -61,8 +61,7 @@ content :global(h1) {
   position: relative;
   display: table;
 }
-
-content :global(h1::after) {
+content :global(h1:first-child):after {
   position: absolute;
   content: "";
   bottom: -13px;
@@ -114,12 +113,32 @@ content :global(a.heading-anchor-link) {
   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) {

package/dist/marketing/Docs/Toc.svelte

@@ -14,7 +14,8 @@ onMount(() => {
     orderedList: false,
     hasInnerContainers: true,
     headingsOffset: 75,
-    scrollSmooth: true
+    scrollSmooth: true,
+    scrollSmoothOffset: -75
   });
 });
 afterNavigate(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hyvor/design",
-	"version": "0.0.52",
+	"version": "0.0.53",
 	"license": "MIT",
 	"private": false,
 	"scripts": {
@@ -46,7 +46,11 @@
 	"dependencies": {
 		"@fontsource/readex-pro": "^5.0.8",
 		"@hyvor/icons": "^0.0.3",
+		"deepmerge-ts": "^5.1.0",
 		"highlight.js": "^11.9.0",
+		"i": "^0.3.7",
+		"intl-messageformat": "^10.5.11",
+		"npm": "^10.4.0",
 		"svelte-awesome-color-picker": "^3.0.4",
 		"tocbot": "^4.25.0"
 	},