@databiosphere/findable-ui 50.5.0 → 50.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/Export/components/ExportMethod/constants.d.ts +2 -0
- package/lib/components/Export/components/ExportMethod/constants.js +6 -0
- package/lib/components/Export/components/ExportMethod/exportMethod.d.ts +2 -1
- package/lib/components/Export/components/ExportMethod/exportMethod.js +6 -4
- package/lib/components/Export/components/ExportMethod/exportMethod.styles.d.ts +8 -2
- package/lib/components/Export/components/ExportMethod/exportMethod.styles.js +4 -6
- package/package.json +6 -1
- package/src/components/Export/components/ExportMethod/constants.ts +8 -0
- package/src/components/Export/components/ExportMethod/exportMethod.styles.ts +10 -8
- package/src/components/Export/components/ExportMethod/exportMethod.tsx +13 -4
- package/.eslintignore +0 -5
- package/.eslintrc.json +0 -79
- package/.github/copilot-instructions.md +0 -176
- package/.github/workflows/release-please.yml +0 -49
- package/.github/workflows/run-checks.yml +0 -57
- package/.husky/commit-msg +0 -18
- package/.husky/pre-commit +0 -43
- package/.prettierignore +0 -19
- package/.prettierrc.json +0 -1
- package/.release-please-manifest.json +0 -3
- package/.storybook/main.ts +0 -10
- package/.storybook/preview-head.html +0 -4
- package/.storybook/preview.js +0 -6
- package/CHANGELOG.md +0 -1110
- package/CLAUDE.md +0 -214
- package/backend/README.md +0 -64
- package/backend/__init__.py +0 -0
- package/backend/controllers/__init__.py +0 -0
- package/backend/controllers/facets_controller.py +0 -16
- package/backend/controllers/models.py +0 -11
- package/backend/main.py +0 -8
- package/backend/requirements.txt +0 -4
- package/backend/services/__init__.py +0 -0
- package/backend/services/facets_service.py +0 -68
- package/backend/services/models.py +0 -43
- package/commitlint.config.js +0 -1
- package/docs/TRUSTED_PUBLISHING.md +0 -132
- package/jest.config.js +0 -6
- package/release-please-config.json +0 -23
- package/tests/azulFileDownload.test.tsx +0 -96
- package/tests/buildCategoryViews.test.ts +0 -282
- package/tests/buildRequestFilters.test.ts +0 -60
- package/tests/buildRequestManifest.test.ts +0 -103
- package/tests/chart.test.tsx +0 -274
- package/tests/chartSortUtils.test.ts +0 -119
- package/tests/chartView.test.tsx +0 -48
- package/tests/dataDictionaryColumnFilters.test.tsx +0 -101
- package/tests/dataDictionary_utils.test.ts +0 -153
- package/tests/fetchApi.test.ts +0 -93
- package/tests/filter.test.tsx +0 -100
- package/tests/filterMenu.test.ts +0 -100
- package/tests/filterRange.test.tsx +0 -372
- package/tests/filterSortUtils.test.ts +0 -180
- package/tests/filters.test.tsx +0 -61
- package/tests/getFacetedMinMaxValues.test.ts +0 -166
- package/tests/getFilterSortType.test.ts +0 -45
- package/tests/getProfileStatus.test.ts +0 -290
- package/tests/linkCell.test.tsx +0 -89
- package/tests/markdownCell.test.tsx +0 -52
- package/tests/provider.test.tsx +0 -189
- package/tests/research.chatState.test.ts +0 -463
- package/tests/research.fetchResponse.test.ts +0 -164
- package/tests/research.queryProvider.test.ts +0 -321
- package/tests/research.useKeyShortCuts.test.ts +0 -256
- package/tests/rowSelectionValidation.test.ts +0 -282
- package/tests/setup.ts +0 -19
- package/tests/stepIcon.test.tsx +0 -42
- package/tests/tableFilter.test.tsx +0 -90
- package/tests/terraProfileProvider.test.tsx +0 -117
- package/tests/theme.test.ts +0 -465
- package/tests/toggleButtonGroupProvider.test.tsx +0 -125
- package/tests/transformRoute.test.ts +0 -21
- package/tests/tsconfig.json +0 -8
- package/tests/useFileLocation.test.ts +0 -36
- package/tests/useRequestManifest.test.ts +0 -201
- package/tests/useRouteHistory.test.ts +0 -97
- package/tests/useSessionActive.test.ts +0 -106
- package/tests/useWindowResize.test.ts +0 -130
- package/tests/viewModelBuilders_utils.test.ts +0 -58
- package/tests/viewToggle.test.tsx +0 -54
- package/tsconfig.json +0 -25
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { JSX, ReactNode } from "react";
|
|
2
2
|
import { TrackingProps } from "../../../types";
|
|
3
3
|
export interface ExportMethodProps extends TrackingProps {
|
|
4
|
+
comingSoon?: boolean;
|
|
4
5
|
description: ReactNode;
|
|
5
6
|
footnote?: ReactNode;
|
|
6
7
|
icon?: ReactNode;
|
|
@@ -8,4 +9,4 @@ export interface ExportMethodProps extends TrackingProps {
|
|
|
8
9
|
route: string;
|
|
9
10
|
title: string;
|
|
10
11
|
}
|
|
11
|
-
export declare const ExportMethod: ({ description, footnote, icon, isAccessible, route, title, trackingId, }: ExportMethodProps) => JSX.Element;
|
|
12
|
+
export declare const ExportMethod: ({ comingSoon, description, footnote, icon, isAccessible, route, title, trackingId, }: ExportMethodProps) => JSX.Element;
|
|
@@ -1,14 +1,16 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { ChevronRightRounded } from "@mui/icons-material";
|
|
3
|
-
import { CardActionArea, CardActions, CardContent, Stack, Tooltip, Typography, } from "@mui/material";
|
|
3
|
+
import { CardActionArea, CardActions, CardContent, Chip, Stack, Tooltip, Typography, } from "@mui/material";
|
|
4
4
|
import Link from "next/link";
|
|
5
5
|
import { useDownloadStatus } from "../../../../hooks/useDownloadStatus";
|
|
6
6
|
import { STACK_PROPS } from "../../../../styles/common/mui/stack";
|
|
7
7
|
import { SVG_ICON_PROPS } from "../../../../styles/common/mui/svgIcon";
|
|
8
8
|
import { TYPOGRAPHY_PROPS } from "../../../../styles/common/mui/typography";
|
|
9
9
|
import { FluidPaper } from "../../../common/Paper/components/FluidPaper/fluidPaper";
|
|
10
|
+
import { CHIP_PROPS } from "./constants";
|
|
10
11
|
import { StyledCard } from "./exportMethod.styles";
|
|
11
|
-
export const ExportMethod = ({ description, footnote, icon, isAccessible = true, route, title, trackingId, }) => {
|
|
12
|
-
const { disabled, message } = useDownloadStatus();
|
|
13
|
-
|
|
12
|
+
export const ExportMethod = ({ comingSoon, description, footnote, icon, isAccessible = true, route, title, trackingId, }) => {
|
|
13
|
+
const { disabled: downloadStatusDisabled, message } = useDownloadStatus();
|
|
14
|
+
const disabled = comingSoon || downloadStatusDisabled || !isAccessible;
|
|
15
|
+
return (_jsx(Tooltip, { arrow: true, title: message, children: _jsxs(StyledCard, { component: FluidPaper, disabled: disabled, elevation: 1, children: [_jsx(CardActionArea, { "aria-label": title, component: Link, disabled: disabled, href: route, id: trackingId }), _jsxs(CardContent, { children: [_jsxs(Stack, { alignItems: STACK_PROPS.ALIGN_ITEMS.FLEX_START, direction: STACK_PROPS.DIRECTION.ROW, gap: 2, useFlexGap: true, children: [icon, _jsx(Typography, { component: "h3", variant: TYPOGRAPHY_PROPS.VARIANT.HEADING_XSMALL, children: title })] }), _jsx(Typography, { component: "div", variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400_2_LINES, children: description }), footnote && (_jsx(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, component: "div", variant: TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400_2_LINES, children: footnote }))] }), _jsx(CardActions, { children: comingSoon ? (_jsx(Chip, { ...CHIP_PROPS })) : (_jsx(ChevronRightRounded, { color: SVG_ICON_PROPS.COLOR.INK_LIGHT })) })] }) }));
|
|
14
16
|
};
|
|
@@ -1,2 +1,8 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
1
|
+
import { CardProps } from "@mui/material";
|
|
2
|
+
interface Props extends CardProps {
|
|
3
|
+
disabled?: boolean;
|
|
4
|
+
}
|
|
5
|
+
export declare const StyledCard: import("@emotion/styled").StyledComponent<import("@mui/material").CardOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "className" | "classes" | "children" | "sx" | "square" | "elevation" | "variant" | "raised"> & {
|
|
6
|
+
theme?: import("@emotion/react").Theme;
|
|
7
|
+
} & Props, {}, {}>;
|
|
8
|
+
export {};
|
|
@@ -2,7 +2,10 @@ import styled from "@emotion/styled";
|
|
|
2
2
|
import { Card } from "@mui/material";
|
|
3
3
|
import { PALETTE } from "../../../../styles/common/constants/palette";
|
|
4
4
|
import { sectionPadding } from "../../../common/Section/section.styles";
|
|
5
|
-
export const StyledCard = styled(Card
|
|
5
|
+
export const StyledCard = styled(Card, {
|
|
6
|
+
shouldForwardProp: (prop) => prop !== "disabled",
|
|
7
|
+
}) `
|
|
8
|
+
background-color: ${({ disabled }) => (disabled ? PALETTE.SMOKE_LIGHTEST : PALETTE.COMMON_WHITE)};
|
|
6
9
|
${sectionPadding};
|
|
7
10
|
display: grid;
|
|
8
11
|
gap: 16px;
|
|
@@ -13,11 +16,6 @@ export const StyledCard = styled(Card) `
|
|
|
13
16
|
inset: 0;
|
|
14
17
|
position: absolute; /* covers entire card */
|
|
15
18
|
text-decoration: none;
|
|
16
|
-
|
|
17
|
-
&.Mui-disabled {
|
|
18
|
-
background-color: ${PALETTE.COMMON_WHITE};
|
|
19
|
-
opacity: 0.6;
|
|
20
|
-
}
|
|
21
19
|
}
|
|
22
20
|
|
|
23
21
|
.MuiCardContent-root {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@databiosphere/findable-ui",
|
|
3
|
-
"version": "50.
|
|
3
|
+
"version": "50.6.1",
|
|
4
4
|
"description": "",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
|
|
@@ -21,6 +21,11 @@
|
|
|
21
21
|
},
|
|
22
22
|
"homepage": "https://github.com/DataBiosphere/findable-ui/tree/main/#readme",
|
|
23
23
|
"main": "lib/index.js",
|
|
24
|
+
"files": [
|
|
25
|
+
"lib",
|
|
26
|
+
"src",
|
|
27
|
+
"types"
|
|
28
|
+
],
|
|
24
29
|
"devDependencies": {
|
|
25
30
|
"@commitlint/cli": "^20.2.0",
|
|
26
31
|
"@commitlint/config-conventional": "^20.2.0",
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { ChipProps } from "@mui/material";
|
|
2
|
+
import { CHIP_PROPS as MUI_CHIP_PROPS } from "../../../../styles/common/mui/chip";
|
|
3
|
+
|
|
4
|
+
export const CHIP_PROPS: Partial<ChipProps> = {
|
|
5
|
+
color: MUI_CHIP_PROPS.COLOR.DEFAULT,
|
|
6
|
+
label: "Coming Soon",
|
|
7
|
+
variant: MUI_CHIP_PROPS.VARIANT.STATUS,
|
|
8
|
+
};
|
|
@@ -1,9 +1,16 @@
|
|
|
1
1
|
import styled from "@emotion/styled";
|
|
2
|
-
import { Card } from "@mui/material";
|
|
2
|
+
import { Card, CardProps } from "@mui/material";
|
|
3
3
|
import { PALETTE } from "../../../../styles/common/constants/palette";
|
|
4
4
|
import { sectionPadding } from "../../../common/Section/section.styles";
|
|
5
5
|
|
|
6
|
-
|
|
6
|
+
interface Props extends CardProps {
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
export const StyledCard = styled(Card, {
|
|
11
|
+
shouldForwardProp: (prop) => prop !== "disabled",
|
|
12
|
+
})<Props>`
|
|
13
|
+
background-color: ${({ disabled }) => (disabled ? PALETTE.SMOKE_LIGHTEST : PALETTE.COMMON_WHITE)};
|
|
7
14
|
${sectionPadding};
|
|
8
15
|
display: grid;
|
|
9
16
|
gap: 16px;
|
|
@@ -14,11 +21,6 @@ export const StyledCard = styled(Card)`
|
|
|
14
21
|
inset: 0;
|
|
15
22
|
position: absolute; /* covers entire card */
|
|
16
23
|
text-decoration: none;
|
|
17
|
-
|
|
18
|
-
&.Mui-disabled {
|
|
19
|
-
background-color: ${PALETTE.COMMON_WHITE};
|
|
20
|
-
opacity: 0.6;
|
|
21
|
-
}
|
|
22
24
|
}
|
|
23
25
|
|
|
24
26
|
.MuiCardContent-root {
|
|
@@ -37,4 +39,4 @@ export const StyledCard = styled(Card)`
|
|
|
37
39
|
.MuiCardActions-root {
|
|
38
40
|
padding: 0;
|
|
39
41
|
}
|
|
40
|
-
|
|
42
|
+
`;
|
|
@@ -3,6 +3,7 @@ import {
|
|
|
3
3
|
CardActionArea,
|
|
4
4
|
CardActions,
|
|
5
5
|
CardContent,
|
|
6
|
+
Chip,
|
|
6
7
|
Stack,
|
|
7
8
|
Tooltip,
|
|
8
9
|
Typography,
|
|
@@ -15,9 +16,11 @@ import { SVG_ICON_PROPS } from "../../../../styles/common/mui/svgIcon";
|
|
|
15
16
|
import { TYPOGRAPHY_PROPS } from "../../../../styles/common/mui/typography";
|
|
16
17
|
import { FluidPaper } from "../../../common/Paper/components/FluidPaper/fluidPaper";
|
|
17
18
|
import { TrackingProps } from "../../../types";
|
|
19
|
+
import { CHIP_PROPS } from "./constants";
|
|
18
20
|
import { StyledCard } from "./exportMethod.styles";
|
|
19
21
|
|
|
20
22
|
export interface ExportMethodProps extends TrackingProps {
|
|
23
|
+
comingSoon?: boolean;
|
|
21
24
|
description: ReactNode;
|
|
22
25
|
footnote?: ReactNode;
|
|
23
26
|
icon?: ReactNode;
|
|
@@ -27,6 +30,7 @@ export interface ExportMethodProps extends TrackingProps {
|
|
|
27
30
|
}
|
|
28
31
|
|
|
29
32
|
export const ExportMethod = ({
|
|
33
|
+
comingSoon,
|
|
30
34
|
description,
|
|
31
35
|
footnote,
|
|
32
36
|
icon,
|
|
@@ -35,14 +39,15 @@ export const ExportMethod = ({
|
|
|
35
39
|
title,
|
|
36
40
|
trackingId,
|
|
37
41
|
}: ExportMethodProps): JSX.Element => {
|
|
38
|
-
const { disabled, message } = useDownloadStatus();
|
|
42
|
+
const { disabled: downloadStatusDisabled, message } = useDownloadStatus();
|
|
43
|
+
const disabled = comingSoon || downloadStatusDisabled || !isAccessible;
|
|
39
44
|
return (
|
|
40
45
|
<Tooltip arrow title={message}>
|
|
41
|
-
<StyledCard component={FluidPaper} elevation={1}>
|
|
46
|
+
<StyledCard component={FluidPaper} disabled={disabled} elevation={1}>
|
|
42
47
|
<CardActionArea
|
|
43
48
|
aria-label={title}
|
|
44
49
|
component={Link}
|
|
45
|
-
disabled={disabled
|
|
50
|
+
disabled={disabled}
|
|
46
51
|
href={route}
|
|
47
52
|
id={trackingId}
|
|
48
53
|
/>
|
|
@@ -78,7 +83,11 @@ export const ExportMethod = ({
|
|
|
78
83
|
)}
|
|
79
84
|
</CardContent>
|
|
80
85
|
<CardActions>
|
|
81
|
-
|
|
86
|
+
{comingSoon ? (
|
|
87
|
+
<Chip {...CHIP_PROPS} />
|
|
88
|
+
) : (
|
|
89
|
+
<ChevronRightRounded color={SVG_ICON_PROPS.COLOR.INK_LIGHT} />
|
|
90
|
+
)}
|
|
82
91
|
</CardActions>
|
|
83
92
|
</StyledCard>
|
|
84
93
|
</Tooltip>
|
package/.eslintignore
DELETED
package/.eslintrc.json
DELETED
|
@@ -1,79 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"parser": "@typescript-eslint/parser",
|
|
3
|
-
"plugins": [
|
|
4
|
-
"@typescript-eslint",
|
|
5
|
-
"sonarjs",
|
|
6
|
-
"jsdoc",
|
|
7
|
-
"sort-destructure-keys",
|
|
8
|
-
"typescript-sort-keys",
|
|
9
|
-
"react-hooks"
|
|
10
|
-
],
|
|
11
|
-
"extends": [
|
|
12
|
-
"eslint:recommended",
|
|
13
|
-
"plugin:@typescript-eslint/recommended",
|
|
14
|
-
"prettier",
|
|
15
|
-
"plugin:prettier/recommended",
|
|
16
|
-
"plugin:storybook/recommended",
|
|
17
|
-
"next",
|
|
18
|
-
"plugin:sonarjs/recommended",
|
|
19
|
-
"plugin:eslint-comments/recommended"
|
|
20
|
-
],
|
|
21
|
-
"rules": {
|
|
22
|
-
"sort-keys": [
|
|
23
|
-
"error",
|
|
24
|
-
"asc",
|
|
25
|
-
{
|
|
26
|
-
"caseSensitive": true,
|
|
27
|
-
"minKeys": 2,
|
|
28
|
-
"natural": false
|
|
29
|
-
}
|
|
30
|
-
],
|
|
31
|
-
"sort-destructure-keys/sort-destructure-keys": [
|
|
32
|
-
"error",
|
|
33
|
-
{
|
|
34
|
-
"caseSensitive": false
|
|
35
|
-
}
|
|
36
|
-
],
|
|
37
|
-
"typescript-sort-keys/interface": [
|
|
38
|
-
"error",
|
|
39
|
-
"asc",
|
|
40
|
-
{
|
|
41
|
-
"caseSensitive": false
|
|
42
|
-
}
|
|
43
|
-
],
|
|
44
|
-
"typescript-sort-keys/string-enum": [
|
|
45
|
-
"error",
|
|
46
|
-
"asc",
|
|
47
|
-
{
|
|
48
|
-
"caseSensitive": false
|
|
49
|
-
}
|
|
50
|
-
],
|
|
51
|
-
"eslint-comments/require-description": "error",
|
|
52
|
-
"jsdoc/require-description": "error",
|
|
53
|
-
"jsdoc/require-param": "error",
|
|
54
|
-
"jsdoc/require-param-name": "error",
|
|
55
|
-
"jsdoc/require-param-description": "error",
|
|
56
|
-
"jsdoc/require-hyphen-before-param-description": "error",
|
|
57
|
-
"jsdoc/require-returns": "error",
|
|
58
|
-
"jsdoc/require-returns-description": "error",
|
|
59
|
-
"jsdoc/check-alignment": "error",
|
|
60
|
-
"jsdoc/check-param-names": "error",
|
|
61
|
-
"react-hooks/exhaustive-deps": "error"
|
|
62
|
-
},
|
|
63
|
-
"overrides": [
|
|
64
|
-
{
|
|
65
|
-
"files": "**",
|
|
66
|
-
"excludedFiles": "*.styles.ts?(x)",
|
|
67
|
-
"rules": {
|
|
68
|
-
"@typescript-eslint/explicit-function-return-type": "error"
|
|
69
|
-
}
|
|
70
|
-
},
|
|
71
|
-
{
|
|
72
|
-
"files": "**/*.test.ts",
|
|
73
|
-
"rules": {
|
|
74
|
-
"@typescript-eslint/no-explicit-any": "off",
|
|
75
|
-
"sonarjs/no-duplicate-string": "off"
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
]
|
|
79
|
-
}
|
|
@@ -1,176 +0,0 @@
|
|
|
1
|
-
# Copilot Instructions for findable-ui
|
|
2
|
-
|
|
3
|
-
## Repository Purpose
|
|
4
|
-
|
|
5
|
-
This is a TypeScript library package (`@databiosphere/findable-ui`) that provides reusable UI components and utilities for Data Biosphere applications, particularly the Data Browser. It's designed as an npm package that exports compiled JavaScript from the `lib` directory.
|
|
6
|
-
|
|
7
|
-
## Key Project Information
|
|
8
|
-
|
|
9
|
-
- **Language**: TypeScript with strict mode enabled
|
|
10
|
-
- **Node Version**: 20.10.0 (enforced)
|
|
11
|
-
- **UI Framework**: React 18 with Material-UI (MUI) v7
|
|
12
|
-
- **Build System**: TypeScript compiler (tsc)
|
|
13
|
-
- **Testing**: Jest with React Testing Library
|
|
14
|
-
- **Package Type**: Library package that compiles to `lib/` directory
|
|
15
|
-
|
|
16
|
-
## Repository Structure
|
|
17
|
-
|
|
18
|
-
- `/src` - TypeScript source files (compiles to `/lib`)
|
|
19
|
-
- `/components` - React UI components
|
|
20
|
-
- `/hooks` - Custom React hooks
|
|
21
|
-
- `/providers` - React context providers
|
|
22
|
-
- `/utils` - Utility functions
|
|
23
|
-
- `/theme` - MUI theme configuration
|
|
24
|
-
- `/config` - Configuration files
|
|
25
|
-
- `/apis` - API client code
|
|
26
|
-
- `/services` - Business logic services
|
|
27
|
-
- `/types` - TypeScript type definitions
|
|
28
|
-
- `/views` - Page-level components
|
|
29
|
-
- `/tests` - Jest test files (separate from src)
|
|
30
|
-
- `/lib` - Compiled JavaScript output (git-ignored)
|
|
31
|
-
- `/.storybook` - Storybook configuration
|
|
32
|
-
|
|
33
|
-
## Code Style and Standards
|
|
34
|
-
|
|
35
|
-
### TypeScript Requirements
|
|
36
|
-
|
|
37
|
-
- **Strict mode enabled**: All TypeScript strict checks are enforced
|
|
38
|
-
- **Explicit return types required**: All functions must have explicit return type annotations (except in `.styles.ts(x)` files)
|
|
39
|
-
- **No implicit any**: Avoid `any` type; use proper typing (exceptions allowed in test files)
|
|
40
|
-
- **Null safety**: Strict null checks are enforced
|
|
41
|
-
|
|
42
|
-
### Code Organization
|
|
43
|
-
|
|
44
|
-
- **Sort keys**: Object keys, destructured keys, interface properties, and string enums must be sorted alphabetically (enforced by ESLint)
|
|
45
|
-
- **Import organization**: Imports are auto-organized with prettier-plugin-organize-imports
|
|
46
|
-
- **File naming**: Use kebab-case for file names (e.g., `my-component.tsx`)
|
|
47
|
-
|
|
48
|
-
### Documentation Requirements
|
|
49
|
-
|
|
50
|
-
All code must include JSDoc comments with:
|
|
51
|
-
|
|
52
|
-
- **Function descriptions**: Required for all functions
|
|
53
|
-
- **Parameter documentation**: `@param` tags with descriptions for all parameters
|
|
54
|
-
- **Return value documentation**: `@returns` tag with description
|
|
55
|
-
- **Hyphen before param descriptions**: Required format
|
|
56
|
-
|
|
57
|
-
Example:
|
|
58
|
-
|
|
59
|
-
```typescript
|
|
60
|
-
/**
|
|
61
|
-
* Transforms a route by removing inactivity parameters.
|
|
62
|
-
* @param routes - Array of route strings to transform.
|
|
63
|
-
* @returns The first non-login route without inactivity param, or undefined.
|
|
64
|
-
*/
|
|
65
|
-
function transformRoute(routes: string[]): string | undefined {
|
|
66
|
-
// implementation
|
|
67
|
-
}
|
|
68
|
-
```
|
|
69
|
-
|
|
70
|
-
### React Patterns
|
|
71
|
-
|
|
72
|
-
- **Hooks dependencies**: The `react-hooks/exhaustive-deps` rule is enforced - always include all dependencies in useEffect, useCallback, etc.
|
|
73
|
-
- **Component structure**: Use functional components with hooks
|
|
74
|
-
- **Styling**: Use Emotion styled components (`.styles.ts` or `.styles.tsx` files)
|
|
75
|
-
|
|
76
|
-
## Build, Test, and Validation Steps
|
|
77
|
-
|
|
78
|
-
### Before Making Changes
|
|
79
|
-
|
|
80
|
-
1. Install dependencies: `npm ci`
|
|
81
|
-
2. Run all checks to verify baseline:
|
|
82
|
-
```bash
|
|
83
|
-
npm run check-format
|
|
84
|
-
npm run lint
|
|
85
|
-
npm run test
|
|
86
|
-
npm run test-compile
|
|
87
|
-
```
|
|
88
|
-
|
|
89
|
-
### During Development
|
|
90
|
-
|
|
91
|
-
1. **Check formatting**: `npm run check-format` (Prettier)
|
|
92
|
-
2. **Lint code**: `npm run lint` (ESLint with TypeScript, SonarJS, and other plugins)
|
|
93
|
-
3. **Run tests**: `npm run test` (Jest with jsdom environment)
|
|
94
|
-
4. **Type check**: `npm run test-compile` (TypeScript compiler without emit)
|
|
95
|
-
5. **Compile library**: `npx tsc` (when making changes that need to be tested in consuming apps)
|
|
96
|
-
|
|
97
|
-
### All PRs Must Pass
|
|
98
|
-
|
|
99
|
-
- Prettier formatting check
|
|
100
|
-
- ESLint with no errors
|
|
101
|
-
- All Jest tests passing
|
|
102
|
-
- TypeScript compilation without errors
|
|
103
|
-
|
|
104
|
-
## Testing Guidelines
|
|
105
|
-
|
|
106
|
-
- **Test location**: Tests live in the `/tests` directory (not co-located with source files)
|
|
107
|
-
- **Test framework**: Jest with `@testing-library/react` for component tests
|
|
108
|
-
- **Test naming**: Use `.test.ts` or `.test.tsx` extension
|
|
109
|
-
- **Setup**: Tests use Storybook decorators and parameters (see `tests/setup.ts`)
|
|
110
|
-
- **Mocking**: Global mocks for ResizeObserver, TextEncoder, and TextDecoder are pre-configured
|
|
111
|
-
- **Test structure**: Follow the existing pattern of describe/it blocks with clear descriptions
|
|
112
|
-
|
|
113
|
-
Example test structure:
|
|
114
|
-
|
|
115
|
-
```typescript
|
|
116
|
-
describe("ComponentName", () => {
|
|
117
|
-
it("should do something specific", () => {
|
|
118
|
-
// Arrange
|
|
119
|
-
const input = "test";
|
|
120
|
-
|
|
121
|
-
// Act
|
|
122
|
-
const result = functionUnderTest(input);
|
|
123
|
-
|
|
124
|
-
// Assert
|
|
125
|
-
expect(result).toBe("expected");
|
|
126
|
-
});
|
|
127
|
-
});
|
|
128
|
-
```
|
|
129
|
-
|
|
130
|
-
## Contribution Workflow
|
|
131
|
-
|
|
132
|
-
1. **Make minimal changes**: This is a library package - changes impact all consumers
|
|
133
|
-
2. **Maintain backward compatibility**: Breaking changes require major version bumps
|
|
134
|
-
3. **Update documentation**: Keep README and inline docs current
|
|
135
|
-
4. **No breaking test changes**: Don't remove or modify existing tests unless fixing bugs
|
|
136
|
-
5. **Test compilation**: Always run `npm run test-compile` to ensure TypeScript compilation succeeds
|
|
137
|
-
|
|
138
|
-
## Peer Dependencies
|
|
139
|
-
|
|
140
|
-
This package has extensive peer dependencies that consuming applications must provide:
|
|
141
|
-
|
|
142
|
-
- React 18.3+
|
|
143
|
-
- Material-UI (@mui/material, @mui/icons-material) v7
|
|
144
|
-
- Next.js 14.2+ and next-auth
|
|
145
|
-
- Emotion (@emotion/react, @emotion/styled)
|
|
146
|
-
- TanStack Table and Virtual (@tanstack/react-table, @tanstack/react-virtual)
|
|
147
|
-
- Various utilities (ky, uuid, yup, etc.)
|
|
148
|
-
|
|
149
|
-
**Do not add these as direct dependencies** - they must remain as peer dependencies.
|
|
150
|
-
|
|
151
|
-
## Common Pitfalls to Avoid
|
|
152
|
-
|
|
153
|
-
1. **Don't import from lib/**: Always import from src/ during development
|
|
154
|
-
2. **Don't add dependencies to dependencies**: New packages should go in peerDependencies or devDependencies
|
|
155
|
-
3. **Don't disable ESLint rules without justification**: The strict rules maintain code quality
|
|
156
|
-
4. **Don't skip JSDoc**: All public functions require documentation
|
|
157
|
-
5. **Don't modify package-lock.json manually**: Use npm commands
|
|
158
|
-
6. **Don't commit lib/ directory**: It's build output and git-ignored
|
|
159
|
-
|
|
160
|
-
## Special Notes
|
|
161
|
-
|
|
162
|
-
- **Storybook**: Available for component development (`npm run storybook`)
|
|
163
|
-
- **Husky hooks**: Pre-commit hooks are configured via `.husky`
|
|
164
|
-
- **Release management**: Uses release-please for automated versioning and changelog
|
|
165
|
-
- **Link for local development**: Use `npm link` to test changes in Data Browser locally (see README)
|
|
166
|
-
|
|
167
|
-
## Development with Data Browser
|
|
168
|
-
|
|
169
|
-
When developing findable-ui alongside the Data Browser:
|
|
170
|
-
|
|
171
|
-
1. Clone both repos in the same parent directory
|
|
172
|
-
2. In findable-ui: Run `npm ci`, bump version, run `npx tsc`
|
|
173
|
-
3. In data-browser/explorer: Run `npm link ../../findable-ui`
|
|
174
|
-
4. May need to comment out certain packages in next.config.mjs webpack config
|
|
175
|
-
|
|
176
|
-
See README.md for complete local development workflow.
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
on:
|
|
2
|
-
push:
|
|
3
|
-
branches:
|
|
4
|
-
- main
|
|
5
|
-
workflow_dispatch: # Enable manual triggering
|
|
6
|
-
|
|
7
|
-
permissions:
|
|
8
|
-
contents: write
|
|
9
|
-
pull-requests: write
|
|
10
|
-
id-token: write # Required for trusted publishing to npm
|
|
11
|
-
|
|
12
|
-
name: release-please
|
|
13
|
-
|
|
14
|
-
jobs:
|
|
15
|
-
release-please:
|
|
16
|
-
runs-on: ubuntu-latest
|
|
17
|
-
steps:
|
|
18
|
-
- uses: googleapis/release-please-action@v4
|
|
19
|
-
id: release
|
|
20
|
-
with:
|
|
21
|
-
config-file: release-please-config.json
|
|
22
|
-
token: ${{ secrets.GITHUB_TOKEN }}
|
|
23
|
-
|
|
24
|
-
# The logic below handles the npm publication:
|
|
25
|
-
- uses: actions/checkout@v4
|
|
26
|
-
|
|
27
|
-
# These if statements ensure that a publication only occurs when a new release is created:
|
|
28
|
-
- uses: actions/setup-node@v4
|
|
29
|
-
if: ${{ steps.release.outputs.release_created }}
|
|
30
|
-
with:
|
|
31
|
-
node-version: "22.12.0"
|
|
32
|
-
registry-url: "https://registry.npmjs.org"
|
|
33
|
-
always-auth: true # Enable authentication for trusted publishing
|
|
34
|
-
|
|
35
|
-
- name: Upgrade npm for trusted publishing
|
|
36
|
-
if: ${{ steps.release.outputs.release_created }}
|
|
37
|
-
run: npm install -g npm@^11.5.1
|
|
38
|
-
|
|
39
|
-
- name: Install dependencies
|
|
40
|
-
if: ${{ steps.release.outputs.release_created }}
|
|
41
|
-
run: npm ci
|
|
42
|
-
|
|
43
|
-
- name: Compile
|
|
44
|
-
if: ${{ steps.release.outputs.release_created }}
|
|
45
|
-
run: npx tsc
|
|
46
|
-
|
|
47
|
-
- name: Publish to NPM
|
|
48
|
-
if: ${{ steps.release.outputs.release_created }}
|
|
49
|
-
run: npm publish --provenance --access public
|
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
name: Run checks
|
|
2
|
-
on:
|
|
3
|
-
pull_request:
|
|
4
|
-
branches:
|
|
5
|
-
- "**"
|
|
6
|
-
|
|
7
|
-
jobs:
|
|
8
|
-
build:
|
|
9
|
-
runs-on: ubuntu-latest
|
|
10
|
-
steps:
|
|
11
|
-
- name: Checkout repository
|
|
12
|
-
uses: actions/checkout@v4
|
|
13
|
-
|
|
14
|
-
- name: Set up Node.js
|
|
15
|
-
uses: actions/setup-node@v4
|
|
16
|
-
with:
|
|
17
|
-
node-version: "22.12.0"
|
|
18
|
-
cache: "npm"
|
|
19
|
-
|
|
20
|
-
- name: Install dependencies
|
|
21
|
-
run: npm ci
|
|
22
|
-
|
|
23
|
-
- name: Check code format
|
|
24
|
-
run: npm run check-format
|
|
25
|
-
|
|
26
|
-
- name: Run linter
|
|
27
|
-
run: npm run lint
|
|
28
|
-
|
|
29
|
-
- name: Run tests
|
|
30
|
-
run: npm run test
|
|
31
|
-
|
|
32
|
-
- name: Test compilation
|
|
33
|
-
run: npm run test-compile
|
|
34
|
-
|
|
35
|
-
install-without-lock:
|
|
36
|
-
runs-on: ubuntu-latest
|
|
37
|
-
steps:
|
|
38
|
-
- name: Checkout repository
|
|
39
|
-
uses: actions/checkout@v4
|
|
40
|
-
|
|
41
|
-
- name: Set up Node.js
|
|
42
|
-
uses: actions/setup-node@v4
|
|
43
|
-
with:
|
|
44
|
-
node-version: "22.12.0"
|
|
45
|
-
cache: "npm"
|
|
46
|
-
|
|
47
|
-
- name: Remove package lock
|
|
48
|
-
run: rm package-lock.json
|
|
49
|
-
|
|
50
|
-
- name: Install dependencies without lock
|
|
51
|
-
run: npm install
|
|
52
|
-
|
|
53
|
-
- name: Run tests
|
|
54
|
-
run: npm run test
|
|
55
|
-
|
|
56
|
-
- name: Test compilation
|
|
57
|
-
run: npm run test-compile
|
package/.husky/commit-msg
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
#!/usr/bin/env sh
|
|
2
|
-
. "$(dirname -- "$0")/_/husky.sh"
|
|
3
|
-
|
|
4
|
-
echo "Checking commit message"
|
|
5
|
-
|
|
6
|
-
# Check for issue number
|
|
7
|
-
|
|
8
|
-
commit_regex='#[0-9]'
|
|
9
|
-
error_msg="Aborting commit. Your commit message is missing a '#xxx' reference to a corresponding GitHub issue. Add '--no-verify' to your git commit command if you wish to skip this check."
|
|
10
|
-
|
|
11
|
-
if ! grep -iqE "$commit_regex" "$1"; then
|
|
12
|
-
echo "$error_msg" >&2
|
|
13
|
-
exit 1
|
|
14
|
-
fi
|
|
15
|
-
|
|
16
|
-
# Check for Conventional Commits format
|
|
17
|
-
|
|
18
|
-
npx commitlint --edit $1
|
package/.husky/pre-commit
DELETED
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
#!/bin/sh
|
|
2
|
-
. "$(dirname "$0")/_/husky.sh"
|
|
3
|
-
|
|
4
|
-
echo '🏗️👷 Checking your project before committing'
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
echo 'Checking findable-ui'
|
|
8
|
-
|
|
9
|
-
# Check Prettier
|
|
10
|
-
npm run check-format ||
|
|
11
|
-
(
|
|
12
|
-
echo '🤔 Prettier Check Failed. Run npx prettier --write . try commit again.';
|
|
13
|
-
false;
|
|
14
|
-
)
|
|
15
|
-
|
|
16
|
-
# Check ESLint
|
|
17
|
-
npm run lint ||
|
|
18
|
-
(
|
|
19
|
-
echo '🤔 ESLint Check Failed. Make the required changes listed above, add changes and try to commit again.'
|
|
20
|
-
false;
|
|
21
|
-
)
|
|
22
|
-
|
|
23
|
-
# Run tests
|
|
24
|
-
npm test ||
|
|
25
|
-
(
|
|
26
|
-
echo 'Tests failed';
|
|
27
|
-
false;
|
|
28
|
-
)
|
|
29
|
-
|
|
30
|
-
# Check Black (Python formatter)
|
|
31
|
-
python -m black backend --check ||
|
|
32
|
-
(
|
|
33
|
-
echo '🤔 Black Check Failed. Run: python -m black backend';
|
|
34
|
-
false;
|
|
35
|
-
)
|
|
36
|
-
|
|
37
|
-
# Check TypeScript
|
|
38
|
-
npm run test-compile ||
|
|
39
|
-
(
|
|
40
|
-
echo 'TypeScript compile failed';
|
|
41
|
-
false;
|
|
42
|
-
)
|
|
43
|
-
echo 'TypeScript compile succeeded!'
|
package/.prettierignore
DELETED
package/.prettierrc.json
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{}
|