feat(Form): initial Implementation

packages/base/src/hooks/useViewportRange.ts

@@ -0,0 +1,20 @@
+import { useCallback, useEffect, useState } from 'react';
+import { Device } from '@ui5/webcomponents-react-base/lib/Device';
+
+export const useViewportRange = (rangeSet) => {
+  const [currentRange, setCurrentRange] = useState(Device.media.getCurrentRange(rangeSet, window.innerWidth).name);
+
+  const onWindowResize = useCallback(
+    ({ name: range }) => {
+      setCurrentRange(range);
+    },
+    [currentRange, setCurrentRange]
+  );
+
+  useEffect(() => {
+    Device.media.attachHandler(onWindowResize, null, 'StdExt');
+    return () => Device.resize.detachHandler(onWindowResize, null);
+  }, [onWindowResize]);
+
+  return currentRange;
+};

packages/base/src/lib/useViewportRange.ts

@@ -0,0 +1,3 @@
+import { useViewportRange } from '../hooks/useViewportRange';
+
+export { useViewportRange };

packages/main/src/components/AnalyticalTable/hooks/useCellStyling.ts

@@ -0,0 +1,48 @@
+import { TextAlign } from '@ui5/webcomponents-react/lib/TextAlign';
+import { VerticalAlign } from '@ui5/webcomponents-react/lib/VerticalAlign';
+import { CSSProperties } from 'react';
+
+export const useCellStyling = ({ rowHeight }, classes) => ({ column }) => {
+  const style: CSSProperties = {};
+
+  if (rowHeight) {
+    style.height = `${rowHeight}px`;
+  }
+  switch (column.hAlign) {
+    case TextAlign.Begin:
+      style.textAlign = 'start';
+      break;
+    case TextAlign.Center:
+      style.textAlign = 'center';
+      break;
+    case TextAlign.End:
+      style.textAlign = 'end';
+      break;
+    case TextAlign.Left:
+      style.textAlign = 'left';
+      break;
+    case TextAlign.Right:
+      style.textAlign = 'right';
+      break;
+  }
+  switch (column.vAlign) {
+    case VerticalAlign.Bottom:
+      style.verticalAlign = 'bottom';
+      break;
+    case VerticalAlign.Middle:
+      style.verticalAlign = 'middle';
+      break;
+    case VerticalAlign.Top:
+      style.verticalAlign = 'top';
+      break;
+  }
+
+  let className = classes.tableCell;
+  if (column.className) {
+    className += ` ${column.className}`;
+  }
+  return {
+    className,
+    style
+  };
+};

packages/main/src/components/Form/Form.jss.ts

@@ -0,0 +1,28 @@
+import { JSSTheme } from '../../interfaces/JSSTheme';
+
+const styles = ({ parameters }: JSSTheme) => ({
+  formTitle: {
+    borderBottom: `1px solid ${parameters.sapUiGroupTitleBorderColor}`
+  },
+  formTitlePaddingBottom: {
+    paddingBottom: '2em'
+  },
+  formPaddingBottom: {
+    paddingBottom: '1em'
+  },
+  formGroupStyle: {
+    width: '100%',
+    paddingTop: '0.25em'
+  },
+  formItemTopDiv: {
+    alignItems: 'center'
+  },
+  formLabel: {
+    paddingRight: '0.5em'
+  },
+  formElement: {
+    display: 'block'
+  }
+});
+
+export { styles };

packages/main/src/components/Form/Form.md

@@ -0,0 +1,3 @@
+```jsx
+import { Form } from '@ui5/webcomponents-react/lib/Form';
+```

packages/main/src/components/Form/Form.stories.tsx

@@ -0,0 +1,51 @@
+import { Form } from './index';
+import React from 'react';
+import notes from './Form.md';
+import { FormItem } from './FormItem';
+import { FormGroup } from './FormGroup';
+import { CheckBox, Input, InputType, Option, Select } from '../..';
+
+export const defaultStory = () => {
+  return (
+    <Form title={'Test Form'}>
+      <FormGroup title={'Personal Data'}>
+        <FormItem labelText={'Name'}>
+          <Input type={InputType.Text} />
+        </FormItem>
+        <FormItem labelText={'Address'}>
+          <Input type={InputType.Text} />
+        </FormItem>
+        <FormItem labelText={'Country'}>
+          <Select>
+            <Option>Germany</Option>
+            <Option>France</Option>
+            <Option>Italy</Option>
+          </Select>
+        </FormItem>
+        <FormItem labelText={'Home address'}>
+          <CheckBox checked />
+        </FormItem>
+      </FormGroup>
+      <FormGroup title={'Business Data'}>
+        <FormItem labelText={'Organization'}>
+          <Input type={InputType.Text} />
+        </FormItem>
+        <FormItem labelText={'Position'}>
+          <Input type={InputType.Text} />
+        </FormItem>
+        <FormItem labelText={'Wage'}>
+          <Input type={InputType.Number} value={'5000'} disabled />
+        </FormItem>
+        <FormItem labelText={'Pilot license'}>
+          <CheckBox checked />
+        </FormItem>
+      </FormGroup>
+    </Form>
+  );
+};
+
+export default {
+  title: 'Components | Form',
+  component: Form,
+  parameters: { notes }
+};

packages/main/src/components/Form/Form.test.tsx

@@ -0,0 +1,90 @@
+import { mountThemedComponent } from '@shared/tests/utils';
+import * as React from 'react';
+import { Form } from '@ui5/webcomponents-react/lib/Form';
+import { FormGroup } from '@ui5/webcomponents-react/lib/FormGroup';
+import { FormItem } from '@ui5/webcomponents-react/lib/FormItem';
+import { Input } from '../../webComponents/Input';
+import { InputType } from '../..';
+
+const SIZE_S = 200;
+const SIZE_M = 800;
+const SIZE_L = 1200;
+const SIZE_XL = 1600;
+const component = (
+  <Form title={'Test form'}>
+    <FormGroup title={'Group 1'}>
+      <FormItem labelText={'item 1'}>
+        <Input type={InputType.Text}></Input>
+      </FormItem>
+      <FormItem labelText={'item 2'}>
+        <Input type={InputType.Number}></Input>
+      </FormItem>
+    </FormGroup>
+    <FormGroup title={'Group 2'}>
+      <FormItem labelText={'item 1'}>
+        <Input type={InputType.Text}></Input>
+      </FormItem>
+      <FormItem labelText={'item 2'}>
+        <Input type={InputType.Number}></Input>
+      </FormItem>
+    </FormGroup>
+  </Form>
+);
+
+describe('Create a Form', () => {
+  test('size rate S; should create Label and Element with 100% width and display: block for top FormItem div', () => {
+    window = Object.assign(window, { innerWidth: SIZE_S });
+    const wrapper = mountThemedComponent(component);
+    expect(wrapper.render()).toMatchSnapshot();
+  });
+
+  test('size rate M; should create Label and Element with 16% and 83% width respectively and display: flex for top FormItem div', () => {
+    window = Object.assign(window, { innerWidth: SIZE_M });
+    const wrapper = mountThemedComponent(component);
+    expect(wrapper.render()).toMatchSnapshot();
+  });
+
+  test('size rate L; should create Label and Element with 33% and 66% width respectively and display: flex for top FormItem div', () => {
+    window = Object.assign(window, { innerWidth: SIZE_L });
+    const wrapper = mountThemedComponent(component);
+    expect(wrapper.render()).toMatchSnapshot();
+  });
+
+  test('size rate XL; should create Label and Element with 33% and 66% width respectively and display: flex for top FormItem div', () => {
+    window = Object.assign(window, { innerWidth: SIZE_XL });
+    const wrapper = mountThemedComponent(component);
+    expect(wrapper.render()).toMatchSnapshot();
+  });
+
+  test('should create a FormGroup and put ungrouped FormItems into it', () => {
+    const ungroupedChildren = (
+      <Form title={'Test form'}>
+        <FormItem labelText={'item 1'}>
+          <Input type={InputType.Text}></Input>
+        </FormItem>
+        <FormItem labelText={'item 2'}>
+          <Input type={InputType.Number}></Input>
+        </FormItem>
+      </Form>
+    );
+    const wrapper = mountThemedComponent(ungroupedChildren);
+    expect(wrapper.render()).toMatchSnapshot();
+  });
+
+  test("should use a single FormGroup's title as a Form title if one is not set", () => {
+    const ungroupedChildren = (
+      <Form>
+        <FormGroup title={'To be Form title'}>
+          <FormItem labelText={'item 1'}>
+            <Input type={InputType.Text}></Input>
+          </FormItem>
+          <FormItem labelText={'item 2'}>
+            <Input type={InputType.Number}></Input>
+          </FormItem>
+        </FormGroup>
+      </Form>
+    );
+    const wrapper = mountThemedComponent(ungroupedChildren);
+    expect(wrapper.render()).toMatchSnapshot();
+  });
+});

packages/main/src/components/Form/FormGroup/index.tsx

@@ -0,0 +1,54 @@
+import React, { Children, FC, forwardRef, ReactNode, ReactNodeArray, Ref } from 'react';
+import { FlexBox } from '@ui5/webcomponents-react/lib/FlexBox';
+import { styles } from '../Form.jss';
+import { FlexBoxAlignItems } from '@ui5/webcomponents-react/lib/FlexBoxAlignItems';
+import { FlexBoxDirection } from '@ui5/webcomponents-react/lib/FlexBoxDirection';
+import { FlexBoxJustifyContent } from '@ui5/webcomponents-react/lib/FlexBoxJustifyContent';
+import { Title } from '@ui5/webcomponents-react/lib/Title';
+import { TitleLevel } from '@ui5/webcomponents-react/lib/TitleLevel';
+import { createUseStyles } from 'react-jss';
+import { JSSTheme } from '../../../interfaces/JSSTheme';
+
+export interface FormGroupProps {
+  title?: string;
+  children: ReactNode | ReactNodeArray;
+  type?: string;
+}
+
+const useStyles = createUseStyles<JSSTheme, keyof ReturnType<typeof styles>>(styles, { name: 'FormGroup' });
+
+const FormGroup: FC<FormGroupProps> = forwardRef((props: FormGroupProps, ref: Ref<HTMLDivElement>) => {
+  const { title, children } = props;
+
+  const classes = useStyles();
+
+  return (
+    <div ref={ref}>
+      {title && (
+        <Title level={TitleLevel.H5} className={classes.formPaddingBottom}>
+          {title}
+        </Title>
+      )}
+      <FlexBox
+        justifyContent={FlexBoxJustifyContent.Start}
+        alignItems={FlexBoxAlignItems.End}
+        fitContainer
+        direction={FlexBoxDirection.Column}
+      >
+        {Children.map(children, (child, index) => {
+          return (
+            <div key={index.toString()} className={classes.formGroupStyle}>
+              {child}
+            </div>
+          );
+        })}
+      </FlexBox>
+    </div>
+  );
+});
+
+FormGroup.defaultProps = {
+  type: 'formGroup'
+};
+
+export { FormGroup };

packages/main/src/components/Form/FormItem/index.tsx

@@ -0,0 +1,86 @@
+import React, { FC, forwardRef, Ref, ReactNode, ReactNodeArray, useMemo, useContext } from 'react';
+import { Label } from '@ui5/webcomponents-react/lib/Label';
+import { styles } from '../Form.jss';
+import { createUseStyles } from 'react-jss';
+import { CurrentRange } from '../index';
+import { JSSTheme } from '../../../interfaces/JSSTheme';
+
+export interface FormItemProps {
+  labelText?: string;
+  children: ReactNode | ReactNodeArray;
+  type?: string;
+}
+
+const calculateWidth = (rate) => {
+  return Math.floor((100 / 12) * rate) + '%';
+};
+
+const useStyles = createUseStyles<JSSTheme, keyof ReturnType<typeof styles>>(styles, { name: 'FormItem' });
+
+const FormItem: FC<FormItemProps> = forwardRef((props: FormItemProps, ref: Ref<HTMLDivElement>) => {
+  const { labelText, children } = props;
+
+  const currentRange = useContext(CurrentRange);
+
+  const classes = useStyles();
+  const topDivClass = classes.formItemTopDiv;
+  const labelClass = classes.formLabel;
+  const elementClass = classes.formElement;
+
+  const memoizedStyles = useMemo(() => {
+    let labelWidth;
+    let labelTextAlign = 'flex-end';
+    let display = 'flex';
+    let elementWidth;
+
+    switch (currentRange) {
+      case 'Phone':
+        labelWidth = '100%';
+        elementWidth = '100%';
+        display = 'block';
+        labelTextAlign = 'flex-start';
+        break;
+      case 'Tablet':
+        labelWidth = calculateWidth(2);
+        elementWidth = calculateWidth(10);
+        break;
+      case 'Desktop':
+      case 'LargeDesktop':
+        labelWidth = calculateWidth(4);
+        elementWidth = calculateWidth(8);
+        break;
+    }
+
+    return {
+      topDivStyle: {
+        display: display
+      },
+      labelStyle: {
+        width: labelWidth,
+        justifyContent: labelTextAlign
+      },
+      elementStyle: {
+        width: elementWidth
+      }
+    };
+  }, [children, currentRange]);
+
+  return (
+    <div ref={ref}>
+      <div style={memoizedStyles.topDivStyle} className={topDivClass}>
+        <Label style={memoizedStyles.labelStyle} className={labelClass}>
+          {labelText ? labelText : ''}
+        </Label>
+        <div style={memoizedStyles.elementStyle} className={elementClass}>
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+});
+
+FormItem.defaultProps = {
+  type: 'formItem'
+};
+
+export { FormItem };