Skip to content

Move frameworks’ HTML and CSS inline to avoid Meteor bug importing An… #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Dec 20, 2016
Merged

Move frameworks’ HTML and CSS inline to avoid Meteor bug importing An… #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 9 additions & 16 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,21 @@
# Generated
compiled
dist
docs

# Node
node_modules/*
dist/*
docs/*
node_modules
npm-debug.log

# TypeScript
*.js
!./index.js
!./systemjs.config.js
*.map
*.d.ts
!./typings/*.ts

# JetBrains
# IDE
.idea
.project
.settings
.idea/*
*.iml
*.swp

# Windows
# OS
Thumbs.db
Desktop.ini

# Mac
.DS_Store
**/.DS_Store
35 changes: 19 additions & 16 deletions .npmignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,31 @@
# Development
compiled
dist/playground
docs
src

# TypeScript
tsconfig.json
tslint.json
typedoc.json
typings.json
typings
*.ts
!*.d.ts

# Node
node_modules/*
# dist/*
docs/*
node_modules
npm-debug.log

# Include compiled TypeScript files in NPM bundle
# *.js
# !index.js
# !systemjs.config.js
# *.map
# *.d.ts
# !typings/*.ts

# JetBrains
# IDE
.idea
.project
.settings
.idea/*
*.iml
*.swp

# Windows
# OS
Thumbs.db
Desktop.ini

# Mac
.DS_Store
**/.DS_Store
80 changes: 49 additions & 31 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# Angular 2 JSON Schema Form

[![npm version](https://badge.fury.io/js/angular2-json-schema-form.svg)](https://www.npmjs.com/package/angular2-json-schema-form) [![MIT Licence](https://img.shields.io/github/license/dschnelldavis/angular2-json-schema-form.svg)](https://opensource.org/licenses/mit-license.php)

A [JSON Schema](http://json-schema.org) Form builder for Angular 2, similar to, and mostly API compatible with,

* [JSON Schema Form](https://github.com/json-schema-form)'s [Angular Schema Form](http://schemaform.io) for [Angular 1](https://angularjs.org) ([examples](http://schemaform.io/examples/bootstrap-example.html))
Expand All @@ -12,7 +14,7 @@ Note: This is a personal proof-of-concept project, and is NOT currently affiliat

### To install from GitHub and play with the examples

The [GitHub](https://github.com) version of Angular 2 JSON Schema Form includes an example playground with over 70 different JSON Schemas (including all examples used by each of the three libraries listed above), and the ability to quickly view any example formatted using Bootstrap 3 or Material Design (or without formatting, which works, but is usually pretty ugly).
The [GitHub](https://github.com) version of Angular 2 JSON Schema Form includes an example playground with over 70 different JSON Schemas (including all examples used by each of the three libraries listed above), and the ability to quickly view any example formatted using Bootstrap 3 or Material Design (or without formatting, which is functional, but usually pretty ugly).

To install both the library and the example playground, clone `https://github.com/dschnelldavis/angular2-json-schema-form.git` with your favorite git program, or enter the following in your terminal:

Expand All @@ -30,42 +32,58 @@ All the source code is in the `/src` folder. Inside that folder, you will find t
* `library` contains the Angular 2 JSON Schema Form library.
* `playground` contains the example playground.
* `playground/examples` contains the JSON Schema examples.
* `frameworks` contains the widget library (described below).
* `widgets` contains the framework library.
* `frameworks` contains the framework library (described below).
* `widgets` contains the widget library.

If you want additional documentation describing the individual functions used in this library, run `npm run docs` to generate TypeDoc documentation, and then look in the newly generated `/docs` folder.

### To install from NPM and use in your own project

If, after playing with the examples, you decide this library is functional enough to use in your own project, you can install it from [NPM](https://www.npmjs.com) with:
If, after playing with the examples, you decide this library is functional enough to use in your own project, you can install it from [NPM](https://www.npmjs.com) by running the following from your terminal:

```
npm install angular2-json-schema-form -save
```

Then add these two lines to your main application module:
Then add this line to your main application module:
```javascript
import { ReactiveFormsModule } from '@angular/forms';
import { JsonSchemaFormModule } from 'angular2-json-schema-form';
```

And finally, add `'ReactiveFormsModule'` and `'JsonSchemaFormModule'` to the 'imports' array in your @NgModule declaration.
And finally, add `JsonSchemaFormModule` to the `imports` array in your @NgModule declaration.

Your final app.module.ts should look something like this:

```javascript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { JsonSchemaFormModule } from 'angular2-json-schema-form';

import { AppComponent } from './app.component';

@NgModule({
imports: [ BrowserModule, JsonSchemaFormModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
```

Also, if you use SystemJS, you will also need to make the following changes to your systemjs.config.js file.

Add three lines to the 'map' section:
Add these three lines to the 'map' section:
```javascript
'angular2-json-schema-form': 'npm:angular2-json-schema-form',
'ajv': 'npm:ajv/dist/ajv.min.js',
'lodash': 'npm:lodash/lodash.min.js',
'ajv': 'npm:ajv/dist/ajv.min.js',
'lodash': 'npm:lodash/lodash.min.js',
```

And add one line to the 'packages' section:
And add this line to the 'packages' section:
```javascript
'angular2-json-schema-form': { main: './index.js', defaultExtension: 'js' },
'angular2-json-schema-form': { main: './dist/index.js', defaultExtension: 'js' },
```


(For a complete example of how to install and use the library, clone the GitHub repository and look at how the library is imported into the example playground.)

## Using Angular 2 JSON Schema Form
Expand All @@ -81,17 +99,17 @@ For basic use, after loading the JsonSchemaFormModule as described above, to add
</json-schema-form>
```

Where the 'schema' input is a valid JSON schema object (either v3 or v4), and the 'onSubmit' output is a function that will be called when the form is submitted, with the results of the form as a JSON object.
Where the `schema` input is a valid JSON schema object (either v3 or v4), and the `onSubmit` output is a function that will be called when the form is submitted, with the results of the form as a JSON object.

### Advanced use

For more advanced cases, you may also provide three additional inputs:

* 'layout' with a custom form layout (see Angular Schema Form's [form definitions](https://github.com/json-schema-form/angular-schema-form/blob/master/docs/index.md#form-definitions) for information about how to construct a form layout)
* 'data' to populate the form with defaults or previously submitted values, and
* 'options' to set any global options for the form.
* `layout` with a custom form layout (see Angular Schema Form's [form definitions](https://github.com/json-schema-form/angular-schema-form/blob/master/docs/index.md#form-definitions) for information about how to construct a form layout)
* `data` to populate the form with defaults or previously submitted values, and
* `options` to set any global options for the form.

If you want more detailed output, you may provide additional functions for 'onChanges' to read the form values in real time (including before the completed form has been submitted) and you may implement your own custom validation from the boolean 'isValid' or the detailed 'validationErrors' outputs.
If you want more detailed output, you may provide additional functions for `onChanges` to read the form values in real time (including before the completed form has been submitted) and you may implement your own custom validation from the boolean `isValid` or the detailed `validationErrors` outputs.

Here is an example:

Expand All @@ -108,14 +126,14 @@ Here is an example:
</json-schema-form>
```

Alternately, you may also combine all your inputs into one compound object and include it as a 'form' input, like so:
Alternately, you may also combine all your inputs into one compound object and include it as a `form` input, like so:

```javascript
let yourCompoundInputObject = {
schema: {...}, // required
layout: [...], // optional
data: {...}, // optional
options: {...} // optional
schema: {...}, // required
layout: [...], // optional
data: {...}, // optional
options: {...} // optional
}
```

Expand Down Expand Up @@ -167,7 +185,7 @@ import { WidgetLibraryService } from 'angular2-json-schema-form';
import { YourInputWidgetComponent } from './your-input-widget.component';
import { YourCustomWidgetComponent } from './your-custom-widget.component';
...
constructor(private widgetLibrary: WidgetLibraryService) {}
constructor(private widgetLibrary: WidgetLibraryService) { }
...
// Replace existing 'input' widget:
widgetLibrary.registerWidget('input', YourInputWidgetComponent);
Expand All @@ -184,26 +202,26 @@ To change the active framework, load the `FrameworkLibraryService` and call `set
```javascript
import { FrameworkLibraryService } from 'angular2-json-schema-form';
...
constructor(private frameworkLibrary: FrameworkLibraryService) {}
constructor(private frameworkLibrary: FrameworkLibraryService) { }
...
let yourCustomFramework = {
framework: YourFrameworkComponent, // required
widgets: { 'your-widget-name': YourWidgetComponent }, // optional
stylesheets: [ '//url-to-your-external-style-sheet' ], // optional
scripts: [ '//url-to-your-external-script' ] // optional
widgets: { 'your-widget-name': YourWidgetComponent }, // optional
stylesheets: [ '//url-to-your-external-style-sheet' ], // optional
scripts: [ '//url-to-your-external-script' ] // optional
}
frameworkLibrary.setFramework(yourCustomFramework);
```

The value of the required 'framework' key is an Angular 2 component which will be called to format each widget before it is displayed. The optional 'widgets' object contains any custom widgets which will override or supplement the built-in widgets, and the 'stylesheets' and 'scripts' arrays contain URLs to any supplemental external style sheets and JavaScript libraries to load.
The value of the required `framework` key is an Angular 2 component which will be called to format each widget before it is displayed. The optional `widgets` object contains any custom widgets which will override or supplement the built-in widgets, and the `stylesheets` and `scripts` arrays contain URLs to any supplemental external style sheets and JavaScript libraries to load.

The two built-in frameworks (both in the `/src/frameworks` folder) demonstrate different strategies for how frameworks can style form elements. The Bootstrap 3 framework is very lightweight and includes no additional widgets (though it does load some external stylesheets and scripts) and works entirely by adding styles to the default widgets. In contrast, the Material Design framework makes much more drastic changes, and uses the [Material Design for Angular 2](https://github.com/angular/material2) library (which must be loaded separately in the Angular 2 application module) to replace most of the default form control widgets with custom widgets from that library.
The two built-in frameworks (both in the `/src/frameworks` folder) demonstrate different strategies for how frameworks can style form elements. The Bootstrap 3 framework is very lightweight and includes no additional widgets (though it does load some external stylesheets and scripts) and works entirely by adding styles to the default widgets. In contrast, the Material Design framework makes much more drastic changes, and uses the [Material Design for Angular 2](https://github.com/angular/material2) library to replace most of the default form control widgets with custom widgets from that library.

## Contributions and future development

I wrote this library because I needed a JSON Schema Form builder to use in a large Angular 2 project I am currently working on. Though I found excellent libraries for Angular 1, React, and jQuery (all linked above), I could not find anything similar for Angular 2—so I wrote this library to fill that gap.

The current version is mostly functional, and even includes a few enhancements not available in some other libraries, such as supporting less common JSON Schema features like 'oneOf', 'allOf', and '$ref' links (including circular links). However, it still has several bugs, such as not dynamically enabling and disabling conditionally required fields inside objects, and is very fragile because it does not yet include any testing framework at all.
The current version is mostly functional, and even includes a few enhancements not available in some other libraries, such as supporting less common JSON Schema features like `oneOf`, `allOf`, and `$ref` links (including circular links). However, it still has several bugs, such as not dynamically enabling and disabling conditionally required fields inside objects, and is very fragile because it does not yet include any testing framework at all.

So if you find this library useful, I encourage you to fork it and send back pull requests for any improvements you make. (I would _love_ some tests...) You are also welcome to submit bug reports, however, as I am just a single busy developer, I can't guarantee how long it might take to fix any individual bugs. So if you want a change or fix to be implemented quickly, your best bet is to do it yourself and send a pull request.

Expand Down
5 changes: 0 additions & 5 deletions index.ts
View file
Open in desktop

This file was deleted.

93 changes: 50 additions & 43 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,67 +1,70 @@
{
"name": "angular2-json-schema-form",
"version": "0.3.0-alpha.1",
"author": {
"name": "dschnelldavis",
"email": "[email protected]"
},
"description": "Angular 2 JSON Schema Form builder",
"author": "David Schnell-Davis",
"keywords": [
"Angular 2",
"JSON Schema",
"Form builder"
],
"license": "MIT",
"version": "0.2.0-alpha.1",
"scripts": {
"start": "npm run cleandist && npm run syncassets && tsc && concurrently \"tsc -w\" \"lite-server\" \"npm run watchassets\" ",
"lint": "tslint src/**/*.ts",
"test": "tsc && karma start",
"postinstall": "typings install",
"prepublish": "tsc",
"tsc": "tsc",
"typings": "typings",
"docs": "typedoc --options typedoc.json index.ts",
"cleandist": "rm -rf dist/*",
"syncassets": "rsync -ar --include='*.css' --include='*.html' --include='*.json' --include='*/' --exclude='*' ./src/ ./dist/src/",
"watchassets": "onchange 'src/**/*.css' 'src/**/*.html' 'src/**/*.json' -e 'dist/src/*' -v -- rsync -ar --include='*.css' --include='*.html' --include='*.json' --include='*/' --exclude='*' --delete ./src/ ./dist/src/"
},
"repository": {
"type": "git",
"url": "https://github.com/dschnelldavis/angular2-json-schema-form"
},
"bugs": {
"url": "https://github.com/dschnelldavis/angular2-json-schema-form/issues"
},
"main": "./dist/src/library/json-schema-form.module.js",
"types": "./dist/src/library/json-schema-form.module.d.ts",
"files": [
"dist/"
],
"main": "dist/library/json-schema-form.module.js",
"typings": "dist/library/json-schema-form.module.d.ts",
"scripts": {
"clean:dist": "rimraf compiled && rimraf dist",
"clean:all": "npm run clean:dist && rimraf node_modules && npm cache clean",
"prepublish": "npm run clean:dist && ./node_modules/.bin/ngc && rimraf compiled && rimraf dist/playground",
"lint": "tslint src/**/*.ts",
"test": "tsc && karma start",
"ngc": "./node_modules/.bin/ngc",
"tsc": "tsc",
"typings": "typings",
"docs": "typedoc --options typedoc.json src/index.ts",
"start": "npm run clean:dist && npm run syncassets && tsc && concurrently \"tsc -w\" \"lite-server\" \"npm run watchassets\" ",
"syncassets": "rsync -ar --include='*.css' --include='*.html' --include='*.json' --include='*/' --exclude='*' ./src/ ./dist/",
"watchassets": "onchange 'src/**/*.css' 'src/**/*.html' 'src/**/*.json' -e 'dist/*' -v -- rsync -ar --include='*.css' --include='*.html' --include='*.json' --include='*/' --exclude='*' --delete ./src/ ./dist/"
},
"dependencies": {
"@angular/common": "~2.2.4",
"@angular/compiler": "~2.2.4",
"@angular/core": "~2.2.4",
"@angular/forms": "~2.2.4",
"@angular/http": "~2.2.4",
"@angular/material": "^2.0.0-alpha.11-3",
"@angular/platform-browser": "~2.2.4",
"@angular/platform-browser-dynamic": "~2.2.4",
"@angular/router": "~3.2.4",
"ajv": "^4.7.7",
"bootstrap": "^3.3.7",
"brace": "^0.8.0",
"buffer": "^5.0.0",
"core-js": "^2.4.1",
"lodash": "^4.17.2",
"ng2-bootstrap": "^1.1.16",
"reflect-metadata": "^0.1.8",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.38",
"zone.js": "~0.6.25"
"@angular/common": "^2.0.0",
"@angular/compiler": "^2.0.0",
"@angular/core": "^2.0.0",
"@angular/forms": "^2.0.0",
"@angular/material": "2.0.0-alpha.11-3",
"@angular/platform-browser": "^2.0.0",
"@angular/platform-browser-dynamic": "^2.0.0",
"ajv": "^4.7.0",
"lodash": "^4.17.0"
},
"devDependencies": {
"@types/ace": "0.0.32",
"@types/ajv": "0.0.3",
"@angular/compiler-cli": "^2.0.0",
"@angular/http": "^2.0.0",
"@angular/platform-server": "^2.0.0",
"@angular/router": "^3.0.0",
"@types/ace": "^0.0.32",
"@types/ajv": "^0.0.5",
"@types/jasmine": "^2.5.38",
"@types/lodash": "^4.14.42",
"@types/node": "^6.0.51",
"brace": "^0.9.1",
"buffer": "^5.0.0",
"canonical-path": "0.0.2",
"codelyzer": "2.0.0-beta.3",
"concurrently": "^3.0.0",
"core-js": "^2.4.1",
"http-server": "^0.9.0",
"jasmine-core": "~2.5.2",
"karma": "^1.3.0",
Expand All @@ -72,11 +75,15 @@
"karma-jasmine-html-reporter": "^0.2.2",
"lite-server": "^2.2.2",
"onchange": "^3.2.0",
"protractor": "^3.3.0",
"protractor": "^4.0.13",
"reflect-metadata": "^0.1.8",
"rimraf": "^2.5.4",
"tslint": "^4.0.2",
"rxjs": "5.0.0-rc.4",
"systemjs": "^0.19.41",
"tslint": "~4.0.2",
"typedoc": "^0.5.1",
"typescript": "^2.1.4",
"typings": "^1.3.1"
"typescript": "~2.0.10",
"typings": "^1.3.1",
"zone.js": "~0.7.2"
}
}
Loading