pepperplus/pepperplus-ui
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/dev' into feat/visual-programming-interface

Browse Source 
# Conflicts:
#	src/main.tsx
This commit is contained in:
JGerla
2025-10-01 14:08:23 +02:00
parent affdc0c3cd 83e9f28573
commit af44d4cdab
14 changed files with 3373 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
README.md
View File

@@ -1,73 +1,29 @@
# React + TypeScript + Vite
# PepperPlus UI
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
## Installation
Currently, two official plugins are available:
First a description of how to install Node, then how to install this project.
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
### Node
## React Compiler
Install Node 20.19 or higher.
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
Choose one of the options from [the Node.js website](https://nodejs.org/en/download). On Windows, the installer option seems easiest. On Linux (or macOS) you can use `nvm`. On macOS you can also use `brew`.
## Expanding the ESLint configuration
### Project
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
With a terminal in the project directory, run:
```js
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Remove tseslint.configs.recommended and replace with this
tseslint.configs.recommendedTypeChecked,
// Alternatively, use this for stricter rules
tseslint.configs.strictTypeChecked,
// Optionally, add this for stylistic rules
tseslint.configs.stylisticTypeChecked,
// Other configs...
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])
```shell
npm i
```
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
## Running
```js
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'
You can run the project from a terminal with:
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Enable lint rules for React
reactX.configs['recommended-typescript'],
// Enable lint rules for React DOM
reactDom.configs.recommended,
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])
```shell
npm run dev
```
It should automatically reload when you save changes.

40
package-lock.json generated
View File

@@ -11,7 +11,8 @@
"@neodrag/react": "^2.3.1",
"@xyflow/react": "^12.8.6",
"react": "^19.1.1",
"react-dom": "^19.1.1"
"react-dom": "^19.1.1",
"react-router": "^7.9.3"
},
"devDependencies": {
"@eslint/js": "^9.36.0",
@@ -2044,6 +2045,15 @@
"dev": true,
"license": "MIT"
},
"node_modules/cookie": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
"integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
"license": "MIT",
"engines": {
"node": ">=18"
}
},
"node_modules/cross-spawn": {
"version": "7.0.6",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -3121,6 +3131,28 @@
"node": ">=0.10.0"
}
},
"node_modules/react-router": {
"version": "7.9.3",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.9.3.tgz",
"integrity": "sha512-4o2iWCFIwhI/eYAIL43+cjORXYn/aRQPgtFRRZb3VzoyQ5Uej0Bmqj7437L97N9NJW4wnicSwLOLS+yCXfAPgg==",
"license": "MIT",
"dependencies": {
"cookie": "^1.0.1",
"set-cookie-parser": "^2.6.0"
},
"engines": {
"node": ">=20.0.0"
},
"peerDependencies": {
"react": ">=18",
"react-dom": ">=18"
},
"peerDependenciesMeta": {
"react-dom": {
"optional": true
}
}
},
"node_modules/resolve-from": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -3224,6 +3256,12 @@
"semver": "bin/semver.js"
}
},
"node_modules/set-cookie-parser": {
"version": "2.7.1",
"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
"integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
"license": "MIT"
},
"node_modules/shebang-command": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",

3
package.json
View File

@@ -13,7 +13,8 @@
"@neodrag/react": "^2.3.1",
"@xyflow/react": "^12.8.6",
"react": "^19.1.1",
"react-dom": "^19.1.1"
"react-dom": "^19.1.1",
"react-router": "^7.9.3"
},
"devDependencies": {
"@eslint/js": "^9.36.0",

81
src/App.css
View File

@@ -18,6 +18,20 @@
filter: drop-shadow(0 0 2em #61dafbaa);
}
.logopepper {
height: 8em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logopepper:hover {
filter: drop-shadow(0 0 10em #ff0707);
}
.logopepper.react:hover {
filter: drop-shadow(0 0 10em #4eff14aa);
}
@keyframes logo-spin {
from {
transform: rotate(0deg);
@@ -27,16 +41,75 @@
}
}
@keyframes logo-pepper-spin {
from {
transform: rotate(-20deg);
}
to {
transform: rotate(20deg);
}
}
@keyframes logo-pepper-scale {
from {
transform: scale(1,1);
}
to {
transform: scale(1.5,1.5);
}
}
@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}
.card {
padding: 2em;
@media (prefers-reduced-motion: no-preference) {
.logopepper {
animation: logo-pepper-spin infinite 1s linear alternate;
}
}
.read-the-docs {
color: #888;
@media (prefers-reduced-motion: no-preference) {
.logoPepperScaling {
animation: logo-pepper-scale infinite 1s linear alternate;
}
}
button.reset {
background-color: crimson;
color: white;
}
button.reset:hover {
background-color: darkred;
}
button.movePage {
position: fixed; /* Position the button relative to the viewport (screen),
not inside its parent. It stays in place even when you scroll. */
top: 50%; /* Place the button halfway down from the top of the screen. */
/* Stick the button to the left edge of the screen. */
border: 3px solid black;
outline: 1px solid white;
transform: translateY(-50%);
background-color: aquamarine;
color: white;
}
button.movePage.left{
left: 5%;
}
button.movePage.right{
right: 5%;
}
button.movePage:hover{
background-color: rgb(0, 176, 176);
}

37
src/App.tsx
View File

@@ -1,34 +1,15 @@
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import { Routes, Route } from 'react-router'
import './App.css'
import TemplatePage from './pages/TemplatePage/Template.tsx'
import Home from './pages/Home/Home.tsx'
function App() {
const [count, setCount] = useState(0)
function App(){
return (
<>
<div>
<a href="https://vite.dev" target="_blank">
<img src={viteLogo} className="logo" alt="Vite logo" />
</a>
<a href="https://react.dev" target="_blank">
<img src={reactLogo} className="logo react" alt="React logo" />
</a>
</div>
<h1>Vite + React</h1>
<div className="card">
<button onClick={() => setCount((count) => count + 1)}>
count is {count}
</button>
<p>
Edit <code>src/App.tsx</code> and save to test HMR
</p>
</div>
<p className="read-the-docs">
Click on the Vite and React logos to learn more
</p>
</>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/Template" element={<TemplatePage />} />
</Routes>
)
}

1882
src/assets/pepper_transp2.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 254 KiB

1241
src/assets/pepper_transp2_small.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 220 KiB

0
public/vite.svg → src/assets/vite.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

20
src/components/components.tsx Normal file
View File

@@ -0,0 +1,20 @@
// src/components/Counter.tsx
import { useState } from 'react'
//import style from './Counter.module.css' // optional, if you want a CSS module for reset button
import '../App.css'
function Counter() {
const [count, setCount] = useState(0)
return (
<div className="card">
<button onClick={() => setCount((count) => count + 3)}>
count is {count}
</button>
<button className='reset' onClick={() => setCount(0)}>
Reset Counter
</button>
</div>
)
}
export default Counter

7
src/main.tsx
View File

@@ -1,12 +1,13 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { BrowserRouter } from 'react-router'
import './index.css'
import App from './App.tsx'
import VisualProgrammingUI from "./visualProgrammingUI/VisProgUI.tsx";
createRoot(document.getElementById('root')!).render(
<StrictMode>
<App />
<VisualProgrammingUI />
<BrowserRouter>
<App />
</BrowserRouter>
</StrictMode>,
)

6
src/pages/Home/Home.module.css Normal file
View File

@@ -0,0 +1,6 @@
.read_the_docs {
color: #888;
}
.card {
padding: 2em;
}

49
src/pages/Home/Home.tsx Normal file
View File

@@ -0,0 +1,49 @@
import { useState } from 'react'
import { Link } from 'react-router'
import reactLogo from '../../assets/react.svg'
import viteLogo from '../../assets/vite.svg'
import pepperLogo from '../../assets/pepper_transp2_small.svg'
import style from './Home.module.css'
import Counter from '../../components/components.tsx'
function Home() {
return (
<>
<div>
<div className = "logoPepperScaling">
<a href="https://git.science.uu.nl/ics/sp/2025/n25b" target="_blank">
<img src={pepperLogo} className="logopepper" alt="Pepper logo" />
</a>
</div>
<a href="https://vite.dev" target="_blank">
<img src={viteLogo} className="logo" alt="Vite logo" />
</a>
<a href="https://react.dev" target="_blank">
<img src={reactLogo} className="logo react" alt="React logo" />
</a>
</div>
<h1>Vite + React</h1>
<Counter />
<Link to = '/Template'>
<button className='movePage right' onClick={() : void => {}}>
Page Cool --{'>'}
</button>
</Link>
<p>
Edit <code>src/App.tsx</code> and save to test HMR
</p>
<p className={style.read_the_docs}>
Click on the Vite and React logos to learn more
</p>
</>
)
}
export default Home

4
src/pages/TemplatePage/Template.module.css Normal file
View File

@@ -0,0 +1,4 @@
button.reset:hover {
background-color: yellow;
}

24
src/pages/TemplatePage/Template.tsx Normal file
View File

@@ -0,0 +1,24 @@
import { useState } from 'react'
import { Link } from 'react-router'
import Counter from '../../components/components.tsx'
import style from './Template.module.css'
//this is your css file where you can style your buttons and such
//you can still use css parts from App.css, but also overwrite them
function TemplatePage() {
return (
<>
<Counter />
<Link to = {"/"}> {/* here you link to the homepage, in App.tsx you can link new pages */}
<button className= 'movePage left' onClick={() :void => {}}>
Page {'<'}-- Go Home
</button>
</Link>
</>
)
}
export default TemplatePage