├── .babelrc ├── .editorconfig ├── .eslintrc ├── .gitignore ├── .npmignore ├── .npmrc ├── .prettierignore ├── .prettierrc ├── .storybook ├── addons.js ├── config.js └── preview-head.html ├── .travis.yml ├── CHANGELOG.md ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── ROADMAP.md ├── build ├── .eslintrc ├── README.md ├── concatenate-css-files.js ├── copy-files.js ├── copy-source-files.js ├── copy-transpiled-icons.js ├── copy-www-files.js ├── generate-icons.js ├── rollup.config.js └── svg-attribute-list.js ├── docs ├── .babelrc ├── .eslintrc.js ├── .gitignore ├── .npmrc ├── CNAME ├── README.md ├── algolia.js ├── components.js ├── examples │ ├── action-chip.js │ ├── avatar.js │ ├── button.js │ ├── checkbox.js │ ├── choice-chip.js │ ├── dialog.js │ ├── elevation.js │ ├── expansion-panel.js │ ├── field.js │ ├── filter-chip.js │ ├── icon-button.js │ ├── icons.js │ ├── input-chip.js │ ├── input.js │ ├── loading-dots.js │ ├── menu.js │ ├── navigation.js │ ├── progress-bar.js │ ├── radio.js │ ├── snackbar.js │ ├── spinner.js │ ├── switch.js │ ├── table.js │ └── text-area.js ├── package.json ├── public │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon-96x96.png │ ├── favicon.ico │ └── robots.txt ├── readmes │ ├── action-chip.md │ ├── avatar.md │ ├── button.md │ ├── checkbox.md │ ├── choice-chip.md │ ├── dialog.md │ ├── elevation.md │ ├── expansion-panel.md │ ├── field.md │ ├── filter-chip.md │ ├── icon-button.md │ ├── icons.md │ ├── input-chip.md │ ├── input.md │ ├── loading-dots.md │ ├── menu.md │ ├── navigation.md │ ├── progress-bar.md │ ├── radio.md │ ├── snackbar.md │ ├── spinner.md │ ├── switch.md │ ├── table.md │ └── text-area.md ├── src │ ├── app.css │ ├── app.js │ ├── common │ │ ├── 404.js │ │ ├── footer.css │ │ ├── footer.js │ │ ├── header.css │ │ ├── header.js │ │ ├── nav.css │ │ ├── nav.js │ │ ├── overlay.css │ │ ├── overlay.js │ │ └── utils │ │ │ ├── configure-code-libraries.js │ │ │ ├── history-with-query.js │ │ │ ├── load-materialish-styles.js │ │ │ └── react-over-animations.js │ ├── components │ │ ├── buttons.js │ │ ├── chips.js │ │ ├── component-doc.css │ │ ├── component-doc.js │ │ ├── index.css │ │ ├── index.js │ │ ├── progress-indicators.js │ │ ├── selection-controls.js │ │ ├── text-fields.css │ │ └── text-fields.js │ ├── home │ │ ├── alternatives.js │ │ ├── alternatives.md │ │ ├── index.js │ │ ├── index.md │ │ ├── philosophy.js │ │ └── philosophy.md │ ├── icons │ │ ├── aliases.json │ │ ├── catalog.css │ │ ├── catalog.js │ │ ├── index.css │ │ ├── index.js │ │ └── usage.js │ ├── images │ │ └── materialish-logo.svg │ ├── index.js │ ├── styles │ │ ├── cursor.css │ │ ├── editor-custom.css │ │ ├── editor.css │ │ ├── index.css │ │ ├── table.css │ │ └── typography.css │ └── vendor │ │ ├── doc-components │ │ ├── code-manager │ │ │ └── code-manager.js │ │ ├── editor │ │ │ ├── editor.css │ │ │ └── editor.js │ │ ├── index.js │ │ ├── markdown │ │ │ ├── code-highlighter.js │ │ │ └── markdown.js │ │ └── preview │ │ │ └── preview.js │ │ └── react-over │ │ ├── compute-position │ │ ├── clamp.js │ │ ├── compute-pixel-coordinates.js │ │ ├── coordinates-map.js │ │ ├── dimensions-overlap.js │ │ ├── get-default-origin-from-rotated-coordinates.js │ │ ├── get-first-resolution-axis-from-rotated-coordinates.js │ │ ├── get-go-higher-from-rotated-coordinates.js │ │ ├── index.js │ │ ├── rotation.js │ │ └── skip-boundary.js │ │ ├── get-styles.js │ │ ├── identification.js │ │ ├── index.js │ │ ├── is-valid-trigger-element.js │ │ ├── over-wrapper.js │ │ ├── overlay.js │ │ ├── simple-shallow-equals.js │ │ ├── validate-over-config.js │ │ └── warning.js └── static.config.js ├── package.json ├── src ├── action-chip │ ├── action-chip.js │ └── chip.css ├── avatar │ ├── avatar.css │ └── avatar.js ├── button │ ├── button.css │ └── button.js ├── checkbox │ ├── checkbox.css │ └── checkbox.js ├── choice-chip │ └── choice-chip.js ├── dialog │ ├── dialog.css │ └── dialog.js ├── elevation │ ├── elevation.css │ └── elevation.js ├── expandable │ ├── expandable.css │ └── expandable.js ├── expansion-panel │ ├── expansion-panel.css │ └── expansion-panel.js ├── field │ ├── field.css │ └── field.js ├── filter-chip │ └── filter-chip.js ├── icon-button │ ├── icon-button.css │ └── icon-button.js ├── index.js ├── input-chip │ └── input-chip.js ├── input │ ├── input.css │ └── input.js ├── loading-dots │ ├── loading-dots.css │ └── loading-dots.js ├── menu │ ├── menu.css │ └── menu.js ├── navigation │ ├── navigation.css │ └── navigation.js ├── progress-bar │ ├── progress-bar.css │ └── progress-bar.js ├── radio │ ├── radio.css │ └── radio.js ├── ripple │ ├── ripple.css │ └── ripple.js ├── snackbar │ ├── snackbar.css │ └── snackbar.js ├── spinner │ ├── spinner.css │ └── spinner.js ├── switch │ ├── switch.css │ └── switch.js ├── table │ ├── table.css │ └── table.js ├── text-area │ └── text-area.js └── utils │ └── warning.js └── stories ├── avatar.stories.js ├── button.stories.js ├── checkbox.stories.js ├── chips.stories.js ├── dialog.stories.js ├── elevation.stories.js ├── expansion-panel.stories.js ├── field.stories.js ├── icon-button.stories.js ├── input.stories.js ├── loading-dots.stories.js ├── menu.stories.js ├── navigation.stories.js ├── progress-bar.stories.js ├── radio.stories.js ├── snackbar.stories.js ├── spinner.stories.js ├── switch.stories.js ├── table.stories.js └── text-area.stories.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "transform-react-jsx", 4 | "transform-class-properties", 5 | "transform-object-rest-spread", 6 | "transform-es2015-destructuring" 7 | ], 8 | "env": { 9 | "build": { 10 | "presets": [ 11 | ["env", { 12 | "modules": false 13 | }], "stage-3", "react" 14 | ], 15 | "plugins": [ 16 | "external-helpers", 17 | "transform-class-properties", 18 | "transform-object-rest-spread", ["transform-es2015-classes", { 19 | "loose": true 20 | }] 21 | ] 22 | }, 23 | "buildProd": { 24 | "presets": [ 25 | ["env", { 26 | "modules": false 27 | }], "stage-3", "react" 28 | ], 29 | "plugins": [ 30 | "external-helpers", 31 | "transform-class-properties", 32 | "transform-object-rest-spread", ["transform-es2015-classes", { 33 | "loose": true 34 | }] 35 | ] 36 | }, 37 | "es": { 38 | "presets": [ 39 | ["env", { 40 | "modules": false 41 | }], "stage-3", "react" 42 | ], 43 | "plugins": ["transform-class-properties", "transform-object-rest-spread"] 44 | }, 45 | "commonjs": { 46 | "plugins": [ 47 | ["transform-es2015-modules-commonjs", { 48 | "loose": true 49 | }], 50 | "transform-class-properties", 51 | "transform-object-rest-spread", ["transform-es2015-classes", { 52 | "loose": true 53 | }] 54 | ], 55 | "presets": ["stage-3", "react"] 56 | }, 57 | "test": { 58 | "presets": ["env", "stage-3", "react"], 59 | "plugins": ["transform-class-properties"] 60 | } 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig is awesome: http://EditorConfig.org 2 | 3 | root = true; 4 | 5 | [*] 6 | # Ensure there's no lingering whitespace 7 | trim_trailing_whitespace = true 8 | # Ensure a newline at the end of each file 9 | insert_final_newline = true 10 | 11 | [*.js] 12 | # Unix-style newlines 13 | end_of_line = lf 14 | charset = utf-8 15 | indent_style = space 16 | indent_size = 2 17 | 18 | [*.md] 19 | trim_trailing_whitespace = false 20 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "extends": "eslint:recommended", 4 | "parserOptions": { 5 | "ecmaVersion": 8, 6 | "sourceType": "module", 7 | "ecmaFeatures": { 8 | "experimentalObjectRestSpread": true 9 | } 10 | }, 11 | "rules": { 12 | "no-unused-vars": ["error", {"ignoreRestSiblings": true}], 13 | "no-use-before-define": "error", 14 | "react/jsx-uses-react": "error", 15 | "react/jsx-uses-vars": "error" 16 | }, 17 | "env": { 18 | "browser": true, 19 | "node": true 20 | }, 21 | "globals": { 22 | "Promise": true 23 | }, 24 | "plugins": ["react"] 25 | } 26 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | npm-debug.log 3 | /*.tgz 4 | .DS_Store 5 | package-lock.json 6 | package-lock.json.* 7 | dist 8 | es 9 | lib 10 | src/icons/*.js 11 | /*.js 12 | /*.css 13 | 14 | lib/core/metadata.js 15 | lib/core/MetadataBlog.js 16 | 17 | website/translated_docs 18 | website/build/ 19 | website/yarn.lock 20 | website/node_modules 21 | website/i18n/* 22 | !website/i18n/en.json 23 | /icons/*.js 24 | /material-icons-repo 25 | /icons 26 | /icons-src 27 | /icons-index-src 28 | /icons-data.json 29 | /transpiled-icons -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | src 2 | docs 3 | .storybook 4 | .vscode 5 | build 6 | stories 7 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | package-lock=false 2 | save-exact=true -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | package.json 2 | docs/examples/**/*.js -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "jsxBracketSameLine": true, 4 | "trailingComma": "es5" 5 | } 6 | -------------------------------------------------------------------------------- /.storybook/addons.js: -------------------------------------------------------------------------------- 1 | import '@storybook/addon-actions/register'; 2 | import '@storybook/addon-links/register'; 3 | import '@storybook/addon-knobs/register'; 4 | import '@storybook/addon-options/register'; 5 | import '@storybook/addon-notes/register'; 6 | -------------------------------------------------------------------------------- /.storybook/config.js: -------------------------------------------------------------------------------- 1 | import { configure } from '@storybook/react'; 2 | 3 | const req = require.context('../stories', true, /\.stories\.js$/); 4 | 5 | function loadStories() { 6 | req.keys().forEach(filename => req(filename)); 7 | } 8 | 9 | configure(loadStories, module); 10 | -------------------------------------------------------------------------------- /.storybook/preview-head.html: -------------------------------------------------------------------------------- 1 | 2 | 19 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "8" 4 | sudo: false 5 | notifications: 6 | email: false 7 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | > :wave: Hey there! Thanks for your interest in helping out. If you happen to 4 | > run into any issues following this guide, please 5 | > [open an issue](https://github.com/jamesplease/materialish/issues/new?title=Contributing+help), 6 | > and we'll do our best to help out. 7 | 8 | To begin contributing, you'll need to 9 | 10 | 1. Fork the Materialish repository on Github. 11 | 2. Clone your fork to your machine `git clone git@github.com:/materialish.git`. 12 | 3. Navigate into project directory `cd materialish/`. 13 | 4. Install the dependencies `npm install`. 14 | 5. Create a branch `git checkout -b feature/new-contribute`. 15 | 6. Make your Magic, then push to GitHub `git push --set-upstream origin feature/new-contribute`. 16 | 7. Open GitHub and submit your Pull Request. 17 | 18 | ### Contributing to the Code 19 | 20 | The source files can be found in `./src`. 21 | 22 | Examples can be found in `./stories`. These examples are part of a [storybook](https://storybook.js.org/). 23 | To run the storybook, execute the command: 24 | 25 | ``` 26 | npm run storybook 27 | ``` 28 | 29 | As you make changes to the source code, the storybook will update automatically. 30 | 31 | ### Contributing to the Docs 32 | 33 | The documentation can be found in `./docs`. There is an additional installation step to update the docs. 34 | 35 | 1. Navigate into the docs folder `cd docs/`. 36 | 2. Install the dependencies that are specific to the docs `npm install` 37 | 3. Run the site locally `npm start` 38 | 39 | The terminal will let you know the URL of your locally-running site. 40 | 41 | > Heads up: the website is a bit complex from a developer's perspective right now. We prioritized getting it working over making it the simplest it could possibly be. If you're trying to make a change, but are unable to, 42 | > please [reach out](https://github.com/jamesplease/materialish/issues/new?title=Contributing+help) and we'll do our best to help you get things working. 43 | 44 | ### One More Thing... 45 | 46 | Thanks again! 47 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Javier Porrero & James Smith 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Materialish 2 | 3 | [![Travis build status](http://img.shields.io/travis/jamesplease/materialish.svg?style=flat)](https://travis-ci.org/jamesplease/materialish) 4 | [![npm version](https://img.shields.io/npm/v/materialish.svg)](https://www.npmjs.com/package/materialish) 5 | [![gzip size](http://img.badgesize.io/https://unpkg.com/materialish/dist/materialish.min.js?compression=gzip)](https://unpkg.com/materialish/dist/materialish.min.js) 6 | 7 | React components that loosely follow Material Design. 8 | 9 | ### Installation 10 | 11 | Install using [npm](https://www.npmjs.com): 12 | 13 | ``` 14 | npm install materialish 15 | ``` 16 | 17 | or [yarn](https://yarnpkg.com/): 18 | 19 | ``` 20 | yarn add materialish 21 | ``` 22 | 23 | ### Documentation 24 | 25 | View the documentation at **[materialish.js.org ⇗](https://materialish.js.org)**. 26 | 27 | ### Contributing 28 | 29 | Thanks for your interest in helping out! Check out the 30 | [Contributing Guide](./CONTRIBUTING.md), which covers everything you'll need to 31 | get up and running. 32 | -------------------------------------------------------------------------------- /ROADMAP.md: -------------------------------------------------------------------------------- 1 | # Roadmap 2 | 3 | These are future improvements we plan for Materialish. 4 | 5 | - **Improved accessibility**. Using ARIA attributes and following a specification, such as WCAG AA, to ensure that this library 6 | is accessible. 7 | 8 | - **Interaction examples**. Now that we are nearing completeness for the "base" components, it is time for us to focus 9 | our attention on interaction components. For the functionality that we are looking for, many of these require the 10 | completion of the React Over library, which we are actively developing. 11 | 12 | - **More guides with usage examples**. We plan to provide code samples and written guides to demonstrate common patterns 13 | built using Materialish. 14 | 15 | - **Improved icons**. Material provides different variations of icons, such as rounded or outline. We plan to enhance 16 | the icons that we currently output to support these variations via a prop. 17 | 18 | - **Upgraded documentation**. Right now, the docs are in an MVP state. We're planning huge improvements to make them 19 | more useful, such as multiple code examples per component, and more ways to interact with components before you install 20 | Materialish in your project. 21 | -------------------------------------------------------------------------------- /build/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "rules": { 3 | "no-console": "off" 4 | } 5 | } -------------------------------------------------------------------------------- /build/README.md: -------------------------------------------------------------------------------- 1 | # Build Scripts 2 | 3 | Because of the way that Materialish is distributed, we need to place any file that ends in 4 | `.js` or `.css` somewhere other than the root directory. This is a good place. 5 | 6 | The reason for this is because we want to allow consumers to use Materialish like so: 7 | 8 | ```js 9 | import Button from 'materialish/button'; 10 | ``` 11 | 12 | This requires that `button.js` be in the root directory of the npm package, so we added 13 | `./*.js` to the package.json `files` array. 14 | -------------------------------------------------------------------------------- /build/concatenate-css-files.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const fs = require('fs'); 4 | const path = require('path'); 5 | const glob = require('glob'); 6 | const chalk = require('chalk'); 7 | const cleanCss = require('clean-css'); 8 | 9 | const COMPONENT_DIR = path.join(__dirname, '..', 'src'); 10 | const DESTINATION_DIRECTORY = path.join(__dirname, '..'); 11 | const DESTINATION_FILE = path.join(DESTINATION_DIRECTORY, 'materialish.css'); 12 | const MINIFIED_DESTINATION_FILE = path.join( 13 | DESTINATION_DIRECTORY, 14 | 'materialish.min.css' 15 | ); 16 | 17 | const cssFilesToCopy = `${COMPONENT_DIR}/*/*.css`; 18 | 19 | console.log(chalk.blue('Creating materialish.css...')); 20 | 21 | glob(cssFilesToCopy, function(err, files) { 22 | if (err) { 23 | console.log(chalk.red('There was an error when reading the source files.')); 24 | process.exit(1); 25 | } 26 | 27 | const fileText = files 28 | .map(file => fs.readFileSync(file, { encoding: 'utf-8' })) 29 | .join('\n'); 30 | 31 | fs.writeFileSync(DESTINATION_FILE, fileText, { encoding: 'utf-8' }); 32 | 33 | console.log( 34 | chalk.green('✔ The file materialish.css was successfully created!') 35 | ); 36 | 37 | console.log(chalk.blue('Minifying the CSS to create materialish.min.css...')); 38 | const minifiedFile = new cleanCss({}).minify(fileText); 39 | 40 | fs.writeFileSync(MINIFIED_DESTINATION_FILE, minifiedFile.styles, { 41 | encoding: 'utf-8', 42 | }); 43 | 44 | console.log( 45 | chalk.green( 46 | '✔ The minified file materialish.min.css was successfully created!' 47 | ) 48 | ); 49 | }); 50 | -------------------------------------------------------------------------------- /build/copy-files.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const path = require('path'); 4 | const fs = require('fs'); 5 | const chalk = require('chalk'); 6 | 7 | module.exports = function(files, destination, onStartMsg, onEndMsg) { 8 | const startMsg = onStartMsg || `Copying ${files.length} files...`; 9 | const endMsg = onEndMsg || '✔ The files were successfully copied!'; 10 | console.log(chalk.blue(startMsg)); 11 | 12 | // We need to ensure that the destination directory exists. Otherwise, the 13 | // copying of the files will fail. 14 | try { 15 | fs.mkdirSync(destination); 16 | } catch (e) { 17 | // Intentionally blank. 18 | } 19 | 20 | files.forEach(filepath => { 21 | const basename = path.basename(filepath); 22 | const fullDestPath = path.join(destination, basename); 23 | 24 | fs.copyFileSync(filepath, fullDestPath); 25 | }); 26 | 27 | console.log(chalk.green(endMsg)); 28 | }; 29 | -------------------------------------------------------------------------------- /build/copy-source-files.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const path = require('path'); 4 | const glob = require('glob'); 5 | const chalk = require('chalk'); 6 | const copyFiles = require('./copy-files'); 7 | 8 | const COMPONENT_DIR = path.join(__dirname, '..', 'src'); 9 | const DESTINATION_DIRECTORY = path.join(__dirname, '..'); 10 | 11 | const cssFilesToCopy = `${COMPONENT_DIR}/*/*.css`; 12 | 13 | glob(cssFilesToCopy, function(err, files) { 14 | if (err) { 15 | console.log(chalk.red('There was an error when reading the source files.')); 16 | process.exit(1); 17 | } 18 | 19 | copyFiles(files, DESTINATION_DIRECTORY); 20 | }); 21 | -------------------------------------------------------------------------------- /build/copy-transpiled-icons.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const path = require('path'); 4 | const glob = require('glob'); 5 | const chalk = require('chalk'); 6 | const copyFiles = require('./copy-files'); 7 | 8 | const TRANSPILED_ICONS_DIR = path.join(__dirname, '..', 'transpiled-icons'); 9 | const DESTINATION_DIRECTORY = path.join(__dirname, '..'); 10 | 11 | const iconFilesToCopy = `${TRANSPILED_ICONS_DIR}/src/icons/*.js`; 12 | 13 | glob(iconFilesToCopy, function(err, files) { 14 | if (err) { 15 | console.log(chalk.red('There was an error when reading the source files.')); 16 | process.exit(1); 17 | } 18 | 19 | copyFiles(files, DESTINATION_DIRECTORY); 20 | }); 21 | -------------------------------------------------------------------------------- /build/copy-www-files.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const path = require('path'); 4 | const fs = require('fs'); 5 | const chalk = require('chalk'); 6 | const glob = require('glob'); 7 | const copyFiles = require('./copy-files'); 8 | 9 | const NODE_MODULES = path.join(__dirname, '..', 'docs', 'node_modules'); 10 | const DESTINATION_DIRECTORY = path.join( 11 | __dirname, 12 | '..', 13 | 'docs', 14 | 'src', 15 | 'styles', 16 | 'npm-package-styles' 17 | ); 18 | const MATERIALISH_GLOB = 'materialish/materialish.css'; 19 | 20 | const filesToCopy = [ 21 | 'highlight.js/styles/github-gist.css', 22 | 'codemirror/theme/oceanic-next.css', 23 | ]; 24 | 25 | const materialishCss = glob.sync(`${NODE_MODULES}/${MATERIALISH_GLOB}`); 26 | const fullPathsToCopy = filesToCopy.map(file => path.join(NODE_MODULES, file)); 27 | const allFiles = [...fullPathsToCopy, ...materialishCss]; 28 | 29 | console.log( 30 | chalk.blue( 31 | '\nCopying stylesheets from node_modules into the docs src folder.' 32 | ) 33 | ); 34 | 35 | fs.access(NODE_MODULES, err => { 36 | if (err && err.code === 'ENOENT') { 37 | console.error( 38 | chalk.red( 39 | 'Please install the node modules within the /docs directory by running `npm install`' 40 | ) 41 | ); 42 | process.exit(1); 43 | } 44 | 45 | copyFiles( 46 | allFiles, 47 | DESTINATION_DIRECTORY, 48 | `Copying ${allFiles.length} files to the website source directory...`, 49 | '✔ The files from node_modules have been copied to the website source directory. You are ready to develop the site!' 50 | ); 51 | }); 52 | -------------------------------------------------------------------------------- /build/rollup.config.js: -------------------------------------------------------------------------------- 1 | import nodeResolve from 'rollup-plugin-node-resolve'; 2 | import commonjs from 'rollup-plugin-commonjs'; 3 | import babel from 'rollup-plugin-babel'; 4 | import uglify from 'rollup-plugin-uglify'; 5 | import replace from 'rollup-plugin-replace'; 6 | 7 | var env = process.env.NODE_ENV; 8 | var config = { 9 | output: { 10 | name: 'Materialish', 11 | globals: { 12 | react: 'React', 13 | }, 14 | format: 'umd', 15 | }, 16 | external: ['react'], 17 | context: 'this', 18 | plugins: [ 19 | nodeResolve({ 20 | jsnext: true, 21 | }), 22 | commonjs({ 23 | include: 'node_modules/**', 24 | }), 25 | babel({ 26 | exclude: 'node_modules/**', 27 | }), 28 | replace({ 29 | 'process.env.NODE_ENV': JSON.stringify(env), 30 | }), 31 | ], 32 | }; 33 | 34 | if (env === 'production') { 35 | config.plugins.push( 36 | uglify({ 37 | compress: { 38 | pure_getters: true, 39 | unsafe: true, 40 | unsafe_comps: true, 41 | warnings: false, 42 | }, 43 | }) 44 | ); 45 | } 46 | 47 | export default config; 48 | -------------------------------------------------------------------------------- /build/svg-attribute-list.js: -------------------------------------------------------------------------------- 1 | module.exports = [ 2 | 'accent-height', 3 | 'alignment-baseline', 4 | 'arabic-form', 5 | 'baseline-shift', 6 | 'cap-height', 7 | 'clip-path', 8 | 'clip-rule', 9 | 'color-interpolation', 10 | 'color-interpolation-filters', 11 | 'color-profile', 12 | 'color-rendering', 13 | 'dominant-baseline', 14 | 'enable-background', 15 | 'fill-opacity', 16 | 'fill-rule', 17 | 'flood-color', 18 | 'flood-opacity', 19 | 'font-family', 20 | 'font-size', 21 | 'font-size-adjust', 22 | 'font-stretch', 23 | 'font-style', 24 | 'font-variant', 25 | 'font-weight', 26 | 'glyph-name', 27 | 'glyph-orientation-horizontal', 28 | 'glyph-orientation-vertical', 29 | 'horiz-adv-x', 30 | 'horiz-origin-x', 31 | 'image-rendering', 32 | 'letter-spacing', 33 | 'lighting-color', 34 | 'marker-end', 35 | 'marker-mid', 36 | 'marker-start', 37 | 'overline-position', 38 | 'overline-thickness', 39 | 'panose-1', 40 | 'paint-order', 41 | 'pointer-events', 42 | 'rendering-intent', 43 | 'shape-rendering', 44 | 'stop-color', 45 | 'stop-opacity', 46 | 'strikethrough-position', 47 | 'strikethrough-thickness', 48 | 'stroke-dasharray', 49 | 'stroke-dashoffset', 50 | 'stroke-linecap', 51 | 'stroke-linejoin', 52 | 'stroke-miterlimit', 53 | 'stroke-opacity', 54 | 'stroke-width', 55 | 'text-anchor', 56 | 'text-decoration', 57 | 'text-rendering', 58 | 'underline-position', 59 | 'underline-thickness', 60 | 'unicode-bidi', 61 | 'unicode-range', 62 | 'units-per-em', 63 | 'v-alphabetic', 64 | 'v-hanging', 65 | 'v-ideographic', 66 | 'v-mathematical', 67 | 'vector-effect', 68 | 'vert-adv-y', 69 | 'vert-origin-x', 70 | 'vert-origin-y', 71 | 'word-spacing', 72 | 'writing-mode', 73 | 'x-height', 74 | ]; 75 | -------------------------------------------------------------------------------- /docs/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "react-static/.babelrc" 3 | } 4 | -------------------------------------------------------------------------------- /docs/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | } 3 | -------------------------------------------------------------------------------- /docs/.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | /node_modules 3 | 4 | # testing 5 | /coverage 6 | 7 | # production 8 | /dist 9 | /tmp 10 | /tmp 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | npm-package-styles 23 | -------------------------------------------------------------------------------- /docs/.npmrc: -------------------------------------------------------------------------------- 1 | package-lock=false 2 | save-exact=true -------------------------------------------------------------------------------- /docs/CNAME: -------------------------------------------------------------------------------- 1 | materialish.js.org -------------------------------------------------------------------------------- /docs/algolia.js: -------------------------------------------------------------------------------- 1 | import algoliasearch from 'algoliasearch'; 2 | 3 | const client = algoliasearch('applicationID', 'adminApiKey'); 4 | 5 | export const addSearchObjects = (indexName, data) => { 6 | const index = client.initIndex(indexName); 7 | 8 | index.addObjects(data, err => { 9 | if (err) { 10 | console.error(err); 11 | } 12 | }); 13 | }; 14 | -------------------------------------------------------------------------------- /docs/examples/action-chip.js: -------------------------------------------------------------------------------- 1 | function onClick() { 2 | console.log('Clicked'); 3 | } 4 | 5 | class ActionChipExample extends Component { 6 | render() { 7 | return ( 8 | 9 | 10 | Perform Action 11 | 12 | {' '} 13 | }> 14 | Delete Item 15 | 16 | 17 | ); 18 | } 19 | } 20 | 21 | return ; 22 | -------------------------------------------------------------------------------- /docs/examples/avatar.js: -------------------------------------------------------------------------------- 1 | class AvatarExample extends Component { 2 | render() { 3 | return ( 4 | 5 | 6 | 7 | 8 | ); 9 | } 10 | } 11 | 12 | return ; 13 | -------------------------------------------------------------------------------- /docs/examples/button.js: -------------------------------------------------------------------------------- 1 | class ButtonsExample extends Component { 2 | render () { 3 | return ( 4 | 7 | ); 8 | } 9 | } 10 | 11 | return ; 12 | -------------------------------------------------------------------------------- /docs/examples/checkbox.js: -------------------------------------------------------------------------------- 1 | class CheckboxExample extends Component { 2 | render () { 3 | return ( 4 | 5 | ); 6 | } 7 | } 8 | 9 | return ; -------------------------------------------------------------------------------- /docs/examples/choice-chip.js: -------------------------------------------------------------------------------- 1 | class ChoiceChipExample extends Component { 2 | render() { 3 | return ( 4 | 5 | }> 6 | Laptop 7 | 8 | {' '} 9 | }> 10 | Phone 11 | 12 | {' '} 13 | 14 | Other 15 | 16 | 17 | ); 18 | } 19 | } 20 | 21 | return ; 22 | -------------------------------------------------------------------------------- /docs/examples/dialog.js: -------------------------------------------------------------------------------- 1 | class DialogExample extends Component { 2 | render() { 3 | return ( 4 | 5 | Dialog Title 6 | 7 |

8 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam 9 | consequatur enim voluptates nobis perferendis voluptatibus alias 10 | modi voluptate dolorum ipsa amet. 11 |

12 | 13 | 14 | 15 | 16 | 17 | 18 | ); 19 | } 20 | } 21 | 22 | return ; 23 | -------------------------------------------------------------------------------- /docs/examples/elevation.js: -------------------------------------------------------------------------------- 1 | class ElevationExample extends Component { 2 | render() { 3 | return ( 4 | 5 | This is an elevation with some content 6 | 7 | ); 8 | } 9 | } 10 | 11 | return ; 12 | -------------------------------------------------------------------------------- /docs/examples/expansion-panel.js: -------------------------------------------------------------------------------- 1 | class ExpansionPanelExample extends Component { 2 | render() { 3 | // Pass a `panelId` to toggle whether it is open or closed. 4 | const togglePanel = panelId => { 5 | this.setState(prevState => { 6 | return { 7 | [panelId]: !prevState[panelId], 8 | }; 9 | }); 10 | }; 11 | 12 | return ( 13 |
14 | togglePanel('one')}> 17 | Expansion Panel One 18 | 19 |

20 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. 21 | Pellentesque fermentum sed magna quis interdum. Suspendisse vitae 22 | lobortis odio, a accumsan purus. Vivamus suscipit magna et nisl 23 | mattis vestibulum. Donec interdum leo elementum eros fringilla, ut 24 | varius velit volutpat. In porttitor tempus purus id lacinia. 25 | Phasellus vitae blandit tellus, fermentum dictum libero. 26 |

27 | 28 | 29 | togglePanel('two')}> 32 | Expansion Panel Two 33 | 34 |

35 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. 36 | Pellentesque fermentum sed magna quis interdum. Suspendisse vitae 37 | lobortis odio, a accumsan purus. Vivamus suscipit magna et nisl 38 | mattis vestibulum. Donec interdum leo elementum eros fringilla, ut 39 | varius velit volutpat. In porttitor tempus purus id lacinia. 40 | Phasellus vitae blandit tellus, fermentum dictum libero. Nullam 41 | lacus leo, convallis ut mattis non, luctus eu tellus. 42 |

43 | 44 | 45 | togglePanel('three')}> 48 | Expansion Panel Three 49 | 50 |

51 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. 52 | Pellentesque fermentum sed magna quis interdum. Suspendisse vitae 53 | lobortis odio, a accumsan purus. 54 |

55 | 56 | 57 |
58 | ); 59 | } 60 | 61 | state = { 62 | one: false, 63 | two: false, 64 | three: false, 65 | }; 66 | } 67 | 68 | return ; 69 | -------------------------------------------------------------------------------- /docs/examples/field.js: -------------------------------------------------------------------------------- 1 | class FieldExample extends Component { 2 | render() { 3 | const { value, isEmpty } = this.state; 4 | 5 | return ( 6 | 7 | Place of Residence 8 | 9 | {isEmpty && ( 10 | 11 | Place of residence is required. 12 | 13 | )} 14 | 15 | ); 16 | } 17 | 18 | state = { 19 | value: 'Paris, France', 20 | isEmpty: false, 21 | }; 22 | 23 | onChange = e => { 24 | this.setState({ 25 | value: e.target.value, 26 | isEmpty: e.target.value.length === 0, 27 | }); 28 | }; 29 | } 30 | 31 | return ; 32 | -------------------------------------------------------------------------------- /docs/examples/filter-chip.js: -------------------------------------------------------------------------------- 1 | class FilterChipExample extends Component { 2 | render() { 3 | return ( 4 | 5 | Netflix 6 | {' '} 7 | Hulu 8 | {' '} 9 | }>Cable 10 | 11 | ); 12 | } 13 | } 14 | 15 | return ; 16 | -------------------------------------------------------------------------------- /docs/examples/icon-button.js: -------------------------------------------------------------------------------- 1 | class IconButtonsExample extends Component { 2 | render() { 3 | return ( 4 | 5 | 6 | 7 | ); 8 | } 9 | } 10 | 11 | return ; 12 | -------------------------------------------------------------------------------- /docs/examples/icons.js: -------------------------------------------------------------------------------- 1 | class IconsExample extends Component { 2 | render() { 3 | return ( 4 | 5 | 6 | 7 | 8 | 9 | ); 10 | } 11 | } 12 | 13 | return ; 14 | -------------------------------------------------------------------------------- /docs/examples/input-chip.js: -------------------------------------------------------------------------------- 1 | function onClose() { 2 | console.log('The close button was clicked.'); 3 | } 4 | 5 | function onClick() { 6 | console.log('The chip was clicked.'); 7 | } 8 | 9 | class InputChipExample extends Component { 10 | render() { 11 | return ( 12 | 13 | }>San Francisco 14 | {' '} 15 | Clickable 16 | {' '} 17 | Closeable 18 | 19 | ); 20 | } 21 | } 22 | 23 | return ; 24 | -------------------------------------------------------------------------------- /docs/examples/input.js: -------------------------------------------------------------------------------- 1 | class InputExample extends Component { 2 | render() { 3 | return ( 4 | 5 | this.setState({ value: e.target.value })} 8 | /> 9 |
10 |
11 | { 15 | this.setState({ value: '' }); 16 | }} 17 | icon={} 18 | onChange={e => this.setState({ value: e.target.value })} 19 | /> 20 | 21 | ); 22 | } 23 | 24 | state = { 25 | value: 'Paris, France', 26 | }; 27 | } 28 | 29 | return ; 30 | -------------------------------------------------------------------------------- /docs/examples/loading-dots.js: -------------------------------------------------------------------------------- 1 | class LoadingDotsExample extends Component { 2 | render() { 3 | return ; 4 | } 5 | } 6 | 7 | return ; 8 | -------------------------------------------------------------------------------- /docs/examples/menu.js: -------------------------------------------------------------------------------- 1 | class MenuExample extends Component { 2 | render() { 3 | return ( 4 | 5 | Option one 6 | Option two 7 | Option three 8 | 9 | Option four 10 | Option five 11 | Option six 12 | 13 | ); 14 | } 15 | } 16 | 17 | return ; 18 | -------------------------------------------------------------------------------- /docs/examples/navigation.js: -------------------------------------------------------------------------------- 1 | class NavigationExample extends Component { 2 | render() { 3 | return ( 4 | 5 | 6 | Home 7 | New Releases 8 | Profile 9 | 10 |
11 | 12 | Home 13 | New Releases 14 | Profile 15 | 16 |
17 | 18 | 19 | Alarm 20 | 21 | 22 | Bugs 23 | 24 | 25 | Members 26 | 27 | 28 | 29 | ); 30 | } 31 | } 32 | 33 | return ; 34 | -------------------------------------------------------------------------------- /docs/examples/progress-bar.js: -------------------------------------------------------------------------------- 1 | class ProgressBarExample extends Component { 2 | render() { 3 | return ( 4 | 5 | 6 |
7 | 8 | 9 | ); 10 | } 11 | } 12 | 13 | return ; 14 | -------------------------------------------------------------------------------- /docs/examples/radio.js: -------------------------------------------------------------------------------- 1 | class RadioExample extends Component { 2 | render() { 3 | return ; 4 | } 5 | } 6 | 7 | return ; 8 | -------------------------------------------------------------------------------- /docs/examples/snackbar.js: -------------------------------------------------------------------------------- 1 | class SnackBarExample extends Component { 2 | render() { 3 | return ( 4 | 5 | There was an error. 6 | 9 | 10 | ); 11 | } 12 | } 13 | 14 | return ; 15 | -------------------------------------------------------------------------------- /docs/examples/spinner.js: -------------------------------------------------------------------------------- 1 | class SpinnerExample extends Component { 2 | render() { 3 | return ; 4 | } 5 | } 6 | 7 | return ; 8 | -------------------------------------------------------------------------------- /docs/examples/switch.js: -------------------------------------------------------------------------------- 1 | class SwitchExample extends Component { 2 | render () { 3 | return ( 4 | 5 | ); 6 | } 7 | } 8 | 9 | return ; -------------------------------------------------------------------------------- /docs/examples/table.js: -------------------------------------------------------------------------------- 1 | class TableExample extends Component { 2 | render() { 3 | return ( 4 | 5 | 6 | 7 | Name 8 | Active 9 | Join Date 10 | Status 11 | Location 12 | 13 | 14 | 15 | 16 | James S. 17 | Yes 18 | 6/12/2013 19 | Member 20 | Maryland 21 | 22 | 23 | Javier P. 24 | No 25 | 5/12/2018 26 | Contributor 27 | California 28 | 29 | 30 | Terri S. 31 | Yes 32 | 1/12/2018 33 | Contributor 34 | Texas 35 | 36 | 37 | Deepthi K. 38 | Yes 39 | 6/12/2018 40 | Member 41 | Spain 42 | 43 | 44 |
45 | ); 46 | } 47 | } 48 | 49 | return ; 50 | -------------------------------------------------------------------------------- /docs/examples/text-area.js: -------------------------------------------------------------------------------- 1 | class TextAreaExample extends Component { 2 | render() { 3 | return ( 4 |