[ENH] Implemented app skeleton (#36)

* Implemented `Landing` component

* Implemented `Upload` component

* Implemented `ColumnAnnotation` component

* Implemented `ValueAnnotation` component

* Implemented `Download` component

* Implemented `NavigationButton` component

* Implemented component test for `NavigationButton`

* Implemented component test for `Landing`

* Implemented component test for `ColumnAnnotation`

* Implemented component test for `Upload`

* Implemented test for `ValueAnnotation` component

* Implemented component test for `Download`

* Removed `Dummy` tests

* Implemented store

* Added a unit test for `setCurrentView` action

* Updated `App` component to render the appropriate view

* Implemented `Simple` e2e test

* Added `themes` module and implemented `NBTheme`

* Set up `ThemeProvider`

* Fixed typo

* Fixed `Download` component test

Careful when copy pasting

* Small refactor

cypress/component/ColumAnnotation.cy.tsx

@@ -0,0 +1,8 @@
+import ColumnAnnotation from '../../src/components/ColumnAnnotation';
+
+describe('ColumnAnnotation', () => {
+  it('should render correctly', () => {
+    cy.mount(<ColumnAnnotation />);
+    cy.contains('Column Annotation');
+  });
+});

cypress/component/Download.cy.tsx

@@ -0,0 +1,8 @@
+import Download from '../../src/components/Download';
+
+describe('Download', () => {
+  it('should render correctly', () => {
+    cy.mount(<Download />);
+    cy.contains('Download');
+  });
+});

cypress/component/Landing.cy.tsx

@@ -0,0 +1,8 @@
+import Landing from '../../src/components/Landing';
+
+describe('Landing', () => {
+  it('should render correctly', () => {
+    cy.mount(<Landing />);
+    cy.contains('Welcome');
+  });
+});

cypress/component/NavigationButton.cy.tsx

@@ -0,0 +1,24 @@
+import NavigationButton from '../../src/components/NavigationButton';
+import useStore from '../../src/stores/store';
+
+const props = {
+  label: 'Next',
+  viewToNavigateTo: 'some view',
+};
+
+describe('NavigationButton', () => {
+  it('should render correctly', () => {
+    cy.mount(<NavigationButton label={props.label} viewToNavigateTo={props.viewToNavigateTo} />);
+    cy.contains(props.label);
+  });
+
+  it('should call setCurrentView with the correct view when clicked', () => {
+    cy.spy(useStore.getState(), 'setCurrentView').as('setCurrentViewSpy');
+
+    cy.mount(<NavigationButton label={props.label} viewToNavigateTo={props.viewToNavigateTo} />);
+
+    cy.contains(props.label).click();
+
+    cy.get('@setCurrentViewSpy').should('have.been.calledWith', props.viewToNavigateTo);
+  });
+});

cypress/component/Upload.cy.tsx

@@ -0,0 +1,8 @@
+import Upload from '../../src/components/Upload';
+
+describe('Upload', () => {
+  it('should render correctly', () => {
+    cy.mount(<Upload />);
+    cy.contains('Upload');
+  });
+});

cypress/component/ValueAnnotation.cy.tsx

@@ -0,0 +1,8 @@
+import ValueAnnotation from '../../src/components/ValueAnnotation';
+
+describe('ValueAnnotation', () => {
+  it('should render correctly', () => {
+    cy.mount(<ValueAnnotation />);
+    cy.contains('Value Annotation');
+  });
+});

cypress/e2e/Simple.cy.ts

@@ -0,0 +1,17 @@
+describe('Simlpe e2e test', () => {
+  it('Steps through different app views', () => {
+    cy.visit('http://localhost:5173');
+    cy.contains('Welcome');
+    cy.contains('Start - Upload').click();
+    cy.contains('Upload');
+    cy.contains('Next - Column Annotation').click();
+    cy.contains('Column Annotation');
+    cy.contains('Next - Value Annotation').click();
+    cy.contains('Value Annotation');
+    // reload to make sure the currentView persists
+    cy.reload();
+    cy.contains('Value Annotation');
+    cy.contains('Next - Download').click();
+    cy.contains('Download');
+  });
+});

src/App.tsx

@@ -1,5 +1,31 @@
+import useStore from './stores/store';
+import Landing from './components/Landing';
+import Upload from './components/Upload';
+import ColumnAnnotation from './components/ColumnAnnotation';
+import ValueAnnotation from './components/ValueAnnotation';
+import Download from './components/Download';
+
 function App() {
-  return <p>Hello World</p>;
+  const currentView = useStore((state) => state.currentView);
+
+  const renderView = () => {
+    switch (currentView) {
+      case 'ladning':
+        return <Landing />;
+      case 'upload':
+        return <Upload />;
+      case 'columnAnnotation':
+        return <ColumnAnnotation />;
+      case 'valueAnnotation':
+        return <ValueAnnotation />;
+      case 'download':
+        return <Download />;
+      default:
+        return <Landing />;
+    }
+  };
+
+  return <div>{renderView()}</div>;
 }
 
 export default App;

src/components/ColumnAnnotation.tsx

@@ -0,0 +1,15 @@
+import NavigationButton from './NavigationButton';
+
+function ColumnAnnotation() {
+  return (
+    <div className="flex flex-col items-center">
+      <h1>Column Annotation</h1>
+      <div className="flex space-x-4">
+        <NavigationButton label="Back - Upload" viewToNavigateTo="upload" />
+        <NavigationButton label="Next - Value Annotation" viewToNavigateTo="valueAnnotation" />
+      </div>
+    </div>
+  );
+}
+
+export default ColumnAnnotation;

src/components/Download.tsx

@@ -0,0 +1,12 @@
+import NavigationButton from './NavigationButton';
+
+function Download() {
+  return (
+    <div className="flex flex-col items-center">
+      <h1>Download</h1>
+      <NavigationButton label="Back - Value Annotation" viewToNavigateTo="valueAnnotation" />
+    </div>
+  );
+}
+
+export default Download;

src/components/Landing.tsx

@@ -0,0 +1,12 @@
+import NavigationButton from './NavigationButton';
+
+function Landing() {
+  return (
+    <div className="flex flex-col items-center">
+      <h1>Welcome</h1>
+      <NavigationButton label="Start - Upload" viewToNavigateTo="upload" />
+    </div>
+  );
+}
+
+export default Landing;

src/components/NavigationButton.tsx

@@ -0,0 +1,24 @@
+import { Button } from '@mui/material';
+import useStore from '../stores/store';
+
+function NavigationButton({
+  label,
+  viewToNavigateTo,
+}: {
+  label: string;
+  viewToNavigateTo: string;
+}) {
+  const setCurrentView = useStore((state) => state.setCurrentView);
+
+  const handleClick = () => {
+    setCurrentView(viewToNavigateTo);
+  };
+
+  return (
+    <Button variant="contained" onClick={handleClick}>
+      {label}
+    </Button>
+  );
+}
+
+export default NavigationButton;

src/components/Upload.tsx

@@ -0,0 +1,15 @@
+import NavigationButton from './NavigationButton';
+
+function Upload() {
+  return (
+    <div className="flex flex-col items-center">
+      <h1>Upload</h1>
+      <div className="flex space-x-4">
+        <NavigationButton label="Back - Welcome" viewToNavigateTo="landing" />
+        <NavigationButton label="Next - Column Annotation" viewToNavigateTo="columnAnnotation" />
+      </div>
+    </div>
+  );
+}
+
+export default Upload;

src/components/ValueAnnotation.tsx

@@ -0,0 +1,15 @@
+import NavigationButton from './NavigationButton';
+
+function ValueAnnotation() {
+  return (
+    <div className="flex flex-col items-center">
+      <h1>Value Annotation</h1>
+      <div className="flex space-x-4">
+        <NavigationButton label="Back - Column Annotation" viewToNavigateTo="columnAnnotation" />
+        <NavigationButton label="Next - Download" viewToNavigateTo="download" />
+      </div>
+    </div>
+  );
+}
+
+export default ValueAnnotation;

src/main.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { StyledEngineProvider } from '@mui/material/styles';
+import { StyledEngineProvider, ThemeProvider } from '@mui/material/styles';
 import App from './App';
+import NBTheme from './theme';
 import './index.css';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     {/* CSS injection order for MUI and tailwind: https://mui.com/material-ui/guides/interoperability/#tailwind-css */}
     <StyledEngineProvider injectFirst>
-      <App />
+      <ThemeProvider theme={NBTheme}>
+        <App />
+      </ThemeProvider>
     </StyledEngineProvider>
   </React.StrictMode>
 );

src/stores/store.test.ts

@@ -0,0 +1,13 @@
+import { act, renderHook } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import useStore from './store';
+
+describe('store actions', () => {
+  it('should set currentView', () => {
+    const { result } = renderHook(() => useStore());
+    act(() => {
+      result.current.setCurrentView('upload');
+    });
+    expect(result.current.currentView).toBe('upload');
+  });
+});

src/stores/store.ts

@@ -0,0 +1,23 @@
+import { create } from 'zustand';
+import { persist, createJSONStorage } from 'zustand/middleware';
+
+type Store = {
+  currentView: string;
+  setCurrentView: (view: string) => void;
+};
+
+const useStore = create<Store>()(
+  persist(
+    (set) => ({
+      currentView: 'landing',
+      setCurrentView: (view: string) => set({ currentView: view }),
+    }),
+    {
+      name: 'store',
+      partialize: (state) => ({ currentView: state.currentView }),
+      storage: createJSONStorage(() => sessionStorage),
+    }
+  )
+);
+
+export default useStore;

src/theme.ts

@@ -0,0 +1,21 @@
+import { createTheme } from '@mui/material';
+
+const NBTheme = createTheme({
+  palette: {
+    primary: {
+      light: '#F5A89B',
+      main: '#D9748D',
+      dark: '#A8556F',
+      contrastText: '#FFFFFF',
+    },
+  },
+  components: {
+    MuiButton: {
+      defaultProps: {
+        sx: { textTransform: 'none' },
+      },
+    },
+  },
+});
+
+export default NBTheme;