pika-ux 1.0.0-beta.0

package/src/pika/pika-table/pika-table.svelte

@@ -0,0 +1,295 @@
+<script lang="ts" module>
+    type TData = unknown;
+    type TValue = unknown;
+</script>
+
+<script lang="ts" generics="TData, TValue">
+    import type { AppState } from '$client/app/app.state.svelte';
+    import { createSvelteTable } from '../../shadcn/data-table/data-table.svelte';
+    import FlexRender from '../../shadcn/data-table/flex-render.svelte';
+    import * as Table from '../../shadcn/table';
+    import {
+        getCoreRowModel,
+        getFacetedRowModel,
+        getFacetedUniqueValues,
+        getFilteredRowModel,
+        getPaginationRowModel,
+        getSortedRowModel,
+        type ColumnDef,
+        type ColumnFiltersState,
+        type RowSelectionState,
+        type SortingState
+    } from '@tanstack/table-core';
+    import { getContext, type Snippet } from 'svelte';
+    import TablePagination from './pika-table-pagination.svelte';
+    import TableToolbar from './pika-table-toolbar.svelte';
+    import type { FacetedFilters, GlobalFilterProps, ServerSideConfig, ServerSideTableState } from './types';
+
+    interface Props {
+        columns: ColumnDef<TData, TValue>[];
+        data: TData[];
+        classes?: string;
+
+        // If you pass in toolbar content then global filter and faceted filters will be ignored
+        globalFilterProps?: GlobalFilterProps;
+        facetedFilters?: FacetedFilters;
+
+        // Appears above the table
+        toolbarContent?: Snippet;
+
+        // Appears beneath the toolbar and above the table
+        beneathToolbarContent?: Snippet;
+
+        // This should be a human readable name for the table that is used to save/load column visibility
+        // and to show in the settings UI.  Here's an example: "AWS SSO Profiles"
+        tableKey: string;
+        alwaysPinLeftColumns?: string[];
+        alwaysPinRightColumns?: string[];
+
+        // Server-side configuration
+        serverSideConfig?: ServerSideConfig;
+    }
+
+    let {
+        columns,
+        data,
+        classes,
+        globalFilterProps = $bindable<GlobalFilterProps>(),
+        facetedFilters,
+        toolbarContent,
+        beneathToolbarContent,
+        tableKey,
+        serverSideConfig = $bindable<ServerSideConfig>()
+    }: Props = $props();
+
+    const appState = getContext<AppState>('appState');
+    const appSettings = appState.settings;
+
+    let rowSelection = $state<RowSelectionState>({});
+    let columnVisibility = $derived(appSettings.getTableColumnVisibilityObject(tableKey));
+    //$state<VisibilityState>(appSettings.getTableColumnVisibilityObject(tableKey));
+    let columnFilters = $state<ColumnFiltersState>([]);
+    let sorting = $state<SortingState>([]);
+    let pageIndex = $state(0);
+    let pageSize = $derived(appSettings.getTableNumRows(tableKey, 10));
+
+    // === SERVER-SIDE LOGIC ===
+
+    let debouncedRequestData: ((tableState: ServerSideTableState) => Promise<void>) | undefined;
+
+    // Create debounced function when serverSide config changes
+    // $effect(() => {
+    //     const serverState = serverSideConfig;
+    //     if (serverState) {
+    //         const debounceMs = serverState.debounceMs ?? 300;
+    //         debouncedRequestData = debounce(async (tableState: ServerSideTableState) => {
+    //             try {
+    //                 await serverState.requestData(tableState);
+
+    //                 // If using new API, update the tableState
+    //                 if (serverSideConfig) {
+    //                     serverSideConfig.tableState = { ...serverSideConfig.tableState, ...tableState };
+    //                 }
+    //             } catch (error) {
+    //                 serverState.onError?.(error instanceof Error ? error.message : 'Unknown error');
+    //             }
+    //         }, debounceMs);
+    //     } else {
+    //         debouncedRequestData = undefined;
+    //     }
+    // });
+
+    // Trigger server request when table state changes
+    // function triggerServerRequest() {
+    //     const serverState = serverSideConfig;
+    //     if (!serverState || !debouncedRequestData) return;
+
+    //     const tableState: ServerSideTableState = {
+    //         pageIndex,
+    //         pageSize,
+    //         sorting,
+    //         columnFilters,
+    //         requestId: crypto.randomUUID(),
+    //     };
+
+    //     debouncedRequestData(tableState);
+    // }
+
+    // Utility function for debouncing
+    function debounce<T extends (...args: any[]) => any>(func: T, wait: number): T {
+        let timeout: ReturnType<typeof setTimeout>;
+        return ((...args: any[]) => {
+            clearTimeout(timeout);
+            timeout = setTimeout(() => func(...args), wait);
+        }) as T;
+    }
+
+    const table = createSvelteTable({
+        columns,
+        enableRowSelection: true,
+        ...(globalFilterProps?.showGlobalFilter ? { globalFilterFn: 'includesString' } : {}),
+        get data() {
+            return data;
+        },
+        state: {
+            get sorting() {
+                return sorting;
+            },
+            get columnVisibility() {
+                return columnVisibility;
+            },
+            get rowSelection() {
+                return rowSelection;
+            },
+            get columnFilters() {
+                return columnFilters;
+            },
+            get pagination() {
+                return { pageIndex, pageSize };
+            },
+            get globalFilter() {
+                return globalFilterProps?.showGlobalFilter ? globalFilterProps.globalFilterValue : '';
+            }
+        },
+
+        // === MANUAL MODES FOR SERVER-SIDE ===
+        get manualSorting() {
+            return !!serverSideConfig;
+        },
+        get manualFiltering() {
+            return !!serverSideConfig;
+        },
+        get manualPagination() {
+            return !!serverSideConfig;
+        },
+        get pageCount() {
+            const serverState = serverSideConfig;
+            if (!serverState) return undefined;
+
+            const tableState = serverSideConfig?.tableState;
+
+            // Calculate pageCount if totalRecords is available, regardless of pagination mode
+            if (tableState?.totalRecords !== undefined && pageSize > 0) {
+                return Math.ceil(tableState.totalRecords / pageSize);
+            }
+            // For cursor-based pagination without totalRecords, we don't know the total
+            if (serverState.paginationMode === 'cursor') {
+                return -1; // Unknown page count for cursor pagination without totalRecords
+            }
+            return undefined; // Unknown page count
+        },
+
+        onRowSelectionChange: (updater) => {
+            if (typeof updater === 'function') {
+                rowSelection = updater(rowSelection);
+            } else {
+                rowSelection = updater;
+            }
+        },
+        onSortingChange: (updater) => {
+            if (typeof updater === 'function') {
+                sorting = updater(sorting);
+            } else {
+                sorting = updater;
+            }
+
+            // Trigger server request for server-side tables
+            // if (serverSideConfig) {
+            //     triggerServerRequest();
+            // }
+        },
+        onColumnFiltersChange: (updater) => {
+            if (typeof updater === 'function') {
+                columnFilters = updater(columnFilters);
+            } else {
+                columnFilters = updater;
+            }
+
+            // Trigger server request for server-side tables
+            // if (serverSideConfig) {
+            //     triggerServerRequest();
+            // }
+        },
+        onColumnVisibilityChange: (updater) => {
+            if (typeof updater === 'function') {
+                appSettings.setTableColumnVisibilityFromObject(tableKey, updater(columnVisibility));
+            } else {
+                throw new Error('onColumnVisibilityChange updater must be a function');
+                //columnVisibility = updater;
+            }
+        },
+        onPaginationChange: (updater) => {
+            if (typeof updater === 'function') {
+                const val = updater({ pageIndex, pageSize });
+                pageIndex = val.pageIndex;
+                appSettings.setTableNumRows(tableKey, val.pageSize);
+
+                // Trigger server request for server-side tables
+                // if (serverSideConfig) {
+                //     triggerServerRequest();
+                // }
+            } else {
+                throw new Error('onPaginationChange updater must be a function');
+            }
+        },
+        onGlobalFilterChange: (value) => {
+            if (globalFilterProps?.showGlobalFilter) {
+                globalFilterProps.globalFilterValue = value;
+
+                // Trigger server request for server-side tables
+                // if (serverSideConfig) {
+                //     triggerServerRequest();
+                // }
+            }
+        },
+
+        // === ROW MODELS ===
+        getCoreRowModel: getCoreRowModel(),
+        ...(serverSideConfig
+            ? {}
+            : {
+                  getFilteredRowModel: getFilteredRowModel(),
+                  getPaginationRowModel: getPaginationRowModel(),
+                  getSortedRowModel: getSortedRowModel()
+              }),
+        getFacetedRowModel: getFacetedRowModel(),
+        getFacetedUniqueValues: getFacetedUniqueValues()
+    });
+</script>
+
+<div class="space-y-4 {classes ? classes : ''} ">
+    <TableToolbar {table} {globalFilterProps} {facetedFilters} {toolbarContent} {beneathToolbarContent} />
+    <div class="rounded-md border h-full flex flex-col overflow-y-auto">
+        <Table.Root class="h-full">
+            <Table.Header>
+                {#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
+                    <Table.Row class="sticky top-0 bg-gray-50 shadow-[inset_0_-1px_0_#ededed]">
+                        {#each headerGroup.headers as header (header.id)}
+                            <Table.Head colspan={header.colSpan}>
+                                {#if !header.isPlaceholder}
+                                    <FlexRender content={header.column.columnDef.header} context={header.getContext()} />
+                                {/if}
+                            </Table.Head>
+                        {/each}
+                    </Table.Row>
+                {/each}
+            </Table.Header>
+            <Table.Body class="">
+                {#each table.getRowModel().rows as row (row.id)}
+                    <Table.Row data-state={row.getIsSelected() && 'selected'}>
+                        {#each row.getVisibleCells() as cell (cell.id)}
+                            <Table.Cell>
+                                <FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
+                            </Table.Cell>
+                        {/each}
+                    </Table.Row>
+                {:else}
+                    <Table.Row>
+                        <Table.Cell colspan={columns.length} class="h-24 text-center">No results.</Table.Cell>
+                    </Table.Row>
+                {/each}
+            </Table.Body>
+        </Table.Root>
+    </div>
+    <TablePagination {table} serverSide={serverSideConfig} />
+</div>

package/src/pika/pika-table/types.ts

@@ -0,0 +1,106 @@
+import type { AppState } from '$client/app/app.state.svelte';
+import type { Column, ColumnFiltersState, Row, SortingState } from '@tanstack/table-core';
+import type { Component } from 'svelte';
+
+export interface FacetedFilterData {
+    label: string;
+    value: string;
+    icon?: Component;
+    iconClasses?: string;
+}
+
+export interface FacetedFilterProps {
+    columnId: string;
+    title: string;
+    options: FacetedFilterData[];
+}
+
+export interface FacetedFilterPropsWithColumn<TData> extends FacetedFilterProps {
+    column: Column<TData, unknown>;
+}
+
+/**
+ * Each of these is a column that has a filter that will be displayed in the toolbar as a dropdown
+ * that allows the user to filter by the column and the options provided.
+ */
+export type FacetedFilters = FacetedFilterProps[];
+
+export type FacetedFiltersWithColumn<TData> = FacetedFilterPropsWithColumn<TData>[];
+
+/**
+ * You control which columns are filtered by the global input filter by setting enableGlobalFilter to true on the column def
+ * and false on the others.
+ *
+ * TODO: add a way to let them pass in the globalFilterFn and override the default if needed
+ *
+ * The globalFilterValue should just be `$state<string>('')`
+ */
+export interface GlobalFilterProps {
+    showGlobalFilter: boolean;
+    globalFilterValue?: string;
+    globalFilterPlaceholder?: string;
+}
+
+export interface RowActionMenuItemNode<TData> {
+    label: string;
+    icon?: Component;
+    onclick?: (row: Row<TData>, appState: AppState) => void;
+}
+
+export interface RowActionMenuItemSubMenu<TData> {
+    label: string;
+    icon?: Component;
+    menuItems: RowActionMenuItem<TData>[];
+}
+
+export interface RowActionsProps<TData> {
+    menuWidth?: string; // must be a valid css unit like 160px, will pair concat with w- to form the width using tailwind
+    menuItems: RowActionMenuItem<TData>[];
+}
+
+export type RowActionMenuItem<TData> = 'Separator' | RowActionMenuItemNode<TData> | RowActionMenuItemSubMenu<TData>;
+
+// === SERVER-SIDE TYPES ===
+
+export interface ServerSideTableState {
+    // === PAGINATION ===
+    pageIndex: number;
+    pageSize: number;
+    totalRecords?: number; // Total number of records available
+    scrollId?: string; // For cursor-based pagination
+    hasNextPage?: boolean; // Indicates if there are more pages available
+
+    // === SORTING ===
+    sorting: SortingState;
+
+    // === FILTERING ===
+    columnFilters: ColumnFiltersState;
+
+    // === LOADING STATE ===
+    isLoading?: boolean;
+    error?: string;
+
+    // === METADATA ===
+    requestId: string;
+}
+
+/**
+ * Unified server-side configuration that combines both configuration and state.
+ * This is the recommended interface for new implementations.
+ */
+export interface ServerSideConfig {
+    // === REQUEST INITIATOR ===
+    requestData: (tableState: ServerSideTableState) => Promise<void>;
+
+    // === PAGINATION STYLE ===
+    paginationMode: 'offset' | 'cursor';
+
+    // === DEBOUNCING ===
+    debounceMs?: number; // Default 300ms
+
+    // === ERROR HANDLING ===
+    onError?: (error: string) => void;
+
+    // === DYNAMIC TABLE STATE ===
+    tableState: ServerSideTableState;
+}

package/src/pika/pika-tabs/index.ts

@@ -0,0 +1,18 @@
+import { Tabs as TabsPrimitive } from 'bits-ui';
+import Content from './tabs-content.svelte';
+import List from './tabs-list.svelte';
+import Trigger from './tabs-trigger.svelte';
+
+const Root = TabsPrimitive.Root;
+
+export {
+    Content,
+    List,
+    Root,
+    //
+    Root as Tabs,
+    Content as TabsContent,
+    List as TabsList,
+    Trigger as TabsTrigger,
+    Trigger
+};

package/src/pika/pika-tabs/tabs-content.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+    import { cn } from '../../shadcn/utils.js';
+    import { Tabs as TabsPrimitive } from 'bits-ui';
+
+    let { ref = $bindable(null), class: className, value, ...restProps }: TabsPrimitive.ContentProps = $props();
+</script>
+
+<TabsPrimitive.Content
+    bind:ref
+    class={cn(
+        'ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
+        className
+    )}
+    {value}
+    {...restProps}
+/>

package/src/pika/pika-tabs/tabs-list.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+    import { cn } from '../../shadcn/utils.js';
+    import { Tabs as TabsPrimitive } from 'bits-ui';
+
+    let { ref = $bindable(null), class: className, ...restProps }: TabsPrimitive.ListProps = $props();
+</script>
+
+<TabsPrimitive.List
+    bind:ref
+    class={cn('bg-muted text-muted-foreground inline-flex h-9 items-center justify-center rounded-lg p-1', className)}
+    {...restProps}
+/>

package/src/pika/pika-tabs/tabs-trigger.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+    import { cn } from '../../shadcn/utils.js';
+    import { Tabs as TabsPrimitive } from 'bits-ui';
+
+    let { ref = $bindable(null), class: className, value, ...restProps }: TabsPrimitive.TriggerProps = $props();
+</script>
+
+<!-- 
+    Modified from standard shadcn tabs trigger component:
+    Added 'data-[state=inactive]:hover:text-primary' to provide visual feedback 
+    when hovering over unselected tabs. This changes the text color to the theme's 
+    primary color on hover for better UX, indicating that the tabs are clickable.
+-->
+
+<TabsPrimitive.Trigger
+    bind:ref
+    class={cn(
+        'ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=inactive]:hover:text-primary inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow',
+        className
+    )}
+    {value}
+    {...restProps}
+/>

package/src/pika/popup-help/index.ts

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

package/src/pika/popup-help/popup-help.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+    import HelpCircleOutline from '$icons/ci/help-circle-outline';
+    import * as Popover from '../../shadcn/popover';
+    import { cn } from '../../shadcn/utils';
+    import type { Snippet } from 'svelte';
+
+    interface Props {
+        popoverClasses?: string;
+        children?: Snippet;
+    }
+
+    let { popoverClasses, children }: Props = $props();
+
+    let open = $state(false);
+</script>
+
+<Popover.Root bind:open>
+    <Popover.Trigger
+        class="inline-flex items-center justify-center"
+        onmouseenter={() => {
+            open = true;
+        }}
+        onmouseleave={() => {
+            open = false;
+        }}
+    >
+        <HelpCircleOutline class="w-4 h-4 text-gray-400 hover:text-blue-500 transition-colors" />
+    </Popover.Trigger>
+
+    <Popover.Content class={cn('w-120', popoverClasses)}>
+        {@render children?.()}
+    </Popover.Content>
+</Popover.Root>

package/src/pika/simple-dropdown/index.ts

@@ -0,0 +1,2 @@
+export { default as SimpleDropdown } from './simple-dropdown.svelte';
+export type * from './simple-dropdown-types';

package/src/pika/simple-dropdown/simple-dropdown-types.ts

@@ -0,0 +1,5 @@
+export interface SimpleDropdownMapping<T> {
+    value: (item: T) => string;
+    label: (item: T) => string;
+    secondaryLabel?: (item: T) => string;
+}