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

Feature/scan info #45

Closed
Closed
Show file tree
Hide file tree
Changes from 17 commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
7ae3467
feat(Global): initial commit
Christiantyemele Apr 27, 2024
f8c82a6
feat(InfoForm): styling the the info form
Christiantyemele May 2, 2024
029effd
feat(Global): Scan info form and add button
Christiantyemele May 6, 2024
e2a6f29
Merge branch 'main' into feature/ScanInfo
Christiantyemele May 6, 2024
4bdd34e
fix(global): changing style naming convention to kebab
Christiantyemele May 6, 2024
418854f
fix(styles): correcting import rules
Christiantyemele May 6, 2024
7040753
remove unneccessary file
Christiantyemele May 6, 2024
a064ab9
fix(app): solving eslint issues
Christiantyemele May 6, 2024
8570d9a
Delete src/components/Info-Form.test.spec.tsx
Christiantyemele May 6, 2024
cf19108
feat(global): solving eslint issues
Christiantyemele May 6, 2024
430addf
fix(app): fixing routes
Christiantyemele May 6, 2024
500d2eb
fix(Infoform): fixing eslint issues
Christiantyemele May 6, 2024
1541dcd
fix(yarn.lock): fixing eslint issues
Christiantyemele May 6, 2024
1e64998
fix(configuration): fixing eslint issues
Christiantyemele May 6, 2024
1e1b125
fix(configuration): solving configuration issues
Christiantyemele May 6, 2024
bab35ba
Update app.tsx
Christiantyemele May 6, 2024
95e39ad
Update InfoForm.tsx
Christiantyemele May 6, 2024
00fb157
fix(scanform): using tailwindcss for scan form
Christiantyemele May 7, 2024
79e6d99
fix(scanform): using tailwindcss for scan form
Christiantyemele May 7, 2024
52d1ebd
Delete src/index.scss
Christiantyemele May 7, 2024
b6bf023
fix(styles): remvoing css styles
Christiantyemele May 7, 2024
731a793
fix(InfoButton): renamed file to pascal case
Christiantyemele May 7, 2024
4dc115a
Delete package-lock.json
Christiantyemele May 7, 2024
a213801
Update app.tsx
Christiantyemele May 8, 2024
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
8,899 changes: 8,899 additions & 0 deletions package-lock.json
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please @Christiantyemele remove this file. Here we're using only yarn.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

Please @Christiantyemele remove this file. Here we're using only yarn.

Done

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
},
"dependencies": {
"autoprefixer": "^10.4.19",
"formik": "^2.4.6",
"postcss": "^8.4.38",
"react": "^18.2.0",
"react-dom": "^18.2.0",
Expand Down
4 changes: 4 additions & 0 deletions src/app.tsx
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cancel these changes

Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import { JSX } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import UserLogin from './components/UserLogin';
import Homepage from './components/home-page';
import { InfoButton } from './components/Scan-Button.tsx';
import { InfoForm } from './components/InfoForm.tsx';

/**
* The main application component.
Expand All @@ -12,6 +14,8 @@ export function App(): JSX.Element {
<Routes>
<Route path="/" element={<Homepage />} />
<Route path="/login" element={<UserLogin />} />
<Route path="/scan" element={<InfoButton />} />
<Route path="/scan/scanform" element={<InfoForm />} />
</Routes>
</Router>
);
Expand Down
77 changes: 77 additions & 0 deletions src/components/InfoForm.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
import { useFormik } from 'formik';
import { Link } from 'react-router-dom';
export const InfoForm = () => {
const formik = useFormik({
initialValues: {
ScanTitle: '',
ScanDescription: '',
Others: '',
},
onSubmit: () => {
alert('information submitted');
},
});
return (
<div className="main-container">
<div className="container">
<form onSubmit={formik.handleSubmit}>
<div className="inputs">
<div className="title">Scan Form</div>
<label className="head" htmlFor="ScanTitle">
Scan Title
</label>
<div>
<input
id="scanTitle"
name="ScanTitle"
type="text"
onChange={formik.handleChange}
value={formik.values.ScanTitle}
/>
</div>
</div>
<div>
<div className="inputs">
<label className="head" htmlFor="ScanDescription">
Scan Description
</label>
<div>
<textarea
rows={parseInt('3')}
cols={parseInt('30')}
id="ScanDescription"
name="ScanDescription"
onChange={formik.handleChange}
value={formik.values.ScanDescription}
/>
</div>
</div>
<div className="inputs">
<label className="head" htmlFor="Others">
Others
</label>
<div>
<textarea
rows={parseInt('2')}
cols={parseInt('30')}
id="Others"
name="Others"
onChange={formik.handleChange}
value={formik.values.Others}
/>
</div>
</div>
<div className="buttons ">
<button type="submit" className="submit">
Submit
</button>
<Link to={`/scan`}>
<button className="cancel">Cancel</button>
</Link>
</div>
</div>
</form>
</div>
</div>
);
};
11 changes: 11 additions & 0 deletions src/components/Scan-Button.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { Link } from 'react-router-dom';

export const InfoButton = () => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This component's name doesn't match the file name

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

return (
<div className="parent-button">
<Link to={`/scan/scanform`}>
<button className="btn btn-outline btn-ghost add">+</button>
</Link>
</div>
);
};
74 changes: 74 additions & 0 deletions src/index.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,77 @@
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

.container {
display: flex;
padding: 1em;
align-items: center;
min-width: 60dvh;
background-color: gainsboro;
border: 2px solid white;
justify-content: space-evenly;
border-radius: 10px;
max-width: 580px;
}

.main-container {
margin-top: 5em;
display: flex;
justify-content: center;
min-height: 368px;
min-width: 172px;
}

.submit {
margin: 1em;
color: blue;
}

.cancel {
margin: 1em;
color: red;
}

.buttons {
display: grid;
justify-content: space-evenly;
}

.inputs {
margin: 0.5em;
}

.title {
display: flex;
justify-content: center;
margin-bottom: 2em;
font-size: 1.3em;
}

.head {
background: rgb(226 236 245);
font-size: 0.99em;
line-height: 1.1em;
}

.add::after {
content: 'Add Scan';
position: absolute;
visibility: hidden;
}

.parent-button {
display: grid;
justify-content: center;
align-items: end;
margin-top: 30em;
}

.add:hover::after {
visibility: visible;
opacity: 1;
}

.add {
cursor: pointer;
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove this and use tailwind only

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

1 change: 1 addition & 0 deletions tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
"types": ["formik"],

/* Bundler mode */
"moduleResolution": "bundler",
Expand Down
53 changes: 51 additions & 2 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -1743,6 +1743,14 @@
resolved "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz"
integrity sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==

"@types/hoist-non-react-statics@^3.3.1":
version "3.3.5"
resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz#dab7867ef789d87e2b4b0003c9d65c49cc44a494"
integrity sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==
dependencies:
"@types/react" "*"
hoist-non-react-statics "^3.3.0"

"@types/json-schema@*", "@types/json-schema@^7.0.15", "@types/json-schema@^7.0.9":
version "7.0.15"
resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz"
Expand Down Expand Up @@ -2648,6 +2656,11 @@ deep-is@^0.1.3:
resolved "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz"
integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==

deepmerge@^2.1.1:
version "2.2.1"
resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==

define-data-property@^1.0.1, define-data-property@^1.1.4:
version "1.1.4"
resolved "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz"
Expand Down Expand Up @@ -3321,6 +3334,20 @@ foreground-child@^3.1.0:
cross-spawn "^7.0.0"
signal-exit "^4.0.1"

formik@^2.4.6:
version "2.4.6"
resolved "https://registry.yarnpkg.com/formik/-/formik-2.4.6.tgz#4da75ca80f1a827ab35b08fd98d5a76e928c9686"
integrity sha512-A+2EI7U7aG296q2TLGvNapDNTZp1khVt5Vk0Q/fyfSROss0V/V6+txt2aJnwEos44IxTCW/LYAi/zgWzlevj+g==
dependencies:
"@types/hoist-non-react-statics" "^3.3.1"
deepmerge "^2.1.1"
hoist-non-react-statics "^3.3.0"
lodash "^4.17.21"
lodash-es "^4.17.21"
react-fast-compare "^2.0.1"
tiny-warning "^1.0.2"
tslib "^2.0.0"

fraction.js@^4.3.7:
version "4.3.7"
resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7"
Expand Down Expand Up @@ -3576,6 +3603,13 @@ hasown@^2.0.0, hasown@^2.0.1, hasown@^2.0.2:
dependencies:
function-bind "^1.1.2"

hoist-non-react-statics@^3.3.0:
version "3.3.2"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
dependencies:
react-is "^16.7.0"

html-tags@^3.3.1:
version "3.3.1"
resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.3.1.tgz#a04026a18c882e4bba8a01a3d39cfe465d40b5ce"
Expand Down Expand Up @@ -4090,6 +4124,11 @@ locate-path@^7.2.0:
dependencies:
p-locate "^6.0.0"

lodash-es@^4.17.21:
version "4.17.21"
resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==

lodash.camelcase@^4.3.0:
version "4.3.0"
resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
Expand Down Expand Up @@ -4669,7 +4708,12 @@ react-dom@^18.2.0:
loose-envify "^1.1.0"
scheduler "^0.23.0"

react-is@^16.13.1:
react-fast-compare@^2.0.1:
version "2.0.4"
resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==

react-is@^16.13.1, react-is@^16.7.0:
version "16.13.1"
resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
Expand Down Expand Up @@ -5394,6 +5438,11 @@ thenify-all@^1.0.0:
resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
integrity sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==

tiny-warning@^1.0.2:
version "1.0.3"
resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==

to-fast-properties@^2.0.0:
version "2.0.0"
resolved "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz"
Expand Down Expand Up @@ -5431,7 +5480,7 @@ tslib@^1.8.1:
resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==

tslib@^2.6.2:
tslib@^2.0.0, tslib@^2.6.2:
version "2.6.2"
resolved "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz"
integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
Expand Down
Loading