@hortiview/shared-components 0.0.4470 → 0.0.4539

package/README.md

@@ -2,33 +2,213 @@
 
 [![Build Status](https://dev.azure.com/sdundc/HV%20Platform/_apis/build/status%2FHortiView-Frontend-Shared-Publish?branchName=main)](https://dev.azure.com/sdundc/HV%20Platform/_build/latest?definitionId=88&branchName=main)
 
-# React + TypeScript + Vite
+# HortiView Shared Components
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+This is a shared component library. It should used in the HortiView platform and its modules.
 
-Currently, two official plugins are available:
+## Install
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+`npm i @hortiview/shared-components`
 
-## Expanding the ESLint configuration
+`yarn add @hortiview/shared-components`
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+## Remarks
 
-- Configure the top-level `parserOptions` property like this:
+For the best experience use [react-router](https://reactrouter.com/en/main) in your solution, because some of the component rely on properties like pathname, hash or components like `Link` out of `react-router`.
 
-```js
-export default {
-  // other rules...
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
+## Available packages:
+
+1. [BaseView](#baseview)
+1. [BasicHeading](#basicheading)
+1. [BlockView](#blockview)
+1. [EmptyView](#emptyview)
+1. [HashTabView](#hashtabview)
+1. [Iconify](#iconify)
+1. [ListArea](#listarea)
+1. [SearchBar](#searchbar)
+1. [VerticalDivider](#verticaldivider)
+
+### BaseView
+
+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
+import { BaseListElement, BaseView } from '@hortiview/shared-components';
+import { Link, useLocation } from 'react-router-dom';
+
+...
+const { pathname } = useLocation();
+
+const elements: BaseListElement[] = [{
+    id: '1',
+    title: 'First',
+    subTitle: 'First Subtilte',
+    type: 'Primary',
+    icon: 'grid_view',
+    route: '/first',
+    component: <MyComponentToShowOnClick />,
   },
-}
+  {
+    id: '2',
+    title: 'Second',
+    subTitle: 'Second Subtilte',
+    type: 'Primary',
+    icon: 'add',
+    route: '/second',
+    component: <MyComponentToShowOnClickSecond />,
+  }];
+
+...
+
+return (
+  <BaseView
+      routerLinkElement={Link}
+      pathname={pathname}
+      elements={elements}
+      heading='Header'
+      hasSearch
+      emptyText='Empty'
+    />
+  );
+```
+
+### BasicHeading
+
+Provides a heading component with optional children which are rendered on the right side of the heading.
+
+```typescript
+import { BasicHeading } from '@hortiview/shared-components';
+
+...
+  <BasicHeading heading={'Header'}>
+      <button>Test</button>
+  </BasicHeading>
+...
+
 ```
 
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+### BlockView
+
+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 },
+    fieldId: '1',
+  }];
+
+  <BlockView
+    blocks={blocks}
+    columns={1}
+    rows={1}
+  />
+...
+
+```
+
+### EmptyView
+
+A basic view if no content is available.
+
+```typescript
+import { EmptyView } from '@hortiview/shared-components';
+
+<EmptyView title='No Content' subtitle='nothing' icon='grass' />;
+```
+
+### 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
+import { HashTabView, HashTab } from '@hortiview/shared-components';
+
+const tabs: HashTab[] = [
+  {
+    title: 'My Map',
+    hash: 'map',
+    leadingIcon: 'map',
+    component: <>My map Component to show in the tab</>,
+  },
+];
+
+<HashTabView tabs={tabs} elevation={1} />;
+```
+
+### Iconify
+
+Provides some custom icons based on the elements Icon API. Currently supported:
+
+- block
+- block-delete
+- cloud-rain
+- cloud-sunny
+- cloud
+- farm-delete
+- farm
+- greenhouse-delete
+- subscription
+- wind
+
+```typescript
+import { Iconify } from '@hortiview/shared-components';
+
+<Iconify icon='wind' iconSize='large' />;
+```
+
+### ListArea
+
+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
+import { BaseListElement, ListArea } from '@hortiview/shared-components';
+import { Link, useLocation } from 'react-router-dom';
+
+const { pathname } = useLocation();
+
+const elements: BaseListElement[] = [{
+  route: `/my/route/${1}`,
+  id: 1,
+  title: 'name',
+  subTitle: 'sub-name',
+  icon: <Icon icon={'grass'} />,
+}]
+
+<ListArea
+  hasSearch
+  searchPlaceholder={'Search....'}
+  elements={elements}
+  isSorted={false}
+  pathname={pathname}
+  routerLinkElement={Link}
+/>;
+```
+
+### SearchBar
+
+Provides a searchbar component.
+
+```typescript
+import { SearchBar } from '@hortiview/shared-components';
+
+const [searchValue, setSearchValue] = useState('');
+<SearchBar
+  searchTerm={searchValue}
+  setSearchTerm={setSearchValue}
+  dense
+  placeholder={'Search....'}
+/>;
+```
+
+### VerticalDivider
+
+Provides a simple vertical divider.
+
+```typescript
+import { VerticalDivider } from '@hortiview/shared-components';
+
+<VerticalDivider className={'custom'} height='3rem' />;
+```

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

@@ -1,8 +1,9 @@
 import "./assets/ListAreaService.css";
-import { jsx as s } from "react/jsx-runtime";
-import { TypoButton as b, TypoSubtitle as q, TypoBody as k, Icon as L } from "@element/react-components";
-import { Iconify as C } from "./components/Iconify/Iconify.js";
-import { AvailableCustomIcons as x } from "./enums/AvailableCustomIcons.js";
+import { jsx as l } from "react/jsx-runtime";
+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";
 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,
@@ -12,11 +13,11 @@ const E = "_fullWidth_1l0qh_1", N = "_mainElevation_1l0qh_5", W = "_searchbar_1l
   listItem: S,
   trailingIcon: w,
   groupedListItem: A
-}, J = (o, i, n, r) => {
-  const l = o.reduce((e, a) => {
+}, K = (o, i, n, r) => {
+  const s = o.reduce((e, a) => {
     const { groupName: t, ...m } = a;
     return !t || typeof t != "string" || (e[t] || (e[t] = {
-      groupName: /* @__PURE__ */ s(b, { children: t }),
+      groupName: /* @__PURE__ */ l(k, { children: t }),
       id: t,
       items: []
     }), e[t].items = [
@@ -24,8 +25,8 @@ const E = "_fullWidth_1l0qh_1", N = "_mainElevation_1l0qh_5", W = "_searchbar_1l
       g(m, i, n, !0, r)
     ]), e;
   }, {});
-  return Object.values(l);
-}, K = (o, i, n, r) => o.map((l) => g(l, i, n, !1, r)), g = (o, i, n, r, l) => {
+  return Object.values(s);
+}, M = (o, i, n, r) => o.map((s) => g(s, i, n, !1, r)), g = (o, i, n, r, s) => {
   const {
     title: e,
     subTitle: a,
@@ -43,9 +44,9 @@ const E = "_fullWidth_1l0qh_1", N = "_mainElevation_1l0qh_5", W = "_searchbar_1l
   } = o, c = i === t;
   return {
     select: c,
-    primaryText: u ?? /* @__PURE__ */ s(q, { level: 1, bold: c, themeColor: c ? "primary" : void 0, children: e }),
-    secondaryText: a && !u ? /* @__PURE__ */ s(k, { level: 2, themeColor: c ? "primary" : void 0, children: a }) : void 0,
-    trailingBlock: f ?? v ?? /* @__PURE__ */ s(L, { icon: "arrow_right" }),
+    primaryText: u ?? /* @__PURE__ */ l(L, { level: 1, bold: c, themeColor: c ? "primary" : void 0, children: e }),
+    secondaryText: a && !u ? /* @__PURE__ */ l(C, { level: 2, themeColor: c ? "primary" : void 0, children: a }) : void 0,
+    trailingBlock: f ?? v ?? /* @__PURE__ */ l(x, { icon: "arrow_right" }),
     leadingBlock: G(h),
     nonInteractive: I,
     value: m,
@@ -54,14 +55,14 @@ const E = "_fullWidth_1l0qh_1", N = "_mainElevation_1l0qh_5", W = "_searchbar_1l
       trailingBlockType: y ?? "icon",
       className: `${p === "avatar" ? "" : _.listItem} ${n} ${r ? _.groupedListItem : ""}`,
       onClick: (O, B) => T?.(B),
-      tag: d ? void 0 : l ?? "a",
+      tag: d ? void 0 : s ?? "a",
       to: d ? void 0 : t
     }
   };
-}, G = (o) => typeof o == "string" && o in x ? /* @__PURE__ */ s(C, { icon: o }) : o;
+}, G = (o) => typeof o == "string" && o in q ? /* @__PURE__ */ l(b, { icon: o }) : o;
 export {
-  K as a,
-  J as g,
+  M as a,
+  K as g,
   g as m,
   _ as s
 };