Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React 18.2 #116

Draft
wants to merge 3 commits into
base: master
Choose a base branch
from
Draft
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .nvmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
lts/hydrogen
3 changes: 0 additions & 3 deletions .storybook/addons.js

This file was deleted.

5 changes: 0 additions & 5 deletions .storybook/config.js

This file was deleted.

16 changes: 16 additions & 0 deletions .storybook/main.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
const config = {
framework: '@storybook/react',
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
addons: [
'@storybook/addon-essentials',
'@storybook/addon-actions',
'@storybook/addon-docs',
'@storybook/addon-knobs'
],
docs: {
autodocs: 'tag',
},
staticDirs: ['../static'],
};

export default config;
1 change: 0 additions & 1 deletion .storybook/presets.js

This file was deleted.

45,374 changes: 24,720 additions & 20,654 deletions package-lock.json

Large diffs are not rendered by default.

46 changes: 23 additions & 23 deletions package.json
Original file line number Diff line number Diff line change
@@ -7,19 +7,16 @@
"dependencies": {
"@emotion/core": "^10.0.22",
"@emotion/styled": "^10.0.23",
"@hot-loader/react-dom": "^16.11.0",
"@types/qrcode.react": "^1.0.0",
"change-case": "^4.1.2",
"debug": "4.1.1",
"node-fetch": "^2.6.0",
"qrcode.react": "^1.0.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-hot-loader": "^4.12.18",
"qrcode.react": "^3.1.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-icons": "^3.9.0",
"react-router-dom": "^5.1.2",
"react-router-dom": "^6.24.1",
"react-use-fuzzy": "^1.0.4",
"uuid": "^8.3.2"
"uuid": "^10.0.0"
},
"scripts": {
"build": "npm run check-types && cross-env NODE_ENV=production webpack --progress --mode production",
@@ -42,21 +39,21 @@
"@babel/preset-react": "^7.7.0",
"@babel/preset-typescript": "^7.7.2",
"@emotion/babel-preset-css-prop": "^10.0.23",
"@storybook/addon-actions": "^5.2.6",
"@storybook/addon-docs": "^5.2.6",
"@storybook/addon-knobs": "^5.2.6",
"@storybook/addons": "^5.2.6",
"@storybook/react": "^5.2.6",
"@testing-library/jest-dom": "^5.1.1",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^10.0.0",
"@storybook/addon-actions": "^8.2.2",
"@storybook/addon-docs": "^8.2.2",
"@storybook/addon-knobs": "^8.0.1",
"@storybook/addons": "^7.6.17",
"@storybook/react": "^8.2.2",
"@testing-library/jest-dom": "^6.4.6",
"@testing-library/react": "^16.0.0",
"@testing-library/user-event": "^14.5.2",
"@types/debug": "4.1.5",
"@types/jest": "^25.1.2",
"@types/jest": "^29.5.12",
"@types/node-fetch": "^2.5.4",
"@types/react": "^16.9.11",
"@types/react-dom": "^17.0.9",
"@types/react-router-dom": "^5.1.3",
"@types/uuid": "^8.3.1",
"@types/qrcode.react": "^1.0.5",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@types/uuid": "^10.0.0",
"@typescript-eslint/eslint-plugin": "^2.8.0",
"@typescript-eslint/parser": "^2.8.0",
"autoprefixer": "^9.7.4",
@@ -78,8 +75,10 @@
"eslint-plugin-react": "^7.16.0",
"eslint-plugin-react-hooks": "^2.3.0",
"file-loader": "4.2.0",
"history": "^5.3.0",
"html-webpack-plugin": "3.2.0",
"jest": "^25.1.0",
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
"mini-css-extract-plugin": "^0.9.0",
"postcss": "^7.0.26",
"postcss-cli": "^7.1.0",
@@ -204,6 +203,7 @@
]
},
"jest": {
"testEnvironment": "jsdom",
"coverageDirectory": "coverage",
"testRegex": "(/__tests__/.*|(\\.|/)(test))\\.tsx?$",
"moduleNameMapper": {
@@ -218,4 +218,4 @@
"type": "git",
"url": "https://github.com/Open-Attestation/decentralized-renderer-react-template.git"
}
}
}
10 changes: 4 additions & 6 deletions src/app.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { Home } from "./pages/home";
import { Navbar } from "./components/navbar";
import { Footer } from "./components/footer";
@@ -9,11 +9,9 @@ export const App: React.FunctionComponent = () => {
<div className="flex flex-col min-h-screen">
<Router>
<Navbar />
<Switch>
<Route path="/">
<Home />
</Route>
</Switch>
<Routes>
<Route path="/" element={<Home />} />
</Routes>
<Footer />
</Router>
</div>
440 changes: 222 additions & 218 deletions src/components/displayDocuments/displayDocuments.test.tsx

Large diffs are not rendered by default.

26 changes: 12 additions & 14 deletions src/components/displayDocuments/displayDocuments.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useState, useEffect, useCallback } from "react";
import { useParams, useLocation, Switch, Route, Redirect, NavLink } from "react-router-dom";
import { useParams, useLocation, Routes, Route, Navigate, NavLink } from "react-router-dom";
import { v4 as uuidv4 } from "uuid";
import { pascalCase } from "change-case";
import { cssContainerWrapper } from "../../constants";
@@ -26,7 +26,7 @@ const VersionFilter: React.FunctionComponent = () => {
const location = useLocation();
const { tagId } = useParams<{ tagId: string }>();

if (pascalCase(tagId) !== Tag.TRADE_TRUST) return null; // as of now, only tradetrust supports some v3 docs
if (pascalCase(tagId!) !== Tag.TRADE_TRUST) return null; // as of now, only tradetrust supports some v3 docs

// react router activeClassName does not work on query params, hence:
const params = new URLSearchParams(location.search.substring(1));
@@ -112,18 +112,16 @@ export const DisplayDocuments: React.FunctionComponent<DisplayDocumentsProps> =
<MenuBar setSearchValue={setSearchValue} searchValue={searchValue} />
<div className="py-16">
<div className={`${cssContainerWrapper}`}>
<Switch>
<Route exact path={`/`}>
<FilteredDocuments searchValue={searchValue} documents={documents} />
</Route>
<Route path={`/tag/:tagId`}>
<VersionFilter />
<FilteredDocuments searchValue={searchValue} documents={documents} />
</Route>
<Route path="*">
<Redirect to="/" />
</Route>
</Switch>
<Routes>
<Route path={`/`} element={<FilteredDocuments searchValue={searchValue} documents={documents} />} />
<Route path={`/tag/:tagId`} element={
<div>
<VersionFilter />
<FilteredDocuments searchValue={searchValue} documents={documents} />
</div>
}/>
<Route path="*" element={<Navigate to="/" replace={true} />} />
</Routes>
</div>
</div>
</>
66 changes: 40 additions & 26 deletions src/components/displayDocuments/documentCard.test.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React from "react";
import { render, screen, fireEvent } from "@testing-library/react";
import { Router, Route } from "react-router-dom";
import { createMemoryHistory } from "history";
import { MemoryRouter, Route, Routes } from "react-router-dom";
import { Document, Tag } from "../documents/types";
import { DisplayDocuments } from "../displayDocuments/displayDocuments";

@@ -28,26 +27,28 @@ const sampleDownloadableDocuments: Document[] = [
describe("displayDocuments", () => {
it("should show Document, before QrCodeButton button is pressed", () => {
expect.assertions(1);
const history = createMemoryHistory();
render(
<Router history={history}>
<Route path={`/`}>
<DisplayDocuments documents={sampleDocuments} />
</Route>
</Router>
<MemoryRouter>
<Routes>
<Route path={`/`}>
<DisplayDocuments documents={sampleDocuments} />
</Route>
</Routes>
</MemoryRouter>
);
expect(screen.queryByTestId("document-container")).not.toBeNull();
});

it("should hide QrCodeButton and document, and show QrCode, when QrCodeButton button is pressed", () => {
expect.assertions(3);
const history = createMemoryHistory();
render(
<Router history={history}>
<Route path={`/`}>
<DisplayDocuments documents={sampleDocuments} />
</Route>
</Router>
<MemoryRouter>
<Routes>
<Route path={`/`}>
<DisplayDocuments documents={sampleDocuments} />
</Route>
</Routes>
</MemoryRouter>
);
fireEvent.click(screen.getByTestId("qr-button"));
expect(screen.queryByTestId("qr-button")).toBeNull();
@@ -57,13 +58,14 @@ describe("displayDocuments", () => {

it("should display ShowDocumentButton, when hovering over HoverContainer", () => {
expect.assertions(1);
const history = createMemoryHistory();
render(
<Router history={history}>
<Route path={`/`}>
<DisplayDocuments documents={sampleDocuments} />
</Route>
</Router>
<MemoryRouter>
<Routes>
<Route path={`/`}>
<DisplayDocuments documents={sampleDocuments} />
</Route>
</Routes>
</MemoryRouter>
);
fireEvent.click(screen.getByTestId("qr-button"));
fireEvent.mouseOver(screen.getByTestId("hover-container"));
@@ -72,13 +74,12 @@ describe("displayDocuments", () => {

it("should call window.open() when download button is pressed", () => {
expect.assertions(1);
const history = createMemoryHistory();
render(
<Router history={history}>
<Route path={`/`}>
<DisplayDocuments documents={sampleDownloadableDocuments} />
</Route>
</Router>
<MemoryRouter>
<Routes>
<Route path={`/`} element={<DisplayDocuments documents={sampleDownloadableDocuments} />} />
</Routes>
</MemoryRouter>
);

const mockedOpen = jest.fn();
@@ -87,4 +88,17 @@ describe("displayDocuments", () => {
fireEvent.click(screen.getByTestId("download-document-button"));
expect(mockedOpen).toHaveBeenCalledWith("http://example.com", "_blank");
});

it("debug", () => {
expect.assertions(1);
render(
<MemoryRouter>
<Routes>
<Route path={`/`} element={<div id="foo">hello</div>} />
</Routes>
</MemoryRouter>
);
const element = screen.getByText("hello");
expect(element).not.toBeNull();
});
});
7 changes: 2 additions & 5 deletions src/components/displayDocuments/menuBar/menuBar.tsx
Original file line number Diff line number Diff line change
@@ -59,19 +59,16 @@ export const MenuBar: React.FunctionComponent<MenuBarProps> = ({ searchValue, se
<MenuBarContent className="rounded-lg bg-white py-3">
<div className="flex flex-wrap px-5 items-center">
<NavLink
activeClassName="font-semibold text-orange bg-orange-200 focus:outline-none"
className="w-auto px-2 py-1 rounded-md font-normal text-gray-700 text-sm transition-colors duration-300 ease-out hover:bg-orange-200 hover:text-orange mx-1"
className={({ isActive }) => "font-semibold text-orange bg-orange-200 focus:outline-none" + (isActive ? " w-auto px-2 py-1 rounded-md font-normal text-gray-700 text-sm transition-colors duration-300 ease-out hover:bg-orange-200 hover:text-orange mx-1" : "")}
to={`/`}
exact
>
All
</NavLink>
{navItems.map((item, index) => {
return (
<NavLink
key={`nav-item-${index}`}
activeClassName="font-semibold text-orange bg-orange-200 focus:outline-none"
className="w-auto px-2 py-1 rounded-md font-normal text-gray-700 text-sm transition-colors duration-300 ease-out hover:bg-orange-200 hover:text-orange mx-1"
className={({ isActive }) => "font-semibold text-orange bg-orange-200 focus:outline-none" + (isActive ? " w-auto px-2 py-1 rounded-md font-normal text-gray-700 text-sm transition-colors duration-300 ease-out hover:bg-orange-200 hover:text-orange mx-1" : "")}
to={`${item.to}`}
>
{item.label}
5 changes: 3 additions & 2 deletions src/index.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from "react";
import ReactDOM from "react-dom";
import { createRoot } from 'react-dom/client';
import { App } from "./app";
import "./index.css";

ReactDOM.render(<App />, document.getElementById("root"));
const root = createRoot(document.getElementById("root")!)
root.render(<App />);
5 changes: 1 addition & 4 deletions webpack.config.js
Original file line number Diff line number Diff line change
@@ -91,10 +91,7 @@ module.exports = {

resolve: {
extensions: [".js", ".ts", ".tsx"],
modules: ["node_modules", path.resolve(__dirname, "src")],
alias: {
"react-dom": "@hot-loader/react-dom"
}
modules: ["node_modules", path.resolve(__dirname, "src")]
},
bail: true
};