FIX: #211 No input is possible (#212)

* FIX: fix Types import

* FIX: fix Types import

* FIX: textarea styling

* FIX: fixed textarea

* FIX: fixed types

* FIX: build

* FIX: build

* FIX: fix error

admin/css/style.css

@@ -759,3 +759,4 @@ span[title],
 	margin-left: 2rem;
 	margin-right: 2rem;
 }
+

admin/css/textarea.css

@@ -4,21 +4,25 @@
 	background-color: #eee;
 	padding: 10px !important;
 	margin-bottom: 10px !important;
-	width: 99%;
-	margin: 0px 0.5% 0 0.5%;
+	width: calc(100% - 10px) !important;
+	margin-left: 5px;
 	display: inline-block;
 }
 
 .textarea__content {
-	width: "100%";
-	padding: "8px 0px";
-	margin: "8px";
-	font-size: "16px";
-	border: "none";
-	border-color: "transparent";
-	border-bottom: "1px solid #ccc";
+	width: calc(100% - 10px) ;
+	padding: 8px 2px;
+	margin: 3rem 5px 5px 5px;
+	font-size: 16px;
+	border: none;
+	border-bottom: 1px solid #ccc;
+	height: 45vh;
 }
 .textarea__children {
 	display: inline;
-	vertical-align: "bottom";
+	vertical-align: bottom;
 }
+button.HelperCard-BtnSearch{
+ margin-top:2rem !important;
+	margin-left: 1.2rem !important;
+}

admin/src/components/btn-Input/Button.tsx → admin/src/components/Button.tsx

@@ -1,6 +1,6 @@
 import type { Properties } from 'csstype';
 import React, { Component } from 'react';
-import type { ButtonProps } from '../../app';
+import type { ButtonProps } from '@/types/app';
 import { I18n } from '@iobroker/adapter-react-v5';
 
 class Button extends Component<ButtonProps> {

admin/src/components/RenameModal.tsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PopupContainer from './popupCards/PopupContainer';
 import RenameCard from './popupCards/RenameCard';
-import type { SetStateFunction } from '@/app';
+import type { SetStateFunction } from '@/types/app';
 import type { EventButton } from '@/types/event';
 
 interface RenameProps {

admin/src/components/btn-Input/btn-expand.tsx

@@ -1,6 +1,6 @@
 import type { EventButton } from '@/types/event';
 import React, { Component } from 'react';
-import Button from '../../components/btn-Input/button';
+import Button from '@components/Button';
 
 interface ButtonExpandProps {
     isOpen: boolean;

admin/src/components/btn-Input/btn-small-add.tsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
-import Button from './button';
-import type { ButtonSmallProps } from '@/app';
+import Button from '../Button';
+import type { ButtonSmallProps } from '@/types/app';
 
 class BtnSmallAdd extends Component<ButtonSmallProps> {
     render(): React.ReactNode {

admin/src/components/btn-Input/btn-small-copy.tsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
-import Button from './button';
-import type { ButtonSmallProps } from '@/app';
+import Button from '../Button';
+import type { ButtonSmallProps } from '@/types/app';
 
 class BtnSmallCopy extends Component<ButtonSmallProps> {
     render(): React.ReactNode {

admin/src/components/btn-Input/btn-small-down.tsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
-import Button from './button';
-import type { ButtonSmallProps } from '@/app';
+import Button from '../Button';
+import type { ButtonSmallProps } from '@/types/app';
 
 class BtnSmallDown extends Component<ButtonSmallProps> {
     render(): React.ReactNode {

admin/src/components/btn-Input/btn-small-edit.tsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
-import Button from './button';
-import type { ButtonSmallProps } from '@/app';
+import Button from '../Button';
+import type { ButtonSmallProps } from '@/types/app';
 
 class BtnSmallEdit extends Component<ButtonSmallProps> {
     render(): React.ReactNode {

admin/src/components/btn-Input/btn-small-remove.tsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
-import Button from './button';
-import type { ButtonSmallProps } from '@/app';
+import Button from '../Button';
+import type { ButtonSmallProps } from '@/types/app';
 
 class BtnSmallRemove extends Component<ButtonSmallProps> {
     render(): React.ReactNode {

admin/src/components/btn-Input/btn-small-search.tsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
-import Button from './button';
-import type { ButtonSmallProps } from '@/app';
+import Button from '../Button';
+import type { ButtonSmallProps } from '@/types/app';
 
 class BtnSmallUp extends Component<ButtonSmallProps> {
     render(): React.ReactNode {

admin/src/components/btn-Input/btn-small-up.tsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
-import Button from './button';
-import type { ButtonSmallProps } from '@/app';
+import Button from '../Button';
+import type { ButtonSmallProps } from '@/types/app';
 
 class BtnSmallUp extends Component<ButtonSmallProps> {
     render(): React.ReactNode {

admin/src/components/btn-Input/checkbox.tsx

@@ -1,6 +1,6 @@
 import { I18n } from '@iobroker/adapter-react-v5';
 import React, { Component } from 'react';
-import type { PropsCheckbox } from '../../app';
+import type { PropsCheckbox } from '@/types/app';
 
 class Checkbox extends Component<PropsCheckbox> {
     onChangeHandler = (event: React.ChangeEvent<HTMLInputElement>): void => {

admin/src/components/btn-Input/input.tsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { I18n } from '@iobroker/adapter-react-v5';
-import type { InputProps } from '@/app';
+import type { InputProps } from '@/types/app';
 import type { EventInput } from '@/types/event';
 
 class Input extends Component<InputProps> {

admin/src/components/btn-Input/select.tsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { I18n } from '@iobroker/adapter-react-v5';
-import type { SelectProps } from '@/app';
+import type { SelectProps } from '@/types/app';
 
 class Select extends Component<SelectProps> {
     onChangeHandler = (event: React.ChangeEvent<HTMLSelectElement> | undefined): void => {

admin/src/components/btn-Input/textarea.tsx

@@ -1,13 +1,14 @@
 import React, { Component } from 'react';
 import { I18n } from '@iobroker/adapter-react-v5';
-import type { PropsTextarea, StateTextarea } from '@/app';
+import type { PropsTextarea, StateTextarea } from '@/types/app';
 
 class Textarea extends Component<PropsTextarea, StateTextarea> {
     onChangeHandler = (event: React.ChangeEvent<HTMLTextAreaElement> | undefined): void => {
         if (!event) {
             return;
         }
-        this.props.callback({ val: event?.target.value, index: this.props.index as number, id: this.props.id });
+
+        this.props.callback({ [this.props.id]: event?.target.value });
     };
 
     render(): React.ReactNode {
@@ -17,7 +18,7 @@ class Textarea extends Component<PropsTextarea, StateTextarea> {
                     <textarea
                         className="textarea__content noneDraggable"
                         placeholder={I18n.t(this.props.placeholder || '')}
-                        value={this.props.value}
+                        value={this.props.value || ''}
                         onChange={this.onChangeHandler}
                         spellCheck={this.props.spellCheck ? this.props.spellCheck : false}
                         onMouseOver={

admin/src/components/popupCards/HelperCard.tsx

@@ -6,12 +6,11 @@ import TableContainer from '@mui/material/TableContainer';
 import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 import Paper from '@mui/material/Paper';
-import { type IobTheme, Theme, I18n, SelectID } from '@iobroker/adapter-react-v5';
+import { I18n, type IobTheme, SelectID, Theme } from '@iobroker/adapter-react-v5';
 import BtnSmallAdd from '../btn-Input/btn-small-add';
 import BtnSmallSearch from '../btn-Input/btn-small-search';
 import Textarea from '../btn-Input/textarea';
-import type { PropsHelperCard, StateHelperCard } from '@/app';
-import type { socket } from '../../app';
+import type { PropsHelperCard, socket, StateHelperCard } from '@/types/app';
 
 const theme: IobTheme = Theme('light');
 
@@ -102,23 +101,21 @@ class HelperCard extends Component<PropsHelperCard, StateHelperCard> {
                     </Table>
                 </TableContainer>
 
+                {['nav', 'text', 'set', 'get', 'value'].includes(this.props.val) ? (
+                    <BtnSmallSearch
+                        class="HelperCard-BtnSearch"
+                        index={0}
+                        callback={this.openSelectId}
+                    />
+                ) : null}
                 <Textarea
                     value={this.props.editedValueFromHelperText.replace(/&amp;/g, '&')}
                     id="editedValueFromHelperText"
                     callback={this.props.setState}
                     callbackValue="event.target.value"
                     label=""
                     rows={4}
-                >
-                    {['nav', 'text', 'set', 'get', 'value'].includes(this.props.val) ? (
-                        <BtnSmallSearch
-                            class="HelperCard-BtnSearch"
-                            index={0}
-                            callback={this.openSelectId}
-                        />
-                    ) : null}
-                </Textarea>
-
+                />
                 {this.state.showSelectId ? (
                     <SelectID
                         key="tableSelect"

admin/src/components/popupCards/PopupContainer.tsx

@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
-import Button from '../btn-Input/button';
+import Button from '../Button';
 import { I18n } from '@iobroker/adapter-react-v5';
 import type { Properties } from 'csstype';
-import type { PropsPopupContainer, StatePopupContainer } from '@/app';
+import type { PropsPopupContainer, StatePopupContainer } from '@/types/app';
 
 class PopupContainer extends Component<PropsPopupContainer, StatePopupContainer> {
     constructor(props: PropsPopupContainer) {

admin/src/components/popupCards/RenameCard.tsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import Input from '../btn-Input/input';
-import type { PropsRenameCard, StateRenameCard } from '@/app';
+import type { PropsRenameCard, StateRenameCard } from '@/types/app';
 import type { EventInput } from '@/types/event';
 
 class RenameCard extends Component<PropsRenameCard, StateRenameCard> {

admin/src/config/entries.ts

@@ -1,4 +1,4 @@
-import type { TabValueEntries, TabValues } from '@/app';
+import type { TabValueEntries, TabValues } from '@/types/app';
 
 export const tabValues: TabValues[] = [
     // Danach noch generateActions anpassen in action.js

admin/src/lib/dragNDrop.ts

@@ -1,4 +1,4 @@
-import type { Dropbox, SetStateFunction } from '@/app';
+import type { Dropbox, SetStateFunction } from '@/types/app';
 export const handleMouseOver = (e: React.MouseEvent<HTMLSpanElement> | undefined): void => {
     const target = e?.target as HTMLElement;
     if (target.classList.contains('noneDraggable')) {

admin/src/lib/newValuesForNewVersion.ts

@@ -1,4 +1,4 @@
-import type { NativeData, UpdateNativeFunction } from '@/app.js';
+import type { NativeData, UpdateNativeFunction } from '@/types/app.js';
 import { deepCopy } from './Utils.js';
 
 const insertParseModeCheckbox = (data: NativeData): NativeData => {

admin/src/lib/socket.ts

@@ -1,4 +1,4 @@
-import type { socket } from '../app';
+import type { socket } from '@/types/app';
 
 async function getUsersFromTelegram(
     socket: socket,

admin/src/pages/AppContent.tsx

@@ -3,7 +3,7 @@ import AppContentTab from '@/pages/AppContentTab';
 import AppContentTabsListing from '@/pages/AppContentTabsListing';
 import { TabContext } from '@mui/lab';
 import { Box, Grid } from '@mui/material';
-import type { PropsMainContent } from '@/app';
+import type { PropsMainContent } from '@/types/app';
 import React, { Component } from 'react';
 
 class AppContent extends Component<PropsMainContent> {

admin/src/pages/AppContentHeader.tsx

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { Grid } from '@mui/material';
 import HeaderMenu from '@/pages/AppContentHeaderMenu';
 import HeaderTelegramUsers from '@/pages/AppContentHeaderTelegramUsers';
-import type { PropsMainActions } from '@/app';
+import type { PropsMainActions } from '@/types/app';
 
 class MainActions extends Component<PropsMainActions> {
     constructor(props: PropsMainActions) {

admin/src/pages/AppContentHeaderMenu.tsx

@@ -1,7 +1,7 @@
 import ButtonExpand from '@components/btn-Input/btn-expand';
 import { I18n } from '@iobroker/adapter-react-v5';
 import { Grid } from '@mui/material';
-import type { PropsHeaderMenu } from '@/app';
+import type { PropsHeaderMenu } from '@/types/app';
 import React, { Component } from 'react';
 import AppContentHeaderMenuButtons from './AppContentHeaderMenuButtons';
 import AppContentHeaderMenuList from './AppContentHeaderMenuList';

admin/src/pages/AppContentHeaderMenuButtons.tsx

@@ -2,10 +2,10 @@ import { I18n } from '@iobroker/adapter-react-v5';
 import ConfirmDialog from '@iobroker/adapter-react-v5/Dialogs/Confirm';
 import { Grid } from '@mui/material';
 import React, { Component } from 'react';
-import Button from '../components/btn-Input/button';
+import Button from '@components/Button';
 import Input from '../components/btn-Input/input';
 import RenameModal from '@components/RenameModal';
-import type { NativeData, PropsBtnCard, StateBtnCard, UserActiveCheckbox, UsersInGroup } from '@/app';
+import type { NativeData, PropsBtnCard, StateBtnCard, UserActiveCheckbox, UsersInGroup } from '@/types/app';
 import { replaceSpaceWithUnderscore } from '@/lib/string';
 import { deepCopy } from '@/lib/Utils';
 import type { EventButton, EventInput } from '@/types/event';

admin/src/pages/AppContentHeaderMenuList.tsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
-import Button from '../components/btn-Input/button';
-import type { PropsMenuPopupCard } from '@/app';
+import Button from '@components/Button';
+import type { PropsMenuPopupCard } from '@/types/app';
 import type { EventButton } from '@/types/event';
 
 class MenuPopupCard extends Component<PropsMenuPopupCard> {

admin/src/pages/AppContentHeaderTelegramUsers.tsx

@@ -2,7 +2,7 @@ import type { EventCheckbox } from '@/types/event';
 import ButtonExpand from '@components/btn-Input/btn-expand';
 import { I18n } from '@iobroker/adapter-react-v5';
 import { Grid } from '@mui/material';
-import type { PropsHeaderTelegramUsers, StateHeaderTelegramUsers, UserListWithChatID, UsersInGroup } from '@/app';
+import type { PropsHeaderTelegramUsers, StateHeaderTelegramUsers, UserListWithChatID, UsersInGroup } from '@/types/app';
 import React, { Component } from 'react';
 import Checkbox from '../components/btn-Input/checkbox';
 import AppContentHeaderTelegramUsersUserCard from './AppContentHeaderTelegramUsersUserCard';

admin/src/pages/AppContentHeaderTelegramUsersUserCard.tsx

@@ -1,4 +1,4 @@
-import type { PropsTelegramUserCard, StateTelegramUserCard } from '@/app';
+import type { PropsTelegramUserCard, StateTelegramUserCard } from '@/types/app';
 import React, { Component } from 'react';
 import Checkbox from '../components/btn-Input/checkbox';
 import type { EventCheckbox } from '@/types/event';

admin/src/pages/AppContentTabAction.tsx

@@ -3,7 +3,7 @@ import { TabContext, TabPanel } from '@mui/lab';
 import AppContentTabActionContent from './AppContentTabActionContent';
 import { tabValues } from '@/config/entries';
 import AppContentTabActionTabsListing from './AppContentTabActionTabsListing';
-import type { PropsTabAction, StateTabAction } from '@/app';
+import type { PropsTabAction, StateTabAction } from '@/types/app';
 
 class TabAction extends Component<PropsTabAction, StateTabAction> {
     constructor(props: PropsTabAction) {

admin/src/pages/AppContentTabActionContent.tsx

@@ -8,9 +8,8 @@ import helperText from '@/config/helper.js';
 import { addNewRow } from '@/lib/actionUtils.js';
 import AppContentTabActionContentRowEditor from '@/pages/AppContentTabActionContentRowEditor';
 import AppContentTabActionContentTable from '@/pages/AppContentTabActionContentTable';
-import Button from '@components/btn-Input/button';
-import type { ActionData, PropsActionCard, StateActionCard } from '@/app';
-import type { ActionNewRowProps } from '../app';
+import Button from '@components/Button';
+import type { ActionData, ActionNewRowProps, PropsActionCard, StateActionCard } from '@/types/app';
 import type { EventButton } from '@/types/event';
 import type { UpdateProps } from '@/types/props-types';
 

admin/src/pages/AppContentTabActionContentRowEditor.tsx

@@ -19,7 +19,7 @@ import Checkbox from '@components/btn-Input/checkbox';
 import PopupContainer from '@components/popupCards/PopupContainer';
 import { I18n, type IobTheme, SelectID, Theme } from '@iobroker/adapter-react-v5';
 import { Paper, Table, TableBody, TableCell, TableContainer, TableRow } from '@mui/material';
-import type { NativeData, PropsRowEditPopupCard, StateRowEditPopupCard } from '@/app';
+import type { NativeData, PropsRowEditPopupCard, StateRowEditPopupCard } from '@/types/app';
 import React, { Component } from 'react';
 import type { EventButton, EventCheckbox } from '@/types/event';
 import AppContentTabActionContentRowEditorButtons from './AppContentTabActionContentRowEditorButtons';

admin/src/pages/AppContentTabActionContentRowEditorHeader.tsx

@@ -1,7 +1,7 @@
 import { updateTrigger } from '@/lib/actionUtils.js';
 import { isChecked } from '@/lib/Utils.js';
 import type { EventButton, EventCheckbox, EventSelect } from '@/types/event';
-import Button from '@components/btn-Input/button';
+import Button from '@components/Button';
 import Checkbox from '@components/btn-Input/checkbox';
 import Select from '@components/btn-Input/select';
 import React, { Component } from 'react';

admin/src/pages/AppContentTabActionContentRowEditorTableHead.tsx

@@ -1,6 +1,6 @@
 import { I18n } from '@iobroker/adapter-react-v5';
 import { TableCell, TableHead, TableRow } from '@mui/material';
-import type { TabValueEntries } from '@/app';
+import type { TabValueEntries } from '@/types/app';
 import React, { Component } from 'react';
 import Checkbox from '@/components/btn-Input/checkbox';
 import type { EventCheckbox } from '@/types/event';

admin/src/pages/AppContentTabActionContentTable.tsx

@@ -1,7 +1,7 @@
 import { TableBody, TableCell, TableRow } from '@mui/material';
-import type { PropsTableDndAction, RowForButton, StateTableDndAction } from '@/app.js';
+import type { PropsTableDndAction, RowForButton, StateTableDndAction } from '@/types/app.js';
 import React, { Component } from 'react';
-import type { DataRowAction, TabValueEntries } from '../app';
+import type { DataRowAction, TabValueEntries } from '@/types/app';
 import { ButtonCard } from '@components/popupCards/buttonCard';
 import { deepCopy } from '@/lib/Utils';
 import { getElementIcon } from '@/lib/actionUtils';

admin/src/pages/AppContentTabActionContentTableSubTable.tsx

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { Table, TableBody, TableCell, TableRow } from '@mui/material';
 import { handleMouseOut, handleMouseOver } from '@/lib/dragNDrop';
 import { getElementIcon } from '@/lib/actionUtils';
-import type { PropsSubTable } from '@/app.js';
+import type { PropsSubTable } from '@/types/app.js';
 
 class SubTable extends Component<PropsSubTable> {
     render(): React.ReactNode {