Merge pull request #9 from SimplrJS/feature/dom

DovydasNavickas · web-flow · commit e4a1f8cc18df · 2017-04-19T18:22:37.000+03:00
Feature/dom
diff --git a/packages/simplr-forms-core/package.json b/packages/simplr-forms-core/package.json
@@ -1,14 +1,14 @@
 {
   "name": "simplr-forms-core",
-  "version": "4.0.0-alpha",
+  "version": "4.0.0-pre-alpha.4",
   "description": "Shared simplr-forms logic.",
   "repository": "https://github.com/SimplrJS/simplr-forms",
   "main": "dist/simplr-forms-core.js",
   "types": "@types/index.d.ts",
   "scripts": {
-    "build": "webpack && npm run tslint-test",
+    "build": "webpack && npm run tslint",
     "watch": "webpack -w",
-    "tslint-test": "tslint --config ./tslint.json --project . --exclude __tests__/**/* && echo TsLint test successfully passed.",
+    "tslint": "tslint --config ./tslint.json --project . --exclude __tests__/**/* && echo TsLint test successfully passed.",
     "uglifyjs": "uglifyjs ./dist/simplr-forms-core.js -o ./dist/simplr-forms-core.min.js --compress --mangle",
     "release": "npm run build && npm run uglifyjs",
     "test": "jest",
diff --git a/packages/simplr-forms-core/src/abstractions/base-field.ts b/packages/simplr-forms-core/src/abstractions/base-field.ts
@@ -14,7 +14,7 @@ import * as ValueHelpers from "../utils/value-helpers";
 import { FormContextPropsObject } from "../contracts/form";
 import { FormStore } from "../stores/form-store";
 import { FormStoreStateRecord } from "../contracts/form-store";
-import * as FormStoreActions from "../actions/form-store-actions";
+import * as FormStoreActions from "../actions/form-store";
 // import { FieldsGroupContextProps } from "../contracts/fields-group";
 import { FSHContainer } from "../stores/form-stores-handler";
 
diff --git a/packages/simplr-forms-core/src/actions/form-store.ts b/packages/simplr-forms-core/src/actions/form-store.ts
diff --git a/packages/simplr-forms-core/src/actions/form-stores-handler.ts b/packages/simplr-forms-core/src/actions/form-stores-handler.ts
diff --git a/packages/simplr-forms-core/src/actions/index.ts b/packages/simplr-forms-core/src/actions/index.ts
@@ -1,2 +1,2 @@
-export * from "./form-store-actions";
-export * from "./form-stores-handler-actions";
+export * from "./form-store";
+export * from "./form-stores-handler";
diff --git a/packages/simplr-forms-core/src/stores/form-store.ts b/packages/simplr-forms-core/src/stores/form-store.ts
@@ -2,7 +2,7 @@ import * as Immutable from "immutable";
 import { recordify } from "typed-immutable-record";
 import { ActionEmitter } from "action-emitter";
 
-import * as Actions from "../actions/form-store-actions";
+import * as Actions from "../actions/form-store";
 import {
     FieldState,
     FieldValue,
diff --git a/packages/simplr-forms-core/src/stores/form-stores-handler.ts b/packages/simplr-forms-core/src/stores/form-stores-handler.ts
@@ -2,7 +2,7 @@ import * as Immutable from "immutable";
 import { ActionEmitter } from "action-emitter";
 
 import { FormStore } from "./form-store";
-import * as Actions from "../actions/form-stores-handler-actions";
+import * as Actions from "../actions/form-stores-handler";
 
 export class FormStoresHandlerClass extends ActionEmitter {
     private storesCount: number;
diff --git a/packages/simplr-forms-dom/README.md b/packages/simplr-forms-dom/README.md
diff --git a/packages/simplr-forms-dom/package.json b/packages/simplr-forms-dom/package.json
@@ -1,40 +1,50 @@
-{
-  "name": "simplr-validation",
-  "version": "4.0.0-alpha",
-  "description": "DOM components for simplr-forms.",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "author": "simplrjs <simplr@quatrodev.com> (https://github.com/simplrjs)",
-  "license": "AGPL-3.0",
-  "devDependencies": {
-    "@types/enzyme": "^2.7.7",
-    "@types/jest": "^19.2.2",
-    "@types/sinon": "^2.1.2",
-    "enzyme": "^2.8.0",
-    "jest": "^19.0.2",
-    "jest-enzyme": "^3.0.0",
-    "sinon": "^2.1.0",
-    "ts-jest": "^19.0.8",
-    "tslint": "^5.0.0",
-    "typescript": "2.3.0"
-  },
-  "dependencies": {
-    "@types/react": "^15.0.21",
-    "react": "^15.5.4",
-    "simplr-forms-core": "4.0.0-alpha"
-  },
-  "jest": {
-    "setupTestFrameworkScriptFile": "./node_modules/jest-enzyme/lib/index.js",
-    "transform": {
-      ".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js"
-    },
-    "testRegex": "/__tests__/.*\\.(test|spec).(ts|tsx|js)$",
-    "moduleFileExtensions": [
-      "ts",
-      "tsx",
-      "js"
-    ]
-  }
+{
+  "name": "simplr-forms-dom",
+  "version": "4.0.0-pre-alpha.6",
+  "description": "DOM components for simplr-forms.",
+  "main": "dist/simplr-forms-dom.js",
+  "types": "@types/index.d.ts",
+  "scripts": {
+    "build": "webpack && npm run tslint",
+    "watch": "webpack -w",
+    "tslint": "tslint --config ./tslint.json --project . --exclude __tests__/**/* && echo TsLint test successfully passed.",
+    "uglifyjs": "uglifyjs ./dist/simplr-forms-core.js -o ./dist/simplr-forms-core.min.js --compress --mangle",
+    "release": "npm run build && npm run uglifyjs",
+    "test": "jest",
+    "test-watch": "jest --watchAll",
+    "test-coverage": "npm test -- --coverage"
+  },
+  "author": "simplrjs <simplr@quatrodev.com> (https://github.com/simplrjs)",
+  "license": "AGPL-3.0",
+  "devDependencies": {
+    "@types/enzyme": "^2.7.7",
+    "@types/jest": "^19.2.2",
+    "@types/sinon": "^2.1.2",
+    "enzyme": "^2.8.0",
+    "jest": "^19.0.2",
+    "jest-enzyme": "^3.0.0",
+    "sinon": "^2.1.0",
+    "ts-jest": "^19.0.8",
+    "ts-loader": "^2.0.3",
+    "tslint": "^5.0.0",
+    "typescript": "2.3.0",
+    "webpack": "^2.4.1"
+  },
+  "dependencies": {
+    "@types/react": "^15.0.21",
+    "react": "^15.5.4",
+    "simplr-forms-core": "^4.0.0-pre-alpha.3"
+  },
+  "jest": {
+    "setupTestFrameworkScriptFile": "./node_modules/jest-enzyme/lib/index.js",
+    "transform": {
+      ".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js"
+    },
+    "testRegex": "/__tests__/.*\\.(test|spec).(ts|tsx|js)$",
+    "moduleFileExtensions": [
+      "ts",
+      "tsx",
+      "js"
+    ]
+  }
 }
diff --git a/packages/simplr-forms-dom/src/abstractions/base-dom-field.tsx b/packages/simplr-forms-dom/src/abstractions/base-dom-field.tsx
@@ -0,0 +1,18 @@
+import * as React from "react";
+import { Abstractions as CoreAbstractions, Contracts as CoreContracts } from "simplr-forms-core";
+
+export interface BaseDomFieldState extends CoreAbstractions.BaseFieldState {
+
+}
+
+export abstract class BaseDomField<TProps extends CoreContracts.FieldProps, TState extends BaseDomFieldState>
+    extends CoreAbstractions.BaseField<TProps, TState> {
+    protected RawInitialValue: any;
+    protected DefaultValue: any;
+
+    public abstract renderField(): JSX.Element | null;
+
+    public render() {
+        return this.renderField();
+    }
+}
diff --git a/packages/simplr-forms-dom/src/abstractions/index.ts b/packages/simplr-forms-dom/src/abstractions/index.ts
@@ -0,0 +1 @@
+export * from "./base-dom-field";
diff --git a/packages/simplr-forms-dom/src/components/form.tsx b/packages/simplr-forms-dom/src/components/form.tsx
@@ -0,0 +1,18 @@
+import * as React from "react";
+import { Abstractions as CoreAbstractions, Contracts as CoreContracts } from "simplr-forms-core";
+
+export interface Props extends CoreContracts.FormProps, React.HTMLProps<HTMLFormElement> {
+
+}
+
+export interface FormProps extends Props {
+
+}
+
+export class Form extends CoreAbstractions.BaseForm<FormProps, {}> {
+    render() {
+        return <form>
+            {this.props.children}
+        </form>;
+    }
+}
diff --git a/packages/simplr-forms-dom/src/components/index.ts b/packages/simplr-forms-dom/src/components/index.ts
@@ -0,0 +1,7 @@
+import * as Form from "./form";
+import * as Text from "./text";
+
+export {
+    Form,
+    Text
+};
diff --git a/packages/simplr-forms-dom/src/components/text.tsx b/packages/simplr-forms-dom/src/components/text.tsx
@@ -0,0 +1,64 @@
+import * as React from "react";
+import { Contracts as CoreContracts } from "simplr-forms-core";
+
+import { BaseDomField, BaseDomFieldState } from "../abstractions/base-dom-field";
+import { OnChangeCallback } from "../contracts/field";
+
+/**
+ * Override the differences between extended interfaces.
+ *
+ * @export
+ * @interface Props
+ * @extends {CoreContracts.FieldProps}
+ * @extends {React.HTMLProps<HTMLInputElement>}
+ */
+export interface Props extends CoreContracts.FieldProps, React.HTMLProps<HTMLInputElement> {
+    name: string;
+    onFocus?: React.EventHandler<React.FocusEvent<HTMLInputElement>>;
+    onBlur?: React.EventHandler<React.FocusEvent<HTMLInputElement>>;
+    ref?: any;
+}
+
+export interface TextProps extends Props {
+    onChange?: OnChangeCallback<HTMLInputElement>;
+}
+
+export class Text extends BaseDomField<TextProps, BaseDomFieldState> {
+    protected GetValueFromEvent(event: React.FormEvent<HTMLInputElement>): CoreContracts.FieldValue {
+        return event.currentTarget.value;
+    }
+
+    protected OnChangeHandler: React.FormEventHandler<HTMLInputElement> = (event) => {
+        this.OnValueChange(this.GetValueFromEvent(event));
+
+        const newValue = this.FormStore.GetField(this.FieldId).Value;
+
+        if (this.props.onChange != null) {
+            this.props.onChange(event, newValue, this.FieldId, this.FormId);
+        }
+
+        // TODO: FormProps.OnFieldChange
+    }
+
+    protected get IsDisabled() {
+        let disabled: boolean | undefined;
+
+        // TODO: FormProps.Disabled and FieldsGroupProps.Disabled
+
+        if (this.props.disabled != null) {
+            disabled = this.props.disabled;
+        }
+
+        return disabled;
+    }
+
+    renderField(): JSX.Element | null {
+        return <input
+            type="text"
+            name={this.FieldId}
+            value={this.Value}
+            onChange={this.OnChangeHandler}
+            disabled={this.IsDisabled}
+        />;
+    }
+}
diff --git a/packages/simplr-forms-dom/src/contracts/field.ts b/packages/simplr-forms-dom/src/contracts/field.ts
@@ -0,0 +1,5 @@
+import { Contracts as CoreContracts } from "simplr-forms-core";
+
+export interface OnChangeCallback<TElement> extends React.EventHandler<React.FormEvent<TElement>> {
+    (event: React.FormEvent<TElement> | undefined, newValue: CoreContracts.FieldValue, fieldId: string, formId: string): void;
+}
diff --git a/packages/simplr-forms-dom/src/contracts/index.ts b/packages/simplr-forms-dom/src/contracts/index.ts
@@ -0,0 +1 @@
+export * from "./field";
diff --git a/packages/simplr-forms-dom/src/index.ts b/packages/simplr-forms-dom/src/index.ts
@@ -0,0 +1,9 @@
+import * as Abstractions from "./abstractions/index";
+import * as Components from "./components/index";
+import * as Contracts from "./contracts/index";
+
+export {
+    Abstractions,
+    Components,
+    Contracts
+};
diff --git a/packages/simplr-forms-dom/tsconfig.json b/packages/simplr-forms-dom/tsconfig.json
@@ -0,0 +1,27 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "target": "es5",
+        "removeComments": false,
+        "outDir": "dist",
+        "rootDir": "src",
+        "jsx": "react",
+        "sourceMap": false,
+        "skipDefaultLibCheck": true,
+        "declaration": true,
+        "declarationDir": "@types",
+        "pretty": true,
+        "strict": true,
+        "lib": [
+            "dom",
+            "dom.iterable",
+            "es6"
+        ]
+    },
+    "exclude": [
+        "node_modules",
+        "dist",
+        "@types",
+        "__tests__"
+    ]
+}
diff --git a/packages/simplr-forms-dom/tslint.json b/packages/simplr-forms-dom/tslint.json
@@ -0,0 +1,45 @@
+{
+  "rules": {
+    "align": [ true, "parameters", "statements" ],
+    "class-name": true,
+    "comment-format": [ false ],
+    "curly": true,
+    "eofline": true,
+    "forin": true,
+    "indent": [ true, "spaces" ],
+    "interface-name": [ true, "never-prefix" ],
+    "jsdoc-format": true,
+    "max-line-length": [ true, 130 ],
+    "no-construct": true,
+    "no-debugger": true,
+    "no-duplicate-variable": true,
+    "semicolon": [ true ],
+    "no-eval": true,
+    "no-internal-module": true,
+    "no-default-export": true,
+    "no-trailing-whitespace": true,
+    "no-var-keyword": false,
+    "one-line": [ true, "check-catch", "check-else", "check-finally", "check-open-brace", "check-whitespace" ],
+    "quotemark": [ true, "double", "avoid-escape" ],
+    "typedef-whitespace": [
+      true,
+      {
+        "call-signature": "nospace",
+        "index-signature": "nospace",
+        "parameter": "nospace",
+        "property-declaration": "nospace",
+        "variable-declaration": "nospace"
+      }
+    ],
+    "triple-equals": [ true, "allow-null-check" ],
+    "variable-name": [ true, "ban-keywords", "check-format", "allow-pascal-case" ],
+    "whitespace": [
+      true,
+      "check-branch",
+      "check-decl",
+      "check-operator",
+      "check-separator",
+      "check-type"
+    ]
+  }
+}
diff --git a/packages/simplr-forms-dom/webpack.config.js b/packages/simplr-forms-dom/webpack.config.js
@@ -0,0 +1,29 @@
+const packageJson = require("./package.json");
+
+let externals = {};
+
+for (let key in packageJson.dependencies) {
+    externals[key] = key;
+}
+
+module.exports = {
+    entry: "./src/index.ts",
+    output: {
+        filename: "./dist/simplr-forms-dom.js",
+        libraryTarget: "umd"
+    },
+    module: {
+        rules: [
+            {
+                test: /\.tsx?$/,
+                loader: "ts-loader",
+                options: {
+                }
+            }
+        ]
+    },
+    resolve: {
+        extensions: [".ts", ".tsx"]
+    },
+    externals: externals
+};
