[ { "path": ".gitignore", "content": "### Project ###\n# Docs\n/docs/build/\n# Don't use yarn for library project\nyarn.lock\n# Transpiled source directory\nlib/\n\n### VS Code ###\n.vscode/\n\n### WebStorm ###\n.idea/\n\n### Node ###\n# Logs\nlogs\n*.log\nnpm-debug.log*\n\n# Compiled binary addons (http://nodejs.org/api/addons.html)\nbuild/Release\n\n# Dependency directories\nnode_modules\n\n# Optional npm cache directory\n.npm\n\n# Optional eslint cache\n.eslintcache\n\n# Optional REPL history\n.node_repl_history\n\n# Output of 'npm pack'\n*.tgz\n\n# Yarn Integrity file\n.yarn-integrity\n\n### For Vim Users ###\n# swap\n[._]*.s[a-v][a-z]\n[._]*.sw[a-p]\n[._]s[a-v][a-z]\n[._]sw[a-p]\n# session\nSession.vim\n# temporary\n.netrwhist\n*~\n# auto-generated tag files\ntags\n\n### Python ###\n*.pyc\n\n### Jest Generated Files ###\n/packages/**/jest_0\n" }, { "path": ".npmignore", "content": ".git/\nnode_modules/\nsrc/\nyarn.lock\n**/__mocks__/**\n**/__tests__/**\n" }, { "path": ".travis.yml", "content": "language: node_js\n\nnode_js:\n - \"7\"\n\nsudo: false\n\ncache:\n directories:\n - \"node_modules\"\n\nbefore_script:\n - lerna bootstrap\n - npm run clean\n\nscript:\n - npm run build\n - npm run test\n" }, { "path": "README.md", "content": "React Material Components Web\n=============================\n\n[![License: MIT](https://img.shields.io/github/license/mashape/apistatus.svg)](https://opensource.org/licenses/MIT)\n[![npm version](https://badge.fury.io/js/react-material-components-web.svg)](https://www.npmjs.com/package/react-material-components-web)\n[![Build Status](https://img.shields.io/travis/react-mdc/react-material-components-web.svg)](https://travis-ci.org/react-mdc/react-material-components-web)\n\n\nReact wrapper of [Material Components Web](\nhttps://github.com/material-components/material-components-web)\n\nUnder Active Development\n------------------------\n\nThe project is under active development.\n\nEvery updates can contain breaking changes before 0.2.0.\n\nWe **do not** recommend you to use this library for produciton applications at this time.\n\nDocumentation\n-------------\n\nYou can find documentation with live demo at https://react-mdc.github.io/\n\nFeatures\n--------\n\n* Typed strictly with [TypeScript](http://typescriptlang.org)\n\n You can access typing support by also using TypeScript\n\n* Stylesheet independent\n\n Since *Material Components Web* can be customized with scss,\n it does not depend on specific stylesheet.\n You can load your own stylesheet or a default one.\n\n* Each component packaged individually\n\n Like *Material Components Web*, You can access all components individually,\n under [@react-mdc npm scope](https://www.npmjs.com/%7Ereact-mdc).\n\nGetting Start\n-------------\n\nInstall the library\n\n``` bash\n$ npm install --save @react-mdc/typography\n```\n\nImport the stylesheet\n\n``` html\n\n\n```\n\nOr load using webpack and scss-loader\n\n`my-mdc.scss`\n``` scss\n\n// My main Sass file.\n$mdc-theme-primary: #9c27b0;\n$mdc-theme-accent: #76ff03;\n$mdc-theme-background: #fff;\n\n@import \"material-components-web/material-components-web\";\n\n```\n\n`app.js`\n``` javascript\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\n\nimport \"./stylesheets/my-mdc.scss\";\nimport Main from './main.js';\n\nReactDOM.render(
, document.getElementById('root'));\n\n```\n\nAnd import *@react-mdc* then give it a shot.\n\n`main.js`\n``` typescript\n\nimport * as React from \"react\";\nimport Typography from \"@react-mdc/typography\";\n\nexport default class Main extends React.Component<{}, {}> {\n render () {\n return (\n \n \n This is an example\n \n \n Hello world!\n \n \n );\n }\n}\n\n```\n\nSetup for Development\n---------------------\n\nBootstrap\n\n``` shell\n\n$ lerna bootstrap\n\n```\n\nBuild\n\n``` shell\n\n$ npm run build\n\n```\n\n\nRun Docs\n--------\n\n``` shell\n\n$ cd docs\n$ npm start\n\n```\n\nWatch for Changes and Build\n---------------------------\n\n``` shell\n\n$ npm run watch\n\n```\n\n\nRun Test\n--------\n\n``` shell\n\n$ npm test\n\n```\n\nto watch\n\n``` shell\n\n$ npm test:watch\n\n```\n\n" }, { "path": "docs/.gitignore", "content": "### Typescript ###\n.awcache/\n\n### Node ###\n# Logs\nlogs\n*.log\nnpm-debug.log*\n\n# Compiled binary addons (http://nodejs.org/api/addons.html)\nbuild/Release\n\n# Dependency directories\nnode_modules\n\n# Optional npm cache directory\n.npm\n\n# Optional eslint cache\n.eslintcache\n\n# Optional REPL history\n.node_repl_history\n\n# Output of 'npm pack'\n*.tgz\n\n# Yarn Integrity file\n.yarn-integrity\n\n### For Vim Users ###\n# swap\n[._]*.s[a-v][a-z]\n[._]*.sw[a-p]\n[._]s[a-v][a-z]\n[._]sw[a-p]\n# session\nSession.vim\n# temporary\n.netrwhist\n*~\n# auto-generated tag files\ntags\n" }, { "path": "docs/config/webpack/app.js", "content": "const fs = require(\"fs\");\nconst path = require(\"path\");\nconst webpack = require(\"webpack\");\n\nconst ExtractTextPlugin = require(\"extract-text-webpack-plugin\");\nconst {\n TsConfigPathsPlugin,\n CheckerPlugin\n} = require(\"awesome-typescript-loader\");\n\nconst {\n DOCS_ROOT,\n BUILD_PATH,\n SRC_ROOT,\n PRODUCTION\n} = require(\"./constants\");\n\nfunction loadManifest(name) {\n const manifestName = name + \"-manifest.json\";\n return JSON.parse(fs.readFileSync(path.resolve(BUILD_PATH, manifestName), \"utf-8\"));\n}\n\n/* Configure plugins */\nconst extractVendorStyle = new ExtractTextPlugin({\n filename: \"vendor.css\"\n});\nconst extractLocalStyle = new ExtractTextPlugin({\n filename: \"local.css\"\n});\n\nconst ENV_PLUGINS = PRODUCTION ? [\n new webpack.DefinePlugin({\n \"process.env\": {\n NODE_ENV: JSON.stringify(process.env.NODE_ENV)\n }\n }),\n new webpack.optimize.UglifyJsPlugin({\n compress: {\n warnings: false\n }\n })\n] : [];\n\nmodule.exports = {\n context: DOCS_ROOT,\n entry: {\n app: [path.resolve(SRC_ROOT, \"js\", \"index.tsx\")]\n },\n plugins: [\n extractVendorStyle,\n extractLocalStyle,\n new webpack.DllReferencePlugin({\n context: DOCS_ROOT,\n manifest: loadManifest(\"vendor\")\n }),\n new TsConfigPathsPlugin(),\n new CheckerPlugin()\n ].concat(ENV_PLUGINS),\n output: {\n path: BUILD_PATH,\n publicPath: \"/build/\",\n filename: \"bundle.js\"\n },\n resolve: {\n alias: {\n app: SRC_ROOT\n },\n extensions: [\"*\", \".js\", \".ts\", \".tsx\"]\n },\n module: {\n loaders: [\n /* Typescript */\n {\n test: /\\.tsx?$/,\n loader: \"awesome-typescript-loader\",\n options: {\n useCache: true,\n }\n },\n {\n test: /\\.tsx?$/,\n enforce: 'pre',\n loader: 'tslint-loader',\n options: {\n emitErrors: true,\n }\n },\n /* Styles */\n {\n // Don't compile external stylesheets\n test: /\\.css$/,\n include: /node_modules/,\n loader: extractVendorStyle.extract({\n use: \"css-loader\",\n // use style-loader in development\n fallback: \"style-loader\"\n })\n },\n /* SCSS */\n {\n test: /\\.scss$/,\n loader: extractLocalStyle.extract({\n use: [{\n loader: 'css-loader',\n options: {\n localIdentName: '[local]--[hash:base64:5]',\n importLoaders: 1\n }\n },\n 'postcss-loader',\n {\n loader: 'sass-loader',\n options: {\n includePaths: [\n path.resolve(DOCS_ROOT, 'node_modules'),\n path.resolve(DOCS_ROOT, 'src')\n ]\n }\n }\n ],\n // use style-loader in development\n fallback: 'style-loader'\n })\n },\n /* Assets */\n {\n exclude: [\n /\\.html$/,\n /\\.(ts|tsx)$/,\n /\\.css$/,\n /\\.scss$/,\n /\\.json$/,\n /\\.svg$/,\n /\\.js$/\n ],\n loader: \"url-loader\",\n options: {\n limit: 10000,\n name: \"static/media/[name].[hash:8].[ext]\"\n }\n },\n {\n test: /\\.json$/,\n loader: \"json-loader\"\n },\n {\n test: /\\.svg$/,\n loader: \"file-loader\",\n query: {\n name: \"static/media/[name].[hash:8].[ext]\"\n }\n }\n ]\n },\n devtool: \"source-map\"\n};\n" }, { "path": "docs/config/webpack/constants.js", "content": "const path = require(\"path\");\n\nconst PROJECT_ROOT = module.exports.PROJECT_ROOT = path.resolve(__dirname, \"..\", \"..\", \"..\");\nconst DOCS_ROOT = module.exports.DOCS_ROOT = path.resolve(PROJECT_ROOT, \"docs\");\nconst BUILD_PATH = module.exports.BUILD_PATH = path.resolve(DOCS_ROOT, \"build\");\nconst SRC_ROOT = module.exports.SRC_ROOT = path.resolve(DOCS_ROOT, \"src\");\n\nconst PRODUCTION = module.exports.PRODUCTION = process.env.NODE_ENV === \"production\";\n" }, { "path": "docs/config/webpack/vendor.js", "content": "const path = require(\"path\");\nconst webpack = require(\"webpack\");\n\nconst {\n DOCS_ROOT,\n BUILD_PATH,\n PRODUCTION\n} = require(\"./constants\");\n\nconst ENV_PLUGINS = PRODUCTION ? [\n new webpack.optimize.UglifyJsPlugin({\n compress: {\n warnings: false\n }\n }),\n new webpack.DefinePlugin({\n \"process.env\": {\n NODE_ENV: JSON.stringify(process.env.NODE_ENV)\n }\n })\n] : [];\n\nmodule.exports = {\n context: DOCS_ROOT,\n entry: {\n vendor: [path.resolve(DOCS_ROOT, \"vendor.js\")]\n },\n plugins: [\n new webpack.DllPlugin({\n context: DOCS_ROOT,\n path: path.resolve(BUILD_PATH, \"[name]-manifest.json\"),\n name: \"[name]_dll\"\n })\n ].concat(ENV_PLUGINS),\n output: {\n path: BUILD_PATH,\n publicPath: \"/build/\",\n filename: \"[name].dll.js\",\n library: \"[name]_dll\"\n },\n devtool: \"source-map\"\n};\n" }, { "path": "docs/index.html", "content": "\n\n \n \n React Material Components Web: React Components for Material Components Web\n \n \n \n \n
\n
\n Loading...\n
\n
\n \n \n \n\n" }, { "path": "docs/package.json", "content": "{\n \"name\": \"Document\",\n \"author\": \"Choi Geonu\",\n \"license\": \"MIT\",\n \"private\": true,\n \"dependencies\": {\n \"@react-mdc/base\": \"^0.1.12\",\n \"@react-mdc/button\": \"^0.1.8\",\n \"@react-mdc/card\": \"^0.1.9\",\n \"@react-mdc/checkbox\": \"^0.1.12\",\n \"@react-mdc/dialog\": \"^0.1.7\",\n \"@react-mdc/drawer\": \"^0.1.13\",\n \"@react-mdc/elevation\": \"^0.1.9\",\n \"@react-mdc/fab\": \"^0.1.9\",\n \"@react-mdc/form-field\": \"^0.1.8\",\n \"@react-mdc/layout-grid\": \"^0.1.9\",\n \"@react-mdc/list\": \"^0.1.9\",\n \"@react-mdc/radio\": \"^0.1.12\",\n \"@react-mdc/ripple\": \"^0.1.11\",\n \"@react-mdc/switch\": \"^0.1.9\",\n \"@react-mdc/textfield\": \"^0.1.11\",\n \"@react-mdc/theme\": \"^0.1.8\",\n \"@react-mdc/toolbar\": \"^0.1.11\",\n \"@react-mdc/typography\": \"^0.1.8\",\n \"@types/codemirror\": \"0.0.40\",\n \"@types/react\": \"^15.0.18\",\n \"@types/react-dom\": \"^0.14.23\",\n \"classnames\": \"^2.2.5\",\n \"codemirror\": \"^5.25.2\",\n \"core-js\": \"^2.4.1\",\n \"material-components-web\": \"^0.10.0\",\n \"react\": \"^15.0.0\",\n \"react-dom\": \"^15.4.2\",\n \"react-router\": \"^3.0.2\"\n },\n \"devDependencies\": {\n \"@types/enzyme\": \"^2.8.0\",\n \"autoprefixer\": \"^7.0.1\",\n \"awesome-typescript-loader\": \"^3.1.3\",\n \"cross-env\": \"^4.0.0\",\n \"css-loader\": \"^0.28.1\",\n \"enzyme\": \"^2.8.2\",\n \"extract-text-webpack-plugin\": \"2.1.0\",\n \"file-loader\": \"^0.11.1\",\n \"gh-pages\": \"^1.0.0\",\n \"json-loader\": \"^0.5.4\",\n \"node-sass\": \"^4.5.0\",\n \"npm-run-all\": \"^4.0.2\",\n \"postcss-loader\": \"^2.0.5\",\n \"raw-loader\": \"^0.5.1\",\n \"sass-loader\": \"^6.0.5\",\n \"shelljs\": \"^0.7.7\",\n \"shx\": \"^0.2.2\",\n \"style-loader\": \"^0.17.0\",\n \"tslint\": \"^5.2.0\",\n \"tslint-loader\": \"^3.5.3\",\n \"tslint-react\": \"^3.0.0\",\n \"typescript\": \"^2.4.1\",\n \"url-loader\": \"^0.5.7\",\n \"webpack\": \"^2.2.1\",\n \"webpack-dev-server\": \"^2.3.0\"\n },\n \"scripts\": {\n \"clean\": \"shx rm -rf build/\",\n \"precompile\": \"npm run clean\",\n \"postinstall\": \"npm run compile:vendor\",\n \"compile:vendor\": \"webpack --progress --config config/webpack/vendor.js\",\n \"compile:app\": \"webpack --progress --config config/webpack/app.js\",\n \"compile\": \"npm-run-all compile:vendor compile:app\",\n \"start:webpack-dev-server\": \"webpack-dev-server --progress --config config/webpack/app.js\",\n \"start\": \"npm-run-all compile:vendor start:webpack-dev-server\",\n \"release:compile\": \"cross-env NODE_ENV=production npm run compile\",\n \"release:gh-pages\": \"gh-pages -d . -m 'Update Docs' --remove node_modules --repo https://github.com/react-mdc/react-mdc.github.io.git --branch master --dotfiles true\",\n \"release\": \"npm-run-all clean release:compile release:gh-pages\"\n },\n \"version\": \"0.1.7\"\n}\n" }, { "path": "docs/postcss.config.js", "content": "module.exports = {\n plugins: [\n require('autoprefixer')({ /* ...options */ })\n ]\n};\n" }, { "path": "docs/src/js/Container/MainToolbar.tsx", "content": "import * as React from \"react\";\nimport { Link } from \"react-router\";\n\nimport * as classNames from \"classnames\";\n\nimport Toolbar from \"@react-mdc/toolbar\";\n\nimport DarkTheme from \"app/js/components/DarkTheme\";\nimport { MaterialIcon } from \"app/js/components/Icon\";\n\nimport * as styles from \"./styles.scss\";\n\nexport type Props = {\n className?: string,\n};\n\nexport default class MainToolbar extends React.Component {\n public props: Props;\n\n public render() {\n return (\n \n \n \n \n \n \n layers\n \n \n React Material Components Web\n \n \n \n \n \n \n );\n }\n}\n" }, { "path": "docs/src/js/Container/index.tsx", "content": "import * as React from \"react\";\n\nimport Toolbar from \"@react-mdc/toolbar\";\nimport Typography from \"@react-mdc/typography\";\n\nimport MainToolbar from \"./MainToolbar\";\n\nimport * as styles from \"./styles.scss\";\n\nexport default class Container extends React.Component<{ children?: React.ReactChild }, {}> {\n public render() {\n return (\n \n \n \n {this.props.children}\n \n \n );\n }\n}\n" }, { "path": "docs/src/js/Container/styles.scss", "content": "@import \"style/vars/theme\";\n\n:local {\n .container {\n flex: 1;\n }\n .toolbar {\n /* Codemirror has z-index > 3 */\n z-index: 4;\n }\n .toolbar-title {\n text-decoration: none;\n @include mdc-theme-dark {\n @include mdc-theme-prop(color, text-primary-on-dark);\n }\n }\n .toolbar-icon {\n padding-right: 16px;\n }\n .toolbar-title-text {\n font-family: Roboto Mono;\n }\n}\n" }, { "path": "docs/src/js/common/types.ts", "content": "" }, { "path": "docs/src/js/compat.ts", "content": "/**\n * Compatibility\n */\n\n// ES2017 Polyfills\nimport \"core-js/es7/index.js\";\n" }, { "path": "docs/src/js/components/Code.tsx", "content": "import * as React from \"react\";\n\nimport * as classNames from \"classnames\";\nimport { default as CodeMirror, Props as CodeMirrorProps } from \"./CodeMirror\";\n\nimport * as styles from \"./styles.scss\";\n\ntype Props = CodeMirrorProps & {\n className?: string,\n options?: any,\n mode?: string,\n lineNumbers?: boolean,\n readOnly?: boolean,\n};\n\nfunction ifNull(nullable: T | null | undefined, then: T): T {\n if (nullable == null) {\n return then;\n } else {\n return nullable;\n }\n}\n\nexport default function Code(p: Props) {\n let {\n className,\n options,\n mode,\n lineNumbers,\n readOnly,\n ...props,\n } = p;\n\n className = classNames(styles.code, className);\n const mergedOptions: {\n [key: string]: any,\n } = {};\n mergedOptions.mode = ifNull(mode, \"jsx\");\n mergedOptions.lineNumbers = ifNull(lineNumbers, false);\n mergedOptions.readOnly = ifNull(readOnly, true);\n options = {\n ...mergedOptions,\n ...options,\n };\n return (\n
\n \n
\n );\n}\n" }, { "path": "docs/src/js/components/CodeMirror.tsx", "content": "import * as React from \"react\";\nimport * as ReactDOM from \"react-dom\";\n\nimport * as classNames from \"classnames\";\nimport * as CodeMirror from \"codemirror\";\nimport * as _ from \"lodash\";\n\nfunction normalizeLineEndings(str: string | null | undefined) {\n if (str == null) {\n return str;\n }\n return str.replace(/\\r\\n|\\r/g, \"\\n\");\n}\n\ntype CodemirrorType = typeof CodeMirror;\n\nexport type Props = {\n value: string,\n\n className?: string,\n codeMirrorInstance?: CodemirrorType,\n defaultValue?: string,\n onFocusChange?: (focused: boolean) => void,\n onChange?: (value: string, change: CodeMirror.EditorChangeLinkedList) => void,\n onScroll?: (instance: CodeMirror.Editor) => void,\n options?: object,\n path?: string,\n preserveScrollPosition?: boolean,\n};\n\ntype State = {\n focused: false,\n};\n\nexport default class ReactCodemirror extends React.Component {\n public static defaultProps = {\n preserveScrollPosition: false,\n };\n\n public state: State = {\n focused: false,\n };\n\n private codeMirror: CodeMirror.EditorFromTextArea | null = null;\n\n public componentWillMount() {\n this.componentWillReceiveProps = _.debounce(this.componentWillReceiveProps, 0);\n }\n\n public componentWillUnmount() {\n // is there a lighter-weight way to remove the cm instance?\n if (this.codeMirror) {\n this.codeMirror.toTextArea();\n }\n }\n\n public componentWillReceiveProps(nextProps: Props) {\n if (this.codeMirror &&\n nextProps.value !== undefined &&\n normalizeLineEndings(this.codeMirror.getValue()) !== normalizeLineEndings(nextProps.value)) {\n if (this.props.preserveScrollPosition) {\n const prevScrollPosition = this.codeMirror.getScrollInfo();\n this.codeMirror.setValue(nextProps.value);\n this.codeMirror.scrollTo(prevScrollPosition.left, prevScrollPosition.top);\n } else {\n this.codeMirror.setValue(nextProps.value);\n }\n }\n if (this.codeMirror != null && typeof nextProps.options === \"object\") {\n for (const optionName in nextProps.options) {\n if (nextProps.options.hasOwnProperty(optionName)) {\n this.codeMirror.setOption(optionName, nextProps.options[optionName]);\n }\n }\n }\n }\n public render() {\n const editorClassName = classNames(\n \"ReactCodeMirror\",\n this.state.focused ? \"ReactCodeMirror--focused\" : null,\n this.props.className,\n );\n return (\n
\n