Merge pull request #57 from TRIPTYK/prefab-input-email

Prefab input email
TRIPTYK · Aug 30, 2024 · 99b6cc0 · 99b6cc0
2 parents 6c7af43 + 2663e8d
commit 99b6cc0
Show file tree

Hide file tree

Showing 7 changed files with 637 additions and 437 deletions.
diff --git a/.../tests/integration/components/ember-input-validation/prefabs/tpk-validation-email-test.ts b/.../tests/integration/components/ember-input-validation/prefabs/tpk-validation-email-test.ts
@@ -0,0 +1,63 @@
+import { module, test } from 'qunit';
+import {
+  render,
+  settled,
+  triggerEvent,
+  type TestContext,
+} from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import { ImmerChangeset } from 'ember-immer-changeset';
+import { setupRenderingTest } from 'ember-qunit';
+import { setupIntl } from 'ember-intl/test-support';
+
+module(
+  'Integreation | Component | Prefabs | tpk-validation-email',
+  function (hooks) {
+    setupRenderingTest(hooks);
+    setupIntl(hooks, 'fr-fr');
+
+    async function renderComponent() {
+      await render(hbs`
+      <Prefabs::TpkValidationEmail
+        @changeset={{this.changeset}}
+        @validationField="email"
+        @label="Email validation field"
+      />
+    `);
+    }
+
+    function setupChangeset(this: TestContext, email: string) {
+      const changeset = new ImmerChangeset({
+        email,
+      });
+
+      this.set('changeset', changeset);
+      return changeset;
+    }
+
+    test('the type of the input is email', async function (assert) {
+      setupChangeset.call(this, 'email');
+
+      await renderComponent();
+      assert.dom('input').hasAttribute('type', 'email');
+    });
+
+    test('It changes data-has-error attribute on error', async function (assert) {
+      const changeset = setupChangeset.call(this, '');
+
+      await renderComponent();
+
+      changeset.addError({
+        message: 'required',
+        value: '',
+        originalValue: '',
+        key: 'email',
+      });
+      await settled();
+      assert.dom('[data-test-tpk-input-input]').hasNoText();
+      assert
+        .dom('[data-test-tpk-input]')
+        .hasAttribute('data-has-error', 'true');
+    });
+  },
+);
diff --git a/doc-app/tests/integration/components/ember-input-validation/tpk-validation-input-test.ts b/doc-app/tests/integration/components/ember-input-validation/tpk-validation-input-test.ts
@@ -11,9 +11,11 @@ import {
   settled,
 } from '@ember/test-helpers';
 import { ImmerChangeset } from 'ember-immer-changeset';
+import { setupIntl } from 'ember-intl/test-support';
 
 module('Integration | Component | tpk-validation-input', function (hooks) {
   setupRenderingTest(hooks);
+  setupIntl(hooks, 'fr-fr');
 
   async function renderComponent() {
     await render(

diff --git a/packages/ember-input-validation/package.json b/packages/ember-input-validation/package.json
@@ -53,6 +53,7 @@
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
     "ember-concurrency": "~4.0.2",
+    "ember-intl": "~6.5.5",
     "ember-modifier": "~4.1.0",
     "ember-test-selectors": "~6.0.0",
     "yup": "~1.4.0"
@@ -109,6 +110,8 @@
     "main": "addon-main.cjs",
     "app-js": {
       "./components/base.js": "./dist/_app_/components/base.js",
+      "./components/prefabs/tpk-validation-email.js": "./dist/_app_/components/prefabs/tpk-validation-email.js",
+      "./components/prefabs/tpk-validation-errors.js": "./dist/_app_/components/prefabs/tpk-validation-errors.js",
       "./components/tpk-form.js": "./dist/_app_/components/tpk-form.js",
       "./components/tpk-validation-checkbox.js": "./dist/_app_/components/tpk-validation-checkbox.js",
       "./components/tpk-validation-datepicker.js": "./dist/_app_/components/tpk-validation-datepicker.js",

diff --git a/packages/ember-input-validation/src/components/prefabs/tpk-validation-email.gts b/packages/ember-input-validation/src/components/prefabs/tpk-validation-email.gts
@@ -0,0 +1,55 @@
+import type { TpkInputSignature } from '@triptyk/ember-input/components/tpk-input';
+import { hash } from '@ember/helper';
+import TpkValidationInputComponent, {
+  type TpkValidationInputComponentSignature,
+} from '../tpk-validation-input.gts';
+import {
+  type BaseValidationSignature,
+  BaseValidationComponent,
+} from '../base.ts';
+import TpkValidationErrorsComponent from './tpk-validation-errors.gts';
+
+export interface TpkValidationEmailComponentSignature
+  extends BaseValidationSignature {
+  Args: Omit<
+    TpkValidationInputComponentSignature['Args'],
+    | 'type'
+    | 'min'
+    | 'max'
+    | 'step'
+    | 'mask'
+    | 'unmaskValue'
+    | 'maskOptions'
+    | 'mask'
+  >;
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLDivElement;
+}
+
+export default class TpkValidationEmailComponent extends BaseValidationComponent<TpkValidationEmailComponentSignature> {
+  <template>
+    <TpkValidationInputComponent
+      @type='email'
+      @label={{@label}}
+      @classless={{@classless}}
+      @disabled={{@disabled}}
+      @changeEvent={{@changeEvent}}
+      @placeholder={{@placeholder}}
+      @validationField={{@validationField}}
+      @changeset={{@changeset}}
+      @mandatory={{@mandatory}}
+      ...attributes
+      data-test-input='email'
+      as |V|
+    >
+      <V.Label />
+      <V.Input />
+      <TpkValidationErrorsComponent
+        @errors={{V.errors}}
+        @classless={{@classless}}
+      />
+    </TpkValidationInputComponent>
+  </template>
+}
diff --git a/packages/ember-input-validation/src/components/prefabs/tpk-validation-errors.gts b/packages/ember-input-validation/src/components/prefabs/tpk-validation-errors.gts
@@ -0,0 +1,35 @@
+import { helper } from '@ember/component/helper';
+import Component from '@glimmer/component';
+import { htmlSafe as HS } from '@ember/template';
+import { t } from 'ember-intl';
+
+export interface TpkValidationErrorsComponentSignature {
+  Args: {
+    errors: any;
+    classless?: boolean;
+  };
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLDivElement;
+}
+
+export default class TpkValidationErrorsComponent extends Component<TpkValidationErrorsComponentSignature> {
+  htmlSafe = helper(function htmlSafe(params: [string]) {
+    return HS(params.join());
+  });
+
+  <template>
+    <aside class={{unless @classless "tpk-validation-errors"}}>
+      {{#each @errors as |error|}}
+        <span>
+          {{#if error.message}}
+            {{this.htmlSafe (t error.message error.params)}}
+          {{else}}
+            {{error}}
+          {{/if}}
+        </span>
+      {{/each}}
+    </aside>
+  </template>
+}
diff --git a/packages/ember-input-validation/src/components/tpk-validation-input.gts b/packages/ember-input-validation/src/components/tpk-validation-input.gts
@@ -32,7 +32,7 @@ export interface TpkValidationInputComponentSignature
       {
         Input?: TpkInputSignature['Blocks']['default'][0]['Input'];
         Label?: TpkInputSignature['Blocks']['default'][0]['Label'];
-        errors: TpkValidationInputComponent['errors'];
+        errors?: TpkValidationInputComponent['errors'];
         hasError: TpkValidationInputComponent['hasError'];
         firstError: TpkValidationInputComponent['firstError'];
       },
@@ -115,11 +115,7 @@ export default class TpkValidationInputComponent extends BaseValidationComponent
           maxlength={{@maxlength}}
           data-test-input-not-yielded
         />
-        {{yield
-          (hash
-            errors=this.errors hasError=this.hasError firstError=this.firstError
-          )
-        }}
+        {{yield (hash errors=this.errors hasError=this.hasError firstError=this.firstError)}}
       {{/if}}
       {{#if @showTogglePasswordButton}}
         <button