@hortiview/shared-components 0.0.4540 → 0.0.4721

package/README.md

@@ -21,10 +21,14 @@ For the best experience use [react-router](https://reactrouter.com/en/main) in y
 1. [BaseView](#baseview)
 1. [BasicHeading](#basicheading)
 1. [BlockView](#blockview)
+1. [DeleteModal](#deletemodal)
+1. [Disclaimer](#disclaimer)
 1. [EmptyView](#emptyview)
 1. [HashTabView](#hashtabview)
+1. [HaederFilter](#headerfilter)
 1. [Iconify](#iconify)
 1. [ListArea](#listarea)
+1. [ScrollBar](#scrollbar)
 1. [SearchBar](#searchbar)
 1. [VerticalDivider](#verticaldivider)
 
@@ -36,10 +40,10 @@ Can used to show a kind off main and detail view. On the left side you will have
 import { BaseListElement, BaseView } from '@hortiview/shared-components';
 import { Link, useLocation } from 'react-router-dom';
 
-...
 const { pathname } = useLocation();
 
-const elements: BaseListElement[] = [{
+const elements: BaseListElement[] = [
+  {
     id: '1',
     title: 'First',
     subTitle: 'First Subtilte',
@@ -56,20 +60,19 @@ const elements: BaseListElement[] = [{
     icon: 'add',
     route: '/second',
     component: <MyComponentToShowOnClickSecond />,
-  }];
-
-...
+  },
+];
 
 return (
   <BaseView
-      routerLinkElement={Link}
-      pathname={pathname}
-      elements={elements}
-      heading='Header'
-      hasSearch
-      emptyText='Empty'
-    />
-  );
+    routerLinkElement={Link}
+    pathname={pathname}
+    elements={elements}
+    heading='Header'
+    hasSearch
+    emptyText='Empty'
+  />
+);
 ```
 
 ### BasicHeading
@@ -79,12 +82,9 @@ Provides a heading component with optional children which are rendered on the ri
 ```typescript
 import { BasicHeading } from '@hortiview/shared-components';
 
-...
-  <BasicHeading heading={'Header'}>
-      <button>Test</button>
-  </BasicHeading>
-...
-
+<BasicHeading heading={'Header'}>
+  <button>Test</button>
+</BasicHeading>;
 ```
 
 ### BlockView
@@ -94,18 +94,52 @@ This is a component showing blocks in a row/column view.
 ```typescript
 import { BlockView, BlockDto } from '@hortiview/shared-components';
 
-...
-  const blocks: BlockDto = [{
-    position: { row: 1, column:1 },
+const blocks: BlockDto = [
+  {
+    position: { row: 1, column: 1 },
     fieldId: '1',
-  }];
+  },
+];
 
-  <BlockView
-    blocks={blocks}
-    columns={1}
-    rows={1}
-  />
-...
+<BlockView blocks={blocks} columns={1} rows={1} />;
+```
+
+### DeleteModal
+
+A modal to confirm a deletion.
+
+```typescript
+import { DeleteModal } from '@hortiview/shared-components';
+
+const [open, setOpen] = useState<string>();
+const onDelete = () => {
+  console.log('deleted');
+};
+
+<DeleteModal
+  icon='block'
+  open={open}
+  setOpen={setOpen}
+  onDelete={onDelete}
+  title={'DELETE'}
+  confirmButtonLabel={'Remove'}
+  cancelButtonLabel={'Cancel'}
+  deleteHeader={'Delete my block'}
+  impossibleDeleteHeader={'block cant be deleted'}
+  deleteBody={['block 1', 'block 2', 'block 3']}
+  isDeletePossible
+/>;
+```
+
+### Disclaimer
+
+A red notice or hint with to show in the ui.
+
+```typescript
+
+import { Disclaimer } form '@hortiview/shared-components'
+
+<Disclaimer text='Currently not available' subtext='Please try again later' icon='wifi_off' />
 
 ```
 
@@ -138,6 +172,26 @@ const tabs: HashTab[] = [
 <HashTabView tabs={tabs} elevation={1} />;
 ```
 
+### HeaderFilter
+
+A filter dropdown component which can be used in headers like a tabview header. It supports a single filter value only.
+
+```typescript
+import { HeaderFilter } from '@hortiview/shared-components';
+
+const [filterValue, setFilterValue] = useState<string>();
+
+<HeaderFilter
+  heading={'Test'}
+  setFilter={setFilterValue}
+  filterValue={filterValue}
+  filterOptions={[
+    { value: 'test', label: 'Test' },
+    { value: 'different', label: 'Different' },
+  ]}
+/>;
+```
+
 ### Iconify
 
 Provides some custom icons based on the elements Icon API. Currently supported:
@@ -187,6 +241,24 @@ const elements: BaseListElement[] = [{
 />;
 ```
 
+### ScrollBar
+
+Provides a scrollbar in hortiview styling. Add it a classname on your component.
+
+```typescript
+
+import { ScrollbarY, ScrollbarX } from '@hortiview/shared-components';
+
+<div className={`${ScrollbarY}`}>
+  Height content
+<div>
+
+<div className={`${ScrollbarX}`}>
+  Wide content
+<div>
+
+```
+
 ### SearchBar
 
 Provides a searchbar component.

package/dist/{ListAreaService-CFOmATRF.js → ListAreaService-BQCdQv7a.js}

@@ -1,9 +1,9 @@
 import "./assets/ListAreaService.css";
 import { jsx as l } from "react/jsx-runtime";
-import { Iconify as b } from "./components/Iconify/Iconify.js";
+import { Iconify as B } from "./components/Iconify/Iconify.js";
 import { AvailableCustomIcons as q } from "./enums/AvailableCustomIcons.js";
-import { T as k, a as L, c as C } from "./index.es-BD4kFWFx.js";
-import { I as x } from "./index.es-Cv6meSAn.js";
+import { T as k, a as L, b as C } from "./index.es-z8RCxF8n.js";
+import { I as x } from "./index.es-3I3oam0G.js";
 const E = "_fullWidth_1l0qh_1", N = "_mainElevation_1l0qh_5", W = "_searchbar_1l0qh_11", $ = "_roundedBottom_1l0qh_19", j = "_list_1l0qh_24", S = "_listItem_1l0qh_48", w = "_trailingIcon_1l0qh_52", A = "_groupedListItem_1l0qh_64", _ = {
   fullWidth: E,
   mainElevation: N,
@@ -54,12 +54,12 @@ const E = "_fullWidth_1l0qh_1", N = "_mainElevation_1l0qh_5", W = "_searchbar_1l
       leadingBlockType: p ?? "icon",
       trailingBlockType: y ?? "icon",
       className: `${p === "avatar" ? "" : _.listItem} ${n} ${r ? _.groupedListItem : ""}`,
-      onClick: (O, B) => T?.(B),
+      onClick: (O, b) => T?.(b),
       tag: d ? void 0 : s ?? "a",
       to: d ? void 0 : t
     }
   };
-}, G = (o) => typeof o == "string" && o in q ? /* @__PURE__ */ l(b, { icon: o }) : o;
+}, G = (o) => typeof o == "string" && o in q ? /* @__PURE__ */ l(B, { icon: o }) : o;
 export {
   M as a,
   K as g,