Material-ui: [material-ui/system] Type declarations

[ilyaulyanov]

I'm trying to use material-ui/system in a Typescript projects and none of the style functions or props in the package are typed. I know that the project is in alpha version right now, but it already looks great! I'd love to help add typings if there's a need in contributors. (I ended up scaffolding basic ones just so my project works)

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

Package has type declarations.

[PeterL1n]

Yes please! Can't wait to use it in typescript projects.

[willbamford]

Yeah we've had to add a bunch of local types to our project (I'm new to TypeScript - don't judge! 😄):

type SystemProp = number | string | object

export interface BorderProps {
  border?: SystemProp
  borderTop?: SystemProp
  borderRight?: SystemProp
  borderBottom?: SystemProp
  borderLeft?: SystemProp
  borderColor?: SystemProp
  borderRadius?: SystemProp
}

export interface DisplayProps {
  display?: SystemProp
  displayPrint?: SystemProp
}

export interface FlexboxProps {
  flexDirection?: SystemProp
  flexWrap?: SystemProp
  justifyContent?: SystemProp
  alignItems?: SystemProp
  alignContent?: SystemProp
  order?: SystemProp
  flexGrow?: SystemProp
  flexShrink?: SystemProp
  alignSelf?: SystemProp
}

export interface PaletteProps {
  color?: SystemProp
  bgcolor?: SystemProp
}

export interface PositionsProps {
  zIndex?: SystemProp
  position?: SystemProp
  top?: SystemProp
  right?: SystemProp
  bottom?: SystemProp
  left?: SystemProp
}

export interface ShadowsProps {
  boxShadow?: SystemProp
}

export interface SizingProps {
  width?: SystemProp
  height?: SystemProp
  minWidth?: SystemProp
  minHeight?: SystemProp
  maxWidth?: SystemProp
  maxHeight?: SystemProp
}
export interface SpacingProps {
  m?: SystemProp
  mt?: SystemProp
  mr?: SystemProp
  mb?: SystemProp
  ml?: SystemProp
  mx?: SystemProp
  my?: SystemProp
  p?: SystemProp
  pt?: SystemProp
  pr?: SystemProp
  pb?: SystemProp
  pl?: SystemProp
  px?: SystemProp
  py?: SystemProp
}

export interface TypographyProps {
  textAlign?: SystemProp
  fontWeight?: SystemProp
  fontSize?: SystemProp
  fontFamily?: SystemProp
}

[eps1lon]

Accepting PRs if anybody wants to work on this. Since I haven't used it myself I think others should be more familiar with the API.

If anybody needs some inspiration they can look at how we organized the declarations and tests for it at ./packages/material-ui-styles. Important parts are located in the tsconfig.json, package.json and src/index.d.ts. PR should include tests i.e. ts files that include usage of the package.

[strobox]

I use @willbamford definitions as follow

const Box = styled('div')(compose(display,positions)) as React.FunctionComponent<DisplayProps & PositionsProps>;

maybe not the best or even not correct way, but I don't know another way :-(

[eps1lon]

Added types with `#15357. The basic demos are also available in TypeScript to showcase usage of the types: https://deploy-preview-15357--material-ui.netlify.com/system/basics/

Since I never used styled-components with system-style functions I need some feedback to get those right.