[v16] Add types to some components in the design package (#45837)

* Add types to some components in the design package (#41969)

* Add types to some components in the design package

* Review

* Post-merge fixes

* lint

* Review

* Revert @types/styled-system to 3.1.3

* Fix problems after downgrading types

* Post-merge fixes

* Reexport some types

* Fix the CliCommand loading indicator size

* post-merge fix

* Build fix

web/@types/styled-components.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Teleport
+ * Copyright (C) 2024 Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import 'styled-components';
+import { Theme } from 'design/theme/themes/types';
+
+declare module 'styled-components' {
+  export interface DefaultTheme extends Theme {}
+}

web/@types/styled-system.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Teleport
+ * Copyright (C) 2024 Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import 'styled-system';
+
+declare module 'styled-system' {
+  export function style(args: LowLevelStylefunctionArguments): styleFn;
+
+  export interface styleFn {
+    (...args: any[]): any;
+    propTypes: React.WeakValidationMap<{ [string]: any }>;
+  }
+}

web/packages/build/package.json

@@ -23,6 +23,8 @@
     "@storybook/manager-webpack5": "^6.5.16",
     "@swc/plugin-styled-components": "^1.5.122",
     "@types/jsdom": "^21.1.7",
+    "@types/styled-components": "^5.1.34",
+    "@types/styled-system": "^3.1.3",
     "@vitejs/plugin-react-swc": "^3.7.0",
     "babel-loader": "^8.2.5",
     "eslint": "^8.56.0",

web/packages/design/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "cross-env": "5.0.5",
+    "csstype": "^3.0.2",
     "styled-system": "^3.1.11"
   },
   "devDependencies": {

web/packages/design/src/Alert/Alert.jsx → web/packages/design/src/Alert/Alert.tsx

@@ -19,9 +19,8 @@
 import React from 'react';
 import styled from 'styled-components';
 import { style } from 'styled-system';
-import PropTypes from 'prop-types';
 
-import { space, color, width } from 'design/system';
+import { space, SpaceProps, width, WidthProps } from 'design/system';
 import { fade } from 'design/theme/utils/colorManipulator';
 
 const linkColor = style({
@@ -30,6 +29,15 @@ const linkColor = style({
   key: 'colors',
 });
 
+type Kind =
+  | 'danger'
+  | 'info'
+  | 'warning'
+  | 'success'
+  | 'outline-danger'
+  | 'outline-info'
+  | 'outline-warn';
+
 const kind = props => {
   const { kind, theme } = props;
   switch (kind) {
@@ -85,7 +93,12 @@ const kind = props => {
   }
 };
 
-const Alert = styled.div`
+interface AlertProps extends SpaceProps, WidthProps {
+  kind?: Kind;
+  linkColor?: string;
+}
+
+const Alert = styled.div<AlertProps>`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -108,21 +121,6 @@ const Alert = styled.div`
   }
 `;
 
-Alert.propTypes = {
-  kind: PropTypes.oneOf([
-    'danger',
-    'info',
-    'warning',
-    'success',
-    'outline-danger',
-    'outline-info',
-    'outline-warn',
-  ]),
-  ...color.propTypes,
-  ...space.propTypes,
-  ...width.propTypes,
-};
-
 Alert.defaultProps = {
   kind: 'danger',
 };

web/packages/design/src/Box/Box.jsx → web/packages/design/src/Box/Box.tsx

@@ -19,26 +19,64 @@
 import styled from 'styled-components';
 
 import {
-  overflow,
-  borders,
-  borderRadius,
+  alignSelf,
+  AlignSelfProps,
   borderColor,
+  BorderColorProps,
+  BorderProps,
+  borderRadius,
+  BorderRadiusProps,
+  borders,
+  BordersProps,
+  color,
+  ColorProps,
   flex,
+  FlexProps,
   height,
+  HeightProps,
+  justifySelf,
+  JustifySelfProps,
   lineHeight,
+  LineHeightProps,
+  maxHeight,
+  MaxHeightProps,
   maxWidth,
+  MaxWidthProps,
   minHeight,
-  maxHeight,
+  MinHeightProps,
   minWidth,
-  alignSelf,
-  justifySelf,
+  MinWidthProps,
+  overflow,
+  OverflowProps,
   space,
-  width,
-  color,
+  SpaceProps,
   textAlign,
+  TextAlignProps,
+  width,
+  WidthProps,
 } from '../system';
 
-const Box = styled.div`
+export interface BoxProps
+  extends MaxWidthProps,
+    MinWidthProps,
+    SpaceProps,
+    HeightProps,
+    LineHeightProps,
+    MinHeightProps,
+    MaxHeightProps,
+    WidthProps,
+    ColorProps,
+    TextAlignProps,
+    FlexProps,
+    AlignSelfProps,
+    JustifySelfProps,
+    BorderProps,
+    BordersProps,
+    BorderRadiusProps,
+    OverflowProps,
+    BorderColorProps {}
+
+const Box = styled.div<BoxProps>`
   box-sizing: border-box;
   ${maxWidth}
   ${minWidth}
@@ -61,17 +99,4 @@ const Box = styled.div`
 
 Box.displayName = 'Box';
 
-Box.propTypes = {
-  ...space.propTypes,
-  ...height.propTypes,
-  ...width.propTypes,
-  ...color.propTypes,
-  ...textAlign.propTypes,
-  ...flex.propTypes,
-  ...alignSelf.propTypes,
-  ...justifySelf.propTypes,
-  ...borders.propTypes,
-  ...overflow.propTypes,
-};
-
 export default Box;

web/packages/design/src/Box/index.js → web/packages/design/src/Box/index.ts

@@ -19,3 +19,4 @@
 import Box from './Box';
 
 export default Box;
+export type { BoxProps } from './Box';

web/packages/design/src/DataTable/InputSearch/InputSearch.tsx

@@ -19,7 +19,14 @@
 import React, { JSX, SetStateAction } from 'react';
 import styled from 'styled-components';
 
-import { height, space, color } from 'design/system';
+import {
+  height,
+  HeightProps,
+  space,
+  SpaceProps,
+  color,
+  ColorProps,
+} from 'design/system';
 
 export default function InputSearch({
   searchValue,
@@ -93,7 +100,9 @@ const WrapperBackground = styled.div<{ bigSize: boolean }>`
     props.bigSize ? props.theme.space[7] : props.theme.space[6]}px;
 `;
 
-const StyledInput = styled.input`
+interface StyledInputProps extends ColorProps, SpaceProps, HeightProps {}
+
+const StyledInput = styled.input<StyledInputProps>`
   border: none;
   outline: none;
   box-sizing: border-box;

web/packages/design/src/DataTable/Pager/PageIndicatorText.tsx

@@ -37,7 +37,7 @@ export function PageIndicatorText({
     <Text
       typography="body2"
       mr={1}
-      fontWeight="500"
+      fontWeight={500}
       style={{
         whiteSpace: 'nowrap',
         letterSpacing: '0.15px',