From aa19c51f028d97fbaf504242d1a3367aaa300b6b Mon Sep 17 00:00:00 2001 From: Olivier YOUF Date: Thu, 22 Oct 2020 21:46:57 +0200 Subject: [PATCH] feat(dateInput): Bump react Date Picker and Remove momentbreaking : Remove moment and uses JS Date --- babel.config.json | 17 +- package-lock.json | 648 +++++++++++------- package.json | 3 + packages/Form/Input/date/package.json | 4 +- packages/Form/Input/date/src/CustomDate.js | 85 +-- packages/Form/Input/date/src/CustomDate.md | 21 +- packages/Form/Input/date/src/DateInput.js | 6 +- .../Form/Input/date/src/DateInput.spec.js | 26 +- .../Form/Input/date/src/DateInput.stories.js | 194 ++---- packages/Form/Input/date/src/InputDate.md | 21 +- .../src/__snapshots__/DateInput.spec.js.snap | 69 +- 11 files changed, 600 insertions(+), 494 deletions(-) diff --git a/babel.config.json b/babel.config.json index e69eb7bad..29dea48e3 100644 --- a/babel.config.json +++ b/babel.config.json @@ -1,4 +1,17 @@ { - "presets": ["@babel/preset-react", "@babel/preset-env"], - "plugins": ["@babel/plugin-proposal-class-properties"] + "presets": [ + "@babel/preset-react", + [ + "@babel/preset-env", + { + "targets": { + "node": "10" + } + } + ] + ], + "plugins": [ + "@babel/plugin-proposal-class-properties", + "syntax-dynamic-import" + ] } diff --git a/package-lock.json b/package-lock.json index f8f7834f2..df41ef196 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5645,6 +5645,80 @@ "num2fraction": "^1.2.2", "postcss": "^7.0.32", "postcss-value-parser": "^4.1.0" + }, + "dependencies": { + "ansi-styles": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", + "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "dev": true, + "requires": { + "color-convert": "^1.9.0" + } + }, + "chalk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", + "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "dev": true, + "requires": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + }, + "dependencies": { + "supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dev": true, + "requires": { + "has-flag": "^3.0.0" + } + } + } + }, + "color-convert": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", + "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", + "dev": true, + "requires": { + "color-name": "1.1.3" + } + }, + "color-name": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", + "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", + "dev": true + }, + "has-flag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", + "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", + "dev": true + }, + "postcss": { + "version": "7.0.35", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz", + "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==", + "dev": true, + "requires": { + "chalk": "^2.4.2", + "source-map": "^0.6.1", + "supports-color": "^6.1.0" + } + }, + "supports-color": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", + "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", + "dev": true, + "requires": { + "has-flag": "^3.0.0" + } + } } }, "chalk": { @@ -5953,80 +6027,6 @@ "find-up": "^4.0.0" } }, - "postcss": { - "version": "7.0.35", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz", - "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==", - "dev": true, - "requires": { - "chalk": "^2.4.2", - "source-map": "^0.6.1", - "supports-color": "^6.1.0" - }, - "dependencies": { - "ansi-styles": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", - "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", - "dev": true, - "requires": { - "color-convert": "^1.9.0" - } - }, - "chalk": { - "version": "2.4.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", - "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", - "dev": true, - "requires": { - "ansi-styles": "^3.2.1", - "escape-string-regexp": "^1.0.5", - "supports-color": "^5.3.0" - }, - "dependencies": { - "supports-color": { - "version": "5.5.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", - "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", - "dev": true, - "requires": { - "has-flag": "^3.0.0" - } - } - } - }, - "color-convert": { - "version": "1.9.3", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", - "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", - "dev": true, - "requires": { - "color-name": "1.1.3" - } - }, - "color-name": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", - "dev": true - }, - "has-flag": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", - "dev": true - }, - "supports-color": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", - "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", - "dev": true, - "requires": { - "has-flag": "^3.0.0" - } - } - } - }, "qs": { "version": "6.9.4", "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.4.tgz", @@ -6634,12 +6634,111 @@ "loader-utils": "^2.0.0" } }, + "@testing-library/dom": { + "version": "7.26.3", + "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-7.26.3.tgz", + "integrity": "sha512-/1P6taENE/H12TofJaS3L1J28HnXx8ZFhc338+XPR5y1E3g5ttOgu86DsGnV9/n2iPrfJQVUZ8eiGYZGSxculw==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.10.4", + "@babel/runtime": "^7.10.3", + "@types/aria-query": "^4.2.0", + "aria-query": "^4.2.2", + "chalk": "^4.1.0", + "dom-accessibility-api": "^0.5.1", + "lz-string": "^1.4.4", + "pretty-format": "^26.4.2" + } + }, + "@testing-library/jest-dom": { + "version": "5.11.5", + "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.11.5.tgz", + "integrity": "sha512-XI+ClHR864i6p2kRCEyhvpVejuer+ObVUF4cjCvRSF88eOMIfqw7RoS9+qoRhyigGswMfT64L6Nt0Ufotxbwtg==", + "dev": true, + "requires": { + "@babel/runtime": "^7.9.2", + "@types/testing-library__jest-dom": "^5.9.1", + "aria-query": "^4.2.2", + "chalk": "^3.0.0", + "css": "^3.0.0", + "css.escape": "^1.5.1", + "lodash": "^4.17.15", + "redent": "^3.0.0" + }, + "dependencies": { + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "requires": { + "color-convert": "^2.0.1" + } + }, + "chalk": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz", + "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==", + "dev": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true + }, + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "requires": { + "has-flag": "^4.0.0" + } + } + } + }, + "@testing-library/react": { + "version": "11.1.0", + "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-11.1.0.tgz", + "integrity": "sha512-Nfz58jGzW0tgg3irmTB7sa02JLkLnCk+QN3XG6WiaGQYb0Qc4Ok00aujgjdxlIQWZHbb4Zj5ZOIeE9yKFSs4sA==", + "dev": true, + "requires": { + "@babel/runtime": "^7.11.2", + "@testing-library/dom": "^7.26.0" + } + }, "@types/anymatch": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/@types/anymatch/-/anymatch-1.3.1.tgz", "integrity": "sha512-/+CRPXpBDpo2RK9C68N3b2cOvO0Cf5B9aPijHsoDQTHivnGSObdOF2BRQOYjojWTDy6nQvMjmqRXIxH55VjxxA==", "dev": true }, + "@types/aria-query": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-4.2.0.tgz", + "integrity": "sha512-iIgQNzCm0v7QMhhe4Jjn9uRh+I6GoPmt03CbEtwx3ao8/EfoQcmgtqH4vQ5Db/lxiIGaWDv6nwvunuh0RyX0+A==", + "dev": true + }, "@types/babel__core": { "version": "7.1.10", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.10.tgz", @@ -7019,6 +7118,15 @@ "integrity": "sha512-W+bw9ds02rAQaMvaLYxAbJ6cvguW/iJXNT6lTssS1ps6QdrMKttqEAMEG/b5CR8TZl3/L7/lH0ZV5nNR1LXikA==", "dev": true }, + "@types/testing-library__jest-dom": { + "version": "5.9.5", + "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.9.5.tgz", + "integrity": "sha512-ggn3ws+yRbOHog9GxnXiEZ/35Mow6YtPZpd7Z5mKDeZS/o7zx3yAle0ov/wjhVB5QT4N2Dt+GNoGCdqkBGCajQ==", + "dev": true, + "requires": { + "@types/jest": "*" + } + }, "@types/uglify-js": { "version": "3.11.0", "resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.11.0.tgz", @@ -8718,6 +8826,11 @@ "react-docgen": "^5.0.0" } }, + "babel-plugin-syntax-dynamic-import": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-dynamic-import/-/babel-plugin-syntax-dynamic-import-6.18.0.tgz", + "integrity": "sha1-jWomIpyDdFqZgqRBBRVyyqF5sdo=" + }, "babel-plugin-syntax-jsx": { "version": "6.18.0", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", @@ -11014,6 +11127,29 @@ "randomfill": "^1.0.3" } }, + "css": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/css/-/css-3.0.0.tgz", + "integrity": "sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==", + "dev": true, + "requires": { + "inherits": "^2.0.4", + "source-map": "^0.6.1", + "source-map-resolve": "^0.6.0" + }, + "dependencies": { + "source-map-resolve": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.6.0.tgz", + "integrity": "sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==", + "dev": true, + "requires": { + "atob": "^2.1.2", + "decode-uri-component": "^0.2.0" + } + } + } + }, "css-loader": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-5.0.0.tgz", @@ -11146,6 +11282,12 @@ "integrity": "sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==", "dev": true }, + "css.escape": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz", + "integrity": "sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=", + "dev": true + }, "cssesc": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", @@ -11615,6 +11757,12 @@ "esutils": "^2.0.2" } }, + "dom-accessibility-api": { + "version": "0.5.4", + "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.4.tgz", + "integrity": "sha512-TvrjBckDy2c6v6RLxPv5QXOnU+SmF9nBII5621Ve5fu6Z/BDrENurBEvlC1f44lKEUVqOpK4w9E5Idc5/EgkLQ==", + "dev": true + }, "dom-converter": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz", @@ -12808,9 +12956,9 @@ } }, "eslint-config-prettier": { - "version": "6.13.0", - "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-6.13.0.tgz", - "integrity": "sha512-LcT0i0LSmnzqK2t764pyIt7kKH2AuuqKRTtJTdddWxOiUja9HdG5GXBVF2gmCTvVYWVsTu8J2MhJLVGRh+pj8w==", + "version": "6.14.0", + "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-6.14.0.tgz", + "integrity": "sha512-DbVwh0qZhAC7CNDWcq8cBdK6FcVHiMTKmCypOPWeZkp9hJ8xYwTaWSa6bb6cjfi8KOeJy0e9a8Izxyx+O4+gCQ==", "dev": true, "requires": { "get-stdin": "^6.0.0" @@ -15980,40 +16128,38 @@ "postcss": "^7.0.14" }, "dependencies": { - "postcss": { - "version": "7.0.35", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz", - "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==", + "chalk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", + "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", "dev": true, "requires": { - "chalk": "^2.4.2", - "source-map": "^0.6.1", - "supports-color": "^6.1.0" + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" }, "dependencies": { - "chalk": { - "version": "2.4.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", - "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", "dev": true, "requires": { - "ansi-styles": "^3.2.1", - "escape-string-regexp": "^1.0.5", - "supports-color": "^5.3.0" - }, - "dependencies": { - "supports-color": { - "version": "5.5.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", - "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", - "dev": true, - "requires": { - "has-flag": "^3.0.0" - } - } + "has-flag": "^3.0.0" } } } + }, + "postcss": { + "version": "7.0.35", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz", + "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==", + "dev": true, + "requires": { + "chalk": "^2.4.2", + "source-map": "^0.6.1", + "supports-color": "^6.1.0" + } } } }, @@ -20335,6 +20481,12 @@ "yallist": "^3.0.2" } }, + "lz-string": { + "version": "1.4.4", + "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz", + "integrity": "sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=", + "dev": true + }, "macos-release": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/macos-release/-/macos-release-2.4.1.tgz", @@ -22474,15 +22626,23 @@ "dev": true }, "postcss": { - "version": "8.1.2", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.1.2.tgz", - "integrity": "sha512-mToqEVFq8jF9TFhlIK4HhE34zknFJuNTgqtsr60vUvrWn+9TIYugCwiV1JZRxCuOrej2jjstun1bn4Bc7/1HkA==", + "version": "8.1.3", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.1.3.tgz", + "integrity": "sha512-AKsHGqd7HmXmL/EgyAjI4Gx719A5yQdt9HzyXrI8M/hzxfumecYS95kfvIt40UZqPVNoEt0Va1M3PG54XtNPbg==", "dev": true, "requires": { "colorette": "^1.2.1", "line-column": "^1.0.2", - "nanoid": "^3.1.12", + "nanoid": "^3.1.15", "source-map": "^0.6.1" + }, + "dependencies": { + "nanoid": { + "version": "3.1.15", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.15.tgz", + "integrity": "sha512-n8rXUZ8UU3lV6+43atPrSizqzh25n1/f00Wx1sCiE7R1sSHytZLTTiQl8DjC4IDLOnEZDlgJhy0yO4VsIpMxow==", + "dev": true + } } }, "postcss-flexbugs-fixes": { @@ -22494,6 +22654,28 @@ "postcss": "^7.0.26" }, "dependencies": { + "chalk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", + "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "dev": true, + "requires": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + }, + "dependencies": { + "supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dev": true, + "requires": { + "has-flag": "^3.0.0" + } + } + } + }, "postcss": { "version": "7.0.35", "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz", @@ -22503,30 +22685,6 @@ "chalk": "^2.4.2", "source-map": "^0.6.1", "supports-color": "^6.1.0" - }, - "dependencies": { - "chalk": { - "version": "2.4.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", - "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", - "dev": true, - "requires": { - "ansi-styles": "^3.2.1", - "escape-string-regexp": "^1.0.5", - "supports-color": "^5.3.0" - }, - "dependencies": { - "supports-color": { - "version": "5.5.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", - "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", - "dev": true, - "requires": { - "has-flag": "^3.0.0" - } - } - } - } } } } @@ -22553,6 +22711,28 @@ "schema-utils": "^1.0.0" }, "dependencies": { + "chalk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", + "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "dev": true, + "requires": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + }, + "dependencies": { + "supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dev": true, + "requires": { + "has-flag": "^3.0.0" + } + } + } + }, "loader-utils": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz", @@ -22573,30 +22753,6 @@ "chalk": "^2.4.2", "source-map": "^0.6.1", "supports-color": "^6.1.0" - }, - "dependencies": { - "chalk": { - "version": "2.4.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", - "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", - "dev": true, - "requires": { - "ansi-styles": "^3.2.1", - "escape-string-regexp": "^1.0.5", - "supports-color": "^5.3.0" - }, - "dependencies": { - "supports-color": { - "version": "5.5.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", - "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", - "dev": true, - "requires": { - "has-flag": "^3.0.0" - } - } - } - } } }, "schema-utils": { @@ -22621,6 +22777,28 @@ "postcss": "^7.0.5" }, "dependencies": { + "chalk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", + "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "dev": true, + "requires": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + }, + "dependencies": { + "supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dev": true, + "requires": { + "has-flag": "^3.0.0" + } + } + } + }, "postcss": { "version": "7.0.35", "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz", @@ -22630,30 +22808,6 @@ "chalk": "^2.4.2", "source-map": "^0.6.1", "supports-color": "^6.1.0" - }, - "dependencies": { - "chalk": { - "version": "2.4.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", - "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", - "dev": true, - "requires": { - "ansi-styles": "^3.2.1", - "escape-string-regexp": "^1.0.5", - "supports-color": "^5.3.0" - }, - "dependencies": { - "supports-color": { - "version": "5.5.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", - "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", - "dev": true, - "requires": { - "has-flag": "^3.0.0" - } - } - } - } } } } @@ -22670,6 +22824,28 @@ "postcss-value-parser": "^4.1.0" }, "dependencies": { + "chalk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", + "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "dev": true, + "requires": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + }, + "dependencies": { + "supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dev": true, + "requires": { + "has-flag": "^3.0.0" + } + } + } + }, "postcss": { "version": "7.0.35", "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz", @@ -22679,30 +22855,6 @@ "chalk": "^2.4.2", "source-map": "^0.6.1", "supports-color": "^6.1.0" - }, - "dependencies": { - "chalk": { - "version": "2.4.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", - "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", - "dev": true, - "requires": { - "ansi-styles": "^3.2.1", - "escape-string-regexp": "^1.0.5", - "supports-color": "^5.3.0" - }, - "dependencies": { - "supports-color": { - "version": "5.5.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", - "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", - "dev": true, - "requires": { - "has-flag": "^3.0.0" - } - } - } - } } } } @@ -22717,6 +22869,28 @@ "postcss-selector-parser": "^6.0.0" }, "dependencies": { + "chalk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", + "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "dev": true, + "requires": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + }, + "dependencies": { + "supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dev": true, + "requires": { + "has-flag": "^3.0.0" + } + } + } + }, "postcss": { "version": "7.0.35", "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz", @@ -22726,30 +22900,6 @@ "chalk": "^2.4.2", "source-map": "^0.6.1", "supports-color": "^6.1.0" - }, - "dependencies": { - "chalk": { - "version": "2.4.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", - "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", - "dev": true, - "requires": { - "ansi-styles": "^3.2.1", - "escape-string-regexp": "^1.0.5", - "supports-color": "^5.3.0" - }, - "dependencies": { - "supports-color": { - "version": "5.5.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", - "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", - "dev": true, - "requires": { - "has-flag": "^3.0.0" - } - } - } - } } } } @@ -22764,6 +22914,28 @@ "postcss": "^7.0.6" }, "dependencies": { + "chalk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", + "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "dev": true, + "requires": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + }, + "dependencies": { + "supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dev": true, + "requires": { + "has-flag": "^3.0.0" + } + } + } + }, "postcss": { "version": "7.0.35", "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz", @@ -22773,30 +22945,6 @@ "chalk": "^2.4.2", "source-map": "^0.6.1", "supports-color": "^6.1.0" - }, - "dependencies": { - "chalk": { - "version": "2.4.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", - "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", - "dev": true, - "requires": { - "ansi-styles": "^3.2.1", - "escape-string-regexp": "^1.0.5", - "supports-color": "^5.3.0" - }, - "dependencies": { - "supports-color": { - "version": "5.5.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", - "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", - "dev": true, - "requires": { - "has-flag": "^3.0.0" - } - } - } - } } } } diff --git a/package.json b/package.json index 563179bf8..2b2b058f2 100644 --- a/package.json +++ b/package.json @@ -45,6 +45,8 @@ "@storybook/react": "^6.0.26", "@storybook/source-loader": "^6.0.26", "@storybook/theming": "^6.0.26", + "@testing-library/jest-dom": "^5.11.5", + "@testing-library/react": "^11.1.0", "@types/enzyme": "^3.10.7", "@types/jest": "^26.0.15", "@types/prop-types": "^15.7.3", @@ -98,6 +100,7 @@ }, "dependencies": { "autoprefixer": "^10.0.1", + "babel-plugin-syntax-dynamic-import": "^6.18.0", "clean-css": "^4.2.3", "find": "^0.3.0", "sass": "^1.27.0" diff --git a/packages/Form/Input/date/package.json b/packages/Form/Input/date/package.json index 8c148b4ff..07e03bef8 100644 --- a/packages/Form/Input/date/package.json +++ b/packages/Form/Input/date/package.json @@ -14,9 +14,9 @@ "dependencies": { "@axa-fr/react-toolkit-core": "1.3.23", "@axa-fr/react-toolkit-form-core": "1.3.23", - "moment": "^2.29.1", + "date-fns":"2.16.1", "prop-types": "15.5.10", - "react-datepicker": "1.8.0" + "react-datepicker": "3.3.0" }, "license": "MIT", "publishConfig": { diff --git a/packages/Form/Input/date/src/CustomDate.js b/packages/Form/Input/date/src/CustomDate.js index d7b647b3a..2edf2c6b2 100644 --- a/packages/Form/Input/date/src/CustomDate.js +++ b/packages/Form/Input/date/src/CustomDate.js @@ -1,11 +1,10 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import PropTypes from 'prop-types'; import DatePicker from 'react-datepicker'; -import moment from 'moment'; - +import { parse, format as dateFormat } from 'date-fns'; import { Input, withInput } from '@axa-fr/react-toolkit-form-core'; -const CustomDate = props => { +const CustomDate = (props) => { const { className, classModifier, @@ -15,6 +14,7 @@ const CustomDate = props => { viewValue, value, locale, + format, readOnly, disabled, onChangeRaw, @@ -22,27 +22,39 @@ const CustomDate = props => { ...otherProps } = props; + const [dateFnsLocale, setDateFnsLocale] = useState(null); + + useEffect(() => { + if (locale) { + import(`date-fns/locale/${locale}/index.js`).then((loc) => { + setDateFnsLocale(loc); + }); + } + }, [locale]); + let currentViewValue = ''; if (value) { - currentViewValue = value.format('L'); + currentViewValue = dateFormat(value, format); } else if (viewValue != null && viewValue != undefined) { currentViewValue = viewValue; } return ( - + dateFnsLocale && ( + + ) ); }; @@ -50,12 +62,14 @@ const propTypes = { value: PropTypes.object, viewValue: PropTypes.string, locale: PropTypes.string, + format: PropTypes.string, }; const defaultClassName = 'af-datepicker'; const defaultProps = { value: null, viewValue: null, - locale: 'fr-fr', + locale: 'fr', + format: 'dd/MM/yyyy', className: defaultClassName, fixedHeight: true, showMonthDropdown: true, @@ -66,12 +80,9 @@ const defaultProps = { yearDropdownItemNumber: 6, }; -const localizeMoment = ({ locale }) => date => - date.clone().locale(locale || moment.locale()); - const handlers = { - onChange: ({ id, name, onChange }) => date => { - const viewValue = date ? date.format('L') : ''; + onChange: ({ id, name, onChange, format }) => (date) => { + const viewValue = date ? dateFormat(date, format) : ''; onChange({ value: date, viewValue, @@ -79,23 +90,17 @@ const handlers = { id, }); }, - onChangeRaw: ({ locale, id, name, onChange }) => event => { - const momentLocal = moment(); - const localLocale = momentLocal.locale(locale); - const localData = localLocale.localeData(); - const localFormat = localData.longDateFormat('L'); - + onChangeRaw: ({ format, id, name, onChange }) => (event) => { const dateString = event.target.value; - const momentObj = localizeMoment(locale)( - moment(dateString, localFormat, true) - ); - const date = momentObj.isValid() ? momentObj : null; - onChange({ - value: date, - viewValue: dateString, - name, - id, - }); + if (dateString) { + const date = parse(dateString, format, new Date()); + onChange({ + value: date, + viewValue: dateString, + name, + id, + }); + } }, }; diff --git a/packages/Form/Input/date/src/CustomDate.md b/packages/Form/Input/date/src/CustomDate.md index 32bc91219..d8d72c718 100644 --- a/packages/Form/Input/date/src/CustomDate.md +++ b/packages/Form/Input/date/src/CustomDate.md @@ -11,18 +11,6 @@ import '@axa-fr/react-toolkit-form-input-date-phone/dist/datepicker.scss'; The component reuses the following library: - react-datepicker: https://reactdatepicker.com -- react-datepicker uses momentjs: https://momentjs.com that you must install in your application (mandatory) - -``` -npm install moment --save -``` - -Do not forget the right local when starting your application. By default, "create-react-app" excludes locals ​​for lightening the version of your final application. Adding it explicitly allows the local file to be present in the final application. - -```js -require ('moment/locale/fr.js'); -// in your start application file "index.js" -``` The date is a special component. It actually has 2 important props: - viewValue: The value of the text field which is a string @@ -30,4 +18,13 @@ The date is a special component. It actually has 2 important props: This allows you to have control of what happens and to respond to all use cases. If you are an individual, you can use the "viewValue" or "value" property. In any case if "viewValue" is not a valid date in the current language, the value of "value" returned will always be "null". + +### Supported Languages + +The Date input allow to use a differents languages : Spanish(es-ES), English (en-GB or en-US), French (fr-FR) and German (de-DE). By default french is used, you can specify the langage in the locale property using the . If you want a new language, please create a [new Issue](https://github.com/AxaGuilDEv/react-toolkit/issues) + +### Format + +Since the Version 2.0, The DateInput uses [Date-Fns](https://date-fns.org/) and return a Javascript Date object. Moment is not required anymore. You can specify the string format for viewValue in the format property. The default format is "dd/MM/YYYY" you can find the list on the [Date-fns](https://date-fns.org/v2.0.0-alpha.18/docs/format) Website + For more information about style component, you can see the [Form Date Style on Toolkit-core ](http://toolkit-intranet-axa.azurewebsites.net/#/form) diff --git a/packages/Form/Input/date/src/DateInput.js b/packages/Form/Input/date/src/DateInput.js index 4bbbc7d20..65e04d25e 100644 --- a/packages/Form/Input/date/src/DateInput.js +++ b/packages/Form/Input/date/src/DateInput.js @@ -16,13 +16,15 @@ const propTypes = { value: PropTypes.object, viewValue: PropTypes.string, locale: PropTypes.string, + format: PropTypes.string, }; const defaultProps = { ...FieldConstants.defaultProps, value: null, viewValue: null, - locale: 'fr-fr', + locale: 'fr', + format:'dd/MM/yyyy' }; const DateInput = props => { @@ -44,6 +46,7 @@ const DateInput = props => { name, value, locale, + format, viewValue, onChange, readOnly, @@ -86,6 +89,7 @@ const DateInput = props => { id={inputId} value={value} locale={locale} + format={format} viewValue={viewValue} onChange={onChange} readOnly={readOnly} diff --git a/packages/Form/Input/date/src/DateInput.spec.js b/packages/Form/Input/date/src/DateInput.spec.js index f0508bcaf..eb6e7cebf 100644 --- a/packages/Form/Input/date/src/DateInput.spec.js +++ b/packages/Form/Input/date/src/DateInput.spec.js @@ -1,19 +1,19 @@ import React from 'react'; -import renderer from 'react-test-renderer'; +import { render, screen } from '@testing-library/react'; import DateInput from './DateInput'; describe('', () => { - it('renders DateInput correctly', () => { - const tree = renderer - .create( - {}} - /> - ) - .toJSON(); - expect(tree).toMatchSnapshot(); + it('renders DateInput correctly',async () => { + const { asFragment } = render( + {}} + locale="fr" + /> + ); + await screen.findByRole('textbox'); + expect(asFragment()).toMatchSnapshot(); }); }); diff --git a/packages/Form/Input/date/src/DateInput.stories.js b/packages/Form/Input/date/src/DateInput.stories.js index 1d7b1a83d..41f9f47d4 100644 --- a/packages/Form/Input/date/src/DateInput.stories.js +++ b/packages/Form/Input/date/src/DateInput.stories.js @@ -1,138 +1,84 @@ -import React from 'react'; -import { action } from '@storybook/addon-actions'; -import { text, boolean, select } from '@storybook/addon-knobs'; -import moment from 'moment'; -import { storiesOf } from '@storybook/react'; +import * as React from 'react'; import { - MessageTypes, FieldForm, HelpMessage, FieldError, - InputConstants, } from '@axa-fr/react-toolkit-form-core'; import DateInput from './DateInput'; import CustomDate from './CustomDate'; -import readme from '../README.md'; +import Readme from '../README.md'; -const DateInputStory = () => ( -
- - -); - -const DateInputStoryRequired = () => ( -
- - -); +export default { + title: 'Form/Input/Date Input', + component: DateInput, + parameters: { + readme: { + sidebar: Readme, + }, + options: {}, + }, + argTypes: { + onChange: { action: 'Change value' }, + }, +}; -const CustomDateStory = () => ( -
- -
-
- - -
- - +const Template = args => ; +const CustomTemplate = ({ + message, + forceDisplayMessage, + args, + helpMessage, +}) => ( + +
+
+ +
- - + + +
+ ); -const stories = storiesOf('Form/Input/Date', module); +const dateStory = new Date('02-25-2010'); -stories.addParameters({ - readme: { - sidebar: readme, - }, - options: {}, -}); +export const DateInputStory = Template.bind({}); +export const DateInputStoryRequired = Template.bind({}); +export const CustomDateStory = CustomTemplate.bind({}); + +DateInputStory.args = { + label: 'Date de naissance', + name: 'birthday', + helpMessage: 'jj/mm/aaaa', + placeholder: 'dd/mm/yyyy', + value: dateStory, + locale: 'fr', + format: 'dd/MM/yyyy', + fixedHeight: true, + showMonthDropdown: true, + showYearDropdown: true, + todayButton: "Aujourd'hui", + popperPlacement: 'right-start', + yearDropdownItemNumber: 6, +}; + +DateInputStoryRequired.args = { + ...DateInputStory.args, + classModifier: 'required', +}; -stories.add('DateInputStory', DateInputStory); -stories.add('DateInputStory Required', DateInputStoryRequired); -stories.add('CustomDateStory', CustomDateStory); +CustomDateStory.args = { + name: 'birthday', + helpMessage: 'jj/mm/aaaa', + placeholder: 'dd/mm/yyyy', + value: dateStory, + locale: 'fr', + format: 'dd/MM/yyyy', + fixedHeight: true, + showMonthDropdown: true, + showYearDropdown: true, + todayButton: "Aujourd'hui", + popperPlacement: 'right-start', + yearDropdownItemNumber: 6, +}; diff --git a/packages/Form/Input/date/src/InputDate.md b/packages/Form/Input/date/src/InputDate.md index 5c32b86b4..0b8bfacf1 100644 --- a/packages/Form/Input/date/src/InputDate.md +++ b/packages/Form/Input/date/src/InputDate.md @@ -11,18 +11,6 @@ import '@axa-fr/react-toolkit-form-input-date-phone/dist/datepicker.scss'; The component reuses the following library: - react-datepicker: https://reactdatepicker.com -- react-datepicker uses momentjs: https://momentjs.com that you must install in your application (mandatory) - -``` -npm install moment --save -``` - -Do not forget the right local when starting your application. By default, "create-react-app" excludes locals ​​for lightening the version of your final application. Adding it explicitly allows the local file to be present in the final application. - -```js -require ('moment/locale/fr.js'); -// in your start application file "index.js" -``` The date is a special component. It actually has 2 important props: - viewValue: The value of the text field which is a string @@ -30,4 +18,13 @@ The date is a special component. It actually has 2 important props: This allows you to have control of what happens and to respond to all use cases. If you are an individual, you can use the "viewValue" or "value" property. In any case if "viewValue" is not a valid date in the current language, the value of "value" returned will always be "null". + +### Supported Languages + +The Date input allow to use a differents languages : Spanish(es-ES), English (en-GB or en-US), French (fr-FR) and German (de-DE). By default french is used, you can specify the langage in the locale property using the . If you want a new language, please create a [new Issue](https://github.com/AxaGuilDEv/react-toolkit/issues) + +### Format + +Since the Version 2.0, The DateInput uses [Date-Fns](https://date-fns.org/) and return a Javascript Date object. Moment is not required anymore. You can specify the string format for viewValue in the format property. The default format is "dd/MM/YYYY" you can find the list on the [Date-fns](https://date-fns.org/v2.0.0-alpha.18/docs/format) Website + For more information about style component, you can see the [Form Date Style on Toolkit-core ](http://toolkit-intranet-axa.azurewebsites.net/#/form) diff --git a/packages/Form/Input/date/src/__snapshots__/DateInput.spec.js.snap b/packages/Form/Input/date/src/__snapshots__/DateInput.spec.js.snap index d6bd56528..bd3afa6d6 100644 --- a/packages/Form/Input/date/src/__snapshots__/DateInput.spec.js.snap +++ b/packages/Form/Input/date/src/__snapshots__/DateInput.spec.js.snap @@ -1,56 +1,49 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[` renders DateInput correctly 1`] = ` -
+
- -
-
+ +
- +
+ +
+
-
-
-
+ `;