@wise/dynamic-flow-client 0.1.4 → 0.2.0

package/README.md

@@ -2,6 +2,8 @@
 
 This is the Dynamic Flow web client. It provides a simple way to integrate a Dynamic Flow into your web app.
 
+⚡ Access the latest deployed version of the [Dynamic Flow Playground](https://main--641de2ace0e1566a6a450fad.chromatic.com).
+
 ## Integration
 
 1. Install `@wise/dynamic-flow-client`.

package/build/flow/DynamicFlow.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DynamicFlowProps } from './types';
 declare const DynamicFlow: (props: DynamicFlowProps) => JSX.Element;
 export default DynamicFlow;

package/build/flow/DynamicFlowStep.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { GlobalError, Step } from '../dynamic-flow-types';
 import { LayoutStepProps } from '../step/layoutStep/LayoutStep';
 type DynamicFlowStepProps = Omit<LayoutStepProps, 'stepSpecification'> & {

package/build/flow/errorBoundary/ErrorBoundaryAlert.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type Props = {
     onDismiss: () => void;
 };

package/build/flow/stories/EditableDynamicFlow.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const EditableDynamicFlow: ({ initialStepName }: {
     initialStepName?: string | undefined;
 }) => JSX.Element;

package/build/jsonSchemaForm/JsonSchemaForm.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { LogEventHandler } from '../common/logging';
 import { TrackableEventHandler } from '../common/tracking';
 import { FormErrors, Model, Schema } from '../dynamic-flow-types';

package/build/jsonSchemaForm/allOfSchema/AllOfSchema.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { AllOfSchema as AllOfSchemaType, ObjectModel } from '../../dynamic-flow-types';
 import { GenericSchemaProps } from '../genericSchema/GenericSchema';
 declare const AllOfSchema: {

package/build/jsonSchemaForm/arrayTypeSchema/ArraySchema.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ArrayModel, ArraySchema as ArraySchemaType } from '../../dynamic-flow-types';
 import { GenericSchemaProps } from '../genericSchema/GenericSchema';
 declare const ArraySchema: {

package/build/jsonSchemaForm/arrayTypeSchema/arrayListSchema/ArrayListSchema.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ArrayModel, ArraySchema as ArraySchemaType } from '../../../dynamic-flow-types';
 import { GenericSchemaProps } from '../../genericSchema/GenericSchema';
 declare const ArrayListSchema: {

package/build/jsonSchemaForm/arrayTypeSchema/arrayListSchema/multipleFileUploadSchema/MultipleFileUploadSchema.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ArrayModel } from '../../../../dynamic-flow-types';
 import { MultipleFileUploadSchema as MultipleFileUploadSchemaType } from '../../../../dynamic-flow-types/Schema';
 import { GenericSchemaProps } from '../../../genericSchema/GenericSchema';

package/build/jsonSchemaForm/basicTypeSchema/BasicTypeSchema.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BasicModel, BasicSchema } from '../../dynamic-flow-types';
 import { OnChange } from '../JsonSchemaForm';
 import { GenericSchemaProps } from '../genericSchema/GenericSchema';

package/build/jsonSchemaForm/controlFeedback/ControlFeedback.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Schema } from '../../dynamic-flow-types';
 declare const ControlFeedback: {
     (props: ControlFeedbackProps): JSX.Element;

package/build/jsonSchemaForm/genericSchema/GenericSchema.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FormErrors, Model, Schema } from '../../dynamic-flow-types';
 import { OnPersistAsync } from '../../schema';
 import { OnChange } from '../JsonSchemaForm';

package/build/jsonSchemaForm/help/Help.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type Props = {
     help: {
         markdown: string;

package/build/jsonSchemaForm/objectSchema/ObjectSchema.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ObjectModel, ObjectSchema as ObjectSchemaType } from '../../dynamic-flow-types';
 import { GenericSchemaProps } from '../genericSchema/GenericSchema';
 declare const ObjectSchema: {

package/build/jsonSchemaForm/oneOfSchema/OneOfSchema.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { OneOfSchema as OneOfSchemaType } from '../../dynamic-flow-types';
 import { GenericSchemaProps } from '../genericSchema/GenericSchema';
 declare const OneOfSchema: {

package/build/jsonSchemaForm/persistAsyncSchema/PersistAsyncSchema.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { PersistAsyncSchema as PersistAsyncSchemaType } from '../../dynamic-flow-types';
 import { GenericSchemaProps } from '../genericSchema/GenericSchema';
 declare const PersistAsyncSchema: {

package/build/jsonSchemaForm/persistAsyncSchema/basic/PersistAsyncBasicSchema.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { PersistAsync, Schema } from '../../../dynamic-flow-types';
 import { GenericSchemaProps } from '../../genericSchema/GenericSchema';
 export declare const getIdFromResponse: (idProperty: string, response: Record<string, unknown>) => string | number;

package/build/jsonSchemaForm/persistAsyncSchema/blob/PersistAsyncBlobSchema.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BlobSchema, PersistAsync, Schema } from '../../../dynamic-flow-types';
 import { GenericSchemaProps } from '../../genericSchema/GenericSchema';
 declare const PersistAsyncBlobSchema: {

package/build/jsonSchemaForm/persistAsyncSchema/blob/UploadInputAdapter.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { UploadProps } from '@transferwise/components/build/types/upload/Upload';
 import { PersistAsync } from '../../../dynamic-flow-types';
 import { Fetcher } from '../../../schema';

package/build/jsonSchemaForm/promotedOneOfSchema/PromotedOneOfSchema.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ObjectModel, OneOfObjectSchema } from '../../dynamic-flow-types';
 import { GenericSchemaProps } from '../genericSchema/GenericSchema';
 declare const PromotedOneOfSchema: (props: PromotedOneOfSchemaProps) => JSX.Element;

package/build/jsonSchemaForm/promotedOneOfSchema/control/PromotedOneOfCheckboxControl.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { PromotedOneOfControlProps } from './PromotedOneOfControl';
 declare const PromotedOneOfCheckboxControl: {
     (props: PromotedOneOfControlProps): JSX.Element;

package/build/jsonSchemaForm/promotedOneOfSchema/control/PromotedOneOfRadioControl.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { PromotedOneOfControlProps } from './PromotedOneOfControl';
 declare const PromotedOneOfRadioControl: {
     (props: PromotedOneOfControlProps): JSX.Element;

package/build/jsonSchemaForm/readOnlySchema/ReadOnlySchema.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Model, Schema } from '../../dynamic-flow-types';
 type ReadOnlySchemaProps = {
     schema: Schema;

package/build/jsonSchemaForm/schemaFormControl/SchemaFormControl.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FormControlType } from '../../common';
 import { BasicModel, Schema } from '../../dynamic-flow-types';
 export declare const getControlType: (schema: Schema) => (typeof FormControlType)[keyof typeof FormControlType] | undefined;

package/build/jsonSchemaForm/schemaFormControl/optionMapper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Icon, Image, Schema } from '../../dynamic-flow-types';
 export declare const mapConstSchemaToOption: (schema: Schema, controlType?: string) => {
     searchStrings: string[];

package/build/jsonSchemaForm/validationAsyncSchema/ValidationAsyncSchema.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BasicModel } from '../../dynamic-flow-types';
 import { ValidationAsyncSchema as ValidationAsyncSchemaType } from '../../dynamic-flow-types/Schema';
 import { GenericSchemaProps } from '../genericSchema/GenericSchema';

package/build/layout/DynamicLayout.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FormErrors, LayoutComponent, Model } from '../dynamic-flow-types';
 import { OnAction, OnModelChange, OnPersistAsync } from '../schema';
 export type CommonLayoutProps = {

package/build/layout/alert/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Alert as AlertType } from '../../dynamic-flow-types';
 declare const DynamicAlert: (props: {
     component: AlertType;

package/build/layout/box/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BoxLayout } from '../../dynamic-flow-types';
 import { CommonLayoutProps } from '../DynamicLayout';
 type Props = CommonLayoutProps & {

package/build/layout/button/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ButtonLayout } from '../../dynamic-flow-types';
 import { CommonLayoutProps } from '../DynamicLayout';
 type Props = Omit<CommonLayoutProps, 'submitted' | 'onModelChange' | 'onPersistAsync'> & {

package/build/layout/columns/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ColumnsLayout } from '../../dynamic-flow-types';
 import { CommonLayoutProps } from '../DynamicLayout';
 type Props = CommonLayoutProps & {

package/build/layout/decision/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DecisionLayout } from '../../dynamic-flow-types';
 import { OnAction } from '../../schema';
 type Props = {

package/build/layout/divider/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DividerLayout } from '../../dynamic-flow-types';
 type Props = {
     component: DividerLayout;

package/build/layout/external/DynamicExternal.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Action, ExternalLayout } from '../../dynamic-flow-types';
 type Props = {
     component: ExternalLayout;

package/build/layout/form/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FormLayout } from '../../dynamic-flow-types';
 import { CommonLayoutProps } from '../DynamicLayout';
 type Props = Omit<CommonLayoutProps, 'onAction'> & {

package/build/layout/heading/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { HeadingLayout } from '../../dynamic-flow-types';
 declare const DynamicHeading: (props: {
     component: HeadingLayout;

package/build/layout/icon/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type Props = {
     type: string;
 };

package/build/layout/image/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ImageLayout } from '../../dynamic-flow-types';
 declare const DynamicImage: (props: {
     component: ImageLayout;

package/build/layout/info/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { InfoLayout } from '../../dynamic-flow-types';
 type Props = {
     component: InfoLayout;

package/build/layout/list/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Action, ListLayout } from '../../dynamic-flow-types';
 type Props = {
     component: ListLayout;

package/build/layout/loading-indicator/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { LoadingIndicatorLayout } from '../../dynamic-flow-types';
 type Props = {
     component: LoadingIndicatorLayout;

package/build/layout/paragraph/DynamicParagraph.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ParagraphLayout } from '../../dynamic-flow-types';
 type Props = {
     component: ParagraphLayout;

package/build/layout/review/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ReviewLayout } from '../../dynamic-flow-types';
 import { OnAction } from '../../schema';
 type Props = {

package/build/step/cameraStep/CameraStep.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Step } from '../../dynamic-flow-types';
 import { CommonLayoutProps } from '../../layout/DynamicLayout';
 export type CameraStepProps = Omit<CommonLayoutProps, 'onPersistAsync' | 'baseUrl'> & {

package/build/step/cameraStep/cameraCapture/CameraCapture.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TrackableEventHandler } from '../../../common/tracking';
 import { CameraDirection } from '../../../dynamic-flow-types/FileUploadSchema';
 type Props = {

package/build/step/cameraStep/cameraCapture/components/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const CaptureBottomBar: ({ onCapture }: {
     onCapture: () => void;
 }) => JSX.Element;

package/build/step/cameraStep/cameraCapture/overlay/Overlay.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type Props = {
     overlay?: string;
     outline?: string;

package/build/step/cameraStep/cameraCapture/screens/CameraNotSupported/CameraNotSupported.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const CameraNotSupported: () => JSX.Element;
 export default CameraNotSupported;

package/build/step/cameraStep/cameraCapture/screens/NoCameraAccess/NoCameraAccess.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type Props = {
     onAction: () => void;
 };

package/build/step/externalConfirmationStep/ExternalConfirmationStep.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type Props = {
     url: string;
     onClose: () => void;

package/build/step/layoutStep/LayoutStep.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FormErrors, Step } from '../../dynamic-flow-types';
 import { CommonLayoutProps } from '../../layout/DynamicLayout';
 import { StepLayoutOptions } from './layoutService/convertStepToLayout';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "description": "Wise Dynamic Flow web client",
   "main": "./build/index.js",
   "types": "./build/index.d.ts",
@@ -18,9 +18,11 @@
   },
   "devDependencies": {
     "@babel/core": "7.20.12",
+    "@babel/plugin-syntax-flow": "7.18.6",
+    "@babel/plugin-transform-react-jsx": "7.21.0",
     "@babel/preset-env": "7.20.2",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.21.0",
+    "@babel/preset-react": "7.18.6",
+    "@babel/preset-typescript": "7.21.0",
     "@formatjs/cli": "^4.8.3",
     "@storybook/addon-a11y": "6.5.16",
     "@storybook/addon-actions": "6.5.16",
@@ -36,22 +38,22 @@
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "13.2.1",
-    "@transferwise/components": "^43.13.49",
-    "@transferwise/eslint-config": "^8.0.1",
+    "@transferwise/components": "43.13.49",
+    "@transferwise/eslint-config": "8.0.1",
     "@transferwise/formatting": "^2.10.0",
-    "@transferwise/icons": "^3.2.3",
-    "@transferwise/neptune-css": "^14.3.45",
-    "@transferwise/neptune-tokens": "^8.4.0",
+    "@transferwise/icons": "3.2.3",
+    "@transferwise/neptune-css": "14.3.45",
+    "@transferwise/neptune-tokens": "8.4.0",
     "@types/enzyme": "^3.10.12",
     "@types/jest": "29.4.0",
     "@types/lodash.debounce": "^4.0.7",
     "@types/lodash": "^4.14.167",
-    "@types/react-dom": "17",
-    "@types/react": "17",
+    "@types/react-dom": "18",
+    "@types/react": "18",
     "@types/testing-library__jest-dom": "5.9.5",
     "@wise/art": "2.0.1",
     "@wise/components-theming": "^0.7.4",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
+    "@cfaester/enzyme-adapter-react-18": "0.7.0",
     "babel-jest": "29.5.0",
     "cpx": "1.5.0",
     "currency-flags": "4.0.7",
@@ -65,27 +67,27 @@
     "postcss-import": "^15.1.0",
     "postcss": "^8.4.21",
     "prettier": "2.8.4",
-    "react-dom": "17",
-    "react-intl": "5.20.6",
-    "react": "17",
+    "react-dom": "18.2.0",
+    "react-intl": "6.2.1",
+    "react": "18.2.0",
     "require-from-string": "2.0.2",
-    "stylelint-config-standard": "^25.0.0",
-    "stylelint-no-unsupported-browser-features": "^5.0.3",
-    "stylelint-value-no-unknown-custom-properties": "^4.0.0",
-    "stylelint": "^14.7.1",
+    "stylelint-config-standard": "25.0.0",
+    "stylelint-no-unsupported-browser-features": "5.0.4",
+    "stylelint-value-no-unknown-custom-properties": "4.0.0",
+    "stylelint": "14.16.1",
     "typescript": "4.9.5",
     "webpack": "5.75.0"
   },
   "peerDependencies": {
     "@transferwise/components": "^43",
-    "@transferwise/formatting": "^2.10.0",
+    "@transferwise/formatting": "^2",
     "@transferwise/icons": "^3",
     "@transferwise/neptune-css": "^14",
     "@transferwise/neptune-validation": "^3",
-    "prop-types": "^15.7.2",
-    "react-dom": ">=16.14",
-    "react-intl": "^5.10.0 || ^6",
-    "react": ">=16.14"
+    "prop-types": "^15",
+    "react-dom": "^18",
+    "react-intl": "^6",
+    "react": "^18"
   },
   "peerDependenciesMeta": {
     "prop-types": {
@@ -93,7 +95,7 @@
     }
   },
   "dependencies": {
-    "classnames": "^2.2.6",
+    "classnames": "2.3.2",
     "lodash.debounce": "^4.0.8",
     "lodash.isequal": "^4.5.0",
     "react-use": "^17.4.0",
@@ -114,6 +116,7 @@
     "test:watch": "pnpm test:once --watch",
     "lint": "npm-run-all lint:ts lint:css",
     "lint:ts": "eslint 'src/**/*.{js,jsx,ts,tsx}' --quiet",
-    "lint:css": "stylelint --allow-empty-input './src/**/*.less'"
+    "lint:css": "stylelint --allow-empty-input './src/**/*.less'",
+    "build-storybook": "build-storybook -c .storybook"
   }
 }