@hortiview/shared-components 0.0.4730 → 0.0.4779

package/README.md

@@ -12,10 +12,19 @@ This is a shared component library. It should used in the HortiView platform and
 
 `yarn add @hortiview/shared-components`
 
+## Prerequisites
+
+This library is based in Bayers element component library. To use it properly you need to install this package first. 
+To get access to this restricted package please contact your Bayer contact person.
+
+After you gain access use `yarn add @element/react-components @element/themes` or `npm i @element/react-components @element/themes` to add the package to your solution.
+
 ## Remarks
 
 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`.
 
+Additionally the library provides form components using [react-hook-form](https://react-hook-form.com/get-started). When you want to use these components please install `react-hook-form` before using them.  
+
 ## Available packages:
 
 1. [BaseView](#baseview)
@@ -24,8 +33,15 @@ For the best experience use [react-router](https://reactrouter.com/en/main) in y
 1. [DeleteModal](#deletemodal)
 1. [Disclaimer](#disclaimer)
 1. [EmptyView](#emptyview)
+1. [FormComponents](#formcomponents)
+   1. [FormCheckBox](#formcheckbox)
+   1. [FormDatePicker](#formdatepicker)
+   1. [FormRadio](#formradio)
+   1. [FormSelect](#formselect)
+   1. [FormSlider](#formslider)
+   1. [FormText](#formtext)
 1. [HashTabView](#hashtabview)
-1. [HaederFilter](#headerfilter)
+1. [HeaderFilter](#headerfilter)
 1. [Iconify](#iconify)
 1. [ListArea](#listarea)
 1. [ScrollBar](#scrollbar)
@@ -153,6 +169,188 @@ import { EmptyView } from '@hortiview/shared-components';
 <EmptyView title='No Content' subtitle='nothing' icon='grass' />;
 ```
 
+### FormComponents
+
+The library provides some form components based on [react-hook-form](https://react-hook-form.com/). The components can only be use within a form provided by react-hook-form.
+So please add the package before you use the components.
+
+```
+yarn add react-hook-form
+```
+
+or
+
+```
+npm install react-hook-form
+```
+
+#### FormCheckBox
+
+Provides a checkbox form component
+
+```typescript
+import { FormCheckBox } from '@hortiview/shared-components';
+import { FormProvider, SubmitHandler, useForm } from 'react-hook-form';
+
+const formMethods = useForm<{ check: boolean }>({
+  mode: 'onSubmit',
+});
+
+const { handleSubmit } = formMethods;
+
+<FormProvider {...formMethods}>
+  <form onSubmit={handleSubmit(onSubmit)}>
+    <FormCheckBox<{ check: boolean }>
+      propertyName={`check`}
+      label={'My Checkbox'}
+      onChange={() => additionalOnChange()}
+      validate={validateFn}
+    />
+  </form>
+</FormProvider>;
+```
+
+#### FormDatePicker
+
+Provides a datepicker form component
+
+```typescript
+import { FormDatePicker } from '@hortiview/shared-components';
+import { FormProvider, SubmitHandler, useForm } from 'react-hook-form';
+
+const formMethods = useForm<{ birthday: string }>({
+  mode: 'onSubmit',
+});
+
+const { handleSubmit } = formMethods;
+
+<FormProvider {...formMethods}>
+  <form onSubmit={handleSubmit(onSubmit)}>
+    <FormDatePicker<{ birthday: string }>
+      propertyName={'birthday'}
+      label={'user.date-of-birth'}
+      maxRangeYear={0}
+    />
+  </form>
+</FormProvider>;
+```
+
+#### FormRadio
+
+Provides a radio button form component
+
+```typescript
+import { FormRadio } from '@hortiview/shared-components';
+import { FormProvider, SubmitHandler, useForm } from 'react-hook-form';
+
+const formMethods = useForm<{ radioValue: string }>({
+  mode: 'onSubmit',
+});
+
+const { handleSubmit } = formMethods;
+
+<FormProvider {...formMethods}>
+  <form onSubmit={handleSubmit(onSubmit)}>
+     <FormRadio<{ radioValue: string }>
+        propertyName='radioValue'
+        options={[
+          { value: 'priced', label: 'Priced' },
+          { value: 'free', label: 'Free },
+        ]}
+      />
+  </form>
+</FormProvider>;
+```
+
+#### FormSelect
+
+Provides a select form component
+
+```typescript
+import { FormSelect } from '@hortiview/shared-components';
+import { FormProvider, SubmitHandler, useForm } from 'react-hook-form';
+
+const formMethods = useForm<{ type: string }>({
+  mode: 'onSubmit',
+});
+
+const { handleSubmit } = formMethods;
+
+const typeOptions = [
+  {
+    id: 1,
+    value: 'Car',
+  },
+  {
+    id: 2,
+    value: 'Bike',
+  },
+];
+
+<FormProvider {...formMethods}>
+  <form onSubmit={handleSubmit(onSubmit)}>
+    <FormSelect<{ type: string }>
+      propertyName='type'
+      label='Type'
+      options={typeOptions}
+      valueKey='id'
+      textKey='value'
+      requiredText='required'
+      required
+    />
+  </form>
+</FormProvider>;
+```
+
+#### FormSlider
+
+Provides a slider form component
+
+```typescript
+import { FormSlider } from '@hortiview/shared-components';
+import { FormProvider, SubmitHandler, useForm } from 'react-hook-form';
+
+const formMethods = useForm<{ range: string }>({
+  mode: 'onSubmit',
+});
+
+const { handleSubmit } = formMethods;
+
+<FormProvider {...formMethods}>
+  <form onSubmit={handleSubmit(onSubmit)}>
+    <FormSlider<{ range: string }> propertyName='range' minValue={30} maxValue={90} step={30} />
+  </form>
+</FormProvider>;
+```
+
+#### FormText
+
+Provides a text form component
+
+```typescript
+import { FormText } from '@hortiview/shared-components';
+import { FormProvider, SubmitHandler, useForm } from 'react-hook-form';
+
+const formMethods = useForm<{ address: string }>({
+  mode: 'onSubmit',
+});
+
+const { handleSubmit } = formMethods;
+
+<FormProvider {...formMethods}>
+  <form onSubmit={handleSubmit(onSubmit)}>
+    <FormText<{ address: string }>
+      maxLength={200}
+      label='address'
+      propertyName='address'
+      required
+      requiredText='required'
+      textarea
+    />
+  </form>
+</FormProvider>;
+```
+
 ### 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`.

package/dist/ListAreaService-BPp_O2BH.js

@@ -0,0 +1,67 @@
+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";
+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,
+  searchbar: W,
+  roundedBottom: $,
+  list: j,
+  listItem: S,
+  trailingIcon: w,
+  groupedListItem: A
+}, J = (o, i, n, r) => {
+  const l = o.reduce((e, a) => {
+    const { groupName: t, ...m } = a;
+    return !t || typeof t != "string" || (e[t] || (e[t] = {
+      groupName: /* @__PURE__ */ s(b, { children: t }),
+      id: t,
+      items: []
+    }), e[t].items = [
+      ...e[t].items,
+      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) => {
+  const {
+    title: e,
+    subTitle: a,
+    route: t,
+    value: m,
+    noNavigation: d,
+    disabled: I,
+    icon: h,
+    iconType: p,
+    trailingIcon: v,
+    trailingIconType: y,
+    actionButton: f,
+    onClick: T,
+    customTitle: u
+  } = 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" }),
+    leadingBlock: G(h),
+    nonInteractive: I,
+    value: m,
+    componentProps: {
+      leadingBlockType: p ?? "icon",
+      trailingBlockType: y ?? "icon",
+      className: `${p === "avatar" ? "" : _.listItem} ${n} ${r ? _.groupedListItem : ""}`,
+      onClick: (O, B) => T?.(B),
+      tag: d ? void 0 : l ?? "a",
+      to: d ? void 0 : t
+    }
+  };
+}, G = (o) => typeof o == "string" && o in x ? /* @__PURE__ */ s(C, { icon: o }) : o;
+export {
+  K as a,
+  J as g,
+  g as m,
+  _ as s
+};