@helpwave/hightide 0.0.8 → 0.0.11

package/dist/components/examples/TableExample.d.ts

@@ -0,0 +1,9 @@
+import type { TableProps } from '../Table';
+export type DataType = {
+    id: string;
+    name: string;
+    age: number;
+};
+export declare const exampleData: DataType[];
+declare const TableExample: ({ data: initialData }: Pick<TableProps<DataType>, "data">) => import("react/jsx-runtime").JSX.Element;
+export default TableExample;

package/dist/components/examples/TableExample.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { addElementToTable, defaultTableStatePagination, defaultTableStateSelection, removeFromTableSelection, Table } from '../Table';
+import { Input } from '../user-input/Input';
+import { SolidButton, TextButton } from '../Button';
+import { SortButton } from '../SortButton';
+export const exampleData = [
+    { id: 'data1', name: 'Name 1', age: 23 },
+    { id: 'data2', name: 'Name 2', age: 21 },
+    { id: 'data3', name: 'Name 3', age: 32 },
+    { id: 'data4', name: 'Name 4', age: 42 },
+    { id: 'data5', name: 'Name 5', age: 17 },
+    { id: 'data6', name: 'Name 6', age: 26 },
+    { id: 'data7', name: 'Name 7', age: 19 },
+    { id: 'data8', name: 'Name 8', age: 31 }
+];
+const TableExample = ({ data: initialData }) => {
+    const [data, setData] = useState(initialData);
+    const [tableState, setTableState] = useState({
+        pagination: defaultTableStatePagination,
+        selection: defaultTableStateSelection
+    });
+    useEffect(() => {
+        setData(initialData);
+    }, [initialData]);
+    const [sorting, setSorting] = useState();
+    const [sortingKey, ascending] = sorting !== null && sorting !== void 0 ? sorting : ['', 'ascending'];
+    const idMapping = (data) => data.id;
+    const sortingFunctions = {
+        id: {
+            ascending: (t1, t2) => t1.id.localeCompare(t2.id),
+            descending: (t1, t2) => t1.id.localeCompare(t2.id) * -1,
+        },
+        name: {
+            ascending: (t1, t2) => t1.name.localeCompare(t2.name),
+            descending: (t1, t2) => t1.name.localeCompare(t2.name) * -1,
+        },
+        age: {
+            ascending: (t1, t2) => t1.age - t2.age,
+            descending: (t1, t2) => (t1.age - t2.age) * -1,
+        }
+    };
+    return (_jsxs("div", { className: "col gap-y-12 items-center", children: [_jsx(Table, { stateManagement: [tableState, (newTableState) => {
+                        setTableState(newTableState);
+                        setData(data);
+                    }], data: data, identifierMapping: idMapping, rowMappingToCells: dataObject => [
+                    _jsx("span", { className: "textstyle-title-md w-[100px] text-ellipsis overflow-hidden block", children: dataObject.id }, "id"),
+                    _jsx(Input, { value: dataObject.name, onChange: text => {
+                            setData(data.map(value => value.id === dataObject.id ? { ...dataObject, name: text } : value));
+                            setSorting(undefined);
+                        } }, "name"),
+                    _jsx(Input, { type: "number", value: dataObject.age.toString(), onChange: text => {
+                            setData(data.map(value => value.id === dataObject.id ? { ...dataObject, age: parseInt(text) } : value));
+                            setSorting(undefined);
+                        } }, "age"),
+                    _jsx(TextButton, { color: "negative", onClick: () => {
+                            const newData = data.filter(value => value.id !== dataObject.id);
+                            setData(newData);
+                            setTableState(removeFromTableSelection(tableState, [dataObject], data.length, idMapping));
+                        }, children: "Delete" }, "delete")
+                ], header: [
+                    _jsx(SortButton, { ascending: sortingKey === 'id' ? ascending : undefined, onClick: newTableSorting => {
+                            setSorting(['id', newTableSorting]);
+                            setData(data.sort(sortingFunctions.id[newTableSorting]));
+                        }, children: _jsx("span", { className: "textstyle-table-header", children: "Id" }) }, "headerId"),
+                    _jsx(SortButton, { ascending: sortingKey === 'name' ? ascending : undefined, onClick: newTableSorting => {
+                            setSorting(['name', newTableSorting]);
+                            setData(data.sort(sortingFunctions.name[newTableSorting]));
+                        }, children: _jsx("span", { className: "textstyle-table-header", children: "Name" }) }, "name"),
+                    _jsx(SortButton, { ascending: sortingKey === 'age' ? ascending : undefined, onClick: newTableSorting => {
+                            setSorting(['age', newTableSorting]);
+                            setData(data.sort(sortingFunctions.age[newTableSorting]));
+                        }, children: _jsx("span", { className: "textstyle-table-header", children: "age" }, "age") }, "name"),
+                    _jsx(_Fragment, {})
+                ] }), _jsxs("div", { className: "row gap-x-2", children: [_jsx(SolidButton, { className: "w-auto", onClick: () => {
+                            const newData = {
+                                id: Math.random().toString(),
+                                name: 'Name ' + data.length,
+                                age: Math.ceil(Math.random() * 100)
+                            };
+                            const withNewData = [...data, newData];
+                            const sorted = sortingKey ? withNewData.sort(sortingFunctions[sortingKey][ascending]) : withNewData;
+                            setData(sorted);
+                            setTableState(addElementToTable(tableState, sorted, newData, idMapping));
+                        }, children: 'Add Data' }), _jsx(TextButton, { className: "w-auto", onClick: () => {
+                            const selectedData = data.filter((d) => { var _a; return (_a = tableState.selection) === null || _a === void 0 ? void 0 : _a.currentSelection.includes(idMapping(d)); });
+                            const unselectedData = data.filter((d) => { var _a; return !((_a = tableState.selection) === null || _a === void 0 ? void 0 : _a.currentSelection.includes(idMapping(d))); });
+                            setData(unselectedData);
+                            setTableState(removeFromTableSelection(tableState, selectedData, data.length, idMapping));
+                        }, children: 'Remove all selected' })] })] }));
+};
+export default TableExample;

package/dist/components/examples/TextareaExample.d.ts

@@ -0,0 +1,6 @@
+import type { TextareaProps } from '../user-input/Textarea';
+export type TextareaExampleProps = Omit<TextareaProps, 'onChange' | 'onEditCompleted'>;
+/**
+ * Example for the Textarea component
+ */
+export declare const TextareaExample: ({ value, ...props }: TextareaExampleProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/examples/TextareaExample.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Textarea } from '../user-input/Textarea';
+/**
+ * Example for the Textarea component
+ */
+export const TextareaExample = ({ value, ...props }) => {
+    const [text, setText] = useState(value);
+    return (_jsx(Textarea, { ...props, value: text, onChange: setText, onEditCompleted: setText }));
+};

package/dist/components/examples/TileExample.d.ts

@@ -0,0 +1,9 @@
+import type { TileProps } from '../layout/Tile';
+export type TileExampleProps = Omit<TileProps, 'prefix' | 'suffix'> & {
+    prefix: boolean;
+    suffix: boolean;
+};
+/**
+ * An Example for using the tile
+ */
+export declare const TileExample: ({ prefix, suffix, ...restProps }: TileExampleProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/examples/TileExample.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Info, X } from 'lucide-react';
+import { Tile } from '../layout/Tile';
+/**
+ * An Example for using the tile
+ */
+export const TileExample = ({ prefix, suffix, ...restProps }) => {
+    return (_jsx(Tile, { ...restProps, prefix: prefix ? _jsx(Info, { size: 20 }) : undefined, suffix: suffix ? _jsx(X, { size: 20 }) : undefined }));
+};

package/dist/components/examples/Title.js

@@ -0,0 +1 @@
+"use strict";

package/dist/components/examples/date/DateTimePickerExample.d.ts

@@ -0,0 +1,10 @@
+import type { DateTimePickerProps } from '../../user-input/DateAndTimePicker';
+import type { DatePickerProps } from '../../date/DatePicker';
+import type { TimePickerProps } from '../../date/TimePicker';
+import type { YearMonthPickerProps } from '../../date/YearMonthPicker';
+import type { DayPickerProps } from '../../date/DayPicker';
+export type DateTimePickerExampleProps = Omit<DateTimePickerProps, 'datePickerProps' | 'timePickerProps'> & Pick<DatePickerProps, 'initialDisplay'> & Pick<TimePickerProps, 'is24HourFormat' | 'minuteIncrement'> & Pick<YearMonthPickerProps, 'showValueOpen'> & Pick<DayPickerProps, 'markToday' | 'weekStart'>;
+/**
+ * Example for the DateTimePicker
+ */
+export declare const DateTimePickerExample: ({ value, onChange, onRemove, onFinish, initialDisplay, is24HourFormat, minuteIncrement, showValueOpen, markToday, weekStart, ...props }: DateTimePickerExampleProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/examples/date/DateTimePickerExample.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { DateTimePicker } from '../../user-input/DateAndTimePicker';
+import { noop } from '../../../util/noop';
+/**
+ * Example for the DateTimePicker
+ */
+export const DateTimePickerExample = ({ value, onChange = noop, onRemove = noop, onFinish = noop, initialDisplay, is24HourFormat, minuteIncrement, showValueOpen, markToday, weekStart, ...props }) => {
+    const [time, setTime] = useState(value);
+    useEffect(() => setTime(value), [value]);
+    return (_jsx(DateTimePicker, { ...props, value: time, onChange: date => {
+            onChange(date);
+            setTime(date);
+        }, onRemove: () => {
+            onRemove();
+            setTime(new Date());
+        }, onFinish: date => {
+            onFinish(date);
+            setTime(date);
+        }, timePickerProps: { is24HourFormat, minuteIncrement }, datePickerProps: { initialDisplay, dayPickerProps: { markToday, weekStart }, yearMonthPickerProps: { showValueOpen } } }));
+};

package/dist/components/examples/properties/CheckboxPropertyExample.d.ts

@@ -0,0 +1,8 @@
+import type { CheckboxPropertyProps } from '../../properties/CheckboxProperty';
+export type CheckboxPropertyExampleProps = Omit<CheckboxPropertyProps, 'onChange' | 'onRemove'> & {
+    readOnly: boolean;
+};
+/**
+ * Example for using the CheckboxProperty
+ */
+export declare const CheckboxPropertyExample: ({ value, ...restProps }: CheckboxPropertyExampleProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/examples/properties/CheckboxPropertyExample.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { CheckboxProperty } from '../../properties/CheckboxProperty';
+/**
+ * Example for using the CheckboxProperty
+ */
+export const CheckboxPropertyExample = ({ value = false, ...restProps }) => {
+    const [usedValue, setUsedValue] = useState(value);
+    useEffect(() => {
+        setUsedValue(value);
+    }, [value]);
+    return (_jsx(CheckboxProperty, { ...restProps, onChange: setUsedValue, value: usedValue }));
+};

package/dist/components/examples/properties/DatePropertyExample.d.ts

@@ -0,0 +1,8 @@
+import type { DatePropertyProps } from '../../properties/DateProperty';
+export type DatePropertyExampleProps = DatePropertyProps & {
+    readOnly: boolean;
+};
+/**
+ * Example for using the DateProperty
+ */
+export declare const DatePropertyExample: ({ value, onChange, onRemove, onEditComplete, ...restProps }: DatePropertyExampleProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/examples/properties/DatePropertyExample.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { DateProperty } from '../../properties/DateProperty';
+import { noop } from '../../../util/noop';
+/**
+ * Example for using the DateProperty
+ */
+export const DatePropertyExample = ({ value, onChange = noop, onRemove = noop, onEditComplete = noop, ...restProps }) => {
+    const [usedDate, setUsedDate] = useState(value);
+    useEffect(() => {
+        setUsedDate(value);
+    }, [value]);
+    return (_jsx(DateProperty, { ...restProps, onChange: date => {
+            setUsedDate(date);
+            onChange(date);
+        }, onEditComplete: date => {
+            setUsedDate(date);
+            onEditComplete(date);
+        }, onRemove: () => {
+            setUsedDate(undefined);
+            onRemove();
+        }, value: usedDate }));
+};

package/dist/components/examples/properties/MultiSelectPropertyExample.d.ts

@@ -0,0 +1,8 @@
+import type { MultiSelectPropertyProps } from '../../properties/MultiSelectProperty';
+export type MultiSelectPropertyExample = Omit<MultiSelectPropertyProps<string>, 'onChange' | 'onRemove' | 'search' | 'selectedDisplay'> & {
+    enableSearch: boolean;
+};
+/**
+ * Example for using the MultiSelectProperty
+ */
+export declare const MultiSelectPropertyExample: ({ options, hintText, enableSearch, ...restProps }: MultiSelectPropertyExample) => import("react/jsx-runtime").JSX.Element;

package/dist/components/examples/properties/MultiSelectPropertyExample.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { MultiSelectProperty } from '../../properties/MultiSelectProperty';
+/**
+ * Example for using the MultiSelectProperty
+ */
+export const MultiSelectPropertyExample = ({ options, hintText, enableSearch, ...restProps }) => {
+    const [usedOptions, setUsedOptions] = useState(options);
+    useEffect(() => {
+        setUsedOptions(options);
+    }, [options]);
+    useEffect(() => {
+        setUsedOptions(options.map(value => ({ ...value, selected: false })));
+    }, [hintText, options]);
+    return (_jsx(MultiSelectProperty, { ...restProps, options: usedOptions, search: enableSearch ? { initialSearch: '', searchMapping: value => [value.label] } : undefined, onChange: setUsedOptions, onRemove: () => setUsedOptions(usedOptions.map(value => ({ ...value, selected: false }))), hintText: hintText }));
+};

package/dist/components/examples/properties/NumberPropertyExample.d.ts

@@ -0,0 +1,6 @@
+import type { NumberPropertyProps } from '../../properties/NumberProperty';
+export type NumberPropertyExampleProps = Omit<NumberPropertyProps, 'onChange' | 'onRemove'>;
+/**
+ * Example for using the NumberProperty
+ */
+export declare const NumberPropertyExample: ({ value, ...restProps }: NumberPropertyExampleProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/examples/properties/NumberPropertyExample.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { NumberProperty } from '../../properties/NumberProperty';
+/**
+ * Example for using the NumberProperty
+ */
+export const NumberPropertyExample = ({ value, ...restProps }) => {
+    const [usedValue, setUsedValue] = useState(value);
+    useEffect(() => {
+        setUsedValue(value);
+    }, [value]);
+    return (_jsx(NumberProperty, { ...restProps, onChange: setUsedValue, onRemove: () => setUsedValue(undefined), value: usedValue }));
+};

package/dist/components/examples/properties/SelectPropertyExample.d.ts

@@ -0,0 +1,6 @@
+import type { SingleSelectPropertyProps } from '../../properties/SelectProperty';
+export type SingleSelectPropertyExample = Omit<SingleSelectPropertyProps<string>, 'onChange' | 'onRemove' | 'searchMapping'>;
+/**
+ * Example for using the SingleSelectProperty
+ */
+export declare const SingleSelectPropertyExample: ({ value, options, hintText, ...restProps }: SingleSelectPropertyExample) => import("react/jsx-runtime").JSX.Element;

package/dist/components/examples/properties/SelectPropertyExample.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { SingleSelectProperty } from '../../properties/SelectProperty';
+/**
+ * Example for using the SingleSelectProperty
+ */
+export const SingleSelectPropertyExample = ({ value, options, hintText, ...restProps }) => {
+    const [usedValue, setUsedValue] = useState(value);
+    useEffect(() => {
+        setUsedValue(undefined);
+    }, [hintText]);
+    useEffect(() => {
+        if (options.find(value1 => value1.value === value)) {
+            setUsedValue(value);
+        }
+    }, [value, options]);
+    return (_jsx(SingleSelectProperty, { ...restProps, value: usedValue, options: options, searchMapping: value1 => [value1.value], onChange: setUsedValue, onRemove: () => setUsedValue(undefined), hintText: hintText }));
+};

package/dist/components/examples/properties/TextPropertyExample.d.ts

@@ -0,0 +1,8 @@
+import type { TextPropertyProps } from '../../properties/TextProperty';
+export type TextPropertyExampleProps = Omit<TextPropertyProps, 'onChange' | 'onRemove'> & {
+    readOnly: boolean;
+};
+/**
+ * Example for using the TextProperty
+ */
+export declare const TextPropertyExample: ({ value, ...restProps }: TextPropertyExampleProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/examples/properties/TextPropertyExample.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { TextProperty } from '../../properties/TextProperty';
+/**
+ * Example for using the TextProperty
+ */
+export const TextPropertyExample = ({ value, ...restProps }) => {
+    const [usedValue, setUsedValue] = useState(value);
+    useEffect(() => {
+        setUsedValue(value);
+    }, [value]);
+    return (_jsx(TextProperty, { ...restProps, onChange: setUsedValue, onRemove: () => setUsedValue(undefined), value: usedValue }));
+};

package/dist/components/icons/Helpwave.d.ts

@@ -0,0 +1,10 @@
+import type { SVGProps } from 'react';
+export type HelpwaveProps = SVGProps<SVGSVGElement> & {
+    color?: string;
+    animate?: 'none' | 'loading' | 'pulse' | 'bounce';
+    size?: number;
+};
+/**
+ * The helpwave loading spinner based on the svg logo.
+ */
+export declare const Helpwave: ({ color, animate, size, ...props }: HelpwaveProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/icons/Helpwave.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { clsx } from 'clsx';
+/**
+ * The helpwave loading spinner based on the svg logo.
+ */
+export const Helpwave = ({ color = 'currentColor', animate = 'none', size = 64, ...props }) => {
+    const isLoadingAnimation = animate === 'loading';
+    let svgAnimationKey = '';
+    if (animate === 'pulse') {
+        svgAnimationKey = 'animate-pulse';
+    }
+    else if (animate === 'bounce') {
+        svgAnimationKey = 'animate-bounce';
+    }
+    if (size < 0) {
+        console.error('size cannot be less than 0');
+        size = 64;
+    }
+    return (_jsx("svg", { width: size, height: size, viewBox: "0 0 888 888", fill: "none", strokeLinecap: "round", strokeWidth: 48, ...props, children: _jsxs("g", { className: clsx(svgAnimationKey), children: [_jsx("path", { className: clsx({ 'animate-wave-big-left-up': isLoadingAnimation }), d: "M144 543.235C144 423.259 232.164 326 340.92 326", stroke: color, strokeDasharray: "1000" }), _jsx("path", { className: clsx({ 'animate-wave-big-right-down': isLoadingAnimation }), d: "M537.84 544.104C429.084 544.104 340.92 446.844 340.92 326.869", stroke: color, strokeDasharray: "1000" }), _jsx("path", { className: clsx({ 'animate-wave-small-left-up': isLoadingAnimation }), d: "M462.223 518.035C462.223 432.133 525.348 362.495 603.217 362.495", stroke: color, strokeDasharray: "1000" }), _jsx("path", { className: clsx({ 'animate-wave-small-right-down': isLoadingAnimation }), d: "M745.001 519.773C666.696 519.773 603.218 450.136 603.218 364.233", stroke: color, strokeDasharray: "1000" })] }) }));
+};

package/dist/components/icons/Tag.d.ts

@@ -0,0 +1,10 @@
+import type { ImageProps } from 'next/image';
+export type TagProps = Omit<ImageProps, 'src' | 'alt'>;
+/**
+ * Tag icon from flaticon
+ *
+ * https://www.flaticon.com/free-icon/price-tag_721550?term=label&page=1&position=8&origin=tag&related_id=721550
+ *
+ * When using it make attribution
+ */
+export declare const TagIcon: ({ className, width, height, ...props }: TagProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/icons/Tag.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Image from 'next/image';
+/**
+ * Tag icon from flaticon
+ *
+ * https://www.flaticon.com/free-icon/price-tag_721550?term=label&page=1&position=8&origin=tag&related_id=721550
+ *
+ * When using it make attribution
+ */
+export const TagIcon = ({ className, width = 16, height = 16, ...props }) => {
+    return (_jsx(Image, { ...props, width: width, height: height, alt: "", src: "https://cdn.helpwave.de/icons/label.png", className: className }));
+};

package/dist/components/layout/Carousel.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+type CarouselProps = {
+    children: ReactNode[];
+    animationTime?: number;
+    isLooping?: boolean;
+    isAutoLooping?: boolean;
+    autoLoopingTimeOut?: number;
+    autoLoopAnimationTime?: number;
+    hintNext?: boolean;
+    arrows?: boolean;
+    dots?: boolean;
+    /**
+     * Percentage that is allowed to be scrolled further
+     */
+    overScrollThreshold?: number;
+    blurColor?: string;
+    className?: string;
+    heightClassName?: string;
+    widthClassName?: string;
+};
+export declare const Carousel: ({ children, animationTime, isLooping, isAutoLooping, autoLoopingTimeOut, autoLoopAnimationTime, hintNext, arrows, dots, overScrollThreshold, blurColor, className, heightClassName, widthClassName, }: CarouselProps) => import("react/jsx-runtime").JSX.Element;
+export {};