tera-system-ui 0.0.21 → 0.0.22

package/dist/components/avatar/Avatar.d.ts

@@ -0,0 +1,82 @@
+import { type VariantProps } from "tailwind-variants";
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    border: {
+        true: string;
+    };
+}, undefined, "relative rounded-full object-cover bg-primary-token-1 select-none grid place-content-center leading-none font-bold overflow-clip hover:brightness-90", import("tailwind-variants/dist/config").TVConfig<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    border: {
+        true: string;
+    };
+}, {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    border: {
+        true: string;
+    };
+}>, {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    border: {
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    border: {
+        true: string;
+    };
+}, undefined, "relative rounded-full object-cover bg-primary-token-1 select-none grid place-content-center leading-none font-bold overflow-clip hover:brightness-90", import("tailwind-variants/dist/config").TVConfig<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    border: {
+        true: string;
+    };
+}, {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    border: {
+        true: string;
+    };
+}>, unknown, unknown, undefined>>;
+type AvatarVariants = VariantProps<typeof styles>;
+export interface AvatarProps extends AvatarVariants {
+    children?: any;
+    class?: string;
+    alt?: string;
+    src?: string;
+    ref?: any;
+    userUid?: string;
+}
+export {};

package/dist/components/avatar/Avatar.js

@@ -0,0 +1,35 @@
+import { tv } from "tailwind-variants";
+export const styles = tv({
+    base: 'relative rounded-full object-cover bg-primary-token-1 select-none grid place-content-center leading-none font-bold overflow-clip hover:brightness-90',
+    variants: {
+        size: {
+            sm: 'size-8 text-xs',
+            md: 'size-10 text-sm',
+            lg: 'size-12 font-bold',
+            xl: 'size-16 text-xl font-bold',
+        },
+        border: {
+            true: 'border-[4px] border-primary-token-6'
+        }
+    },
+    compoundVariants: [
+        {
+            size: 'sm',
+            border: true,
+            class: 'border-[2px]'
+        },
+        {
+            size: ['md', 'lg'],
+            border: true,
+            class: 'border-[3px]'
+        },
+        {
+            size: ['xl'],
+            border: true,
+            class: 'border-[4px]'
+        }
+    ],
+    defaultVariants: {
+        size: 'md',
+    },
+});

package/dist/components/avatar/Avatar.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+    import {type AvatarProps, styles} from "./Avatar";
+    import {getUserAvatarUrl} from "../../internal/service/user.service";
+    import {cn} from "../../utils/utils";
+
+    let {
+        children,
+        alt = 'Avatar',
+        size = 'md',
+        src,
+        class: className,
+        border = true,
+        ref = $bindable(),
+        userUid,
+        ...props
+    }: AvatarProps = $props();
+
+    let isError = $state()
+
+    function handleErrorImage() {
+        isError = true
+    }
+
+    let imgUrl = src ? src : userUid ? getUserAvatarUrl(userUid) : undefined
+</script>
+
+<div bind:this={ref}
+     class={styles({ size, className, border })} {...props}>
+    {#if imgUrl && !isError}
+        <img src={imgUrl} alt={alt} onerror={handleErrorImage} class="w-full h-full object-cover"/>
+    {:else}
+        <span class="leading-none">
+            {@render children?.()}
+        </span>
+    {/if}
+    <div class={
+        cn("absolute inset-[0px] border-[2px] border-neutral-token-2 rounded-full", {
+            'border-[3px]' : size === 'lg' || size === 'xl',
+        })
+    }>
+
+    </div>
+</div>

package/dist/components/avatar/Avatar.svelte.d.ts

@@ -0,0 +1,3 @@
+import { type AvatarProps } from "./Avatar";
+declare const Avatar: import("svelte").Component<AvatarProps, {}, "ref">;
+export default Avatar;

package/dist/components/avatar/index.d.ts

@@ -0,0 +1 @@
+export { default as Avatar } from './Avatar.svelte';

package/dist/components/avatar/index.js

@@ -0,0 +1 @@
+export { default as Avatar } from './Avatar.svelte';

package/dist/components/dropdown-menu/DropdownMenu.d.ts

@@ -0,0 +1,22 @@
+import { type VariantProps } from "tailwind-variants";
+export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "", import("tailwind-variants/dist/config").TVConfig<{}, {}>, {}, undefined, import("tailwind-variants").TVReturnType<{}, undefined, "", import("tailwind-variants/dist/config").TVConfig<{}, {}>, unknown, unknown, undefined>>;
+type DropdownMenuVariants = VariantProps<typeof styles>;
+export interface DropdownMenuProps extends DropdownMenuVariants {
+    children?: any;
+    class?: string;
+    triggerRef: any;
+    open?: boolean;
+}
+export type DropdownMenuContext = {
+    setOpen: (open: boolean) => void;
+    getOpen: () => boolean;
+};
+export declare function getCtx(): DropdownMenuContext;
+export declare function setCtx(context: DropdownMenuContext): void;
+export type DropdownMenuItemProps = {
+    children?: any;
+    class?: string;
+    onclick?: (e: any) => void;
+    href?: string;
+};
+export {};

package/dist/components/dropdown-menu/DropdownMenu.js

@@ -0,0 +1,15 @@
+import { tv } from "tailwind-variants";
+import { getContext, setContext } from "svelte";
+export const styles = tv({
+    base: '',
+    variants: {},
+    compoundVariants: [],
+    defaultVariants: {},
+});
+const CONTEXT_NAME = 'DropdownMenu';
+export function getCtx() {
+    return getContext(CONTEXT_NAME);
+}
+export function setCtx(context) {
+    setContext(CONTEXT_NAME, context);
+}

package/dist/components/dropdown-menu/components/DropdownMenu.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+    import {type DropdownMenuProps, setCtx} from "../DropdownMenu";
+    import {Popover} from "../../popover";
+
+    let {
+        children,
+        open = $bindable(),
+        triggerRef,
+
+        ...props
+    }: DropdownMenuProps = $props();
+
+    function setOpen(o: boolean) {
+        open = o;
+    }
+
+    setCtx({
+        setOpen,
+        getOpen: () => !!open
+    })
+
+</script>
+
+<Popover
+        triggerRef={triggerRef}
+        offset={4}
+        bind:open
+        class=""
+        flip="true"
+        role="menu"
+        {...props}
+>
+    {@render children?.()}
+</Popover>

package/dist/components/dropdown-menu/components/DropdownMenu.svelte.d.ts

@@ -0,0 +1,3 @@
+import { type DropdownMenuProps } from "../DropdownMenu";
+declare const DropdownMenu: import("svelte").Component<DropdownMenuProps, {}, "open">;
+export default DropdownMenu;

package/dist/components/dropdown-menu/components/DropdownMenuGroup.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+    import {cn} from "../../../utils/utils";
+
+    let {children, class: className, ...props} = $props()
+</script>
+
+<div class={cn('p-1', className)}
+     data-dropdown-menu-group
+     role="group"
+     {...props}>
+    {@render children?.()}
+</div>

package/dist/components/dropdown-menu/components/DropdownMenuGroup.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const DropdownMenuGroup: import("svelte").Component<{
+    children: unknown;
+    class: unknown;
+} & Record<string, unknown>, {}, "">;
+export default DropdownMenuGroup;

package/dist/components/dropdown-menu/components/DropdownMenuHeader.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+    import {cn} from "../../../utils/utils";
+
+    let {children, class: className, ...props} = $props()
+</script>
+
+<div class={cn('px-3 py-1.5 font-semibold', className)}
+     data-dropdown-menu-header
+     role="group"
+     {...props}>
+    {@render children?.()}
+</div>

package/dist/components/dropdown-menu/components/DropdownMenuHeader.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const DropdownMenuHeader: import("svelte").Component<{
+    children: unknown;
+    class: unknown;
+} & Record<string, unknown>, {}, "">;
+export default DropdownMenuHeader;

package/dist/components/dropdown-menu/components/DropdownMenuItem.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+    import {type DropdownMenuItemProps, getCtx} from "../DropdownMenu";
+    import {cn} from "../../../utils/utils";
+
+
+    let {children, class: className, onclick, href, ...props}: DropdownMenuItemProps = $props()
+    let context = getCtx()
+</script>
+
+{#snippet button()}
+    <button
+            onclick={(e) => {
+            onclick?.(e)
+            context?.setOpen(false)
+        }}
+            role="menuitem"
+            data-dropdown-menu-item
+            class={cn('flex w-full items-center gap-2 px-2 py-2 rounded hover:bg-neutral-token-4 transition-all', className)}
+            {...props}>
+        {@render children?.()}
+    </button>
+{/snippet}
+
+{#if href}
+    <a href={href}>
+        {@render button()}
+    </a>
+{:else }
+    {@render button()}
+{/if}

package/dist/components/dropdown-menu/components/DropdownMenuItem.svelte.d.ts

@@ -0,0 +1,3 @@
+import { type DropdownMenuItemProps } from "../DropdownMenu";
+declare const DropdownMenuItem: import("svelte").Component<DropdownMenuItemProps, {}, "">;
+export default DropdownMenuItem;

package/dist/components/dropdown-menu/components/DropdownMenuSeparator.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+    import {cn} from "../../../utils/utils";
+
+    let {children, class: className, ...props} = $props()
+</script>
+
+<div class={cn('border-b w-full', className)}
+     data-dropdown-menu-separator
+     {...props}>
+
+</div>

package/dist/components/dropdown-menu/components/DropdownMenuSeparator.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const DropdownMenuSeparator: import("svelte").Component<{
+    children: unknown;
+    class: unknown;
+} & Record<string, unknown>, {}, "">;
+export default DropdownMenuSeparator;

package/dist/components/dropdown-menu/index.d.ts

@@ -0,0 +1,5 @@
+export { default as DropdownMenu } from './components/DropdownMenu.svelte';
+export { default as DropdownMenuItem } from './components/DropdownMenuItem.svelte';
+export { default as DropdownMenuGroup } from './components/DropdownMenuGroup.svelte';
+export { default as DropdownMenuHeader } from './components/DropdownMenuHeader.svelte';
+export { default as DropdownMenuSeparator } from './components/DropdownMenuSeparator.svelte';

package/dist/components/dropdown-menu/index.js

@@ -0,0 +1,5 @@
+export { default as DropdownMenu } from './components/DropdownMenu.svelte';
+export { default as DropdownMenuItem } from './components/DropdownMenuItem.svelte';
+export { default as DropdownMenuGroup } from './components/DropdownMenuGroup.svelte';
+export { default as DropdownMenuHeader } from './components/DropdownMenuHeader.svelte';
+export { default as DropdownMenuSeparator } from './components/DropdownMenuSeparator.svelte';

package/dist/components/icons/IconLogout.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    import {type IconsProps, styles} from "./Icons";
+    import {IconLogout} from "@tabler/icons-svelte";
+
+    let {children, ...props}: IconsProps = $props();
+
+</script>
+
+<IconLogout class={styles({...props})}/>
+

package/dist/components/icons/IconLogout.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type IconsProps } from "./Icons";
+import { IconLogout } from "@tabler/icons-svelte";
+declare const IconLogout: import("svelte").Component<IconsProps, {}, "">;
+export default IconLogout;

package/dist/components/icons/IconSettings.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    import {type IconsProps, styles} from "./Icons";
+    import {IconSettings} from "@tabler/icons-svelte";
+
+    let {children, ...props}: IconsProps = $props();
+
+</script>
+
+<IconSettings class={styles({...props})}/>
+

package/dist/components/icons/IconSettings.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type IconsProps } from "./Icons";
+import { IconSettings } from "@tabler/icons-svelte";
+declare const IconSettings: import("svelte").Component<IconsProps, {}, "">;
+export default IconSettings;

package/dist/components/icons/index.d.ts

@@ -9,9 +9,11 @@ export { default as IconCopyCheckFilled } from './IconCopyCheckFilled.svelte';
 export { default as IconHamburger } from './IconHamburger.svelte';
 export { default as IconLanguage } from './IconLanguage.svelte';
 export { default as IconLoader2 } from './IconLoader2.svelte';
+export { default as IconLogout } from './IconLogout.svelte';
 export { default as IconMoon } from './IconMoon.svelte';
 export { default as IconPointFilled } from './IconPointFilled.svelte';
 export { default as IconSearch } from './IconSearch.svelte';
+export { default as IconSettings } from './IconSettings.svelte';
 export { default as IconSun } from './IconSun.svelte';
 export { default as IconSwitchHorizontal } from './IconSwitchHorizontal.svelte';
 export { default as IconSwitchVertical } from './IconSwitchVertical.svelte';

package/dist/components/icons/index.js

@@ -9,9 +9,11 @@ export { default as IconCopyCheckFilled } from './IconCopyCheckFilled.svelte';
 export { default as IconHamburger } from './IconHamburger.svelte';
 export { default as IconLanguage } from './IconLanguage.svelte';
 export { default as IconLoader2 } from './IconLoader2.svelte';
+export { default as IconLogout } from './IconLogout.svelte';
 export { default as IconMoon } from './IconMoon.svelte';
 export { default as IconPointFilled } from './IconPointFilled.svelte';
 export { default as IconSearch } from './IconSearch.svelte';
+export { default as IconSettings } from './IconSettings.svelte';
 export { default as IconSun } from './IconSun.svelte';
 export { default as IconSwitchHorizontal } from './IconSwitchHorizontal.svelte';
 export { default as IconSwitchVertical } from './IconSwitchVertical.svelte';

package/dist/components/popover/Popover.svelte

@@ -5,6 +5,7 @@
 
     import {clickOutside} from "../../actions/clickOutside"
     import {onDestroy, onMount} from "svelte";
+    import {circInOut} from "svelte/easing";
 
     let {
         children,
@@ -41,8 +42,10 @@
                 offset(offsetAmount),
                 size({
                     apply({rects, elements}) {
+                        console.log(elements.reference)
                         Object.assign(elements.floating.style, {
                             minWidth: `${rects.reference.width}px`,
+                            maxWidth: `${window.innerWidth - 16}px`,
                         });
                     },
                 }),
@@ -116,14 +119,36 @@
             cleanup?.()
         }
     })
+
+
+    function spin(node, {duration}) {
+        return {
+            duration,
+            css: (t) => {
+                const eased = circInOut(t);
+                return `
+                    transform-origin: 0% 0%;
+					transform: translateY(${eased * 10 - 10}px) scaleY(${eased * 0.05 + 0.95});
+					opacity: ${eased};
+				`
+
+            }
+        };
+    }
+
+
 </script>
 
 <!-- Popover Content -->
 {#if open}
     <div bind:this={popover}
+         data-open={open}
          class={cn("overflow-hidden absolute z-10 bg-neutral-token-1 shadow-2xl rounded-container border border-neutral-token-5", className)}
          use:clickOutside={{exceptElement: triggerRef}}
          onclick_outside={handleClickOutside}
+
+         in:spin={{ duration: 200 }}
+         out:spin={{ duration: 200 }}
          {...props}
     >
         <!--    <div bind:this={arrowElement} class="size-2 absolute rotate-45 bg-inherit"></div>-->
@@ -132,6 +157,3 @@
 {/if}
 
 
-<style>
-
-</style>

package/dist/components/tera-ui-context/TeraUiContext.d.ts

@@ -4,6 +4,7 @@ export type TeraUiContext = {
     supportLanguages?: AvailableLanguageTag[];
     language?: AvailableLanguageTag;
     sideNavHref?: string;
+    apiUrl?: string;
     isAstroEnv?: boolean;
 };
 export interface TeraUiContextProps extends TeraUiContext {

package/dist/components/user-avatar-with-menu/UserAvatarWithMenu.d.ts

@@ -0,0 +1,11 @@
+import { type VariantProps } from "tailwind-variants";
+import type { UserData } from "../../types/user-data";
+export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "", import("tailwind-variants/dist/config").TVConfig<{}, {}>, {}, undefined, import("tailwind-variants").TVReturnType<{}, undefined, "", import("tailwind-variants/dist/config").TVConfig<{}, {}>, unknown, unknown, undefined>>;
+type UserAvatarWithMenuVariants = VariantProps<typeof styles>;
+export interface UserAvatarWithMenuProps extends UserAvatarWithMenuVariants {
+    children?: any;
+    class?: string;
+    user?: UserData;
+    onLogout?: () => void;
+}
+export {};

package/dist/components/user-avatar-with-menu/UserAvatarWithMenu.js

@@ -0,0 +1,7 @@
+import { tv } from "tailwind-variants";
+export const styles = tv({
+    base: '',
+    variants: {},
+    compoundVariants: [],
+    defaultVariants: {},
+});

package/dist/components/user-avatar-with-menu/UserAvatarWithMenu.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+    import {type UserAvatarWithMenuProps} from "./UserAvatarWithMenu";
+    import {Avatar} from "../avatar";
+    import {
+        DropdownMenu,
+        DropdownMenuGroup,
+        DropdownMenuHeader,
+        DropdownMenuItem,
+        DropdownMenuSeparator
+    } from "../dropdown-menu";
+    import {IconLogout, IconSettings} from "../icons";
+    import {extractShortUsernameFromEmail} from "../../internal/service/user.service";
+
+    let {children, user, onLogout,...props}: UserAvatarWithMenuProps = $props();
+
+    let shortUserName = extractShortUsernameFromEmail(user.email)
+    let triggerRef = $state()
+    let open = $state(true)
+</script>
+
+
+{#if user}
+    <button bind:this={triggerRef}>
+        <Avatar
+            userUid={user.userUid}
+        >
+            {shortUserName}
+        </Avatar>
+    </button>
+
+    <DropdownMenu
+            bind:open
+            triggerRef={triggerRef}
+            class="!min-w-[14rem]"
+    >
+        <DropdownMenuHeader>
+            <div class="grid grid-cols-[auto,1fr] gap-2 overflow-hidden break-all items-center">
+                <Avatar border={false}
+                        size="lg"
+                        userUid={user.userUid}
+                >
+                    {shortUserName}
+                </Avatar>
+                {#if user.email}
+                    {user.email}
+                {/if}
+            </div>
+
+        </DropdownMenuHeader>
+        <DropdownMenuSeparator/>
+
+        <DropdownMenuGroup>
+            <DropdownMenuItem
+                href="/account-settings"
+            >
+                <IconSettings/>
+                Account Settings
+            </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator/>
+        <DropdownMenuGroup>
+            <DropdownMenuItem onclick={onLogout}>
+                <IconLogout/>
+                Logout
+            </DropdownMenuItem>
+        </DropdownMenuGroup>
+    </DropdownMenu>
+{/if}

package/dist/components/user-avatar-with-menu/UserAvatarWithMenu.svelte.d.ts

@@ -0,0 +1,3 @@
+import { type UserAvatarWithMenuProps } from "./UserAvatarWithMenu";
+declare const UserAvatarWithMenu: import("svelte").Component<UserAvatarWithMenuProps, {}, "">;
+export default UserAvatarWithMenu;

package/dist/components/user-avatar-with-menu/index.d.ts

@@ -0,0 +1 @@
+export { default as UserAvatarWithMenu } from './UserAvatarWithMenu.svelte';

package/dist/components/user-avatar-with-menu/index.js

@@ -0,0 +1 @@
+export { default as UserAvatarWithMenu } from './UserAvatarWithMenu.svelte';

package/dist/index.d.ts

@@ -1,10 +1,12 @@
+export { Avatar } from './components/avatar';
 export { BrandLogo } from './components/brand-logo';
 export { Button } from './components/button';
 export { Combobox } from './components/combobox';
 export { Command } from './components/command';
 export { Dialog, DialogAstro } from './components/dialog';
+export { DropdownMenu, DropdownMenuItem, DropdownMenuGroup, DropdownMenuHeader, DropdownMenuSeparator } from './components/dropdown-menu';
 export { Header } from './components/header';
-export { IconArrowBigRightFilled, IconBook, IconBookmarkPlus, IconCalculator, IconCheck, IconChevronDown, IconCopy, IconCopyCheckFilled, IconHamburger, IconLanguage, IconLoader2, IconMoon, IconPointFilled, IconSearch, IconSun, IconSwitchHorizontal, IconSwitchVertical, IconTransform, IconX } from './components/icons';
+export { IconArrowBigRightFilled, IconBook, IconBookmarkPlus, IconCalculator, IconCheck, IconChevronDown, IconCopy, IconCopyCheckFilled, IconHamburger, IconLanguage, IconLoader2, IconLogout, IconMoon, IconPointFilled, IconSearch, IconSettings, IconSun, IconSwitchHorizontal, IconSwitchVertical, IconTransform, IconX } from './components/icons';
 export { Input } from './components/input';
 export { LanguagePickerButton } from './components/language-picker-button';
 export { LightDarkToggle } from './components/light-dark-toggle';
@@ -12,3 +14,4 @@ export { Popover } from './components/popover';
 export { PopoverResponsive } from './components/popover-responsive';
 export { SideNavigation, SideNavigationLayout, toggleSideNavigation } from './components/side-navigation';
 export { TeraUiContext } from './components/tera-ui-context';
+export { UserAvatarWithMenu } from './components/user-avatar-with-menu';

package/dist/index.js

@@ -1,10 +1,12 @@
+export { Avatar } from './components/avatar';
 export { BrandLogo } from './components/brand-logo';
 export { Button } from './components/button';
 export { Combobox } from './components/combobox';
 export { Command } from './components/command';
 export { Dialog, DialogAstro } from './components/dialog';
+export { DropdownMenu, DropdownMenuItem, DropdownMenuGroup, DropdownMenuHeader, DropdownMenuSeparator } from './components/dropdown-menu';
 export { Header } from './components/header';
-export { IconArrowBigRightFilled, IconBook, IconBookmarkPlus, IconCalculator, IconCheck, IconChevronDown, IconCopy, IconCopyCheckFilled, IconHamburger, IconLanguage, IconLoader2, IconMoon, IconPointFilled, IconSearch, IconSun, IconSwitchHorizontal, IconSwitchVertical, IconTransform, IconX } from './components/icons';
+export { IconArrowBigRightFilled, IconBook, IconBookmarkPlus, IconCalculator, IconCheck, IconChevronDown, IconCopy, IconCopyCheckFilled, IconHamburger, IconLanguage, IconLoader2, IconLogout, IconMoon, IconPointFilled, IconSearch, IconSettings, IconSun, IconSwitchHorizontal, IconSwitchVertical, IconTransform, IconX } from './components/icons';
 export { Input } from './components/input';
 export { LanguagePickerButton } from './components/language-picker-button';
 export { LightDarkToggle } from './components/light-dark-toggle';
@@ -12,3 +14,4 @@ export { Popover } from './components/popover';
 export { PopoverResponsive } from './components/popover-responsive';
 export { SideNavigation, SideNavigationLayout, toggleSideNavigation } from './components/side-navigation';
 export { TeraUiContext } from './components/tera-ui-context';
+export { UserAvatarWithMenu } from './components/user-avatar-with-menu';

package/dist/internal/service/user.service.d.ts

@@ -0,0 +1,2 @@
+export declare function extractShortUsernameFromEmail(email: string): string;
+export declare function getUserAvatarUrl(userUid: string): string;

package/dist/internal/service/user.service.js

@@ -0,0 +1,20 @@
+import { getGlobalContext } from "../../components/tera-ui-context/global-context";
+export function extractShortUsernameFromEmail(email) {
+    if (!email || typeof email !== 'string') {
+        return '?';
+    }
+    // Extract the part before the '@' symbol
+    const usernamePart = email.split('@')[0];
+    // Replace any non-alphanumeric characters with a space and trim extra spaces
+    const cleanUsername = usernamePart.replace(/[^a-zA-Z0-9]/g, ' ').trim();
+    // Split the username into words and create an initialism
+    const words = cleanUsername.split(' ');
+    let shortForm = words.map(word => word[0]).join('');
+    // Ensure the result is between 1 to 4 characters
+    shortForm = shortForm.slice(0, 4).toUpperCase();
+    return shortForm || '?';
+}
+export function getUserAvatarUrl(userUid) {
+    let baseUrl = `${getGlobalContext().apiUrl || 'https://hoidap.xyz/api/v1'}/users`;
+    return `${baseUrl}/avatar/${encodeURI(userUid)}`;
+}

package/dist/types/user-data.d.ts

@@ -0,0 +1,31 @@
+export interface UserData {
+    displayName?: string;
+    profileImage?: any;
+    registerAt?: Date;
+    totalAnswer?: number;
+    totalQuestion?: number;
+    totalThanks?: number;
+    username?: string;
+    userUid?: string;
+    roleId?: string;
+    reputation?: string;
+    lastAccessDate?: string;
+    websiteUrl?: string;
+    location?: string;
+    aboutMe?: string;
+    views?: number;
+    upVotes?: number;
+    downVotes?: number;
+    passwordHash?: string;
+    mobile?: string;
+    email?: string;
+    data?: Map<any, any>;
+    jwtToken?: JwtToken;
+    userData?: string;
+    emailVerified?: boolean;
+    didResetPassword?: boolean;
+    language?: string;
+    suspended?: boolean;
+    registeredAtLocation?: string;
+    registeredFromSource?: string;
+}

package/dist/types/user-data.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tera-system-ui",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run package",
@@ -8,12 +8,13 @@
     "package": "svelte-kit sync && svelte-package && publint",
     "customPrepublish": "node ./scripts/prepublish.js",
     "postpublish": "node ./scripts/postpublish.js",
-    "prepublishOnly": "npm run lang-compile && npm run customPrepublish && npm run package",
+    "prepublishOnly": "npm run lang-compile && npm run customPrepublish && npm run generate-index && npm run package",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "lang-compile": "paraglide-js compile --project ./project.inlang --outdir ./src/lib/paraglide"
+    "lang-compile": "paraglide-js compile --project ./project.inlang --outdir ./src/lib/paraglide",
+    "generate-index": "node ./scripts/generate-ts-index.js"
   },
   "bin": {
     "ui": "./scripts/add-component-template.js",

package/scripts/add-component-template.js

@@ -1,4 +1,4 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 
 import fs from "fs";
 

package/scripts/generate-ts-index.js

@@ -44,8 +44,8 @@ function extractExportNames(filePath) {
     const exportNames = [];
 
     // Regular expressions to match the export names
-    const defaultExportRegex = /export\s*{\s*default\s+as\s+(\w+)/g;
-    const namedExportRegex = /export\s*{(\w+)\s*}/g;
+    const defaultExportRegex = /^(?!\s*\/\/)\s*export\s*{\s*default\s+as\s+(\w+)/gm;
+    const namedExportRegex = /^(?!\s*\/\/)\s*export\s*{(\w+)\s*}/gm;
 
     let match;
 
@@ -72,8 +72,9 @@ function extractExportNames(filePath) {
 function findFilesByPattern(folderPath, namePattern) {
     const result = [];
 
+    console.log(folderPath)
     function searchFolder(currentPath) {
-        const filesAndDirs = fs.readFileSync(currentPath);
+        const filesAndDirs = fs.readdirSync(currentPath);
 
         for (const item of filesAndDirs) {
             const itemPath = path.join(currentPath, item);
@@ -93,9 +94,10 @@ function findFilesByPattern(folderPath, namePattern) {
     return result;
 }
 
-const GLOBAL_INDEX_PATH = "../src/lib/index.ts"
-const COMPONENTS_PATH = "../src/lib/components"
-const ICON_COMPONENTS_PATH = "../src/lib/components/icons"
+const baseLib = './src/lib'
+const GLOBAL_INDEX_PATH = baseLib + "/index.ts"
+const COMPONENTS_PATH = baseLib + "/components"
+const ICON_COMPONENTS_PATH = baseLib + "/components/icons"
 
 const iconComponentsFileList = findFilesByPattern(ICON_COMPONENTS_PATH, /^Icon\w*\.svelte$/);