### Example Responsive Grid Setup

Source: https://docs.svar.dev/react/grid/api/properties/responsive

Demonstrates how to import Grid, define data and columns, and configure a responsive object to adjust columns and sizes at a 1000px breakpoint. This example shows how to hide a column and set flex grow properties.

```javascript
import { Grid } from "@svar-ui/react-grid";
import { getData } from "../data";

const Example = () => {
  const { data } = getData();

  const columns = [
    { id: "id", header: "ID" },
    { id: "firstName", header: "First Name" },
    { id: "lastName", header: "Last Name" },
    { id: "email", header: "Email" },
  ];

  const responsive = {
    1000: {
      columns: [
        { id: "id", header: "ID", flexgrow: 1 },
        { id: "firstName", header: "First Name", flexgrow: 1 },
        { id: "lastName", header: "Last Name", flexgrow: 1 },
        { id: "email", header: "Email", hidden: true, flexgrow: 1 },
      ],
      sizes: {
        rowHeight: 40,
        columnWidth: 160,
        headerHeight: 40,
        footerHeight: 40,
      },
    }
  };

  return (
    <div style={{ width: "1000px" }}>
      <Grid data={data} columns={columns} responsive={responsive} />
    </div>
  );
};

export default Example;
```

--------------------------------

### Example MultiCombo Dropdown Setup

Source: https://docs.svar.dev/react/core/multicombo/api/props/dropdown

Demonstrates how to apply dropdown configurations to a MultiCombo component. This example sets the position to 'bottom', alignment to 'start', and enables scroll tracking.

```jsx
<MultiCombo
    dropdown={{
        position: "bottom",
        align: "start",
        trackScroll: true
    }}
/>

```

--------------------------------

### Run Sample Locally with npm

Source: https://docs.svar.dev/react/grid/getting_started

Commands to navigate to the project directory, install dependencies, and start the development server for local testing.

```bash
# navigate to the root folder  
cd react-grid  
  
# install dependencies  
npm install  
  
# start dev server  
npm run dev  

```

--------------------------------

### Run sample locally with yarn/npm

Source: https://docs.svar.dev/svelte/grid/getting_started

Navigate to the project directory, install dependencies using yarn or npm, and start the development server to run the sample locally.

```bash
// navigate to the root folder  
cd svelte-grid  
   
// install dependencies  
yarn install //or npm install  

// start dev server  
yarn dev //or npm run dev  

```

--------------------------------

### Example Radio Button Group Setup

Source: https://docs.svar.dev/vue/core/radiogroup/api/props/options

Demonstrates how to set up an array of options and pass them to a RadioButtonGroup component in Vue.js.

```vue
<script setup>
    const options = [
        { id: 1, label: "Option 1" },
        { id: 2, label: "Option 2" },
        { id: 3, label: "Option 3" },
        { id: 4, label: "Option 4" },
        { id: 5, label: "Option 5" }
    ];
</script>

<template>
  <RadioButtonGroup :options="options" />
</template>

```

--------------------------------

### Svar UI Grid Component Setup

Source: https://docs.svar.dev/svelte/grid/api/properties/columns

This example demonstrates the basic setup of the Svar UI Grid component in Svelte. It includes importing necessary components and data, defining column configurations, and rendering the grid.

```javascript
<script>
  import { Grid } from "@svar-ui/svelte-grid";
  import { getData } from "./common/data";

  const { data } = getData();

  const columns = [
    { id: "id", width: 50 },
    {
      id: "city",
      width: 100,
      header: "City",
      footer: "City",
    },
    {
      id: "firstName",
      header: "First Name",
      footer: "First Name",
      width: 150,
    },
    {
      id: "lastName",
      header: "Last Name",
      footer: "Last Name",
      width: 150,
    },
    { id: "email", header: "Email", footer: "Email" },
    { id: "companyName", header: "Company", footer: "Company" },
  ];
</script>

<Grid {data} {columns} footer />

```

--------------------------------

### Run Sample Locally

Source: https://docs.svar.dev/vue/grid/getting_started

Commands to run the Vue application locally after installing dependencies. Navigate to the project folder and start the development server.

```bash
// navigate to the root folder  
cd vue-grid  
   
// install dependencies  
yarn install //or npm install  

// start dev server  
yarn dev //or npm run dev  
```

--------------------------------

### Configure Toolbar Items Example

Source: https://docs.svar.dev/vue/grid/helpers/components/toolbar

Example demonstrating how to import and configure the Toolbar component with custom items. This setup requires importing Grid and Toolbar from '@svar-ui/vue-grid' and passing the api and items props.

```javascript
import { getData } from "./common/data";
import { Grid, Toolbar } from "@svar-ui/vue-grid";
import { ref } from "vue";

const api = ref();
const { data, columns } = getData();

const items = [
  {
    id: "add-row",
    comp: "button",
    icon: "wxi-plus",
    text: "Add row",
  },
  {
    id: "delete-row",
    comp: "button",
    icon: "wxi-delete",
    text: "Delete",
  },
  { comp: "spacer" },
  {
    id: "copy-row",
    comp: "icon",
    icon: "wxi-content-copy",
  },
];
```

```html
<Toolbar :api="api" :items="items" />
<Grid :data="data" :columns="columns" ref="api" />
```

--------------------------------

### Initialize Button Control in Vue

Source: https://docs.svar.dev/vue/core/guides/initialization

Example of initializing a Button control using the core library in a Vue 3 setup script.

```vue
<script setup>  
import { Button } from "@svar-ui/vue-core";  
</script>  
  
<template>  
  <Button>Click Me</Button>  
</template>  


```

--------------------------------

### Action Menu Example with Options

Source: https://docs.svar.dev/vue/core/menu/actionmenu/api/props/options

Demonstrates how to define and pass options to the ActionMenu component using Vue's script setup. Each option includes text, an icon, and a handler.

```vue
<script setup>
  const options = [
      {
          text: "Cut",
          icon: "wxi wxi-content-cut",
          handler: ({ item }) => message = `cut ${item}`
        },
      {
        text: "Copy",
        icon: "wxi wxi-content-copy",
        handler: ({ item }) => message = `copy ${item}`
      },
      {
        text: "Paste",
        icon: "wxi wxi-content-paste",
        handler: ({ item }) => message = `paste ${item}`
      },
    ]
</script>

<template>
  <ActionMenu :options="options" />
</template>

```

--------------------------------

### Get Task Data Example

Source: https://docs.svar.dev/react/gantt/helpers/rest_routes/get_tasks_id

This example shows the expected JSON response when retrieving data for a specific task using the GET /tasks/{taskId} endpoint. The response includes details such as task ID, text, start and end dates, duration, progress, parent ID, type, and lazy loading status.

```json
[
  {
    "id": 2,
    "text": "[2] Mini p task 2.1",
    "start": "2024-06-14 00:00:00",
    "end": "2024-06-16 00:00:00",
    "duration": 0, "progress": 0,
    "parent": 10,
    "type": "task",
    "lazy": false
  },
  {
    "id": 6,
    "text": "[6] Mini p task 2.2",
    "start": "2024-06-15 00:00:00",
    "end": "2024-06-19 00:00:00",
    "duration": 0,
    "progress": 0,
    "parent": 10,
    "type": "task",
    "lazy": false
  }
]

```

--------------------------------

### Integrating HeaderMenu with Gantt Chart

Source: https://docs.svar.dev/react/gantt/helpers/header_menu

Example demonstrating how to integrate the HeaderMenu component with the Gantt chart. This setup allows hiding specific columns like 'start' and 'duration' by passing a columns object to HeaderMenu.

```jsx
import { useRef } from "react";
import { getData } from "../data";
import { Gantt, HeaderMenu } from "@svar-ui/react-gantt";

function App() {
  const data = getData();
  const columns = { start: true, duration: true };
  const apiRef = useRef(null);

  return (
    <HeaderMenu api={apiRef.current} columns={columns}>
      <Gantt
        ref={apiRef}
        tasks={data.tasks}
        links={data.links}
        scales={data.scales}
      />
    </HeaderMenu>
  );
}

export default App;
```

--------------------------------

### Full Toolbar and Gantt Integration Example

Source: https://docs.svar.dev/svelte/gantt/helpers/toolbar_component

Example demonstrating how to import and use the Toolbar and Gantt components together. It includes setting up the API object and defining toolbar items.

```svelte
<script>
  import { getData } from "../data";
  import { Gantt, Toolbar } from "@svar-ui/svelte-gantt";

  let api = $state();
  const data = getData();

  const items = [
   {
    id: "add-task",
    comp: "button",
    icon: "wxi-plus",
    text: "Add task",
    type: "primary",
   },
   {
    id: "edit-task",
    comp: "button",
    icon: "wxi-edit",
    text: "edit",
    type: "link",
   },
  ];
</script>

<Toolbar {api} {items} />

<Gantt bind:this={api} tasks={data.tasks} />
```

--------------------------------

### Example Checkbox Group Usage

Source: https://docs.svar.dev/vue/core/checkboxgroup/api/props/options

This example demonstrates how to pass an array of options to a CheckboxGroup component in a Vue.js setup.

```vue
<script setup>
    const options = [
        { id: 1, label: "Option 1" },
        { id: 2, label: "Option 2" },
        { id: 3, label: "Option 3" },
        { id: 4, label: "Option 4" },
        { id: 5, label: "Option 5" }
    ];
</script>

<template>
  <CheckboxGroup :options="options" />
</template>

```

--------------------------------

### Examples

Source: https://docs.svar.dev/svelte/core/comments/api/props/value

Various examples demonstrating how to initialize and use the Comments widget.

```APIDOC
## Examples

### Initializing comments widget with data and embedded authors

```javascript
<script>
  import { Comments } from '@svar-ui/svelte-comments';

  const value = [
    {
      id: "1",
      content: "Hello, world!",
      author:{ id: 1, name: "John Doe" },
      date: new Date(),
    },
  ];
</script>

<Comments {value} />
```

### Initializing comments widget with data and list of users

```javascript
<script>
  import { Comments } from '@svar-ui/svelte-comments';

  const value = [
    {
      id: "1",
      content: "Hello, world!",
      user: 1,
      date: new Date(),
    },
  ];

  const users = [
    { id: 1, name: "John Doe" },
    { id: 2, name: "Jane Doe" },
  ];
</script>

<Comments {value} {users} />
```

### Initializing empty comments widget

```javascript
<script>
  import { Comments } from '@svar-ui/svelte-comments';
</script>

<Comments />
```

### Initializing widget and loading comments

```javascript
<script>
  import { Comments } from '@svar-ui/svelte-comments';

  let value = [];

  fetch('/api/comments')
    .then(r => r.json())
    .then(x => value = x);
</script>

{#await value}
  <Comments {value} />
{/await}
```
```

--------------------------------

### Use FilterQuery with Placeholder Example

Source: https://docs.svar.dev/react/filter/api/filterquery/properties/placeholder

Example of how to implement the placeholder property in a FilterQuery component to guide user input.

```jsx
<FilterQuery placeholder="e.g., Status: Open or #urgent" />
```

--------------------------------

### Example: Fetching and Providing Branch Data

Source: https://docs.svar.dev/react/gantt/api/actions/provide-data

This example demonstrates listening for the 'request-data' action, fetching data from a server, and then using the 'provide-data' action to send it. Ensure the server endpoints are correctly configured.

```javascript
import { useState, useEffect } from "react";  
import { Gantt } from "@svar-ui/react-gantt";  
  
const server = "https://some-server";  
  
export default function App() {  
  const [tasks, setTasks] = useState([]);  
  const [links, setLinks] = useState([]);  
  
  useEffect(() => {  
    Promise.all([  
      fetch(server + "/tasks").then(res => res.json()),  
      fetch(server + "/links").then(res => res.json()),  
    ]).then(([t, l]) => {  
      setTasks(t);  
      setLinks(l);  
    });  
  }, []);  
  
  function init(api) {  
    api.on("request-data", ev => {  
      Promise.all([  
        fetch(`${server}/tasks/${ev.id}`).then(res => res.json()),  
        fetch(`${server}/links/${ev.id}`).then(res => res.json()),  
      ]).then(([tasks, links]) => {  
        api.exec("provide-data", {  
          id: ev.id,  
          data: {  
            tasks,  
            links,  
          },  
        });  
      });  
    });  
  }  
  
  return <Gantt init={init} tasks={tasks} links={links} />;  
}  

```

--------------------------------

### GET /{url} Response Example

Source: https://docs.svar.dev/react/grid/helpers/restdataprovider/routes/get_data

This is an example of the JSON array returned by the GET /{url} endpoint. It contains objects representing rows of data from the requested table. The HTTP status code indicates success (200) or failure (500).

```json
[
   {
      "id": 5,
      "name": "Kwan123",
      "year": 10,
      "votes": 0
   }
]
```

--------------------------------

### Install Valtio

Source: https://docs.svar.dev/react/gantt/integration-guides/integration-valtio

Install Valtio using npm. This is the first step to integrate Valtio into your project.

```bash
npm install valtio  
```

--------------------------------

### Combo Dropdown Example

Source: https://docs.svar.dev/react/core/combo/api/props/dropdown

Example of how to configure the dropdown for a Combo component. This sets the position to bottom, alignment to start, and enables scroll tracking.

```jsx
<Combo 
  options={users}
  textField="label"
  dropdown={{
    position: "bottom",
    align: "start",
    trackScroll: true
   }}
/>
```

--------------------------------

### MultiCombo Dropdown Example

Source: https://docs.svar.dev/vue/core/multicombo/api/props/dropdown

Example of how to apply dropdown configuration to a MultiCombo component. This sets the dropdown to appear below the input, aligned to the start, and to close on scroll.

```html
<template>
  <MultiCombo
      :dropdown="{
          position: 'bottom',
          align: 'start',
          trackScroll: true
      }"
  />
</template>

```

--------------------------------

### Example Grid Data Initialization

Source: https://docs.svar.dev/svelte/grid/api/properties/data

Demonstrates how to import the Grid component and initialize data for it. This example shows setting up an array of objects, each with an 'id' and various properties like 'city', 'country', and 'firstName', to be displayed in the grid.

```javascript
import { Grid } from "@svar-ui/svelte-grid";
import { getData } from "./common/data";

const { columns } = getData();

const data = [
    {
        id: 1,
        city: "Amieshire",
        country: 6,
        email: "Leora13@yahoo.com",
        firstName: "Ernest",
        lastName: "Schuppe",
        street: "Ratke Port",
        zipCode: "17026-3154",
        date: new Date("2016-09-23T07:57:40.195Z"),
        companyName: "Lebsack - Nicolas",
        stars: 820,
        followers: 70,
        newsletter: true,
        checked: 1,
    },
    {
        id: 2,
        city: "Gust",
        country: 4,
        email: "Mose_Gerhold51@yahoo.com",
        firstName: "Janis",
        lastName: "Vandervort",
        street: "Dickinson Keys",
        zipCode: "43767",
        date: new Date("2017-03-06T09:59:12.551Z"),
        companyName: "Glover - Hermiston",
        stars: 1200,
        followers: 170,
        checked: 1,
    },
];

</script>

<Grid {data} {columns} />

```

--------------------------------

### MenuBar Initialization and Usage

Source: https://docs.svar.dev/react/core/menu/menubar/api

Demonstrates how to import and initialize the MenuBar component with options.

```APIDOC
## MenuBar Initialization

### Description
Initializes the MenuBar component with a set of options.

### Method
Component Usage

### Endpoint
N/A

### Parameters
#### Request Body
- **options** (Array) - Optional. Specifies a set of options for the Menu Bar.
- **css** (string) - Optional. Adds a custom style to the menu item.
- **menuCss** (string) - Optional. Adds a custom CSS class to the Menu.

### Request Example
```javascript
import { MenuBar } from "@svar-ui/react-menu";
import { getOptions } from "./data";

const options = getOptions();

<MenuBar options={options} />
```

### Response
#### Success Response (200)
N/A (Component rendering)

#### Response Example
N/A
```

--------------------------------

### DateRangePicker Dropdown Example

Source: https://docs.svar.dev/vue/core/daterangepicker/api/props/dropdown

Example of how to apply dropdown configurations to a DateRangePicker component. This sets the position to bottom, alignment to start, and enables scroll tracking.

```html
<DateRangePicker
    :dropdown="{
        position: 'bottom',
        align: 'start',
        trackScroll: true
    }"
/>
```

--------------------------------

### Context Menu Initialization

Source: https://docs.svar.dev/react/core/menu/contextmenu/api

Example of how to initialize and use the Context Menu component with provided options.

```APIDOC
## Initialization

```javascript
import { useState } from "react";
import { ContextMenu } from "@svar-ui/react-menu";

import { getOptions } from "./data";

export default function Example() {
  const [options] = useState(() => getOptions());

  return <ContextMenu options={options} />;
}
```
```

--------------------------------

### RichSelect Dropdown Example

Source: https://docs.svar.dev/react/core/richselect/api/props/dropdown

Example of how to configure a RichSelect component's dropdown. This sets the position to 'bottom', alignment to 'start', and enables scroll tracking.

```jsx
<RichSelect
    dropdown={{
        position: "bottom",
        align: "start",
        trackScroll: true
    }}
/>
```

--------------------------------

### CheckboxGroup Usage Example

Source: https://docs.svar.dev/vue/core/checkboxgroup/api/props/type

Demonstrates how to use the CheckboxGroup component with the 'type' prop set to 'inline'. This example shows the setup of options and their rendering in a single row.

```vue
<script setup>
    const options = [
        { id: 1, label: "Option 1" },
        { id: 2, label: "Option 2" },
        { id: 3, label: "Option 3" },
        { id: 4, label: "Option 4" },
        { id: 5, label: "Option 5" }
    ];
</script>

<template>
  <CheckboxGroup :options="options" type="inline" />
</template>

```

--------------------------------

### Basic Vue Grid Setup

Source: https://docs.svar.dev/vue/grid/api/properties/columns

Demonstrates the basic setup for the Vue Grid component, including importing necessary modules, fetching data, and defining columns. Ensure the 'getData' function is correctly implemented and imported.

```vue
<script setup>
  import { Grid } from "@svar-ui/vue-grid";
  import { getData } from "./common/data";

  const { data } = getData();

  const columns = [
    { id: "id", width: 50 },
    {
      id: "city",
      width: 100,
      header: "City",
      footer: "City",
    },
    {
      id: "firstName",
      header: "First Name",
      footer: "First Name",
      width: 150,
    },
    {
      id: "lastName",
      header: "Last Name",
      footer: "Last Name",
      width: 150,
    },
    { id: "email", header: "Email", footer: "Email" },
    { id: "companyName", header: "Company", footer: "Company" },
  ];
</script>

<template>
  <Grid :data="data" :columns="columns" footer />
</template>

```

--------------------------------

### Get Task Data

Source: https://docs.svar.dev/react/gantt/helpers/rest_routes/get_tasks

This example shows the expected JSON response when making a GET request to the /tasks endpoint. It includes details for multiple tasks and summary items.

```json
[
   {
      "id": 20,
      "text": "New Task",
      "start": "2024-06-21 00:00:00",
      "end": "2024-06-22 00:00:00",
      "duration": 1,
      "progress": 2,
      "parent": 0,
      "type": "task",
      "lazy": false
   },
   {
      "id": 47,
      "text": "[1] Master project",
      "start": "2024-06-10 00:00:00",
      "end": "2024-06-18 00:00:00",
      "duration": 8,
      "progress": 0,
      "parent": 0,
      "type": "summary",
      "lazy": true
   },
   {
      "id": 21,
      "text": "New Task",
      "start": "2024-06-13 00:00:00",
      "end": "2024-06-14 00:00:00",
      "duration": 1,
      "progress": 0,
      "parent": 20,
      "type": "task",
      "lazy": false
   }
]
```

--------------------------------

### MenuBar Initialization

Source: https://docs.svar.dev/svelte/core/menu/menubar/api

Demonstrates how to initialize and use the MenuBar component with provided options.

```APIDOC
## MenuBar Initialization

### Description
Initializes the MenuBar component by importing it and passing an options array.

### Method
Svelte Component Initialization

### Endpoint
N/A

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```html
<script>
  import { MenuBar } from "@svar-ui/svelte-menu";
  import { getOptions } from "./data";
  const options = getOptions();
</script>

<MenuBar {options}></MenuBar>
```

### Response
#### Success Response (200)
N/A

#### Response Example
N/A
```

--------------------------------

### Example: Outputting DataStore to Console

Source: https://docs.svar.dev/svelte/grid/api/methods/getstores

This Svelte component example demonstrates how to initialize the Grid with data and columns, and then use the api.getStores() method within the 'init' function to log the DataStore to the console.

```javascript
<script>
    import { getData } from "./common/data";
    import { Grid } from "@svar-ui/svelte-grid";

    const { data, columns } = getData();

    function init(api){
        const stores = api.getStores();
        console.log("DataStore:", stores);
    }
</script>

<Grid {data} {columns} {init} />
```

--------------------------------

### Example TimePicker with Dropdown Configuration

Source: https://docs.svar.dev/vue/core/timepicker/api/props/dropdown

Demonstrates how to apply dropdown settings to a TimePicker component. This example sets the dropdown position to 'bottom', alignment to 'start', and enables scroll tracking.

```vue
<TimePicker
    :dropdown="{
        position: 'bottom',
        align: 'start',
        trackScroll: true
    }"
/>
```

--------------------------------

### RichSelect Dropdown Example

Source: https://docs.svar.dev/vue/core/richselect/api/props/dropdown

Demonstrates how to apply dropdown configuration options within a Vue template. This example sets the position to 'bottom', alignment to 'start', and enables scroll tracking.

```html
<template>
  <RichSelect
      :dropdown="{
          position: 'bottom',
          align: 'start',
          trackScroll: true
      }"
  />
</template>

```

--------------------------------

### Select Component Initialization

Source: https://docs.svar.dev/react/core/select/api

Example of how to initialize and use the Select component with options.

```APIDOC
## Select Component Initialization

### Description
This section shows how to import and use the Select component in your React application.

### Code Example
```javascript
import { Select } from "@svar-ui/react-core";

const dataset = [
  { id: 1, label: "First option" },
  { id: 2, label: "Second option" },
  { id: 3, label: "Third option" }
];

export default function App() {
  return <Select options={dataset} />;
}
```
```

--------------------------------

### Example DatePicker with Dropdown Configuration

Source: https://docs.svar.dev/vue/core/datepicker/api/props/dropdown

Demonstrates how to apply dropdown configuration to a DatePicker component. This example sets the dropdown position to 'bottom', alignment to 'start', and enables scroll tracking.

```html
<DatePicker
    :dropdown="{
        position: 'bottom',
        align: 'start',
        trackScroll: true
    }"
/>
```

--------------------------------

### Combo Initialization

Source: https://docs.svar.dev/react/core/combo/api

Demonstrates how to import and initialize the Combo component with sample data.

```APIDOC
## Combo Initialization

### Description
This section shows how to import and use the Combo component from the `@svar-ui/react-core` library. It includes an example of providing options to the combo.

### Code Example
```javascript
import { Combo } from "@svar-ui/react-core";

const dataset = [
  { id: 1, label: "First option" },
  { id: 2, label: "Second option" },
  { id: 3, label: "Third option" }
];

function Example() {
  return <Combo options={dataset} />;
}
```
```

--------------------------------

### Example: Configuring ColorPicker Dropdown

Source: https://docs.svar.dev/vue/core/colorpicker/api/props/dropdown

Demonstrates how to apply dropdown configurations to a ColorPicker component. This example sets the dropdown position to 'bottom', alignment to 'start', and enables scroll tracking.

```html
<ColorPicker
    :colors="['#65D3B3', '#FFC975', '#58C3FE']"
    :dropdown="{
        position: 'bottom',
        align: 'start',
        trackScroll: true
    }"
/>
```

--------------------------------

### ColorBoard Initialization

Source: https://docs.svar.dev/react/core/colorboard/api

Demonstrates the minimal configuration required to initialize the ColorBoard component.

```APIDOC
## ColorBoard Initialization

### Description
Initializes the ColorBoard component with its minimal configuration.

### Code Example
```javascript
import { ColorBoard } from "@svar-ui/react-core";

// minimal configuration for initialization
<ColorBoard />
```
```

--------------------------------

### Example DatePicker with Dropdown Settings

Source: https://docs.svar.dev/react/core/datepicker/api/props/dropdown

Demonstrates how to apply specific dropdown configurations to a DatePicker component. This example sets the dropdown to appear below the input and aligned to the start, with scroll tracking enabled.

```jsx
<DatePicker
    dropdown={{
        position: "bottom",
        align: "start",
        trackScroll: true
    }}
/>
```

--------------------------------

### File Manager with Download Handling

Source: https://docs.svar.dev/react/filemanager/api/actions/download-file

Example of initializing the File Manager to handle the 'download-file' event by opening a download link. It also includes data loading and providing logic.

```javascript
import { useState, useEffect } from "react";  
import { Filemanager } from "@svar-ui/react-filemanager";  
  
const server = "https://some-backend-url";  
  
function getLink(id, download) {  
  return server + "/direct?id=" + encodeURIComponent(id) + (download ? "&download=true" : "");  
}  
  
function parseDates(data) {  
  data.forEach((item) => {  
    if (item.date) item.date = new Date(item.date * 1000);  
  });  
  return data;  
}  
  
function loadData(id, api) {  
  fetch(server + "/files/" + encodeURIComponent(id))  
    .then((res) => res.json())  
    .then((data) => {  
      api.exec("provide-data", {  
        id,  
        data: parseDates(data),  
      });  
    });  
}  
  
export default function App() {  
  const [rawData, setRawData] = useState([]);  
  
  useEffect(() => {  
    fetch(server + "/files")  
      .then((res) => res.json())  
      .then((data) => setRawData(parseDates(data)));  
  }, []);  
  
  const init = (api) => {  
    api.on("download-file", (ev) => {  
      window.open(getLink(ev.id, true), "_self");  
    });  
  
    api.on("request-data", ({ id }) => loadData(id, api));  
  };  
  
  return <Filemanager init={init} data={rawData} />;  
}  

```

--------------------------------

### Example JSON Response for GET /files/{id}

Source: https://docs.svar.dev/react/filemanager/api/helpers/rest_routes/get_files_id

This JSON array represents the data returned by the GET /files/{id} endpoint, containing objects for both folders and files within the specified directory.

```json
[
    {
        "count": 17,
        "lazy": true,
        "date": "2024-04-03 16:24:52",
        "value": "Books",
        "id": "/Books",
        "type": "folder"
    },
    {
       "size": 234,
       "date": "2024-04-03 16:24:53",
       "value": "Info.txt",
       "id": "/Info.txt",
       "type": "file"
    }
]
```

--------------------------------

### Example: Setting Filemanager Panels

Source: https://docs.svar.dev/svelte/filemanager/api/properties/panels

Demonstrates how to initialize the Filemanager component with specific panels, including opened directories and selected files. Ensure 'getData()' and 'getDrive()' functions are available and correctly implemented.

```javascript
import { getData, getDrive } from "./common/data";
import { Filemanager } from "@svar-ui/svelte-filemanager";

const panels = [
  {
    path: "/Code",
    selected: ["/Code/Datepicker"],
  },
  {
    path: "/",
    selected: ["/Music", "/Code"],
  },
];
```

```html
<script>
  import { getData, getDrive } from "./common/data";
  import { Filemanager } from "@svar-ui/svelte-filemanager";

  const panels = [
    {
      path: "/Code",
      selected: ["/Code/Datepicker"],
    },
    {
      path: "/",
      selected: ["/Music", "/Code"],
    },
  ];
</script>

<Filemanager 
 data={getData()}
 drive={getDrive()}
 mode={'panels'}
 {panels} />
```

--------------------------------

### Example: Applying Custom Sizes to Grid Component

Source: https://docs.svar.dev/vue/grid/api/properties/sizes

Demonstrates how to import the Grid component and apply custom size settings. Ensure the necessary data and columns are provided.

```vue
<script setup>
    import { getData } from "./common/data";
    import { Grid } from "@svar-ui/vue-grid";

    const { data, columns } = getData();

    const sizes = {
        rowHeight: 50,
        columnWidth: 180,
        headerHeight: 60,
        footerHeight: 60,
    };
</script>

<template>
    <Grid
        :data="data"
        :columns="columns"
        :sizes="sizes" />
</template>

```

--------------------------------

### Example: Output Selected Rows IDs

Source: https://docs.svar.dev/svelte/grid/api/methods/getstate

Demonstrates how to use api.getState().selectedRows to get an array of IDs for the currently selected rows in the grid. This example requires the Grid component and its API to be bound.

```javascript
<script>
    import { Grid } from "@svar-ui/svelte-grid";
    import { getData } from "./common/data";
    const { data } = getData();

    const columns = [
        { id: "id", width: 50 },
        { id: "city", header: "City", width: 160 },
        { id: "firstName", header: "First Name" },
        { id: "lastName", header: "Last Name" },
        { id: "companyName", header: "Company" },
    ];

    let api = state();
    const updateSelected = () => {
      console.log(api.getState().selectedRows));
    };
</script>

<div style="height: 415px; ">
  <Grid {data} {columns} bind:this={api} onselectrow={updateSelected} />
</div>

```

--------------------------------

### Example: Output DataStore to Console

Source: https://docs.svar.dev/react/gantt/api/methods/getstores

This example demonstrates how to initialize the Gantt chart and log its DataStore properties to the console using api.getStores(). Ensure you have the necessary imports for Gantt and data retrieval.

```javascript
import { Gantt } from "@svar-ui/react-gantt";
import { getData } from "./common/data";

export default function Example() {
  const { tasks, links } = getData();

  function init(api) {
    const stores = api.getStores();
    console.log("DataStore:", stores);
  }

  return <Gantt init={init} tasks={tasks} links={links} />;
}
```

--------------------------------

### Example: Get Current Mode

Source: https://docs.svar.dev/svelte/filemanager/api/methods/getState

This example demonstrates how to use the api.getState() method to retrieve the current mode of the File Manager. Ensure the Filemanager component is initialized with an 'init' function that accepts the API.

```javascript
<script>
  import { Filemanager } from "@svar-ui/svelte-filemanager";
  import { getData, getDrive } from "./common/data";

  function init(api){
    const { mode } = api.getState();
    console.log(mode);
  }
</script>

<Filemanager
   init={init}
   data={getData()}
   drive={getDrive()} />

```

--------------------------------

### Bind Start and End Dates with Variables

Source: https://docs.svar.dev/svelte/core/rangecalendar

Bind the 'start' and 'end' properties of RangeCalendar to Svelte variables to get and set the selected date range. The variables will be updated automatically when the range changes.

```svelte
<script>
  import { RangeCalendar } from "@svar-ui/svelte-core";

  let v1 = new Date(2023, 3, 18);
  let v2 = new Date(2023, 4, 22);
</script>

<RangeCalendar bind:start={v1} bind:end={v2} />

```

--------------------------------

### Basic Menu Initialization

Source: https://docs.svar.dev/vue/core/menu/basicmenu/api

Demonstrates how to initialize and use the Menu component with provided options.

```APIDOC
## Basic Menu API

### Description
This section describes the initialization of the Basic Menu component.

### Method
N/A (Component Initialization)

### Endpoint
N/A (Component Initialization)

### Properties
- **at** (string) - Optional. Specifies the position of the menu relative to the target node.
- **context** (object) - Optional. A context object related to the clicked menu item.
- **css** (string) - Optional. Adds a custom style to the menu.
- **left** (number) - Optional. Sets the left offset of a menu in pixels.
- **mount** (HTMLElement) - Optional. Attaches Menu to a custom Portal.
- **options** (array) - Optional. A set of menu options.
- **parent** (HTMLElement) - Optional. An optional HTML reference used as a menu parent.
- **top** (number) - Optional. Sets the top offset of a menu in pixels.

### Events
- **click** - Fires on clicking a menu item or outside the menu.

### Request Example
```javascript
<script setup>
  import { Menu } from "@svar-ui/vue-menu";
  import { getOptions } from "./data";
  const options = getOptions();
</script>

<template>
  <Menu :options="options"></Menu>
</template>
```

### Response
N/A (Component Initialization)
```

--------------------------------

### Icon Component Initialization

Source: https://docs.svar.dev/react/core/icon/api

Demonstrates the minimal configuration required to initialize the Icon component.

```APIDOC
## Icon Component Initialization

### Description
Minimal configuration for initializing the Icon component.

### Code Example
```javascript
import { Icon } from "@svar-ui/react-core";

<Icon />
```
```

--------------------------------

### Example Usage of Month Component with Current Date

Source: https://docs.svar.dev/svelte/core/month/api/props/current

This example demonstrates how to use the 'current' property to display the Month component starting on March 18, 2023. Ensure the Date object is correctly formatted.

```jsx
<Month current={new Date(2023, 2, 18)} />
```

--------------------------------

### Full React Editor initialization with theme

Source: https://docs.svar.dev/react/editor/guides/initialization

Demonstrates a full initialization of the Editor widget, including importing necessary components and wrapping the Editor in a theme provider like `Willow`. Ensure a theme is applied at the top level for correct rendering.

```javascript
import { Editor } from "@svar-ui/react-editor";  
import { Willow } from "@svar-ui/react-core";  
  
const items = [  
  { comp: "text", key: "name", label: "Name" },  
  { comp: "text", key: "descr", label: "Description" },  
  { comp: "text", key: "role", label: "Role" }  
];  
  
const values = {  
  name: "John Doe",  
  descr: "Lorem ipsum dolor sit amet",  
  role: "admin"  
};  
  
export default function App() {  
  return (  
    <Willow>  
      <Editor items={items} values={values} />  
    </Willow>  
  );  
}  
```

--------------------------------

### Load Files from Server

Source: https://docs.svar.dev/react/filemanager/api/helpers/rest_methods/loadfiles

Demonstrates how to use the loadFiles() method to fetch file data and update the state. This example shows both initial loading and loading on component mount.

```javascript
import { useEffect, useState, useMemo } from "react";
import { RestDataProvider } from "@svar-ui/filemanager-data-provider";
import { Filemanager } from "@svar-ui/react-filemanager";

const url = "https://some-backend-url";

export default function ExampleFileManager() {
  const restProvider = useMemo(() => new RestDataProvider(url), []);

  const [data, setData] = useState([]);

  // init is passed to the Filemanager component and will be called with the API instance
  const init = (api) => {
    api.setNext(restProvider);

    // loadFiles returns a Promise with an array of files
    restProvider.loadFiles().then((files) => {
      setData(files);
    });
  };

  // Optionally, you can pre-load files on component mount:
  useEffect(() => {
    restProvider.loadFiles().then((files) => setData(files));
  }, [restProvider]);

  return <Filemanager init={init} data={data} />;
}
```

--------------------------------

### Example: Get Current Mode using api.getState()

Source: https://docs.svar.dev/react/filemanager/api/methods/getstate

This example demonstrates how to use api.getState() to retrieve the current mode of the File Manager and log it to the console. Ensure the Filemanager component is initialized with the init function.

```javascript
import { Filemanager } from "@svar-ui/react-filemanager";
import { getData, getDrive } from "./common/data";

function init(api) {
  const { mode } = api.getState();
  console.log(mode);
}

<Filemanager
  init={init}
  data={getData()}
  drive={getDrive()}
/>
```

--------------------------------

### Install Tasklist Widget Packages

Source: https://docs.svar.dev/react/core/tasklist

Install the core and tasklist packages using npm or yarn.

```bash
npm install @svar-ui/react-core
npm install @svar-ui/react-tasklist
```

```bash
yarn add @svar-ui/react-core
yarn add @svar-ui/react-tasklist
```

--------------------------------

### Example: Gantt Chart with Task Links

Source: https://docs.svar.dev/svelte/gantt/api/properties/links

Demonstrates how to import Gantt component and provide task data along with defined links to visualize dependencies.

```javascript
<script>  
  import { getData } from "./common/data";  
  import { Gantt } from "@svar-ui/svelte-gantt";  
    
  const {tasks, scales, columns} = getData();  
    
  const links = [  
    { id: 1, source: 3, target: 4, type: "e2s" },  
    { id: 2, source: 1, target: 2, type: "e2s" },  
    { id: 21, source: 8, target: 1, type: "s2s" },  
    { id: 22, source: 1, target: 6, type: "s2s" },  
];  
</script>      
      
<Gantt {tasks} {scales} {columns} {links} />  


```

--------------------------------

### Action Menu Initialization

Source: https://docs.svar.dev/react/core/menu/actionmenu/api

Demonstrates how to import and initialize the ActionMenu component with options.

```APIDOC
## Action Menu Initialization

### Description
This section shows how to import and use the ActionMenu component in your React application.

### Code Example
```javascript
import { ActionMenu } from "@svar-ui/react-menu";
import { getOptions } from "./data";

const options = getOptions();

export default function App() {
  return <ActionMenu options={options} />;
}
```
```

--------------------------------

### Apply Numeric Filter Example

Source: https://docs.svar.dev/svelte/filter/api/filter/properties/filtereditor-filter

Example demonstrating how to apply a 'greater' numeric filter on the year part of a date field. It uses getOptions to extract unique year numbers and allows filtering items by start year.

```javascript
import { FilterEditor, getOptions } from "@svar-ui/svelte-filter";
    
  // Get year numbers from "start" date field  
  // [ 2024, 2025 ]  
  const options = getOptions(data, "start", {
      predicate: "year",
  });
        
```

```svelte
<script>
  import { FilterEditor, getOptions } from "@svar-ui/svelte-filter";
    
  // Get year numbers from "start" date field  
  // [ 2024, 2025 ]  
  const options = getOptions(data, "start", {
      predicate: "year",
  });
        
</script>
  
<FilterEditor field="start" type="number" {{options}} filter="greater" />

```

--------------------------------

### Handling Checkbox Change Event

Source: https://docs.svar.dev/vue/core/checkbox/api/events/change

Example of how to implement and use the onchange event handler for a Checkbox component in a Vue.js setup.

```vue
<script setup>
  function handleChange({value}) {
     console.log(value);
    }
</script>

<template>
  <Checkbox label="Checkbox" :onchange="handleChange"/>
</template>
```

--------------------------------

### Basic Menu API Initialization

Source: https://docs.svar.dev/react/core/menu/basicmenu/api

Demonstrates how to initialize and use the Menu component with provided options.

```APIDOC
## Initialization

```javascript
import { Menu } from "@svar-ui/react-menu";
import { getOptions } from "./data";

export default function App() {
  const options = getOptions();

  return <Menu options={options} />;
}
```

## Properties

- **at** (string) - Optional. Specifies the position of the menu relative to the target node.
- **context** (object) - Optional. A context object related to the clicked menu item.
- **css** (string) - Optional. Adds a custom style to the menu.
- **left** (number) - Optional. Sets the left offset of a menu in pixels.
- **mount** (HTMLElement) - Optional. Attaches Menu to a custom Portal.
- **options** (array) - Optional. A set of menu options.
- **parent** (HTMLElement) - Optional. An optional HTML reference used as a menu parent.
- **top** (number) - Optional. Sets the top offset of a menu in pixels.

## Events

- **click** - Fires on clicking a menu item or outside the menu.
```

--------------------------------

### Update Segment Dates and Recalculate Duration

Source: https://docs.svar.dev/react/gantt/guides/configuration/manage_split

When updating date-related fields (start, end, duration) for a segment, provide at least two values to ensure consistent recalculation of the third. The example updates start and duration, and calculates the end date.

```javascript
const { segments } = api.current.getTask(10);

segments[0] = { 
  ...segments[0],
  start: new Date(2024, 0, 5),
  duration: 7,
  end: new Date(new Date(2024, 0, 5).getTime() + 7*24*3600*1000)
};

api.current.exec("update-task", {
  id: 10,
  task: { segments },
});
```

--------------------------------

### Initialize Gantt Chart with Project Start Date - React

Source: https://docs.svar.dev/react/gantt/api/properties/projectstart

This example demonstrates how to initialize the Gantt component with a specific project start date. Ensure you import `getData` and `Gantt` from their respective modules. The `projectStart` is passed as a JavaScript Date object.

```javascript
import { getData } from "../data";
import { Gantt } from "@svar/react-gantt";

export default function App() {
  const data = getData();
  const projectStart = new Date(2024, 3, 2);

  return (
    <Gantt
      tasks={data.tasks}
      links={data.links}
      projectStart={projectStart}
    />
  );
}
```

--------------------------------

### Basic React App Setup

Source: https://docs.svar.dev/react/gantt/integration-guides/integration-jotai

A minimal React application setup using `createRoot` from `react-dom/client`. Jotai does not require a specific Provider for basic usage.

```typescript
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
import "./index.css";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <App />
  </StrictMode>
);
```

--------------------------------

### Dropdown Menu Example

Source: https://docs.svar.dev/svelte/core/menu/dropdownmenu/api/props/options

Demonstrates how to use the 'options' property to populate a DropDownMenu with a list of clickable menu items. Requires the DropDownMenu and Button components.

```svelte
<script>
    const options = [
        { id: "add-task:child", text: "Child task" },
        { id: "add-task:above", text: "Task above" },
        { id: "add-task:below", text: "Task below" },
    ];
</script>

<DropDownMenu {options}>
    <Button type="primary">Click me</Button>
</DropDownMenu>

```

--------------------------------

### Gantt Chart with autoScale Enabled

Source: https://docs.svar.dev/svelte/gantt/api/properties/autoscale

Example of configuring a Gantt chart with autoScale set to 'true' and specifying start and end dates.

```javascript
<script>
   import { getData } from "../data";
   import { Gantt } from "@svar-ui/svelte-gantt";

   const data = getData();

</script>

<Gantt
   {tasks}
   start={new Date(2023, 2, 1)}
   end={new Date(2024, 3, 12)}
   autoScale="true"
/>

```

--------------------------------

### Predicate JSON Output Example

Source: https://docs.svar.dev/react/filter/guides/filterquery/query-syntax

Demonstrates the JSON output for a year predicate. `start: 2024` and `start.year: 2024` produce the same output.

```json
{ "field": "start", "predicate": "year", "filter": "equal", "value": 2024 }
```