A set of React components implementing Google's Material Design specification with the power of CSS Modules

Overview

npm version Build Status NPM Status Donate OpenCollective OpenCollective

React Toolbox is a set of React components that implement Google's Material Design specification. It's powered by CSS Modules and harmoniously integrates with your webpack workflow, although you can use any other module bundler. You can take a tour through our documentation website and try the components live!

Note: ⚠️ This source code refers to the future version. To check the source for 1.x go to master branch. There is a migration guide so you can start working with 2.0-beta.x now!

Installation

React Toolbox can be installed as an npm package:

$ npm install --save react-toolbox

Prerequisites

React Toolbox uses CSS Modules by default to import stylesheets written using PostCSS & postcss-preset-env features. In case you want to import the components already bundled with CSS, your module bundler should be able to require these PostCSS modules.

Although we recommend webpack, you are free to use whatever module bundler you want as long as it can compile and require PostCSS files located in your node_modules. If you are experiencing require errors, make sure your configuration satisfies this requirement.

Of course this is a set of React components so you should be familiar with React. If want to customize your components via themes, you may want to take a look to react-css-themr which is used by React Toolbox to make components easily themeable.

Usage in Create React App Projects

Create React App does not allow to change the default configuration, so you need an additional build step to configure react-toolbox in its project.

Follow these instructions to add react-toolbox to a project created with Create React App.

Usage in Webpack Projects (Not Create React App)

npm install postcss-loader --save-dev
npm install postcss postcss-preset-env postcss-calc --save

Configure webpack 1.x loader for .css files to use postcss:

      {
        test: /\.css$/,
        loaders: [
          'style-loader',
          'css-loader?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss?sourceMap&sourceComments',
        ],
      },

Declare plugins to be used by postcss (as part of webpack's config object):

  // webpack.config.js
  postcss: () => {
    return [
      /* eslint-disable global-require */
      require('postcss-preset-env')({
        stage: 0, // required to get all features that were from cssnext without enabling them one by one
        features: {
          'custom-properties': {
            preserve: false, // required to output values instead of variables
          },
          'color-mod-function': true, // required to use color-mod()
        }
      }),
      require('postcss-calc'), // required as postcss-preset-env doesn't have a reduce calc() funtion that cssnext did
      /* eslint-enable global-require */
    ];
  },

Configure webpack 2.x or 3.x loader for .css files to use postcss:

  // webpack.config.js
  {
    test: /\.css$/,
    use: [
      "style-loader",
      {
        loader: "css-loader",
        options: {
          modules: true, // default is false
          sourceMap: true,
          importLoaders: 1,
          localIdentName: "[name]--[local]--[hash:base64:8]"
        }
      },
      "postcss-loader"
    ]
  }

Basic usage

In this minimal example, we import a Button with styles already bundled:

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'react-toolbox/lib/button';

ReactDOM.render(
  <Button label="Hello World!" />,
  document.getElementById('app')
);

Note: if you use it with Create React App, you need to make this additional change:

- import {Button} from 'react-toolbox/lib/button';
+ import Button from 'react-toolbox/lib/button/Button';

Take into account that any required style will be included in the final CSS so your final CSS would include Button styles in this case. It's more efficient to import components this way (from 'react-toolbox/lib/button') (or with raw imports) because if you require from the project root (i.e. from 'react-toolbox'), every stylesheet of React Toolbox will be included, even if you don't use it.

Importing components

First let's take a look on how the components are structured in the project. The components folder contains a folder for each component or set of related components. For example, the app_bar:

 |- /app_bar
 |---- AppBar.js
 |---- config.css
 |---- index.js
 |---- readme.md
 |---- theme.css

As you can see in the previous block, each folder includes: a Javascript file for each component/subcomponent; a README with documentation, an index Javascript file that imports and injects styles and dependencies for you, a default theme PostCSS/preset-env stylesheet and a config.css with configuration variables (CSS Custom Properties). Depending on whether you want the styles to be directly bundled or not, you can import components in two different ways.

Bundled component

If you import from the index file, the imported component comes with all dependencies and themes already required and injected for you. This means that the CSS for each dependency will be bundled in your final CSS automatically and the component markup includes the classnames to be styled. For example:

import { AppBar } from 'react-toolbox/lib/app_bar';

Raw component

If you import from the component definition, the imported component is bundled with its dependencies, but it does not include any styles. This means no CSS will be bundled, and the component markup will not include any classname. It's your responsibility to provide a theme to the component to be properly styled. You can do so via properties or context. For example:

import { AppBar } from 'react-toolbox/lib/app_bar/AppBar.js';

Customizing components

Every component accepts a theme property intended to provide a CSS Module import object that will be used by the component to assign local classnames to its DOM nodes. Therefore, each one implements a documented classname API. So if you want to customize a component, you just need to provide a theme object with the appropriate classname mapping.

If the component already has a theme injected, the properties you pass will be merged with the injected theme. In this way, you can add classnames to the nodes of a specific component and use them to add or to override styles. For example, if you want to customize the AppBar to be purple:

import React from 'react';
import { AppBar } from 'react-toolbox/lib/app_bar';
import theme from './PurpleAppBar.css';

const PurpleAppBar = (props) => (
  <AppBar {...props} theme={theme} />
);

export default PurpleAppBar;
.appBar {
  background-color: #800080;
}

In this case we are adding styles to a specific instance of an AppBar component that already has its default styles injected. It works because the component background by default has the same priority as the one we added. There will be cases where the original rule is more restrictive. For those cases you would need to boost priority using the same restrictions as in the original stylesheet. Feel free to take a look into the default theme.css files or just check the selectors you want to override in DevTools.

If the component has no styles injected, you should provide a theme object implementing the full API. You are free to require the CSS Module you want but take into account that every classname is there for a reason. You can either provide a theme via prop or via context as described in the next section.

Customizing all instances of a component type

Install react-css-themr with npm install react-css-themr --save

Create a CSS Module theme style file for each component type, for example for Button:

# /css/button.css

.button {
  text-transform: uppercase;
}

Create a theme file that imports each component's custom theme style under the special theme key listed in that widgets's documentation, i.e.:

# theme.js

import RTButton from './css/button.css';
import RTDatePicker from './css/datepicker.css';

export default {
  RTButton, RTDatePicker,
};

Wrap your component tree with ThemeProvider at the desired level in your component hierarchy. You can maintain different themes, each importing differently styled css files (i.e. import RTButton from './css/adminAreaButton.css') and can provide each one at different points in the tree.

import React from 'react';
import { ThemeProvider } from 'react-css-themr';
import theme from './theme';

class App extends React.Component {
  render() {
    return (
      <ThemeProvider theme={theme}>
        <div>
          ...
        </div>
      </ThemeProvider>
    );
  }
}
export default App;

Theming (configuration variables)

You can apply theming in multiple ways. First of all, you have to understand that React Toolbox stylesheets are written using PostCSS with postcss-preset-env features and use CSS Custom Properties from the config files we saw earlier. In addition, there are some global CSS Properties imported by each component: colors and variables. You can override both the global and component-specific variables to get the results you want using one of the methods below.

Settings configuration variables in JavaScript

You can override both the global and component-specific CSS Custom Properties at build-time by supplying an object with these variable names and your desired values to the PostCSS custom-properties plugin. i.e. if using postcss-preset-env in webpack:

// This can also be stored in a separate file:
const reactToolboxVariables = { 
  'color-text': '#444548',
  /* Note that you can use global colors and variables */
  'color-primary': 'var(--palette-blue-500)',
  'button-height': '30px',
};

// webpack's config object: (webpack.config.js)
const config = {
...
    postcss: () => {
    return [
      /* eslint-disable global-require */
      require('postcss-preset-env')({
        stage: 0, // required to get all features that were from cssnext without enabling them one by one
        features: {
          'custom-properties': {
            preserve: false, // required to output values instead of variables
            importFrom: reactToolboxVariables, // see postcss-preset-env for config options
          },
          'color-mod-function': true, // required to use color-mod()
        }
      }),
      require('postcss-calc'), // required as postcss-preset-env doesn't have a reduce calc() funtion that cssnext did
      /* optional - see next section */
      require('postcss-modules-values'),
      /* eslint-enable global-require */
    ];
  },
}

Settings configuration variables using CSS Module Values

Instead of using a JavaScript object for variables, you can use CSS Module Values (npm install postcss-modules-values --save) and the modules-values-extract utility to declare these variables in component-specific theme .css files, where you would typically store additional style overrides.

CSS Module Values also offer the advantage that importing a css file with @value declarations makes these values properties of the imported style object, i.e.:

# variables.css

@value buttonPrimaryBackgroundColor: #9c3990;
import styleVariables from './css/variables.css';

styleVariables.buttonPrimaryBackgroundColor

In this demo project, modules-values-extract utility is used to extract all @values with dashes in their name from all css files in the /css folder and to feed them to customProperties in webpack. In the demo project, variables that are not specific to a particular component are in variables.css and button-specific variables are in button.css. Note that button.css also imports certain values from variables.css just to demonstrate this capability (the import can also be used in a @value declaration) and it uses CSS overrides instead of color variables that exist in the React-Toolbox Button component to show an alternative method if the variables are not sufficient.

IMPORTANT: Changes to the module values do not take effect immediately with Webpack Hot-Module-Reload - webpack / webpack-dev-server must be restarted!

Roboto Font and Material Design Icons

React Toolbox assumes that you are importing Roboto Font and Material Design Icons.

In order to import the fonts for you, we'd need to include them in the CSS which is considered a bad practice. If you are not including them in your app, go to the linked sites and follow the instructions.

Server Side Rendering

The only requirement for SSR is to be able to require ES6 and CSS Modules in the backend. To make it possible you can check projects like CSS Modules register hook or Webpack Isomorphic tools. Also, make sure you can import from node_modules.

Examples

For now we have a repository example demonstrating configuration and some basic customization. For now it's not using SSR rendering but it shouldn't be difficult to implement an example so it will come soon. Feel free to PR your example project or to add some use cases to the repository:

Another 2.x demo project is https://github.com/alexhisen/mobx-forms-demo

TypeScript

TypeScript external module definition files are included, and should not require any manual steps to utilize. They will be picked up by the TypeScript compiler when importing from the npm package.

Note that to comply with the official recommendation for npm typings, a triple-slash reference to react.d.ts is NOT included. You will need to reference react.d.ts somewhere in your project.

Authors and Contributors

The project is being initially developed and maintained by Javier Velasco and Javier Jiménez and the contribution scene is just getting warm. We want to create reference components so any contribution is very welcome.

To work in the project you'd need a node version supporting ES6 syntax. Although the project is built using Babel we use some ES6 features in the development server. Also, the package has been tested with node 4.2.1. Consider using nvm or n to handle different node versions!

To start the documentation site locally, you'll need to install the dependencies from both the main package and the docs subproject:

$ git clone https://github.com/react-toolbox/react-toolbox.git
$ cd react-toolbox/
$ npm install
$ cd docs/
$ npm install
$ npm start

Local documentation will then be available at http://localhost:8081/.

Extensions

We don't officially support components that are not covered by Google Material Design. If you want to implement some complementary component feel free to open a PR adding your a link in this section:

on github: react-toolbox-additions and on npm: react-toolbox-additions.

Form generation and validation using React-Toolbox form widgets - mobx-schema-form

Support

Backers

Support us with a monthly donation and help us continue our activities. [Become a backer]

Sponsors

Become a sponsor and get your logo on our README on Github with a link to your site. [Become a sponsor]

License

This project is licensed under the terms of the MIT license.

Comments
  • Migrate styles to PostCSS

    Migrate styles to PostCSS

    This PR brings a complete migration of react-toolbox to post-css along with changes that are side effects of this migration. The theming philosophy behind this migration is basically the same as before. Each component has a configuration file where some variables are defined and used at time of generating styles. Those variables can be overridden to customize appearance. We are using:

    • postcss-import allows to separate CSS in multiple files so we can do stuff like importing variables from one component into another.
    • postcss-mixins allows to define and use mixins. They are not very used in react-toolbox but I've found them useful in the Layout component since some properties need to be repeated for different screen sizes.
    • postcss-next the most important one. Includes multiple plugins to define custom variables, to use calc, etc.
    • postcss-each used in the Layout component to generate a bunch of classes that define sizes of the drawer element, for example.

    With this implementation we don't need to make tricks to prepend variables SASS files to react-toolbox stylesheets. We just need a variables Javascript file defining theming variables we want to override and pass it to the custom properties plugin configuration. In case you are using sass variables from react-toolbox now, with the new version you'd need to change to postcss. Apart from that, if basically works the same way.

    Of course this is a huge change because it implies a technology change and I think it should be released under 2.0.0. The amazing news is that we can do awesome stuff with this change that I'd like to include in this PR before merging:

    • [ ] Update MD documenting the usage of react-toolbox with PostCSS.
    • [ ] Review and document the custom properties used for each component.
    • [ ] More detailed documentation with specific info for Webpack and Theming.
    • [ ] Redesign the docs.
    • [ ] Include theming live customization in the docs playground.
    • [ ] Create a live theme generator in the documentation.

    Please leave your feedback in this PR!

    opened by javivelasco 61
  • Poor support in typescript

    Poor support in typescript

    1. Bundled root index.d.ts exports not all components, for example IconButton not available.
    2. If I export something from package bundle, e.g import { AppBar } from 'react-toolbox' typescript compiler throws errors:

    ERROR in [default] /Users/ixrock/Desktop/Projects/account-ui/node_modules/react-toolbox/lib/navigation/index.d.ts:41:17 Cannot find name 'ButtonProps'.

    ERROR in [default] /Users/ixrock/Desktop/Projects/account-ui/node_modules/react-toolbox/lib/navigation/index.d.ts:45:16 Cannot find name 'LinkProps'.

    1. Missed typings for components/lib/ripple and components/lib/layout (no index.d.ts at all)
    2. Import for most of the components with only single export default class, e.g Avatar, Input, etc. works only if it imports as default, e.g import Input from 'react-toolbox/lib/input' and it's not working with curly braces, e.g import { AppBar } from .... I use WebStorm and code complete works only inside {} for import statements. Plus it would be nice to have consistency along other components with no default export, e.g import {Tab, Tabs} .... Otherwise I need to guess does some component have default export or not to proper import it.
    opened by ixrock 38
  • Autocomplete Enhancements

    Autocomplete Enhancements

    This issue is to track enhancements for autocomplete I am currently working on. This includes solving #161, #170 and #138

    I've tried using the autocomplete and found some issues.

    1. Doesn't implement the most prominent spec examples. Should focus on providing the user with the tools needed to implement common use cases.
    2. Cannot be used easily in complex applications (compatible with a small number of basic use cases).
    3. Does too much internally in a single component with little flexibility to show for it

    Goals:

    • [ ] Solve #161, #170 and #138
    • [x] Allow you to connect any type of data source or custom query
    • [x] Enable the direct use of <Input/> and <input> with full access to their component API.
    • [x] Can be easily used for everything in the spec such as the raised boxes, search bars, appbar search fields, full width searches on mobile when responsive styling is implemented.
    • [x] Support for autocomplete item templating.
    • [ ] Still have the option to use chips, but with greater control.

    This means that all input related styling/settings props can be passed to that component as described in the documentation. That way the autocomplete implementation is also more portable and focuses on providing the elements unique to autocomplete.

    Type: Enhancement 
    opened by nathanmarks 38
  • Make react-toolbox compatible with create-react-app?

    Make react-toolbox compatible with create-react-app?

    Is this a possibility for react-toolbox? There's no SASS/LESS/CSS Modules support. But I do understand there's an upcoming switch to PostCSS. Will that work with create-react-app?

    opened by sidot3291 37
  • Latest version of react gives PropTypes warning

    Latest version of react gives PropTypes warning

    With React 15.5, importing PropTypes from React is deprecated in favour of importing from the new 'prop-types' package.

    See this link: https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html

    Thus, using react-toolbox with the latest version of react gives a deprecation warning in the console.

    Will look into a PR for this.

    opened by BrockWills 36
  • How do I compile it to a single js and css file?

    How do I compile it to a single js and css file?

    I can't figure out how to compile react-toolbox to a single js and css files that is easy to add to a project. You don't seem to provide them either.

    For example, for material-components, there's npm build:

    https://github.com/material-components/material-components-web/blob/master/package.json#L6-L7

    https://github.com/material-components/material-components-web/blob/master/webpack.config.js

    opened by pupeno 29
  • JSPM

    JSPM

    Hi, right now there's only support for webpack. using your great library with jspm is very inconvenient because you need to build the library all the time instead of using it raw. Can you please add support for jspm

    Contribution Needed 
    opened by giltig 29
  • Using the toolbox without webpack

    Using the toolbox without webpack

    The install instructions on the website say: "If you want to still use CSS Modules but avoiding Babel and SASS you can require from react-toolbox/lib"

    Is this process expanded on anywhere? Importing any of the components just throws a bunch of style errors.

    Type: Enhancement 
    opened by int13h 26
  • Error at running in isomorphic application

    Error at running in isomorphic application

    Hi, I'm trying to use toolbpx in isomorphic application. But have some troubles... Here is my webpack config:

    import path from 'path';
    import webpack from 'webpack';
    import merge from 'lodash.merge';
    
    import ExtractTextPlugin from 'extract-text-webpack-plugin';
    
    const DEBUG = !process.argv.includes('release');
    const VERBOSE = process.argv.includes('verbose');
    const WATCH = global.WATCH === undefined ? false : global.WATCH;
    const AUTOPREFIXER_BROWSERS = [
      'Android 2.3',
      'Android >= 4',
      'Chrome >= 35',
      'Firefox >= 31',
      'Explorer >= 9',
      'iOS >= 7',
      'Opera >= 12',
      'Safari >= 7.1',
    ];
    const GLOBALS = {
      'process.env.NODE_ENV': DEBUG ? '"development"' : '"production"',
      __DEV__: DEBUG,
    };
    const JS_LOADER = {
      test: /\.jsx?$/,
      include: [
        path.resolve(__dirname, '../node_modules/react-routing/src'),
        path.resolve(__dirname, '../src'),
      ],
      loader: 'babel-loader',
    };
    
    //
    // Common configuration chunk to be used for both
    // client-side (app.js) and server-side (server.js) bundles
    // -----------------------------------------------------------------------------
    
    const config = {
      output: {
        publicPath: '/',
        sourcePrefix: '  ',
      },
    
      cache: DEBUG,
      debug: DEBUG,
    
      stats: {
        colors: true,
        reasons: DEBUG,
        hash: VERBOSE,
        version: VERBOSE,
        timings: true,
        chunks: VERBOSE,
        chunkModules: VERBOSE,
        cached: VERBOSE,
        cachedAssets: VERBOSE,
      },
    
      plugins: [
        new webpack.optimize.OccurenceOrderPlugin(),
      ],
    
      resolve: {
        extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx', '.scss'],
      },
    
      module: {
        loaders: [
          {
            test: /\.json$/,
            loader: 'json-loader',
          }, {
            test: /\.txt$/,
            loader: 'raw-loader',
          }, {
            test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
            loader: 'url-loader?limit=10000',
          }, {
            test: /\.(eot|ttf|wav|mp3)$/,
            loader: 'file-loader',
          },
        ],
      },
    
      postcss: function plugins() {
        return [
          require('postcss-import')({
            onImport: files => files.forEach(this.addDependency),
          }),
          require('postcss-nested')(),
          require('postcss-cssnext')({ autoprefixer: AUTOPREFIXER_BROWSERS }),
        ];
      },
    };
    
    //
    // Configuration for the client-side bundle (app.js)
    // -----------------------------------------------------------------------------
    
    const appConfig = merge({}, config, {
      entry: [
        ...(WATCH ? ['webpack-hot-middleware/client'] : []),
        './src/app.js',
      ],
      output: {
        path: path.join(__dirname, '../build/public'),
        filename: 'app.js',
      },
    
      // Choose a developer tool to enhance debugging
      // http://webpack.github.io/docs/configuration.html#devtool
      devtool: DEBUG ? 'cheap-module-eval-source-map' : false,
      plugins: [
        ...config.plugins,
        new ExtractTextPlugin('app.css'),
        new webpack.DefinePlugin(GLOBALS),
        ...(!DEBUG ? [
          new webpack.optimize.DedupePlugin(),
          new webpack.optimize.UglifyJsPlugin({
            compress: {
              warnings: VERBOSE,
            },
          }),
          new webpack.optimize.AggressiveMergingPlugin(),
        ] : []),
        ...(WATCH ? [
          new webpack.HotModuleReplacementPlugin(),
          new webpack.NoErrorsPlugin(),
        ] : []),
      ],
      module: {
        loaders: [
          WATCH ? {
            ...JS_LOADER,
            query: {
              // Wraps all React components into arbitrary transforms
              // https://github.com/gaearon/babel-plugin-react-transform
              plugins: ['react-transform'],
              extra: {
                'react-transform': {
                  transforms: [
                    {
                      transform: 'react-transform-hmr',
                      imports: ['react'],
                      locals: ['module'],
                    }, {
                      transform: 'react-transform-catch-errors',
                      imports: ['react', 'redbox-react'],
                    },
                  ],
                },
              },
            },
          } : JS_LOADER,
          ...config.module.loaders,
          {
            test: /(\.scss|\.css)$/,
            loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass?sourceMap'),
          },
        ],
      },
    });
    
    //
    // Configuration for the server-side bundle (server.js)
    // -----------------------------------------------------------------------------
    
    const serverConfig = merge({}, config, {
      entry: './src/server.js',
      output: {
        path: './build',
        filename: 'server.js',
        libraryTarget: 'commonjs2',
      },
      target: 'node',
      externals: [
        function filter(context, request, cb) {
          const isExternal =
            request.match(/^[a-z][a-z\/\.\-0-9]*$/i) &&
            !request.match(/^react-routing/) &&
            !context.match(/[\\/]react-routing/);
          cb(null, Boolean(isExternal));
        },
      ],
      node: {
        console: false,
        global: false,
        process: false,
        Buffer: false,
        __filename: false,
        __dirname: false,
      },
      devtool: 'source-map',
      plugins: [
        ...config.plugins,
        new webpack.DefinePlugin(GLOBALS),
        new webpack.BannerPlugin('require("source-map-support").install();',
          { raw: true, entryOnly: false }),
      ],
      module: {
        loaders: [
          JS_LOADER,
          ...config.module.loaders,
          {
            test: /(\.scss|\.css)$/,
            loader: 'css/locals?module&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass?sourceMap',
          },
        ],
      },
    });
    
    export default [appConfig, serverConfig];
    

    Actually building of bundle is done without errors, but when I try to run server.js - I get error:

    Error: Cannot find module './style'
        at Function.Module._resolveFilename (module.js:336:15)
        at Function.Module._load (module.js:286:25)
        at Module.require (module.js:365:17)
        at require (module.js:384:17)
        at Object.<anonymous> (/some-path/node_modules/react-toolbox/lib/font_icon/index.js:15:14)
        at Module._compile (module.js:434:26)
        at Object.Module._extensions..js (module.js:452:10)
        at Module.load (module.js:355:32)
        at Function.Module._load (module.js:310:12)
        at Module.require (module.js:365:17)
    

    In my server.js I do not using hot-middleware.

    Type: Bug Type: Enhancement 
    opened by i1skn 26
  • Load style without breaking current global css/scss

    Load style without breaking current global css/scss

    I'm trying to get react-toolbox running in our new project of ours. The problem I'm facing is that my required scss files will act as global and not "namespaced" for each component.

    When I'm trying to make the style load for react-toolbox, I get it to work but in the progress I'm breaking our current scss. And of course when I revert my loaders to the original state, the style breaks for my react-toolbox element (Dropdown).

    Global scss working, react-toolbox style broken

    test    :  /(\.scss|\.css)$/,
    loaders : [
      'style-loader',
      'css-loader',
      'sass-loader?includePaths[]=' + paths.src('styles')
    ]
    

    Global scss broken, react-toolbox style working

    test    :  /(\.scss|\.css)$/,
    loaders: [
      require.resolve('style-loader'),
      require.resolve('css-loader') + '?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
      require.resolve('sass-loader') + '?sourceMap'
    ]
    

    Is there a way of loading the style for each component and keep my own required scss global?

    Type: Bug 
    opened by Agowan 26
  • "Module build failed"

    Hello, I get this error when try to start the project...

    npm install npm start ... Child extract-text-webpack-plugin:

    ERROR in ./~/css-loader?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/sass-loader?sourceMap!./components/snackbar/style.scss
    Module build failed: 
      @import "./colors";
     ^
          Import directives may not be used within control directives or mixins.
          in /home/amensouissi/workspace_react/react-toolbox/components/_base.scss (line 4, column 3)
    

    ....

    opened by amensouissi 24
  • prettier config file missing

    prettier config file missing

    everyone uses prettier code formatter , so everyone has different global prettier configuration, which leads to multiple unnecessary changes in file. So having a local prettierrc and prettierignore can eliminate these unnecessary changes.

    opened by Shubhamsahu19 0
  • Unable to use it with Vite in react 18

    Unable to use it with Vite in react 18

    Hello,

    I have add this react-toolbox but when I try to use i got this error message:

    node_modules/react-toolbox/components/index.js:24:7: ERROR: Unexpected "Ripple"

    any idea ?

    Thanks !

    opened by wilcor 0
  • Syntax Error

    Syntax Error

    Syntax Error: ../node_modules/react-toolbox/components/index.js: Support for the experimental syntax 'exportDefaultFrom' isn't currently enabled (24:8)

    opened by azzazkhan 3
  • Autocomplete isValueAnObject incorrectly checks for null

    Autocomplete isValueAnObject incorrectly checks for null

    isValueAnObject() checks typeof value === 'object' which is true for null, so if the component starts out with value of null, it always produces values that are objects, which is unexpected.

    opened by alexhisen 2
  • [email protected](May 24, 2017)

    This release includes updates for all dependencies. The most important one is the warning produced by React 15.5 regarding PropTypes. Also there were updates related to both the library itself and the building process. Please test carefully 🙏 and report any issues.

    Also, it includes some fixes thanks to you, awesome contributors! 👏

    Source code(tar.gz)
    Source code(zip)
  • 2.0.0-beta.6(Jan 28, 2017)

    This release brings a lot of code changes. The linter rules have been changed but it shouldn't affect to the behavior in any case. If you find an issue, please report it! Help is very appreciated on this. Apart from those changes, this PR:

    • Updates all dependencies.
    • Exports TabsTheme interface that was missing in the previous release.

    Cheers!

    Source code(tar.gz)
    Source code(zip)
  • 2.0.0-beta.5(Jan 24, 2017)

    Hi all! We are publishing a new beta release with mostly small fixes. You may noticed the number of issues has been dramatically reduced. I've made a cleanup closing duplicated issues and putting some of them together. Also, I've opened #1170 and #1169 to point a reimplementation that is coming with future releases. Notice that now there is a ROADMAP revealing the direction in which the project goes.

    This release includes among other small fixes:

    • Ability to override isComponentOfType useful if you are using React Hot Loader #1164
    • MenuIcon now has an inverse prop in case you place it in a dark background.
    • Full restructure of Typescript definitions.
    • Tab component now is decorated with a ripple.
    • Spec internal implementation now uses the Layout with NavDrawer, you can follow it as an example.
    • You can disable suggestionMatch in the Autocomplete.
    • Now your source can be dynamic in the Autocomplete.
    • You can use onEscKeyDown property for the Drawer component.
    • Small accessibility improvements.
    Source code(tar.gz)
    Source code(zip)
  • 2.0.0-beta.1(Dec 7, 2016)

  • 1.3.0(Nov 25, 2016)

  • 1.1.1(Aug 8, 2016)

  • 1.1.0(Aug 7, 2016)

    New release with a lot of bugfixes and some major improvements that I think you are going to love:

    • Ripple component is way better now. It's closer to the spec supporting many waves, also it has better performance and it's not rendered when not used. You still can keep the single ripple version with a prop.
    • Tooltip component is refactored and now it's rendered from the root and with automatic positioning! Also it's only rendered when used.
    • DatePicker supports locale and multiple languages (thanks to Abilio). We still need to port some strings to fully support internationalization but it's a great step forward.

    And of course a lot of great fixes brought by the community. To update the internal status in the ripple we are now using react-addons-update. You will need to add this dependency.

    Thank you all for contributing!

    Source code(tar.gz)
    Source code(zip)
  • 1.0.0(Jun 4, 2016)

    After this time I think the library is mature enough to be released as 1.0.0. A lot of changes are coming with this new version, I hope you like it and find it useful:

    • No more toolbox-loader needed. You can generate your themes in multiple ways, check the docs.
    • Each component is customizable via a theme property which makes easier to add custom style.
    • You can import components raw, without styles, and provide styles via props or context.
    • You can write your own stylesheet for components. Anybody wants to port to CSS Next? 🙄
    • You can use the repository in your package thanks to the inclusion of a compiled lib folder.
    • A lot of bugfixes (thanks to the community 👏)

    Breaking changes

    • To import components with style you have to import either from the project root or from indexes. In case you were importing components directly from its definition file it will no longer have styles, please change your import.
    • Let know any other breaking change in the issues.
    Source code(tar.gz)
    Source code(zip)
  • 0.16.2(Apr 10, 2016)

    This new version include some major updates and new components 🎁:

    • Now components using an Overlay that are can be inactive (for example Dialog or Drawer) are not rendered if they are not active. We preserve the animation thanks to a two step rendering (see #444)
    • App component is no longer needed. From now on we are blocking the body overflow in components with Overlay. You can stop wrapping you whole application if you want.
    • Chip component and Autocomplete uses it (thanks @lucaas)
    • Layout components including a responsive NavDrawer, main Panel and SideBar (thanks @patrick-jones)
    • Improvements in the documentation and props validation (thanks @KerenChandran)
    • Many other bugfixes and small improvements.

    Sorry for the last 2 patches, 💩 happens !

    Source code(tar.gz)
    Source code(zip)
  • 0.14.0(Dec 20, 2015)

    New components

    • Ripple is now an HOC. It's released and included in the documentation so you can use it with your custom components.

    Most important changes:

    • Added className for the pickers to customize them.
    • Animated auto-transition in DatePicker component.
    • All Input components have now an error prop.
    • Dropdown improvements and normalization with Input component.
    • More react-toolbox attributes to easy customize picker components.
    • btn-colors mixin extracted to easily define custom Buttons.
    • New neutral boolean property to avoid taking default styles in Button.
    • Remove hidden scroll from webkit browsers by commons.scss.
    • Better Navigation styles.
    • Overlay opacity can now be styled from CSS.

    Enjoy!

    Source code(tar.gz)
    Source code(zip)
  • 0.13.1(Nov 29, 2015)

    This release includes changes in React Toolbox file structure adopting a new convention. Fixes #98 . Now index.js files inside each component's folder is only importing components and subcomponents instead of holding implementation. There is a match between files and components so each file is named the same as the component meaning that now you can import them directly: import Button from 'react-toolbox/lib/button/Button'.

    New Components

    • We have a brand new Card component! way more flexible than it used to be. You can compose your own Cards by aggregating subcomponents such as CardTitle, CardMedia, CardActions or CardText. Fixes #115 and #95 (Thanks @nathanmarks!)
    • New Avatar component. You can either define an Image, a FontIcon, custom SVG icon or simply a letter as avatar. Internally they are only used in the Card component but soon they will be available in other components like List.
    • We extracted an IconButton from the regular Button component and removed the toggle property. The API is the same as for the button but more limited since you can't have raised IconButton. Fixes #149

    Breaking changes

    • Since now we have an IconButton, the Button with toggle property is deprecated.
    • Now there are no loading cards or buttons since they are not in Google Spec. Fixes #152
    • Tooltip component now works as a decorator. This means you no longer have the tooltip properties available in Input and Button components among others. Instead you can decorate any component with the Tooltip and get a new component with Tooltip's properties. Check the docs for more info.
    • Now all input components pass the new value in the onChange callback. In previous versions Checkbox, Switch, Input and others were giving the event straight into the callback. Now they are passing the new value.
    • We left Material Design Icons out of the css import. It's not a good practice to include vendor imports in our stylesheet so we removed them. Now you have to import the font via Google Fonts as specified here. You can still use the FontIcon but remember to import the font. The name of the icon in the component should correspond to the imported icon:
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    
    • For the same reason, Roboto font import was removed too. You'd need to add an import for the font in a similar way to the font icon. Remember the font-weights we use: 300, 400, 500, 700.
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
    

    Bugfixes

    • Now TimePicker has a label in a similar way that DatePicker. Fixes #117
    • Button is not stopping the events anymore. Fixes #173
    Source code(tar.gz)
    Source code(zip)
Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.

Material-UI Quickly build beautiful React apps. Material-UI is a simple and customizable component library to build faster, beautiful, and more access

Material-UI 83.6k Dec 30, 2022
⚡️The Fullstack React Framework — built on Next.js

The Fullstack React Framework "Zero-API" Data Layer — Built on Next.js — Inspired by Ruby on Rails Read the Documentation “Zero-API” data layer lets y

⚡️Blitz 12.5k Jan 4, 2023
A React Component library implementing the Base design language

Base Web React Components Base is a design system comprised of modern, responsive, living components. Base Web is the React implementation of Base. Us

Uber Open Source 8.1k Dec 29, 2022
Material Design Web Components

Material Web IMPORTANT: Material Web is a work in progress and subject to major changes until 1.0 release. Material Web is Google’s UI toolkit for bui

Material Components 4.6k Dec 31, 2022
A component library based on Material Design 3 & Web Components

material-web-entity Material Web Entity A component library based on Material Design & Web Components Go to link to see what components this library s

HugePancake 5 Jun 3, 2022
Providing accessible components with Web Components & Material You

tiny-material Still on developing, DO NOT use for production environment Run well on Google Chrome, Firefox, Chrome for Android, Microsoft Edge (Chrom

HugePancake 11 Dec 31, 2022
Minimal Design, a set of components for Angular 9+

Alyle UI Minimal Design, a set of components for Angular. Docs Install Alyle UI Installation Components Feature State Responsive Docs avatar ✔️ ✔️ Doc

Alyle 281 Dec 25, 2022
A frontend Framework for building B2B applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design

react-admin A frontend Framework for building data-driven applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Materi

marmelab 21.2k Dec 30, 2022
Built a covid-19 trcaker app using React.js implementing hooks and materail UI

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Aditya Dond 1 Dec 21, 2021
Material Design Lite for Ember.js Apps

ember-material-lite Google's Material Design Lite for Ember.js apps This addon requires ember >= 1.11.0 Installation # ember-cli < 0.2.3 ember install

Mike North 148 Dec 17, 2021
Ember implementation of Google's Material Design

No longer maintained This project is no longer maintained. For an up-to-date material design project, please use Ember Paper. Ember-material-design Th

Mike Wilson 121 Mar 1, 2022
🏎 A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.

downshift ?? Primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components. Read the docs | See

Downshift 11.1k Dec 28, 2022
A simple demo of React Lottie power to 1st Loggi Frontend Show & Tell

Loggi Frontend Show & Tell - Animações com React Lottie A simple demo of React Lottie power to 1st Loggi Frontend Show & Tell This project was bootstr

Gabriel Barreto 2 Aug 4, 2022
Soft UI Dashboard React - Free Dashboard using React and Material UI

Soft UI Dashboard React Start your Development with an Innovative Admin Template for Material-UI and React. If you like the look & feel of the hottest

Creative Tim 182 Dec 28, 2022
A React utility belt for function components and higher-order components.

A Note from the Author (acdlite, Oct 25 2018): Hi! I created Recompose about three years ago. About a year after that, I joined the React team. Today,

Andrew Clark 14.8k Jan 4, 2023
Nextjs-components: A collection of React components

nextjs-components A collection of React components, transcribed from https://vercel.com/design. 1 Motivation Blog post from 01/09/2022 Todo's Unit tes

null 94 Nov 30, 2022
A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable list✌️

A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable list Examples available here: http://claude

Claudéric Demers 10.3k Jan 2, 2023
nivo provides a rich set of dataviz components, built on top of the awesome d3 and Reactjs libraries

nivo provides supercharged React components to easily build dataviz apps, it's built on top of d3. Several libraries already exist for React d3 integr

Raphaël Benitte 10.9k Dec 31, 2022
Vue-hero-icons - A set of free MIT-licensed high-quality SVG icons, sourced from @tailwindlabs/heroicons, as Vue 2 functional components.

vue-hero-icons For Vue3, install the official package @heroicons/vue A set of free MIT-licensed high-quality SVG icons, sourced from @tailwindlabs/her

Mathieu Schimmerling 97 Dec 16, 2022