Feature request: Framework support Clarity

[RobArbor]

Issue type

I'm submitting a (check one):
[ ] Bug report
[x] Feature request
[ ] Regression (something that used to work, but stopped working in a newer version)
[ ] Support request
[ ] Documentation issue or request

Prerequisites

Before posting, make sure you do the following (check all):
[x] Confirm you are using the latest versions of all necessary packages (or if not, explain why not)
[x] Search GitHub for a similar issue or PR
[x] If submitting a Support request, also search [Stack Overflow][stack-overflow] for similar issues
Note: Please cross-post GitHub support requests to [Stack Overflow][stack-overflow], and include a link in your GitHub issue to your Stack Overflow question. We do currently respond to support requests on GitHub, but we eventually expect to stop, and will then refer all support questions exclusively to Stack Overflow.

Feature description

Support for the clarity framework.
https://vmware.github.io/clarity/

[RobArbor]

I'm currently using the bootstrap framework 4 module because clarity is based on bootstrap.
With some simple css tweaks i can make it workable.

But they have plans to change it in the future see:
vmware-archive/clarity#1531

[EricsG95]

Hi @RobArbor, I am interested to add clarity to my Angular project. However could you share with me how you can use Clarity seamlessly in your project? Did you just import the JS files and css files to the angular-cli json and import { ClarityModule } from '@clr/angular'? Is that all required to allow it run correctly along side with the existing BS 4 module of Json schema form? Thank you so much!

[RobArbor]

Just follow the instructions of https://vmware.github.io/clarity/documentation/v0.12/get-started.
Like i said it will function only the layout is messed up but you can easily fix this with some custom CSS

Note that the latest version of clarity is Angular 6 and this project isn't yet compatible.
See: #295

I used the branch of Catull: https://github.com/catull/ngx-json-schema
Which also removes the dependency to Material Design.
Also has a npm package: https://www.npmjs.com/package/ngx-json-schema

[catull]

@RobArbor @EricsG95
My repo supports Angular 6+, and removed support for Material Design.
Not a clean solution, but it reduces the dependencies.

[EricsG95]

I see thank you so much @RobArbor and @catull, really apprecitae your advices! Now I am also considering ngx-formly, https://github.com/formly-js/ngx-formly as a solution and then add a converter from json-schema to ngx formly defined schema.

[hamzahamidi]

You might want to try this version https://github.com/hamzahamidi/Angular6-json-schema-form
The import however changed, you import for example Bootstrap4FrameworkModule like this, note that you shouldn't import JsonSchemaFormModule :

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

import { Bootstrap4FrameworkModule } from 'angular6-json-schema-form';

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

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

And you use the component like the following:

<json-schema-form
loadExternalAssets="true"
[schema]="schema"
framework="bootstrap-4"
(onSubmit)="submit($event)">
</json-schema-form>