fixup! fixup! transform RUI to typescript (#394)

Author: lukasbriza

src/components/Alert/Alert.tsx

@@ -10,9 +10,9 @@ import { AlertProps } from './Alert.types';
 export const Alert: React.FunctionComponent<AlertProps> = ({
   children,
   color = 'note',
-  icon = null,
+  icon,
   id,
-  onClose = null,
+  onClose,
   ...restProps
 }) => {
   const translations = useContext(TranslationsContext);

src/components/Button/Button.tsx

@@ -14,18 +14,18 @@ import styles from './Button.module.scss';
 
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
   const {
-    afterLabel = null,
-    beforeLabel = null,
+    afterLabel,
+    beforeLabel,
     block = false,
     disabled = false,
-    endCorner = null,
-    feedbackIcon = null,
+    endCorner,
+    feedbackIcon,
     id,
     label,
     labelVisibility = 'xs',
     priority = 'filled',
     size = 'medium',
-    startCorner = null,
+    startCorner,
     color = 'primary',
     ...restProps
   } = props;

src/components/ButtonGroup/ButtonGroup.tsx

@@ -17,7 +17,7 @@ import styles from './ButtonGroup.module.scss';
 export const ButtonGroup: React.FunctionComponent<ButtonGroupProps> = ({
   block = defaultValues.block,
   disabled = defaultValues.disabled,
-  children = null,
+  children,
   priority = defaultValues.priority,
   size = defaultValues.size,
   ...restProps

src/components/CheckboxField/CheckboxField.tsx

@@ -10,15 +10,15 @@ import styles from './CheckboxField.module.scss';
 export const CheckboxField = React.forwardRef<HTMLInputElement, CheckboxFieldProps>((props, ref) => {
   const {
     disabled = false,
-    helpText = null,
+    helpText,
     id,
     isLabelVisible = true,
     label,
     labelPosition = 'after',
     renderAsRequired = false,
     required = false,
     validationState,
-    validationText = null,
+    validationText,
     ...restProps
   } = props;
   const context = useContext(FormLayoutContext);

src/components/FileInputField/FileInputField.tsx

@@ -12,14 +12,14 @@ export const FileInputField = React.forwardRef<HTMLInputElement, FileInputFieldP
   const {
     disabled = false,
     fullWidth = false,
-    helpText = null,
+    helpText,
     id,
     isLabelVisible = true,
     label,
     layout = 'vertical',
     required = false,
     validationState,
-    validationText = null,
+    validationText,
     ...restProps
   } = props;
 

src/components/FormLayout/FormLayout.tsx

@@ -14,7 +14,7 @@ import { PREDEFINED_LABEL_WIDTH_VALUES } from './constants';
 
 export const FormLayout: React.FunctionComponent<FormLayoutProps> = ({
   autoWidth = false,
-  children = null,
+  children,
   fieldLayout = defaultValues.layout,
   labelWidth = 'default',
   ...restProps

src/components/Grid/Grid.tsx

@@ -10,7 +10,7 @@ export const Grid: React.FunctionComponent<GridProps> = ({
   alignContent,
   alignItems,
   autoFlow,
-  children = null,
+  children,
   columnGap = 4,
   columns = '1fr',
   justifyContent,

src/components/Grid/GridSpan.tsx

@@ -7,7 +7,7 @@ import styles from './Grid.module.scss';
 import { GridSpanProps } from './GridSpan.types';
 
 export const GridSpan: React.FunctionComponent<GridSpanProps> = ({
-  children = null,
+  children,
   columns = 1,
   rows = 1,
   tag: Tag = 'div',

src/components/InputGroup/InputGroup.tsx

@@ -28,7 +28,7 @@ export const InputGroup: React.FunctionComponent<InputGroupProps> = ({
   layout = defaultValues.layout,
   required = false,
   size = defaultValues.size,
-  validationTexts = null,
+  validationTexts,
   ...restProps
 }) => {
   const formLayoutContext = useContext(FormLayoutContext);

src/components/Modal/Modal.tsx

@@ -57,10 +57,10 @@ export const Modal: React.FunctionComponent<ModalProps> = ({
   allowCloseOnEscapeKey = true,
   allowPrimaryActionOnEnterKey = true,
   autoFocus = true,
-  children = null,
+  children,
   closeButtonRef,
-  dialogRef = null,
-  portalId = null,
+  dialogRef,
+  portalId,
   position = 'center',
   preventScrollUnderneath = window.document.body,
   primaryButtonRef,
@@ -125,7 +125,7 @@ export const Modal: React.FunctionComponent<ModalProps> = ({
     onKeyDown,
   };
 
-  if (portalId === null) {
+  if (portalId === undefined) {
     return preRender(
       children,
       internalDialogRef,

src/components/Modal/ModalBody.tsx

@@ -8,7 +8,7 @@ import { ModalBodyProps } from './ModalBody.types';
 import styles from './ModalBody.module.scss';
 
 export const ModalBody: React.FunctionComponent<ModalBodyProps> = ({
-  children = null,
+  children,
   scrolling = 'auto',
   ...restProps
 }) => {

src/components/Modal/ModalContent.tsx

@@ -6,7 +6,7 @@ import { ModalContentProps } from './ModalContent.types';
 import styles from './ModalContent.module.scss';
 
 export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
-  children = null,
+  children,
   ...restProps
 }) => {
   if (isChildrenEmpty(children)) {

src/components/ScrollView/ScrollView.tsx

@@ -30,7 +30,7 @@ export const ScrollView = React.forwardRef<HTMLDivElement, ScrollViewProps>((pro
     arrows = false,
     arrowsScrollStep = 200,
     autoScroll = 'off',
-    children = null,
+    children,
     endShadowBackground = 'linear-gradient(var(--rui-local-end-shadow-direction), rgba(255 255 255 / 1), rgba(255 255 255 / 0))',
     endShadowInitialOffset = '-1rem',
     endShadowSize = '2em',

src/components/SelectField/SelectField.tsx

@@ -18,7 +18,7 @@ export const SelectField = React.forwardRef<HTMLSelectElement, SelectFieldProps>
   const {
     disabled = false,
     fullWidth = false,
-    helpText = null,
+    helpText,
     id,
     isLabelVisible = true,
     label,
@@ -28,7 +28,7 @@ export const SelectField = React.forwardRef<HTMLSelectElement, SelectFieldProps>
     required = false,
     size = 'medium',
     validationState,
-    validationText = null,
+    validationText,
     variant = 'outline',
     ...restProps
   } = props;

src/components/Tabs/Tabs.types.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 
-export type TabsProps = {
+export type TabsProps = React.ComponentProps<'nav'> & {
   /**
    * Nested `TabsItem` elements.
    */

src/components/Tabs/TabsItem.types.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 
-export type TabsItemProps = {
+export type TabsItemProps = React.ComponentProps<'a'> & {
   /**
    * Optional element shown after item's label, e.g. an icon.
    */

src/components/TextArea/TextArea.types.ts

@@ -6,7 +6,7 @@ import {
   Validation,
 } from '../../types';
 
-export type TextAreaProps = {
+export type TextAreaProps = React.ComponentProps<'textarea'> & {
   /**
    * If `true`, the input will be disabled.
    */

src/components/Toolbar/Toolbar.types.ts

@@ -4,7 +4,7 @@ import {
   Justify,
 } from '../../types';
 
-export type ToolbarProps = {
+export type ToolbarProps = React.ComponentProps<'div'> & {
   /**
    * Vertical alignment of toolbar items and groups.
    */

src/components/Toolbar/ToolbarGroup.types.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { Align } from '../../types';
 
-export type ToolbarGroupProps = {
+export type ToolbarGroupProps = React.ComponentProps<'div'> & {
   /**
    * Vertical alignment of toolbar items in the group.
    */