Fix TypeScript support (#3561)

* Fix TypeScript support

* Remove `skipLibCheck` from tsconfig
* Add custom type declaration file for storybook-chromatic add-on

Signed-off-by: Dallas Reedy <code@dallasreedy.com>

* Fix import

Must be relative so that it still works when we build to dist/

* Add a TS definition file for default-props

* Fix what was likely an oversight

* remove extend from props

* associating extracted types with Box

src/@types/storybook-chromatic/index.d.ts

@@ -0,0 +1,3 @@
+declare module 'storybook-chromatic' {
+  export default function isChromatic(): boolean;
+}

src/js/components/Box/index.d.ts

@@ -16,10 +16,6 @@ import {
   ColorType, 
 } from "../../utils";
 
-type SideType = "top" | "left" | "bottom" | "right" | "horizontal" | "vertical" | "all";
-type SizeType = "xsmall" | "small" | "medium" | "large" | "xlarge" | string;
-type StyleType = "solid" | "dashed" | "dotted" | "double" | "groove" | "ridge" | "inset" | "outset" | "hidden";
-
 export interface BoxProps {
   a11yTitle?: A11yTitleType;
   alignSelf?: AlignSelfType;

src/js/components/FormField/stories/typescript/CustomTheme.tsx

@@ -21,7 +21,6 @@ const customFormFieldTheme: ThemeType = {
       size: 'xsmall',
       margin: { vertical: '0', bottom: 'small', horizontal: '0' },
       weight: 600,
-      extend: 'shimi',
     },
     border: false,
     margin: '0',

src/js/components/List/index.d.ts

@@ -18,7 +18,7 @@ export interface ListProps {
   itemProps?: { [_:string]: { background?: string, border?: BorderType, pad?: PadType}};
   margin?: MarginType;
   onMore?: () => void;
-  onClickItem?: (event: React.ClickEvent) => void;
+  onClickItem?: (event: React.MouseEvent) => void;
   pad?: PadType;
   primaryKey?: string | ((...args: any[]) => any);
   secondaryKey?: string | ((...args: any[]) => any);

src/js/default-props.d.ts

@@ -0,0 +1,7 @@
+import { base, ThemeType } from "./themes/base";
+
+export namespace defaultProps {
+  export { base as theme };
+}
+
+export function extendDefaultTheme(theme: ThemeType): void;

src/js/themes/base.d.ts

@@ -6,9 +6,9 @@ import {
   GapType, 
   MarginType,
   OpacityType,
-  PadType, 
-  TextProps,
+  PadType,
 } from '../utils'
+import { TextProps } from '../components/Text';
 import { ReactComponentElement } from 'react';
 
 export declare const base: DeepReadonly<ThemeType>;
@@ -42,7 +42,7 @@ type Colors = typeof colors & {
   'dark-1'?: ColorType;
   'dark-2'?: ColorType;
   'dark-3'?: ColorType;
-  'dark-4'?: string;
+  'dark-4'?: ColorType;
   'dark-5'?: ColorType;
   'dark-6'?: ColorType;
   'light-1'?: ColorType;

src/js/utils/index.d.ts

@@ -35,13 +35,17 @@ declare const removeUndefined: <T extends object>(obj: T) => NonUndefinedProps<T
 export {isObject, deepFreeze, deepMerge, removeUndefined};
 
 // Extracting types for common properties among components
+type BoxSideType = "top" | "left" | "bottom" | "right" | "horizontal" | "vertical" | "all";
+type BoxSizeType = "xsmall" | "small" | "medium" | "large" | "xlarge" | string;
+type BoxStyleType = "solid" | "dashed" | "dotted" | "double" | "groove" | "ridge" | "inset" | "outset" | "hidden";
+
 export type A11yTitleType = string;
 export type AlignContentType = "start" | "center" | "end" | "between" | "around" | "stretch";
 export type AlignSelfType = "start" | "center" | "end" | "stretch";
 export type AnimateType = boolean;
 export type BackgroundType = string | {color?: string,dark?: boolean | string,image?: string,position?: string,opacity?: "weak" | "medium" | "strong" | number | boolean,repeat?: "no-repeat" | "repeat" | string,size?: "cover" | "contain" | string,light?: string};
 export type BasisType = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "full" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "auto" | string;
-export type BorderType = boolean | SideType | {color?: ColorType, side?: SideType, size?: SizeType, style?: StyleType} | ({color?: ColorType, side?: SideType, size?: SizeType, style?: StyleType})[];
+export type BorderType = boolean | BoxSideType | {color?: ColorType, side?: BoxSideType, size?: BoxSizeType, style?: BoxStyleType} | ({color?: ColorType, side?: BoxStyleType, size?: BoxStyleType, style?: BoxStyleType})[];
 export type ColorType = string | {dark?: string,light?: string};
 export type ElevationType = "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | string;
 export type FillType = "horizontal" | "vertical" | boolean;

tsconfig.json

@@ -6,7 +6,6 @@
     "moduleResolution": "node",
     "outDir": "./dist/",
     "sourceMap": true,
-    "skipLibCheck": true, // ignore internal typing issues of storybook
     "noImplicitAny": false,
     "module": "esnext",
     "target": "es6",
@@ -19,7 +18,8 @@
       "grommet": ["src/js"],
       "grommet/themes": ["src/js/themes"],
       "grommet/utils": ["src/js/utils"]
-    }
+    },
+    "typeRoots": ["./node_modules/@types/", "./src/@types/"]
   },
   "exclude": ["node_modules"],
   "include": ["src/**/*"]