Created
October 11, 2019 09:01
-
-
Save eps1lon/87f130aa73be7c6b42e3916ddb1a427c to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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. | |
| 0. Set up your fork (See ['getting started"](https://github.com/mui-org/material-ui/blob/next/CONTRIBUTING.md#getting-started) in the contributing guide). | |
| 1. Choose a demo you want to convert. For this example, we'll use: https://next.material-ui.com/demos/lists/#nested-list | |
| 2. 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/` | |
| ``` | |
| 3. Copy this file into the same directory and change the extension to `.tsx` | |
| 4. Add types | |
| 5. run `yarn docs:typescript:check` to verify your work | |
| 6. 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. | |
| <details> | |
| <summary>progress</summary> | |
| - 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 | |
| - [ ] SplitButton | |
| - [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 | |
| - [ ] FormControlLabelPosition | |
| - components/chips: | |
| - [X] Chips #15052 | |
| - [X] ChipsArray #15050 | |
| - [ ] ChipsPlayground #15275 | |
| - [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 | |
| - [ ] tileData | |
| - [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/material-icons: | |
| - [ ] SearchIcons | |
| - [ ] synonyms | |
| - components/menus: | |
| - [X] CustomizedMenus | |
| - [X] FadeMenu | |
| - [X] LongMenu | |
| - [X] MenuListComposition | |
| - [ ] MenuPopupState | |
| - [X] SimpleListMenu | |
| - [X] SimpleMenu | |
| - [X] TypographyMenu | |
| - components/modal: | |
| - [X] ServerModal | |
| - [X] SimpleModal | |
| - [X] SpringModal | |
| - [X] TransitionsModal | |
| - components/no-ssr: | |
| - [ ] FrameDeferring | |
| - [ ] SimpleNoSsr | |
| - components/paper: | |
| - [X] PaperSheet | |
| - components/pickers #15103: | |
| - [X] DateAndTimePickers | |
| - [X] DatePickers | |
| - [X] MaterialUIPickers | |
| - [X] TimePickers | |
| - components/popover #16322: | |
| - [ ] AnchorPlayground | |
| - [X] MouseOverPopover | |
| - [ ] PopoverPopupState | |
| - [X] SimplePopover | |
| - components/popper: | |
| - [X] FakedReferencePopper #16322 | |
| - [X] MinimalPopper #16322 | |
| - [X] NoTransitionPopper #16322 | |
| - [ ] PopperPopupState | |
| - [X] PositionedPopper #16322 | |
| - [ ] ScrollPlayground | |
| - [X] SimplePopper #16004 | |
| - 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 | |
| - [ ] SwipeableTextMobileStepper | |
| - [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 | |
| - [ ] MaterialTableDemo | |
| - [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 | |
| - [ ] StandaloneToggleButton | |
| - [ ] ToggleButtons | |
| - [ ] ToggleButtonSizes | |
| - 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 | |
| - [ ] ServerSide | |
| - [X] SimpleMediaQuery | |
| - [X] ThemeHelper | |
| - [X] UseWidth #17770 | |
| - css-in-js/basics: | |
| - [X] AdaptingHook | |
| - [X] AdaptingStyledComponents | |
| - customization/breakpoints: | |
| - [X] MediaQuery #17766 | |
| - [ ] WithWidth | |
| - customization/color: | |
| - [ ] Color | |
| - [ ] ColorDemo | |
| - [ ] ColorTool | |
| - customization/components: | |
| - [X] ClassesNesting #16003 | |
| - [X] ClassesShorthand #16003 | |
| - [X] ClassesState #16003 | |
| - [X] ClassNames #17771 | |
| - [X] Component #17790 | |
| - [X] DynamicClassName #17793 | |
| - [ ] DynamicCSS | |
| - [ ] DynamicCSSVariables | |
| - [X] DynamicInlineStyle #16200 | |
| - [X] DynamicThemeNesting #17788 | |
| - [X] GlobalCssOverride | |
| - [X] GlobalThemeOverride | |
| - [X] InlineStyle #17788 | |
| - [X] ThemeVariables | |
| - customization/default-theme: | |
| - [ ] DefaultTheme | |
| - customization/density: | |
| - [ ] DensityTool | |
| - 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 | |
| - [ ] ResponsiveFontSizesChart | |
| - [X] TypographyVariants | |
| - guides/composition: | |
| - [X] ButtonRouter | |
| - [X] Composition #16334 | |
| - [X] LinkRouter | |
| - [X] ListRouter | |
| - guides/interoperability: | |
| - [X] EmotionCSS | |
| - [X] StyledComponents | |
| - [X] StyledComponentsDeep | |
| - [X] StyledComponentsPortal | |
| - [ ] StyledComponentsTheme | |
| - guides/right-to-left: | |
| - [X] Direction #16334 | |
| - [X] RtlOptOut | |
| - styles/advanced: | |
| - [X] GlobalClassName #16334 | |
| - [X] GlobalCss #16334 | |
| - [X] HybridGlobalCss #16334 | |
| - [ ] StringTemplates | |
| - [X] ThemeNesting #16334 | |
| - [X] Theming #16334 | |
| - [X] UseTheme #16334 | |
| - [X] WithTheme | |
| - 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 | |
| </details |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment