@shlinkio/shlink-frontend-kit 1.4.0 → 1.5.0

package/README.md

@@ -1,6 +1,30 @@
 # Shlink frontend kit
 
-React components and utilities for Shlink frontend projects
+Design system, component library and utilities for Shlink React frontend projects.
+
+## Installation
+
+```shell
+npm install @shlinkio/shlink-frontend-kit
+```
+
+## Usage
+
+```tsx
+import { Button, useToggle } from '@shlinkio/shlink-frontend-kit';
+import './tailwind.css';
+
+export const App = () => {
+  const { flag, toggle } = useToggle();
+  
+  return (
+    <div className="flex flex-col gap-3">
+      <p>The flag is {flag ? 'true' : 'false'}</p>
+      <Button onClick={toggle}>Click me</Button>
+    </>
+  )
+};
+```
 
 ## Tailwind
 

package/dist/content/Details.d.ts

@@ -0,0 +1,9 @@
+import { FC, HTMLProps, ReactNode } from 'react';
+export type DetailsProps = Omit<HTMLProps<HTMLDetailsElement>, 'ref'> & {
+    summary: ReactNode;
+    summaryClasses?: string;
+};
+/**
+ * Hide extended details under a collapsible area with an always-visible summary.
+ */
+export declare const Details: FC<DetailsProps>;

package/dist/content/Details.stories.d.ts

@@ -0,0 +1,11 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    component: import('react').FC<import('./Details').DetailsProps>;
+    tags: string[];
+    argTypes: {
+        children: import('storybook/internal/csf').InputType;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Base: Story;

package/dist/content/Listbox.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode, RefObject } from 'react';
+import { CardProps } from '../surfaces';
+export type ListboxProps<Item> = Omit<CardProps, 'id' | 'role' | 'aria-orientation'> & {
+    /** Map of items in the listbox, with a key representing them uniquely */
+    items: Map<string, Item>;
+    /** Invoked when the active item is selected via click or `Enter` */
+    onSelectItem: (item: Item) => void;
+    /** Invoked when the active item changes via vertical arrows or hover */
+    onActiveItemChange?: (key: string, item: Item) => void;
+    /** To customize the shape of an item */
+    renderItem: (item: Item) => ReactNode;
+    /** Used to link with the element controlling this listbox */
+    id: string;
+    /**
+     * Allows to optionally anchor this listbox to another element.
+     * If provided, it will attach arrow key and Enter press listeners to interact with the listbox.
+     */
+    anchor?: RefObject<HTMLElement | null>;
+    /**
+     * Message to display when the list of items is empty.
+     * Defaults to 'No items'.
+     */
+    noItemsMessage?: string;
+};
+export declare function Listbox<Item>({ id, items, onSelectItem, onActiveItemChange, renderItem, className, noItemsMessage, anchor, 'aria-label': label, ...rest }: ListboxProps<Item>): import("react").JSX.Element;

package/dist/content/Table.d.ts

@@ -0,0 +1,33 @@
+import { FC, HTMLProps, PropsWithChildren, ReactNode } from 'react';
+import { Size } from '../types';
+export type SectionType = 'head' | 'body' | 'footer';
+export type TableElementProps = PropsWithChildren & {
+    className?: string;
+};
+export type CellProps = HTMLProps<HTMLTableCellElement> & {
+    /**
+     * The name of the column to be displayed in small resolutions when the table is responsive, where the cells collapse.
+     * It is ignored for non-responsive tables.
+     */
+    columnName?: string;
+    /**
+     * Whether to use a th or td tag. If not provided, it is inferred based on the section, using td when inside tbody,
+     * and th when inside thead or tfoot
+     */
+    type?: 'td' | 'th';
+};
+export type TableProps = Omit<HTMLProps<HTMLTableElement>, 'size'> & {
+    header: ReactNode;
+    footer?: ReactNode;
+    /**
+     * By default, the table rows will collapse under large resolutions, and the headers will be hidden.
+     * Set `responsive={false}` to avoid this behavior.
+     */
+    responsive?: boolean;
+    /** Determines the padding in every cell. Defaults to md */
+    size?: Size;
+};
+export declare const Table: FC<TableProps> & {
+    Row: FC<HTMLProps<HTMLTableRowElement>>;
+    Cell: FC<CellProps>;
+};

package/dist/content/Table.stories.d.ts

@@ -0,0 +1,20 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    component: import('react').FC<import('./Table').TableProps> & {
+        Row: import('react').FC<import('react').HTMLProps<HTMLTableRowElement>>;
+        Cell: import('react').FC<import('./Table').CellProps>;
+    };
+    tags: string[];
+    argTypes: {
+        children: import('storybook/internal/csf').InputType;
+        header: import('storybook/internal/csf').InputType;
+        footer: import('storybook/internal/csf').InputType;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Responsive: Story;
+export declare const NonResponsiveInCard: Story;
+export declare const WithFooter: Story;
+export declare const Small: Story;
+export declare const Large: Story;

package/dist/content/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Details';
+export * from './Listbox';
+export * from './Table';

package/dist/feedback/CardModal.d.ts

@@ -0,0 +1,40 @@
+import { FC, ReactNode } from 'react';
+import { RequiredReactNode, Size } from '../types';
+import { ModalDialogProps } from './ModalDialog';
+type CommonCardModalProps = {
+    /** Modal header title */
+    title: RequiredReactNode;
+};
+type CoverCardModalProps = CommonCardModalProps & {
+    /**
+     * Cover dialogs have a body that span the whole dialog, and no buttons.
+     * The header overlaps the body with semi-transparent background.
+     */
+    variant: 'cover';
+};
+export type ExitAction = 'confirm' | 'cancel';
+type RegularCardModalProps = CommonCardModalProps & {
+    /** Danger dialogs use danger variants in title and confirm button */
+    variant?: 'default' | 'danger';
+    /** Determines the horizontal size of the dialog */
+    size?: Size | 'xl';
+    /** Value to display in confirm button. Defaults to 'Confirm' */
+    confirmText?: ReactNode;
+    /** Value to display in cancel button. Defaults to 'Cancel' */
+    cancelText?: ReactNode;
+    /** Whether the confirm button is disabled or not */
+    confirmDisabled?: boolean;
+    /**
+     * A footer with confirm and cancel buttons will be rendered if provided.
+     * Invoked when the confirm button is actioned.
+     */
+    onConfirm?: () => void;
+    /** Invoked after finishing the close transition */
+    onClosed?: (exitAction: ExitAction) => void;
+};
+export type CardModalProps = Omit<ModalDialogProps, 'title' | 'size'> & (CoverCardModalProps | RegularCardModalProps);
+/**
+ * A `ModalDialog` that renders a `Card` as its content
+ */
+export declare const CardModal: FC<CardModalProps>;
+export {};

package/dist/feedback/CardModal.stories.d.ts

@@ -0,0 +1,25 @@
+import { StoryObj } from '@storybook/react-vite';
+import { CardModalProps } from './CardModal';
+declare const meta: {
+    component: import('react').FC<CardModalProps>;
+    tags: string[];
+    argTypes: {
+        variant: {
+            control: "radio";
+            options: string[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Base: Story;
+export declare const Small: Story;
+export declare const Large: Story;
+export declare const ExtraLarge: Story;
+export declare const Danger: Story;
+export declare const Confirm: Story;
+export declare const DisabledConfirm: Story;
+export declare const DangerConfirm: Story;
+export declare const WithForm: Story;
+export declare const WithALotOfContent: Story;
+export declare const Cover: Story;

package/dist/feedback/Message.d.ts

@@ -0,0 +1,11 @@
+import { FC, PropsWithChildren } from 'react';
+export type MessageProps = PropsWithChildren<{
+    className?: string;
+    variant?: 'default' | 'error' | 'loading';
+    /** @deprecated Use loading variant instead */
+    loading?: boolean;
+}>;
+/**
+ * Component used to display a card with general information, about current page status, loading, etc.
+ */
+export declare const Message: FC<MessageProps>;

package/dist/feedback/Message.stories.d.ts

@@ -0,0 +1,11 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    component: import('react').FC<import('./Message').MessageProps>;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const DefaultMessage: Story;
+export declare const ErrorMessage: Story;
+export declare const LoadingMessage: Story;
+export declare const LoadingMessageWithCustomText: Story;

package/dist/feedback/ModalDialog.d.ts

@@ -0,0 +1,8 @@
+import { FC, HTMLProps } from 'react';
+export type ModalDialogProps = HTMLProps<HTMLDialogElement> & {
+    /** Whether the dialog is open or not */
+    open: boolean;
+    /** Invoked when the dialog is closed for any reason */
+    onClose: () => void;
+};
+export declare const ModalDialog: FC<ModalDialogProps>;

package/dist/feedback/Result.d.ts

@@ -0,0 +1,11 @@
+import { FC, PropsWithChildren } from 'react';
+import { Size } from '../types';
+export type ResultProps = PropsWithChildren<{
+    variant: 'success' | 'error' | 'warning';
+    className?: string;
+    size?: Size;
+}>;
+/**
+ * Component used to display the result of an operation, which can be a success, failure or warning.
+ */
+export declare const Result: FC<ResultProps>;

package/dist/feedback/Result.stories.d.ts

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