@janrankenhohn/react-thumbnail-list 0.5.4 → 0.6.0

package/dist/types/components/DropdownInput.d.ts

@@ -0,0 +1,26 @@
+import { Breakpoint } from '@mui/material';
+import { ReactNode } from 'react';
+/**
+ * Displays a generic MUI select dropdown.
+ * Optinal collapses to a sort icon at a certain breakpoint
+ * @param props.label Select Label
+ * @param props.width * Width of the input field
+ * @param props.collapseBreakPoint * MUI breakpoint after that the select will collapse to the sort icon
+ * @param props.onChangeCallback * Callback function that gets triggered once a item is selected
+ * @param props.items * Array of items (name-value-pairs) that will be the select options
+ * @returns Drowpdown Input Component
+ */
+export default function DropdownInput(props: DropdownInputProps): import("react/jsx-runtime").JSX.Element;
+type DropdownInputProps = {
+    label: string;
+    width: string;
+    collapseBreakpoint?: Breakpoint;
+    defaultValue?: string;
+    icon?: ReactNode;
+    onChangeCallback: (value: string, name?: string) => void;
+    items: Array<{
+        name: string;
+        value: string;
+    }>;
+};
+export {};

package/dist/types/components/EllipsisContainer.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+/**
+ * Creates a ellipies text with webkit css styles
+ * @param props lineClamp: lines till ellipses
+ * @returns component
+ */
+export default function EllipsisContainer(props: EllipsisContainerProps): import("react/jsx-runtime").JSX.Element;
+type EllipsisContainerProps = {
+    lineClamp: {
+        xs: number;
+        sm: number;
+    };
+    children: ReactNode;
+};
+export {};

package/dist/types/components/ImageCropper.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+/**
+ * Currently UNUSED
+ * Can be used as parent component to crop a wrapped image
+ * @param props width: width for cropping
+ * height: height for cropping
+ * seperate xs and sm values for mui breakpoints
+ * @returns component
+ */
+export default function ImageCropper(props: ImageCropperProps): import("react/jsx-runtime").JSX.Element;
+type ImageCropperProps = {
+    width: {
+        xs: string;
+        sm: string;
+    };
+    height: {
+        xs: string;
+        sm: string;
+    };
+    children: ReactNode;
+};
+export {};

package/dist/types/components/ThumbnailList.d.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+import ThumbnailListMainContent from './ThumbnailListMainContent';
+import { ThumbnailListItemInterface } from '../interfaces/ThumbnailListItemInterface';
+import ThumbnailListConfigurationInterface from '../config/ThumbnailListConfiguration';
+/**
+ * Main Component: Renders all sub components
+ * Includes ThumbnailList Provider for context data
+ * @param props react children, items
+ * @returns component
+ */
+declare function ThumbnailList<T extends ThumbnailListItemInterface>(props: ThumbnailListProps<T>): import("react/jsx-runtime").JSX.Element;
+declare namespace ThumbnailList {
+    var MainContent: typeof ThumbnailListMainContent;
+    var Header: {
+        (props: {
+            children: ReactNode;
+            justifyContent?: "start" | "center" | "end" | "space-between";
+        }): import("react/jsx-runtime").JSX.Element;
+        SearchField: import("react").MemoExoticComponent<{
+            (): import("react/jsx-runtime").JSX.Element;
+            defaultProps: {
+                align: string;
+            };
+        }>;
+        FilterTags: typeof import("./ThumbnailListFilterTags").default;
+        Sort: typeof import("./ThumbnailListHeaderSort").default;
+    };
+}
+type ThumbnailListProps<T> = {
+    children: ReactNode;
+    items: T[];
+    config?: ThumbnailListConfigurationInterface<T>;
+};
+export default ThumbnailList;

package/dist/types/components/ThumbnailListFilterTag.d.ts

@@ -0,0 +1,12 @@
+import { Breakpoint } from '@mui/material';
+import { ReactNode } from 'react';
+export default function ThumbnailListFilterTag(props: ThumbnailListFilterTagProps): import("react/jsx-runtime").JSX.Element;
+type ThumbnailListFilterTagProps = {
+    collapseBreakpoint?: Breakpoint;
+    label: string;
+    value: string;
+    variant: 'filled' | 'outlined';
+    icon?: ReactNode;
+    onClickCallback?: (value: string) => void;
+};
+export {};

package/dist/types/components/ThumbnailListFilterTags.d.ts

@@ -0,0 +1,21 @@
+import { Breakpoint } from '@mui/material';
+import { ReactNode } from 'react';
+declare function ThumbnailListFilterTags<T>(props: ThumbnailListFilterTagsProps<T>): import("react/jsx-runtime").JSX.Element;
+declare namespace ThumbnailListFilterTags {
+    var defaultProps: {
+        align: string;
+        muiCollapseBreakpoint: string;
+    };
+}
+export type ThumbnailListItemTagType<T> = {
+    label: string;
+    key: keyof T;
+    icon?: ReactNode;
+    condition?: (value: any) => boolean;
+};
+type ThumbnailListFilterTagsProps<T> = {
+    tags: ThumbnailListItemTagType<T>[];
+    muiCollapseBreakpoint: Breakpoint;
+    align: AlignType;
+};
+export default ThumbnailListFilterTags;

package/dist/types/components/ThumbnailListHeader.d.ts

@@ -0,0 +1,19 @@
+import React, { ReactNode } from 'react';
+import ThumbnailListFilterTags from './ThumbnailListFilterTags';
+import ThumbnailListHeaderSort from './ThumbnailListHeaderSort';
+declare const ThumbnailListHeader: {
+    (props: ThumbnailListHeaderProps): import("react/jsx-runtime").JSX.Element;
+    SearchField: React.MemoExoticComponent<{
+        (): import("react/jsx-runtime").JSX.Element;
+        defaultProps: {
+            align: string;
+        };
+    }>;
+    FilterTags: typeof ThumbnailListFilterTags;
+    Sort: typeof ThumbnailListHeaderSort;
+};
+type ThumbnailListHeaderProps = {
+    children: ReactNode;
+    justifyContent?: 'start' | 'center' | 'end' | 'space-between';
+};
+export default ThumbnailListHeader;

package/dist/types/components/ThumbnailListHeaderSort.d.ts

@@ -0,0 +1,17 @@
+import { Breakpoint } from '@mui/material';
+declare function ThumbnailListHeaderSort<T>(props: ThumbnailListHeaderSortProps<T>): import("react/jsx-runtime").JSX.Element;
+declare namespace ThumbnailListHeaderSort {
+    var defaultProps: {
+        align: string;
+        muiBreakpoint: string;
+    };
+}
+type ThumbnailListHeaderSortProps<T> = {
+    items: {
+        label: string;
+        key: keyof T;
+    }[];
+    muiBreakpoint: Breakpoint;
+    align: AlignType;
+};
+export default ThumbnailListHeaderSort;

package/dist/types/components/ThumbnailListItem.d.ts

@@ -0,0 +1,11 @@
+import React, { ReactNode } from 'react';
+export type ThumbnailListItemProps = {
+    id: string;
+    onClick?: (id: string) => any;
+    thumbnailUrl: string;
+    title: string;
+    subTitle: ReactNode;
+    infoLabel: ReactNode;
+};
+declare const _default: React.MemoExoticComponent<(props: ThumbnailListItemProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/dist/types/components/ThumbnailListItemContext.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { ThumbnailListItemInterface } from '../interfaces/ThumbnailListItemInterface';
+import { ConditionFunction } from '../utils/arrayHelper';
+type ThumbnailListItemContextType<T> = {
+    items: ThumbnailListItemInterface[];
+    setItems: React.Dispatch<React.SetStateAction<ThumbnailListItemInterface[]>>;
+    originalItems: T[];
+    setOriginalItems: React.Dispatch<React.SetStateAction<T[]>>;
+    tagFilterCallback: React.Dispatch<React.SetStateAction<{
+        tag: string;
+        condition: ConditionFunction<any> | undefined;
+    }>>;
+    tagAndCondition: {
+        tag: string;
+        condition: ConditionFunction<any> | undefined;
+    };
+    setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
+    setSortAscending: React.Dispatch<React.SetStateAction<boolean>>;
+    sortAscending: boolean;
+    sortBy: string;
+    setSortBy: React.Dispatch<React.SetStateAction<string>>;
+    isLoading: boolean;
+};
+export declare const ThumbnailListItemContext: React.Context<ThumbnailListItemContextType<any>>;
+export declare const useThumbnailListItemContext: <T>() => ThumbnailListItemContextType<T>;
+export {};

package/dist/types/components/ThumbnailListItemInfoLabel.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+export default function ThumbnailListItemInfoLabel(props: {
+    topContent?: ReactNode;
+    bottomContent?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/ThumbnailListItemTitle.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+export default function ThumbnailListItemTitle(props: {
+    title: string;
+    subTitle: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/ThumbnailListItemType.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export type ThumbnailListItemType = {
+    id: string;
+    title: ReactNode;
+    subTitle: ReactNode;
+    thumbnailUrl: string;
+    link: string;
+    label: ReactNode;
+};

package/dist/types/components/ThumbnailListMainContent.d.ts

@@ -0,0 +1,19 @@
+import BreakpointType from '../types/BreakpointType';
+declare function ThumbnailListMainContent(props: ThumbnailListMainContentProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ThumbnailListMainContent {
+    var defaultProps: {
+        spacing: number;
+        muiBreakpoints: {
+            xs: number;
+            sm: number;
+            md: number;
+            lg: number;
+            xl: number;
+        };
+    };
+}
+export default ThumbnailListMainContent;
+type ThumbnailListMainContentProps = {
+    muiBreakpoints?: BreakpointType;
+    spacing: number;
+};

package/dist/types/components/ThumbnailListSearchField.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+declare const _default: React.MemoExoticComponent<{
+    (): import("react/jsx-runtime").JSX.Element;
+    defaultProps: {
+        align: string;
+    };
+}>;
+export default _default;

package/dist/types/config/ThumbnailListConfiguration.d.ts

@@ -0,0 +1,7 @@
+import { ThumbnailListItemInterface } from '../interfaces/ThumbnailListItemInterface';
+export default interface ThumbnailListConfigurationInterface<T> {
+    sortBy?: keyof T;
+    sortAscending?: boolean;
+    tag?: keyof T;
+}
+export declare const defaultConfiguration: ThumbnailListConfigurationInterface<ThumbnailListItemInterface>;

package/dist/types/hooks/useFilteredThumbnailListItems.d.ts

@@ -0,0 +1,13 @@
+import { ThumbnailListItemInterface } from '../interfaces/ThumbnailListItemInterface';
+/**
+ * Filters a list of event by a search term
+ * @param allEvents event list that will be formatted
+ * @param initialSearchTerm
+ * @returns
+ */
+declare const useFilteredThumbnailListItems: (allItems: ThumbnailListItemInterface[], initialSearchTerm?: string) => {
+    searchTerm: string;
+    setSearchTerm: import("react").Dispatch<import("react").SetStateAction<string>>;
+    filteredItems: ThumbnailListItemInterface[];
+};
+export default useFilteredThumbnailListItems;

package/dist/types/hooks/usePagedThumbnailListItems.d.ts

@@ -0,0 +1,15 @@
+import { ThumbnailListItemInterface } from '../interfaces/ThumbnailListItemInterface';
+/**
+ * Pages a list of event by paging number
+ * @param allEvents event list that will be formatted
+ * @param initialPagingNumber
+ * @returns
+ */
+declare const usePagedThumbnailListItems: (allItems: ThumbnailListItemInterface[], initialEntriesPerPage?: number, initialPage?: number) => {
+    entriesPerPage: number;
+    setEntriesPerPage: import("react").Dispatch<import("react").SetStateAction<number>>;
+    page: number;
+    setPage: import("react").Dispatch<import("react").SetStateAction<number>>;
+    filteredItems: ThumbnailListItemInterface[];
+};
+export default usePagedThumbnailListItems;

package/dist/types/hooks/useSortedThumbnailListItems.d.ts

@@ -0,0 +1,8 @@
+declare const useSortedThumbnailListItems: <T>(allItems: T[], initialSortBy: string, initialSortAscending: boolean) => {
+    sortBy: string;
+    sortAscending: boolean;
+    setSortBy: import("react").Dispatch<import("react").SetStateAction<string>>;
+    setSortAscending: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    sortedItems: T[];
+};
+export default useSortedThumbnailListItems;

package/dist/types/hooks/useTagFilteredThumbnailListItems.d.ts

@@ -0,0 +1,19 @@
+import { ConditionFunction } from '../utils/arrayHelper';
+type UseTagFilteredThumbnailListItemsProps<T> = {
+    allItems: T[];
+    initialTag: string;
+    initialCondition?: ConditionFunction<any>;
+};
+declare const useTagFilteredThumbnailListItems: <T>({ allItems, initialTag, initialCondition, }: UseTagFilteredThumbnailListItemsProps<T>) => {
+    tagAndCondition: {
+        tag: string;
+        condition: ConditionFunction<any>;
+    };
+    setTagAndCondition: import("react").Dispatch<import("react").SetStateAction<{
+        tag: string;
+        condition: ConditionFunction<any>;
+    }>>;
+    tagFilteredItems: T[];
+    setTagWithCondition: (t: string, c: (value: any) => boolean) => void;
+};
+export default useTagFilteredThumbnailListItems;

package/dist/types/hooks/useWithLoading.d.ts

@@ -0,0 +1,5 @@
+declare const useWithLoading: () => {
+    isLoading: boolean;
+    withLoading: (fn: any, ...args: any[]) => Promise<void>;
+};
+export default useWithLoading;

package/dist/types/index.d.ts

@@ -0,0 +1 @@
+export { default as ThumbnailList } from './components/ThumbnailList';

package/dist/types/interfaces/ThumbnailListItemInterface.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export interface ThumbnailListItemInterface {
+    id: string;
+    title: string;
+    subTitle?: ReactNode;
+    thumbnailUrl: string;
+    onClick?: (id: string) => any;
+    label?: ReactNode;
+}

package/dist/types/tests/mocks/MockListItems.d.ts

@@ -0,0 +1,41 @@
+export declare const items: ({
+    id: string;
+    name: string;
+    title: string;
+    subTitle: string;
+    label: string;
+    isScheduled: boolean;
+    thumbnailUrl: string;
+    link: string;
+    startDateTimeStamp?: undefined;
+} | {
+    id: string;
+    name: string;
+    title: string;
+    subTitle: string;
+    label: string;
+    thumbnailUrl: string;
+    link: string;
+    isScheduled?: undefined;
+    startDateTimeStamp?: undefined;
+} | {
+    id: string;
+    title: string;
+    subTitle: string;
+    label: string;
+    thumbnailUrl: string;
+    link: string;
+    name?: undefined;
+    isScheduled?: undefined;
+    startDateTimeStamp?: undefined;
+} | {
+    id: string;
+    title: string;
+    subTitle: string;
+    label: string;
+    startDateTimeStamp: number;
+    thumbnailUrl: string;
+    link: string;
+    name?: undefined;
+    isScheduled?: undefined;
+})[];

package/dist/types/types/AlignType.d.ts

@@ -0,0 +1 @@
+type AlignType = 'start' | 'end';

package/dist/types/types/BreakpointType.d.ts

@@ -0,0 +1,8 @@
+type BreakpointType = {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+};
+export default BreakpointType;

package/dist/types/utils/arrayHelper.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Generic method that sorts an array of items based on an item key
+ * @param values The array that should be sorted
+ * @param orderType The key of the entity that the array should be sorted by
+ * @returns A new reference of the ordered array
+ */
+export declare function orderByArray<T>(values: T[], orderType: keyof T): T[];
+export type ConditionFunction<T> = (value: T) => boolean;
+export declare function filterByTag<T>(array: T[], tagType: keyof T, condition?: ConditionFunction<unknown>): T[];

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@janrankenhohn/react-thumbnail-list",
-  "version": "0.5.4",
-  "main": "dist/index.cjs.js",
+  "version": "0.6.0",
+  "main": "dist/index.js",
   "module": "dist/index.esm.js",
+  "types": "dist/types/index.d.ts",
   "files": [
-    "./dist"
+    "dist"
   ],
   "repository": {
     "type": "git",
@@ -44,10 +45,6 @@
     "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
     "@eslint/js": "^9.1.1",
-    "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^25.0.7",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-typescript": "^8.3.3",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -63,10 +60,15 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^3.2.5",
     "react-router": "^6.26.1",
-    "rollup": "^2.79.1",
-    "rollup-plugin-delete": "^2.0.0",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@rollup/plugin-url": "^8.0.2",
+    "@rollup/plugin-commonjs": "^25.0.8",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "rollup-plugin-dts": "^6.1.1",
+    "rollup": "^4.18.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-ts": "^3.4.5",
+    "rollup-plugin-typescript2": "^0.36.0",
     "typescript-eslint": "^7.8.0"
   },
   "peerDependencies": {
@@ -78,8 +80,5 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "web-vitals": "^2.1.4"
-  },
-  "overrides": {
-    "typescript": "^5.3.2"
   }
 }