Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

TypeScript demos #14897

Closed
eps1lon opened this issue Mar 15, 2019 · 19 comments
Closed

TypeScript demos #14897

eps1lon opened this issue Mar 15, 2019 · 19 comments
Labels
docs Improvements or additions to the documentation typescript umbrella For grouping multiple issues to provide a holistic view

Comments

@eps1lon
Copy link
Member

eps1lon commented Mar 15, 2019 •
edited
Loading

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
@eps1lon eps1lon added docs Improvements or additions to the documentation help wanted typescript labels Mar 15, 2019
@eps1lon eps1lon pinned this issue Mar 15, 2019
@cojennin cojennin mentioned this issue Mar 19, 2019
Merged
@ricokahler

This comment has been minimized.

Sign in to view
@joshwooding

This comment has been minimized.

Sign in to view
@eps1lon

This comment has been minimized.

Sign in to view
@rahmatrhd rahmatrhd mentioned this issue Mar 22, 2019
Merged
1 task
@oliviertassinari oliviertassinari mentioned this issue Mar 24, 2019
Closed
@eluchsinger

This comment has been minimized.

Sign in to view
@joshwooding

This comment has been minimized.

Sign in to view
@eluchsinger eluchsinger mentioned this issue Mar 24, 2019
Merged
1 task
@StevenGodin StevenGodin mentioned this issue Mar 25, 2019
Merged
1 task
@oliviertassinari oliviertassinari mentioned this issue Mar 25, 2019
Merged
This was referenced Mar 25, 2019
Merged
Merged
Merged
@oliviertassinari oliviertassinari mentioned this issue Mar 26, 2019
Closed
1 task
This was referenced Mar 28, 2019
Merged
Merged
Merged
@cahilfoley cahilfoley mentioned this issue Mar 30, 2019
Merged
1 task
@stunaz

This comment has been minimized.

Sign in to view
This was referenced Apr 3, 2019
Closed
Closed
This was referenced Apr 9, 2019
Merged
Merged
@bh1505 bh1505 mentioned this issue Apr 11, 2019
Merged
1 task
eps1lon pushed a commit that referenced this issue Apr 13, 2019
@bh1505 @eps1lon
[docs] Add some List Typescript demos (#15323)
5236588 
Adding Typescript demos for some List components as a part of [#14897](#14897)
@tgrowden

This comment has been minimized.

Sign in to view
@eps1lon

This comment has been minimized.

Sign in to view
This was referenced Aug 8, 2019
Closed
Closed
Merged
@eps1lon eps1lon added the hacktoberfest https://hacktoberfest.digitalocean.com/ label Oct 1, 2019
@eps1lon eps1lon mentioned this issue Oct 7, 2019
Merged
This was referenced Oct 10, 2019
Merged
Merged
@rahmatrhd rahmatrhd mentioned this issue Oct 13, 2019
Merged
1 task
@oliviertassinari oliviertassinari mentioned this issue Oct 14, 2019
Closed
@ganes1410 ganes1410 mentioned this issue Oct 17, 2019
Merged
1 task
@burtyish burtyish mentioned this issue Oct 18, 2019
Merged
1 task
@schapka schapka mentioned this issue Oct 19, 2019
Merged
1 task
@burtyish burtyish mentioned this issue Oct 20, 2019
Merged
1 task
@netochaves

This comment has been minimized.

Sign in to view
This was referenced Oct 21, 2019
Merged
Merged
@netochaves
Copy link
Contributor

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?

@joshwooding joshwooding removed the hacktoberfest https://hacktoberfest.digitalocean.com/ label Nov 3, 2019
@oliviertassinari

This comment has been minimized.

Sign in to view
This was referenced Nov 22, 2019
Merged
Merged
@eps1lon
Copy link
Member Author

eps1lon commented Nov 22, 2019

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!

@eps1lon eps1lon closed this as completed Nov 22, 2019
@eps1lon eps1lon unpinned this issue Nov 22, 2019
@oliviertassinari
Copy link
Member

@eps1lon Great effort, well done!

@eps1lon eps1lon mentioned this issue Dec 27, 2019
Merged
@eps1lon eps1lon added the umbrella For grouping multiple issues to provide a holistic view label Dec 27, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
docs Improvements or additions to the documentation typescript umbrella For grouping multiple issues to provide a holistic view
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests