Typescript

.gitignore

@@ -2,4 +2,5 @@ node_modules
 *.log
 .DS_Store
 npm-debug.log
-examples-bundle.js
+examples-bundle.js
+.metals

.storybook/config.js

@@ -0,0 +1,3 @@
+import { configure } from "@storybook/react";
+
+configure(require.context("../src", true, /\.stories\.tsx$/), module);

.storybook/esnet.js

@@ -0,0 +1,18 @@
+import { create } from "@storybook/theming/create";
+
+export default create({
+    base: "light",
+
+    colorPrimary: "gray",
+    colorSecondary: "#4ec1e0",
+
+    // UI
+    appBg: "#fdfdfd",
+    appContentBg: "#ffffff",
+    appBorderColor: "grey",
+    appBorderRadius: 4,
+
+    brandTitle: "react-dynamic-forms",
+    brandUrl: "https://software.es.net",
+    brandImage: "http://software.es.net/react-dynamic-forms/static/media/forms.aec5c7b8.png"
+});

.storybook/main.js

@@ -0,0 +1,4 @@
+module.exports = {
+    stories: ["../src/**/*.stories.(js|mdx)"],
+    addons: ["@storybook/addon-docs"]
+};

.storybook/manager.js

@@ -0,0 +1,6 @@
+import { addons } from "@storybook/addons";
+import theme from "./esnet";
+
+addons.setConfig({
+    theme
+});

.storybook/preview-head.html

@@ -0,0 +1,6 @@
+<link
+    rel="stylesheet"
+    href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
+    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
+    crossorigin="anonymous"
+/>

.storybook/webpack.config.js

@@ -0,0 +1,19 @@
+const path = require("path");
+const SRC_PATH = path.join(__dirname, "../src");
+
+module.exports = ({ config }) => {
+    config.module.rules.push({
+        test: /\.(ts|tsx)$/,
+        include: [SRC_PATH],
+        use: [
+            {
+                loader: require.resolve("awesome-typescript-loader"),
+                options: {
+                    configFileName: "./tsconfig.json"
+                }
+            }
+        ]
+    });
+    config.resolve.extensions.push(".ts", ".tsx");
+    return config;
+};

.travis.yml

@@ -1,6 +1,27 @@
 sudo: false
+
 language: node_js
-node_js:
-    - "0.12"
+
+node_js: 10
+
 notifications:
-  email: false
+    email: false
+
+cache: yarn
+
+install:
+    - yarn
+
+jobs:
+    include:
+        - stage: Chromatic
+          if: (branch != master) AND NOT type = pull_request
+          install: yarn --frozen-lockfile
+          script:
+              - yarn chromatic
+
+        - stage: Chromatic Master
+          if: (branch = master) AND NOT type = pull_request AND NOT env(RELEASE)
+          install: yarn --frozen-lockfile
+          script:
+              - yarn chromatic --auto-accept-changes

build/__tests__/index.spec.d.ts

@@ -0,0 +1 @@
+export {};

build/actions.d.ts

@@ -0,0 +1 @@
+export declare function editAction(enabled: any, handler: any): JSX.Element;

build/components/Field.d.ts

@@ -0,0 +1,42 @@
+/**
+ *  Copyright (c) 2017 - present, The Regents of the University of California,
+ *  through Lawrence Berkeley National Laboratory (subject to receipt
+ *  of any required approvals from the U.S. Dept. of Energy).
+ *  All rights reserved.
+ *
+ *  This source code is licensed under the BSD-style license found in the
+ *  LICENSE file in the root directory of this source tree.
+ */
+import React from "react";
+export interface FieldProps {
+    name: string;
+    label: string;
+    required: boolean;
+    placeholder?: string;
+    validation?: any;
+}
+/**
+ * A `Field` is a part of the JSX definition of a `Schema`. Each `Field` describes
+ * the rules and meta data associated with a field on the `Form`.
+ *
+ * For example, here is an `Field` which will input the users email address, defining
+ * a user friendly label "Email", a placeholder and a validation rule that expects
+ * the field to be a valid email address. The field is also required to be filled in.
+ *
+ * ```
+ * <Schema>
+ *     ...
+ *      <Field
+ *         required
+ *         name="email"
+ *         label="Email"
+ *         placeholder="Enter valid email address"
+ *         validation={{"format": "email"}}/>
+ *     ...
+ * </Schema>
+ * ```
+ */
+export default class Field extends React.Component<FieldProps> {
+    constructor(props: FieldProps);
+    render(): JSX.Element;
+}