Merge branch 'tsc-build'

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@i-vresse/haddock3-ui",
-	"version": "0.1.6",
+	"version": "0.1.7",
 	"type": "module",
 	"private": false,
 	"sideEffects": false,
@@ -15,7 +15,7 @@
 	},
 	"scripts": {
 		"dev": "ladle serve",
-		"build": "tsc --project tsconfig.build.json && node build.mjs",
+		"build": "tsc --project tsconfig.build.json && node build.mjs && pnpm format package.json",
 		"typecheck": "tsc --noEmit",
 		"docs:ladle": "ladle build",
 		"docs:api": "typedoc",
@@ -55,7 +55,7 @@
 		"vitest": "^2.0.5"
 	},
 	"files": ["dist", "src"],
-	"module": "dist/ndex.js",
+	"module": "dist/index.js",
 	"types": "./dist/index.d.ts",
 	"exports": {
 		"./CopyToClipBoardIcon": {

src/ResiduesSelect.stories.tsx

@@ -318,3 +318,58 @@ export const ResnameAsLabel: Story = () => {
 		/>
 	);
 };
+
+export const ResnameOrSeqAsLabel: Story = () => {
+	const { globalState } = useLadleContext();
+	const [selected, setSelected] = useState<ResidueNeighbourSelection>({
+		act: [3],
+		pass: [1],
+		neighbours: [],
+	});
+
+	const onChange = (selected: ResidueSelection) => {
+		setSelected({
+			...selected,
+			neighbours: [],
+		});
+	};
+
+	return (
+		<ResiduesSelect
+			showActive={true}
+			showPassive={true}
+			highlight={undefined}
+			options={[
+				{
+					resno: 1,
+					resname: "A",
+					seq: "A",
+					surface: true,
+				},
+				{
+					resno: 2,
+					resname: "T",
+					seq: "T",
+					surface: true,
+				},
+				{
+					resno: 3,
+					resname: "IML",
+					seq: "X",
+					surface: true,
+				},
+				{
+					resno: 4,
+					resname: "IP1",
+					seq: "X",
+					surface: true,
+				},
+			]}
+			selected={selected}
+			onChange={onChange}
+			onHover={action("onHover")}
+			theme={globalState.theme === "dark" ? "dark" : "light"}
+		/>
+	);
+};
+// TODO align checkboxes vertically