@invopop/popui 0.0.104 → 0.1.1

package/dist/types.d.ts

@@ -1,4 +1,6 @@
+import type { Placement } from '@floating-ui/dom';
 import type { IconSource } from '@steeze-ui/svelte-icon';
+import type { Snippet } from 'svelte';
 export type IconTheme = 'default' | 'solid' | 'mini';
 export type IconPosition = 'right' | 'left';
 export type ButtonVariant = 'default' | 'primary' | 'secondary' | 'warning' | 'danger' | 'dark' | 'outline';
@@ -45,36 +47,11 @@ export type FeedEvent = {
     code?: string;
     message?: string;
 };
-export type MenuItemProps = {
-    label?: string;
-    isFolderItem?: boolean;
-    collapsable?: boolean;
-    open?: boolean;
-    url?: string;
-    active?: boolean;
-    icon?: IconSource | string;
-    iconTheme?: IconTheme;
-    children?: MenuItemProps[];
-    collapsedSidebar?: boolean;
-};
 export type FeedItemStatus = 'success' | 'failure' | 'run' | 'queued' | 'alert' | 'skip' | 'signed';
 export type FeedItemUser = {
     name: string;
     picture?: string;
 };
-export type FeedItemProps = {
-    status?: FeedItemStatus;
-    icon?: IconSource;
-    title?: string;
-    date?: Date;
-    hasNext?: boolean;
-    slug?: string;
-    viewable?: boolean;
-    viewableText?: string;
-    type?: string;
-    user?: FeedItemUser;
-    extraText?: string;
-};
 export type Badge = {
     label: string;
     status: StatusType;
@@ -130,6 +107,21 @@ export type DataListItem = {
     label: string;
     value: string;
 };
+export type DatesFromToday = {
+    today: Date;
+    startOfThisWeek: Date;
+    endOfThisWeek: Date;
+    startOfLastWeek: Date;
+    endOfLastWeek: Date;
+    startOfThisMonth: Date;
+    endOfThisMonth: Date;
+    startOfLastMonth: Date;
+    endOfLastMonth: Date;
+    startOfThisQuarter: Date;
+    endOfThisQuarter: Date;
+    startOfLastQuarter: Date;
+    endOfLastQuarter: Date;
+};
 export type Breadcrumb = {
     label: string;
     url?: string;
@@ -140,3 +132,470 @@ export type StepIcon = {
     name: string;
     url: string;
 };
+export interface AlertDialogProps {
+    open?: boolean;
+    destructive?: boolean;
+    title?: string;
+    descriptionText?: string;
+    cancelText?: string;
+    actionText?: string;
+    cancelActionEl?: HTMLButtonElement | null;
+    okActionEl?: HTMLButtonElement | null;
+    oncancel?: () => void;
+    onconfirm?: () => void;
+    description?: Snippet;
+    children?: Snippet;
+}
+export interface BaseButtonProps {
+    icon?: IconSource;
+    iconTheme?: IconTheme;
+    iconPosition?: IconPosition;
+    type?: 'button' | 'submit' | 'reset' | null;
+    variant?: ButtonVariant;
+    disabled?: boolean;
+    small?: boolean;
+    big?: boolean;
+    dangerIcon?: boolean;
+    shortcut?: boolean;
+    fullwidth?: boolean;
+    notification?: boolean;
+    children?: Snippet;
+    [key: string]: any;
+    onclick?: (event: MouseEvent) => void;
+}
+export interface BaseCardProps {
+    imageUrl?: string;
+    imageAlt?: string;
+    title?: string;
+    description?: string;
+    type?: 'default' | 'soon' | 'beta';
+    enabled?: boolean;
+    footer?: Snippet;
+    [key: string]: any;
+    onclick?: (event: MouseEvent) => void;
+}
+export interface BaseCounterProps {
+    content: number;
+    variant?: 'default' | 'light' | 'dark';
+}
+export interface BaseDropdownProps {
+    isOpen?: boolean;
+    fullWidth?: boolean;
+    placement?: Placement;
+    matchParentWidth?: boolean;
+    trigger?: Snippet;
+    children?: Snippet;
+    [key: string]: any;
+}
+export interface BaseFlagProps {
+    country?: string;
+    width?: number;
+}
+export interface BaseTableProps {
+    sortBy?: string;
+    sortDirection?: TableSortBy;
+    fields?: TableField[];
+    data?: TableDataRow[];
+    getActions?: TableActionProp;
+    groupLabel?: TableGroupLabelProp;
+    disableRowClick?: boolean;
+    hideCounter?: boolean;
+    selectable?: boolean;
+    selectedRows?: TableDataRow[];
+    selectedTrackedBy?: string;
+    hideSelectAll?: boolean;
+    disableKeyboardNavigation?: boolean;
+    [key: string]: any;
+    ontableEndReached?: () => void;
+    onSelectAllRows?: (selected: boolean) => void;
+    onRowClick?: (row: TableDataRow) => void;
+    onRowRightClick?: (row: TableDataRow) => void;
+    onRowNewTabClick?: (row: TableDataRow) => void;
+    onCopied?: (uuid: string) => void;
+    onOrderBy?: (field: string, direction: TableSortBy) => void;
+    onClickAction?: (args: {
+        row: TableDataRow;
+        action: AnyProp;
+    }) => void;
+}
+export interface BaseTableActionsProps {
+    actions: TableAction[];
+    onclick?: (value: AnyProp) => void;
+}
+export interface BaseTableCellContentProps {
+    field: TableField;
+    data?: unknown;
+    isMobile?: boolean;
+    badge?: Badge | null;
+    status?: FeedItemStatus | null;
+    icons?: TableIcon[] | null;
+    onCopied?: (uuid: string) => void;
+}
+export interface BaseTableCheckboxProps {
+    checkboxButton?: HTMLButtonElement | undefined;
+    checked?: boolean;
+    hidden?: boolean;
+    indeterminate?: boolean;
+    onChecked?: (checked: boolean) => void;
+}
+export interface BaseTableHeaderProps {
+    field: TableField;
+    sortBy?: string;
+    sortDirection: TableSortBy;
+    onOrderBy?: (field: string, direction: TableSortBy) => void;
+}
+export interface BaseTableHeaderOrderByProps {
+    isActive?: boolean;
+    sortDirection: TableSortBy;
+    onOrderBy?: (direction: TableSortBy) => void;
+}
+export interface BaseTableRowProps {
+    row: TableDataRow;
+    getActions?: TableActionProp;
+    fields?: TableField[];
+    disableRowClick?: boolean;
+    selectable?: boolean;
+    selected?: boolean;
+    selectionMode?: string;
+    selectedTrackedBy?: string;
+    selectedRows?: TableDataRow[];
+    onclick?: (event: MouseEvent) => void;
+    onmouseover?: () => void;
+    oncontextmenu?: () => void;
+    onfocus?: () => void;
+    onChecked?: (checked: boolean) => void;
+    onCopied?: (uuid: string) => void;
+    onClickAction?: (args: {
+        row: TableDataRow;
+        action: AnyProp;
+    }) => void;
+}
+export interface BreadcrumbsProps {
+    breadcrumbs?: Breadcrumb[];
+    oncopied?: (label: string) => void;
+}
+export interface ButtonFileProps {
+    icon?: IconSource;
+    name?: string;
+    disabled?: boolean;
+    date?: string;
+    iconColor?: StatusType;
+    onPreview?: () => void;
+    onDownload?: () => void;
+    [key: string]: any;
+}
+export interface ButtonUuidCopyProps {
+    uuid?: string;
+    prefixLength?: number;
+    suffixLength?: number;
+    full?: boolean;
+    disabled?: boolean;
+    oncopied?: (label: string) => void;
+}
+export interface CardCheckboxProps {
+    id?: any;
+    name?: string;
+    title?: string;
+    description?: string;
+    accentText?: string;
+    checked?: boolean;
+    icon?: IconSource | undefined;
+    hideRadio?: boolean;
+    footer?: Snippet;
+    onchange?: (checked: boolean) => void;
+}
+export interface CardRelationProps {
+    title?: string;
+    icon?: IconSource | undefined;
+    items?: DataListItem[];
+    onclick?: (event: MouseEvent) => void;
+}
+export interface CompanySelectorProps {
+    companies?: Company[];
+    selectedCompany?: Company | null;
+    collapsed?: boolean;
+    onAdd?: () => void;
+    onSelect?: (company: Company | null) => void;
+}
+export interface CounterWorkflowProps {
+    content: number | string;
+    variant?: 'default' | 'transparent';
+}
+export interface DataListItemProps {
+    label?: string;
+    value?: string;
+    monospaced?: boolean;
+    monospacedNums?: boolean;
+    fullWidth?: boolean;
+    children?: Snippet;
+}
+export interface DatePickerProps {
+    label?: string;
+    position?: 'left' | 'right';
+    from?: string;
+    to?: string;
+    onSelect?: (date: {
+        from: string;
+        to: string;
+    }) => void;
+}
+export interface DrawerContextProps {
+    items?: DrawerOption[];
+    multiple?: boolean;
+    searchable?: boolean;
+    widthClass?: string;
+    onclick?: (value: AnyProp) => void;
+    onselect?: (selected: DrawerOption[]) => void;
+}
+export interface DrawerContextItemProps {
+    multiple?: boolean;
+    item: DrawerOption;
+    scrollIfSelected?: boolean;
+    workspace?: boolean;
+    onclick?: (value: AnyProp) => void;
+    onchange?: (item: DrawerOption) => void;
+}
+export interface DrawerContextWorkspaceProps {
+    items?: DrawerOption[];
+    multiple?: boolean;
+    onclick?: (value: AnyProp) => void;
+}
+export interface DropdownSelectProps {
+    value?: AnyProp;
+    icon?: IconSource | string | undefined;
+    iconTheme?: IconTheme;
+    options?: DrawerOption[];
+    placeholder?: string;
+    multiple?: boolean;
+    fullWidth?: boolean;
+    widthClass?: string;
+    onSelect?: (value: AnyProp) => void;
+}
+export interface EmptyStateIconProps {
+    icon?: IconSource | undefined;
+    title?: string;
+    description?: string;
+    check?: boolean;
+    children?: Snippet;
+}
+export interface EmptyStateIllustrationProps {
+    icon?: EmptyStateIcon | undefined;
+    title?: string;
+    description?: string;
+    children?: Snippet;
+}
+export interface FeedEventsProps {
+    events?: FeedEvent[];
+}
+export interface FeedIconEventProps {
+    icon?: IconSource | undefined;
+    iconTheme?: IconTheme;
+}
+export interface FeddIconStatusProps {
+    status: FeedItemStatus;
+}
+export interface FeedItemProps {
+    status?: FeedItemStatus | undefined;
+    icon?: IconSource | undefined;
+    title?: string;
+    date?: Date | undefined;
+    hasNext?: boolean;
+    slug?: string;
+    viewable?: boolean;
+    viewableText?: string;
+    user?: FeedItemUser | undefined;
+    type?: string;
+    extraText?: string;
+    onView?: (slug: string) => void;
+}
+export interface FeedItemDetailProps {
+    status?: FeedItemStatus | undefined;
+    title?: string;
+    uuid?: string;
+    events?: FeedEvent[];
+    idLabel?: string;
+    onCopied?: (uuid: string) => void;
+}
+export interface FeedViewerProps {
+    items?: FeedItemProps[];
+    onView?: (slug: string) => void;
+}
+export interface FormLayoutModalProps {
+    children?: Snippet;
+    footer?: Snippet;
+}
+export interface GlobalSearchProps {
+    collapsed?: boolean;
+    onOpen?: () => void;
+}
+export interface InputCheckboxProps {
+    id?: string;
+    checked?: boolean;
+    indeterminate?: boolean;
+    label?: string;
+    onchange?: (checked: boolean) => void;
+    onclick?: (event: MouseEvent) => void;
+    [key: string]: any;
+}
+export interface InputErrorProps {
+    errorText?: string;
+}
+export interface InputLabelProps {
+    id?: string;
+    label?: string;
+    [key: string]: any;
+}
+export interface InputRadioProps {
+    checked?: boolean;
+    id?: any;
+    name?: string;
+    onchange?: (checked: boolean) => void;
+    [key: string]: any;
+}
+export interface InputSearchProps {
+    value?: string;
+    shortcut?: string;
+    placeholder?: string;
+    icon?: IconSource;
+    focusOnLoad?: boolean;
+    oninput?: (value: string) => void;
+    onclick?: (event: MouseEvent) => void;
+    onfocus?: (event: FocusEvent) => void;
+    onblur?: (event: FocusEvent) => void;
+    [key: string]: any;
+}
+export interface InputSelectProps {
+    id?: any;
+    name?: string;
+    label?: string;
+    disabled?: boolean;
+    value?: string;
+    icon?: IconSource | string | undefined;
+    iconTheme?: IconTheme;
+    options?: SelectOption[];
+    placeholder?: string;
+    disablePlaceholder?: boolean;
+    errorText?: string;
+    onchange?: (value: string) => void;
+    [key: string]: any;
+}
+export interface InputTextProps {
+    id?: any;
+    label?: string;
+    placeholder?: string;
+    errorText?: string;
+    disabled?: boolean;
+    value?: string | number;
+    focusOnLoad?: boolean;
+    oninput?: (value: string) => void;
+    onfocus?: (event: FocusEvent) => void;
+    onblur?: (event: FocusEvent) => void;
+    onkeydown?: (event: KeyboardEvent) => void;
+    [key: string]: any;
+}
+export interface InputTextareaProps {
+    id?: any;
+    label?: string;
+    placeholder?: string;
+    errorText?: string;
+    disabled?: boolean;
+    value?: string | number;
+    rows?: number;
+    oninput?: (value: string) => void;
+    [key: string]: any;
+}
+export interface InputToggleProps {
+    id?: string;
+    checked?: boolean;
+    label?: string;
+    onchange?: (checked: boolean) => void;
+}
+export interface MenuItemProps {
+    label?: string;
+    url?: string;
+    isFolderItem?: boolean;
+    collapsable?: boolean;
+    open?: boolean;
+    active?: boolean;
+    collapsedSidebar?: boolean;
+    iconTheme?: IconTheme;
+    icon?: IconSource | string | undefined;
+    children?: MenuItemProps[] | undefined;
+    onclick?: (url: string) => void;
+}
+export interface MenuItemCollapsibleProps {
+    collapsed?: boolean;
+    title?: string;
+    subtitle?: string;
+    active?: boolean;
+    bold?: boolean;
+    icon?: IconSource | undefined;
+    children?: Snippet;
+}
+export interface NotificationProps {
+    message?: string;
+    type?: Status;
+    children?: Snippet;
+}
+export interface ProfileAvatarProps {
+    name?: string;
+    small?: boolean;
+    large?: boolean;
+    dark?: boolean;
+    picture?: string;
+    country?: string;
+}
+export interface ProfileSelectorProps {
+    name?: string;
+    orgName?: string;
+    picture?: string;
+    collapsed?: boolean;
+    isOpen?: boolean;
+    onclick?: (event: MouseEvent) => void;
+}
+export interface SectionLayoutProps {
+    title?: string;
+    children?: Snippet;
+}
+export interface StatusLabelProps {
+    status: FeedItemStatus;
+    label?: string;
+}
+export interface StepIconListProps {
+    icons?: StepIcon[];
+}
+export interface TagSearchProps {
+    label?: string;
+    icon?: IconSource | string | undefined;
+    iconTheme?: IconTheme;
+    onclear?: () => void;
+}
+export interface TagStatusProps {
+    label?: string;
+    status?: StatusType;
+    dot?: boolean;
+}
+export interface TitleMainProps {
+    title?: string;
+    children?: Snippet;
+}
+export interface TitleSectionProps {
+    title?: string;
+    children?: Snippet;
+}
+export interface ShortcutWrapperProps {
+    children?: Snippet;
+}
+export interface UuidCopyProps {
+    uuid?: string;
+    small?: boolean;
+    dark?: boolean;
+    rightAlign?: boolean;
+    prefixLength?: number;
+    suffixLength?: number;
+    full?: boolean;
+    compact?: boolean;
+    link?: boolean;
+    onCopied?: (uuid: string) => void;
+    onLinkClick?: (uuid: string) => void;
+}

package/dist/utils.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="svelte" />
 import type { ClassValue } from 'clsx';
 import type { TransitionConfig } from 'svelte/transition';
 type FlyAndScaleParams = {
@@ -10,4 +9,14 @@ type FlyAndScaleParams = {
 export declare function cn(...inputs: ClassValue[]): string;
 export declare function styleToString(style: Record<string, number | string | undefined>): string;
 export declare function flyAndScale(node: Element, params?: FlyAndScaleParams): TransitionConfig;
+export type WithoutChild<T> = T extends {
+    child?: any;
+} ? Omit<T, 'child'> : T;
+export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
+export type WithoutChildren<T> = T extends {
+    children?: any;
+} ? Omit<T, 'children'> : T;
+export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & {
+    ref?: U | null;
+};
 export {};

package/package.json

@@ -1,14 +1,12 @@
 {
   "name": "@invopop/popui",
   "license": "MIT",
-  "version": "0.0.104",
+  "version": "0.1.1",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run package",
     "preview": "vite preview",
-    "prepackage": "rm -rf src && mkdir src && cp -r svelte/lib src/lib",
-    "package": "svelte-kit sync && svelte-package && npm run build:tailwind && publint",
-    "postpackage": "rm -rf src",
+    "package": "svelte-kit sync && svelte-package && publint",
     "prepublishOnly": "npm run package",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
@@ -16,8 +14,8 @@
     "lint": "prettier --plugin-search-dir . --check . && eslint .",
     "format": "prettier --plugin-search-dir . --write .",
     "storybook": "storybook dev -p 6006",
-    "build:tailwind": "npx tailwindcss -i ./styles.css -o ./dist/popui.css --minify",
     "build-storybook": "storybook build",
+    "build:tailwind": "tailwindcss -i ../styles.css -o ./dist/popui.css --minify",
     "build-web-components": "vite build --config vite.wbc.config.ts",
     "publish-wbc": "npm run build-web-components && cp ./package-wbc.json ./dist/package.json && cd ./dist && npm run publish"
   },
@@ -42,70 +40,63 @@
     "svelte": "^4.0.0"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^7.4.6",
-    "@storybook/addon-interactions": "^7.4.6",
-    "@storybook/addon-links": "^7.4.6",
-    "@storybook/blocks": "^7.4.6",
-    "@storybook/svelte": "^7.4.6",
-    "@storybook/sveltekit": "^7.4.6",
+    "@storybook/addon-docs": "^9.1.3",
+    "@storybook/addon-links": "^9.1.3",
+    "@storybook/sveltekit": "^9.1.3",
     "@storybook/testing-library": "^0.2.2",
-    "@sveltejs/adapter-auto": "^2.0.0",
-    "@sveltejs/kit": "^1.20.4",
-    "@sveltejs/package": "^2.0.0",
+    "@sveltejs/adapter-auto": "^3.0.0",
+    "@sveltejs/kit": "^2.5.27",
+    "@sveltejs/package": "^2.3.7",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "@tailwindcss/cli": "^4.1.13",
     "@tailwindcss/forms": "^0.5.9",
     "@tailwindcss/typography": "^0.5.15",
+    "@types/lodash-es": "^4.17.12",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
-    "autoprefixer": "^10.4.20",
     "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-storybook": "^0.6.15",
-    "eslint-plugin-svelte": "^2.30.0",
-    "postcss": "^8.4.47",
-    "prettier": "^2.8.0",
-    "prettier-plugin-svelte": "^2.10.1",
+    "eslint-plugin-storybook": "^9.1.3",
+    "eslint-plugin-svelte": "^2.45.1",
+    "prettier": "^3.1.0",
+    "prettier-plugin-svelte": "^3.2.6",
+    "prettier-plugin-tailwindcss": "^0.6.11",
     "publint": "^0.1.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "storybook": "^7.4.6",
-    "svelte": "^4.0.5",
-    "svelte-check": "^3.4.3",
+    "storybook": "^9.1.3",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
     "svelte-headlessui": "^0.0.32",
     "tailwind-merge": "^3.0.2",
-    "tailwindcss": "^3.4.16",
+    "tailwindcss": "^4.1.13",
     "tslib": "^2.4.1",
-    "typescript": "^4.1.6",
-    "vite": "^4.4.2",
-    "vitest": "^0.34.0"
+    "typescript": "^5.5.0",
+    "vite": "^5.4.4",
+    "vitest": "^1.0.0"
   },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "type": "module",
   "dependencies": {
-    "@beyonk/svelte-datepicker": "^13.0.3",
     "@floating-ui/core": "^1.5.1",
     "@invopop/ui-icons": "0.0.67",
     "@steeze-ui/heroicons": "^2.2.3",
-    "@steeze-ui/svelte-icon": "^1.5.0",
-    "@twind/core": "^1.1.3",
-    "@twind/preset-autoprefix": "^1.0.7",
-    "@twind/preset-tailwind": "^1.1.4",
-    "@twind/preset-tailwind-forms": "^1.1.2",
-    "@twind/with-web-components": "^1.1.3",
+    "@steeze-ui/svelte-icon": "^1.6.2",
+    "@tailwindcss/vite": "^4.1.12",
     "@types/flatpickr": "^3.1.2",
-    "bits-ui": "^0.22.0",
+    "bits-ui": "^2.9.4",
     "clsx": "^2.0.0",
     "date-fns": "^2.30.0",
     "dayjs": "^1.11.10",
     "flatpickr": "^4.6.13",
     "inter-ui": "^3.19.3",
+    "lodash-es": "^4.17.21",
     "svelte-floating-ui": "^1.5.8",
     "svelte-intersection-observer-action": "^0.0.4",
     "svelte-portal": "^2.2.1",
-    "svelte-select-kit": "^0.1.1",
-    "svelte-transition": "^0.0.10",
+    "svelte-transition": "^0.0.17",
     "svelte-viewport-info": "^1.0.2",
-    "tailwind-variants": "^1.0.0",
-    "twind": "^0.16.19"
+    "tailwind-variants": "^1.0.0"
   }
 }