4nk/lecoffre-back
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Design system/ora notifications (#4)

Browse Source 
https://app.ora.pm/p/fb56ed95daa7456b888d266a050b9afa?v=86662&s=28293&t=k&c=564eead1724741e293030d9250daf679

Notification component Front integration done but we will need to make
further modifications around notifications states when backed will be
setup.
This commit is contained in:
Arnaud D. Natali 2023-02-23 10:20:08 +01:00 committed by GitHub
commit 676db99cb8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
28 changed files with 1032 additions and 376 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1,5 +1,6 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
dist dist
.next .next

504
package-lock.json generated
View File

@ -83,6 +83,36 @@
"resolved": "https://registry.npmjs.org/@next/env/-/env-13.1.5.tgz", "resolved": "https://registry.npmjs.org/@next/env/-/env-13.1.5.tgz",
"integrity": "sha512-0Ry4NhJy6qLbXhvxPRUQ1H6RzgtryGdUto7hfgAK0Iw/bScgeVjwLZdfhm2iT7qsOS32apo9cWzLCxjc6iGPsA==" "integrity": "sha512-0Ry4NhJy6qLbXhvxPRUQ1H6RzgtryGdUto7hfgAK0Iw/bScgeVjwLZdfhm2iT7qsOS32apo9cWzLCxjc6iGPsA=="
}, },
"node_modules/@next/swc-android-arm-eabi": {
"version": "13.1.5",
"resolved": "https://registry.npmjs.org/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-13.1.5.tgz",
"integrity": "sha512-QAEf3YM9U0qWVQTxgF3Tsh4OeCN1i9Smsf6cVlwZsPzoLyj2nQ879joCoN+ONqDknkBgG6OG/ajefywL3jw9Cg==",
"cpu": [
"arm"
],
"optional": true,
"os": [
"android"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-android-arm64": {
"version": "13.1.5",
"resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-13.1.5.tgz",
"integrity": "sha512-ZmtGPTghRuT5YKL0nNcC2bBVSiG1O0is16eIZ2rWSP/hRW64ZCcAew6pxw2rihntNp22UfequjSTHd91WE/tyQ==",
"cpu": [
"arm64"
],
"optional": true,
"os": [
"android"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-darwin-arm64": { "node_modules/@next/swc-darwin-arm64": {
"version": "13.1.5", "version": "13.1.5",
"resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.1.5.tgz", "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.1.5.tgz",
@ -98,6 +128,156 @@
"node": ">= 10" "node": ">= 10"
} }
}, },
"node_modules/@next/swc-darwin-x64": {
"version": "13.1.5",
"resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.1.5.tgz",
"integrity": "sha512-6mPX0GNRg8NzjV70at8I8pD9YBnPHDpxJCoMuIqysdTjtQhd09Xk6GUhquNhp1kEJzzVk7OW5l2ch4XIJjtY3A==",
"cpu": [
"x64"
],
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-freebsd-x64": {
"version": "13.1.5",
"resolved": "https://registry.npmjs.org/@next/swc-freebsd-x64/-/swc-freebsd-x64-13.1.5.tgz",
"integrity": "sha512-nR4a/SNblG0w8hhYRflTZjk4yD99ld18w/FCftw99ziw8sgciBlOXRICJIiRIaMRU8UH7QLSgBOQVnfNcVNKMA==",
"cpu": [
"x64"
],
"optional": true,
"os": [
"freebsd"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-linux-arm-gnueabihf": {
"version": "13.1.5",
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-13.1.5.tgz",
"integrity": "sha512-EzkltCVKg3gUzamoeKPhGeSgXTTLAhSzc7v/+g1Y+HQa7JKMrlzdRkrJf+H4LJXcz7lnxgNKHGRyZBSXnmJKJw==",
"cpu": [
"arm"
],
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-linux-arm64-gnu": {
"version": "13.1.5",
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.1.5.tgz",
"integrity": "sha512-E7HMkdoxStmTUJU4KzBUU4vZ5DHT4Gd327tC3KFZS5lda0NRerJAOCfsRg+fBj22FvCb1UWsX6XI+weL6xhyeQ==",
"cpu": [
"arm64"
],
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-linux-arm64-musl": {
"version": "13.1.5",
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.1.5.tgz",
"integrity": "sha512-qlO0Fd3GQwJS6YpbF9NyL5NGHVZ43dKtZDC/jP4vdeMIYDtSu13HcY/nmA1NdW+RpMwDxSCpx4WKsCCEZGIX8Q==",
"cpu": [
"arm64"
],
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-linux-x64-gnu": {
"version": "13.1.5",
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.1.5.tgz",
"integrity": "sha512-GftSBFAay2nocGl+KNqFsj6EVSvomaM/bp86hzezbKsTwQmu76PjOCVcejI1gE+4k7f5zPDgCuorF6F04BV0HQ==",
"cpu": [
"x64"
],
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-linux-x64-musl": {
"version": "13.1.5",
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.1.5.tgz",
"integrity": "sha512-UD+3lxU4yuAjd+uBkCDfBpAcbGAVfEcE8mX/efIxUGIImmzN0QzgTHYEpKFnY3Lxu02dIBcwQRT3Q5mfO4obng==",
"cpu": [
"x64"
],
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-win32-arm64-msvc": {
"version": "13.1.5",
"resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.1.5.tgz",
"integrity": "sha512-uzsvkQY+K3EbL+97IUHPWZPwjsCmCkdH/O5Cf9wCnh0k0gaj7ob1mGKqr1vNNak+9U7HloGwuHcXnZpijWSP7w==",
"cpu": [
"arm64"
],
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-win32-ia32-msvc": {
"version": "13.1.5",
"resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.1.5.tgz",
"integrity": "sha512-v0NaC1w8mPf620GlJaHBdEm3dm4G4AEQMasDqjzQvo0yCRrvtvzMgCIe8MocBxFHzaF6868NybMqvumxP5YxEg==",
"cpu": [
"ia32"
],
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-win32-x64-msvc": {
"version": "13.1.5",
"resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.1.5.tgz",
"integrity": "sha512-IZHwvd649ccbWyLCfu92IXEpR250NpmBkaRelPV+WVm4jrd62FKRFCNdqdCXq6TrEg9wN8cK4YG8tm44uEZqLA==",
"cpu": [
"x64"
],
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@prisma/client": { "node_modules/@prisma/client": {
"version": "4.9.0", "version": "4.9.0",
"resolved": "https://registry.npmjs.org/@prisma/client/-/client-4.9.0.tgz", "resolved": "https://registry.npmjs.org/@prisma/client/-/client-4.9.0.tgz",
@ -2270,186 +2450,6 @@
"engines": { "engines": {
"node": ">=6" "node": ">=6"
} }
},
"node_modules/@next/swc-android-arm-eabi": {
"version": "13.1.5",
"resolved": "https://registry.npmjs.org/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-13.1.5.tgz",
"integrity": "sha512-QAEf3YM9U0qWVQTxgF3Tsh4OeCN1i9Smsf6cVlwZsPzoLyj2nQ879joCoN+ONqDknkBgG6OG/ajefywL3jw9Cg==",
"cpu": [
"arm"
],
"optional": true,
"os": [
"android"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-android-arm64": {
"version": "13.1.5",
"resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-13.1.5.tgz",
"integrity": "sha512-ZmtGPTghRuT5YKL0nNcC2bBVSiG1O0is16eIZ2rWSP/hRW64ZCcAew6pxw2rihntNp22UfequjSTHd91WE/tyQ==",
"cpu": [
"arm64"
],
"optional": true,
"os": [
"android"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-darwin-x64": {
"version": "13.1.5",
"resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.1.5.tgz",
"integrity": "sha512-6mPX0GNRg8NzjV70at8I8pD9YBnPHDpxJCoMuIqysdTjtQhd09Xk6GUhquNhp1kEJzzVk7OW5l2ch4XIJjtY3A==",
"cpu": [
"x64"
],
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-freebsd-x64": {
"version": "13.1.5",
"resolved": "https://registry.npmjs.org/@next/swc-freebsd-x64/-/swc-freebsd-x64-13.1.5.tgz",
"integrity": "sha512-nR4a/SNblG0w8hhYRflTZjk4yD99ld18w/FCftw99ziw8sgciBlOXRICJIiRIaMRU8UH7QLSgBOQVnfNcVNKMA==",
"cpu": [
"x64"
],
"optional": true,
"os": [
"freebsd"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-linux-arm-gnueabihf": {
"version": "13.1.5",
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-13.1.5.tgz",
"integrity": "sha512-EzkltCVKg3gUzamoeKPhGeSgXTTLAhSzc7v/+g1Y+HQa7JKMrlzdRkrJf+H4LJXcz7lnxgNKHGRyZBSXnmJKJw==",
"cpu": [
"arm"
],
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-linux-arm64-gnu": {
"version": "13.1.5",
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.1.5.tgz",
"integrity": "sha512-E7HMkdoxStmTUJU4KzBUU4vZ5DHT4Gd327tC3KFZS5lda0NRerJAOCfsRg+fBj22FvCb1UWsX6XI+weL6xhyeQ==",
"cpu": [
"arm64"
],
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-linux-arm64-musl": {
"version": "13.1.5",
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.1.5.tgz",
"integrity": "sha512-qlO0Fd3GQwJS6YpbF9NyL5NGHVZ43dKtZDC/jP4vdeMIYDtSu13HcY/nmA1NdW+RpMwDxSCpx4WKsCCEZGIX8Q==",
"cpu": [
"arm64"
],
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-linux-x64-gnu": {
"version": "13.1.5",
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.1.5.tgz",
"integrity": "sha512-GftSBFAay2nocGl+KNqFsj6EVSvomaM/bp86hzezbKsTwQmu76PjOCVcejI1gE+4k7f5zPDgCuorF6F04BV0HQ==",
"cpu": [
"x64"
],
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-linux-x64-musl": {
"version": "13.1.5",
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.1.5.tgz",
"integrity": "sha512-UD+3lxU4yuAjd+uBkCDfBpAcbGAVfEcE8mX/efIxUGIImmzN0QzgTHYEpKFnY3Lxu02dIBcwQRT3Q5mfO4obng==",
"cpu": [
"x64"
],
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-win32-arm64-msvc": {
"version": "13.1.5",
"resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.1.5.tgz",
"integrity": "sha512-uzsvkQY+K3EbL+97IUHPWZPwjsCmCkdH/O5Cf9wCnh0k0gaj7ob1mGKqr1vNNak+9U7HloGwuHcXnZpijWSP7w==",
"cpu": [
"arm64"
],
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-win32-ia32-msvc": {
"version": "13.1.5",
"resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.1.5.tgz",
"integrity": "sha512-v0NaC1w8mPf620GlJaHBdEm3dm4G4AEQMasDqjzQvo0yCRrvtvzMgCIe8MocBxFHzaF6868NybMqvumxP5YxEg==",
"cpu": [
"ia32"
],
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-win32-x64-msvc": {
"version": "13.1.5",
"resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.1.5.tgz",
"integrity": "sha512-IZHwvd649ccbWyLCfu92IXEpR250NpmBkaRelPV+WVm4jrd62FKRFCNdqdCXq6TrEg9wN8cK4YG8tm44uEZqLA==",
"cpu": [
"x64"
],
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 10"
}
} }
}, },
"dependencies": { "dependencies": {
@ -2485,12 +2485,84 @@
"resolved": "https://registry.npmjs.org/@next/env/-/env-13.1.5.tgz", "resolved": "https://registry.npmjs.org/@next/env/-/env-13.1.5.tgz",
"integrity": "sha512-0Ry4NhJy6qLbXhvxPRUQ1H6RzgtryGdUto7hfgAK0Iw/bScgeVjwLZdfhm2iT7qsOS32apo9cWzLCxjc6iGPsA==" "integrity": "sha512-0Ry4NhJy6qLbXhvxPRUQ1H6RzgtryGdUto7hfgAK0Iw/bScgeVjwLZdfhm2iT7qsOS32apo9cWzLCxjc6iGPsA=="
}, },
"@next/swc-android-arm-eabi": {
"version": "13.1.5",
"resolved": "https://registry.npmjs.org/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-13.1.5.tgz",
"integrity": "sha512-QAEf3YM9U0qWVQTxgF3Tsh4OeCN1i9Smsf6cVlwZsPzoLyj2nQ879joCoN+ONqDknkBgG6OG/ajefywL3jw9Cg==",
"optional": true
},
"@next/swc-android-arm64": {
"version": "13.1.5",
"resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-13.1.5.tgz",
"integrity": "sha512-ZmtGPTghRuT5YKL0nNcC2bBVSiG1O0is16eIZ2rWSP/hRW64ZCcAew6pxw2rihntNp22UfequjSTHd91WE/tyQ==",
"optional": true
},
"@next/swc-darwin-arm64": { "@next/swc-darwin-arm64": {
"version": "13.1.5", "version": "13.1.5",
"resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.1.5.tgz", "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.1.5.tgz",
"integrity": "sha512-aeFXK+M/zmG/CNdMJ0tGNs0MWcLueUe7vZ2V6fa+2yz/ZgYJLI7fEfFvVh1p1yBMzupSbZDowvMuCSFTaeg3MA==", "integrity": "sha512-aeFXK+M/zmG/CNdMJ0tGNs0MWcLueUe7vZ2V6fa+2yz/ZgYJLI7fEfFvVh1p1yBMzupSbZDowvMuCSFTaeg3MA==",
"optional": true "optional": true
}, },
"@next/swc-darwin-x64": {
"version": "13.1.5",
"resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.1.5.tgz",
"integrity": "sha512-6mPX0GNRg8NzjV70at8I8pD9YBnPHDpxJCoMuIqysdTjtQhd09Xk6GUhquNhp1kEJzzVk7OW5l2ch4XIJjtY3A==",
"optional": true
},
"@next/swc-freebsd-x64": {
"version": "13.1.5",
"resolved": "https://registry.npmjs.org/@next/swc-freebsd-x64/-/swc-freebsd-x64-13.1.5.tgz",
"integrity": "sha512-nR4a/SNblG0w8hhYRflTZjk4yD99ld18w/FCftw99ziw8sgciBlOXRICJIiRIaMRU8UH7QLSgBOQVnfNcVNKMA==",
"optional": true
},
"@next/swc-linux-arm-gnueabihf": {
"version": "13.1.5",
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-13.1.5.tgz",
"integrity": "sha512-EzkltCVKg3gUzamoeKPhGeSgXTTLAhSzc7v/+g1Y+HQa7JKMrlzdRkrJf+H4LJXcz7lnxgNKHGRyZBSXnmJKJw==",
"optional": true
},
"@next/swc-linux-arm64-gnu": {
"version": "13.1.5",
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.1.5.tgz",
"integrity": "sha512-E7HMkdoxStmTUJU4KzBUU4vZ5DHT4Gd327tC3KFZS5lda0NRerJAOCfsRg+fBj22FvCb1UWsX6XI+weL6xhyeQ==",
"optional": true
},
"@next/swc-linux-arm64-musl": {
"version": "13.1.5",
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.1.5.tgz",
"integrity": "sha512-qlO0Fd3GQwJS6YpbF9NyL5NGHVZ43dKtZDC/jP4vdeMIYDtSu13HcY/nmA1NdW+RpMwDxSCpx4WKsCCEZGIX8Q==",
"optional": true
},
"@next/swc-linux-x64-gnu": {
"version": "13.1.5",
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.1.5.tgz",
"integrity": "sha512-GftSBFAay2nocGl+KNqFsj6EVSvomaM/bp86hzezbKsTwQmu76PjOCVcejI1gE+4k7f5zPDgCuorF6F04BV0HQ==",
"optional": true
},
"@next/swc-linux-x64-musl": {
"version": "13.1.5",
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.1.5.tgz",
"integrity": "sha512-UD+3lxU4yuAjd+uBkCDfBpAcbGAVfEcE8mX/efIxUGIImmzN0QzgTHYEpKFnY3Lxu02dIBcwQRT3Q5mfO4obng==",
"optional": true
},
"@next/swc-win32-arm64-msvc": {
"version": "13.1.5",
"resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.1.5.tgz",
"integrity": "sha512-uzsvkQY+K3EbL+97IUHPWZPwjsCmCkdH/O5Cf9wCnh0k0gaj7ob1mGKqr1vNNak+9U7HloGwuHcXnZpijWSP7w==",
"optional": true
},
"@next/swc-win32-ia32-msvc": {
"version": "13.1.5",
"resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.1.5.tgz",
"integrity": "sha512-v0NaC1w8mPf620GlJaHBdEm3dm4G4AEQMasDqjzQvo0yCRrvtvzMgCIe8MocBxFHzaF6868NybMqvumxP5YxEg==",
"optional": true
},
"@next/swc-win32-x64-msvc": {
"version": "13.1.5",
"resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.1.5.tgz",
"integrity": "sha512-IZHwvd649ccbWyLCfu92IXEpR250NpmBkaRelPV+WVm4jrd62FKRFCNdqdCXq6TrEg9wN8cK4YG8tm44uEZqLA==",
"optional": true
},
"@prisma/client": { "@prisma/client": {
"version": "4.9.0", "version": "4.9.0",
"resolved": "https://registry.npmjs.org/@prisma/client/-/client-4.9.0.tgz", "resolved": "https://registry.npmjs.org/@prisma/client/-/client-4.9.0.tgz",
@ -4158,78 +4230,6 @@
"version": "3.1.1", "version": "3.1.1",
"resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz", "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
"integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==" "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q=="
},
"@next/swc-android-arm-eabi": {
"version": "13.1.5",
"resolved": "https://registry.npmjs.org/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-13.1.5.tgz",
"integrity": "sha512-QAEf3YM9U0qWVQTxgF3Tsh4OeCN1i9Smsf6cVlwZsPzoLyj2nQ879joCoN+ONqDknkBgG6OG/ajefywL3jw9Cg==",
"optional": true
},
"@next/swc-android-arm64": {
"version": "13.1.5",
"resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-13.1.5.tgz",
"integrity": "sha512-ZmtGPTghRuT5YKL0nNcC2bBVSiG1O0is16eIZ2rWSP/hRW64ZCcAew6pxw2rihntNp22UfequjSTHd91WE/tyQ==",
"optional": true
},
"@next/swc-darwin-x64": {
"version": "13.1.5",
"resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.1.5.tgz",
"integrity": "sha512-6mPX0GNRg8NzjV70at8I8pD9YBnPHDpxJCoMuIqysdTjtQhd09Xk6GUhquNhp1kEJzzVk7OW5l2ch4XIJjtY3A==",
"optional": true
},
"@next/swc-freebsd-x64": {
"version": "13.1.5",
"resolved": "https://registry.npmjs.org/@next/swc-freebsd-x64/-/swc-freebsd-x64-13.1.5.tgz",
"integrity": "sha512-nR4a/SNblG0w8hhYRflTZjk4yD99ld18w/FCftw99ziw8sgciBlOXRICJIiRIaMRU8UH7QLSgBOQVnfNcVNKMA==",
"optional": true
},
"@next/swc-linux-arm-gnueabihf": {
"version": "13.1.5",
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-13.1.5.tgz",
"integrity": "sha512-EzkltCVKg3gUzamoeKPhGeSgXTTLAhSzc7v/+g1Y+HQa7JKMrlzdRkrJf+H4LJXcz7lnxgNKHGRyZBSXnmJKJw==",
"optional": true
},
"@next/swc-linux-arm64-gnu": {
"version": "13.1.5",
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.1.5.tgz",
"integrity": "sha512-E7HMkdoxStmTUJU4KzBUU4vZ5DHT4Gd327tC3KFZS5lda0NRerJAOCfsRg+fBj22FvCb1UWsX6XI+weL6xhyeQ==",
"optional": true
},
"@next/swc-linux-arm64-musl": {
"version": "13.1.5",
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.1.5.tgz",
"integrity": "sha512-qlO0Fd3GQwJS6YpbF9NyL5NGHVZ43dKtZDC/jP4vdeMIYDtSu13HcY/nmA1NdW+RpMwDxSCpx4WKsCCEZGIX8Q==",
"optional": true
},
"@next/swc-linux-x64-gnu": {
"version": "13.1.5",
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.1.5.tgz",
"integrity": "sha512-GftSBFAay2nocGl+KNqFsj6EVSvomaM/bp86hzezbKsTwQmu76PjOCVcejI1gE+4k7f5zPDgCuorF6F04BV0HQ==",
"optional": true
},
"@next/swc-linux-x64-musl": {
"version": "13.1.5",
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.1.5.tgz",
"integrity": "sha512-UD+3lxU4yuAjd+uBkCDfBpAcbGAVfEcE8mX/efIxUGIImmzN0QzgTHYEpKFnY3Lxu02dIBcwQRT3Q5mfO4obng==",
"optional": true
},
"@next/swc-win32-arm64-msvc": {
"version": "13.1.5",
"resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.1.5.tgz",
"integrity": "sha512-uzsvkQY+K3EbL+97IUHPWZPwjsCmCkdH/O5Cf9wCnh0k0gaj7ob1mGKqr1vNNak+9U7HloGwuHcXnZpijWSP7w==",
"optional": true
},
"@next/swc-win32-ia32-msvc": {
"version": "13.1.5",
"resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.1.5.tgz",
"integrity": "sha512-v0NaC1w8mPf620GlJaHBdEm3dm4G4AEQMasDqjzQvo0yCRrvtvzMgCIe8MocBxFHzaF6868NybMqvumxP5YxEg==",
"optional": true
},
"@next/swc-win32-x64-msvc": {
"version": "13.1.5",
"resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.1.5.tgz",
"integrity": "sha512-IZHwvd649ccbWyLCfu92IXEpR250NpmBkaRelPV+WVm4jrd62FKRFCNdqdCXq6TrEg9wN8cK4YG8tm44uEZqLA==",
"optional": true
} }
} }
} }

10
package.json
View File

@ -4,17 +4,23 @@
"description": "tezosLink project", "description": "tezosLink project",
"_moduleAliases": { "_moduleAliases": {
"@Api": "./dist/api", "@Api": "./dist/api",
"@Front": "./dist/front/*",
"@Assets": "./dist/front/Assets/*",
"@Components": "./dist/front/Components/*",
"@Themes": "./dist/front/Themes/*",
"@Stores": "./dist/front/Stores/*",
"@FrontServices": "./dist/front/services/*",
"@Pages": "./dist/pages", "@Pages": "./dist/pages",
"@Components": "./dist/front/components", "@Components": "./dist/front/components",
"@Common": "./dist/common", "@Common": "./dist/common",
"@Services": "./dist/common/services", "@Services": "./dist/common/services",
"@Entries": "./dist/common/entries", "@Entries": "./dist/common/entries",
"@Common": "./dist/common",
"@Config": "./dist/common/config", "@Config": "./dist/common/config",
"@Entities": "./dist/common/entities", "@Entities": "./dist/common/entities",
"@System": "./dist/common/system", "@System": "./dist/common/system",
"@ControllerPattern": "./dist/common/system/controller-pattern", "@ControllerPattern": "./dist/common/system/controller-pattern",
"@Front": "./dist/front/*", "@Front": "./dist/front/*"
"@Themes": "./dist/front/Themes*"
}, },
"scripts": { "scripts": {
"build": "next build && tsc", "build": "next build && tsc",

29
prettier.config.js
View File

@ -1,16 +1,17 @@
module.exports = { module.exports = {
overrides: [ overrides: [
{ {
files: "src/**/*.ts", files: ["src/**/*.ts", "src/**/*.tsx", "src/**/*.scss", "./*.js"],
options: { options: {
tabWidth: 4, tabWidth: 4,
useTabs: true, useTabs: true,
singleQuote: false, singleQuote: false,
trailingComma: "all", trailingComma: "all",
printWidth: 240, printWidth: 240,
endOfLine: "crlf", semi: true,
semi: true, bracketSameLine: true,
}, },
}, },
], ],
}; };

9
src/front/Services/EventEmitter.ts Normal file
View File

@ -0,0 +1,9 @@
import Events from "events";
export default class EventEmitter extends Events {
constructor() {
super();
this.setMaxListeners(0);
}
}

16
src/front/Stores/BaseStore.ts Normal file
View File

@ -0,0 +1,16 @@
import EventEmitter from "@Front/Services/EventEmitter";
export default abstract class BaseStore {
protected readonly event = new EventEmitter();
// eslint-disable-next-line @typescript-eslint/no-empty-function
protected constructor() {}
public onChange<T>(callback: (params: T) => void) {
this.event.on("change", callback);
return () => {
this.event.off("change", callback);
};
}
}

106
src/front/Stores/Toasts.tsx Normal file
View File

@ -0,0 +1,106 @@
import EventEmitter from "@Front/Services/EventEmitter";
// import I18n from "Components/Elements/I18n";
export enum EToastPriority {
HIGH = "high",
LOW = "low",
}
export interface IToast {
id?: number;
title: string | React.ReactNode;
icon?: React.ReactNode;
text?: string | React.ReactNode;
button?: React.ReactNode;
time?: number;
closable?: boolean;
priority?: EToastPriority;
}
export default class Toasts {
private static ctx: Toasts;
private readonly event = new EventEmitter();
private toastList: IToast[] = [];
private uid: number = 0;
private defaultTime: IToast["time"] = 10000;
private defaultClosable: IToast["closable"] = true;
private defaultPriority: IToast["priority"] = EToastPriority.LOW;
private constructor() {
Toasts.ctx = this;
}
public static getInstance() {
if (!Toasts.ctx) new this();
return Toasts.ctx;
}
public get toasts() {
return this.toastList;
}
/**
* @returns removelistener callback
*/
public onChange(callback: (toastList: IToast[]) => void) {
this.event.on("change", callback);
return () => this.event.off("change", callback);
}
public open(toast: IToast): () => void {
const index = this.toastList.indexOf(toast);
if (index !== -1) return () => this.close(toast);
toast.id = toast.id ?? this.uid++;
toast.time = toast.time ?? this.defaultTime;
toast.closable = toast.closable ?? this.defaultClosable;
toast.priority = toast.priority ?? this.defaultPriority;
const highToasts = this.toastList.filter((toast) => {
return toast.priority === EToastPriority.HIGH;
});
const lowToasts = this.toastList.filter((toast) => {
return toast.priority === EToastPriority.LOW;
});
if (toast.priority === EToastPriority.HIGH) {
highToasts.unshift(toast);
} else {
lowToasts.unshift(toast);
}
this.toastList.splice(0);
this.toastList.unshift(...lowToasts);
this.toastList.unshift(...highToasts);
this.event.emit("change", this.toastList);
return () => this.close(toast);
}
public close(toast: IToast) {
const index = this.toastList.indexOf(toast);
if (index === -1) return;
this.toastList.splice(index, 1);
this.event.emit("change", this.toastList);
}
/**
* An utility static method you can use to quickly display an error toast
* with a custom error message.
*
* @param message_key a key to a l18n message.
*/
public static errorToast(message_key: string) {
Toasts.getInstance().open({
text: "Toast text",
title: "Toast title",
// text: <I18n map={message_key} />,
// title: <I18n map="toast.an_error_occured" />,
closable: true,
priority: EToastPriority.HIGH,
});
}
}

5
src/front/assets/icons/info.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="6" cy="6" r="6" fill="#FFB017"/>
<path d="M6 3V5.66667" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="6" cy="9" r="1" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 295 B

37
src/front/components/DesignSystem/Header/Notifications/NotificationModal/classes.module.scss Normal file
View File

@ -0,0 +1,37 @@
@import "@Themes/constants.scss";
.root {
display: flex;
flex-direction: column;
width: 300px;
max-height: 80%;
background-color: $white;
box-shadow: $shadow-nav;
padding: 24px;
position: absolute;
top: 107px;
right:56px;
.notification-header{
width: 100%;
display: inline-flex;
justify-content: space-between;
.close-icon{
cursor: pointer;
}
}
.notification-body{
margin-top: 24px;
overflow: hidden;
overflow-y: auto;
}
}
.background{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: transparent;
}

69
src/front/components/DesignSystem/Header/Notifications/NotificationModal/index.tsx Normal file
View File

@ -0,0 +1,69 @@
import React from "react";
import classes from "./classes.module.scss";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import CloseIcon from "@Assets/icons/cross.svg";
import Image from "next/image";
import ToastHandler from "@Front/Components/DesignSystem/Toasts/ToastsHandler";
import Toasts, { IToast } from "@Front/Stores/Toasts";
type IProps = {
isOpen: boolean;
closeModal: () => void;
};
type IState = {
toastList: IToast[] | null;
};
export default class NotificationModal extends React.Component<IProps, IState> {
private removeOnToastChange: () => void = () => { };
constructor(props: IProps) {
super(props);
this.state = {
toastList: Toasts.getInstance().toasts,
};
this.handleToastChange = this.handleToastChange.bind(this);
}
public override render(): JSX.Element | null {
if (!this.props.isOpen) return null;
return <>
<div className={classes["background"]} onClick={this.props.closeModal}/>
<div className={classes["root"]}>
<div className={classes["notification-header"]}>
<Typography typo={ITypo.P_16}>
Notifications
</Typography>
<div className={classes["close-icon"]} onClick={this.props.closeModal}>
<Image src={CloseIcon} alt="Close notification modal" className={classes["close-icon"]}></Image>
</div>
</div>;
<div className={classes["notification-body"]}>
<>
{Toasts.getInstance().toasts.length === 0
?
<div>
<Typography typo={ITypo.P_16}>No notification yet</Typography>
</div>
: <ToastHandler />}
</>
</div>
</div>
</>
}
public override componentDidMount() {
this.removeOnToastChange = Toasts.getInstance().onChange(this.handleToastChange);
}
public override componentWillUnmount() {
this.removeOnToastChange();
}
private handleToastChange(toastList: IToast[] | null) {
this.setState({
toastList,
});
}
}

16
src/front/components/DesignSystem/Header/Notifications/classes.module.scss
View File

@ -1,8 +1,18 @@
@import "@Themes/constants.scss"; @import "@Themes/constants.scss";
.root { .root {
.notification-icon{ .icon-container{
height: 24px; position: relative;
width: 24px; cursor: pointer;
.notification-icon{
height: 24px;
width: 24px;
}
.notification-dot{
position: absolute;
top: 0;
right: 0;
}
} }
} }

56
src/front/components/DesignSystem/Header/Notifications/index.tsx
View File

@ -2,14 +2,66 @@ import React from "react";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import Image from "next/image"; import Image from "next/image";
import NotificationIcon from "@Assets/icons/notification.svg"; import NotificationIcon from "@Assets/icons/notification.svg";
import Toasts, { IToast } from "@Front/Stores/Toasts";
import NotificationModal from "./NotificationModal";
import InfoIcon from "@Assets/icons/info.svg";
type IProps = {}; type IProps = {};
type IState = {}; type IState = {
hasNotifications: boolean;
isModalOpen: boolean;
toastList: IToast[] | null;
};
export default class Notifications extends React.Component<IProps, IState> { export default class Notifications extends React.Component<IProps, IState> {
private removeOnToastChange: () => void = () => { };
constructor(props: IProps) {
super(props);
this.state = {
isModalOpen: false,
toastList: Toasts.getInstance().toasts, //TODO : Get from bbd
hasNotifications: Toasts.getInstance().toasts.length > 0, // TODO: Change this when we have notification stored in bbd, unread notifications
};
this.openModal = this.openModal.bind(this);
this.closeModal = this.closeModal.bind(this);
this.handleToastChange = this.handleToastChange.bind(this);
}
public override render(): JSX.Element { public override render(): JSX.Element {
return <div className={classes["root"]}> return <div className={classes["root"]}>
<Image alt="notifications" src={NotificationIcon} className={classes["notification-icon"]}/> <div className={classes["icon-container"]} onClick={this.openModal}>
<Image alt="notifications" src={NotificationIcon} className={classes["notification-icon"]} />
{this.state.hasNotifications &&
<Image className={classes["notification-dot"]} src={InfoIcon} alt="Unread notification" />
}
</div>
{this.state.isModalOpen && <NotificationModal isOpen={this.state.isModalOpen} closeModal={this.closeModal} />}
</div>; </div>;
} }
public override componentDidMount() {
this.removeOnToastChange = Toasts.getInstance().onChange(this.handleToastChange);
}
public override componentWillUnmount() {
this.removeOnToastChange();
}
private handleToastChange(toastList: IToast[] | null) {
this.setState({
toastList,
hasNotifications: toastList ? toastList.length > 0 : false
});
}
private openModal() {
this.setState({ isModalOpen: true });
};
private closeModal() {
this.setState({ isModalOpen: false });
};
} }

2
src/front/components/DesignSystem/Header/classes.module.scss
View File

@ -6,7 +6,7 @@
justify-content: space-between; justify-content: space-between;
height: 83px; height: 83px;
background-color: $white; background-color: $white;
box-shadow: $shadow-neutral; box-shadow: $shadow-nav;
padding: 0 48px; padding: 0 48px;
.logo-container { .logo-container {

96
src/front/components/DesignSystem/Toasts/ToastsContainer/ToastElement/classes.module.scss Normal file
View File

@ -0,0 +1,96 @@
@import "@Themes/constants.scss";
@keyframes slide-left {
from {
opacity: 0;
transform: translateX(120%);
}
to {
opacity: 1;
transform: translate(0%);
}
}
@keyframes slide-right {
from {
opacity: 1;
transform: translateX(0);
}
to {
opacity: 0;
transform: translate(120%);
}
}
.root {
pointer-events: all;
position: relative;
padding: 24px;
background: $orange-soft;
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
border-radius: 5px;
animation-name: slide-left;
animation-duration: 400ms;
animation-timing-function: $custom-easing;
animation-fill-mode: forwards;
&[data-will-close="true"] {
animation-duration: 200ms;
animation-name: slide-right;
animation-timing-function: $custom-easing;
animation-fill-mode: forwards;
}
.loadbar {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 2px;
background: var(--color-neutral-500);
border-radius: 5px;
transform-origin: right;
transform: scaleX(0);
animation: loadbar-animation var(--data-duration) linear;
}
.header {
font-family: var(--font-primary);
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 24px;
color: var(--color-neutral-900);
display: flex;
align-items: center;
justify-content: space-between;
.cross {
cursor: pointer;
}
}
.text-icon_row {
display: flex;
flex-direction: row;
align-items: center;
p {
padding-left: 14px;
width: 150%;
}
}
.text-container {
font-family: var(--font-primary);
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 20px;
color: var(--color-neutral-500);
}
a {
text-decoration: none;
}
}

102
src/front/components/DesignSystem/Toasts/ToastsContainer/ToastElement/index.tsx Normal file
View File

@ -0,0 +1,102 @@
import React from "react";
// Components
// Stores
// Styles
import classes from "./classes.module.scss";
import Toasts, { IToast } from "@Front/Stores/Toasts";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
type IProps = {
toast: IToast;
};
type IState = {
willClose: boolean;
};
export default class ToastElement extends React.Component<IProps, IState> {
private closeTimeout = 0;
constructor(props: IProps) {
super(props);
this.state = {
willClose: false,
};
this.onClose = this.onClose.bind(this);
}
public override render(): JSX.Element {
const toast = this.props.toast;
const style = {
"--data-duration": `${toast.time}ms`,
} as React.CSSProperties;
return (
<div className={classes["root"]} data-will-close={this.state.willClose}>
{toast.time !== 0 && <div className={classes["loadbar"]} style={style} />}
<div className={classes["header"]}>
<div className={classes["text-icon_row"]}>
{toast.icon && toast.icon}
<div className={classes["text-container"]}>
{this.getToastTitle(toast.title)}
{this.getToastText(toast.text)}
</div>
</div>
{/* {toast.closable && <Cross className={classes["cross"]} onClick={this.onClose} />} */}
</div>
{toast.button}
</div>
);
}
public override componentDidMount() {
if (this.props.toast.time === 0) return;
this.closeTimeout = window.setTimeout(() => {
this.close();
}, this.props.toast.time);
}
private getToastTitle(title: string | React.ReactNode) {
if (typeof title === "string") {
return (
<Typography typo={ITypo.P_16}>
{title}
</Typography>
);
}
return title;
}
private getToastText(text: React.ReactNode) {
if (typeof text === "string") {
return (
<div className={classes["text-container"]}>
<Typography typo={ITypo.CAPTION_14} color={ITypoColor.GREY}>
{text}
</Typography>
</div>
);
}
return text;
}
private onClose(e: React.MouseEvent) {
e.preventDefault();
e.stopPropagation();
this.close();
}
private close() {
window.clearTimeout(this.closeTimeout);
this.setState({
willClose: true,
});
setTimeout(() => {
Toasts.getInstance().close(this.props.toast);
}, 200);
}
}

18
src/front/components/DesignSystem/Toasts/ToastsContainer/classes.module.scss Normal file
View File

@ -0,0 +1,18 @@
@import "@Themes/constants.scss";
.root {
display: flex;
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
& > *:not(:first-child) {
margin-top: 16px;
}
@media (max-width: 444px) {
width: unset;
left: 0;
padding: 8px;
}
}

46
src/front/components/DesignSystem/Toasts/ToastsContainer/index.tsx Normal file
View File

@ -0,0 +1,46 @@
import React from "react";
import classes from "./classes.module.scss";
import ToastElement from "./ToastElement";
import classNames from "classnames";
import Toasts, { IToast } from "@Front/Stores/Toasts";
type IProps = {};
type IState = {
toastList: IToast[];
};
export default class ToastsContainer extends React.Component<IProps, IState> {
private removeOnChange = () => { };
public constructor(props: IProps) {
super(props);
this.state = {
toastList: Toasts.getInstance().toasts,
};
this.updateToasts = this.updateToasts.bind(this);
}
public override render(): JSX.Element {
return (
<div className={classNames(classes["root"], this.state.toastList.length > 0 && classes["open"])}>
<>
{this.state.toastList.map((toast) => {
return <ToastElement toast={toast} key={toast.id} />;
})}
</>
</div>
);
}
public override componentDidMount() {
this.removeOnChange = Toasts.getInstance().onChange(this.updateToasts);
}
public override componentWillUnmount() {
this.removeOnChange();
}
private updateToasts(toastList: IToast[]) {
this.setState({ toastList });
}
}

13
src/front/components/DesignSystem/Toasts/ToastsHandler/index.tsx Normal file
View File

@ -0,0 +1,13 @@
import React from "react";
import ToastsContainer from "../ToastsContainer";
type IProps = {};
type IState = {};
export default class ToastHandler extends React.Component<IProps, IState> {
public override render(): JSX.Element {
return (
<ToastsContainer />
);
}
}

2
src/front/components/DesignSystem/Typography/index.tsx
View File

@ -31,7 +31,7 @@ export enum ITypo {
export enum ITypoColor { export enum ITypoColor {
RE_HOVER = "re-hover", RE_HOVER = "re-hover",
GREY = "grey" GREY = "grey",
} }
export default class Typography extends React.Component<IProps, IState> { export default class Typography extends React.Component<IProps, IState> {

178
src/front/components/Layouts/DesignSystem/index.tsx
View File

@ -1,100 +1,112 @@
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; import BasePage from "@Front/Components/Layouts/Base";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate"; import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
import BasePage from "../Base";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Toasts, { IToast } from "@Front/Stores/Toasts";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
import HeaderLink from "@Front/Components/DesignSystem/Header/HeaderLink"; import HeaderLink from "@Front/Components/DesignSystem/Header/HeaderLink";
type IState = { type IState = {
isModalDisplayed: boolean isModalDisplayed: boolean
} }
type IProps = { type IProps = {
} }
export default class DesignSystem extends BasePage<IProps, IState> { export default class DesignSystem extends BasePage<IProps, IState> {
constructor(props: IProps) { constructor(props: IProps) {
super(props); super(props);
this.state = { this.state = {
isModalDisplayed: false isModalDisplayed: false
}
this.openModal = this.openModal.bind(this);
this.closeModal = this.closeModal.bind(this);
} }
this.openModal = this.openModal.bind(this);
this.closeModal = this.closeModal.bind(this);
}
public override render(): JSX.Element { public override render(): JSX.Element {
return ( return (
<DefaultTemplate title={"HomePage"}> <DefaultTemplate title={"HomePage"}>
<div className={classes["root"]}> <div className={classes["root"]}>
<div className={classes["section"]}> <div className={classes["section"]}>
<div className={classes["sub-section"]}> <div className={classes["sub-section"]}>
<Typography typo={ITypo.H1}>Website design System</Typography> <Typography typo={ITypo.H1}>Website design System</Typography>
</div> </div>
<div className={classes["sub-section"]}> <div className={classes["sub-section"]}>
<Typography typo={ITypo.P_18}> <Typography typo={ITypo.P_18}>
This page allows to gather all the design system of the site. A This page allows to gather all the design system of the site. A
Design System is a library of components, visuals and principles Design System is a library of components, visuals and principles
with reusable code. This evolving kit offers a UX and UI with reusable code. This evolving kit offers a UX and UI
repository for designers and developers of digital products and repository for designers and developers of digital products and
services. The construction of a design system offers many services. The construction of a design system offers many
advantages. This solution facilitates the work of the teams and advantages. This solution facilitates the work of the teams and
reduces the "design debt" and the "technical debt". The result reduces the "design debt" and the "technical debt". The result
is a coherent ecosystem and therefore a better experience for is a coherent ecosystem and therefore a better experience for
users and customers. users and customers.
</Typography> </Typography>
</div> </div>
</div> </div>
<div className={classes["section"]}> <div className={classes["section"]}>
<div className={classes["sub-section"]}> <div className={classes["sub-section"]}>
<Typography typo={ITypo.H3}>Button components</Typography> <Typography typo={ITypo.H3}>Button components</Typography>
</div> </div>
<Button variant={EButtonVariant.PRIMARY}>Primary</Button> <Button variant={EButtonVariant.PRIMARY}>Primary</Button>
<Button variant={EButtonVariant.SECONDARY}>Secondary</Button> <Button variant={EButtonVariant.SECONDARY}>Secondary</Button>
<Button variant={EButtonVariant.GHOST}>Ghost</Button> <Button variant={EButtonVariant.GHOST}>Ghost</Button>
</div> </div>
<div className={classes["section"]}>
<div className={classes["sub-section"]}>
<Typography typo={ITypo.H3}>Toaster component</Typography>
</div>
<Button variant={EButtonVariant.PRIMARY} onClick={this.spawnToast}>Spawn a toast</Button>
</div>
<div className={classes["section"]}>
<div className={classes["sub-section"]}>
<Typography typo={ITypo.H3}>Modal components</Typography>
</div>
<Button variant={EButtonVariant.PRIMARY} onClick={this.openModal}>Show Modal</Button>
<Confirm
isOpen={this.state.isModalDisplayed}
onClose={this.closeModal}
closeBtn
header={"Title"}
cancelText={"Cancel"}
confirmText={"Confirmer"}>
Lorem ipsum dolor sit amet consectetur. Aliquam nunc lobortis lacus vulputate sagittis sed tempor eget feugiat. Elementum malesuada at sit elit.
</Confirm>
</div>
<div className={classes["section"]}>
<div className={classes["sub-section"]}>
<Typography typo={ITypo.H3}>HeaderLink components</Typography>
</div>
<div className={classes["inline-flex"]}>
<HeaderLink text={"Home"} path={"/"} />
<HeaderLink text={"Design-system"} path={"/design-system"} />
</div>
</div>
</div>
</DefaultTemplate>
);
}
private openModal() {
this.setState({
isModalDisplayed: true
})
}
private closeModal() {
this.setState({
isModalDisplayed: false
})
}
<div className={classes["section"]}> private spawnToast() {
<div className={classes["sub-section"]}> const toast: IToast = { title: "Un collaborateur veut rejoindre votre office", text: "12:00 - 1 fev 2023" }
<Typography typo={ITypo.H3}>Modal components</Typography> Toasts.getInstance().open(toast)
</div> }
<Button variant={EButtonVariant.PRIMARY} onClick={this.openModal}>Show Modal</Button>
<Confirm
isOpen={this.state.isModalDisplayed}
onClose={this.closeModal}
closeBtn
header={"Title"}
cancelText={"Cancel"}
confirmText={"Confirmer"}>
Lorem ipsum dolor sit amet consectetur. Aliquam nunc lobortis lacus vulputate sagittis sed tempor eget feugiat. Elementum malesuada at sit elit.
</Confirm>
</div>
<div className={classes["section"]}>
<div className={classes["sub-section"]}>
<Typography typo={ITypo.H3}>HeaderLink components</Typography>
</div>
<div className={classes["inline-flex"]}>
<HeaderLink text={"Home"} path={"/"} />
<HeaderLink text={"Design-system"} path={"/design-system"} />
</div>
</div>
</div>
</DefaultTemplate>
);
}
private openModal() {
this.setState({
isModalDisplayed: true
})
}
private closeModal() {
this.setState({
isModalDisplayed: false
})
}
} }

4
src/front/components/Layouts/Home/index.tsx
View File

@ -8,9 +8,7 @@ export default class Home extends BasePage {
return ( return (
<DefaultTemplate title={"HomePage"}> <DefaultTemplate title={"HomePage"}>
<div className={classes["root"]}> <div className={classes["root"]}>
<div style={{ fontSize: "20px" }}>JDJADJIZDIAZN?DIAZ?</div> <Typography typo={ITypo.H1}>HomePage</Typography>
<Typography typo={ITypo.H1}>COUCOU JE SUIS UNE TYPO</Typography>
<Typography typo={ITypo.H1Bis}>COUCOU JE SUIS UNE TYPO</Typography>
</div> </div>
</DefaultTemplate> </DefaultTemplate>
); );

8
src/front/components/Layouts/PageNotFound/index.tsx
View File

@ -1,9 +1,7 @@
// import UnpluggedIcon from "@Assets/icons/unplugged.svg"
// import Image from "next/image";
import Link from "next/link";
import classes from "./classes.module.scss";
import BasePage from "../Base";
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate"; import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
import Link from "next/link";
import BasePage from "../Base";
import classes from "./classes.module.scss";
export default class PageNotFound extends BasePage { export default class PageNotFound extends BasePage {
public override render(): JSX.Element { public override render(): JSX.Element {

58
src/front/components/Materials/Header/index.tsx Normal file
View File

@ -0,0 +1,58 @@
import Link from "next/link";
import React from "react";
import Image from "next/image";
import TezosLinkLogo from "@Assets/link_logo.svg";
import Logo from "@Assets/logo.svg";
import classes from "./classes.module.scss";
import Burger from "@Front/Components/Elements/Burger";
type IProps = {};
type IState = {
status: boolean;
};
export default class Header extends React.Component<IProps, IState> {
public constructor(props: IProps) {
super(props);
this.state = {
status: false,
};
this.switchStatus = this.switchStatus.bind(this);
}
public override render(): JSX.Element {
return (
<>
<div className={classes["root"]}>
<Burger state={this.state.status} callback={this.switchStatus} />
<div className={classes["menu"]}>
<Link href="/">
<Image alt="TEZOS LINK" src={TezosLinkLogo} />
</Link>
</div>
<div className={classes["triangle-under-logo"]}></div>
<div className={classes["logo"]}>
<Link href="/">
<Image alt="entire stack" src={Logo} />
</Link>
</div>
<div className={classes["button"]}>
<Link href="/show-project">
{/* <Button color="transparent" text="MY PROJECT" icon={LoginIcon} /> */}
</Link>
<Link href="/new-project">
{/* <Button text="CREATE" icon={PlusCardIcon} /> */}
</Link>
</div>
</div>
</>
);
}
private switchStatus() {
this.state.status
? this.setState({ status: false })
: this.setState({ status: true });
}
}

8
src/front/themes/constants.scss
View File

@ -7,10 +7,11 @@ $screen-s: 767px;
$custom-easing: cubic-bezier(0.645, 0.045, 0.355, 1); $custom-easing: cubic-bezier(0.645, 0.045, 0.355, 1);
// Colors // Generic colors
$black: #000000; $black: #000000;
$white: #ffffff; $white: #ffffff;
// Flash colors
$green-flash: #12bf4d; $green-flash: #12bf4d;
$blue-flash: #005176; $blue-flash: #005176;
$turquoise-flash: #3fa79e; $turquoise-flash: #3fa79e;
@ -22,8 +23,10 @@ $re-hover: #cc4c31;
$pink-flash: #bd4b91; $pink-flash: #bd4b91;
$pink-hover: #e34ba9; $pink-hover: #e34ba9;
// Soft colors
$green-soft: #baf2cd; $green-soft: #baf2cd;
$blue-soft: #a7c6d4; $blue-soft: #a7c6d4;
$orange-soft: #FFDC99;
$turquoise-soft: #c3eae6; $turquoise-soft: #c3eae6;
$purple-soft: #c5b2d4; $purple-soft: #c5b2d4;
$orange-soft: #ffdc99; $orange-soft: #ffdc99;
@ -36,4 +39,5 @@ $grey-soft: #f9f9f9;
$modal-background: rgba(0, 0, 0, 0.44); $modal-background: rgba(0, 0, 0, 0.44);
$shadow-neutral: 0px 8px 10px 0px #00000012; $shadow-nav: 0px 8px 10px rgba(0, 0, 0, 0.07);
$shadow-tooltip: 0px 4px 24px rgba(0, 0, 0, 0.15);

3
src/pages/404.tsx
View File

@ -1,5 +1,4 @@
import PageNotFound from "@Front/Components/Layouts/PageNotFound"; import PageNotFound from "@Front/Components/Layouts/PageNotFound"
export default function Route() { export default function Route() {
return <PageNotFound/> return <PageNotFound/>

1
src/pages/design-system.tsx
View File

@ -1,6 +1,5 @@
import DesignSystem from "@Front/Components/Layouts/DesignSystem"; import DesignSystem from "@Front/Components/Layouts/DesignSystem";
export default function Route() { export default function Route() {
return <DesignSystem />; return <DesignSystem />;
} }

1
src/pages/index.tsx
View File

@ -1,6 +1,5 @@
import Home from "@Front/Components/Layouts/Home"; import Home from "@Front/Components/Layouts/Home";
export default function Route() { export default function Route() {
return <Home />; return <Home />;
} }

8
tsconfig.json
View File

@ -40,9 +40,11 @@
"paths": { "paths": {
"@Api/*": ["src/api/*"], "@Api/*": ["src/api/*"],
"@Front/*": ["src/front/*"], "@Front/*": ["src/front/*"],
"@Assets/*": ["src/front/assets/*"], "@Assets/*": ["src/front/Assets/*"],
"@Components/*": ["src/front/components/*"], "@Components/*": ["src/front/Components/*"],
"@Themes/*": ["src/front/Themes/*"], "@Themes/*": ["src/front/Themes/*"],
"@Stores/*": ["src/front/Stores/*"],
"@FrontServices/*": ["src/front/services/*"],
"@Page/*": ["src/pages/*"], "@Page/*": ["src/pages/*"],
"@Services/*": ["src/common/services/*"], "@Services/*": ["src/common/services/*"],
"@Entries/*": ["src/entries/*"], "@Entries/*": ["src/entries/*"],
@ -50,7 +52,7 @@
"@Config/*": ["src/common/config/*"], "@Config/*": ["src/common/config/*"],
"@Entities/*": ["src/common/ressources/*"], "@Entities/*": ["src/common/ressources/*"],
"@System/*": ["src/common/system/*"], "@System/*": ["src/common/system/*"],
"@ControllerPattern/*": ["src/common/system/controller-pattern/*"], "@ControllerPattern/*": ["src/common/system/controller-pattern/*"]
}, },
// "rootDirs": [], // "rootDirs": [],
// "typeRoots": [], // "typeRoots": [],