Design system/ora notifications (#4)
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
GitHub
commit
676db99cb8
1
.gitignore
vendored
1
.gitignore
vendored
@ -1,5 +1,6 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
|
||||
dist
|
||||
.next
|
||||
|
||||
|
||||
504
package-lock.json
generated
504
package-lock.json
generated
@ -83,6 +83,36 @@
|
||||
"resolved": "https://registry.npmjs.org/@next/env/-/env-13.1.5.tgz",
|
||||
"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": {
|
||||
"version": "13.1.5",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.1.5.tgz",
|
||||
@ -98,6 +128,156 @@
|
||||
"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": {
|
||||
"version": "4.9.0",
|
||||
"resolved": "https://registry.npmjs.org/@prisma/client/-/client-4.9.0.tgz",
|
||||
@ -2270,186 +2450,6 @@
|
||||
"engines": {
|
||||
"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": {
|
||||
@ -2485,12 +2485,84 @@
|
||||
"resolved": "https://registry.npmjs.org/@next/env/-/env-13.1.5.tgz",
|
||||
"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": {
|
||||
"version": "13.1.5",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.1.5.tgz",
|
||||
"integrity": "sha512-aeFXK+M/zmG/CNdMJ0tGNs0MWcLueUe7vZ2V6fa+2yz/ZgYJLI7fEfFvVh1p1yBMzupSbZDowvMuCSFTaeg3MA==",
|
||||
"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": {
|
||||
"version": "4.9.0",
|
||||
"resolved": "https://registry.npmjs.org/@prisma/client/-/client-4.9.0.tgz",
|
||||
@ -4158,78 +4230,6 @@
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
|
||||
"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
10
package.json
@ -4,17 +4,23 @@
|
||||
"description": "tezosLink project",
|
||||
"_moduleAliases": {
|
||||
"@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",
|
||||
"@Components": "./dist/front/components",
|
||||
"@Common": "./dist/common",
|
||||
"@Services": "./dist/common/services",
|
||||
"@Entries": "./dist/common/entries",
|
||||
"@Common": "./dist/common",
|
||||
"@Config": "./dist/common/config",
|
||||
"@Entities": "./dist/common/entities",
|
||||
"@System": "./dist/common/system",
|
||||
"@ControllerPattern": "./dist/common/system/controller-pattern",
|
||||
"@Front": "./dist/front/*",
|
||||
"@Themes": "./dist/front/Themes*"
|
||||
"@Front": "./dist/front/*"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "next build && tsc",
|
||||
|
||||
@ -1,16 +1,17 @@
|
||||
module.exports = {
|
||||
overrides: [
|
||||
{
|
||||
files: "src/**/*.ts",
|
||||
files: ["src/**/*.ts", "src/**/*.tsx", "src/**/*.scss", "./*.js"],
|
||||
options: {
|
||||
tabWidth: 4,
|
||||
useTabs: true,
|
||||
singleQuote: false,
|
||||
trailingComma: "all",
|
||||
printWidth: 240,
|
||||
endOfLine: "crlf",
|
||||
semi: true,
|
||||
bracketSameLine: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
|
||||
9
src/front/Services/EventEmitter.ts
Normal file
9
src/front/Services/EventEmitter.ts
Normal 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
16
src/front/Stores/BaseStore.ts
Normal 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
106
src/front/Stores/Toasts.tsx
Normal 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
5
src/front/assets/icons/info.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 295 B |
@ -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;
|
||||
}
|
||||
@ -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,
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -1,8 +1,18 @@
|
||||
@import "@Themes/constants.scss";
|
||||
|
||||
.root {
|
||||
.icon-container{
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
.notification-icon{
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
.notification-dot{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,14 +2,66 @@ import React from "react";
|
||||
import classes from "./classes.module.scss";
|
||||
import Image from "next/image";
|
||||
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 IState = {};
|
||||
type IState = {
|
||||
hasNotifications: boolean;
|
||||
isModalOpen: boolean;
|
||||
toastList: IToast[] | null;
|
||||
};
|
||||
|
||||
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 {
|
||||
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>;
|
||||
}
|
||||
|
||||
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 });
|
||||
};
|
||||
}
|
||||
@ -6,7 +6,7 @@
|
||||
justify-content: space-between;
|
||||
height: 83px;
|
||||
background-color: $white;
|
||||
box-shadow: $shadow-neutral;
|
||||
box-shadow: $shadow-nav;
|
||||
padding: 0 48px;
|
||||
|
||||
.logo-container {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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 });
|
||||
}
|
||||
}
|
||||
@ -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 />
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -31,7 +31,7 @@ export enum ITypo {
|
||||
|
||||
export enum ITypoColor {
|
||||
RE_HOVER = "re-hover",
|
||||
GREY = "grey"
|
||||
GREY = "grey",
|
||||
}
|
||||
|
||||
export default class Typography extends React.Component<IProps, IState> {
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
|
||||
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
|
||||
import BasePage from "@Front/Components/Layouts/Base";
|
||||
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
|
||||
import BasePage from "../Base";
|
||||
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 HeaderLink from "@Front/Components/DesignSystem/Header/HeaderLink";
|
||||
|
||||
@ -54,7 +55,12 @@ export default class DesignSystem extends BasePage<IProps, IState> {
|
||||
<Button variant={EButtonVariant.GHOST}>Ghost</Button>
|
||||
</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>
|
||||
@ -97,4 +103,10 @@ export default class DesignSystem extends BasePage<IProps, IState> {
|
||||
isModalDisplayed: false
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
private spawnToast() {
|
||||
const toast: IToast = { title: "Un collaborateur veut rejoindre votre office", text: "12:00 - 1 fev 2023" }
|
||||
Toasts.getInstance().open(toast)
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,9 +8,7 @@ export default class Home extends BasePage {
|
||||
return (
|
||||
<DefaultTemplate title={"HomePage"}>
|
||||
<div className={classes["root"]}>
|
||||
<div style={{ fontSize: "20px" }}>JDJADJIZDIAZN?DIAZ?</div>
|
||||
<Typography typo={ITypo.H1}>COUCOU JE SUIS UNE TYPO</Typography>
|
||||
<Typography typo={ITypo.H1Bis}>COUCOU JE SUIS UNE TYPO</Typography>
|
||||
<Typography typo={ITypo.H1}>HomePage</Typography>
|
||||
</div>
|
||||
</DefaultTemplate>
|
||||
);
|
||||
|
||||
@ -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 Link from "next/link";
|
||||
import BasePage from "../Base";
|
||||
import classes from "./classes.module.scss";
|
||||
|
||||
export default class PageNotFound extends BasePage {
|
||||
public override render(): JSX.Element {
|
||||
|
||||
58
src/front/components/Materials/Header/index.tsx
Normal file
58
src/front/components/Materials/Header/index.tsx
Normal 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 });
|
||||
}
|
||||
}
|
||||
@ -7,10 +7,11 @@ $screen-s: 767px;
|
||||
|
||||
$custom-easing: cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
|
||||
// Colors
|
||||
// Generic colors
|
||||
$black: #000000;
|
||||
$white: #ffffff;
|
||||
|
||||
// Flash colors
|
||||
$green-flash: #12bf4d;
|
||||
$blue-flash: #005176;
|
||||
$turquoise-flash: #3fa79e;
|
||||
@ -22,8 +23,10 @@ $re-hover: #cc4c31;
|
||||
$pink-flash: #bd4b91;
|
||||
$pink-hover: #e34ba9;
|
||||
|
||||
// Soft colors
|
||||
$green-soft: #baf2cd;
|
||||
$blue-soft: #a7c6d4;
|
||||
$orange-soft: #FFDC99;
|
||||
$turquoise-soft: #c3eae6;
|
||||
$purple-soft: #c5b2d4;
|
||||
$orange-soft: #ffdc99;
|
||||
@ -36,4 +39,5 @@ $grey-soft: #f9f9f9;
|
||||
|
||||
$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);
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import PageNotFound from "@Front/Components/Layouts/PageNotFound";
|
||||
|
||||
import PageNotFound from "@Front/Components/Layouts/PageNotFound"
|
||||
|
||||
export default function Route() {
|
||||
return <PageNotFound/>
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import DesignSystem from "@Front/Components/Layouts/DesignSystem";
|
||||
|
||||
|
||||
export default function Route() {
|
||||
return <DesignSystem />;
|
||||
}
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import Home from "@Front/Components/Layouts/Home";
|
||||
|
||||
|
||||
export default function Route() {
|
||||
return <Home />;
|
||||
}
|
||||
|
||||
@ -40,9 +40,11 @@
|
||||
"paths": {
|
||||
"@Api/*": ["src/api/*"],
|
||||
"@Front/*": ["src/front/*"],
|
||||
"@Assets/*": ["src/front/assets/*"],
|
||||
"@Components/*": ["src/front/components/*"],
|
||||
"@Assets/*": ["src/front/Assets/*"],
|
||||
"@Components/*": ["src/front/Components/*"],
|
||||
"@Themes/*": ["src/front/Themes/*"],
|
||||
"@Stores/*": ["src/front/Stores/*"],
|
||||
"@FrontServices/*": ["src/front/services/*"],
|
||||
"@Page/*": ["src/pages/*"],
|
||||
"@Services/*": ["src/common/services/*"],
|
||||
"@Entries/*": ["src/entries/*"],
|
||||
@ -50,7 +52,7 @@
|
||||
"@Config/*": ["src/common/config/*"],
|
||||
"@Entities/*": ["src/common/ressources/*"],
|
||||
"@System/*": ["src/common/system/*"],
|
||||
"@ControllerPattern/*": ["src/common/system/controller-pattern/*"],
|
||||
"@ControllerPattern/*": ["src/common/system/controller-pattern/*"]
|
||||
},
|
||||
// "rootDirs": [],
|
||||
// "typeRoots": [],
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user