diff --git a/LoginSignUp/SignIn.jsx b/LoginSignUp/SignIn.jsx index 547518a..1d6c2da 100644 --- a/LoginSignUp/SignIn.jsx +++ b/LoginSignUp/SignIn.jsx @@ -1,6 +1,9 @@ import React, { useState } from 'react' import { BsMortarboardFill } from "react-icons/bs"; import { Link } from 'react-router-dom'; +import './styles/app.css' +import '@jehankandy/jkcss/src/layout/columns/columns.css' +import '@jehankandy/jkcss/src/buttons/button.css' const SignIn = () => { // for login data @@ -17,41 +20,41 @@ const SignIn = () => { // this will be updated in future versions } return ( -
-
-
-
-
-
+
+
+
+
+
+
{/* change the Icon According to your needs */} -

-

Welcome Back

+

+

Welcome Back

Your Project Name

-
-
+
+
-
+
- SetLoginData({...LoginData, email:e.target.value})}/>
-
+
- SetLoginData({...LoginData, password:e.target.value})}/>
-
- +
+
-

Forget Password ?

+

Forget Password ?

-
-

Don't have an Account ? SignUp

+
+

Don't have an Account ? SignUp

-
+
) diff --git a/LoginSignUp/SignUp.jsx b/LoginSignUp/SignUp.jsx index e8e6116..1656fad 100644 --- a/LoginSignUp/SignUp.jsx +++ b/LoginSignUp/SignUp.jsx @@ -18,45 +18,45 @@ const SignUp = () => { // this will be updated in future versions } return ( -
-
-
-
-
-
+
+
+
+
+
+
{/* change the Icon According to your needs */} -

-

Welcome to

+

+

Welcome to

Your Project Name

-
-
+
+
-
+
- SetSignUpData({...SignUpData, username:e.target.value})}/>
-
+
- SetSignUpData({...SignUpData, email:e.target.value})}/>
-
+
- SetSignUpData({...SignUpData, password:e.target.value})}/>
-
- +
+
-
-

Already have an Account ? SignUp

+
+

Already have an Account ? SignIn

-
+
) diff --git a/LoginSignUp/styles/app.css b/LoginSignUp/styles/app.css new file mode 100644 index 0000000..a618168 --- /dev/null +++ b/LoginSignUp/styles/app.css @@ -0,0 +1,48 @@ +.app-body { + background: #e5e7eb; + min-height: 100vh; + padding-top: 6rem; + padding-bottom: 6rem; + padding-left: 2rem; + padding-right: 2rem; +} + +.form-bg { + background: white; + padding-top: 4rem; + padding-bottom: 4rem; + padding-left: 2rem; + padding-right: 2rem; + width: 100%; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); +} + +.logo { + height: 5rem; + width: auto; +} + +.input-area, .link-text { + margin-top: 8px; + margin-bottom: 8px; +} + +.link-text { + color: rgb(59, 130, 246); + font-weight: 600; +} + +.feild-input { + width: 100%; + height: 3rem; + padding-left: 0.5rem; + background: rgb(229, 231, 235); + border-radius: 0.25rem; +} + +@media (min-width: 768px) { + .input-area, .link-text { + margin-left: 2rem; + margin-right: 2rem; + } +} \ No newline at end of file diff --git a/LoginSignUp/styles/app.min.css b/LoginSignUp/styles/app.min.css new file mode 100644 index 0000000..c1f7e17 --- /dev/null +++ b/LoginSignUp/styles/app.min.css @@ -0,0 +1 @@ +.app-body{background:#e5e7eb;min-height:100vh;padding-top:6rem;padding-bottom:6rem;padding-left:2rem;padding-right:2rem}.form-bg{background:#fff;padding-top:4rem;padding-bottom:4rem;padding-left:2rem;padding-right:2rem;width:100%;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1)}.logo{height:5rem;width:auto}.input-area,.link-text{margin-top:8px;margin-bottom:8px}.link-text{color:#3b82f6;font-weight:600}.feild-input{width:100%;height:3rem;padding-left:.5rem;background:#e5e7eb;border-radius:.25rem}@media(min-width: 768px){.input-area,.link-text{margin-left:2rem;margin-right:2rem}} \ No newline at end of file diff --git a/LoginSignUp/styles/app.scss b/LoginSignUp/styles/app.scss new file mode 100644 index 0000000..f3f3c61 --- /dev/null +++ b/LoginSignUp/styles/app.scss @@ -0,0 +1,47 @@ +.app-body{ + background: #e5e7eb; //#e5e7eb + min-height: 100vh; + padding-top: 6rem; + padding-bottom: 6rem; + padding-left: 2rem; + padding-right: 2rem; +} +.form-bg{ + background: white; + padding-top: 4rem; + padding-bottom: 4rem; + padding-left: 2rem; + padding-right: 2rem; + width: 100%; + box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); +} +.logo{ + height: 5rem; + width: auto; +} +.input-area{ + margin-top: 8px; + margin-bottom: 8px; +} +.link-text{ + @extend .input-area; + color: rgb(59 130 246); + font-weight: 600; +} + +.feild-input{ + width: 100%; + height: 3rem; + padding-left: 0.5rem; + background: rgb(229 231 235); + border-radius: 0.25rem; +} + +// responcive styles + +@media (min-width: 768px) { + .input-area{ + margin-left: 2rem; + margin-right: 2rem; + } +} \ No newline at end of file diff --git a/LoginSignUpTW/SignIn.jsx b/LoginSignUpTW/SignIn.jsx new file mode 100644 index 0000000..547518a --- /dev/null +++ b/LoginSignUpTW/SignIn.jsx @@ -0,0 +1,60 @@ +import React, { useState } from 'react' +import { BsMortarboardFill } from "react-icons/bs"; +import { Link } from 'react-router-dom'; + +const SignIn = () => { + // for login data + const [LoginData, SetLoginData] = useState({ + email: '', + password: '' + }) + + // send data to backend using axios + const headleSubmit = (e) => { + e.preventDefault(); + + // login to system + // this will be updated in future versions + } + return ( +
+
+
+
+
+
+ {/* change the Icon According to your needs */} +

+

Welcome Back

+

Your Project Name

+
+
+
+
+
+ + SetLoginData({...LoginData, email:e.target.value})}/> +
+
+ + SetLoginData({...LoginData, password:e.target.value})}/> +
+
+ +
+
+

Forget Password ?

+
+
+

Don't have an Account ? SignUp

+
+
+
+
+
+ ) +} + +export default SignIn \ No newline at end of file diff --git a/LoginSignUpTW/SignUp.jsx b/LoginSignUpTW/SignUp.jsx new file mode 100644 index 0000000..e8e6116 --- /dev/null +++ b/LoginSignUpTW/SignUp.jsx @@ -0,0 +1,65 @@ +import React, { useState } from 'react' +import { BsMortarboardFill } from "react-icons/bs"; +import { Link } from 'react-router-dom'; + +const SignUp = () => { + // for login data + const [SignUpData, SetSignUpData] = useState({ + username: '', + email: '', + password: '' + }) + + // send data to backend using axios + const headleSubmit = (e) => { + e.preventDefault(); + + // signup to system + // this will be updated in future versions + } + return ( +
+
+
+
+
+
+ {/* change the Icon According to your needs */} +

+

Welcome to

+

Your Project Name

+
+
+
+
+
+ + SetSignUpData({...SignUpData, username:e.target.value})}/> +
+
+ + SetSignUpData({...SignUpData, email:e.target.value})}/> +
+
+ + SetSignUpData({...SignUpData, password:e.target.value})}/> +
+
+ +
+
+
+
+

Already have an Account ? SignUp

+
+
+
+
+
+ ) +} + +export default SignUp \ No newline at end of file diff --git a/README.md b/README.md index 04688a8..31d1ce5 100644 --- a/README.md +++ b/README.md @@ -12,11 +12,17 @@ # IMPORTANT Notice -- This NPM package works only with ReactJS + Vite + Tailwind CSS Projects +- This NPM package works with ReactJS Projects (from in v2.0.0) +- This NPM package works only with ReactJS + Vite + Tailwind CSS Projects (in v1.1.0) - The Common Working NPM Package will be Released in the Future. # How to use this NPM Package +- Important +- - use NPM scripts according to your needs +- - use only on script + + - Before install the Package you must install following Packages - - react-router-dom @@ -33,11 +39,17 @@ - and then go to your `package.json` file - find `scripts` -- add following command +- add following commands + +- Use with Custom CSS +- Use Tailwind CSS + + +### Use with Custom CSS ```json - "SignInUp": "node node_modules/login-signup-react/index.js --destination=src/components/LoginSignUp" + "SignInUp": "node -e \"require('login-signup-react').RunReactLoginSignIn()\"", ``` @@ -48,7 +60,7 @@ "dev": "vite", "build": "vite build", "serve": "vite preview", - "SignInUp": "node node_modules/login-signup-react/index.js --destination=src/components/LoginSignUp" + "SignInUp": "node -e \"require('login-signup-react').RunReactLoginSignIn()\"", }, ``` @@ -70,6 +82,7 @@ import { BrowserRouter, Route, Routes } from "react-router-dom"; import SignIn from "./components/LoginSignUp/SignIn"; // Importing the Templete the created by run npm package +import SignUp from "./components/LoginSignUp/SignUp"; // Importing the Templete the created by run npm package export default function App() { return ( @@ -79,20 +92,77 @@ export default function App() { {/* declare the Route */} {/* the path can change whatever you want */} } /> - + } /> ) } ``` +
+ + +### Use Tailwind CSS + +```json + + "SignInUpTW": "node -e \"require('login-signup-react').RunReactLoginSignInTW()\"" + +``` +``` json + + "scripts": { + "dev": "vite", + "build": "vite build", + "serve": "vite preview", + "SignInUpTW": "node -e \"require('login-signup-react').RunReactLoginSignInTW()\"" + }, +``` + +- after that run the command + +``` + + npm run SignInUp + +``` + +- after you running the command you can see a folder `LoginSignUpTW` in path `src/components` in your Project + +- after done this you have to update App.jsx file in the project + +``` jsx + + +import { BrowserRouter, Route, Routes } from "react-router-dom"; +import SignIn from "./components/LoginSignUpTW/SignIn"; // Importing the Templete the created by run npm package +import SignUp from "./components/LoginSignUpTW/SignUp"; // Importing the Templete the created by run npm package + +export default function App() { + return ( + + + + {/* declare the Route */} + {/* the path can change whatever you want */} + } /> + } /> + + + + ) +} +```
+ # Screen Shorts +- outputs are same in both scripts + diff --git a/index.js b/index.js index 7a24d8b..0f758d6 100644 --- a/index.js +++ b/index.js @@ -5,6 +5,10 @@ const argv = require('yargs').argv; const source = argv.source || path.join(__dirname, 'LoginSignUp'); const destination = argv.destination || path.join(process.cwd(), 'src/components/LoginSignUp'); +const sourceTW = argv.source || path.join(__dirname, 'LoginSignUpTW'); +const destinationTW = argv.destination || path.join(process.cwd(), 'src/components/LoginSignUpTW'); + + async function RunReactLoginSignIn() { try { await fs.copy(source, destination); @@ -14,4 +18,20 @@ async function RunReactLoginSignIn() { } } -RunReactLoginSignIn(); + + +async function RunReactLoginSignInTW() { + try { + await fs.copy(sourceTW, destinationTW); + console.log('The Login and SignUp templete Successfully Createed'); + } catch (err) { + console.error('Error copying folder:', err); + } +} + + + +module.exports = { + RunReactLoginSignIn, + RunReactLoginSignInTW +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 37399db..b2de90a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,18 +1,27 @@ { "name": "login-signup-react", - "version": "1.0.0", + "version": "2.0.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "login-signup-react", - "version": "1.0.0", + "version": "2.0.0", "license": "ISC", "dependencies": { + "@jehankandy/jkcss": "^6.0.0", "fs-extra": "^11.2.0", "yargs": "^17.7.2" + }, + "bin": { + "login-signup-react": "index.js" } }, + "node_modules/@jehankandy/jkcss": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@jehankandy/jkcss/-/jkcss-6.0.0.tgz", + "integrity": "sha512-9xOLoNbXK13MG+6aDysh9/Ha52gNPHxApeT/WcT9AYWV2hbu+zK5bnwEB/M1qzJvAWGuhCdULd9c4aclwtG3oQ==" + }, "node_modules/ansi-regex": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", diff --git a/package.json b/package.json index 9411beb..cb9cfa6 100644 --- a/package.json +++ b/package.json @@ -1,9 +1,8 @@ { "name": "login-signup-react", - "version": "1.1.0", + "version": "2.0.0", "description": "Login and SignUp for ReactJS", "main": "index.js", - "bin": { "login-signup-react": "index.js" }, @@ -21,6 +20,7 @@ }, "homepage": "https://github.com/BackendExpert/login-signup-react#readme", "dependencies": { + "@jehankandy/jkcss": "^6.0.0", "fs-extra": "^11.2.0", "yargs": "^17.7.2" }