From 4b06fbed96be31274d3e658fd26c8155a7f6a0ca Mon Sep 17 00:00:00 2001
From: Sam Liu <luu.dat.tham@gmail.com>
Date: Wed, 5 Jun 2024 04:48:43 +0000
Subject: [PATCH] add scss and remove styled component
---
README.md | 49 ++++++++----
Taskfile.yml | 17 +++--
frontend/package.json | 1 -
frontend/pnpm-lock.yaml | 23 ------
frontend/src/App.jsx | 2 +-
frontend/src/{App.css => App.scss} | 14 +++-
.../src/components/{ => Navbar}/Navbar.jsx | 3 +-
frontend/src/components/Navbar/index.js | 1 +
.../Navbar/navbar.scss} | 0
frontend/src/index.jsx | 3 +-
frontend/src/{index.css => index.scss} | 9 ---
frontend/src/pages/{ => Login}/Login.jsx | 76 +------------------
frontend/src/pages/Login/index.js | 1 +
frontend/src/pages/Login/login.scss | 69 +++++++++++++++++
14 files changed, 133 insertions(+), 135 deletions(-)
rename frontend/src/{App.css => App.scss} (72%)
rename frontend/src/components/{ => Navbar}/Navbar.jsx (97%)
create mode 100644 frontend/src/components/Navbar/index.js
rename frontend/src/{styles/fuware.scss => components/Navbar/navbar.scss} (100%)
rename frontend/src/{index.css => index.scss} (83%)
rename frontend/src/pages/{ => Login}/Login.jsx (78%)
create mode 100644 frontend/src/pages/Login/index.js
create mode 100644 frontend/src/pages/Login/login.scss
diff --git a/README.md b/README.md
index 2723b2e..4231480 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,28 @@
the warehouse use to tracking item in house
+# Project setup
+
+install `Taskfile` first with this command line:
+- for macOS, linux:
+ ```bash
+ brew install go-task
+ ```
+- for windows:
+ ```bash
+ winget install Task.Task
+ ```
+ or
+
+ ```bash
+ npm install -g @go-task/cli
+ ```
+
+install `pnpm` for front-end with command line:
+```bash
+npm i pnpm -g
+```
+
# Common CLI
### alembic
@@ -38,32 +60,31 @@ generate migration auto code
alembic revision --autogenerate -m "version message"
```
+# Back-end
+
+## Usage
+
+```bash
+task be
+```
+
# Front-end
## Usage
```bash
-$ npm install # or pnpm install or yarn install
+task fe:i
```
-### Learn more on the [Solid Website](https://solidjs.com) and come chat with us on our [Discord](https://discord.com/invite/solidjs)
+### Learn more on the [Solid Website](https://solidjs.com)
## Available Scripts
In the project directory, you can run:
-### `npm run dev`
-
-Runs the app in the development mode.<br>
-Open [http://localhost:5173](http://localhost:5173) to view it in the browser.
-
-### `npm run build`
-
-Builds the app for production to the `dist` folder.<br>
-It correctly bundles Solid in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.<br>
-Your app is ready to be deployed!
+```bash
+task fe
+```
## Deployment
diff --git a/Taskfile.yml b/Taskfile.yml
index e1df452..854f425 100644
--- a/Taskfile.yml
+++ b/Taskfile.yml
@@ -12,17 +12,22 @@ dotenv:
- .env
- .dev.env
tasks:
- be:dev:
+ be:seed:
+ desc: remove db
+ dir: dev/data
+ cmds:
+ - rm -r fuware.db
+ be:
desc: runs the backend server
cmds:
- poetry run python backend/app.py
- fe:dev:
- desc: runs the frontend server
- dir: frontend
- cmds:
- - pnpm dev
fe:i:
desc: runs the install package
dir: frontend
cmds:
- pnpm i
+ fe:
+ desc: runs the frontend server
+ dir: frontend
+ cmds:
+ - pnpm dev
diff --git a/frontend/package.json b/frontend/package.json
index 14f1e32..41b8677 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -20,7 +20,6 @@
"crypto-js": "^4.2.0",
"solid-form-handler": "^1.2.3",
"solid-js": "^1.8.15",
- "solid-styled-components": "^0.28.5",
"solid-toast": "^0.5.0",
"yup": "^1.4.0"
},
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 2aed860..c0decb8 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -32,9 +32,6 @@ importers:
solid-js:
specifier: ^1.8.15
version: 1.8.17
- solid-styled-components:
- specifier: ^0.28.5
- version: 0.28.5(solid-js@1.8.17)
solid-toast:
specifier: ^0.5.0
version: 0.5.0(solid-js@1.8.17)
@@ -1010,11 +1007,6 @@ packages:
resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
engines: {node: '>=10'}
- goober@2.1.14:
- resolution: {integrity: sha512-4UpC0NdGyAFqLNPnhCT2iHpza2q+RAY3GV85a/mRPdzyPQMsj0KmMMuetdIkzWRbJ+Hgau1EZztq8ImmiMGhsg==}
- peerDependencies:
- csstype: ^3.0.10
-
graphemer@1.4.0:
resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
@@ -1518,11 +1510,6 @@ packages:
peerDependencies:
solid-js: ^1.3
- solid-styled-components@0.28.5:
- resolution: {integrity: sha512-vwTcdp76wZNnESIzB6rRZ3U55NgcSAQXCiiRIiEFhxTFqT0bEh/warNT1qaRZu4OkAzrBkViOngF35ktI8sc4A==}
- peerDependencies:
- solid-js: ^1.4.4
-
solid-toast@0.5.0:
resolution: {integrity: sha512-t770JakjyS2P9b8Qa1zMLOD51KYKWXbTAyJePVUoYex5c5FH5S/HtUBUbZAWFcqRCKmAE8KhyIiCvDZA8bOnxQ==}
peerDependencies:
@@ -2695,10 +2682,6 @@ snapshots:
merge2: 1.4.1
slash: 3.0.0
- goober@2.1.14(csstype@3.1.3):
- dependencies:
- csstype: 3.1.3
-
graphemer@1.4.0: {}
has-flag@3.0.0: {}
@@ -3136,12 +3119,6 @@ snapshots:
'@babel/types': 7.24.5
solid-js: 1.8.17
- solid-styled-components@0.28.5(solid-js@1.8.17):
- dependencies:
- csstype: 3.1.3
- goober: 2.1.14(csstype@3.1.3)
- solid-js: 1.8.17
-
solid-toast@0.5.0(solid-js@1.8.17):
dependencies:
solid-js: 1.8.17
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 404885e..fc71c1e 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,6 +1,6 @@
import { MetaProvider } from '@solidjs/meta'
import { Toaster } from 'solid-toast'
-import './App.css'
+import './App.scss'
import { SiteContextProvider } from './context/SiteContext'
function App(props) {
diff --git a/frontend/src/App.css b/frontend/src/App.scss
similarity index 72%
rename from frontend/src/App.css
rename to frontend/src/App.scss
index bae046d..f8818e9 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.scss
@@ -14,11 +14,17 @@
overflow: hidden;
}
-#main-page.login-page {
- height: 100svh;
-}
-
#main-page .main-content {
max-height: calc(100svh - 64px);
overflow-y: auto;
}
+
+a {
+ font-weight: 500;
+ color: #646cff;
+ text-decoration: inherit;
+}
+
+a:hover {
+ color: #535bf2;
+}
diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar/Navbar.jsx
similarity index 97%
rename from frontend/src/components/Navbar.jsx
rename to frontend/src/components/Navbar/Navbar.jsx
index bfe976f..09cbd88 100644
--- a/frontend/src/components/Navbar.jsx
+++ b/frontend/src/components/Navbar/Navbar.jsx
@@ -1,5 +1,3 @@
-// import { styled } from 'solid-styled-components'
-
import { useSiteContext } from '@context/SiteContext'
import useAuth from '@hooks/useAuth'
import { NAV_ROUTES } from '@routes/routes'
@@ -7,6 +5,7 @@ import { A } from '@solidjs/router'
import { IconLogout, IconTriangle } from '@tabler/icons-solidjs'
import { For, Show } from 'solid-js'
import { Dynamic } from 'solid-js/web'
+import './navbar.scss'
export default function Navbar() {
const { store, setAuth } = useSiteContext()
diff --git a/frontend/src/components/Navbar/index.js b/frontend/src/components/Navbar/index.js
new file mode 100644
index 0000000..e6400ae
--- /dev/null
+++ b/frontend/src/components/Navbar/index.js
@@ -0,0 +1 @@
+export { default } from './Navbar'
diff --git a/frontend/src/styles/fuware.scss b/frontend/src/components/Navbar/navbar.scss
similarity index 100%
rename from frontend/src/styles/fuware.scss
rename to frontend/src/components/Navbar/navbar.scss
diff --git a/frontend/src/index.jsx b/frontend/src/index.jsx
index 6241b8a..73ac930 100644
--- a/frontend/src/index.jsx
+++ b/frontend/src/index.jsx
@@ -3,9 +3,8 @@ import { Route, Router } from '@solidjs/router'
import { For, lazy } from 'solid-js'
import { render } from 'solid-js/web'
import App from './App'
-import './index.css'
+import './index.scss'
import { ROUTES } from './routes'
-import './styles/fuware.scss'
const root = document.getElementById('root')
diff --git a/frontend/src/index.css b/frontend/src/index.scss
similarity index 83%
rename from frontend/src/index.css
rename to frontend/src/index.scss
index f3280de..4cc5076 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.scss
@@ -24,12 +24,3 @@ body {
min-height: 100vh;
font-size: 14px;
}
-
-a {
- font-weight: 500;
- color: #646cff;
- text-decoration: inherit;
-}
-a:hover {
- color: #535bf2;
-}
diff --git a/frontend/src/pages/Login.jsx b/frontend/src/pages/Login/Login.jsx
similarity index 78%
rename from frontend/src/pages/Login.jsx
rename to frontend/src/pages/Login/Login.jsx
index b47aa3b..2fbfd83 100644
--- a/frontend/src/pages/Login.jsx
+++ b/frontend/src/pages/Login/Login.jsx
@@ -4,83 +4,13 @@ import { useNavigate } from '@solidjs/router'
import { Field, useFormHandler } from 'solid-form-handler'
import { yupSchema } from 'solid-form-handler/yup'
import { Show, onMount } from 'solid-js'
-import { styled } from 'solid-styled-components'
import * as yup from 'yup'
+import './login.scss'
import logo from '@assets/logo-fuware.svg'
import useAuth from '@hooks/useAuth'
import useToast from '@hooks/useToast'
-const LoginPage = styled('div')`
- width: 100%;
- height: 100svh;
- display: flex;
- padding-left: 15px;
- padding-right: 15px;
- background: #fff url('/images/bg-login.jpg') no-repeat fixed center;
- background-size: cover;
- place-items: center;
-
- .login-wrap {
- width: 40%;
- max-width: 500px;
- min-width: 320px;
- margin: 0 auto;
- overflow: hidden;
- position: relative;
-
- &:after {
- content: '';
- display: block;
- width: 500px;
- height: 500px;
- border-radius: 15px;
- position: absolute;
- z-index: 2;
- top: -120px;
- left: -285px;
- background: #10b981;
- transform: rotate(45deg);
- }
-
- &:before {
- content: '';
- display: block;
- width: 500px;
- height: 500px;
- border-radius: 15px;
- position: absolute;
- z-index: 2;
- top: -40px;
- left: -130px;
- background: #ff6600;
- transform: rotate(20deg);
- }
-
- .card-body {
- position: relative;
- z-index: 4;
- }
-
- .logo {
- position: relative;
- z-index: 4;
- display: block;
- width: 40%;
- max-width: 150px;
- min-width: 100px;
- margin: 0 auto;
- margin-top: 15px;
- }
-
- .login-box {
- box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.25);
- border-radius: 5px;
- padding: 1rem;
- }
- }
-`
-
const loginSchema = yup.object({
username: yup.string().required('Username is required'),
password: yup.string().required('Password is required'),
@@ -125,7 +55,7 @@ export default function Login() {
}
return (
- <LoginPage>
+ <div class="login-page">
<div class="card glass card-compact login-wrap shadow-xl">
<div class="h-44">
<picture class="logo">
@@ -218,6 +148,6 @@ export default function Login() {
</form>
</div>
</div>
- </LoginPage>
+ </div>
)
}
diff --git a/frontend/src/pages/Login/index.js b/frontend/src/pages/Login/index.js
new file mode 100644
index 0000000..626bc07
--- /dev/null
+++ b/frontend/src/pages/Login/index.js
@@ -0,0 +1 @@
+export { default } from './Login'
diff --git a/frontend/src/pages/Login/login.scss b/frontend/src/pages/Login/login.scss
new file mode 100644
index 0000000..e6080e1
--- /dev/null
+++ b/frontend/src/pages/Login/login.scss
@@ -0,0 +1,69 @@
+.login-page {
+ width: 100%;
+ height: 100svh;
+ display: flex;
+ padding-left: 15px;
+ padding-right: 15px;
+ background: #fff url('/images/bg-login.jpg') no-repeat fixed center;
+ background-size: cover;
+ place-items: center;
+
+ .login-wrap {
+ width: 40%;
+ max-width: 500px;
+ min-width: 320px;
+ margin: 0 auto;
+ overflow: hidden;
+ position: relative;
+
+ &:after {
+ content: '';
+ display: block;
+ width: 500px;
+ height: 500px;
+ border-radius: 15px;
+ position: absolute;
+ z-index: 2;
+ top: -120px;
+ left: -285px;
+ background: #10b981;
+ transform: rotate(45deg);
+ }
+
+ &:before {
+ content: '';
+ display: block;
+ width: 500px;
+ height: 500px;
+ border-radius: 15px;
+ position: absolute;
+ z-index: 2;
+ top: -40px;
+ left: -130px;
+ background: #ff6600;
+ transform: rotate(20deg);
+ }
+
+ .card-body {
+ position: relative;
+ z-index: 4;
+ }
+
+ .logo {
+ position: relative;
+ z-index: 4;
+ display: block;
+ width: 40%;
+ max-width: 150px;
+ min-width: 100px;
+ margin: 0 auto;
+ margin-top: 15px;
+ }
+
+ .login-box {
+ box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.25);
+ border-radius: 5px;
+ padding: 1rem;
+ }
+ }
+}