From ccdef36b338f563ea8c194313716677bd40bfecb Mon Sep 17 00:00:00 2001 From: Fabian Engelniederhammer Date: Wed, 10 Apr 2024 15:23:59 +0200 Subject: [PATCH] feat(examples): add example React app to demonstrate how to use the components #133 --- components/.eslintignore | 2 - components/package.json | 3 +- components/src/web-components/app.ts | 6 ++- examples/React/.gitignore | 1 + examples/React/README.md | 16 ++++++ examples/React/index.html | 12 +++++ examples/React/package.json | 21 ++++++++ examples/React/src/App.tsx | 77 ++++++++++++++++++++++++++++ examples/React/src/main.tsx | 9 ++++ examples/React/src/vite-env.d.ts | 1 + examples/React/tsconfig.json | 25 +++++++++ examples/React/tsconfig.node.json | 11 ++++ examples/React/vite.config.ts | 7 +++ examples/plainJavascript/README.md | 4 +- examples/plainJavascript/index.html | 4 +- 15 files changed, 190 insertions(+), 9 deletions(-) create mode 100644 examples/React/.gitignore create mode 100644 examples/React/README.md create mode 100644 examples/React/index.html create mode 100644 examples/React/package.json create mode 100644 examples/React/src/App.tsx create mode 100644 examples/React/src/main.tsx create mode 100644 examples/React/src/vite-env.d.ts create mode 100644 examples/React/tsconfig.json create mode 100644 examples/React/tsconfig.node.json create mode 100644 examples/React/vite.config.ts diff --git a/components/.eslintignore b/components/.eslintignore index f58d7f7f..e7d9a7cf 100644 --- a/components/.eslintignore +++ b/components/.eslintignore @@ -1,8 +1,6 @@ node_modules/* docs/* docs-src/* -rollup-config.js custom-elements.json -web-dev-server.config.js build/* storybook-static/* \ No newline at end of file diff --git a/components/package.json b/components/package.json index 537fbf2a..6d5e8667 100644 --- a/components/package.json +++ b/components/package.json @@ -10,7 +10,8 @@ "exports": { ".": "./dist/dashboard-components.js", "./custom-elements.json": "./custom-elements.json", - "./package.json": "./package.json" + "./package.json": "./package.json", + "./style.css": "./dist/style.css" }, "files": [ "dist", diff --git a/components/src/web-components/app.ts b/components/src/web-components/app.ts index a89489b6..60f3ff29 100644 --- a/components/src/web-components/app.ts +++ b/components/src/web-components/app.ts @@ -11,7 +11,11 @@ export class App extends LitElement { lapis: string = ''; override render() { - return html`${this.childNodes}`; + const children = []; + for (const childNode of this.childNodes) { + children.push(html`${childNode}`); + } + return html`${children}`; } override createRenderRoot() { diff --git a/examples/React/.gitignore b/examples/React/.gitignore new file mode 100644 index 00000000..d8b83df9 --- /dev/null +++ b/examples/React/.gitignore @@ -0,0 +1 @@ +package-lock.json diff --git a/examples/React/README.md b/examples/React/README.md new file mode 100644 index 00000000..fcd7ef1b --- /dev/null +++ b/examples/React/README.md @@ -0,0 +1,16 @@ +# GenSpectrum components in React + +This demonstrates how to use GenSpectrum components in React. +It was created using `npm create vite@latest React --template react-ts`. + +Install the packed version of the components: + +```bash +npm run import-components +``` + +Start a test server to see the components in action: + +```bash +npm run dev +``` diff --git a/examples/React/index.html b/examples/React/index.html new file mode 100644 index 00000000..96d938d1 --- /dev/null +++ b/examples/React/index.html @@ -0,0 +1,12 @@ + + + + + + GenSpectrum Components with React + + +
+ + + diff --git a/examples/React/package.json b/examples/React/package.json new file mode 100644 index 00000000..e1b21055 --- /dev/null +++ b/examples/React/package.json @@ -0,0 +1,21 @@ +{ + "name": "react", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "start": "vite", + "import-components": "npm --prefix ../../components/ run build-and-pack && npm install ../../components/genspectrum-dashboard-components.tgz" + }, + "dependencies": { + "@genspectrum/dashboard-components": "file:../../components/genspectrum-dashboard-components.tgz", + "@types/react": "^18.2.66", + "@types/react-dom": "^18.2.22", + "@vitejs/plugin-react": "^4.2.1", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "typescript": "^5.2.2", + "vite": "^5.2.0" + } +} diff --git a/examples/React/src/App.tsx b/examples/React/src/App.tsx new file mode 100644 index 00000000..ed1f07a6 --- /dev/null +++ b/examples/React/src/App.tsx @@ -0,0 +1,77 @@ +import {useEffect, useState} from 'react' +import '@genspectrum/dashboard-components' +import '@genspectrum/dashboard-components/style.css' + +function App() { + const [location, setLocation] = useState({ + region: "Europe", + country: "Switzerland" + }) + const [dateRange, setDateRange] = useState({ + dateFrom: "2021-01-01", + dateTo: "2022-01-01" + }) + + useEffect(() => { + const handleLocationChange = (event: Event) => setLocation((event as CustomEvent).detail); + const handleDateRangeChange = (event: Event) => setDateRange((event as CustomEvent).detail); + + const locationFilter = document.querySelector('gs-location-filter'); + if (locationFilter) { + locationFilter.addEventListener('gs-location-changed', handleLocationChange); + } + + const dateRangeSelector = document.querySelector('gs-date-range-selector'); + if (dateRangeSelector) { + dateRangeSelector.addEventListener('gs-date-range-changed', handleDateRangeChange); + } + + return () => { + if (locationFilter) { + locationFilter.removeEventListener('gs-location-changed', handleLocationChange); + } + if (dateRangeSelector) { + dateRangeSelector.removeEventListener('gs-date-range-changed', handleDateRangeChange); + } + }; + }, []); + + const denominator = { + ...dateRange, + ...location, + }; + + const numerator = { + ...denominator, + displayName: "My variant", + pangoLineage: "B.1.1.7" + }; + + return ( + + + + + + + ); +} + +export default App diff --git a/examples/React/src/main.tsx b/examples/React/src/main.tsx new file mode 100644 index 00000000..e63eef4a --- /dev/null +++ b/examples/React/src/main.tsx @@ -0,0 +1,9 @@ +import React from 'react' +import ReactDOM from 'react-dom/client' +import App from './App.tsx' + +ReactDOM.createRoot(document.getElementById('root')!).render( + + + , +) diff --git a/examples/React/src/vite-env.d.ts b/examples/React/src/vite-env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/examples/React/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/examples/React/tsconfig.json b/examples/React/tsconfig.json new file mode 100644 index 00000000..a7fc6fbf --- /dev/null +++ b/examples/React/tsconfig.json @@ -0,0 +1,25 @@ +{ + "compilerOptions": { + "target": "ES2020", + "useDefineForClassFields": true, + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "module": "ESNext", + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx", + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true + }, + "include": ["src"], + "references": [{ "path": "./tsconfig.node.json" }] +} diff --git a/examples/React/tsconfig.node.json b/examples/React/tsconfig.node.json new file mode 100644 index 00000000..97ede7ee --- /dev/null +++ b/examples/React/tsconfig.node.json @@ -0,0 +1,11 @@ +{ + "compilerOptions": { + "composite": true, + "skipLibCheck": true, + "module": "ESNext", + "moduleResolution": "bundler", + "allowSyntheticDefaultImports": true, + "strict": true + }, + "include": ["vite.config.ts"] +} diff --git a/examples/React/vite.config.ts b/examples/React/vite.config.ts new file mode 100644 index 00000000..5a33944a --- /dev/null +++ b/examples/React/vite.config.ts @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [react()], +}) diff --git a/examples/plainJavascript/README.md b/examples/plainJavascript/README.md index deda1bec..f6152f15 100644 --- a/examples/plainJavascript/README.md +++ b/examples/plainJavascript/README.md @@ -11,7 +11,5 @@ npm run import-components Start a test server to see the components in action: ```bash -npm run start +npm run dev ``` - -Then, open http://localhost:5173/ in your browser. diff --git a/examples/plainJavascript/index.html b/examples/plainJavascript/index.html index 4e88f87f..cc4b74ae 100644 --- a/examples/plainJavascript/index.html +++ b/examples/plainJavascript/index.html @@ -23,14 +23,14 @@ selectedValue="last6Months" >