{demoOptions.hideHeader ? null : (
- {demo.rawHooks && (
-
+
+
+
-
+
- )}
- {demo.rawHooks && (
-
+
-
+
- )}
-
-
-
-
-
-
+ {demoOptions.hideEditButton ? null : (
+
+
+
+
+
+ )}
-
+
-
- {demoOptions.hideEditButton ? null : (
-
-
-
-
-
- )}
-
-
-
-
+ {demoOptions.hideEditButton ? null : (
+
+ )}
+
+
diff --git a/docs/src/modules/components/DemoLanguages.js b/docs/src/modules/components/DemoLanguages.js
new file mode 100644
index 00000000000000..7ea2b50b1f65f2
--- /dev/null
+++ b/docs/src/modules/components/DemoLanguages.js
@@ -0,0 +1,70 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Fade from '@material-ui/core/Fade';
+import ToggleButton from '@material-ui/lab/ToggleButton';
+import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
+import JavascriptIcon from '@material-ui/docs/svgIcons/Javascript';
+import TypescriptIcon from '@material-ui/docs/svgIcons/Typescript';
+import HooksIcon from '@material-ui/docs/svgIcons/Hooks';
+import { CODE_VARIANTS } from 'docs/src/modules/constants';
+
+function DemoLanguages(props) {
+ const { codeOpen, codeVariant, demo, gaEventCategory, onLanguageClick } = props;
+ const hasHooksVariant = demo.rawHooks;
+ const hasTSVariant = demo.rawTS;
+
+ function renderedCodeVariant() {
+ if (codeVariant === CODE_VARIANTS.TS && hasTSVariant) {
+ return CODE_VARIANTS.TS;
+ }
+ if (codeVariant === CODE_VARIANTS.HOOK && hasHooksVariant) {
+ return CODE_VARIANTS.HOOK;
+ }
+ return CODE_VARIANTS.JS;
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+DemoLanguages.propTypes = {
+ codeOpen: PropTypes.bool.isRequired,
+ codeVariant: PropTypes.string.isRequired,
+ demo: PropTypes.object.isRequired,
+ gaEventCategory: PropTypes.string.isRequired,
+ onLanguageClick: PropTypes.func,
+};
+
+export default DemoLanguages;
diff --git a/docs/src/modules/components/MarkdownDocs.js b/docs/src/modules/components/MarkdownDocs.js
index 0913f14d5ab25f..3f358b1c984439 100644
--- a/docs/src/modules/components/MarkdownDocs.js
+++ b/docs/src/modules/components/MarkdownDocs.js
@@ -58,6 +58,7 @@ function MarkdownDocs(props) {
if (req) {
demos = {};
const markdowns = {};
+ const sourceFiles = reqSource.keys();
req.keys().forEach(filename => {
if (filename.indexOf('.md') !== -1) {
const match = filename.match(/-([a-z]{2})\.md$/);
@@ -72,10 +73,20 @@ function MarkdownDocs(props) {
const isHooks = filename.indexOf('.hooks.js') !== -1;
const jsType = isHooks ? 'jsHooks' : 'js';
const rawType = isHooks ? 'rawHooks' : 'raw';
+
+ const tsFilename = !isHooks
+ ? sourceFiles.find(sourceFileName => {
+ const isTSSourceFile = /\.tsx$/.test(sourceFileName);
+ const isTSVersionOfFile = sourceFileName.replace(/\.tsx$/, '.js') === filename;
+ return isTSSourceFile && isTSVersionOfFile;
+ })
+ : undefined;
+
demos[demoName] = {
- ...(demos[demoName] ? demos[demoName] : {}),
+ ...demos[demoName],
[jsType]: req(filename).default,
[rawType]: reqSource(filename),
+ rawTS: tsFilename ? reqSource(tsFilename) : undefined,
};
}
});
diff --git a/docs/src/modules/constants.js b/docs/src/modules/constants.js
index 91115c75898c47..37865f5d85941a 100644
--- a/docs/src/modules/constants.js
+++ b/docs/src/modules/constants.js
@@ -1,5 +1,6 @@
export const CODE_VARIANTS = {
JS: 'JS',
+ TS: 'TS',
HOOK: 'HOOK',
};
diff --git a/docs/src/modules/utils/getDemoConfig.js b/docs/src/modules/utils/getDemoConfig.js
new file mode 100644
index 00000000000000..6c9197a99d3305
--- /dev/null
+++ b/docs/src/modules/utils/getDemoConfig.js
@@ -0,0 +1,111 @@
+import { getDependencies } from './helpers';
+import { CODE_VARIANTS } from 'docs/src/modules/constants';
+
+function jsDemo(demoData) {
+ return {
+ dependencies: getDependencies(demoData.raw),
+ files: {
+ 'demo.js': demoData.raw,
+ 'index.js': `
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Demo from './demo';
+
+ReactDOM.render(
, document.querySelector('#root'));
+ `,
+ },
+ };
+}
+
+function hooksDemo(demoData) {
+ return {
+ dependencies: getDependencies(demoData.rawHooks, { reactVersion: 'next' }),
+ files: {
+ 'index.js': `
+ import React from 'react';
+ import ReactDOM from 'react-dom';
+ import Demo from './demo';
+ import { createMuiTheme } from "@material-ui/core/styles";
+ import { ThemeProvider } from "@material-ui/styles";
+
+ const theme = createMuiTheme({ typography: { useNextVariants: true } });
+
+ ReactDOM.render(
+
+
+ ,
+ document.querySelector("#root")
+ );
+ `,
+ 'demo.js': demoData.raw,
+ },
+ };
+}
+
+function tsDemo(demoData) {
+ return {
+ dependencies: getDependencies(demoData.raw, { codeLanguage: 'TS' }),
+ files: {
+ 'demo.tsx': demoData.raw,
+ 'index.tsx': `
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Demo from './demo';
+
+ReactDOM.render(
, document.querySelector('#root'));
+ `,
+ 'tsconfig.json': `{
+ "compilerOptions": {
+ "module": "esnext",
+ "target": "es5",
+ "lib": ["es6", "dom"],
+ "sourceMap": true,
+ "jsx": "react",
+ "strict": true,
+ "esModuleInterop": true
+ }
+ }`,
+ },
+ main: 'index.tsx',
+ scripts: {
+ start: 'react-scripts start',
+ },
+ };
+}
+
+function getLanguageConfig(demoData) {
+ switch (demoData.codeVariant) {
+ case CODE_VARIANTS.TS:
+ return tsDemo(demoData);
+ case CODE_VARIANTS.HOOKS:
+ return hooksDemo(demoData);
+ default:
+ return jsDemo(demoData);
+ }
+}
+
+export default function getDemo(demoData) {
+ const baseConfig = {
+ title: 'Material demo',
+ description: demoData.githubLocation,
+ files: {
+ 'index.html': `
+
+
+
+
+
+ `,
+ },
+ };
+ const languageConfig = getLanguageConfig(demoData);
+
+ return {
+ ...baseConfig,
+ ...languageConfig,
+ files: {
+ ...baseConfig.files,
+ ...languageConfig.files,
+ },
+ };
+}
diff --git a/docs/src/modules/utils/helpers.js b/docs/src/modules/utils/helpers.js
index 7c8d4004855d82..254cf8f3cda5ce 100644
--- a/docs/src/modules/utils/helpers.js
+++ b/docs/src/modules/utils/helpers.js
@@ -28,7 +28,51 @@ export function pageToTitle(page) {
return titleize(name);
}
-export function getDependencies(raw, reactVersion = 'latest') {
+/**
+ * @var
+ * set of packages that ship their own typings instead of using @types/ namespace
+ * Array because Set([iterable]) is not supported in IE11
+ */
+const packagesWithBundledTypes = ['@material-ui/core', '@material-ui/lab'];
+
+/**
+ * WARNING: Always uses `latest` typings.
+ *
+ * Adds dependencies to @types packages only for packages that are not listed
+ * in packagesWithBundledTypes
+ *
+ * @see packagesWithBundledTypes in this module namespace
+ *
+ * @param {Record
} deps - list of dependency as `name => version`
+ */
+function addTypeDeps(deps) {
+ const packagesWithDTPackage = Object.keys(deps).filter(
+ name => packagesWithBundledTypes.indexOf(name) === -1,
+ );
+
+ packagesWithDTPackage.forEach(name => {
+ let resolvedName = name;
+ // scoped package?
+ if (name.startsWith('@')) {
+ // https://github.com/DefinitelyTyped/DefinitelyTyped#what-about-scoped-packages
+ resolvedName = name.slice(1).replace('/', '__');
+ }
+
+ deps[`@types/${resolvedName}`] = 'latest';
+ });
+
+ return deps;
+}
+
+/**
+ * @param {string} raw - ES6 source with es module imports
+ * @param {objects} options
+ * @param {'JS' | 'TS'} options.codeLanguage
+ * @param {'next' | 'latest'} options.reactVersion
+ * @returns {Record} map of packages with their required version
+ */
+export function getDependencies(raw, options = {}) {
+ const { codeLanguage = 'JS', reactVersion = 'latest' } = options;
const deps = {
'react-dom': reactVersion,
react: reactVersion,
@@ -54,6 +98,11 @@ export function getDependencies(raw, reactVersion = 'latest') {
deps[name] = versions[name] ? versions[name] : 'latest';
}
}
+
+ if (codeLanguage === 'TS') {
+ addTypeDeps(deps);
+ }
+
return deps;
}
diff --git a/docs/src/modules/utils/helpers.test.js b/docs/src/modules/utils/helpers.test.js
index 7e654f497a4348..38ed1e91fd69fb 100644
--- a/docs/src/modules/utils/helpers.test.js
+++ b/docs/src/modules/utils/helpers.test.js
@@ -87,4 +87,18 @@ import { MuiPickersUtilsProvider, TimePicker, DatePicker } from 'material-ui-pic
react: 'latest',
});
});
+
+ it('can collect required @types packages', () => {
+ assert.deepEqual(getDependencies(s1, 'TS'), {
+ '@foo-bar/bip': 'latest',
+ '@material-ui/core': 'latest',
+ 'prop-types': 'latest',
+ 'react-dom': 'latest',
+ react: 'latest',
+ '@types/foo-bar__bip': 'latest',
+ '@types/prop-types': 'latest',
+ '@types/react-dom': 'latest',
+ '@types/react': 'latest',
+ });
+ });
});
diff --git a/docs/src/pages/demos/app-bar/BottomAppBar.tsx b/docs/src/pages/demos/app-bar/BottomAppBar.tsx
new file mode 100644
index 00000000000000..f2b34cc86143ff
--- /dev/null
+++ b/docs/src/pages/demos/app-bar/BottomAppBar.tsx
@@ -0,0 +1,154 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles';
+import AppBar from '@material-ui/core/AppBar';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import Toolbar from '@material-ui/core/Toolbar';
+import Typography from '@material-ui/core/Typography';
+import IconButton from '@material-ui/core/IconButton';
+import Paper from '@material-ui/core/Paper';
+import Fab from '@material-ui/core/Fab';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import ListSubheader from '@material-ui/core/ListSubheader';
+import Avatar from '@material-ui/core/Avatar';
+import MenuIcon from '@material-ui/icons/Menu';
+import AddIcon from '@material-ui/icons/Add';
+import SearchIcon from '@material-ui/icons/Search';
+import MoreIcon from '@material-ui/icons/MoreVert';
+
+const styles = (theme: Theme) =>
+ createStyles({
+ text: {
+ paddingTop: theme.spacing.unit * 2,
+ paddingLeft: theme.spacing.unit * 2,
+ paddingRight: theme.spacing.unit * 2,
+ },
+ paper: {
+ paddingBottom: 50,
+ },
+ list: {
+ marginBottom: theme.spacing.unit * 2,
+ },
+ subHeader: {
+ backgroundColor: theme.palette.background.paper,
+ },
+ appBar: {
+ top: 'auto',
+ bottom: 0,
+ },
+ toolbar: {
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ },
+ fabButton: {
+ position: 'absolute',
+ zIndex: 1,
+ top: -30,
+ left: 0,
+ right: 0,
+ margin: '0 auto',
+ },
+ });
+
+const messages = [
+ {
+ id: 1,
+ primary: 'Brunch this week?',
+ secondary: "I'll be in the neighbourhood this week. Let's grab a bite to eat",
+ person: '/static/images/avatar/5.jpg',
+ },
+ {
+ id: 2,
+ primary: 'Birthday Gift',
+ secondary: `Do you have a suggestion for a good present for John on his work
+ anniversary. I am really confused & would love your thoughts on it.`,
+ person: '/static/images/avatar/1.jpg',
+ },
+ {
+ id: 3,
+ primary: 'Recipe to try',
+ secondary: 'I am try out this new BBQ recipe, I think this might be amazing',
+ person: '/static/images/avatar/2.jpg',
+ },
+ {
+ id: 4,
+ primary: 'Yes!',
+ secondary: 'I have the tickets to the ReactConf for this year.',
+ person: '/static/images/avatar/3.jpg',
+ },
+ {
+ id: 5,
+ primary: "Doctor's Appointment",
+ secondary: 'My appointment for the doctor was rescheduled for next Saturday.',
+ person: '/static/images/avatar/4.jpg',
+ },
+ {
+ id: 6,
+ primary: 'Discussion',
+ secondary: `Menus that are generated by the bottom app bar (such as a bottom
+ navigation drawer or overflow menu) open as bottom sheets at a higher elevation
+ than the bar.`,
+ person: '/static/images/avatar/5.jpg',
+ },
+ {
+ id: 7,
+ primary: 'Summer BBQ',
+ secondary: `Who wants to have a cookout this weekend? I just got some furniture
+ for my backyard and would love to fire up the grill.`,
+ person: '/static/images/avatar/1.jpg',
+ },
+];
+
+export interface Props extends WithStyles {}
+
+function BottomAppBar(props: Props) {
+ const { classes } = props;
+ return (
+
+
+
+
+ Inbox
+
+
+ {messages.map(({ id, primary, secondary, person }) => (
+
+ {id === 1 && Today}
+ {id === 3 && Yesterday}
+
+
+
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+BottomAppBar.propTypes = {
+ classes: PropTypes.object.isRequired,
+} as any;
+
+export default withStyles(styles)(BottomAppBar);
diff --git a/docs/src/pages/demos/app-bar/ButtonAppBar.tsx b/docs/src/pages/demos/app-bar/ButtonAppBar.tsx
new file mode 100644
index 00000000000000..f8baad446bb5a9
--- /dev/null
+++ b/docs/src/pages/demos/app-bar/ButtonAppBar.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { createStyles, withStyles, WithStyles } from '@material-ui/core/styles';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import Typography from '@material-ui/core/Typography';
+import Button from '@material-ui/core/Button';
+import IconButton from '@material-ui/core/IconButton';
+import MenuIcon from '@material-ui/icons/Menu';
+
+const styles = createStyles({
+ root: {
+ flexGrow: 1,
+ },
+ grow: {
+ flexGrow: 1,
+ },
+ menuButton: {
+ marginLeft: -12,
+ marginRight: 20,
+ },
+});
+
+export interface Props extends WithStyles {}
+
+function ButtonAppBar(props: Props) {
+ const { classes } = props;
+ return (
+
+
+
+
+
+
+
+ News
+
+
+
+
+
+
+
+
+
+
+
+ Photos
+
+
+
+
+
+
+ }
+ label={auth ? 'Logout' : 'Login'}
+ />
+
+
+
+
+
+
+
+ Photos
+
+ {auth && (
+
+ )}
+
+
+