From 2773effb816886c3ca1af3e09cd60f834305a171 Mon Sep 17 00:00:00 2001 From: Joel Anton Date: Wed, 5 Jun 2024 14:15:01 +0200 Subject: [PATCH 01/14] feat: Add react table --- libs/novui/package.json | 1 + pnpm-lock.yaml | 258 ++++++++++++++++++++++++---------------- 2 files changed, 155 insertions(+), 104 deletions(-) diff --git a/libs/novui/package.json b/libs/novui/package.json index be0d3bd9cd5..511662a3952 100644 --- a/libs/novui/package.json +++ b/libs/novui/package.json @@ -129,6 +129,7 @@ "dependencies": { "@mantine/core": "^7.10.0", "@mantine/hooks": "^7.10.0", + "@tanstack/react-table": "^8.17.3", "react-icons": "^5.0.1" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 75aab2d20b8..179e8303ef9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -3192,6 +3192,9 @@ importers: '@mantine/hooks': specifier: ^7.10.0 version: 7.10.1(react@18.3.1) + '@tanstack/react-table': + specifier: ^8.17.3 + version: 8.17.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react-icons: specifier: ^5.0.1 version: 5.0.1(react@18.3.1) @@ -4246,7 +4249,7 @@ importers: devDependencies: '@angular-devkit/build-angular': specifier: ^16.2.5 - version: 16.2.8(@angular/compiler-cli@16.2.11(@angular/compiler@16.2.11(@angular/core@16.2.11(rxjs@7.8.1)(zone.js@0.13.3)))(typescript@4.9.5))(@swc/core@1.3.107)(@types/node@20.12.12)(html-webpack-plugin@5.5.3(webpack@5.88.2(@swc/core@1.3.107)(esbuild@0.18.17)))(jest-environment-jsdom@29.5.0)(jest@29.7.0(@types/node@20.12.12)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.107)(@types/node@16.11.7)(typescript@4.9.5)))(karma@6.4.1)(lightningcss@1.23.0)(ng-packagr@16.2.3(@angular/compiler-cli@16.2.11(@angular/compiler@16.2.11(@angular/core@16.2.11(rxjs@7.8.1)(zone.js@0.13.3)))(typescript@4.9.5))(tailwindcss@3.3.1(postcss@8.4.38)(ts-node@10.9.1(@swc/core@1.3.107)(@types/node@16.11.7)(typescript@4.9.5)))(tslib@2.5.0)(typescript@4.9.5))(sugarss@4.0.1(postcss@8.4.38))(tailwindcss@3.3.1(postcss@8.4.38)(ts-node@10.9.1(@swc/core@1.3.107)(@types/node@16.11.7)(typescript@4.9.5)))(typescript@4.9.5) + version: 16.2.8(@angular/compiler-cli@16.2.11(@angular/compiler@16.2.11(@angular/core@16.2.11(rxjs@7.8.1)(zone.js@0.13.3)))(typescript@4.9.5))(@swc/core@1.3.107)(@types/node@20.12.12)(html-webpack-plugin@5.5.3(webpack@5.88.2(@swc/core@1.3.107)))(jest-environment-jsdom@29.5.0)(jest@29.7.0(@types/node@20.12.12)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.107)(@types/node@16.11.7)(typescript@4.9.5)))(karma@6.4.1)(lightningcss@1.23.0)(ng-packagr@16.2.3(@angular/compiler-cli@16.2.11(@angular/compiler@16.2.11(@angular/core@16.2.11(rxjs@7.8.1)(zone.js@0.13.3)))(typescript@4.9.5))(tailwindcss@3.3.1(postcss@8.4.38)(ts-node@10.9.1(@swc/core@1.3.107)(@types/node@16.11.7)(typescript@4.9.5)))(tslib@2.5.0)(typescript@4.9.5))(sugarss@4.0.1(postcss@8.4.38))(tailwindcss@3.3.1(postcss@8.4.38)(ts-node@10.9.1(@swc/core@1.3.107)(@types/node@16.11.7)(typescript@4.9.5)))(typescript@4.9.5) '@angular/cli': specifier: ^16.2.5 version: 16.2.8(chokidar@3.5.3) @@ -14590,6 +14593,17 @@ packages: peerDependencies: react: ^18.0.0 + '@tanstack/react-table@8.17.3': + resolution: {integrity: sha512-5gwg5SvPD3lNAXPuJJz1fOCEZYk9/GeBFH3w/hCgnfyszOIzwkwgp5I7Q4MJtn0WECp84b5STQUDdmvGi8m3nA==} + engines: {node: '>=12'} + peerDependencies: + react: '>=16.8' + react-dom: '>=16.8' + + '@tanstack/table-core@8.17.3': + resolution: {integrity: sha512-mPBodDGVL+fl6d90wUREepHa/7lhsghg2A3vFpakEhrhtbIlgNAZiMr7ccTgak5qbHqF14Fwy+W1yFWQt+WmYQ==} + engines: {node: '>=12'} + '@taskforcesh/bullmq-pro@5.1.14': resolution: {integrity: sha512-J/83Q1GTFWbUWn1bpsiX+CcQXktp7ADg/d1oID+wQ8ZwSB2W5l/1FV4yR1BEi3sO+UFEo+rK3qfXQuDml7aBYA==, tarball: https://npm.taskforce.sh/@taskforcesh/bullmq-pro/-/@taskforcesh/bullmq-pro-5.1.14.tgz} @@ -31476,11 +31490,11 @@ snapshots: transitivePeerDependencies: - chokidar - '@angular-devkit/build-angular@16.2.8(@angular/compiler-cli@16.2.11(@angular/compiler@16.2.11(@angular/core@16.2.11(rxjs@7.8.1)(zone.js@0.13.3)))(typescript@4.9.5))(@swc/core@1.3.107)(@types/node@20.12.12)(html-webpack-plugin@5.5.3(webpack@5.88.2(@swc/core@1.3.107)(esbuild@0.18.17)))(jest-environment-jsdom@29.5.0)(jest@29.7.0(@types/node@20.12.12)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.107)(@types/node@16.11.7)(typescript@4.9.5)))(karma@6.4.1)(lightningcss@1.23.0)(ng-packagr@16.2.3(@angular/compiler-cli@16.2.11(@angular/compiler@16.2.11(@angular/core@16.2.11(rxjs@7.8.1)(zone.js@0.13.3)))(typescript@4.9.5))(tailwindcss@3.3.1(postcss@8.4.38)(ts-node@10.9.1(@swc/core@1.3.107)(@types/node@16.11.7)(typescript@4.9.5)))(tslib@2.5.0)(typescript@4.9.5))(sugarss@4.0.1(postcss@8.4.38))(tailwindcss@3.3.1(postcss@8.4.38)(ts-node@10.9.1(@swc/core@1.3.107)(@types/node@16.11.7)(typescript@4.9.5)))(typescript@4.9.5)': + '@angular-devkit/build-angular@16.2.8(@angular/compiler-cli@16.2.11(@angular/compiler@16.2.11(@angular/core@16.2.11(rxjs@7.8.1)(zone.js@0.13.3)))(typescript@4.9.5))(@swc/core@1.3.107)(@types/node@20.12.12)(html-webpack-plugin@5.5.3(webpack@5.88.2(@swc/core@1.3.107)))(jest-environment-jsdom@29.5.0)(jest@29.7.0(@types/node@20.12.12)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.107)(@types/node@16.11.7)(typescript@4.9.5)))(karma@6.4.1)(lightningcss@1.23.0)(ng-packagr@16.2.3(@angular/compiler-cli@16.2.11(@angular/compiler@16.2.11(@angular/core@16.2.11(rxjs@7.8.1)(zone.js@0.13.3)))(typescript@4.9.5))(tailwindcss@3.3.1(postcss@8.4.38)(ts-node@10.9.1(@swc/core@1.3.107)(@types/node@16.11.7)(typescript@4.9.5)))(tslib@2.5.0)(typescript@4.9.5))(sugarss@4.0.1(postcss@8.4.38))(tailwindcss@3.3.1(postcss@8.4.38)(ts-node@10.9.1(@swc/core@1.3.107)(@types/node@16.11.7)(typescript@4.9.5)))(typescript@4.9.5)': dependencies: '@ampproject/remapping': 2.2.1 '@angular-devkit/architect': 0.1602.8(chokidar@3.5.3) - '@angular-devkit/build-webpack': 0.1602.8(chokidar@3.5.3)(webpack-dev-server@4.15.1(webpack@5.88.2(@swc/core@1.3.107)(esbuild@0.18.17)))(webpack@5.88.2(@swc/core@1.3.107)(esbuild@0.18.17)) + '@angular-devkit/build-webpack': 0.1602.8(chokidar@3.5.3)(webpack-dev-server@4.15.1(webpack@5.88.2(@swc/core@1.3.107)))(webpack@5.88.2(@swc/core@1.3.107)(esbuild@0.18.17)) '@angular-devkit/core': 16.2.8(chokidar@3.5.3) '@angular/compiler-cli': 16.2.11(@angular/compiler@16.2.11(@angular/core@16.2.11(rxjs@7.8.1)(zone.js@0.13.3)))(typescript@4.9.5) '@babel/core': 7.22.9 @@ -31541,9 +31555,9 @@ snapshots: vite: 4.4.7(@types/node@20.12.12)(less@4.1.3)(lightningcss@1.23.0)(sass@1.64.1)(sugarss@4.0.1(postcss@8.4.38))(terser@5.19.2) webpack: 5.88.2(@swc/core@1.3.107)(esbuild@0.18.17) webpack-dev-middleware: 6.1.1(webpack@5.88.2(@swc/core@1.3.107)(esbuild@0.18.17)) - webpack-dev-server: 4.15.1(webpack@5.88.2(@swc/core@1.3.107)(esbuild@0.18.17)) + webpack-dev-server: 4.15.1(webpack@5.88.2(@swc/core@1.3.107)) webpack-merge: 5.9.0 - webpack-subresource-integrity: 5.1.0(html-webpack-plugin@5.5.3(webpack@5.88.2(@swc/core@1.3.107)(esbuild@0.18.17)))(webpack@5.88.2(@swc/core@1.3.107)(esbuild@0.18.17)) + webpack-subresource-integrity: 5.1.0(html-webpack-plugin@5.5.3(webpack@5.88.2(@swc/core@1.3.107)))(webpack@5.88.2(@swc/core@1.3.107)(esbuild@0.18.17)) optionalDependencies: esbuild: 0.18.17 jest: 29.7.0(@types/node@20.12.12)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.107)(@types/node@16.11.7)(typescript@4.9.5)) @@ -31569,12 +31583,12 @@ snapshots: - utf-8-validate - webpack-cli - '@angular-devkit/build-webpack@0.1602.8(chokidar@3.5.3)(webpack-dev-server@4.15.1(webpack@5.88.2(@swc/core@1.3.107)(esbuild@0.18.17)))(webpack@5.88.2(@swc/core@1.3.107)(esbuild@0.18.17))': + '@angular-devkit/build-webpack@0.1602.8(chokidar@3.5.3)(webpack-dev-server@4.15.1(webpack@5.88.2(@swc/core@1.3.107)))(webpack@5.88.2(@swc/core@1.3.107)(esbuild@0.18.17))': dependencies: '@angular-devkit/architect': 0.1602.8(chokidar@3.5.3) rxjs: 7.8.1 webpack: 5.88.2(@swc/core@1.3.107)(esbuild@0.18.17) - webpack-dev-server: 4.15.1(webpack@5.88.2(@swc/core@1.3.107)(esbuild@0.18.17)) + webpack-dev-server: 4.15.1(webpack@5.88.2(@swc/core@1.3.107)) transitivePeerDependencies: - chokidar @@ -32063,8 +32077,8 @@ snapshots: dependencies: '@aws-crypto/sha256-browser': 3.0.0 '@aws-crypto/sha256-js': 3.0.0 - '@aws-sdk/client-sso-oidc': 3.575.0(@aws-sdk/client-sts@3.575.0) - '@aws-sdk/client-sts': 3.575.0 + '@aws-sdk/client-sso-oidc': 3.575.0 + '@aws-sdk/client-sts': 3.575.0(@aws-sdk/client-sso-oidc@3.575.0) '@aws-sdk/core': 3.575.0 '@aws-sdk/credential-provider-node': 3.575.0(@aws-sdk/client-sso-oidc@3.575.0)(@aws-sdk/client-sts@3.575.0) '@aws-sdk/middleware-host-header': 3.575.0 @@ -32490,52 +32504,6 @@ snapshots: transitivePeerDependencies: - aws-crt - '@aws-sdk/client-sso-oidc@3.575.0(@aws-sdk/client-sts@3.575.0)': - dependencies: - '@aws-crypto/sha256-browser': 3.0.0 - '@aws-crypto/sha256-js': 3.0.0 - '@aws-sdk/client-sts': 3.575.0 - '@aws-sdk/core': 3.575.0 - '@aws-sdk/credential-provider-node': 3.575.0(@aws-sdk/client-sso-oidc@3.575.0(@aws-sdk/client-sts@3.575.0))(@aws-sdk/client-sts@3.575.0) - '@aws-sdk/middleware-host-header': 3.575.0 - '@aws-sdk/middleware-logger': 3.575.0 - '@aws-sdk/middleware-recursion-detection': 3.575.0 - '@aws-sdk/middleware-user-agent': 3.575.0 - '@aws-sdk/region-config-resolver': 3.575.0 - '@aws-sdk/types': 3.575.0 - '@aws-sdk/util-endpoints': 3.575.0 - '@aws-sdk/util-user-agent-browser': 3.575.0 - '@aws-sdk/util-user-agent-node': 3.575.0 - '@smithy/config-resolver': 3.0.0 - '@smithy/core': 2.0.0 - '@smithy/fetch-http-handler': 3.0.0 - '@smithy/hash-node': 3.0.0 - '@smithy/invalid-dependency': 3.0.0 - '@smithy/middleware-content-length': 3.0.0 - '@smithy/middleware-endpoint': 3.0.0 - '@smithy/middleware-retry': 3.0.0 - '@smithy/middleware-serde': 3.0.0 - '@smithy/middleware-stack': 3.0.0 - '@smithy/node-config-provider': 3.0.0 - '@smithy/node-http-handler': 3.0.0 - '@smithy/protocol-http': 4.0.0 - '@smithy/smithy-client': 3.0.0 - '@smithy/types': 3.0.0 - '@smithy/url-parser': 3.0.0 - '@smithy/util-base64': 3.0.0 - '@smithy/util-body-length-browser': 3.0.0 - '@smithy/util-body-length-node': 3.0.0 - '@smithy/util-defaults-mode-browser': 3.0.0 - '@smithy/util-defaults-mode-node': 3.0.0 - '@smithy/util-endpoints': 2.0.0 - '@smithy/util-middleware': 3.0.0 - '@smithy/util-retry': 3.0.0 - '@smithy/util-utf8': 3.0.0 - tslib: 2.6.2 - transitivePeerDependencies: - - '@aws-sdk/client-sts' - - aws-crt - '@aws-sdk/client-sso@3.382.0': dependencies: '@aws-crypto/sha256-browser': 3.0.0 @@ -32834,7 +32802,7 @@ snapshots: '@aws-crypto/sha256-js': 3.0.0 '@aws-sdk/client-sso-oidc': 3.575.0 '@aws-sdk/core': 3.575.0 - '@aws-sdk/credential-provider-node': 3.575.0(@aws-sdk/client-sso-oidc@3.575.0(@aws-sdk/client-sts@3.575.0))(@aws-sdk/client-sts@3.575.0) + '@aws-sdk/credential-provider-node': 3.575.0(@aws-sdk/client-sso-oidc@3.575.0)(@aws-sdk/client-sts@3.575.0) '@aws-sdk/middleware-host-header': 3.575.0 '@aws-sdk/middleware-logger': 3.575.0 '@aws-sdk/middleware-recursion-detection': 3.575.0 @@ -32873,6 +32841,52 @@ snapshots: transitivePeerDependencies: - aws-crt + '@aws-sdk/client-sts@3.575.0(@aws-sdk/client-sso-oidc@3.575.0)': + dependencies: + '@aws-crypto/sha256-browser': 3.0.0 + '@aws-crypto/sha256-js': 3.0.0 + '@aws-sdk/client-sso-oidc': 3.575.0 + '@aws-sdk/core': 3.575.0 + '@aws-sdk/credential-provider-node': 3.575.0(@aws-sdk/client-sso-oidc@3.575.0)(@aws-sdk/client-sts@3.575.0(@aws-sdk/client-sso-oidc@3.575.0)) + '@aws-sdk/middleware-host-header': 3.575.0 + '@aws-sdk/middleware-logger': 3.575.0 + '@aws-sdk/middleware-recursion-detection': 3.575.0 + '@aws-sdk/middleware-user-agent': 3.575.0 + '@aws-sdk/region-config-resolver': 3.575.0 + '@aws-sdk/types': 3.575.0 + '@aws-sdk/util-endpoints': 3.575.0 + '@aws-sdk/util-user-agent-browser': 3.575.0 + '@aws-sdk/util-user-agent-node': 3.575.0 + '@smithy/config-resolver': 3.0.0 + '@smithy/core': 2.0.0 + '@smithy/fetch-http-handler': 3.0.0 + '@smithy/hash-node': 3.0.0 + '@smithy/invalid-dependency': 3.0.0 + '@smithy/middleware-content-length': 3.0.0 + '@smithy/middleware-endpoint': 3.0.0 + '@smithy/middleware-retry': 3.0.0 + '@smithy/middleware-serde': 3.0.0 + '@smithy/middleware-stack': 3.0.0 + '@smithy/node-config-provider': 3.0.0 + '@smithy/node-http-handler': 3.0.0 + '@smithy/protocol-http': 4.0.0 + '@smithy/smithy-client': 3.0.0 + '@smithy/types': 3.0.0 + '@smithy/url-parser': 3.0.0 + '@smithy/util-base64': 3.0.0 + '@smithy/util-body-length-browser': 3.0.0 + '@smithy/util-body-length-node': 3.0.0 + '@smithy/util-defaults-mode-browser': 3.0.0 + '@smithy/util-defaults-mode-node': 3.0.0 + '@smithy/util-endpoints': 2.0.0 + '@smithy/util-middleware': 3.0.0 + '@smithy/util-retry': 3.0.0 + '@smithy/util-utf8': 3.0.0 + tslib: 2.6.2 + transitivePeerDependencies: + - '@aws-sdk/client-sso-oidc' + - aws-crt + '@aws-sdk/core@3.496.0': dependencies: '@smithy/core': 1.3.1 @@ -33006,13 +33020,13 @@ snapshots: - aws-crt optional: true - '@aws-sdk/credential-provider-ini@3.575.0(@aws-sdk/client-sso-oidc@3.575.0(@aws-sdk/client-sts@3.575.0))(@aws-sdk/client-sts@3.575.0)': + '@aws-sdk/credential-provider-ini@3.575.0(@aws-sdk/client-sso-oidc@3.575.0)(@aws-sdk/client-sts@3.575.0(@aws-sdk/client-sso-oidc@3.575.0))': dependencies: - '@aws-sdk/client-sts': 3.575.0 + '@aws-sdk/client-sts': 3.575.0(@aws-sdk/client-sso-oidc@3.575.0) '@aws-sdk/credential-provider-env': 3.575.0 '@aws-sdk/credential-provider-process': 3.575.0 - '@aws-sdk/credential-provider-sso': 3.575.0(@aws-sdk/client-sso-oidc@3.575.0(@aws-sdk/client-sts@3.575.0)) - '@aws-sdk/credential-provider-web-identity': 3.575.0(@aws-sdk/client-sts@3.575.0) + '@aws-sdk/credential-provider-sso': 3.575.0(@aws-sdk/client-sso-oidc@3.575.0) + '@aws-sdk/credential-provider-web-identity': 3.575.0(@aws-sdk/client-sts@3.575.0(@aws-sdk/client-sso-oidc@3.575.0)) '@aws-sdk/types': 3.575.0 '@smithy/credential-provider-imds': 3.0.0 '@smithy/property-provider': 3.0.0 @@ -33090,14 +33104,14 @@ snapshots: - aws-crt optional: true - '@aws-sdk/credential-provider-node@3.575.0(@aws-sdk/client-sso-oidc@3.575.0(@aws-sdk/client-sts@3.575.0))(@aws-sdk/client-sts@3.575.0)': + '@aws-sdk/credential-provider-node@3.575.0(@aws-sdk/client-sso-oidc@3.575.0)(@aws-sdk/client-sts@3.575.0(@aws-sdk/client-sso-oidc@3.575.0))': dependencies: '@aws-sdk/credential-provider-env': 3.575.0 '@aws-sdk/credential-provider-http': 3.575.0 - '@aws-sdk/credential-provider-ini': 3.575.0(@aws-sdk/client-sso-oidc@3.575.0(@aws-sdk/client-sts@3.575.0))(@aws-sdk/client-sts@3.575.0) + '@aws-sdk/credential-provider-ini': 3.575.0(@aws-sdk/client-sso-oidc@3.575.0)(@aws-sdk/client-sts@3.575.0(@aws-sdk/client-sso-oidc@3.575.0)) '@aws-sdk/credential-provider-process': 3.575.0 - '@aws-sdk/credential-provider-sso': 3.575.0(@aws-sdk/client-sso-oidc@3.575.0(@aws-sdk/client-sts@3.575.0)) - '@aws-sdk/credential-provider-web-identity': 3.575.0(@aws-sdk/client-sts@3.575.0) + '@aws-sdk/credential-provider-sso': 3.575.0(@aws-sdk/client-sso-oidc@3.575.0) + '@aws-sdk/credential-provider-web-identity': 3.575.0(@aws-sdk/client-sts@3.575.0(@aws-sdk/client-sso-oidc@3.575.0)) '@aws-sdk/types': 3.575.0 '@smithy/credential-provider-imds': 3.0.0 '@smithy/property-provider': 3.0.0 @@ -33199,19 +33213,6 @@ snapshots: - aws-crt optional: true - '@aws-sdk/credential-provider-sso@3.575.0(@aws-sdk/client-sso-oidc@3.575.0(@aws-sdk/client-sts@3.575.0))': - dependencies: - '@aws-sdk/client-sso': 3.575.0 - '@aws-sdk/token-providers': 3.575.0(@aws-sdk/client-sso-oidc@3.575.0(@aws-sdk/client-sts@3.575.0)) - '@aws-sdk/types': 3.575.0 - '@smithy/property-provider': 3.0.0 - '@smithy/shared-ini-file-loader': 3.0.0 - '@smithy/types': 3.0.0 - tslib: 2.6.2 - transitivePeerDependencies: - - '@aws-sdk/client-sso-oidc' - - aws-crt - '@aws-sdk/credential-provider-sso@3.575.0(@aws-sdk/client-sso-oidc@3.575.0)': dependencies: '@aws-sdk/client-sso': 3.575.0 @@ -33251,6 +33252,14 @@ snapshots: - aws-crt optional: true + '@aws-sdk/credential-provider-web-identity@3.575.0(@aws-sdk/client-sts@3.575.0(@aws-sdk/client-sso-oidc@3.575.0))': + dependencies: + '@aws-sdk/client-sts': 3.575.0(@aws-sdk/client-sso-oidc@3.575.0) + '@aws-sdk/types': 3.575.0 + '@smithy/property-provider': 3.0.0 + '@smithy/types': 3.0.0 + tslib: 2.6.2 + '@aws-sdk/credential-provider-web-identity@3.575.0(@aws-sdk/client-sts@3.575.0)': dependencies: '@aws-sdk/client-sts': 3.575.0 @@ -33675,15 +33684,6 @@ snapshots: - aws-crt optional: true - '@aws-sdk/token-providers@3.575.0(@aws-sdk/client-sso-oidc@3.575.0(@aws-sdk/client-sts@3.575.0))': - dependencies: - '@aws-sdk/client-sso-oidc': 3.575.0(@aws-sdk/client-sts@3.575.0) - '@aws-sdk/types': 3.575.0 - '@smithy/property-provider': 3.0.0 - '@smithy/shared-ini-file-loader': 3.0.0 - '@smithy/types': 3.0.0 - tslib: 2.6.2 - '@aws-sdk/token-providers@3.575.0(@aws-sdk/client-sso-oidc@3.575.0)': dependencies: '@aws-sdk/client-sso-oidc': 3.575.0 @@ -41863,7 +41863,7 @@ snapshots: tsconfig-paths: 4.2.0 tsconfig-paths-webpack-plugin: 4.1.0 typescript: 5.1.6 - webpack: 5.88.2(@swc/core@1.3.107)(esbuild@0.18.17) + webpack: 5.88.2(@swc/core@1.3.107) webpack-node-externals: 3.0.0 optionalDependencies: '@swc/core': 1.3.107(@swc/helpers@0.5.2) @@ -46169,7 +46169,7 @@ snapshots: rollup: 2.78.0 stacktrace-parser: 0.1.10 optionalDependencies: - webpack: 5.88.2(@swc/core@1.3.107)(esbuild@0.18.17) + webpack: 5.88.2(@swc/core@1.3.107) transitivePeerDependencies: - encoding - supports-color @@ -50228,6 +50228,14 @@ snapshots: '@tanstack/query-core': 5.36.0 react: 18.2.0 + '@tanstack/react-table@8.17.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@tanstack/table-core': 8.17.3 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + + '@tanstack/table-core@8.17.3': {} + '@taskforcesh/bullmq-pro@5.1.14': dependencies: bullmq: 3.6.6 @@ -57394,7 +57402,7 @@ snapshots: lodash: 4.17.21 resolve: 2.0.0-next.4 semver: 5.7.2 - webpack: 5.88.2(@swc/core@1.3.107)(esbuild@0.18.17) + webpack: 5.88.2(@swc/core@1.3.107) transitivePeerDependencies: - supports-color @@ -58590,7 +58598,7 @@ snapshots: dependencies: loader-utils: 2.0.4 schema-utils: 3.3.0 - webpack: 5.88.2(@swc/core@1.3.107)(esbuild@0.18.17) + webpack: 5.88.2(@swc/core@1.3.107) optional: true file-selector@0.6.0: @@ -58921,7 +58929,7 @@ snapshots: semver: 7.5.4 tapable: 2.2.1 typescript: 5.1.6 - webpack: 5.88.2(@swc/core@1.3.107)(esbuild@0.18.17) + webpack: 5.88.2(@swc/core@1.3.107) form-data@2.3.3: dependencies: @@ -60112,7 +60120,7 @@ snapshots: tapable: 2.2.1 webpack: 5.78.0(@swc/core@1.3.107) - html-webpack-plugin@5.5.3(webpack@5.88.2(@swc/core@1.3.107)(esbuild@0.18.17)): + html-webpack-plugin@5.5.3(webpack@5.88.2(@swc/core@1.3.107)): dependencies: '@types/html-minifier-terser': 6.1.0 html-minifier-terser: 6.1.0 @@ -72589,7 +72597,7 @@ snapshots: optionalDependencies: '@swc/core': 1.3.107(@swc/helpers@0.5.2) - terser-webpack-plugin@5.3.9(@swc/core@1.3.107)(esbuild@0.18.17)(webpack@5.88.2(@swc/core@1.3.107)(esbuild@0.18.17)): + terser-webpack-plugin@5.3.9(@swc/core@1.3.107)(esbuild@0.18.17)(webpack@5.88.2(@swc/core@1.3.107)): dependencies: '@jridgewell/trace-mapping': 0.3.18 jest-worker: 27.5.1 @@ -72634,6 +72642,17 @@ snapshots: optionalDependencies: '@swc/core': 1.3.107(@swc/helpers@0.5.2) + terser-webpack-plugin@5.3.9(@swc/core@1.3.107)(webpack@5.88.2(@swc/core@1.3.107)): + dependencies: + '@jridgewell/trace-mapping': 0.3.18 + jest-worker: 27.5.1 + schema-utils: 3.1.2 + serialize-javascript: 6.0.1 + terser: 5.16.9 + webpack: 5.88.2(@swc/core@1.3.107) + optionalDependencies: + '@swc/core': 1.3.107(@swc/helpers@0.5.2) + terser@5.16.9: dependencies: '@jridgewell/source-map': 0.3.3 @@ -73155,7 +73174,7 @@ snapshots: micromatch: 4.0.5 semver: 7.5.2 typescript: 4.9.5 - webpack: 5.88.2(@swc/core@1.3.107)(esbuild@0.18.17) + webpack: 5.88.2(@swc/core@1.3.107) ts-morph@12.0.0: dependencies: @@ -74043,7 +74062,7 @@ snapshots: loader-utils: 2.0.4 mime-types: 2.1.35 schema-utils: 3.3.0 - webpack: 5.88.2(@swc/core@1.3.107)(esbuild@0.18.17) + webpack: 5.88.2(@swc/core@1.3.107) optionalDependencies: file-loader: 6.2.0(webpack@5.88.2(@swc/core@1.3.107)) @@ -74470,7 +74489,7 @@ snapshots: less: 4.1.3 lightningcss: 1.23.0 sass: 1.64.1 - sugarss: 4.0.1(postcss@8.4.38) + sugarss: 4.0.1(postcss@8.4.31) terser: 5.22.0 vite@4.5.2(@types/node@18.16.9)(less@4.1.3)(lightningcss@1.23.0)(sass@1.64.1)(sugarss@4.0.1(postcss@8.4.38))(terser@5.22.0): @@ -74498,7 +74517,7 @@ snapshots: less: 4.1.3 lightningcss: 1.23.0 sass: 1.64.1 - sugarss: 4.0.1(postcss@8.4.38) + sugarss: 4.0.1(postcss@8.4.31) terser: 5.22.0 vite@5.1.7(@types/node@12.20.55)(less@4.1.3)(lightningcss@1.23.0)(sass@1.64.1)(sugarss@4.0.1(postcss@8.4.31))(terser@5.22.0): @@ -74540,7 +74559,7 @@ snapshots: less: 4.1.3 lightningcss: 1.23.0 sass: 1.64.1 - sugarss: 4.0.1(postcss@8.4.38) + sugarss: 4.0.1(postcss@8.4.31) terser: 5.22.0 vite@5.1.7(@types/node@20.12.12)(less@4.1.3)(lightningcss@1.23.0)(sass@1.64.1)(sugarss@4.0.1(postcss@8.4.38))(terser@5.22.0): @@ -74847,7 +74866,7 @@ snapshots: schema-utils: 4.0.0 webpack: 5.78.0(@swc/core@1.3.107) - webpack-dev-middleware@5.3.3(webpack@5.88.2(@swc/core@1.3.107)(esbuild@0.18.17)): + webpack-dev-middleware@5.3.3(webpack@5.88.2(@swc/core@1.3.107)): dependencies: colorette: 2.0.19 memfs: 3.5.0 @@ -74972,7 +74991,7 @@ snapshots: - supports-color - utf-8-validate - webpack-dev-server@4.15.1(webpack@5.88.2(@swc/core@1.3.107)(esbuild@0.18.17)): + webpack-dev-server@4.15.1(webpack@5.88.2(@swc/core@1.3.107)): dependencies: '@types/bonjour': 3.5.10 '@types/connect-history-api-fallback': 1.3.5 @@ -75002,7 +75021,7 @@ snapshots: serve-index: 1.9.1 sockjs: 0.3.24 spdy: 4.0.2 - webpack-dev-middleware: 5.3.3(webpack@5.88.2(@swc/core@1.3.107)(esbuild@0.18.17)) + webpack-dev-middleware: 5.3.3(webpack@5.88.2(@swc/core@1.3.107)) ws: 8.13.0 optionalDependencies: webpack: 5.88.2(@swc/core@1.3.107)(esbuild@0.18.17) @@ -75054,12 +75073,12 @@ snapshots: webpack-sources@3.2.3: {} - webpack-subresource-integrity@5.1.0(html-webpack-plugin@5.5.3(webpack@5.88.2(@swc/core@1.3.107)(esbuild@0.18.17)))(webpack@5.88.2(@swc/core@1.3.107)(esbuild@0.18.17)): + webpack-subresource-integrity@5.1.0(html-webpack-plugin@5.5.3(webpack@5.88.2(@swc/core@1.3.107)))(webpack@5.88.2(@swc/core@1.3.107)(esbuild@0.18.17)): dependencies: typed-assert: 1.0.9 webpack: 5.88.2(@swc/core@1.3.107)(esbuild@0.18.17) optionalDependencies: - html-webpack-plugin: 5.5.3(webpack@5.88.2(@swc/core@1.3.107)(esbuild@0.18.17)) + html-webpack-plugin: 5.5.3(webpack@5.88.2(@swc/core@1.3.107)) webpack-virtual-modules@0.5.0: {} @@ -75255,6 +75274,37 @@ snapshots: - esbuild - uglify-js + webpack@5.88.2(@swc/core@1.3.107): + dependencies: + '@types/eslint-scope': 3.7.4 + '@types/estree': 1.0.5 + '@webassemblyjs/ast': 1.11.5 + '@webassemblyjs/wasm-edit': 1.11.5 + '@webassemblyjs/wasm-parser': 1.11.5 + acorn: 8.11.3 + acorn-import-assertions: 1.9.0(acorn@8.11.3) + browserslist: 4.23.0 + chrome-trace-event: 1.0.3 + enhanced-resolve: 5.15.0 + es-module-lexer: 1.2.1 + eslint-scope: 5.1.1 + events: 3.3.0 + glob-to-regexp: 0.4.1 + graceful-fs: 4.2.11 + json-parse-even-better-errors: 2.3.1 + loader-runner: 4.3.0 + mime-types: 2.1.35 + neo-async: 2.6.2 + schema-utils: 3.3.0 + tapable: 2.2.1 + terser-webpack-plugin: 5.3.9(@swc/core@1.3.107)(webpack@5.88.2(@swc/core@1.3.107)) + watchpack: 2.4.0 + webpack-sources: 3.2.3 + transitivePeerDependencies: + - '@swc/core' + - esbuild + - uglify-js + webpack@5.88.2(@swc/core@1.3.107)(esbuild@0.18.17): dependencies: '@types/eslint-scope': 3.7.4 @@ -75278,7 +75328,7 @@ snapshots: neo-async: 2.6.2 schema-utils: 3.3.0 tapable: 2.2.1 - terser-webpack-plugin: 5.3.9(@swc/core@1.3.107)(esbuild@0.18.17)(webpack@5.88.2(@swc/core@1.3.107)(esbuild@0.18.17)) + terser-webpack-plugin: 5.3.9(@swc/core@1.3.107)(esbuild@0.18.17)(webpack@5.88.2(@swc/core@1.3.107)) watchpack: 2.4.0 webpack-sources: 3.2.3 transitivePeerDependencies: From a9ae614e747b20fa7531d34226dbc2b9bdcca31e Mon Sep 17 00:00:00 2001 From: Joel Anton Date: Wed, 5 Jun 2024 14:15:51 +0200 Subject: [PATCH 02/14] feat: Port minimalist table from design-system --- .../src/components/table/Table.stories.tsx | 60 ++++++++++++ .../src/components/table/Table.styles.ts | 69 ++++++++++++++ libs/novui/src/components/table/Table.tsx | 93 +++++++++++++++++++ libs/novui/src/components/table/index.ts | 2 + .../novui/src/tokens/semanticColors.tokens.ts | 26 ++++++ 5 files changed, 250 insertions(+) create mode 100644 libs/novui/src/components/table/Table.stories.tsx create mode 100644 libs/novui/src/components/table/Table.styles.ts create mode 100644 libs/novui/src/components/table/Table.tsx create mode 100644 libs/novui/src/components/table/index.ts diff --git a/libs/novui/src/components/table/Table.stories.tsx b/libs/novui/src/components/table/Table.stories.tsx new file mode 100644 index 00000000000..1d75f845839 --- /dev/null +++ b/libs/novui/src/components/table/Table.stories.tsx @@ -0,0 +1,60 @@ +import React, { useState } from 'react'; +import { StoryFn, Meta } from '@storybook/react'; +import { Badge, Switch } from '@mantine/core'; + +import { Table } from './Table'; +import { ColumnDef } from '@tanstack/react-table'; + +export default { + title: 'Components/Table', + component: Table, + argTypes: { + data: { + control: false, + }, + columns: { + control: false, + }, + }, +} as Meta; + +const SwitchCell = (props) => { + const [status, setStatus] = useState(props.status); + const switchHandler = () => { + setStatus((prev) => (prev === 'Enabled' ? 'Disabled' : 'Enabled')); + }; + + return ; +}; + +const BadgeCell = (props) => { + return ( + + {props.getValue()} + + ); +}; + +interface IExampleData { + name: string; + category: string; + creationDate: string; + status: string; +} + +const columns: ColumnDef[] = [ + { accessorKey: 'name', header: 'Name' }, + { accessorKey: 'category', header: 'Category', cell: BadgeCell }, + { accessorKey: 'creationDate', header: 'Date Created' }, + { accessorKey: 'status', header: 'Status', cell: SwitchCell }, +]; + +const data: IExampleData[] = [ + { name: 'Great', category: 'Fun', status: 'Disabled', creationDate: '01/01/2021 16:36' }, + { name: 'Whats up?', category: 'Done', status: 'Enabled', creationDate: '01/01/2021 16:36' }, +]; + +const Template: StoryFn = ({ ...args }) => ; + +export const PrimaryUse = Template.bind({}); +PrimaryUse.args = {}; diff --git a/libs/novui/src/components/table/Table.styles.ts b/libs/novui/src/components/table/Table.styles.ts new file mode 100644 index 00000000000..80490a245bb --- /dev/null +++ b/libs/novui/src/components/table/Table.styles.ts @@ -0,0 +1,69 @@ +import { type TableStylesNames } from '@mantine/core'; +import { css } from '../../../styled-system/css'; + +const tableStyles: Partial> = { + tr: css({ + '& td': { + textOverflow: 'ellipsis', + }, + }), + table: css({ + borderCollapse: 'collapse', + borderSpacingX: '125', + textStyle: 'text.main', + '& tr td:first-of-type': { + pl: '200', + pr: '200', + }, + '& tr th:first-of-type': { + pl: '200', + pr: '200', + }, + '& tr td:last-child': { + pr: '200', + }, + '& tr th:last-child': { + pr: '200', + }, + '& thead tr': { + borderBottom: 'solid', + borderColor: 'table.header.border', + }, + '& thead tr th': { + fontWeight: 'regular', + // height: '17px', + textAlign: 'left', + color: 'typography.text.tertiary', + borderBottom: 'none', + borderSpacing: '0', + pb: '100', + }, + '& tbody tr td': { + // TODO: replace with token value + maxWidth: '[100px]', + // TODO: replace with token value + height: '[80px]', + + color: 'typography.text.main', + borderBottom: 'solid', + borderColor: 'table.row.border', + }, + '& tbody tr[data-disabled="true"]:hover': { + cursor: 'default', + }, + '& tbody tr[data-disabled="false"]:hover': { + cursor: 'pointer', + }, + '& tbody tr:last-of-type td': { + borderBottom: 'solid', + borderColor: 'table.bottom.border', + }, + _hover: { + '& tbody tr:hover': { + bg: 'table.row.surface.hover', + }, + }, + }), +}; + +export default tableStyles; diff --git a/libs/novui/src/components/table/Table.tsx b/libs/novui/src/components/table/Table.tsx new file mode 100644 index 00000000000..01e7816bbae --- /dev/null +++ b/libs/novui/src/components/table/Table.tsx @@ -0,0 +1,93 @@ +import { Table as ExternalTable } from '@mantine/core'; +import { flexRender, getCoreRowModel, Row, useReactTable } from '@tanstack/react-table'; +import React, { useMemo } from 'react'; +import { CoreProps } from 'src/types'; + +import classes from './Table.styles'; + +export type IRow = Row; + +export interface ITableProps extends CoreProps { + columns?: any[]; + data?: T[]; + isLoading?: boolean; + pagination?: any; + noDataPlaceholder?: React.ReactNode; + loadingItems?: number; + hasMore?: boolean; + onRowClick?: (row: Row) => void; + onRowSelect?: (row: Row) => void; +} + +/** + * Table component + * + */ +export function Table({ + columns: userColumns, + data: userData, + isLoading = false, + noDataPlaceholder, + loadingItems = 10, + onRowClick, + onRowSelect, + ...props +}: ITableProps) { + const columns = useMemo(() => userColumns?.map((col) => ({ ...col })), [userColumns]); + const data = useMemo(() => (userData || [])?.map((row) => ({ ...row })), [userData]); + const fakeData = useMemo(() => Array.from({ length: loadingItems }).map((_, index) => ({ index })), [loadingItems]); + + const table = useReactTable({ + columns, + data: isLoading ? (fakeData as T[]) : data, + getCoreRowModel: getCoreRowModel(), + // FIXME: remove this + debugTable: true, + }); + + return ( + + + {table.getHeaderGroups().map((headerGroup, i) => { + return ( + + {headerGroup.headers.map((header) => { + return ( + + ); + })} + + ); + })} + + + {table.getRowModel().rows.map((row) => { + return ( + { + e.stopPropagation(); + if (!isLoading && onRowClick) { + onRowClick(row); + } + }} + {...row} + className={classes.tr} + data-disabled={isLoading || !onRowClick} + > + {row.getVisibleCells().map((cell) => { + return ( + + ); + })} + + ); + })} + + + ); +} diff --git a/libs/novui/src/components/table/index.ts b/libs/novui/src/components/table/index.ts new file mode 100644 index 00000000000..661a5a1cd7e --- /dev/null +++ b/libs/novui/src/components/table/index.ts @@ -0,0 +1,2 @@ +export { Table } from './Table'; +export type { IRow, ITableProps } from './Table'; diff --git a/libs/novui/src/tokens/semanticColors.tokens.ts b/libs/novui/src/tokens/semanticColors.tokens.ts index 020ff289611..15457dffa8f 100644 --- a/libs/novui/src/tokens/semanticColors.tokens.ts +++ b/libs/novui/src/tokens/semanticColors.tokens.ts @@ -59,6 +59,32 @@ export const LEGACY_COLOR_SEMANTIC_TOKENS = defineSemanticTokens.colors({ }, }, }, + table: { + header: { + border: { + value: { base: '{colors.legacy.B98}', _dark: '{colors.legacy.B30}' }, + type: 'color', + }, + }, + row: { + border: { + value: { base: '{colors.legacy.B98}', _dark: '{colors.legacy.B20}' }, + type: 'color', + }, + surface: { + hover: { + value: { base: '{colors.legacy.B98}', _dark: '{colors.legacy.B20}' }, + type: 'color', + }, + }, + }, + bottom: { + border: { + value: { base: '{colors.legacy.B98}', _dark: '{colors.legacy.B30}' }, + type: 'color', + }, + }, + }, icon: { main: { value: { base: '{colors.legacy.B60}', _dark: '{colors.legacy.B60}' }, From 1275c7b9bbad777f1d73591c374d0ade245ebbc7 Mon Sep 17 00:00:00 2001 From: Joel Anton Date: Wed, 5 Jun 2024 14:37:50 +0200 Subject: [PATCH 03/14] feat: Add placeholder --- .../src/studio/components/workflows/WorkflowsTable.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 apps/web/src/studio/components/workflows/WorkflowsTable.tsx diff --git a/apps/web/src/studio/components/workflows/WorkflowsTable.tsx b/apps/web/src/studio/components/workflows/WorkflowsTable.tsx new file mode 100644 index 00000000000..e5cd688cf72 --- /dev/null +++ b/apps/web/src/studio/components/workflows/WorkflowsTable.tsx @@ -0,0 +1,9 @@ +import { FC } from 'react'; + +interface IWorkflowsTableProps { + temp?: string; +} + +export const WorkflowsTable: FC = (props) => { + return
; +}; From d40931eb775b747e7bdc3e96655f3c08ba332d37 Mon Sep 17 00:00:00 2001 From: Joel Anton Date: Wed, 5 Jun 2024 20:33:22 +0200 Subject: [PATCH 04/14] feat: Novui work on table --- libs/novui/src/components/index.ts | 3 ++- libs/novui/src/components/table/Table.tsx | 18 +++++++++++++++-- libs/novui/src/components/table/index.ts | 3 +-- .../novui/src/tokens/semanticColors.tokens.ts | 20 +++++++++++++++++++ 4 files changed, 39 insertions(+), 5 deletions(-) diff --git a/libs/novui/src/components/index.ts b/libs/novui/src/components/index.ts index 8ececca7cce..c67e1b4c37b 100644 --- a/libs/novui/src/components/index.ts +++ b/libs/novui/src/components/index.ts @@ -1,2 +1,3 @@ -export * from './Test'; export * from './NovuiProvider'; +export * from './table'; +export * from './Test'; diff --git a/libs/novui/src/components/table/Table.tsx b/libs/novui/src/components/table/Table.tsx index 01e7816bbae..6e248581cc2 100644 --- a/libs/novui/src/components/table/Table.tsx +++ b/libs/novui/src/components/table/Table.tsx @@ -1,12 +1,26 @@ import { Table as ExternalTable } from '@mantine/core'; -import { flexRender, getCoreRowModel, Row, useReactTable } from '@tanstack/react-table'; -import React, { useMemo } from 'react'; +import { + CellContext, + flexRender, + getCoreRowModel, + Row, + useReactTable, + createColumnHelper as _createColumnHelper, + ColumnDefTemplate, +} from '@tanstack/react-table'; +import React, { ComponentType, useMemo } from 'react'; import { CoreProps } from 'src/types'; import classes from './Table.styles'; export type IRow = Row; +/** Component used to render the contents of a cell */ +export type CellRendererComponent = ColumnDefTemplate>; + +/** Helper for type-safe column definitions */ +export const createColumnHelper = _createColumnHelper; + export interface ITableProps extends CoreProps { columns?: any[]; data?: T[]; diff --git a/libs/novui/src/components/table/index.ts b/libs/novui/src/components/table/index.ts index 661a5a1cd7e..75193adc339 100644 --- a/libs/novui/src/components/table/index.ts +++ b/libs/novui/src/components/table/index.ts @@ -1,2 +1 @@ -export { Table } from './Table'; -export type { IRow, ITableProps } from './Table'; +export * from './Table'; diff --git a/libs/novui/src/tokens/semanticColors.tokens.ts b/libs/novui/src/tokens/semanticColors.tokens.ts index 15457dffa8f..e8639d45a07 100644 --- a/libs/novui/src/tokens/semanticColors.tokens.ts +++ b/libs/novui/src/tokens/semanticColors.tokens.ts @@ -85,11 +85,31 @@ export const LEGACY_COLOR_SEMANTIC_TOKENS = defineSemanticTokens.colors({ }, }, }, + badge: { + border: { + value: { base: '{colors.legacy.B80}', _dark: '{colors.legacy.B30}' }, + type: 'color', + }, + }, icon: { main: { value: { base: '{colors.legacy.B60}', _dark: '{colors.legacy.B60}' }, type: 'color', }, + secondary: { + value: { base: '{colors.legacy.B70}', _dark: '{colors.legacy.B40}' }, + type: 'color', + }, + }, + status: { + active: { + value: { base: '{colors.legacy.success}', _dark: '{colors.legacy.success}' }, + type: 'color', + }, + inactive: { + value: { base: '{colors.legacy.B40}', _dark: '{colors.legacy.B40}' }, + type: 'color', + }, }, }); From 6c8a087ce9e5bf9207e38709ab6d0ec1dbd575bd Mon Sep 17 00:00:00 2001 From: Joel Anton Date: Wed, 5 Jun 2024 20:39:07 +0200 Subject: [PATCH 05/14] feat: Temporary workflows list page --- apps/web/src/AppRoutes.tsx | 3 +- .../workflows/WorkflowsListPage.tsx | 5 + .../components/workflows/WorkflowsTable.tsx | 9 -- .../src/studio/components/workflows/index.ts | 1 + .../workflows/table/WorkflowsTable.tsx | 102 ++++++++++++++++++ .../workflows/table/WorkflowsTable.types.ts | 3 + .../table/WorkflowsTableCellRenderers.tsx | 64 +++++++++++ .../components/workflows/table/index.ts | 1 + 8 files changed, 178 insertions(+), 10 deletions(-) create mode 100644 apps/web/src/studio/components/workflows/WorkflowsListPage.tsx delete mode 100644 apps/web/src/studio/components/workflows/WorkflowsTable.tsx create mode 100644 apps/web/src/studio/components/workflows/index.ts create mode 100644 apps/web/src/studio/components/workflows/table/WorkflowsTable.tsx create mode 100644 apps/web/src/studio/components/workflows/table/WorkflowsTable.types.ts create mode 100644 apps/web/src/studio/components/workflows/table/WorkflowsTableCellRenderers.tsx create mode 100644 apps/web/src/studio/components/workflows/table/index.ts diff --git a/apps/web/src/AppRoutes.tsx b/apps/web/src/AppRoutes.tsx index df54cd9d4c9..b6d678859f2 100644 --- a/apps/web/src/AppRoutes.tsx +++ b/apps/web/src/AppRoutes.tsx @@ -48,6 +48,7 @@ import { TenantsPage } from './pages/tenants/TenantsPage'; import { UpdateTenantPage } from './pages/tenants/UpdateTenantPage'; import { TranslationRoutes } from './pages/TranslationPages'; import { useSettingsRoutes } from './SettingsRoutes'; +import { WorkflowsListPage } from './studio/components/workflows/WorkflowsListPage'; export const AppRoutes = () => { const isImprovedOnboardingEnabled = useFeatureFlag(FeatureFlagsKeysEnum.IS_IMPROVED_ONBOARDING_ENABLED); @@ -140,7 +141,7 @@ export const AppRoutes = () => { )} } /> - } /> + } /> } /> diff --git a/apps/web/src/studio/components/workflows/WorkflowsListPage.tsx b/apps/web/src/studio/components/workflows/WorkflowsListPage.tsx new file mode 100644 index 00000000000..193c3dd0c57 --- /dev/null +++ b/apps/web/src/studio/components/workflows/WorkflowsListPage.tsx @@ -0,0 +1,5 @@ +import { WorkflowsTable } from './table'; + +export const WorkflowsListPage = () => { + return ; +}; diff --git a/apps/web/src/studio/components/workflows/WorkflowsTable.tsx b/apps/web/src/studio/components/workflows/WorkflowsTable.tsx deleted file mode 100644 index e5cd688cf72..00000000000 --- a/apps/web/src/studio/components/workflows/WorkflowsTable.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { FC } from 'react'; - -interface IWorkflowsTableProps { - temp?: string; -} - -export const WorkflowsTable: FC = (props) => { - return
; -}; diff --git a/apps/web/src/studio/components/workflows/index.ts b/apps/web/src/studio/components/workflows/index.ts new file mode 100644 index 00000000000..33e544f3d7e --- /dev/null +++ b/apps/web/src/studio/components/workflows/index.ts @@ -0,0 +1 @@ +export * from './WorkflowsListPage'; diff --git a/apps/web/src/studio/components/workflows/table/WorkflowsTable.tsx b/apps/web/src/studio/components/workflows/table/WorkflowsTable.tsx new file mode 100644 index 00000000000..302514747eb --- /dev/null +++ b/apps/web/src/studio/components/workflows/table/WorkflowsTable.tsx @@ -0,0 +1,102 @@ +import { createColumnHelper, Table } from '@novu/novui'; +import format from 'date-fns/format'; +import { FC } from 'react'; +import { WorkflowTableRow } from './WorkflowsTable.types'; +import { GroupCell, NameCell, StatusCell } from './WorkflowsTableCellRenderers'; + +const TEST_FLOW = { + _id: 'adaewr', + name: 'test naming', + active: false, + type: 'REGULAR', + draft: true, + critical: false, + isBlueprint: false, + _notificationGroupId: 'dsasdfasdf', + tags: [], + triggers: [ + { + type: 'event', + identifier: 'test-naming', + variables: [], + reservedVariables: [], + subscriberVariables: [], + _id: 'sdfsdf', + }, + ], + steps: [], + preferenceSettings: { + email: true, + sms: true, + in_app: true, + chat: true, + push: true, + }, + _environmentId: 'sdfsdf', + _organizationId: 'sdf', + _creatorId: 'sdfsdfsdf', + deleted: false, + createdAt: '2024-06-04T19:11:11.600Z', + updatedAt: '2024-06-05T17:55:39.022Z', + __v: 0, + notificationGroup: { + _id: 'sdfsdf', + name: 'General', + _organizationId: 'sdfsdf', + _environmentId: 'sdfdfsdfsf', + createdAt: '2024-05-17T22:26:08.177Z', + updatedAt: '2024-05-17T22:26:08.177Z', + __v: 0, + }, + workflowIntegrationStatus: { + hasActiveIntegrations: true, + channels: { + in_app: { + hasActiveIntegrations: false, + }, + email: { + hasActiveIntegrations: true, + hasPrimaryIntegrations: true, + }, + sms: { + hasActiveIntegrations: true, + hasPrimaryIntegrations: true, + }, + chat: { + hasActiveIntegrations: false, + }, + push: { + hasActiveIntegrations: false, + }, + }, + }, +}; + +interface IWorkflowsTableProps { + temp?: string; +} + +const columnHelper = createColumnHelper(); + +const WORKFLOW_COLUMNS = [ + columnHelper.accessor('name', { + header: 'Name & Trigger ID', + cell: NameCell, + }), + columnHelper.accessor('notificationGroup.name', { + header: 'Group', + cell: GroupCell, + }), + columnHelper.accessor('createdAt', { + header: 'Created at', + cell: ({ getValue }) => format(new Date(getValue() ?? ''), 'dd/MM/yyyy HH:mm'), + }), + columnHelper.accessor('active', { + header: 'Status', + cell: StatusCell, + }), +]; + +export const WorkflowsTable: FC = (props) => { + return columns={WORKFLOW_COLUMNS} data={[TEST_FLOW]} />; +}; diff --git a/apps/web/src/studio/components/workflows/table/WorkflowsTable.types.ts b/apps/web/src/studio/components/workflows/table/WorkflowsTable.types.ts new file mode 100644 index 00000000000..518552f50e4 --- /dev/null +++ b/apps/web/src/studio/components/workflows/table/WorkflowsTable.types.ts @@ -0,0 +1,3 @@ +import { INotificationTemplateExtended } from '../../../../hooks/useTemplates'; + +export type WorkflowTableRow = INotificationTemplateExtended; diff --git a/apps/web/src/studio/components/workflows/table/WorkflowsTableCellRenderers.tsx b/apps/web/src/studio/components/workflows/table/WorkflowsTableCellRenderers.tsx new file mode 100644 index 00000000000..ff0e0e3cedc --- /dev/null +++ b/apps/web/src/studio/components/workflows/table/WorkflowsTableCellRenderers.tsx @@ -0,0 +1,64 @@ +import { CellRendererComponent } from '@novu/novui'; +import { css } from '@novu/novui/css'; +import { IconBolt, IconCable, IconFlashOff } from '@novu/novui/icons'; +import { Center, Flex, HStack, styled } from '@novu/novui/jsx'; +import { text } from '@novu/novui/recipes'; +import { ColorToken } from '@novu/novui/tokens'; +import { WorkflowTableRow } from './WorkflowsTable.types'; + +export const GroupCell: CellRendererComponent = (props) => { + return ( +
+ {props.getValue()} +
+ ); +}; + +const Text = styled('p', text); + +export const NameCell: CellRendererComponent = ({ getValue, row: { original } }) => { + return ( + + { + + } + + {getValue()} + {original.triggers ? original.triggers[0].identifier : 'Unknown'} + + + ); +}; + +export const StatusCell: CellRendererComponent = ({ getValue }) => { + const isActive = getValue(); + getValue(); + const color: ColorToken = isActive ? 'status.active' : 'status.inactive'; + + return ( + + {isActive ? ( + + ) : ( + + )} + + {isActive ? 'Active' : 'Inactive'} + + + ); +}; diff --git a/apps/web/src/studio/components/workflows/table/index.ts b/apps/web/src/studio/components/workflows/table/index.ts new file mode 100644 index 00000000000..0d82108883f --- /dev/null +++ b/apps/web/src/studio/components/workflows/table/index.ts @@ -0,0 +1 @@ +export * from './WorkflowsTable'; From 35055a40e497ccfe32f03861bb6c1d18a30ee6d0 Mon Sep 17 00:00:00 2001 From: Joel Anton Date: Thu, 6 Jun 2024 09:46:55 +0200 Subject: [PATCH 06/14] feat: Semantic radius tokens --- .../novui/src/tokens/semanticRadius.tokens.ts | 25 +++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 libs/novui/src/tokens/semanticRadius.tokens.ts diff --git a/libs/novui/src/tokens/semanticRadius.tokens.ts b/libs/novui/src/tokens/semanticRadius.tokens.ts new file mode 100644 index 00000000000..cac7821f5d6 --- /dev/null +++ b/libs/novui/src/tokens/semanticRadius.tokens.ts @@ -0,0 +1,25 @@ +import { defineSemanticTokens } from '@pandacss/dev'; + +/** + * Represents the size of an element. + * + * Used for properties like width and height. + */ +export const SEMANTIC_RADIUS_TOKENS = defineSemanticTokens.radii({ + xs: { + value: '{radii.50}', + type: 'radius', + }, + s: { + value: '{radii.75}', + type: 'radius', + }, + m: { + value: '{radii.100}', + type: 'radius', + }, + l: { + value: '{radii.150}', + type: 'radius', + }, +}); From b233bd692a4501b2f7829363fb45c97d7a75a6b6 Mon Sep 17 00:00:00 2001 From: Joel Anton Date: Thu, 6 Jun 2024 09:47:25 +0200 Subject: [PATCH 07/14] feat: Dimension tokens --- libs/novui/src/tokens/semanticSizes.tokens.ts | 13 +++++++++++++ libs/novui/src/tokens/semanticSpacing.tokens.ts | 12 ++++++++++++ libs/novui/src/tokens/sizes.tokens.ts | 16 ++++++++++++++++ libs/novui/src/tokens/spacing.tokens.ts | 16 ++++++++++++++++ 4 files changed, 57 insertions(+) diff --git a/libs/novui/src/tokens/semanticSizes.tokens.ts b/libs/novui/src/tokens/semanticSizes.tokens.ts index caebc792851..76209e68f48 100644 --- a/libs/novui/src/tokens/semanticSizes.tokens.ts +++ b/libs/novui/src/tokens/semanticSizes.tokens.ts @@ -29,4 +29,17 @@ export const SEMANTIC_SIZES_TOKENS = defineSemanticTokens.sizes({ type: 'sizes', }, }, + // From Figma + s: { + value: '{sizes.200}', + type: 'sizes', + }, + m: { + value: '{sizes.250}', + type: 'sizes', + }, + l: { + value: '{sizes.300}', + type: 'sizes', + }, }); diff --git a/libs/novui/src/tokens/semanticSpacing.tokens.ts b/libs/novui/src/tokens/semanticSpacing.tokens.ts index e7a842eda2b..d5caf19e038 100644 --- a/libs/novui/src/tokens/semanticSpacing.tokens.ts +++ b/libs/novui/src/tokens/semanticSpacing.tokens.ts @@ -15,4 +15,16 @@ export const SEMANTIC_SPACING_TOKENS = defineSemanticTokens.spacing({ }, }, }, + page: { + padding: { + value: `{spacing.150}`, + description: 'The space around page content', + type: 'spacing', + }, + majorElements: { + value: `{spacing.150}`, + description: 'The spacing between major elements in a page', + type: 'spacing', + }, + }, }); diff --git a/libs/novui/src/tokens/sizes.tokens.ts b/libs/novui/src/tokens/sizes.tokens.ts index 0f6100e5fa9..5e61d5f5670 100644 --- a/libs/novui/src/tokens/sizes.tokens.ts +++ b/libs/novui/src/tokens/sizes.tokens.ts @@ -50,8 +50,24 @@ export const SIZES_TOKENS = defineTokens.sizes({ value: '2.5rem', type: 'sizes', }, + '275': { + value: '2.75rem', + type: 'sizes', + }, '300': { value: '3rem', type: 'sizes', }, + '325': { + value: '3.25rem', + type: 'sizes', + }, + '350': { + value: '3.5rem', + type: 'sizes', + }, + '375': { + value: '3.75rem', + type: 'sizes', + }, }); diff --git a/libs/novui/src/tokens/spacing.tokens.ts b/libs/novui/src/tokens/spacing.tokens.ts index 7955a54cfee..c826e4f89d6 100644 --- a/libs/novui/src/tokens/spacing.tokens.ts +++ b/libs/novui/src/tokens/spacing.tokens.ts @@ -50,8 +50,24 @@ export const SPACING_TOKENS = defineTokens.spacing({ value: '2.5rem', type: 'spacing', }, + '275': { + value: '2.75rem', + type: 'spacing', + }, '300': { value: '3rem', type: 'spacing', }, + '325': { + value: '3.25rem', + type: 'spacing', + }, + '350': { + value: '3.5rem', + type: 'spacing', + }, + '375': { + value: '3.75rem', + type: 'spacing', + }, }); From 0abcb85ca5e5122a6778f491a55c60545a8dc9dd Mon Sep 17 00:00:00 2001 From: Joel Anton Date: Thu, 6 Jun 2024 10:32:44 +0200 Subject: [PATCH 08/14] fix: Fix tokens --- libs/novui/panda.config.ts | 2 + libs/novui/src/panda-preset.ts | 2 + .../src/tokens/semanticSpacing.tokens.ts | 286 +++++++++++++++++- 3 files changed, 280 insertions(+), 10 deletions(-) diff --git a/libs/novui/panda.config.ts b/libs/novui/panda.config.ts index 7e88585b692..e13f6b70977 100644 --- a/libs/novui/panda.config.ts +++ b/libs/novui/panda.config.ts @@ -40,4 +40,6 @@ export default defineConfig({ // Enables JSX util generation! jsxFramework: 'react', + + validation: 'error', }); diff --git a/libs/novui/src/panda-preset.ts b/libs/novui/src/panda-preset.ts index 1bd25f40b7b..b3469d4a44c 100644 --- a/libs/novui/src/panda-preset.ts +++ b/libs/novui/src/panda-preset.ts @@ -21,6 +21,7 @@ import { import { Z_INDEX_TOKENS } from './tokens/zIndex.tokens'; import { SEMANTIC_SIZES_TOKENS } from './tokens/semanticSizes.tokens'; import { SEMANTIC_SPACING_TOKENS } from './tokens/semanticSpacing.tokens'; +import { SEMANTIC_RADIUS_TOKENS } from './tokens/semanticRadius.tokens'; /** * This defines all Novu tokens into a single preset to be used in our various apps (and design-system). @@ -63,6 +64,7 @@ export const novuPandaPreset = definePreset({ ...COLOR_SEMANTIC_TOKENS, ...LEGACY_COLOR_SEMANTIC_TOKENS, }, + radii: SEMANTIC_RADIUS_TOKENS, shadows: LEGACY_SHADOW_TOKENS, gradients: { ...GRADIENT_TOKENS, diff --git a/libs/novui/src/tokens/semanticSpacing.tokens.ts b/libs/novui/src/tokens/semanticSpacing.tokens.ts index d5caf19e038..e0365629960 100644 --- a/libs/novui/src/tokens/semanticSpacing.tokens.ts +++ b/libs/novui/src/tokens/semanticSpacing.tokens.ts @@ -15,16 +15,282 @@ export const SEMANTIC_SPACING_TOKENS = defineSemanticTokens.spacing({ }, }, }, - page: { - padding: { - value: `{spacing.150}`, - description: 'The space around page content', - type: 'spacing', - }, - majorElements: { - value: `{spacing.150}`, - description: 'The spacing between major elements in a page', - type: 'spacing', + paddings: { + page: { + horizontal: { + type: 'spacing', + value: '{spacing.150}', + }, + vertical: { + type: 'spacing', + value: '{spacing.150}', + }, + }, + panel: { + horizontal: { + type: 'spacing', + value: '{spacing.150}', + }, + vertical: { + type: 'spacing', + value: '{spacing.150}', + }, + }, + popover: { + horizontal: { + type: 'spacing', + value: '{spacing.150}', + }, + vertical: { + type: 'spacing', + value: '{spacing.150}', + }, + }, + node: { + horizontal: { + type: 'spacing', + value: '{spacing.150}', + }, + vertical: { + type: 'spacing', + value: '{spacing.150}', + }, + }, + nav: { + menu: { + horizontal: { + type: 'spacing', + value: '{spacing.100}', + }, + vertical: { + type: 'spacing', + value: '{spacing.100}', + }, + }, + header: { + horizontal: { + type: 'spacing', + value: '{spacing.50}', + }, + vertical: { + type: 'spacing', + value: '{spacing.50}', + }, + }, + futer: { + top: { + type: 'spacing', + value: '{spacing.50}', + }, + bottom: { + type: 'spacing', + value: '{spacing.100}', + }, + }, + }, + WF: { + WFtop: { + type: 'spacing', + value: '{spacing.375}', + }, + WFheaderHorizontal: { + type: 'spacing', + value: '{spacing.100}', + }, + WFhorizontal: { + type: 'spacing', + value: '{spacing.50}', + }, + MobPreviewTop: { + type: 'spacing', + value: '{spacing.250}', + }, + }, + components: { + code: { + horizontal: { + type: 'spacing', + value: '{spacing.100}', + }, + vertical: { + type: 'spacing', + value: '{spacing.25}', + }, + }, + button: { + horizontal: { + l: { + type: 'spacing', + value: '{spacing.125}', + }, + m: { + type: 'spacing', + value: '{spacing.100}', + }, + s: { + type: 'spacing', + value: '{spacing.75}', + }, + xs: { + type: 'spacing', + value: '{spacing.50}', + }, + }, + }, + info: { + spotlight: { + horizontal: { + type: 'spacing', + value: '{spacing.75}', + }, + vertical: { + type: 'spacing', + value: '{spacing.75}', + }, + }, + hint: { + horizontal: { + type: 'spacing', + value: '{spacing.100}', + }, + vertical: { + type: 'spacing', + value: '{spacing.100}', + }, + }, + }, + txtInput: { + horizontal: { + type: 'spacing', + value: '{spacing.75}', + }, + }, + }, + }, + margins: { + icons: { + 'Icon40-txt': { + type: 'spacing', + value: '{spacing.50}', + }, + 'Icon32-txt': { + type: 'spacing', + value: '{spacing.50}', + }, + 'Icon20-txt': { + type: 'spacing', + value: '{spacing.50}', + }, + 'Icon16-txt': { + type: 'spacing', + value: '{spacing.25}', + }, + 'icon20-icon20': { + type: 'spacing', + value: '{spacing.50}', + }, + }, + buttons: { + 'XS-XS': { + type: 'spacing', + value: '{spacing.25}', + }, + WFchannels: { + type: 'spacing', + value: '{spacing.50}', + }, + 'XS-status': { + type: 'spacing', + value: '{spacing.100}', + }, + 'S-S': { + type: 'spacing', + value: '{spacing.100}', + }, + 'M-M': { + type: 'spacing', + value: '{spacing.125}', + }, + }, + layout: { + tabs: { + 'tab-tab': { + type: 'spacing', + value: '{spacing.150}', + }, + bottom: { + type: 'spacing', + value: '{spacing.150}', + }, + }, + text: { + 'title-body': { + type: 'spacing', + value: '{spacing.100}', + }, + 'sub-title-body': { + type: 'spacing', + value: '{spacing.50}', + }, + paragraph: { + type: 'spacing', + value: '{spacing.100}', + }, + }, + Input: { + titleBottom: { + type: 'spacing', + value: '{spacing.50}', + }, + 'input-input': { + type: 'spacing', + value: '{spacing.200}', + }, + }, + guideSteps: { + type: 'spacing', + value: '{spacing.200}', + }, + page: { + titleBottom: { + type: 'spacing', + value: '{spacing.150}', + }, + horizontal: { + type: 'spacing', + value: '{spacing.250}', + }, + vertical: { + type: 'spacing', + value: '{spacing.200}', + }, + section: { + titleBottom: { + type: 'spacing', + value: '{spacing.150}', + }, + }, + 'sub-section': { + titleBottom: { + type: 'spacing', + value: '{spacing.100}', + }, + }, + 'content-buttons': { + type: 'spacing', + value: '{spacing.150}', + }, + }, + }, + menu: { + 'item-item': { + type: 'spacing', + value: '{spacing.25}', + }, + 'sec-sec': { + type: 'spacing', + value: '{spacing.100}', + }, }, }, }); From 227f870eb90f9c8d963e7c6fc03e636f9df6baeb Mon Sep 17 00:00:00 2001 From: Joel Anton Date: Thu, 6 Jun 2024 11:10:52 +0200 Subject: [PATCH 09/14] feat: Table on list page --- .../workflows/WorkflowsListPage.tsx | 7 +++++- .../workflows/table/WorkflowsTable.tsx | 9 ++++++-- libs/novui/src/components/table/Table.tsx | 22 +++++++++---------- 3 files changed, 24 insertions(+), 14 deletions(-) diff --git a/apps/web/src/studio/components/workflows/WorkflowsListPage.tsx b/apps/web/src/studio/components/workflows/WorkflowsListPage.tsx index 193c3dd0c57..3ebe30701d4 100644 --- a/apps/web/src/studio/components/workflows/WorkflowsListPage.tsx +++ b/apps/web/src/studio/components/workflows/WorkflowsListPage.tsx @@ -1,5 +1,10 @@ +import { SettingsPageContainer } from '../../../pages/settings/SettingsPageContainer'; import { WorkflowsTable } from './table'; export const WorkflowsListPage = () => { - return ; + return ( + + + + ); }; diff --git a/apps/web/src/studio/components/workflows/table/WorkflowsTable.tsx b/apps/web/src/studio/components/workflows/table/WorkflowsTable.tsx index 302514747eb..5be16b02212 100644 --- a/apps/web/src/studio/components/workflows/table/WorkflowsTable.tsx +++ b/apps/web/src/studio/components/workflows/table/WorkflowsTable.tsx @@ -1,4 +1,5 @@ import { createColumnHelper, Table } from '@novu/novui'; +import { css } from '@novu/novui/css'; import format from 'date-fns/format'; import { FC } from 'react'; import { WorkflowTableRow } from './WorkflowsTable.types'; @@ -97,6 +98,10 @@ const WORKFLOW_COLUMNS = [ }), ]; -export const WorkflowsTable: FC = (props) => { - return columns={WORKFLOW_COLUMNS} data={[TEST_FLOW]} />; +export const WorkflowsTable: FC = () => { + return ( +
+ columns={WORKFLOW_COLUMNS} data={[TEST_FLOW]} className={css({ w: '100%' })} /> +
+ ); }; diff --git a/libs/novui/src/components/table/Table.tsx b/libs/novui/src/components/table/Table.tsx index 6e248581cc2..062bc8e81e9 100644 --- a/libs/novui/src/components/table/Table.tsx +++ b/libs/novui/src/components/table/Table.tsx @@ -8,12 +8,12 @@ import { createColumnHelper as _createColumnHelper, ColumnDefTemplate, } from '@tanstack/react-table'; -import React, { ComponentType, useMemo } from 'react'; -import { CoreProps } from 'src/types'; +import React, { useMemo } from 'react'; +import { CoreProps } from '../../types'; import classes from './Table.styles'; -export type IRow = Row; +export type IRow = Row; /** Component used to render the contents of a cell */ export type CellRendererComponent = ColumnDefTemplate>; @@ -21,23 +21,23 @@ export type CellRendererComponent = ColumnDefTemplate extends CoreProps { +export interface ITableProps extends CoreProps { columns?: any[]; - data?: T[]; + data?: TRow[]; isLoading?: boolean; pagination?: any; noDataPlaceholder?: React.ReactNode; loadingItems?: number; hasMore?: boolean; - onRowClick?: (row: Row) => void; - onRowSelect?: (row: Row) => void; + onRowClick?: (row: Row) => void; + onRowSelect?: (row: Row) => void; } /** * Table component * */ -export function Table({ +export function Table({ columns: userColumns, data: userData, isLoading = false, @@ -46,14 +46,14 @@ export function Table({ onRowClick, onRowSelect, ...props -}: ITableProps) { +}: ITableProps) { const columns = useMemo(() => userColumns?.map((col) => ({ ...col })), [userColumns]); const data = useMemo(() => (userData || [])?.map((row) => ({ ...row })), [userData]); const fakeData = useMemo(() => Array.from({ length: loadingItems }).map((_, index) => ({ index })), [loadingItems]); - const table = useReactTable({ + const table = useReactTable({ columns, - data: isLoading ? (fakeData as T[]) : data, + data: isLoading ? (fakeData as TRow[]) : data, getCoreRowModel: getCoreRowModel(), // FIXME: remove this debugTable: true, From e80b93affdea4686b771cf5b61cab60b568d634d Mon Sep 17 00:00:00 2001 From: Joel Anton Date: Thu, 6 Jun 2024 11:22:09 +0200 Subject: [PATCH 10/14] fix: Cspell & add comment --- .../src/studio/components/workflows/table/WorkflowsTable.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/apps/web/src/studio/components/workflows/table/WorkflowsTable.tsx b/apps/web/src/studio/components/workflows/table/WorkflowsTable.tsx index 5be16b02212..424254d4adb 100644 --- a/apps/web/src/studio/components/workflows/table/WorkflowsTable.tsx +++ b/apps/web/src/studio/components/workflows/table/WorkflowsTable.tsx @@ -1,3 +1,5 @@ +/* cspell:disable */ + import { createColumnHelper, Table } from '@novu/novui'; import { css } from '@novu/novui/css'; import format from 'date-fns/format'; @@ -5,6 +7,7 @@ import { FC } from 'react'; import { WorkflowTableRow } from './WorkflowsTable.types'; import { GroupCell, NameCell, StatusCell } from './WorkflowsTableCellRenderers'; +// TODO: remove this test data const TEST_FLOW = { _id: 'adaewr', name: 'test naming', From b625291a4f5e7ff8a7802520e3f235c230682105 Mon Sep 17 00:00:00 2001 From: Joel Anton Date: Thu, 6 Jun 2024 12:16:11 +0200 Subject: [PATCH 11/14] fix: Table styling --- .../studio/components/workflows/table/WorkflowsTable.tsx | 6 +++++- libs/novui/src/components/table/Table.styles.ts | 2 -- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/apps/web/src/studio/components/workflows/table/WorkflowsTable.tsx b/apps/web/src/studio/components/workflows/table/WorkflowsTable.tsx index 424254d4adb..08cf3ed86de 100644 --- a/apps/web/src/studio/components/workflows/table/WorkflowsTable.tsx +++ b/apps/web/src/studio/components/workflows/table/WorkflowsTable.tsx @@ -104,7 +104,11 @@ const WORKFLOW_COLUMNS = [ export const WorkflowsTable: FC = () => { return (
- columns={WORKFLOW_COLUMNS} data={[TEST_FLOW]} className={css({ w: '100%' })} /> + + columns={WORKFLOW_COLUMNS} + data={[TEST_FLOW, { ...TEST_FLOW, active: true }]} + className={css({ w: '100%' })} + />
); }; diff --git a/libs/novui/src/components/table/Table.styles.ts b/libs/novui/src/components/table/Table.styles.ts index 80490a245bb..30c043a228b 100644 --- a/libs/novui/src/components/table/Table.styles.ts +++ b/libs/novui/src/components/table/Table.styles.ts @@ -12,11 +12,9 @@ const tableStyles: Partial> = { borderSpacingX: '125', textStyle: 'text.main', '& tr td:first-of-type': { - pl: '200', pr: '200', }, '& tr th:first-of-type': { - pl: '200', pr: '200', }, '& tr td:last-child': { From 89220e2be1fcb5c27e122230dbf4e93df3513f08 Mon Sep 17 00:00:00 2001 From: Joel Anton Date: Thu, 6 Jun 2024 12:16:59 +0200 Subject: [PATCH 12/14] feat: Re-define layout primitives --- .../workflows/WorkflowsListPage.tsx | 6 +-- apps/web/src/studio/layout/PageContainer.tsx | 44 +++++++++++++++++++ apps/web/src/studio/layout/PageHeader.tsx | 20 +++++++++ apps/web/src/studio/layout/PageMeta.tsx | 13 ++++++ apps/web/src/studio/layout/index.ts | 1 + 5 files changed, 81 insertions(+), 3 deletions(-) create mode 100644 apps/web/src/studio/layout/PageContainer.tsx create mode 100644 apps/web/src/studio/layout/PageHeader.tsx create mode 100644 apps/web/src/studio/layout/PageMeta.tsx create mode 100644 apps/web/src/studio/layout/index.ts diff --git a/apps/web/src/studio/components/workflows/WorkflowsListPage.tsx b/apps/web/src/studio/components/workflows/WorkflowsListPage.tsx index 3ebe30701d4..ec3c94ce7dd 100644 --- a/apps/web/src/studio/components/workflows/WorkflowsListPage.tsx +++ b/apps/web/src/studio/components/workflows/WorkflowsListPage.tsx @@ -1,10 +1,10 @@ -import { SettingsPageContainer } from '../../../pages/settings/SettingsPageContainer'; +import { PageContainer } from '../../layout'; import { WorkflowsTable } from './table'; export const WorkflowsListPage = () => { return ( - + - + ); }; diff --git a/apps/web/src/studio/layout/PageContainer.tsx b/apps/web/src/studio/layout/PageContainer.tsx new file mode 100644 index 00000000000..898f86d396b --- /dev/null +++ b/apps/web/src/studio/layout/PageContainer.tsx @@ -0,0 +1,44 @@ +import { FC, PropsWithChildren, ReactNode } from 'react'; +import { css, cx } from '@novu/novui/css'; +import { PageHeader } from './PageHeader'; +import { PageMeta } from './PageMeta'; +import { Container } from '@novu/novui/jsx'; +import { CoreProps } from '@novu/novui'; + +export interface IPageContainerProps extends CoreProps { + // TODO: this should be LocalizedMessage, but PageContainer and PageHeader don't accept it + title: string; + header?: ReactNode; +} + +export const PageContainer: FC> = ({ title, children, header, className }) => { + return ( + + + + {!!header && ( +
+ {header} +
+ )} +
{children}
+ + ); +}; diff --git a/apps/web/src/studio/layout/PageHeader.tsx b/apps/web/src/studio/layout/PageHeader.tsx new file mode 100644 index 00000000000..70b5167b992 --- /dev/null +++ b/apps/web/src/studio/layout/PageHeader.tsx @@ -0,0 +1,20 @@ +import { CoreProps } from '@novu/novui'; +import { styled, Flex } from '@novu/novui/jsx'; +import { title as titleRecipe } from '@novu/novui/recipes'; +import { LocalizedMessage } from '@novu/shared-web'; + +const Title = styled('h1', titleRecipe); + +export interface IPageHeaderProps extends CoreProps { + actions?: JSX.Element; + title: LocalizedMessage; +} + +export const PageHeader: React.FC = ({ title, actions, className }) => { + return ( + + {title} + {actions &&
{actions}
} + + ); +}; diff --git a/apps/web/src/studio/layout/PageMeta.tsx b/apps/web/src/studio/layout/PageMeta.tsx new file mode 100644 index 00000000000..de79397d20f --- /dev/null +++ b/apps/web/src/studio/layout/PageMeta.tsx @@ -0,0 +1,13 @@ +import { Helmet } from 'react-helmet-async'; + +interface IPageMetaProps { + title?: string; +} + +export const PageMeta: React.FC = ({ title }) => { + return ( + + {title ? `${title} | ` : ``}Novu + + ); +}; diff --git a/apps/web/src/studio/layout/index.ts b/apps/web/src/studio/layout/index.ts new file mode 100644 index 00000000000..7a798df3f37 --- /dev/null +++ b/apps/web/src/studio/layout/index.ts @@ -0,0 +1 @@ +export * from './PageContainer'; From 05b41ed74ce44360d43c40ef5a636467a82ba5c1 Mon Sep 17 00:00:00 2001 From: Joel Anton Date: Thu, 6 Jun 2024 12:19:56 +0200 Subject: [PATCH 13/14] fix: Clean-up fixmes --- libs/novui/src/components/table/Table.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/libs/novui/src/components/table/Table.tsx b/libs/novui/src/components/table/Table.tsx index 062bc8e81e9..25045e78245 100644 --- a/libs/novui/src/components/table/Table.tsx +++ b/libs/novui/src/components/table/Table.tsx @@ -55,8 +55,6 @@ export function Table({ columns, data: isLoading ? (fakeData as TRow[]) : data, getCoreRowModel: getCoreRowModel(), - // FIXME: remove this - debugTable: true, }); return ( From ac673aac42f6d787be2a9f6d2317958da6156f7d Mon Sep 17 00:00:00 2001 From: Joel Anton Date: Thu, 6 Jun 2024 12:33:15 +0200 Subject: [PATCH 14/14] fix: Typo in footer --- libs/novui/src/tokens/semanticSpacing.tokens.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/novui/src/tokens/semanticSpacing.tokens.ts b/libs/novui/src/tokens/semanticSpacing.tokens.ts index e0365629960..93e15f06c56 100644 --- a/libs/novui/src/tokens/semanticSpacing.tokens.ts +++ b/libs/novui/src/tokens/semanticSpacing.tokens.ts @@ -77,7 +77,7 @@ export const SEMANTIC_SPACING_TOKENS = defineSemanticTokens.spacing({ value: '{spacing.50}', }, }, - futer: { + footer: { top: { type: 'spacing', value: '{spacing.50}',
+ {flexRender(header.column.columnDef.header, header.getContext())} +
+ {flexRender(cell.column.columnDef.cell, cell.getContext())} +