These are all the files from the Tabler react repos, made to work with laravel and webpack.

resources/js/App.react.js

@@ -0,0 +1,67 @@
+import * as React from "react";
+import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
+import {
+    ForgotPasswordPage,
+    LoginPage,
+    RegisterPage,
+    Error400,
+    Error401,
+    Error403,
+    Error404,
+    Error500,
+    Error503,
+    Empty,
+    Email,
+    ProfilePage,
+} from "./pages";
+
+import HomePage from "./HomePage.react";
+import FormElementsPage from "./FormElementsPage.react";
+import PricingCardsPage from "./interface/PricingCardsPage.react";
+import CardsDesignPage from "./interface/CardsDesignPage.react";
+import StoreCardsPage from "./components/StoreCardsPage.react.js";
+import IconPage from "./components/IconPage.react.js";
+import ChartsPage from "./interface/ChartsPage.react";
+import GalleryPage from "./GalleryPage.react";
+import MapCardsPage from "./components/MapCardsPage.react";
+import BlogPage from "./components/BlogPage.react";
+
+import "tabler-react/dist/Tabler.css";
+
+type Props = {||};
+
+function App(props: Props): React.Node {
+    return (
+        <React.StrictMode>
+            <Router>
+                <Switch>
+                    <Route exact path="/" component={HomePage} />
+                    <Route exact path="/400" component={Error400} />
+                    <Route exact path="/401" component={Error401} />
+                    <Route exact path="/403" component={Error403} />
+                    <Route exact path="/404" component={Error404} />
+                    <Route exact path="/500" component={Error500} />
+                    <Route exact path="/503" component={Error503} />
+                    <Route exact path="/blog" component={BlogPage} />
+                    <Route exact path="/cards" component={CardsDesignPage} />
+                    <Route exact path="/charts" component={ChartsPage} />
+                    <Route exact path="/email" component={Email} />
+                    <Route exact path="/empty-page" component={Empty} />
+                    <Route exact path="/form-elements" component={FormElementsPage} />
+                    <Route exact path="/forgot-password" component={ForgotPasswordPage} />
+                    <Route exact path="/gallery" component={GalleryPage} />
+                    <Route exact path="/icons" component={IconPage} />
+                    <Route exact path="/login" component={LoginPage} />
+                    <Route exact path="/maps" component={MapCardsPage} />
+                    <Route exact path="/pricing-cards" component={PricingCardsPage} />
+                    <Route exact path="/profile" component={ProfilePage} />
+                    <Route exact path="/register" component={RegisterPage} />
+                    <Route exact path="/store" component={StoreCardsPage} />
+                    <Route component={Error404} />
+                </Switch>
+            </Router>
+        </React.StrictMode>
+    );
+}
+
+export default App;

resources/js/ComponentDemo/ComponentDemo.css

@@ -0,0 +1,10 @@
+.ComponentDemo {
+  position: relative;
+  margin-bottom: 20px;
+}
+
+.ComponentDemo .viewSourceBtn {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}

resources/js/ComponentDemo/ComponentDemo.react.js

@@ -0,0 +1,58 @@
+// @flow
+
+import * as React from "react";
+import cn from "classnames";
+import { Button } from "tabler-react";
+import "./ComponentDemo.css";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { prism } from "react-syntax-highlighter/dist/styles/prism";
+import reactElementToJSXString from "./react-element-to-jsx-string";
+
+type Props = {|
+  +children: React.Element<any>,
+  +className?: string,
+  +asString?: string,
+|};
+
+type State = {|
+  codeOpen: boolean,
+|};
+
+class ComponentDemo extends React.PureComponent<Props, State> {
+  state = {
+    codeOpen: false,
+  };
+  handleSourceButtonOnClick = (e: SyntheticMouseEvent<HTMLInputElement>) => {
+    e.preventDefault();
+    this.setState(s => ({ codeOpen: !s.codeOpen }));
+  };
+
+  render() {
+    const { className, children, asString } = this.props;
+    const { codeOpen } = this.state;
+    const classes = cn("ComponentDemo", className);
+    return (
+      <div className={classes}>
+        <Button
+          onClick={this.handleSourceButtonOnClick}
+          size="sm"
+          color="primary"
+          outline
+          className="viewSourceBtn"
+        >
+          {codeOpen ? "Close" : "Source"}
+        </Button>
+        <div className="example">{children}</div>
+        {codeOpen && (
+          <div className="highlight">
+            <SyntaxHighlighter language="jsx" style={prism}>
+              {asString || reactElementToJSXString(children)}
+            </SyntaxHighlighter>
+          </div>
+        )}
+      </div>
+    );
+  }
+}
+
+export default ComponentDemo;

resources/js/ComponentDemo/index.js

@@ -0,0 +1,3 @@
+import ComponentDemo from "./ComponentDemo.react";
+
+export default ComponentDemo;

resources/js/ComponentDemo/react-element-to-jsx-string/AnonymousStatelessComponent.js

@@ -0,0 +1,18 @@
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+exports.default = function(props) {
+  var children = props.children; // eslint-disable-line react/prop-types
+
+  return _react2.default.createElement("div", null, children);
+};
+
+var _react = require("react");
+
+var _react2 = _interopRequireDefault(_react);
+
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
+//# sourceMappingURL=AnonymousStatelessComponent.js.map

resources/js/ComponentDemo/react-element-to-jsx-string/AnonymousStatelessComponent.js.flow

@@ -0,0 +1,7 @@
+import React from 'react';
+
+// eslint-disable-next-line react/display-name
+export default function(props) {
+  const { children } = props; // eslint-disable-line react/prop-types
+  return <div>{children}</div>;
+}

resources/js/ComponentDemo/react-element-to-jsx-string/AnonymousStatelessComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/AnonymousStatelessComponent.js"],"names":["props","children"],"mappings":";;;;;;kBAGe,UAASA,KAAT,EAAgB;AAAA,MACrBC,QADqB,GACRD,KADQ,CACrBC,QADqB,EACD;;AAC5B,SAAO;AAAA;AAAA;AAAMA;AAAN,GAAP;AACD,C;;AAND","file":"AnonymousStatelessComponent.js","sourcesContent":["import React from 'react';\n\n// eslint-disable-next-line react/display-name\nexport default function(props) {\n  const { children } = props; // eslint-disable-line react/prop-types\n  return <div>{children}</div>;\n}\n"]}

resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatComplexDataStructure.js

@@ -0,0 +1,74 @@
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+var _react = require("react");
+
+var _stringifyObject = require("../stringifyObject");
+
+var _stringifyObject2 = _interopRequireDefault(_stringifyObject);
+
+var _sortObject = require("./sortObject");
+
+var _sortObject2 = _interopRequireDefault(_sortObject);
+
+var _parseReactElement = require("./../parser/parseReactElement");
+
+var _parseReactElement2 = _interopRequireDefault(_parseReactElement);
+
+var _formatTreeNode = require("./formatTreeNode");
+
+var _formatTreeNode2 = _interopRequireDefault(_formatTreeNode);
+
+var _spacer = require("./spacer");
+
+var _spacer2 = _interopRequireDefault(_spacer);
+
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
+
+function noRefCheck() {}
+
+exports.default = function(value, inline, lvl, options) {
+  var normalizedValue = (0, _sortObject2.default)(value);
+
+  var stringifiedValue = (0, _stringifyObject2.default)(normalizedValue, {
+    transform: function transform(currentObj, prop, originalResult) {
+      var currentValue = currentObj[prop];
+
+      if (currentValue && (0, _react.isValidElement)(currentValue)) {
+        return (0, _formatTreeNode2.default)(
+          (0, _parseReactElement2.default)(currentValue, options),
+          true,
+          lvl,
+          options
+        );
+      }
+
+      if (typeof currentValue === "function") {
+        return noRefCheck;
+      }
+
+      return originalResult;
+    },
+  });
+
+  if (inline) {
+    return stringifiedValue
+      .replace(/\s+/g, " ")
+      .replace(/{ /g, "{")
+      .replace(/ }/g, "}")
+      .replace(/\[ /g, "[")
+      .replace(/ ]/g, "]");
+  }
+
+  // Replace tabs with spaces, and add necessary indentation in front of each new line
+  return stringifiedValue
+    .replace(/\t/g, (0, _spacer2.default)(1, options.tabStop))
+    .replace(
+      /\n([^$])/g,
+      "\n" + (0, _spacer2.default)(lvl + 1, options.tabStop) + "$1"
+    );
+};
+//# sourceMappingURL=formatComplexDataStructure.js.map

resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatComplexDataStructure.js.flow

@@ -0,0 +1,55 @@
+/* @flow */
+
+import { isValidElement } from 'react';
+import stringify from 'stringify-object';
+import sortObject from './sortObject';
+import parseReactElement from './../parser/parseReactElement';
+import formatTreeNode from './formatTreeNode';
+import spacer from './spacer';
+import type { Options } from './../options';
+
+function noRefCheck() {}
+
+export default (
+  value: Object | Array<any>,
+  inline: boolean,
+  lvl: number,
+  options: Options
+): string => {
+  const normalizedValue = sortObject(value);
+
+  const stringifiedValue = stringify(normalizedValue, {
+    transform: (currentObj, prop, originalResult) => {
+      const currentValue = currentObj[prop];
+
+      if (currentValue && isValidElement(currentValue)) {
+        return formatTreeNode(
+          parseReactElement(currentValue, options),
+          true,
+          lvl,
+          options
+        );
+      }
+
+      if (typeof currentValue === 'function') {
+        return noRefCheck;
+      }
+
+      return originalResult;
+    },
+  });
+
+  if (inline) {
+    return stringifiedValue
+      .replace(/\s+/g, ' ')
+      .replace(/{ /g, '{')
+      .replace(/ }/g, '}')
+      .replace(/\[ /g, '[')
+      .replace(/ ]/g, ']');
+  }
+
+  // Replace tabs with spaces, and add necessary indentation in front of each new line
+  return stringifiedValue
+    .replace(/\t/g, spacer(1, options.tabStop))
+    .replace(/\n([^$])/g, `\n${spacer(lvl + 1, options.tabStop)}$1`);
+};

resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatComplexDataStructure.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/formatter/formatComplexDataStructure.js"],"names":["noRefCheck","value","inline","lvl","options","normalizedValue","stringifiedValue","transform","currentObj","prop","originalResult","currentValue","replace","tabStop"],"mappings":";;;;;;AAEA;;AACA;;;;AACA;;;;AACA;;;;AACA;;;;AACA;;;;;;AAGA,SAASA,UAAT,GAAsB,CAAE;;kBAET,UACbC,KADa,EAEbC,MAFa,EAGbC,GAHa,EAIbC,OAJa,EAKF;AACX,MAAMC,kBAAkB,0BAAWJ,KAAX,CAAxB;;AAEA,MAAMK,mBAAmB,+BAAUD,eAAV,EAA2B;AAClDE,eAAW,mBAACC,UAAD,EAAaC,IAAb,EAAmBC,cAAnB,EAAsC;AAC/C,UAAMC,eAAeH,WAAWC,IAAX,CAArB;;AAEA,UAAIE,gBAAgB,2BAAeA,YAAf,CAApB,EAAkD;AAChD,eAAO,8BACL,iCAAkBA,YAAlB,EAAgCP,OAAhC,CADK,EAEL,IAFK,EAGLD,GAHK,EAILC,OAJK,CAAP;AAMD;;AAED,UAAI,OAAOO,YAAP,KAAwB,UAA5B,EAAwC;AACtC,eAAOX,UAAP;AACD;;AAED,aAAOU,cAAP;AACD;AAlBiD,GAA3B,CAAzB;;AAqBA,MAAIR,MAAJ,EAAY;AACV,WAAOI,iBACJM,OADI,CACI,MADJ,EACY,GADZ,EAEJA,OAFI,CAEI,KAFJ,EAEW,GAFX,EAGJA,OAHI,CAGI,KAHJ,EAGW,GAHX,EAIJA,OAJI,CAII,MAJJ,EAIY,GAJZ,EAKJA,OALI,CAKI,KALJ,EAKW,GALX,CAAP;AAMD;;AAED;AACA,SAAON,iBACJM,OADI,CACI,KADJ,EACW,sBAAO,CAAP,EAAUR,QAAQS,OAAlB,CADX,EAEJD,OAFI,CAEI,WAFJ,SAEsB,sBAAOT,MAAM,CAAb,EAAgBC,QAAQS,OAAxB,CAFtB,QAAP;AAGD,C","file":"formatComplexDataStructure.js","sourcesContent":["/* @flow */\n\nimport { isValidElement } from 'react';\nimport stringify from '../stringifyObject';\nimport sortObject from './sortObject';\nimport parseReactElement from './../parser/parseReactElement';\nimport formatTreeNode from './formatTreeNode';\nimport spacer from './spacer';\nimport type { Options } from './../options';\n\nfunction noRefCheck() {}\n\nexport default (\n  value: Object | Array<any>,\n  inline: boolean,\n  lvl: number,\n  options: Options\n): string => {\n  const normalizedValue = sortObject(value);\n\n  const stringifiedValue = stringify(normalizedValue, {\n    transform: (currentObj, prop, originalResult) => {\n      const currentValue = currentObj[prop];\n\n      if (currentValue && isValidElement(currentValue)) {\n        return formatTreeNode(\n          parseReactElement(currentValue, options),\n          true,\n          lvl,\n          options\n        );\n      }\n\n      if (typeof currentValue === 'function') {\n        return noRefCheck;\n      }\n\n      return originalResult;\n    },\n  });\n\n  if (inline) {\n    return stringifiedValue\n      .replace(/\\s+/g, ' ')\n      .replace(/{ /g, '{')\n      .replace(/ }/g, '}')\n      .replace(/\\[ /g, '[')\n      .replace(/ ]/g, ']');\n  }\n\n  // Replace tabs with spaces, and add necessary indentation in front of each new line\n  return stringifiedValue\n    .replace(/\\t/g, spacer(1, options.tabStop))\n    .replace(/\\n([^$])/g, `\\n${spacer(lvl + 1, options.tabStop)}$1`);\n};\n"]}

resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatProp.js

@@ -0,0 +1,74 @@
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+var _spacer = require("./spacer");
+
+var _spacer2 = _interopRequireDefault(_spacer);
+
+var _formatPropValue = require("./formatPropValue");
+
+var _formatPropValue2 = _interopRequireDefault(_formatPropValue);
+
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
+
+exports.default = function(
+  name,
+  hasValue,
+  value,
+  hasDefaultValue,
+  defaultValue,
+  inline,
+  lvl,
+  options
+) {
+  if (!hasValue && !hasDefaultValue) {
+    throw new Error(
+      'The prop "' +
+        name +
+        '" has no value and no default: could not be formatted'
+    );
+  }
+
+  var usedValue = hasValue ? value : defaultValue;
+
+  var useBooleanShorthandSyntax = options.useBooleanShorthandSyntax,
+    tabStop = options.tabStop;
+
+  var formattedPropValue = (0, _formatPropValue2.default)(
+    usedValue,
+    inline,
+    lvl,
+    options
+  );
+
+  var attributeFormattedInline = " ";
+  var attributeFormattedMultiline =
+    "\n" + (0, _spacer2.default)(lvl + 1, tabStop);
+  var isMultilineAttribute = formattedPropValue.includes("\n");
+
+  if (
+    useBooleanShorthandSyntax &&
+    formattedPropValue === "{false}" &&
+    !hasDefaultValue
+  ) {
+    // If a boolean is false and not different from it's default, we do not render the attribute
+    attributeFormattedInline = "";
+    attributeFormattedMultiline = "";
+  } else if (useBooleanShorthandSyntax && formattedPropValue === "{true}") {
+    attributeFormattedInline += "" + name;
+    attributeFormattedMultiline += "" + name;
+  } else {
+    attributeFormattedInline += name + "=" + formattedPropValue;
+    attributeFormattedMultiline += name + "=" + formattedPropValue;
+  }
+
+  return {
+    attributeFormattedInline: attributeFormattedInline,
+    attributeFormattedMultiline: attributeFormattedMultiline,
+    isMultilineAttribute: isMultilineAttribute,
+  };
+};
+//# sourceMappingURL=formatProp.js.map

resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatProp.js.flow

@@ -0,0 +1,58 @@
+/* @flow */
+
+import spacer from './spacer';
+import formatPropValue from './formatPropValue';
+import type { Options } from './../options';
+
+export default (
+  name: string,
+  hasValue: boolean,
+  value: any,
+  hasDefaultValue: boolean,
+  defaultValue: any,
+  inline: boolean,
+  lvl: number,
+  options: Options
+): {
+  attributeFormattedInline: string,
+  attributeFormattedMultiline: string,
+  isMultilineAttribute: boolean,
+} => {
+  if (!hasValue && !hasDefaultValue) {
+    throw new Error(
+      `The prop "${name}" has no value and no default: could not be formatted`
+    );
+  }
+
+  const usedValue = hasValue ? value : defaultValue;
+
+  const { useBooleanShorthandSyntax, tabStop } = options;
+
+  const formattedPropValue = formatPropValue(usedValue, inline, lvl, options);
+
+  let attributeFormattedInline = ' ';
+  let attributeFormattedMultiline = `\n${spacer(lvl + 1, tabStop)}`;
+  const isMultilineAttribute = formattedPropValue.includes('\n');
+
+  if (
+    useBooleanShorthandSyntax &&
+    formattedPropValue === '{false}' &&
+    !hasDefaultValue
+  ) {
+    // If a boolean is false and not different from it's default, we do not render the attribute
+    attributeFormattedInline = '';
+    attributeFormattedMultiline = '';
+  } else if (useBooleanShorthandSyntax && formattedPropValue === '{true}') {
+    attributeFormattedInline += `${name}`;
+    attributeFormattedMultiline += `${name}`;
+  } else {
+    attributeFormattedInline += `${name}=${formattedPropValue}`;
+    attributeFormattedMultiline += `${name}=${formattedPropValue}`;
+  }
+
+  return {
+    attributeFormattedInline,
+    attributeFormattedMultiline,
+    isMultilineAttribute,
+  };
+};

resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatProp.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/formatter/formatProp.js"],"names":["name","hasValue","value","hasDefaultValue","defaultValue","inline","lvl","options","Error","usedValue","useBooleanShorthandSyntax","tabStop","formattedPropValue","attributeFormattedInline","attributeFormattedMultiline","isMultilineAttribute","includes"],"mappings":";;;;;;AAEA;;;;AACA;;;;;;kBAGe,UACbA,IADa,EAEbC,QAFa,EAGbC,KAHa,EAIbC,eAJa,EAKbC,YALa,EAMbC,MANa,EAObC,GAPa,EAQbC,OARa,EAaV;AACH,MAAI,CAACN,QAAD,IAAa,CAACE,eAAlB,EAAmC;AACjC,UAAM,IAAIK,KAAJ,gBACSR,IADT,2DAAN;AAGD;;AAED,MAAMS,YAAYR,WAAWC,KAAX,GAAmBE,YAArC;;AAPG,MASKM,yBATL,GAS4CH,OAT5C,CASKG,yBATL;AAAA,MASgCC,OAThC,GAS4CJ,OAT5C,CASgCI,OAThC;;;AAWH,MAAMC,qBAAqB,+BAAgBH,SAAhB,EAA2BJ,MAA3B,EAAmCC,GAAnC,EAAwCC,OAAxC,CAA3B;;AAEA,MAAIM,2BAA2B,GAA/B;AACA,MAAIC,qCAAmC,sBAAOR,MAAM,CAAb,EAAgBK,OAAhB,CAAvC;AACA,MAAMI,uBAAuBH,mBAAmBI,QAAnB,CAA4B,IAA5B,CAA7B;;AAEA,MACEN,6BACAE,uBAAuB,SADvB,IAEA,CAACT,eAHH,EAIE;AACA;AACAU,+BAA2B,EAA3B;AACAC,kCAA8B,EAA9B;AACD,GARD,MAQO,IAAIJ,6BAA6BE,uBAAuB,QAAxD,EAAkE;AACvEC,qCAA+Bb,IAA/B;AACAc,wCAAkCd,IAAlC;AACD,GAHM,MAGA;AACLa,gCAA+Bb,IAA/B,SAAuCY,kBAAvC;AACAE,mCAAkCd,IAAlC,SAA0CY,kBAA1C;AACD;;AAED,SAAO;AACLC,sDADK;AAELC,4DAFK;AAGLC;AAHK,GAAP;AAKD,C","file":"formatProp.js","sourcesContent":["/* @flow */\n\nimport spacer from './spacer';\nimport formatPropValue from './formatPropValue';\nimport type { Options } from './../options';\n\nexport default (\n  name: string,\n  hasValue: boolean,\n  value: any,\n  hasDefaultValue: boolean,\n  defaultValue: any,\n  inline: boolean,\n  lvl: number,\n  options: Options\n): {\n  attributeFormattedInline: string,\n  attributeFormattedMultiline: string,\n  isMultilineAttribute: boolean,\n} => {\n  if (!hasValue && !hasDefaultValue) {\n    throw new Error(\n      `The prop \"${name}\" has no value and no default: could not be formatted`\n    );\n  }\n\n  const usedValue = hasValue ? value : defaultValue;\n\n  const { useBooleanShorthandSyntax, tabStop } = options;\n\n  const formattedPropValue = formatPropValue(usedValue, inline, lvl, options);\n\n  let attributeFormattedInline = ' ';\n  let attributeFormattedMultiline = `\\n${spacer(lvl + 1, tabStop)}`;\n  const isMultilineAttribute = formattedPropValue.includes('\\n');\n\n  if (\n    useBooleanShorthandSyntax &&\n    formattedPropValue === '{false}' &&\n    !hasDefaultValue\n  ) {\n    // If a boolean is false and not different from it's default, we do not render the attribute\n    attributeFormattedInline = '';\n    attributeFormattedMultiline = '';\n  } else if (useBooleanShorthandSyntax && formattedPropValue === '{true}') {\n    attributeFormattedInline += `${name}`;\n    attributeFormattedMultiline += `${name}`;\n  } else {\n    attributeFormattedInline += `${name}=${formattedPropValue}`;\n    attributeFormattedMultiline += `${name}=${formattedPropValue}`;\n  }\n\n  return {\n    attributeFormattedInline,\n    attributeFormattedMultiline,\n    isMultilineAttribute,\n  };\n};\n"]}

resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatPropValue.js

@@ -0,0 +1,134 @@
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+var _typeof =
+  typeof Symbol === "function" && typeof Symbol.iterator === "symbol"
+    ? function(obj) {
+        return typeof obj;
+      }
+    : function(obj) {
+        return obj &&
+          typeof Symbol === "function" &&
+          obj.constructor === Symbol &&
+          obj !== Symbol.prototype
+          ? "symbol"
+          : typeof obj;
+      };
+
+var _isPlainObject = require("is-plain-object");
+
+var _isPlainObject2 = _interopRequireDefault(_isPlainObject);
+
+var _react = require("react");
+
+var _formatComplexDataStructure = require("./formatComplexDataStructure");
+
+var _formatComplexDataStructure2 = _interopRequireDefault(
+  _formatComplexDataStructure
+);
+
+var _formatTreeNode = require("./formatTreeNode");
+
+var _formatTreeNode2 = _interopRequireDefault(_formatTreeNode);
+
+var _parseReactElement = require("./../parser/parseReactElement");
+
+var _parseReactElement2 = _interopRequireDefault(_parseReactElement);
+
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
+
+var noRefCheck = function noRefCheck() {};
+var escape = function escape(s) {
+  return s.replace(/"/g, """);
+};
+
+var defaultFunctionValue = function defaultFunctionValue(fn) {
+  return fn;
+};
+
+var formatPropValue = function formatPropValue(
+  propValue,
+  inline,
+  lvl,
+  options
+) {
+  if (typeof propValue === "number") {
+    return "{" + String(propValue) + "}";
+  }
+
+  if (typeof propValue === "string") {
+    return '"' + escape(propValue) + '"';
+  }
+
+  // > "Symbols (new in ECMAScript 2015, not yet supported in Flow)"
+  // @see: https://flow.org/en/docs/types/primitives/
+  // $FlowFixMe: Flow does not support Symbol
+  if (
+    (typeof propValue === "undefined" ? "undefined" : _typeof(propValue)) ===
+    "symbol"
+  ) {
+    var symbolDescription = propValue
+      .valueOf()
+      .toString()
+      .replace(/Symbol\((.*)\)/, "$1");
+
+    if (!symbolDescription) {
+      return "{Symbol()}";
+    }
+
+    return "{Symbol('" + symbolDescription + "')}";
+  }
+
+  if (typeof propValue === "function") {
+    var _options$functionValu = options.functionValue,
+      functionValue =
+        _options$functionValu === undefined
+          ? defaultFunctionValue
+          : _options$functionValu,
+      showFunctions = options.showFunctions;
+
+    if (!showFunctions && functionValue === defaultFunctionValue) {
+      return "{" + functionValue(noRefCheck) + "}";
+    }
+
+    return "{" + functionValue(propValue) + "}";
+  }
+
+  if ((0, _react.isValidElement)(propValue)) {
+    return (
+      "{" +
+      (0, _formatTreeNode2.default)(
+        (0, _parseReactElement2.default)(propValue, options),
+        true,
+        lvl,
+        options
+      ) +
+      "}"
+    );
+  }
+
+  if (propValue instanceof Date) {
+    return '{new Date("' + propValue.toISOString() + '")}';
+  }
+
+  if ((0, _isPlainObject2.default)(propValue) || Array.isArray(propValue)) {
+    return (
+      "{" +
+      (0, _formatComplexDataStructure2.default)(
+        propValue,
+        inline,
+        lvl,
+        options
+      ) +
+      "}"
+    );
+  }
+
+  return "{" + String(propValue) + "}";
+};
+
+exports.default = formatPropValue;
+//# sourceMappingURL=formatPropValue.js.map

resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatPropValue.js.flow

@@ -0,0 +1,74 @@
+/* @flow */
+
+import isPlainObject from 'is-plain-object';
+import { isValidElement } from 'react';
+import formatComplexDataStructure from './formatComplexDataStructure';
+import formatTreeNode from './formatTreeNode';
+import type { Options } from './../options';
+import parseReactElement from './../parser/parseReactElement';
+
+const noRefCheck = () => {};
+const escape = (s: string): string => s.replace(/"/g, '"');
+
+const defaultFunctionValue = (fn: any): any => fn;
+
+const formatPropValue = (
+  propValue: any,
+  inline: boolean,
+  lvl: number,
+  options: Options
+): string => {
+  if (typeof propValue === 'number') {
+    return `{${String(propValue)}}`;
+  }
+
+  if (typeof propValue === 'string') {
+    return `"${escape(propValue)}"`;
+  }
+
+  // > "Symbols (new in ECMAScript 2015, not yet supported in Flow)"
+  // @see: https://flow.org/en/docs/types/primitives/
+  // $FlowFixMe: Flow does not support Symbol
+  if (typeof propValue === 'symbol') {
+    const symbolDescription = propValue
+      .valueOf()
+      .toString()
+      .replace(/Symbol\((.*)\)/, '$1');
+
+    if (!symbolDescription) {
+      return `{Symbol()}`;
+    }
+
+    return `{Symbol('${symbolDescription}')}`;
+  }
+
+  if (typeof propValue === 'function') {
+    const { functionValue = defaultFunctionValue, showFunctions } = options;
+    if (!showFunctions && functionValue === defaultFunctionValue) {
+      return `{${functionValue(noRefCheck)}}`;
+    }
+
+    return `{${functionValue(propValue)}}`;
+  }
+
+  if (isValidElement(propValue)) {
+    return `{${formatTreeNode(
+      parseReactElement(propValue, options),
+      true,
+      lvl,
+      options
+    )}}`;
+  }
+
+  if (propValue instanceof Date) {
+    return `{new Date("${propValue.toISOString()}")}`;
+  }
+
+  if (isPlainObject(propValue) || Array.isArray(propValue)) {
+    return `{${formatComplexDataStructure(propValue, inline, lvl, options)}}`;
+  }
+
+  return `{${String(propValue)}}`;
+};
+
+export default formatPropValue;

resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatPropValue.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/formatter/formatPropValue.js"],"names":["noRefCheck","escape","s","replace","defaultFunctionValue","fn","formatPropValue","propValue","inline","lvl","options","String","symbolDescription","valueOf","toString","functionValue","showFunctions","Date","toISOString","Array","isArray"],"mappings":";;;;;;;;AAEA;;;;AACA;;AACA;;;;AACA;;;;AAEA;;;;;;AAEA,IAAMA,aAAa,SAAbA,UAAa,GAAM,CAAE,CAA3B;AACA,IAAMC,SAAS,SAATA,MAAS,CAACC,CAAD;AAAA,SAAuBA,EAAEC,OAAF,CAAU,IAAV,EAAgB,QAAhB,CAAvB;AAAA,CAAf;;AAEA,IAAMC,uBAAuB,SAAvBA,oBAAuB,CAACC,EAAD;AAAA,SAAkBA,EAAlB;AAAA,CAA7B;;AAEA,IAAMC,kBAAkB,SAAlBA,eAAkB,CACtBC,SADsB,EAEtBC,MAFsB,EAGtBC,GAHsB,EAItBC,OAJsB,EAKX;AACX,MAAI,OAAOH,SAAP,KAAqB,QAAzB,EAAmC;AACjC,iBAAWI,OAAOJ,SAAP,CAAX;AACD;;AAED,MAAI,OAAOA,SAAP,KAAqB,QAAzB,EAAmC;AACjC,iBAAWN,OAAOM,SAAP,CAAX;AACD;;AAED;AACA;AACA;AACA,MAAI,QAAOA,SAAP,yCAAOA,SAAP,OAAqB,QAAzB,EAAmC;AACjC,QAAMK,oBAAoBL,UACvBM,OADuB,GAEvBC,QAFuB,GAGvBX,OAHuB,CAGf,gBAHe,EAGG,IAHH,CAA1B;;AAKA,QAAI,CAACS,iBAAL,EAAwB;AACtB;AACD;;AAED,0BAAmBA,iBAAnB;AACD;;AAED,MAAI,OAAOL,SAAP,KAAqB,UAAzB,EAAqC;AAAA,gCAC6BG,OAD7B,CAC3BK,aAD2B;AAAA,QAC3BA,aAD2B,yCACXX,oBADW;AAAA,QACWY,aADX,GAC6BN,OAD7B,CACWM,aADX;;AAEnC,QAAI,CAACA,aAAD,IAAkBD,kBAAkBX,oBAAxC,EAA8D;AAC5D,mBAAWW,cAAcf,UAAd,CAAX;AACD;;AAED,iBAAWe,cAAcR,SAAd,CAAX;AACD;;AAED,MAAI,2BAAeA,SAAf,CAAJ,EAA+B;AAC7B,iBAAW,8BACT,iCAAkBA,SAAlB,EAA6BG,OAA7B,CADS,EAET,IAFS,EAGTD,GAHS,EAITC,OAJS,CAAX;AAMD;;AAED,MAAIH,qBAAqBU,IAAzB,EAA+B;AAC7B,2BAAqBV,UAAUW,WAAV,EAArB;AACD;;AAED,MAAI,6BAAcX,SAAd,KAA4BY,MAAMC,OAAN,CAAcb,SAAd,CAAhC,EAA0D;AACxD,iBAAW,0CAA2BA,SAA3B,EAAsCC,MAAtC,EAA8CC,GAA9C,EAAmDC,OAAnD,CAAX;AACD;;AAED,eAAWC,OAAOJ,SAAP,CAAX;AACD,CAzDD;;kBA2DeD,e","file":"formatPropValue.js","sourcesContent":["/* @flow */\n\nimport isPlainObject from 'is-plain-object';\nimport { isValidElement } from 'react';\nimport formatComplexDataStructure from './formatComplexDataStructure';\nimport formatTreeNode from './formatTreeNode';\nimport type { Options } from './../options';\nimport parseReactElement from './../parser/parseReactElement';\n\nconst noRefCheck = () => {};\nconst escape = (s: string): string => s.replace(/\"/g, '"');\n\nconst defaultFunctionValue = (fn: any): any => fn;\n\nconst formatPropValue = (\n  propValue: any,\n  inline: boolean,\n  lvl: number,\n  options: Options\n): string => {\n  if (typeof propValue === 'number') {\n    return `{${String(propValue)}}`;\n  }\n\n  if (typeof propValue === 'string') {\n    return `\"${escape(propValue)}\"`;\n  }\n\n  // > \"Symbols (new in ECMAScript 2015, not yet supported in Flow)\"\n  // @see: https://flow.org/en/docs/types/primitives/\n  // $FlowFixMe: Flow does not support Symbol\n  if (typeof propValue === 'symbol') {\n    const symbolDescription = propValue\n      .valueOf()\n      .toString()\n      .replace(/Symbol\\((.*)\\)/, '$1');\n\n    if (!symbolDescription) {\n      return `{Symbol()}`;\n    }\n\n    return `{Symbol('${symbolDescription}')}`;\n  }\n\n  if (typeof propValue === 'function') {\n    const { functionValue = defaultFunctionValue, showFunctions } = options;\n    if (!showFunctions && functionValue === defaultFunctionValue) {\n      return `{${functionValue(noRefCheck)}}`;\n    }\n\n    return `{${functionValue(propValue)}}`;\n  }\n\n  if (isValidElement(propValue)) {\n    return `{${formatTreeNode(\n      parseReactElement(propValue, options),\n      true,\n      lvl,\n      options\n    )}}`;\n  }\n\n  if (propValue instanceof Date) {\n    return `{new Date(\"${propValue.toISOString()}\")}`;\n  }\n\n  if (isPlainObject(propValue) || Array.isArray(propValue)) {\n    return `{${formatComplexDataStructure(propValue, inline, lvl, options)}}`;\n  }\n\n  return `{${String(propValue)}}`;\n};\n\nexport default formatPropValue;\n"]}

resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatReactElementNode.js

@@ -0,0 +1,257 @@
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+var _spacer = require("./spacer");
+
+var _spacer2 = _interopRequireDefault(_spacer);
+
+var _formatTreeNode = require("./formatTreeNode");
+
+var _formatTreeNode2 = _interopRequireDefault(_formatTreeNode);
+
+var _formatProp2 = require("./formatProp");
+
+var _formatProp3 = _interopRequireDefault(_formatProp2);
+
+var _mergeSiblingPlainStringChildrenReducer = require("./mergeSiblingPlainStringChildrenReducer");
+
+var _mergeSiblingPlainStringChildrenReducer2 = _interopRequireDefault(
+  _mergeSiblingPlainStringChildrenReducer
+);
+
+var _propNameSorter = require("./propNameSorter");
+
+var _propNameSorter2 = _interopRequireDefault(_propNameSorter);
+
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
+
+var compensateMultilineStringElementIndentation = function compensateMultilineStringElementIndentation(
+  element,
+  formattedElement,
+  inline,
+  lvl,
+  options
+) {
+  var tabStop = options.tabStop;
+
+  if (element.type === "string") {
+    return formattedElement
+      .split("\n")
+      .map(function(line, offset) {
+        if (offset === 0) {
+          return line;
+        }
+
+        return "" + (0, _spacer2.default)(lvl, tabStop) + line;
+      })
+      .join("\n");
+  }
+
+  return formattedElement;
+};
+
+var formatOneChildren = function formatOneChildren(inline, lvl, options) {
+  return function(element) {
+    return compensateMultilineStringElementIndentation(
+      element,
+      (0, _formatTreeNode2.default)(element, inline, lvl, options),
+      inline,
+      lvl,
+      options
+    );
+  };
+};
+
+var onlyPropsWithOriginalValue = function onlyPropsWithOriginalValue(
+  defaultProps,
+  props
+) {
+  return function(propName) {
+    var haveDefaultValue = Object.keys(defaultProps).includes(propName);
+    return (
+      !haveDefaultValue ||
+      (haveDefaultValue && defaultProps[propName] !== props[propName])
+    );
+  };
+};
+
+var isInlineAttributeTooLong = function isInlineAttributeTooLong(
+  attributes,
+  inlineAttributeString,
+  lvl,
+  tabStop,
+  maxInlineAttributesLineLength
+) {
+  if (!maxInlineAttributesLineLength) {
+    return attributes.length > 1;
+  }
+
+  return (
+    (0, _spacer2.default)(lvl, tabStop).length + inlineAttributeString.length >
+    maxInlineAttributesLineLength
+  );
+};
+
+var shouldRenderMultilineAttr = function shouldRenderMultilineAttr(
+  attributes,
+  inlineAttributeString,
+  containsMultilineAttr,
+  inline,
+  lvl,
+  tabStop,
+  maxInlineAttributesLineLength
+) {
+  return (
+    (isInlineAttributeTooLong(
+      attributes,
+      inlineAttributeString,
+      lvl,
+      tabStop,
+      maxInlineAttributesLineLength
+    ) ||
+      containsMultilineAttr) &&
+    !inline
+  );
+};
+
+exports.default = function(node, inline, lvl, options) {
+  var type = node.type,
+    _node$displayName = node.displayName,
+    displayName = _node$displayName === undefined ? "" : _node$displayName,
+    childrens = node.childrens,
+    _node$props = node.props,
+    props = _node$props === undefined ? {} : _node$props,
+    _node$defaultProps = node.defaultProps,
+    defaultProps = _node$defaultProps === undefined ? {} : _node$defaultProps;
+
+  if (type !== "ReactElement") {
+    throw new Error(
+      'The "formatReactElementNode" function could only format node of type "ReactElement". Given:  ' +
+        type
+    );
+  }
+
+  var filterProps = options.filterProps,
+    maxInlineAttributesLineLength = options.maxInlineAttributesLineLength,
+    showDefaultProps = options.showDefaultProps,
+    sortProps = options.sortProps,
+    tabStop = options.tabStop;
+
+  var out = "<" + displayName;
+
+  var outInlineAttr = out;
+  var outMultilineAttr = out;
+  var containsMultilineAttr = false;
+
+  var visibleAttributeNames = [];
+
+  Object.keys(props)
+    .filter(function(propName) {
+      return filterProps.indexOf(propName) === -1;
+    })
+    .filter(onlyPropsWithOriginalValue(defaultProps, props))
+    .forEach(function(propName) {
+      return visibleAttributeNames.push(propName);
+    });
+
+  Object.keys(defaultProps)
+    .filter(function(defaultPropName) {
+      return filterProps.indexOf(defaultPropName) === -1;
+    })
+    .filter(function() {
+      return showDefaultProps;
+    })
+    .filter(function(defaultPropName) {
+      return !visibleAttributeNames.includes(defaultPropName);
+    })
+    .forEach(function(defaultPropName) {
+      return visibleAttributeNames.push(defaultPropName);
+    });
+
+  var attributes = visibleAttributeNames.sort(
+    (0, _propNameSorter2.default)(sortProps)
+  );
+
+  attributes.forEach(function(attributeName) {
+    var _formatProp = (0, _formatProp3.default)(
+        attributeName,
+        Object.keys(props).includes(attributeName),
+        props[attributeName],
+        Object.keys(defaultProps).includes(attributeName),
+        defaultProps[attributeName],
+        inline,
+        lvl,
+        options
+      ),
+      attributeFormattedInline = _formatProp.attributeFormattedInline,
+      attributeFormattedMultiline = _formatProp.attributeFormattedMultiline,
+      isMultilineAttribute = _formatProp.isMultilineAttribute;
+
+    if (isMultilineAttribute) {
+      containsMultilineAttr = true;
+    }
+
+    outInlineAttr += attributeFormattedInline;
+    outMultilineAttr += attributeFormattedMultiline;
+  });
+
+  outMultilineAttr += "\n" + (0, _spacer2.default)(lvl, tabStop);
+
+  if (
+    shouldRenderMultilineAttr(
+      attributes,
+      outInlineAttr,
+      containsMultilineAttr,
+      inline,
+      lvl,
+      tabStop,
+      maxInlineAttributesLineLength
+    )
+  ) {
+    out = outMultilineAttr;
+  } else {
+    out = outInlineAttr;
+  }
+
+  if (childrens && childrens.length > 0) {
+    var newLvl = lvl + 1;
+
+    out += ">";
+
+    if (!inline) {
+      out += "\n";
+      out += (0, _spacer2.default)(newLvl, tabStop);
+    }
+
+    out += childrens
+      .reduce(_mergeSiblingPlainStringChildrenReducer2.default, [])
+      .map(formatOneChildren(inline, newLvl, options))
+      .join(!inline ? "\n" + (0, _spacer2.default)(newLvl, tabStop) : "");
+
+    if (!inline) {
+      out += "\n";
+      out += (0, _spacer2.default)(newLvl - 1, tabStop);
+    }
+    out += "</" + displayName + ">";
+  } else {
+    if (
+      !isInlineAttributeTooLong(
+        attributes,
+        outInlineAttr,
+        lvl,
+        tabStop,
+        maxInlineAttributesLineLength
+      )
+    ) {
+      out += " ";
+    }
+
+    out += "/>";
+  }
+
+  return out;
+};
+//# sourceMappingURL=formatReactElementNode.js.map

resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatReactElementNode.js.flow

@@ -0,0 +1,223 @@
+/* @flow */
+
+import spacer from './spacer';
+import formatTreeNode from './formatTreeNode';
+import formatProp from './formatProp';
+import mergeSiblingPlainStringChildrenReducer from './mergeSiblingPlainStringChildrenReducer';
+import propNameSorter from './propNameSorter';
+import type { Options } from './../options';
+import type { ReactElementTreeNode } from './../tree';
+
+const compensateMultilineStringElementIndentation = (
+  element,
+  formattedElement: string,
+  inline: boolean,
+  lvl: number,
+  options: Options
+) => {
+  const { tabStop } = options;
+
+  if (element.type === 'string') {
+    return formattedElement
+      .split('\n')
+      .map((line, offset) => {
+        if (offset === 0) {
+          return line;
+        }
+
+        return `${spacer(lvl, tabStop)}${line}`;
+      })
+      .join('\n');
+  }
+
+  return formattedElement;
+};
+
+const formatOneChildren = (
+  inline: boolean,
+  lvl: number,
+  options: Options
+) => element =>
+  compensateMultilineStringElementIndentation(
+    element,
+    formatTreeNode(element, inline, lvl, options),
+    inline,
+    lvl,
+    options
+  );
+
+const onlyPropsWithOriginalValue = (defaultProps, props) => propName => {
+  const haveDefaultValue = Object.keys(defaultProps).includes(propName);
+  return (
+    !haveDefaultValue ||
+    (haveDefaultValue && defaultProps[propName] !== props[propName])
+  );
+};
+
+const isInlineAttributeTooLong = (
+  attributes: string[],
+  inlineAttributeString: string,
+  lvl: number,
+  tabStop: number,
+  maxInlineAttributesLineLength: ?number
+): boolean => {
+  if (!maxInlineAttributesLineLength) {
+    return attributes.length > 1;
+  }
+
+  return (
+    spacer(lvl, tabStop).length + inlineAttributeString.length >
+    maxInlineAttributesLineLength
+  );
+};
+
+const shouldRenderMultilineAttr = (
+  attributes: string[],
+  inlineAttributeString: string,
+  containsMultilineAttr: boolean,
+  inline: boolean,
+  lvl: number,
+  tabStop: number,
+  maxInlineAttributesLineLength: ?number
+): boolean =>
+  (isInlineAttributeTooLong(
+    attributes,
+    inlineAttributeString,
+    lvl,
+    tabStop,
+    maxInlineAttributesLineLength
+  ) ||
+    containsMultilineAttr) &&
+  !inline;
+
+export default (
+  node: ReactElementTreeNode,
+  inline: boolean,
+  lvl: number,
+  options: Options
+): string => {
+  const {
+    type,
+    displayName = '',
+    childrens,
+    props = {},
+    defaultProps = {},
+  } = node;
+
+  if (type !== 'ReactElement') {
+    throw new Error(
+      `The "formatReactElementNode" function could only format node of type "ReactElement". Given:  ${
+        type
+      }`
+    );
+  }
+
+  const {
+    filterProps,
+    maxInlineAttributesLineLength,
+    showDefaultProps,
+    sortProps,
+    tabStop,
+  } = options;
+
+  let out = `<${displayName}`;
+
+  let outInlineAttr = out;
+  let outMultilineAttr = out;
+  let containsMultilineAttr = false;
+
+  const visibleAttributeNames = [];
+
+  Object.keys(props)
+    .filter(propName => filterProps.indexOf(propName) === -1)
+    .filter(onlyPropsWithOriginalValue(defaultProps, props))
+    .forEach(propName => visibleAttributeNames.push(propName));
+
+  Object.keys(defaultProps)
+    .filter(defaultPropName => filterProps.indexOf(defaultPropName) === -1)
+    .filter(() => showDefaultProps)
+    .filter(defaultPropName => !visibleAttributeNames.includes(defaultPropName))
+    .forEach(defaultPropName => visibleAttributeNames.push(defaultPropName));
+
+  const attributes = visibleAttributeNames.sort(propNameSorter(sortProps));
+
+  attributes.forEach(attributeName => {
+    const {
+      attributeFormattedInline,
+      attributeFormattedMultiline,
+      isMultilineAttribute,
+    } = formatProp(
+      attributeName,
+      Object.keys(props).includes(attributeName),
+      props[attributeName],
+      Object.keys(defaultProps).includes(attributeName),
+      defaultProps[attributeName],
+      inline,
+      lvl,
+      options
+    );
+
+    if (isMultilineAttribute) {
+      containsMultilineAttr = true;
+    }
+
+    outInlineAttr += attributeFormattedInline;
+    outMultilineAttr += attributeFormattedMultiline;
+  });
+
+  outMultilineAttr += `\n${spacer(lvl, tabStop)}`;
+
+  if (
+    shouldRenderMultilineAttr(
+      attributes,
+      outInlineAttr,
+      containsMultilineAttr,
+      inline,
+      lvl,
+      tabStop,
+      maxInlineAttributesLineLength
+    )
+  ) {
+    out = outMultilineAttr;
+  } else {
+    out = outInlineAttr;
+  }
+
+  if (childrens && childrens.length > 0) {
+    const newLvl = lvl + 1;
+
+    out += '>';
+
+    if (!inline) {
+      out += '\n';
+      out += spacer(newLvl, tabStop);
+    }
+
+    out += childrens
+      .reduce(mergeSiblingPlainStringChildrenReducer, [])
+      .map(formatOneChildren(inline, newLvl, options))
+      .join(!inline ? `\n${spacer(newLvl, tabStop)}` : '');
+
+    if (!inline) {
+      out += '\n';
+      out += spacer(newLvl - 1, tabStop);
+    }
+    out += `</${displayName}>`;
+  } else {
+    if (
+      !isInlineAttributeTooLong(
+        attributes,
+        outInlineAttr,
+        lvl,
+        tabStop,
+        maxInlineAttributesLineLength
+      )
+    ) {
+      out += ' ';
+    }
+
+    out += '/>';
+  }
+
+  return out;
+};

resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatReactFragmentNode.js

@@ -0,0 +1,76 @@
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+var _formatReactElementNode = require("./formatReactElementNode");
+
+var _formatReactElementNode2 = _interopRequireDefault(_formatReactElementNode);
+
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
+
+var REACT_FRAGMENT_TAG_NAME_SHORT_SYNTAX = "";
+var REACT_FRAGMENT_TAG_NAME_EXPLICIT_SYNTAX = "React.Fragment";
+
+var toReactElementTreeNode = function toReactElementTreeNode(
+  displayName,
+  key,
+  childrens
+) {
+  var props = {};
+  if (key) {
+    props = { key: key };
+  }
+
+  return {
+    type: "ReactElement",
+    displayName: displayName,
+    props: props,
+    defaultProps: {},
+    childrens: childrens,
+  };
+};
+
+var isKeyedFragment = function isKeyedFragment(_ref) {
+  var key = _ref.key;
+  return Boolean(key);
+};
+var hasNoChildren = function hasNoChildren(_ref2) {
+  var childrens = _ref2.childrens;
+  return childrens.length === 0;
+};
+
+exports.default = function(node, inline, lvl, options) {
+  var type = node.type,
+    key = node.key,
+    childrens = node.childrens;
+
+  if (type !== "ReactFragment") {
+    throw new Error(
+      'The "formatReactFragmentNode" function could only format node of type "ReactFragment". Given: ' +
+        type
+    );
+  }
+
+  var useFragmentShortSyntax = options.useFragmentShortSyntax;
+
+  var displayName = void 0;
+  if (useFragmentShortSyntax) {
+    if (hasNoChildren(node) || isKeyedFragment(node)) {
+      displayName = REACT_FRAGMENT_TAG_NAME_EXPLICIT_SYNTAX;
+    } else {
+      displayName = REACT_FRAGMENT_TAG_NAME_SHORT_SYNTAX;
+    }
+  } else {
+    displayName = REACT_FRAGMENT_TAG_NAME_EXPLICIT_SYNTAX;
+  }
+
+  return (0, _formatReactElementNode2.default)(
+    toReactElementTreeNode(displayName, key, childrens),
+    inline,
+    lvl,
+    options
+  );
+};
+//# sourceMappingURL=formatReactFragmentNode.js.map

resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatReactFragmentNode.js.flow

@@ -0,0 +1,73 @@
+/* @flow */
+
+import type { Key } from 'react';
+import formatReactElementNode from './formatReactElementNode';
+import type { Options } from './../options';
+import type {
+  ReactElementTreeNode,
+  ReactFragmentTreeNode,
+  TreeNode,
+} from './../tree';
+
+const REACT_FRAGMENT_TAG_NAME_SHORT_SYNTAX = '';
+const REACT_FRAGMENT_TAG_NAME_EXPLICIT_SYNTAX = 'React.Fragment';
+
+const toReactElementTreeNode = (
+  displayName: string,
+  key: ?Key,
+  childrens: TreeNode[]
+): ReactElementTreeNode => {
+  let props = {};
+  if (key) {
+    props = { key };
+  }
+
+  return {
+    type: 'ReactElement',
+    displayName,
+    props,
+    defaultProps: {},
+    childrens,
+  };
+};
+
+const isKeyedFragment = ({ key }: ReactFragmentTreeNode) => Boolean(key);
+const hasNoChildren = ({ childrens }: ReactFragmentTreeNode) =>
+  childrens.length === 0;
+
+export default (
+  node: ReactFragmentTreeNode,
+  inline: boolean,
+  lvl: number,
+  options: Options
+): string => {
+  const { type, key, childrens } = node;
+
+  if (type !== 'ReactFragment') {
+    throw new Error(
+      `The "formatReactFragmentNode" function could only format node of type "ReactFragment". Given: ${
+        type
+      }`
+    );
+  }
+
+  const { useFragmentShortSyntax } = options;
+
+  let displayName;
+  if (useFragmentShortSyntax) {
+    if (hasNoChildren(node) || isKeyedFragment(node)) {
+      displayName = REACT_FRAGMENT_TAG_NAME_EXPLICIT_SYNTAX;
+    } else {
+      displayName = REACT_FRAGMENT_TAG_NAME_SHORT_SYNTAX;
+    }
+  } else {
+    displayName = REACT_FRAGMENT_TAG_NAME_EXPLICIT_SYNTAX;
+  }
+
+  return formatReactElementNode(
+    toReactElementTreeNode(displayName, key, childrens),
+    inline,
+    lvl,
+    options
+  );
+};

resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatReactFragmentNode.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/formatter/formatReactFragmentNode.js"],"names":["REACT_FRAGMENT_TAG_NAME_SHORT_SYNTAX","REACT_FRAGMENT_TAG_NAME_EXPLICIT_SYNTAX","toReactElementTreeNode","displayName","key","childrens","props","type","defaultProps","isKeyedFragment","Boolean","hasNoChildren","length","node","inline","lvl","options","Error","useFragmentShortSyntax"],"mappings":";;;;;;AAGA;;;;;;AAQA,IAAMA,uCAAuC,EAA7C;AACA,IAAMC,0CAA0C,gBAAhD;;AAEA,IAAMC,yBAAyB,SAAzBA,sBAAyB,CAC7BC,WAD6B,EAE7BC,GAF6B,EAG7BC,SAH6B,EAIJ;AACzB,MAAIC,QAAQ,EAAZ;AACA,MAAIF,GAAJ,EAAS;AACPE,YAAQ,EAAEF,QAAF,EAAR;AACD;;AAED,SAAO;AACLG,UAAM,cADD;AAELJ,4BAFK;AAGLG,gBAHK;AAILE,kBAAc,EAJT;AAKLH;AALK,GAAP;AAOD,CAjBD;;AAmBA,IAAMI,kBAAkB,SAAlBA,eAAkB;AAAA,MAAGL,GAAH,QAAGA,GAAH;AAAA,SAAoCM,QAAQN,GAAR,CAApC;AAAA,CAAxB;AACA,IAAMO,gBAAgB,SAAhBA,aAAgB;AAAA,MAAGN,SAAH,SAAGA,SAAH;AAAA,SACpBA,UAAUO,MAAV,KAAqB,CADD;AAAA,CAAtB;;kBAGe,UACbC,IADa,EAEbC,MAFa,EAGbC,GAHa,EAIbC,OAJa,EAKF;AAAA,MACHT,IADG,GACsBM,IADtB,CACHN,IADG;AAAA,MACGH,GADH,GACsBS,IADtB,CACGT,GADH;AAAA,MACQC,SADR,GACsBQ,IADtB,CACQR,SADR;;;AAGX,MAAIE,SAAS,eAAb,EAA8B;AAC5B,UAAM,IAAIU,KAAJ,oGAEFV,IAFE,CAAN;AAKD;;AATU,MAWHW,sBAXG,GAWwBF,OAXxB,CAWHE,sBAXG;;;AAaX,MAAIf,oBAAJ;AACA,MAAIe,sBAAJ,EAA4B;AAC1B,QAAIP,cAAcE,IAAd,KAAuBJ,gBAAgBI,IAAhB,CAA3B,EAAkD;AAChDV,oBAAcF,uCAAd;AACD,KAFD,MAEO;AACLE,oBAAcH,oCAAd;AACD;AACF,GAND,MAMO;AACLG,kBAAcF,uCAAd;AACD;;AAED,SAAO,sCACLC,uBAAuBC,WAAvB,EAAoCC,GAApC,EAAyCC,SAAzC,CADK,EAELS,MAFK,EAGLC,GAHK,EAILC,OAJK,CAAP;AAMD,C","file":"formatReactFragmentNode.js","sourcesContent":["/* @flow */\n\nimport type { Key } from 'react';\nimport formatReactElementNode from './formatReactElementNode';\nimport type { Options } from './../options';\nimport type {\n  ReactElementTreeNode,\n  ReactFragmentTreeNode,\n  TreeNode,\n} from './../tree';\n\nconst REACT_FRAGMENT_TAG_NAME_SHORT_SYNTAX = '';\nconst REACT_FRAGMENT_TAG_NAME_EXPLICIT_SYNTAX = 'React.Fragment';\n\nconst toReactElementTreeNode = (\n  displayName: string,\n  key: ?Key,\n  childrens: TreeNode[]\n): ReactElementTreeNode => {\n  let props = {};\n  if (key) {\n    props = { key };\n  }\n\n  return {\n    type: 'ReactElement',\n    displayName,\n    props,\n    defaultProps: {},\n    childrens,\n  };\n};\n\nconst isKeyedFragment = ({ key }: ReactFragmentTreeNode) => Boolean(key);\nconst hasNoChildren = ({ childrens }: ReactFragmentTreeNode) =>\n  childrens.length === 0;\n\nexport default (\n  node: ReactFragmentTreeNode,\n  inline: boolean,\n  lvl: number,\n  options: Options\n): string => {\n  const { type, key, childrens } = node;\n\n  if (type !== 'ReactFragment') {\n    throw new Error(\n      `The \"formatReactFragmentNode\" function could only format node of type \"ReactFragment\". Given: ${\n        type\n      }`\n    );\n  }\n\n  const { useFragmentShortSyntax } = options;\n\n  let displayName;\n  if (useFragmentShortSyntax) {\n    if (hasNoChildren(node) || isKeyedFragment(node)) {\n      displayName = REACT_FRAGMENT_TAG_NAME_EXPLICIT_SYNTAX;\n    } else {\n      displayName = REACT_FRAGMENT_TAG_NAME_SHORT_SYNTAX;\n    }\n  } else {\n    displayName = REACT_FRAGMENT_TAG_NAME_EXPLICIT_SYNTAX;\n  }\n\n  return formatReactElementNode(\n    toReactElementTreeNode(displayName, key, childrens),\n    inline,\n    lvl,\n    options\n  );\n};\n"]}

resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatTree.js

@@ -0,0 +1,16 @@
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+var _formatTreeNode = require("./formatTreeNode");
+
+var _formatTreeNode2 = _interopRequireDefault(_formatTreeNode);
+
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
+
+exports.default = function(node, options) {
+  return (0, _formatTreeNode2.default)(node, false, 0, options);
+};
+//# sourceMappingURL=formatTree.js.map

resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatTree.js.flow

@@ -0,0 +1,8 @@
+/* @flow */
+
+import formatTreeNode from './formatTreeNode';
+import type { Options } from './../options';
+import type { TreeNode } from './../tree';
+
+export default (node: TreeNode, options: Options): string =>
+  formatTreeNode(node, false, 0, options);

resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatTree.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/formatter/formatTree.js"],"names":["node","options"],"mappings":";;;;;;AAEA;;;;;;kBAIe,UAACA,IAAD,EAAiBC,OAAjB;AAAA,SACb,8BAAeD,IAAf,EAAqB,KAArB,EAA4B,CAA5B,EAA+BC,OAA/B,CADa;AAAA,C","file":"formatTree.js","sourcesContent":["/* @flow */\n\nimport formatTreeNode from './formatTreeNode';\nimport type { Options } from './../options';\nimport type { TreeNode } from './../tree';\n\nexport default (node: TreeNode, options: Options): string =>\n  formatTreeNode(node, false, 0, options);\n"]}

resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatTreeNode.js

@@ -0,0 +1,68 @@
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+var _formatReactElementNode = require("./formatReactElementNode");
+
+var _formatReactElementNode2 = _interopRequireDefault(_formatReactElementNode);
+
+var _formatReactFragmentNode = require("./formatReactFragmentNode");
+
+var _formatReactFragmentNode2 = _interopRequireDefault(
+  _formatReactFragmentNode
+);
+
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
+
+var jsxStopChars = ["<", ">", "{", "}"];
+var shouldBeEscaped = function shouldBeEscaped(s) {
+  return jsxStopChars.some(function(jsxStopChar) {
+    return s.includes(jsxStopChar);
+  });
+};
+
+var escape = function escape(s) {
+  if (!shouldBeEscaped(s)) {
+    return s;
+  }
+
+  return "{`" + s + "`}";
+};
+
+var preserveTrailingSpace = function preserveTrailingSpace(s) {
+  var result = s;
+  if (result.endsWith(" ")) {
+    result = result.replace(/^(\S*)(\s*)$/, "$1{'$2'}");
+  }
+
+  if (result.startsWith(" ")) {
+    result = result.replace(/^(\s*)(\S*)$/, "{'$1'}$2");
+  }
+
+  return result;
+};
+
+exports.default = function(node, inline, lvl, options) {
+  if (node.type === "number") {
+    return String(node.value);
+  }
+
+  if (node.type === "string") {
+    return node.value
+      ? "" + preserveTrailingSpace(escape(String(node.value)))
+      : "";
+  }
+
+  if (node.type === "ReactElement") {
+    return (0, _formatReactElementNode2.default)(node, inline, lvl, options);
+  }
+
+  if (node.type === "ReactFragment") {
+    return (0, _formatReactFragmentNode2.default)(node, inline, lvl, options);
+  }
+
+  throw new TypeError('Unknow format type "' + node.type + '"');
+};
+//# sourceMappingURL=formatTreeNode.js.map

resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatTreeNode.js.flow

@@ -0,0 +1,58 @@
+/* @flow */
+
+import formatReactElementNode from './formatReactElementNode';
+import formatReactFragmentNode from './formatReactFragmentNode';
+import type { Options } from './../options';
+import type { TreeNode } from './../tree';
+
+const jsxStopChars = ['<', '>', '{', '}'];
+const shouldBeEscaped = (s: string) =>
+  jsxStopChars.some(jsxStopChar => s.includes(jsxStopChar));
+
+const escape = (s: string) => {
+  if (!shouldBeEscaped(s)) {
+    return s;
+  }
+
+  return `{\`${s}\`}`;
+};
+
+const preserveTrailingSpace = (s: string) => {
+  let result = s;
+  if (result.endsWith(' ')) {
+    result = result.replace(/^(\S*)(\s*)$/, "$1{'$2'}");
+  }
+
+  if (result.startsWith(' ')) {
+    result = result.replace(/^(\s*)(\S*)$/, "{'$1'}$2");
+  }
+
+  return result;
+};
+
+export default (
+  node: TreeNode,
+  inline: boolean,
+  lvl: number,
+  options: Options
+): string => {
+  if (node.type === 'number') {
+    return String(node.value);
+  }
+
+  if (node.type === 'string') {
+    return node.value
+      ? `${preserveTrailingSpace(escape(String(node.value)))}`
+      : '';
+  }
+
+  if (node.type === 'ReactElement') {
+    return formatReactElementNode(node, inline, lvl, options);
+  }
+
+  if (node.type === 'ReactFragment') {
+    return formatReactFragmentNode(node, inline, lvl, options);
+  }
+
+  throw new TypeError(`Unknow format type "${node.type}"`);
+};

resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatTreeNode.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/formatter/formatTreeNode.js"],"names":["jsxStopChars","shouldBeEscaped","s","some","includes","jsxStopChar","escape","preserveTrailingSpace","result","endsWith","replace","startsWith","node","inline","lvl","options","type","String","value","TypeError"],"mappings":";;;;;;AAEA;;;;AACA;;;;;;AAIA,IAAMA,eAAe,CAAC,GAAD,EAAM,GAAN,EAAW,GAAX,EAAgB,GAAhB,CAArB;AACA,IAAMC,kBAAkB,SAAlBA,eAAkB,CAACC,CAAD;AAAA,SACtBF,aAAaG,IAAb,CAAkB;AAAA,WAAeD,EAAEE,QAAF,CAAWC,WAAX,CAAf;AAAA,GAAlB,CADsB;AAAA,CAAxB;;AAGA,IAAMC,SAAS,SAATA,MAAS,CAACJ,CAAD,EAAe;AAC5B,MAAI,CAACD,gBAAgBC,CAAhB,CAAL,EAAyB;AACvB,WAAOA,CAAP;AACD;;AAED,gBAAaA,CAAb;AACD,CAND;;AAQA,IAAMK,wBAAwB,SAAxBA,qBAAwB,CAACL,CAAD,EAAe;AAC3C,MAAIM,SAASN,CAAb;AACA,MAAIM,OAAOC,QAAP,CAAgB,GAAhB,CAAJ,EAA0B;AACxBD,aAASA,OAAOE,OAAP,CAAe,cAAf,EAA+B,UAA/B,CAAT;AACD;;AAED,MAAIF,OAAOG,UAAP,CAAkB,GAAlB,CAAJ,EAA4B;AAC1BH,aAASA,OAAOE,OAAP,CAAe,cAAf,EAA+B,UAA/B,CAAT;AACD;;AAED,SAAOF,MAAP;AACD,CAXD;;kBAae,UACbI,IADa,EAEbC,MAFa,EAGbC,GAHa,EAIbC,OAJa,EAKF;AACX,MAAIH,KAAKI,IAAL,KAAc,QAAlB,EAA4B;AAC1B,WAAOC,OAAOL,KAAKM,KAAZ,CAAP;AACD;;AAED,MAAIN,KAAKI,IAAL,KAAc,QAAlB,EAA4B;AAC1B,WAAOJ,KAAKM,KAAL,QACAX,sBAAsBD,OAAOW,OAAOL,KAAKM,KAAZ,CAAP,CAAtB,CADA,GAEH,EAFJ;AAGD;;AAED,MAAIN,KAAKI,IAAL,KAAc,cAAlB,EAAkC;AAChC,WAAO,sCAAuBJ,IAAvB,EAA6BC,MAA7B,EAAqCC,GAArC,EAA0CC,OAA1C,CAAP;AACD;;AAED,MAAIH,KAAKI,IAAL,KAAc,eAAlB,EAAmC;AACjC,WAAO,uCAAwBJ,IAAxB,EAA8BC,MAA9B,EAAsCC,GAAtC,EAA2CC,OAA3C,CAAP;AACD;;AAED,QAAM,IAAII,SAAJ,0BAAqCP,KAAKI,IAA1C,OAAN;AACD,C","file":"formatTreeNode.js","sourcesContent":["/* @flow */\n\nimport formatReactElementNode from './formatReactElementNode';\nimport formatReactFragmentNode from './formatReactFragmentNode';\nimport type { Options } from './../options';\nimport type { TreeNode } from './../tree';\n\nconst jsxStopChars = ['<', '>', '{', '}'];\nconst shouldBeEscaped = (s: string) =>\n  jsxStopChars.some(jsxStopChar => s.includes(jsxStopChar));\n\nconst escape = (s: string) => {\n  if (!shouldBeEscaped(s)) {\n    return s;\n  }\n\n  return `{\\`${s}\\`}`;\n};\n\nconst preserveTrailingSpace = (s: string) => {\n  let result = s;\n  if (result.endsWith(' ')) {\n    result = result.replace(/^(\\S*)(\\s*)$/, \"$1{'$2'}\");\n  }\n\n  if (result.startsWith(' ')) {\n    result = result.replace(/^(\\s*)(\\S*)$/, \"{'$1'}$2\");\n  }\n\n  return result;\n};\n\nexport default (\n  node: TreeNode,\n  inline: boolean,\n  lvl: number,\n  options: Options\n): string => {\n  if (node.type === 'number') {\n    return String(node.value);\n  }\n\n  if (node.type === 'string') {\n    return node.value\n      ? `${preserveTrailingSpace(escape(String(node.value)))}`\n      : '';\n  }\n\n  if (node.type === 'ReactElement') {\n    return formatReactElementNode(node, inline, lvl, options);\n  }\n\n  if (node.type === 'ReactFragment') {\n    return formatReactFragmentNode(node, inline, lvl, options);\n  }\n\n  throw new TypeError(`Unknow format type \"${node.type}\"`);\n};\n"]}

resources/js/ComponentDemo/react-element-to-jsx-string/formatter/mergeSiblingPlainStringChildrenReducer.js

@@ -0,0 +1,34 @@
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+var _tree = require("./../tree");
+
+exports.default = function(previousNodes, currentNode) {
+  var nodes = previousNodes.slice(
+    0,
+    previousNodes.length > 0 ? previousNodes.length - 1 : 0
+  );
+  var previousNode = previousNodes[previousNodes.length - 1];
+
+  if (
+    previousNode &&
+    (currentNode.type === "string" || currentNode.type === "number") &&
+    (previousNode.type === "string" || previousNode.type === "number")
+  ) {
+    nodes.push(
+      (0, _tree.createStringTreeNode)(
+        String(previousNode.value) + String(currentNode.value)
+      )
+    );
+  } else {
+    if (previousNode) {
+      nodes.push(previousNode);
+    }
+
+    nodes.push(currentNode);
+  }
+
+  return nodes;
+};
+//# sourceMappingURL=mergeSiblingPlainStringChildrenReducer.js.map

resources/js/ComponentDemo/react-element-to-jsx-string/formatter/mergeSiblingPlainStringChildrenReducer.js.flow

@@ -0,0 +1,35 @@
+/* @flow */
+
+import { createStringTreeNode } from './../tree';
+import type { TreeNode } from './../tree';
+
+export default (
+  previousNodes: TreeNode[],
+  currentNode: TreeNode
+): TreeNode[] => {
+  const nodes = previousNodes.slice(
+    0,
+    previousNodes.length > 0 ? previousNodes.length - 1 : 0
+  );
+  const previousNode = previousNodes[previousNodes.length - 1];
+
+  if (
+    previousNode &&
+    (currentNode.type === 'string' || currentNode.type === 'number') &&
+    (previousNode.type === 'string' || previousNode.type === 'number')
+  ) {
+    nodes.push(
+      createStringTreeNode(
+        String(previousNode.value) + String(currentNode.value)
+      )
+    );
+  } else {
+    if (previousNode) {
+      nodes.push(previousNode);
+    }
+
+    nodes.push(currentNode);
+  }
+
+  return nodes;
+};

resources/js/ComponentDemo/react-element-to-jsx-string/formatter/mergeSiblingPlainStringChildrenReducer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/formatter/mergeSiblingPlainStringChildrenReducer.js"],"names":["previousNodes","currentNode","nodes","slice","length","previousNode","type","push","String","value"],"mappings":";;;;;;AAEA;;kBAGe,UACbA,aADa,EAEbC,WAFa,EAGE;AACf,MAAMC,QAAQF,cAAcG,KAAd,CACZ,CADY,EAEZH,cAAcI,MAAd,GAAuB,CAAvB,GAA2BJ,cAAcI,MAAd,GAAuB,CAAlD,GAAsD,CAF1C,CAAd;AAIA,MAAMC,eAAeL,cAAcA,cAAcI,MAAd,GAAuB,CAArC,CAArB;;AAEA,MACEC,iBACCJ,YAAYK,IAAZ,KAAqB,QAArB,IAAiCL,YAAYK,IAAZ,KAAqB,QADvD,MAECD,aAAaC,IAAb,KAAsB,QAAtB,IAAkCD,aAAaC,IAAb,KAAsB,QAFzD,CADF,EAIE;AACAJ,UAAMK,IAAN,CACE,gCACEC,OAAOH,aAAaI,KAApB,IAA6BD,OAAOP,YAAYQ,KAAnB,CAD/B,CADF;AAKD,GAVD,MAUO;AACL,QAAIJ,YAAJ,EAAkB;AAChBH,YAAMK,IAAN,CAAWF,YAAX;AACD;;AAEDH,UAAMK,IAAN,CAAWN,WAAX;AACD;;AAED,SAAOC,KAAP;AACD,C","file":"mergeSiblingPlainStringChildrenReducer.js","sourcesContent":["/* @flow */\n\nimport { createStringTreeNode } from './../tree';\nimport type { TreeNode } from './../tree';\n\nexport default (\n  previousNodes: TreeNode[],\n  currentNode: TreeNode\n): TreeNode[] => {\n  const nodes = previousNodes.slice(\n    0,\n    previousNodes.length > 0 ? previousNodes.length - 1 : 0\n  );\n  const previousNode = previousNodes[previousNodes.length - 1];\n\n  if (\n    previousNode &&\n    (currentNode.type === 'string' || currentNode.type === 'number') &&\n    (previousNode.type === 'string' || previousNode.type === 'number')\n  ) {\n    nodes.push(\n      createStringTreeNode(\n        String(previousNode.value) + String(currentNode.value)\n      )\n    );\n  } else {\n    if (previousNode) {\n      nodes.push(previousNode);\n    }\n\n    nodes.push(currentNode);\n  }\n\n  return nodes;\n};\n"]}

resources/js/ComponentDemo/react-element-to-jsx-string/formatter/propNameSorter.js

@@ -0,0 +1,24 @@
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+exports.default = function(sortProps) {
+  return function(a, b) {
+    if (a === b) {
+      return 0;
+    }
+
+    if (["key", "ref"].includes(a)) {
+      return -1;
+    } else if (["key", "ref"].includes(b)) {
+      return 1;
+    }
+
+    if (!sortProps) {
+      return 0;
+    }
+
+    return a < b ? -1 : 1;
+  };
+};
+//# sourceMappingURL=propNameSorter.js.map

resources/js/ComponentDemo/react-element-to-jsx-string/formatter/propNameSorter.js.flow

@@ -0,0 +1,19 @@
+/* @flow */
+
+export default (sortProps: boolean) => (a: string, b: string): -1 | 0 | 1 => {
+  if (a === b) {
+    return 0;
+  }
+
+  if (['key', 'ref'].includes(a)) {
+    return -1;
+  } else if (['key', 'ref'].includes(b)) {
+    return 1;
+  }
+
+  if (!sortProps) {
+    return 0;
+  }
+
+  return a < b ? -1 : 1;
+};

resources/js/ComponentDemo/react-element-to-jsx-string/formatter/propNameSorter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/formatter/propNameSorter.js"],"names":["sortProps","a","b","includes"],"mappings":";;;;;;kBAEe,UAACA,SAAD;AAAA,SAAwB,UAACC,CAAD,EAAYC,CAAZ,EAAsC;AAC3E,QAAID,MAAMC,CAAV,EAAa;AACX,aAAO,CAAP;AACD;;AAED,QAAI,CAAC,KAAD,EAAQ,KAAR,EAAeC,QAAf,CAAwBF,CAAxB,CAAJ,EAAgC;AAC9B,aAAO,CAAC,CAAR;AACD,KAFD,MAEO,IAAI,CAAC,KAAD,EAAQ,KAAR,EAAeE,QAAf,CAAwBD,CAAxB,CAAJ,EAAgC;AACrC,aAAO,CAAP;AACD;;AAED,QAAI,CAACF,SAAL,EAAgB;AACd,aAAO,CAAP;AACD;;AAED,WAAOC,IAAIC,CAAJ,GAAQ,CAAC,CAAT,GAAa,CAApB;AACD,GAhBc;AAAA,C","file":"propNameSorter.js","sourcesContent":["/* @flow */\n\nexport default (sortProps: boolean) => (a: string, b: string): -1 | 0 | 1 => {\n  if (a === b) {\n    return 0;\n  }\n\n  if (['key', 'ref'].includes(a)) {\n    return -1;\n  } else if (['key', 'ref'].includes(b)) {\n    return 1;\n  }\n\n  if (!sortProps) {\n    return 0;\n  }\n\n  return a < b ? -1 : 1;\n};\n"]}

resources/js/ComponentDemo/react-element-to-jsx-string/formatter/sortObject.js

@@ -0,0 +1,48 @@
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+var _typeof =
+  typeof Symbol === "function" && typeof Symbol.iterator === "symbol"
+    ? function(obj) {
+        return typeof obj;
+      }
+    : function(obj) {
+        return obj &&
+          typeof Symbol === "function" &&
+          obj.constructor === Symbol &&
+          obj !== Symbol.prototype
+          ? "symbol"
+          : typeof obj;
+      };
+
+exports.default = sortObject;
+function sortObject(value) {
+  // return non-object value as is
+  if (
+    value === null ||
+    (typeof value === "undefined" ? "undefined" : _typeof(value)) !== "object"
+  ) {
+    return value;
+  }
+
+  // return date and regexp values as is
+  if (value instanceof Date || value instanceof RegExp) {
+    return value;
+  }
+
+  // make a copy of array with each item passed through sortObject()
+  if (Array.isArray(value)) {
+    return value.map(sortObject);
+  }
+
+  // make a copy of object with key sorted
+  return Object.keys(value)
+    .sort()
+    .reduce(function(result, key) {
+      // eslint-disable-next-line no-param-reassign
+      result[key] = sortObject(value[key]);
+      return result;
+    }, {});
+}
+//# sourceMappingURL=sortObject.js.map

resources/js/ComponentDemo/react-element-to-jsx-string/formatter/sortObject.js.flow

@@ -0,0 +1,27 @@
+/* @flow */
+
+export default function sortObject(value: any): any {
+  // return non-object value as is
+  if (value === null || typeof value !== 'object') {
+    return value;
+  }
+
+  // return date and regexp values as is
+  if (value instanceof Date || value instanceof RegExp) {
+    return value;
+  }
+
+  // make a copy of array with each item passed through sortObject()
+  if (Array.isArray(value)) {
+    return value.map(sortObject);
+  }
+
+  // make a copy of object with key sorted
+  return Object.keys(value)
+    .sort()
+    .reduce((result, key) => {
+      // eslint-disable-next-line no-param-reassign
+      result[key] = sortObject(value[key]);
+      return result;
+    }, {});
+}

resources/js/ComponentDemo/react-element-to-jsx-string/formatter/sortObject.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/formatter/sortObject.js"],"names":["sortObject","value","Date","RegExp","Array","isArray","map","Object","keys","sort","reduce","result","key"],"mappings":";;;;;;;;kBAEwBA,U;AAAT,SAASA,UAAT,CAAoBC,KAApB,EAAqC;AAClD;AACA,MAAIA,UAAU,IAAV,IAAkB,QAAOA,KAAP,yCAAOA,KAAP,OAAiB,QAAvC,EAAiD;AAC/C,WAAOA,KAAP;AACD;;AAED;AACA,MAAIA,iBAAiBC,IAAjB,IAAyBD,iBAAiBE,MAA9C,EAAsD;AACpD,WAAOF,KAAP;AACD;;AAED;AACA,MAAIG,MAAMC,OAAN,CAAcJ,KAAd,CAAJ,EAA0B;AACxB,WAAOA,MAAMK,GAAN,CAAUN,UAAV,CAAP;AACD;;AAED;AACA,SAAOO,OAAOC,IAAP,CAAYP,KAAZ,EACJQ,IADI,GAEJC,MAFI,CAEG,UAACC,MAAD,EAASC,GAAT,EAAiB;AACvB;AACAD,WAAOC,GAAP,IAAcZ,WAAWC,MAAMW,GAAN,CAAX,CAAd;AACA,WAAOD,MAAP;AACD,GANI,EAMF,EANE,CAAP;AAOD","file":"sortObject.js","sourcesContent":["/* @flow */\n\nexport default function sortObject(value: any): any {\n  // return non-object value as is\n  if (value === null || typeof value !== 'object') {\n    return value;\n  }\n\n  // return date and regexp values as is\n  if (value instanceof Date || value instanceof RegExp) {\n    return value;\n  }\n\n  // make a copy of array with each item passed through sortObject()\n  if (Array.isArray(value)) {\n    return value.map(sortObject);\n  }\n\n  // make a copy of object with key sorted\n  return Object.keys(value)\n    .sort()\n    .reduce((result, key) => {\n      // eslint-disable-next-line no-param-reassign\n      result[key] = sortObject(value[key]);\n      return result;\n    }, {});\n}\n"]}

resources/js/ComponentDemo/react-element-to-jsx-string/formatter/spacer.js

@@ -0,0 +1,12 @@
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+exports.default = function(times, tabStop) {
+  if (times === 0) {
+    return "";
+  }
+
+  return new Array(times * tabStop).fill(" ").join("");
+};
+//# sourceMappingURL=spacer.js.map

resources/js/ComponentDemo/react-element-to-jsx-string/formatter/spacer.js.flow

@@ -0,0 +1,9 @@
+/* @flow */
+
+export default (times: number, tabStop: number): string => {
+  if (times === 0) {
+    return '';
+  }
+
+  return new Array(times * tabStop).fill(' ').join('');
+};

resources/js/ComponentDemo/react-element-to-jsx-string/formatter/spacer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/formatter/spacer.js"],"names":["times","tabStop","Array","fill","join"],"mappings":";;;;;;kBAEe,UAACA,KAAD,EAAgBC,OAAhB,EAA4C;AACzD,MAAID,UAAU,CAAd,EAAiB;AACf,WAAO,EAAP;AACD;;AAED,SAAO,IAAIE,KAAJ,CAAUF,QAAQC,OAAlB,EAA2BE,IAA3B,CAAgC,GAAhC,EAAqCC,IAArC,CAA0C,EAA1C,CAAP;AACD,C","file":"spacer.js","sourcesContent":["/* @flow */\n\nexport default (times: number, tabStop: number): string => {\n  if (times === 0) {\n    return '';\n  }\n\n  return new Array(times * tabStop).fill(' ').join('');\n};\n"]}

resources/js/ComponentDemo/react-element-to-jsx-string/index.js

@@ -0,0 +1,66 @@
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+var _formatTree = require("./formatter/formatTree");
+
+var _formatTree2 = _interopRequireDefault(_formatTree);
+
+var _parseReactElement = require("./parser/parseReactElement");
+
+var _parseReactElement2 = _interopRequireDefault(_parseReactElement);
+
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
+
+var reactElementToJsxString = function reactElementToJsxString(element) {
+  var _ref =
+      arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    _ref$filterProps = _ref.filterProps,
+    filterProps = _ref$filterProps === undefined ? [] : _ref$filterProps,
+    _ref$showDefaultProps = _ref.showDefaultProps,
+    showDefaultProps =
+      _ref$showDefaultProps === undefined ? true : _ref$showDefaultProps,
+    _ref$showFunctions = _ref.showFunctions,
+    showFunctions =
+      _ref$showFunctions === undefined ? false : _ref$showFunctions,
+    functionValue = _ref.functionValue,
+    _ref$tabStop = _ref.tabStop,
+    tabStop = _ref$tabStop === undefined ? 2 : _ref$tabStop,
+    _ref$useBooleanShorth = _ref.useBooleanShorthandSyntax,
+    useBooleanShorthandSyntax =
+      _ref$useBooleanShorth === undefined ? true : _ref$useBooleanShorth,
+    _ref$useFragmentShort = _ref.useFragmentShortSyntax,
+    useFragmentShortSyntax =
+      _ref$useFragmentShort === undefined ? true : _ref$useFragmentShort,
+    _ref$sortProps = _ref.sortProps,
+    sortProps = _ref$sortProps === undefined ? true : _ref$sortProps,
+    maxInlineAttributesLineLength = _ref.maxInlineAttributesLineLength,
+    displayName = _ref.displayName;
+
+  if (!element) {
+    throw new Error("react-element-to-jsx-string: Expected a ReactElement");
+  }
+
+  var options = {
+    filterProps: filterProps,
+    showDefaultProps: showDefaultProps,
+    showFunctions: showFunctions,
+    functionValue: functionValue,
+    tabStop: tabStop,
+    useBooleanShorthandSyntax: useBooleanShorthandSyntax,
+    useFragmentShortSyntax: useFragmentShortSyntax,
+    sortProps: sortProps,
+    maxInlineAttributesLineLength: maxInlineAttributesLineLength,
+    displayName: displayName,
+  };
+
+  return (0, _formatTree2.default)(
+    (0, _parseReactElement2.default)(element, options),
+    options
+  );
+};
+
+exports.default = reactElementToJsxString;
+//# sourceMappingURL=index.js.map

resources/js/ComponentDemo/react-element-to-jsx-string/index.js.flow

@@ -0,0 +1,43 @@
+/* @flow */
+
+import formatTree from './formatter/formatTree';
+import parseReactElement from './parser/parseReactElement';
+import type { Element as ReactElement } from 'react';
+import type { Options } from './options';
+
+const reactElementToJsxString = (
+  element: ReactElement<any>,
+  {
+    filterProps = [],
+    showDefaultProps = true,
+    showFunctions = false,
+    functionValue,
+    tabStop = 2,
+    useBooleanShorthandSyntax = true,
+    useFragmentShortSyntax = true,
+    sortProps = true,
+    maxInlineAttributesLineLength,
+    displayName,
+  }: Options = {}
+) => {
+  if (!element) {
+    throw new Error('react-element-to-jsx-string: Expected a ReactElement');
+  }
+
+  const options = {
+    filterProps,
+    showDefaultProps,
+    showFunctions,
+    functionValue,
+    tabStop,
+    useBooleanShorthandSyntax,
+    useFragmentShortSyntax,
+    sortProps,
+    maxInlineAttributesLineLength,
+    displayName,
+  };
+
+  return formatTree(parseReactElement(element, options), options);
+};
+
+export default reactElementToJsxString;

resources/js/ComponentDemo/react-element-to-jsx-string/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.js"],"names":["reactElementToJsxString","element","filterProps","showDefaultProps","showFunctions","functionValue","tabStop","useBooleanShorthandSyntax","useFragmentShortSyntax","sortProps","maxInlineAttributesLineLength","displayName","Error","options"],"mappings":";;;;;;AAEA;;;;AACA;;;;;;AAIA,IAAMA,0BAA0B,SAA1BA,uBAA0B,CAC9BC,OAD8B,EAc3B;AAAA,iFADU,EACV;AAAA,8BAXDC,WAWC;AAAA,MAXDA,WAWC,oCAXa,EAWb;AAAA,mCAVDC,gBAUC;AAAA,MAVDA,gBAUC,yCAVkB,IAUlB;AAAA,gCATDC,aASC;AAAA,MATDA,aASC,sCATe,KASf;AAAA,MARDC,aAQC,QARDA,aAQC;AAAA,0BAPDC,OAOC;AAAA,MAPDA,OAOC,gCAPS,CAOT;AAAA,mCANDC,yBAMC;AAAA,MANDA,yBAMC,yCAN2B,IAM3B;AAAA,mCALDC,sBAKC;AAAA,MALDA,sBAKC,yCALwB,IAKxB;AAAA,4BAJDC,SAIC;AAAA,MAJDA,SAIC,kCAJW,IAIX;AAAA,MAHDC,6BAGC,QAHDA,6BAGC;AAAA,MAFDC,WAEC,QAFDA,WAEC;;AACH,MAAI,CAACV,OAAL,EAAc;AACZ,UAAM,IAAIW,KAAJ,CAAU,sDAAV,CAAN;AACD;;AAED,MAAMC,UAAU;AACdX,4BADc;AAEdC,sCAFc;AAGdC,gCAHc;AAIdC,gCAJc;AAKdC,oBALc;AAMdC,wDANc;AAOdC,kDAPc;AAQdC,wBARc;AASdC,gEATc;AAUdC;AAVc,GAAhB;;AAaA,SAAO,0BAAW,iCAAkBV,OAAlB,EAA2BY,OAA3B,CAAX,EAAgDA,OAAhD,CAAP;AACD,CAjCD;;kBAmCeb,uB","file":"index.js","sourcesContent":["/* @flow */\n\nimport formatTree from './formatter/formatTree';\nimport parseReactElement from './parser/parseReactElement';\nimport type { Element as ReactElement } from 'react';\nimport type { Options } from './options';\n\nconst reactElementToJsxString = (\n  element: ReactElement<any>,\n  {\n    filterProps = [],\n    showDefaultProps = true,\n    showFunctions = false,\n    functionValue,\n    tabStop = 2,\n    useBooleanShorthandSyntax = true,\n    useFragmentShortSyntax = true,\n    sortProps = true,\n    maxInlineAttributesLineLength,\n    displayName,\n  }: Options = {}\n) => {\n  if (!element) {\n    throw new Error('react-element-to-jsx-string: Expected a ReactElement');\n  }\n\n  const options = {\n    filterProps,\n    showDefaultProps,\n    showFunctions,\n    functionValue,\n    tabStop,\n    useBooleanShorthandSyntax,\n    useFragmentShortSyntax,\n    sortProps,\n    maxInlineAttributesLineLength,\n    displayName,\n  };\n\n  return formatTree(parseReactElement(element, options), options);\n};\n\nexport default reactElementToJsxString;\n"]}

resources/js/ComponentDemo/react-element-to-jsx-string/options.js

@@ -0,0 +1,20 @@
+var _react = require("react");
+
+var React = _interopRequireWildcard(_react);
+
+function _interopRequireWildcard(obj) {
+  if (obj && obj.__esModule) {
+    return obj;
+  } else {
+    var newObj = {};
+    if (obj != null) {
+      for (var key in obj) {
+        if (Object.prototype.hasOwnProperty.call(obj, key))
+          newObj[key] = obj[key];
+      }
+    }
+    newObj.default = obj;
+    return newObj;
+  }
+}
+//# sourceMappingURL=options.js.map

resources/js/ComponentDemo/react-element-to-jsx-string/options.js.flow

@@ -0,0 +1,17 @@
+/* @flow */
+
+import * as React from 'react';
+
+export type Options = {|
+  filterProps: string[],
+  showDefaultProps: boolean,
+  showFunctions: boolean,
+  functionValue: Function,
+  tabStop: number,
+  useBooleanShorthandSyntax: boolean,
+  useFragmentShortSyntax: boolean,
+  sortProps: boolean,
+
+  maxInlineAttributesLineLength?: number,
+  displayName?: (element: React.Element<*>) => string,
+|};

resources/js/ComponentDemo/react-element-to-jsx-string/options.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/options.js"],"names":["React"],"mappings":";;AAEA;;IAAYA,K","file":"options.js","sourcesContent":["/* @flow */\n\nimport * as React from 'react';\n\nexport type Options = {|\n  filterProps: string[],\n  showDefaultProps: boolean,\n  showFunctions: boolean,\n  functionValue: Function,\n  tabStop: number,\n  useBooleanShorthandSyntax: boolean,\n  useFragmentShortSyntax: boolean,\n  sortProps: boolean,\n\n  maxInlineAttributesLineLength?: number,\n  displayName?: (element: React.Element<*>) => string,\n|};\n"]}

resources/js/ComponentDemo/react-element-to-jsx-string/parser/parseReactElement.js

@@ -0,0 +1,120 @@
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+var _typeof =
+  typeof Symbol === "function" && typeof Symbol.iterator === "symbol"
+    ? function(obj) {
+        return typeof obj;
+      }
+    : function(obj) {
+        return obj &&
+          typeof Symbol === "function" &&
+          obj.constructor === Symbol &&
+          obj !== Symbol.prototype
+          ? "symbol"
+          : typeof obj;
+      };
+
+var _react = require("react");
+
+var _react2 = _interopRequireDefault(_react);
+
+var _tree = require("./../tree");
+
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
+
+var supportFragment = Boolean(_react.Fragment);
+
+var getReactElementDisplayName = function getReactElementDisplayName(element) {
+  return (
+    element.type.displayName ||
+    element.type.name || // function name
+    (typeof element.type === "function" // function without a name, you should provide one
+      ? "No Display Name"
+      : element.type)
+  );
+};
+
+var noChildren = function noChildren(propsValue, propName) {
+  return propName !== "children";
+};
+
+var onlyMeaningfulChildren = function onlyMeaningfulChildren(children) {
+  return (
+    children !== true &&
+    children !== false &&
+    children !== null &&
+    children !== ""
+  );
+};
+
+var filterProps = function filterProps(originalProps, cb) {
+  var filteredProps = {};
+
+  Object.keys(originalProps)
+    .filter(function(key) {
+      return cb(originalProps[key], key);
+    })
+    .forEach(function(key) {
+      return (filteredProps[key] = originalProps[key]);
+    });
+
+  return filteredProps;
+};
+
+var parseReactElement = function parseReactElement(element, options) {
+  var _options$displayName = options.displayName,
+    displayNameFn =
+      _options$displayName === undefined
+        ? getReactElementDisplayName
+        : _options$displayName;
+
+  if (typeof element === "string") {
+    return (0, _tree.createStringTreeNode)(element);
+  } else if (typeof element === "number") {
+    return (0, _tree.createNumberTreeNode)(element);
+  } else if (!_react2.default.isValidElement(element)) {
+    throw new Error(
+      "react-element-to-jsx-string: Expected a React.Element, got `" +
+        (typeof element === "undefined" ? "undefined" : _typeof(element)) +
+        "`"
+    );
+  }
+
+  var displayName = displayNameFn(element);
+
+  var props = filterProps(element.props, noChildren);
+  if (element.ref !== null) {
+    props.ref = element.ref;
+  }
+
+  var key = element.key;
+  if (typeof key === "string" && key.search(/^\./)) {
+    // React automatically add key=".X" when there are some children
+    props.key = key;
+  }
+
+  var defaultProps = filterProps(element.type.defaultProps || {}, noChildren);
+  var childrens = _react2.default.Children.toArray(element.props.children)
+    .filter(onlyMeaningfulChildren)
+    .map(function(child) {
+      return parseReactElement(child, options);
+    });
+
+  if (supportFragment && element.type === _react.Fragment) {
+    return (0, _tree.createReactFragmentTreeNode)(key, childrens);
+  }
+
+  return (0, _tree.createReactElementTreeNode)(
+    displayName,
+    props,
+    defaultProps,
+    childrens
+  );
+};
+
+exports.default = parseReactElement;
+//# sourceMappingURL=parseReactElement.js.map

resources/js/ComponentDemo/react-element-to-jsx-string/parser/parseReactElement.js.flow

@@ -0,0 +1,86 @@
+/* @flow */
+
+import React, { type Element as ReactElement, Fragment } from 'react';
+import type { Options } from './../options';
+import {
+  createStringTreeNode,
+  createNumberTreeNode,
+  createReactElementTreeNode,
+  createReactFragmentTreeNode,
+} from './../tree';
+import type { TreeNode } from './../tree';
+
+const supportFragment = Boolean(Fragment);
+
+const getReactElementDisplayName = (element: ReactElement<*>): string =>
+  element.type.displayName ||
+  element.type.name || // function name
+  (typeof element.type === 'function' // function without a name, you should provide one
+    ? 'No Display Name'
+    : element.type);
+
+const noChildren = (propsValue, propName) => propName !== 'children';
+
+const onlyMeaningfulChildren = (children): boolean =>
+  children !== true &&
+  children !== false &&
+  children !== null &&
+  children !== '';
+
+const filterProps = (originalProps: {}, cb: (any, string) => boolean) => {
+  const filteredProps = {};
+
+  Object.keys(originalProps)
+    .filter(key => cb(originalProps[key], key))
+    .forEach(key => (filteredProps[key] = originalProps[key]));
+
+  return filteredProps;
+};
+
+const parseReactElement = (
+  element: ReactElement<*> | string | number,
+  options: Options
+): TreeNode => {
+  const { displayName: displayNameFn = getReactElementDisplayName } = options;
+
+  if (typeof element === 'string') {
+    return createStringTreeNode(element);
+  } else if (typeof element === 'number') {
+    return createNumberTreeNode(element);
+  } else if (!React.isValidElement(element)) {
+    throw new Error(
+      `react-element-to-jsx-string: Expected a React.Element, got \`${typeof element}\``
+    );
+  }
+
+  const displayName = displayNameFn(element);
+
+  const props = filterProps(element.props, noChildren);
+  if (element.ref !== null) {
+    props.ref = element.ref;
+  }
+
+  const key = element.key;
+  if (typeof key === 'string' && key.search(/^\./)) {
+    // React automatically add key=".X" when there are some children
+    props.key = key;
+  }
+
+  const defaultProps = filterProps(element.type.defaultProps || {}, noChildren);
+  const childrens = React.Children.toArray(element.props.children)
+    .filter(onlyMeaningfulChildren)
+    .map(child => parseReactElement(child, options));
+
+  if (supportFragment && element.type === Fragment) {
+    return createReactFragmentTreeNode(key, childrens);
+  }
+
+  return createReactElementTreeNode(
+    displayName,
+    props,
+    defaultProps,
+    childrens
+  );
+};
+
+export default parseReactElement;

resources/js/ComponentDemo/react-element-to-jsx-string/stringifyObject.js

@@ -0,0 +1,167 @@
+// https://github.com/mightyiam/get-own-enumerable-property-symbols/blob/master/src/index.ts
+const getOwnEnumPropSymbols = (object: Object): symbol[] =>
+  Object.getOwnPropertySymbols(object).filter(
+    (keySymbol): boolean => object.propertyIsEnumerable(keySymbol)
+  );
+
+// https://github.com/sindresorhus/is-regexp/blob/master/index.js
+const isRegexp = input =>
+  Object.prototype.toString.call(input) === "[object RegExp]";
+
+// https://github.com/sindresorhus/is-obj/blob/master/index.js
+const isObj = function(x) {
+  var type = typeof x;
+  return x !== null && (type === "object" || type === "function");
+};
+
+module.exports = (val, opts, pad) => {
+  const seen = [];
+
+  return (function stringify(val, opts, pad) {
+    opts = opts || {};
+    opts.indent = opts.indent || "\t";
+    pad = pad || "";
+
+    let tokens;
+
+    if (opts.inlineCharacterLimit === undefined) {
+      tokens = {
+        newLine: "\n",
+        newLineOrSpace: "\n",
+        pad,
+        indent: pad + opts.indent,
+      };
+    } else {
+      tokens = {
+        newLine: "@@__STRINGIFY_OBJECT_NEW_LINE__@@",
+        newLineOrSpace: "@@__STRINGIFY_OBJECT_NEW_LINE_OR_SPACE__@@",
+        pad: "@@__STRINGIFY_OBJECT_PAD__@@",
+        indent: "@@__STRINGIFY_OBJECT_INDENT__@@",
+      };
+    }
+
+    const expandWhiteSpace = string => {
+      if (opts.inlineCharacterLimit === undefined) {
+        return string;
+      }
+
+      const oneLined = string
+        .replace(new RegExp(tokens.newLine, "g"), "")
+        .replace(new RegExp(tokens.newLineOrSpace, "g"), " ")
+        .replace(new RegExp(tokens.pad + "|" + tokens.indent, "g"), "");
+
+      if (oneLined.length <= opts.inlineCharacterLimit) {
+        return oneLined;
+      }
+
+      return string
+        .replace(
+          new RegExp(tokens.newLine + "|" + tokens.newLineOrSpace, "g"),
+          "\n"
+        )
+        .replace(new RegExp(tokens.pad, "g"), pad)
+        .replace(new RegExp(tokens.indent, "g"), pad + opts.indent);
+    };
+
+    if (seen.indexOf(val) !== -1) {
+      return '"[Circular]"';
+    }
+
+    if (
+      val === null ||
+      val === undefined ||
+      typeof val === "number" ||
+      typeof val === "boolean" ||
+      typeof val === "function" ||
+      typeof val === "symbol" ||
+      isRegexp(val)
+    ) {
+      return String(val);
+    }
+
+    if (val instanceof Date) {
+      return `new Date('${val.toISOString()}')`;
+    }
+
+    if (Array.isArray(val)) {
+      if (val.length === 0) {
+        return "[]";
+      }
+
+      seen.push(val);
+
+      const ret =
+        "[" +
+        tokens.newLine +
+        val
+          .map((el, i) => {
+            const eol =
+              val.length - 1 === i
+                ? tokens.newLine
+                : "," + tokens.newLineOrSpace;
+            let value = stringify(el, opts, pad + opts.indent);
+            if (opts.transform) {
+              value = opts.transform(val, i, value);
+            }
+            return tokens.indent + value + eol;
+          })
+          .join("") +
+        tokens.pad +
+        "]";
+
+      seen.pop(val);
+
+      return expandWhiteSpace(ret);
+    }
+
+    if (isObj(val)) {
+      const objKeys = Object.keys(val).concat(getOwnEnumPropSymbols(val));
+
+      if (objKeys.length === 0) {
+        return "{}";
+      }
+
+      seen.push(val);
+
+      const ret =
+        "{" +
+        tokens.newLine +
+        objKeys
+          .map((el, i) => {
+            if (opts.filter && !opts.filter(val, el)) {
+              return "";
+            }
+
+            const eol =
+              objKeys.length - 1 === i
+                ? tokens.newLine
+                : "," + tokens.newLineOrSpace;
+            const isSymbol = typeof el === "symbol";
+            const isClassic = !isSymbol && /^[a-z$_][a-z$_0-9]*$/i.test(el);
+            const key = isSymbol || isClassic ? el : stringify(el, opts);
+            let value = stringify(val[el], opts, pad + opts.indent);
+            if (opts.transform) {
+              value = opts.transform(val, el, value);
+            }
+            return tokens.indent + String(key) + ": " + value + eol;
+          })
+          .join("") +
+        tokens.pad +
+        "}";
+
+      seen.pop(val);
+
+      return expandWhiteSpace(ret);
+    }
+
+    val = String(val).replace(/[\r\n]/g, x => (x === "\n" ? "\\n" : "\\r"));
+
+    if (opts.singleQuotes === false) {
+      val = val.replace(/"/g, '\\"');
+      return `"${val}"`;
+    }
+
+    val = val.replace(/\\?'/g, "\\'");
+    return `'${val}'`;
+  })(val, opts, pad);
+};

resources/js/ComponentDemo/react-element-to-jsx-string/tree.js

@@ -0,0 +1,50 @@
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+/* eslint-disable no-use-before-define */
+
+var createStringTreeNode = (exports.createStringTreeNode = function createStringTreeNode( // eslint-disable-line no-unused-vars
+  value
+) {
+  return {
+    type: "string",
+    value: value,
+  };
+});
+
+var createNumberTreeNode = (exports.createNumberTreeNode = function createNumberTreeNode( // eslint-disable-line no-unused-vars
+  value
+) {
+  return {
+    type: "number",
+    value: value,
+  };
+});
+
+var createReactElementTreeNode = (exports.createReactElementTreeNode = function createReactElementTreeNode( // eslint-disable-line no-unused-vars
+  displayName,
+  props,
+  defaultProps,
+  childrens
+) {
+  return {
+    type: "ReactElement",
+    displayName: displayName,
+    props: props,
+    defaultProps: defaultProps,
+    childrens: childrens,
+  };
+});
+
+var createReactFragmentTreeNode = (exports.createReactFragmentTreeNode = function createReactFragmentTreeNode( // eslint-disable-line no-unused-vars
+  key,
+  childrens
+) {
+  return {
+    type: "ReactFragment",
+    key: key,
+    childrens: childrens,
+  };
+});
+//# sourceMappingURL=tree.js.map

resources/js/ComponentDemo/react-element-to-jsx-string/tree.js.flow

@@ -0,0 +1,69 @@
+/* @flow */
+/* eslint-disable no-use-before-define */
+
+import type { Key } from 'react';
+
+type PropsType = { [key: string]: any };
+type DefaultPropsType = { [key: string]: any };
+
+export type StringTreeNode = {|
+  type: 'string',
+  value: string,
+|};
+
+export type NumberTreeNode = {|
+  type: 'number',
+  value: number,
+|};
+
+export type ReactElementTreeNode = {|
+  type: 'ReactElement',
+  displayName: string,
+  props: PropsType,
+  defaultProps: DefaultPropsType,
+  childrens: TreeNode[],
+|};
+
+export type ReactFragmentTreeNode = {|
+  type: 'ReactFragment',
+  key: ?Key,
+  childrens: TreeNode[],
+|};
+
+export type TreeNode =
+  | StringTreeNode
+  | NumberTreeNode
+  | ReactElementTreeNode
+  | ReactFragmentTreeNode;
+
+export const createStringTreeNode = (value: string): StringTreeNode => ({
+  type: 'string',
+  value,
+});
+
+export const createNumberTreeNode = (value: number): NumberTreeNode => ({
+  type: 'number',
+  value,
+});
+
+export const createReactElementTreeNode = (
+  displayName: string,
+  props: PropsType,
+  defaultProps: DefaultPropsType,
+  childrens: TreeNode[]
+): ReactElementTreeNode => ({
+  type: 'ReactElement',
+  displayName,
+  props,
+  defaultProps,
+  childrens,
+});
+
+export const createReactFragmentTreeNode = (
+  key: ?Key,
+  childrens: TreeNode[]
+): ReactFragmentTreeNode => ({
+  type: 'ReactFragment',
+  key,
+  childrens,
+});

resources/js/ComponentDemo/react-element-to-jsx-string/tree.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tree.js"],"names":["createStringTreeNode","value","type","createNumberTreeNode","createReactElementTreeNode","displayName","props","defaultProps","childrens","createReactFragmentTreeNode","key"],"mappings":";;;;;;AACA;;AAqCO,IAAMA,sDAAuB,SAAvBA,oBAAuB,CAACC,KAAD;AAAA,SAAoC;AACtEC,UAAM,QADgE;AAEtED;AAFsE,GAApC;AAAA,CAA7B;;AAKA,IAAME,sDAAuB,SAAvBA,oBAAuB,CAACF,KAAD;AAAA,SAAoC;AACtEC,UAAM,QADgE;AAEtED;AAFsE,GAApC;AAAA,CAA7B;;AAKA,IAAMG,kEAA6B,SAA7BA,0BAA6B,CACxCC,WADwC,EAExCC,KAFwC,EAGxCC,YAHwC,EAIxCC,SAJwC;AAAA,SAKd;AAC1BN,UAAM,cADoB;AAE1BG,4BAF0B;AAG1BC,gBAH0B;AAI1BC,8BAJ0B;AAK1BC;AAL0B,GALc;AAAA,CAAnC;;AAaA,IAAMC,oEAA8B,SAA9BA,2BAA8B,CACzCC,GADyC,EAEzCF,SAFyC;AAAA,SAGd;AAC3BN,UAAM,eADqB;AAE3BQ,YAF2B;AAG3BF;AAH2B,GAHc;AAAA,CAApC","file":"tree.js","sourcesContent":["/* @flow */\n/* eslint-disable no-use-before-define */\n\nimport type { Key } from 'react';\n\ntype PropsType = { [key: string]: any };\ntype DefaultPropsType = { [key: string]: any };\n\nexport type StringTreeNode = {|\n  type: 'string',\n  value: string,\n|};\n\nexport type NumberTreeNode = {|\n  type: 'number',\n  value: number,\n|};\n\nexport type ReactElementTreeNode = {|\n  type: 'ReactElement',\n  displayName: string,\n  props: PropsType,\n  defaultProps: DefaultPropsType,\n  childrens: TreeNode[],\n|};\n\nexport type ReactFragmentTreeNode = {|\n  type: 'ReactFragment',\n  key: ?Key,\n  childrens: TreeNode[],\n|};\n\nexport type TreeNode =\n  | StringTreeNode\n  | NumberTreeNode\n  | ReactElementTreeNode\n  | ReactFragmentTreeNode;\n\nexport const createStringTreeNode = (value: string): StringTreeNode => ({\n  type: 'string',\n  value,\n});\n\nexport const createNumberTreeNode = (value: number): NumberTreeNode => ({\n  type: 'number',\n  value,\n});\n\nexport const createReactElementTreeNode = (\n  displayName: string,\n  props: PropsType,\n  defaultProps: DefaultPropsType,\n  childrens: TreeNode[]\n): ReactElementTreeNode => ({\n  type: 'ReactElement',\n  displayName,\n  props,\n  defaultProps,\n  childrens,\n});\n\nexport const createReactFragmentTreeNode = (\n  key: ?Key,\n  childrens: TreeNode[]\n): ReactFragmentTreeNode => ({\n  type: 'ReactFragment',\n  key,\n  childrens,\n});\n"]}

resources/js/FormElementsPage.react.js

@@ -0,0 +1,723 @@
+// @flow
+
+import * as React from "react";
+
+import { Page, Card, Grid, Form, Button, Dropdown } from "tabler-react";
+
+import ComponentDemo from "./ComponentDemo";
+import SiteWrapper from "./SiteWrapper.react";
+
+function FormElements() {
+  return (
+    <SiteWrapper>
+      <Page.Card
+        title="Form elements"
+        RootComponent={Form}
+        footer={
+          <Card.Footer>
+            <div className="d-flex">
+              <Button link>Cancel</Button>
+              <Button type="submit" color="primary" className="ml-auto">
+                Send data
+              </Button>
+            </div>
+          </Card.Footer>
+        }
+      >
+        <Grid.Row>
+          <Grid.Col md={6} lg={4}>
+            <ComponentDemo>
+              <Form.Group label="Static">
+                <Form.StaticText>Username</Form.StaticText>
+              </Form.Group>
+            </ComponentDemo>
+
+            <ComponentDemo>
+              <Form.Group label="Text">
+                <Form.Input name="example-text-input" placeholder="Text..." />
+              </Form.Group>
+            </ComponentDemo>
+
+            <ComponentDemo>
+              <Form.Group label="Disabled">
+                <Form.Input
+                  disabled
+                  name="example-disabled-text-input"
+                  value="Well, she turned me into a newt."
+                />
+              </Form.Group>
+            </ComponentDemo>
+
+            <ComponentDemo>
+              <Form.Group label="Read Only">
+                <Form.Input
+                  readOnly
+                  name="example-readonly-text-input"
+                  value="Well, howd you become king, then?"
+                />
+              </Form.Group>
+            </ComponentDemo>
+
+            <ComponentDemo>
+              <Form.Group
+                label={<Form.Label aside="56/100" children="Textarea" />}
+              >
+                <Form.Textarea
+                  name="example-textarea"
+                  rows={6}
+                  placeholder="Content.."
+                  defaultValue=" Oh! Come and see the violence inherent in the system! Help,
+                  help, I'm being repressed! We shall say 'Ni' again to you, if
+                  you do not appease us. I'm not a witch. I'm not a witch.
+                  Camelot!"
+                />
+              </Form.Group>
+            </ComponentDemo>
+
+            <ComponentDemo>
+              <Form.Group label="Image Check">
+                <Form.ImageCheck>
+                  <Form.ImageCheckItem
+                    value={1}
+                    imageURL="/demo/photos/nathan-anderson-316188-500.jpg"
+                  />
+                  <Form.ImageCheckItem
+                    value={2}
+                    imageURL="/demo/photos/nathan-dumlao-287713-500.jpg"
+                  />
+                  <Form.ImageCheckItem
+                    value={3}
+                    imageURL="./demo/photos/nicolas-picard-208276-500.jpg"
+                  />
+
+                  <Form.ImageCheckItem
+                    value={4}
+                    imageURL="./demo/photos/oskar-vertetics-53043-500.jpg"
+                  />
+                  <Form.ImageCheckItem
+                    value={5}
+                    imageURL="./demo/photos/priscilla-du-preez-181896-500.jpg"
+                  />
+                  <Form.ImageCheckItem
+                    value={6}
+                    imageURL="./demo/photos/ricardo-gomez-angel-262359-500.jpg"
+                  />
+
+                  <Form.ImageCheckItem
+                    value={7}
+                    imageURL="./demo/photos/sam-ferrara-136526-500.jpg"
+                  />
+                  <Form.ImageCheckItem
+                    value={8}
+                    imageURL="./demo/photos/sean-afnan-244576-500.jpg"
+                  />
+                  <Form.ImageCheckItem
+                    value={9}
+                    imageURL="./demo/photos/sophie-higginbottom-133982-500.jpg"
+                  />
+                </Form.ImageCheck>
+              </Form.Group>
+            </ComponentDemo>
+
+            <ComponentDemo>
+              <Form.Group label="Color Check">
+                <Form.ColorCheck>
+                  <Form.ColorCheckItem color="azure" />
+                  <Form.ColorCheckItem color="indigo" />
+                  <Form.ColorCheckItem color="purple" />
+
+                  <Form.ColorCheckItem color="pink" />
+                  <Form.ColorCheckItem color="red" />
+                  <Form.ColorCheckItem color="orange" />
+
+                  <Form.ColorCheckItem color="lime" />
+                  <Form.ColorCheckItem color="green" />
+                  <Form.ColorCheckItem color="teal" />
+                </Form.ColorCheck>
+              </Form.Group>
+            </ComponentDemo>
+
+            <ComponentDemo>
+              <Form.Group label="Input Group">
+                <Form.InputGroup>
+                  <Form.Input placeholder="Search for..." />
+                  <Form.InputGroupAppend>
+                    <Button
+                      RootComponent="a"
+                      color="primary"
+                      href="http://www.google.com"
+                    >
+                      Go!
+                    </Button>
+                  </Form.InputGroupAppend>
+                </Form.InputGroup>
+              </Form.Group>
+            </ComponentDemo>
+
+            <ComponentDemo>
+              <Form.Group label="Input Group Buttons">
+                <Form.InputGroup>
+                  <Form.Input />
+                  <Form.InputGroup append>
+                    <Button color="primary">Actions</Button>
+                    <Button.Dropdown color="primary">
+                      <Dropdown.Item>News</Dropdown.Item>
+                      <Dropdown.Item>Messages</Dropdown.Item>
+                      <Dropdown.ItemDivider />
+                      <Dropdown.Item>Edit Profile</Dropdown.Item>
+                    </Button.Dropdown>
+                  </Form.InputGroup>
+                </Form.InputGroup>
+              </Form.Group>
+            </ComponentDemo>
+
+            <ComponentDemo>
+              <Form.Group label="Input Icon">
+                <Form.Input
+                  icon="search"
+                  placeholder="Search for..."
+                  position="append"
+                  className={"mb-3"}
+                />
+                <Form.Input icon="user" placeholder="Username" />
+              </Form.Group>
+            </ComponentDemo>
+            <ComponentDemo>
+              <Form.Group label="Seperated Inputs">
+                <Form.Input
+                  icon="search"
+                  placeholder="Search for..."
+                  position="append"
+                  className={"mb-3"}
+                />
+                <Grid.Row gutters="xs">
+                  <Grid.Col>
+                    <Form.Input placeholder="Search for..." />
+                  </Grid.Col>
+                  <Grid.Col auto>
+                    <Button color="secondary" icon="search" />
+                  </Grid.Col>
+                </Grid.Row>
+              </Form.Group>
+            </ComponentDemo>
+
+            <ComponentDemo>
+              <Form.Group label="ZIP Code">
+                <Grid.Row gutters="xs">
+                  <Grid.Col>
+                    <Form.Input placeholder="Search for..." />
+                  </Grid.Col>
+                  <Grid.Col auto className="align-self-center">
+                    <Form.Help
+                      message={
+                        <React.Fragment>
+                          <p>
+                            ZIP Code must be US or CDN format. You can use an
+                            extended ZIP+4 code to determine address more
+                            accurately.
+                          </p>
+                          <p class="mb-0">
+                            <a href="#">USP ZIP codes lookup tools</a>
+                          </p>
+                        </React.Fragment>
+                      }
+                    />
+                  </Grid.Col>
+                </Grid.Row>
+              </Form.Group>
+            </ComponentDemo>
+          </Grid.Col>
+
+          <Grid.Col md={6} lg={4}>
+            <ComponentDemo>
+              <Form.Group label="Password">
+                <Form.Input
+                  type="password"
+                  name="example-password-input"
+                  placeholder="Password..."
+                />
+              </Form.Group>
+            </ComponentDemo>
+
+            <ComponentDemo>
+              <Form.Group label="Valid State">
+                <Form.Input valid placeholder="Is Valid" />
+                <Form.Input tick placeholder="Tick" className="mt-3" />
+              </Form.Group>
+            </ComponentDemo>
+            <ComponentDemo>
+              <Form.Group label="Invalid State">
+                <Form.Input
+                  invalid
+                  feedback="Invalid feedback"
+                  placeholder="Is Invalid"
+                />
+                <Form.Input cross placeholder="Cross" className="mt-3" />
+              </Form.Group>
+            </ComponentDemo>
+            <ComponentDemo>
+              <Form.Group label="Select">
+                <Form.Select>
+                  <option>United Kingdom</option>
+                  <option>Germany</option>
+                </Form.Select>
+              </Form.Group>
+            </ComponentDemo>
+            <ComponentDemo>
+              <Form.Group label="Ratios">
+                <Form.Ratio step={5} min={0} max={50} defaultValue={15} />
+              </Form.Group>
+            </ComponentDemo>
+            <ComponentDemo>
+              <Form.Group label="Size">
+                <Form.SelectGroup>
+                  <Form.SelectGroupItem name="size" label="S" value="50" />
+                  <Form.SelectGroupItem name="size" label="M" value="100" />
+                  <Form.SelectGroupItem name="size" label="L" value="150" />
+                  <Form.SelectGroupItem name="size" label="XL" value="200" />
+                </Form.SelectGroup>
+              </Form.Group>
+            </ComponentDemo>
+            <ComponentDemo>
+              <Form.Group label="Icons input">
+                <Form.SelectGroup>
+                  <Form.SelectGroupItem
+                    name="device"
+                    icon="smartphone"
+                    value="smartphone"
+                  />
+                  <Form.SelectGroupItem
+                    name="device"
+                    icon="tablet"
+                    value="tablet"
+                  />
+                  <Form.SelectGroupItem
+                    name="device"
+                    icon="monitor"
+                    value="monitor"
+                  />
+                  <Form.SelectGroupItem name="device" icon="x" value="x" />
+                </Form.SelectGroup>
+              </Form.Group>
+            </ComponentDemo>
+
+            <ComponentDemo>
+              <Form.Group label="Icon input">
+                <Form.SelectGroup pills>
+                  <Form.SelectGroupItem name="weather" icon="sun" value="sun" />
+                  <Form.SelectGroupItem
+                    name="weather"
+                    icon="moon"
+                    value="moon"
+                  />
+                  <Form.SelectGroupItem
+                    name="weather"
+                    icon="cloud-rain"
+                    value="cloud-rain"
+                  />
+                  <Form.SelectGroupItem
+                    name="weather"
+                    icon="cloud"
+                    value="cloud"
+                  />
+                </Form.SelectGroup>
+              </Form.Group>
+            </ComponentDemo>
+
+            <ComponentDemo>
+              <Form.Group label="Icon input">
+                <Form.SelectGroup pills canSelectMultiple>
+                  <Form.SelectGroupItem
+                    name="language"
+                    label="HTML"
+                    value="HTML"
+                  />
+                  <Form.SelectGroupItem
+                    name="language"
+                    label="CSS"
+                    value="CSS"
+                  />
+                  <Form.SelectGroupItem
+                    name="language"
+                    label="PHP"
+                    value="PHP"
+                  />
+                  <Form.SelectGroupItem
+                    name="language"
+                    label="JavaScript"
+                    value="JavaScript"
+                  />
+                  <Form.SelectGroupItem
+                    name="language"
+                    label="Python"
+                    value="Python"
+                  />
+                  <Form.SelectGroupItem
+                    name="language"
+                    label="Ruby"
+                    value="Ruby"
+                  />
+                  <Form.SelectGroupItem
+                    name="language"
+                    label="C++"
+                    value="C++"
+                  />
+                </Form.SelectGroup>
+              </Form.Group>
+            </ComponentDemo>
+
+            <ComponentDemo>
+              <Form.Group label="Toggle switches">
+                <Form.SwitchStack>
+                  <Form.Switch
+                    type="radio"
+                    name="toggle"
+                    value="option1"
+                    label="Option 1"
+                  />
+                  <Form.Switch
+                    type="radio"
+                    name="toggle"
+                    value="option2"
+                    label="Option 2"
+                  />
+                  <Form.Switch
+                    type="radio"
+                    name="toggle"
+                    value="option3"
+                    label="Option 3"
+                  />
+                </Form.SwitchStack>
+              </Form.Group>
+            </ComponentDemo>
+            <ComponentDemo>
+              <Form.Group label="Toggle switch single">
+                <Form.Switch
+                  name="tandcs"
+                  value="tandcs"
+                  label="I agree with terms and conditions"
+                />
+              </Form.Group>
+            </ComponentDemo>
+
+            <ComponentDemo>
+              <Form.FieldSet>
+                <Form.Group label="Full name" isRequired>
+                  <Form.Input name="example-text-input" />
+                </Form.Group>
+                <Form.Group label="Company" isRequired>
+                  <Form.Input name="example-text-input" />
+                </Form.Group>
+                <Form.Group label="Email" isRequired>
+                  <Form.Input name="example-text-input" />
+                </Form.Group>
+                <Form.Group label="Phone number" className="mb-0">
+                  <Form.Input name="example-text-input" />
+                </Form.Group>
+              </Form.FieldSet>
+            </ComponentDemo>
+          </Grid.Col>
+          <Grid.Col md={6} lg={4}>
+            <ComponentDemo>
+              <Form.Group label="Radios">
+                <Form.Radio
+                  name="example-radios"
+                  label="Option 1"
+                  value="option1"
+                />
+                <Form.Radio
+                  name="example-radios"
+                  label="Option 2"
+                  value="option2"
+                />
+                <Form.Radio
+                  disabled
+                  name="example-radios"
+                  label="Option 3 disabled"
+                  value="option3"
+                />
+                <Form.Radio
+                  disabled
+                  checked
+                  name="example-radios2"
+                  label="Option 4 disabled checked"
+                  value="option4"
+                />
+              </Form.Group>
+            </ComponentDemo>
+
+            <ComponentDemo>
+              <Form.Group label="Inline radios">
+                <Form.Radio
+                  name="example-inline-radios"
+                  label="Option 1"
+                  value="option1"
+                  isInline
+                />
+                <Form.Radio
+                  name="example-inline-radios"
+                  label="Option 2"
+                  value="option2"
+                  isInline
+                />
+                <Form.Radio
+                  disabled
+                  name="example-inline-radios"
+                  label="Option 3 disabled"
+                  value="option3"
+                  isInline
+                />
+              </Form.Group>
+            </ComponentDemo>
+
+            <ComponentDemo>
+              <Form.Group label="Checkboxes">
+                <Form.Checkbox
+                  name="example-radios"
+                  label="Option 1"
+                  value="option1"
+                />
+                <Form.Checkbox
+                  name="example-radios"
+                  label="Option 2"
+                  value="option2"
+                />
+                <Form.Checkbox
+                  disabled
+                  name="example-radios"
+                  label="Option 3 disabled"
+                  value="option3"
+                />
+                <Form.Checkbox
+                  disabled
+                  checked
+                  name="example-radios2"
+                  label="Option 4 disabled checked"
+                  value="option4"
+                />
+              </Form.Group>
+            </ComponentDemo>
+            <ComponentDemo>
+              <Form.Group label="Inline checkboxes">
+                <Form.Checkbox
+                  name="example-inline-checkboxes"
+                  label="Option 1"
+                  value="option1"
+                  isInline
+                />
+                <Form.Checkbox
+                  name="example-inline-checkboxes"
+                  label="Option 2"
+                  value="option2"
+                  isInline
+                />
+                <Form.Checkbox
+                  disabled
+                  name="example-inline-checkboxes"
+                  label="Option 3 disabled"
+                  value="option3"
+                  isInline
+                />
+              </Form.Group>
+            </ComponentDemo>
+            <ComponentDemo>
+              <Form.Group label="File input">
+                <Form.FileInput />
+              </Form.Group>
+            </ComponentDemo>
+
+            <ComponentDemo>
+              <Form.Group label="Username">
+                <Form.InputGroup>
+                  <Form.InputGroupPrepend>@</Form.InputGroupPrepend>
+                  <Form.Input placeholder="Username" />
+                </Form.InputGroup>
+              </Form.Group>
+            </ComponentDemo>
+
+            <ComponentDemo>
+              <Form.Group label="Subdomain">
+                <Form.InputGroup>
+                  <Form.Input placeholder="Your subdomain" />
+                  <Form.InputGroupAppend>.example.com</Form.InputGroupAppend>
+                </Form.InputGroup>
+              </Form.Group>
+            </ComponentDemo>
+
+            <ComponentDemo>
+              <Form.Group label="Your vanity URL">
+                <Form.InputGroup>
+                  <Form.InputGroupPrepend>
+                    https://example.com/users/
+                  </Form.InputGroupPrepend>
+                  <Form.Input />
+                </Form.InputGroup>
+              </Form.Group>
+            </ComponentDemo>
+
+            <ComponentDemo>
+              <Form.Group label="Price">
+                <Form.InputGroup>
+                  <Form.InputGroupPrepend>$</Form.InputGroupPrepend>
+                  <Form.Input />
+                  <Form.InputGroupAppend>.00</Form.InputGroupAppend>
+                </Form.InputGroup>
+              </Form.Group>
+            </ComponentDemo>
+
+            <ComponentDemo>
+              <Form.Group label="Price">
+                <Form.InputGroup>
+                  <Form.InputGroup prepend>
+                    <Button color="secondary" isDropdownToggle>
+                      Action
+                    </Button>
+                    <Dropdown.Menu position="right">
+                      <Dropdown.Item>News</Dropdown.Item>
+                      <Dropdown.Item>Messages</Dropdown.Item>
+                      <Dropdown.ItemDivider />
+                      <Dropdown.Item>Edit Profile</Dropdown.Item>
+                    </Dropdown.Menu>
+                  </Form.InputGroup>
+                  <Form.Input />
+                </Form.InputGroup>
+              </Form.Group>
+            </ComponentDemo>
+
+            <ComponentDemo>
+              <Form.Group label="Date Picker">
+                <Form.DatePicker />
+              </Form.Group>
+            </ComponentDemo>
+          </Grid.Col>
+          <Grid.Col lg={4}>
+            <Card title="Input Mask">
+              <Card.Body>
+                <Form.Group label="Date">
+                  <Form.MaskedInput
+                    placeholder="00/00/0000"
+                    mask={[
+                      /\d/,
+                      /\d/,
+                      "/",
+                      /\d/,
+                      /\d/,
+                      "/",
+                      /\d/,
+                      /\d/,
+                      /\d/,
+                      /\d/,
+                    ]}
+                  />
+                </Form.Group>
+                <Form.Group label="Time">
+                  <Form.MaskedInput
+                    placeholder="00:00:00"
+                    mask={[/\d/, /\d/, ":", /\d/, /\d/, ":", /\d/, /\d/]}
+                  />
+                </Form.Group>
+                <Form.Group label="Date & Time">
+                  <Form.MaskedInput
+                    placeholder="00/00/0000 00:00:00"
+                    mask={[
+                      /\d/,
+                      /\d/,
+                      "/",
+                      /\d/,
+                      /\d/,
+                      "/",
+                      /\d/,
+                      /\d/,
+                      /\d/,
+                      /\d/,
+                      " ",
+                      /\d/,
+                      /\d/,
+                      ":",
+                      /\d/,
+                      /\d/,
+                      ":",
+                      /\d/,
+                      /\d/,
+                    ]}
+                  />
+                </Form.Group>
+                <Form.Group label="Zipcode">
+                  <Form.MaskedInput
+                    placeholder="91210"
+                    mask={[/\d/, /\d/, /\d/, /\d/, /\d/]}
+                  />
+                </Form.Group>
+                <Form.Group label="Telephone">
+                  <Form.MaskedInput
+                    placeholder="+1 (555) 495-3947"
+                    mask={[
+                      "(",
+                      /[1-9]/,
+                      /\d/,
+                      /\d/,
+                      ")",
+                      " ",
+                      /\d/,
+                      /\d/,
+                      /\d/,
+                      "-",
+                      /\d/,
+                      /\d/,
+                      /\d/,
+                      /\d/,
+                    ]}
+                  />
+                </Form.Group>
+                <Form.Group label="Telephone with Area Code">
+                  <Form.MaskedInput
+                    placeholder="+1 (555) 495-3947"
+                    mask={[
+                      "+",
+                      "1",
+                      " ",
+                      "(",
+                      /[1-9]/,
+                      /\d/,
+                      /\d/,
+                      ")",
+                      " ",
+                      /\d/,
+                      /\d/,
+                      /\d/,
+                      "-",
+                      /\d/,
+                      /\d/,
+                      /\d/,
+                      /\d/,
+                    ]}
+                  />
+                </Form.Group>
+                <Form.Group label="IP Address">
+                  <Form.MaskedInput
+                    placeholder="127.0.0.1"
+                    mask={[
+                      /\d/,
+                      /\d/,
+                      /\d/,
+                      ".",
+                      /\d/,
+                      /\d/,
+                      /\d/,
+                      ".",
+                      /\d/,
+                      /\d/,
+                      /\d/,
+                    ]}
+                  />
+                </Form.Group>
+              </Card.Body>
+            </Card>
+          </Grid.Col>
+        </Grid.Row>
+      </Page.Card>
+    </SiteWrapper>
+  );
+}
+
+export default FormElements;

resources/js/GalleryPage.react.js

@@ -0,0 +1,64 @@
+// @flow
+
+import * as React from "react";
+
+import { Page, Grid, GalleryCard, Form } from "tabler-react";
+
+import SiteWrapper from "./SiteWrapper.react";
+
+import json from "./data/Gallery.Items";
+// TODO:Add GalleryCardList component to avoid insert extra className
+// TODO:Update Page.Header to additional components
+
+function GalleryPage(): React.Node {
+  const options = (
+    <React.Fragment>
+      <Form.Select className="w-auto mr-2">
+        <option value="asc">Newest</option>
+        <option value="desc">Oldest</option>
+      </Form.Select>
+      <Form.Input icon="search" placeholder="Search photo" />
+    </React.Fragment>
+  );
+  return (
+    <SiteWrapper>
+      <Page.Content>
+        <Page.Header
+          title="Gallery"
+          subTitle="1 - 12 of 1713 photos"
+          options={options}
+        />
+
+        <Grid.Row className="row-cards">
+          {json.items.map((item, key) => (
+            <Grid.Col sm={6} lg={4} key={key}>
+              <GalleryCard>
+                <GalleryCard.Image
+                  src={item.imageURL}
+                  alt={`Photo by ${item.fullName}`}
+                />
+                <GalleryCard.Footer>
+                  <GalleryCard.Details
+                    avatarURL={item.avatarURL}
+                    fullName={item.fullName}
+                    dateString={item.dateString}
+                  />
+                  <GalleryCard.IconGroup>
+                    <GalleryCard.IconItem name="eye" label={item.totalView} />
+                    <GalleryCard.IconItem
+                      name="heart"
+                      label={item.totalLike}
+                      right
+                    />
+                  </GalleryCard.IconGroup>
+                </GalleryCard.Footer>
+              </GalleryCard>
+            </Grid.Col>
+          ))}
+        </Grid.Row>
+      </Page.Content>
+    </SiteWrapper>
+  );
+}
+
+export default GalleryPage;

resources/js/GoogleMap/GoogleMap.css

@@ -0,0 +1,8 @@
+.GoogleMapContainer {
+  height: 100%;
+}
+
+.GoogleMapContainer.blackAndWhite {
+  -webkit-filter: grayscale(100%);
+  filter: grayscale(100%);
+}

resources/js/GoogleMap/GoogleMap.react.js

@@ -0,0 +1,40 @@
+// @flow
+
+import * as React from "react";
+import cn from "classnames";
+
+import "./GoogleMap.css";
+
+import {
+  withScriptjs,
+  withGoogleMap,
+  GoogleMap as ReactGoogleMap,
+} from "react-google-maps";
+
+const MapComponent: React.ElementType = withScriptjs(
+  withGoogleMap(props => (
+    <ReactGoogleMap
+      defaultZoom={8}
+      defaultCenter={{ lat: -34.397, lng: 150.644 }}
+      disableDefaultUI={true}
+    />
+  ))
+);
+
+type Props = {|
+  +blackAndWhite?: boolean,
+|};
+
+function GoogleMap({ blackAndWhite }: Props): React.Node {
+  const containerClasses = cn("GoogleMapContainer", { blackAndWhite });
+  return (
+    <MapComponent
+      googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places"
+      loadingElement={<div style={{ height: `100%` }} />}
+      containerElement={<div className={containerClasses} />}
+      mapElement={<div style={{ height: `100%` }} />}
+    />
+  );
+}
+
+export default GoogleMap;

resources/js/GoogleMap/index.js

@@ -0,0 +1,5 @@
+// @flow
+
+import GoogleMap from "./GoogleMap.react";
+
+export default GoogleMap;

resources/js/HomePage.react.js

@@ -0,0 +1,925 @@
+// @flow
+
+import * as React from "react";
+
+import {
+  Page,
+  Avatar,
+  Icon,
+  Grid,
+  Card,
+  Text,
+  Table,
+  Alert,
+  Progress,
+  colors,
+  Dropdown,
+  Button,
+  StampCard,
+  StatsCard,
+  ProgressCard,
+  Badge,
+} from "tabler-react";
+
+import C3Chart from "react-c3js";
+
+import SiteWrapper from "./SiteWrapper.react";
+
+function Home() {
+  return (
+    <SiteWrapper>
+      <Page.Content title="Dashboard">
+        <Grid.Row cards={true}>
+          <Grid.Col width={6} sm={4} lg={2}>
+            <StatsCard layout={1} movement={6} total="43" label="New Tickets" />
+          </Grid.Col>
+          <Grid.Col width={6} sm={4} lg={2}>
+            <StatsCard
+              layout={1}
+              movement={-3}
+              total="17"
+              label="Closed Today"
+            />
+          </Grid.Col>
+          <Grid.Col width={6} sm={4} lg={2}>
+            <StatsCard layout={1} movement={9} total="7" label="New Replies" />
+          </Grid.Col>
+          <Grid.Col width={6} sm={4} lg={2}>
+            <StatsCard
+              layout={1}
+              movement={3}
+              total="27.3k"
+              label="Followers"
+            />
+          </Grid.Col>
+          <Grid.Col width={6} sm={4} lg={2}>
+            <StatsCard
+              layout={1}
+              movement={-2}
+              total="$95"
+              label="Daily earnings"
+            />
+          </Grid.Col>
+          <Grid.Col width={6} sm={4} lg={2}>
+            <StatsCard layout={1} movement={-1} total="621" label="Products" />
+          </Grid.Col>
+          <Grid.Col lg={6}>
+            <Card>
+              <Card.Header>
+                <Card.Title>Development Activity</Card.Title>
+              </Card.Header>
+              <C3Chart
+                style={{ height: "10rem" }}
+                data={{
+                  columns: [
+                    // each columns data
+                    [
+                      "data1",
+                      0,
+                      5,
+                      1,
+                      2,
+                      7,
+                      5,
+                      6,
+                      8,
+                      24,
+                      7,
+                      12,
+                      5,
+                      6,
+                      3,
+                      2,
+                      2,
+                      6,
+                      30,
+                      10,
+                      10,
+                      15,
+                      14,
+                      47,
+                      65,
+                      55,
+                    ],
+                  ],
+                  type: "area", // default type of chart
+                  groups: [["data1", "data2", "data3"]],
+                  colors: {
+                    data1: colors["blue"],
+                  },
+                  names: {
+                    // name of each serie
+                    data1: "Purchases",
+                  },
+                }}
+                axis={{
+                  y: {
+                    padding: {
+                      bottom: 0,
+                    },
+                    show: false,
+                    tick: {
+                      outer: false,
+                    },
+                  },
+                  x: {
+                    padding: {
+                      left: 0,
+                      right: 0,
+                    },
+                    show: false,
+                  },
+                }}
+                legend={{
+                  position: "inset",
+                  padding: 0,
+                  inset: {
+                    anchor: "top-left",
+                    x: 20,
+                    y: 8,
+                    step: 10,
+                  },
+                }}
+                tooltip={{
+                  format: {
+                    title: function(x) {
+                      return "";
+                    },
+                  },
+                }}
+                padding={{
+                  bottom: 0,
+                  left: -1,
+                  right: -1,
+                }}
+                point={{
+                  show: false,
+                }}
+              />
+              <Table
+                cards={true}
+                striped={true}
+                responsive={true}
+                className="table-vcenter"
+              >
+                <Table.Header>
+                  <Table.Row>
+                    <Table.ColHeader colSpan={2}>User</Table.ColHeader>
+                    <Table.ColHeader>Commit</Table.ColHeader>
+                    <Table.ColHeader>Date</Table.ColHeader>
+                    <Table.ColHeader />
+                  </Table.Row>
+                </Table.Header>
+                <Table.Body>
+                  <Table.Row>
+                    <Table.Col className="w-1">
+                      <Avatar imageURL="./demo/faces/male/9.jpg" />
+                    </Table.Col>
+                    <Table.Col>Ronald Bradley</Table.Col>
+                    <Table.Col>Initial commit</Table.Col>
+                    <Table.Col className="text-nowrap">May 6, 2018</Table.Col>
+                    <Table.Col className="w-1">
+                      <Icon link={true} name="trash" />
+                    </Table.Col>
+                  </Table.Row>
+                  <Table.Row>
+                    <Table.Col>
+                      <Avatar>BM</Avatar>
+                    </Table.Col>
+                    <Table.Col>Russell Gibson</Table.Col>
+                    <Table.Col>Main structure</Table.Col>
+                    <Table.Col className="text-nowrap">
+                      April 22, 2018
+                    </Table.Col>
+                    <Table.Col>
+                      <Icon link={true} name="trash" />
+                    </Table.Col>
+                  </Table.Row>
+                  <Table.Row>
+                    <Table.Col>
+                      <Avatar imageURL="./demo/faces/female/1.jpg" />
+                    </Table.Col>
+                    <Table.Col>Beverly Armstrong</Table.Col>
+                    <Table.Col>Left sidebar adjustments</Table.Col>
+                    <Table.Col className="text-nowrap">
+                      April 15, 2018
+                    </Table.Col>
+                    <Table.Col>
+                      <Icon link={true} name="trash" />
+                    </Table.Col>
+                  </Table.Row>
+                  <Table.Row>
+                    <Table.Col>
+                      <Avatar imageURL="./demo/faces/male/4.jpg" />
+                    </Table.Col>
+                    <Table.Col>Bobby Knight</Table.Col>
+                    <Table.Col>Topbar dropdown style</Table.Col>
+                    <Table.Col className="text-nowrap">April 8, 2018</Table.Col>
+                    <Table.Col>
+                      <Icon link={true} name="trash" />
+                    </Table.Col>
+                  </Table.Row>
+                  <Table.Row>
+                    <Table.Col>
+                      <Avatar imageURL="./demo/faces/female/11.jpg" />
+                    </Table.Col>
+                    <Table.Col>Sharon Wells</Table.Col>
+                    <Table.Col>Fixes #625</Table.Col>
+                    <Table.Col className="text-nowrap">April 9, 2018</Table.Col>
+                    <Table.Col>
+                      <Icon link={true} name="trash" />
+                    </Table.Col>
+                  </Table.Row>
+                </Table.Body>
+              </Table>
+            </Card>
+          </Grid.Col>
+
+          <Grid.Col md={6}>
+            <Alert type="primary">
+              <Alert.Link
+                href={
+                  process.env.NODE_ENV === "production"
+                    ? "https://tabler.github.io/tabler-react/documentation"
+                    : "/documentation"
+                }
+              >
+                Read our documentation
+              </Alert.Link>{" "}
+              with code samples.
+            </Alert>
+            <Grid.Row>
+              <Grid.Col sm={6}>
+                <Card>
+                  <Card.Header>
+                    <Card.Title>Chart title</Card.Title>
+                  </Card.Header>
+                  <Card.Body>
+                    <C3Chart
+                      style={{ height: "12rem" }}
+                      data={{
+                        columns: [
+                          // each columns data
+                          ["data1", 63],
+                          ["data2", 37],
+                        ],
+                        type: "donut", // default type of chart
+                        colors: {
+                          data1: colors["green"],
+                          data2: colors["green-light"],
+                        },
+                        names: {
+                          // name of each serie
+                          data1: "Maximum",
+                          data2: "Minimum",
+                        },
+                      }}
+                      legend={{
+                        show: false, //hide legend
+                      }}
+                      padding={{
+                        bottom: 0,
+                        top: 0,
+                      }}
+                    />
+                  </Card.Body>
+                </Card>
+              </Grid.Col>
+              <Grid.Col sm={6}>
+                <Card>
+                  <Card.Header>
+                    <Card.Title>Chart title</Card.Title>
+                  </Card.Header>
+                  <Card.Body>
+                    <C3Chart
+                      style={{ height: "12rem" }}
+                      data={{
+                        columns: [
+                          // each columns data
+                          ["data1", 63],
+                          ["data2", 44],
+                          ["data3", 12],
+                          ["data4", 14],
+                        ],
+                        type: "pie", // default type of chart
+                        colors: {
+                          data1: colors["blue-darker"],
+                          data2: colors["blue"],
+                          data3: colors["blue-light"],
+                          data4: colors["blue-lighter"],
+                        },
+                        names: {
+                          // name of each serie
+                          data1: "A",
+                          data2: "B",
+                          data3: "C",
+                          data4: "D",
+                        },
+                      }}
+                      legend={{
+                        show: false, //hide legend
+                      }}
+                      padding={{
+                        bottom: 0,
+                        top: 0,
+                      }}
+                    />
+                  </Card.Body>
+                </Card>
+              </Grid.Col>
+              <Grid.Col sm={6}>
+                <ProgressCard
+                  header="New feedback"
+                  content="62"
+                  progressColor="red"
+                  progressWidth={28}
+                />
+              </Grid.Col>
+              <Grid.Col sm={6}>
+                <ProgressCard
+                  header="Today profit"
+                  content="$652"
+                  progressColor="green"
+                  progressWidth={84}
+                />
+              </Grid.Col>
+              <Grid.Col sm={6}>
+                <ProgressCard
+                  header="Users online"
+                  content="76"
+                  progressColor="yellow"
+                  progressWidth={34}
+                />
+              </Grid.Col>
+            </Grid.Row>
+          </Grid.Col>
+          <Grid.Col sm={6} lg={3}>
+            <StampCard
+              color="blue"
+              icon="dollar-sign"
+              header={
+                <a href="#">
+                  132 <small>Sales</small>
+                </a>
+              }
+              footer={"12 waiting payments"}
+            />
+          </Grid.Col>
+          <Grid.Col sm={6} lg={3}>
+            <StampCard
+              color="green"
+              icon="shopping-cart"
+              header={
+                <a href="#">
+                  78 <small>Orders</small>
+                </a>
+              }
+              footer={"32 shipped"}
+            />
+          </Grid.Col>
+          <Grid.Col sm={6} lg={3}>
+            <StampCard
+              color="red"
+              icon="users"
+              header={
+                <a href="#">
+                  1,352 <small>Members</small>
+                </a>
+              }
+              footer={"163 registered today"}
+            />
+          </Grid.Col>
+          <Grid.Col sm={6} lg={3}>
+            <StampCard
+              color="yellow"
+              icon="message-square"
+              header={
+                <a href="#">
+                  132 <small>Comments</small>
+                </a>
+              }
+              footer={"16 waiting"}
+            />
+          </Grid.Col>
+        </Grid.Row>
+        <Grid.Row cards deck>
+          <Grid.Col width={12}>
+            <Card>
+              <Table
+                responsive
+                highlightRowOnHover
+                hasOutline
+                verticalAlign="center"
+                cards
+                className="text-nowrap"
+              >
+                <Table.Header>
+                  <Table.Row>
+                    <Table.ColHeader alignContent="center" className="w-1">
+                      <i className="icon-people" />
+                    </Table.ColHeader>
+                    <Table.ColHeader>User</Table.ColHeader>
+                    <Table.ColHeader>Usage</Table.ColHeader>
+                    <Table.ColHeader alignContent="center">
+                      Payment
+                    </Table.ColHeader>
+                    <Table.ColHeader>Activity</Table.ColHeader>
+                    <Table.ColHeader alignContent="center">
+                      Satisfaction
+                    </Table.ColHeader>
+                    <Table.ColHeader alignContent="center">
+                      <i className="icon-settings" />
+                    </Table.ColHeader>
+                  </Table.Row>
+                </Table.Header>
+                <Table.Body>
+                  <Table.Row>
+                    <Table.Col alignContent="center">
+                      <Avatar
+                        imageURL="demo/faces/female/26.jpg"
+                        className="d-block"
+                        status="green"
+                      />
+                    </Table.Col>
+                    <Table.Col>
+                      <div>Elizabeth Martin</div>
+                      <Text size="sm" muted>
+                        Registered: Mar 19, 2018
+                      </Text>
+                    </Table.Col>
+                    <Table.Col>
+                      <div className="clearfix">
+                        <div className="float-left">
+                          <strong>42%</strong>
+                        </div>
+                        <div className="float-right">
+                          <Text.Small muted>
+                            Jun 11, 2015 - Jul 10, 2015
+                          </Text.Small>
+                        </div>
+                      </div>
+                      <Progress size="xs">
+                        <Progress.Bar color="yellow" width={42} />
+                      </Progress>
+                    </Table.Col>
+                    <Table.Col alignContent="center">
+                      <Icon payment name="visa" />
+                    </Table.Col>
+                    <Table.Col>
+                      <Text size="sm" muted>
+                        Last login
+                      </Text>
+                      <div>4 minutes ago</div>
+                    </Table.Col>
+                    <Table.Col alignContent="center">42%</Table.Col>
+                    <Table.Col alignContent="center">
+                      <Dropdown
+                        trigger={
+                          <Dropdown.Trigger
+                            icon="more-vertical"
+                            toggle={false}
+                          />
+                        }
+                        position="right"
+                        items={
+                          <React.Fragment>
+                            <Dropdown.Item icon="tag">Action </Dropdown.Item>
+                            <Dropdown.Item icon="edit-2">
+                              Another action{" "}
+                            </Dropdown.Item>
+                            <Dropdown.Item icon="message-square">
+                              Something else here
+                            </Dropdown.Item>
+                            <Dropdown.ItemDivider />
+                            <Dropdown.Item icon="link">
+                              {" "}
+                              Separated link
+                            </Dropdown.Item>
+                          </React.Fragment>
+                        }
+                      />
+                    </Table.Col>
+                  </Table.Row>
+                </Table.Body>
+              </Table>
+            </Card>
+          </Grid.Col>
+        </Grid.Row>
+        <Grid.Row>
+          <Grid.Col sm={6} lg={4}>
+            <Card title="Browser Stats">
+              <Table className="card-table">
+                <Table.Row>
+                  <Table.Col>
+                    <Icon prefix="fa" name="chrome" className="text-muted" />
+                  </Table.Col>
+                  <Table.Col>Google Chrome</Table.Col>
+                  <Table.Col className="text-right">
+                    <Text RootComponent="span" muted>
+                      23%
+                    </Text>
+                  </Table.Col>
+                </Table.Row>
+              </Table>
+            </Card>
+          </Grid.Col>
+          <Grid.Col sm={6} lg={4}>
+            <Card title="Projects">
+              <Table cards>
+                <Table.Row>
+                  <Table.Col>Admin Template</Table.Col>
+                  <Table.Col alignContent="right">
+                    <Badge color="default">65%</Badge>
+                  </Table.Col>
+                </Table.Row>
+              </Table>
+            </Card>
+          </Grid.Col>
+          <Grid.Col md={6} lg={4}>
+            <Card title="Members">
+              <Card.Body>
+                <ul className="list-unstyled list-separated">
+                  <li className="list-separated-item">
+                    <Grid.Row className="align-items-center">
+                      <Grid.Col auto>
+                        <Avatar
+                          size="md"
+                          className="d-block"
+                          imageURL="demo/faces/female/12.jpg"
+                        />
+                      </Grid.Col>
+                      <Grid.Col>
+                        <div>
+                          <a className="text-inherit" href="#">
+                            Amanda Hunt
+                          </a>
+                        </div>
+                        <Text.Small muted className="d-block item-except h-1x">
+                          amanda_hunt@example.com
+                        </Text.Small>
+                      </Grid.Col>
+                      <Grid.Col auto>
+                        <Dropdown
+                          trigger={
+                            <Dropdown.Trigger
+                              icon="more-vertical"
+                              toggle={false}
+                            />
+                          }
+                          position="right"
+                          items={
+                            <React.Fragment>
+                              <Dropdown.Item icon="tag">Action </Dropdown.Item>
+                              <Dropdown.Item icon="edit-2">
+                                {" "}
+                                Another action{" "}
+                              </Dropdown.Item>
+                              <Dropdown.Item icon="message-square">
+                                {" "}
+                                Something else here
+                              </Dropdown.Item>
+                              <Dropdown.ItemDivider />
+                              <Dropdown.Item icon="link">
+                                {" "}
+                                Separated link
+                              </Dropdown.Item>
+                            </React.Fragment>
+                          }
+                        />
+                      </Grid.Col>
+                    </Grid.Row>
+                  </li>
+                </ul>
+              </Card.Body>
+            </Card>
+          </Grid.Col>
+          <Grid.Col md={6} lg={12}>
+            <Grid.Row>
+              <Grid.Col sm={6} lg={3}>
+                <StatsCard
+                  layout={2}
+                  movement={5}
+                  total="423"
+                  label="Users online"
+                  chart={
+                    <C3Chart
+                      style={{ height: "100%" }}
+                      padding={{
+                        bottom: -10,
+                        left: -1,
+                        right: -1,
+                      }}
+                      data={{
+                        names: {
+                          data1: "Users online",
+                        },
+                        columns: [["data1", 30, 40, 10, 40, 12, 22, 40]],
+                        type: "area",
+                      }}
+                      legend={{
+                        show: false,
+                      }}
+                      transition={{
+                        duration: 0,
+                      }}
+                      point={{
+                        show: false,
+                      }}
+                      tooltip={{
+                        format: {
+                          title: function(x) {
+                            return "";
+                          },
+                        },
+                      }}
+                      axis={{
+                        y: {
+                          padding: {
+                            bottom: 0,
+                          },
+                          show: false,
+                          tick: {
+                            outer: false,
+                          },
+                        },
+                        x: {
+                          padding: {
+                            left: 0,
+                            right: 0,
+                          },
+                          show: false,
+                        },
+                      }}
+                      color={{
+                        pattern: ["#467fcf"],
+                      }}
+                    />
+                  }
+                />
+              </Grid.Col>
+              <Grid.Col sm={6} lg={3}>
+                <StatsCard
+                  layout={2}
+                  movement={-3}
+                  total="423"
+                  label="Users online"
+                  chart={
+                    <C3Chart
+                      style={{ height: "100%" }}
+                      padding={{
+                        bottom: -10,
+                        left: -1,
+                        right: -1,
+                      }}
+                      data={{
+                        names: {
+                          data1: "Users online",
+                        },
+                        columns: [["data1", 30, 40, 10, 40, 12, 22, 40]],
+                        type: "area",
+                      }}
+                      legend={{
+                        show: false,
+                      }}
+                      transition={{
+                        duration: 0,
+                      }}
+                      point={{
+                        show: false,
+                      }}
+                      tooltip={{
+                        format: {
+                          title: function(x) {
+                            return "";
+                          },
+                        },
+                      }}
+                      axis={{
+                        y: {
+                          padding: {
+                            bottom: 0,
+                          },
+                          show: false,
+                          tick: {
+                            outer: false,
+                          },
+                        },
+                        x: {
+                          padding: {
+                            left: 0,
+                            right: 0,
+                          },
+                          show: false,
+                        },
+                      }}
+                      color={{
+                        pattern: ["#e74c3c"],
+                      }}
+                    />
+                  }
+                />
+              </Grid.Col>
+              <Grid.Col sm={6} lg={3}>
+                <StatsCard
+                  layout={2}
+                  movement={-3}
+                  total="423"
+                  label="Users online"
+                  chart={
+                    <C3Chart
+                      style={{ height: "100%" }}
+                      padding={{
+                        bottom: -10,
+                        left: -1,
+                        right: -1,
+                      }}
+                      data={{
+                        names: {
+                          data1: "Users online",
+                        },
+                        columns: [["data1", 30, 40, 10, 40, 12, 22, 40]],
+                        type: "area",
+                      }}
+                      legend={{
+                        show: false,
+                      }}
+                      transition={{
+                        duration: 0,
+                      }}
+                      point={{
+                        show: false,
+                      }}
+                      tooltip={{
+                        format: {
+                          title: function(x) {
+                            return "";
+                          },
+                        },
+                      }}
+                      axis={{
+                        y: {
+                          padding: {
+                            bottom: 0,
+                          },
+                          show: false,
+                          tick: {
+                            outer: false,
+                          },
+                        },
+                        x: {
+                          padding: {
+                            left: 0,
+                            right: 0,
+                          },
+                          show: false,
+                        },
+                      }}
+                      color={{
+                        pattern: ["#5eba00"],
+                      }}
+                    />
+                  }
+                />
+              </Grid.Col>
+              <Grid.Col sm={6} lg={3}>
+                <StatsCard
+                  layout={2}
+                  movement={9}
+                  total="423"
+                  label="Users online"
+                  chart={
+                    <C3Chart
+                      style={{ height: "100%" }}
+                      padding={{
+                        bottom: -10,
+                        left: -1,
+                        right: -1,
+                      }}
+                      data={{
+                        names: {
+                          data1: "Users online",
+                        },
+                        columns: [["data1", 30, 40, 10, 40, 12, 22, 40]],
+                        type: "area",
+                      }}
+                      legend={{
+                        show: false,
+                      }}
+                      transition={{
+                        duration: 0,
+                      }}
+                      point={{
+                        show: false,
+                      }}
+                      tooltip={{
+                        format: {
+                          title: function(x) {
+                            return "";
+                          },
+                        },
+                      }}
+                      axis={{
+                        y: {
+                          padding: {
+                            bottom: 0,
+                          },
+                          show: false,
+                          tick: {
+                            outer: false,
+                          },
+                        },
+                        x: {
+                          padding: {
+                            left: 0,
+                            right: 0,
+                          },
+                          show: false,
+                        },
+                      }}
+                      color={{
+                        pattern: ["#f1c40f"],
+                      }}
+                    />
+                  }
+                />
+              </Grid.Col>
+            </Grid.Row>
+          </Grid.Col>
+          <Grid.Col width={12}>
+            <Card title="Invoices">
+              <Table
+                responsive
+                className="card-table table-vcenter text-nowrap"
+                headerItems={[
+                  { content: "No.", className: "w-1" },
+                  { content: "Invoice Subject" },
+                  { content: "Client" },
+                  { content: "VAT No." },
+                  { content: "Created" },
+                  { content: "Status" },
+                  { content: "Price" },
+                  { content: null },
+                  { content: null },
+                ]}
+                bodyItems={[
+                  {
+                    key: "1",
+                    item: [
+                      {
+                        content: (
+                          <Text RootComponent="span" muted>
+                            001401
+                          </Text>
+                        ),
+                      },
+                      {
+                        content: (
+                          <a href="invoice.html" className="text-inherit">
+                            Design Works
+                          </a>
+                        ),
+                      },
+                      { content: "Carlson Limited" },
+                      { content: "87956621" },
+                      { content: "15 Dec 2017" },
+                      {
+                        content: (
+                          <React.Fragment>
+                            <span className="status-icon bg-success" /> Paid
+                          </React.Fragment>
+                        ),
+                      },
+                      { content: "$887" },
+                      {
+                        alignContent: "right",
+                        content: (
+                          <React.Fragment>
+                            <Button size="sm" color="secondary">
+                              Manage
+                            </Button>
+                            <div className="dropdown">
+                              <Button
+                                color="secondary"
+                                size="sm"
+                                isDropdownToggle
+                              >
+                                Actions
+                              </Button>
+                            </div>
+                          </React.Fragment>
+                        ),
+                      },
+                      { content: <Icon link name="edit" /> },
+                    ],
+                  },
+                ]}
+              />
+            </Card>
+          </Grid.Col>
+        </Grid.Row>
+      </Page.Content>
+    </SiteWrapper>
+  );
+}
+
+export default Home;

resources/js/ReactSimpleMap/ReactSimpleMap.react.js

@@ -0,0 +1,124 @@
+// @flow
+
+import * as React from "react";
+import {
+  ComposableMap,
+  ZoomableGroup,
+  Geographies,
+  Geography,
+} from "react-simple-maps";
+import data from "./data/world-50m.json";
+import { scaleLinear } from "d3-scale";
+
+const wrapperStyles = {
+  width: "100%",
+  height: "auto",
+  maxWidth: "100%",
+  margin: "0 auto",
+  fontFamily: "Roboto, sans-serif",
+};
+
+type State = {
+  origin: { x: number, y: number },
+  content: string,
+};
+
+const popScale = scaleLinear()
+  .domain([0, 100000000, 1400000000])
+  .range(["#CFD8DC", "#607D8B", "#37474F"]);
+
+class ReactSimpleMap extends React.PureComponent<void, State> {
+  state = {
+    origin: { x: 0, y: 0 },
+    content: "",
+  };
+
+  handleMove = (
+    geography: { properties: { name: string, pop_est: string } },
+    evt: SyntheticMouseEvent<>
+  ): void => {
+    const x = evt.clientX;
+    const y = evt.clientY + window.pageYOffset;
+    this.setState({
+      origin: { x, y },
+      content: geography.properties.name + ": " + geography.properties.pop_est,
+    });
+  };
+
+  handleLeave = (): void => {
+    this.setState({ content: "" });
+  };
+
+  render() {
+    return (
+      <div style={wrapperStyles}>
+        {this.state.content && (
+          <div
+            style={{
+              position: "fixed",
+              top: this.state.origin.y + 20 - window.scrollY,
+              left: this.state.origin.x,
+              zIndex: 999999,
+              textAlign: "center",
+              border: "1px grey solid",
+              borderRadius: 3,
+              padding: 4,
+              backgroundColor: "#fff",
+            }}
+          >
+            {this.state.content}
+          </div>
+        )}
+        <ComposableMap
+          projectionConfig={{
+            scale: 205,
+            rotation: [-11, 0, 0],
+          }}
+          style={{
+            width: "100%",
+            height: "auto",
+          }}
+          width={900}
+        >
+          <ZoomableGroup center={[0, 20]}>
+            <Geographies geography={data}>
+              {(geographies, projection) =>
+                geographies.map((geography, i) => (
+                  <Geography
+                    key={i}
+                    geography={geography}
+                    projection={projection}
+                    onMouseMove={this.handleMove}
+                    onMouseLeave={this.handleLeave}
+                    style={{
+                      default: {
+                        fill: popScale(geography.properties.pop_est),
+                        stroke: "#607D8B",
+                        strokeWidth: 0.75,
+                        outline: "none",
+                      },
+                      hover: {
+                        fill: "#263238",
+                        stroke: "#607D8B",
+                        strokeWidth: 0.75,
+                        outline: "none",
+                      },
+                      pressed: {
+                        fill: "#263238",
+                        stroke: "#607D8B",
+                        strokeWidth: 0.75,
+                        outline: "none",
+                      },
+                    }}
+                  />
+                ))
+              }
+            </Geographies>
+          </ZoomableGroup>
+        </ComposableMap>
+      </div>
+    );
+  }
+}
+
+export default ReactSimpleMap;

resources/js/ReactSimpleMap/index.js

@@ -0,0 +1,3 @@
+import ReactSimpleMap from "./ReactSimpleMap.react";
+
+export default ReactSimpleMap;

resources/js/SiteWrapper.react.js

@@ -0,0 +1,295 @@
+// @flow
+
+import * as React from "react";
+import { NavLink, withRouter } from "react-router-dom";
+
+import {
+  Site,
+  Nav,
+  Grid,
+  List,
+  Button,
+  RouterContextProvider,
+} from "tabler-react";
+
+import type { NotificationProps } from "tabler-react";
+
+type Props = {|
+  +children: React.Node,
+|};
+
+type State = {|
+  notificationsObjects: Array<NotificationProps>,
+|};
+
+type subNavItem = {|
+  +value: string,
+  +to?: string,
+  +icon?: string,
+  +LinkComponent?: React.ElementType,
+|};
+
+type navItem = {|
+  +value: string,
+  +to?: string,
+  +icon?: string,
+  +active?: boolean,
+  +LinkComponent?: React.ElementType,
+  +subItems?: Array<subNavItem>,
+  +useExact?: boolean,
+|};
+
+const navBarItems: Array<navItem> = [
+  {
+    value: "Home",
+    to: "/",
+    icon: "home",
+    LinkComponent: withRouter(NavLink),
+    useExact: true,
+  },
+  {
+    value: "Interface",
+    icon: "box",
+    subItems: [
+      {
+        value: "Cards Design",
+        to: "/cards",
+        LinkComponent: withRouter(NavLink),
+      },
+      { value: "Charts", to: "/charts", LinkComponent: withRouter(NavLink) },
+      {
+        value: "Pricing Cards",
+        to: "/pricing-cards",
+        LinkComponent: withRouter(NavLink),
+      },
+    ],
+  },
+  {
+    value: "Components",
+    icon: "calendar",
+    subItems: [
+      { value: "Maps", to: "/maps", LinkComponent: withRouter(NavLink) },
+      { value: "Icons", to: "/icons", LinkComponent: withRouter(NavLink) },
+      { value: "Store", to: "/store", LinkComponent: withRouter(NavLink) },
+      { value: "Blog", to: "/blog", LinkComponent: withRouter(NavLink) },
+    ],
+  },
+  {
+    value: "Pages",
+    icon: "file",
+    subItems: [
+      { value: "Profile", to: "/profile", LinkComponent: withRouter(NavLink) },
+      { value: "Login", to: "/login", LinkComponent: withRouter(NavLink) },
+      {
+        value: "Register",
+        to: "/register",
+        LinkComponent: withRouter(NavLink),
+      },
+      {
+        value: "Forgot password",
+        to: "/forgot-password",
+        LinkComponent: withRouter(NavLink),
+      },
+      { value: "400 error", to: "/400", LinkComponent: withRouter(NavLink) },
+      { value: "401 error", to: "/401", LinkComponent: withRouter(NavLink) },
+      { value: "403 error", to: "/403", LinkComponent: withRouter(NavLink) },
+      { value: "404 error", to: "/404", LinkComponent: withRouter(NavLink) },
+      { value: "500 error", to: "/500", LinkComponent: withRouter(NavLink) },
+      { value: "503 error", to: "/503", LinkComponent: withRouter(NavLink) },
+      { value: "Email", to: "/email", LinkComponent: withRouter(NavLink) },
+      {
+        value: "Empty page",
+        to: "/empty-page",
+        LinkComponent: withRouter(NavLink),
+      },
+      { value: "RTL", to: "/rtl", LinkComponent: withRouter(NavLink) },
+    ],
+  },
+  {
+    value: "Forms",
+    to: "/form-elements",
+    icon: "check-square",
+    LinkComponent: withRouter(NavLink),
+  },
+  {
+    value: "Gallery",
+    to: "/gallery",
+    icon: "image",
+    LinkComponent: withRouter(NavLink),
+  },
+  {
+    icon: "file-text",
+    value: "Documentation",
+    to:
+      process.env.NODE_ENV === "production"
+        ? "https://tabler.github.io/tabler-react/documentation"
+        : "/documentation",
+  },
+];
+
+const accountDropdownProps = {
+  avatarURL: "./demo/faces/female/25.jpg",
+  name: "Jane Pearson",
+  description: "Administrator",
+  options: [
+    { icon: "user", value: "Profile" },
+    { icon: "settings", value: "Settings" },
+    { icon: "mail", value: "Inbox", badge: "6" },
+    { icon: "send", value: "Message" },
+    { isDivider: true },
+    { icon: "help-circle", value: "Need help?" },
+    { icon: "log-out", value: "Sign out" },
+  ],
+};
+
+class SiteWrapper extends React.Component<Props, State> {
+  state = {
+    notificationsObjects: [
+      {
+        unread: true,
+        avatarURL: "demo/faces/male/41.jpg",
+        message: (
+          <React.Fragment>
+            <strong>Nathan</strong> pushed new commit: Fix page load performance
+            issue.
+          </React.Fragment>
+        ),
+        time: "10 minutes ago",
+      },
+      {
+        unread: true,
+        avatarURL: "demo/faces/female/1.jpg",
+        message: (
+          <React.Fragment>
+            <strong>Alice</strong> started new task: Tabler UI design.
+          </React.Fragment>
+        ),
+        time: "1 hour ago",
+      },
+      {
+        unread: false,
+        avatarURL: "demo/faces/female/18.jpg",
+        message: (
+          <React.Fragment>
+            <strong>Rose</strong> deployed new version of NodeJS REST Api // V3
+          </React.Fragment>
+        ),
+        time: "2 hours ago",
+      },
+    ],
+  };
+
+  render(): React.Node {
+    const notificationsObjects = this.state.notificationsObjects || [];
+    const unreadCount = this.state.notificationsObjects.reduce(
+      (a, v) => a || v.unread,
+      false
+    );
+    return (
+      <Site.Wrapper
+        headerProps={{
+          href: "/",
+          alt: "Tabler React",
+          imageURL: "./demo/brand/tabler.svg",
+          navItems: (
+            <Nav.Item type="div" className="d-none d-md-flex">
+              <Button
+                href="https://github.com/tabler/tabler-react"
+                target="_blank"
+                outline
+                size="sm"
+                RootComponent="a"
+                color="primary"
+              >
+                Source code
+              </Button>
+            </Nav.Item>
+          ),
+          notificationsTray: {
+            notificationsObjects,
+            markAllAsRead: () =>
+              this.setState(
+                () => ({
+                  notificationsObjects: this.state.notificationsObjects.map(
+                    v => ({ ...v, unread: false })
+                  ),
+                }),
+                () =>
+                  setTimeout(
+                    () =>
+                      this.setState({
+                        notificationsObjects: this.state.notificationsObjects.map(
+                          v => ({ ...v, unread: true })
+                        ),
+                      }),
+                    5000
+                  )
+              ),
+            unread: unreadCount,
+          },
+          accountDropdown: accountDropdownProps,
+        }}
+        navProps={{ itemsObjects: navBarItems }}
+        routerContextComponentType={withRouter(RouterContextProvider)}
+        footerProps={{
+          links: [
+            <a href="#">First Link</a>,
+            <a href="#">Second Link</a>,
+            <a href="#">Third Link</a>,
+            <a href="#">Fourth Link</a>,
+            <a href="#">Five Link</a>,
+            <a href="#">Sixth Link</a>,
+            <a href="#">Seventh Link</a>,
+            <a href="#">Eigth Link</a>,
+          ],
+          note:
+            "Premium and Open Source dashboard template with responsive and high quality UI. For Free!",
+          copyright: (
+            <React.Fragment>
+              Copyright © 2018
+              <a href="."> Tabler-react</a>. Theme by
+              <a
+                href="https://codecalm.net"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                {" "}
+                codecalm.net
+              </a>{" "}
+              All rights reserved.
+            </React.Fragment>
+          ),
+          nav: (
+            <React.Fragment>
+              <Grid.Col auto={true}>
+                <List className="list-inline list-inline-dots mb-0">
+                  <List.Item className="list-inline-item">
+                    <a href="./docs/index.html">Documentation</a>
+                  </List.Item>
+                  <List.Item className="list-inline-item">
+                    <a href="./faq.html">FAQ</a>
+                  </List.Item>
+                </List>
+              </Grid.Col>
+              <Grid.Col auto={true}>
+                <Button
+                  href="https://github.com/tabler/tabler-react"
+                  size="sm"
+                  outline
+                  color="primary"
+                  RootComponent="a"
+                >
+                  Source code
+                </Button>
+              </Grid.Col>
+            </React.Fragment>
+          ),
+        }}
+      >
+        {this.props.children}
+      </Site.Wrapper>
+    );
+  }
+}
+
+export default SiteWrapper;

resources/js/app.js

@@ -26,6 +26,8 @@
  */
 
 require('./bootstrap');
+require('./index');
+
 
 /**
  * Next, we will create a fresh React component instance and attach it to
@@ -33,4 +35,3 @@ require('./bootstrap');
  * or customize the JavaScript scaffolding to fit your unique needs.
  */
 
-//require('./app');

resources/js/bootstrap.js

@@ -57,8 +57,6 @@ if (token) {
     console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
 }
 
-
-
 /**
  * Echo exposes an expressive API for subscribing to channels and listening
  * for events that are broadcast by Laravel. Echo and event broadcasting

resources/js/c3jscustom.css

@@ -0,0 +1,229 @@
+/*-- Chart --*/
+.c3 svg {
+  font: 10px sans-serif;
+  -webkit-tap-highlight-color: transparent;
+  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI",
+    "Helvetica Neue", Arial, sans-serif;
+}
+
+.c3 path,
+.c3 line {
+  fill: none;
+  stroke: rgba(0, 40, 100, 0.12);
+}
+
+.c3 text {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  font-size: px2rem(12px);
+}
+
+.c3-legend-item-tile,
+.c3-xgrid-focus,
+.c3-ygrid,
+.c3-event-rect,
+.c3-bars path {
+  shape-rendering: crispEdges;
+}
+
+.c3-chart-arc path {
+  stroke: #fff;
+}
+
+.c3-chart-arc text {
+  fill: #fff;
+  font-size: 13px;
+}
+
+/*-- Axis --*/
+/*-- Grid --*/
+.c3-grid line {
+  stroke: #f0f0f0;
+}
+
+.c3-grid text {
+  fill: #aaa;
+}
+
+.c3-xgrid,
+.c3-ygrid {
+  stroke: #e6e6e6;
+  stroke-dasharray: 2 4;
+}
+
+/*-- Text on Chart --*/
+.c3-text {
+  font-size: 12px;
+}
+
+.c3-text.c3-empty {
+  fill: #808080;
+  font-size: 2em;
+}
+
+/*-- Line --*/
+.c3-line {
+  stroke-width: 2px;
+}
+
+/*-- Point --*/
+.c3-circle._expanded_ {
+  stroke-width: 2px;
+  stroke: white;
+}
+
+.c3-selected-circle {
+  fill: white;
+  stroke-width: 1.5px;
+}
+
+/*-- Bar --*/
+.c3-bar {
+  stroke-width: 0;
+}
+
+.c3-bar._expanded_ {
+  fill-opacity: 1;
+  fill-opacity: 0.75;
+}
+
+/*-- Focus --*/
+.c3-target.c3-focused {
+  opacity: 1;
+}
+
+.c3-target.c3-focused path.c3-line,
+.c3-target.c3-focused path.c3-step {
+  stroke-width: 2px;
+}
+
+.c3-target.c3-defocused {
+  opacity: 0.3 !important;
+}
+
+/*-- Region --*/
+.c3-region {
+  fill: steelblue;
+  fill-opacity: 0.1;
+}
+
+/*-- Brush --*/
+.c3-brush .extent {
+  fill-opacity: 0.1;
+}
+
+/*-- Select - Drag --*/
+/*-- Legend --*/
+.c3-legend-item text {
+  fill: #545454;
+  font-size: 14px;
+}
+
+.c3-legend-item-hidden {
+  opacity: 0.15;
+}
+
+.c3-legend-background {
+  fill: transparent;
+  stroke: lightgray;
+  stroke-width: 0;
+}
+
+/*-- Title --*/
+.c3-title {
+  font: 14px sans-serif;
+}
+
+/*-- Tooltip --*/
+.c3-tooltip-container {
+  z-index: 10;
+}
+
+.c3-tooltip {
+  border-collapse: collapse;
+  border-spacing: 0;
+  empty-cells: show;
+  font-size: 11px;
+  line-height: 1;
+  font-weight: 700;
+  color: #fff;
+  border-radius: 3px;
+  background: #212529 !important;
+  white-space: nowrap;
+}
+
+.c3-tooltip th {
+  padding: 6px 6px;
+  text-align: left;
+}
+
+.c3-tooltip td {
+  padding: 4px 6px;
+  font-weight: 400;
+}
+
+.c3-tooltip td > span {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  margin-right: 8px;
+  border-radius: 50%;
+  vertical-align: baseline;
+}
+
+.c3-tooltip td.value {
+  text-align: right;
+}
+
+/*-- Area --*/
+.c3-area {
+  stroke-width: 0;
+  opacity: 0.1;
+}
+
+.c3-target-filled .c3-area {
+  opacity: 1 !important;
+}
+
+/*-- Arc --*/
+.c3-chart-arcs-title {
+  dominant-baseline: middle;
+  font-size: 1.3em;
+}
+
+.c3-chart-arcs .c3-chart-arcs-background {
+  fill: #e0e0e0;
+  stroke: none;
+}
+
+.c3-chart-arcs .c3-chart-arcs-gauge-unit {
+  fill: #000;
+  font-size: 16px;
+}
+
+.c3-chart-arcs .c3-chart-arcs-gauge-max {
+  fill: #777;
+}
+
+.c3-chart-arcs .c3-chart-arcs-gauge-min {
+  fill: #777;
+}
+
+.c3-chart-arc .c3-gauge-value {
+  fill: #000;
+  /*  font-size: 28px !important;*/
+}
+
+.c3-chart-arc.c3-target g path {
+  opacity: 1;
+}
+
+.c3-chart-arc.c3-target.c3-focused g path {
+  opacity: 1;
+}
+
+.c3-axis {
+  fill: #9aa0ac;
+}

resources/js/components/BlogPage.react.js

@@ -0,0 +1,182 @@
+// @flow
+
+import * as React from "react";
+
+import { Page, Grid, BlogCard } from "tabler-react";
+import SiteWrapper from "../SiteWrapper.react";
+
+function BlogPage(): React.Node {
+  return (
+    <SiteWrapper>
+      <Page.Content title="Blog Component">
+        <Grid.Row cards deck>
+          <Grid.Col sm={6} xl={3}>
+            <BlogCard
+              imgSrc={"./demo/photos/david-klaasen-54203-500.jpg"}
+              imgAlt={"And this isn&#39;t my nose. This is a false one."}
+              postHref={"#"}
+              title={"And this isn't my nose. This is a false one."}
+              description={
+                "Look, my liege! The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migr..."
+              }
+              profileHref={"./profile.html"}
+              authorName={"Rose Bradley"}
+              avatarImgSrc={"./demo/faces/female/18.jpg"}
+              date={"3 days ago"}
+            />
+          </Grid.Col>
+          <Grid.Col sm={6} xl={3}>
+            <BlogCard
+              imgSrc={"./demo/photos/david-marcu-114194-500.jpg"}
+              imgAlt={"Well, I didn&#39;t vote for you."}
+              postHref={"#"}
+              title={"Well, I didn't vote for you."}
+              description={
+                "Well, we did do the nose. Why? Shut up! Will you shut up?! You don't frighten us, English pig-dog..."
+              }
+              profileHref={"./profile.html"}
+              authorName={"Peter Richards"}
+              avatarImgSrc={"./demo/faces/male/16.jpg"}
+              date={"3 days ago"}
+            />
+          </Grid.Col>
+          <Grid.Col sm={6} xl={3}>
+            <BlogCard
+              imgSrc={"./demo/photos/davide-cantelli-139887-500.jpg"}
+              imgAlt={"How do you know she is a witch?"}
+              postHref={"#"}
+              title={"How do you know she is a witch?"}
+              description={
+                "Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit. But she's got a wart. You ..."
+              }
+              profileHref={"./profile.html"}
+              authorName={"Wayne Holland"}
+              avatarImgSrc={"./demo/faces/male/26.jpg"}
+              date={"3 days ago"}
+            />
+          </Grid.Col>
+          <Grid.Col sm={6} xl={3}>
+            <BlogCard
+              imgSrc={"./demo/photos/dino-reichmuth-84359-500.jpg"}
+              imgAlt={"Shut up!"}
+              postHref={"#"}
+              title={"Shut up!"}
+              description={
+                "Burn her! How do you know she is a witch? You don't frighten us, English pig-dogs! Go and boil yo..."
+              }
+              profileHref={"./profile.html"}
+              authorName={"Michelle Ross"}
+              avatarImgSrc={"./demo/faces/female/7.jpg"}
+              date={"3 days ago"}
+            />
+          </Grid.Col>
+          <Grid.Col lg={4}>
+            <BlogCard
+              postHref={"#"}
+              title={"Weaseling out of things is important to learn."}
+              description={
+                "Please do not offer my god a peanut. That's why I love elementary school, Edna. The children beli..."
+              }
+              profileHref={"./profile.html"}
+              authorName={"Bobby Knight"}
+              avatarImgSrc={"./demo/faces/male/4.jpg"}
+              date={"3 days ago"}
+            />
+          </Grid.Col>
+          <Grid.Col lg={4}>
+            <BlogCard
+              postHref={"#"}
+              title={"You don't like your job, you don't strike."}
+              description={
+                "But, Aquaman, you cannot marry a woman without gills. You're from two different worlds… Oh, I've ..."
+              }
+              profileHref={"./profile.html"}
+              authorName={"Craig Anderson"}
+              avatarImgSrc={"./demo/faces/male/35.jpg"}
+              date={"3 days ago"}
+            />
+          </Grid.Col>
+          <Grid.Col lg={4}>
+            <BlogCard
+              postHref={"#"}
+              title={"I hope I didn't brain my damage."}
+              description={
+                "I don't like being outdoors, Smithers. For one thing, there's too many fat children. Oh, loneline..."
+              }
+              profileHref={"./profile.html"}
+              authorName={"Crystal Wallace"}
+              avatarImgSrc={"./demo/faces/female/29.jpg"}
+              date={"3 days ago"}
+            />
+          </Grid.Col>
+          <Grid.Col lg={6}>
+            <BlogCard
+              aside
+              imgSrc={"./demo/photos/david-klaasen-54203-500.jpg"}
+              imgAlt={"And this isn&#39;t my nose. This is a false one."}
+              postHref={"#"}
+              title={"And this isn't my nose. This is a false one."}
+              description={
+                "Look, my liege! The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migr..."
+              }
+              profileHref={"./profile.html"}
+              authorName={"Rose Bradley"}
+              avatarImgSrc={"./demo/faces/female/18.jpg"}
+              date={"3 days ago"}
+            />
+          </Grid.Col>
+          <Grid.Col lg={6}>
+            <BlogCard
+              aside
+              imgSrc={"./demo/photos/david-marcu-114194-500.jpg"}
+              imgAlt={"Well, I didn't vote for you."}
+              postHref={"#"}
+              title={"And this isn't my nose. This is a false one."}
+              description={
+                "Well, we did do the nose. Why? Shut up! Will you shut up?! You don't frighten us, English pig-dog..."
+              }
+              profileHref={"./profile.html"}
+              authorName={"Peter Richards"}
+              avatarImgSrc={"./demo/faces/male/16.jpg"}
+              date={"3 days ago"}
+            />
+          </Grid.Col>
+          <Grid.Col lg={6}>
+            <BlogCard
+              aside
+              imgSrc={"./demo/photos/grant-ritchie-338179-500.jpg"}
+              imgAlt={"Weaseling out of things is important to learn."}
+              postHref={"#"}
+              title={"Weaseling out of things is important to learn."}
+              description={
+                "Please do not offer my god a peanut. That's why I love elementary school, Edna. The children believe anything you tell them. Brace yourselves gentlemen. According to the gas chromatograph, the secr..."
+              }
+              profileHref={"./profile.html"}
+              authorName={"Bobby Knight"}
+              avatarImgSrc={"./demo/faces/male/4.jpg"}
+              date={"3 days ago"}
+            />
+          </Grid.Col>
+          <Grid.Col lg={6}>
+            <BlogCard
+              aside
+              imgSrc={"./demo/photos/ilnur-kalimullin-218996-500.jpg"}
+              imgAlt={"You don't like your job, you don't strike."}
+              postHref={"#"}
+              title={"You don't like your job, you don't strike."}
+              description={
+                "But, Aquaman, you cannot marry a woman without gills. You're from two different worlds… Oh, I've wasted my life. Son, when you participate in sporting events, it's not whether you win or lose: it's..."
+              }
+              profileHref={"./profile.html"}
+              authorName={"Craig Anderson"}
+              avatarImgSrc={"./demo/faces/male/35.jpg"}
+              date={"3 days ago"}
+            />
+          </Grid.Col>
+        </Grid.Row>
+      </Page.Content>
+    </SiteWrapper>
+  );
+}
+
+export default BlogPage;

resources/js/components/IconPage.react.js

@@ -0,0 +1,92 @@
+// @flow
+
+import * as React from "react";
+
+import { Page, Grid, Card, Icon } from "tabler-react";
+
+import faIcons from "../data/icons/fa";
+import feIcons from "../data/icons/fe";
+import flagIcons from "../data/icons/flag";
+import paymentIcons from "../data/icons/payment";
+import SiteWrapper from "../SiteWrapper.react";
+
+const iconSets: Array<{
+  prefix: "fa" | "fe" | "flag" | "payment",
+  title: string,
+  icons: Array<string>,
+  description?: string,
+  link?: string,
+}> = [
+  {
+    prefix: "fe",
+    title: "Feather Icons",
+    icons: feIcons,
+    description: "Simply beautiful open source icons.",
+    link: "https://feathericons.com",
+  },
+  {
+    prefix: "fa",
+    title: "Font Awesome",
+    icons: faIcons,
+    description: "Powered by Font Awesome set.",
+    link: "http://fontawesome.io",
+  },
+  { prefix: "flag", title: "Flags", icons: flagIcons },
+  { prefix: "payment", title: "Payments", icons: paymentIcons },
+];
+
+function IconPage(): React.Node {
+  return (
+    <SiteWrapper>
+      <Page.Content title="Icons">
+        {iconSets.map(iconSet => (
+          <Card key={iconSet.prefix}>
+            <Card.Header>
+              <Card.Title>{iconSet.title}</Card.Title>
+            </Card.Header>
+            <Card.Body>
+              <Grid.Row>
+                <Grid.Col lg={3}>
+                  <p>
+                    {iconSet.description}
+                    {iconSet.link && (
+                      <span>
+                        {" "}
+                        For more info{" "}
+                        <a
+                          href={iconSet.link}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                        >
+                          click here
+                        </a>.
+                      </span>
+                    )}
+                  </p>
+                  <p>
+                    <code>{`<Icon prefix="${
+                      iconSet.prefix
+                    }" name="ICON_NAME" />`}</code>
+                  </p>
+                </Grid.Col>
+                <Grid.Col lg={9}>
+                  <div className="icons-list-wrap">
+                    <ul className="icons-list">
+                      {iconSet.icons.map(icon => (
+                        <li className="icons-list-item" key={icon}>
+                          <Icon prefix={iconSet.prefix} name={icon} />
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                </Grid.Col>
+              </Grid.Row>
+            </Card.Body>
+          </Card>
+        ))}
+      </Page.Content>
+    </SiteWrapper>
+  );
+}
+
+export default IconPage;

resources/js/components/MapCardsPage.react.js

@@ -0,0 +1,117 @@
+// @flow
+
+import * as React from "react";
+
+import {
+  Container,
+  Page,
+  Grid,
+  Card,
+  Stamp,
+  ContactCard,
+  Timeline,
+} from "tabler-react";
+
+import SiteWrapper from "../SiteWrapper.react";
+
+import GoogleMap from "../GoogleMap";
+
+import ReactSimpleMap from "../ReactSimpleMap";
+
+function MapCardsPage(): React.Node {
+  return (
+    <SiteWrapper>
+      <div className="my-3 my-md-5">
+        <Page.MapHeader>
+          <GoogleMap blackAndWhite />
+        </Page.MapHeader>
+        <Container>
+          <Grid.Row cards>
+            <Grid.Col lg={4} md={6}>
+              <ContactCard
+                cardTitle="Client card"
+                mapPlaceholder="./demo/staticmap.png"
+                rounded
+                objectURL="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2264%22%20height%3D%2264%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ec911398e%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ec911398e%22%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2213.84375%22%20y%3D%2236.65%22%3E64x64%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
+                alt="Generic placeholder image"
+                name={"Axa Global Group"}
+                address={{
+                  line1: "1290 Avenua of The Americas",
+                  line2: "New York, NY 101040105",
+                }}
+                details={[
+                  { title: "Relationship", content: "Client" },
+                  { title: "Business Type", content: "Insurance Company" },
+                  {
+                    title: "Website",
+                    content: (
+                      <a href="http://www.axa.com">http://www.axa.com</a>
+                    ),
+                  },
+                  { title: "Office Phone", content: "+123456789" },
+                ]}
+                description={`Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+                 Consectetur dignissimos doloribus eum fugiat itaque
+                laboriosam maiores nisi nostrum perspiciatis vero.`}
+              />
+            </Grid.Col>
+            <Grid.Col lg={8} md={6}>
+              <Card title="World population map" body={<ReactSimpleMap />} />
+              <Grid.Row>
+                <Grid.Col width={6}>
+                  <Card
+                    title="Map of Warsaw metro"
+                    options={<Stamp color="red">L2</Stamp>}
+                    body={
+                      <Timeline>
+                        <Timeline.Item
+                          title="Rondo Daszyńskiego"
+                          badgeColor="red"
+                          time="2 min. ago"
+                        />
+                        <Timeline.Item
+                          title="Rondo ONZ"
+                          badge
+                          time="1 min. ago"
+                        />
+                        <Timeline.Item
+                          title="Świętokrzyska"
+                          badgeColor="blue"
+                          time="now"
+                          active
+                          description="Lorem ipsum dolor sit amet, consectetur adipisicing elit."
+                        />
+                        <Timeline.Item
+                          title="Nowy Świat-Uniwersytet"
+                          badge
+                          time="2 min."
+                        />
+                        <Timeline.Item
+                          title="Centrum Nauki Kopernik"
+                          badge
+                          time="3 min."
+                        />
+                        <Timeline.Item
+                          title="Stadion Narodowy"
+                          badge
+                          time="5 min."
+                        />
+                        <Timeline.Item
+                          title="Dworzec Wileński"
+                          badgeColor="green"
+                          time="7 min."
+                        />
+                      </Timeline>
+                    }
+                  />
+                </Grid.Col>
+              </Grid.Row>
+            </Grid.Col>
+          </Grid.Row>
+        </Container>
+      </div>
+    </SiteWrapper>
+  );
+}
+
+export default MapCardsPage;

resources/js/components/StoreCardsPage.react.js

@@ -0,0 +1,232 @@
+// @flow
+
+import * as React from "react";
+
+import { Page, Grid, StoreCard, Table, Card, Badge } from "tabler-react";
+
+import SiteWrapper from "../SiteWrapper.react";
+
+function StoreCardsPage(): React.Node {
+  return (
+    <SiteWrapper>
+      <Page.Content title="Store Components">
+        <Grid.Row>
+          <Grid.Col lg={3}>
+            <StoreCard
+              title="Apple iPhone 7 Plus 256GB Red Special Edition"
+              subtitle="Apple"
+              price="$499"
+              imgUrl="https://tabler.github.io/tabler/demo/products/apple-iphone7-special.jpg"
+            />
+            <StoreCard
+              title="GoPro HERO6 Black"
+              subtitle="GoPro"
+              price="$599"
+              imgUrl="https://tabler.github.io/tabler/demo/products/gopro-hero.jpg"
+            />
+          </Grid.Col>
+          <Grid.Col lg={9}>
+            <Card>
+              <Table className="card-table table-vcenter">
+                <Table.Body>
+                  <Table.Row>
+                    <Table.Col>
+                      <img
+                        alt=""
+                        src="https://tabler.github.io/tabler/demo/products/apple-iphone7-special.jpg"
+                        className="h-8"
+                      />
+                    </Table.Col>
+                    <Table.Col>
+                      Apple iPhone 7 Plus 256GB Red Special Edition
+                    </Table.Col>
+                    <Table.Col className="text-right text-muted d-none d-md-table-cell text-nowrap">
+                      98 reviews
+                    </Table.Col>
+                    <Table.Col className="text-right text-muted d-none d-md-table-cell text-nowrap">
+                      38 offers
+                    </Table.Col>
+                    <Table.Col className="text-right">
+                      <strong>$499</strong>
+                    </Table.Col>
+                  </Table.Row>
+                  <Table.Row>
+                    <Table.Col>
+                      <img
+                        alt=""
+                        src="https://tabler.github.io/tabler/demo/products/apple-macbook-pro.jpg"
+                        className="h-8"
+                      />
+                    </Table.Col>
+                    <Table.Col>
+                      Apple MacBook Pro i7 3,1GHz/16/512/Radeon 560 Space Gray{" "}
+                      <Badge color="default"> New </Badge>
+                    </Table.Col>
+                    <Table.Col className="text-right text-muted d-none d-md-table-cell text-nowrap">
+                      97 reviews
+                    </Table.Col>
+                    <Table.Col className="text-right text-muted d-none d-md-table-cell text-nowrap">
+                      13 offers
+                    </Table.Col>
+                    <Table.Col className="text-right">
+                      <strong>$1499</strong>
+                    </Table.Col>
+                  </Table.Row>
+                  <Table.Row>
+                    <Table.Col>
+                      <img
+                        alt=""
+                        src="https://tabler.github.io/tabler/demo/products/apple-iphone7.jpg"
+                        className="h-8"
+                      />
+                    </Table.Col>
+                    <Table.Col>Apple iPhone 7 32GB Jet Black</Table.Col>
+                    <Table.Col className="text-right text-muted d-none d-md-table-cell text-nowrap">
+                      48 reviews{" "}
+                    </Table.Col>
+                    <Table.Col className="text-right text-muted d-none d-md-table-cell text-nowrap">
+                      38 offers
+                    </Table.Col>
+                    <Table.Col className="text-right">
+                      <strong>$499</strong>
+                    </Table.Col>
+                  </Table.Row>
+                  <Table.Row>
+                    <Table.Col>
+                      <img
+                        alt=""
+                        src="https://tabler.github.io/tabler/demo/products/gopro-hero.jpg"
+                        className="h-8"
+                      />
+                    </Table.Col>
+                    <Table.Col>
+                      GoPro HERO6 Black <Badge color="default"> New </Badge>
+                    </Table.Col>
+                    <Table.Col className="text-right text-muted d-none d-md-table-cell text-nowrap">
+                      66 reviews{" "}
+                    </Table.Col>
+                    <Table.Col className="text-right text-muted d-none d-md-table-cell text-nowrap">
+                      47 offers
+                    </Table.Col>
+                    <Table.Col className="text-right">
+                      <strong>$599</strong>
+                    </Table.Col>
+                  </Table.Row>
+                  <Table.Row>
+                    <Table.Col>
+                      <img
+                        alt=""
+                        src="https://tabler.github.io/tabler/demo/products/msi.jpg"
+                        className="h-8"
+                      />
+                    </Table.Col>
+                    <Table.Col>
+                      MSI GV62 i5-7300HQ/8GB/1TB/Win10X GTX1050
+                    </Table.Col>
+                    <Table.Col className="text-right text-muted d-none d-md-table-cell text-nowrap">
+                      59 reviews
+                    </Table.Col>
+                    <Table.Col className="text-right text-muted d-none d-md-table-cell text-nowrap">
+                      26 offers{" "}
+                    </Table.Col>
+                    <Table.Col className="text-right">
+                      <strong>$1599</strong>
+                    </Table.Col>
+                  </Table.Row>
+                  <Table.Row>
+                    <Table.Col>
+                      <img
+                        alt=""
+                        src="https://tabler.github.io/tabler/demo/products/xiaomi-mi.jpg"
+                        className="h-8"
+                      />
+                    </Table.Col>
+                    <Table.Col>
+                      Xiaomi Mi A1 64GB Black<Badge color="default">
+                        {" "}
+                        New{" "}
+                      </Badge>
+                    </Table.Col>
+                    <Table.Col className="text-right text-muted d-none d-md-table-cell text-nowrap">
+                      63 reviews
+                    </Table.Col>
+                    <Table.Col className="text-right text-muted d-none d-md-table-cell text-nowrap">
+                      43 offers
+                    </Table.Col>
+                    <Table.Col className="text-right">
+                      <strong>$269</strong>
+                    </Table.Col>
+                  </Table.Row>{" "}
+                  <Table.Row>
+                    <Table.Col>
+                      <img
+                        alt=""
+                        src="https://tabler.github.io/tabler/demo/products/huawei-mate.jpg"
+                        className="h-8"
+                      />
+                    </Table.Col>
+                    <Table.Col>Huawei Mate 10 Pro Dual SIM Gray</Table.Col>
+                    <Table.Col className="text-right text-muted d-none d-md-table-cell text-nowrap">
+                      71 reviews
+                    </Table.Col>
+                    <Table.Col className="text-right text-muted d-none d-md-table-cell text-nowrap">
+                      12 offers
+                    </Table.Col>
+                    <Table.Col className="text-right">
+                      <strong>$999</strong>
+                    </Table.Col>
+                  </Table.Row>
+                  <Table.Row>
+                    <Table.Col>
+                      <img
+                        alt=""
+                        src="https://tabler.github.io/tabler/demo/products/sony-kd.jpg"
+                        className="h-8"
+                      />
+                    </Table.Col>
+                    <Table.Col>
+                      Sony KD-49XE7005<Badge color="default"> New </Badge>
+                    </Table.Col>
+                    <Table.Col className="text-right text-muted d-none d-md-table-cell text-nowrap">
+                      54 reviews
+                    </Table.Col>
+                    <Table.Col className="text-right text-muted d-none d-md-table-cell text-nowrap">
+                      14 offers
+                    </Table.Col>
+                    <Table.Col className="text-right">
+                      <strong>$799</strong>
+                    </Table.Col>
+                  </Table.Row>
+                  <Table.Row>
+                    <Table.Col>
+                      <img
+                        alt=""
+                        src="https://tabler.github.io/tabler/demo/products/samsung-galaxy.jpg"
+                        className="h-8"
+                      />
+                    </Table.Col>
+                    <Table.Col>
+                      Samsung Galaxy A5 A520F 2017 LTE Black Sky
+                    </Table.Col>
+                    <Table.Col className="text-right text-muted d-none d-md-table-cell text-nowrap">
+                      37 reviews{" "}
+                    </Table.Col>
+                    <Table.Col className="text-right text-muted d-none d-md-table-cell text-nowrap">
+                      {" "}
+                      40 offers
+                    </Table.Col>
+                    <Table.Col className="text-right">
+                      <strong>$399</strong>
+                    </Table.Col>
+                  </Table.Row>
+                </Table.Body>
+              </Table>
+            </Card>
+          </Grid.Col>
+        </Grid.Row>
+      </Page.Content>
+    </SiteWrapper>
+  );
+}
+
+export default StoreCardsPage;

resources/js/components/dashboard/Index.js

@@ -0,0 +1,49 @@
+/*
+ * Index.js
+ * Copyright (c) 2019 thegrumpydictator@gmail.com
+ *
+ * This file is part of Firefly III.
+ *
+ * Firefly III is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Firefly III is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Firefly III. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import "tabler-react/dist/Tabler.css";
+import { Card, Button } from "tabler-react";
+import Main from "../Main";
+
+class AccountOverview extends Component {
+    render() {
+        return (
+            <Card>
+                <Card.Header>
+                    <Card.Title>Account overview</Card.Title>
+                </Card.Header>
+                <Card.Body>
+                    Bla bla
+                </Card.Body>
+            </Card>
+        );
+    }
+}
+
+export default AccountOverview;
+
+/* The if statement is required so as to Render the component on pages that have a div with an ID of "root";
+*/
+
+if (document.getElementById('root')) {
+    ReactDOM.render(<AccountOverview />, document.getElementById('root'));
+}

resources/js/data/Gallery.Items.json

@@ -0,0 +1,100 @@
+{
+  "items": [
+    {
+      "imageURL": "demo/photos/grant-ritchie-338179-500.jpg",
+      "avatarURL": "demo/faces/male/41.jpg",
+      "fullName": "Nathan Guerrero",
+      "dateString": "12 days ago",
+      "totalView": 112,
+      "totalLike": 42
+    },
+    {
+      "imageURL": "demo/photos/ilnur-kalimullin-218996-500.jpg",
+      "avatarURL": "demo/faces/female/1.jpg",
+      "fullName": "Alice Mason",
+      "dateString": "12 days ago",
+      "totalView": 70,
+      "totalLike": 0
+    },
+    {
+      "imageURL": "demo/photos/jakob-owens-224352-500.jpg",
+      "avatarURL": "demo/faces/female/18.jpg",
+      "fullName": "Rose Bradley",
+      "dateString": "4 days ago",
+      "totalView": 166,
+      "totalLike": 96
+    },
+    {
+      "imageURL": "demo/photos/jeremy-bishop-330225-500.jpg",
+      "avatarURL": "demo/faces/male/16.jpg",
+      "fullName": "Peter Richards",
+      "dateString": "18 days ago",
+      "totalView": 76,
+      "totalLike": 6
+    },
+    {
+      "imageURL": "demo/photos/jonatan-pie-226191-500.jpg",
+      "avatarURL": "demo/faces/male/26.jpg",
+      "fullName": "Wayne Holland",
+      "dateString": "16 days ago",
+      "totalView": 106,
+      "totalLike": 36
+    },
+    {
+      "imageURL": "demo/photos/josh-calabrese-66153-500.jpg",
+      "avatarURL": "demo/faces/female/7.jpg",
+      "fullName": "Michelle Ross",
+      "dateString": "4 days ago",
+      "totalView": 77,
+      "totalLike": 7
+    },
+    {
+      "imageURL": "demo/photos/joshua-earle-157231-500.jpg",
+      "avatarURL": "demo/faces/female/17.jpg",
+      "fullName": "Debra Beck",
+      "dateString": "6 days ago",
+      "totalView": 150,
+      "totalLike": 80
+    },
+    {
+      "imageURL": "demo/photos/mahkeo-222765-500.jpg",
+      "avatarURL": "demo/faces/male/30.jpg",
+      "fullName": "Phillip Peters",
+      "dateString": "17 days ago",
+      "totalView": 153,
+      "totalLike": 83
+    },
+    {
+      "imageURL": "demo/photos/matt-barrett-339981-500.jpg",
+      "avatarURL": "demo/faces/male/32.jpg",
+      "fullName": "Jack Ruiz",
+      "dateString": "15 days ago",
+      "totalView": 143,
+      "totalLike": 73
+    },
+    {
+      "imageURL": "demo/photos/nathan-anderson-297460-500.jpg",
+      "avatarURL": "demo/faces/male/9.jpg",
+      "fullName": "Ronald Bradley",
+      "dateString": "11 days ago",
+      "totalView": 149,
+      "totalLike": 79
+    },
+    {
+      "imageURL": "demo/photos/nathan-anderson-316188-500.jpg",
+      "avatarURL": "demo/faces/female/8.jpg",
+      "fullName": "Kathleen Harper",
+      "dateString": "16 days ago",
+      "totalView": 164,
+      "totalLike": 94
+    },
+    {
+      "imageURL": "demo/photos/nathan-dumlao-287713-500.jpg",
+      "avatarURL": "demo/faces/male/4.jpg",
+      "fullName": "Bobby Knight",
+      "dateString": "6 days ago",
+      "totalView": 160,
+      "totalLike": 90
+    }
+  ]
+}

resources/js/data/icons/fa.json

@@ -0,0 +1,788 @@
+[
+  "500px",
+  "address-book",
+  "address-book-o",
+  "address-card",
+  "address-card-o",
+  "adjust",
+  "adn",
+  "align-center",
+  "align-justify",
+  "align-left",
+  "align-right",
+  "amazon",
+  "ambulance",
+  "american-sign-language-interpreting",
+  "anchor",
+  "android",
+  "angellist",
+  "angle-double-down",
+  "angle-double-left",
+  "angle-double-right",
+  "angle-double-up",
+  "angle-down",
+  "angle-left",
+  "angle-right",
+  "angle-up",
+  "apple",
+  "archive",
+  "area-chart",
+  "arrow-circle-down",
+  "arrow-circle-left",
+  "arrow-circle-o-down",
+  "arrow-circle-o-left",
+  "arrow-circle-o-right",
+  "arrow-circle-o-up",
+  "arrow-circle-right",
+  "arrow-circle-up",
+  "arrow-down",
+  "arrow-left",
+  "arrow-right",
+  "arrow-up",
+  "arrows",
+  "arrows-alt",
+  "arrows-h",
+  "arrows-v",
+  "asl-interpreting",
+  "assistive-listening-systems",
+  "asterisk",
+  "at",
+  "audio-description",
+  "automobile",
+  "backward",
+  "balance-scale",
+  "ban",
+  "bandcamp",
+  "bank",
+  "bar-chart",
+  "bar-chart-o",
+  "barcode",
+  "bars",
+  "bath",
+  "bathtub",
+  "battery",
+  "battery-0",
+  "battery-1",
+  "battery-2",
+  "battery-3",
+  "battery-4",
+  "battery-empty",
+  "battery-full",
+  "battery-half",
+  "battery-quarter",
+  "battery-three-quarters",
+  "bed",
+  "beer",
+  "behance",
+  "behance-square",
+  "bell",
+  "bell-o",
+  "bell-slash",
+  "bell-slash-o",
+  "bicycle",
+  "binoculars",
+  "birthday-cake",
+  "bitbucket",
+  "bitbucket-square",
+  "bitcoin",
+  "black-tie",
+  "blind",
+  "bluetooth",
+  "bluetooth-b",
+  "bold",
+  "bolt",
+  "bomb",
+  "book",
+  "bookmark",
+  "bookmark-o",
+  "braille",
+  "briefcase",
+  "btc",
+  "bug",
+  "building",
+  "building-o",
+  "bullhorn",
+  "bullseye",
+  "bus",
+  "buysellads",
+  "cab",
+  "calculator",
+  "calendar",
+  "calendar-check-o",
+  "calendar-minus-o",
+  "calendar-o",
+  "calendar-plus-o",
+  "calendar-times-o",
+  "camera",
+  "camera-retro",
+  "car",
+  "caret-down",
+  "caret-left",
+  "caret-right",
+  "caret-square-o-down",
+  "caret-square-o-left",
+  "caret-square-o-right",
+  "caret-square-o-up",
+  "caret-up",
+  "cart-arrow-down",
+  "cart-plus",
+  "cc",
+  "cc-amex",
+  "cc-diners-club",
+  "cc-discover",
+  "cc-jcb",
+  "cc-mastercard",
+  "cc-paypal",
+  "cc-stripe",
+  "cc-visa",
+  "certificate",
+  "chain",
+  "chain-broken",
+  "check",
+  "check-circle",
+  "check-circle-o",
+  "check-square",
+  "check-square-o",
+  "chevron-circle-down",
+  "chevron-circle-left",
+  "chevron-circle-right",
+  "chevron-circle-up",
+  "chevron-down",
+  "chevron-left",
+  "chevron-right",
+  "chevron-up",
+  "child",
+  "chrome",
+  "circle",
+  "circle-o",
+  "circle-o-notch",
+  "circle-thin",
+  "clipboard",
+  "clock-o",
+  "clone",
+  "close",
+  "cloud",
+  "cloud-download",
+  "cloud-upload",
+  "cny",
+  "code",
+  "code-fork",
+  "codepen",
+  "codiepie",
+  "coffee",
+  "cog",
+  "cogs",
+  "columns",
+  "comment",
+  "comment-o",
+  "commenting",
+  "commenting-o",
+  "comments",
+  "comments-o",
+  "compass",
+  "compress",
+  "connectdevelop",
+  "contao",
+  "copy",
+  "copyright",
+  "creative-commons",
+  "credit-card",
+  "credit-card-alt",
+  "crop",
+  "crosshairs",
+  "css3",
+  "cube",
+  "cubes",
+  "cut",
+  "cutlery",
+  "dashboard",
+  "dashcube",
+  "database",
+  "deaf",
+  "deafness",
+  "dedent",
+  "delicious",
+  "desktop",
+  "deviantart",
+  "diamond",
+  "digg",
+  "dollar",
+  "dot-circle-o",
+  "download",
+  "dribbble",
+  "drivers-license",
+  "drivers-license-o",
+  "dropbox",
+  "drupal",
+  "edge",
+  "edit",
+  "eercast",
+  "eject",
+  "ellipsis-h",
+  "ellipsis-v",
+  "empire",
+  "envelope",
+  "envelope-o",
+  "envelope-open",
+  "envelope-open-o",
+  "envelope-square",
+  "envira",
+  "eraser",
+  "etsy",
+  "eur",
+  "euro",
+  "exchange",
+  "exclamation",
+  "exclamation-circle",
+  "exclamation-triangle",
+  "expand",
+  "expeditedssl",
+  "external-link",
+  "external-link-square",
+  "eye",
+  "eye-slash",
+  "eyedropper",
+  "fa",
+  "facebook",
+  "facebook-f",
+  "facebook-official",
+  "facebook-square",
+  "fast-backward",
+  "fast-forward",
+  "fax",
+  "feed",
+  "female",
+  "fighter-jet",
+  "file",
+  "file-archive-o",
+  "file-audio-o",
+  "file-code-o",
+  "file-excel-o",
+  "file-image-o",
+  "file-movie-o",
+  "file-o",
+  "file-pdf-o",
+  "file-photo-o",
+  "file-picture-o",
+  "file-powerpoint-o",
+  "file-sound-o",
+  "file-text",
+  "file-text-o",
+  "file-video-o",
+  "file-word-o",
+  "file-zip-o",
+  "files-o",
+  "film",
+  "filter",
+  "fire",
+  "fire-extinguisher",
+  "firefox",
+  "first-order",
+  "flag",
+  "flag-checkered",
+  "flag-o",
+  "flash",
+  "flask",
+  "flickr",
+  "floppy-o",
+  "folder",
+  "folder-o",
+  "folder-open",
+  "folder-open-o",
+  "font",
+  "font-awesome",
+  "fonticons",
+  "fort-awesome",
+  "forumbee",
+  "forward",
+  "foursquare",
+  "free-code-camp",
+  "frown-o",
+  "futbol-o",
+  "gamepad",
+  "gavel",
+  "gbp",
+  "ge",
+  "gear",
+  "gears",
+  "genderless",
+  "get-pocket",
+  "gg",
+  "gg-circle",
+  "gift",
+  "git",
+  "git-square",
+  "github",
+  "github-alt",
+  "github-square",
+  "gitlab",
+  "gittip",
+  "glass",
+  "glide",
+  "glide-g",
+  "globe",
+  "google",
+  "google-plus",
+  "google-plus-circle",
+  "google-plus-official",
+  "google-plus-square",
+  "google-wallet",
+  "graduation-cap",
+  "gratipay",
+  "grav",
+  "group",
+  "h-square",
+  "hacker-news",
+  "hand-grab-o",
+  "hand-lizard-o",
+  "hand-o-down",
+  "hand-o-left",
+  "hand-o-right",
+  "hand-o-up",
+  "hand-paper-o",
+  "hand-peace-o",
+  "hand-pointer-o",
+  "hand-rock-o",
+  "hand-scissors-o",
+  "hand-spock-o",
+  "hand-stop-o",
+  "handshake-o",
+  "hard-of-hearing",
+  "hashtag",
+  "hdd-o",
+  "header",
+  "headphones",
+  "heart",
+  "heart-o",
+  "heartbeat",
+  "history",
+  "home",
+  "hospital-o",
+  "hotel",
+  "hourglass",
+  "hourglass-1",
+  "hourglass-2",
+  "hourglass-3",
+  "hourglass-end",
+  "hourglass-half",
+  "hourglass-o",
+  "hourglass-start",
+  "houzz",
+  "html5",
+  "i-cursor",
+  "id-badge",
+  "id-card",
+  "id-card-o",
+  "ils",
+  "image",
+  "imdb",
+  "inbox",
+  "indent",
+  "industry",
+  "info",
+  "info-circle",
+  "inr",
+  "instagram",
+  "institution",
+  "internet-explorer",
+  "intersex",
+  "ioxhost",
+  "italic",
+  "joomla",
+  "jpy",
+  "jsfiddle",
+  "key",
+  "keyboard-o",
+  "krw",
+  "language",
+  "laptop",
+  "lastfm",
+  "lastfm-square",
+  "leaf",
+  "leanpub",
+  "legal",
+  "lemon-o",
+  "level-down",
+  "level-up",
+  "life-bouy",
+  "life-buoy",
+  "life-ring",
+  "life-saver",
+  "lightbulb-o",
+  "line-chart",
+  "link",
+  "linkedin",
+  "linkedin-square",
+  "linode",
+  "linux",
+  "list",
+  "list-alt",
+  "list-ol",
+  "list-ul",
+  "location-arrow",
+  "lock",
+  "long-arrow-down",
+  "long-arrow-left",
+  "long-arrow-right",
+  "long-arrow-up",
+  "low-vision",
+  "magic",
+  "magnet",
+  "mail-forward",
+  "mail-reply",
+  "mail-reply-all",
+  "male",
+  "map",
+  "map-marker",
+  "map-o",
+  "map-pin",
+  "map-signs",
+  "mars",
+  "mars-double",
+  "mars-stroke",
+  "mars-stroke-h",
+  "mars-stroke-v",
+  "maxcdn",
+  "meanpath",
+  "medium",
+  "medkit",
+  "meetup",
+  "meh-o",
+  "mercury",
+  "microchip",
+  "microphone",
+  "microphone-slash",
+  "minus",
+  "minus-circle",
+  "minus-square",
+  "minus-square-o",
+  "mixcloud",
+  "mobile",
+  "mobile-phone",
+  "modx",
+  "money",
+  "moon-o",
+  "mortar-board",
+  "motorcycle",
+  "mouse-pointer",
+  "music",
+  "navicon",
+  "neuter",
+  "newspaper-o",
+  "object-group",
+  "object-ungroup",
+  "odnoklassniki",
+  "odnoklassniki-square",
+  "opencart",
+  "openid",
+  "opera",
+  "optin-monster",
+  "outdent",
+  "pagelines",
+  "paint-brush",
+  "paper-plane",
+  "paper-plane-o",
+  "paperclip",
+  "paragraph",
+  "paste",
+  "pause",
+  "pause-circle",
+  "pause-circle-o",
+  "paw",
+  "paypal",
+  "pencil",
+  "pencil-square",
+  "pencil-square-o",
+  "percent",
+  "phone",
+  "phone-square",
+  "photo",
+  "picture-o",
+  "pie-chart",
+  "pied-piper",
+  "pied-piper-alt",
+  "pied-piper-pp",
+  "pinterest",
+  "pinterest-p",
+  "pinterest-square",
+  "plane",
+  "play",
+  "play-circle",
+  "play-circle-o",
+  "plug",
+  "plus",
+  "plus-circle",
+  "plus-square",
+  "plus-square-o",
+  "podcast",
+  "power-off",
+  "print",
+  "product-hunt",
+  "puzzle-piece",
+  "qq",
+  "qrcode",
+  "question",
+  "question-circle",
+  "question-circle-o",
+  "quora",
+  "quote-left",
+  "quote-right",
+  "ra",
+  "random",
+  "ravelry",
+  "rebel",
+  "recycle",
+  "reddit",
+  "reddit-alien",
+  "reddit-square",
+  "refresh",
+  "registered",
+  "remove",
+  "renren",
+  "reorder",
+  "repeat",
+  "reply",
+  "reply-all",
+  "resistance",
+  "retweet",
+  "rmb",
+  "road",
+  "rocket",
+  "rotate-left",
+  "rotate-right",
+  "rouble",
+  "rss",
+  "rss-square",
+  "rub",
+  "ruble",
+  "rupee",
+  "s15",
+  "safari",
+  "save",
+  "scissors",
+  "scribd",
+  "search",
+  "search-minus",
+  "search-plus",
+  "sellsy",
+  "send",
+  "send-o",
+  "server",
+  "share",
+  "share-alt",
+  "share-alt-square",
+  "share-square",
+  "share-square-o",
+  "shekel",
+  "sheqel",
+  "shield",
+  "ship",
+  "shirtsinbulk",
+  "shopping-bag",
+  "shopping-basket",
+  "shopping-cart",
+  "shower",
+  "sign-in",
+  "sign-language",
+  "sign-out",
+  "signal",
+  "signing",
+  "simplybuilt",
+  "sitemap",
+  "skyatlas",
+  "skype",
+  "slack",
+  "sliders",
+  "slideshare",
+  "smile-o",
+  "snapchat",
+  "snapchat-ghost",
+  "snapchat-square",
+  "snowflake-o",
+  "soccer-ball-o",
+  "sort",
+  "sort-alpha-asc",
+  "sort-alpha-desc",
+  "sort-amount-asc",
+  "sort-amount-desc",
+  "sort-asc",
+  "sort-desc",
+  "sort-down",
+  "sort-numeric-asc",
+  "sort-numeric-desc",
+  "sort-up",
+  "soundcloud",
+  "space-shuttle",
+  "spinner",
+  "spoon",
+  "spotify",
+  "square",
+  "square-o",
+  "stack-exchange",
+  "stack-overflow",
+  "star",
+  "star-half",
+  "star-half-empty",
+  "star-half-full",
+  "star-half-o",
+  "star-o",
+  "steam",
+  "steam-square",
+  "step-backward",
+  "step-forward",
+  "stethoscope",
+  "sticky-note",
+  "sticky-note-o",
+  "stop",
+  "stop-circle",
+  "stop-circle-o",
+  "street-view",
+  "strikethrough",
+  "stumbleupon",
+  "stumbleupon-circle",
+  "subscript",
+  "subway",
+  "suitcase",
+  "sun-o",
+  "superpowers",
+  "superscript",
+  "support",
+  "table",
+  "tablet",
+  "tachometer",
+  "tag",
+  "tags",
+  "tasks",
+  "taxi",
+  "telegram",
+  "television",
+  "tencent-weibo",
+  "terminal",
+  "text-height",
+  "text-width",
+  "th",
+  "th-large",
+  "th-list",
+  "themeisle",
+  "thermometer",
+  "thermometer-0",
+  "thermometer-1",
+  "thermometer-2",
+  "thermometer-3",
+  "thermometer-4",
+  "thermometer-empty",
+  "thermometer-full",
+  "thermometer-half",
+  "thermometer-quarter",
+  "thermometer-three-quarters",
+  "thumb-tack",
+  "thumbs-down",
+  "thumbs-o-down",
+  "thumbs-o-up",
+  "thumbs-up",
+  "ticket",
+  "times",
+  "times-circle",
+  "times-circle-o",
+  "times-rectangle",
+  "times-rectangle-o",
+  "tint",
+  "toggle-down",
+  "toggle-left",
+  "toggle-off",
+  "toggle-on",
+  "toggle-right",
+  "toggle-up",
+  "trademark",
+  "train",
+  "transgender",
+  "transgender-alt",
+  "trash",
+  "trash-o",
+  "tree",
+  "trello",
+  "tripadvisor",
+  "trophy",
+  "truck",
+  "try",
+  "tty",
+  "tumblr",
+  "tumblr-square",
+  "turkish-lira",
+  "tv",
+  "twitch",
+  "twitter",
+  "twitter-square",
+  "umbrella",
+  "underline",
+  "undo",
+  "universal-access",
+  "university",
+  "unlink",
+  "unlock",
+  "unlock-alt",
+  "unsorted",
+  "upload",
+  "usb",
+  "usd",
+  "user",
+  "user-circle",
+  "user-circle-o",
+  "user-md",
+  "user-o",
+  "user-plus",
+  "user-secret",
+  "user-times",
+  "users",
+  "vcard",
+  "vcard-o",
+  "venus",
+  "venus-double",
+  "venus-mars",
+  "viacoin",
+  "viadeo",
+  "viadeo-square",
+  "video-camera",
+  "vimeo",
+  "vimeo-square",
+  "vine",
+  "vk",
+  "volume-control-phone",
+  "volume-down",
+  "volume-off",
+  "volume-up",
+  "warning",
+  "wechat",
+  "weibo",
+  "weixin",
+  "whatsapp",
+  "wheelchair",
+  "wheelchair-alt",
+  "wifi",
+  "wikipedia-w",
+  "window-close",
+  "window-close-o",
+  "window-maximize",
+  "window-minimize",
+  "window-restore",
+  "windows",
+  "won",
+  "wordpress",
+  "wpbeginner",
+  "wpexplorer",
+  "wpforms",
+  "wrench",
+  "xing",
+  "xing-square",
+  "y-combinator",
+  "y-combinator-square",
+  "yahoo",
+  "yc",
+  "yc-square",
+  "yelp",
+  "yen",
+  "yoast",
+  "youtube",
+  "youtube-play",
+  "youtube-square"
+]

resources/js/data/icons/fe.json

@@ -0,0 +1,265 @@
+[
+  "activity",
+  "airplay",
+  "alert-circle",
+  "alert-octagon",
+  "alert-triangle",
+  "align-center",
+  "align-justify",
+  "align-left",
+  "align-right",
+  "anchor",
+  "aperture",
+  "arrow-down",
+  "arrow-down-circle",
+  "arrow-down-left",
+  "arrow-down-right",
+  "arrow-left",
+  "arrow-left-circle",
+  "arrow-right",
+  "arrow-right-circle",
+  "arrow-up",
+  "arrow-up-circle",
+  "arrow-up-left",
+  "arrow-up-right",
+  "at-sign",
+  "award",
+  "bar-chart",
+  "bar-chart-2",
+  "battery",
+  "battery-charging",
+  "bell",
+  "bell-off",
+  "bluetooth",
+  "bold",
+  "book",
+  "book-open",
+  "bookmark",
+  "box",
+  "briefcase",
+  "calendar",
+  "camera",
+  "camera-off",
+  "cast",
+  "check",
+  "check-circle",
+  "check-square",
+  "chevron-down",
+  "chevron-left",
+  "chevron-right",
+  "chevron-up",
+  "chevrons-down",
+  "chevrons-left",
+  "chevrons-right",
+  "chevrons-up",
+  "chrome",
+  "circle",
+  "clipboard",
+  "clock",
+  "cloud",
+  "cloud-drizzle",
+  "cloud-lightning",
+  "cloud-off",
+  "cloud-rain",
+  "cloud-snow",
+  "code",
+  "codepen",
+  "command",
+  "compass",
+  "copy",
+  "corner-down-left",
+  "corner-down-right",
+  "corner-left-down",
+  "corner-left-up",
+  "corner-right-down",
+  "corner-right-up",
+  "corner-up-left",
+  "corner-up-right",
+  "cpu",
+  "credit-card",
+  "crop",
+  "crosshair",
+  "database",
+  "delete",
+  "disc",
+  "dollar-sign",
+  "download",
+  "download-cloud",
+  "droplet",
+  "edit",
+  "edit-2",
+  "edit-3",
+  "external-link",
+  "eye",
+  "eye-off",
+  "facebook",
+  "fast-forward",
+  "feather",
+  "file",
+  "file-minus",
+  "file-plus",
+  "file-text",
+  "film",
+  "filter",
+  "flag",
+  "folder",
+  "folder-minus",
+  "folder-plus",
+  "git-branch",
+  "git-commit",
+  "git-merge",
+  "git-pull-request",
+  "github",
+  "gitlab",
+  "globe",
+  "grid",
+  "hard-drive",
+  "hash",
+  "headphones",
+  "heart",
+  "help-circle",
+  "home",
+  "image",
+  "inbox",
+  "info",
+  "instagram",
+  "italic",
+  "layers",
+  "layout",
+  "life-buoy",
+  "link",
+  "link-2",
+  "linkedin",
+  "list",
+  "loader",
+  "lock",
+  "log-in",
+  "log-out",
+  "mail",
+  "map",
+  "map-pin",
+  "maximize",
+  "maximize-2",
+  "menu",
+  "message-circle",
+  "message-square",
+  "mic",
+  "mic-off",
+  "minimize",
+  "minimize-2",
+  "minus",
+  "minus-circle",
+  "minus-square",
+  "monitor",
+  "moon",
+  "more-horizontal",
+  "more-vertical",
+  "move",
+  "music",
+  "navigation",
+  "navigation-2",
+  "octagon",
+  "package",
+  "paperclip",
+  "pause",
+  "pause-circle",
+  "percent",
+  "phone",
+  "phone-call",
+  "phone-forwarded",
+  "phone-incoming",
+  "phone-missed",
+  "phone-off",
+  "phone-outgoing",
+  "pie-chart",
+  "play",
+  "play-circle",
+  "plus",
+  "plus-circle",
+  "plus-square",
+  "pocket",
+  "power",
+  "printer",
+  "radio",
+  "refresh-ccw",
+  "refresh-cw",
+  "repeat",
+  "rewind",
+  "rotate-ccw",
+  "rotate-cw",
+  "rss",
+  "save",
+  "scissors",
+  "search",
+  "send",
+  "server",
+  "settings",
+  "share",
+  "share-2",
+  "shield",
+  "shield-off",
+  "shopping-bag",
+  "shopping-cart",
+  "shuffle",
+  "sidebar",
+  "skip-back",
+  "skip-forward",
+  "slack",
+  "slash",
+  "sliders",
+  "smartphone",
+  "speaker",
+  "square",
+  "star",
+  "stop-circle",
+  "sun",
+  "sunrise",
+  "sunset",
+  "tablet",
+  "tag",
+  "target",
+  "terminal",
+  "thermometer",
+  "thumbs-down",
+  "thumbs-up",
+  "toggle-left",
+  "toggle-right",
+  "trash",
+  "trash-2",
+  "trending-down",
+  "trending-up",
+  "triangle",
+  "truck",
+  "tv",
+  "twitter",
+  "type",
+  "umbrella",
+  "underline",
+  "unlock",
+  "upload",
+  "upload-cloud",
+  "user",
+  "user-check",
+  "user-minus",
+  "user-plus",
+  "user-x",
+  "users",
+  "video",
+  "video-off",
+  "voicemail",
+  "volume",
+  "volume-1",
+  "volume-2",
+  "volume-x",
+  "watch",
+  "wifi",
+  "wifi-off",
+  "wind",
+  "x",
+  "x-circle",
+  "x-square",
+  "zap",
+  "zap-off",
+  "zoom-in",
+  "zoom-out"
+]

resources/js/data/icons/flag.json

@@ -0,0 +1,257 @@
+[
+  "ad",
+  "ae",
+  "af",
+  "ag",
+  "ai",
+  "al",
+  "am",
+  "ao",
+  "aq",
+  "ar",
+  "as",
+  "at",
+  "au",
+  "aw",
+  "ax",
+  "az",
+  "ba",
+  "bb",
+  "bd",
+  "be",
+  "bf",
+  "bg",
+  "bh",
+  "bi",
+  "bj",
+  "bl",
+  "bm",
+  "bn",
+  "bo",
+  "bq",
+  "br",
+  "bs",
+  "bt",
+  "bv",
+  "bw",
+  "by",
+  "bz",
+  "ca",
+  "cc",
+  "cd",
+  "cf",
+  "cg",
+  "ch",
+  "ci",
+  "ck",
+  "cl",
+  "cm",
+  "cn",
+  "co",
+  "cr",
+  "cu",
+  "cv",
+  "cw",
+  "cx",
+  "cy",
+  "cz",
+  "de",
+  "dj",
+  "dk",
+  "dm",
+  "do",
+  "dz",
+  "ec",
+  "ee",
+  "eg",
+  "eh",
+  "er",
+  "es",
+  "et",
+  "eu",
+  "fi",
+  "fj",
+  "fk",
+  "fm",
+  "fo",
+  "fr",
+  "ga",
+  "gb",
+  "gb-eng",
+  "gb-nir",
+  "gb-sct",
+  "gb-wls",
+  "gd",
+  "ge",
+  "gf",
+  "gg",
+  "gh",
+  "gi",
+  "gl",
+  "gm",
+  "gn",
+  "gp",
+  "gq",
+  "gr",
+  "gs",
+  "gt",
+  "gu",
+  "gw",
+  "gy",
+  "hk",
+  "hm",
+  "hn",
+  "hr",
+  "ht",
+  "hu",
+  "id",
+  "ie",
+  "il",
+  "im",
+  "in",
+  "io",
+  "iq",
+  "ir",
+  "is",
+  "it",
+  "je",
+  "jm",
+  "jo",
+  "jp",
+  "ke",
+  "kg",
+  "kh",
+  "ki",
+  "km",
+  "kn",
+  "kp",
+  "kr",
+  "kw",
+  "ky",
+  "kz",
+  "la",
+  "lb",
+  "lc",
+  "li",
+  "lk",
+  "lr",
+  "ls",
+  "lt",
+  "lu",
+  "lv",
+  "ly",
+  "ma",
+  "mc",
+  "md",
+  "me",
+  "mf",
+  "mg",
+  "mh",
+  "mk",
+  "ml",
+  "mm",
+  "mn",
+  "mo",
+  "mp",
+  "mq",
+  "mr",
+  "ms",
+  "mt",
+  "mu",
+  "mv",
+  "mw",
+  "mx",
+  "my",
+  "mz",
+  "na",
+  "nc",
+  "ne",
+  "nf",
+  "ng",
+  "ni",
+  "nl",
+  "no",
+  "np",
+  "nr",
+  "nu",
+  "nz",
+  "om",
+  "pa",
+  "pe",
+  "pf",
+  "pg",
+  "ph",
+  "pk",
+  "pl",
+  "pm",
+  "pn",
+  "pr",
+  "ps",
+  "pt",
+  "pw",
+  "py",
+  "qa",
+  "re",
+  "ro",
+  "rs",
+  "ru",
+  "rw",
+  "sa",
+  "sb",
+  "sc",
+  "sd",
+  "se",
+  "sg",
+  "sh",
+  "si",
+  "sj",
+  "sk",
+  "sl",
+  "sm",
+  "sn",
+  "so",
+  "sr",
+  "ss",
+  "st",
+  "sv",
+  "sx",
+  "sy",
+  "sz",
+  "tc",
+  "td",
+  "tf",
+  "tg",
+  "th",
+  "tj",
+  "tk",
+  "tl",
+  "tm",
+  "tn",
+  "to",
+  "tr",
+  "tt",
+  "tv",
+  "tw",
+  "tz",
+  "ua",
+  "ug",
+  "um",
+  "un",
+  "us",
+  "uy",
+  "uz",
+  "va",
+  "vc",
+  "ve",
+  "vg",
+  "vi",
+  "vn",
+  "vu",
+  "wf",
+  "ws",
+  "ye",
+  "yt",
+  "za",
+  "zm",
+  "zw"
+]

resources/js/data/icons/payment.json

@@ -0,0 +1,110 @@
+[
+  "2checkout",
+  "alipay",
+  "amazon",
+  "americanexpress",
+  "applepay",
+  "bancontact",
+  "bitcoin",
+  "bitpay",
+  "cirrus",
+  "clickandbuy",
+  "coinkite",
+  "dinersclub",
+  "directdebit",
+  "discover",
+  "dwolla",
+  "ebay",
+  "eway",
+  "giropay",
+  "googlewallet",
+  "ingenico",
+  "jcb",
+  "klarna",
+  "laser",
+  "maestro",
+  "mastercard",
+  "monero",
+  "neteller",
+  "ogone",
+  "okpay",
+  "paybox",
+  "paymill",
+  "payone",
+  "payoneer",
+  "paypal",
+  "paysafecard",
+  "payu",
+  "payza",
+  "ripple",
+  "sage",
+  "sepa",
+  "shopify",
+  "skrill",
+  "solo",
+  "square",
+  "stripe",
+  "switch",
+  "ukash",
+  "unionpay",
+  "verifone",
+  "verisign",
+  "visa",
+  "webmoney",
+  "westernunion",
+  "worldpay",
+  "2checkout-dark",
+  "alipay-dark",
+  "amazon-dark",
+  "americanexpress-dark",
+  "applepay-dark",
+  "bancontact-dark",
+  "bitcoin-dark",
+  "bitpay-dark",
+  "cirrus-dark",
+  "clickandbuy-dark",
+  "coinkite-dark",
+  "dinersclub-dark",
+  "directdebit-dark",
+  "discover-dark",
+  "dwolla-dark",
+  "ebay-dark",
+  "eway-dark",
+  "giropay-dark",
+  "googlewallet-dark",
+  "ingenico-dark",
+  "jcb-dark",
+  "klarna-dark",
+  "laser-dark",
+  "maestro-dark",
+  "mastercard-dark",
+  "monero-dark",
+  "neteller-dark",
+  "ogone-dark",
+  "okpay-dark",
+  "paybox-dark",
+  "paymill-dark",
+  "payone-dark",
+  "payoneer-dark",
+  "paypal-dark",
+  "paysafecard-dark",
+  "payu-dark",
+  "payza-dark",
+  "ripple-dark",
+  "sage-dark",
+  "sepa-dark",
+  "shopify-dark",
+  "skrill-dark",
+  "solo-dark",
+  "square-dark",
+  "stripe-dark",
+  "switch-dark",
+  "ukash-dark",
+  "unionpay-dark",
+  "verifone-dark",
+  "verisign-dark",
+  "visa-dark",
+  "webmoney-dark",
+  "westernunion-dark",
+  "worldpay-dark"
+]

resources/js/index.css

@@ -0,0 +1,5 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+}

resources/js/index.js

@@ -0,0 +1,37 @@
+/*
+ * index.js
+ * Copyright (c) 2019 thegrumpydictator@gmail.com
+ *
+ * This file is part of Firefly III.
+ *
+ * Firefly III is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Firefly III is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Firefly III. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+// @flow
+
+import React from "react";
+import ReactDOM from "react-dom";
+
+import "./index.css";
+import "./c3jscustom.css";
+
+import App from "./App.react";
+
+const rootElement = document.getElementById("root");
+
+if (rootElement) {
+    ReactDOM.render(<App />, rootElement);
+} else {
+    throw new Error("Could not find root element to mount to!");
+}

resources/js/interface/CardsDesignPage.react.js

@@ -0,0 +1,276 @@
+// @flow
+
+import * as React from "react";
+
+import { Page, Grid, Card, Button, Form, Dimmer } from "tabler-react";
+
+import SiteWrapper from "../SiteWrapper.react";
+
+function CardsDesignPage(): React.Node {
+  return (
+    <SiteWrapper>
+      <Page.Content>
+        <Grid.Row>
+          <Grid.Col md={6} xl={4}>
+            <Card
+              title="This is a standard card"
+              isCollapsible
+              isClosable
+              body="Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+            Aperiam deleniti fugit incidunt, iste, itaque minima neque
+            pariatur perferendis sed suscipit velit vitae voluptatem. A
+            consequuntur, deserunt eaque error nulla temporibus!"
+              footer="This is standard card footer"
+            />
+          </Grid.Col>
+          <Grid.Col md={6} xl={4}>
+            <Card
+              title="Built card"
+              isCollapsible
+              isClosable
+              body="Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+            Aperiam deleniti fugit incidunt, iste, itaque minima neque
+            pariatur perferendis sed suscipit velit vitae voluptatem. A
+            consequuntur, deserunt eaque error nulla temporibus!"
+            />
+          </Grid.Col>
+          <Grid.Col md={6} xl={4}>
+            <Card
+              title="Card blue"
+              isCollapsible
+              isClosable
+              statusColor="blue"
+              body="Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+            Aperiam deleniti fugit incidunt, iste, itaque minima neque
+            pariatur perferendis sed suscipit velit vitae voluptatem. A
+            consequuntur, deserunt eaque error nulla temporibus!"
+            />
+          </Grid.Col>
+          <Grid.Col md={6} xl={4}>
+            <Card
+              title="Card green"
+              isCollapsible
+              isClosable
+              statusColor="green"
+              body="Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+            Aperiam deleniti fugit incidunt, iste, itaque minima neque
+            pariatur perferendis sed suscipit velit vitae voluptatem. A
+            consequuntur, deserunt eaque error nulla temporibus!"
+            />
+          </Grid.Col>
+          <Grid.Col md={6} xl={4}>
+            <Card
+              title="Card orange"
+              isCollapsible
+              isClosable
+              statusColor="orange"
+              body="Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+            Aperiam deleniti fugit incidunt, iste, itaque minima neque
+            pariatur perferendis sed suscipit velit vitae voluptatem. A
+            consequuntur, deserunt eaque error nulla temporibus!"
+            />
+          </Grid.Col>
+          <Grid.Col md={6} xl={4}>
+            <Card
+              title="Card red"
+              isCollapsible
+              isClosable
+              statusColor="red"
+              body="Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+            Aperiam deleniti fugit incidunt, iste, itaque minima neque
+            pariatur perferendis sed suscipit velit vitae voluptatem. A
+            consequuntur, deserunt eaque error nulla temporibus!"
+            />
+          </Grid.Col>
+          <Grid.Col md={6} xl={4}>
+            <Card
+              title="Card yellow"
+              isCollapsible
+              isClosable
+              statusColor="yellow"
+              body="Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+            Aperiam deleniti fugit incidunt, iste, itaque minima neque
+            pariatur perferendis sed suscipit velit vitae voluptatem. A
+            consequuntur, deserunt eaque error nulla temporibus!"
+            />
+          </Grid.Col>
+          <Grid.Col md={6} xl={4}>
+            <Card
+              title="Card teal"
+              isCollapsible
+              isClosable
+              statusColor="teal"
+              body="Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+            Aperiam deleniti fugit incidunt, iste, itaque minima neque
+            pariatur perferendis sed suscipit velit vitae voluptatem. A
+            consequuntur, deserunt eaque error nulla temporibus!"
+            />
+          </Grid.Col>
+          <Grid.Col md={6} xl={4}>
+            <Card
+              title="Card purple"
+              isCollapsible
+              isClosable
+              statusColor="purple"
+              body="Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+            Aperiam deleniti fugit incidunt, iste, itaque minima neque
+            pariatur perferendis sed suscipit velit vitae voluptatem. A
+            consequuntur, deserunt eaque error nulla temporibus!"
+            />
+          </Grid.Col>
+          <Grid.Col md={6} xl={4}>
+            <Card
+              title="Card status on left side"
+              isCollapsible
+              isClosable
+              statusColor="blue"
+              statusSide
+              body="Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+            Aperiam deleniti fugit incidunt, iste, itaque minima neque
+            pariatur perferendis sed suscipit velit vitae voluptatem. A
+            consequuntur, deserunt eaque error nulla temporibus!"
+            />
+          </Grid.Col>
+          <Grid.Col md={6} xl={4}>
+            <Card
+              isCollapsed
+              isCollapsible
+              isClosable
+              title="Initial isCollapsibled card"
+              body="Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+            Aperiam deleniti fugit incidunt, iste, itaque minima neque
+            pariatur perferendis sed suscipit velit vitae voluptatem. A
+            consequuntur, deserunt eaque error nulla temporibus!"
+            />
+          </Grid.Col>
+          <Grid.Col md={6} xl={4}>
+            <Card
+              isFullscreenable
+              isClosable
+              isCollapsible
+              title="With additional fullscreen button"
+              body="Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+            Aperiam deleniti fugit incidunt, iste, itaque minima neque
+            pariatur perferendis sed suscipit velit vitae voluptatem. A
+            consequuntur, deserunt eaque error nulla temporibus!"
+            />
+          </Grid.Col>
+          <Grid.Col lg={6}>
+            <Card>
+              <Card.Header>
+                <Card.Title>Panel with custom buttons</Card.Title>
+                <Card.Options>
+                  <Button RootComponent="a" color="primary" size="sm">
+                    Action 1
+                  </Button>
+                  <Button
+                    RootComponent="a"
+                    color="secondary"
+                    size="sm"
+                    className="ml-2"
+                  >
+                    Action 2
+                  </Button>
+                </Card.Options>
+              </Card.Header>
+              <Card.Body>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+                Aperiam deleniti fugit incidunt, iste, itaque minima neque
+                pariatur perferendis sed suscipit velit vitae voluptatem. A
+                consequuntur, deserunt eaque error nulla temporibus!
+              </Card.Body>
+            </Card>
+          </Grid.Col>
+          <Grid.Col lg={6}>
+            <Card>
+              <Card.Header>
+                <Card.Title>Card with search form</Card.Title>
+                <Card.Options>
+                  <Form>
+                    <Form.InputGroup>
+                      <Form.Input
+                        className="form-control-sm"
+                        placeholder="Search something..."
+                        name="s"
+                      />
+                      <span className="input-group-btn ml-2">
+                        <Button
+                          size="sm"
+                          color="default"
+                          type="submit"
+                          icon="search"
+                        />
+                      </span>
+                    </Form.InputGroup>
+                  </Form>
+                </Card.Options>
+              </Card.Header>
+              <Card.Body>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+                Aperiam deleniti fugit incidunt, iste, itaque minima neque
+                pariatur perferendis sed suscipit velit vitae voluptatem. A
+                consequuntur, deserunt eaque error nulla temporibus!
+              </Card.Body>
+            </Card>
+          </Grid.Col>
+          <Grid.Col lg={6} xl={4}>
+            <Card title="Card with alert" isClosable isCollapsible>
+              <Card.Alert color="success">
+                Adding action was successful
+              </Card.Alert>
+              <Card.Body>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+                Aperiam deleniti fugit incidunt, iste, itaque minima neque
+                pariatur perferendis sed suscipit velit vitae voluptatem. A
+                consequuntur, deserunt eaque error nulla temporibus!
+              </Card.Body>
+            </Card>
+          </Grid.Col>
+          <Grid.Col lg={6} xl={4}>
+            <Card
+              alert="Adding action failed"
+              alertColor="danger"
+              title="Card with alert"
+              isCollapsible
+              isClosable
+              body="Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+            Aperiam deleniti fugit incidunt, iste, itaque minima neque
+            pariatur perferendis sed suscipit velit vitae voluptatem. A
+            consequuntur, deserunt eaque error nulla temporibus!"
+            />
+          </Grid.Col>
+          <Grid.Col lg={6} xl={4}>
+            <Card>
+              <Card.Header>
+                <Card.Title>Card with switch</Card.Title>
+                <Card.Options>
+                  <Form.Switch value="1" className="m-0" />
+                </Card.Options>
+              </Card.Header>
+              <Card.Body>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+                Aperiam deleniti fugit incidunt, iste, itaque minima neque
+                pariatur perferendis sed suscipit velit vitae voluptatem. A
+                consequuntur, deserunt eaque error nulla temporibus!
+              </Card.Body>
+            </Card>
+          </Grid.Col>
+          <Grid.Col lg={6} xl={4}>
+            <Card title="Card with loader" isClosable isCollapsible>
+              <Card.Body>
+                <Dimmer active loader>
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+                  Aperiam deleniti fugit incidunt, iste, itaque minima neque
+                  pariatur perferendis sed suscipit velit vitae voluptatem. A
+                  consequuntur, deserunt eaque error nulla temporibus!
+                </Dimmer>
+              </Card.Body>
+            </Card>
+          </Grid.Col>
+        </Grid.Row>
+      </Page.Content>
+    </SiteWrapper>
+  );
+}
+
+export default CardsDesignPage;

resources/js/interface/ChartsPage.react.js

@@ -0,0 +1,619 @@
+// @flow
+
+import * as React from "react";
+
+import { Page, Grid, Card, colors } from "tabler-react";
+
+import C3Chart from "react-c3js";
+
+import SiteWrapper from "../SiteWrapper.react";
+function ChartsPage(): React.Node {
+  const cards = [
+    {
+      title: "Employment Growth",
+      data: {
+        columns: [
+          // each columns data
+          ["data1", 2, 8, 6, 7, 14, 11],
+          ["data2", 5, 15, 11, 15, 21, 25],
+          ["data3", 17, 18, 21, 20, 30, 29],
+        ],
+        type: "line", // default type of chart
+        colors: {
+          data1: colors.orange,
+          data2: colors.blue,
+          data3: colors.green,
+        },
+        names: {
+          // name of each serie
+          data1: "Development",
+          data2: "Marketing",
+          data3: "Sales",
+        },
+      },
+      axis: {
+        x: {
+          type: "category",
+          // name of each category
+          categories: ["2013", "2014", "2015", "2016", "2017", "2018"],
+        },
+      },
+    },
+    {
+      title: "Monthly Average Temperature",
+      data: {
+        columns: [
+          // each columns data
+          [
+            "data1",
+            7.0,
+            6.9,
+            9.5,
+            14.5,
+            18.4,
+            21.5,
+            25.2,
+            26.5,
+            23.3,
+            18.3,
+            13.9,
+            9.6,
+          ],
+          [
+            "data2",
+            3.9,
+            4.2,
+            5.7,
+            8.5,
+            11.9,
+            15.2,
+            17.0,
+            16.6,
+            14.2,
+            10.3,
+            6.6,
+            4.8,
+          ],
+        ],
+        labels: true,
+        type: "line", // default type of chart
+        colors: {
+          data1: colors.blue,
+          data2: colors.green,
+        },
+        names: {
+          // name of each serie
+          data1: "Tokyo",
+          data2: "London",
+        },
+      },
+      axis: {
+        x: {
+          type: "category",
+          // name of each category
+          categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
+        },
+      },
+    },
+    {
+      title: "Lorem ipsum",
+      data: {
+        columns: [
+          // each columns data
+          ["data1", 11, 8, 15, 18, 19, 17],
+          ["data2", 7, 7, 5, 7, 9, 12],
+        ],
+        type: "area", // default type of chart
+        colors: {
+          data1: colors["blue"],
+          data2: colors["pink"],
+        },
+        names: {
+          // name of each serie
+          data1: "Maximum",
+          data2: "Minimum",
+        },
+      },
+      axis: {
+        x: {
+          type: "category",
+          // name of each category
+          categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
+        },
+      },
+    },
+    {
+      title: "Lorem ipsum",
+      data: {
+        columns: [
+          // each columns data
+          ["data1", 11, 8, 15, 18, 19, 17],
+          ["data2", 7, 7, 5, 7, 9, 12],
+        ],
+        type: "area-spline", // default type of chart
+        colors: {
+          data1: colors["blue"],
+          data2: colors["pink"],
+        },
+        names: {
+          // name of each serie
+          data1: "Maximum",
+          data2: "Minimum",
+        },
+      },
+      axis: {
+        x: {
+          type: "category",
+          // name of each category
+          categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
+        },
+      },
+    },
+    {
+      title: "Lorem ipsum",
+      data: {
+        columns: [
+          // each columns data
+          ["data1", 11, 8, 15, 18, 19, 17],
+          ["data2", 7, 7, 5, 7, 9, 12],
+        ],
+        type: "area-spline", // default type of chart
+        groups: [["data1", "data2"]],
+        colors: {
+          data1: colors["blue"],
+          data2: colors["pink"],
+        },
+        names: {
+          // name of each serie
+          data1: "Maximum",
+          data2: "Minimum",
+        },
+      },
+      axis: {
+        x: {
+          type: "category",
+          // name of each category
+          categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
+        },
+      },
+    },
+    {
+      title: "Wind speed during 2 days",
+      data: {
+        columns: [
+          // each columns data
+          [
+            "data1",
+            0.2,
+            0.8,
+            0.8,
+            0.8,
+            1,
+            1.3,
+            1.5,
+            2.9,
+            1.9,
+            2.6,
+            1.6,
+            3,
+            4,
+            3.6,
+            4.5,
+            4.2,
+            4.5,
+            4.5,
+            4,
+            3.1,
+            2.7,
+            4,
+            2.7,
+            2.3,
+            2.3,
+            4.1,
+            7.7,
+            7.1,
+            5.6,
+            6.1,
+            5.8,
+            8.6,
+            7.2,
+            9,
+            10.9,
+            11.5,
+            11.6,
+            11.1,
+            12,
+            12.3,
+            10.7,
+            9.4,
+            9.8,
+            9.6,
+            9.8,
+            9.5,
+            8.5,
+            7.4,
+            7.6,
+          ],
+          [
+            "data2",
+            0,
+            0,
+            0.6,
+            0.9,
+            0.8,
+            0.2,
+            0,
+            0,
+            0,
+            0.1,
+            0.6,
+            0.7,
+            0.8,
+            0.6,
+            0.2,
+            0,
+            0.1,
+            0.3,
+            0.3,
+            0,
+            0.1,
+            0,
+            0,
+            0,
+            0.2,
+            0.1,
+            0,
+            0.3,
+            0,
+            0.1,
+            0.2,
+            0.1,
+            0.3,
+            0.3,
+            0,
+            3.1,
+            3.1,
+            2.5,
+            1.5,
+            1.9,
+            2.1,
+            1,
+            2.3,
+            1.9,
+            1.2,
+            0.7,
+            1.3,
+            0.4,
+            0.3,
+          ],
+        ],
+        labels: true,
+        type: "spline", // default type of chart
+        colors: {
+          data1: colors["blue"],
+          data2: colors["green"],
+        },
+        names: {
+          // name of each serie
+          data1: "Hestavollane",
+          data2: "Vik",
+        },
+      },
+      axis: {
+        x: {
+          type: "category",
+          // name of each category
+          categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
+        },
+      },
+    },
+    {
+      title: "Lorem ipsum",
+      data: {
+        columns: [
+          // each columns data
+          ["data1", 11, 8, 15, 18, 19, 17],
+          ["data2", 7, 7, 5, 7, 9, 12],
+        ],
+        type: "spline", // default type of chart
+        colors: {
+          data1: colors["blue"],
+          data2: colors["pink"],
+        },
+        names: {
+          // name of each serie
+          data1: "Maximum",
+          data2: "Minimum",
+        },
+      },
+      axis: {
+        x: {
+          type: "category",
+          // name of each category
+          categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
+        },
+        rotated: true,
+      },
+    },
+    {
+      title: "Lorem ipsum",
+      data: {
+        columns: [
+          // each columns data
+          ["data1", 11, 8, 15, 18, 19, 17],
+          ["data2", 7, 7, 5, 7, 9, 12],
+        ],
+        type: "step", // default type of chart
+        colors: {
+          data1: colors["blue"],
+          data2: colors["pink"],
+        },
+        names: {
+          // name of each serie
+          data1: "Maximum",
+          data2: "Minimum",
+        },
+      },
+      axis: {
+        x: {
+          type: "category",
+          // name of each category
+          categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
+        },
+      },
+    },
+    {
+      title: "Lorem ipsum",
+      data: {
+        columns: [
+          // each columns data
+          ["data1", 11, 8, 15, 18, 19, 17],
+          ["data2", 7, 7, 5, 7, 9, 12],
+        ],
+        type: "area-step", // default type of chart
+        colors: {
+          data1: colors["blue"],
+          data2: colors["pink"],
+        },
+        names: {
+          // name of each serie
+          data1: "Maximum",
+          data2: "Minimum",
+        },
+      },
+      axis: {
+        x: {
+          type: "category",
+          // name of each category
+          categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
+        },
+      },
+    },
+    {
+      title: "Lorem ipsum",
+      data: {
+        columns: [
+          // each columns data
+          ["data1", 11, 8, 15, 18, 19, 17],
+          ["data2", 7, 7, 5, 7, 9, 12],
+        ],
+        type: "bar", // default type of chart
+        colors: {
+          data1: colors["blue"],
+          data2: colors["pink"],
+        },
+        names: {
+          // name of each serie
+          data1: "Maximum",
+          data2: "Minimum",
+        },
+      },
+      axis: {
+        x: {
+          type: "category",
+          // name of each category
+          categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
+        },
+      },
+    },
+    {
+      title: "Lorem ipsum",
+      data: {
+        columns: [
+          // each columns data
+          ["data1", 11, 8, 15, 18, 19, 17],
+          ["data2", 7, 7, 5, 7, 9, 12],
+        ],
+        type: "bar", // default type of chart
+        colors: {
+          data1: colors["blue"],
+          data2: colors["pink"],
+        },
+        names: {
+          // name of each serie
+          data1: "Maximum",
+          data2: "Minimum",
+        },
+      },
+      axis: {
+        x: {
+          type: "category",
+          // name of each category
+          categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
+        },
+        rotated: true,
+      },
+    },
+    {
+      title: "Lorem ipsum",
+      data: {
+        columns: [
+          // each columns data
+          ["data1", 11, 8, 15, 18, 19, 17],
+          ["data2", 7, 7, 5, 7, 9, 12],
+        ],
+        type: "bar", // default type of chart
+        groups: [["data1", "data2"]],
+        colors: {
+          data1: colors["blue"],
+          data2: colors["pink"],
+        },
+        names: {
+          // name of each serie
+          data1: "Maximum",
+          data2: "Minimum",
+        },
+      },
+      axis: {
+        x: {
+          type: "category",
+          // name of each category
+          categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
+        },
+      },
+    },
+    {
+      title: "Lorem ipsum",
+      data: {
+        columns: [
+          // each columns data
+          ["data1", 63],
+          ["data2", 44],
+          ["data3", 12],
+          ["data4", 14],
+        ],
+        type: "pie", // default type of chart
+        colors: {
+          data1: colors["blue-darker"],
+          data2: colors["blue"],
+          data3: colors["blue-light"],
+          data4: colors["blue-lighter"],
+        },
+        names: {
+          // name of each serie
+          data1: "A",
+          data2: "B",
+          data3: "C",
+          data4: "D",
+        },
+      },
+      axis: {},
+    },
+    {
+      title: "Lorem ipsum",
+      data: {
+        columns: [
+          // each columns data
+          ["data1", 63],
+          ["data2", 37],
+        ],
+        type: "donut", // default type of chart
+        colors: {
+          data1: colors["green"],
+          data2: colors["green-light"],
+        },
+        names: {
+          // name of each serie
+          data1: "Maximum",
+          data2: "Minimum",
+        },
+      },
+      axis: {},
+    },
+    {
+      title: "Lorem ipsum",
+      data: {
+        columns: [
+          // each columns data
+          ["data1", 11, 8, 15, 18, 19, 17],
+          ["data2", 7, 7, 5, 7, 9, 12],
+        ],
+        type: "scatter", // default type of chart
+        colors: {
+          data1: colors["blue"],
+          data2: colors["pink"],
+        },
+        names: {
+          // name of each serie
+          data1: "Maximum",
+          data2: "Minimum",
+        },
+      },
+      axis: {
+        x: {
+          type: "category",
+          // name of each category
+          categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
+        },
+      },
+    },
+    {
+      title: "Lorem ipsum",
+      data: {
+        columns: [
+          // each columns data
+          ["data1", 30, 20, 50, 40, 60, 50],
+          ["data2", 200, 130, 90, 240, 130, 220],
+          ["data3", 300, 200, 160, 400, 250, 250],
+          ["data4", 200, 130, 90, 240, 130, 220],
+        ],
+        type: "bar", // default type of chart
+        types: {
+          data2: "line",
+          data3: "spline",
+        },
+        groups: [["data1", "data4"]],
+        colors: {
+          data1: colors["green"],
+          data2: colors["pink"],
+          data3: colors["green"],
+          data4: colors["blue"],
+        },
+        names: {
+          // name of each serie
+          data1: "Development",
+          data2: "Marketing",
+          data3: "Sales",
+          data4: "Sales",
+        },
+      },
+      axis: {
+        x: {
+          type: "category",
+          // name of each category
+          categories: ["2013", "2014", "2015", "2016", "2017", "2018"],
+        },
+      },
+    },
+  ];
+
+  return (
+    <SiteWrapper>
+      <Page.Content>
+        <Grid.Row>
+          {cards.map((chart, i) => (
+            <Grid.Col key={i} md={6} xl={4}>
+              <Card title={chart.title}>
+                <Card.Body>
+                  <C3Chart
+                    data={chart.data}
+                    axis={chart.axis}
+                    legend={{
+                      show: false, //hide legend
+                    }}
+                    padding={{
+                      bottom: 0,
+                      top: 0,
+                    }}
+                  />
+                </Card.Body>
+              </Card>
+            </Grid.Col>
+          ))}
+        </Grid.Row>
+      </Page.Content>
+    </SiteWrapper>
+  );
+}
+
+export default ChartsPage;

resources/js/interface/PricingCardsPage.react.js

@@ -0,0 +1,123 @@
+// @flow
+
+import * as React from "react";
+
+import { Page, Grid, PricingCard } from "tabler-react";
+
+import SiteWrapper from "../SiteWrapper.react";
+
+function PricingCardsPage(): React.Node {
+  return (
+    <SiteWrapper>
+      <Page.Content title="Pricing cards">
+        <Grid.Row>
+          <Grid.Col sm={6} lg={3}>
+            <PricingCard>
+              <PricingCard.Category>{"Free"}</PricingCard.Category>
+              <PricingCard.Price>{"$0"} </PricingCard.Price>
+              <PricingCard.AttributeList>
+                <PricingCard.AttributeItem>
+                  <strong>3 </strong>
+                  {"Users"}
+                </PricingCard.AttributeItem>
+                <PricingCard.AttributeItem hasIcon available>
+                  {"Sharing Tools"}
+                </PricingCard.AttributeItem>
+                <PricingCard.AttributeItem hasIcon available={false}>
+                  {"Design Tools"}
+                </PricingCard.AttributeItem>
+                <PricingCard.AttributeItem hasIcon available={false}>
+                  {"Private Messages"}
+                </PricingCard.AttributeItem>
+                <PricingCard.AttributeItem hasIcon available={false}>
+                  {"Twitter API"}
+                </PricingCard.AttributeItem>
+              </PricingCard.AttributeList>
+              <PricingCard.Button> {"Choose plan"} </PricingCard.Button>
+            </PricingCard>
+          </Grid.Col>
+
+          <Grid.Col sm={6} lg={3}>
+            <PricingCard active>
+              <PricingCard.Category>{"Premium"}</PricingCard.Category>
+              <PricingCard.Price>{"$49"} </PricingCard.Price>
+              <PricingCard.AttributeList>
+                <PricingCard.AttributeItem>
+                  <strong>10 </strong>
+                  {"Users"}
+                </PricingCard.AttributeItem>
+                <PricingCard.AttributeItem hasIcon available>
+                  {"Sharing Tools"}
+                </PricingCard.AttributeItem>
+                <PricingCard.AttributeItem hasIcon available>
+                  {"Design Tools"}
+                </PricingCard.AttributeItem>
+                <PricingCard.AttributeItem hasIcon available={false}>
+                  {"Private Messages"}
+                </PricingCard.AttributeItem>
+                <PricingCard.AttributeItem hasIcon available={false}>
+                  {"Twitter API"}
+                </PricingCard.AttributeItem>
+              </PricingCard.AttributeList>
+              <PricingCard.Button active>{"Choose plan"} </PricingCard.Button>
+            </PricingCard>
+          </Grid.Col>
+
+          <Grid.Col sm={6} lg={3}>
+            <PricingCard>
+              <PricingCard.Category>{"Enterprise"}</PricingCard.Category>
+              <PricingCard.Price>{"$99"} </PricingCard.Price>
+              <PricingCard.AttributeList>
+                <PricingCard.AttributeItem>
+                  <strong>100 </strong>
+                  {"Users"}
+                </PricingCard.AttributeItem>
+                <PricingCard.AttributeItem hasIcon available>
+                  {"Sharing Tools"}
+                </PricingCard.AttributeItem>
+                <PricingCard.AttributeItem hasIcon available>
+                  {"Design Tools"}
+                </PricingCard.AttributeItem>
+                <PricingCard.AttributeItem hasIcon available>
+                  {"Private Messages"}
+                </PricingCard.AttributeItem>
+                <PricingCard.AttributeItem hasIcon available={false}>
+                  {"Twitter API"}
+                </PricingCard.AttributeItem>
+              </PricingCard.AttributeList>
+              <PricingCard.Button>{"Choose plan"} </PricingCard.Button>
+            </PricingCard>
+          </Grid.Col>
+
+          <Grid.Col sm={6} lg={3}>
+            <PricingCard>
+              <PricingCard.Category>{"Unlimited"}</PricingCard.Category>
+              <PricingCard.Price>{"$139"} </PricingCard.Price>
+              <PricingCard.AttributeList>
+                <PricingCard.AttributeItem>
+                  <strong>Unlimited </strong>
+                  {"Users"}
+                </PricingCard.AttributeItem>
+                <PricingCard.AttributeItem hasIcon available>
+                  {"Sharing Tools"}
+                </PricingCard.AttributeItem>
+                <PricingCard.AttributeItem hasIcon available>
+                  {"Design Tools"}
+                </PricingCard.AttributeItem>
+                <PricingCard.AttributeItem hasIcon available>
+                  {"Private Messages"}
+                </PricingCard.AttributeItem>
+                <PricingCard.AttributeItem hasIcon available>
+                  {"Twitter API"}
+                </PricingCard.AttributeItem>
+              </PricingCard.AttributeList>
+              <PricingCard.Button>{"Choose plan"} </PricingCard.Button>
+            </PricingCard>
+          </Grid.Col>
+        </Grid.Row>
+      </Page.Content>
+    </SiteWrapper>
+  );
+}
+
+export default PricingCardsPage;

resources/js/pages/400.react.js

@@ -0,0 +1,13 @@
+// @flow
+
+import * as React from "react";
+
+import { Error400Page } from "tabler-react";
+
+type Props = {||};
+
+function Error400(props: Props): React.Node {
+  return <Error400Page />;
+}
+
+export default Error400;

resources/js/pages/401.react.js

@@ -0,0 +1,13 @@
+// @flow
+
+import * as React from "react";
+
+import { Error401Page } from "tabler-react";
+
+type Props = {||};
+
+function Error401(props: Props): React.Node {
+  return <Error401Page />;
+}
+
+export default Error401;

resources/js/pages/403.react.js

@@ -0,0 +1,13 @@
+// @flow
+
+import * as React from "react";
+
+import { Error403Page } from "tabler-react";
+
+type Props = {||};
+
+function Error403(props: Props): React.Node {
+  return <Error403Page />;
+}
+
+export default Error403;

resources/js/pages/404.react.js

@@ -0,0 +1,13 @@
+// @flow
+
+import * as React from "react";
+
+import { Error404Page } from "tabler-react";
+
+type Props = {||};
+
+function Error404(props: Props): React.Node {
+  return <Error404Page />;
+}
+
+export default Error404;

resources/js/pages/500.react.js

@@ -0,0 +1,13 @@
+// @flow
+
+import * as React from "react";
+
+import { Error500Page } from "tabler-react";
+
+type Props = {||};
+
+function Error500(props: Props): React.Node {
+  return <Error500Page />;
+}
+
+export default Error500;

resources/js/pages/503.react.js

@@ -0,0 +1,13 @@
+// @flow
+
+import * as React from "react";
+
+import { Error503Page } from "tabler-react";
+
+type Props = {||};
+
+function Error503(props: Props): React.Node {
+  return <Error503Page />;
+}
+
+export default Error503;

resources/js/pages/Email.react.js

@@ -0,0 +1,130 @@
+// @flow
+
+import React from "react";
+import {
+  Page,
+  Grid,
+  Badge,
+  Button,
+  Card,
+  Container,
+  List,
+  Form,
+} from "tabler-react";
+import SiteWrapper from "../SiteWrapper.react";
+
+function Email() {
+  return (
+    <SiteWrapper>
+      <div className="my-3 my-md-5">
+        <Container>
+          <Grid.Row>
+            <Grid.Col md={3}>
+              <Page.Title className="mb-5">Mail Service</Page.Title>
+              <div>
+                <List.Group transparent={true}>
+                  <List.GroupItem
+                    className="d-flex align-items-center"
+                    to="/email"
+                    icon="inbox"
+                    active
+                  >
+                    Inbox
+                    <Badge className="ml-auto">14</Badge>
+                  </List.GroupItem>
+                  <List.GroupItem
+                    to="/email"
+                    className="d-flex align-items-center"
+                    icon="send"
+                  >
+                    Sent Mail
+                  </List.GroupItem>
+                  <List.GroupItem
+                    to="/email"
+                    className="d-flex align-items-center"
+                    icon="alert-circle"
+                  >
+                    Important{" "}
+                    <Badge className="ml-auto badge badge-secondary">3</Badge>
+                  </List.GroupItem>
+                  <List.GroupItem
+                    to="/email"
+                    className="d-flex align-items-center"
+                    icon="star"
+                  >
+                    Starred
+                  </List.GroupItem>
+                  <List.GroupItem
+                    to="/email"
+                    className="d-flex align-items-center"
+                    icon="file"
+                  >
+                    Drafts
+                  </List.GroupItem>
+                  <List.GroupItem
+                    to="/email"
+                    className="d-flex align-items-center"
+                    icon="tag"
+                  >
+                    Tags
+                  </List.GroupItem>
+                  <List.GroupItem
+                    to="/email"
+                    className="d-flex align-items-center"
+                    icon="trash-2"
+                  >
+                    Trash
+                  </List.GroupItem>
+                </List.Group>
+                <div className="mt-6">
+                  <Button
+                    RootComponent="a"
+                    href="/email"
+                    block={true}
+                    color="secondary"
+                  >
+                    Compose new Email
+                  </Button>
+                </div>
+              </div>
+            </Grid.Col>
+            <Grid.Col md={9}>
+              <Card>
+                <Card.Header>
+                  <Card.Title>Compose new message</Card.Title>
+                </Card.Header>
+                <Card.Body>
+                  <Form>
+                    <Form.Group>
+                      <Grid.Row className="align-items-center">
+                        <Grid.Col sm={2}>To:</Grid.Col>
+                        <Grid.Col sm={10}>
+                          <Form.Input type="text" />
+                        </Grid.Col>
+                      </Grid.Row>
+                    </Form.Group>
+                    <Form.Group>
+                      <Grid.Row className="align-items-center">
+                        <Grid.Col sm={2}>Subject:</Grid.Col>
+                        <Grid.Col sm={10}>
+                          <Form.Input type="text" />
+                        </Grid.Col>
+                      </Grid.Row>
+                    </Form.Group>
+                    <Form.Textarea rows={10} />
+                    <Button.List className="mt-4" align="right">
+                      <Button color="secondary">Cancel</Button>
+                      <Button color="primary">Send message</Button>
+                    </Button.List>
+                  </Form>
+                </Card.Body>
+              </Card>
+            </Grid.Col>
+          </Grid.Row>
+        </Container>
+      </div>
+    </SiteWrapper>
+  );
+}
+
+export default Email;

resources/js/pages/Empty.react.js

@@ -0,0 +1,11 @@
+// @flow
+
+import React from "react";
+
+import SiteWrapper from "../SiteWrapper.react";
+
+function Empty() {
+  return <SiteWrapper> </SiteWrapper>;
+}
+
+export default Empty;

resources/js/pages/ForgotPasswordPage.react.js

@@ -0,0 +1,13 @@
+// @flow
+
+import * as React from "react";
+
+import { ForgotPasswordPage as TablerForgotPasswordPage } from "tabler-react";
+
+type Props = {||};
+
+function ForgotPasswordPage(props: Props): React.Node {
+  return <TablerForgotPasswordPage />;
+}
+
+export default ForgotPasswordPage;

resources/js/pages/LoginPage.react.js

@@ -0,0 +1,56 @@
+// @flow
+
+import * as React from "react";
+import { Formik } from "formik";
+import { LoginPage as TablerLoginPage } from "tabler-react";
+
+type Props = {||};
+
+function LoginPage(props: Props): React.Node {
+  return (
+    <Formik
+      initialValues={{
+        email: "",
+        password: "",
+      }}
+      validate={values => {
+        // same as above, but feel free to move this into a class method now.
+        let errors = {};
+        if (!values.email) {
+          errors.email = "Required";
+        } else if (
+          !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)
+        ) {
+          errors.email = "Invalid email address";
+        }
+        return errors;
+      }}
+      onSubmit={(
+        values,
+        { setSubmitting, setErrors /* setValues and other goodies */ }
+      ) => {
+        alert("Done!");
+      }}
+      render={({
+        values,
+        errors,
+        touched,
+        handleChange,
+        handleBlur,
+        handleSubmit,
+        isSubmitting,
+      }) => (
+        <TablerLoginPage
+          onSubmit={handleSubmit}
+          onChange={handleChange}
+          onBlur={handleBlur}
+          values={values}
+          errors={errors}
+          touched={touched}
+        />
+      )}
+    />
+  );
+}
+
+export default LoginPage;

resources/js/pages/ProfilePage.react.js

@@ -0,0 +1,260 @@
+// @flow
+
+import React from "react";
+
+import {
+  Container,
+  Grid,
+  Card,
+  Button,
+  Form,
+  Avatar,
+  Profile,
+  List,
+  Media,
+  Text,
+  Comment,
+} from "tabler-react";
+
+import SiteWrapper from "../SiteWrapper.react";
+
+function ProfilePage() {
+  return (
+    <SiteWrapper>
+      <div className="my-3 my-md-5">
+        <Container>
+          <Grid.Row>
+            <Grid.Col lg={4}>
+              <Profile
+                name="Peter Richards"
+                backgroundURL="demo/photos/eberhard-grossgasteiger-311213-500.jpg"
+                avatarURL="demo/faces/male/16.jpg"
+                twitterURL="test"
+              >
+                Big belly rude boy, million dollar hustler. Unemployed.
+              </Profile>
+              <Card>
+                <Card.Body>
+                  <Media>
+                    <Avatar
+                      size="xxl"
+                      className="mr-5"
+                      imageURL="demo/faces/male/21.jpg"
+                    />
+                    <Media.BodySocial
+                      name="Juan Hernandez"
+                      workTitle="Webdeveloper"
+                      facebook="Facebook"
+                      twitter="Twitter"
+                      phone="1234567890"
+                      skype="@skypename"
+                    />
+                  </Media>
+                </Card.Body>
+              </Card>
+              <Card>
+                <Card.Header>
+                  <Card.Title>My Profile</Card.Title>
+                </Card.Header>
+                <Card.Body>
+                  <Form>
+                    <Grid.Row>
+                      <Grid.Col auto>
+                        <Avatar size="xl" imageURL="demo/faces/female/9.jpg" />
+                      </Grid.Col>
+                      <Grid.Col>
+                        <Form.Group>
+                          <Form.Label>Email-Address</Form.Label>
+                          <Form.Input placeholder="your-email@domain.com" />
+                        </Form.Group>
+                      </Grid.Col>
+                    </Grid.Row>
+                    <Form.Group>
+                      <Form.Label>Bio</Form.Label>
+                      <Form.Textarea rows={5}>
+                        Big belly rude boy, million dollar hustler. Unemployed.
+                      </Form.Textarea>
+                    </Form.Group>
+                    <Form.Group>
+                      <Form.Label>Email-Address</Form.Label>
+                      <Form.Input placeholder="your-email@domain.com" />
+                    </Form.Group>
+                    <Form.Group>
+                      <Form.Label>Password</Form.Label>
+                      <Form.Input type="password" value="Password" />
+                    </Form.Group>
+                    <Form.Footer>
+                      <Button color="primary" block>
+                        Save
+                      </Button>
+                    </Form.Footer>
+                  </Form>
+                </Card.Body>
+              </Card>
+            </Grid.Col>
+            <Grid.Col lg={8}>
+              <Card>
+                <Card.Header>
+                  <Form.InputGroup>
+                    <Form.Input type="text" placeholder="Message" />
+                    <Form.InputGroup append>
+                      <Button icon="camera" color="secondary" />
+                    </Form.InputGroup>
+                  </Form.InputGroup>
+                </Card.Header>
+                <Comment.List>
+                  <Comment
+                    avatarURL="demo/faces/male/16.jpg"
+                    name="Peter Richards"
+                    date="4 min"
+                    text="Aenean lacinia bibendum nulla sed consectetur. Vestibulum id ligula porta felis euismod semper. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."
+                    replies={
+                      <React.Fragment>
+                        <Comment.Reply
+                          name="Debra Beck"
+                          avatarURL="demo/faces/female/17.jpg"
+                          text="Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis."
+                        />
+                        <Comment.Reply
+                          name="Jack Ruiz"
+                          avatarURL="demo/faces/male/32.jpg"
+                          text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus."
+                        />
+                      </React.Fragment>
+                    }
+                  />
+                  <Comment
+                    avatarURL="demo/faces/male/16.jpg"
+                    date="12 min"
+                    name="Peter Richards"
+                    text="Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis."
+                  />
+                  <Comment
+                    avatarURL="demo/faces/male/16.jpg"
+                    date="34 min"
+                    name="Peter Richards"
+                    text="Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui."
+                    replies={
+                      <Comment.Reply
+                        name="Wayne Holland"
+                        avatarURL="demo/faces/male/26.jpg"
+                        text=" Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis."
+                      />
+                    }
+                  />
+                </Comment.List>
+              </Card>
+              <Form className="card">
+                <Card.Body>
+                  <Card.Title>Edit Profile</Card.Title>
+                  <Grid.Row>
+                    <Grid.Col md={5}>
+                      <Form.Group>
+                        <Form.Label>Company</Form.Label>
+                        <Form.Input
+                          type="text"
+                          disabled
+                          placeholder="Company"
+                          value="Creative Code Inc."
+                        />
+                      </Form.Group>
+                    </Grid.Col>
+                    <Grid.Col sm={6} md={3}>
+                      <Form.Group>
+                        <Form.Label>Username</Form.Label>
+                        <Form.Input
+                          type="text"
+                          placeholder="Username"
+                          value="michael23"
+                        />
+                      </Form.Group>
+                    </Grid.Col>
+                    <Grid.Col sm={6} md={4}>
+                      <Form.Group>
+                        <Form.Label>Email address</Form.Label>
+                        <Form.Input type="email" placeholder="Email" />
+                      </Form.Group>
+                    </Grid.Col>
+                    <Grid.Col sm={6} md={6}>
+                      <Form.Group>
+                        <Form.Label>First Name</Form.Label>
+                        <Form.Input
+                          type="text"
+                          placeholder="First Name"
+                          value="Chet"
+                        />
+                      </Form.Group>
+                    </Grid.Col>
+                    <Grid.Col sm={6} md={6}>
+                      <Form.Group>
+                        <Form.Label>Last Name</Form.Label>
+                        <Form.Input
+                          type="text"
+                          placeholder="Last Name"
+                          value="Faker"
+                        />
+                      </Form.Group>
+                    </Grid.Col>
+                    <Grid.Col md={12}>
+                      <Form.Group>
+                        <Form.Label>Address</Form.Label>
+                        <Form.Input
+                          type="text"
+                          placeholder="Home Address"
+                          value="Melbourne, Australia"
+                        />
+                      </Form.Group>
+                    </Grid.Col>
+                    <Grid.Col sm={6} md={4}>
+                      <Form.Group>
+                        <Form.Label>City</Form.Label>
+                        <Form.Input
+                          type="text"
+                          placeholder="City"
+                          value="Melbourne"
+                        />
+                      </Form.Group>
+                    </Grid.Col>
+                    <Grid.Col sm={6} md={3}>
+                      <Form.Group>
+                        <Form.Label>Postal Code</Form.Label>
+                        <Form.Input type="number" placeholder="ZIP Code" />
+                      </Form.Group>
+                    </Grid.Col>
+                    <Grid.Col md={5}>
+                      <Form.Group>
+                        <Form.Label>Country</Form.Label>
+                        <Form.Select>
+                          <option>Germany</option>
+                        </Form.Select>
+                      </Form.Group>
+                    </Grid.Col>
+                    <Grid.Col md={12}>
+                      <Form.Group className="mb=0" label="About Me">
+                        <Form.Textarea
+                          rows={5}
+                          placeholder="Here can be your description"
+                        >
+                          Oh so, your weak rhyme You doubt I'll bother, reading
+                          into it I'll probably won't, left to my own devices
+                          But that's the difference in our opinions.
+                        </Form.Textarea>
+                      </Form.Group>
+                    </Grid.Col>
+                  </Grid.Row>
+                </Card.Body>
+                <Card.Footer className="text-right">
+                  <Button type="submit" color="primary">
+                    Update Profile
+                  </Button>
+                </Card.Footer>
+              </Form>
+            </Grid.Col>
+          </Grid.Row>
+        </Container>
+      </div>
+    </SiteWrapper>
+  );
+}
+
+export default ProfilePage;

resources/js/pages/RegisterPage.react.js

@@ -0,0 +1,13 @@
+// @flow
+
+import * as React from "react";
+
+import { RegisterPage as TablerRegisterPage } from "tabler-react";
+
+type Props = {||};
+
+function RegisterPage(props: Props): React.Node {
+  return <TablerRegisterPage />;
+}
+
+export default RegisterPage;

resources/js/pages/index.js

@@ -0,0 +1,27 @@
+import ForgotPasswordPage from "./ForgotPasswordPage.react";
+import LoginPage from "./LoginPage.react";
+import RegisterPage from "./RegisterPage.react";
+import Empty from "./Empty.react";
+import Error400 from "./400.react";
+import Error401 from "./401.react";
+import Error403 from "./403.react";
+import Error404 from "./404.react";
+import Error500 from "./500.react";
+import Error503 from "./503.react";
+import Email from "./Email.react";
+import ProfilePage from "./ProfilePage.react";
+
+export {
+  ForgotPasswordPage,
+  LoginPage,
+  RegisterPage,
+  Error400,
+  Error401,
+  Error403,
+  Error404,
+  Error500,
+  Error503,
+  Empty,
+  Email,
+  ProfilePage,
+};