@datalayer/core 0.0.16 → 0.0.18

package/lib/components/auth/Login.stories.d.ts

@@ -0,0 +1,54 @@
+import type { StoryObj } from '@storybook/react-vite';
+/**
+ * Login component provides a comprehensive authentication interface with multiple methods:
+ * - Email/password authentication
+ * - OAuth (GitHub, LinkedIn)
+ * - Direct token input
+ *
+ * The component includes form validation, loading states, and error handling.
+ */
+declare const meta: {
+    title: string;
+    component: (props: import("./Login").ILoginProps) => JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    decorators: ((Story: import("storybook/internal/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        heading?: string | undefined;
+        homeRoute: string;
+        loginRoute?: string | undefined;
+        joinRoute?: string | undefined;
+        joinConfirmRoute?: string | undefined;
+        passwordRoute?: string | undefined;
+        showEmailLogin?: boolean | undefined;
+        showGitHubLogin?: boolean | undefined;
+        showTokenLogin?: boolean | undefined;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * Default login form with all authentication methods enabled
+ */
+export declare const Default: Story;
+/**
+ * Login form with only email/password authentication
+ */
+export declare const EmailOnly: Story;
+/**
+ * Login form with only OAuth authentication
+ */
+export declare const OAuthOnly: Story;
+/**
+ * Login form with only token authentication
+ */
+export declare const TokenOnly: Story;
+/**
+ * Login form with custom heading
+ */
+export declare const CustomHeading: Story;
+/**
+ * Login form with all authentication methods including password reset link
+ */
+export declare const WithPasswordReset: Story;

package/lib/components/auth/Login.stories.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BrowserRouter } from 'react-router-dom';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { queryClient } from '../../utils/cli/query';
+import { Login } from './Login';
+/**
+ * Login component provides a comprehensive authentication interface with multiple methods:
+ * - Email/password authentication
+ * - OAuth (GitHub, LinkedIn)
+ * - Direct token input
+ *
+ * The component includes form validation, loading states, and error handling.
+ */
+const meta = {
+    title: 'Components/Auth/Login',
+    component: Login,
+    parameters: {
+        layout: 'fullscreen',
+    },
+    decorators: [
+        Story => (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(BrowserRouter, { children: _jsx(Story, {}) }) })),
+    ],
+    tags: ['autodocs'],
+};
+export default meta;
+/**
+ * Default login form with all authentication methods enabled
+ */
+export const Default = {
+    args: {
+        heading: 'Login to Datalayer',
+        homeRoute: '/home',
+        loginRoute: '/login',
+        showEmailLogin: true,
+        showGitHubLogin: true,
+        showTokenLogin: true,
+    },
+};
+/**
+ * Login form with only email/password authentication
+ */
+export const EmailOnly = {
+    args: {
+        heading: 'Login to Datalayer',
+        homeRoute: '/home',
+        loginRoute: '/login',
+        showEmailLogin: true,
+        showGitHubLogin: false,
+        showTokenLogin: false,
+    },
+};
+/**
+ * Login form with only OAuth authentication
+ */
+export const OAuthOnly = {
+    args: {
+        heading: 'Login to Datalayer',
+        homeRoute: '/home',
+        loginRoute: '/login',
+        showEmailLogin: false,
+        showGitHubLogin: true,
+        showTokenLogin: false,
+    },
+};
+/**
+ * Login form with only token authentication
+ */
+export const TokenOnly = {
+    args: {
+        heading: 'Login to Datalayer',
+        homeRoute: '/home',
+        loginRoute: '/login',
+        showEmailLogin: false,
+        showGitHubLogin: false,
+        showTokenLogin: true,
+    },
+};
+/**
+ * Login form with custom heading
+ */
+export const CustomHeading = {
+    args: {
+        heading: 'Welcome Back!',
+        homeRoute: '/home',
+        loginRoute: '/login',
+        showEmailLogin: true,
+        showGitHubLogin: true,
+        showTokenLogin: true,
+    },
+};
+/**
+ * Login form with all authentication methods including password reset link
+ */
+export const WithPasswordReset = {
+    args: {
+        heading: 'Login to Datalayer',
+        homeRoute: '/home',
+        loginRoute: '/login',
+        passwordRoute: '/password-reset',
+        showEmailLogin: true,
+        showGitHubLogin: true,
+        showTokenLogin: true,
+    },
+};

package/lib/components/auth/LoginToken.d.ts

@@ -0,0 +1,16 @@
+export interface ILoginTokenProps {
+    /**
+     * Home page route to navigate to after successful login
+     */
+    homeRoute: string;
+    /**
+     * CSS style object
+     */
+    style?: React.CSSProperties;
+}
+/**
+ * Component for token-based authentication
+ * Provides a simple button that expands to show a token input form
+ */
+export declare const LoginToken: (props: ILoginTokenProps) => JSX.Element;
+export default LoginToken;

package/lib/components/auth/LoginToken.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ *
+ * Datalayer License
+ */
+import { useState } from 'react';
+import { Button, FormControl, TextInput } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { useIAM, useNavigate, useToast } from '../../hooks';
+import { useIAMStore } from '../../state';
+/**
+ * Component for token-based authentication
+ * Provides a simple button that expands to show a token input form
+ */
+export const LoginToken = (props) => {
+    const { homeRoute, style } = props;
+    const [showForm, setShowForm] = useState(false);
+    const [token, setToken] = useState('');
+    const [loading, setLoading] = useState(false);
+    const { loginAndNavigate } = useIAM();
+    const { logout, checkIAMToken } = useIAMStore();
+    const { enqueueToast } = useToast();
+    const navigate = useNavigate();
+    const handleLogin = async () => {
+        if (!token.trim()) {
+            enqueueToast('Please enter a valid token', { variant: 'warning' });
+            return;
+        }
+        setLoading(true);
+        try {
+            await loginAndNavigate(token, logout, checkIAMToken, navigate, homeRoute);
+            setShowForm(false);
+            setToken('');
+        }
+        catch (error) {
+            console.error('Token login failed:', error);
+            enqueueToast('Failed to authenticate with provided token', {
+                variant: 'error',
+            });
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    if (!showForm) {
+        return (_jsx(Button, { onClick: () => setShowForm(true), style: style, children: "Login with Token" }));
+    }
+    return (_jsxs(Box, { style: style, children: [_jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Your Authentication Token" }), _jsx(TextInput, { block: true, placeholder: "Paste your authentication token here", value: token, onChange: e => setToken(e.target.value), onKeyDown: e => {
+                            if (e.key === 'Enter') {
+                                handleLogin();
+                            }
+                            else if (e.key === 'Escape') {
+                                setShowForm(false);
+                                setToken('');
+                            }
+                        } }), _jsx(FormControl.Caption, { children: "Enter your Datalayer authentication token to log in" })] }), _jsxs(Box, { mt: 3, display: "flex", justifyContent: "flex-start", children: [_jsx(Button, { variant: "primary", onClick: handleLogin, disabled: loading || !token.trim(), sx: { mr: 2 }, children: loading ? 'Authenticating...' : 'Login' }), _jsx(Button, { variant: "default", onClick: () => {
+                            setShowForm(false);
+                            setToken('');
+                        }, children: "Cancel" })] })] }));
+};
+export default LoginToken;

package/lib/components/auth/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Authentication components for Datalayer platform
+ */
+export * from './Login';
+export * from './LoginToken';

package/lib/components/auth/index.js

@@ -0,0 +1,16 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2021-2024 Datalayer, Inc.
+ *
+ * Datalayer License
+ */
+/**
+ * Authentication components for Datalayer platform
+ */
+export * from './Login';
+// LoginCLI is excluded from build - it's meant for CLI apps with full routing
+// export * from './LoginCLI';
+export * from './LoginToken';

package/lib/components/avatars/BoringAvatar.d.ts

@@ -1,19 +1,10 @@
 type VariantType = 'marble' | 'beam' | 'pixel' | 'sunset' | 'ring' | 'bauhaus' | undefined;
 type IBoringAvatarProps = {
-    displayName: string;
-    variant: VariantType;
-    size: number;
-    square: boolean;
-    style: object;
-};
-export declare const BoringAvatar: {
-    (props: IBoringAvatarProps): import("react/jsx-runtime").JSX.Element;
-    defaultProps: {
-        displayName: string;
-        variant: VariantType;
-        size: number;
-        square: boolean;
-        style: undefined;
-    };
+    displayName?: string;
+    variant?: VariantType;
+    size?: number;
+    square?: boolean;
+    style?: object;
 };
+export declare const BoringAvatar: ({ displayName, variant, size, square, style, }: IBoringAvatarProps) => import("react/jsx-runtime").JSX.Element;
 export default BoringAvatar;

package/lib/components/avatars/BoringAvatar.js

@@ -4,41 +4,37 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * Distributed under the terms of the Modified BSD License.
  */
 import BoringAvatars from 'boring-avatars';
-/*
-const variants = [
-  "bauhaus",
-  "beam",
-  "marble",
-  "pixel",
-  "ring",
-  "sunset",
-];
-export const getRandomBoringAvatarVariant = () => variants[Math.floor(Math.random() * variants.length)] as VariantType;
-*/
+// export const getRandomBoringAvatarVariant = () => VARIANTS[Math.floor(Math.random() * VARIANTS.length)] as VariantType;
 const getRandomBoringAvatarVariant = () => 'bauhaus';
 const RANDOM_BORING_AVATOR_VARIANT = getRandomBoringAvatarVariant();
-export const BoringAvatar = (props) => {
-    const { displayName, size, square, style } = props;
-    const variant = props.variant ?? getRandomBoringAvatarVariant();
-    return (_jsx("span", { style: { ...(style || {}) }, children: _jsx(BoringAvatars, { size: size, name: displayName, variant: variant, square: square, colors: [
-                '#000000',
-                '#146A7C',
-                '#16A085',
-                '#1ABC9C',
-                '#2ECC71',
-                '#59595C',
-                '#92A1C6',
-                '#C20D90',
-                '#C271B4',
-                '#F0AB3D',
-                //      '#FFFFFF',
-            ] }) }));
-};
-BoringAvatar.defaultProps = {
-    displayName: '',
-    variant: RANDOM_BORING_AVATOR_VARIANT,
-    size: 40,
-    square: false,
-    style: undefined,
+export const BoringAvatar = ({ displayName = '', variant, size = 40, square = false, style, }) => {
+    const resolvedVariant = variant ?? RANDOM_BORING_AVATOR_VARIANT;
+    const safeName = String(displayName ?? '');
+    try {
+        return (_jsx("span", { style: { ...(style || {}) }, children: _jsx(BoringAvatars, { size: size, name: safeName, variant: resolvedVariant, square: square, colors: [
+                    '#000000',
+                    '#146A7C',
+                    '#16A085',
+                    '#1ABC9C',
+                    '#2ECC71',
+                    '#59595C',
+                    '#92A1C6',
+                    '#C20D90',
+                    '#C271B4',
+                    '#F0AB3D',
+                    //      '#FFFFFF',
+                ] }) }));
+    }
+    catch (error) {
+        console.error('BoringAvatar error:', error);
+        return (_jsx("span", { style: {
+                display: 'inline-block',
+                width: `${size}px`,
+                height: `${size}px`,
+                borderRadius: square ? '4px' : '50%',
+                backgroundColor: '#59595C',
+                ...(style || {}),
+            } }));
+    }
 };
 export default BoringAvatar;

package/lib/components/avatars/BoringAvatar.stories.d.ts

@@ -1,22 +1,13 @@
 import type { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
-    component: {
-        (props: {
-            displayName: string;
-            variant: "marble" | "beam" | "pixel" | "sunset" | "ring" | "bauhaus" | undefined;
-            size: number;
-            square: boolean;
-            style: object;
-        }): import("react/jsx-runtime").JSX.Element;
-        defaultProps: {
-            displayName: string;
-            variant: "marble" | "beam" | "pixel" | "sunset" | "ring" | "bauhaus" | undefined;
-            size: number;
-            square: boolean;
-            style: undefined;
-        };
-    };
+    component: ({ displayName, variant, size, square, style, }: {
+        displayName?: string;
+        variant?: "marble" | "beam" | "pixel" | "sunset" | "ring" | "bauhaus" | undefined;
+        size?: number;
+        square?: boolean;
+        style?: object;
+    }) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {
         layout: string;

package/lib/components/avatars/UserProfileAvatar.d.ts

@@ -4,10 +4,5 @@ type IUserProfileAvatarProps = {
     size?: number;
     onClick?: React.MouseEventHandler<any>;
 };
-export declare const UserProfileAvatar: {
-    (props: IUserProfileAvatarProps): import("react/jsx-runtime").JSX.Element;
-    defaultProps: {
-        size: number;
-    };
-};
+export declare const UserProfileAvatar: ({ onClick, user, size, }: IUserProfileAvatarProps) => import("react/jsx-runtime").JSX.Element;
 export default UserProfileAvatar;

package/lib/components/avatars/UserProfileAvatar.js

@@ -7,19 +7,14 @@ import { Avatar, Link } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { AvatarSkeleton } from '../../components/display';
 import { getAvatarURL } from '../../utils';
-const Profile = (props) => {
-    const { user, size, onClick } = props;
+const Profile = ({ user, size = 100, onClick }) => {
     return (_jsx(Box, { style: { width: size }, children: _jsx(Avatar
         //      square
         , { 
             //      square
             src: getAvatarURL(user?.avatarUrl), size: size, onClick: onClick }) }));
 };
-export const UserProfileAvatar = (props) => {
-    const { onClick, user, size } = props;
-    return user ? (onClick ? (_jsx(Link, { href: "javascript: return false;", onClick: onClick, children: _jsx(Profile, { ...props }) })) : (_jsx(Profile, { ...props }))) : (_jsx(AvatarSkeleton, { size: size }));
-};
-UserProfileAvatar.defaultProps = {
-    size: 100,
+export const UserProfileAvatar = ({ onClick, user, size = 100, }) => {
+    return user ? (onClick ? (_jsx(Link, { href: "javascript: return false;", onClick: onClick, children: _jsx(Profile, { user: user, size: size, onClick: onClick }) })) : (_jsx(Profile, { user: user, size: size, onClick: onClick }))) : (_jsx(AvatarSkeleton, { size: size }));
 };
 export default UserProfileAvatar;

package/lib/components/buttons/DownloadCSVButton.d.ts

@@ -2,12 +2,7 @@ import { VariantType } from './VariantType';
 type IDownloadCSVButtonProps = {
     data?: object;
     fileName: string;
-    variant: VariantType;
-};
-export declare const DownloadCSVButton: {
-    (props: IDownloadCSVButtonProps): import("react/jsx-runtime").JSX.Element;
-    defaultProps: {
-        variant: string;
-    };
+    variant?: VariantType;
 };
+export declare const DownloadCSVButton: ({ data, fileName, variant, }: IDownloadCSVButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default DownloadCSVButton;

package/lib/components/buttons/DownloadCSVButton.js

@@ -6,11 +6,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Button } from '@primer/react';
 import { DownloadIcon } from '@primer/octicons-react';
 import { downloadCSV } from '../../utils';
-export const DownloadCSVButton = (props) => {
-    const { data, fileName, variant } = props;
+export const DownloadCSVButton = ({ data, fileName, variant = 'default', }) => {
     return (_jsx(Button, { variant: variant, leadingVisual: DownloadIcon, onClick: e => downloadCSV(data, fileName), children: "Download" }));
 };
-DownloadCSVButton.defaultProps = {
-    variant: 'default',
-};
 export default DownloadCSVButton;

package/lib/components/buttons/DownloadJsonButton.d.ts

@@ -2,15 +2,8 @@ import { VariantType } from './VariantType';
 type IDownloadJsonButtonProps = {
     data?: object;
     fileName: string;
-    extension: string;
-    variant: VariantType;
-};
-export declare const DownloadJsonButton: {
-    (props: IDownloadJsonButtonProps): import("react/jsx-runtime").JSX.Element;
-    defaultProps: {
-        variant: string;
-        name: string;
-        extension: string;
-    };
+    extension?: string;
+    variant?: VariantType;
 };
+export declare const DownloadJsonButton: ({ data, fileName, variant, extension, }: IDownloadJsonButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default DownloadJsonButton;

package/lib/components/buttons/DownloadJsonButton.js

@@ -6,13 +6,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Button } from '@primer/react';
 import { DownloadIcon } from '@primer/octicons-react';
 import { downloadJson } from '../../utils';
-export const DownloadJsonButton = (props) => {
-    const { data, fileName, variant, extension } = props;
+export const DownloadJsonButton = ({ data, fileName, variant = 'default', extension = 'json', }) => {
     return (_jsx(Button, { variant: variant, leadingVisual: DownloadIcon, onClick: e => downloadJson(data, fileName, extension), children: "Download" }));
 };
-DownloadJsonButton.defaultProps = {
-    variant: 'default',
-    name: 'data',
-    extension: 'json',
-};
 export default DownloadJsonButton;

package/lib/components/buttons/UploadButton.d.ts

@@ -30,8 +30,5 @@ export interface IUploadButtonProps extends Omit<IUploadBaseButtonProps, 'button
      */
     variant?: VariantType;
 }
-export declare function UploadButton(props: IUploadButtonProps): JSX.Element;
-export declare namespace UploadButton {
-    var defaultProps: Partial<IUploadButtonProps>;
-}
+export declare function UploadButton({ label, variant, ...others }: IUploadButtonProps): JSX.Element;
 export default UploadButton;

package/lib/components/buttons/UploadButton.js

@@ -29,15 +29,11 @@ function UploadBaseButton(props) {
 }
 export function UploadIconButton(props) {
     const { label, ...others } = props;
-    const factory = useMemo(() => (onClick) => (_jsx(IconButton, { "aria-label": label, icon: UploadIcon, size: "small", variant: "invisible", onClick: onClick })), []);
+    const factory = useMemo(() => (onClick) => (_jsx(IconButton, { "aria-label": label, icon: UploadIcon, size: "small", variant: "invisible", onClick: onClick })), [label]);
     return _jsx(UploadBaseButton, { buttonFactory: factory, ...others });
 }
-export function UploadButton(props) {
-    const { label, variant, ...others } = props;
-    const factory = useMemo(() => (onClick) => (_jsx(Button, { "aria-label": label, leadingVisual: () => _jsx(UploadIcon, { fill: "white" }), size: "small", variant: variant, onClick: onClick, children: label })), []);
+export function UploadButton({ label, variant = 'primary', ...others }) {
+    const factory = useMemo(() => (onClick) => (_jsx(Button, { "aria-label": label, leadingVisual: () => _jsx(UploadIcon, { fill: "white" }), size: "small", variant: variant, onClick: onClick, children: label })), [label, variant]);
     return _jsx(UploadBaseButton, { buttonFactory: factory, ...others });
 }
-UploadButton.defaultProps = {
-    variant: 'primary',
-};
 export default UploadButton;

package/lib/components/chat/ChatComponent.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Main Chat component using Primer React
+ */
+export declare const ChatComponent: React.FC;