+#
-[](https://www.npmjs.com/package/react-toolbox) [](https://travis-ci.org/react-toolbox/react-toolbox) [](https://www.npmjs.org/package/react-toolbox) [](https://discord.gg/0ZcbPKXt5bW9FLzM) [](https://paypal.me/javivelasco) [](#backers)
+[](https://www.npmjs.com/package/react-toolbox) [](https://travis-ci.org/react-toolbox/react-toolbox) [](https://www.npmjs.org/package/react-toolbox) [](https://paypal.me/javivelasco) [](#backers)
[](#sponsors)
React Toolbox is a set of [React](http://facebook.github.io/react/) components that implement [Google's Material Design specification](https://material.google.com/). It's powered by [CSS Modules](https://github.com/css-modules/css-modules) and harmoniously integrates with your [webpack](http://webpack.github.io/) workflow, although you can use any other module bundler. You can take a tour through our documentation website and try the components live!
@@ -17,7 +17,7 @@ $ npm install --save react-toolbox
## Prerequisites
-React Toolbox uses [CSS Modules](https://github.com/css-modules/css-modules) by default to import stylesheets written using PostCSS/[cssnext](http://cssnext.io/) features. In case you want to import the components already bundled with CSS, your module bundler should be able to require these PostCSS modules.
+React Toolbox uses [CSS Modules](https://github.com/css-modules/css-modules) by default to import stylesheets written using [PostCSS](https://github.com/postcss/postcss) & [postcss-preset-env](https://preset-env.cssdb.org/) 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](https://webpack.github.io/), 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.
@@ -33,8 +33,7 @@ Follow [these instructions](https://github.com/react-toolbox/react-toolbox-themr
```bash
npm install postcss-loader --save-dev
-npm install postcss --save
-npm install postcss-cssnext --save
+npm install postcss postcss-preset-env postcss-calc --save
```
Configure webpack 1.x loader for .css files to use postcss:
@@ -49,15 +48,46 @@ Configure webpack 1.x loader for .css files to use postcss:
```
Declare plugins to be used by postcss (as part of webpack's config object):
```js
+ // webpack.config.js
postcss: () => {
return [
/* eslint-disable global-require */
- require('postcss-cssnext'),
+ 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:
+```js
+ // 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:
@@ -95,7 +125,7 @@ First let's take a look on how the components are structured in the project. The
|---- 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/cssnext 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.
+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
@@ -192,14 +222,13 @@ 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 cssnext 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](https://github.com/react-toolbox/react-toolbox/blob/dev/components/colors.css) and [variables](https://github.com/react-toolbox/react-toolbox/blob/dev/components/variables.css). You can override both the global and component-specific **variables** to get the results you want using one of the methods below.
+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](https://github.com/react-toolbox/react-toolbox/blob/dev/components/colors.module.css) and [variables](https://github.com/react-toolbox/react-toolbox/blob/dev/components/variables.module.css). 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 customProperties plugin. i.e. if using postcss-next in webpack:
+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](https://github.com/csstools/postcss-preset-env) in webpack:
```js
-
// This can also be stored in a separate file:
const reactToolboxVariables = {
'color-text': '#444548',
@@ -208,31 +237,34 @@ const reactToolboxVariables = {
'button-height': '30px',
};
-// webpack's config object:
+// webpack's config object: (webpack.config.js)
const config = {
...
postcss: () => {
return [
/* eslint-disable global-require */
- require('postcss-cssnext')({
+ require('postcss-preset-env')({
+ stage: 0, // required to get all features that were from cssnext without enabling them one by one
features: {
- customProperties: {
- variables: reactToolboxVariables,
+ '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](https://github.com/css-modules/css-modules/blob/master/docs/values-variables.md) (`npm install postcss-modules-values --save`) and the [modules-values-extract](https://github.com/alexhisen/modules-values-extract) utility to declare these variables in component-specific theme .css files, where you would typically store additional style overrides.
+Instead of using a JavaScript object for variables, you can use [CSS Module Values](https://github.com/css-modules/css-modules/blob/master/docs/values-variables.md) (`npm install postcss-modules-values --save`) and the [modules-values-extract](https://github.com/alexhisen/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.:
@@ -248,7 +280,7 @@ import styleVariables from './css/variables.css';
styleVariables.buttonPrimaryBackgroundColor
```
-In [this demo project](https://github.com/alexhisen/mobx-forms-demo), 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](https://github.com/alexhisen/mobx-forms-demo/blob/master/webpack.config.js). In the demo project, variables that are not specific to a particular component are in [variables.css](https://github.com/alexhisen/mobx-forms-demo/blob/master/src/css/variables.css) and button-specific variables are in [button.css](https://github.com/alexhisen/mobx-forms-demo/blob/master/src/css/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.
+In [this demo project](https://github.com/alexhisen/mobx-forms-demo), 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](https://github.com/alexhisen/mobx-forms-demo/blob/master/webpack.config.js). In the demo project, variables that are not specific to a particular component are in [variables.css](https://github.com/alexhisen/mobx-forms-demo/blob/master/src/css/variables.css) and button-specific variables are in [button.css](https://github.com/alexhisen/mobx-forms-demo/blob/master/src/css/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!**
diff --git a/ROADMAP.md b/ROADMAP.md
index 8e9821217..2b1ff11af 100644
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -1,4 +1,4 @@
-This document defines a manifesto and the main Roadmap đźšµ ideas for [React Toolbox](www.react-toolbox.com). It's not a fixed document and of course it's open to change. You can leave your feedback in [this gist](https://gist.github.com/javivelasco/259d2087c2a8c3e8f2c5c720d1fd3f2e) or you can also do it [through an issue](https://github.com/react-toolbox/react-toolbox/issues/new).
+This document defines a manifesto and the main Roadmap đźšµ ideas for [React Toolbox](www.react-toolbox.io). It's not a fixed document and of course it's open to change. You can leave your feedback in [this gist](https://gist.github.com/javivelasco/259d2087c2a8c3e8f2c5c720d1fd3f2e) or you can also do it [through an issue](https://github.com/react-toolbox/react-toolbox/issues/new).
## The Manifesto
@@ -68,7 +68,7 @@ There is no fixed date, sorry. Being an open source project, it depends on contr
### Is there any migration guide to 2.0?
-Not really. At the end we are just providing components and there are no big changes on them apart from huge refactors of some specific components that will be coming. If should be enough by checking changelogs and new documentation. In any case if you feel like a migration guide is needed, feel free to leave for feedback.
+There is a [migration guide](https://github.com/react-toolbox/react-toolbox/wiki/Migrating-from-version-1.3-to-2.0) in the wiki.
### When will be released the new playground?
diff --git a/babel.config.js b/babel.config.js
new file mode 100644
index 000000000..0b2856212
--- /dev/null
+++ b/babel.config.js
@@ -0,0 +1,35 @@
+module.exports = function (api) {
+ const env = api.env();
+ api.cache.using(() => env === 'development');
+
+ return {
+ presets: ['@babel/preset-env', '@babel/preset-react'],
+ plugins: [
+ '@babel/plugin-transform-runtime',
+ // Stage 0
+ '@babel/plugin-proposal-function-bind',
+
+ // Stage 1
+ '@babel/plugin-proposal-export-default-from',
+ '@babel/plugin-proposal-logical-assignment-operators',
+ ['@babel/plugin-proposal-optional-chaining', { loose: false }],
+ ['@babel/plugin-proposal-pipeline-operator', { proposal: 'minimal' }],
+ ['@babel/plugin-proposal-nullish-coalescing-operator', { loose: false }],
+ '@babel/plugin-proposal-do-expressions',
+
+ // Stage 2
+ ['@babel/plugin-proposal-decorators', { legacy: true }],
+ '@babel/plugin-proposal-function-sent',
+ '@babel/plugin-proposal-export-namespace-from',
+ '@babel/plugin-proposal-numeric-separator',
+ '@babel/plugin-proposal-throw-expressions',
+
+ // Stage 3
+ '@babel/plugin-syntax-dynamic-import',
+ '@babel/plugin-syntax-import-meta',
+ ['@babel/plugin-proposal-class-properties', { loose: false }],
+ '@babel/plugin-proposal-json-strings',
+ 'react-hot-loader/babel',
+ ],
+ };
+};
diff --git a/components/ThemeProvider.d.ts b/components/ThemeProvider.d.ts
new file mode 100644
index 000000000..f3884c411
--- /dev/null
+++ b/components/ThemeProvider.d.ts
@@ -0,0 +1,3 @@
+import {ThemeProvider} from 'react-css-themr'
+
+export default ThemeProvider
diff --git a/docs/postcss.config.js b/docs/postcss.config.js
new file mode 100644
index 000000000..973849c92
--- /dev/null
+++ b/docs/postcss.config.js
@@ -0,0 +1,27 @@
+const path = require('path');
+const toolboxVariables = require('./toolbox-variables');
+
+module.exports = {
+ plugins: [
+ require('postcss-import')({
+ root: path.join(__dirname, './../'),
+ path: [
+ path.join(__dirname, './app'),
+ path.join(__dirname, './../components')
+ ]
+ }),
+ require('postcss-mixins')(),
+ require('postcss-each')(),
+ require('postcss-apply')(),
+ require('postcss-preset-env')({
+ stage: 0,
+ features: {
+ 'custom-properties': {
+ variables: toolboxVariables,
+ preserve: false
+ }
+ }
+ }),
+ require('postcss-reporter')({ clearMessages: true })
+ ]
+}
\ No newline at end of file
diff --git a/husky.config.js b/husky.config.js
new file mode 100644
index 000000000..33f5120fe
--- /dev/null
+++ b/husky.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+ hooks: {
+ 'pre-commit': 'npm run lint:staged',
+ },
+};
diff --git a/jest.config.js b/jest.config.js
new file mode 100644
index 000000000..8c91c001c
--- /dev/null
+++ b/jest.config.js
@@ -0,0 +1,17 @@
+module.exports = {
+ moduleDirectories: [
+ 'node_modules',
+ ],
+ moduleNameMapper: {
+ '\\.css$': 'identity-obj-proxy',
+ },
+ modulePaths: [
+ '{children}
: children}extends TooltipProps { +declare interface TooltippedComponentClass
extends TooltipProps {
new (props?: P, context?: any): TooltipComponent (componentClass: React.ComponentClass ): TooltippedComponentClass ;
+declare interface TooltipOptions {
+ className?: string;
+ delay?: number;
+ hideOnClick?: boolean;
+ passthrough?: boolean;
+ showOnClick?: boolean;
+ position?: 'bottom' | 'horizontal' | 'left' | 'right' | 'top' | 'vertical'
+}
+
+declare type tooltipHOC = (componentClass: React.ComponentClass ) => TooltippedComponentClass
+
+export function tooltipFactory (options?: TooltipOptions): tooltipHOC ;
-export default Tooltip;
+export default function Tooltip (component: React.ReactType): TooltippedComponentClass ;
diff --git a/packages/react-toolbox/src/components/tooltip/index.js b/packages/react-toolbox/src/components/tooltip/index.js
index 6cedcaffc..48421c38f 100644
--- a/packages/react-toolbox/src/components/tooltip/index.js
+++ b/packages/react-toolbox/src/components/tooltip/index.js
@@ -1,5 +1,5 @@
import tooltipFactory from './Tooltip';
-import theme from './theme.css';
+import theme from './theme.module.css';
const themedTooltipFactory = options => tooltipFactory({ ...options, theme });
export default tooltipFactory({ theme });
diff --git a/packages/react-toolbox/src/components/tooltip/readme.md b/packages/react-toolbox/src/components/tooltip/readme.md
index 98c4e3a36..59ab4cafc 100644
--- a/packages/react-toolbox/src/components/tooltip/readme.md
+++ b/packages/react-toolbox/src/components/tooltip/readme.md
@@ -5,8 +5,9 @@ A Tooltip is useful to show information on hover in any kind of component. We ha
```jsx
import Button from 'react-toolbox/lib/button';
-import Tooltip from 'react-toolbox/lib/tooltip';
+import Input from 'react-toolbox/lib/input';
import Link from 'react-toolbox/lib/link';
+import Tooltip from 'react-toolbox/lib/tooltip';
const TooltipButton = Tooltip(Button);
const TooltipInput = Tooltip(Input);
@@ -31,11 +32,11 @@ In any component you decorate with the Tooltip you'd get some additional props:
| Name | Type | Default | Description|
|:-----|:-----|:-----|:-----|
| `className` | `String` | `''` | Sets a class to give customized styles to the tooltip.|
-| `onClick` | `Function` | | Callback to be invoked when Component is clicked.|
-| `onMouseEnter` | `Function` | | Callback called when the mouse enters the Component.|
-| `onMouseLeave` | `Function` | | Callback called when the mouse leaves the Component.|
-| `tooltip` | `String` | | The text string to use for the tooltip.|
-| `tooltipDelay` | `Number` | | Amount of time in miliseconds spent before the tooltip is visible.|
+| `onClick` | `Function` | | Callback to be invoked when Component is clicked.|
+| `onMouseEnter` | `Function` | | Callback called when the mouse enters the Component.|
+| `onMouseLeave` | `Function` | | Callback called when the mouse leaves the Component.|
+| `tooltip` | `String` | | The text string to use for the tooltip.|
+| `tooltipDelay` | `Number` | | Amount of time in miliseconds spent before the tooltip is visible.|
| `tooltipHideOnClick` | `Boolean` | `true` | If true, the Tooltip hides after a click in the host component.|
| `tooltipPosition` | `String` | `vertical` | Determines the position of the tooltip. It can be automatic with `vertical` and `horizontal` values or forced with `bottom`, `top`, `left` or `right`.|
| `tooltipShowOnClick` | `Boolean` | `false` | Determines the tooltip should be toggled when clicked. This is useful for mobile where there is no mouse enter.|
diff --git a/packages/react-toolbox/src/components/utils/is-component-of-type.js b/packages/react-toolbox/src/components/utils/is-component-of-type.js
index 03762aed1..77ba33fc5 100644
--- a/packages/react-toolbox/src/components/utils/is-component-of-type.js
+++ b/packages/react-toolbox/src/components/utils/is-component-of-type.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
let customChecker;
/**
@@ -16,6 +18,10 @@ export function overrideComponentTypeChecker(providedChecker) {
* @param reactElement {ReactElement} - any React Element (not a real DOM node)
*/
export function defaultChecker(classType, reactElement) {
+ if (process.env.NODE_ENV !== 'production') {
+ // https://github.com/gaearon/react-hot-loader/blob/v3.0.0-beta.7/docs/Known%20Limitations.md#checking-element-types
+ classType = React.createElement(classType).type;// eslint-disable-line no-param-reassign
+ }
return reactElement && reactElement.type === classType;
}
diff --git a/spec/ts/app_bar.tsx b/spec/ts/app_bar.tsx
new file mode 100644
index 000000000..14df0dc64
--- /dev/null
+++ b/spec/ts/app_bar.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import AppBar, {AppBar as NamedAppBar} from 'components/app_bar';
+
+const AppBarTest: React.SFC You can have a multiple or simple autocomplete. Provide an image source or object, a font icon, children or a title to use its first letter. lorem ipsum...
+ Icon Buttons should align in the vertical center, to see this we need to
+ put them next to text or highlight thier background color.
+ You have multiple options for cards. Combine different subcomponents to create your own: Lorem ipsum... Chips can be deletable and have an avatar. lorem ipsum... This message comes from a parent: {this.context.message} You can navigate using a drawer to the left or right. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. lorem ipsum... lorem ipsum... Although a menu can be used indepently with any component, we are providing a common use case with the icon menu. lorem ipsum... lorem ipsum... This list can be used inside a Drawer for a list of options or as navigation. Useful for a list of contacts or similar. It can be used to embed little checkboxes in the list. These behave as checkboxes. Similar to a previous one but only with one text line The most simple list. Using custom components in list item This tabs can be disabled or hidden lorem ipsum... Date pickers and time pickers with Material flavour. Determinate Indeterminate... Circular Circular with custom size Lorem ipsum... Normal slider With steps, initial value and editable Pinned and with snaps Disabled status lorem ipsum... This is more beautiful than the old fashion checkboxes... Organized data. This tabs can be disabled or hidden These tabs fill the given space. These tabs have an inverted theme. Give information on :hover An example with Multiline! Lorem ipsum dolor sit amet,
+ Click this next word to show and hide on click:
+ {' '}
+ AppBar
+
+
+
+
+
+ Autocomplete
+ Avatars
+ Buttons
+ Icon Button Alignment
+ Browse Button
+
+ {children}
;
+const CardListItem: React.SFC{component}
+ {name}
+
+
+
+
+ Cards
+
+ {Object.keys(cards).map(key => (
+
+ Checkbox
+ Chips
+
+
+
+ Dialog
+ Drawer
+ Officia deserunt mollit.
+
+
+ );
+ }
+
+ render() {
+ return (
+
+
+ {data.label}
+ {data.value}
+
+ Dropdown
+ Font Icons
+ Icon Menus
+ Inputs
+ Links
+ With simple text and icons
+
+
+
+
+
+ Two text lines, avatar and right icon
+
+
+
+
+
+ Two line options and checkbox items
+
+
+
+
+
+
+
+ Avatar, single text and icon
+
+
+
+
+
+ Simple with just one text line
+
+
+
+
+
+ List with custom components
+
+
+
+
+ Menus
+ Navigation
+ Pickers
+ Progress bars
+ Radio Button
+ Sliders
+ Snackbars & Toasts
+ Switches
+ Table
+
+
+ Tabs
+ Fixed Tabs
+ Inverse Tabs
+ Inverse Tabs with labels and icons
+ Inverse Tabs with icons
+ Tooltip
+