Merge pull request #3837 from Sage/FE-2818-add-missing-type-definitions

chore: typescript fixes - FE-2818

docs/typescript-styleguide.md

@@ -52,19 +52,22 @@ export interface MyComponentProps {
   exampleOptionalProp?: string;
 }
 
-declare const MyComponent: React.FunctionComponent<MyComponentProps>;
+declare function MyComponent(props: MyComponentProps): JSX.Element;
 
 export default MyComponent;
 ```
 
+Exports in the `<component-name>.d.ts` file should match it's js counterpart.
+
 #### Index file
 
-The `index.d.ts` file for each component should follow this template:
+Exports in the `index.d.ts` file should should match exports in the index.js file:
 
 ```ts
 export { default } from "./my-component"; // If the js export type is default
-export { default as MyComponent } from "./my-component"; // If the js export type is named
-export { default as MySubComponent } from "./my-sub-component/my-sub-component";
+export { MyComponent } from "./my-component"; // If the js export type is named
+export { default as MyComponent } from "./my-component"; // If the js export type is named and the Component is exported as default in the component.d.ts file
+export { MySubComponent } from "./my-sub-component/my-sub-component";
 ```
 
 #### Shared types
@@ -84,3 +87,10 @@ Our linting rules are defined in [tsconfig.json](../tsconfig.json) at the root o
 ```
 npm run lint-ts
 ```
+
+### Tips
+
+To avoid TypeScript eslint errors in VSCode when using the ESLint plugin, a line should be added to the `settings.json` to disable ESLint in TypeScript:
+```
+"eslint.probe": ["javascript", "javascriptreact", "html", "markdown"],
+```

package.json

@@ -74,6 +74,8 @@
     "@types/node": "10.12.18",
     "@types/react": "16.9.31",
     "@types/react-dom": "16.0.11",
+    "@types/styled-components": "^5.1.9",
+    "@types/styled-system": "^5.1.11",
     "axe-core": "^3.5.5",
     "babel-eslint": "10.0.3",
     "babel-jest": "^26.6.3",

src/__experimental__/components/checkbox/checkbox-group.d.ts

@@ -1,6 +1,7 @@
 import * as React from "react";
+import { ValidationPropTypes } from "../../../components/validations";
 
-interface CheckboxGroupProps {
+interface CheckboxGroupProps extends ValidationPropTypes {
   /** The content for the CheckboxGroup Legend */
   legend?: string;
   /** When true, legend is placed in line with the checkboxes */
@@ -12,21 +13,9 @@ interface CheckboxGroupProps {
   /** Spacing between legend and field for inline legend, number multiplied by base spacing unit (8) */
   legendSpacing?: 1 | 2;
   /** The Checkboxes to be rendered in the group */
-  children: React.FunctionComponent | React.ComponentClass;
+  children: React.ReactNode;
   /** Specifies the name prop to be applied to each button in the group */
   groupName: string;
-  /* Indicate that error has occurred
-    Pass string to display icon, tooltip and red border
-    Pass true boolean to only display red border */
-  error?: boolean | string;
-  /* Indicate that warning has occurred
-    Pass string to display icon, tooltip and orange border
-    Pass true boolean to only display orange border */
-  warning?: boolean | string;
-  /* Indicate additional information
-    Pass string to display icon, tooltip and blue border
-    Pass true boolean to only display blue border */
-  info?: boolean | string;
   /** Margin bottom, given number will be multiplied by base spacing unit (8) */
   mb?: 0 | 1 | 2 | 3 | 4 | 5 | 7;
   /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
@@ -35,6 +24,6 @@ interface CheckboxGroupProps {
   required?: boolean;
 }
 
-declare const CheckboxGroup: React.ComponentClass<CheckboxGroupProps>;
+declare function CheckboxGroup(props: CheckboxGroupProps): JSX.Element;
 
 export { CheckboxGroup };

src/__experimental__/components/checkbox/checkbox.component.js

@@ -35,7 +35,7 @@ const Checkbox = ({
     onBlur,
     labelInline: true,
     inputId: id,
-    inputLabel: label,
+    label,
     inputValue: value,
     inputType: "checkbox",
     reverse: !props.reverse,

src/__experimental__/components/checkbox/checkbox.d.ts

@@ -1,41 +1,22 @@
 import * as React from "react";
-import { SpacingProps } from "../../../utils/helpers/options-helper";
+import { SpaceProps } from "styled-system";
+import { CommonCheckableInputProps } from "../../../__internal__/checkable-input";
 
-interface CheckboxProps extends SpacingProps {
-  checked?: boolean;
-  disabled?: boolean;
-  fieldHelp?: React.ReactNode;
-  labelHelp?: React.ReactNode;
+export interface CheckboxProps extends CommonCheckableInputProps, SpaceProps {
+  /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
+  adaptiveLabelBreakpoint?: number;
+  /** If true the Component will be focused when rendered */
   autoFocus?: boolean;
-  fieldHelpInline?: boolean;
+  /** Unique Identifier for the input. Will use a randomly generated GUID if none is provided */
   id?: string;
-  inputWidth?: number | string;
-  label?: string;
-  labelWidth?: number | string;
-  labelSpacing?: 1 | 2;
-  onChange?: (ev: React.ChangeEvent<HTMLElement>) => void;
-  onBlur?: (ev: React.ChangeEvent<HTMLElement>) => void;
-  reverse?: boolean;
-  size?: string;
-  value: string;
-  /* Indicate that error has occurred
-  Pass string to display icon, tooltip and red border
-  Pass true boolean to only display red border */
-  error?: boolean | string;
-  /* Indicate that warning has occurred
-  Pass string to display icon, tooltip and orange border
-  Pass true boolean to only display orange border */
-  warning?: boolean | string;
-  /* Indicate additional information
-  Pass string to display icon, tooltip and blue border
-  Pass true boolean to only display blue border */
-  info?: boolean | string;
-  /** Breakpoint for adaptive spacing (left margin changes to 0). Enables the adaptive behaviour when set */
-  adaptiveSpacingBreakpoint?: number;
-  /** Flag to configure component as mandatory */
-  required?: boolean;
+  /** A message that the Help component will display */
+  labelHelp?: string | React.ReactNode;
+  /** Size of the checkbox */
+  size?: "small" | "large";
+  /** The value of the checkbox, passed on form submit */
+  value?: string;
 }
 
-declare const Checkbox: React.ComponentClass<CheckboxProps>;
+declare function Checkbox(props: CheckboxProps): JSX.Element;
 
 export { Checkbox };

src/__experimental__/components/checkbox/index.d.ts

@@ -1,2 +1,2 @@
-export { CheckboxGroup } from './checkbox-group';
-export { Checkbox } from './checkbox';
+export { CheckboxGroup } from "./checkbox-group";
+export { Checkbox } from "./checkbox";

src/__experimental__/components/date-range/date-range.d.ts

@@ -1,23 +1,69 @@
 import * as React from "react";
-import DateInput from "../date";
+import { DateInputProps } from "../date/date";
+import { TextboxProps } from "../textbox/textbox";
+
+export interface DateRangeChangeEvent {
+  target: {
+    value: [
+      {
+        formattedValue: number;
+        rawValue: string;
+      },
+      {
+        formattedValue: number;
+        rawValue: string;
+      }
+    ];
+  };
+}
 
 export interface DateRangeProps {
+  /* The default value of the input if it's meant to be used as an uncontrolled component */
+  defaultValue?: string[];
+  /** Props for the child end Date component */
+  endDateProps?: DateInputProps;
   /** Optional label for endDate field */
   endLabel?: string;
+  /**
+   * Indicate that error has occurred on end date
+   * Pass string to display icon, tooltip and red border
+   * Pass true boolean to only display red border
+   */
+  endError?: boolean | string;
+  /**
+   * Indicate additional information for end date
+   * Pass string to display icon, tooltip and blue border
+   * Pass true boolean to only display blue border
+   */
+  endInfo?: boolean | string;
+  /**
+   * Indicate that warning has occurred on end date
+   * Pass string to display icon, tooltip and orange border
+   * Pass true boolean to only display orange border
+   */
+  endWarning?: boolean | string;
+  /** An optional string prop to provide an id to the component */
+  id?: string;
+  /** Display labels inline */
+  labelsInline?: boolean;
+  /** An optional string prop to provide a name to the component */
+  name?: string;
   /** Specify a callback triggered on change */
-  onChange?: (ev: React.ChangeEvent<HTMLElement>) => void;
+  onChange?: (ev: DateRangeChangeEvent) => void;
   /** Specify a callback triggered on blur */
   onBlur?: (ev: React.ChangeEvent<HTMLElement>) => void;
-  /** An array containing the value of startDate and endDate */
-  value?: string[];
-  /* The default value of the input if it's meant to be used as an uncontrolled component */
-  defaultValue?: string[];
-  /** Indicate that error has occurred on start date
+  /** Props for the child start Date component */
+  startDateProps?: DateInputProps;
+  /** Optional label for startDate field */
+  startLabel?: string;
+  /**
+   * Indicate that error has occurred on start date
    * Pass string to display icon, tooltip and red border
    * Pass true boolean to only display red border
    */
   startError?: boolean | string;
-  /** Indicate that warning has occurred on start date
+  /**
+   * Indicate that warning has occurred on start date
    * Pass string to display icon, tooltip and orange border
    * Pass true boolean to only display orange border
    */
@@ -27,37 +73,12 @@ export interface DateRangeProps {
    * Pass true boolean to only display blue border
    */
   startInfo?: boolean | string;
-  /** Indicate that error has occurred on end date
-   * Pass string to display icon, tooltip and red border
-   * Pass true boolean to only display red border
-   */
-  endError?: boolean | string;
-  /** Indicate that warning has occurred on end date
-   * Pass string to display icon, tooltip and orange border
-   * Pass true boolean to only display orange border
-   */
-  endWarning?: boolean | string;
-  /** Indicate additional information for end date
-   * Pass string to display icon, tooltip and blue border
-   * Pass true boolean to only display blue border
-   */
-  endInfo?: boolean | string;
+  /** An array containing the value of startDate and endDate */
+  value?: string[];
   /** When true, validation icons will be placed on labels instead of being placed on the inputs */
   validationOnLabel?: boolean;
-  /** Optional label for startDate field */
-  startLabel?: string;
-  /** Display labels inline */
-  labelsInline?: boolean;
-  /** Props for the child start Date component */
-  startDateProps?: DateInput;
-  /** Props for the child end Date component */
-  endDateProps?: DateInput;
-  /** An optional string prop to provide a name to the component */
-  name?: string;
-  /** An optional string prop to provide an id to the component */
-  id?: string;
 }
 
-declare const DateRange: React.ComponentClass<DateRangeProps>;
+declare class DateRange extends React.Component<DateRangeProps> {}
 
 export default DateRange;

src/__experimental__/components/date/date.d.ts

@@ -12,22 +12,16 @@ export interface DateInputProps extends TextboxProps {
   minDate?: string;
   /** Maximum possible date YYYY-MM-DD */
   maxDate?: string;
+  /** Name of the input */
+  name?: string;
   /** Specify a callback triggered on blur */
   onBlur?: (ev: React.ChangeEvent<HTMLElement>) => void;
-  /** Specify a callback triggered on change */
-  onChange?: (ev: React.ChangeEvent<HTMLElement>) => void;
   /** Specify a callback triggered on focus */
   onFocus?: (ev: React.ChangeEvent<HTMLElement>) => void;
-  /** Name of the input */
-  name?: string;
   /** The current date YYYY-MM-DD */
   value?: string;
-  /** Breakpoint for adaptive spacing (left margin changes to 0). Enables the adaptive behaviour when set */
-  adaptiveSpacingBreakpoint?: number;
-  /** Flag to configure component as mandatory */
-  required?: boolean;
 }
 
-declare const DateInput: React.ComponentClass<DateInputProps>;
+declare class DateInput extends React.Component<DateInputProps> {}
 
 export default DateInput;

src/__experimental__/components/decimal/decimal.d.ts

@@ -1,18 +1,17 @@
 import * as React from "react";
+import { CommonTextboxProps } from "../textbox";
 
-export interface DecimalProps {
-  /** The default value alignment on the input */
-  align?: string;
-  /** The decimal precision of the value in the input */
-  precision?: number;
-  /** The width of the input as a percentage */
-  inputWidth?: number;
-  /** If true, the component will be read-only */
-  readOnly?: boolean;
+export interface DecimalProps extends CommonTextboxProps {
+  /** Text alignment of the label */
+  align?: "left" | "right";
+  /** Allow an empty value instead of defaulting to 0.00 */
+  allowEmptyValue?: boolean;
   /** The default value of the input if it's meant to be used as an uncontrolled component */
   defaultValue?: string;
-  /** The value of the input if it's used as a controlled component */
-  value?: string;
+  /** The input id */
+  id?: string;
+  /** The width of the input as a percentage */
+  inputWidth?: number;
   /** Handler for change event if input is meant to be used as a controlled component */
   onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
   /** Handler for blur event */
@@ -21,14 +20,16 @@ export interface DecimalProps {
   onKeyPress?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
   /** The input name */
   name?: string;
-  /** The input id */
-  id?: string;
-  /** Allow an empty value instead of defaulting to 0.00 */
-  allowEmptyValue?: boolean;
-  /** Flag to configure component as mandatory  */
+  /** The decimal precision of the value in the input */
+  precision?: number;
+  /** If true, the component will be read-only */
+  readOnly?: boolean;
+  /** Flag to configure component as mandatory */
   required?: boolean;
+  /** The value of the input if it's used as a controlled component */
+  value?: string;
 }
 
-declare const Decimal: React.ComponentClass<DecimalProps>;
+declare class Decimal extends React.Component<DecimalProps> {}
 
 export default Decimal;

src/__experimental__/components/fieldset/fieldset.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
-import { MarginSpacingProps } from '../../../utils/helpers/options-helper';
+import { MarginProps } from "styled-system";
 
-export interface FieldsetProps extends MarginSpacingProps {
+export interface FieldsetProps extends MarginProps {
   /** Child elements */
   children?: React.ReactNode;
   /** The text for the fieldsets legend element. */
@@ -10,6 +10,6 @@ export interface FieldsetProps extends MarginSpacingProps {
   inline?: boolean;
 }
 
-declare const Fieldset: React.FunctionComponent<FieldsetProps>;
+declare function Fieldset(props: FieldsetProps): JSX.Element;
 
 export default Fieldset;