# @dac-software/forms

> This library has forms integrated with CRM. It can be applied to qarson fr. Library uses react, redux, typescript, css written in SASS preprocessor.

Latest version **1.1.6** (published 2020-09-07) · UNLICENSED license · 0 weekly downloads

## Install

```sh
npm install @dac-software/forms
pnpm add @dac-software/forms
yarn add @dac-software/forms
bun add @dac-software/forms
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.6 |
| Published | 2020-09-07 |
| First published | 2020-04-20 |
| Weekly downloads | 0 |
| License | UNLICENSED |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=10.0.0 |
| Dependencies | 15 |
| Unpacked size | 677.2 KB |
| Known vulnerabilities | 0 (+25 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | dac-software |

## Links

- npm: https://www.npmjs.com/package/@dac-software/forms
- npm.io page: https://npm.io/package/@dac-software/forms

## Dependencies (15)

- [yup](https://npm.io/package/yup.md) ^0.28.3
- [axios](https://npm.io/package/axios.md) ^0.19.0
- [react](https://npm.io/package/react.md) ^16.8.6
- [redux](https://npm.io/package/redux.md) 4.0.4
- [formik](https://npm.io/package/formik.md) ^2.1.4
- [i18next](https://npm.io/package/i18next.md) ^17.0.6
- [date-fns](https://npm.io/package/date-fns.md) ^2.12.0
- [react-dom](https://npm.io/package/react-dom.md) ^16.8.6
- [react-redux](https://npm.io/package/react-redux.md) ^7.1.0
- [react-i18next](https://npm.io/package/react-i18next.md) ^10.11.4
- [react-datepicker](https://npm.io/package/react-datepicker.md) ^2.14.1
- [@dac-software/base-ui](https://npm.io/package/@dac-software/base-ui.md) ~2.0.1
- [@dac-software/offer-state](https://npm.io/package/@dac-software/offer-state.md) ~1.0.2
- [@dac-software/phone-number](https://npm.io/package/@dac-software/phone-number.md) ~1.2.0
- [@dac-software/analytics-extensions](https://npm.io/package/@dac-software/analytics-extensions.md) ~1.0.0

## Recent versions

- 1.1.6 (latest) — 2020-09-07
- 1.1.6-QFR-587-typo-in-contact-form.0 — 2020-09-03
- 1.1.5 — 2020-08-24
- 1.1.5-QFR-422-phone-number-is-not-pesonalized-.1 — 2020-08-20
- 1.1.5-QFR-422-phone-number-is-not-pesonalized-.0 — 2020-08-14
- 1.1.4 — 2020-08-10
- 1.1.3 — 2020-08-10
- 1.1.3-QFR-140-track-web-site-calls---forms-for.2 — 2020-08-07
- 1.1.3-QFR-140-track-web-site-calls---forms-for.1 — 2020-08-06
- 1.1.3-QFR-140-track-web-site-calls---forms-for.0 — 2020-08-03
- 1.1.2-aplha.1 — 2020-06-26
- 1.1.2-aplha — 2020-06-25
- 1.1.2 — 2020-06-25
- 1.1.1 — 2020-06-25
- 1.0.1-Q2-2521-kiosk---takover-by-it-support-release.1 — 2020-06-08
- … 39 more at https://npm.io/package/@dac-software/forms/versions

## README

# Forms

This library has forms integrated with CRM. It can be applied to qarson fr.
Library uses react, redux, typescript, css written in SASS preprocessor.

Developing bundler is webpack. 

Build production build made as simple tsc compilation with asset files copies provided

## Requirements

- nodejs v10 +
- npm v6.9.0 +

## Installation:

Installing dependencies
```bash
npm install
```

Build production library files
```bash
npm run build
```

\* Build task build two types of library entrypoints :
* "web" - destined to web include (for example by script tag) with all depedencies built in (like react, redux and other third party libraries)
* "ecma script module" - destined for further bundler processing, it is resolved through simply typescript compiling in package.json statement
    ```bash
    tsc -p tsconfig-prod.json && copyfiles "./lib/**/*.!(tsx|ts|d.ts|html)" "dist/esm" -u 1
    ```

##Use

Application should be used by triggering exposed functions triggering window events.
Function can be configured by object with forcedPhoneNumber, 
it will distribute proper  phone number to phone number component used in forms

```javascript
showContactForm()
showContactForm({forcedPhoneNumber: '123.123.123'})
showMeetingForm()
showMeetingForm({forcedPhoneNumber: '123.123.123'})
```

```html
<div class="react-root-phone-number"><!-- form --></div>
```

Second mode allows to "predefine"/"force" phone number to show to client

```html
<div class="react-root-phone-number" data-forced-number=""122.122.122"><!-- form --></div>
```

Library through ESM exposes PhoneNumber react component

```jsx
<PhoneNumber forcedNumber={'123.123.123'} />
```

##Development

Running dev server in standalone mode
```bash
npm run start
```

Running dev mode through bundler in other project.
Project should be linked by npm.

```bash
npm run build:dev
```
\* build dev emmits files into dist/esm/offers-gallery without CSS / files extraction, it is determined by webpack condition on compilation mode

Running tests
```bash
npm run test
```

####Codestyle

We are in consonance with **standardjs**.

Validation codestyle:

```bash
npm run codestyle-check-typescript
```

Automatic fix:

```bash
npm run codestyle-typescript-fix
```

####CI (bitbucket pipelines)

Checks codestyles and run tests

##Compilation summary
| | ```npm start``` - (standalone dev) | ```npm run build:dev``` (imported as esm in higher bundler) | ```npm run build``` (production build)
|---|---|---|---|
|key dist files|none|dist/esm/offers-gallery.js|dist/esm/forms.js, dist/forms.js, dist/forms.css
|css extraction|no|css in js|esm: css in js, web: extracted
|files extraction|no|yes|no (copied)
##App configuration

Offers gallery react app **requires** simple configuration object in window 'offerSummaryConfig' property.

Example :

```javascript
 var config = {
        locale: 'fr',
        variantNumber: 'something',
        variantVersion: 'somesome',
        offerData: {
          make: 'Opel',
          model: 'Calibra',
          version: 'GTI',
          engineDisplacement: '3.2',
          fuelType: 'essence',
          enginePower: 320
        }
      }

Object.defineProperty(window, 'offerSummaryConfig', { value: offerSummaryConfig })
```

## NPM publishing

### NPM publishing manually:

1) Increase version in package.json 
2) Npm login with proper username and password
    ```bash
    npm login
    ```
3) Npm publish (command will trigger prepare npm method which should build files to dist directory)
    ```bash
    npm publish --access=public
    ```

### NPM publishing through bitbucket  pipelines:

1) dev tag publish using pipeline named:
    ``custom: dev-npm-publish``

    This pipeline automatically defines branch related tag name, for example :
        ``1.0.0-some-branch-name.0``

2) production tag publish using pipeline named: 
    ``custom: prod-npm-publish``

    This pipeline requires what kind of semver tag should be defined for publish. You need to fill additional field in pipeline form and type one of version type :
        - patch
        - minor
        - major

---
_Source: https://npm.io/package/@dac-software/forms · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._