From af186459062b1f7ae3e801820396089deb0b790a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Wed, 21 Feb 2024 17:44:41 +0100 Subject: [PATCH] remove RDnD --- package-lock.json | 40 +++++++++++++ package.json | 2 + public/index.html | 3 + src/App.css | 38 ------------ src/App.js | 31 ++++------ src/App.test.js | 8 --- src/components/draggables/labelInput.jsx | 27 +++++++++ src/components/dropDiv.jsx | 31 ++++++++++ src/components/homePage.jsx | 22 +++++++ src/components/sheets.jsx | 52 ++++++++++++++++ src/index.css | 13 ---- src/index.js | 11 +--- src/logo.svg | 1 - src/reportWebVitals.js | 13 ---- src/setupTests.js | 5 -- src/styles/main.css | 63 ++++++++++++++++++++ src/styles/reset.css | 75 ++++++++++++++++++++++++ 17 files changed, 330 insertions(+), 105 deletions(-) delete mode 100644 src/App.css delete mode 100644 src/App.test.js create mode 100644 src/components/draggables/labelInput.jsx create mode 100644 src/components/dropDiv.jsx create mode 100644 src/components/homePage.jsx create mode 100644 src/components/sheets.jsx delete mode 100644 src/index.css delete mode 100644 src/logo.svg delete mode 100644 src/reportWebVitals.js delete mode 100644 src/setupTests.js create mode 100644 src/styles/main.css create mode 100644 src/styles/reset.css diff --git a/package-lock.json b/package-lock.json index 0e9c0c4..0357b85 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,8 +11,10 @@ "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", + "express": "^4.18.2", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.22.1", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" } @@ -3352,6 +3354,14 @@ } } }, + "node_modules/@remix-run/router": { + "version": "1.15.1", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.1.tgz", + "integrity": "sha512-zcU0gM3z+3iqj8UX45AmWY810l3oUmXM7uH4dt5xtzvMhRtYVhKGOmgOd1877dOPPepfCjUv57w+syamWIYe7w==", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -14992,6 +15002,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.22.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.1.tgz", + "integrity": "sha512-0pdoRGwLtemnJqn1K0XHUbnKiX0S4X8CgvVVmHGOWmofESj31msHo/1YiqcJWK7Wxfq2a4uvvtS01KAQyWK/CQ==", + "dependencies": { + "@remix-run/router": "1.15.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.22.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.1.tgz", + "integrity": "sha512-iwMyyyrbL7zkKY7MRjOVRy+TMnS/OPusaFVxM2P11x9dzSzGmLsebkCvYirGq0DWB9K9hOspHYYtDz33gE5Duw==", + "dependencies": { + "@remix-run/router": "1.15.1", + "react-router": "6.22.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", diff --git a/package.json b/package.json index 744fff6..3aa8b4f 100644 --- a/package.json +++ b/package.json @@ -6,8 +6,10 @@ "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", + "express": "^4.18.2", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.22.1", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" }, diff --git a/public/index.html b/public/index.html index aa069f2..39ff4f9 100644 --- a/public/index.html +++ b/public/index.html @@ -5,6 +5,9 @@ + + + -
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
- + + + } /> + } /> + {/* Define more routes here if needed */} + + ); } -export default App; +export default App; \ No newline at end of file diff --git a/src/App.test.js b/src/App.test.js deleted file mode 100644 index 1f03afe..0000000 --- a/src/App.test.js +++ /dev/null @@ -1,8 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import App from './App'; - -test('renders learn react link', () => { - render(); - const linkElement = screen.getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); -}); diff --git a/src/components/draggables/labelInput.jsx b/src/components/draggables/labelInput.jsx new file mode 100644 index 0000000..700bbf2 --- /dev/null +++ b/src/components/draggables/labelInput.jsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { useDrag } from 'react-dnd'; + +const DraggableItem = ({ name }) => { + const [{ isDragging }, drag] = useDrag({ + item: { name }, + type: 'draggable', + collect: (monitor) => ({ + isDragging: !!monitor.isDragging(), + }), + }); + return ( +
+ +
+ ) +}; + +export default DraggableItem; diff --git a/src/components/dropDiv.jsx b/src/components/dropDiv.jsx new file mode 100644 index 0000000..833021d --- /dev/null +++ b/src/components/dropDiv.jsx @@ -0,0 +1,31 @@ +import React from 'react'; +import { useDrop } from "react-dnd"; + +const DropDiv = ({type, items}) => { + const [{ isOver }, drop] = useDrop(() => ({ + accept: type, + collect: (monitor) => ({ + isOver: !!monitor.isOver(), + }), + })); + console.log(items); + if (items.length === 0) { +
+
+ } + return ( +
+ {items.map((item) => { + return
{item.content}
+ })} +
+ ); +}; + +export default DropDiv; diff --git a/src/components/homePage.jsx b/src/components/homePage.jsx new file mode 100644 index 0000000..47825f4 --- /dev/null +++ b/src/components/homePage.jsx @@ -0,0 +1,22 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; +import '../styles/main.css'; // Import CSS/LESS file directly + +const Home = () => { + return ( +
+ +
+
+

About SheetBuilder

+

SheetBuilder is a web application that allows users to build and share custom character sheets for any RPG out there, using a simple Drag n Drop system

+
+
+
+ ); +}; + +export default Home; \ No newline at end of file diff --git a/src/components/sheets.jsx b/src/components/sheets.jsx new file mode 100644 index 0000000..605dd1d --- /dev/null +++ b/src/components/sheets.jsx @@ -0,0 +1,52 @@ +import React, { useState } from 'react'; +import { Link } from 'react-router-dom'; +import '../styles/main.css'; // Import CSS/LESS file directly +import { DndProvider } from 'react-dnd'; +import { HTML5Backend } from 'react-dnd-html5-backend'; + +import DropDiv from './dropDiv.jsx'; +import DraggableItem from './draggables/labelInput.jsx'; + + +const Sheets = () => { + let items = []; + + function handleDrop(item) { + const id = items.length+1; + const draggable = {id:id , content: item}; + + items.push(draggable); + } + + + return ( +
+ +
+ +
+

Create your own

+
+ + )} items={items}/> + +
+ + +
+
+
+ ); +}; + +export default Sheets; \ No newline at end of file diff --git a/src/index.css b/src/index.css deleted file mode 100644 index ec2585e..0000000 --- a/src/index.css +++ /dev/null @@ -1,13 +0,0 @@ -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} diff --git a/src/index.js b/src/index.js index d563c0f..7be53bc 100644 --- a/src/index.js +++ b/src/index.js @@ -1,17 +1,12 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; -import './index.css'; import App from './App'; -import reportWebVitals from './reportWebVitals'; +import './styles/reset.css'; +import './styles/main.css'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( -); - -// If you want to start measuring performance in your app, pass a function -// to log results (for example: reportWebVitals(console.log)) -// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals -reportWebVitals(); +); \ No newline at end of file diff --git a/src/logo.svg b/src/logo.svg deleted file mode 100644 index 9dfc1c0..0000000 --- a/src/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js deleted file mode 100644 index 5253d3a..0000000 --- a/src/reportWebVitals.js +++ /dev/null @@ -1,13 +0,0 @@ -const reportWebVitals = onPerfEntry => { - if (onPerfEntry && onPerfEntry instanceof Function) { - import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { - getCLS(onPerfEntry); - getFID(onPerfEntry); - getFCP(onPerfEntry); - getLCP(onPerfEntry); - getTTFB(onPerfEntry); - }); - } -}; - -export default reportWebVitals; diff --git a/src/setupTests.js b/src/setupTests.js deleted file mode 100644 index 8f2609b..0000000 --- a/src/setupTests.js +++ /dev/null @@ -1,5 +0,0 @@ -// jest-dom adds custom jest matchers for asserting on DOM nodes. -// allows you to do things like: -// expect(element).toHaveTextContent(/react/i) -// learn more: https://github.com/testing-library/jest-dom -import '@testing-library/jest-dom'; diff --git a/src/styles/main.css b/src/styles/main.css new file mode 100644 index 0000000..dc25f09 --- /dev/null +++ b/src/styles/main.css @@ -0,0 +1,63 @@ +.page { + padding-block: 100px; + width: clamp(600px, 33%, 900px); + margin-inline: auto; + display: flex; + flex-direction: column; + + font-family: 'Open Sans'; + + .nav { + display: flex; + justify-content: space-evenly; + column-gap: 20px; + + .navButton { + text-decoration: unset; + background: coral; + color: rgb(123, 45, 17); + padding: .7em 1em; + border-radius: 2px; + } + } + + .content { + + + .sidebar { + position: absolute; + left: 0; + top: 0; + height: 92vh; + width: 400px; + padding-left: 20px; + + .picker { + background: #eee; + border:1px solid #ccc; + border-radius: 10px; + padding: 10px; + height:100%; + overflow: auto; + + .item { + border-bottom: 2px solid grey; + padding-bottom: 5px; + } + } + } + + #create { + height:700px; + width:500px; + + .drop-div { + min-height:600px; + width:500px; + border:1px solid lightgrey; + border-radius:7px; + } + } + } + +} \ No newline at end of file diff --git a/src/styles/reset.css b/src/styles/reset.css new file mode 100644 index 0000000..f650724 --- /dev/null +++ b/src/styles/reset.css @@ -0,0 +1,75 @@ +/* Box sizing rules */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* Remove default margin */ +body, +h1, +h2, +h3, +h4, +p, +figure, +blockquote, +dl, +dd { + margin-block-end: 0; +} + +/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ +ul[role='list'], +ol[role='list'] { + list-style: none; +} + +/* Set core root defaults */ +html:focus-within { + scroll-behavior: smooth; +} + +/* Set core body defaults */ +body { + min-height: 100vh; + text-rendering: optimizeSpeed; + line-height: 1.5; + margin: unset; +} + +/* A elements that don't have a class get default styles */ +a:not([class]) { + text-decoration-skip-ink: auto; +} + +/* Make images easier to work with */ +img, +picture { + max-width: 100%; + display: block; +} + +/* Inherit fonts for inputs and buttons */ +input, +button, +textarea, +select { + font: inherit; +} + +/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */ +@media (prefers-reduced-motion: reduce) { + html:focus-within { + scroll-behavior: auto; + } + + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } +} \ No newline at end of file