@hortiview/shared-components 0.0.5201 → 0.0.5404

package/README.md

@@ -42,11 +42,13 @@ Additionally the library provides form components using [react-hook-form](https:
    1. [FormSelect](#formselect)
    1. [FormSlider](#formslider)
    1. [FormText](#formtext)
+1. [GenericTable](#generictable)   
 1. [HashTabView](#hashtabview)
 1. [HeaderFilter](#headerfilter)
 1. [InfoGroup](#infogroup)
 1. [Iconify](#iconify)
 1. [ListArea](#listarea)
+1. [LoadingSpinner](#loadingspinner)
 1. [ScrollBar](#scrollbar)
 1. [SearchBar](#searchbar)
 1. [VerticalDivider](#verticaldivider)
@@ -55,13 +57,13 @@ Additionally the library provides form components using [react-hook-form](https:
 
 Presents an Banner containing important messages. Can used in different colors and you can add an optional action.
 
-```typescript
+```jsx
 import { AlertBanner } from '@hortiview/shared-components';
 
-<AlertBanner 
-    text='My Alert' 
-    color='danger' // | 'info' | 'success' 
-    action={<MyButton />} 
+<AlertBanner
+  text='My Alert'
+  color='danger' // | 'info' | 'success'
+  action={<MyButton />}
 />;
 ```
 
@@ -69,7 +71,7 @@ import { AlertBanner } from '@hortiview/shared-components';
 
 Can used to show a kind off main and detail view. On the left side you will have a list of elements and on the right a detail section of the element selected.
 
-```typescript
+```jsx
 import { BaseListElement, BaseView } from '@hortiview/shared-components';
 import { Link, useLocation } from 'react-router-dom';
 
@@ -112,7 +114,7 @@ return (
 
 Provides a heading component with optional children which are rendered on the right side of the heading.
 
-```typescript
+```jsx
 import { BasicHeading } from '@hortiview/shared-components';
 
 <BasicHeading heading={'Header'}>
@@ -124,7 +126,7 @@ import { BasicHeading } from '@hortiview/shared-components';
 
 This is a component showing blocks in a row/column view.
 
-```typescript
+```jsx
 import { BlockView, BlockDto } from '@hortiview/shared-components';
 
 const blocks: BlockDto = [
@@ -141,7 +143,7 @@ const blocks: BlockDto = [
 
 This is a component to render a menu button, that opens several action-points in a context-menu
 
-```typescript
+```jsx
 import { ContextMenu } from '@hortiview/shared-components';
 
 const actions = [
@@ -166,7 +168,7 @@ const actions = [
 
 A modal to confirm a deletion.
 
-```typescript
+```jsx
 import { DeleteModal } from '@hortiview/shared-components';
 
 const [open, setOpen] = useState<string>();
@@ -193,7 +195,7 @@ const onDelete = () => {
 
 A red notice or hint with to show in the ui.
 
-```typescript
+```jsx
 
 import { Disclaimer } form '@hortiview/shared-components'
 
@@ -205,7 +207,7 @@ import { Disclaimer } form '@hortiview/shared-components'
 
 A basic view if no content is available.
 
-```typescript
+```jsx
 import { EmptyView } from '@hortiview/shared-components';
 
 <EmptyView title='No Content' subtitle='nothing' icon='grass' />;
@@ -230,7 +232,7 @@ npm install react-hook-form
 
 Provides a checkbox form component
 
-```typescript
+```jsx
 import { FormCheckBox } from '@hortiview/shared-components';
 import { FormProvider, SubmitHandler, useForm } from 'react-hook-form';
 
@@ -256,7 +258,7 @@ const { handleSubmit } = formMethods;
 
 Provides a datepicker form component
 
-```typescript
+```jsx
 import { FormDatePicker } from '@hortiview/shared-components';
 import { FormProvider, SubmitHandler, useForm } from 'react-hook-form';
 
@@ -281,7 +283,7 @@ const { handleSubmit } = formMethods;
 
 Provides a radio button form component
 
-```typescript
+```jsx
 import { FormRadio } from '@hortiview/shared-components';
 import { FormProvider, SubmitHandler, useForm } from 'react-hook-form';
 
@@ -308,7 +310,7 @@ const { handleSubmit } = formMethods;
 
 Provides a select form component
 
-```typescript
+```jsx
 import { FormSelect } from '@hortiview/shared-components';
 import { FormProvider, SubmitHandler, useForm } from 'react-hook-form';
 
@@ -348,7 +350,7 @@ const typeOptions = [
 
 Provides a slider form component
 
-```typescript
+```jsx
 import { FormSlider } from '@hortiview/shared-components';
 import { FormProvider, SubmitHandler, useForm } from 'react-hook-form';
 
@@ -369,7 +371,7 @@ const { handleSubmit } = formMethods;
 
 Provides a text form component
 
-```typescript
+```jsx
 import { FormText } from '@hortiview/shared-components';
 import { FormProvider, SubmitHandler, useForm } from 'react-hook-form';
 
@@ -393,11 +395,74 @@ const { handleSubmit } = formMethods;
 </FormProvider>;
 ```
 
+### GenericTable
+
+A dynamic table, that renders a table based on a type and an array of data (of the specified type)
+
+```jsx
+import { GenericTable, CellTemplateProps, CellTemplate } from '@hortiview/shared-components';
+import {useTranslation} from 'react-router-dom';
+
+type DataType = {
+  id: string;
+  name: string;
+  users: User[];
+  description: string
+  field1: Date;
+}
+
+const filterArea = [
+      <Select onClick={filterLogic} />
+];
+
+const templates: CellTemplate = {
+  field1: (props: CellTemplateProps<DataType>) => {
+    const { field1 } = props.row.original;
+    return <Badge text={field1.toLocaleString()}/>
+  }
+}
+
+const getAction = (dataObject: DataType) => {
+  return [
+    {
+      primaryText: 'Edit Element',
+      secondaryText: 'in Modal',
+      onClick: () => openEdit(dataObject.id),
+      leadingBlock: 'edit',
+    },
+  ]
+}
+
+const { t } = useTranslation();
+const data: DataType[] = LoadData();
+
+const filteredData = useMemo(() => {
+  return filterLogic(data)
+})
+
+
+return <GenericTable<DataType>
+  data={filteredData}
+  tableActions={filterArea}
+  hiddenColumns={['id', 'users']}
+  order={[
+    'name',
+    'description',
+    'field1'
+  ]}
+  cellTemplates={templates}
+  headerTranslation={key => t(`overview.${key}`)}
+  noContentText={t('noText')}
+  pagination
+  getRowActions={getActions}
+/>
+```
+
 ### HashTabView
 
 A tab view component, which can use the hash value in the url to render the tab regarding to the hash. For the best experience use `react-router`.
 
-```typescript
+```jsx
 import { HashTabView, HashTab } from '@hortiview/shared-components';
 
 const tabs: HashTab[] = [
@@ -416,7 +481,7 @@ const tabs: HashTab[] = [
 
 A filter dropdown component which can be used in headers like a tabview header. It supports a single filter value only.
 
-```typescript
+```jsx
 import { HeaderFilter } from '@hortiview/shared-components';
 
 const [filterValue, setFilterValue] = useState<string>();
@@ -436,7 +501,7 @@ const [filterValue, setFilterValue] = useState<string>();
 
 Renders a section with several informations rendered next to each other (or below for mobile view)
 
-```typescript
+```jsx
 import { InfoGroup } from '@hortiview/shared-components';
 
 const fields: FieldItem[] = [
@@ -453,7 +518,7 @@ const fields: FieldItem[] = [
 
 You can also render a multiline section, that receives an array if FieldItem-Arrays instead of a single FieldItem-Array
 
-```typescript
+```jsx
 import { InfoGroup } from '@hortiview/shared-components';
 
 const multiLineFields: FieldItem[][] = [
@@ -480,6 +545,7 @@ const multiLineFields: FieldItem[][] = [
 
 Provides some custom icons based on the elements Icon API. Currently supported:
 
+- battery_0 | battery_20 | battery_50 | battery_80 | battery_100
 - block
 - block-delete
 - cloud-rain
@@ -491,7 +557,7 @@ Provides some custom icons based on the elements Icon API. Currently supported:
 - subscription
 - wind
 
-```typescript
+```jsx
 import { Iconify } from '@hortiview/shared-components';
 
 <Iconify icon='wind' iconSize='large' />;
@@ -501,7 +567,7 @@ import { Iconify } from '@hortiview/shared-components';
 
 Shows some items in a list. The list can be used as a navigation list and provides search. For the best experience use `react-router`.
 
-```typescript
+```jsx
 import { BaseListElement, ListArea } from '@hortiview/shared-components';
 import { Link, useLocation } from 'react-router-dom';
 
@@ -525,11 +591,45 @@ const elements: BaseListElement[] = [{
 />;
 ```
 
+### LoadingSpinner
+
+Renders a loading spinner. The loading spinner can be customized in size, text and color. It can also be centered.
+
+```JSX
+import { LoadingSpinner } from  '@hortiview/shared-components';
+
+const [loading, setLoading] = useState(false)
+
+//logic that changes state of loading to true
+
+if(loading) return <LoadingSpinner />
+return <DefaultComponent />
+```
+
+There is also a big loading spinner, that blurs the background and renders an spinning hortiview-logo.
+
+```JSX
+import { LoadingSpinner } from  '@hortiview/shared-components';
+
+const [loading, setLoading] = useState(false)
+
+const onSubmit = () => {
+  setLoading(true);
+  await someComplexLogic();
+  setLoading(false);
+}
+return <>
+  {loading && <LoadingSpinner size='big' text='Loading something ...' />}
+  <Form obSubmit={onSubmit} />
+  <Button type='submit' />
+</>
+```
+
 ### ScrollBar
 
 Provides a scrollbar in hortiview styling. Add it a classname on your component.
 
-```typescript
+```jsx
 
 import { ScrollbarY, ScrollbarX } from '@hortiview/shared-components';
 
@@ -547,7 +647,7 @@ import { ScrollbarY, ScrollbarX } from '@hortiview/shared-components';
 
 Provides a searchbar component.
 
-```typescript
+```jsx
 import { SearchBar } from '@hortiview/shared-components';
 
 const [searchValue, setSearchValue] = useState('');
@@ -563,7 +663,7 @@ const [searchValue, setSearchValue] = useState('');
 
 Provides a simple vertical divider.
 
-```typescript
+```jsx
 import { VerticalDivider } from '@hortiview/shared-components';
 
 <VerticalDivider className={'custom'} height='3rem' />;

package/dist/BigLoadingSpinner-Df2k3xOD.js

@@ -0,0 +1,18 @@
+import "./assets/BigLoadingSpinner.css";
+import { jsx as r, jsxs as a } from "react/jsx-runtime";
+import { TypoBody as e } from "@element/react-components";
+import { Iconify as n } from "./components/Iconify/Iconify.js";
+const d = "_loadingBigOverlay_7dxo1_1", t = "_bigLoadSpinnerCard_7dxo1_12", g = "_bigLoadSpinnerCardText_7dxo1_27", s = "_logo_7dxo1_33", l = "_rotate360deg_7dxo1_1", o = {
+  loadingBigOverlay: d,
+  bigLoadSpinnerCard: t,
+  bigLoadSpinnerCardText: g,
+  logo: s,
+  rotate360deg: l
+}, c = ({ text: i }) => /* @__PURE__ */ a("div", { className: o.bigLoadSpinnerCard, role: "progressbar", children: [
+  /* @__PURE__ */ r(n, { icon: "hortiview", className: o.logo, "data-testid": "logo-icon" }),
+  /* @__PURE__ */ r(e, { tag: "p", bold: !0, level: 1, className: o.bigLoadSpinnerCardText, children: i })
+] }), b = (i) => /* @__PURE__ */ r("div", { className: o.loadingBigOverlay, children: /* @__PURE__ */ r(c, { ...i }) });
+export {
+  b as B,
+  o as s
+};

package/dist/assets/BigLoadingSpinner.css

@@ -0,0 +1 @@
+._loadingBigOverlay_7dxo1_1{z-index:500;position:fixed;top:0;left:0;width:100%;height:100%;backdrop-filter:blur(2px);background-color:#0000001a}._bigLoadSpinnerCard_7dxo1_12{background-color:var(--lmnt-theme-background);text-align:center;inline-size:auto;padding:2rem 2rem 1.5rem;border-radius:1rem;box-shadow:0 .5rem .625rem -.3125rem #0003,0 .375rem 1.875rem .3125rem #0000001f,0 1rem 1.5rem .125rem #00000024;z-index:500;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}._bigLoadSpinnerCardText_7dxo1_27{padding:0;margin:1rem 0 0;text-align:center}._logo_7dxo1_33{width:4.75rem!important;height:4.75rem!important}@keyframes _rotate360deg_7dxo1_1{0%{transform:rotate(0)}to{transform:rotate(360deg)}}._logo_7dxo1_33 path[id=Subtract_2]{transform-origin:center;animation:_rotate360deg_7dxo1_1 1s linear infinite}

package/dist/assets/GenericTable.css

@@ -0,0 +1 @@
+._topBar_1msoo_1 [class*=lmnt-table__top-bar__title]{display:none}._filterBar_1msoo_5{padding:1rem;width:inherit!important}._emptyTable_1msoo_9{height:16rem}[class*=mnt-pagination][class*=mdc-data-table__pagination]{border-top:1px solid var(--lmnt-theme-on-secondary-stroke)}._elevation_1msoo_17{border-radius:.4rem;width:100%}._table_1msoo_22,._table_1msoo_22 [class*=mdc-data-table__table-container]{border-radius:.4rem}

package/dist/assets/LoadingSpinner.css

@@ -0,0 +1 @@
+._loadingSpinnerContainer_1f3ss_1{z-index:500;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--lmnt-theme-on-surface-high)}

package/dist/components/GenericTable/GenericTable.d.ts

@@ -0,0 +1,53 @@
+import { TableLayoutProps } from '../../types/GenericTable';
+/**
+ * Automatically creates a table layout based on the given data
+ * @see {@link TableLayoutProps} for even more information on the props
+ * @example <GenericTable<YourElementType> data={data} />
+ * @example
+ * A more complex example with all possible options:
+ * ```jsx
+ * <GenericTable<ComplexElement>
+ *    data={filteredData}
+ *     tableActions={filterArea}
+ *     hiddenColumns={['id', 'description', 'hiddenInfo', 'users']}
+ *     order={[
+ *       'name',
+ *       'rating',
+ *       'status',
+ *     ]}
+ *     cellTemplates={complexTemplates}
+ *     headerTranslation={key => t(`complex.overview.${key}`)}
+ *     noContentText={t('complexstuff.noDataAvailable')}
+ *     pagination
+ *     getRowActions={getComplexActions}
+ *   />
+ * ```
+ * @param data data to be displayed in the table, will be used to create the header if dataType is not provided
+ * @param tableActions top bar elements to be displayed above the table (e.g. filters)
+ * @param noContentText text to be displayed when no data is available
+ * @param hiddenColumns columns to be hidden n the table, passed as an array of column ids (keys)
+ * @param order order of the columns in the table, passed as an array of column ids (keys)
+ * @param cellTemplates cell templates to be applied to the cells as {key: function}-Object
+ * @example
+ * ```jsx
+ * {
+ *    Status: (props: CellTemplateProps<GenericElement>) => {
+ *        const {status} = props.row.original;
+ *        return <LabelBadge label={'Status'} themeColor={getColorForStatus(status)} />
+ *    }
+ * }
+ * ```
+ * @param tableActions top bar elements to be displayed above the table (e.g. filters)
+ * @example
+ * ```jsx
+ * [
+ *    <Button key='add' label='Add' onClick={somethingAwesome} />,
+ *    <Select onChange={somethingEvenCooler} />
+ * ]
+ * ```
+ * @param pagination whether to show pagination or not
+ * @param getRowActions function that will be called to get the actions for a row to be displayed as actions in a context menu
+ * @param headerTranslation function that will be called to translate the headers by its key
+ * @returns a table based on a given type and data
+ */
+export declare const GenericTable: <T>({ data, hiddenColumns, order, cellTemplates, tableActions, noContentText, headerTranslation, pagination, getRowActions, }: TableLayoutProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/GenericTable/GenericTable.js

@@ -0,0 +1,89 @@
+import "../../assets/GenericTable.css";
+import { jsx as n } from "react/jsx-runtime";
+import { Elevation as h, Table as v, TableTopBar as y, Group as d, TypoSubtitle as B } from "@element/react-components";
+import { useMemo as b, Fragment as g } from "react";
+import { ContextMenu as T } from "../ContextMenu/ContextMenu.js";
+const x = "_topBar_1msoo_1", N = "_filterBar_1msoo_5", C = "_emptyTable_1msoo_9", I = "_elevation_1msoo_17", M = "_table_1msoo_22", m = {
+  topBar: x,
+  filterBar: N,
+  emptyTable: C,
+  elevation: I,
+  table: M
+}, W = (e, l) => {
+  if (!e)
+    return [];
+  let o = Object.keys(e).map((r) => r);
+  return l.length > 0 && (o = o.sort((r, u) => {
+    const p = l.findIndex((s) => s === r), i = l.findIndex((s) => s === u);
+    return p === -1 ? 1 : i === -1 ? -1 : p - i;
+  })), o;
+}, E = ({
+  data: e = [],
+  hiddenColumns: l = [],
+  order: o = [],
+  cellTemplates: r = void 0,
+  tableActions: u = [],
+  noContentText: p = "No data available",
+  headerTranslation: i = (f) => f,
+  pagination: s = !1,
+  getRowActions: c = void 0
+}) => {
+  const f = b(() => {
+    if (e.length === 0)
+      return [];
+    const a = W(e[0], o).map((t) => ({
+      id: t,
+      header: i(t),
+      accessor: t,
+      cellTemplate: r ? r[t] : void 0
+    }));
+    return c ? [...a, { id: "actions", header: "", accessor: "actions" }] : a;
+  }, [e, r, o, i, c]), _ = b(() => c ? e.map((a) => {
+    const t = /* @__PURE__ */ n(T, { actions: c(a), iconOrientation: "horizontal" });
+    return { ...a, actions: t };
+  }) : e, [e, c]);
+  return /* @__PURE__ */ n(h, { elevation: 1, className: m.elevation, children: /* @__PURE__ */ n(
+    v,
+    {
+      className: m.table,
+      fullWidth: !0,
+      alwaysUseDivTags: !0,
+      layout: "standard",
+      hiddenColumns: l,
+      data: _,
+      columns: f,
+      leadingContent: u.length > 0 && /* @__PURE__ */ n(
+        y,
+        {
+          className: m.topBar,
+          filterBar: /* @__PURE__ */ n(
+            d,
+            {
+              className: m.filterBar,
+              fullWidth: !0,
+              primaryAlign: "center",
+              secondaryAlign: "center",
+              children: u.map((a, t) => /* @__PURE__ */ n(g, { children: a }, `action_${t}`))
+            }
+          )
+        }
+      ),
+      paginated: s,
+      sortable: !0,
+      noContentIncludeTable: !!f,
+      noContentMessage: /* @__PURE__ */ n(
+        d,
+        {
+          fullWidth: !0,
+          primaryAlign: "center",
+          secondaryAlign: "center",
+          className: m.emptyTable,
+          children: /* @__PURE__ */ n(B, { children: p })
+        }
+      )
+    }
+  ) });
+};
+export {
+  E as GenericTable
+};

package/dist/components/GenericTable/GenericTable.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/GenericTable/GenericTable.test.js

@@ -0,0 +1,40 @@
+import { jsx as o, jsxs as B } from "react/jsx-runtime";
+import { r as d, s as t } from "../../react.esm-C0LtovhP.js";
+import { GenericTable as c } from "./GenericTable.js";
+import { d as u, t as i, g as e, v as m } from "../../vi.JYQecGiw-BbUbJcT8.js";
+u("GenericTable Test", () => {
+  const T = [];
+  i("render GenericTable with custom no content text", () => {
+    d(/* @__PURE__ */ o(c, { data: T, noContentText: "noContent" })), e(t.getByText("noContent")).toBeInTheDocument();
+  }), i("render GenericTable with data should render headers", () => {
+    d(/* @__PURE__ */ o(c, { data: [{ id: 1, name: "test" }] })), e(t.getByText("id")).toBeInTheDocument(), e(t.getByText("name")).toBeInTheDocument();
+  }), i("render GenericTable with hidden headers", () => {
+    d(/* @__PURE__ */ o(c, { data: [{ id: 1, name: "test" }], hiddenColumns: ["name"] })), e(t.getByText("id")).toBeInTheDocument(), e(t.queryByText("name")).not.toBeInTheDocument();
+  }), i("render GenericTable with custom header translation", () => {
+    d(/* @__PURE__ */ o(c, { data: [{ id: 1, name: "test" }], headerTranslation: (a) => a + ".translated" })), e(t.getByText("id.translated")).toBeInTheDocument(), e(t.getByText("name.translated")).toBeInTheDocument();
+  }), i("render GenericTable with custom cell template", () => {
+    d(/* @__PURE__ */ o(c, { data: [{ id: 1, name: "test" }], cellTemplates: { id: (a) => /* @__PURE__ */ B("div", { children: [
+      "label: ",
+      a.row.original.id
+    ] }) } })), e(t.getByText("label: 1")).toBeInTheDocument();
+  }), i("render GenericTable with custom table actions", () => {
+    const n = m.fn();
+    d(/* @__PURE__ */ o(c, { data: [{ id: 1, name: "test" }], tableActions: [/* @__PURE__ */ o("button", { "data-testid": "testButton", onClick: n, children: "testbutton" }, "test")] })), e(t.getByText("testbutton")).toBeInTheDocument(), t.getByTestId("testButton").click(), e(n).toHaveBeenCalled();
+  }), i("render GenericTable with custom pagination", () => {
+    d(/* @__PURE__ */ o(c, { data: [{ id: 1, name: "test" }, { id: 2, name: "test2" }, { id: 3, name: "test3" }], pagination: !0 })), e(t.getByText("1 - 3 of 3")).toBeInTheDocument(), e(t.getByText("last_page")).toBeInTheDocument();
+  }), i("render GenericTable with custom getRowActions", () => {
+    const n = [{ id: 1, name: "test" }], a = m.fn();
+    d(/* @__PURE__ */ o(c, { data: n, getRowActions: (l) => [
+      {
+        primaryText: "primText",
+        secondaryText: "secText",
+        onClick: () => a(l.id),
+        leadingBlock: "edit"
+      }
+    ] })), e(t.getByText("primText")).toBeInTheDocument(), t.getByText("primText").click(), e(a).toHaveBeenCalledWith(1);
+  }), i("render GenericTable with custom order", () => {
+    d(/* @__PURE__ */ o(c, { data: [{ id: 1, name: "test", age: 20 }], order: ["name", "age"] }));
+    const a = t.getByText("id"), r = t.getByText("name"), s = t.getByText("age");
+    e(r).toBeInTheDocument(), e(s).toBeInTheDocument(), e(a).toBeInTheDocument(), e(r.compareDocumentPosition(s)).toBe(4), e(s.compareDocumentPosition(a)).toBe(4);
+  });
+});

package/dist/components/Iconify/Iconify.d.ts

@@ -11,4 +11,20 @@ export type IconifyProps = {
      */
     pure?: boolean;
 } & Omit<IconProps, 'icon'>;
+/**
+ * A component that renders an icon from the available custom icons.
+ * @param icon The icon to display. The available icons are listed in the {@link AvailableCustomIcons} enum.
+ * @param pure If true, the icon will be rendered as an svg element instead of an icon component.
+ * @example <Iconify icon='farm' />
+ * @returns
+ */
 export declare const Iconify: React.FC<IconifyProps>;
+/**
+ * A component that renders an icon from the available custom icons.
+ * @param icon The icon to display. The available icons are listed in the {@link AvailableCustomIcons} enum.
+ * @param pure If true, the icon will be rendered as an svg element instead of an icon component.
+ * @example <Iconify icon='farm' />
+ * @experimental not in use at the moment
+ * @returns
+ */
+export declare const IconifyDynamic: React.FC<IconifyProps>;