Material-ui: TypeScript demos

[eps1lon]

With #13229 we got the proper infrastructure to present our demos both in JavaScript and TypeScript. We want to continue this effort with the goal to have all demos available in TypeScript.

If you want to make contributions to this repository and know a bit of TypeScript we would appreciate you helping us.

Getting started

TL;DR: Use #14739, #14485 or #14535 as example workflows.

1. Set up your fork (See 'getting started" in the contributing guide).
2. Choose a demo you want to convert. For this example, we'll use: https://next.material-ui.com/demos/lists/#nested-list
3. go to ./docs/src/pages/demos/lists/lists.md and find the section. You're looking for a {{ "demo": "some-path" }} block:

  {{"demo": "pages/demos/lists/NestedList.js"}}
                               ^^^ Name of the demo file in `./docs/src/pages/demos/lists/`

1. Copy this file into the same directory and change the extension to .tsx
2. Add types
3. run yarn docs:typescript:check to verify your work
4. Submit a PR

While working

If you're stuck at any point and the type checker will not let your code pass you can still submit the PR. A maintainer will take a look and provide guidance.

It's important that you don't change any behavior. To verify this you can run yarn docs:typescript:formatted. This will transpile the typescript demos to JavaScript. This _should_ not cause changes in any JavaScript file. It is possible, however, that this will uncover a bug, at which point a change to the JavaScript version is more than welcome. You may encounter some changes in whitespace (mainly added or removed lines). Changes to the JavaScript file are perfectly fine in this case.

Work Items

Missing

• components/steppers:

  • [ ] SwipeableTextMobileStepper #18503

done

done

• components/app-bar:

  • [x] BackToTop
  • [x] BottomAppBar
  • [x] ButtonAppBar
  • [x] DenseAppBar
  • [x] ElevateAppBar #15522
  • [x] HideAppBar #15522
  • [x] MenuAppBar
  • [x] PrimarySearchAppBar
  • [x] SearchAppBar

• components/autocomplete:

  • [x] IntegrationAutosuggest #15485
  • [x] IntegrationDownshift #15755
  • [x] IntegrationReactSelect #14772

• components/avatars #14954:

  • [x] IconAvatars
  • [x] ImageAvatars
  • [x] LetterAvatars

• components/badges:

  • [x] BadgeAlignment
  • [x] BadgeMax #15013
  • [x] BadgeOverlap
  • [x] BadgeVisibility #14969
  • [x] CustomizedBadges
  • [x] DotBadge #14969
  • [x] SimpleBadge #14969

• components/bottom-navigation #14979:

  • [x] LabelBottomNavigation
  • [x] SimpleBottomNavigation

• components/breadcrumbs #15139:

  • [x] CollapsedBreadcrumbs
  • [x] CustomizedBreadcrumbs
  • [x] CustomSeparator
  • [x] IconBreadcrumbs
  • [x] RouterBreadcrumbs
  • [x] SimpleBreadcrumbs

• components/buttons:

  • [x] ButtonBases
  • [x] ButtonSizes
  • [x] ContainedButtons
  • [x] CustomizedButtons
  • [x] FloatingActionButtons
  • [x] FloatingActionButtonZoom
  • [x] GroupedButtons
  • [x] IconButtons
  • [x] IconLabelButtons
  • [x] OutlinedButtons
  • [x] SplitButton #17862
  • [x] TextButtons

• components/cards:

  • [x] ImgMediaCard #15130
  • [x] MediaCard #15011
  • [x] MediaControlCard #15011
  • [x] RecipeReviewCard #15011
  • [x] SimpleCard #15011

• components/checkboxes:

  • [x] Checkboxes #15222
  • [x] CheckboxesGroup #15228
  • [x] CheckboxLabels #15237
  • [x] CustomizedCheckbox
  • [x] FormControlLabelPosition #17964

• components/chips:

  • [x] Chips #15052
  • [x] ChipsArray #15050
  • [x] OutlinedChips #15052
  • [x] SmallChips
  • [x] SmallOutlinedChips

• components/click-away-listener:

  • [x] ClickAway #16322

• components/container #16322:

  • [x] FixedContainer
  • [x] SimpleContainer

• components/dialogs:

  • [x] AlertDialog #15271
  • [x] AlertDialogSlide #15271
  • [x] ConfirmationDialog #15273
  • [x] CustomizedDialogs
  • [x] DraggableDialog #15271
  • [x] FormDialog #15271
  • [x] FullScreenDialog #15271
  • [x] MaxWidthDialog #15272
  • [x] ResponsiveDialog #15271
  • [x] ScrollDialog #15271
  • [x] SimpleDialog #15271

• components/dividers #15037:

  • [x] InsetDividers
  • [x] ListDividers
  • [x] MiddleDividers
  • [x] SubheaderDividers
  • [x] VerticalDividers

• components/drawers:

  • [x] ClippedDrawer #15284
  • [x] MiniDrawer #15119
  • [x] PermanentDrawerLeft #15119
  • [x] PermanentDrawerRight #15119
  • [x] PersistentDrawerLeft #15119
  • [x] PersistentDrawerRight #15119
  • [x] ResponsiveDrawer #15119
  • [x] SwipeableTemporaryDrawer #15119
  • [x] TemporaryDrawer #15119

• components/expansion-panels #15162:

  • [x] ControlledExpansionPanels
  • [x] CustomizedExpansionPanels
  • [x] DetailedExpansionPanel
  • [x] SimpleExpansionPanel

• components/grid-list #15118:

  • [x] AdvancedGridList
  • [x] ImageGridList
  • [x] SingleLineGridList
  • [x] TitlebarGridList

• components/grid:

  • [x] AutoGrid
  • [x] AutoGridNoWrap
  • [x] CenteredGrid
  • [x] ComplexGrid #15970
  • [x] CSSGrid
  • [x] FullWidthGrid
  • [x] InteractiveGrid
  • [x] NestedGrid
  • [x] SpacingGrid

• components/hidden:

  • [x] BreakpointDown
  • [x] BreakpointOnly
  • [x] BreakpointUp
  • [x] GridIntegration

• components/icons:

  • [x] FontAwesome
  • [x] Icons
  • [x] SvgIcons
  • [x] SvgMaterialIcons

• components/links:

  • [x] ButtonLink #16003
  • [x] Links #16003

• components/lists:

  • [x] AlignItemsList #15323
  • [x] CheckboxList #15323
  • [x] CheckboxListSecondary #15323
  • [x] FolderList #15323
  • [x] InsetList #15323
  • [x] InteractiveList #15416
  • [x] NestedList #15493
  • [x] PinnedSubheaderList #15323
  • [x] SelectedListItem #15417
  • [x] SimpleList
  • [x] SwitchListSecondary #15493
  • [x] VirtualizedList

• components/menus:

  • [x] CustomizedMenus
  • [x] FadeMenu
  • [x] LongMenu
  • [x] MenuListComposition
  • [x] SimpleListMenu
  • [x] SimpleMenu
  • [x] TypographyMenu
  • [ ] MenuPopupState (no types for material-ui-popup-state, try to move the solve the problem in the core)

• components/modal:

  • [x] ServerModal
  • [x] SimpleModal
  • [x] SpringModal
  • [x] TransitionsModal

• components/no-ssr:

  • [x] FrameDeferring #17913
  • [x] SimpleNoSsr #17913

• components/paper:

  • [x] PaperSheet

• components/pickers #15103:

  • [x] DateAndTimePickers
  • [x] DatePickers
  • [x] MaterialUIPickers
  • [x] TimePickers

• components/popover #16322:

  • [x] MouseOverPopover
  • [x] SimplePopover
  • [ ] PopoverPopupState (no types for material-ui-popup-state, try to move the solve the problem in the core)

• components/popper:

  • [x] FakedReferencePopper #16322
  • [x] MinimalPopper #16322
  • [x] NoTransitionPopper #16322
  • [x] PositionedPopper #16322
  • [x] SimplePopper #16004
  • [ ] PopperPopupState (no types for material-ui-popup-state, try to move the solve the problem in the core)

• components/portal:

  • [x] SimplePortal

• components/progress:

  • [x] CircularDeterminate #15104
  • [x] CircularIndeterminate #15104
  • [x] CircularIntegration #15104
  • [x] CircularStatic #15104
  • [x] CircularUnderLoad #15104
  • [x] CustomizedProgressBars
  • [x] DelayingAppearance #15551
  • [x] LinearBuffer #15104
  • [x] LinearDeterminate #15104
  • [x] LinearIndeterminate #15104
  • [x] LinearQuery #15104

• components/radio-buttons:

  • [x] CustomizedRadios
  • [x] FormControlLabelPosition
  • [x] RadioButtons
  • [x] RadioButtonsGroup

• components/rating:

  • [x] CustomizedRatings
  • [x] HalfRating
  • [x] HoverRating
  • [x] RatingSize
  • [x] SimpleRating

• components/selects #15288:

  • [x] ControlledOpenSelect
  • [x] CustomizedSelects
  • [x] DialogSelect
  • [x] MultipleSelect
  • [x] NativeSelects
  • [x] SimpleSelect

• components/skeleton:

  • [x] Facebook
  • [x] YouTube

• components/slider:

  • [x] ContinuousSlider
  • [x] CustomizedSlider
  • [x] DiscreteSlider
  • [x] InputSlider
  • [x] RangeSlider
  • [x] TrackFalseSlider
  • [x] TrackInvertedSlider
  • [x] VerticalSlider

• components/snackbars #15087:

  • [x] ConsecutiveSnackbars
  • [x] CustomizedSnackbars
  • [x] DirectionSnackbar
  • [x] FabIntegrationSnackbar
  • [x] IntegrationNotistack
  • [x] LongTextSnackbar
  • [x] PositionedSnackbar
  • [x] SimpleSnackbar
  • [x] TransitionsSnackbar

• components/speed-dial:

  • [x] OpenIconSpeedDial
  • [x] SpeedDials
  • [x] SpeedDialTooltipOpen

• components/steppers:

  • [x] CustomizedSteppers
  • [x] DotsMobileStepper #15223
  • [x] HorizontalLinearAlternativeLabelStepper #15223
  • [x] HorizontalLinearStepper #15223
  • [x] HorizontalNonLinearAlternativeLabelStepper #15223
  • [x] HorizontalNonLinearStepper #15223
  • [x] HorizontalNonLinearStepperWithError #15223
  • [x] ProgressMobileStepper #15223
  • [x] TextMobileStepper #15223
  • [x] VerticalLinearStepper #15223

• components/switches:

  • [x] CustomizedSwitches
  • [x] FormControlLabelPosition
  • [x] Switches
  • [x] SwitchesGroup
  • [x] SwitchesSize
  • [x] SwitchLabels

• components/tables:

  • [x] AcccessibleTable
  • [x] CustomizedTables
  • [x] CustomPaginationActionsTable #15086
  • [x] DenseTable #15086
  • [x] EnhancedTable #15755
  • [x] MaterialTableDemo #17938
  • [x] ReactVirtualizedTable #15755
  • [x] SimpleTable #14985
  • [x] SpanningTable #14985
  • [x] StickyHeadTable

• components/tabs #15053:

  • [x] CenteredTabs
  • [x] CustomizedTabs
  • [x] DisabledTabs
  • [x] FullWidthTabs
  • [x] IconLabelTabs
  • [x] IconTabs
  • [x] NavTabs
  • [x] ScrollableTabsButtonAuto
  • [x] ScrollableTabsButtonForce
  • [x] ScrollableTabsButtonPrevent
  • [x] SimpleTabs
  • [x] TabsWrappedLabel
  • [x] VerticalTabs

• components/text-fields:

  • [x] ComposedTextField
  • [x] CustomizedInputBase #15209
  • [x] CustomizedInputs
  • [x] FilledInputAdornments
  • [x] FilledTextFields
  • [x] FormattedInputs
  • [x] InputAdornments
  • [x] Inputs
  • [x] InputWithIcon
  • [x] OutlinedInputAdornments
  • [x] OutlinedTextFields
  • [x] TextFieldMargins
  • [x] TextFields

• components/textarea-autosize:

  • [x] EmptyTextarea
  • [x] MaxHeightTextarea
  • [x] MinHeightTextarea

• components/toggle-button:

  • [x] CustomizedDividers

• components/tooltips #15061:

  • [x] ControlledTooltips
  • [x] CustomizedTooltips
  • [x] DelayTooltips
  • [x] DisabledTooltips
  • [x] InteractiveTooltips
  • [x] PositionedTooltips
  • [x] SimpleTooltips
  • [x] TransitionsTooltips
  • [x] TriggersTooltips
  • [x] VariableWidth

• components/transfer-list:

  • [x] SelectAllTransferList #15419
  • [x] TransferList #15419

• components/transitions #16003:

  • [x] SimpleCollapse
  • [x] SimpleFade
  • [x] SimpleGrow
  • [x] SimpleSlide
  • [x] SimpleZoom

• components/tree-view:

  • [x] CustomizedTreeView
  • [x] FileSystemNavigator
  • [x] GmailTreeView

• components/typography:

  • [x] Types
  • [x] TypographyTheme #16003

• components/use-media-query:

  • [x] JavaScriptMedia
  • [x] SimpleMediaQuery
  • [x] ThemeHelper
  • [x] ServerSide #18501
  • [x] UseWidth #17770

• css-in-js/basics:

  • [x] AdaptingHook
  • [x] AdaptingStyledComponents

• customization/breakpoints:

  • [x] MediaQuery #17766
  • [x] WithWidth #17930

• customization/components:

  • [x] ClassesNesting #16003
  • [x] ClassesShorthand #16003
  • [x] ClassesState #16003
  • [x] ClassNames #17771
  • [x] Component #17790
  • [x] DynamicClassName #17793
  • [x] DynamicCSS #17994
  • [x] DynamicCSSVariables #17983
  • [x] DynamicInlineStyle #16200
  • [x] DynamicThemeNesting #17788
  • [x] GlobalCssOverride
  • [x] GlobalThemeOverride
  • [x] InlineStyle #17788
  • [x] ThemeVariables

• customization/globals #17785:

  • [x] DefaultProps
  • [x] GlobalCss

• customization/palette:

  • [x] DarkTheme
  • [x] Palette #17683

• customization/theming:

  • [x] CustomStyles
  • [x] ThemeNesting
  • [x] ThemeNestingExtend

• customization/typography:

  • [x] FontSizeTheme #16334
  • [x] ResponsiveFontSizes
  • [x] TypographyVariants

• guides/composition:

  • [x] ButtonRouter
  • [x] Composition #16334
  • [x] LinkRouter
  • [x] ListRouter

• guides/interoperability:

  • [x] EmotionCSS
  • [x] StyledComponents
  • [x] StyledComponentsDeep
  • [x] StyledComponentsPortal
  • [x] StyledComponentsTheme (#17910)

• guides/right-to-left:

  • [x] Direction #16334
  • [x] RtlOptOut

• styles/advanced:

  • [x] GlobalClassName #16334
  • [x] GlobalCss #16334
  • [x] HybridGlobalCss #16334
  • [x] ThemeNesting #16334
  • [x] Theming #16334
  • [x] UseTheme #16334
  • [x] WithTheme
  • [ ] StringTemplates (plan to migrate to styled-components)

• styles/basics:

  • [x] AdaptingHOC #16134
  • [x] AdaptingHook #16131
  • [x] AdaptingStyledComponents #15548
  • [x] HigherOrderComponent #16334
  • [x] Hook #16334
  • [x] NestedStylesHook
  • [x] StressTest #16334
  • [x] StyledComponents #15548

• system/basics:

  • [x] CollocationApi
  • [x] CssProp
  • [x] Demo
  • [x] Emotion
  • [x] JSS #15548
  • [x] RealWorld
  • [x] StyledComponents
  • [x] Variant

• system/borders:

  • [x] BorderAdditive #16875
  • [x] BorderColor #16875
  • [x] BorderRadius #16875
  • [x] BorderSubtractive #16875

• system/display #16334:

  • [x] Block
  • [x] Hiding
  • [x] Inline
  • [x] Overflow
  • [x] Print
  • [x] TextOverflow
  • [x] Visibility
  • [x] WhiteSpace

• system/flexbox #16334:

  • [x] AlignContent
  • [x] AlignItems
  • [x] AlignSelf
  • [x] Display
  • [x] FlexDirection
  • [x] FlexGrow
  • [x] FlexShrink
  • [x] FlexWrap
  • [x] JustifyContent
  • [x] Order

• system/palette #16334:

  • [x] BackgroundColor
  • [x] Color

• system/positions #16334:

  • [x] ZIndex

• system/shadows #16334:

  • [x] Demo

• system/sizing #16334:

  • [x] Height
  • [x] Values
  • [x] Width

• system/spacing #16334:

  • [x] Demo
  • [x] HorizontalCentering

• system/typography:

  • [x] FontFamily
  • [x] FontSize
  • [x] FontStyle
  • [x] FontWeight
  • [x] LetterSpacing
  • [x] LineHeight
  • [x] TextAlignment

[ricokahler]

What if we re-wrote all of the examples in TypeScript and then compiled them to JavaScript?

That way we if we write a hooks TypeScript + classes TypeScript we could (in theory) do any combination of TypeScript, JavaScript, and hooks.

🤔

Just a fun thought. 🍭 I haven't fully assessed whether doing so makes sense.

[joshwooding]

@ricokahler I believe that is the plan in the future :)

[eps1lon]

What if we re-wrote all of the examples in TypeScript and then compiled them to JavaScript?

This is what we're essentially already doing right now. Just that we put the transpiled demos into version control. This way can allow JS-only contributions that a maintainer has to backport to TS if the TS/JS versions became out of sync.

I think we will keep this approach since the JS versions are displayed in our docs. If we remove them from version control we cannot automatically detect ugly transpilation artifacts (mainly whitespace related).

[eluchsinger]

Which ones are missing? For example bottom-navigation is already done in next channel.

[joshwooding]

Which ones are missing? For example bottom-navigation is already done in next channel.

Thanks for letting me know, I've gone through and updated the list.

[stunaz]

Hi, I am having trouble to type Button with Link fromreact-router v5, as seen in https://next.material-ui.com/demos/buttons/#third-party-routing-library, maybe some one could add the ts version of this example.

tried:

<Button component={({ ref, ...props }) => <Link to="/about" {...props} ref={ref} />}>
   about
</Button>

No issue in the editor.
but warning from material-ui

 Warning: Failed prop type: Invalid prop `component` supplied to `ButtonBase`. Expected an element type that can hold a ref.

followed by warning from react

Warning: component: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop.

using typescrupt:3.3.4000, react:latest, material-ui: next(latest)

[jztang]

Just noticed there are few TypeScript demos that are done but not checked off above. All of the Dividers were done in #15037 , and CheckboxListSecondary, InsetList, and PinnedSubheaderList done in #15323 .

[eps1lon]

Just in time for the upcoming 4.0 release the effort of adding __192__ demos in TypeScript has been completed thanks to __44__ pull requests merged from the following __16__ authors: @VincentLanglet, @vitkon, @cojennin, @jasondashwang, @Dudrie, @rahmatrhd, @eluchsinger, @sperry94, @cahilfoley, @Adherentman, @donigianrp, @bh1505, @JarkEMones, @lksilva, @nareshbhatia and @merceyz

Huge thanks to all of you :+1:

I expanded the scope to every code demo not just component demos by adding around 120 new demos that are missing a TypeScript version. The list in the initial post has been updated accordingly.

[atifzaidi]

Hi there, I want to contribute to this repo, can you guide me on how to do that.
Maybe this will be my first open source contribution.

[lksilva]

Hi there, I want to contribute to this repo, can you guide me on how to do that.
Maybe this will be my first open source contribution.

Try to take a look in this
https://github.com/mui-org/material-ui/blob/master/CONTRIBUTING.md

[merceyz]

These are already done but not checked:

• components/grid/ComplexGrid
• components/popper/SimplePopper
• customization/components/DynamicInlineStyle

[merceyz]

Same goes for all demos in system/typography

[tgrowden]

@oliviertassinari How up-to-date is this? I was just looking at the docs and noticed that components/slider has Typescript source.

[eps1lon]

@tgrowden A maintainer has to update it manually. Thanks for letting me know.

[netochaves]

I'll take DynamicCSS and DynamicCSSVariables

[netochaves]

How do you guys want to handle with third party libraries that don't have types like material-popup-state and react-swipeable-views-utils?

[oliviertassinari]

@eps1lon Should we consider the effort completed? The demos we miss depend on third-party libraries, It unlikely they will be solved anytime soon (at least I have abandoned react-swipeable-views, and css-mediaquery hasn't changed since 2014).

[eps1lon]

Since the last PRs to complete this effort are opened I'd like to thank @cvanem, @dan8f, @rogerclotet, @limatgans, @oliviertassinari, @ganes1410, @burtyish, @schapka and @netochaves for completing the effort (these are the authors that opened a PR after the 4.0 release and weren't mentioned previously).

380 demos are now available in TypeScript!

[oliviertassinari]

@eps1lon Great effort, well done!