@i-vresse/haddock3-ui 0.2.1 → 0.3.0
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/README.md +27 -4
- package/dist/DialogViewer.js +3 -3
- package/dist/DialogViewer.js.map +1 -1
- package/dist/index.css +1 -1
- package/dist/index.d.ts +3 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +3 -0
- package/dist/index.js.map +1 -1
- package/dist/molviewer.js +2 -2
- package/dist/molviewer.js.map +1 -1
- package/dist/report.bundle.js +5263 -0
- package/dist/report.d.ts +21 -0
- package/dist/report.d.ts.map +1 -0
- package/dist/report.js +27 -0
- package/dist/report.js.map +1 -0
- package/dist/table/SortableTable.js +2 -2
- package/dist/toggles.d.ts +2 -2
- package/dist/toggles.d.ts.map +1 -1
- package/dist/toggles.js +1 -1
- package/dist/toggles.js.map +1 -1
- package/package.json +20 -4
- package/src/DialogViewer.tsx +5 -5
- package/src/index.tsx +3 -0
- package/src/molviewer.tsx +2 -2
- package/src/report.tsx +37 -0
- package/src/table/SortableTable.tsx +2 -2
- package/src/toggles.tsx +3 -2
- package/src/CopyToClipBoardIcon.stories.tsx +0 -5
- package/src/HiddenFileInput.stories.tsx +0 -30
- package/src/LinkToFile.stories.tsx +0 -20
- package/src/ResiduesSelect.stories.tsx +0 -417
- package/src/hetero.test.ts +0 -1368
- package/src/table/SortableTable.test.ts +0 -87
- package/src/toggles/ResidueHeader.stories.tsx +0 -15
- package/src/useChunked.test.ts +0 -33
package/dist/report.d.ts
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { type Container } from "react-dom/client";
|
|
2
|
+
import { type Cluster } from "./table/ClusterTable.js";
|
|
3
|
+
import type { Header } from "./table/SortableTable.js";
|
|
4
|
+
import { type Structure } from "./table/StructureTable.js";
|
|
5
|
+
/**
|
|
6
|
+
* Renders a `ClusterTable` component inside the specified container.
|
|
7
|
+
*
|
|
8
|
+
* @param container - The DOM container where the `ClusterTable` will be rendered.
|
|
9
|
+
* @param headers - An array of header objects to be used in the `ClusterTable`.
|
|
10
|
+
* @param clusters - An array of cluster objects to be displayed in the `ClusterTable`.
|
|
11
|
+
*/
|
|
12
|
+
export declare function renderClusterTable(container: Container, headers: Header[], clusters: Cluster[]): void;
|
|
13
|
+
/**
|
|
14
|
+
* Renders a `StructureTable` component inside the specified container.
|
|
15
|
+
*
|
|
16
|
+
* @param container - The DOM container where the `StructureTable` will be rendered.
|
|
17
|
+
* @param headers - An array of header objects to be used in the `StructureTable`.
|
|
18
|
+
* @param structures - An array of structure objects to be displayed in the `StructureTable`.
|
|
19
|
+
*/
|
|
20
|
+
export declare function renderStructureTable(container: Container, headers: Header[], structures: Structure[]): void;
|
|
21
|
+
//# sourceMappingURL=report.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"report.d.ts","sourceRoot":"","sources":["../src/report.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAc,MAAM,kBAAkB,CAAC;AAE9D,OAAO,EAAE,KAAK,OAAO,EAAgB,MAAM,yBAAyB,CAAC;AACrE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,KAAK,SAAS,EAAkB,MAAM,2BAA2B,CAAC;AAE3E;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAChC,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,MAAM,EAAE,EACjB,QAAQ,EAAE,OAAO,EAAE,QAIpB;AAED;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAClC,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,MAAM,EAAE,EACjB,UAAU,EAAE,SAAS,EAAE,QAIxB"}
|
package/dist/report.js
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { createRoot } from "react-dom/client";
|
|
3
|
+
import { ClusterTable } from "./table/ClusterTable.js";
|
|
4
|
+
import { StructureTable } from "./table/StructureTable.js";
|
|
5
|
+
/**
|
|
6
|
+
* Renders a `ClusterTable` component inside the specified container.
|
|
7
|
+
*
|
|
8
|
+
* @param container - The DOM container where the `ClusterTable` will be rendered.
|
|
9
|
+
* @param headers - An array of header objects to be used in the `ClusterTable`.
|
|
10
|
+
* @param clusters - An array of cluster objects to be displayed in the `ClusterTable`.
|
|
11
|
+
*/
|
|
12
|
+
export function renderClusterTable(container, headers, clusters) {
|
|
13
|
+
const root = createRoot(container);
|
|
14
|
+
root.render(_jsx(ClusterTable, { headers: headers, clusters: clusters }));
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* Renders a `StructureTable` component inside the specified container.
|
|
18
|
+
*
|
|
19
|
+
* @param container - The DOM container where the `StructureTable` will be rendered.
|
|
20
|
+
* @param headers - An array of header objects to be used in the `StructureTable`.
|
|
21
|
+
* @param structures - An array of structure objects to be displayed in the `StructureTable`.
|
|
22
|
+
*/
|
|
23
|
+
export function renderStructureTable(container, headers, structures) {
|
|
24
|
+
const root = createRoot(container);
|
|
25
|
+
root.render(_jsx(StructureTable, { headers: headers, structures: structures }));
|
|
26
|
+
}
|
|
27
|
+
//# sourceMappingURL=report.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"report.js","sourceRoot":"","sources":["../src/report.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkB,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9D,OAAO,EAAgB,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAErE,OAAO,EAAkB,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3E;;;;;;GAMG;AACH,MAAM,UAAU,kBAAkB,CAChC,SAAoB,EACpB,OAAiB,EACjB,QAAmB;IAEnB,MAAM,IAAI,GAAG,UAAU,CAAC,SAAS,CAAC,CAAC;IACnC,IAAI,CAAC,MAAM,CAAC,KAAC,YAAY,IAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAC,CAAC;AACtE,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,oBAAoB,CAClC,SAAoB,EACpB,OAAiB,EACjB,UAAuB;IAEvB,MAAM,IAAI,GAAG,UAAU,CAAC,SAAS,CAAC,CAAC;IACnC,IAAI,CAAC,MAAM,CAAC,KAAC,cAAc,IAAC,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,UAAU,GAAI,CAAC,CAAC;AAC5E,CAAC"}
|
|
@@ -40,7 +40,7 @@ function HeaderContent({ header, sortState, setSortState, orientation, className
|
|
|
40
40
|
direction: header.sorted || "asc",
|
|
41
41
|
});
|
|
42
42
|
}
|
|
43
|
-
return (_jsxs("th", { scope: scope, className: cn({ "cursor-pointer
|
|
43
|
+
return (_jsxs("th", { scope: scope, className: cn({ "group cursor-pointer": header2.sortable }, className), ...thProps, children: [_jsx("span", { children: header2.label }), _jsx("span", { children: "\u00A0" }), _jsx("span", { className: cn({
|
|
44
44
|
"opacity-25 group-hover:opacity-100": header2.sortable && header.key !== sortState.key,
|
|
45
45
|
}), children: icon })] }));
|
|
46
46
|
}
|
|
@@ -133,7 +133,7 @@ export function SortableTable({ orientation = "top", headers, data, className =
|
|
|
133
133
|
return (_jsx("div", { className: cn("", className), children: _jsxs("table", { className: cn("caption-bottom text-sm", tableClassName), children: [_jsx("thead", { className: cn("&_tr]:border-b", theadClassName), children: _jsx("tr", { className: cn("border-b transition-colors hover:bg-muted/50", trClassName), children: headers.map((header) => (_jsx(HeaderContent, { header: header, sortState: sortState, setSortState: setSortState, orientation: orientation, className: cn("h-12 px-4 text-left align-middle font-medium text-muted-foreground", thClassName) }, header.key))) }) }), _jsx("tbody", { className: cn("[&_tr:last-child]:border-0", tbodyClassName), children: sortedData.map((row) => (_jsx("tr", { className: cn("border-b transition-colors hover:bg-muted/50", trClassName), children: headers.map((header) => (_jsx("td", { className: cn("p-4 align-middle", tdClassName), children: _jsx(CellContent, { data: row, header: header }) }, `${itemKeyFinder(row, itemKey)}-${header.key}`))) }, itemKeyFinder(row, itemKey)))) })] }) }));
|
|
134
134
|
}
|
|
135
135
|
else {
|
|
136
|
-
return (_jsx("div", { className: cn("", className), children: _jsxs("table", { className: cn("caption-bottom text-sm", tableClassName), children: [_jsx("thead", { className: cn("", theadClassName) }), _jsx("tbody", { className: cn("", tbodyClassName), children: headers.map((header) => (_jsxs("tr", { className: cn("transition-colors", trClassName), children: [_jsx(HeaderContent, { header: header, sortState: sortState, setSortState: setSortState, orientation: orientation, className: cn("border-r
|
|
136
|
+
return (_jsx("div", { className: cn("", className), children: _jsxs("table", { className: cn("caption-bottom text-sm", tableClassName), children: [_jsx("thead", { className: cn("", theadClassName) }), _jsx("tbody", { className: cn("", tbodyClassName), children: headers.map((header) => (_jsxs("tr", { className: cn("transition-colors", trClassName), children: [_jsx(HeaderContent, { header: header, sortState: sortState, setSortState: setSortState, orientation: orientation, className: cn("h-12 border-r px-4 text-left align-middle font-medium text-muted-foreground", thClassName) }, header.key), sortedData.map((col, index) => (_jsx("td", { className: cn("p-4 align-middle", { "border-r": index < sortedData.length - 1 }, tdClassName), children: _jsx(CellContent, { data: col, header: header }) }, `${itemKeyFinder(col, itemKey)}-${header.key}`)))] }, header.key))) })] }) }));
|
|
137
137
|
}
|
|
138
138
|
}
|
|
139
139
|
//# sourceMappingURL=SortableTable.js.map
|
package/dist/toggles.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type ChangeEvent, type PropsWithChildren } from "react";
|
|
1
|
+
import { type ChangeEvent, type PropsWithChildren, type ReactNode } from "react";
|
|
2
2
|
/**
|
|
3
3
|
* Hook for handling residue selection change.
|
|
4
4
|
*/
|
|
@@ -21,7 +21,7 @@ export interface Residue {
|
|
|
21
21
|
seq: string;
|
|
22
22
|
surface?: boolean;
|
|
23
23
|
}
|
|
24
|
-
export declare function FormDescription({ children }: PropsWithChildren):
|
|
24
|
+
export declare function FormDescription({ children }: PropsWithChildren): ReactNode;
|
|
25
25
|
/**
|
|
26
26
|
* Renders a checkboxes component for a residue.
|
|
27
27
|
*
|
package/dist/toggles.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toggles.d.ts","sourceRoot":"","sources":["../src/toggles.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,WAAW,EAChB,KAAK,iBAAiB,
|
|
1
|
+
{"version":3,"file":"toggles.d.ts","sourceRoot":"","sources":["../src/toggles.tsx"],"names":[],"mappings":"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"}
|
package/dist/toggles.js
CHANGED
|
@@ -10,7 +10,7 @@ import { useChunked } from "./useChunked.js";
|
|
|
10
10
|
export function useResidueChangeHandler({ selected, options, onChange, filter = () => true, }) {
|
|
11
11
|
const [lastChecked, setLastChecked] = useState(null);
|
|
12
12
|
const handler = useCallback((e, index, actpass) => {
|
|
13
|
-
const residue = parseInt(e.target.value);
|
|
13
|
+
const residue = Number.parseInt(e.target.value);
|
|
14
14
|
const ne = e.nativeEvent;
|
|
15
15
|
let newSelected = [];
|
|
16
16
|
if (ne.shiftKey && lastChecked !== null) {
|
package/dist/toggles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toggles.js","sourceRoot":"","sources":["../src/toggles.tsx"],"names":[],"mappings":";AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"toggles.js","sourceRoot":"","sources":["../src/toggles.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@i-vresse/haddock3-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"private": false,
|
|
6
6
|
"sideEffects": false,
|
|
7
7
|
"license": "Apache-2.0",
|
|
8
|
-
"homepage": "https://github.
|
|
8
|
+
"homepage": "https://i-vresse.github.io/haddock3-ui",
|
|
9
9
|
"repository": {
|
|
10
10
|
"type": "git",
|
|
11
11
|
"url": "git+https://github.com/i-VRESSE/haddock3-ui.git"
|
|
@@ -38,6 +38,7 @@
|
|
|
38
38
|
"@vitest/browser": "^2.0.5",
|
|
39
39
|
"@vitest/coverage-istanbul": "^2.0.5",
|
|
40
40
|
"autoprefixer": "^10.4.19",
|
|
41
|
+
"esbuild": "^0.23.1",
|
|
41
42
|
"playwright": "^1.46.0",
|
|
42
43
|
"postcss": "^8.4.40",
|
|
43
44
|
"sync-fetch": "^0.5.2",
|
|
@@ -50,7 +51,9 @@
|
|
|
50
51
|
},
|
|
51
52
|
"files": [
|
|
52
53
|
"dist",
|
|
53
|
-
"src"
|
|
54
|
+
"src",
|
|
55
|
+
"!src/**/*.stories.tsx",
|
|
56
|
+
"!src/**/*.test.ts"
|
|
54
57
|
],
|
|
55
58
|
"module": "dist/index.js",
|
|
56
59
|
"types": "./dist/index.d.ts",
|
|
@@ -113,6 +116,18 @@
|
|
|
113
116
|
"default": "./dist/molviewer.js"
|
|
114
117
|
}
|
|
115
118
|
},
|
|
119
|
+
"./report.bundle": {
|
|
120
|
+
"import": {
|
|
121
|
+
"types": "./dist/report.d.ts",
|
|
122
|
+
"default": "./dist/report.bundle.js"
|
|
123
|
+
}
|
|
124
|
+
},
|
|
125
|
+
"./report": {
|
|
126
|
+
"import": {
|
|
127
|
+
"types": "./dist/report.d.ts",
|
|
128
|
+
"default": "./dist/report.js"
|
|
129
|
+
}
|
|
130
|
+
},
|
|
116
131
|
"./toggles": {
|
|
117
132
|
"import": {
|
|
118
133
|
"types": "./dist/toggles.d.ts",
|
|
@@ -165,10 +180,11 @@
|
|
|
165
180
|
},
|
|
166
181
|
"scripts": {
|
|
167
182
|
"dev": "ladle serve",
|
|
168
|
-
"build": "pnpm run build:js && pnpm build:css && pnpm build:package",
|
|
183
|
+
"build": "pnpm run build:js && pnpm build:css && pnpm build:bundle && pnpm build:package",
|
|
169
184
|
"build:js": "tsc --project tsconfig.build.json",
|
|
170
185
|
"build:package": "node build.mjs && pnpm format package.json",
|
|
171
186
|
"build:css": "tailwindcss --content './src/**/*.{js,ts,jsx,tsx,mdx}' -i .ladle/index.css -o dist/index.css --minify",
|
|
187
|
+
"build:bundle": "esbuild --bundle --format=esm --minify src/report.tsx --outfile=dist/report.bundle.js",
|
|
172
188
|
"typecheck": "tsc --noEmit",
|
|
173
189
|
"docs:ladle": "ladle build",
|
|
174
190
|
"docs:api": "typedoc",
|
package/src/DialogViewer.tsx
CHANGED
|
@@ -34,7 +34,7 @@ export function DialogViewer({
|
|
|
34
34
|
className={cn(
|
|
35
35
|
// classes from https://ui.shadcn.com/docs/components/button
|
|
36
36
|
// base
|
|
37
|
-
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm
|
|
37
|
+
"inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium text-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
|
|
38
38
|
//size=default
|
|
39
39
|
"h-9 px-4 py-2",
|
|
40
40
|
// variant=secondary
|
|
@@ -48,13 +48,13 @@ export function DialogViewer({
|
|
|
48
48
|
<dialog
|
|
49
49
|
open={dialogOpen}
|
|
50
50
|
className={cn(
|
|
51
|
-
"
|
|
51
|
+
"-translate-x-1/2 -translate-y-1/2 fixed top-1/2 left-1/2 z-10 h-3/4 w-3/4 transform drop-shadow-xl",
|
|
52
52
|
classNameDialog,
|
|
53
53
|
)}
|
|
54
54
|
>
|
|
55
|
-
<div className="w-full flex
|
|
55
|
+
<div className="flex w-full flex-row items-center justify-between">
|
|
56
56
|
<a
|
|
57
|
-
className={cn("hover:underline
|
|
57
|
+
className={cn("m-2 hover:underline", classNameTitle)}
|
|
58
58
|
href={url}
|
|
59
59
|
download={fileName}
|
|
60
60
|
>
|
|
@@ -64,7 +64,7 @@ export function DialogViewer({
|
|
|
64
64
|
className={cn(
|
|
65
65
|
// classes from https://ui.shadcn.com/docs/components/button
|
|
66
66
|
// base
|
|
67
|
-
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm
|
|
67
|
+
"inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium text-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
|
|
68
68
|
//size=default
|
|
69
69
|
"h-9 px-4 py-2",
|
|
70
70
|
// variant=ghost
|
package/src/index.tsx
CHANGED
|
@@ -10,6 +10,9 @@ export { PickIn3D, ResiduesSelect } from "./toggles.js";
|
|
|
10
10
|
export { CopyToClipBoardIcon } from "./CopyToClipBoardIcon.js";
|
|
11
11
|
export { LinkToFile } from "./LinkToFile.js";
|
|
12
12
|
export { HiddenFileInput } from "./HiddenFileInput.js";
|
|
13
|
+
export { DialogViewer } from "./DialogViewer.js";
|
|
14
|
+
export { ClusterTable } from "./table/ClusterTable.js";
|
|
15
|
+
export { StructureTable } from "./table/StructureTable.js";
|
|
13
16
|
// Other components and types can be imported using
|
|
14
17
|
// for example
|
|
15
18
|
// import { useChunked } from "@i-vresse/haddock3-ui/useChunked"
|
package/src/molviewer.tsx
CHANGED
|
@@ -421,7 +421,7 @@ export function NGLStage({
|
|
|
421
421
|
<div ref={stageElementRef} className="h-full w-full "></div>
|
|
422
422
|
{stage && (
|
|
423
423
|
<>
|
|
424
|
-
<div className="absolute right-4
|
|
424
|
+
<div className="absolute top-2 right-4 z-10">
|
|
425
425
|
<span
|
|
426
426
|
title="Center all"
|
|
427
427
|
className="h-5 w-5 cursor-pointer"
|
|
@@ -715,7 +715,7 @@ export function LigandViewer({
|
|
|
715
715
|
{highlight && (
|
|
716
716
|
<NGLResidues
|
|
717
717
|
// @ts-ignore highlight truthy is checked
|
|
718
|
-
residues={[parseInt(highlight.split("-")[2])]}
|
|
718
|
+
residues={[Number.parseInt(highlight.split("-")[2])]}
|
|
719
719
|
color={activeColor}
|
|
720
720
|
chain={highlight.split("-")[1]}
|
|
721
721
|
opacity={1.0}
|
package/src/report.tsx
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { type Container, createRoot } from "react-dom/client";
|
|
2
|
+
|
|
3
|
+
import { type Cluster, ClusterTable } from "./table/ClusterTable.js";
|
|
4
|
+
import type { Header } from "./table/SortableTable.js";
|
|
5
|
+
import { type Structure, StructureTable } from "./table/StructureTable.js";
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Renders a `ClusterTable` component inside the specified container.
|
|
9
|
+
*
|
|
10
|
+
* @param container - The DOM container where the `ClusterTable` will be rendered.
|
|
11
|
+
* @param headers - An array of header objects to be used in the `ClusterTable`.
|
|
12
|
+
* @param clusters - An array of cluster objects to be displayed in the `ClusterTable`.
|
|
13
|
+
*/
|
|
14
|
+
export function renderClusterTable(
|
|
15
|
+
container: Container,
|
|
16
|
+
headers: Header[],
|
|
17
|
+
clusters: Cluster[],
|
|
18
|
+
) {
|
|
19
|
+
const root = createRoot(container);
|
|
20
|
+
root.render(<ClusterTable headers={headers} clusters={clusters} />);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
/**
|
|
24
|
+
* Renders a `StructureTable` component inside the specified container.
|
|
25
|
+
*
|
|
26
|
+
* @param container - The DOM container where the `StructureTable` will be rendered.
|
|
27
|
+
* @param headers - An array of header objects to be used in the `StructureTable`.
|
|
28
|
+
* @param structures - An array of structure objects to be displayed in the `StructureTable`.
|
|
29
|
+
*/
|
|
30
|
+
export function renderStructureTable(
|
|
31
|
+
container: Container,
|
|
32
|
+
headers: Header[],
|
|
33
|
+
structures: Structure[],
|
|
34
|
+
) {
|
|
35
|
+
const root = createRoot(container);
|
|
36
|
+
root.render(<StructureTable headers={headers} structures={structures} />);
|
|
37
|
+
}
|
|
@@ -76,7 +76,7 @@ function HeaderContent({
|
|
|
76
76
|
return (
|
|
77
77
|
<th
|
|
78
78
|
scope={scope}
|
|
79
|
-
className={cn({ "cursor-pointer
|
|
79
|
+
className={cn({ "group cursor-pointer": header2.sortable }, className)}
|
|
80
80
|
{...thProps}
|
|
81
81
|
>
|
|
82
82
|
<span>{header2.label}</span>
|
|
@@ -307,7 +307,7 @@ export function SortableTable({
|
|
|
307
307
|
setSortState={setSortState}
|
|
308
308
|
orientation={orientation}
|
|
309
309
|
className={cn(
|
|
310
|
-
"border-r
|
|
310
|
+
"h-12 border-r px-4 text-left align-middle font-medium text-muted-foreground",
|
|
311
311
|
thClassName,
|
|
312
312
|
)}
|
|
313
313
|
/>
|
package/src/toggles.tsx
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import {
|
|
2
2
|
type ChangeEvent,
|
|
3
3
|
type PropsWithChildren,
|
|
4
|
+
type ReactNode,
|
|
4
5
|
useCallback,
|
|
5
6
|
useId,
|
|
6
7
|
useMemo,
|
|
@@ -35,7 +36,7 @@ export function useResidueChangeHandler({
|
|
|
35
36
|
const [lastChecked, setLastChecked] = useState<number | null>(null);
|
|
36
37
|
const handler = useCallback(
|
|
37
38
|
(e: ChangeEvent<HTMLInputElement>, index: number, actpass: ActPass) => {
|
|
38
|
-
const residue = parseInt(e.target.value);
|
|
39
|
+
const residue = Number.parseInt(e.target.value);
|
|
39
40
|
const ne = e.nativeEvent as KeyboardEvent;
|
|
40
41
|
let newSelected: number[] = [];
|
|
41
42
|
if (ne.shiftKey && lastChecked !== null) {
|
|
@@ -90,7 +91,7 @@ export interface Residue {
|
|
|
90
91
|
surface?: boolean;
|
|
91
92
|
}
|
|
92
93
|
|
|
93
|
-
export function FormDescription({ children }: PropsWithChildren):
|
|
94
|
+
export function FormDescription({ children }: PropsWithChildren): ReactNode {
|
|
94
95
|
return <p className="text-[0.8rem] text-muted-foreground">{children}</p>;
|
|
95
96
|
}
|
|
96
97
|
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import { Story, action } from "@ladle/react";
|
|
2
|
-
|
|
3
|
-
import { HiddenFileInput } from "./HiddenFileInput.js";
|
|
4
|
-
|
|
5
|
-
const file = new File(["Hello, world!"], "hello-world.txt", {
|
|
6
|
-
type: "text/plain",
|
|
7
|
-
});
|
|
8
|
-
|
|
9
|
-
export const Default: Story = () => (
|
|
10
|
-
<form
|
|
11
|
-
onSubmit={(e) => {
|
|
12
|
-
e.preventDefault();
|
|
13
|
-
const form = e.target as HTMLFormElement;
|
|
14
|
-
const formData = new FormData(form);
|
|
15
|
-
console.log("Form data:", formData);
|
|
16
|
-
action("submit")(formData);
|
|
17
|
-
}}
|
|
18
|
-
>
|
|
19
|
-
<HiddenFileInput name="myfile" file={file} />
|
|
20
|
-
<button
|
|
21
|
-
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
|
|
22
|
-
type="submit"
|
|
23
|
-
>
|
|
24
|
-
Submit
|
|
25
|
-
</button>
|
|
26
|
-
<p>
|
|
27
|
-
(After submit see DevTools console or log of events below for form data)
|
|
28
|
-
</p>
|
|
29
|
-
</form>
|
|
30
|
-
);
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { Story } from "@ladle/react";
|
|
2
|
-
|
|
3
|
-
import { LinkToFile } from "./LinkToFile.js";
|
|
4
|
-
|
|
5
|
-
const file = new File(["Hello, world!"], "hello-world.txt", {
|
|
6
|
-
type: "text/plain",
|
|
7
|
-
});
|
|
8
|
-
|
|
9
|
-
export const Default: Story = () => (
|
|
10
|
-
<LinkToFile file={file}>A link to a text file with hello world.</LinkToFile>
|
|
11
|
-
);
|
|
12
|
-
|
|
13
|
-
export const Styled: Story = () => (
|
|
14
|
-
<LinkToFile
|
|
15
|
-
file={file}
|
|
16
|
-
className="bg-green-400 no-underline hover:bg-green-500 p-4"
|
|
17
|
-
>
|
|
18
|
-
A link to a text file with hello world.
|
|
19
|
-
</LinkToFile>
|
|
20
|
-
);
|