react-polymorph - npm Package Compare versions

Comparing version 0.2.7 to 0.3.0

CHANGELOG.md

 Changelog
 =========
 
+## 0.3.0
+
+### Fixes
+
+- Updated simple theme styles
+- Prevented CSS-classes inheritance on TextAreaSkin textarea element
+
+### Features
+
+- Added checkbox component
+- Added switch component
+- Added dialog component
+
 ## 0.2.7
@@ -8,5 +21,5 @@
 
-- fixed storybook webpack config
-- fixed caret position logic in numeric input
-- fixed selection stealing bug found in Daedalus
+- Fixed storybook webpack config
+- Fixed caret position logic in numeric input
+- Fixed selection stealing bug found in Daedalus
 
@@ -55,3 +68,3 @@ ## 0.2.6
 
-- add new package-lock.json file generated by npm 5
+- Added new package-lock.json file generated by npm 5
 
@@ -62,3 +75,3 @@ ## 0.2.1
 
-- Reuse the normal `InputSkin` and `SimpleInput` theme for the `NumericInput` component.
+- Reused the normal `InputSkin` and `SimpleInput` theme for the `NumericInput` component.
 
@@ -65,0 +78,0 @@ ## 0.2.0

lib/skins/simple/identifiers.js

@@ -11,2 +11,5 @@ 'use strict';
 var SELECT = exports.SELECT = 'ReactPolymorphSimpleSelect';
+var CHECKBOX = exports.CHECKBOX = 'ReactPolymorphSimpleCheckbox';
+var SWITCH = exports.SWITCH = 'ReactPolymorphSimpleSwitch';
+var MODAL = exports.MODAL = 'ReactPolymorphSimpleModal';
 //# sourceMappingURL=identifiers.js.map

lib/skins/simple/TextAreaSkin.js

@@ -17,4 +17,2 @@ 'use strict';
 
-var _props = require('../../utils/props');
-
 var _reactCssThemr = require('react-css-themr');
@@ -24,2 +22,4 @@
 
+var _props = require('../../utils/props');
+
 var _FormFieldSkin = require('./FormFieldSkin');
@@ -41,3 +41,3 @@
   return _react2.default.createElement(_FormFieldSkin2.default, _extends({ input: _react2.default.createElement('textarea', _extends({}, (0, _props.pickDOMProps)(props), {
-      className: (0, _classnames2.default)([props.className, props.theme.textarea, props.disabled ? props.theme.disabled : null, props.error ? props.theme.errored : null]),
+      className: (0, _classnames2.default)([props.theme.textarea, props.disabled ? props.theme.disabled : null, props.error ? props.theme.errored : null]),
       ref: function ref(textarea) {
@@ -44,0 +44,0 @@ props.component.registerSkinPart(_TextArea2.default.SKIN_PARTS.TEXT_AREA, textarea);

package.json

 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.2.7",
+  "version": "0.3.0",
   "author": {
@@ -31,3 +31,4 @@ "name": "Dominik Guzei",
   "dependencies": {
-    "postinstall-build": "^5.0.0"
+    "postinstall-build": "^5.0.0",
+    "react-modal": "^2.2.1"
   },
@@ -34,0 +35,0 @@ "peerDependencies": {

README.md

@@ -1,5 +0,5 @@
-# react-polymorph
+# React Polymorph
 
 React Polymorph is a UI framework for React, that separates logic, markup and theming of components. 
-It's powered by [CSS Modules](https://github.com/css-modules/css-modules) and harmoniously integrates with 
+It's inspired by [react-toolbox](https://github.com/react-toolbox/react-toolbox/) (but more flexible), 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.
@@ -22,11 +22,55 @@
  
-### Basic Example
 
-You need standard `Input` components for text and a `NumericInput` for floating 
-point numbers. The only difference is the logic of the component, in both cases
-it is "just" an input field showing some text:
+## Installation & Usage
 
+React Polymorph can be installed as an [npm package](https://www.npmjs.com/package/react-polymorph):
+
+`$ npm install --save react-polymorph`
+ 
+### Usage in Webpack Projects
+
+```bash
+npm install --save style-loader css-loader sass-loader
+```
+
+```js
+module: {
+  loaders: [
+    {
+      test: /\.scss$/,
+      loaders: [
+        'style?sourceMap',
+        'css?sourceMap&modules&localIdentName=[name]_[local]&importLoaders=1',
+        'sass?sourceMap'
+      ]
+    },
+    // your other loaders …
+  ]
+},
+```
+
+Now you can import and use components like this in your app:
+
+```javascript
+import React from 'react';
+import Input from 'react-polymorph/lib/components/Input';
+import InputSkin from 'react-polymorph/lib/skins/simple/InputSkin';
+
+// Basic input component:
+const MyInput = () => <Input skin={InputSkin} />;
+```
+
+Depending on the *skin* you apply to your component it will pick the associated
+theme (in this case it's the `simple` theme that is bundled with `react-polymorph`).
+However you can also completely customize the theme of components.
+ 
+### Components and Skins
+
+Imagine you need a standard text `Input` component for text and a `NumericInput` 
+for floating point numbers. The only difference is the logic of the component, 
+in both cases it is "just" an input field showing some text:
+
 #### Standard Input
 
-The standard input is as simple as possible and does not much logic.
+The standard input is as simple as possible and does not have much logic:
 
@@ -52,4 +96,4 @@ ```javascript
 
-The numeric input however is heavily specialized in guiding the user to 
-enter correct floating point numbers.
+The numeric input however is specialized in guiding the user to 
+enter correct floating point numbers:
 
@@ -62,4 +106,4 @@ ```javascript
 const MyNumericInput = (props) => (
-  <NumericInput
-    skin={InputSkin}
+  <NumericInput // notice the different logic component!
+    skin={InputSkin} // but the same skin!
     label="Amount"
@@ -80,2 +124,75 @@ placeholder="0.000000"
 
-_more documentation coming soon …_
+### Customizing Component Skins
+
+Every component accepts a `theme` property intended to provide a [CSS Module import object](https://github.com/css-modules/css-modules) 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:
+
+```js
+import React from 'react';
+import { Button } from 'react-polymorph/lib/components/Button';
+import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
+import theme from './GreenButton.css';
+
+const GreenButton = (props) => (
+  <Button {...props} skin={ButtonSkin} theme={theme} />
+);
+
+export default GreenButton;
+```
+
+```css
+.root {
+  background-color: green;
+}
+```
+
+In this case we are **adding** styles to a specific instance of an `ButtonSkin` component that already has its default styles injected. 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 Skin
+
+Install [react-css-themr](https://github.com/javivelasco/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
+# /css/button.css
+
+.root {
+  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.:
+
+```js
+# theme.js
+
+import { BUTTON } from 'react-polymorph/lib/skins/simple/identifiers';
+import MyCustomButtonTheme from './css/button.css';
+
+export default {
+  [BUTTON]: MyCustomButtonTheme
+};
+```
+
+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 AdminButton from './css/adminAreaButton.css'`\) and can provide each one at different points in the tree.
+
+```js
+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;
+```

source/skins/simple/identifiers.js

@@ -6,1 +6,4 @@ export const FORM_FIELD = 'ReactPolymorphSimpleFormField';
 export const SELECT = 'ReactPolymorphSimpleSelect';
+export const CHECKBOX = 'ReactPolymorphSimpleCheckbox';
+export const SWITCH = 'ReactPolymorphSimpleSwitch';
+export const MODAL = 'ReactPolymorphSimpleModal';

source/skins/simple/TextAreaSkin.js

 import React from 'react';
 import classnames from 'classnames';
-import { pickDOMProps } from '../../utils/props';
 import { themr } from 'react-css-themr';
 import { TEXT_AREA } from './identifiers';
+import { pickDOMProps } from '../../utils/props';
 import FormFieldSkin from './FormFieldSkin';
@@ -15,3 +15,2 @@ import TextArea from '../../components/TextArea';
       className={classnames([
-        props.className,
         props.theme.textarea,
@@ -18,0 +17,0 @@ props.disabled ? props.theme.disabled : null,

No alert changes

Improved metrics

Total package byte prevSize

306640

increased by15.78%

Number of package files

100

increased by26.58%

Lines of code

2196

increased by16.01%

Number of lines in readme file

195

increased by150%

Worsened metrics

Dependency count

9

increased by12.5%

Dependency changes

• + Addedreact-modal@^2.2.1

• + Addedexenv@1.2.2(transitive)

• + Addedreact-modal@2.4.1(transitive)