Initial setup with storybook

Author: styczynski

.babelrc

@@ -0,0 +1,18 @@
+{
+  "presets": [
+    ["@babel/preset-env", {"modules": false}],
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    "react-hot-loader/babel",
+    "@babel/plugin-syntax-dynamic-import"
+  ],
+  "env": {
+    "production": {
+      "presets": ["minify"]
+    },
+    "test": {
+      "presets": ["@babel/preset-env", "@babel/preset-react"]
+    }
+  }
+}

.storybook/addons.js

@@ -0,0 +1 @@
+import '@storybook/addon-storysource/register';

.storybook/config.js

@@ -0,0 +1,9 @@
+import { configure } from '@storybook/react';
+
+// automatically import all files ending in *.stories.js
+const req = require.context('../stories', true, /\.stories\.js$/);
+function loadStories() {
+  req.keys().forEach(filename => req(filename));
+}
+
+configure(loadStories, module);

.storybook/webpack.config.js

@@ -0,0 +1,21 @@
+// you can use this file to add your custom webpack plugins, loaders and anything you like.
+// This is just the basic way to add additional webpack configurations.
+// For more information refer the docs: https://storybook.js.org/configurations/custom-webpack-config
+
+// IMPORTANT
+// When you add this file, we won't add the default configurations which is similar
+// to "React Create App". This only has babel loader to load JavaScript.
+
+const common = require('../config/webpack/common.js');
+
+module.exports = Object.assign({}, common, {
+  module: Object.assign({}, common.module, {
+    rules: common.module.rules.concat([
+        {
+            test: /\.stories\.jsx?$/,
+            loaders: [require.resolve('@storybook/addon-storysource/loader')],
+            enforce: 'pre',
+        }
+    ]),
+  }),
+});

README.md

@@ -0,0 +1,69 @@
+require('typescript-require');
+
+// shared config (dev and prod)
+const path = require('path');
+const { CheckerPlugin } = require('awesome-typescript-loader');
+
+module.exports = {
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js', '.jsx', 'index.ts', 'index.tsx', 'index.js', 'index.jsx'],
+    alias: {
+      'scss': path.join(__dirname, '..', '..', 'src', 'scss'),
+      'components': path.join(__dirname, '..', '..', 'src', 'components', 'universal'),
+      'pages': path.join(__dirname, '..', '..', 'src', 'components', 'pages'),
+      'langs': path.join(__dirname, '..', '..', 'src', 'langs'),
+      'routes': path.join(__dirname, '..', '..', 'src', 'routes'),
+      'themes': path.join(__dirname, '..', '..', 'src', 'themes'),
+      'modules': path.join(__dirname, '..', '..', 'src', 'modules'),
+      'img': path.join(__dirname, '..', '..', 'src', 'assets', 'img')
+    }
+  },
+  context: path.resolve(__dirname, '../../src'),
+  module: {
+    rules: [
+      /*{
+        test: /\.ts|\.tsx$/,
+        enforce: 'pre',
+        use: [
+           {
+              loader: 'tslint-loader',
+              options: {
+                  configFile: 'tslint.json',
+                  typeCheck: true,
+                  tsConfigFile: 'tsconfig.json',
+                  emitErrors: true,
+                  failOnHint: true,
+                  fix: true
+              }
+           }
+        ]
+      },*/
+      {
+        test: /\.js$/,
+        use: ['babel-loader', 'source-map-loader'],
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.tsx?$/,
+        use: ['babel-loader', 'awesome-typescript-loader'],
+      },
+      {
+        test: /\.css$/,
+        use: ['style-loader', { loader: 'css-loader', options: { importLoaders: 1 } }],
+      },
+      {
+        test: /\.(jpe?g|png|gif|svg)$/i,
+        loaders: [
+          'file-loader?hash=sha512&digest=hex&name=img/[hash].[ext]',
+          'image-webpack-loader?bypassOnDebug&optipng.optimizationLevel=7&gifsicle.interlaced=false',
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new CheckerPlugin(),
+  ],
+  performance: {
+    hints: false,
+  },
+};

config/webpack/common.js

@@ -0,0 +1,28 @@
+// development config
+const merge = require('webpack-merge');
+const webpack = require('webpack');
+const commonConfig = require('./common');
+
+module.exports = merge(commonConfig, {
+  mode: 'development',
+  entry: [
+    'react-hot-loader/patch', // activate HMR for React
+    'webpack-dev-server/client?http://localhost:8080',// bundle the client for webpack-dev-server and connect to the provided endpoint
+    'webpack/hot/only-dev-server', // bundle the client for hot reloading, only- means to only hot reload for successful updates
+    './index.tsx' // the entry point of our app
+  ],
+  devServer: {
+    hot: true, // enable HMR on the server
+    inline: true,
+    disableHostCheck: true,
+    historyApiFallback: true
+  },
+  devtool: 'cheap-module-eval-source-map',
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(), // enable HMR globally
+    new webpack.NamedModulesPlugin(), // prints more readable module names in the browser console on HMR updates
+  ],
+  output: {
+    chunkFilename: '[name].bundle.js',
+  },
+});

config/webpack/dev.js

@@ -0,0 +1,22 @@
+// production config
+const merge = require('webpack-merge');
+const {resolve} = require('path');
+
+const TypedocWebpackPlugin = require('typedoc-webpack-plugin');
+
+const commonConfig = require('./common');
+
+module.exports = merge(commonConfig, {
+  mode: 'production',
+  entry: './index.tsx',
+  output: {
+    filename: 'js/bundle.[hash].min.js',
+    chunkFilename: '[name].bundle.js',
+    path: resolve(__dirname, '../../dist'),
+    publicPath: '/',
+  },
+  devtool: 'source-map',
+  plugins: [
+    
+  ],
+});

config/webpack/prod.js

@@ -0,0 +1,38 @@
+{
+  "name": "react-json-blinkforms",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "dependencies": {
+    "styled-components": "^4.2.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.2.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "@babel/preset-env": "^7.4.2",
+    "@babel/preset-react": "^7.0.0",
+    "@storybook/addon-actions": "^5.0.5",
+    "@storybook/addon-links": "^5.0.5",
+    "@storybook/addon-storysource": "^5.0.5",
+    "@storybook/addons": "^5.0.5",
+    "@storybook/react": "^5.0.5",
+    "@types/react": "^16.0.25",
+    "awesome-typescript-loader": "^5.0.0",
+    "babel-loader": "^8.0.5",
+    "css-loader": "^2.1.1",
+    "file-loader": "^3.0.1",
+    "image-webpack-loader": "^4.6.0",
+    "react-hot-loader": "^4.8.2",
+    "source-map-loader": "^0.2.4",
+    "style-loader": "^0.23.1",
+    "typescript": "^3.2.1",
+    "typescript-require": "^0.2.10"
+  },
+  "scripts": {
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT"
+}

package.json

@@ -0,0 +1,75 @@
+import * as React from "react";
+
+import {
+    FormContext,
+    Node,
+    NodeAny,
+    NodeOutputValue,
+    NodeSchema,
+    NodeState,
+} from "./schemaTypes";
+
+export type NodeS = {
+    [key: string]: NodeState<any>;
+};
+
+export type NodeO = {
+    [key: string]: NodeOutputValue<any>;
+};
+
+export type ChildrenMap<T> = {
+    [key: string]: T;
+};
+
+export abstract class CompositeNode<O, M extends NodeSchema> extends Node<NodeS, O, M> {
+
+    abstract getChildrenMapFromSchema(): ChildrenMap<NodeSchema>;
+
+    abstract getCompositeOutput(output: NodeO): NodeOutputValue<O>;
+
+    renderComposite(context: FormContext, children: ChildrenMap<React.ReactNode>): React.ReactNode {
+        return Object.values(children);
+    }
+
+    resolveInitialState() {
+        const initialState = {};
+        Object.keys(this.getChildrenMapFromSchema()).forEach(key => {
+            initialState[key] = null;
+        });
+        return initialState;
+    }
+
+    getRawOutput() {
+        const output = {};
+        Object.keys(this.getChildrenMapFromSchema()).forEach(key => {
+            output[key] = this.findChild(key).getOutput();
+        });
+        return this.getCompositeOutput(output);
+    }
+
+    onChildStateChanged(state: NodeState<any>, source: NodeAny, originalSource?: NodeAny) {
+        this.setState({
+            [source.getTag()]: state,
+        });
+    }
+
+    resolveChildren() {
+        const childrenMap: ChildrenMap<NodeSchema> = this.getChildrenMapFromSchema();
+
+        return Object.keys(childrenMap).map(key => {
+            const child = this.resolveNode(childrenMap[key], this, this.getConfig());
+            child.setTag(key);
+            return child;
+        });
+    }
+
+    render(context: FormContext): React.ReactNode {
+        const childrenMap: ChildrenMap<React.ReactNode> = {};
+
+        Object.keys(this.getChildrenMapFromSchema()).forEach((key: string, index: number) => {
+            childrenMap[key] = this.findChild(key).render(context);
+        });
+
+        return this.renderComposite(context, childrenMap);
+    }
+}

src/compositeNodes.tsx

@@ -0,0 +1,30 @@
+import { SchemaParserConfig } from "./schemaTypes";
+
+import ObjectDefault from "./renderers/ObjectDefault";
+import StringDefault from "./renderers/StringDefault";
+
+export const defaultParserConfig: SchemaParserConfig = {
+    handlers: {
+        ROOT: {
+            default: null,
+        },
+        STRING: {
+            default: StringDefault,
+        },
+        OBJECT: {
+            default: ObjectDefault,
+        },
+    },
+    rootState: null,
+    rootSetState: () => {},
+    rootSetContext: () => {},
+    rootModifyContext: () => {},
+    uidGenerator: null,
+    uidGeneratorFactory: () => {
+        let uid = 0;
+        return () => {
+            ++uid;
+            return uid;
+        };
+    },
+};