Fix package build

Author: craquet

package-lock.json

@@ -2,6 +2,8 @@
     "name": "react-fairdo-elastic-search",
     "version": "0.0.1",
     "private": true,
+    "main": "dist/index.js",
+    "type": "module",
     "author": {
         "name": "Christopher Raquet"
     },
@@ -19,10 +21,8 @@
         "modern"
     ],
     "scripts": {
-        "dev": "next dev",
-        "build": "next build",
-        "start": "next start",
-        "lint": "next lint"
+        "dev": "storybook dev",
+        "build": "tsc -p tsconfig.build.json && tsc-alias -p tsconfig.app.json && tailwind build -i src/index.css -o dist/index.css && cp ./src/elastic-ui.css ./dist"
     },
     "dependencies": {
         "@elastic/react-search-ui": "^1.22.0",
@@ -57,6 +57,9 @@
         "zustand": "^5.0.2"
     },
     "devDependencies": {
+        "@babel/core": "^7.26.0",
+        "@babel/preset-env": "^7.26.0",
+        "@babel/preset-react": "^7.26.3",
         "@chromatic-com/storybook": "^3.2.2",
         "@eslint-react/eslint-plugin": "^1.23.2",
         "@eslint/js": "^9.15.0",
@@ -73,16 +76,28 @@
         "@types/react-dom": "^18.3.1",
         "@vitejs/plugin-react": "^4.3.4",
         "autoprefixer": "^10.4.20",
+        "babel-loader": "^9.2.1",
         "chromatic": "^11.20.2",
+        "css-loader": "^7.1.2",
         "eslint": "^9.15.0",
         "eslint-plugin-react-hooks": "^5.0.0",
         "eslint-plugin-react-refresh": "^0.4.14",
         "eslint-plugin-storybook": "^0.11.1",
         "globals": "^15.12.0",
         "postcss": "^8.4.49",
+        "postcss-loader": "^8.1.1",
         "storybook": "^8.4.7",
+        "style-loader": "^4.0.0",
         "tailwindcss": "^3.4.16",
+        "ts-loader": "^9.5.2",
+        "tsc-alias": "^1.8.10",
         "typescript": "~5.6.2",
-        "typescript-eslint": "^8.15.0"
-    }
+        "typescript-eslint": "^8.15.0",
+        "webpack": "^5.97.1",
+        "webpack-cli": "^6.0.1"
+    },
+    "files": [
+        "dist"
+    ],
+    "types": "dist/index.d.ts"
 }

package.json

@@ -15,6 +15,7 @@ import { ErrorBoundary, Facet, Paging, PagingInfo, Results, ResultsPerPage, Sear
 import { Layout } from "@elastic/react-search-ui-views"
 import { LoaderCircle } from "lucide-react"
 import { useMemo } from "react"
+import "../index.css"
 import "../elastic-ui.css"
 
 /**

src/components/FairDOElasticSearch.tsx

@@ -51,7 +51,7 @@ export function DefaultFacet(props: FacetViewProps & { config: FairDOConfigProvi
                     <div key={value} className="flex max-w-full items-center gap-2 break-words p-1 pb-2">
                         <Checkbox id={value} checked={option.selected} onCheckedChange={(v) => (v ? props.onSelect(option.value.toString()) : props.onRemove(option.value.toString()))} />
                         <Label htmlFor={value} className="min-w-0 grow break-words">
-                            {value ? selfConfig.usePidResolver ? <PidDisplay pid={value} /> : tryURLPrettyPrint(value) : <span className="text-muted-foreground">None</span>}
+                            {value ? selfConfig?.usePidResolver ? <PidDisplay pid={value} /> : tryURLPrettyPrint(value) : <span className="text-muted-foreground">None</span>}
                         </Label>
                         <div className="text-xs text-muted-foreground">{option.count}</div>
                     </div>

src/components/result/ResultView.tsx

@@ -1,7 +1,7 @@
 import type { FairDOConfig } from "@/config/FairDOConfig.ts"
 
 import type { Meta, StoryObj } from "@storybook/react"
-import { FairDOElasticSearch } from "../components/FairDOElasticSearch.tsx"
+import { FairDOElasticSearch } from "@/components/FairDOElasticSearch"
 
 const meta = {
     component: FairDOElasticSearch

src/components/search/DefaultFacet.tsx

@@ -1,9 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react"
 
-import { FairDOSearchContext } from "@/components/FairDOSearchContext.tsx"
-import { GlobalModalProvider } from "@/components/GlobalModalProvider.tsx"
+import { FairDOSearchContext } from "@/components/FairDOSearchContext"
+import { GlobalModalProvider } from "@/components/GlobalModalProvider"
 import { DateTime } from "luxon"
-import { NMRResultView } from "../components/result/NMRResultView.tsx"
+import { NMRResultView } from "@/components/result/NMRResultView"
 
 const meta = {
     component: NMRResultView

src/stories/FairDOElasticSearch.stories.tsx

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react"
 
-import { BasicRelationNode } from "@/lib/RelationNode.ts"
+import { BasicRelationNode } from "@/lib/RelationNode"
 import { ReactFlowProvider } from "@xyflow/react"
-import { RelationsGraph } from "../components/graph/RelationsGraph.tsx"
+import { RelationsGraph } from "@/components/graph/RelationsGraph"
 
 const meta = {
     component: RelationsGraph

src/stories/NMRResultView.stories.tsx

@@ -9,12 +9,12 @@
 
     /* Bundler mode */
     "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
     "isolatedModules": true,
     "moduleDetection": "force",
-    "noEmit": true,
     "jsx": "react-jsx",
-
+    "declaration": true,
+    "sourceMap": true,
+    "outDir": "dist",
     /* Linting */
     "strict": true,
     "noUnusedLocals": true,
@@ -23,7 +23,8 @@
     "noUncheckedSideEffectImports": true,
     "paths": {
       "@/*": ["src/*"]
-    }
+    },
+    "baseUrl": "./"
   },
   "include": ["src"]
 }

src/stories/RelationsGraph.stories.tsx

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "Preserve",
+    "skipLibCheck": true,
+    "jsx": "react-jsx",
+    "declaration": true,
+    "sourceMap": true,
+
+    "outDir": "dist",
+    "esModuleInterop": true,
+    "paths": {
+      "@/*": ["./*"]
+    },
+    "baseUrl": "./src"
+  },
+  "include": ["src"]
+}