react-native-ui-lib 8.0.1 → 8.1.0

package/src/components/image/image.api.json

@@ -98,7 +98,9 @@
   "docs": {
     "hero": {
       "title": "Image",
-      "description": "Image wrapper with extra functionality like source transform and assets support"
+      "description": "Renders images responsively, offers an optional contrast overlay, and displays placeholder on load errors.",
+      "type": "hero",
+      "layout": "horizontal"
     },
     "tabs": [
       {
@@ -114,6 +116,196 @@
             ]
           }
         ]
+      },
+      {
+        "title": "Overview",
+        "sections": [
+          {
+            "type": "section",
+            "title": "Image Overlays",
+            "description": "Overlays are added on top of an image in cases when extra contrast is needed to increase legebility of the content above the image."
+          },
+          {
+            "type": "section",
+            "title": "Usage Examples",
+            "description": "",
+            "content": [
+              {
+                "value": "\"https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Guidelines-to-Docs?node-id=14016-35810&embed-host=share\""
+              }
+            ]
+          },
+          {
+            "type": "table",
+            "columns": [
+              "Type",
+              "Preview"
+            ],
+            "items": [
+              {
+                "title": "Black Overlay (default)",
+                "description": "",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Image/Type%20tabel/Black%20Overlay%20(default).png"
+                  }
+                ]
+              },
+              {
+                "title": "White Overlay",
+                "description": "",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Image/Type%20tabel/White%20Overlay.png",
+                    "background": "A6ACB1"
+                  }
+                ]
+              }
+            ],
+            "title": "Types",
+            "description": ""
+          },
+          {
+            "type": "table",
+            "columns": [
+              "Type",
+              "Black Overlay (default)",
+              "White Overlay"
+            ],
+            "items": [
+              {
+                "title": "Gradient Top",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Image/Overlay%20Types/Gradient%20Top%20-%20black.png"
+                  },
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Image/Overlay%20Types/Gradient%20Top%20-%20white.png",
+                    "background": "A6ACB1"
+                  }
+                ],
+                "description": "markdown:\n**Black height:** 75% of image\n**White height:** 70% of image"
+              },
+              {
+                "title": "Gradient Bottom",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Image/Overlay%20Types/Gradient%20Bottom%20-%20black.png"
+                  },
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Image/Overlay%20Types/Gradient%20Bottom%20-%20white.png",
+                    "background": "A6ACB1"
+                  }
+                ],
+                "description": "markdown:\n**Black height:** 75% of image\n**White height:** 70% of image"
+              },
+              {
+                "title": "Gradient Both",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Image/Overlay%20Types/Gradient%20Both%20-%20black.png"
+                  },
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Image/Overlay%20Types/Gradient%20Both%20-%20white.png",
+                    "background": "A6ACB1"
+                  }
+                ],
+                "description": "markdown:\n**Black height:** 40% of image\n**White height:** 50% of image"
+              },
+              {
+                "title": "Flat Overlay",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Image/Overlay%20Types/Flat%20Overlay%20-%20black.png"
+                  },
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Image/Overlay%20Types/Flat%20Overlay%20-%20white.png",
+                    "background": "A6ACB1"
+                  }
+                ],
+                "description": "markdown:\n**Black opacity:** 45%\n**White opacity:** 40%"
+              }
+            ],
+            "title": "Overlay Types",
+            "description": ""
+          },
+          {
+            "type": "table",
+            "columns": [
+              "Property",
+              "Black Overlay (default)",
+              "White Overlay"
+            ],
+            "items": [
+              {
+                "title": "Low Intensity",
+                "description": "Image:  GradientOverlay.png",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Image/Overlay%20intensity/Low%20Intensity%20-%20black.png"
+                  },
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Image/Overlay%20intensity/Low%20Intensity%20-%20white.png",
+                    "background": "A6ACB1"
+                  }
+                ]
+              },
+              {
+                "title": "Medium Intensity",
+                "description": "image:  GradientOverlayMedium.png",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Image/Overlay%20intensity/Medium%20Intensity%20-%20black.png"
+                  },
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Image/Overlay%20intensity/Medium%20Intensity%20-%20white.png",
+                    "background": "A6ACB1"
+                  }
+                ]
+              },
+              {
+                "title": "High Intensity",
+                "description": "Image:  GradientOverlayHigh.png",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Image/Overlay%20intensity/High%20Intensity%20-%20black.png"
+                  },
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Image/Overlay%20intensity/High%20Intensity%20-%20white.png",
+                    "background": "A6ACB1"
+                  }
+                ]
+              }
+            ],
+            "title": "Overlay intensity",
+            "description": ""
+          },
+          {
+            "type": "section",
+            "title": "Image Error",
+            "description": "Add a fallback to the Image component that displays the “placeholderMissingImage” illustration, in one of the following scenarios:\n- URL is invalid (broken)\n- Image that is not cached + offline mode\n- Failed fetching from server"
+          },
+          {
+            "type": "section",
+            "title": "Usage Examples",
+            "description": "",
+            "content": [
+              {
+                "value": "\"https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Guidelines-to-Docs?node-id=14016-36419&embed-host=share\""
+              }
+            ]
+          },
+          {
+            "type": "section",
+            "title": "Spec",
+            "description": "",
+            "content": [
+              {
+                "value": "\"https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Guidelines-to-Docs?node-id=16054-57603&embed-host=share\""
+              }
+            ]
+          }
+        ]
       }
     ]
   }

package/src/components/maskedInput/__tests__/maskedInput.new.spec.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import MaskedInput from "../new";
+import Text from "../../../components/text";
+import { TextFieldDriver } from "../../textField/TextField.driver.new";
+const testID = 'field';
+const TestCase = () => {
+  return <MaskedInput testID={testID} renderMaskedText={text => <Text>{text}</Text>} />;
+};
+describe('MaskedInput (new)', () => {
+  it('Sanity - it renders', () => {
+    const renderTree = render(<TestCase />);
+    const mainInputDriver = TextFieldDriver({
+      renderTree,
+      testID
+    });
+    mainInputDriver.exists();
+  });
+});

package/src/components/maskedInput/__tests__/maskedInput.old.spec.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import MaskedInput from "../old";
+import Text from "../../../components/text";
+import { TextFieldDriver } from "../../textField/TextField.driver.new";
+const testID = 'field';
+const TestCase = () => {
+  // @ts-expect-error - this has an error, but this is an old component and I don't want to spend time fixing it
+  return <MaskedInput testID={testID} renderMaskedText={text => <Text>{text}</Text>} />;
+};
+describe('MaskedInput (old)', () => {
+  it('Sanity - it renders', () => {
+    const renderTree = render(<TestCase />);
+    const mainInputDriver = TextFieldDriver({
+      renderTree,
+      testID
+    });
+    mainInputDriver.exists();
+  });
+});

package/src/components/modal/__tests__/index.spec.js

@@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+import { render } from '@testing-library/react-native';
+import Modal from "../";
+import { ModalDriver } from "../Modal.driver.new";
+import View from "../../view";
+import Button from "../../button";
+import { ButtonDriver } from "../../button/Button.driver.new";
+const testID = 'modal';
+const TestCase = props => {
+  return <Modal testID={testID} {...props} />;
+};
+describe('Sanity modal test', () => {
+  it('Testing visibility', () => {
+    const renderTree = render(<TestCase />);
+    const modalDriver = ModalDriver({
+      renderTree,
+      testID
+    });
+    expect(modalDriver.isVisible()).toBeFalsy();
+    renderTree.rerender(<TestCase visible />);
+    expect(modalDriver.isVisible()).toBeTruthy();
+  });
+  it('Should press on background', () => {
+    const backgroundPressHandler = jest.fn();
+    const renderTree = render(<TestCase visible onBackgroundPress={backgroundPressHandler} />);
+    const modalDriver = ModalDriver({
+      renderTree,
+      testID
+    });
+    expect(backgroundPressHandler).not.toHaveBeenCalled();
+    modalDriver.pressOnBackground();
+    expect(backgroundPressHandler).toHaveBeenCalledTimes(1);
+  });
+  it('Should dismiss modal', () => {
+    const onDismissHandler = jest.fn();
+    const TestCase = () => {
+      const [showModal, setShowModal] = useState(true);
+      return <View>
+          <Modal testID={testID} onDismiss={onDismissHandler} visible={showModal} />
+          <Button testID={'button-dismiss'} onPress={() => setShowModal(false)} />
+        </View>;
+    };
+    const renderTree = render(<TestCase />);
+    const modalDriver = ModalDriver({
+      renderTree,
+      testID
+    });
+    const buttonDriver = ButtonDriver({
+      renderTree,
+      testID: 'button-dismiss'
+    });
+    expect(modalDriver.isVisible()).toBeTruthy();
+    expect(onDismissHandler).not.toHaveBeenCalled();
+    buttonDriver.press();
+    expect(modalDriver.isVisible()).toBeFalsy();
+    expect(onDismissHandler).toHaveBeenCalledTimes(1);
+  });
+});

package/src/components/numberInput/__tests__/Presenter.spec.js

@@ -0,0 +1,374 @@
+import { getInitialNumber, parseInput } from "../Presenter";
+const EN_OPTIONS = {
+  localeOptions: {
+    locale: 'en',
+    decimalSeparator: '.',
+    thousandSeparator: ','
+  },
+  fractionDigits: 2
+};
+const DE_OPTIONS = {
+  localeOptions: {
+    locale: 'de',
+    decimalSeparator: ',',
+    thousandSeparator: '.'
+  },
+  fractionDigits: 2
+};
+describe('NumberInput', () => {
+  describe('getInitialNumber', () => {
+    it('should return 0 for undefined', () => {
+      expect(getInitialNumber(undefined, EN_OPTIONS)).toEqual(0);
+    });
+    it('should return 0 for 0', () => {
+      expect(getInitialNumber(0, EN_OPTIONS)).toEqual(0);
+    });
+    it('should return 100 for 1', () => {
+      expect(getInitialNumber(1, EN_OPTIONS)).toEqual(100);
+    });
+    it('should return 1 for 1 if fractionDigits is 0', () => {
+      expect(getInitialNumber(1, {
+        ...EN_OPTIONS,
+        fractionDigits: 0
+      })).toEqual(1);
+    });
+    it('should return 10 for 1 if fractionDigits is 1', () => {
+      expect(getInitialNumber(1, {
+        ...EN_OPTIONS,
+        fractionDigits: 1
+      })).toEqual(10);
+    });
+    it('Handle wrong result with some X.XX numbers', () => {
+      expect(getInitialNumber(8.97, {
+        ...EN_OPTIONS
+      })).toEqual(897);
+    });
+  });
+  describe('getInitialData', () => {
+    const getInitialData = (options, initialNumber) => {
+      return parseInput(`${getInitialNumber(initialNumber, options)}`, options);
+    };
+    it('should return undefined for undefined', () => {
+      expect(getInitialData(EN_OPTIONS, undefined)).toEqual({
+        formattedNumber: '0.00',
+        userInput: '0',
+        number: 0,
+        type: 'valid'
+      });
+    });
+    it('should return one decimal point and not two', () => {
+      expect(getInitialData(EN_OPTIONS, 12.1)).toEqual({
+        type: 'valid',
+        userInput: '1210',
+        formattedNumber: '12.10',
+        number: 12.1
+      });
+    });
+    it('should return string that ends without a dot', () => {
+      expect(getInitialData(EN_OPTIONS, 12)).toEqual({
+        type: 'valid',
+        userInput: '1200',
+        formattedNumber: '12.00',
+        number: 12
+      });
+    });
+    describe('de', () => {
+      it('should return one decimal point and not two', () => {
+        expect(getInitialData(DE_OPTIONS, 12.1)).toEqual({
+          type: 'valid',
+          userInput: '1210',
+          formattedNumber: '12,10',
+          number: 12.1
+        });
+      });
+      it('should return string that ends without a dot', () => {
+        expect(getInitialData(DE_OPTIONS, 12)).toEqual({
+          type: 'valid',
+          userInput: '1200',
+          formattedNumber: '12,00',
+          number: 12
+        });
+      });
+    });
+  });
+  describe('parseInput', () => {
+    describe('en', () => {
+      it('first digit', () => {
+        expect(parseInput('1', EN_OPTIONS)).toEqual({
+          type: 'valid',
+          userInput: '1',
+          formattedNumber: '0.01',
+          number: 0.01
+        });
+      });
+      it('second digit', () => {
+        expect(parseInput('12', EN_OPTIONS)).toEqual({
+          type: 'valid',
+          userInput: '12',
+          formattedNumber: '0.12',
+          number: 0.12
+        });
+      });
+      it('decimal separator', () => {
+        expect(parseInput('12.', EN_OPTIONS)).toEqual({
+          type: 'valid',
+          userInput: '12',
+          formattedNumber: '0.12',
+          number: 0.12
+        });
+      });
+      it('digit after decimal separator', () => {
+        expect(parseInput('1.23', EN_OPTIONS)).toEqual({
+          type: 'valid',
+          userInput: '123',
+          formattedNumber: '1.23',
+          number: 1.23
+        });
+      });
+      it('3rd digit', () => {
+        expect(parseInput('123', EN_OPTIONS)).toEqual({
+          type: 'valid',
+          userInput: '123',
+          formattedNumber: '1.23',
+          number: 1.23
+        });
+      });
+      it('3rd digit after decimal separator', () => {
+        expect(parseInput('12.345', EN_OPTIONS)).toEqual({
+          type: 'valid',
+          userInput: '12345',
+          formattedNumber: '123.45',
+          number: 123.45
+        });
+      });
+      it('thousand separator', () => {
+        expect(parseInput('123456', EN_OPTIONS)).toEqual({
+          type: 'valid',
+          userInput: '123456',
+          formattedNumber: '1,234.56',
+          number: 1234.56
+        });
+      });
+      it('non-digit character', () => {
+        expect(parseInput('1a', EN_OPTIONS)).toEqual({
+          type: 'error',
+          userInput: '1a'
+        });
+      });
+      it('decimal separator first', () => {
+        expect(parseInput('.', EN_OPTIONS)).toEqual({
+          type: 'valid',
+          userInput: '',
+          formattedNumber: '0.00',
+          number: 0
+        });
+      });
+      it('decimal separator first and then a digit', () => {
+        expect(parseInput('.1', EN_OPTIONS)).toEqual({
+          type: 'valid',
+          userInput: '1',
+          formattedNumber: '0.01',
+          number: 0.01
+        });
+      });
+      describe('change fractionDigits', () => {
+        it('fractionDigits=0 decimal separator first', () => {
+          expect(parseInput('.1', {
+            ...EN_OPTIONS,
+            fractionDigits: 0
+          })).toEqual({
+            type: 'valid',
+            userInput: '1',
+            formattedNumber: '1',
+            number: 1
+          });
+        });
+        it('fractionDigits=0 after a few digits', () => {
+          expect(parseInput('123.', {
+            ...EN_OPTIONS,
+            fractionDigits: 0
+          })).toEqual({
+            type: 'valid',
+            userInput: '123',
+            formattedNumber: '123',
+            number: 123
+          });
+        });
+        it('fractionDigits=3 3rd digit after decimal separator', () => {
+          expect(parseInput('12.345', {
+            ...EN_OPTIONS,
+            fractionDigits: 3
+          })).toEqual({
+            type: 'valid',
+            userInput: '12345',
+            formattedNumber: '12.345',
+            number: 12.345
+          });
+        });
+        it('fractionDigits=3 4th digit after decimal separator', () => {
+          expect(parseInput('12.3454', {
+            ...EN_OPTIONS,
+            fractionDigits: 3
+          })).toEqual({
+            type: 'valid',
+            userInput: '123454',
+            formattedNumber: '123.454',
+            number: 123.454
+          });
+        });
+      });
+      describe('zero handling', () => {
+        it('zero: 0', () => {
+          expect(parseInput('0', EN_OPTIONS)).toEqual({
+            type: 'valid',
+            userInput: '0',
+            formattedNumber: '0.00',
+            number: 0
+          });
+        });
+        it('two zeroes: 00', () => {
+          expect(parseInput('00', EN_OPTIONS)).toEqual({
+            type: 'valid',
+            userInput: '00',
+            formattedNumber: '0.00',
+            number: 0
+          });
+        });
+        it('James Bond', () => {
+          expect(parseInput('007', EN_OPTIONS)).toEqual({
+            type: 'valid',
+            userInput: '007',
+            formattedNumber: '0.07',
+            number: 0.07
+          });
+        });
+        it('zero prefix and fraction: 0123.456', () => {
+          expect(parseInput('0123.456', EN_OPTIONS)).toEqual({
+            type: 'valid',
+            userInput: '0123456',
+            formattedNumber: '1,234.56',
+            number: 1234.56
+          });
+        });
+      });
+    });
+    describe('de', () => {
+      it('first digit', () => {
+        expect(parseInput('1', DE_OPTIONS)).toEqual({
+          type: 'valid',
+          userInput: '1',
+          formattedNumber: '0,01',
+          number: 0.01
+        });
+      });
+      it('second digit', () => {
+        expect(parseInput('12', DE_OPTIONS)).toEqual({
+          type: 'valid',
+          userInput: '12',
+          formattedNumber: '0,12',
+          number: 0.12
+        });
+      });
+      it('decimal separator', () => {
+        expect(parseInput('12,', DE_OPTIONS)).toEqual({
+          type: 'valid',
+          userInput: '12',
+          formattedNumber: '0,12',
+          number: 0.12
+        });
+      });
+      it('digit after decimal separator', () => {
+        expect(parseInput('12,3', DE_OPTIONS)).toEqual({
+          type: 'valid',
+          userInput: '123',
+          formattedNumber: '1,23',
+          number: 1.23
+        });
+      });
+      it('3rd digit after decimal separator', () => {
+        expect(parseInput('12,345', DE_OPTIONS)).toEqual({
+          type: 'valid',
+          userInput: '12345',
+          formattedNumber: '123,45',
+          number: 123.45
+        });
+      });
+      it('thousand separator', () => {
+        expect(parseInput('123456', DE_OPTIONS)).toEqual({
+          type: 'valid',
+          userInput: '123456',
+          formattedNumber: '1.234,56',
+          number: 1234.56
+        });
+      });
+      it('non-digit character', () => {
+        expect(parseInput('1a', DE_OPTIONS)).toEqual({
+          type: 'error',
+          userInput: '1a'
+        });
+      });
+      it('decimal separator first', () => {
+        expect(parseInput(',', DE_OPTIONS)).toEqual({
+          type: 'valid',
+          userInput: '',
+          formattedNumber: '0,00',
+          number: 0
+        });
+      });
+      it('decimal separator first and then a digit', () => {
+        expect(parseInput(',1', DE_OPTIONS)).toEqual({
+          type: 'valid',
+          userInput: '1',
+          formattedNumber: '0,01',
+          number: 0.01
+        });
+      });
+      describe('change fractionDigits', () => {
+        it('fractionDigits=0 decimal separator first', () => {
+          expect(parseInput(',1', {
+            ...DE_OPTIONS,
+            fractionDigits: 0
+          })).toEqual({
+            type: 'valid',
+            userInput: '1',
+            formattedNumber: '1',
+            number: 1
+          });
+        });
+        it('fractionDigits=0 after a few digits', () => {
+          expect(parseInput('123,', {
+            ...DE_OPTIONS,
+            fractionDigits: 0
+          })).toEqual({
+            type: 'valid',
+            userInput: '123',
+            formattedNumber: '123',
+            number: 123
+          });
+        });
+        it('fractionDigits=3 3rd digit after decimal separator', () => {
+          expect(parseInput('12,345', {
+            ...DE_OPTIONS,
+            fractionDigits: 3
+          })).toEqual({
+            type: 'valid',
+            userInput: '12345',
+            formattedNumber: '12,345',
+            number: 12.345
+          });
+        });
+        it('fractionDigits=3 4th digit after decimal separator', () => {
+          expect(parseInput('12,3454', {
+            ...DE_OPTIONS,
+            fractionDigits: 3
+          })).toEqual({
+            type: 'valid',
+            userInput: '123454',
+            formattedNumber: '123,454',
+            number: 123.454
+          });
+        });
+      });
+    });
+  });
+});