docs: update code examples for React 18

docs/docs/components/range_facet.md

@@ -46,7 +46,7 @@ with a numeric `key` (or `key_as_string`) and `doc_count`:
 
 ## Filters format
 
-The selected filter is stored as `[ "<aggName>", "<from><rangeSeparator><to>" ]`.
+The selected filter is stored as ``[ "<aggName>", "<from><rangeSeparator><to>" ]``.
 `<from>` and `<to>` can be `YYYY` or full ISO dates (`YYYY-MM-DD`) when custom ranges
 include months/days.
 
@@ -110,13 +110,15 @@ Brief flow (matches the default behavior):
 2. Compute `min/max` years from bucket keys.
 3. Compute the histogram data with aggregation keys and doc counts.
 4. Store the selected range in `currentQueryState.filters` as:
-   `[agg.aggName, `${from}${rangeSeparator}${to}`]`.
+   ``[agg.aggName, `${from}${rangeSeparator}${to}`]``.
 5. Render your own UI (histogram/slider/etc).
 
 Example with only histogram and custom filter facet:
 
 ```jsx
-class MyRangeFacet extends React.Component {
+import { Component } from "react";
+
+class MyRangeFacet extends Component {
   constructor(props) {
     super(props);
     const { min, max } = this.getMinMax();
@@ -377,6 +379,6 @@ Helpers from `src/lib/components/RangeFacet/utils.js` used by `RangeFacet` and i
   string (supports ISO dates).
 * **findDefaultLabel(defaultRanges, filterValue, min, max, rangeSeparator)**:
   match an active filter to a default range label.
-* **buildDateRange({ fromYear, fromMonth, fromDay, toYear, toMonth, toDay, rangeSeparator })**:
+* `buildDateRange({ fromYear, fromMonth, fromDay, toYear, toMonth, toDay, rangeSeparator })`:
   build a `YYYY..YYYY` or ISO `YYYY-MM-DD..YYYY-MM-DD` string.
 * **RANGE_MODES**: enum with `DEFAULT` and `CUSTOM` used for optional default and custom filters.

docs/docs/components/with_state.md

@@ -18,17 +18,17 @@ through its props it gains access to
 ## Usage
 
 ```jsx
-class _StateLogger extends Component {
-  render() {
-    return (
+function _StateLogger(props) {
+  return (
+    <>
       <div>
-        Current query state <pre>{JSON.stringify(this.props.currentQueryState, null, 2)}</pre>
+        Current query state <pre>{JSON.stringify(props.currentQueryState, null, 2)}</pre>
       </div>
       <div>
-        Current results state <pre>{JSON.stringify(this.props.currentResultsState, null, 2)}</pre>
+        Current results state <pre>{JSON.stringify(props.currentResultsState, null, 2)}</pre>
       </div>
-    );
-  }
+    </>
+  );
 }
 
 const StateLogger = withState(_StateLogger);

docs/docs/connect_your_rest_apis.md

@@ -22,14 +22,12 @@ const searchApi = new OSSearchApi({
   }
 });
 
-class App extends Component {
-  render() {
-    return (
-      <ReactSearchKit searchApi={searchApi}>
-        ...
-      </ReactSearchKit>
-    )
-  }
+function App() {
+  return (
+    <ReactSearchKit searchApi={searchApi}>
+      ...
+    </ReactSearchKit>
+  )
 }
 ```
 
@@ -46,14 +44,12 @@ const searchApi = new InvenioSearchApi({
   }
 });
 
-class App extends Component {
-  render() {
-    return (
-      <ReactSearchKit searchApi={searchApi}>
-        ...
-      </ReactSearchKit>
-    )
-  }
+function App() {
+  return (
+    <ReactSearchKit searchApi={searchApi}>
+      ...
+    </ReactSearchKit>
+  )
 }
 ```
 
@@ -97,28 +93,26 @@ class MyResponseSerializer {
 Custom serializers can then be injected in the configuration of the adapter:
 
 ```jsx
-const MyRequestSerializer = new MyRequestSerializer();
-const MyResponseSerializer = new MyResponseSerializer();
+const myRequestSerializer = new MyRequestSerializer();
+const myResponseSerializer = new MyResponseSerializer();
 
 const searchApi = new OSSearchAPI({
   axios: {
     url: 'https://my.os.backend.org/search/',
     timeout: 5000,
   },
   os: {
-    requestSerializer: MyRequestSerializer,
-    responseSerializer: MyResponseSerializer,
+    requestSerializer: myRequestSerializer,
+    responseSerializer: myResponseSerializer,
   },
 });
 
-class App extends Component {
-  render() {
-    return (
-      <ReactSearchKit searchApi={searchApi}>
-        ...
-      </ReactSearchKit>
-    )
-  }
+function App() {
+  return (
+    <ReactSearchKit searchApi={searchApi}>
+      ...
+    </ReactSearchKit>
+  )
 }
 ```
 
@@ -152,14 +146,12 @@ The new adapter is injected as prop in the main component:
 ```jsx
 const mySearchApi = new MySearchAPI();
 
-class App extends Component {
-  render() {
-    return (
-      <ReactSearchKit searchApi={mySearchApi}>
-        ...
-      </ReactSearchKit>
-    )
-  }
+function App() {
+  return (
+    <ReactSearchKit searchApi={mySearchApi}>
+      ...
+    </ReactSearchKit>
+  )
 }
 ```
 

docs/docs/getting_started.md

@@ -32,33 +32,31 @@ First, import the main component `ReactSearchKit`.
 import { ReactSearchKit } from 'react-searchkit';
 ```
 
-Then, add it to the content of your `render()` method to render [ReactSearchKit](components/react_search_kit.md).
+Then, add it to your app to render [ReactSearchKit](components/react_search_kit.md).
 You should end up with something similar to:
 
 ```jsx
-import React, { Component } from 'react';
 import { ReactSearchKit } from 'react-searchkit';
 
-class App extends Component {
-  render() {
-    return (
-      <ReactSearchKit>
-        <h1>My search UI</h1>
-      </ReactSearchKit>
-    );
-  }
+function App() {
+  return (
+    <ReactSearchKit>
+      <h1>My search UI</h1>
+    </ReactSearchKit>
+  );
 }
 
 export default App;
 ```
 
+> React-SearchKit requires **React 18** or higher. Ensure your project uses compatible versions of `react` and `react-dom`.
+
 ## Connect REST API endpoint
 
 Change the `ReactSearchKit` props to define the REST API endpoint. For this example we are going to use [Zenodo APIs](https://zenodo.org).
 Import the Invenio adapter and provide the minimal configuration.
 
 ```jsx
-import React, { Component } from 'react';
 import { ReactSearchKit, InvenioSearchApi } from 'react-searchkit';
 
 const searchApi = new InvenioSearchApi({
@@ -67,14 +65,12 @@ const searchApi = new InvenioSearchApi({
   headers: { Accept: 'application/vnd.zenodo.v1+json' },
 });
 
-class App extends Component {
-  render() {
-    return (
-      <ReactSearchKit searchApi={searchApi}>
-        <h1>My search UI</h1>
-      </ReactSearchKit>
-    );
-  }
+function App() {
+  return (
+    <ReactSearchKit searchApi={searchApi}>
+      <h1>My search UI</h1>
+    </ReactSearchKit>
+  );
 }
 ```
 
@@ -91,16 +87,14 @@ import { ReactSearchKit, InvenioSearchApi, SearchBar } from 'react-searchkit';
 Then, add the component as a child of `ReactSearchKit`.
 
 ```jsx
-class App extends Component {
-  render() {
-    return (
-      <ReactSearchKit searchApi={searchApi}>
-        <div style={{ margin: '2em auto', width: '50%' }}>
-          <SearchBar />
-        </div>
-      </ReactSearchKit>
-    );
-  }
+function App() {
+  return (
+    <ReactSearchKit searchApi={searchApi}>
+      <div style={{ margin: '2em auto', width: '50%' }}>
+        <SearchBar />
+      </div>
+    </ReactSearchKit>
+  );
 }
 ```
 
@@ -122,17 +116,15 @@ import { ReactSearchKit, InvenioSearchApi, SearchBar, ResultsList } from 'react-
 Then, add the component below the search bar.
 
 ```jsx
-class App extends Component {
-  render() {
-    return (
-      <ReactSearchKit searchApi={searchApi}>
-        <div style={{ margin: '2em auto', width: '50%' }}>
-          <SearchBar />
-          <ResultsList />
-        </div>
-      </ReactSearchKit>
-    );
-  }
+function App() {
+  return (
+    <ReactSearchKit searchApi={searchApi}>
+      <div style={{ margin: '2em auto', width: '50%' }}>
+        <SearchBar />
+        <ResultsList />
+      </div>
+    </ReactSearchKit>
+  );
 }
 ```
 

docs/docs/main_concepts.md

@@ -115,14 +115,12 @@ You can control the app state externally using available events in `React-Search
 > Note: By default `React-SearchKit` is not registering any event. To enable this behaviour you need to pass in the root component the below variable:
 
 ```jsx
-class MyReactSearchKit extends Component {
-  render() {
-    return (
-      <ReactSearchKit {...this.props} eventListenerEnabled={true}>
-        {this.props.children}
-      </ReactSearchKit>
-    );
-  }
+function MyReactSearchKit(props) {
+  return (
+    <ReactSearchKit {...props} eventListenerEnabled={true}>
+      {props.children}
+    </ReactSearchKit>
+  );
 }
 ```
 
@@ -132,33 +130,29 @@ In order to trigger the `queryChanged` event you can use the `onQueryChanged` em
 ```jsx
 import { onQueryChanged } from 'react-searchkit';
 
-class MyExternalApp extends Component {
-    render() {
-        return (
-        <Button onClick={() => onQueryChanged({queryString: 'search'})}>Trigger Search</Button>
-        );
-    }
+function MyExternalApp() {
+  return (
+    <Button onClick={() => onQueryChanged({queryString: 'search'})}>
+      Trigger Search
+    </Button>
+  );
 }
 
-class MyReactSearchKit extends Component {
-  render() {
-    return (
-      <ReactSearchKit {...requiredProps} searchOnInit={false} eventListenerEnabled={true}>
-        {this.props.children}
-      </ReactSearchKit>
-    );
-  }
+function MyReactSearchKit(props) {
+  return (
+    <ReactSearchKit {...props} searchOnInit={false} eventListenerEnabled={true}>
+      {props.children}
+    </ReactSearchKit>
+  );
 }
 
-class MyApp extends Component {
-    render() {
-        return (
-            <>
-                <MyExternalApp />
-                <MyReactSearchKit />
-            </>
-        )
-    }
+function MyApp() {
+  return (
+    <>
+      <MyExternalApp />
+      <MyReactSearchKit />
+    </>
+  );
 }
 ```
 

docs/website/.gitignore

@@ -0,0 +1,20 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*