Skip to content

TypeScript demos #14897

New issue
New issue
Closed
Closed
TypeScript demos#14897
Labels
docsImprovements or additions to the documentationtypescriptumbrellaFor grouping multiple issues to provide a holistic view
@eps1lon

Description

@eps1lon
eps1lon
opened on Mar 15, 2019

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

done

done

  • components/hidden:

    • BreakpointDown
    • BreakpointOnly
    • BreakpointUp
    • GridIntegration

  • components/icons:

    • FontAwesome
    • Icons
    • SvgIcons
    • SvgMaterialIcons

  • components/menus:

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

  • components/modal:

    • ServerModal
    • SimpleModal
    • SpringModal
    • TransitionsModal

  • components/portal:

    • SimplePortal

  • components/radio-buttons:

    • CustomizedRadios
    • FormControlLabelPosition
    • RadioButtons
    • RadioButtonsGroup

  • components/rating:

    • CustomizedRatings
    • HalfRating
    • HoverRating
    • RatingSize
    • SimpleRating

  • components/skeleton:

    • Facebook
    • YouTube

  • components/slider:

    • ContinuousSlider
    • CustomizedSlider
    • DiscreteSlider
    • InputSlider
    • RangeSlider
    • TrackFalseSlider
    • TrackInvertedSlider
    • VerticalSlider

  • components/snackbars [docs] Add Snackbars TypeScript Demos #15087:

    • ConsecutiveSnackbars
    • CustomizedSnackbars
    • DirectionSnackbar
    • FabIntegrationSnackbar
    • IntegrationNotistack
    • LongTextSnackbar
    • PositionedSnackbar
    • SimpleSnackbar
    • TransitionsSnackbar

  • components/speed-dial:

    • OpenIconSpeedDial
    • SpeedDials
    • SpeedDialTooltipOpen

  • components/switches:

    • CustomizedSwitches
    • FormControlLabelPosition
    • Switches
    • SwitchesGroup
    • SwitchesSize
    • SwitchLabels

  • components/tabs [docs] Add Tabs TypeScript demo #15053:

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

  • components/text-fields:

    • ComposedTextField
    • CustomizedInputBase [docs] Add CustomInputBase TypeScript demo #15209
    • CustomizedInputs
    • FilledInputAdornments
    • FilledTextFields
    • FormattedInputs
    • InputAdornments
    • Inputs
    • InputWithIcon
    • OutlinedInputAdornments
    • OutlinedTextFields
    • TextFieldMargins
    • TextFields

  • components/textarea-autosize:

    • EmptyTextarea
    • MaxHeightTextarea
    • MinHeightTextarea

  • components/toggle-button:

    • CustomizedDividers

  • components/tooltips [docs] Add Tooltip TypeScript demos #15061:

    • ControlledTooltips
    • CustomizedTooltips
    • DelayTooltips
    • DisabledTooltips
    • InteractiveTooltips
    • PositionedTooltips
    • SimpleTooltips
    • TransitionsTooltips
    • TriggersTooltips
    • VariableWidth

  • components/tree-view:

    • CustomizedTreeView
    • FileSystemNavigator
    • GmailTreeView

  • css-in-js/basics:

    • AdaptingHook
    • AdaptingStyledComponents

  • customization/theming:

    • CustomStyles
    • ThemeNesting
    • ThemeNestingExtend

  • system/typography:

    • FontFamily
    • FontSize
    • FontStyle
    • FontWeight
    • LetterSpacing
    • LineHeight
    • TextAlignment

Metadata

Metadata

Assignees

No one assigned

    Labels

    docsImprovements or additions to the documentationtypescriptumbrellaFor grouping multiple issues to provide a holistic view

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions