temp

package.json

@@ -59,6 +59,7 @@
     "bookshelf": "^0.10.0",
     "bunyan": "^1.8.1",
     "classnames": "~2.2.5",
+    "codemirror": "^5.25.2",
     "crypto": "0.0.3",
     "debounce-promise": "~3.0.1",
     "ejs": "^2.3.4",
@@ -107,6 +108,7 @@
     "react-leaflet": "^1.1.4",
     "react-linkify": "~0.2.0",
     "react-loader": "^2.4.0",
+    "react-markdown": "^2.5.0",
     "react-redux": "~5.0.1",
     "react-router": "~3.0.0",
     "react-router-redux": "~4.0.7",

src/components/button/README.md

@@ -0,0 +1,8 @@
+# Button
+
+```javascript (render)
+import React from 'react';
+import Button from './index';
+
+export default <Button title="Button" />;
+```

src/components/index.js

@@ -0,0 +1,3 @@
+export default {
+  x: '123'
+};

src/components/ui-kit/playground/index.js

@@ -0,0 +1,3 @@
+export const JSXEditor = require('./jsx-editor').default;
+export const LessEditor = require('./less-editor').default;
+export const Preview = require('./preview').default;

src/components/ui-kit/playground/jsx-editor.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import CodeMirror from '../../../external/codemirror';
+
+export default class JSXEditor extends React.Component {
+  shouldComponentUpdate(nextProps) {
+    return nextProps !== this.props;
+  }
+
+  render() {
+    return (
+      <div>
+        <CodeMirror
+          codeText={this.props.code}
+          mode="jsx"
+          onChange={this.props.onChange}
+        />
+      </div>
+    );
+  }
+}

src/components/ui-kit/playground/less-editor.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import isEqual from 'lodash/isEqual';
+
+/**
+ * 1. Сохранение актуальной структуры вкладок
+ * 2. Синхронизация текущих стилей с <style></style> с помощью react-helmet
+ *   - при этом каждая вкладка (то есть файл, напр. button.js) сохраняется независимо
+ *     не затирает результаты компиляции других файлов
+ *     (для этого разумно делать анализ импортов и названия текущего файла
+ *     после чего вставлять комментарии с их названиями)
+ * 3. Сохранение текущего кода во всех вкладках[, если они были изменены]
+ * 4. Использование less.js для компиляции LESS
+ */
+export default class LessEditor extends React.Component {
+  shouldComponentUpdate(nextProps, nextState) {
+    return nextProps !== this.props
+      || !isEqual(nextState, this.state);
+  }
+
+  render() {
+    return (
+      <div>
+      </div>
+    );
+  }
+}

src/components/ui-kit/playground/preview.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import isEqual from 'lodash/isEqual';
+import { connect } from 'react-redux';
+
+import createSelector from '../../../selectors/createSelector';
+import { transformJSX } from './util';
+
+class ExamplePreview extends React.Component {
+  constructor(props, ...args) {
+    super(props, ...args);
+    this.state = { code: props.code };
+
+    if (typeof window === 'undefined') {
+      this.example = { __module: { default: () => {} } };
+    } else {
+      const docs = window.UIKit.docs[this.props.urlName];
+      this.context = docs.context;
+      this.example = docs.examples[this.props.index];
+      this.execute();
+    }
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    return nextProps !== this.props
+      || !isEqual(nextState, this.state);
+  }
+
+  execute = () => {
+    const compiled = transformJSX(this.state.code, { context: this.context });
+    if (this.example.__code === compiled.__code) {
+      return;
+    }
+
+    this.example.__code = compiled.__code;
+    try {
+      this.example.__module = eval(compiled.__code);
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
+  render() {
+    let body;
+    const Component = this.example.__module.default;
+    if (Component instanceof Function) {
+      body = <Component />;
+    } else {
+      body = Component;
+    }
+
+    return (
+      <div className="layout">
+        {body}
+      </div>
+    );
+    // code editor expected
+  }
+}
+
+const mapStateToProps = createSelector(
+  (state, props) => state.getIn(['kit', 'docs', props.urlName, props.index]),
+  code => ({ code })
+);
+
+export default connect()(ExamplePreview);

src/components/ui-kit/unit.js

@@ -0,0 +1,128 @@
+import React from 'react';
+import isEqual from 'lodash/isEqual';
+import debounce from 'lodash/debounce';
+import Markdown from 'react-markdown';
+import { connect } from 'react-redux';
+
+import { CONFIG } from '../../consts/ui-kit';
+import { fetch, transformJSX, transformLess, uiKit } from './playground/util';
+import { JSXEditor, LessEditor, Preview } from './playground';
+
+export default class UnitComponent extends React.Component {
+  static defaultProps = {
+    entry: {
+      docs: {
+        path: ''
+      },
+      url_name: ''
+    }
+  };
+
+  constructor(props, ...args) {
+    super(props, ...args);
+
+    this.state = { docs: {}, jsx: '', isReady: false };
+    uiKit.units.addListener(this.handleUnitsChange);
+  }
+
+  componentDidMount() {
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    return nextProps !== this.props
+      || !isEqual(nextState, this.state);
+  }
+
+  handleUnitsChange = (msg) => {
+    if (msg === this.props.entry.url_name) {
+      console.log(uiKit.fs.getModule(this.props.entry.path));
+    }
+  };
+
+  fetchSources = async () => {
+    const { entry } = this.props;
+    if (entry) {
+      const path = entry.js.url;
+      if (!window.UIKit.fs[path]) {
+        window.UIKit.fs[path] = {};
+      }
+
+      // TODO: create API for fetching locally during development
+      const code = await fetch(CONFIG.js.rootpath.concat(path));
+      this.setState({ jsx: code, isReady: true });
+      this.handleJSXChange.flush();
+      this.handleJSXChange(code);
+    }
+  };
+
+  handleJSXChange = debounce((code) => {
+    const path = this.props.entry.js.url;
+    const compiled = transformJSX(code, { skipES2015Transform: false });
+    const m = getModule(path);
+
+    if (compiled.__code === m.__code) {
+      console.log('Nothing changed!');
+      return;
+    }
+
+    extendModule(path, compiled);
+    try {
+      extendModule(path, eval(compiled.code));
+    } catch (e) {
+      console.log(e);
+    }
+  }, 3000);
+
+  handleLessChange = () => {
+
+  };
+
+  render() {
+    // const req = require.context('..', true, /^\.\/(((api\/client)|(utils\/(browser|command|lang|loader|message|paragraphify|tags|urlGenerator)))|((components|actions|consts|definitions|external|less|pages|(prop-types)|selectors|triggers)\/.*)|([a-zA-Z]{1,}))\.(js|less)$/);
+    // console.log(require.context('../../../node_modules', true, /^\.\/react\/index\.js$/));
+    // console.log(require.resolve('react-dom'));
+
+    let index = 0;
+    return (
+      <div className="layout layout-rows">
+        <div className="layout__row">
+          {this.state.docs.md && this.state.docs.md.map((chunk, i) => {
+            if (chunk.startsWith('```KIT\n')) {
+              return (
+                <Preview
+                  code={chunk.replace('```KIT\n', '')}
+                  index={index++}
+                  key={i}
+                  urlName={this.props.entry.url_name}
+                />
+              );
+            }
+
+            return <Markdown key={i} source={chunk} />;
+          })}
+        </div>
+        {this.state.isReady &&
+          <div className="layout__row">
+            <JSXEditor
+              code={this.state.jsx}
+              onChange={this.handleJSXChange}
+            />
+          </div>
+        }
+        <div className="layout__row">
+          <LessEditor
+            code={this.state.less}
+            onChange={this.handleLessChange}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+// const mapStateToProps = createSelector(
+//   (state, props) => state.getIn(['kit', 'fs', '']),
+//   x => ({ x })
+// );
+
+// export default connect()(Unit);

src/components/ui-kit/units.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import Link from 'react-router/lib/Link';
+
+import { UNITS } from '../../consts/ui-kit';
+
+export default class Units extends React.Component {
+  shouldComponentUpdate(nextProps) {
+    return nextProps !== this.props;
+  }
+
+  render() {
+    return (
+      <div className="layout">
+        {UNITS.map(u =>
+          <Link
+            activeClassName=""
+            className=""
+            key={u.url_name}
+            to={'/kit/'.concat(u.url_name)}
+          >
+            {u.name}
+          </Link>
+        )}
+      </div>
+    );
+  }
+}