Merge pull request #8 from i-VRESSE/dialog-on-top

Dialog on top

README.md

@@ -1,6 +1,6 @@
 # React components for/from haddock3 webapp
 
-[![github repo badge](https://img.shields.io/badge/github-repo-000.svg?logo=github&labelColor=gray&color=blue)]([https://github.com/i-VRESSE/haddock3-ui](https://github.com/i-VRESSE/haddock3-ui))
+[![github repo badge](https://img.shields.io/badge/github-repo-000.svg?logo=github&labelColor=gray&color=blue)](https://github.com/i-VRESSE/haddock3-ui)
 [![npmjs.com](https://img.shields.io/npm/v/@i-vresse/haddock3-ui.svg?style=flat)](https://www.npmjs.com/package/@i-vresse/haddock3-ui)
 [![CI lint](https://github.com/i-VRESSE/haddock3-ui/actions/workflows/lint.yml/badge.svg)](https://github.com/i-VRESSE/haddock3-ui/actions/workflows/lint.yml)
 [![CI test](https://github.com/i-VRESSE/haddock3-ui/actions/workflows/test.yml/badge.svg)](https://github.com/i-VRESSE/haddock3-ui/actions/workflows/test.yml)
@@ -15,6 +15,7 @@ The [haddock3 web application](https://github.com/i-VRESSE/haddock3-webapp) had
 - Components to render a 3D molecular structure from [PDB file](https://www.wwpdb.org/) using [NGL](https://nglviewer.org/)
 - Components to select residues in a molecule either passive or active
 - Components to handle files
+- Components to render clusters or structures in a sortable table
 
 ## Installation
 
@@ -42,9 +43,11 @@ you can make use the included css file `import "@i-vresse/haddock3-ui/dist/index
 
 ## Usage
 
-See [sidebar](https://i-VRESSE.github.io/haddock3-ui) for a list of all components.
+Stories of the components can be found at [https://i-VRESSE.github.io/haddock3-ui](https://i-VRESSE.github.io/haddock3-ui).
+
+See the [sidebar](https://i-VRESSE.github.io/haddock3-ui) for a list of all component stories.
 Once component is selected
-- interact with component
+- interact with component story
 - use `</>` button in footer to see the code.
 - use sliders icon button in footer to change props when available
 

package.json

@@ -1,11 +1,11 @@
 {
   "name": "@i-vresse/haddock3-ui",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "type": "module",
   "private": false,
   "sideEffects": false,
   "license": "Apache-2.0",
-  "homepage": "https://github.com/i-VRESSE/haddock3-ui#readme",
+  "homepage": "https://i-vresse.github.io/haddock3-ui",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/i-VRESSE/haddock3-ui.git"
@@ -64,7 +64,7 @@
     "vite-plugin-dts": "^3.9.1",
     "vitest": "^2.0.5"
   },
-  "files": ["dist", "src"],
+  "files": ["dist", "src", "!src/**/*.stories.tsx", "!src/**/*.test.ts"],
   "module": "dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {

src/DialogViewer.tsx

@@ -48,7 +48,7 @@ export function DialogViewer({
       <dialog
         open={dialogOpen}
         className={cn(
-          "-translate-x-1/2 -translate-y-1/2 fixed top-1/2 left-1/2 h-3/4 w-3/4 transform drop-shadow-xl",
+          "-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",
           classNameDialog,
         )}
       >

src/index.tsx

@@ -10,6 +10,9 @@ export { PickIn3D, ResiduesSelect } from "./toggles.js";
 export { CopyToClipBoardIcon } from "./CopyToClipBoardIcon.js";
 export { LinkToFile } from "./LinkToFile.js";
 export { HiddenFileInput } from "./HiddenFileInput.js";
+export { DialogViewer } from "./DialogViewer.js";
+export { ClusterTable } from "./table/ClusterTable.js";
+export { StructureTable } from "./table/StructureTable.js";
 // Other components and types can be imported using
 // for example
 // import { useChunked } from "@i-vresse/haddock3-ui/useChunked"