tera-system-ui 0.0.21 → 0.0.23

package/dist/components/text-area/TextArea.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+    import {type AutoSizeConfig, type TextAreaProps} from "./TextArea";
+    import {styles} from "./TextArea";
+    import {IconX} from "../icons";
+
+    let {
+        children,
+        class: className,
+        value = $bindable(),
+        ref = $bindable(),
+        size,
+        disabled,
+        variant = 'outlined',
+        autoSize,
+        onchange,
+        prefix,
+        rows,
+        allowClear,
+        ...props
+    }: TextAreaProps = $props();
+
+
+    function createAutoSizeTextarea(node: HTMLTextAreaElement, autoSize?: AutoSizeConfig) {
+        if (!autoSize) {
+            return
+        }
+        let minRows: number | null = null
+        let maxRows: number | null = null
+        if (autoSize === true) {
+            minRows = 1
+        } else {
+            minRows = Math.max(autoSize.minRows || 0, 1)
+            maxRows = autoSize.maxRows || null
+
+        }
+
+        const updateSize = () => {
+            node.style.height = 'auto';
+            const computedStyle = window.getComputedStyle(node);
+            const borderTopWidth = parseFloat(computedStyle.borderTopWidth);
+            const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth);
+            const offset = borderTopWidth + borderBottomWidth;
+            const scrollHeight = node.scrollHeight + 4
+
+            const lineHeight = parseFloat(computedStyle.lineHeight);
+            const minHeight = minRows * lineHeight + offset;
+            const maxHeight = maxRows ? maxRows * lineHeight : null;
+
+            node.style.height = `${Math.max(minHeight, Math.min(scrollHeight, maxHeight ?? scrollHeight))}px`;
+        };
+
+        $effect(() => {
+            // setup goes here
+            value
+            updateSize();
+
+            return () => {
+                // teardown goes here
+            };
+        });
+    }
+
+    function clearText() {
+        value = ''
+    }
+
+</script>
+
+<div class="relative">
+    <textarea
+            use:createAutoSizeTextarea={autoSize}
+            onchange={onchange}
+            bind:this={ref}
+            style={autoSize ? "resize: none;" : ''}
+            class={styles({ variant, disabled , size, className, allowClear })}
+            {disabled}
+            rows={autoSize ? 1 : rows}
+            {...props}
+            bind:value
+    >
+    </textarea>
+
+    {#if allowClear && value}
+        <button onclick={clearText}
+                class="absolute top-2 right-2 bg-neutral-token-6 text-neutral-token-1 hover:bg-neutral-token-8 size-3 grid place-content-center rounded-full">
+            <IconX class="size-2.5"/>
+        </button>
+    {/if}
+</div>

package/dist/components/text-area/TextArea.svelte.d.ts

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

package/dist/components/text-area/index.d.ts

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

package/dist/components/text-area/index.js

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

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(false)
+</script>
+
+
+{#if user}
+    <button class="rounded-full focus-visible:ring-0" 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,14 +1,20 @@
+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';
 export { Popover } from './components/popover';
 export { PopoverResponsive } from './components/popover-responsive';
 export { SideNavigation, SideNavigationLayout, toggleSideNavigation } from './components/side-navigation';
+export { Slider } from './components/slider';
+export { Tabs, TabsList, TabsItem, TabsContent } from './components/tabs';
 export { TeraUiContext } from './components/tera-ui-context';
+export { TextArea } from './components/text-area';
+export { UserAvatarWithMenu } from './components/user-avatar-with-menu';

package/dist/index.js

@@ -1,14 +1,20 @@
+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';
 export { Popover } from './components/popover';
 export { PopoverResponsive } from './components/popover-responsive';
 export { SideNavigation, SideNavigationLayout, toggleSideNavigation } from './components/side-navigation';
+export { Slider } from './components/slider';
+export { Tabs, TabsList, TabsItem, TabsContent } from './components/tabs';
 export { TeraUiContext } from './components/tera-ui-context';
+export { TextArea } from './components/text-area';
+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,19 +1,20 @@
 {
   "name": "tera-system-ui",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "scripts": {
     "dev": "vite dev",
-    "build": "vite build && npm run package",
+    "build": "npm run customPrepublish && npm run generate-index && vite build && npm run package && npm run postpublish",
     "preview": "vite preview",
     "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",
@@ -59,39 +60,39 @@
     "svelte": "^5.0.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.1",
-    "@storybook/addon-essentials": "^8.3.6",
-    "@storybook/addon-interactions": "^8.3.6",
-    "@storybook/addon-links": "^8.3.6",
+    "@chromatic-com/storybook": "^3.2.2",
+    "@storybook/addon-essentials": "^8.4.4",
+    "@storybook/addon-interactions": "^8.4.4",
+    "@storybook/addon-links": "^8.4.4",
     "@storybook/addon-styling": "^1.3.7",
     "@storybook/addon-svelte-csf": "^5.0.0-next.8",
-    "@storybook/addon-themes": "^8.3.6",
-    "@storybook/addon-viewport": "^8.3.6",
-    "@storybook/blocks": "^8.3.6",
-    "@storybook/svelte": "^8.3.6",
-    "@storybook/sveltekit": "^8.3.6",
-    "@storybook/test": "^8.3.6",
+    "@storybook/addon-themes": "^8.4.4",
+    "@storybook/addon-viewport": "^8.4.4",
+    "@storybook/blocks": "^8.4.4",
+    "@storybook/svelte": "^8.4.4",
+    "@storybook/sveltekit": "^8.4.4",
+    "@storybook/test": "^8.4.4",
     "@sveltejs/adapter-auto": "^3.3.1",
-    "@sveltejs/kit": "^2.7.3",
+    "@sveltejs/kit": "^2.8.1",
     "@sveltejs/package": "^2.3.7",
-    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "@sveltejs/vite-plugin-svelte": "^4.0.1",
     "npx": "^10.2.2",
     "publint": "^0.2.12",
-    "sass-embedded": "^1.80.5",
-    "storybook": "^8.3.6",
-    "svelte": "^5.1.6",
-    "svelte-check": "^4.0.5",
-    "tailwindcss": "^3.4.14",
+    "sass-embedded": "^1.81.0",
+    "storybook": "^8.4.4",
+    "svelte": "^5.2.1",
+    "svelte-check": "^4.0.8",
+    "tailwindcss": "^3.4.15",
     "typescript": "^5.6.3",
-    "vite": "^5.4.10"
+    "vite": "^5.4.11"
   },
   "dependencies": {
     "@floating-ui/dom": "^1.6.12",
     "@inlang/paraglide-sveltekit": "0.11.5",
-    "@tabler/icons-svelte": "^3.21.0",
+    "@tabler/icons-svelte": "^3.22.0",
     "clsx": "^2.1.1",
     "autoprefixer": "^10.4.20",
     "@inlang/paraglide-js": "1.11.3",
-    "tailwind-variants": "^0.2.1"
+    "tailwind-variants": "^0.3.0"
   }
 }

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$/);