Adding types file to Box component (#18009)

.storybook/main.js

@@ -12,6 +12,7 @@ module.exports = {
   features: { buildStoriesJson: true },
   stories: [
     '../ui/**/*.stories.js',
+    '../ui/**/*.stories.tsx',
     '../ui/**/*.stories.mdx',
     './*.stories.mdx',
   ],

tsconfig.json

@@ -21,6 +21,7 @@
     "**/jest-coverage/**/*",
     "**/__mocks__/**/*",
     "**/storybook-build/**/*",
+    "**/*.stories.*",
     ".storybook/**/*",
     "builds/**/*",
     "dist/**/*",

ui/components/ui/box/box.d.ts

@@ -0,0 +1,131 @@
+import * as React from 'react';
+
+import {
+  AlignItems,
+  BLOCK_SIZES,
+  BorderStyle,
+  BackgroundColor,
+  BorderColor,
+  TextColor,
+  IconColor,
+  DISPLAY,
+  JustifyContent,
+  TEXT_ALIGN,
+  FLEX_DIRECTION,
+  FLEX_WRAP,
+  BorderRadius,
+} from '../../../helpers/constants/design-system';
+
+export type BoxChildren = React.ReactNode | ((...args: any[]) => any);
+
+export type BoxFlexDirection = typeof FLEX_DIRECTION;
+export type BoxFlexDirectionArray = [
+  BoxFlexDirection[keyof BoxFlexDirection],
+  BoxFlexDirection[keyof BoxFlexDirection]?,
+  BoxFlexDirection[keyof BoxFlexDirection]?,
+  BoxFlexDirection[keyof BoxFlexDirection]?,
+];
+
+export type BoxFlexWrap = typeof FLEX_WRAP;
+export type BoxFlexWrapArray = [
+  BoxFlexWrap[keyof BoxFlexWrap],
+  BoxFlexWrap[keyof BoxFlexWrap]?,
+  BoxFlexWrap[keyof BoxFlexWrap]?,
+  BoxFlexWrap[keyof BoxFlexWrap]?,
+];
+
+export type BoxTextAlign = typeof TEXT_ALIGN;
+export type BoxTextAlignArray = [
+  BoxTextAlign[keyof BoxTextAlign],
+  BoxTextAlign[keyof BoxTextAlign]?,
+  BoxTextAlign[keyof BoxTextAlign]?,
+  BoxTextAlign[keyof BoxTextAlign]?,
+];
+
+export type BoxDisplay = typeof DISPLAY;
+export type BoxDisplayArray = [
+  BoxDisplay[keyof BoxDisplay],
+  BoxDisplay[keyof BoxDisplay]?,
+  BoxDisplay[keyof BoxDisplay]?,
+  BoxDisplay[keyof BoxDisplay]?,
+];
+
+export type BoxWidth = typeof BLOCK_SIZES;
+export type BoxWidthArray = [
+  BoxWidth[keyof BoxWidth],
+  BoxWidth[keyof BoxWidth]?,
+  BoxWidth[keyof BoxWidth]?,
+  BoxWidth[keyof BoxWidth]?,
+];
+
+export type BoxHeight = typeof BLOCK_SIZES;
+export type BoxHeightArray = [
+  BoxHeight[keyof BoxHeight],
+  BoxHeight[keyof BoxHeight]?,
+  BoxHeight[keyof BoxHeight]?,
+  BoxHeight[keyof BoxHeight]?,
+];
+
+export type SizeNumber =
+  | 0
+  | 1
+  | 2
+  | 3
+  | 4
+  | 5
+  | 6
+  | 7
+  | 8
+  | 9
+  | 10
+  | 11
+  | 12
+  | null
+  | undefined;
+
+export type Size =
+  | SizeNumber
+  | [SizeNumber, SizeNumber?, SizeNumber?, SizeNumber?];
+
+export interface BoxProps {
+  children?: React.ReactNode;
+  flexDirection?:
+    | BoxFlexDirection[keyof BoxFlexDirection]
+    | BoxFlexDirectionArray;
+  flexWrap?: BoxFlexWrap[keyof BoxFlexWrap] | BoxFlexWrapArray;
+  gap?: Size;
+  margin?: Size;
+  marginTop?: Size;
+  marginBottom?: Size;
+  marginRight?: Size;
+  marginLeft?: Size;
+  marginInline?: Size;
+  marginInlineStart?: Size;
+  marginInlineEnd?: Size;
+  padding?: Size;
+  paddingTop?: Size;
+  paddingBottom?: Size;
+  paddingRight?: Size;
+  paddingLeft?: Size;
+  paddingInline?: Size;
+  paddingInlineStart?: Size;
+  paddingInlineEnd?: Size;
+  borderColor?: BorderColor;
+  borderWidth?: Size;
+  borderRadius?: BorderRadius;
+  borderStyle?: BorderStyle;
+  alignItems?: AlignItems;
+  justifyContent?: JustifyContent;
+  textAlign?: BoxTextAlign[keyof BoxTextAlign] | BoxTextAlignArray;
+  display?: BoxDisplay[keyof BoxDisplay] | BoxDisplayArray;
+  width?: BoxWidth[keyof BoxWidth] | BoxWidthArray;
+  height?: BoxHeight[keyof BoxHeight] | BoxHeightArray;
+  backgroundColor?: BackgroundColor;
+  className?: string;
+  style?: React.CSSProperties;
+  as?: keyof HTMLElementTagNameMap;
+  color?: TextColor | IconColor | string; // TODO: remove string when someone smarter figures out the issue with the color prop
+}
+
+declare const Box: React.FC<BoxProps>;
+export default Box;

ui/components/ui/typography/README.mdx

@@ -302,7 +302,7 @@ import Typography from '../../ui/typography';
 Use the `boxProps` prop object to pass any valid [Box](/?path=/story/components-ui-box--default-story) component props to the Typography component. `boxProps` will overwrite the `margin` prop
 
 <Canvas>
-  <Story id="components-ui-typography--box-props" />
+  <Story id="components-ui-typography--box-props-story" />
 </Canvas>
 
 ```jsx

ui/components/ui/typography/typography.stories.js

@@ -375,7 +375,7 @@ Margin.args = {
   margin: 4,
 };
 
-export const BoxProps = (args) => (
+export const BoxPropsStory = (args) => (
   <>
     <BannerAlert
       severity={SEVERITIES.WARNING}
@@ -390,7 +390,7 @@ export const BoxProps = (args) => (
   </>
 );
 
-BoxProps.args = {
+BoxPropsStory.args = {
   color: TextColor.textDefault,
   boxProps: {
     backgroundColor: BackgroundColor.infoMuted,
@@ -399,3 +399,5 @@ BoxProps.args = {
     borderRadius: 4,
   },
 };
+
+BoxPropsStory.storyName = 'BoxProps';

yarn.lock

@@ -808,14 +808,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-flow@npm:^7.12.1":
+"@babel/plugin-syntax-flow@npm:^7.18.6":
-  version: 7.12.1
+  version: 7.18.6
-  resolution: "@babel/plugin-syntax-flow@npm:7.12.1"
+  resolution: "@babel/plugin-syntax-flow@npm:7.18.6"
   dependencies:
-    "@babel/helper-plugin-utils": ^7.10.4
+    "@babel/helper-plugin-utils": ^7.18.6
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 9c57968346838966ac7ba15bb282ba62e8d81a5e065d2b627ab4069e47205435cf33e54e241317986621128954d0fbe32f19f605e66d89630f29b615c7af951e
+  checksum: abe82062b3eef14de7d2b3c0e4fecf80a3e796ca497e9df616d12dd250968abf71495ee85a955b43a6c827137203f0c409450cf792732ed0d6907c806580ea71
   languageName: node
   linkType: hard
 
@@ -1095,15 +1095,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-flow-strip-types@npm:^7.12.1":
+"@babel/plugin-transform-flow-strip-types@npm:^7.18.6":
-  version: 7.12.1
+  version: 7.21.0
-  resolution: "@babel/plugin-transform-flow-strip-types@npm:7.12.1"
+  resolution: "@babel/plugin-transform-flow-strip-types@npm:7.21.0"
   dependencies:
-    "@babel/helper-plugin-utils": ^7.10.4
+    "@babel/helper-plugin-utils": ^7.20.2
-    "@babel/plugin-syntax-flow": ^7.12.1
+    "@babel/plugin-syntax-flow": ^7.18.6
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 5b6929ae7fb7d516cabbc6d10cc8cf6a25c11a04d6d6a872cad19505e6a36693f1b072e9cf5d3475113e4c8400cad5a164127d98cbfae562c32cf0c89212424a
+  checksum: a45951c57265c366f95db9a5e70a62cfc3eafafa3f3d23295357577b5fc139d053d45416cdbdf4a0a387e41cefc434ab94dd6c3048d03b094ff6d041dd10a0b0
   languageName: node
   linkType: hard
 
@@ -1527,14 +1527,15 @@ __metadata:
   linkType: hard
 
 "@babel/preset-flow@npm:^7.12.1":
-  version: 7.12.1
+  version: 7.18.6
-  resolution: "@babel/preset-flow@npm:7.12.1"
+  resolution: "@babel/preset-flow@npm:7.18.6"
   dependencies:
-    "@babel/helper-plugin-utils": ^7.10.4
+    "@babel/helper-plugin-utils": ^7.18.6
-    "@babel/plugin-transform-flow-strip-types": ^7.12.1
+    "@babel/helper-validator-option": ^7.18.6
+    "@babel/plugin-transform-flow-strip-types": ^7.18.6
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 0edb0a8eaa59f2bd07249e0e420d6861e9429ecfef77014aa54a0c118802968d8d71bc0d97ba7bbf0f105cebf126cedafd4b15a2a1cff7cb44bfc1966f344288
+  checksum: 9100d4eab3402e6601e361a5b235e46d90cfd389c12db19e2a071e1082ca2a00c04bd47eb185ce68d8979e7c8f3e548cd5d61b86dcd701135468fb929c3aecb6
   languageName: node
   linkType: hard