migrate select, number, and text widgets

packages/netlify-cms-core/package.json

@@ -57,7 +57,6 @@
     "react-scroll-sync": "^0.4.0",
     "react-sortable-hoc": "^0.6.8",
     "react-split-pane": "^0.1.82",
-    "react-textarea-autosize": "^5.2.0",
     "react-toggled": "^1.1.2",
     "react-topbar-progress-indicator": "^2.0.0",
     "react-transition-group": "^2.2.1",

packages/netlify-cms-core/scripts/load-extensions.js

@@ -11,11 +11,11 @@ import { ImageControl, ImagePreview } from 'netlify-cms-widget-image';
 import { ListControl, ListPreview } from 'netlify-cms-widget-list';
 import { ObjectControl, ObjectPreview } from 'netlify-cms-widget-object';
 import { MarkdownControl, MarkdownPreview } from 'netlify-cms-widget-markdown';
-import { StringControl, StringPreview } from 'netlify-cms-widget-string';
-// import { NumberControl, NumberPreview } from 'netlify-cms-widget-number';
-// import { TextControl, TextPreview } from 'netlify-cms-widget-text';
-// import { SelectControl, SelectPreview } from 'netlify-cms-widget-select';
+import { NumberControl, NumberPreview } from 'netlify-cms-widget-number';
 // import { RelationControl, RelationPreview } from 'netlify-cms-widget-relation';
+import { StringControl, StringPreview } from 'netlify-cms-widget-string';
+import { SelectControl, SelectPreview } from 'netlify-cms-widget-select';
+import { TextControl, TextPreview } from 'netlify-cms-widget-text';
 import image from 'netlify-cms-editor-component-image';
 
 registerBackend('git-gateway', GitGatewayBackend);
@@ -29,10 +29,10 @@ registerWidget('file', FileControl, FilePreview);
 registerWidget('image', ImageControl, ImagePreview);
 registerWidget('list', ListControl, ListPreview);
 registerWidget('markdown', MarkdownControl, MarkdownPreview);
+registerWidget('number', NumberControl, NumberPreview);
 registerWidget('object', ObjectControl, ObjectPreview);
-registerWidget('string', StringControl, StringPreview);
-// registerWidget('text', TextControl, TextPreview);
-// registerWidget('number', NumberControl, NumberPreview);
-// registerWidget('select', SelectControl, SelectPreview);
 // registerWidget('relation', RelationControl, RelationPreview);
+registerWidget('string', StringControl, StringPreview);
+registerWidget('text', TextControl, TextPreview);
+registerWidget('select', SelectControl, SelectPreview);
 registerEditorComponent(image);

packages/netlify-cms-core/src/components/EditorWidgets/Number/NumberPreview.js

@@ -1,10 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-export default function NumberPreview({ value }) {
-  return <div className="nc-widgetPreview">{value}</div>;
-}
-
-NumberPreview.propTypes = {
-  value: PropTypes.node,
-};

packages/netlify-cms-core/src/components/EditorWidgets/Select/SelectPreview.js

@@ -1,10 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-export default function SelectPreview({ value }) {
-  return <div className="nc-widgetPreview">{value ? value.toString() : null}</div>;
-}
-
-SelectPreview.propTypes = {
-  value: PropTypes.string,
-};

packages/netlify-cms-core/src/components/EditorWidgets/Text/TextPreview.js

@@ -1,10 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-export default function TextPreview({ value }) {
-  return <div className="nc-widgetPreview">{value}</div>;
-}
-
-TextPreview.propTypes = {
-  value: PropTypes.node,
-};

packages/netlify-cms-core/src/components/EditorWidgets/index.js

@@ -1,17 +1,8 @@
 import { registerWidget } from 'Lib/registry';
 import UnknownControl from './Unknown/UnknownControl';
 import UnknownPreview from './Unknown/UnknownPreview';
-import NumberControl from './Number/NumberControl';
-import NumberPreview from './Number/NumberPreview';
-import TextControl from './Text/TextControl';
-import TextPreview from './Text/TextPreview';
-import SelectControl from './Select/SelectControl';
-import SelectPreview from './Select/SelectPreview';
 import RelationControl from './Relation/RelationControl';
 import RelationPreview from './Relation/RelationPreview';
 
-registerWidget('text', TextControl, TextPreview);
-registerWidget('number', NumberControl, NumberPreview);
-registerWidget('select', SelectControl, SelectPreview);
 registerWidget('relation', RelationControl, RelationPreview);
 registerWidget('unknown', UnknownControl, UnknownPreview);

packages/netlify-cms-widget-number/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "netlify-cms-widget-number",
+  "description": "Widget for editing numberic values in Netlify CMS.",
+  "version": "2.0.0-alpha.0",
+  "main": "dist/netlify-cms-widget-number.js",
+  "license": "MIT",
+  "keywords": [
+    "netlify",
+    "netlify-cms",
+    "widget",
+    "number"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "watch": "webpack -w",
+    "build": "webpack"
+  },
+  "devDependencies": {
+    "webpack": "^4.16.1",
+    "webpack-cli": "^3.1.0"
+  },
+  "peerDependencies": {
+    "netlify-cms-ui-default": "^2.0.0-alpha.0",
+    "prop-types": "^15.5.10",
+    "react": "^16.4.1"
+  }
+}

packages/netlify-cms-widget-number/src/NumberPreview.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { WidgetPreviewContainer } from 'netlify-cms-ui-default';
+
+const NumberPreview = ({ value }) => (
+  <WidgetPreviewContainer>{ value }</WidgetPreviewContainer>
+);
+
+NumberPreview.propTypes = {
+  value: PropTypes.node,
+};
+
+export default NumberPreview;

packages/netlify-cms-widget-number/src/index.js

@@ -0,0 +1,2 @@
+export NumberControl from './NumberControl';
+export NumberPreview from './NumberPreview';

packages/netlify-cms-widget-number/webpack.config.js

@@ -0,0 +1,3 @@
+const { getConfig } = require('../../scripts/webpack.js');
+
+module.exports = getConfig();

packages/netlify-cms-widget-select/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "netlify-cms-widget-select",
+  "description": "Selectable values widget for Netlify CMS.",
+  "version": "2.0.0-alpha.0",
+  "main": "dist/netlify-cms-widget-select.js",
+  "license": "MIT",
+  "keywords": [
+    "netlify",
+    "netlify-cms",
+    "widget",
+    "select",
+    "values",
+    "list"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "watch": "webpack -w",
+    "build": "webpack"
+  },
+  "devDependencies": {
+    "webpack": "^4.16.1",
+    "webpack-cli": "^3.1.0"
+  },
+  "peerDependencies": {
+    "immutable": "^3.7.6",
+    "netlify-cms-ui-default": "^2.0.0-alpha.0",
+    "prop-types": "^15.5.10",
+    "react": "^16.4.1",
+    "react-immutable-proptypes": "^2.1.0"
+  }
+}

packages/netlify-cms-widget-select/src/SelectControl.js

@@ -1,5 +1,5 @@
-import PropTypes from 'prop-types';
 import React from 'react';
+import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { Map } from 'immutable';
 

packages/netlify-cms-widget-select/src/SelectPreview.js

@@ -0,0 +1,13 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { WidgetPreviewContainer } from 'netlify-cms-ui-default';
+
+const SelectPreview = ({ value }) => (
+  <WidgetPreviewContainer>{value ? value.toString() : null}</WidgetPreviewContainer>
+)
+
+SelectPreview.propTypes = {
+  value: PropTypes.string,
+};
+
+export default SelectPreview;

packages/netlify-cms-widget-select/src/index.js

@@ -0,0 +1,2 @@
+export SelectControl from './SelectControl';
+export SelectPreview from './SelectPreview';

packages/netlify-cms-widget-select/webpack.config.js

@@ -0,0 +1,3 @@
+const { getConfig } = require('../../scripts/webpack.js');
+
+module.exports = getConfig();

packages/netlify-cms-widget-text/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "netlify-cms-widget-text",
+  "description": "Widget for editing multiline plain string values in Netlify CMS.",
+  "version": "2.0.0-alpha.0",
+  "main": "dist/netlify-cms-widget-text.js",
+  "license": "MIT",
+  "keywords": [
+    "netlify",
+    "netlify-cms",
+    "widget",
+    "string",
+    "text",
+    "textarea",
+    "mulitiline"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "watch": "webpack -w",
+    "build": "webpack"
+  },
+  "dependencies": {
+    "react-textarea-autosize": "^5.2.0"
+  },
+  "devDependencies": {
+    "webpack": "^4.16.1",
+    "webpack-cli": "^3.1.0"
+  },
+  "peerDependencies": {
+    "netlify-cms-ui-default": "^2.0.0-alpha.0",
+    "prop-types": "^15.5.10",
+    "react": "^16.4.1"
+  }
+}

packages/netlify-cms-widget-text/src/TextControl.js

@@ -1,5 +1,5 @@
-import PropTypes from 'prop-types';
 import React from 'react';
+import PropTypes from 'prop-types';
 import Textarea from 'react-textarea-autosize';
 
 export default class TextControl extends React.Component {
@@ -20,8 +20,8 @@ export default class TextControl extends React.Component {
    * Always update to ensure `react-textarea-autosize` properly calculates
    * height. Certain situations, such as this widget being nested in a list
    * item that gets rearranged, can leave the textarea in a minimal height
-   * state. Always updating should generally be low cost, but this should be
-   * optimized in the future.
+   * state. Always updating this particular widget should generally be low cost,
+   * but this should be optimized in the future.
    */
   shouldComponentUpdate(nextProps) {
     return true;

packages/netlify-cms-widget-text/src/TextPreview.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { WidgetPreviewContainer } from 'netlify-cms-ui-default';
+
+const TextPreview = ({ value }) => (
+  <WidgetPreviewContainer>{ value }</WidgetPreviewContainer>
+)
+
+TextPreview.propTypes = {
+  value: PropTypes.node,
+};
+
+export default TextPreview;

packages/netlify-cms-widget-text/src/index.js

@@ -0,0 +1,2 @@
+export TextControl from './TextControl';
+export TextPreview from './TextPreview';

packages/netlify-cms-widget-text/webpack.config.js

@@ -0,0 +1,3 @@
+const { getConfig } = require('../../scripts/webpack.js');
+
+module.exports = getConfig();