docs(Form): add JSDoc comments (#931)

Author: Lukas742

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

@@ -34,6 +34,9 @@ import { DocsHeader } from '@shared/stories/DocsHeader';
   <Story name="Default">
     {(args) => (
       <Form {...args} title={args.title}>
+        <FormItem label={'Sole Form Item'}>
+          <Input type={InputType.Text} />
+        </FormItem>
         <FormGroup title={'Personal Data'}>
           <FormItem label={'Name'}>
             <Input type={InputType.Text} />
@@ -52,9 +55,6 @@ import { DocsHeader } from '@shared/stories/DocsHeader';
             <CheckBox checked />
           </FormItem>
         </FormGroup>
-        <FormItem label={'Sole Form Item'}>
-          <Input type={InputType.Text} />
-        </FormItem>
         <FormGroup title={'Company Data'}>
           <FormItem label={'Company Name'}>
             <Input type={InputType.Text} />
@@ -91,9 +91,9 @@ import { DocsHeader } from '@shared/stories/DocsHeader';
   </Story>
 </Canvas>
 
+<ArgsTable story="." />
+
 ### Usage Notes
 
 Please note that the `FormGroup` and `FormItem` components are only used for calculating the final layout of the `Form`,
-thus they don't accept any other props then the specified ones, especially no `className`, `style` or `ref`.
-
-<ArgsTable story="." />
+thus they don't accept any other props than the specified ones, especially no `className`, `style` or `ref`.

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

@@ -82,7 +82,9 @@ export interface FormPropTypes extends CommonProps {
 }
 
 const useStyles = createComponentStyles(styles, { name: 'Form' });
-
+/**
+ * The `Form` component arranges labels and fields into groups and rows. There are different ways to visualize forms for different screen sizes.
+ */
 const Form: FC<FormPropTypes> = forwardRef((props: FormPropTypes, ref: Ref<HTMLDivElement>) => {
   const {
     title,

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

@@ -23,7 +23,10 @@ const useStyles = createComponentStyles(
   },
   { name: 'FormGroup' }
 );
-
+/**
+ * The `FormGroup` encapsulates `FormItems` into groups.
+ * __Note:__ `FormGroup` is only used for calculating the final layout of the `Form`, thus it doesn't accept any other props than `title` and `children`, especially no `className`, `style` or `ref`.
+ */
 const FormGroup: FC<FormGroupProps> = (props: FormGroupProps) => {
   const { title, children } = props;
 

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

@@ -70,7 +70,9 @@ const renderLabel = (
 
   return null;
 };
-
+/**
+ * The `FormItem` is only used for calculating the final layout of the `Form`, thus it doesn't accept any other props than `label` and `children`, especially no `className`, `style` or `ref`.
+ */
 const FormItem: FC<FormItemProps> = (props: FormItemProps) => {
   const { label, children, columnIndex, rowIndex, labelSpan } = props as InternalProps;