@transferwise/components 0.0.0-experimental-7ad2fa6 → 0.0.0-experimental-6f378c9

package/src/utilities/deprecatedProperty/{deprecatedProperty.spec.js → deprecatedProperty.spec.ts}

@@ -5,6 +5,7 @@ const props = { prop1: 'prop1', prop2: 'prop2' };
 const validator = jest.fn();
 
 describe('deprecated', () => {
+  const component = 'Test';
   const origWarn = console.warn;
   let mockedWarn;
 
@@ -22,11 +23,10 @@ describe('deprecated', () => {
   });
 
   describe('if prop has been listed as deprecated', () => {
+    const propertyName = 'prop1';
+
     it('calls console.warn with the correct message', () => {
-      const component = 'Test';
       const newProperty = 'newProp';
-      const propertyName = 'prop1';
-
       const expiryDate = new Date('01-01-2000');
       const expiryDateString = expiryDate.toLocaleString('en-GB', {
         year: 'numeric',
@@ -42,10 +42,6 @@ describe('deprecated', () => {
     });
 
     it('calls console.warn with correct message if newProp is not provided', () => {
-      const component = 'Test';
-
-      const propertyName = 'prop1';
-
       const expiryDate = new Date('01-01-2000');
       const expiryDateString = expiryDate.toLocaleString('en-GB', {
         year: 'numeric',
@@ -61,8 +57,6 @@ describe('deprecated', () => {
     });
 
     it('calls console.warn with correct message if message is provided', () => {
-      const component = 'Test';
-      const propertyName = 'prop1';
       const message = 'Some custom message.';
 
       deprecated(validator, { component, message })(props, propertyName);
@@ -74,15 +68,15 @@ describe('deprecated', () => {
   });
 
   describe('if prop has not been listed as deprecated', () => {
+    const propertyName = 'prop3';
+
     it('calls validator with props', () => {
-      const propertyName = 'prop3';
-      deprecated(validator, {})(props, propertyName);
+      deprecated(validator, { component })(props, propertyName);
       expect(console.warn).not.toHaveBeenCalled();
     });
 
     it('calls validator with expected args', () => {
-      const propertyName = 'prop3';
-      deprecated(validator, {})(props, propertyName);
+      deprecated(validator, { component })(props, propertyName);
       expect(validator).toHaveBeenCalledWith({ prop1: 'prop1', prop2: 'prop2' }, 'prop3');
     });
   });

package/src/utilities/deprecatedProperty/{deprecatedProperty.js → deprecatedProperty.ts}

@@ -1,6 +1,22 @@
 import { logActionRequired } from '../logActionRequired';
 
-const deprecatedMessage = ({ component, propName, message, expiryDate }) => {
+type DeprecatedMessageType = {
+  component: string;
+  propName: string;
+  message: string;
+  expiryDate?: Date;
+};
+
+type ValidatorType = (props: Record<string, any>, propName: string, ...rest: any[]) => Error | null;
+
+type DeprecatedOptionsType = {
+  component: string;
+  message?: string;
+  newProp?: string;
+  expiryDate?: Date;
+};
+
+const deprecatedMessage = ({ component, propName, message, expiryDate }: DeprecatedMessageType) => {
   const messages = [`${component} has deprecated the use of ${propName}.`];
 
   if (message) {
@@ -21,11 +37,14 @@ const deprecatedMessage = ({ component, propName, message, expiryDate }) => {
 };
 
 const deprecated =
-  (validator, { component, message = '', newProp: newProperty = null, expiryDate = null }) =>
-  (props, propertyName, ...rest) => {
+  (
+    validator: ValidatorType,
+    { component, message = '', newProp: newProperty, expiryDate }: DeprecatedOptionsType,
+  ) =>
+  (props: Record<string, any>, propertyName: string, ...rest: any[]) => {
     const newPropertyMessage = newProperty ? `Please use ${newProperty} instead.` : message;
 
-    if (props[propertyName] != null && typeof props[propertyName] !== 'undefined') {
+    if (props[propertyName] !== null && props[propertyName] !== undefined) {
       logActionRequired(
         deprecatedMessage({
           component,

package/src/utilities/{logActionRequired.js → logActionRequired.ts}

@@ -1,11 +1,11 @@
-export function logActionRequired(message) {
+export function logActionRequired(message: string) {
   if (typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production') {
     // eslint-disable-next-line no-console
     console.warn(message);
   }
 }
 
-export function logActionRequiredIf(message, conditional) {
+export function logActionRequiredIf(message: string, conditional: boolean) {
   if (conditional) {
     logActionRequired(message);
   }

package/build/types/common/fakeEvents.d.ts

@@ -1,23 +0,0 @@
-export declare const fakeEvent: () => {
-    nativeEvent: {
-        stopImmediatePropagation(): void;
-    };
-    stopPropagation(): void;
-    preventDefault(): void;
-};
-export declare const fakeKeyDownEventForKey: (key: string) => {
-    key: string;
-    nativeEvent: {
-        stopImmediatePropagation(): void;
-    };
-    stopPropagation(): void;
-    preventDefault(): void;
-};
-export declare const fakeKeyDownEvent: (eventAttribute?: {}) => {
-    nativeEvent: {
-        stopImmediatePropagation(): void;
-    };
-    stopPropagation(): void;
-    preventDefault(): void;
-};
-//# sourceMappingURL=fakeEvents.d.ts.map

package/build/types/common/fakeEvents.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"fakeEvents.d.ts","sourceRoot":"","sources":["../../../src/common/fakeEvents.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS;;;;;;CAIpB,CAAC;AAEH,eAAO,MAAM,sBAAsB,QAAS,MAAM;;;;;;;CAGhD,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;CAG3B,CAAC"}

package/src/inputWithDisplayFormat/InputWithDisplayFormat.story.js

@@ -1,85 +0,0 @@
-import { text } from '@storybook/addon-knobs';
-import { userEvent, within } from '@storybook/test';
-
-import InputWithDisplayFormat from '.';
-import { Field } from '../field/Field';
-
-export default {
-  component: InputWithDisplayFormat,
-  title: 'Forms/InputWithDisplayFormat',
-};
-
-export const Basic = () => {
-  const placeholder = text('Placeholder', '**-**-**');
-  const displayPattern = text('DisplayPattern', '**-**-**');
-
-  return (
-    <Field label="Display pattern is controlled via knobs" id="Basic">
-      <InputWithDisplayFormat
-        id="Basic"
-        placeholder={placeholder}
-        displayPattern={displayPattern}
-        className="form-control"
-        onChange={(v) => console.log(v)}
-        onBlur={(v) => console.log(v)}
-        onFocus={(v) => console.log(v)}
-      />
-    </Field>
-  );
-};
-
-const Template = (args) => {
-  const placeholder = args.pattern;
-  const displayPattern = args.pattern;
-  const label = args.label;
-  const id = label.replaceAll(' ', '-').toLowerCase();
-
-  return (
-    <Field label={label} id={id}>
-      <InputWithDisplayFormat
-        id={id}
-        placeholder={placeholder}
-        displayPattern={displayPattern}
-        className="form-control"
-        onChange={(v) => console.log(v)}
-        onBlur={(v) => console.log(v)}
-        onFocus={(v) => console.log(v)}
-      />
-    </Field>
-  );
-};
-
-export const CardNumber = Template.bind({});
-CardNumber.args = {
-  label: 'Card Number',
-  pattern: '**** **** **** **** ***',
-};
-
-export const CVC = Template.bind({});
-CVC.args = {
-  label: 'CVC',
-  pattern: '***',
-};
-
-export const ExpiryDate = Template.bind({});
-ExpiryDate.args = {
-  label: 'Expiry Date',
-  pattern: '** / **',
-};
-
-export const SecurityPin = Template.bind({});
-SecurityPin.args = {
-  label: 'Security Pin',
-  pattern: '*-*-*-*-*-*',
-};
-
-export const SecurityPinPlay = Template.bind({});
-SecurityPinPlay.args = {
-  label: 'Security Pin',
-  pattern: '*-*-*-*-*-*',
-};
-
-SecurityPinPlay.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  await userEvent.type(canvas.getByPlaceholderText('*-*-*-*-*-*'), '123456');
-};