Merge pull request #30 from agentlab/issue-26-add-keys-to-child-compo…

…nents

[FIX] GH-26 Add keys to child components in all Storybook stories

src/Form.tsx

@@ -21,6 +21,7 @@ import { MstContext } from './MstContext';
 import { UnknownRenderer } from './UnknownRenderer';
 import { RankedTester } from './testers';
 import { IViewDescr, IViewDescrElement, IViewKind, IViewKindElement } from './models/uischema';
+import { JsObject } from '@agentlab/sparql-jsld-client';
 
 export interface ControlComponent {
   data: any;
@@ -83,7 +84,7 @@ export interface DispatchCellProps extends RenderProps {
   [key: string]: any;
 }
 
-export function mstJsonLdIds(o: any) {
+export function mstJsonLdIds(o: JsObject): JsObject | undefined {
   if (o) return { '@id': o['@id'], '@type': o['@type'] };
   else return undefined;
 }
@@ -180,7 +181,7 @@ export const FormsDispatch = observer<FormsDispatchProps>((props) => {
   }
 });
 
-export function ErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
+export function ErrorFallback({ error, resetErrorBoundary }: FallbackProps): JSX.Element {
   return (
     <div role='alert'>
       <p>Something went wrong:</p>
@@ -228,8 +229,8 @@ export const Form = observer<FormsInitStateProps>((props) => {
   }
   return (
     <ErrorBoundary FallbackComponent={ErrorFallback} onReset={() => {}}>
-      {viewKindObs.elements.map((el: IViewKindElement) => (
-        <FormsDispatch {...props} viewKind={viewKindObs} viewKindElement={el} viewDescr={viewDescrObs} />
+      {viewKindObs.elements.map((el: IViewKindElement, idx: number) => (
+        <FormsDispatch key={idx} {...props} viewKind={viewKindObs} viewKindElement={el} viewDescr={viewDescrObs} />
       ))}
     </ErrorBoundary>
   );

src/UnknownRenderer.tsx

@@ -26,7 +26,7 @@ export interface UnknownRendererProps {
  * A renderer that will be used in case no other renderer is applicable.
  */
 export class UnknownRenderer extends Component<UnknownRendererProps, any> {
-  render() {
+  render(): JSX.Element {
     return (
       <div style={{ color: 'red' }}>
         No applicable {this.props.type} found for element with id={this.props.elementId} and type=

src/cells/AntdCellCardLayout.tsx

@@ -17,7 +17,7 @@ import { Card } from 'antd';
 import { DispatchCell } from '../DispatchCell';
 import './cell.css';
 
-export const AntdCellCardLayout = (props: any) => {
+export const AntdCellCardLayout = (props: any): JSX.Element => {
   const { viewKind, viewKindElement, viewDescr, viewDescrElement, schema, data, id } = props;
   const createCardChilds = () =>
     viewKindElement.elements

src/cells/AntdCellG2.tsx

@@ -10,7 +10,7 @@ const template: any = {
   'https://www.wildberries.ru/catalog/16170086/detail.aspx': '/img/chart_3.png',
   'https://www.wildberries.ru/catalog/18247707/detail.aspx': '/img/chart_4.png',
 };
-export const AntdCellG2 = (props: any) => {
+export const AntdCellG2 = (props: any): JSX.Element => {
   return <Image style={{ height: '217px' }} src={template[props.data['@id']]} />;
 };
 

src/cells/AntdCellHorizontalLayout.tsx

@@ -69,6 +69,7 @@ export const AntdCellHorizontalLayoutRenderer: React.FC<DispatchCellProps> = ({
     <Row justify={justify} style={rowStyle} align={'middle'}>
       {(viewKindElement.elements || []).map((e: IViewKindElement, idx: number) => (
         <Render
+          key={idx}
           viewKind={viewKind}
           viewKindElement={e}
           viewDescr={viewDescr}

src/cells/AntdSimpleCells.tsx

@@ -7,10 +7,8 @@
  *
  * SPDX-License-Identifier: GPL-3.0-only
  ********************************************************************************/
-import { get } from 'lodash-es';
-
 import React from 'react';
-import { Button, Card, Image, Row, Col, Rate } from 'antd';
+import { Button, Image, Rate } from 'antd';
 
 import {
   rankWith,
@@ -37,7 +35,7 @@ import './cell.css';
 /**
  * AntdBooleanCell
  */
-export const AntdBooleanCell = (props: any) => {
+export const AntdBooleanCell = (props: any): JSX.Element => {
   return <CellRenderer Cell={AntdCheckbox} {...props} />;
 };
 export const antdBooleanCellTester: RankedTester = rankWith(2, isBooleanControl);
@@ -46,7 +44,7 @@ export const AntdBooleanCellWithStore = withStoreToCellProps(AntdBooleanCell);
 /**
  * AntdButtonCell
  */
-export const AntdButtonCell = (props: any) => {
+export const AntdButtonCell = (props: any): JSX.Element => {
   const options = props.uiOptions;
   return (
     <Button size={'small'} style={options.style}>
@@ -60,14 +58,14 @@ export const AntdButtonCellWithStore = withStoreToCellProps(AntdButtonCell);
 /**
  * AntdEnumCell
  */
-export const AntdEnumCell = (props: any /*: EnumCellProps & WithClassname*/) => <AntdSelect {...props} />;
+export const AntdEnumCell = (props: any /*: EnumCellProps & WithClassname*/): JSX.Element => <AntdSelect {...props} />;
 export const antdEnumCellTester: RankedTester = rankWith(2, isEnumControl);
 export const AntdEnumCellWithStore = withStoreToCellProps(AntdEnumCell);
 
 /**
  * AntdNumberCell & AntdIntegerCell
  */
-export const AntdNumberCell = (props: any) => {
+export const AntdNumberCell = (props: any): JSX.Element => {
   return <CellRenderer Cell={AntdInputNumber} {...props} />;
 };
 
@@ -80,7 +78,7 @@ export const AntdNumberCellWithStore = withStoreToCellProps(AntdNumberCell);
 /**
  * AntdImageCell
  */
-export const AntdImageCell = (props: any) => {
+export const AntdImageCell = (props: any): JSX.Element => {
   const { data } = props;
   return <Image style={{ height: '100%', width: '100%' }} src={data[0]} />;
 };
@@ -90,7 +88,7 @@ export const AntdImageCellWithStore = withStoreToCellProps(AntdImageCell);
 /**
  * AntdRateCell
  */
-export const AntdRateCell = (props: any /*: EnumCellProps & WithClassname*/) => {
+export const AntdRateCell = (props: any /*: EnumCellProps & WithClassname*/): JSX.Element => {
   return (
     <React.Fragment>
       <Rate
@@ -109,7 +107,7 @@ export const AntdRateCellWithStore = withStoreToCellProps(AntdRateCell);
 /**
  * AntdTextCell
  */
-export const AntdTextCell = (props: any) => {
+export const AntdTextCell = (props: any): JSX.Element => {
   return <CellRenderer Cell={AntdInputText} {...props} />;
 };
 export const antdTextCellTester: RankedTester = rankWith(1, isStringControl);
@@ -118,7 +116,7 @@ export const AntdTextCellWithStore = withStoreToCellProps(AntdTextCell);
 /**
  * AntdTimeCell
  */
-export const AntdTimeCell = (props: any) => {
+export const AntdTimeCell = (props: any): JSX.Element => {
   return <CellRenderer Cell={AntdInputDate} {...props} />;
 };
 export const antdTimeCellTester: RankedTester = rankWith(2, isDateTimeControl);

src/cells/TinyMCECell.tsx

@@ -15,7 +15,7 @@ import { withStoreToCellProps } from '../util/ContextToProps';
 import { TinyMCE } from '../antd-controls/TinyMCE';
 import { CellRenderer } from './CellRenderer';
 
-export const TinyMCECell = (props: any) => {
+export const TinyMCECell = (props: any): JSX.Element => {
   return <CellRenderer Cell={TinyMCE} {...props} />;
 };
 

src/controls/AntdEnumControl.tsx

@@ -14,7 +14,7 @@ import { withStoreToControlProps } from '../util/ContextToProps';
 import { AntdSelect } from '../antd-controls/AntdSelect';
 import { AntdInputControl } from './AntdInputControl';
 
-export const AntdEnumControl = (props: any) => <AntdInputControl {...props} input={AntdSelect} />;
+export const AntdEnumControl = (props: any): JSX.Element => <AntdInputControl {...props} input={AntdSelect} />;
 
 export const antdEnumControlTester: RankedTester = rankWith(2, isEnumControl);
 export const AntdEnumControlWithStore = withStoreToControlProps(AntdEnumControl);

src/controls/AntdRadioGroupControl.tsx

@@ -35,8 +35,10 @@ export const AntdRadioGroupControl: React.FC<ControlComponent> = (props) => {
       </Col>
       <Col span={16}>
         <Radio.Group value={currentData} onChange={onChange}>
-          {(uiOptions as any[]).map((optionValue) => (
-            <Radio checked={data === optionValue}>{optionValue}</Radio>
+          {(uiOptions as any[]).map((optionValue, idx: number) => (
+            <Radio key={idx} checked={data === optionValue}>
+              {optionValue}
+            </Radio>
           ))}
         </Radio.Group>
       </Col>

src/data-controls/TabControlRenderer.tsx

@@ -53,7 +53,7 @@ export const TabControl: React.FC<TabControlProps> = ({ tabs = [], handleChange
   );
 };
 
-export const TabControlRenderer = (props: any) => {
+export const TabControlRenderer = (props: any): JSX.Element => {
   return <TabControl {...props} />;
 };
 

src/data-controls/TreeRenderer.tsx

@@ -9,11 +9,9 @@
  ********************************************************************************/
 import { sortBy } from 'lodash-es';
 import React, { useState, useEffect } from 'react';
-import SplitPane from 'react-split-pane';
 import { Tree, Input } from 'antd';
 
 import { SaveReqDialoglWithStore } from '../util/OnSaveDialog';
-import { FormsDispatch } from '../Form';
 import { NodeRenderer } from './NodeRenderer';
 import { TreeContextMenu } from './TreeContextMenu';
 

src/formatters/baseFormatters.tsx

@@ -11,10 +11,9 @@ import { isArray } from 'lodash-es';
 import moment from 'moment';
 import React from 'react';
 import { Link } from 'react-router-dom';
-import { Image, Row, Col } from 'antd';
+import { Image } from 'antd';
 
 import { spriteSheet } from './iconsGreed';
-import { number } from 'mobx-state-tree/dist/internal';
 interface SpriteProps {
   filename: string;
   x: number;
@@ -37,15 +36,15 @@ export const Sprite: React.FC<SpriteProps> = ({ filename, x = 0, y = 0, width =
   return <div style={style} />;
 };
 
-export const base = ({ value }: any) => <div style={{ margin: '6px' }}>{value}</div>;
+export const base = ({ value }: any): JSX.Element => <div style={{ margin: '6px' }}>{value}</div>;
 
-export const integer = ({ value }: any) => value.toString();
+export const integer = ({ value }: any): string => value.toString();
 
-export const identifier = ({ value }: any) => (
+export const identifier = ({ value }: any): JSX.Element => (
   <Link to={`/artifacts/${value}`}>{value.toString().padStart(5, '0')}</Link>
 );
 
-export const image = ({ value }: any) => (
+export const image = ({ value }: any): JSX.Element => (
   <div style={{ height: 60, float: 'left', paddingRight: '3px', overflow: 'hidden' }}>
     <Image
       style={{ height: 60, maxWidth: 60, width: 'auto' }}
@@ -54,7 +53,7 @@ export const image = ({ value }: any) => (
   </div>
 );
 
-export const artifactTitle = ({ value, type }: any) => {
+export const artifactTitle = ({ value, type }: any): JSX.Element => {
   const SpriteObj: any = {
     'rmUserTypes:_YwcOsRmREemK5LEaKhoOow_Module': 'allocated-requirement',
     'rmUserTypes:_YwcOsRmREemK5LEaKhoOow_Text': 'analysis-document',
@@ -78,9 +77,9 @@ export const artifactTitle = ({ value, type }: any) => {
   );
 };
 
-export const dateTime = ({ value }: any) => <span>{moment(value).subtract(10, 'days').calendar()}</span>;
+export const dateTime = ({ value }: any): JSX.Element => <span>{moment(value).subtract(10, 'days').calendar()}</span>;
 
-export const link = ({ value, link, options }: any) => {
+export const link = ({ value, link, options }: any): JSX.Element => {
   const label = options.label || value || link;
   const specialImage = options.specialImage;
   return (
@@ -95,7 +94,7 @@ export const link = ({ value, link, options }: any) => {
   );
 };
 
-export const labeledValue = ({ value, options }: any) => {
+export const labeledValue = ({ value, options }: any): JSX.Element => {
   const label = options.label || null;
   const specialChar = options.specialChar || '';
   return (
@@ -105,7 +104,7 @@ export const labeledValue = ({ value, options }: any) => {
   );
 };
 
-export const сomparison = ({ value, prevValue, options }: any) => {
+export const сomparison = ({ value, prevValue, options }: any): JSX.Element => {
   const delta: number = value - prevValue;
   const label = options.label;
   return (

src/icons/index.ts

@@ -9,7 +9,7 @@
  ********************************************************************************/
 import React from 'react';
 import * as allIcons from '@ant-design/icons/lib/icons';
-import AntdIcon, { createFromIconfontCN, getTwoToneColor, setTwoToneColor } from '@ant-design/icons';
+import { createFromIconfontCN, getTwoToneColor, setTwoToneColor } from '@ant-design/icons';
 
 import { withThemeSuffix, removeTypeTheme, getThemeFromTypeName, alias } from './utils';
 import warning from './warning';

src/icons/utils.ts

@@ -38,7 +38,7 @@ export function getThemeFromTypeName(type: string): ThemeType | null {
   return result;
 }
 
-export function removeTypeTheme(type: string) {
+export function removeTypeTheme(type: string): string {
   return type.replace(fillTester, '').replace(outlineTester, '').replace(twoToneTester, '');
 }
 
@@ -48,7 +48,7 @@ const themeMap: { [key in ThemeType]: string } = {
   twoTone: 'twoTone',
 };
 
-export function withThemeSuffix(type: string, theme: ThemeType) {
+export function withThemeSuffix(type: string, theme: ThemeType): string {
   const result = upperFirst(camelCase(type));
   const realTheme = upperFirst(themeMap[theme]);
 
@@ -60,7 +60,7 @@ export function withThemeSuffix(type: string, theme: ThemeType) {
 }
 
 // For alias or compatibility
-export function alias(type: string) {
+export function alias(type: string): string {
   let newType = type;
   switch (type) {
     case 'cross':

src/layouts/AntdFormLayout.tsx

@@ -8,7 +8,6 @@
  * SPDX-License-Identifier: GPL-3.0-only
  ********************************************************************************/
 import React, { useContext } from 'react';
-//import { AutoResizer } from 'react-base-table';
 import { Row, Button, Form } from 'antd';
 import { observer } from 'mobx-react-lite';
 import { AutoSizer } from 'react-virtualized';
@@ -27,19 +26,9 @@ const divStyle: React.CSSProperties = {
   padding: '5px',
 };
 
-const formItemLayout = {
-  labelCol: {
-    xs: { span: 24 },
-    sm: { span: 8 },
-  },
-  wrapperCol: {
-    xs: { span: 24 },
-    sm: { span: 16 },
-  },
-};
 export const LogicalButton: React.FC<any> = observer<any>(({ form, onCancel, onSave }) => {
   const { store } = useContext(MstContext);
-  const onValidate = Symbol.for('onValidate');
+  //const onValidate = Symbol.for('onValidate');
   const activeSave = false;
   //if (store.onSaveData[form] && store.onSaveData[form][onValidate]) {
   //  activeSave = store.onSaveData[form][onValidate].length !== 0;

src/layouts/SplitPaneLayout.tsx

@@ -12,7 +12,7 @@ import SplitPane from 'react-split-pane';
 import Pane from 'react-split-pane/lib/Pane';
 
 import { FormsDispatchProps, FormsDispatch } from '../Form';
-import { rankWith, uiTypeIs, RankedTester, optionIs } from '../testers';
+import { rankWith, uiTypeIs, RankedTester } from '../testers';
 import { withLayoutProps } from '../util/ContextToProps';
 
 import { LayoutComponent } from './LayoutComponent';

src/table/BaseTableArrayControlRenderer.tsx

@@ -13,7 +13,7 @@ import { withStoreToArrayProps } from '../util/ContextToProps';
 
 import { BaseTableControl } from './BaseTableControl';
 
-export const BaseTableArrayControlRenderer = (props: any) => {
+export const BaseTableArrayControlRenderer = (props: any): JSX.Element => {
   return <BaseTableControl {...props} />;
 };
 

src/table/TableCell.tsx

@@ -29,7 +29,7 @@ import './JsonAntdTable.css';
 
 const type = 'DragableBodyRow';
 
-export const DragableRow = ({ index, moveRow, className, style, ...restProps }: any) => {
+export const DragableRow = ({ index, moveRow, className, style, ...restProps }: any): JSX.Element => {
   const ref = React.useRef<HTMLTableRowElement>();
   const [{ isOver, dropClassName }, drop] = useDrop({
     accept: type,

src/table/basetable/BaseTableMenu.tsx

@@ -96,7 +96,7 @@ export const BaseTableMenu: React.FC<BaseTablrMenu> = ({
             ? t('table.menu.linkArtifacts')
             : t('table.menu.linkArtifacts', { count: selection.length })}
         </li>
-        {selection.length != 0 && target ? (
+        {selection.length !== 0 && target ? (
           <React.Fragment>
             <Divider style={{ margin: '2px' }} />
             <li onClick={() => addDataToTarget(selection)}>

src/table/basetable/TableHeader.tsx

@@ -21,7 +21,7 @@ export const SelectionHeaderCell: React.FC<any> = (props: any) => {
   return <Checkbox checked={checked} onChange={handleChange} />;
 };
 
-export const HeaderCell = ({ column, onSort, container }: any) => {
+export const HeaderCell = ({ column, onSort, container }: any): JSX.Element => {
   const { sortColumns } = container.props;
   const sortDir: any = column.key in sortColumns ? sortColumns[column.key] : 'noSort';
   const onSortClick = () => {