FEAT: create FieldWarnings component and update FieldErrors (#2686)

* feat: create field warnings component

* chore: refactor field errors story texts

* chore: refactor field warning doc texts

* fix: implement feedback

* fix: implement feedback

* Update .changeset/blue-news-burn.md

Co-authored-by: Carlos Cortizas <97907068+CarlosCortizasCT@users.noreply.github.com>

* Update packages/components/field-errors/src/field-errors.story.js

Co-authored-by: Douglas Egiemeh <douglasegiemeh@gmail.com>

* Update packages/components/field-errors/src/field-errors.story.js

Co-authored-by: Douglas Egiemeh <douglasegiemeh@gmail.com>

---------

Co-authored-by: Carlos Cortizas <97907068+CarlosCortizasCT@users.noreply.github.com>
Co-authored-by: Douglas Egiemeh <douglasegiemeh@gmail.com>

.changeset/blue-news-burn.md

@@ -0,0 +1,5 @@
+---
+'@commercetools-uikit/messages': minor
+---
+
+We have introduced a new property (`id`) so consumers can provide an HTML id to be included in the element containing the message.

.changeset/slow-carrots-appear.md

@@ -0,0 +1,5 @@
+---
+'@commercetools-uikit/field-warnings': major
+---
+
+Create field warnings component

packages/components/field-errors/README.md

@@ -46,7 +46,7 @@ const Example = () => (
     renderError={(key) => {
       switch (key) {
         case 'duplicate':
-          return 'This thing is already in use. It must be unique.';
+          return 'This is already in use. It must be unique.';
         default:
           // When null is returned then the default error handling from
           // renderDefaultError will kick in for that error.
@@ -56,7 +56,7 @@ const Example = () => (
     renderDefaultError={(key) => {
       switch (key) {
         case 'minLength':
-          return 'This thing is too short.';
+          return 'This is too short.';
         default:
           // When null is returned then the error handling defined in
           // FieldError itself will kick in

packages/components/field-errors/docs/usage-example.js

@@ -14,7 +14,7 @@ const Example = () => (
     renderError={(key) => {
       switch (key) {
         case 'duplicate':
-          return 'This thing is already in use. It must be unique.';
+          return 'This is already in use. It must be unique.';
         default:
           // When null is returned then the default error handling from
           // renderDefaultError will kick in for that error.
@@ -24,7 +24,7 @@ const Example = () => (
     renderDefaultError={(key) => {
       switch (key) {
         case 'minLength':
-          return 'This thing is too short.';
+          return 'This is too short.';
         default:
           // When null is returned then the error handling defined in
           // FieldError itself will kick in

packages/components/field-errors/src/field-errors.story.js

@@ -0,0 +1,49 @@
+import { storiesOf } from '@storybook/react';
+import { withKnobs, boolean, text, object } from '@storybook/addon-knobs/react';
+import Section from '../../../../docs/.storybook/decorators/section';
+import Readme from '../README.md';
+import FieldErrors from './field-errors';
+
+storiesOf('Components|FieldError', module)
+  .addDecorator(withKnobs)
+  .addParameters({
+    readme: {
+      // Show readme at the addons panel
+      sidebar: Readme,
+    },
+  })
+  .add('FieldError', () => {
+    return (
+      <Section>
+        <FieldErrors
+          id={text('id', 'error-id')}
+          errors={object('errors', {
+            missing: true,
+            duplicate: true,
+            minLength: true,
+          })}
+          renderError={(key) => {
+            switch (key) {
+              case 'duplicate':
+                return 'This is already in use. It must be unique.';
+              default:
+                // When null is returned then the default error handling from
+                // renderDefaultError will kick in for that error.
+                return null;
+            }
+          }}
+          renderDefaultError={(key) => {
+            switch (key) {
+              case 'minLength':
+                return 'This is too short.';
+              default:
+                // When null is returned then the error handling defined in
+                // FieldError itself will kick in
+                return null;
+            }
+          }}
+          isVisible={boolean('isVisible', true)}
+        />
+      </Section>
+    );
+  });

packages/components/field-warnings/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 commercetools GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/components/field-warnings/README.md

@@ -0,0 +1,93 @@
+<!-- THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. -->
+<!-- This file is created by the `yarn generate-readme` script. -->
+
+# FieldWarnings
+
+## Description
+
+The `FieldWarnings` component allows the user to display field warnings.
+
+## Installation
+
+```
+yarn add @commercetools-uikit/field-warnings
+```
+
+```
+npm --save install @commercetools-uikit/field-warnings
+```
+
+Additionally install the peer dependencies (if not present)
+
+```
+yarn add react react-intl
+```
+
+```
+npm --save install react react-intl
+```
+
+## Usage
+
+```jsx
+import FieldWarnings from '../src/field-warnings';
+
+const Example = () => (
+  // This example shows how to handle custom warnings on top of the
+  // predefined warnings of FieldWarnings which this component and other
+  // Field components use under the hood.
+  <FieldWarnings
+    warnings={{
+      customWarning: true,
+      defaultWarning: true,
+    }}
+    isVisible={true}
+    renderWarning={(key) => {
+      switch (key) {
+        case 'customWarning':
+          return 'The current password is weak, You may want to use a stronger password';
+        default:
+          // When null is returned then the default warning handling from
+          // renderDefaultWarning will kick in for that warning.
+          return null;
+      }
+    }}
+    renderDefaultWarning={(key) => {
+      switch (key) {
+        case 'defaultWarning':
+          return 'Always use a strong password';
+        default:
+          // When null is returned then the warning handling defined in
+          // FieldWarning itself will kick in
+          return null;
+      }
+    }}
+  />
+);
+
+export default Example;
+```
+
+## Properties
+
+| Props                  | Type                                                             | Required | Default | Description                                                                                                                                                                                                                                                |
+| ---------------------- | ---------------------------------------------------------------- | :------: | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                   | `string`                                                         |          |         | ID of the warning field.                                                                                                                                                                                                                                   |
+| `warnings`             | `Record`                                                         |          |         | List of warnings. Only entries with truthy values will count as active warnings.                                                                                                                                                                           |
+| `isVisible`            | `boolean`                                                        |          |         | `true` when the warning messages should be rendered. Usually you'd pass in a `touched` state of fields.                                                                                                                                                    |
+| `renderWarning`        | `Function`<br/>[See signature.](#signature-renderWarning)        |          |         | Function which gets called with each warning key (from the `warnings` prop) and may render a warning message or return `null` to hand the warning handling off to `renderDefaultWarning`.                                                                  |
+| `renderDefaultWarning` | `Function`<br/>[See signature.](#signature-renderDefaultWarning) |          |         | Function which gets called with each warning key (from the `warnings` prop) for which `renderWarning` returned `null`.&#xA;It may render a warning message or return `null` to hand the warning handling off to `FieldWarning`s built-in warning handling. |
+
+## Signatures
+
+### Signature `renderWarning`
+
+```ts
+(key: string, warning?: boolean) => ReactNode;
+```
+
+### Signature `renderDefaultWarning`
+
+```ts
+(key: string, warning?: boolean) => ReactNode;
+```

packages/components/field-warnings/docs/description.md

@@ -0,0 +1 @@
+The `FieldWarnings` component allows the user to display field warnings.

packages/components/field-warnings/docs/usage-example.js

@@ -0,0 +1,36 @@
+import FieldWarnings from '../src/field-warnings';
+
+const Example = () => (
+  // This example shows how to handle custom warnings on top of the
+  // predefined warnings of FieldWarnings which this component and other
+  // Field components use under the hood.
+  <FieldWarnings
+    warnings={{
+      customWarning: true,
+      defaultWarning: true,
+    }}
+    isVisible={true}
+    renderWarning={(key) => {
+      switch (key) {
+        case 'customWarning':
+          return 'The current password is weak, You may want to use a stronger password';
+        default:
+          // When null is returned then the default warning handling from
+          // renderDefaultWarning will kick in for that warning.
+          return null;
+      }
+    }}
+    renderDefaultWarning={(key) => {
+      switch (key) {
+        case 'defaultWarning':
+          return 'Always use a strong password';
+        default:
+          // When null is returned then the warning handling defined in
+          // FieldWarning itself will kick in
+          return null;
+      }
+    }}
+  />
+);
+
+export default Example;

packages/components/field-warnings/index.ts

@@ -0,0 +1,6 @@
+// This file exists  because we want jest to use our non-compiled code to run tests
+// if this file is missing, and you have a `module` or `main` that points to a non-existing file
+// (ie, a bundle that hasn't been built yet) then jest will fail if the bundle is not yet built.
+// all apps should export all their named exports from their root index.js
+export { default } from './src';
+export * from './src';

packages/components/field-warnings/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@commercetools-uikit/field-warnings",
+  "description": "Renders warnings based on configuration.",
+  "version": "1.0.0",
+  "bugs": "https://github.com/commercetools/ui-kit/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/commercetools/ui-kit.git",
+    "directory": "packages/components/field-warnings"
+  },
+  "homepage": "https://uikit.commercetools.com",
+  "keywords": ["javascript", "typescript", "design-system", "react", "uikit"],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "main": "dist/commercetools-uikit-field-warnings.cjs.js",
+  "module": "dist/commercetools-uikit-field-warnings.esm.js",
+  "files": ["dist"],
+  "dependencies": {
+    "@babel/runtime": "^7.20.13",
+    "@babel/runtime-corejs3": "^7.20.13",
+    "@commercetools-uikit/messages": "16.12.1",
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "prop-types": "15.8.1"
+  },
+  "devDependencies": {
+    "react": "17.0.2",
+    "react-intl": "^6.3.2"
+  },
+  "peerDependencies": {
+    "react": "17.x",
+    "react-intl": "6.x"
+  }
+}

packages/components/field-warnings/src/export-types.ts

@@ -0,0 +1 @@
+export type { TFieldWarningsProps, TFieldWarnings } from './field-warnings';

packages/components/field-warnings/src/field-warnings.spec.js

@@ -0,0 +1,43 @@
+import FieldWarnings from './field-warnings';
+import { screen, render } from '../../../../test/test-utils';
+
+describe('when not visible', () => {
+  it('should render no warnings', () => {
+    const { container } = render(
+      <FieldWarnings warninings={{}} isVisible={false} />
+    );
+    expect(container).toBeEmptyDOMElement();
+  });
+});
+
+describe('warning renderers', () => {
+  it('should give highest importance to renderWarning', () => {
+    render(
+      <FieldWarnings
+        warnings={{ customWarning: true }}
+        isVisible={true}
+        renderWarning={(key) =>
+          key === 'customWarning' ? 'RENDER_WARNING' : null
+        }
+        renderDefaultWarning={(key) =>
+          key === 'defaultWarning' ? 'RENDER_DEFAULT_WARNING' : null
+        }
+      />
+    );
+    expect(screen.getByText('RENDER_WARNING')).toBeInTheDocument();
+  });
+
+  it('should give second highest importance to renderDefaultWarning', () => {
+    render(
+      <FieldWarnings
+        warnings={{ defaultWarning: true }}
+        isVisible={true}
+        renderWarning={() => null}
+        renderDefaultWarning={(key) =>
+          key === 'defaultWarning' ? 'RENDER_DEFAULT_WARNING' : null
+        }
+      />
+    );
+    expect(screen.getByText('RENDER_DEFAULT_WARNING')).toBeInTheDocument();
+  });
+});

packages/components/field-warnings/src/field-warnings.story.js

@@ -0,0 +1,36 @@
+import { storiesOf } from '@storybook/react';
+import { withKnobs, boolean, text, object } from '@storybook/addon-knobs/react';
+import Section from '../../../../docs/.storybook/decorators/section';
+import Readme from '../README.md';
+import FieldWarning from './field-warnings';
+
+storiesOf('Components|FieldWarning', module)
+  .addDecorator(withKnobs)
+  .addParameters({
+    readme: {
+      // Show readme at the addons panel
+      sidebar: Readme,
+    },
+  })
+  .add('FieldWarning', () => {
+    return (
+      <Section>
+        <FieldWarning
+          id={text('id', 'warning-id')}
+          warnings={object('warnings', {
+            customWarning: true,
+            defaultWarning: true,
+          })}
+          renderWarning={(key) =>
+            key === 'customWarning'
+              ? 'The current password is weak, You may want to use a stronger password'
+              : null
+          }
+          renderDefaultWarning={(key, warning) =>
+            key === 'defaultWarning' ? 'Always use a strong password' : null
+          }
+          isVisible={boolean('isVisible', true)}
+        />
+      </Section>
+    );
+  });