refactor!: migrate to TypeScript

.eslintrc.yml

@@ -1,8 +1,7 @@
 extends:
+  - cheminfo-typescript
   - cheminfo-react
   - plugin:storybook/recommended
 rules:
   react/jsx-no-bind: off
   consistent-return: off
-env:
-  jest: true

.github/workflows/nodejs.yml

@@ -10,3 +10,5 @@ jobs:
   nodejs:
     # Documentation: https://github.com/zakodium/workflows#nodejs-ci
     uses: zakodium/workflows/.github/workflows/nodejs.yml@nodejs-v1
+    with:
+      lint-check-types: true

.storybook/main.mjs

@@ -1,5 +1,5 @@
 export default {
-  stories: ['../stories/**/*.stories.jsx'],
+  stories: ['../stories/**/*.stories.tsx'],
 
   addons: [
     '@storybook/addon-storysource',

base.d.ts

@@ -1,24 +1,12 @@
-import {
-  IIdcodeSvgRendererProps as IdcodeProps,
-  IMolfileSvgRendererProps as MolfileProps,
-  ISmilesSvgRendererProps as SmilesProps,
-} from './types';
-
-export interface IIdcodeSvgRendererProps extends IdcodeProps {
-  OCL: any;
-}
-export function IdcodeSvgRenderer(
-  props: IIdcodeSvgRendererProps,
-): JSX.Element;
-
-export interface IMolfileSvgRendererProps extends MolfileProps {
-  OCL: any;
-}
-export function MolfileSvgRenderer(
-  props: IMolfileSvgRendererProps,
-): JSX.Element;
-
-export interface ISmilesSvgRendererProps extends SmilesProps {
-  OCL: any;
-}
-export function SmilesSvgRenderer(props: ISmilesSvgRendererProps): JSX.Element;
+export {
+  type BaseIdcodeSvgRendererProps,
+  default as BaseIdcodeSvgRenderer,
+} from './lib/components/IdcodeSvgRenderer.d.ts';
+export {
+  type BaseMolfileSvgRendererProps,
+  default as BaseMolfileSvgRenderer,
+} from './lib/components/MolfileSvgRenderer.d.ts';
+export {
+  type BaseSmilesSvgRendererProps,
+  default as BaseSmilesSvgRenderer,
+} from './lib/components/SmilesSvgRenderer.d.ts';

core.d.ts

@@ -1 +1 @@
-export * from './minimal';
+export * from './minimal.d.ts';

full.d.ts

@@ -1,2 +1,5 @@
 export * from './core';
-export { IStructureEditorProps, StructureEditor } from './types';
+export {
+  type StructureEditorProps,
+  default as StructureEditor,
+} from './src/components/StructureEditor';

minimal.d.ts

@@ -1,9 +1,9 @@
 export {
-  IBaseSvgRendererProps,
-  IIdcodeSvgRendererProps,
-  IMolfileSvgRendererProps,
-  ISmilesSvgRendererProps,
+  type BaseSvgRendererProps,
+  type IdcodeSvgRendererProps,
   IdcodeSvgRenderer,
+  type MolfileSvgRendererProps,
   MolfileSvgRenderer,
+  type SmilesSvgRendererProps,
   SmilesSvgRenderer,
-} from './types';
+} from './lib/index.d.ts';

package.json

@@ -8,6 +8,7 @@
     "ocl",
     "openchemlib"
   ],
+  "type": "module",
   "files": [
     "lib",
     "lib-cjs",
@@ -22,8 +23,7 @@
     "full.cjs",
     "minimal.d.ts",
     "minimal.mjs",
-    "minimal.cjs",
-    "types.d.ts"
+    "minimal.cjs"
   ],
   "main": "minimal.cjs",
   "module": "minimal.mjs",
@@ -34,6 +34,11 @@
       "require": "./minimal.cjs",
       "default": "./minimal.mjs"
     },
+    "./base": {
+      "types": "./base.d.ts",
+      "require": "./base.cjs",
+      "default": "./base.mjs"
+    },
     "./minimal": {
       "types": "./minimal.d.ts",
       "require": "./minimal.cjs",
@@ -59,17 +64,18 @@
   "author": "Michaël Zasso <[email protected]>",
   "scripts": {
     "build-storybook": "storybook build",
-    "compile": "babel src --out-dir lib --ignore src/**/__tests__ --quiet --source-maps",
-    "postcompile": "echo '{\"type\":\"module\"}' > lib/package.json",
-    "compile-cjs": "cross-env NODE_ENV=cjs babel src --out-dir lib-cjs --ignore src/**/__tests__ --quiet --source-maps",
+    "check-types": "tsc --noEmit",
+    "compile": "tsc -p tsconfig.esm.json",
+    "compile-cjs": "tsc -p tsconfig.cjs.json",
+    "postcompile-cjs": "echo '{\"type\":\"commonjs\"}' > lib-cjs/package.json",
     "dev": "storybook dev -p 6006",
     "eslint": "eslint src stories",
     "eslint-fix": "npm run eslint -- --fix",
     "prepack": "npm run compile && npm run compile-cjs",
     "prettier": "prettier --check src",
     "prettier-write": "prettier --write src",
-    "test": "npm run test-only && npm run eslint && npm run prettier",
-    "test-only": "cross-env NODE_ENV=test jest"
+    "test": "npm run test-only && npm run check-types && npm run eslint && npm run prettier",
+    "test-only": "vitest run"
   },
   "prettier": {
     "arrowParens": "always",
@@ -85,29 +91,25 @@
     "react-dom": ">=18"
   },
   "devDependencies": {
-    "@babel/cli": "^7.25.7",
-    "@babel/core": "^7.25.7",
-    "@babel/plugin-transform-modules-commonjs": "^7.25.7",
-    "@babel/preset-react": "^7.25.7",
     "@storybook/addon-essentials": "^8.3.5",
     "@storybook/addon-links": "^8.3.5",
     "@storybook/addon-storysource": "^8.3.5",
     "@storybook/react": "^8.3.5",
     "@storybook/react-vite": "^8.3.5",
+    "@types/react-test-renderer": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.2",
-    "babel-jest": "^29.7.0",
-    "babel-loader": "^9.2.1",
-    "cross-env": "^7.0.3",
     "eslint": "^8.56.0",
     "eslint-config-cheminfo-react": "^10.1.0",
+    "eslint-config-cheminfo-typescript": "^13.0.0",
     "eslint-plugin-storybook": "^0.9.0",
-    "jest": "^29.7.0",
     "openchemlib": "^8.15.0",
     "prettier": "^3.3.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-test-renderer": "^18.3.1",
     "storybook": "^8.3.5",
-    "vite": "^5.4.8"
+    "typescript": "^5.6.3",
+    "vite": "^5.4.8",
+    "vitest": "^2.1.2"
   }
 }

src/components/ErrorRenderer.jsx → src/components/ErrorRenderer.tsx

@@ -1,4 +1,16 @@
-export function ErrorRenderer(props) {
+import type { ComponentType } from 'react';
+
+import type { ErrorComponentProps } from './types.js';
+
+interface ErrorRendererProps {
+  width?: number;
+  height?: number;
+  value: string;
+  error: Error;
+  ErrorComponent: ComponentType<ErrorComponentProps>;
+}
+
+export function ErrorRenderer(props: ErrorRendererProps) {
   const { width = 300, height = 150, value, error, ErrorComponent } = props;
   return (
     <div style={{ width, height }}>
@@ -12,7 +24,11 @@ export function ErrorRenderer(props) {
   );
 }
 
-export function DefaultErrorRenderer(props) {
+export function DefaultErrorRenderer(props: {
+  width: number;
+  height: number;
+  message: string;
+}) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"

src/components/IdcodeSvgRenderer.jsx → src/components/IdcodeSvgRenderer.tsx

@@ -1,11 +1,22 @@
-import { memo } from 'react';
+import type OCL from 'openchemlib/minimal';
+import { memo, type ReactElement } from 'react';
 
 import { useHandleMemoError } from '../hooks/useHandleMemoError.js';
 
 import { DefaultErrorRenderer, ErrorRenderer } from './ErrorRenderer.js';
 import SvgRenderer from './SvgRenderer.js';
+import type { BaseSvgRendererProps } from './types.js';
 
-function IdcodeSvgRenderer(props) {
+export interface IdcodeSvgRendererProps extends BaseSvgRendererProps {
+  idcode: string;
+  coordinates?: string;
+}
+
+export interface BaseIdcodeSvgRendererProps extends IdcodeSvgRendererProps {
+  OCL: typeof OCL;
+}
+
+function IdcodeSvgRenderer(props: BaseIdcodeSvgRendererProps): ReactElement {
   let {
     OCL,
     idcode,
@@ -33,8 +44,12 @@ function IdcodeSvgRenderer(props) {
 
 export default memo(IdcodeSvgRenderer);
 
-function DefaultIdcodeErrorComponent(props) {
+function DefaultIdcodeErrorComponent(props: { width: number; height: number }) {
   return (
-    <DefaultErrorRenderer height={props.height} message="Invalid ID code" />
+    <DefaultErrorRenderer
+      width={props.width}
+      height={props.height}
+      message="Invalid ID code"
+    />
   );
 }

src/components/MolfileSvgRenderer.jsx → src/components/MolfileSvgRenderer.tsx

@@ -1,11 +1,21 @@
-import { memo } from 'react';
+import type OCL from 'openchemlib/minimal';
+import { memo, type ReactElement } from 'react';
 
 import { useHandleMemoError } from '../hooks/useHandleMemoError.js';
 
 import { DefaultErrorRenderer, ErrorRenderer } from './ErrorRenderer.js';
 import SvgRenderer from './SvgRenderer.js';
+import type { BaseSvgRendererProps } from './types.js';
 
-function MolfileSvgRenderer(props) {
+export interface MolfileSvgRendererProps extends BaseSvgRendererProps {
+  molfile: string;
+}
+
+export interface BaseMolfileSvgRendererProps extends MolfileSvgRendererProps {
+  OCL: typeof OCL;
+}
+
+function MolfileSvgRenderer(props: BaseMolfileSvgRendererProps): ReactElement {
   const {
     OCL,
     molfile,
@@ -32,8 +42,15 @@ function MolfileSvgRenderer(props) {
 
 export default memo(MolfileSvgRenderer);
 
-function DefaultMolfileErrorComponent(props) {
+function DefaultMolfileErrorComponent(props: {
+  width: number;
+  height: number;
+}) {
   return (
-    <DefaultErrorRenderer height={props.height} message="Invalid Molfile" />
+    <DefaultErrorRenderer
+      width={props.width}
+      height={props.height}
+      message="Invalid Molfile"
+    />
   );
 }

src/components/SmilesSvgRenderer.jsx → src/components/SmilesSvgRenderer.tsx

@@ -1,11 +1,23 @@
-import { memo } from 'react';
+import type OCL from 'openchemlib/minimal';
+import { memo, type ReactElement } from 'react';
 
 import { useHandleMemoError } from '../hooks/useHandleMemoError.js';
 
 import { DefaultErrorRenderer, ErrorRenderer } from './ErrorRenderer.js';
 import SvgRenderer from './SvgRenderer.js';
+import type { BaseSvgRendererProps } from './types.js';
 
-function SmilesSvgRenderer(props) {
+export interface SmilesSvgRendererProps extends BaseSvgRendererProps {
+  smiles: string;
+}
+
+export interface BaseSmilesSvgRendererProps extends SmilesSvgRendererProps {
+  OCL: typeof OCL;
+}
+
+function BaseSmilesSvgRenderer(
+  props: BaseSmilesSvgRendererProps,
+): ReactElement {
   const {
     OCL,
     smiles,
@@ -30,10 +42,14 @@ function SmilesSvgRenderer(props) {
   return <SvgRenderer mol={mol} {...otherProps} />;
 }
 
-export default memo(SmilesSvgRenderer);
+export default memo(BaseSmilesSvgRenderer);
 
-function DefaultSmilesErrorComponent(props) {
+function DefaultSmilesErrorComponent(props: { width: number; height: number }) {
   return (
-    <DefaultErrorRenderer height={props.height} message="Invalid SMILES" />
+    <DefaultErrorRenderer
+      width={props.width}
+      height={props.height}
+      message="Invalid SMILES"
+    />
   );
 }