Prototype 1

package.json

@@ -1,11 +1,14 @@
 {
   "name": "graasp-app-math-input",
-  "version": "1.2.3",
+  "version": "0.0.0",
   "license": "AGPL-3.0-only",
   "author": "Graasp",
   "contributors": [
-    "Basile Spaenlehauer",
-    "Jérémy La Scala"
+    {
+      "name": "Jérémy La Scala",
+      "email": "[email protected]",
+      "url": "https://github.com/swouf"
+    }
   ],
   "homepage": ".",
   "type": "module",
@@ -25,6 +28,7 @@
     "@types/react": "18.2.79",
     "@types/react-dom": "18.2.25",
     "i18next": "^23.9.0",
+    "mathlive": "^0.98.6",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-i18next": "14.1.1",
@@ -34,6 +38,7 @@
   "scripts": {
     "dev": "yarn vite",
     "start": "yarn dev",
+    "dev:mock": "VITE_ENABLE_MOCK_API=true && yarn vite",
     "start:test": "yarn vite --mode test",
     "build": "yarn vite build",
     "build:test": "yarn vite build --mode test",

src/config/i18n.ts

@@ -27,7 +27,7 @@ i18n.use(initReactI18next).init({
   debug: import.meta.env.DEV,
   ns: [defaultNS],
   defaultNS,
-  keySeparator: false,
+  keySeparator: '.',
   interpolation: {
     escapeValue: false,
     formatSeparator: ',',

src/config/selectors.ts

@@ -2,5 +2,11 @@ export const PLAYER_VIEW_CY = 'player-view';
 export const BUILDER_VIEW_CY = 'builder-view';
 export const ANALYTICS_VIEW_CY = 'analytics-view';
 
+export const MATH_INPUT_VIEW_CY = 'math-input-view';
+export const SETTINGS_VIEW_CY = 'settings_view';
+
+export const MATH_INPUT_TAB_CY = 'math-input-tab';
+export const SETTINGS_TAB_CY = 'settings-tab';
+
 export const buildDataCy = (selector: string): string =>
   `[data-cy=${selector}]`;

src/langs/en.json

@@ -1,6 +1,8 @@
 {
   "translations": {
     "Welcome to the Graasp App Starter Kit": "Welcome to the Graasp App Starter Kit",
+    "MATH_INPUT_TAB": "Math input",
+    "SETTINGS_TAB": "Settings",
     "ERROR_BOUNDARY": {
       "FALLBACK": {
         "MESSAGE_TITLE": "Sorry, something went wrong with this application",

src/math-field.d.ts

@@ -0,0 +1,14 @@
+import { MathfieldElement } from 'mathlive';
+
+declare global {
+  namespace React.JSX {
+    interface IntrinsicElements {
+      'math-field': React.DetailedHTMLProps<
+        React.HTMLAttributes<MathfieldElement>,
+        MathfieldElement
+      >;
+    }
+  }
+}
+
+export {};

src/mocks/db.ts

@@ -35,7 +35,7 @@ export const mockItem: DiscriminatedItem = AppItemFactory({
 export const defaultMockContext: LocalContext = {
   apiHost: API_HOST,
   permission: PermissionLevel.Admin,
-  context: 'builder',
+  context: 'player',
   itemId: mockItem.id,
   memberId: mockMembers[0].id,
 };

src/modules/common/MathField.tsx

@@ -0,0 +1,50 @@
+import React, { ChangeEvent, useEffect, useRef, useState } from 'react';
+
+// eslint-disable-next-line import/no-duplicates
+import 'mathlive';
+// eslint-disable-next-line import/no-duplicates
+import { MathfieldElement } from 'mathlive';
+
+interface MathFieldProps {
+  value?: string;
+  onChange?: (newValue: string) => void;
+}
+
+const MathField = ({ value, onChange }: MathFieldProps): JSX.Element => {
+  const [internalValue, setInternalValue] = useState<string>('');
+  const mf = useRef<MathfieldElement>();
+
+  useEffect(() => {
+    if (mf.current) {
+      mf.current.mathVirtualKeyboardPolicy = 'manual';
+    }
+  });
+
+  useEffect(() => {
+    if (value) {
+      setInternalValue(value);
+    }
+  }, [value]);
+
+  const onInput = (evt: ChangeEvent<MathfieldElement>): void => {
+    const newValue = evt.target.value;
+    if (onChange) {
+      onChange(newValue);
+    }
+    setInternalValue(newValue);
+  };
+
+  return (
+    <math-field
+      ref={mf}
+      style={{
+        width: '100%',
+      }}
+      onInput={onInput}
+    >
+      {typeof value !== 'undefined' ? value : internalValue}
+    </math-field>
+  );
+};
+
+export default MathField;

src/modules/common/TabPanel.tsx

@@ -0,0 +1,30 @@
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}
+
+const TabPanel = (props: TabPanelProps): JSX.Element => {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      {...other}
+    >
+      {value === index && (
+        <Box sx={{ p: 3 }}>
+          <Typography>{children}</Typography>
+        </Box>
+      )}
+    </div>
+  );
+};
+
+export default TabPanel;

src/modules/main/BuilderView.tsx

@@ -1,104 +1,86 @@
-import { Box, Button, Stack, Typography } from '@mui/material';
+import { SyntheticEvent, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import Box from '@mui/material/Box';
+import Paper from '@mui/material/Paper';
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
 
 import { useLocalContext } from '@graasp/apps-query-client';
+import { PermissionLevel } from '@graasp/sdk';
 
-import { BUILDER_VIEW_CY } from '@/config/selectors';
+import {
+  BUILDER_VIEW_CY,
+  MATH_INPUT_TAB_CY,
+  SETTINGS_TAB_CY,
+} from '@/config/selectors';
 
-import { hooks, mutations } from '../../config/queryClient';
+import TabPanel from '../common/TabPanel';
+import MathInputView from '../math-input-view/MathInputView';
+import SettingsView from '../settings/SettingsView';
 
-const AppSettingsDisplay = (): JSX.Element => {
-  const { data: appSettings } = hooks.useAppSettings();
-  return (
-    <Box p={2}>
-      <Typography>App Setting</Typography>
-      {appSettings ? (
-        <pre>{JSON.stringify(appSettings, null, 2)}</pre>
-      ) : (
-        <Typography>Loading</Typography>
-      )}
-    </Box>
+interface TabType {
+  tabLabel: string;
+  tabChild: JSX.Element;
+  tabSelector: string;
+}
+
+const BuilderView = (): JSX.Element => {
+  const [selectedTab, setSelectedTab] = useState<number>(0);
+  const { t } = useTranslation();
+  const handleChange = (event: SyntheticEvent, value: number): void => {
+    setSelectedTab(value);
+  };
+  const { permission } = useLocalContext();
+
+  const isAdmin = useMemo(
+    () => permission === PermissionLevel.Admin,
+    [permission],
   );
-};
 
-const AppActionsDisplay = (): JSX.Element => {
-  const { data: appActions } = hooks.useAppActions();
-  return (
-    <Box p={2}>
-      <Typography>App Actions</Typography>
-      {appActions ? (
-        <pre>{JSON.stringify(appActions, null, 2)}</pre>
-      ) : (
-        <Typography>Loading</Typography>
-      )}
-    </Box>
+  const mathInputTab = useMemo(
+    () => ({
+      tabLabel: t('MATH_INPUT_TAB'),
+      tabChild: <MathInputView />,
+      tabSelector: MATH_INPUT_TAB_CY,
+    }),
+    [t],
   );
-};
 
-const BuilderView = (): JSX.Element => {
-  const { permission } = useLocalContext();
-  const { data: appDatas } = hooks.useAppData();
-  const { mutate: postAppData } = mutations.usePostAppData();
-  const { mutate: postAppAction } = mutations.usePostAppAction();
-  const { mutate: patchAppData } = mutations.usePatchAppData();
-  const { mutate: deleteAppData } = mutations.useDeleteAppData();
-  const { mutate: postAppSetting } = mutations.usePostAppSetting();
+  const settingsTab = useMemo(
+    () => ({
+      tabLabel: t('SETTINGS_TAB'),
+      tabChild: <SettingsView />,
+      tabSelector: SETTINGS_TAB_CY,
+    }),
+    [t],
+  );
+
+  const tabs: TabType[] = useMemo(
+    () => (isAdmin ? [mathInputTab, settingsTab] : [mathInputTab]),
+    [isAdmin, mathInputTab, settingsTab],
+  );
 
   return (
-    <div data-cy={BUILDER_VIEW_CY}>
-      Builder as {permission}
-      <Stack direction="column" spacing={2}>
-        <Stack direction="row" justifyContent="center" spacing={1}>
-          <Button
-            variant="outlined"
-            onClick={() =>
-              postAppAction({ data: { content: 'hello' }, type: 'an-action' })
-            }
-          >
-            Post new App Action
-          </Button>
-          <Button
-            variant="outlined"
-            onClick={() =>
-              postAppData({ data: { content: 'hello' }, type: 'a-type' })
-            }
-          >
-            Post new App Data
-          </Button>
-          <Button
-            variant="outlined"
-            onClick={() =>
-              postAppSetting({ data: { content: 'hello' }, name: 'setting' })
-            }
-          >
-            Post new App Setting
-          </Button>
-          <Button
-            variant="outlined"
-            onClick={() => {
-              const data = appDatas?.at(-1);
-              patchAppData({
-                id: data?.id || '',
-                data: { content: `${data?.data.content}-` },
-              });
-            }}
-          >
-            Patch last App Data
-          </Button>
-          <Button
-            variant="outlined"
-            onClick={() => deleteAppData({ id: appDatas?.at(-1)?.id || '' })}
-          >
-            Delete last App Data
-          </Button>
-        </Stack>
-        <Box p={2}>
-          <Typography>App Data</Typography>
-          <pre>{JSON.stringify(appDatas, null, 2)}</pre>
-        </Box>
-        <AppSettingsDisplay />
-        <AppActionsDisplay />
-      </Stack>
-    </div>
+    <Paper data-cy={BUILDER_VIEW_CY} elevation={0} sx={{ width: '100%' }}>
+      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+        <Tabs
+          value={selectedTab}
+          onChange={handleChange}
+          aria-label="Tabs in the builder view."
+        >
+          {tabs.map((tab, index) => (
+            <Tab key={index} label={tab.tabLabel} data-cy={tab.tabSelector} />
+          ))}
+        </Tabs>
+      </Box>
+      {tabs.map((tab, index) => (
+        <TabPanel key={index} value={selectedTab} index={index}>
+          {tab.tabChild}
+        </TabPanel>
+      ))}
+    </Paper>
   );
 };
+
 export default BuilderView;

src/modules/main/PlayerView.tsx

@@ -1,23 +1,12 @@
-import { Box, Typography } from '@mui/material';
+import Container from '@mui/material/Container';
 
-import { useLocalContext } from '@graasp/apps-query-client';
-
-import { hooks } from '@/config/queryClient';
 import { PLAYER_VIEW_CY } from '@/config/selectors';
 
-const PlayerView = (): JSX.Element => {
-  const { permission } = useLocalContext();
-  const { data: appContext } = hooks.useAppContext();
-  const members = appContext?.members;
+import MathInputView from '../math-input-view/MathInputView';
 
-  return (
-    <div data-cy={PLAYER_VIEW_CY}>
-      Player as {permission}
-      <Box p={2}>
-        <Typography>Members</Typography>
-        <pre>{JSON.stringify(members, null, 2)}</pre>
-      </Box>
-    </div>
-  );
-};
+const PlayerView = (): JSX.Element => (
+  <Container data-cy={PLAYER_VIEW_CY}>
+    <MathInputView />
+  </Container>
+);
 export default PlayerView;

src/modules/math-input-view/MathInputView.tsx

@@ -0,0 +1,11 @@
+import Box from '@mui/material/Box';
+
+import MathField from '../common/MathField';
+
+const MathInputView = (): JSX.Element => (
+  <Box>
+    <MathField />
+  </Box>
+);
+
+export default MathInputView;

src/modules/settings/SettingsView.tsx

@@ -0,0 +1,7 @@
+import Typography from '@mui/material/Typography';
+
+const SettingsView = (): JSX.Element => (
+  <Typography variant="h1">Settings</Typography>
+);
+
+export default SettingsView;