GITBOOK-96: what's new + small fixes

Author: Rafał Dzięgielewski

.gitbook/assets/Screen Recording 2023-01-26 at 11.58.40 (2) (1).gif

@@ -24,7 +24,8 @@
   * [Mongoose](installation/adapters/mongoose.md)
   * [Community Adapters](installation/adapters/community-adapters/README.md)
     * [AdonisJS](https://github.com/chirgjin/adminjs-adonis)
-* [Troubleshooting](installation/troubleshooting.md)
+* [What's new in v7?](installation/whats-new-in-v7.md)
+* [Migration Guide v7](installation/migration-guide-v7.md)
 
 ## Basics
 
@@ -46,6 +47,7 @@
   * [Edit](basics/api/edit.md)
   * [Delete](basics/api/delete.md)
   * [Bulk Delete](basics/api/bulk-delete.md)
+* [Themes](basics/themes.md)
 
 ## UI Customization
 

.gitbook/assets/Screen Recording 2023-01-26 at 11.58.40 (2) (2).gif

@@ -28,7 +28,7 @@ description: allows you to list and filer all the records for a given resource
 
 **Example** 
 
-__[_https://demo.adminjs.com_/admin/api/resources/Admin/actions/list?direction=desc\&sortBy=\_id\&filters.email=admin\&page=1](https://demo.adminjs.com/admin/api/resources/Admin/actions/list?direction=desc\&sortBy=\_id\&filters.email=admin\&page=1)
+[_https://demo.adminjs.com_/admin/api/resources/Admin/actions/list?direction=desc\&sortBy=\_id\&filters.email=admin\&page=1](https://demo.adminjs.com/admin/api/resources/Admin/actions/list?direction=desc\&sortBy=\_id\&filters.email=admin\&page=1)
 
 ```json
 {

.gitbook/assets/Screen Recording 2023-01-26 at 11.58.40 (2) (3).gif

@@ -8,7 +8,7 @@ Features should be included in `features` section of your resource, example:
 
 <pre class="language-typescript"><code class="lang-typescript"><strong>import { ResourceWithOptions } from 'adminjs';
 </strong><strong>
-</strong><strong>import User from './user.entity';
+</strong><strong>import User from './user.entity.js';
 </strong><strong>
 </strong><strong>const UserResource: ResourceWithOptions = {
 </strong><strong>  resource: User,

SUMMARY.md

@@ -17,12 +17,13 @@ Then add one line (`features`) to resource entry in AdminJS config.
 ```javascript
 import importExportFeature from '@adminjs/import-export';
 
+import componentLoader from './component-loader.js';
 ...
 
 {
   resource: Entity,
   features: [
-    importExportFeature(),
+    importExportFeature({ componentLoader }),
   ],
 }
 ```

basics/api/list.md

@@ -68,7 +68,7 @@ The feature goes inside `features` in your resource specification. Take a look a
 ```typescript
 import leafletFeatures, { getLeafletDist } from '@adminjs/leaflet';
 // other imports
-import Marker from './marker.entity';
+import Marker from './marker.entity.js';
 
 // Other code - remember to set up the common configuration!
 
@@ -144,7 +144,7 @@ The feature goes inside `features` in your resource specification. Take a look a
 ```typescript
 import leafletFeatures, { getLeafletDist } from '@adminjs/leaflet';
 // other imports
-import MapEntity from './map.entity';
+import MapEntity from './map.entity.js';
 
 // Other code - remember to set up the common configuration!
 
@@ -233,7 +233,10 @@ An example application can be found in [@adminjs/leaflet GitHub repository](http
 
 ```bash
 $ git clone https://github.com/SoftwareBrothers/adminjs-leaflet.git
-$ cd adminjs-leaflet/example-app
+$ cd adminjs-leaflet
+$ yarn install
+$ yarn build
+$ cd example-app
 $ yarn install
 $ docker-compose up -d
 $ yarn start

basics/features/README.md

@@ -22,8 +22,9 @@ Then we have to define `Log` entity - the place we will track changes.  Below yo
 {% tab title="Sequelize" %}
 ```typescript
 import { DataTypes, Model } from 'sequelize';
-import db from './sequelize.connection';
-import User from './user.entity';
+
+import db from './sequelize.connection.js';
+import User from './user.entity.js';
 
 export interface ILog = {
   id: number;
@@ -224,7 +225,7 @@ export const LogModel = model<Log>('Log', LogSchema);
 
 {% tab title="ObjectionJS" %}
 ```typescript
-import { BaseModel } from '../utils/base-model';
+import { BaseModel } from '../utils/base-model.js';
 
 class Log extends BaseModel {
   id: number;
@@ -286,12 +287,15 @@ To get logger to work, add extra property to resource config. Below you can find
 
 ```javascript
 import loggerFeature from '@adminjs/logger';
-import ResourceModel from './resource.entity';
+
+import ResourceModel from './resource.entity.js';
+import componentLoader from './component-loader.js';
 
 export default {
   resource: ResourceModel,
   features: [
     loggerFeature({
+      componentLoader,
       propertiesMapping: {
         user: 'userId',
       },
@@ -308,22 +312,23 @@ To have Log resource appear in AdminJS panel, we have to define it first.&#x20;
 
 ```javascript
 import { createLoggerResource } from '@adminjs/logger';
-import Log from './logs.entity';
+
+import Log from './logs.entity.js';
 
 const config = {
-    resource: Log,
-    featureOptions: {
-        propertiesMapping: {
-            recordTitle: 'title' //field to store logged record's title
-        },
-        userIdAttribute: 'id', //primary key currently logged user
-        resourceOptions: {
-            navigation: {
-                name: 'SectionName',
-                icon: 'iconName'
-            }
-        }
+  resource: Log,
+  featureOptions: {
+    propertiesMapping: {
+      recordTitle: 'title' //field to store logged record's title
+    ,
+    userIdAttribute: 'id', //primary key currently logged user
+    resourceOptions: {
+      navigation: {
+        name: 'SectionName',
+        icon: 'iconName'
+      }
     }
+  }
 }
 
 export default createLoggerResource(config)

basics/features/import-and-export.md

@@ -17,7 +17,9 @@ Next step is to add feature option to user resource
 ```javascript
 import argon2 from 'argon2';
 import passwordsFeature from '@adminjs/passwords';
-import User from './models/user';
+
+import User from './models/user.js';
+import componentLoader from './component-loader.js';
 
 const adminJsOptions = {
   resources: [
@@ -29,6 +31,7 @@ const adminJsOptions = {
       },
       features: [
         passwordsFeature({
+          componentLoader,
           properties: {
             encryptedPassword: 'password',
             password: 'newPassword'