@shlinkio/shlink-frontend-kit 1.3.1 → 1.5.0

package/dist/navigation/Dropdown.d.ts

@@ -0,0 +1,32 @@
+import { FC, PropsWithChildren } from 'react';
+import { RequiredReactNode, Size } from '../types';
+export type DropdownProps = PropsWithChildren<{
+    buttonContent: RequiredReactNode;
+    buttonSize?: Size;
+    buttonClassName?: string;
+    buttonVariant?: 'button' | 'link' | 'text';
+    buttonDisabled?: boolean;
+    /** Set as the button's `aria-label` attribute */
+    buttonLabel?: string;
+    /** Classes to be set on the containing wrapper element */
+    containerClassName?: string;
+    /** Classes to be set on the menu element */
+    menuClassName?: string;
+    /**
+     * Whether the menu should align with the right or the left side of the toggle button in case it is bigger.
+     * Defaults to 'left'.
+     */
+    menuAlignment?: 'left' | 'right';
+    /** Distance between toggle button and menu when open, in pixels. Defaults to 3 */
+    menuOffset?: number;
+    /** Whether to hide the caret or not. Defaults to false */
+    caretless?: boolean;
+}>;
+export declare const Dropdown: FC<DropdownProps> & {
+    Item: FC<import('./Menu').MenuItemProps>;
+    Separator: FC;
+    Title: FC<{
+        children?: import('react').ReactNode | undefined;
+    }>;
+    Misc: FC<import('react').HTMLProps<HTMLDivElement>>;
+};

package/dist/navigation/Dropdown.stories.d.ts

@@ -0,0 +1,36 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    component: import('react').FC<import('./Dropdown').DropdownProps> & {
+        Item: import('react').FC<import('./Menu').MenuItemProps>;
+        Separator: import('react').FC;
+        Title: import('react').FC<{
+            children?: import('react').ReactNode | undefined;
+        }>;
+        Misc: import('react').FC<import('react').HTMLProps<HTMLDivElement>>;
+    };
+    tags: string[];
+    argTypes: {
+        buttonDisabled: import('storybook/internal/csf').InputType;
+        menuOffset: {
+            type: "number";
+        };
+        buttonSize: import('storybook/internal/csf').InputType;
+        buttonVariant: {
+            options: string[];
+        };
+        menuAlignment: {
+            options: string[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Base: Story;
+export declare const MenuGrowsToButtonSize: Story;
+export declare const RightAligned: Story;
+export declare const Small: Story;
+export declare const Large: Story;
+export declare const Caretless: Story;
+export declare const Link: Story;
+export declare const Text: Story;
+export declare const Disabled: Story;

package/dist/navigation/LinkButton.d.ts

@@ -0,0 +1,8 @@
+import { FC, HTMLProps, Ref } from 'react';
+import { Size } from '../types';
+export type LinkButtonProps = Omit<HTMLProps<HTMLButtonElement>, 'size' | 'type'> & {
+    size?: Size;
+    type?: HTMLButtonElement['type'];
+    ref?: Ref<HTMLButtonElement>;
+};
+export declare const LinkButton: FC<LinkButtonProps>;

package/dist/navigation/LinkButton.stories.d.ts

@@ -0,0 +1,10 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    component: import('react').FC<import('./LinkButton').LinkButtonProps>;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Medium: Story;
+export declare const Small: Story;
+export declare const Large: Story;

package/dist/navigation/Menu.d.ts

@@ -0,0 +1,35 @@
+import { FC, HTMLProps } from 'react';
+import { LinkProps } from 'react-router';
+import { CardProps } from '../surfaces';
+type ButtonProps = Omit<HTMLProps<HTMLButtonElement>, 'role' | 'disabled' | 'aria-disabled' | 'tabIndex' | 'type'>;
+type AnchorProps = Omit<LinkProps, 'role' | 'aria-disabled' | 'tabIndex' | 'type'>;
+export type MenuItemProps = (ButtonProps | AnchorProps) & {
+    selected?: boolean;
+    disabled?: boolean;
+};
+export type MenuProps = Omit<CardProps, 'role'> & {
+    /**
+     * Selector to determine elements that should be part of the focus sequence.
+     * Defaults to '[role="menuitem"]:not([disabled]):not([aria-disabled])'
+     */
+    focusableElementsSelector?: string;
+    /**
+     * Whether first focusable item should be focused or not.
+     * Defaults to false.
+     */
+    focusFirstItem?: boolean;
+    /**
+     * Optional callback invoked when a Menu.Item is clicked.
+     * If the Menu.Item has its own onClick, this callback will be called afterwards.
+     */
+    onItemClick?: () => void;
+};
+export declare const Menu: FC<MenuProps> & {
+    Item: FC<MenuItemProps>;
+    Separator: FC;
+    Title: FC<{
+        children?: import('react').ReactNode | undefined;
+    }>;
+    Misc: FC<HTMLProps<HTMLDivElement>>;
+};
+export {};

package/dist/navigation/Menu.stories.d.ts

@@ -0,0 +1,16 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    component: import('react').FC<import('./Menu').MenuProps> & {
+        Item: import('react').FC<import('./Menu').MenuItemProps>;
+        Separator: import('react').FC;
+        Title: import('react').FC<{
+            children?: import('react').ReactNode | undefined;
+        }>;
+        Misc: import('react').FC<import('react').HTMLProps<HTMLDivElement>>;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Base: Story;
+export declare const WithLinksAndMiscItems: Story;

package/dist/navigation/NavBar.d.ts

@@ -0,0 +1,16 @@
+import { FC, HTMLProps } from 'react';
+import { LinkProps } from 'react-router';
+import { RequiredReactNode } from '../types';
+import { DropdownProps } from './Dropdown';
+type ItemProps = {
+    active?: boolean;
+};
+export type NavBarProps = HTMLProps<HTMLElement> & {
+    brand: RequiredReactNode;
+};
+export declare const BaseNavBar: FC<NavBarProps>;
+export declare const NavBar: FC<NavBarProps> & {
+    MenuItem: FC<LinkProps & ItemProps>;
+    Dropdown: FC<Omit<DropdownProps, "menuAlignment" | "buttonVariant" | "menuOffset"> & ItemProps>;
+};
+export {};

package/dist/navigation/NavBar.stories.d.ts

@@ -0,0 +1,18 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    component: import('react').FC<import('./NavBar').NavBarProps> & {
+        MenuItem: import('react').FC<import('react-router').LinkProps & {
+            active?: boolean;
+        }>;
+        Dropdown: import('react').FC<Omit<import('./Dropdown').DropdownProps, "menuAlignment" | "buttonVariant" | "menuOffset"> & {
+            active?: boolean;
+        }>;
+    };
+    tags: string[];
+    argTypes: {
+        children: import('storybook/internal/csf').InputType;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Base: Story;

package/dist/navigation/NavPills.d.ts

@@ -0,0 +1,10 @@
+import { FC, PropsWithChildren } from 'react';
+import { LinkProps } from 'react-router';
+export type PillProps = LinkProps;
+export type NavPillsProps = PropsWithChildren<{
+    fill?: boolean;
+    className?: string;
+}>;
+export declare const NavPills: FC<NavPillsProps> & {
+    Pill: FC<LinkProps>;
+};

package/dist/navigation/NavPills.stories.d.ts

@@ -0,0 +1,13 @@
+import { StoryObj } from '@storybook/react-vite';
+import { FC } from 'react';
+import { NavPillsProps } from './NavPills';
+declare const meta: {
+    component: FC<NavPillsProps> & {
+        Pill: FC<import('react-router').LinkProps>;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const LeftAligned: Story;
+export declare const Fill: Story;

package/dist/navigation/Paginator.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+export type PaginatorProps = {
+    pagesCount: number;
+    currentPage: number;
+} & ({
+    onPageChange: (currentPage: number) => void;
+} | {
+    urlForPage: (pageNumber: number) => string;
+});
+export declare const Paginator: FC<PaginatorProps>;

package/dist/navigation/Paginator.stories.d.ts

@@ -0,0 +1,18 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    component: import('react').FC<import('./Paginator').PaginatorProps>;
+    tags: string[];
+    decorators: ((Story: import('storybook/internal/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+        pagesCount: number;
+        currentPage: number;
+        onPageChange: (currentPage: number) => void;
+    } | {
+        pagesCount: number;
+        currentPage: number;
+        urlForPage: (pageNumber: number) => string;
+    }>) => import("react").JSX.Element)[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const ButtonBased: Story;
+export declare const LinkBased: Story;

package/dist/navigation/RowDropdown.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { DropdownProps } from './Dropdown';
+export type RowDropdownProps = Omit<DropdownProps, 'caretless' | 'buttonContent' | 'buttonVariant'>;
+export declare const RowDropdown: FC<RowDropdownProps> & {
+    Item: FC<import('./Menu').MenuItemProps>;
+    Separator: FC;
+    Title: FC<{
+        children?: import('react').ReactNode | undefined;
+    }>;
+    Misc: FC<import('react').HTMLProps<HTMLDivElement>>;
+};

package/dist/navigation/RowDropdown.stories.d.ts

@@ -0,0 +1,24 @@
+import { StoryObj } from '@storybook/react-vite';
+import { RowDropdownProps } from './RowDropdown';
+declare const meta: {
+    component: import('react').FC<RowDropdownProps> & {
+        Item: import('react').FC<import('./Menu').MenuItemProps>;
+        Separator: import('react').FC;
+        Title: import('react').FC<{
+            children?: import('react').ReactNode | undefined;
+        }>;
+        Misc: import('react').FC<import('react').HTMLProps<HTMLDivElement>>;
+    };
+    tags: string[];
+    argTypes: {
+        buttonLabel: {
+            type: "string";
+        };
+        buttonSize: import('storybook/internal/csf').InputType;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Base: Story;
+export declare const Small: Story;
+export declare const Large: Story;

package/dist/navigation/index.d.ts

@@ -0,0 +1,7 @@
+export * from './Dropdown';
+export * from './LinkButton';
+export * from './Menu';
+export * from './NavBar';
+export * from './NavPills';
+export * from './Paginator';
+export * from './RowDropdown';

package/dist/ordering/OrderingDropdown.d.ts

@@ -0,0 +1,12 @@
+import { Order } from '..';
+import { DropdownProps } from '../navigation';
+export type OrderingDropdownProps<T extends string = string> = Omit<DropdownProps, 'buttonContent'> & {
+    items: Record<T, string>;
+    order: Order<T>;
+    onChange: (newOrder: Order<T>) => void;
+    prefixed?: boolean;
+};
+/**
+ * A dropdown specifically designed to determine order field and direction.
+ */
+export declare function OrderingDropdown<T extends string = string>({ items, order, onChange, prefixed, buttonVariant, ...rest }: OrderingDropdownProps<T>): import("react").JSX.Element;

package/dist/ordering/OrderingDropdown.stories.d.ts

@@ -0,0 +1,17 @@
+import { StoryObj } from '@storybook/react-vite';
+import { OrderingDropdown } from './OrderingDropdown';
+declare const meta: {
+    component: typeof OrderingDropdown;
+    tags: string[];
+    argTypes: {
+        buttonVariant: {
+            options: string[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Base: Story;
+export declare const AsLink: Story;
+export declare const AsText: Story;
+export declare const NonPrefixed: Story;

package/dist/ordering/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ordering';
+export * from './OrderingDropdown';

package/dist/ordering/ordering.d.ts

@@ -0,0 +1,25 @@
+export type OrderDir = 'ASC' | 'DESC' | undefined;
+export type Order<Fields> = {
+    field?: Fields;
+    dir?: OrderDir;
+};
+export type OrderDirChange<Fields extends string = string> = {
+    currentField?: Fields;
+    newField?: Fields;
+    currentOrderDir?: OrderDir;
+};
+/**
+ * Generate an Order dir for the new order field, based on previous order field and direction.
+ */
+export declare function determineOrderDir<Fields extends string = string>(orderDirChange: OrderDirChange<Fields>): OrderDir;
+/**
+ * Generate an Order object for the new order field, based on previous order field and direction.
+ */
+export declare function determineOrder<Fields extends string = string>(orderDirChange: OrderDirChange<Fields>): Order<Fields>;
+export declare const sortList: <List>(list: List[], { field, dir }: Order<keyof List>) => List[];
+/**
+ * Convert provided order object to string, with the pattern `${order.field}-${order.di}`.
+ * @return - A `string` if the `dir` prop is set, `undefined` otherwise.
+ */
+export declare const orderToString: <T>(order: Order<T>) => string | undefined;
+export declare const stringToOrder: <T>(order: string) => Order<T>;

package/dist/surfaces/Card.d.ts

@@ -0,0 +1,7 @@
+import { FC, HTMLProps } from 'react';
+export type CardProps = HTMLProps<HTMLDivElement>;
+export declare const Card: FC<CardProps> & {
+    Body: FC<CardProps>;
+    Header: FC<CardProps>;
+    Footer: FC<CardProps>;
+};

package/dist/surfaces/Card.stories.d.ts

@@ -0,0 +1,12 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    component: import('react').FC<import('./Card').CardProps> & {
+        Body: import('react').FC<import('./Card').CardProps>;
+        Header: import('react').FC<import('./Card').CardProps>;
+        Footer: import('react').FC<import('./Card').CardProps>;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Base: Story;

package/dist/surfaces/SimpleCard.d.ts

@@ -0,0 +1,16 @@
+import { FC, ReactNode } from 'react';
+import { Size } from '../types';
+import { CardProps } from './Card';
+type TitleProps = {
+    title: ReactNode;
+    titleSize?: Size;
+};
+type NoTitleProps = {
+    title?: never;
+    titleSize?: never;
+};
+export type SimpleCardProps = Omit<CardProps, 'title' | 'size'> & {
+    bodyClassName?: string;
+} & (TitleProps | NoTitleProps);
+export declare const SimpleCard: FC<SimpleCardProps>;
+export {};

package/dist/surfaces/SimpleCard.stories.d.ts

@@ -0,0 +1,11 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    component: import('react').FC<import('./SimpleCard').SimpleCardProps>;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Base: Story;
+export declare const SmallTitle: Story;
+export declare const LargeTitle: Story;
+export declare const NoTitle: Story;

package/dist/surfaces/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Card';
+export * from './SimpleCard';

package/dist/theme/index.d.ts

@@ -0,0 +1,15 @@
+export declare const BRAND_COLOR_DM = "#4696e5";
+export declare const BRAND_COLOR_ALPHA_DM = "rgba(70, 150, 229, 0.4)";
+export declare const BRAND_COLOR_LM = "#2078CF";
+export declare const BRAND_COLOR_ALPHA_LM = "rgba(32, 120, 207, 0.4)";
+export declare const brandColor: () => "#4696e5" | "#2078CF";
+export declare const brandColorAlpha: () => "rgba(70, 150, 229, 0.4)" | "rgba(32, 120, 207, 0.4)";
+export declare const HIGHLIGHTED_COLOR = "#f77f28";
+export declare const HIGHLIGHTED_COLOR_ALPHA = "rgba(247, 127, 40, 0.4)";
+export declare const PRIMARY_LIGHT_COLOR = "white";
+export declare const PRIMARY_DARK_COLOR = "#161b22";
+export type Theme = 'dark' | 'light';
+export declare const changeThemeInMarkup: (theme: Theme) => void | undefined;
+export declare const isDarkThemeEnabled: () => boolean;
+export declare const getSystemPreferredTheme: (_matchMedia?: ((query: string) => MediaQueryList) & typeof matchMedia) => Theme;
+export declare const useTheme: (initialTheme?: Theme) => readonly [Theme, import('react').Dispatch<import('react').SetStateAction<Theme>>];

package/dist/types.d.ts

@@ -0,0 +1,3 @@
+import { ReactNode } from 'react';
+export type Size = 'sm' | 'md' | 'lg';
+export type RequiredReactNode = Exclude<ReactNode, undefined | null>;

package/dist/utils/CopyToClipboardButton.d.ts

@@ -0,0 +1,13 @@
+import { FC, HTMLProps } from 'react';
+import { Size } from '../types';
+export type CopyToClipboardButtonProps = Omit<HTMLProps<HTMLButtonElement>, 'type' | 'onClick' | 'size'> & {
+    /** Text to be copied when the button is clicked */
+    text: string;
+    /** Size of the button. Defaults to `lg` */
+    size?: Size;
+    /** Test seam */
+    initialCopied?: boolean;
+    /** Test seam */
+    navigator_?: typeof globalThis.navigator;
+};
+export declare const CopyToClipboardButton: FC<CopyToClipboardButtonProps>;

package/dist/utils/CopyToClipboardButton.stories.d.ts

@@ -0,0 +1,8 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    component: import('react').FC<import('./CopyToClipboardButton').CopyToClipboardButtonProps>;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Base: Story;

package/dist/utils/colors.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Determines if a color is light or not, based on its perceived lightness.
+ *
+ * For an RGB color, lightness is represented as a number from 0 to 256.
+ * The lower the number, the darker is the color perceived.
+ *
+ * HSP by Darel Rex Finley https://alienryderflex.com/hsp.html
+ */
+export declare function isLightColor(colorHex: string): boolean;

package/dist/utils/index.d.ts

@@ -0,0 +1,3 @@
+export * from './colors';
+export * from './CopyToClipboardButton';
+export * from './query';

package/dist/utils/query.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Parses provided query string into an object.
+ * Parameters ending with "[]" will be considered arrays and returned as a single prop with all values.
+ */
+export declare const parseQueryString: <T>(search: string) => T;
+/**
+ * Stringify an object of query parameters.
+ * Keys explicitly defined with undefined value will be skipped.
+ * Arrays will be appended multiple times with the "[]" suffix in the param name.
+ * All values are cast to string.
+ */
+export declare const stringifyQueryParams: (params: Record<string, unknown | unknown[] | undefined>) => string;

package/package.json

@@ -28,14 +28,15 @@
     "build": "vite build && cp ./src/tailwind.preset.css ./dist/tailwind.preset.css",
     "test": "vitest run",
     "test:ci": "npm run test -- --coverage",
-    "lint": "eslint dev src test",
+    "lint": "eslint src test .storybook",
     "lint:fix": "npm run lint -- --fix",
     "types": "tsc",
-    "dev": "vite serve --host=0.0.0.0 --port 3001"
+    "storybook": "storybook dev -p 3001",
+    "storybook:build": "storybook build"
   },
   "dependencies": {
-    "@floating-ui/react": "^0.27.16",
-    "@vitest/browser-playwright": "^4.0.8",
+    "@floating-ui/react": "^0.27.19",
+    "@vitest/browser-playwright": "^4.1.9",
     "clsx": "^2.1.1"
   },
   "peerDependencies": {
@@ -47,7 +48,7 @@
     "@fortawesome/react-fontawesome": "^3.0.0",
     "react": "^19.1",
     "react-dom": "^19.1",
-    "react-router": "^7.0.2",
+    "react-router": "^8.0.1 || ^7.0.2",
     "tailwindcss": "^4.0.1"
   },
   "peerDependenciesMeta": {
@@ -57,31 +58,36 @@
   },
   "devDependencies": {
     "@shlinkio/eslint-config-js-coding-standard": "~3.7.0",
-    "@stylistic/eslint-plugin": "^5.5.0",
-    "@tailwindcss/vite": "^4.1.17",
+    "@storybook/addon-docs": "^10.4.6",
+    "@storybook/react-vite": "^10.4.6",
+    "@stylistic/eslint-plugin": "^5.7.1",
+    "@tailwindcss/vite": "^4.3.1",
     "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.0",
+    "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "@total-typescript/shoehorn": "^0.1.2",
-    "@types/react": "^19.2.2",
-    "@types/react-dom": "^19.2.2",
-    "@vitejs/plugin-react": "^5.1.0",
+    "@types/node": "^26.0.0",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.2",
     "@vitest/browser": "^4.0.3",
-    "@vitest/coverage-v8": "^4.0.8",
-    "axe-core": "^4.11.0",
-    "eslint": "^9.39.1",
+    "@vitest/coverage-v8": "^4.1.2",
+    "axe-core": "^4.12.1",
+    "eslint": "^9.39.2",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-compiler": "^19.0.0-beta-714736e-20250131",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-simple-import-sort": "^12.1.1",
+    "eslint-plugin-storybook": "^10.2.10",
     "history": "^5.3.0",
-    "playwright": "^1.56.1",
-    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.46.3",
-    "vite": "^7.2.2",
-    "vite-plugin-dts": "^4.5.4",
+    "playwright": "^1.61.0",
+    "storybook": "^10.3.6",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.58.0",
+    "unplugin-dts": "^1.0.2",
+    "vite": "^8.0.16",
     "vitest": "^4.0.3"
   },
   "browserslist": [
@@ -90,5 +96,5 @@
     "not ie <= 11",
     "not op_mini all"
   ],
-  "version": "1.3.1"
+  "version": "1.5.0"
 }