feat(quantity): update formatting

ovh · Feb 5, 2024 · 6c4f421 · 6c4f421
1 parent fbb9713
commit 6c4f421
Show file tree

Hide file tree

Showing 8 changed files with 100 additions and 62 deletions.
diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
@@ -1217,10 +1217,24 @@ export namespace Components {
          */
         "value"?: number | undefined;
     }
+    /**
+     * create type that correspond to our input component.
+     * doesn't work with :
+     * ```
+     * // not working
+     * import '@ovhcloud/ods-stencil/components/button';
+     * // not working
+     * import '@ovhcloud/ods-stencil/components/input/dist/types/components';
+     * // OK!
+     * import { OsdsInput } from '@ovhcloud/ods-stencil/components/input/dist/types';
+     * type HTMLOsdsInputElement = (OsdsInput & HTMLElement);
+     * ```
+     * with this, we cannot build
+     * @ovhcloud /ods-components ("Component Tag Name "osds-input" Must Be Unique" error)
+     */
     interface OsdsQuantity {
         /**
           * Quantity is disabled or not
-          * @see OdsQuantityAttributes.disabled
          */
         "disabled"?: boolean;
     }
@@ -2439,6 +2453,21 @@ declare global {
         prototype: HTMLOsdsProgressBarElement;
         new (): HTMLOsdsProgressBarElement;
     };
+    /**
+     * create type that correspond to our input component.
+     * doesn't work with :
+     * ```
+     * // not working
+     * import '@ovhcloud/ods-stencil/components/button';
+     * // not working
+     * import '@ovhcloud/ods-stencil/components/input/dist/types/components';
+     * // OK!
+     * import { OsdsInput } from '@ovhcloud/ods-stencil/components/input/dist/types';
+     * type HTMLOsdsInputElement = (OsdsInput & HTMLElement);
+     * ```
+     * with this, we cannot build
+     * @ovhcloud /ods-components ("Component Tag Name "osds-input" Must Be Unique" error)
+     */
     interface HTMLOsdsQuantityElement extends Components.OsdsQuantity, HTMLStencilElement {
     }
     var HTMLOsdsQuantityElement: {
@@ -3860,10 +3889,24 @@ declare namespace LocalJSX {
          */
         "value"?: number | undefined;
     }
+    /**
+     * create type that correspond to our input component.
+     * doesn't work with :
+     * ```
+     * // not working
+     * import '@ovhcloud/ods-stencil/components/button';
+     * // not working
+     * import '@ovhcloud/ods-stencil/components/input/dist/types/components';
+     * // OK!
+     * import { OsdsInput } from '@ovhcloud/ods-stencil/components/input/dist/types';
+     * type HTMLOsdsInputElement = (OsdsInput & HTMLElement);
+     * ```
+     * with this, we cannot build
+     * @ovhcloud /ods-components ("Component Tag Name "osds-input" Must Be Unique" error)
+     */
     interface OsdsQuantity {
         /**
           * Quantity is disabled or not
-          * @see OdsQuantityAttributes.disabled
          */
         "disabled"?: boolean;
     }
@@ -4665,6 +4708,21 @@ declare module "@stencil/core" {
             "osds-popover": LocalJSX.OsdsPopover & JSXBase.HTMLAttributes<HTMLOsdsPopoverElement>;
             "osds-popover-content": LocalJSX.OsdsPopoverContent & JSXBase.HTMLAttributes<HTMLOsdsPopoverContentElement>;
             "osds-progress-bar": LocalJSX.OsdsProgressBar & JSXBase.HTMLAttributes<HTMLOsdsProgressBarElement>;
+            /**
+             * create type that correspond to our input component.
+             * doesn't work with :
+             * ```
+             * // not working
+             * import '@ovhcloud/ods-stencil/components/button';
+             * // not working
+             * import '@ovhcloud/ods-stencil/components/input/dist/types/components';
+             * // OK!
+             * import { OsdsInput } from '@ovhcloud/ods-stencil/components/input/dist/types';
+             * type HTMLOsdsInputElement = (OsdsInput & HTMLElement);
+             * ```
+             * with this, we cannot build
+             * @ovhcloud /ods-components ("Component Tag Name "osds-input" Must Be Unique" error)
+             */
             "osds-quantity": LocalJSX.OsdsQuantity & JSXBase.HTMLAttributes<HTMLOsdsQuantityElement>;
             "osds-radio": LocalJSX.OsdsRadio & JSXBase.HTMLAttributes<HTMLOsdsRadioElement>;
             "osds-radio-button": LocalJSX.OsdsRadioButton & JSXBase.HTMLAttributes<HTMLOsdsRadioButtonElement>;

diff --git a/packages/components/src/quantity/src/components/osds-quantity/core/controller.spec.ts b/packages/components/src/quantity/src/components/osds-quantity/core/controller.spec.ts
@@ -1,10 +1,5 @@
-import type { OdsLoggerSpyReferences } from '@ovhcloud/ods-common-testing';
 import type { OsdsInput } from '../../../../../input/src';
-
-import { Ods, OdsLogger } from '@ovhcloud/ods-common-core';
-import { OdsClearLoggerSpy, OdsInitializeLoggerSpy } from '@ovhcloud/ods-common-testing';
 import { ODS_INPUT_TYPE } from '../../../../../input/src';
-
 import { OdsQuantityController } from './controller';
 import { OsdsQuantity } from '../osds-quantity';
 
@@ -21,9 +16,6 @@ describe('spec:ods-quantity-controller', () => {
   let spyInputAddEventListener: jest.SpyInstance<void>;
   let spyInputRemoveEventListener: jest.SpyInstance<void>;
   let spyOnProcessInputValueChange: jest.SpyInstance<void, jest.ArgsType<OdsQuantityController['processInputValueChange']>>;
-  let loggerSpyReferences: OdsLoggerSpyReferences;
-
-  Ods.instance().logging(false);
 
   function setup(attributes: Partial<OsdsQuantity> = {}) {
     component = new OdsQuantityMock(attributes);
@@ -32,15 +24,10 @@ describe('spec:ods-quantity-controller', () => {
   }
 
   beforeEach(() => {
-    const loggerMocked = new OdsLogger('myLoggerMocked');
-    loggerSpyReferences = OdsInitializeLoggerSpy({
-      loggerMocked: loggerMocked as never,
-      spiedClass: OdsQuantityController,
-    });
+    jest.spyOn(console, 'warn');
   });
 
   afterEach(() => {
-    OdsClearLoggerSpy(loggerSpyReferences);
     jest.clearAllMocks();
   });
 
@@ -195,8 +182,8 @@ describe('spec:ods-quantity-controller', () => {
           controller.initInput();
 
           expect(component.input).toBe(null);
-          expect(loggerSpyReferences.methodSpies.warn).toHaveBeenCalledWith(warnExpected);
-          expect(loggerSpyReferences.methodSpies.warn).toHaveBeenCalledTimes(1);
+          expect(console.warn).toHaveBeenCalledWith(warnExpected);
+          expect(console.warn).toHaveBeenCalledTimes(1);
         });
 
         it('should not init input if osds-input type is not number', () => {
@@ -208,8 +195,8 @@ describe('spec:ods-quantity-controller', () => {
           controller.initInput();
 
           expect(component.input).toBe(null);
-          expect(loggerSpyReferences.methodSpies.warn).toHaveBeenCalledWith(warnExpected);
-          expect(loggerSpyReferences.methodSpies.warn).toHaveBeenCalledTimes(1);
+          expect(console.warn).toHaveBeenCalledWith(warnExpected);
+          expect(console.warn).toHaveBeenCalledTimes(1);
         });
 
         it('should not init input if vanilla input type is not number', () => {
@@ -221,8 +208,8 @@ describe('spec:ods-quantity-controller', () => {
           controller.initInput();
 
           expect(component.input).toBe(null);
-          expect(loggerSpyReferences.methodSpies.warn).toHaveBeenCalledWith(warnExpected);
-          expect(loggerSpyReferences.methodSpies.warn).toHaveBeenCalledTimes(1);
+          expect(console.warn).toHaveBeenCalledWith(warnExpected);
+          expect(console.warn).toHaveBeenCalledTimes(1);
         });
       });
     });
@@ -435,8 +422,8 @@ describe('spec:ods-quantity-controller', () => {
 
         expect(component.minus).toBe(null);
         expect(component.plus).toBe(null);
-        expect(loggerSpyReferences.methodSpies.warn).toHaveBeenCalledWith(warnExpected);
-        expect(loggerSpyReferences.methodSpies.warn).toHaveBeenCalledTimes(1);
+        expect(console.warn).toHaveBeenCalledWith(warnExpected);
+        expect(console.warn).toHaveBeenCalledTimes(1);
       });
 
       it('should not init component.plus if slot is not set', () => {
@@ -450,8 +437,8 @@ describe('spec:ods-quantity-controller', () => {
 
         expect(component.minus).toBe(null);
         expect(component.plus).toBe(null);
-        expect(loggerSpyReferences.methodSpies.warn).toHaveBeenCalledWith(warnExpected);
-        expect(loggerSpyReferences.methodSpies.warn).toHaveBeenCalledTimes(1);
+        expect(console.warn).toHaveBeenCalledWith(warnExpected);
+        expect(console.warn).toHaveBeenCalledTimes(1);
       });
     });
   });

diff --git a/packages/components/src/quantity/src/components/osds-quantity/core/controller.ts b/packages/components/src/quantity/src/components/osds-quantity/core/controller.ts
@@ -1,12 +1,8 @@
 import type { OsdsQuantity } from '../osds-quantity';
 import type { OsdsInput } from '../../../../../input/src';
 
-import { OdsLogger } from '@ovhcloud/ods-common-core';
-
-
 class OdsQuantityController {
   private component: OsdsQuantity;
-  private readonly logger = new OdsLogger('OsdsQuantityController');
 
   constructor(component: OsdsQuantity) {
     this.component = component;
@@ -25,7 +21,7 @@ class OdsQuantityController {
         this.component.input.addEventListener('change', this.processInputValueChange.bind(this));
         this.component.input.addEventListener('blur', this.onBlur.bind(this));
       } else {
-        this.logger.warn('An input of type number is mandatory.');
+        console.warn('An input of type number is mandatory.');
       }
     }
   }
@@ -71,7 +67,6 @@ class OdsQuantityController {
   }
 
   setDisabledOnChildren(disabled: boolean) {
-    this.logger.log('disabled changed. update child', { disabled });
     if (this.component.minus && this.component.plus && this.component.input) {
       if (disabled) {
         this.setDisabled(this.component.minus, this.component.plus, this.component.input);
@@ -110,7 +105,7 @@ class OdsQuantityController {
       this.component.minus = minus;
       this.component.plus = plus;
     } else {
-      this.logger.warn('Minus and plus control are mandatory.');
+      console.warn('Minus and plus control are mandatory.');
     }
   }
 

diff --git a/...ages/components/src/quantity/src/components/osds-quantity/osds-quantity.e2e.screenshot.ts b/...ages/components/src/quantity/src/components/osds-quantity/osds-quantity.e2e.screenshot.ts
@@ -1,12 +1,9 @@
 import type { OdsQuantityAttribute } from './interfaces/attributes';
 import type { E2EElement, E2EPage } from '@stencil/core/testing';
-
 import { odsComponentAttributes2StringAttributes, odsStringAttributes2Str } from '@ovhcloud/ods-common-testing';
 import { newE2EPage } from '@stencil/core/testing';
-
 import { DEFAULT_ATTRIBUTE } from './constants/default-attributes';
 
-
 describe('e2e:osds-quantity', () => {
   let page: E2EPage;
   let el: E2EElement;

diff --git a/packages/components/src/quantity/src/components/osds-quantity/osds-quantity.e2e.ts b/packages/components/src/quantity/src/components/osds-quantity/osds-quantity.e2e.ts
@@ -1,12 +1,9 @@
 import type { OdsQuantityAttribute } from './interfaces/attributes';
 import type { E2EElement, E2EPage } from '@stencil/core/testing';
-
 import { odsComponentAttributes2StringAttributes, odsStringAttributes2Str } from '@ovhcloud/ods-common-testing';
 import { newE2EPage } from '@stencil/core/testing';
-
 import { DEFAULT_ATTRIBUTE } from './constants/default-attributes';
 
-
 describe('e2e:osds-quantity', () => {
   let page: E2EPage;
   let el: E2EElement;

diff --git a/packages/components/src/quantity/src/components/osds-quantity/osds-quantity.spec.ts b/packages/components/src/quantity/src/components/osds-quantity/osds-quantity.spec.ts
@@ -3,15 +3,12 @@ jest.mock('./core/controller'); // keep jest.mock before any
 import type { OdsQuantityAttribute } from './interfaces/attributes';
 import type { AnyHTMLElement } from '@stencil/core/internal';
 import type { SpecPage } from '@stencil/core/testing';
-
 import { OdsMockNativeMethod, odsComponentAttributes2StringAttributes, odsStringAttributes2Str, odsUnitTestAttribute } from '@ovhcloud/ods-common-testing';
 import { newSpecPage } from '@stencil/core/testing';
-
 import { DEFAULT_ATTRIBUTE } from './constants/default-attributes';
 import { OdsQuantityController } from './core/controller';
 import { OsdsQuantity } from './osds-quantity';
 
-
 describe('spec:osds-quantity', () => {
   let page: SpecPage;
   let root: (OsdsQuantity & AnyHTMLElement) | undefined;
@@ -20,7 +17,6 @@ describe('spec:osds-quantity', () => {
   let slotPlus: HTMLSlotElement | null | undefined;
   let slotUnnamed: HTMLSlotElement | null | undefined;
   let instance: OsdsQuantity;
-  // let loggerSpyReferences: OdsLoggerSpyReferences;
   let controller: OdsQuantityController;
 
   /** base html template (avoid boilerplate) */

diff --git a/packages/components/src/quantity/src/components/osds-quantity/osds-quantity.tsx b/packages/components/src/quantity/src/components/osds-quantity/osds-quantity.tsx
@@ -1,12 +1,9 @@
 import type { OdsQuantityAttribute } from './interfaces/attributes';
 import type { OsdsInput } from '../../../../input/src';
-
 import { Component, Element, Host, Listen, Prop, Watch, h } from '@stencil/core';
-
 import { DEFAULT_ATTRIBUTE } from './constants/default-attributes';
 import { OdsQuantityController } from './core/controller';
 
-
 /**
  * create type that correspond to our input component.
  * doesn't work with :
@@ -22,32 +19,31 @@ import { OdsQuantityController } from './core/controller';
  * with this, we cannot build @ovhcloud/ods-components ("Component Tag Name "osds-input" Must Be Unique" error)
  */
 
-/**
- * @slot minus - minus control
- * @slot (unnamed) - input
- * @slot plus - plus control
- */
 @Component({
-  tag: 'osds-quantity',
-  styleUrl: 'osds-quantity.scss',
   shadow: true,
+  styleUrl: 'osds-quantity.scss',
+  tag: 'osds-quantity',
 })
 export class OsdsQuantity implements OdsQuantityAttribute {
-  @Element() el!: HTMLElement;
-
   controller: OdsQuantityController = new OdsQuantityController(this);
   input: (OsdsInput & HTMLElement) | HTMLInputElement | null = null;
   minus: HTMLSlotElement | null = null;
   plus: HTMLSlotElement | null = null;
 
-  /** @see OdsQuantityAttributes.disabled */
+  @Element() el!: HTMLElement;
+
   @Prop({ reflect: true }) public disabled?: boolean = DEFAULT_ATTRIBUTE.disabled;
 
   @Watch('disabled')
   updateDisableOnChild(disabled: boolean) {
     this.controller.setDisabledOnChildren(disabled);
   }
 
+  @Listen('odsValueChange')
+  odsValueChangeHandler() {
+    this.controller.processInputValueChange();
+  }
+
   /** @see OdsQuantityBehavior.afterInit */
   afterInit(): void {
     this.controller.processInputValueChange();
@@ -76,11 +72,6 @@ export class OsdsQuantity implements OdsQuantityAttribute {
     this.onDestroy();
   }
 
-  @Listen('odsValueChange')
-  odsValueChangeHandler() {
-    this.controller.processInputValueChange();
-  }
-
   render() {
     return (
       <Host>

diff --git a/packages/examples/react-webpack/src/app/App.tsx b/packages/examples/react-webpack/src/app/App.tsx
@@ -2,7 +2,7 @@ import React, { FormEvent, useRef } from 'react';
 import { ODS_COUNTRY_ISO_CODE, ODS_LOCALE } from '@ovhcloud/ods-common-core';
 import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 import { ODS_BUTTON_SIZE, ODS_BUTTON_TYPE, ODS_BUTTON_VARIANT, ODS_INPUT_SIZE, ODS_INPUT_TYPE } from '@ovhcloud/ods-components';
-import { OsdsButton, OsdsDivider, OsdsInput, OsdsPassword, OsdsPhoneNumber, OsdsSelect, OsdsSelectOption, OsdsTextarea } from '@ovhcloud/ods-components/react';
+import { OsdsButton, OsdsDivider, OsdsInput, OsdsPassword, OsdsPhoneNumber, OsdsQuantity, OsdsSelect, OsdsSelectOption, OsdsTextarea } from '@ovhcloud/ods-components/react';
 
 const App = () => {
   const formRef = useRef(null);
@@ -56,6 +56,23 @@ const App = () => {
                        locale={ ODS_LOCALE.FR }
                        name="phone-number" />
 
+      <OsdsDivider />
+
+      <OsdsQuantity>
+        <OsdsButton slot="minus"
+                    type={ ODS_BUTTON_TYPE.button }>
+          -
+        </OsdsButton>
+
+        <OsdsInput name="quantity"
+                   type={ ODS_INPUT_TYPE.number } />
+
+        <OsdsButton slot="plus"
+                    type={ ODS_BUTTON_TYPE.button }>
+          +
+        </OsdsButton>
+      </OsdsQuantity>
+
       <input name="hidden-input"
              type="hidden"
              value="should be present in form data" />