Skip to content
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.

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

[POC][feat] Introduce WebUI5 mapper #1361

Closed
wants to merge 9 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
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
95 changes: 95 additions & 0 deletions packages/ui5-component-mapper/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
# common

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Runtime data
pids
*.pid
*.seed
*.pid.lock
.vscode

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage

# nyc test coverage
.nyc_output

# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# TypeScript v1 declaration files
typings/

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn files
.yarn-integrity
yarn.lock

# dotenv environment variables file
.env

# next.js build output
.next

# build output
dist
vendor

/*

!src
!src/
!demo/
!demo
!src/*
!demo/*
!config
!.npmignore
!.gitignore
!babel.config.js
!generate-packages.js
!LICENSE
!package.json
!README.md
!tsconfig.json
!generate-typings.js
!rollup.config.js
!generate-componen-examples.js
!firebae.json
!firebaseFunctions.js
!scripts/

.DS_STORE
1 change: 1 addition & 0 deletions packages/ui5-component-mapper/.npmignore
1 change: 1 addition & 0 deletions packages/ui5-component-mapper/LICENSE
181 changes: 181 additions & 0 deletions packages/ui5-component-mapper/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,181 @@
[![npm version](https://badge.fury.io/js/%40data-driven-forms%2Fui5-component-mapper.svg)](https://badge.fury.io/js/%40data-driven-forms%2Fui5-component-mapper)
[![Tweet](https://img.shields.io/twitter/url/https/github.com/tterb/hyde.svg?style=social)](https://twitter.com/intent/tweet?text=Check%20DataDrivenForms%20React%20library%21%20https%3A%2F%2Fdata-driven-forms.org%2F&hashtags=react,opensource,datadrivenforms)
[![Twitter Follow](https://img.shields.io/twitter/follow/DataDrivenForms.svg?style=social)](https://twitter.com/DataDrivenForms)

[![Data Driven Form logo](https://raw.githubusercontent.com/data-driven-forms/react-forms/master/images/logo.png)](https://data-driven-forms.org/)

ui5 component mapper for [Data Driven Forms](https://github.com/data-driven-forms/react-forms).

:book: For more information please visit the [documentation](https://data-driven-forms.org/). :book:

**Table of Contents**

- [Installation](#installation)
- [React Form Renderer](#react-form-renderer)
- [ui5 Mapper](#componentmapper-mapper)
- [Usage](#usage)
- [Basic provided components](#basic-provided-components)
- [Useful links](#useful-links)
- [Development setup](#development-setup)
- [Tests](#tests)
- [Commits](#commits)
- [Changes to documentation](#changes-to-documentation)
- [Contribution](#contribution)
- [LICENSE](#license)

### Installation

You need to add React Form Renderer

#### [React Form Renderer](https://www.npmjs.com/package/@data-driven-forms/react-form-renderer)

```console
$ npm install @data-driven-forms/react-form-renderer -S
```

```console
$ yarn add @data-driven-forms/react-form-renderer
```

#### [ui5 Mapper](https://data-driven-forms.org/mappers/ui5-component-mapper)

```console
$ npm install @data-driven-forms/ui5-component-mapper -S
```

```console
$ yarn add @data-driven-forms/ui5-component-mapper
```


### Usage

For using Data Driven Forms in your component you need the renderer and a component mapper, which provides formFields components and layoutFields components.

```jsx
import React from 'react';
import { FormRenderer, componentTypes } from '@data-driven-forms/react-form-renderer';
import { componentMapper, FormTemplate } from '@data-driven-forms/ui5-component-mapper';

const schema = {
fields: [{
component: componentTypes.TEXT_FIELD,
name: 'name',
label: 'Your name'
}]
}

const Form = () => (
<FormRenderer
schema={schema}
componentMapper={componentMapper}
FormTemplate={FormTemplate}
onSubmit={console.log}
/>
)
```

### Basic provided components

Data Driven Forms supports all kinds of component, basic set is consisted of:

- [Text input](https://data-driven-forms.org/mappers/text-field?mapper=ui5)
- [Text area](https://data-driven-forms.org/mappers/textarea?mapper=ui5)
- [Checkbox](https://data-driven-forms.org/mappers/checkbox?mapper=ui5) ([Multiple checkboxes](https://data-driven-forms.org/mappers/checkbox-multiple?mapper=ui5))
- [Select (dropdown)](https://data-driven-forms.org/mappers/select?mapper=ui5)
- [Dual list select](https://data-driven-forms.org/mappers/dual-list-select?mapper=ui5)
- [Field array](https://data-driven-forms.org/mappers/field-array?mapper=ui5)
- [Switch](https://data-driven-forms.org/mappers/switch?mapper=ui5)
- [Radio buttons](https://data-driven-forms.org/mappers/radio?mapper=ui5)
- [Date picker](https://data-driven-forms.org/mappers/date-picker?mapper=ui5)
- [Time picker](https://data-driven-forms.org/mappers/time-picker?mapper=ui5)
- [Tabs](https://data-driven-forms.org/mappers/tabs?mapper=ui5)
- [Slider](https://data-driven-forms.org/mappers/slider?mapper=ui5)
- [Sub-form](https://data-driven-forms.org/mappers/sub-form?mapper=ui5)
- [Plain text](https://data-driven-forms.org/mappers/plain-text?mapper=ui5)
- [Wizard](https://data-driven-forms.org/mappers/wizard?mapper=ui5)

### Useful links

- [Data Driven Forms documentation](https://data-driven-forms.org/)
- [React Form Renderer](https://www.npmjs.com/package/@data-driven-forms/react-form-renderer)
- [ui5 Mapper NPM](https://www.npmjs.com/package/@data-driven-forms/ui5-component-mapper)


### Development setup

Data Driven Forms is a monorepo that uses [Lerna](https://github.com/lerna/lerna) and [yarn workspaces](https://classic.yarnpkg.com/blog/2017/08/02/introducing-workspaces/), so you can use all its commands as well.

1. Install

```console
yarn install
```

2. Build

```console
yarn build
```

3. Run a package

Each package has a small playground `package/demo`, where you can test your changes.

```console
cd packages/ui5-component-mapper
yarn start
```

4. How to clean?

```console
yarn lerna clean # will delete all node_modules
```

All packages are linked together by default, so if you run a `yarn build` in a package, all other packages are updated to the latest version of that package.

#### Tests

Tests can be ran from the core folder or from specific packages.

```console
yarn test

yarn test packages/ui5-component-mapper
```

#### Commits

Data Driven Forms uses [Semantic Release](https://github.com/semantic-release/commit-analyzer)

Format:

```
[type]([package]): message

fix(ui5): title accepts node
```

Types:
- `feat`: a new feature, will trigger new `_.X._` release
- `fix`: a fix, will trigger new `_._.X` release

Packages:
- Please describe which package is being changed `ui5`, `renderer`, ...

Please, do not use Semantic Release, if you update only the demo.

All packages are releasing together and they share the version number.

#### Changes to documentation

If your changes influence API or add new features, you should describe these new options in the `react-renderer-demo` repository. Thanks!

### Contribution

We welcome any community contribution. Don't be afraid to report bug or to create issues and pull-requests! :trophy:

### LICENSE

Apache License 2.0
1 change: 1 addition & 0 deletions packages/ui5-component-mapper/babel.config.js
1 change: 1 addition & 0 deletions packages/ui5-component-mapper/config/jest.setup.js
1 change: 1 addition & 0 deletions packages/ui5-component-mapper/config/webpack.config.js
Loading