@coorpacademy/app-review 0.0.3

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@coorpacademy/app-review",
+  "version": "0.0.3",
+  "description": "",
+  "main": "index.js",
+  "engines": {
+    "node": ">=12.22.12"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "CoorpAcademy",
+  "files": [
+    "src",
+    "readme.md"
+  ],
+  "dependencies": {
+    "react-native": "^0.68.2",
+    "react-redux": "^8.0.1",
+    "redux": "^4.2.0"
+  },
+  "devDependencies": {
+    "@storybook/react-native": "^5.3.25",
+    "redux-devtools-extension": "^2.13.9"
+  },
+  "gitHead": "c28143fe08c0e290c3584806812e8158ef6f65f7"
+}

package/readme.md

@@ -0,0 +1 @@
+# App Review

package/src/actions/index.ts

@@ -0,0 +1 @@
+export * from './navigation';

package/src/actions/navigation.ts

@@ -0,0 +1,22 @@
+import {ActionCreator} from 'redux';
+
+export const NAVIGATE_TO = '@@navigation/NAVIGATE_TO';
+export const NAVIGATE_BACK = '@@navigation/NAVIGATE_BACK';
+
+export type $NAVIGATE_TO = {
+  type: '@@navigation/NAVIGATE_TO';
+  payload: string;
+};
+
+export type $NAVIGATE_BACK = {
+  type: '@@navigation/NAVIGATE_BACK';
+};
+
+export const navigateTo: ActionCreator<$NAVIGATE_TO> = (newPath: string) => ({
+  type: NAVIGATE_TO,
+  payload: newPath
+});
+
+export const navigateBack: ActionCreator<$NAVIGATE_BACK> = () => ({
+  type: NAVIGATE_BACK
+});

package/src/components/revision-home.stories.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import {storiesOf} from '@storybook/react-native';
+import RevisionHome from './revision-home';
+
+const emptySkills: [] = [];
+const skillsToRevise: {title: string; info: string}[] = [
+  {title: 'Negotiation and powers of persuasion', info: '75 questions to revise'},
+  {title: 'Negotiation and powers of persuasion', info: '75 questions to revise'},
+  {title: 'Negotiation and powers of persuasion', info: '75 questions to revise'},
+  {title: 'Negotiation and powers of persuasion', info: '75 questions to revise'},
+  {title: 'Creativity and innovation', info: '75 questions to revise'}
+];
+
+storiesOf('RevisionHome', module)
+  .add('No skills', () => <RevisionHome skillsToRevise={emptySkills} />)
+  .add('Few skills', () => <RevisionHome skillsToRevise={skillsToRevise} />);

package/src/components/revision-home.tsx

@@ -0,0 +1,125 @@
+import * as React from 'react';
+import {View, FlatList, Pressable, StyleSheet, Text, ImageBackground} from 'react-native';
+import {NovaCompositionNavigationArrowRight as ArrowRight} from '@coorpacademy/nova-icons';
+
+// import theme from '../../../modules/theme';
+// import translations from '../../../translations';
+// import {HEADER_HEIGHT} from '../../../app-shared/components/header-v2';
+// import noSkillsImage from '../../../assets/images/revision-no-skills.png';
+// import Touchable from '../../../app-shared/components/touchable';
+
+type _Skill_ = {title?: string; info?: string; isExtraSpace?: boolean};
+interface Props {
+  skillsToRevise: {title?: string; info?: string}[];
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 20
+    // paddingTop: HEADER_HEIGHT + 20,
+    // backgroundColor: theme.colors.white
+  },
+  title: {
+    // fontSize: theme.fontSize.xlarge,
+    // fontWeight: theme.fontWeight.bold,
+    lineHeight: 28
+    // color: theme.colors.text.primary,
+    // marginBottom: theme.spacing.base,
+    // marginTop: theme.spacing.small
+  },
+  subtitle: {
+    // fontSize: theme.fontSize.xlarge,
+    // color: theme.colors.text.primary,
+    // marginBottom: theme.spacing.tiny
+  },
+  text: {
+    fontSize: 16,
+    lineHeight: 22,
+    // color: theme.colors.text.primary,
+    opacity: 0.7
+    // marginBottom: theme.spacing.base
+  },
+  noSkillsImage: {
+    flex: 1,
+    alignSelf: 'center',
+    width: 320,
+    height: 300
+  },
+  skills: {},
+  skill: {
+    display: 'flex',
+    flexDirection: 'row',
+    overflow: 'hidden',
+    alignItems: 'center',
+    height: 118,
+    borderRadius: 8
+    // backgroundColor: theme.colors.gray.lighter,
+    // marginTop: theme.spacing.micro,
+    // marginBottom: theme.spacing.micro,
+    // padding: theme.spacing.base
+  },
+  skillTexts: {
+    flex: 1,
+    flexDirection: 'column'
+  },
+  skillTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    lineHeight: 22
+    // color: theme.colors.text.primary,
+    // marginBottom: theme.spacing.tiny
+  },
+  skillInfo: {
+    fontSize: 12,
+    lineHeight: 16
+    // color: theme.colors.gray.medium
+  },
+  extraSpace: {
+    height: 100
+  }
+});
+
+const onSelectSkill = (title: string) => () => {
+  console.log('pressed on', {title});
+};
+
+const ExtraSpace = () => <View style={styles.extraSpace}></View>;
+
+const Skill = ({title, info}: _Skill_) => (
+  <Pressable style={styles.skill} onPress={onSelectSkill(title)}>
+    <View style={styles.skillTexts}>
+      <Text style={styles.skillTitle}>{title}</Text>
+      <Text style={styles.skillInfo}>{info}</Text>
+    </View>
+    <ArrowRight color="#ededed" height={20} width={20} />
+  </Pressable>
+);
+
+const renderSkill = ({item: {title, info, isExtraSpace = false}}: {item: _Skill_}) =>
+  isExtraSpace ? <ExtraSpace /> : <Skill title={title} info={info} />;
+
+const Skills = (props: {skills: _Skill_[]}) => (
+  <FlatList contentContainerStyle={styles.skills} data={props.skills} renderItem={renderSkill} />
+);
+
+const NoSkills = () => (
+  <>
+    {/* <Text style={styles.subtitle}>{translations.revision.home.noSkills}</Text>
+    <Text style={styles.text}>{translations.revision.home.noSkillsDetails}</Text>
+    <ImageBackground source={noSkillsImage} style={styles.noSkillsImage} /> */}
+  </>
+);
+
+const RevisionHome = (props: Props) => (
+  <View style={styles.container}>
+    {/* <Text style={styles.title}>{translations.revision.home.title}</Text> */}
+    {!props.skillsToRevise || props.skillsToRevise.length === 0 ? (
+      <NoSkills />
+    ) : (
+      <Skills skills={[...props.skillsToRevise, {isExtraSpace: true}]} />
+    )}
+  </View>
+);
+
+export default RevisionHome;

package/src/components/revision-onboarding.tsx

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import {View, StyleSheet, Text} from 'react-native';
+
+import {NovaLineSelectionCursorsCursorArrowTarget as TargetIcon} from '@coorpacademy/nova-icons';
+
+// import theme from '../../../modules/theme';
+// import translations from '../../../translations';
+// import Button from '../../../app-shared/components/button';
+// import {HEADER_HEIGHT} from '../../../app-shared/components/header-v2';
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'space-between',
+    flex: 1,
+    padding: 20
+    // paddingTop: HEADER_HEIGHT + 20
+  },
+  title: {
+    height: 72,
+    width: 268,
+    // fontSize: theme.fontSize.xxlarge,
+    // fontWeight: theme.fontWeight.bold,
+    lineHeight: 36
+    // color: theme.colors.text.primary,
+    // marginBottom: theme.spacing.small
+  },
+  text: {
+    // fontSize: theme.fontSize.large,
+    // color: theme.colors.text.primary,
+    opacity: 0.7
+    // marginBottom: theme.spacing.small
+  },
+  tip: {
+    flexDirection: 'row',
+    overflow: 'hidden',
+    alignItems: 'center',
+    height: 54,
+    borderRadius: 8
+    // backgroundColor: theme.colors.gray.extra,
+    // marginTop: theme.spacing.micro,
+    // marginBottom: theme.spacing.micro
+  },
+  tipText: {
+    // fontSize: theme.fontSize.large,
+    // color: theme.colors.text.primary
+  },
+  icon: {
+    margin: 10
+  },
+  button: {
+    height: 52,
+    borderRadius: 7
+    // marginBottom: theme.spacing.large,
+    // marginTop: theme.spacing.large
+  }
+});
+
+const onButtonPress = () => {};
+
+const Tip = ({Icon, text}) => (
+  <View style={styles.tip}>
+    {/* <Icon height={16} width={16} style={styles.icon} color={theme.colors.text.primary} /> */}
+    <Text style={styles.tipText}>{text}</Text>
+  </View>
+);
+
+const RevisionOnboarding = () => (
+  <View style={styles.container}>
+    {/* <Text style={styles.title}>{translations.revision.onboarding.title}</Text>
+    <Text style={styles.text}>{translations.revision.onboarding.intro1}</Text>
+    <Text style={styles.text}>{translations.revision.onboarding.intro2}</Text>
+
+    <Tip Icon={TargetIcon} text={translations.revision.onboarding.tip1} />
+    <Tip Icon={TargetIcon} text={translations.revision.onboarding.tip2} />
+    <Tip Icon={TargetIcon} text={translations.revision.onboarding.tip3} />
+    <Tip Icon={TargetIcon} text={translations.revision.onboarding.tip4} /> */}
+
+    {/* <Button style={styles.button} onPress={onButtonPress} testID={`button-quit-revision-onboarding`}>
+      {translations.revision.onboarding.validate}
+    </Button> */}
+  </View>
+);
+
+export default RevisionOnboarding;

package/src/components/revision-quizzer.tsx

@@ -0,0 +1,176 @@
+import * as React from 'react';
+import {View, StyleSheet, Text, useWindowDimensions} from 'react-native';
+
+// import theme from '../../../modules/theme';
+// import translations from '../../../translations';
+// import {BrandThemeContext} from '../../../app-shared/components/brand-theme-provider';
+// import Button from '../../../app-shared/components/button';
+// import {HEADER_HEIGHT} from '../../../app-shared/components/header-v2';
+
+export type _Choice_ = {
+  text?: string;
+  selected: boolean;
+};
+
+export type _Slide_ = {
+  category: string;
+  question: string;
+  instruction: string;
+  type: 'multiSelection' | 'singleSelection' | 'trueOrFalse';
+  choices?: _Choice_[];
+};
+
+interface Props {
+  slide: _Slide_;
+  num: number;
+}
+
+const quizzerStyle = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 20,
+    // paddingTop: HEADER_HEIGHT + 20,      @todo with props
+    // backgroundColor: theme.colors.white, @todo with props
+    justifyContent: 'space-between',
+    alignItems: 'center'
+  }
+});
+
+const SLIDE_HEIGHT = () => useWindowDimensions().height * 0.75;
+
+const creatSlideStyle = (num: number) =>
+  StyleSheet.create({
+    slide: {
+      position: 'absolute',
+      // backgroundColor: theme.colors.white, @todo with props
+      top: useWindowDimensions().height / 2 - SLIDE_HEIGHT() / 2 - num * 4,
+      flex: 1,
+      height: SLIDE_HEIGHT(),
+      width: useWindowDimensions().width - 40 - num * 8,
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      padding: 25,
+      shadowColor: '#000',
+      shadowOffset: {width: 0, height: -1},
+      shadowOpacity: 0.05,
+      shadowRadius: 16,
+      elevation: 10 - num * 1,
+      borderRadius: 16
+    },
+    category: {
+      fontSize: 12,
+      lineHeight: 16,
+      // color: theme.colors.text.primary, @todo with props
+      // marginBottom: theme.spacing.tiny, @todo with props
+      // marginTop: theme.spacing.small,   @todo with props
+      textAlign: 'center'
+    },
+    question: {
+      fontSize: 16,
+      lineHeight: 22,
+      fontWeight: '700',
+      // color: theme.colors.text.primary, @todo with props
+      textAlign: 'center'
+    },
+    instruction: {
+      fontSize: 12,
+      lineHeight: 16,
+      // color: theme.colors.gray.medium,  @todo with props
+      // marginBottom: theme.spacing.base, @todo with props
+      // marginTop: theme.spacing.small,   @todo with props
+      textAlign: 'center'
+    },
+    button: {
+      width: 287,
+      height: 52,
+      borderRadius: 7
+      // marginTop: theme.spacing.base  @todo with props
+    }
+  });
+
+const createOptionStyle = (selected: boolean) => {
+  // const brandTheme = React.useContext(BrandThemeContext); @todo with props
+
+  return StyleSheet.create({
+    box: {
+      width: '100%',
+      // https://stackoverflow.com/a/66561995/959219
+      shadowColor: '#000',
+      shadowOffset: {width: 0, height: -1},
+      shadowOpacity: 0.2,
+      shadowRadius: 16,
+      elevation: 8,
+      // backgroundColor: selected ? brandTheme.colors.primary : theme.colors.white, @todo with props
+      padding: 12,
+      marginTop: 4,
+      marginBottom: 4,
+      borderRadius: 8
+    },
+    text: {
+      fontSize: 15,
+      fontWeight: 'bold',
+      lineHeight: 24,
+      // color: selected ? theme.colors.white : theme.colors.text.primary, @todo with props
+      textAlign: 'center'
+    }
+  });
+};
+
+const choicesStyle = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: '100%',
+    justifyContent: 'center',
+    alignItems: 'center'
+  }
+});
+
+const onButtonPress = () => {};
+
+const Choices = ({choices}: any) => (
+  <View style={choicesStyle.container}>
+    {choices.map(({text, selected = false}: _Choice_) => {
+      const optionStyle = createOptionStyle(selected);
+      return (
+        <View style={optionStyle.box}>
+          <Text style={optionStyle.text}>
+            {text} {selected}
+          </Text>
+        </View>
+      );
+    })}
+  </View>
+);
+
+const Slide = ({slide, num}: Props) => {
+  const slideStyle = creatSlideStyle(num);
+
+  return (
+    <View style={slideStyle.slide}>
+      <Text style={slideStyle.category}>
+        {slide.category} {num}
+      </Text>
+      <Text style={slideStyle.question}>{slide.question}</Text>
+      <Text style={slideStyle.instruction}>{slide.instruction}</Text>
+
+      <Choices choices={slide.choices} />
+
+      {/* <Button style={slideStyle.button} onPress={onButtonPress} testID={`button-quizzer-validate`}>
+        {translations.validate}
+      </Button> */}
+    </View>
+  );
+};
+
+const RevisionQuizzer = ({slide}: Props) => {
+  const slides = [slide, slide, slide, slide, slide];
+  return (
+    <View style={quizzerStyle.container}>
+      {slides.reverse().map((slide, index) => (
+        <Slide slide={slide} num={slides.length - index} />
+      ))}
+    </View>
+  );
+};
+
+export default RevisionQuizzer;

package/src/configure-store.ts

@@ -0,0 +1,24 @@
+import {applyMiddleware, compose, createStore} from 'redux';
+import thunk from 'redux-thunk';
+import {composeWithDevTools} from 'redux-devtools-extension';
+
+import * as actionCreators from './actions';
+import rootReducer from './reducers';
+
+const preloadedState = undefined;
+
+export default function configureStore(services) {
+  const _compose = process.env.NODE_ENV !== 'production' ? composeWithDevTools : compose;
+
+  const composeEnhancers = _compose({
+    actionCreators,
+    name: 'app-review',
+    trace: true,
+    traceLimit: 25
+  });
+
+  const composedEnhancer = composeEnhancers(applyMiddleware(thunk));
+  const store = createStore(rootReducer, preloadedState, composedEnhancer);
+
+  return store;
+}

package/src/index.tsx

@@ -0,0 +1,103 @@
+import React, {useEffect, useState} from 'react';
+import {Text, StyleSheet, Pressable, View, BackHandler} from 'react-native';
+import {connect, Provider} from 'react-redux';
+
+import configureStore from './configure-store';
+import {navigateTo, navigateBack} from './actions/navigation';
+import {getCurrentViewName} from './reducers/navigation';
+
+// -----------------------------------------------------------------------------
+
+const styles = StyleSheet.create({
+  rootView: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+
+// -----------------------------------------------------------------------------
+
+const NavText = ({viewName, navigateTo}) => {
+  console.log({viewName});
+  switch (viewName) {
+    case 'home':
+      return (
+        <Pressable
+          onPress={() => {
+            navigateTo('onboarding');
+          }}
+        >
+          <Text>view home</Text>
+        </Pressable>
+      );
+    case 'onboarding':
+      return (
+        <Pressable onPress={() => navigateTo('quizzer')}>
+          <Text>view onboarding</Text>
+        </Pressable>
+      );
+    case 'quizzer':
+      return (
+        <Pressable onPress={() => navigateTo('home')}>
+          <Text>view quizzer</Text>
+        </Pressable>
+      );
+    default:
+      return <Text>view (none selected)</Text>;
+  }
+};
+
+// -----------------------------------------------------------------------------
+
+const RootView = (props) => {
+  const backAction = () => {
+    props.navigateBack();
+    return true;
+  };
+
+  useEffect(() => {
+    // https://reactnative.dev/docs/backhandler
+    const backHandler = BackHandler.addEventListener('hardwareBackPress', backAction);
+
+    return () => backHandler.remove();
+  }, []);
+
+  return (
+    <View style={styles.rootView}>
+      <NavText viewName={props.viewName} navigateTo={props.navigateTo} />
+    </View>
+  );
+};
+
+// -----------------------------------------------------------------------------
+
+const mapStateToProps = (state, ownProps) => {
+  return {...ownProps, viewName: getCurrentViewName(state)};
+};
+
+const mapDispatchToProps = {navigateTo, navigateBack};
+const App = connect(mapStateToProps, mapDispatchToProps)(RootView);
+
+// -----------------------------------------------------------------------------
+
+const AppRevision = ({services}) => {
+  const [store, setStore] = useState(null);
+
+  useEffect(() => {
+    const store = configureStore(services);
+    setStore(store);
+  }, []);
+
+  if (!store) return null;
+
+  return (
+    <Provider store={store}>
+      <App />
+    </Provider>
+  );
+};
+
+// -----------------------------------------------------------------------------
+
+export default AppRevision;

package/src/reducers/index.ts

@@ -0,0 +1,8 @@
+import {combineReducers} from 'redux';
+import navigation from './navigation';
+
+const rootReducer = combineReducers({
+  navigation
+});
+
+export default rootReducer;

package/src/reducers/navigation.ts

@@ -0,0 +1,24 @@
+import {NAVIGATE_BACK, NAVIGATE_TO} from '../actions/navigation';
+import type {$NAVIGATE_TO, $NAVIGATE_BACK} from '../actions/navigation';
+
+export type State = Array<string>;
+
+export const initialState: State = ['home'];
+
+const reducer = (state: State = initialState, action: $NAVIGATE_TO | $NAVIGATE_BACK): State => {
+  switch (action.type) {
+    case NAVIGATE_TO: {
+      return [...state, action.payload];
+    }
+    case NAVIGATE_BACK: {
+      const newState = [...state];
+      newState.pop();
+      return newState;
+    }
+    default:
+      return state;
+  }
+};
+
+export const getCurrentViewName = appState => appState.navigation[appState.navigation.length - 1];
+export default reducer;