@hortiview/shared-components 0.0.5201 → 0.0.5409

package/dist/main.d.ts

@@ -7,11 +7,13 @@ export { ContextMenu } from './components/ContextMenu/ContextMenu';
 export { DeleteModal } from './components/DeleteModal/DeleteModal';
 export { Disclaimer } from './components/Disclaimer/Disclaimer';
 export { EmptyView } from './components/EmptyView/EmptyView';
+export { GenericTable } from './components/GenericTable/GenericTable';
 export { HashTabView } from './components/HashTabView/HashTabView';
 export { HeaderFilter } from './components/HeaderFilter/HeaderFilter';
 export { Iconify } from './components/Iconify/Iconify';
 export { InfoGroup } from './components/InfoGroup/InfoGroup';
 export { ListArea } from './components/ListArea/ListArea';
+export { LoadingSpinner } from './components/LoadingSpinner/Default/LoadingSpinner';
 export { ScrollbarX, ScrollbarY } from './components/Scrollbar/Scrollbar';
 export { SearchBar } from './components/SearchBar/SearchBar';
 export { VerticalDivider } from './components/VerticalDivider/VerticalDivider';
@@ -27,3 +29,4 @@ export { capitalizeFirstLetters } from './services/UtilService';
 export type { FieldItem } from './components/InfoGroup/InfoGroup';
 export type { HashTab } from './types/HashTab';
 export type { ListElement, BaseListElement } from './types/ListElement';
+export type { CellTemplate, CellTemplateProps, TableLayoutProps } from './types/GenericTable';

package/dist/main.js

@@ -4,51 +4,55 @@ import { BaseView as p } from "./components/BaseView/BaseView.js";
 import { BasicHeading as f } from "./components/BasicHeading/BasicHeading.js";
 import { BlockView as i } from "./components/BlockView/BlockView.js";
 import { ContextMenu as c } from "./components/ContextMenu/ContextMenu.js";
-import { DeleteModal as n } from "./components/DeleteModal/DeleteModal.js";
-import { Disclaimer as B } from "./components/Disclaimer/Disclaimer.js";
+import { DeleteModal as s } from "./components/DeleteModal/DeleteModal.js";
+import { Disclaimer as d } from "./components/Disclaimer/Disclaimer.js";
 import { EmptyView as S } from "./components/EmptyView/EmptyView.js";
-import { HashTabView as b } from "./components/HashTabView/HashTabView.js";
-import { HeaderFilter as u } from "./components/HeaderFilter/HeaderFilter.js";
-import { Iconify as D } from "./components/Iconify/Iconify.js";
-import { InfoGroup as A } from "./components/InfoGroup/InfoGroup.js";
-import { ListArea as H } from "./components/ListArea/ListArea.js";
-import { ScrollbarX as v, ScrollbarY as y } from "./components/Scrollbar/Scrollbar.js";
-import { SearchBar as M } from "./components/SearchBar/SearchBar.js";
-import { VerticalDivider as g } from "./components/VerticalDivider/VerticalDivider.js";
-import { FormCheckBox as E } from "./components/FormComponents/FormCheckBox/FormCheckBox.js";
-import { FormDatePicker as P } from "./components/FormComponents/FormDatePicker/FormDatePicker.js";
-import { FormRadio as X } from "./components/FormComponents/FormRadio/FormRadio.js";
-import { FormSelect as j } from "./components/FormComponents/FormSelect/FormSelect.js";
-import { FormSlider as J } from "./components/FormComponents/FormSlider/FormSlider.js";
-import { FormText as N } from "./components/FormComponents/FormText/FormText.js";
-import { AvailableCustomIcons as Q } from "./enums/AvailableCustomIcons.js";
-import { a as W } from "./useBreakpoint-DROHPVxO.js";
-import { capitalizeFirstLetters as _ } from "./services/UtilService.js";
+import { GenericTable as V } from "./components/GenericTable/GenericTable.js";
+import { HashTabView as u } from "./components/HashTabView/HashTabView.js";
+import { HeaderFilter as D } from "./components/HeaderFilter/HeaderFilter.js";
+import { Iconify as A } from "./components/Iconify/Iconify.js";
+import { InfoGroup as H } from "./components/InfoGroup/InfoGroup.js";
+import { ListArea as L } from "./components/ListArea/ListArea.js";
+import { LoadingSpinner as g } from "./components/LoadingSpinner/Default/LoadingSpinner.js";
+import { ScrollbarX as y, ScrollbarY as G } from "./components/Scrollbar/Scrollbar.js";
+import { SearchBar as z } from "./components/SearchBar/SearchBar.js";
+import { VerticalDivider as P } from "./components/VerticalDivider/VerticalDivider.js";
+import { FormCheckBox as X } from "./components/FormComponents/FormCheckBox/FormCheckBox.js";
+import { FormDatePicker as j } from "./components/FormComponents/FormDatePicker/FormDatePicker.js";
+import { FormRadio as J } from "./components/FormComponents/FormRadio/FormRadio.js";
+import { FormSelect as N } from "./components/FormComponents/FormSelect/FormSelect.js";
+import { FormSlider as Q } from "./components/FormComponents/FormSlider/FormSlider.js";
+import { FormText as W } from "./components/FormComponents/FormText/FormText.js";
+import { AvailableCustomIcons as _ } from "./enums/AvailableCustomIcons.js";
+import { a as rr } from "./useBreakpoint-DROHPVxO.js";
+import { capitalizeFirstLetters as er } from "./services/UtilService.js";
 export {
   t as AlertBanner,
-  Q as AvailableCustomIcons,
+  _ as AvailableCustomIcons,
   p as BaseView,
   f as BasicHeading,
   i as BlockView,
   c as ContextMenu,
-  n as DeleteModal,
-  B as Disclaimer,
+  s as DeleteModal,
+  d as Disclaimer,
   S as EmptyView,
-  E as FormCheckBox,
-  P as FormDatePicker,
-  X as FormRadio,
-  j as FormSelect,
-  J as FormSlider,
-  N as FormText,
-  b as HashTabView,
-  u as HeaderFilter,
-  D as Iconify,
-  A as InfoGroup,
-  H as ListArea,
-  v as ScrollbarX,
-  y as ScrollbarY,
-  M as SearchBar,
-  g as VerticalDivider,
-  _ as capitalizeFirstLetters,
-  W as useBreakpoints
+  X as FormCheckBox,
+  j as FormDatePicker,
+  J as FormRadio,
+  N as FormSelect,
+  Q as FormSlider,
+  W as FormText,
+  V as GenericTable,
+  u as HashTabView,
+  D as HeaderFilter,
+  A as Iconify,
+  H as InfoGroup,
+  L as ListArea,
+  g as LoadingSpinner,
+  y as ScrollbarX,
+  G as ScrollbarY,
+  z as SearchBar,
+  P as VerticalDivider,
+  er as capitalizeFirstLetters,
+  rr as useBreakpoints
 };

package/dist/types/GenericTable.d.ts

@@ -0,0 +1,100 @@
+/// <reference types="react" />
+import { ListItemProps } from '@element/react-components';
+/**
+ * Props for the GenericTable component {@link GenericTable}
+ * @template T the type of the data that will be displayed in the table
+ */
+export type TableLayoutProps<T> = {
+    /**
+     * data to be displayed in the table, will be used to create the header if dataType is not provided
+     */
+    data: T[];
+    /**
+     * columns to be hidden n the table, passed as an array of column ids (keys)
+     */
+    hiddenColumns?: (keyof T)[];
+    /**
+     * order of the columns in the table, passed as an array of column ids (keys)
+     */
+    order?: (keyof T)[];
+    /**
+     * 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)} />
+     *    }
+     * }
+     * ```
+     */
+    cellTemplates?: CellTemplate<T>;
+    /**
+     * top bar elements to be displayed above the table (e.g. filters)
+     * @example
+     * ```jsx
+     * [
+     *    <Button key='add' label='Add' onClick={somethingAwesome} />,
+     *    <Select onChange={somethingEvenCooler} />
+     * ]
+     * ```
+     */
+    tableActions?: JSX.Element[];
+    /**
+     * text to be displayed when no data is available
+     */
+    noContentText?: string;
+    /**
+     * whether to show pagination or not
+     */
+    pagination?: boolean;
+    /**
+     * function that will be called to translate the headers by its key
+     * @param key the key of the header to get the translation for
+     * @returns a (hopefully) translated string for the header
+     */
+    headerTranslation?: (key: string) => string;
+    /**
+     * function that will be called to get the actions for a row to be displayed as actions in a context menu
+     * @param row the row (element) that will be used in each action
+     * @returns an array of ListItemProps that will be shown as actions for the row
+     */
+    getRowActions?: (row: T) => ListItemProps[];
+};
+/**
+ * Props for the CellTemplate component {@link CellTemplate}
+ * @template T the type of the data that will be displayed in the table
+ * @example
+ * ```jsx
+ * {
+ *   Status: (props: CellTemplateProps<GenericElement>) => {
+ *      const {status} = props.row.original;
+ *     return <LabelBadge label={'Status'} themeColor={getColorForStatus(status)} />
+ *  }
+ * }
+ * ```
+ */
+export type CellTemplateProps<T> = {
+    row: {
+        original: T;
+    };
+};
+/**
+ * CellTemplate type to be used in the GenericTable component {@link GenericTable}
+ * @template T the type of the data that will be displayed in the table aka the type of the row
+ * by default the table will display all keys of the row, if you want to change the way a cell is displayed you can use this type
+ * to define a function that will be called for each cell of the given key in the row
+ * @example
+ * ```jsx
+ * {
+ *   Status: (props: CellTemplateProps<GenericElement>) => {
+ *     const {status} = props.row.original;
+ *    return <LabelBadge label={'Status'} themeColor={getColorForStatus(status)} />
+ *  }
+ * }
+ * ```
+ */
+export type CellTemplate<T> = {
+    [key in keyof T]?: (props: CellTemplateProps<T>) => JSX.Element;
+};

package/dist/types/GenericTable.js

@@ -0,0 +1 @@
+

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hortiview/shared-components",
   "description": "This is a shared component library. It should used in the HortiView platform and its modules.",
-  "version": "0.0.5201",
+  "version": "0.0.5409",
   "type": "module",
   "repository": "https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared",
   "author": "Falk Menge <falk.menge.ext@bayer.com>",
@@ -18,7 +18,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "scripts": {
-    "dev": "vite",
+    "start": "vite",
     "build": "tsc --p ./tsconfig-build.json && vite build",
     "test": "vitest",
     "test:ci": "vitest run --coverage",