Adds Tailwind CSS, Mock Transaction Data, Search Function and Transac…

…tion Results Page (MystenLabs#471)

* Implements a Tailwind CSS approach that compartmentalizes styling
* Adds a mock transaction JSON dataset for testing and to facilitate work on the UI while API is in development (see `./explorer/client/src/utils/transaction_mock.json`)
* Adds the Search Function
* Adds the Transaction Results page
* Implements 'Japanese Streetwear' look with Yoshimichi Ohira fonts from Google Fonts
* Updates the tests to reflect the new functionality
* Implements a logical structure to the `src` code with `pages` for complete pages and  `components` for things that are part of a page

explorer/client/README.md

@@ -43,3 +43,9 @@ Run linting check but also try to fix any issues.
 
 Run prettier in watch mode and format any file that changes. (Also runs prettier once in the beginning for all the files)\
 It can be useful during development to format automatically all the files that change.
+
+## Deployment
+
+For guidance on deployment, plese see here: https://create-react-app.dev/docs/deployment/.
+
+Because of the addition of `react-router` further changes will be needed that depend on the exact infrastructure used. Please consult section **Serving Apps with Client-Side Routing**.

explorer/client/package.json

@@ -10,16 +10,18 @@
         "@types/node": "^16.11.24",
         "@types/react": "^17.0.39",
         "@types/react-dom": "^17.0.11",
+        "autoprefixer": "^10.4.2",
         "concurrently": "^7.0.0",
         "eslint-config-prettier": "^8.3.0",
         "onchange": "^7.1.0",
+        "postcss": "^8.4.6",
         "prettier": "2.5.1",
         "react-scripts": "5.0.0",
-        "sass": "^1.49.7",
         "stylelint": "^14.5.0",
         "stylelint-config-prettier": "^9.0.3",
         "stylelint-config-standard": "^25.0.0",
         "stylelint-config-standard-scss": "^3.0.0",
+        "tailwindcss": "^3.0.23",
         "typescript": "^4.5.5"
     },
     "dependencies": {

explorer/client/src/__tests__/App.test.tsx

@@ -0,0 +1,93 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { createMemoryHistory } from 'history';
+import {
+    MemoryRouter,
+    unstable_HistoryRouter as HistoryRouter,
+} from 'react-router-dom';
+
+import App from '../app/App';
+
+function expectHome() {
+    expect(screen.getByText(/Latest Transactions/i)).toBeInTheDocument();
+}
+
+function searchText(text: string) {
+    fireEvent.change(
+        screen.getByPlaceholderText(/Search transactions by ID/i),
+        { target: { value: text } }
+    );
+    fireEvent.submit(screen.getByRole('form', { name: /search form/i }));
+}
+
+function expectTransactionStatus(result: 'fail' | 'success') {
+    expect(screen.getByTestId('transaction-status')).toHaveTextContent(result);
+}
+
+describe('App component', () => {
+    it('renders the home page', () => {
+        render(<App />, { wrapper: MemoryRouter });
+        expectHome();
+    });
+    it('redirects to home for every unknown path', () => {
+        render(
+            <MemoryRouter initialEntries={['/anything']}>
+                <App />
+            </MemoryRouter>
+        );
+        expectHome();
+    });
+    it('redirects to home for unknown path by replacing the history', () => {
+        const history = createMemoryHistory({ initialEntries: ['/anything'] });
+        render(
+            <HistoryRouter history={history}>
+                <App />
+            </HistoryRouter>
+        );
+        expectHome();
+        expect(history.index).toBe(0);
+    });
+    it('redirects to transaction details', () => {
+        render(<App />, { wrapper: MemoryRouter });
+        searchText(
+            'A1dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
+        );
+        expect(screen.getByText('Transaction ID')).toBeInTheDocument();
+        expectTransactionStatus('success');
+    });
+    it('complains when transaction cannot be found', () => {
+        render(<App />, { wrapper: MemoryRouter });
+        searchText(
+            'A1ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddde'
+        );
+        expect(
+            screen.getByText('This transaction could not be found:')
+        ).toBeInTheDocument();
+    });
+    it('details a transaction failure', () => {
+        render(<App />, { wrapper: MemoryRouter });
+        searchText(
+            'A2dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
+        );
+        expectTransactionStatus('fail');
+    });
+
+    it('redirects to search result', () => {
+        render(<App />, { wrapper: MemoryRouter });
+        searchText('Mysten Labs');
+        expect(
+            screen.getByText('Search results for "Mysten Labs"')
+        ).toBeInTheDocument();
+    });
+    it('returns home when Home is clicked', () => {
+        render(<App />, { wrapper: MemoryRouter });
+        searchText('Mysten Labs');
+        fireEvent.click(screen.getByRole('link', { name: /home button/i }));
+        expectHome();
+    });
+    it('returns home when Title Logo is clicked', () => {
+        render(<App />, { wrapper: MemoryRouter });
+        searchText('Mysten Labs');
+        fireEvent.click(screen.getByRole('link', { name: /logo/i }));
+        expectHome();
+    });
+});

explorer/client/src/app/App.module.css

@@ -0,0 +1,11 @@
+.app {
+    @apply font-sans w-screen;
+}
+
+.search > h2 {
+    @apply ml-[5vw] mb-[1vh];
+}
+
+.search {
+    @apply bg-black text-white pb-4 w-[100vw];
+}

explorer/client/src/app/App.tsx

@@ -1,14 +1,22 @@
-import NavigationHeader from '../nav-header/NavigationHeader';
+import Footer from '../components/footer/Footer';
+import Header from '../components/header/Header';
+import Search from '../components/search/Search';
 import AppRoutes from '../pages/config/AppRoutes';
+import styles from './App.module.css';
 
 function App() {
     return (
-        <>
-            <NavigationHeader />
+        <div className={styles.app}>
+            <Header />
+            <div className={styles.search}>
+                <h2>The Sui Explorer</h2>
+                <Search />
+            </div>
             <main>
                 <AppRoutes />
             </main>
-        </>
+            <Footer />
+        </div>
     );
 }
 

explorer/client/src/components/external-link/ExternalLink.tsx

@@ -0,0 +1,9 @@
+function ExternalLink({ href, label }: { href: string; label: string }) {
+    return (
+        <a href={href} target="_blank" rel="noreferrer noopener">
+            {label}
+        </a>
+    );
+}
+
+export default ExternalLink;

explorer/client/src/components/footer/Footer.module.css

@@ -0,0 +1,7 @@
+.footer {
+    @apply fixed bottom-0 bg-black w-full px-[5vw];
+}
+
+.links > a {
+    @apply text-white no-underline hover:underline leading-[5vh] mr-[5vw];
+}

explorer/client/src/components/footer/Footer.tsx

@@ -0,0 +1,26 @@
+import { Link } from 'react-router-dom';
+
+import ExternalLink from '../external-link/ExternalLink';
+import styles from './Footer.module.css';
+
+function Footer() {
+    return (
+        <footer className={styles.footer}>
+            <nav className={styles.links}>
+                <Link to="/" aria-label="home button">
+                    Home
+                </Link>
+                <ExternalLink
+                    href="https://mystenlabs.com/"
+                    label="Mysten Labs"
+                />
+                <ExternalLink
+                    href="https://devportal-30dd0.web.app/"
+                    label="Developer Hub"
+                />
+            </nav>
+        </footer>
+    );
+}
+
+export default Footer;

explorer/client/src/components/header/Header.module.css

@@ -0,0 +1,12 @@
+.logo {
+    @apply font-advanced text-2xl lg:text-4xl text-black 
+  no-underline;
+}
+
+.nav {
+    @apply mt-[1vh] ml-[5vw];
+}
+
+header {
+    @apply h-[2rem];
+}

explorer/client/src/components/header/Header.tsx

@@ -0,0 +1,17 @@
+import { Link } from 'react-router-dom';
+
+import styles from './Header.module.css';
+
+const Header = () => {
+    return (
+        <header>
+            <nav className={styles.nav}>
+                <Link to="/" aria-label="logo" className={styles.logo}>
+                    Mysten Labs
+                </Link>
+            </nav>
+        </header>
+    );
+};
+
+export default Header;