[docs] Add Breadcrumbs TypeScript demos

[Adherentman]

• I have followed (at least) the PR section of the contributing guide.

Add TypeScript demos for each of the existing breadcrumbs demos

This is my first PR here 😄, let me know if there's anything I missed 🤙 .

[mui-pr-bot]

No bundle size changes comparing 240dc18...63eb35b

Generated by 🚫 dangerJS against 63eb35b

[Adherentman]

I have done yarn lint , yarn lint:ci, yarn lint:fix, yarn prettier, docs:typescript:formatted, but I don't know why I can't pass ci to eslint?

[Dudrie]

Have you run yarn docs:typescript:check, so there aren't any typing errors?
And did you change the order of imports? That one occuered to me aswell - we must not change the order of imports (so no auto-import-formatting in vs code for example) because if one changes the order then the JS and TS demos won't be equivalent.

[Adherentman]

@Dudrie yes, I get this error

~/project/material-ui(next) » yarn docs:typescript:check                                                                                                                                xuzihao@MacBook-Pro
yarn run v1.1.0
warning You are using Node "10.14.2" which is not supported and may encounter bugs or unexpected behavior. Yarn supports the following semver range: "^4.8.0 || ^5.7.0 || ^6.2.2 || ^8.0.0"
$ tslint -p docs/tsconfig.json

ERROR: /Users/xuzihao/project/material-ui/docs/src/pages/demos/snackbars/IntegrationNotistack.tsx:4:55 - TypeScript@next compile error:
Module '"../../../../../../../../../Users/xuzihao/project/material-ui/node_modules/notistack"' has no exported member 'withSnackbarProps'.

error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

But this is not a file I wrote.

Then I sorted the import order in the ts file the same as js. But still haven't tested_build - Are the compiled TypeScript demos equivalent to the JavaScript demos?

[Dudrie]

One thing I noticed is that you did two things in one PR:

• Adding the ts demo.
• Changing the implementation to use hooks.

As @oliviertassinari mentioned in his Hook demos issue, we should do one PR for the demo (so the tests check if the demos are equivalent) and one extra PR for the conversion into a hook.

The question is (and I would wait for an answer, before doing any further action): Can this PR be an exception to that statement or should you "undo" the conversion to hooks? 🤔

Maybe this prevents you from trying things the whole afternoon on why the test_build fails 🙈.

[Adherentman]

@Dudrie Thanks, I will continue to try

[Dudrie]

@Dudrie yes, I get this error

~/project/material-ui(next) » yarn docs:typescript:check                                                                                                                                xuzihao@MacBook-Pro
yarn run v1.1.0
warning You are using Node "10.14.2" which is not supported and may encounter bugs or unexpected behavior. Yarn supports the following semver range: "^4.8.0 || ^5.7.0 || ^6.2.2 || ^8.0.0"
$ tslint -p docs/tsconfig.json

ERROR: /Users/xuzihao/project/material-ui/docs/src/pages/demos/snackbars/IntegrationNotistack.tsx:4:55 - TypeScript@next compile error:
Module '"../../../../../../../../../Users/xuzihao/project/material-ui/node_modules/notistack"' has no exported member 'withSnackbarProps'.

error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Try running just yarn again, so all packages are at the version they should be. notistack is exporting a member withSnackbarProps and comes with proper ts definitions, so there's something strange happening here.
If that does not work, try deleting the node_modules folder, install all packages again and then try again, so you test with a clean, new installation of all packages.

However, according to the output of the test_unit test, the test itself does not fail because of that error (in fact it does not even raise that one) 🙈

[Adherentman]

@Dudrie @oliviertassinari

Thank you for your help, I solved the above problem independently.. 🤗

[eps1lon]

There are 2 casts here that are not ideal. We can follow up with an improvement in a future PR though.

[eps1lon]

@Adherentman Much appreciated, thanks.