Rewrite guides using skills

docs/api/config/booking-cardshape.md

@@ -26,9 +26,9 @@ cardShape?: {
 
 ### Parameters
 
-In the **cardShape** object you can specify the following parameters (fields):
+In the `cardShape` object you can specify the following parameters (fields):
 
-- `category` - (optional) shows/hides a card's name
+- `category` - (optional) shows/hides a category name
 - `details` - (optional) shows/hides details
 - `preview` - (optional) shows/hides a preview image
 - `price` - (optional) shows/hides price
@@ -45,7 +45,7 @@ const defaultCardShape = {
     preview: true,
     price: true,
     review: true,
-    subtitle: false,
+    subtitle: true,
     title: true
 };
 ~~~
@@ -70,10 +70,10 @@ The snippet below demonstrates how to configure what fields to display on the le
 <iframe src="https://snippet.dhtmlx.com/6mxd7918?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
 
 :::info
-You can also configure the appearance of a card using the [`cardTemplate`](/api/config/booking-cardtemplate) property. If both `cardTemplate` and `cardShape` are applied, `cardTemplate` will override the `cardShape` settings. 
+You can also configure the appearance of a card using the [`cardTemplate`](api/config/booking-cardtemplate.md) property. If both `cardTemplate` and `cardShape` are applied, `cardTemplate` will override the `cardShape` settings. 
 :::
 
-**Related articles:** 
+**Related articles**: 
 
-- [Defining the structure of cards](/guides/configuration/#defining-the-structure-of-cards)
-- [`cardTemplate`](/api/config/booking-cardtemplate)
+- [Defining the structure of cards](guides/configuration.md#define-the-structure-of-cards)
+- [`cardTemplate`](api/config/booking-cardtemplate.md)

docs/api/config/booking-cardtemplate.md

@@ -13,7 +13,7 @@ description: You can learn about the cardTemplate config in the documentation of
 The property specifies the HTML structure and layout of each card's block (the left side of each card). It means you can manage which fields are displayed, how they are arranged, and how they look.
 
 :::info
-You can also specify which fields to display using the [`cardShape`](/api/config/booking-cardshape) property
+You can also specify which fields to display using the [`cardShape`](api/config/booking-cardshape.md) property
 :::
 
 ### Usage
@@ -24,11 +24,11 @@ cardTemplate?: ({item: obj}) => string;
 
 ### Parameters
 
-`cardTemplate` expects a function that takes a `card` object as input and returns a string of HTML that defines how the card should look.
+`cardTemplate` expects a function that takes an `item` (card) object as input and returns a string of HTML that defines how the card should look.
 
 ### Example
 
-In the example below we create a function that takes the `card` object and returns HTML for a card that includes a preview image (card.preview), category (card.category), title (card.title), and price (card.price). You need to create your own HTML template to be applied to a card and import the **template** helper. Then pass the function into the Booking configuration by assigning the function to the `cardTemplate` property.  
+In the example below we create a function that takes the `item` (card) object and returns HTML for a card that includes a preview image (item.preview), category (item.category), title (item.title), and price (item.price). You need to create your own HTML template to be applied to a card and import the `template` helper. Then pass the function into the Booking configuration by assigning the function to the `cardTemplate` property.  
 
 ~~~html {}
 <style>
@@ -51,29 +51,29 @@ In the example below we create a function that takes the `card` object and retur
 <script>
     const { Booking, template } = booking; //import template helper
 
-    function cardPreviewTemplate({ card }) {
+    function cardPreviewTemplate({ item }) {
         return `
             <div class="custom-preview" data-action="preview-click">
                 <div class="preview-left">
                     <div
-                        style="background-image: url(${card.preview})"
+                        style="background-image: url(${item.preview})"
                         class="card-photo"
                     ></div>
                     <!-- <div class="card-photo-empty" /> -->
                     </div>
 
                     <div class="preview-right">
-                    <div class="category">${card.category}</div>
-                    <div class="title">${card.title}</div>
-                    <div class="price">${card.price}</div>
+                    <div class="category">${item.category}</div>
+                    <div class="title">${item.title}</div>
+                    <div class="price">${item.price}</div>
                 </div>
             </div>
             `;
     }
 
     const widget = new Booking("#root", {
 	    data,
-	    cardTemplate: template(card => cardPreviewTemplate(card)), // pass the function to Booking configuration
+	    cardTemplate: template(item => cardPreviewTemplate(item)), // pass the function to Booking configuration
     });
     // other parameters
 </script>
@@ -84,8 +84,7 @@ The snippet below demonstrates how to apply a template to the left block of a ca
 
 <iframe src="https://snippet.dhtmlx.com/k2v01vng" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
 
-**Related articles:** 
-
-- [Defining the structure of cards](/guides/configuration/#defining-the-structure-of-cards)
-- [`cardShape`](/api/config/booking-cardshape)
+**Related articles**:
 
+- [Defining the structure of cards](guides/configuration.md#define-the-structure-of-cards)
+- [`cardShape`](api/config/booking-cardshape.md)

docs/api/config/booking-data.md

@@ -26,7 +26,7 @@ data: [
             stars: number,
             count: number
         },
-        slots: [
+        slots?: [
             {
                 from: number | string, // hours from 0 to 24
                 to: number | string, // hours from 0 to 24
@@ -36,12 +36,7 @@ data: [
                 dates?: array, // exact dates for which rule can be applied, timestamps
             }
         ],
-        availableSlots?: [
-            {
-                id: string|number,
-                time:[number, number] //timestamp, length in minutes
-            },
-        ],
+        availableSlots?: [number, number][], // each slot: [timestamp, slot duration in minutes]
         usedSlots?: number[], //timestamps
         slotSize?: number, //minutes
         slotGap?: number //minutes
@@ -63,23 +58,21 @@ For each card object you can specify the following parameters:
 - `review` - (optional) rating information that includes the following parameters:  
   - `stars` - (optional) the number of rating stars (out of five)  
   - `count` - (optional) the number of reviews
-- `slots` - (required) an array of objects with the following parameters for each slot object:
+- `slots` - (optional) an array of objects that defines slot rules (either `slots` or `availableSlots` should be provided to display bookable time); each slot object has the following parameters:
   - `from` - (required) a slot start time in hours from 0 to 24
   - `to` - (required) a slot end time in hours from 0 to 24
   - `size` - (optional) the duration of one slot in minutes
   - `gap` - (optional) the gap between slots in minutes; 0 is set by default
-  - `days` - (optional) days of the week when a slot is available for booking; possible values: from 0 to 6 where 0 is Sunday and 6 is Saturday; if no days are specified, all days are applied by default; if days are specified, the slot parameters (**to**, **from**, **size**, **gap**) defined for these days will be applied
-  - `dates` - (optional) an array of timestamps in milliseconds which are exact dates when a slot is available; the slot parameters (**to**, **from**, **size**, **gap**) for these specified dates will be applied (timestamps are in a local timezone)
+  - `days` - (optional) days of the week when a slot is available for booking; possible values: from 0 to 6 where 0 is Sunday and 6 is Saturday; if no days are specified, all days are applied by default; if days are specified, the slot parameters (`to`, `from`, `size`, `gap`) defined for these days will be applied
+  - `dates` - (optional) an array of timestamps in milliseconds which are exact dates when a slot is available; the slot parameters (`to`, `from`, `size`, `gap`) for these specified dates will be applied (timestamps are in a local timezone)
 
 :::note
 Slot parameters specified for days will override common parameters defined for all days.
 Slot parameters specified for dates will override parameters defined for specific days and all days.
 If several slots objects are created for the same day, make sure that slots time ranges (from and to) with **different** size and gap do not overlap, otherwise all slots data for these days will not be applied.
 :::
 
-- `availableSlots` - (optional) an array of timestamps of available slots in milliseconds; if available slots are specified here, all slots from the `slots` array are ignored (i.e., become unavailable); each object in the array has the next parameters:
-  - `id` - (required) the id of a slot
-  - `time` - (required) an array that includes timestamp and slot duration in minutes (timestamps are in a local timezone)
+- `availableSlots` - (optional) an array of available slots; each slot is an array `[timestamp, duration]` where the timestamp is in milliseconds (in a local timezone) and the duration is the slot length in minutes; if available slots are specified here, all slots from the `slots` array are ignored (i.e., become unavailable)
 - `usedSlots` - (optional) an array of timestamps of booked slots in milliseconds (timestamps are in a local timezone)
 - `slotSize` - (optional) the duration of a slot in minutes; the value will be applied to all slots of this card if other value is not set inside the `slots` object; *60* minutes is set by default
 - `slotGap` - (optional) the gap between slots in minutes that is set for all slots in the current card; this value is applied if any other value is not specified inside the `slots` object; 0 is set by default
@@ -98,7 +91,7 @@ const data = [
         preview: "https://snippet.dhtmlx.com/codebase/data/booking/01/img/01.jpg",
         price: "37 $",
         review: {
-            star: 1,
+            stars: 1,
             count: 40
         },
         slots: [
@@ -137,4 +130,4 @@ new booking.Booking("#root", {
 });
 ~~~
 
-**Related articles:** [Defining slot rules](/guides/configuration#defining-slot-rules)
+**Related articles**: [Defining slot rules](guides/configuration.md#define-slot-rules)

docs/api/config/booking-end.md

@@ -30,6 +30,6 @@ new booking.Booking("#root", {
 });
 ~~~
 
-The snippet below shows how to set the [start](/api/config/booking-start) and end dates:
+The snippet below shows how to set the [start](api/config/booking-start.md) and end dates:
 
 <iframe src="https://snippet.dhtmlx.com/cc28whe7?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>

docs/api/config/booking-filtershape.md

@@ -31,17 +31,17 @@ filterShape: {
 
 ### Parameters
 
-- `text` - (optional) if **true**, the text input field is displayed (default); if **false**, the text field is hidden
+- `text` - (optional) if `true`, the text input field is displayed (default); if `false`, the text field is hidden
   - `id` - (required) the id of a card
-  - `suggest` - (required) if **true**, the auto-complete is enabled and the values (from the [`data`](/api/config/booking-data) object) that match a user's input text will be displayed
+  - `suggest` - (optional) if `true`, the auto-complete is enabled and the values (from the [`data`](api/config/booking-data.md) object) that match a user's input text will be displayed
   - `label` - (optional) the label for the property from the `data` object. See [Default config](#default-config) below.
-- `date` - (optional) shows/hides the date field; **true** is set by default (the field is shown)
-- `time` - (optional) shows/hides the time field. If set to **true**, it takes an array of objects with default time options for a slot. For each object you can specify the following parameters:
+- `date` - (optional) shows/hides the date field; `true` is set by default (the field is shown)
+- `time` - (optional) shows/hides the time field. If set to `true`, it takes an array of objects with default time options for a slot. For each object you can specify the following parameters:
   - `from` - (required) the start time for a slot; it can be a number from 0 to 24 that specifies the time in hours (e.g., 9 means 9:00, 8.5 means 8:30) or a string in the format "h:m" (for example, "8:30")
   - `to` - (required) the end time for a slot; it can be a number from 0 to 24 that specifies the time in hours (e.g., 9 means 9:00, 8.5 means 8:30) or a string in the format "h:m" (for example, "8:30")
   - `label` - (optional) placeholder for the time field
 If the `time` parameters are not set, the default values are applied: see [Default config](#default-config) below.
-- `autoApply` - (optional) if **true**, the search criteria will be automatically applied (no need to initiate the search by clicking the button); **false** is set by default
+- `autoApply` - (optional) if `true`, the search criteria will be automatically applied (no need to initiate the search by clicking the button); `false` is set by default
 
 ### Default config
 

docs/api/config/booking-formshape.md

@@ -13,22 +13,26 @@ description: You can learn about the formShape config in the documentation of th
 ### Usage
 
 ~~~jsx {}
-formShape: {
+formShape: [{
     comp: "text" | "textarea",
     key: string,
     label?: string,
-    required?: boolean
-};
+    required?: boolean,
+    validation?: (value: any) => boolean,
+    errorMessage?: string
+}];
 ~~~
 
 ### Parameters
 
 For each field you can specify the following parameters:
 
-- `comp` - (required) the field type (**text** or **textarea**)
+- `comp` - (required) the field type (`text` or `textarea`)
 - `key` - (required) the id of a field
 - `label` - (optional) the field label
-- `required` - (optional) if the value is set to **true**, the field should not be empty and it's required to submit the booking form; if **false**, the field can be empty
+- `required` - (optional) if the value is set to `true`, the field should not be empty and it's required to submit the booking form; if `false`, the field can be empty
+- `validation` - (optional) a function that takes the field value and returns a boolean; the field is considered valid when the function returns `true`
+- `errorMessage` - (optional) the message shown when the value does not pass validation
 
 ### Default config
 
@@ -68,17 +72,17 @@ const defaultFormShape = [
 ~~~jsx {1-17,21}
 const formShape = [
     {
-        type: "text",
+        comp: "text",
         key: "name",
         label: "Name"
     },
     {
-        type: "text",
+        comp: "text",
         key: "contact",
         label: "Mobile"
     },
     {
-        type: "textarea",
+        comp: "textarea",
         key: "description",
         label: "Details"
     },

docs/api/config/booking-infoshape.md

@@ -64,10 +64,10 @@ The snippet below shows how to configure what to display on the left side of the
 <iframe src="https://snippet.dhtmlx.com/pd6wp1xc?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
 
 :::info
-You can also control which fields to display in the information block of the Booking dialog using the [`infoTemplate`](/api/config/booking-infotemplate) property. But if both properties are applied, `infoTemplate` will override the `infoShape` settings.
+You can also control which fields to display in the information block of the Booking dialog using the [`infoTemplate`](api/config/booking-infotemplate.md) property. But if both properties are applied, `infoTemplate` will override the `infoShape` settings.
 :::
 
-**Related articles:** 
+**Related articles**: 
 
-- [Configuring the Booking dialog](/guides/configuration/#configuring-the-booking-dialog)
-- [`infoTemplate`](/api/config/booking-infotemplate)
+- [Configuring the Booking dialog](guides/configuration.md#configure-the-booking-dialog)
+- [`infoTemplate`](api/config/booking-infotemplate.md)

docs/api/config/booking-infotemplate.md

@@ -23,7 +23,7 @@ infoTemplate?: ({item: obj, slot: number}) => string;
 
 ### Example
 
-In the example below, we define the `cardInfoTemplate` function that will generate the custom HTML for the information block. This function will receive the `item` (card object) and `slot` (slot timestamp) as input parameters. The function returns div containers representing the information block for a selected booking item, including an image, category, title, and formatted date. You should also import the **template** helper and assign your custom function to `infoTemplate`.
+In the example below, we define the `cardInfoTemplate` function that will generate the custom HTML for the information block. This function will receive the `item` (card object) and `slot` (slot timestamp) as input parameters. The function returns div containers representing the information block for a selected booking item, including an image, category, title, and formatted date. You should also import the `template` helper and assign your custom function to `infoTemplate`.
 
 ~~~html
 <style>
@@ -83,10 +83,10 @@ The snippet below shows how to apply a template to the information block of the
 <iframe src="https://snippet.dhtmlx.com/byb94ipu?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
 
 :::info
-You can also control which fields to display in the information block of the Booking dialog using the [`infoShape`](/api/config/booking-infoshape) property. But if both properties are applied, `infoTemplate` will override the `infoShape` settings.
+You can also control which fields to display in the information block of the Booking dialog using the [`infoShape`](api/config/booking-infoshape.md) property. But if both properties are applied, `infoTemplate` will override the `infoShape` settings.
 :::
 
-**Related articles:** 
+**Related articles**: 
 
-- [Configuring the Booking dialog](/guides/configuration/#configuring-the-booking-dialog)
-- [`infoShape`](/api/config/booking-infoshape)
+- [Configuring the Booking dialog](guides/configuration.md#configure-the-booking-dialog)
+- [`infoShape`](api/config/booking-infoshape.md)

docs/api/config/booking-locale.md

@@ -18,22 +18,22 @@ locale?: object;
 
 ### Default config
 
-By default, Booking uses the [English](/guides/localization/#default-locale) locale. You can set it to the custom locale as well.
+By default, Booking uses the [English](guides/localization.md#default-locale) locale. You can set it to the custom locale as well.
 
 :::tip
-To change the current locale dynamically, you can use the [`setLocale()`](/api/methods/booking-setlocale-method) method
+To change the current locale dynamically, you can use the [`setLocale()`](api/methods/booking-setlocale-method.md) method
 :::
 
 ### Example
 
 ~~~jsx
 const { data } = getData();
-const booking = new booking.Booking("#root", {
+const widget = new booking.Booking("#root", {
     data,
-    locale: de
+    locale: booking.locales.de
 });
 ~~~
 
 **Related articles**:
-- [setLocale()](/api/methods/booking-setlocale-method)
-- [Localization](/guides/localization)
+- [setLocale()](api/methods/booking-setlocale-method.md)
+- [Localization](guides/localization.md)

docs/api/config/booking-slotgap.md

@@ -11,7 +11,7 @@ description: You can learn about the slotGap in the documentation of the DHTMLX
 @short: Optional. Defines a gap between booking slots for all cards
 
 :::note
-The value will be applied in case the gap value is not set for the `gap` or `slotGap` parameter inside the [`data`](/api/config/booking-data) property.
+The value will be applied in case the gap value is not set for the `gap` or `slotGap` parameter inside the [`data`](api/config/booking-data.md) property.
 :::
 
 ### Usage
@@ -35,6 +35,6 @@ new booking.Booking("#root", {
 });
 ~~~
 
-The snippet below shows how to set [duration](/api/config/booking-slotsize) and gap for all slots:
+The snippet below shows how to set [duration](api/config/booking-slotsize.md) and gap for all slots:
 
 <iframe src="https://snippet.dhtmlx.com/pw8xsl1p?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>