@coorpacademy/app-review 0.0.21-alpha.4 → 0.1.1

package/lib/types/slides.d.ts

@@ -0,0 +1,87 @@
+import { WithRequired } from './utils';
+export declare type Choice = {
+    order?: number;
+    selected: boolean;
+    title: string;
+    help: string;
+};
+export declare type QcmDrag = {
+    type: 'qcmDrag';
+    choices: Choice[];
+    help: string;
+};
+export declare type Qcm = {
+    type: 'qcm';
+    choices: (Choice & {
+        ariaLabel: string;
+    })[];
+};
+export declare type QcmGraphic = {
+    type: 'qcmGraphic';
+    choices: (Choice & {
+        image: string;
+    })[];
+};
+export declare type FreeText = {
+    type: 'freeText';
+    placeholder: string;
+    value: string;
+    onChange: Function;
+    ariaLabel: string;
+};
+export declare type DropDownOption = {
+    name: string;
+    value: string | number;
+    selected: boolean;
+    validOption: boolean;
+};
+export declare type DropDown = {
+    type: 'dropDown';
+    onChange: Function;
+    options: DropDownOption[];
+    theme: 'filter' | 'invalid' | 'header' | 'mooc' | 'question' | 'sort' | 'thematiques' | 'player' | 'template' | 'coorpmanager';
+};
+export declare type QuestionRange = {
+    type: 'slider';
+    onChange: Function;
+    onChangeEnd: Function;
+    multi: boolean;
+    value: number | number[];
+    title: string;
+    minLabel: string;
+    maxLabel: string;
+};
+export declare type Template = {
+    type: 'template';
+    template: string;
+    choices: (DropDown & {
+        type?: string;
+    })[];
+};
+export declare type AnswerUI = {
+    model: QcmDrag | Qcm | QcmGraphic | FreeText | DropDown | QuestionRange | Template;
+    help: string;
+};
+export declare type SlideNumber = number;
+export declare type SlideUIAnimations = 'unstack' | 'restack';
+export declare type Slide = {
+    hidden?: boolean;
+    position?: number;
+    animationType?: SlideUIAnimations;
+    validationResult?: 'success' | 'failure';
+    endReview?: boolean;
+    questionText?: string;
+    answerUI?: AnswerUI;
+    nextSlide?: Omit<Slide, 'endReview' | 'hidden' | 'position' | 'nextSlide'>;
+};
+export declare type Slides = {
+    slideNumbers: SlideNumber[];
+    [key: SlideNumber]: Slide;
+};
+export declare type UpdateSlidesOnValidationPayload = {
+    slideNumber: SlideNumber;
+    newSlideContent: Slide;
+    numberOfFinishedSlides: number;
+    nextSlide: WithRequired<Slide['nextSlide'], 'answerUI' | 'questionText'>;
+};
+export declare type UpdateSlidesOnNextPayload = Omit<UpdateSlidesOnValidationPayload, 'nextSlide'>;

package/lib/types/slides.js

@@ -0,0 +1 @@
+export {};

package/lib/types/states.d.ts

@@ -0,0 +1,6 @@
+export { Slides as SlidesState } from './slides';
+export { DataState } from './data';
+export { StepItems as StepItemsState } from './step-items';
+export { FinishedSlides as FinishedSlidesState } from './finished-slides';
+export { State as ReviewStatusState } from '../reducers/review-status';
+export declare type NavigationState = Array<'home' | 'onboarding' | 'slides'>;

package/lib/types/states.js

@@ -0,0 +1 @@
+export {};

package/lib/types/step-items.d.ts

@@ -0,0 +1,26 @@
+import { SlideNumber } from './slides';
+import { FinishedSlides } from './finished-slides';
+declare const ICON_VALUES: {
+    readonly right: "right";
+    readonly wrong: "wrong";
+};
+declare type IconValue = keyof typeof ICON_VALUES;
+export declare type StepItem = {
+    current: boolean;
+    icon: IconValue;
+    value: string;
+};
+export declare type StepItems = {
+    slideNumbers: SlideNumber[];
+    [key: SlideNumber]: StepItem;
+};
+export declare type UpdateStepItemsOnValidationClickPayload = {
+    stepNumber: SlideNumber;
+    icon: IconValue;
+};
+export declare type UpdateStepItemsOnNextClickPayload = {
+    stepNumber: SlideNumber;
+    finishedSlides: FinishedSlides;
+    current: boolean;
+};
+export {};

package/lib/types/step-items.js

@@ -0,0 +1,5 @@
+var ICON_VALUES = {
+    right: 'right',
+    wrong: 'wrong'
+};
+export {};

package/lib/types/store-state.d.ts

@@ -0,0 +1,12 @@
+import { DataState, FinishedSlidesState, NavigationState, ReviewStatusState, SlidesState, StepItemsState } from './states';
+export declare type StoreState = {
+    ui: {
+        courses: unknown;
+        navigation: NavigationState;
+        slides: SlidesState;
+        stepItems: StepItemsState;
+        finishedSlides: FinishedSlidesState;
+        reviewStatus: ReviewStatusState;
+    };
+    data: DataState;
+};

package/lib/types/store-state.js

@@ -0,0 +1 @@
+export {};

package/lib/types/utils.d.ts

@@ -0,0 +1,3 @@
+export declare type WithRequired<T, K extends keyof T> = T & {
+    [P in K]-?: T[P];
+};

package/lib/types/utils.js

@@ -0,0 +1 @@
+export {};

package/lib/types/views.d.ts

@@ -0,0 +1,64 @@
+import { State as ReviewStatus } from '../reducers/review-status';
+import { DataState } from './data';
+import { Dispatchers } from './dispatchers';
+import { FinishedSlides } from './finished-slides';
+import { Slides } from './slides';
+import { StepItems } from './step-items';
+declare type SlidesViewStaticProps = {
+    slides: Slides;
+    headerProps: {
+        mode: string;
+        skillName: string;
+        onQuitClick: Function;
+        'aria-label'?: string;
+        closeButtonAriaLabel: string;
+    };
+    finishedSlides: FinishedSlides;
+    stepItems: StepItems;
+    reviewStatus: ReviewStatus;
+    validate: {
+        label: string;
+    };
+    congratsProps?: {
+        'aria-label'?: string;
+        'data-name'?: string;
+        animationLottie: any;
+        title: string;
+        cardCongratsStar: any;
+        cardCongratsRank: any;
+        buttonRevising: {
+            'aria-label'?: string;
+            label: string;
+            onClick: Function;
+            type: string;
+        };
+        buttonRevisingSkill: {
+            'aria-label'?: string;
+            label: string;
+            onClick: Function;
+            type: string;
+        };
+    };
+    correctionPopinProps?: {
+        klf: {
+            label: string;
+            onClick: Function;
+            tooltip: string;
+        };
+        information: {
+            label: string;
+            message: string;
+        };
+        next: {
+            label: string;
+            ariaLabel: string;
+        };
+        successLabel: string;
+        failureLabel: string;
+    };
+    reviewBackgroundAriaLabel?: string;
+    slideValidationResult: DataState['slideValidationResult'];
+};
+declare type SlidesViewDispatcherProps = Omit<Dispatchers, 'navigateTo' | 'navigateBack'>;
+declare type SlidesViewProps = SlidesViewStaticProps & SlidesViewDispatcherProps;
+export { SlidesViewStaticProps, SlidesViewDispatcherProps, SlidesViewProps };

package/lib/types/views.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coorpacademy/app-review",
-  "version": "0.0.21-alpha.4+c599b8c9c",
+  "version": "0.1.1",
   "description": "",
   "engines": {
     "node": ">=16.15.0"
@@ -17,7 +17,11 @@
     "clean:commonjs": "rm -rf lib",
     "clean:es": "rm -rf es",
     "clean": "concurrently \"npm run clean:commonjs\" \"npm run clean:es\"",
-    "test:unit": "ava"
+    "typecheck": "tsc --noEmit",
+    "test:unit": "ava",
+    "lint": "eslint '**/*' --cache --ext .js --ext .jsx --ext .ts --ext .tsx --ext .json",
+    "lint:fix": "npm run lint -- --fix",
+    "test": "npm run lint && npm run typecheck && npm run test:unit"
   },
   "author": "CoorpAcademy",
   "files": [
@@ -36,19 +40,27 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@coorpacademy/components": "10.19.13-alpha.4+c599b8c9c",
+    "@coorpacademy/components": "10.21.0",
     "cross-fetch": "^3.1.5",
     "jwt-decode": "^3.1.2",
     "react-redux": "^8.0.1",
     "redux": "^4.2.0",
-    "redux-devtools-extension": "^2.13.9"
+    "redux-thunk": "^2.4.1"
   },
   "peerDependencies": {
+    "lodash": "^4.17.21",
     "react": "^17.0.2",
     "react-native": "0.68.1"
   },
   "devDependencies": {
-    "ava": "^4.2.0",
+    "@coorpacademy/css-modules-require-hook": "2.1.5",
+    "@coorpacademy/eslint-plugin-coorpacademy": "^11.0.0",
+    "@testing-library/react": "^12.1.5",
+    "@types/lodash": "^4.14.182",
+    "@typescript-eslint/eslint-plugin": "^5.28.0",
+    "@typescript-eslint/parser": "^5.28.0",
+    "ava": "^4.3.0",
+    "browser-env": "^3.3.0",
     "chalk": "^4.1.2",
     "concurrently": "^5.2.0",
     "connect-history-api-fallback": "^1.6.0",
@@ -56,11 +68,13 @@
     "esbuild": "^0.14.39",
     "esbuild-css-modules-plugin": "https://github.com/chrisdugne/esbuild-css-modules-plugin#main",
     "esbuild-plugin-svgr": "^1.0.1",
+    "eslint": "^8.18.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "live-server": "^1.2.2",
     "postcss-modules-values-replace": "^3.4.0",
     "react-dom": "^17.0.2",
     "ts-node": "^10.8.1",
-    "typescript": "^4.6.4"
+    "typescript": "^4.7.4"
   },
-  "gitHead": "c599b8c9cf6a0ab510dce61de9c63b1fb05b540a"
+  "gitHead": "fd256574b0fba67126be17e1498830eac1278c32"
 }

package/src/actions/courses.ts

@@ -2,10 +2,10 @@ export const RECEIVED_COURSE = '@@api/RECEIVED_COURSE';
 
 export type ReceivedCourse = {
   type: '@@api/RECEIVED_COURSE';
-  payload: string;
+  payload: unknown;
 };
 
-export const receivedCourse = (course: any): ReceivedCourse => ({
+export const receivedCourse = (course: unknown): ReceivedCourse => ({
   type: RECEIVED_COURSE,
   payload: course
 });

package/src/actions/data/is-fetching.ts

@@ -0,0 +1,12 @@
+// -----------------------------------------------------------------------------
+
+export const IS_FETCHING_TRUE = '@@is-fetching/TRUE';
+
+// -----------------------------------------------------------------------------
+
+export type IsFetching = {
+  type: typeof IS_FETCHING_TRUE;
+};
+
+// -----------------------------------------------------------------------------
+export const setIsFetching = (): IsFetching => ({type: IS_FETCHING_TRUE});

package/src/actions/data/validate-slide.ts

@@ -0,0 +1,15 @@
+// -----------------------------------------------------------------------------
+
+export const VALIDATE_SLIDE = '@@api/VALIDATE_SLIDE';
+
+// -----------------------------------------------------------------------------
+
+export type ValidateSlide = {
+  type: typeof VALIDATE_SLIDE;
+};
+
+// -----------------------------------------------------------------------------
+
+export const validateSlide = (): ValidateSlide => ({
+  type: VALIDATE_SLIDE
+});

package/src/actions/finished-slides.ts

@@ -0,0 +1,21 @@
+import {UpdateFinishedSlidesPayload} from '../types/finished-slides';
+
+// -----------------------------------------------------------------------------
+
+export const UPDATE_FINISHED_SLIDES = '@@finished-slides/UPDATE_FINISHED_SLIDES';
+
+// -----------------------------------------------------------------------------
+
+export type UpdateFinishedSlides = {
+  type: typeof UPDATE_FINISHED_SLIDES;
+  payload: UpdateFinishedSlidesPayload;
+};
+
+// -----------------------------------------------------------------------------
+
+export const updateFinishedSlides = (
+  payload: UpdateFinishedSlidesPayload
+): UpdateFinishedSlides => ({
+  type: UPDATE_FINISHED_SLIDES,
+  payload
+});

package/src/actions/index.ts

@@ -1,9 +1,12 @@
 import {ReceivedCourse} from './courses';
 import {NavigateBack, NavigateTo, StartApp} from './navigation';
 import {StoreToken} from './token';
+import {StoreFirstSlide} from './slides';
 
-export * from './courses';
-export * from './navigation';
-export * from './token';
-
-export type Action = StartApp | StoreToken | NavigateBack | NavigateTo | ReceivedCourse;
+export type Action =
+  | NavigateBack
+  | NavigateTo
+  | ReceivedCourse
+  | StartApp
+  | StoreFirstSlide
+  | StoreToken;

package/src/actions/navigation.ts

@@ -1,13 +1,14 @@
-import {ActionCreator} from 'redux';
-import {AppOptions} from '..';
+import {AppOptions} from '../types/common';
 
 export const NAVIGATE_TO = '@@navigation/NAVIGATE_TO';
 export const NAVIGATE_BACK = '@@navigation/NAVIGATE_BACK';
 export const START_APP = '@@navigation/START_APP';
 
+export type ViewPath = 'home' | 'onboarding' | 'slides';
+
 export type NavigateTo = {
   type: '@@navigation/NAVIGATE_TO';
-  payload: string;
+  payload: ViewPath;
 };
 
 export type NavigateBack = {
@@ -19,12 +20,12 @@ export type StartApp = {
   payload: AppOptions;
 };
 
-export const navigateTo: ActionCreator<NavigateTo> = (newPath: string) => ({
+export const navigateTo = (newPath: ViewPath): NavigateTo => ({
   type: NAVIGATE_TO,
   payload: newPath
 });
 
-export const navigateBack: ActionCreator<NavigateBack> = () => ({
+export const navigateBack = (): NavigateBack => ({
   type: NAVIGATE_BACK
 });
 

package/src/actions/review-status.ts

@@ -0,0 +1,19 @@
+import {UpdateReviewStatusPayload} from '../types/review-status';
+
+// -----------------------------------------------------------------------------
+
+export const UPDATE_REVIEW_STATUS = '@@review-status/UPDATE_REVIEW_STATUS';
+
+// -----------------------------------------------------------------------------
+
+export type UpdateReviewStatus = {
+  type: typeof UPDATE_REVIEW_STATUS;
+  payload: UpdateReviewStatusPayload;
+};
+
+// -----------------------------------------------------------------------------
+
+export const updateReviewStatus = (payload: UpdateReviewStatusPayload): UpdateReviewStatus => ({
+  type: UPDATE_REVIEW_STATUS,
+  payload
+});

package/src/actions/slides.ts

@@ -0,0 +1,45 @@
+import {Slide, UpdateSlidesOnNextPayload, UpdateSlidesOnValidationPayload} from '../types/slides';
+
+// -----------------------------------------------------------------------------
+
+export const STORE_FIRST_SLIDE = '@@slide/STORE_FIRST_SLIDE';
+export const UPDATE_SLIDES_ON_VALIDATION = '@@slide/UPDATE_SLIDES_ON_VALIDATION';
+export const UPDATE_SLIDES_ON_NEXT = '@@slide/UPDATE_SLIDES_ON_NEXT';
+
+// -----------------------------------------------------------------------------
+
+export type StoreFirstSlide = {
+  type: typeof STORE_FIRST_SLIDE;
+  payload: Slide;
+};
+
+export type UpdateSlidesOnValidation = {
+  type: typeof UPDATE_SLIDES_ON_VALIDATION;
+  payload: UpdateSlidesOnValidationPayload;
+};
+
+export type UpdateSlidesOnNext = {
+  type: typeof UPDATE_SLIDES_ON_NEXT;
+  payload: UpdateSlidesOnNextPayload;
+};
+
+export type SlidesAction = StoreFirstSlide | UpdateSlidesOnValidation | UpdateSlidesOnNext;
+
+// -----------------------------------------------------------------------------
+
+export const storeFirstSlide = (slide: Slide): StoreFirstSlide => ({
+  type: STORE_FIRST_SLIDE,
+  payload: slide
+});
+
+export const updateSlidesOnValidation = (
+  payload: UpdateSlidesOnValidationPayload
+): UpdateSlidesOnValidation => ({
+  type: UPDATE_SLIDES_ON_VALIDATION,
+  payload
+});
+
+export const updateSlidesOnNext = (payload: UpdateSlidesOnNextPayload): UpdateSlidesOnNext => ({
+  type: UPDATE_SLIDES_ON_NEXT,
+  payload
+});

package/src/actions/step-items.ts

@@ -0,0 +1,39 @@
+import {
+  UpdateStepItemsOnNextClickPayload,
+  UpdateStepItemsOnValidationClickPayload
+} from '../types/step-items';
+
+// -----------------------------------------------------------------------------
+
+export const UPDATE_STEP_ITEMS_ON_VALIDATION = '@@step-items/UPDATE_STEP_ITEMS_ON_VALIDATION';
+export const UPDATE_STEP_ITEMS_ON_NEXT = '@@step-items/UPDATE_STEP_ITEMS_ON_NEXT';
+
+// -----------------------------------------------------------------------------
+
+export type UpdateStepItemsOnValidation = {
+  type: typeof UPDATE_STEP_ITEMS_ON_VALIDATION;
+  payload: UpdateStepItemsOnValidationClickPayload;
+};
+
+export type UpdateStepItemsOnNext = {
+  type: typeof UPDATE_STEP_ITEMS_ON_NEXT;
+  payload: UpdateStepItemsOnNextClickPayload;
+};
+
+export type StepItemsAction = UpdateStepItemsOnValidation | UpdateStepItemsOnNext;
+
+// -----------------------------------------------------------------------------
+
+export const updateStepItemsOnValidation = (
+  payload: UpdateStepItemsOnValidationClickPayload
+): UpdateStepItemsOnValidation => ({
+  type: UPDATE_STEP_ITEMS_ON_VALIDATION,
+  payload
+});
+
+export const updateStepItemsOnNext = (
+  payload: UpdateStepItemsOnNextClickPayload
+): UpdateStepItemsOnNext => ({
+  type: UPDATE_STEP_ITEMS_ON_NEXT,
+  payload
+});

package/src/common/index.ts

@@ -0,0 +1,14 @@
+export const TOTAL_SLIDES_STACK = 5;
+export const HIGHEST_INDEX = TOTAL_SLIDES_STACK - 1;
+
+export const VIEWS: {
+  readonly home: 'home';
+  readonly onboarding: 'onboarding';
+  readonly slides: 'slides';
+} = {
+  home: 'home',
+  onboarding: 'onboarding',
+  slides: 'slides'
+};
+
+export const slideNumbers: number[] = [0, 1, 2, 3, 4];

package/src/configure-store.ts

@@ -1,37 +1,29 @@
-import {applyMiddleware, compose, createStore} from 'redux';
+import {AnyAction, applyMiddleware, compose, createStore, EmptyObject, Store} from 'redux';
 import thunk from 'redux-thunk';
 
 import rootReducer from './reducers';
 
-import {State as NavigationState} from './reducers/navigation';
-import {State as TokenState} from './reducers/token';
 import onStartApp from './middlewares/on-start-app';
 
-const preloadedState = undefined;
+import {StoreState} from './types/store-state';
 
-// -----------------------------------------------------------------------------
+const preloadedState: unknown = undefined;
 
-export default async function configureStore() {
-  let _compose = compose;
+// -----------------------------------------------------------------------------
 
-  if (typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION__) {
-    const {composeWithDevTools} = await import('redux-devtools-extension');
-    _compose = composeWithDevTools({
-      name: 'app-review',
-      trace: true,
-      traceLimit: 25
-    });
-  }
+export default function configureStore(): Store<EmptyObject & StoreState, AnyAction> & {
+  dispatch: {};
+} {
+  const _compose = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
+    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
+        name: 'app-review',
+        trace: true,
+        traceLimit: 25
+      })
+    : compose;
 
   const enhancer = _compose(applyMiddleware(thunk, onStartApp));
   const store = createStore(rootReducer, preloadedState, enhancer);
 
   return store;
 }
-
-// -----------------------------------------------------------------------------
-
-export type StoreState = {
-  navigation: NavigationState;
-  token: TokenState;
-};

package/src/fixtures/qcm-slide.ts

@@ -0,0 +1,31 @@
+import {Slide} from '../types/slides';
+
+export const slide: Slide = {
+  questionText: 'QCM',
+  answerUI: {
+    help: '__help',
+    model: {
+      type: 'qcm',
+      choices: [
+        {
+          selected: false,
+          title: 'choix1',
+          help: '(help choix1)',
+          ariaLabel: '__ariaLabel1'
+        },
+        {
+          selected: false,
+          title: 'choix2',
+          help: '(help choix2)',
+          ariaLabel: '__ariaLabel2'
+        },
+        {
+          selected: false,
+          title: 'choix3',
+          help: '(help choix3)',
+          ariaLabel: '__ariaLabel3'
+        }
+      ]
+    }
+  }
+};