@myinterview/widget-react 1.0.0 → 1.0.2

package/README.md

@@ -1,46 +1,58 @@
-# Getting Started with Create React App
+# React-Widget
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+The myInterview widget for [React](https://reactjs.com).
 
-## Available Scripts
+See [myinterview.com](https://www.myinterview.com) for an examples and comprehensive docs.
 
-In the project directory, you can run:
+# Installation and usage
 
-### `npm start`
+The easiest way to use react-widget is to install it from npm and build it into your app with Webpack / rollup / parcel.
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
 
-The page will reload if you make edits.\
-You will also see any lint errors in the console.
+>react-widget compatible with react version `react@16.x.x`, `react@17.x.x`, `react@18.x.x`!
 
-### `npm test`
+```bash
+yarn add @myinterview/widget-react
 
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+# or use npm
 
-### `npm run build`
+npm install @myinterview/widget-react
+```
 
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
+Then use it in your app:
 
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+```jsx
+import React from 'react';
+import { Widget } from '@myinterview/widget-react';
 
-### `npm run eject`
+const App = () => {
+    const onCompleteCallback = () => {
+        //...
+    }
+    const onError = () => {
+        // ...
+    }
+    return (
+        // ...
+        <Widget
+            job={{ job_id: "xxxxxxxxxxxxxxxxxx" }}
+            candidate={{ email: "test@mail.com", username: "Max" }}
+            config={{ onCompleteCallback, onError,
+                auth: "apikey xxxxxxxxxxxxxxxxx sig=xxxxxxxxxxxxxxxxxxxxxxxxxx" }}
+        />
+    )
+}
+```
 
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+# Documentation
 
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+> **For more detailed documentation with all explanation about possible (Props, Methods and Customisation ) please visit your website [myinterview.com](https://www.myinterview.com)**
 
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+# Thanks
 
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+Just want to say thank you to everyone who has made it happen.
 
-## Learn More
+## License
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
+MIT Licensed.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myinterview/widget-react",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "myInterview widget v3",
   "module": "dist/esm/index.js",
   "files": [
@@ -30,8 +30,8 @@
     "start-prod": "REACT_APP_ENV=prod HTTPS=true react-scripts start",
     "start-staging": "REACT_APP_ENV=staging HTTPS=true react-scripts start",
     "build": "react-scripts build",
-    "rollup": "REACT_APP_ENV=prod rollup -c",
-    "rollup-staging": "REACT_APP_ENV=staging rollup -c",
+    "publish-prod": "REACT_APP_ENV=prod rollup -c && npm publish",
+    "publish-staging": "REACT_APP_ENV=staging rollup -c && npm publish --tag beta",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
@@ -91,8 +91,8 @@
     "webpack-cli": "^4.10.0"
   },
   "peerDependencies": {
-    "@testing-library/react": "^12.1.5 || ^13.4.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "@testing-library/react": "^12.1.5 || ^13.4.0"
   }
 }

package/dist/esm/App.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const App: React.FC;

package/dist/esm/components/CountDown.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-interface CountDownProps {
-    countDown: number;
-}
-export declare const CountDown: ({ countDown }: CountDownProps) => JSX.Element;
-export {};

package/dist/esm/components/Counter.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-interface CounterProps {
-    counter: number;
-    limit: number;
-    isRecording: boolean;
-}
-export declare const Counter: ({ counter, limit, isRecording }: CounterProps) => JSX.Element;
-export {};

package/dist/esm/components/DeviceSelector.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-import { mediaDeviceType } from '../interfaces/recorderInterface';
-export interface IDeviceSelectorProps {
-    handleDeviceChange: (type?: mediaDeviceType, id?: string) => void;
-    audioDevices?: MediaDeviceInfo[];
-    videoDevices?: MediaDeviceInfo[];
-    selectedAudioDevice?: MediaDeviceInfo;
-    selectedVideoDevice?: MediaDeviceInfo;
-}
-export declare const DeviceSelector: ({ handleDeviceChange, videoDevices, audioDevices, selectedAudioDevice, selectedVideoDevice, }: IDeviceSelectorProps) => JSX.Element;

package/dist/esm/components/DeviceSelectorList.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import { mediaDeviceType } from '../interfaces/recorderInterface';
-export interface IDeviceSelectorList {
-    deviceList: MediaDeviceInfo[];
-    selectedDevice?: MediaDeviceInfo;
-    onDeviceSelected: (type: mediaDeviceType, deviceId: string) => void;
-    deviceType: mediaDeviceType;
-}
-export declare const DeviceSelectorList: React.FC<IDeviceSelectorList>;

package/dist/esm/components/DeviceSelectorListNative.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-import { IDeviceSelectorList } from './DeviceSelectorList';
-interface IProps extends IDeviceSelectorList {
-}
-export declare const DeviceSelectorListNative: React.FC<IProps>;
-export {};

package/dist/esm/components/Error.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import { IVideoError } from '../utils/errors.utils';
-interface IProps {
-    error: IVideoError | null;
-    onRetry: () => void;
-}
-export declare const Error: React.FC<IProps>;
-export {};

package/dist/esm/components/ErrorBoundaries.d.ts

@@ -1,9 +0,0 @@
-import React, { ErrorInfo, ReactChild } from 'react';
-export declare class ErrorBoundary extends React.Component {
-    constructor(props: ReactChild);
-    static getDerivedStateFromError(): {
-        hasError: boolean;
-    };
-    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
-    render(): React.ReactNode;
-}

package/dist/esm/components/Errors.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import { IDeviceSelectorList } from './DeviceSelectorList';
-export declare type MODAL_ERROR_KEY = 'MEDIA_PERMISSION' | 'NO_SOUND' | 'CONNECTION';
-interface IProps extends Partial<IDeviceSelectorList> {
-    errorType: MODAL_ERROR_KEY;
-    onDisplayPermissionSteps?: () => void;
-}
-export declare const Errors: React.FC<IProps>;
-export {};

package/dist/esm/components/Explanation.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-interface IProps {
-    isVideoQuestion: boolean;
-    thinkingTime: number;
-}
-export declare const Explanation: React.FC<IProps>;
-export {};

package/dist/esm/components/Footer.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const Footer: React.FC;

package/dist/esm/components/Header.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-interface IProps {
-    logo: string;
-    companyName: string;
-    jobTitle: string;
-    hidden?: boolean;
-    forDesktopLayout?: boolean;
-}
-export declare const Header: React.FC<IProps>;
-export {};

package/dist/esm/components/InnerView.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-import { ActorRef, DoneInvokeEvent } from 'xstate';
-import { IWidgetMachineProps } from '../interfaces/widgetInterface';
-interface IProps extends IWidgetMachineProps {
-    recorderRef: ActorRef<DoneInvokeEvent<any>, any>;
-    isSliderModalOpen: boolean;
-    onOpenSliderModal: () => void;
-    onCloseSliderModal: () => void;
-    onRecorderRetry: () => void;
-}
-export declare const InnerView: React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLVideoElement>>;
-export {};

package/dist/esm/components/Main.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import { IConfig } from '../interfaces/configInterface';
-interface IProps {
-    config: IConfig;
-    setShouldShowWaterMark: React.Dispatch<React.SetStateAction<boolean>>;
-}
-export declare const Main: React.FC<IProps>;
-export {};

package/dist/esm/components/OuterView.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import { ActorRef, DoneInvokeEvent } from 'xstate';
-import { IWidgetMachineProps } from '../interfaces/widgetInterface';
-interface IProps extends IWidgetMachineProps {
-    recorderRef: ActorRef<DoneInvokeEvent<any>, any>;
-}
-export declare const OuterView: React.FC<IProps>;
-export {};

package/dist/esm/components/PermissionSteps.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-interface IProps {
-    onRetry: () => void;
-}
-export declare const PermissionSteps: React.FC<IProps>;
-export {};

package/dist/esm/components/PracticeModeInfo.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-interface IProps {
-    isCountDown: boolean;
-    isQuestionDisplayed: boolean;
-    isUploadingState: boolean;
-}
-export declare const PracticeModeInfo: React.FC<IProps>;
-export {};

package/dist/esm/components/PreviewItem.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-interface IProps {
-    blob: string;
-    onSelectVideo: () => void;
-    isSelected: boolean;
-    position: string;
-    isConnected: boolean;
-}
-export declare const PreviewItem: React.FC<IProps>;
-export {};

package/dist/esm/components/PreviewList.d.ts

@@ -1,17 +0,0 @@
-import React from 'react';
-import { DoneInvokeEvent, ActorRef } from 'xstate';
-interface IProps {
-    previewRef: ActorRef<DoneInvokeEvent<any>>;
-    onNextQuestion: (questionNumber: number) => void;
-    onNextRetake: () => void;
-    onQuestionMode: () => void;
-    isRetakeAvailable: boolean;
-    totalRetakes: number;
-    isLastQuestion: boolean;
-    isQuestionMode: boolean;
-    isConnected: boolean;
-    currentQuestion: number;
-    numberOfQuestions: number;
-}
-export declare const PreviewList: React.FC<IProps>;
-export {};

package/dist/esm/components/Question.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import { IQuestion } from '../interfaces/jobInterface';
-interface IProps {
-    questionObj: IQuestion;
-    currentQuestion: number;
-    isInner?: boolean;
-}
-export declare const Question: React.FC<IProps>;
-export {};

package/dist/esm/components/QuestionItem.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-import { IQuestion } from '../interfaces/jobInterface';
-import { VIDEO_STATUS } from '../interfaces/videoInterface';
-interface IProps {
-    questionObj: IQuestion;
-    questionNumber: number;
-    currentQuestion: number;
-    isPracticeMode: boolean;
-    questionStatus: VIDEO_STATUS;
-}
-export declare const QuestionItem: React.FC<IProps>;
-export {};

package/dist/esm/components/QuestionsList.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-import { IQuestion } from '../interfaces/jobInterface';
-import { VIDEO_STATUS } from '../interfaces/videoInterface';
-interface IProps {
-    questions: IQuestion[];
-    currentQuestion: number;
-    isPracticeMode: boolean;
-    questionsStatus: VIDEO_STATUS[];
-}
-export declare const QuestionsList: React.FC<IProps>;
-export {};

package/dist/esm/components/RecorderModal.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-import { IQuestion } from '../interfaces/jobInterface';
-import { IDeviceSelectorList } from './DeviceSelectorList';
-import { MODAL_ERROR_KEY } from './Errors';
-interface IProps extends IDeviceSelectorList {
-    errorType: MODAL_ERROR_KEY | null;
-    onDisplayPermissionSteps: () => void;
-    currentQuestion: number;
-    numberOfQuestions: number;
-    currentQuestionObj: IQuestion | undefined;
-    isRecording: boolean;
-}
-export declare const RecorderModal: React.FC<IProps>;
-export {};

package/dist/esm/components/Setup.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-import { IWidgetMachineProps } from '../interfaces/widgetInterface';
-interface IProps extends IWidgetMachineProps {
-}
-export declare const Setup: React.FC<IProps>;
-export {};

package/dist/esm/components/SetupChecks.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-import { IChecksState } from '../interfaces/widgetInterface';
-interface IProps {
-    checksState: IChecksState;
-    checksMessages: {
-        camera: string;
-        microphone: string;
-        internet: string;
-    };
-    canRetrySpeedTest: boolean;
-    onRetry: () => void;
-}
-export declare const SetupChecks: React.FC<IProps>;
-export {};

package/dist/esm/components/SliderModal.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-interface IProps {
-    isOpen: boolean;
-    onClose: () => void;
-    onRetry: () => void;
-}
-export declare const SliderModal: React.FC<IProps>;
-export {};

package/dist/esm/components/Upload.d.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-interface IProps {
-    isConnected: boolean;
-    totalFileSize: number;
-    totalUploadedFilesSize: {
-        [questionNumber: string]: number;
-    };
-    totalUploadSpeed: {
-        [questionNumber: string]: number;
-    };
-}
-export declare const Upload: React.FC<IProps>;
-export {};

package/dist/esm/components/VideoCamera.d.ts

@@ -1,28 +0,0 @@
-import React from 'react';
-import { ActorRef, DoneInvokeEvent } from 'xstate';
-import { IQuestion } from '../interfaces/jobInterface';
-import { IDeviceSelectorProps } from './DeviceSelector';
-import { MODAL_ERROR_KEY } from './Errors';
-interface IProps extends IDeviceSelectorProps {
-    isCameraDisplayed: boolean;
-    microphoneRef: ActorRef<DoneInvokeEvent<any>, any> | null;
-    isPracticeModeDisplayed: boolean;
-    errorType: MODAL_ERROR_KEY | null;
-    isPermissionStepsOpen: boolean;
-    onDisplayPermissionSteps: () => void;
-    onClosePermissionSteps: () => void;
-    onRecorderRetry: () => void;
-    isRecorderCanChangeSettings: boolean;
-    canStartRecording: boolean;
-    currentQuestion: number;
-    numberOfQuestions: number;
-    currentQuestionObj: IQuestion | undefined;
-    isRecording: boolean;
-    durations: number;
-    recordingTime: number;
-    isCountDown: boolean;
-    countdown: number;
-    isQuestionDisplayed: boolean;
-}
-export declare const VideoCamera: React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLVideoElement>>;
-export {};

package/dist/esm/components/VideoQuestion.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-interface IProps {
-    src: string;
-    isThinkingTime: boolean;
-    onVideoEnds: () => void;
-    hidden?: boolean;
-}
-export declare const VideoQuestion: React.FC<IProps>;
-export {};

package/dist/esm/components/VideoTimeBar.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-interface IProps {
-    duration: number;
-    currentTime: number;
-    isThinkingTime: boolean;
-    onChangeTime: (currentTime: number, playing: boolean) => void;
-}
-export declare const VideoTimeBar: React.FC<IProps>;
-export {};

package/dist/esm/components/Widget.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import { IConfig } from '../interfaces/configInterface';
-import '../assets/styles/global.scss';
-interface IProps extends IConfig {
-    disabled?: boolean;
-    buttonText?: string;
-}
-export declare const Widget: React.FC<IProps>;
-export {};

package/dist/esm/components/icons/ClockIcon.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const ClockIcon: React.FC;

package/dist/esm/components/icons/Loading.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const Loading: React.FC;

package/dist/esm/components/icons/NoCameraMic.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const NoCameraMic: React.FC;

package/dist/esm/components/icons/PlayIcon.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-interface IProps {
-    playing: boolean;
-}
-export declare const PlayIcon: React.FC<IProps>;
-export {};

package/dist/esm/components/icons/Retake.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const Retake: React.FC;

package/dist/esm/components/icons/RotateScreenIcon.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const RotateScreenIcon: React.FC;

package/dist/esm/components/ui/Loader.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const Loader: React.FC;

package/dist/esm/components/ui/MicrophoneIndicator.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-import { ActorRef, DoneInvokeEvent } from 'xstate';
-interface IProps {
-    microphoneRef: ActorRef<DoneInvokeEvent<any>, any>;
-}
-export declare const MicrophoneIndicator: React.FC<IProps>;
-export {};

package/dist/esm/components/ui/PracticeMode.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const PracticeMode: React.FC;

package/dist/esm/components/ui/Progress.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-interface IProps {
-    progress: number;
-}
-export declare const Progress: React.FC<IProps>;
-export {};

package/dist/esm/components/ui/QuestionDuration.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-interface IProps {
-    duration: number;
-}
-export declare const QuestionDuration: React.FC<IProps>;
-export {};

package/dist/esm/components/ui/QuestionNumber.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-interface IProps {
-    currentQuestion: number;
-    numberOfQuestions: number;
-}
-export declare const QuestionNumber: React.FC<IProps>;
-export {};

package/dist/esm/components/ui/RecordingButton.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-interface IProps {
-    isRecording?: boolean;
-}
-export declare const RecordingButton: React.FC<IProps>;
-export {};

package/dist/esm/components/ui/RotateScreen.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const RotateScreen: React.FC;

package/dist/esm/components/ui/Signal.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import { ActorRef, DoneInvokeEvent } from 'xstate';
-interface IProps {
-    microphoneRef: ActorRef<DoneInvokeEvent<any>, any>;
-    activeColor?: string;
-    inactiveColor?: string;
-}
-export declare const Signal: React.FC<IProps>;
-export {};

package/dist/esm/components/ui/StartNowButton.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-interface IProps {
-    onClick: () => void;
-}
-export declare const StartNowButton: React.FC<IProps>;
-export {};

package/dist/esm/components/ui/StartRecordingButton.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-interface IProps {
-    onClick: () => void;
-    disabled: boolean;
-    isExplanationState: boolean;
-    isVideoQuestionState: boolean;
-    isVideoQuestion: boolean;
-}
-export declare const StartRecordingButton: React.FC<IProps>;
-export {};

package/dist/esm/components/ui/StopRecordingButton.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-interface IProps {
-    onClick: () => void;
-    disabled: boolean;
-}
-export declare const StopRecordingButton: React.FC<IProps>;
-export {};

package/dist/esm/components/ui/UnsupportedModal.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-interface IProps {
-    messageType: 'IOS' | 'BROWSER' | 'INCOGNITO';
-}
-export declare const UnsupportedModal: React.FC<IProps>;
-export {};

package/dist/esm/config/index.d.ts

@@ -1,6 +0,0 @@
-declare let config: {
-    serverUrl: string;
-    INTERCOM_APP_ID: string;
-    SENTRY_DSN: string;
-};
-export default config;

package/dist/esm/config/local.env.d.ts

@@ -1,6 +0,0 @@
-declare const local_config: {
-    serverUrl: string;
-    INTERCOM_APP_ID: string;
-    SENTRY_DSN: string;
-};
-export default local_config;

package/dist/esm/config/prod.env.d.ts

@@ -1,6 +0,0 @@
-declare const prod_config: {
-    serverUrl: string;
-    INTERCOM_APP_ID: string;
-    SENTRY_DSN: string;
-};
-export default prod_config;

package/dist/esm/config/staging.env.d.ts

@@ -1,6 +0,0 @@
-declare const staging_config: {
-    serverUrl: string;
-    INTERCOM_APP_ID: string;
-    SENTRY_DSN: string;
-};
-export default staging_config;