Skip to content

Commit

Permalink
add border to Discovery Detailsg
Browse files Browse the repository at this point in the history
  • Loading branch information
craigrbarnes committed Aug 26, 2024
1 parent 81ddb82 commit 34dcbfb
Show file tree
Hide file tree
Showing 13 changed files with 253 additions and 182 deletions.
232 changes: 178 additions & 54 deletions package-lock.json

Large diffs are not rendered by default.

17 changes: 11 additions & 6 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -28,19 +28,20 @@
"author": "",
"license": "Apache-2.0",
"dependencies": {
"@mantine/core": "^7.12.1",
"@mantine/form": "^7.12.1",
"@mantine/hooks": "^7.12.1",
"@mantine/modals": "^7.12.1",
"@mantine/notifications": "^7.12.1",
"classnames": "^2.3.1",
"dom-to-svg": "^0.12.2",
"isomorphic-fetch": "^3.0.0",
"oxlint": "^0.2.3-alpha.0",
"postcss-preset-mantine": "^1.17.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-responsive-carousel": "^3.2.23",
"url-join": "^5.0.0",
"@mantine/core": "^7.12.1",
"@mantine/form": "^7.12.1",
"@mantine/hooks": "^7.12.1",
"@mantine/modals": "^7.12.1",
"@mantine/notifications": "^7.12.1"
"url-join": "^5.0.0"
},
"devDependencies": {
"@axe-core/react": "^4.10.0",
Expand All @@ -54,6 +55,7 @@
"@types/react": "^18.2.21",
"@typescript-eslint/eslint-plugin": "^5.31.0",
"@typescript-eslint/parser": "^5.31.0",
"autoprefixer": "^10.4.20",
"eslint": "^8.20.0",
"eslint-config-prettier": "^8.8.0",
"eslint-plugin-import": "^2.27.5",
Expand All @@ -63,8 +65,11 @@
"jest-canvas-mock": "^2.4.0",
"jest-environment-jsdom": "^29.7.0",
"lerna": ">=6.6.2 <7.0.0",
"postcss-import": "^16.1.0",
"postcss-modules": "^6.0.0",
"prettier": "^2.7.1",
"rollup": "^3.29.4",
"rollup-plugin-postcss": "^4.0.2",
"rollup-plugin-swc3": "^0.10.2",
"rollup-swc-preserve-directives": "^0.5.0",
"terser-webpack-plugin": "^5.3.3",
Expand Down
13 changes: 5 additions & 8 deletions packages/frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
"test:all": "jest",
"types": "tsc --emitDeclarationOnly",
"copy-tailwind": "cp src/tailwind.cjs dist/tailwind.cjs",
"build": "npm run compile && npm run types && npm run copy-tailwind && npm run rollup",
"build": "npm run compile && npm run types && npm run rollup",
"build:clean": "npm run clean && npm run build",
"build:watch": "npm run compile && npm run rollup -- --watch",
"dev": "npm run build:watch"
Expand All @@ -39,18 +39,15 @@
"default": "./dist/cjs/index.js"
}
},
"./tailwind": {
"require": "./dist/tailwind.cjs"
}
"./dist/styles.css": "./dist/styles.css"
},
"style": "dist/styles.css",
"browser": {
"fs": false,
"path": false,
"os": false
},
"dependencies": {
"@fontsource/montserrat": "^4.5.12",
"@fontsource/source-sans-pro": "^4.5.11",
"@graphiql/react": "^0.23.1",
"@iconify/react": "^4.0.1",
"@mantine/core": "^7.12.1",
Expand Down Expand Up @@ -150,7 +147,6 @@
"rollup-plugin-postcss": "^4.0.2",
"rollup-plugin-sourcemaps": "^0.6.3",
"style-loader": "^3.3.2",
"tailwindcss": "^3.3.3",
"ts-jest": "^29.1.1",
"postcss": "^8.4.29",
"swr": "^2.1.5"
Expand All @@ -159,7 +155,8 @@
"@gen3/core": "^0.10.33",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"typescript": "5.0.2"
"typescript": "5.0.2",
"tailwindcss": "^3.4.10"
},
"files": [
"dist"
Expand Down
34 changes: 22 additions & 12 deletions packages/frontend/rollup.config.mjs
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
import terser from '@rollup/plugin-terser';
import dts from 'rollup-plugin-dts';
import json from '@rollup/plugin-json';
import copy from 'rollup-plugin-copy';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import tailwindcss from 'tailwindcss';
import { default as tailwindConfig } from './src/tailwind.cjs';
import postcss from 'rollup-plugin-postcss';
import autoprefixer from 'autoprefixer';
import postcssImport from 'postcss-import';
import { swc } from 'rollup-plugin-swc3';
import swcPreserveDirectives from 'rollup-swc-preserve-directives';
import sourcemaps from 'rollup-plugin-sourcemaps';
Expand Down Expand Up @@ -60,6 +59,7 @@ const globals = {
filesize: 'filesize',
'tailwind-merge': 'tailwind-merge',
util: 'util',
swc: 'swc',
};

const config = [
Expand Down Expand Up @@ -99,6 +99,7 @@ const config = [
'victory',
'echarts',
'@gen3/core',
'swr',
],
plugins: [
peerDepsExternal(),
Expand All @@ -107,12 +108,17 @@ const config = [
config: {
path: './postcss.config.js',
},
modules: true, // Enable CSS Modules
extract: 'styles.css',
extensions: ['.css'],
minimize: true,
sourceMap: true, // Generate source map for the CSS
plugins: [
postcssImport(), // Handle @import rules in CSS
autoprefixer(), // Add vendor prefixes automatically
],
inject: {
insertAt: 'top',
},
plugins: [tailwindcss(tailwindConfig)],
}),
swc(
{
Expand All @@ -125,21 +131,25 @@ const config = [
swcPreserveDirectives(),
json(),
),
],
},
{
input: './dist/dts/index.d.ts',
output: [{ file: 'dist/index.d.ts', format: 'es' }],
plugins: [
dts(),
postcss(),
sourcemaps(),
copy({
targets: [
{
src: ['src/features/DataDictionary/data/dictionary.json'],
dest: 'dist/features/DataDictionary/data/dictionary.json',
src: ['dist/esm/styles.css'],
dest: 'dist',
},
],
}),
],
},
{
input: './dist/dts/index.d.ts',
output: [{ file: 'dist/index.d.ts', format: 'es' }],
plugins: [dts(), postcss(), sourcemaps()],
},
];

export default config;
4 changes: 2 additions & 2 deletions packages/frontend/src/features/Crosswalk/CrosswalkTable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -67,8 +67,8 @@ const CrosswalkTable = ({
color: 'var(--mantine-color-table-9)',
textAlign: 'center',
padding: 'var(--mantine-spacing-md)',
fontWeight: 'bold',
fontSize: 'var(--mantine-font-size-lg)',
fontWeight: 600,
fontSize: 'var(--mantine-font-size-sm)',
textTransform: 'uppercase',
},
},
Expand Down
19 changes: 13 additions & 6 deletions packages/frontend/src/features/Discovery/DiscoveryTable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import {
useMantineReactTable,
} from 'mantine-react-table';

import classes from './style/DiscoveryTable.module.css';

import { getManualSortingAndPagination, jsonPathAccessor } from './utils';
import { DiscoveryTableCellRenderer } from './TableRenderers/CellRendererFactory';
import { DiscoveryTableRowRenderer } from './TableRenderers/RowRendererFactory';
Expand Down Expand Up @@ -133,14 +135,19 @@ const DiscoveryTable = ({
},
},
layoutMode: 'semantic',
mantineDetailPanelProps: {
style: {
boxShadow: '0 -2px 0px 0px var(--table-border-color) inset',
},
},
mantineTableHeadCellProps: {
style: {
backgroundColor: 'var(--mantine-color-table-1)',
color: 'var(--mantine-color-table-5)',
color: 'var(--mantine-color-table-contrast-1)',
textAlign: 'center',
padding: 'var(--mantine-spacing-md)',
fontWeight: 'bold',
fontSize: 'var(--mantine-font-size-lg)',
fontWeight: 600,
fontSize: 'var(--mantine-font-size-md)',
textTransform: 'uppercase',
},
},
Expand All @@ -150,9 +157,7 @@ const DiscoveryTable = ({
return { ...row.original };
});
},
sx: {
cursor: 'pointer', //you might want to change the cursor too when adding an onClick
},
className: classes.tableRow,
}),
mantineTableProps: {
style: {
Expand All @@ -161,6 +166,8 @@ const DiscoveryTable = ({
},
});

console.log('table', table);

return (
<React.Fragment>
<StudyDetails />
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@

.tableRow {
border-width: 0;
}
6 changes: 0 additions & 6 deletions packages/frontend/src/tailwind.cjs

This file was deleted.

6 changes: 4 additions & 2 deletions packages/sampleCommons/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,9 @@
"build:clean": "npm run clean && npm run build"
},
"dependencies": {
"@fontsource/poppins": "^5.0.14",
"@fontsource/montserrat": "^5.0.19",
"@fontsource/source-sans-pro": "^5.0.8",
"@fontsource/poppins": "^5.0.15",
"@gen3/core": "file:../core",
"@gen3/frontend": "file:../frontend",
"@mdx-js/loader": "^3.0.0",
Expand All @@ -34,7 +36,7 @@
"next": "^14.2.3",
"react": "^18.2.0",
"react-dom": "18.2.0",
"tailwindcss": "^3.4.1",
"tailwindcss": "^3.4.10",
"ts-jest": "^29.0.3",
"ts-node": "^10.9.1",
"typescript": "^5.4.3"
Expand Down
3 changes: 3 additions & 0 deletions packages/sampleCommons/postcss.config.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
/** @type {import('postcss').Config} */
module.exports = {
plugins: {
'postcss-import': {},
'tailwindcss/nesting': {},
'postcss-preset-mantine': {},
tailwindcss: {},
autoprefixer: {},
},
Expand Down
7 changes: 4 additions & 3 deletions packages/sampleCommons/src/pages/_app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,12 @@ import {
SessionConfiguration,
} from '@gen3/frontend';
import '../styles/globals.css';
//import 'react-responsive-carousel/lib/styles/carousel.min.css';
// import 'graphiql/graphiql.css';
//import '@graphiql/react/dist/style.css';
import '@mantine/core/styles.css';
import 'mantine-react-table/styles.css';
import '@fontsource/montserrat';
import '@fontsource/source-sans-pro';
import '@fontsource/poppins';

import { GEN3_COMMONS_NAME, setDRSHostnames } from '@gen3/core';
import drsHostnames from '../../config/drsHostnames.json';

Expand Down
87 changes: 6 additions & 81 deletions packages/sampleCommons/src/styles/globals.css
Original file line number Diff line number Diff line change
@@ -1,91 +1,16 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@import "tailwindcss/base";
@import "tailwindcss/components";

@import '~@fontsource/montserrat/700.css';
@import '~@fontsource/montserrat/400-italic.css';
@import '~@fontsource/montserrat/index.css';
@import '~@fontsource/montserrat/600.css';
@import '~@fontsource/montserrat/700-italic.css';
@import '~@fontsource/source-sans-pro/index.css';
@import '~@fontsource/poppins/index.css';
@import '~@fontsource/poppins/600.css';
@import '@mantine/core/styles.css';
@import 'mantine-react-table/styles.css';

.tooltip {
position: relative;
display: inline-block;
font-size: 0.875rem;
font-weight: normal;
line-height: 1.6em;
letter-spacing: 0.02rem;
}

.has-tooltip .tooltip {
visibility: hidden;
position: absolute;
z-index: 1000;
top: 90%;
vertical-align: middle;
transform: translateX(-75%);
}

.has-tooltip .tooltip::before {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
margin-left: 35%;
border-width: 10px;
border-style: solid;
border-color: transparent transparent gray transparent;
}

.has-tooltip .tooltip::after {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
margin-left: 35%;
transform: translateY(1px);
border-width: 10px;
border-style: solid;
border-color: transparent transparent white transparent;
}

.has-tooltip:hover .tooltip {
visibility: visible;
}

.h3-typo {
font-size: 1.125rem;
font-weight: 700;
letter-spacing: 0.02rem;
}

.body-typo {
font-size: 0.875rem;
font-weight: normal;
line-height: 1.6em;
letter-spacing: 0.02rem;
}
@import "tailwindcss/utilities";
@import '@gen3/frontend/dist/styles.css';

.navbutton-type {
font-size: 1.125rem;
font-weight: 700;
letter-spacing: 0.02rem;
}
@layer base {
html {
@apply font-heading;
}
}

.mantine-TableBodyCell-DetailPanel {
border-color: aqua;
border-top: hidden;
padding: 16px;
margin: 16px 0;
}

@tailwind utilities;
@tailwind variants;
Loading

0 comments on commit 34dcbfb

Please sign in to comment.