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'

basics/features/leaflet-maps.md

@@ -14,7 +14,8 @@ There is possibility to use different storage for files: 
 
 To install the upload feature run:
 
-<pre class="language-shell"><code class="lang-shell"><strong>$ yarn add @adminjs/upload</strong></code></pre>
+<pre class="language-shell"><code class="lang-shell"><strong>$ yarn add @adminjs/upload
+</strong></code></pre>
 
 The main concept of the upload feature is that it sends uploaded files to an external source. The database keeps the information about path and folder name where the file was stored.
 
@@ -43,15 +44,21 @@ Next, you should decide, where your files will be stored and prepare resource en
 {% tab title="Local Filesystem" %}
 In this example your local server should have established `bucket` folder and it should be accessible by web browser (via `baseUrl` path)
 
-```javascript
+<pre class="language-javascript"><code class="lang-javascript"><strong>import * as url from 'url'
+</strong>// other imports
+
+const __dirname = url.fileURLToPath(new URL('.', import.meta.url))
+
 app.use(express.static(path.join(__dirname, '../public')));
-```
+</code></pre>
 
 
 
 ```typescript
 import uploadFeature from '@adminjs/upload';
-import { File } from './models/file';
+
+import { File } from './models/file.js';
+import componentLoader from './component-loader.js';
 
 const localProvider = {
   bucket: 'public/files',
@@ -81,6 +88,7 @@ export const files = {
   },
   features: [
     uploadFeature({
+      componentLoader, 
       provider: { local: localProvider },
       validation: { mimeTypes: ['image/png', 'application/pdf', 'audio/mpeg'] },
     }),
@@ -92,7 +100,8 @@ export const files = {
 {% tab title="AWS S3" %}
 ```typescript
 import uploadFeature from '@adminjs/upload';
-import { File } from './models/file';
+
+import { File } from './models/file.js';
 
 const AWScredentials = {
   accessKeyId: 'AWS_ACCESS_KEY_ID',
@@ -132,7 +141,8 @@ export const files = {
 
 {% tab title="Google Cloud Storage" %}
 <pre class="language-typescript"><code class="lang-typescript">import uploadFeature from '@adminjs/upload';
-import { File } from './models/file';
+
+import { File } from './models/file.js';
 
 <strong>const GCScredentials = {
 </strong>  serviceAccount: 'SERVICE_ACCOUNT',
@@ -165,14 +175,15 @@ export const files = {
       validation: { mimeTypes: ['image/png'] },
     }),
   ],
-};</code></pre>
+};
+</code></pre>
 {% endtab %}
 {% endtabs %}
 
 After that add files resource to AdminJS options config
 
 ```typescript
-import { files } from './resources/files';
+import { files } from './resources/files.js';
 
 const adminJsOptions = {
   resources: [
@@ -220,7 +231,8 @@ export class File extends BaseEntity {
 {% tab title="Resource" %}
 ```typescript
 import uploadFeature from '@adminjs/upload';
-import { File } from './models/file';
+
+import { File } from './models/file.js';
 
 const localProvider = {
   bucket: 'public/files',

basics/features/logger.md

@@ -31,7 +31,8 @@ As you can see, in the example above you have to take care of merging previous o
 
 ```javascript
 import { buildFeature, FeatureType } from 'adminjs';
-import SomeModel from 'some-model.entity';
+
+import SomeModel from 'some-model.entity.js';
 
 const someBeforeHook = () => { /* noop */ };
 

basics/features/password.md

@@ -61,8 +61,8 @@ For other adapters the setup would be basically the same, you just have to pass
 This option requires you to define all resources explicitly. It is also the recommended approach since it allows you to customize every resource. In order to define resources, you must specify `resources` property when setting up your AdminJS instance. Example:
 
 ```typescript
-import User from './user.entity'
-import Profile from './profile.entity'
+import User from './user.entity.js'
+import Profile from './profile.entity.js'
 
 // User and Profile are models defined in your ORM/ODM
 
@@ -264,7 +264,8 @@ Usage example:
 ```typescript
 import passwordsFeature from '@adminjs/passwords'
 import argon2 from 'argon2'
-import { User } from './user.entity'
+
+import { User } from './user.entity.js'
 
 const UserResource = {
   resource: User,