fix: correct typings

Correct several issues around typings and add content to Readme file.

README.md

@@ -1 +1,93 @@
 # UpdateHive - React Client component
+
+Client side react components and hooks for interacting with the UpdateHive API. Working with and rendering changelogs
+provided by UpdateHive in a standardized way across react applications.
+
+## Installation
+
+```
+# npm
+npm -i @wertarbyte/updatehive-react
+
+# yarn
+yarn add @wertarbyte/updatehive-react
+```
+
+## Usage
+
+Either use the react hook and render the changelog yourself or let this library fetch and render the changelog for you.
+
+For a more complete example, see the [App.tsx](./src/App.tsx) in the src directory.
+
+### Hook
+
+```tsx
+import { useChangelog } from '@wertarbyte/updatehive-react';
+
+const Changelog = () => {
+  const { loading, error, changelog } = useChangelog({
+    connection: {
+      API_KEY,
+    },
+    changelogs: {
+      product: PRODUCT_ID,
+    },
+  });
+
+  if (loading) return <p>Loading...</p>;
+  if (error) return <p>Error: {error.message}</p>;
+
+  return (
+    <div>
+      <h1>{changelog.title}</h1>
+      <ul>
+        {changelog.entries.map(entry => (
+          <li key={entry.id}>{entry.version}</li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+```
+
+### Component
+
+```tsx
+import { ChangelogContainer, MinimalChangelogList, } from '@wertarbyte/updatehive-react';
+
+return (
+  <ChangelogContainer
+    API_KEY={API_KEY}
+    product={PRODUCT}
+    config={{ url: serviceURL }}
+  >
+    <MinimalChangelogList />
+  </ChangelogContainer>
+);
+```
+
+## Configuration
+
+```tsx
+/**
+ * Configuration to retrieve changelogs from UpdateHive.
+ *
+ * @param connection
+ *    API_KEY:        API_KEY to access UpdateHive public REST API.
+ *    url:            Override the default URL to UpdateHive API.
+ *
+ * @param changelogs
+ *    product:        Product ID to retrieve changelogs for.
+ *    onlyLast:       Retrieve only the last changelog.
+ */
+export type UpdateHiveConfig = {
+  connection: {
+    API_KEY: string;
+    url?: string;
+  };
+  changelogs: {
+    product: string;
+    onlyLast?: boolean;
+  };
+};
+```

package.json

@@ -14,13 +14,14 @@
   "version": "1.0.0",
   "type": "module",
   "main": "dist/updatehive-react.umd.js",
-  "module": "dist/updatehive-react.es.js",
+  "module": "dist/updatehive-react.js",
+  "types": "dist/updatehive-react.d.ts",
   "files": [
     "dist"
   ],
   "exports": {
     ".": {
-      "import": "./dist/updatehive-react.es.js",
+      "import": "./dist/updatehive-react.js",
       "require": "./dist/updatehive-react.umd.js"
     }
   },
@@ -50,7 +51,8 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "typescript": "^5.2.2",
-    "vite": "^5.2.0"
+    "vite": "^5.2.0",
+    "vite-plugin-dts": "^4.0.0-beta.0"
   },
   "dependencies": {
     "@emotion/react": "^11.11.4",

src/App.tsx

@@ -1,9 +1,9 @@
+import * as React from 'react';
 import {
+  useChangelogs,
   ChangelogContainer,
   MinimalChangelogList,
-  useChangelogs,
-} from '../lib';
-import * as React from 'react';
+} from '../dist/updatehive-react';
 
 export const App: React.FC = () => {
   const API_KEY = import.meta.env.VITE_UPDATEHIVE_API_KEY;
@@ -38,7 +38,7 @@ export const App: React.FC = () => {
               <div className="hook div">Description</div>
             </div>
             {data.map((changelog, index) => (
-              <div className="hook table" key={`chanelog-${index}`}>
+              <div className="hook table" key={`changelog-${index}`}>
                 <div className="hook div">{changelog.version}</div>
                 <div className="hook div">{changelog.description}</div>
               </div>

vite.config.ts

@@ -1,26 +1,26 @@
-import { defineConfig } from "vite";
-import { resolve } from "path";
-import react from "@vitejs/plugin-react";
+import { defineConfig } from 'vite';
+import { resolve } from 'path';
+import react from '@vitejs/plugin-react';
+import dts from 'vite-plugin-dts';
 
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), dts({ exclude: ['src'] })],
   server: {
     port: 3080,
     host: true,
   },
   build: {
     copyPublicDir: false,
     lib: {
-      entry: resolve(__dirname, "lib/index.ts"),
-      name: "updatehive-react",
-      fileName: (format) => `updatehive-react.${format}.js`,
+      entry: resolve(__dirname, 'lib/updatehive-react.ts'),
+      name: 'updatehive-react',
     },
     rollupOptions: {
-      external: ["react", "react-dom", "react/jsx-runtime"],
+      external: ['react', 'react-dom', 'react/jsx-runtime'],
       output: {
         globals: {
-          react: "React",
-          "react-dom": "ReactDOM",
+          react: 'React',
+          'react-dom': 'ReactDOM',
         },
       },
     },