### Start Application with Docker Compose

Source: https://github.com/onlyoffice/docspace-client/blob/master/common/translation-app/README.md

Starts the application services using Docker Compose after manual setup and environment variable configuration.

```bash
docker-compose up -d
```

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

### Basic ComboBox Usage

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/combobox/README.md

Demonstrates the basic setup of the ComboBox with options and a selected option. Includes an example of handling option selection.

```jsx
const options = [
  {
    key: 1,
    icon: "path/to/icon.svg", // optional
    label: "Option 1",
    disabled: false, // optional
    onClick: () => {}, // optional
  },
];

<ComboBox
  options={options}
  selectedOption={{ key: 1, label: "Option 1" }}
  onSelect={(option) => console.log("Selected:", option)}
/>
```

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

### Show Examples

Source: https://github.com/onlyoffice/docspace-client/blob/master/common/translation-app/backend/src/scripts/form/QUICKSTART.md

Display examples from the EXAMPLES.md file. This command helps users quickly understand how to use the script with practical examples.

```bash
# Show examples
cat EXAMPLES.md
```

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

### Build Docker Image Script

Source: https://github.com/onlyoffice/docspace-client/blob/master/common/translation-app/README.md

Builds and starts Docker containers for the application, including dependency installation and environment variable configuration.

```bash
python build.docker.py
```

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

### Run Translation App Script (Windows)

Source: https://github.com/onlyoffice/docspace-client/blob/master/common/translation-app/README.md

Executes the convenience script for Windows to install dependencies, run metadata generation, start servers, and open the application in the browser.

```bash
# From the translation-app directory
run.translation-app.bat
```

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

### Install Frontend Dependencies

Source: https://github.com/onlyoffice/docspace-client/blob/master/common/translation-app/README.md

Installs Node.js dependencies for the frontend application.

```bash
cd frontend
npm install
```

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

### Install Backend Dependencies

Source: https://github.com/onlyoffice/docspace-client/blob/master/common/translation-app/README.md

Installs Node.js dependencies for the backend server.

```bash
cd backend
npm install
```

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

### Install Button Component

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/button/README.md

Import the Button component from the shared components library.

```bash
import { Button } from "@docspace/shared/components/button";
```

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

### Run Translation App Script (macOS/Linux)

Source: https://github.com/onlyoffice/docspace-client/blob/master/common/translation-app/README.md

Executes the convenience script for macOS/Linux to install dependencies, run metadata generation, start servers, and open the application in the browser.

```bash
# From the translation-app directory
./run.translation-app.sh
```

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

### Serve Ollama API

Source: https://github.com/onlyoffice/docspace-client/blob/master/common/translation-app/README.md

Starts the Ollama server to make its API available for AI translation requests.

```bash
ollama serve
```

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

### Modal Dialog Example with State Management

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/backdrop/README.md

A complete example of using the Backdrop with a modal dialog, including state management to control visibility. This demonstrates how to open and close a modal using the backdrop.

```tsx
import { useState } from "react";
import { Button, Backdrop, Modal } from "@docspace/components";

const ModalExample = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
      <Backdrop
        visible={isOpen}
        isModalDialog
        withBackground
        onClick={() => setIsOpen(false)}
      />
      {isOpen && <Modal>Modal Content</Modal>}
    </>
  );
};

```

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

### Cron Component Usage Example

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/cron/README.md

Demonstrates how to use the Cron component, including setting its initial value and handling changes and errors.

```jsx
import React from "react";
import Cron from "@docspace/shared/components";

const Component = () => {
  const handleCronChange = (newCronValue) => {
    console.log("New cron value:", newCronValue);
  };

  const handleCronError = (error) => {
    console.error("Cron error:", error);
  };

  return (
    <Cron
      value="*5 * * * *"
      setValue={handleCronChange}
      onError={handleCronError}
    />
  );
};

export default Component;
```

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

### Basic Modal Dialog Example

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/modal-dialog/README.md

Demonstrates a standard modal dialog with a header, body, and footer. Use this for typical modal pop-ups.

```jsx
<ModalDialog visible={true} displayType="modal" onClose={() => {}}>
  <ModalDialog.Header>Change password</ModalDialog.Header>
  <ModalDialog.Body>
    <div>
      Send the password change instruction to the{" "}
      <a href="mailto:example@email.com">example@email.com</a>
    </div>
  </ModalDialog.Body>
  <ModalDialog.Footer>
    <Button
      label="Send"
      primary
      size="normal"
      onClick={() => {}}
    />
    <Button
      label="Cancel"
      size="normal"
      onClick={() => {}}
    />
  </ModalDialog.Footer>
</ModalDialog>
```

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

### AccessRightSelect Options Example

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/access-right-select/AccessRightSelect.mdx

Example structure for the 'options' array used by the AccessRightSelect component. Each option defines a specific access right with its properties.

```javascript
{
    key: "key1",
    title: "Room administrator",
    description: `Administration of rooms, archiving of rooms, inviting and managing users in rooms.`, 
    icon: CrownIconUrl,
    quota: "free",
    color: "#20D21F",
  }
```

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

### Basic SearchInput Example

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/search-input/README.md

A basic implementation of the SearchInput component with a placeholder and clear button.

```jsx
<SearchInput
  size="base"
  value={searchValue}
  onChange={handleSearch}
  placeholder="Search..."
  showClearButton
/>
```

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

### Selector Component Usage Example

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/selector/README.md

A comprehensive example demonstrating how to use the Selector component with various props. This includes configuration for labels, empty states, pagination, search, and selection logic.

```jsx
<Selector
  acceptButtonLabel="Add"
  accessRights={[]}
  withoutBackButton={false}
  cancelButtonLabel="Cancel"
  emptyScreenDescription="The list of users previously invited to DocSpace or separate rooms will appear here. You will be able to invite these users for collaboration at any time."
  emptyScreenHeader="No other accounts here yet"
  emptyScreenImage={EmptyScreenFilterPng}
  hasNextPage={false}
  headerLabel="Room list"
  items={[]}
  isLoading={false}
  loadNextPage={() => {}}
  onAccept={function noRefCheck() {}}
  onAccessRightsChange={function noRefCheck() {}}
  onBackClick={function noRefCheck() {}}
  onCancel={function noRefCheck() {}}
  onClearSearch={function noRefCheck() {}}
  onSearch={function noRefCheck() {}}
  onSelect={function noRefCheck() {}}
  onSelectAll={function noRefCheck() {}}
  rowLoader={<></>}
  searchEmptyScreenDescription=" SEARCH !!! The list of users previously invited to DocSpace or separate rooms will appear here. You will be able to invite these users for collaboration at any time."
  searchEmptyScreenHeader="No other accounts here yet search"
  searchEmptyScreenImage={EmptyScreenFilterPng}
  searchLoader={<></>}
  searchPlaceholder="Search"
  searchValue=""
  selectAllIcon={RoomArchiveSvgUrl}
  selectAllLabel="All accounts"
  selectedAccessRight={{}}
  selectedItems={[]}
  totalItems={0}
  withBreadCrumbs={false}
  breadCrumbs={[]}
  onSelectBreadCrumb={function noRefCheck() {}}
  breadCrumbsLoader={<></>}
  withSearch={true}
  isBreadCrumbsLoading={false}
  withFooterInput={false}
  footerInputHeader={""}
  footerCheckboxLabel={""}
  currentFooterInputValue={""}
  alwaysShowFooter={false}
  descriptionText={""}
/>
```

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

### Basic ToggleButton Example

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/toggle-button/README.md

A simple example of rendering a ToggleButton with a label. This is the most basic way to integrate the component.

```jsx
<ToggleButton label="Basic toggle" />
```

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

### Different Loader Types Example

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/loader/README.md

Displays various loader types side-by-side with different sizes for comparison.

```jsx
// Different types of loaders
<div style={{ display: "flex", gap: "20px" }}>
  <Loader type={LoaderTypes.base} size="20px" />
  <Loader type={LoaderTypes.oval} size="30px" />
  <Loader type={LoaderTypes.dualRing} size="40px" />
  <Loader type={LoaderTypes.rombs} size="35px" />
  <Loader type={LoaderTypes.track} size="25px" />
</div>
```

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

### Install Test Dependencies

Source: https://github.com/onlyoffice/docspace-client/blob/master/common/translation-app/README.md

Installs Node.js dependencies required for running translation validation tests.

```bash
cd ../tests
npm install
```

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

### Password Settings Object Example

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/password-input/README.md

An example of a settings object for the PasswordInput component, specifying minimum length, and requirements for uppercase letters, digits, and special characters.

```javascript
{
  minLength: 6,
  upperCase: false,
  digits: false,
  specSymbols: false
}
```

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

### Basic InputBlock Example

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/input-block/README.md

A fundamental InputBlock with an ID, icon, placeholder, and event handlers for changes and icon clicks.

```jsx
<InputBlock
  id="search-input"
  iconName={SearchReactSvgUrl}
  placeholder="Search..."
  onChange={(e) => console.log(e.target.value)}
  onIconClick={() => console.log("Search clicked")}
/>
```

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

### InfoBadge Usage Example

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/info-badge/README.md

Demonstrates how to use the InfoBadge component with all its required properties. Import the component and use it within your React application.

```jsx
import React from "react";
import InfoBadge from "@docspace/shared/components";

const MyComponent = () => {
  return (
    <InfoBadge
      label="Info"
      place="top"
      tooltipTitle="Information"
      tooltipDescription="This is an information badge with a tooltip."
      offset={10}
    />
  );
};

export default MyComponent;
```

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

### Disabled SearchInput Example

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/search-input/README.md

Shows how to render the SearchInput component in a disabled state.

```jsx
<SearchInput size="base" value="Disabled input" isDisabled />
```

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

### Active TabItem Example

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/tab-item/README.md

Shows how to render a TabItem in its active state by setting the isActive prop to true.

```jsx
// Active tab
<TabItem
  label="Active Tab"
  isActive={true}
  onSelect={handleTabSelect}
/>
```

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

### Multiple Backdrops with Aside Components

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/backdrop/README.md

Demonstrates how to manage multiple Backdrop instances, typically used with multiple Aside components. This example shows controlling the visibility of two separate asides.

```tsx
import { useState } from "react";
import { Button, Backdrop, Aside } from "@docspace/components";

const AsideExample = () => {
  const [isFirstOpen, setFirstOpen] = useState(false);
  const [isSecondOpen, setSecondOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setFirstOpen(true)}>Open First Aside</Button>
      <Button onClick={() => setSecondOpen(true)}>Open Second Aside</Button>

      <Backdrop
        visible={isFirstOpen}
        isAside
        withBackground
        onClick={() => setFirstOpen(false)}
      />
      <Backdrop
        visible={isSecondOpen}
        isAside
        withBackground
        onClick={() => setSecondOpen(false)}
      />

      {isFirstOpen && <Aside>First Aside Content</Aside>}
      {isSecondOpen && <Aside>Second Aside Content</Aside>}
    </>
  );
};

```

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

### TabGroup Component Example

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/tab-item/README.md

Provides an example of a TabGroup component that manages the active state of multiple TabItems.

```jsx
// Tab group example
const TabGroup = () => {
  const [activeTab, setActiveTab] = useState("tab1");

  return (
    <div style={{ display: "flex", gap: "16px" }}>
      <TabItem
        label="First Tab"
        isActive={activeTab === "tab1"}
        onSelect={() => setActiveTab("tab1")}
      />
      <TabItem
        label="Second Tab"
        isActive={activeTab === "tab2"}
        onSelect={() => setActiveTab("tab2")}
      />
      <TabItem
        label="Third Tab"
        isActive={activeTab === "tab3"}
        onSelect={() => setActiveTab("tab3")}
      />
    </div>
  );
};

```

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

### Install PDF Generation Dependencies

Source: https://github.com/onlyoffice/docspace-client/blob/master/common/translation-app/backend/src/scripts/form/QUICKSTART.md

Install the necessary Python packages for PDF generation using pip. This is only required if you plan to generate PDFs.

```bash
pip install -r requirements.txt
```

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

### Loading ToggleButton Example

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/toggle-button/README.md

Demonstrates the loading state of the ToggleButton using the `isLoading` prop. This can be used to indicate an ongoing operation related to the toggle.

```jsx
<ToggleButton
  label="Loading"
  isLoading={true}
/>
```

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

### Basic Scrollable Content Example

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/scrollbar/README.md

Renders a Scrollbar with content that requires vertical scrolling.

```jsx
<Scrollbar>
  <div style={{ height: "500px" }}>
    <p>Scrollable content here...</p>
  </div>
</Scrollbar>
```

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

### Configure and Render MainButtonMobile

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/main-button-mobile/README.md

Configure action and button options, then render the MainButtonMobile component with various props to customize its appearance and behavior. This example demonstrates setting styles, titles, and dropdown content.

```jsx
const actionOptions = [
  {
    key: "1",
    label: "New document",
    icon: MobileActionsFolderReactSvgUrl,
  },
  {
    key: "2",
    label: "New presentation",
    icon: MobileActionsFolderReactSvgUrl,
  },
];

const buttonOptions = [
  {
    key: "1",
    label: "Import point",
  },
  {
    key: "2",
    label: "Import point",
  },
];

<MainButtonMobile
  style={{
    top: "90%",
    left: "82%",
    position: "fixed",
  }}
  manualWidth="320px"
  title="Upload"
  withButton={true}
  actionOptions={actionOptions}
  progressOptions={progressOptions}
  isOpenButton={true}
  buttonOptions={buttonOptions}
/>;
```

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

### Basic Link with Dropdown Example

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/link-with-dropdown/README.md

Render a basic LinkWithDropdown component with custom color and font weight, passing data for the dropdown menu.

```jsx
<LinkWithDropdown color="black" isBold={true} data={data}>
  Link with dropdown
</LinkWithDropdown>
```

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

### Tags Component Usage Example

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/tags/README.md

Demonstrates how to import and use the Tags component with various properties. It includes handling tag selection via the onSelectTag callback.

```jsx
import React from "react";
import Tags from "@docspace/shared/components";

const MyComponent = () => {
  const handleTagSelection = (selectedTag) => {
    console.log("Selected tag:", selectedTag);
  };

  return (
    <Tags
      id="myTags"
      tags={["tag1", "tag2", "tag3"]}
      className="custom-tags"
      columnCount={2}
      style={{ color: "blue" }}
      onSelectTag={handleTagSelection}
    />
  );
};

export default MyComponent;
```

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

### Basic EmptyView Usage

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/empty-view/README.md

Render the EmptyView component with a title, description, and a custom icon. This example shows how to display a simple empty state.

```jsx
<EmptyView 
  title="No Items" 
  description="There are no items to display" 
  icon={<MyIcon />} 
  options={[
    {
      key: "create",
      title: "Create New Item",
      description: "Click to add a new item",
      icon: <AddIcon />,
      onClick: handleCreate
    }
  ]} 
/>
```

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

### SocialButton Usage Example

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/social-button/README.md

Demonstrates how to use the SocialButton component with various properties to configure its appearance and behavior. This includes setting labels, icons, disabled states, custom styles, and click handlers.

```jsx
import React from "react";
import SocialButton from "@docspace/shared/components";

const MyComponent = () => {
  const handleButtonClick = (event) => {
    console.log("Button clicked!", event);
  };

  return (
    <SocialButton
      label="Connect with Social Media"
      iconName="social-icon"
      tabIndex={1}
      isDisabled={false}
      className="custom-button"
      id="socialButton"
      style={{ backgroundColor: "lightgray" }}
      onClick={handleButtonClick}
      $iconOptions={{ color: "blue" }}
      size="base"
      isConnect={true}
      IconComponent={CustomIconComponent}
      noHover={false}
    />
  );
};

export default MyComponent;
```

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

### Badge Component Usage Example

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/badge/README.md

Demonstrates how to use the Badge component with various props to customize its appearance and behavior. The onClick prop can be used to handle user interactions.

```jsx
<Badge
  label="10"
  backgroundColor="#ED7309"
  color="#FFFFFF"
  fontSize="11px"
  fontWeight={800}
  borderRadius="11px"
  padding="0 5px"
  maxWidth="50px"
  onClick={() => {}}
/>
```

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

### Basic Aside Usage

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/aside/README.md

A simple example of rendering the Aside component with basic content. Ensure `visible` is set to `true` to display the panel.

```tsx
<Aside visible={true} onClose={() => console.log("Close clicked")}>
  <div>Basic content</div>
</Aside>
```

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

### Render MainButton as Action Button

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/main-button/README.md

This example shows how to render the MainButton as a standard action button with an associated click handler. The `isDropdown` prop is set to false.

```jsx
<MainButton
  text="Button"
  isDropdown={false}
  onkAction={() => SomeFunction()}
  moduleName="people"
/>
```

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

### Docker Compose Commands

Source: https://github.com/onlyoffice/docspace-client/blob/master/common/translation-app/README.md

Commands to manage Docker containers for the application. Use these to start, rebuild, stop, and view logs.

```bash
# Start containers
docker-compose up -d
```

```bash
# Rebuild containers
docker-compose up -d --build
```

```bash
# Stop containers
docker-compose down
```

```bash
# View logs
docker-compose logs -f
```

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

### Aside (Side Panel) Dialog Example

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/modal-dialog/README.md

Shows how to use the ModalDialog as an aside or side panel. Enable 'withBodyScroll' for scrollable content within the panel.

```jsx
<ModalDialog 
  visible={true} 
  displayType="aside"
  withBodyScroll
  onClose={() => {}}
>
  <ModalDialog.Header>Side Panel</ModalDialog.Header>
  <ModalDialog.Body>
    {/* Long scrollable content */}
  </ModalDialog.Body>
</ModalDialog>
```

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

### Import Campaigns Banner Component

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/campaigns-banner/README.md

Import the CampaignsBanner component from the shared components library. This is a required setup step before using the component.

```javascript
import CampaignsBanner , from "@docspace/shared/components/campaigns-banner";
```

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

### Basic Avatar Usage

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/avatar/README.md

Render a basic Avatar component with essential props. This example shows a default configuration for displaying an avatar.

```jsx
<Avatar size="max" role="admin" source="" userName="" editing={false} />
```

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

### Basic Label Example

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/label/README.md

Render a basic label with text, title, and display properties. Associates the label with a form input using htmlFor.

```jsx
<Label
  text="First name:"
  title="first name"
  htmlFor="firstNameField"
  display="block"
/>
```

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

### Show All Available Options

Source: https://github.com/onlyoffice/docspace-client/blob/master/common/translation-app/backend/src/scripts/form/QUICKSTART.md

Display all command-line options and their descriptions for the export script. This is useful for understanding the full range of functionalities.

```bash
# Show all available options
python export_and_build_all.py --help
```

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

### Define Array Data for Tooltip

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/tooltip/README.md

An example array of user objects, each with a key, name, email, and position, used to populate tooltip content dynamically.

```javascript
const arrayUsers = [
  { key: "user_1", name: "Bob", email: "Bob@gmail.com", position: "developer" },
  {
    key: "user_2",
    name: "John",
    email: "John@gmail.com",
    position: "developer",
  },
  {
    key: "user_3",
    name: "Kevin",
    email: "Kevin@gmail.com",
    position: "developer",
  },
];
```

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

### Basic MediaViewer Integration

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/media-viewer/README.md

Demonstrates how to import and render the MediaViewer component with essential props and callback functions. Ensure all required data and handler functions are defined before use.

```jsx
import React from "react";
import MediaViewer from "path/to/MediaViewer";

const MyComponent = () => {
  // Define required callback functions and other necessary data
  const handleNextMedia = () => {
    /* ... */
  };
  const handlePrevMedia = () => {
    /* ... */
  };
  // ...

  return (
    <MediaViewer
      t={translationTypeInstance}
      files={mediaFiles}
      visible={true}
      playlistPos={0}
      isPreviewFile={false}
      playlist={playlists}
      extsImagePreviewed={["jpg", "png"]}
      currentFileId={currentFileId}
      getIcon={getIconFunction}
      // ... (other properties)
      onClose={handleClose}
      onError={handleError}
      nextMedia={handleNextMedia}
      prevMedia={handlePrevMedia}
      // ... (other callbacks)
    />
  );
};

export default MyComponent;
```

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

### Read Full Documentation

Source: https://github.com/onlyoffice/docspace-client/blob/master/common/translation-app/backend/src/scripts/form/QUICKSTART.md

Display the full documentation from the README.md file. This command is useful for in-depth understanding of the project and its scripts.

```bash
# Read full documentation
cat README.md
```

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

### Calendar Component Usage Example

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/calendar/README.md

Demonstrates how to use the Calendar component with common properties like onChange, minDate, maxDate, and locale. The onChange function is called when a date is selected.

```jsx
<Calendar
  onChange={(date) => {
    console.log("Selected date:", date);
  }}
  minDate={new Date("1970/01/01")}
  maxDate={new Date("3000/01/01")}
  locale="ru"
/>
```

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

### Docspace Client Initialization Script

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/client/public/index.html

This script fetches the client configuration from a URL defined in htmlWebpackPlugin.options.configUrl. It parses the JSON response, stores it in window.ClientConfig, and applies special handling for Zoom user agents.

```javascript
console.log("It's WEB CLIENT INIT");
fetch("<%= htmlWebpackPlugin.options.configUrl %>")
  .then((response) => {
    if (!response.ok) {
      throw new Error("HTTP error " + response.status);
    }
    return response.json();
  })
  .then((config) => {
    window.ClientConfig = { ...config,
    };
    if ( window.navigator.userAgent.includes("ZoomWebKit") || window.navigator.userAgent.includes("ZoomApps") ) {
      window.ClientConfig.editor = {
        requestClose: true,
      };
    }
    //console.log({ ClientConfig: window.ClientConfig });
  })
  .catch((e) => {
    console.error(e);
    window.ClientConfig = {
      errorOnLoad: e,
    };
  });
```

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

### Windows-Specific Usage for Export and Build

Source: https://github.com/onlyoffice/docspace-client/blob/master/common/translation-app/backend/src/scripts/form/EXAMPLES.md

Demonstrates how to run the `export_and_build_all.py` script on Windows using both Command Prompt and PowerShell, with options for all projects or specific projects and languages.

```cmd
REM Windows Command Prompt
python export_and_build_all.py --all-projects

REM PowerShell
python export_and_build_all.py --project Common --languages ru de
```

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

### Export and Build PDF for Large Projects

Source: https://github.com/onlyoffice/docspace-client/blob/master/common/translation-app/backend/src/scripts/form/EXAMPLES.md

For projects with over 1000 keys, first export all translations, then build the PDF form. The PDF building process shows progress updates.

```bash
# Export first
python export_all_languages.py --project Client --languages ru

# Then build PDF (will show progress every 100 keys)
python build_oform.py --input output/Client-all-keys-from-en-to-ru.json
```

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

### Backend File Structure

Source: https://github.com/onlyoffice/docspace-client/blob/master/common/translation-app/README.md

Overview of the backend directory structure, highlighting key configuration, routes, and utility files.

```tree
backend/
  ├── src/
  │   ├── config/
  │   │   └── config.js       # Configuration including project mapping
  │   ├── routes/
  │   │   ├── projects.js     # Project routes
  │   │   ├── languages.js    # Language routes
  │   │   ├── namespaces.js   # Namespace routes
  │   │   ├── translations.js # Translation routes
  │   │   └── ollama.js       # Ollama integration routes
  │   ├── utils/
  │   │   └── fsUtils.js      # File system utilities
  │   └── index.js            # Main server file
  ├── .env                    # Environment variables
  └── package.json            # Dependencies
```

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

### Interactive Text Example

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/text/README.md

Renders clickable text with an inline click handler and custom cursor style.

```jsx
<Text
  isInline
  onClick={() => console.log("clicked")}
  style={{ cursor: "pointer" }}
>
  Click me!
</Text>
```

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

### Import and Configure EmailSettings

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/email-input/README.md

Import the EmailInput component and EmailSettings utility. Instantiate EmailSettings and customize domain punycode validation.

```javascript
import { EmailInput } from "@docspace/shared/components/email-input";
import { EmailSettings } from "@docspace/shared/utils";

const settings = new EmailSettings();

settings.allowDomainPunycode = true;
```

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

### Search Button with Hover Effect

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/icon-button/README.md

An example of an IconButton configured for a search action with a specific hover effect.

```jsx
<IconButton
  iconName={SearchReactSvgUrl}
  iconHoverName={SearchHoverSvgUrl}
  size={25}
  hoverColor="#0066cc"
  title="Search"
  dataTip="Click to search"
/>
```

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

### Section Component Usage

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/section/README.md

Example of how to use the Section component with its various content slots and properties like withBodyScroll.

```jsx
<Section withBodyScroll={true}>
  <Section.SectionHeader>{sectionHeaderContent}</Section.SectionHeader>

  <Section.SectionFilter>{sectionFilterContent}</Section.SectionFilter>

  <Section.SectionBody>{sectionBodyContent}</Section.SectionBody>

  <Section.SectionPaging>{sectionPagingContent}</Section.SectionPaging>
</Section>
```

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

### Basic Backdrop Usage

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/backdrop/README.md

Demonstrates the basic implementation of the Backdrop component. Use this for simple overlays where a click outside should dismiss the overlay.

```tsx
import { Backdrop } from "@docspace/components";

// Basic usage
<Backdrop visible onClick={handleBackdropClick} />
```

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

### Backdrop for Aside Component

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/backdrop/README.md

Illustrates the usage of the Backdrop component when paired with an Aside component. This setup is for side-panel overlays.

```tsx
<Backdrop
  visible
  isAside
  withBackground
  onClick={handleBackdropClick}
/>
```

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

### Quick Backup Script

Source: https://github.com/onlyoffice/docspace-client/blob/master/common/translation-app/backend/src/scripts/form/QUICKSTART.md

This scenario demonstrates how to perform a quick backup by exporting only JSON files, skipping PDF generation. This is useful for frequent, lightweight backups.

```bash
# Export JSON only (no PDFs)
python export_and_build_all.py --all-projects --skip-pdf
```

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

### Disabled ToggleButton Example

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/toggle-button/README.md

Illustrates how to render a ToggleButton in a disabled state using the `isDisabled` prop. Disabled buttons are non-interactive.

```jsx
<ToggleButton
  label="Disabled toggle"
  isDisabled={true}
/>
```

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

### Truncated Text Example

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/text/README.md

Enables text truncation with an ellipsis when the content exceeds the container width using the truncate prop.

```jsx
<Text truncate>
  This is a very long text that will be truncated when it exceeds the container
  width
</Text>
```

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

### Run generate-metadata.js Script

Source: https://github.com/onlyoffice/docspace-client/blob/master/common/translation-app/README.md

Execute the script to scan locales directories and generate metadata files for translation keys.

```bash
node src/scripts/generate-metadata.js
```

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

### Basic RoomLogo Usage

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/room-logo/README.md

Render the RoomLogo component with custom type and privacy settings. This is a basic example of how to use the component.

```jsx
<RoomLogo type={"custom"} isPrivacy={false} isArchive={false} />
```

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

### Basic ThemeProvider Usage

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/theme-provider/README.md

Demonstrates the basic usage of ThemeProvider with a default theme. Import ThemeProvider and the desired theme object (e.g., Base) to apply it to your application's components.

```tsx
import ThemeProvider from "@docspace/shared/components/theme-provider";
import { Base, Dark } from "@docspace/shared/themes";

// Basic usage with default theme
const App = () => (
  <ThemeProvider theme={Base}>
    <YourApp />
  </ThemeProvider>
);
```

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

### Tag Component Usage

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/tag/README.md

Example of how to use the Tag component with various props. Customize its appearance and behavior using the available properties.

```jsx
<Tag
  tag="tag"
  label={"script"}
  isNewTag={false}
  isDisabled={false}
  onDelete={}
  onClick={}
  advancedOptions={}
  tagMaxWidth={}
/>
```

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

### Run save-meta-keys-usage.js Script

Source: https://github.com/onlyoffice/docspace-client/blob/master/common/translation-app/README.md

Execute the script to scan the codebase for translation key usage and update metadata.

```bash
node src/scripts/save-meta-keys-usage.js
```

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

### MainButtonMobile Storybook Canvas Example

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/main-button-mobile/MainButtonMobile.docs.mdx

Renders the default story of the MainButtonMobile component within a Storybook Canvas for visual testing and documentation.

```tsx
<Canvas>
  <Story of={stories.Default} />
</Canvas>
```

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

### Configure DocSpace API Credentials

Source: https://github.com/onlyoffice/docspace-client/blob/master/common/translation-app/backend/src/scripts/form/README.md

Sets the DocSpace portal URL and API key using environment variables or a .env file.

```bash
DOCSPACE_PORTAL_URL=https://your-portal.onlyoffice.com
DOCSPACE_API_KEY=your-api-key-here
```

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

### Check Available Projects for Translation

Source: https://github.com/onlyoffice/docspace-client/blob/master/common/translation-app/backend/src/scripts/form/EXAMPLES.md

Troubleshooting command to verify the correct project path and check for the existence of language directories within the DocSpace client's locale folders.

```bash
# Check available projects
ls -la /path/to/DocSpace/client/public/locales/
ls -la /path/to/DocSpace/client/packages/client/public/locales/
```

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

### Render SaveCancelButtons Component

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/save-cancel-buttons/README.md

Example of how to render the SaveCancelButtons component with custom click handlers and labels. Ensure that `SomeFunction` is defined elsewhere in your scope.

```jsx
<SaveCancelButtons
  onSaveClick={() => SomeFunction()}
  onCancelClick={() => SomeFunction()}
  showReminder={false}
  reminderText="You have unsaved changes"
  saveButtonLabel="Save"
  cancelButtonLabel="Cancel"
/>
```

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

### Import BetaBadge Component

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/beta-badge/README.md

Import the BetaBadge component from its module path.

```javascript
import { BetaBadge } from "@docspace/shared/components/beta-badge";
```

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

### Directory Structure After Export

Source: https://github.com/onlyoffice/docspace-client/blob/master/common/translation-app/backend/src/scripts/form/EXAMPLES.md

Illustrates the organized output directory structure after running export and build scripts, with forms organized by language.

```text
backend/src/scripts/form/
├── export_all_languages.py
├── build_oform.py
├── export_and_build_all.py
├── README.md
├── EXAMPLES.md
└── output/
    ├── exports/
    │   ├── Common-all-keys-from-en-to-ru.json
    │   ├── Common-all-keys-from-en-to-de.json
    │   ├── Client-all-keys-from-en-to-ru.json
    │   └── ...
    └── forms/                         # Organized by language!
        ├── ru/                        # All Russian forms
        │   ├── common-ru-review.pdf
        │   ├── client-ru-review.pdf
        │   ├── doceditor-ru-review.pdf
        │   ├── login-ru-review.pdf
        │   └── management-ru-review.pdf
        ├── de/                        # All German forms
        │   ├── common-de-review.pdf
        │   ├── client-de-review.pdf
        │   └── ...
        ├── fr/                        # All French forms
        │   └── ...
        └── ...

```

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

### Import TabItem Component

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/tab-item/README.md

Import the TabItem component from the shared components library.

```bash
import { TabItem } from "@docspace/shared/components/tab-item";
```

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

### Basic ArticleItem Usage

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/article-item/README.md

Demonstrates how to import and use the ArticleItem component with essential props like icon, text, and linkData. Ensure the component is imported from '@docspace/shared/components'.

```jsx
import { ArticleItem } from "@docspace/shared/components";

const MyComponent = () => {
  return (
    <ArticleItem
      icon="/path/to/icon.svg"
      text="My Item"
      showText
      linkData={{
        path: "/my-path",
        state: {},
      }}
    />
  );
};

```

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

### Export and Build All Projects

Source: https://github.com/onlyoffice/docspace-client/blob/master/common/translation-app/backend/src/scripts/form/README.md

Exports localization data and builds PDF forms for all projects or specific ones. Supports specifying base language and output directory.

```bash
python export_and_build_all.py --all-projects --base-language en --output-dir my_output
```

```bash
python export_and_build_all.py --project Common
```

```bash
python export_and_build_all.py --project Client --languages ru de fr
```

```bash
python export_and_build_all.py --all-projects
```

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

### Get Object from URL Location

Source: https://github.com/onlyoffice/docspace-client/blob/master/public/thirdparty/third-party.html

Parses the query string from a URL location object and returns its parameters as an object. Handles potential errors during parsing.

```javascript
function getObjectByLocation(location) {
  if (!location.search || !location.search.length) return null;
  try {
    const searchUrl = location.search.substring(1);
    const params = Object.fromEntries(new URLSearchParams(searchUrl));
    return params;
  } catch (e) {
    console.error(e);
    return {};
  }
}
```

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

### Verify Language Directory and Translation Files

Source: https://github.com/onlyoffice/docspace-client/blob/master/common/translation-app/backend/src/scripts/form/EXAMPLES.md

Troubleshooting command to ensure a language directory exists and contains the necessary JSON translation files, preventing 'No keys found, skipping' errors.

```bash
# Verify language directory exists and has JSON files
ls -la /path/to/project/locales/ru/
```

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

### Basic Loader Usage

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/loader/README.md

Demonstrates the basic usage of the Loader component with a label.

```jsx
// Basic usage
<Loader type={LoaderTypes.base} size="18px" label="Loading..." />
```

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

### Render ColorPicker Component

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/color-picker/README.md

Example of rendering the ColorPicker component with custom button labels and event handlers. The `appliedColor` prop sets the initial selected color.

```jsx
<ColorPicker
  appliedColor="#4781D1"
  onApply={(color) => console.log(color)}
  onClose={() => hideColorPicker()}
  applyButtonLabel="Apply"
  cancelButtonLabel="Cancel"
/>
```

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

### Import Tooltip and Link for Array Usage

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/tooltip/README.md

Import the Tooltip and Link components, along with Text, for displaying tooltips associated with array data.

```javascript
import { Tooltip, Link, Text } from "@docspace/shared/components";
```

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

### AsideHeader Basic Usage

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/aside-header/README.md

Demonstrates the basic usage of the AsideHeader component with just a header title.

```jsx
import { AsideHeader } from "@docspace/components";

// Basic usage with text
<AsideHeader header="Settings" />
```

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

### Render a Bold Page Link

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/link/README.md

Example of rendering a 'page' type link with custom styling. It uses the 'href' property to specify the URL and 'isBold' to make the text bold.

```jsx
<Link type="page" color="black" href="https://github.com" isBold={true}>
  Bold page link
</Link>
```

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

### Export All Languages for a Project

Source: https://github.com/onlyoffice/docspace-client/blob/master/common/translation-app/backend/src/scripts/form/README.md

Use this command to export all translation keys for a specified project. Ensure the project name is valid.

```bash
python export_all_languages.py --project Common
```

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

### Loader with Custom Color and Primary Style

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/loader/README.md

Shows how to use a loader with a custom color and apply the primary theme style.

```jsx
// With custom color and primary style
<Loader
  type={LoaderTypes.dualRing}
  color="#2196F3"
  size="40px"
  primary
  label="Loading content..."
/>
```

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

### Render BetaBadge Component

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/beta-badge/README.md

Render the BetaBadge component with specified properties. The `documentationEmail` prop is for feedback, `currentDeviceType` specifies the device, and `withOutFeedbackLink` controls the feedback link's visibility.

```jsx
<BetaBadge
  documentationEmail="support@example.com"
  currentDeviceType="desktop"
  withOutFeedbackLink={false}
/>
```

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

### Scrollable Aside Panel Modal

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/modal-dialog/README.md

Use this example to create a modal dialog that displays as a scrollable side panel. `displayType="aside"` and `withBodyScroll` enable this behavior. `isScrollLocked={false}` allows the body to scroll independently.

```jsx
<ModalDialog 
  visible={true}
  displayType="aside"
  withBodyScroll
  isScrollLocked={false}
>
  <ModalDialog.Header>Scrollable Panel</ModalDialog.Header>
  <ModalDialog.Body>
    {/* Long scrollable content */}
  </ModalDialog.Body>
</ModalDialog>
```

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

### Frontend File Structure

Source: https://github.com/onlyoffice/docspace-client/blob/master/common/translation-app/README.md

Overview of the frontend directory structure, detailing the organization of pages, components, and utilities.

```tree
frontend/
  ├── app/
  │   ├── projects/
  │   │   └── [projectName]/  # Project page
  │   ├── layout.tsx          # Root layout
  │   └── page.tsx            # Home page
  ├── components/             # UI components
  ├── lib/                    # Utilities
  │   ├── api.ts              # API client
  │   └── socket.ts           # Socket.IO client
  ├── store/                  # Zustand stores
  ├── public/                 # Static assets
  └── package.json            # Dependencies
```

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

### Basic HelpButton Usage

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/help-button/README.md

Render a basic HelpButton with simple tooltip content. The tooltip content is defined using a Text component.

```jsx
<HelpButton tooltipContent={<Text>Tooltip content</Text>} />
```

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

### Render EmptyScreenContainer with Custom Content

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/empty-screen-container/README.md

Use the EmptyScreenContainer component by providing props for image source, alt text, header, subheading, description, and buttons. This example shows how to display a 'no results' message with a link back to the home page.

```jsx
<EmptyScreenContainer
  imageSrc="empty_screen_filter.png"
  imageAlt="Empty Screen Filter image"
  headerText="No results matching your search could be found"
  subheading="No files to be displayed in this section"
  descriptionText="No results matching your search could be found"
  buttons={<a href="/">Go to home</a>}
/>
```

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

### AsideHeader with Custom Icons

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/aside-header/README.md

Illustrates how to add custom icons to the AsideHeader, each with a unique key and click handler.

```jsx
// With custom icons
<AsideHeader
  header="Document"
  headerIcons={[
    {
      key: "settings",
      url: "/images/settings.react.svg",
      onClick: handleSettings
    },
    {
      key: "info",
      url: "/images/info.react.svg",
      onClick: handleInfo
    }
  ]} 
/>
```

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

### Basic IconButton Usage

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/icon-button/README.md

Demonstrates the basic usage of the IconButton component with a specified size and icon.

```jsx
<IconButton
  size={25}
  iconName={SearchReactSvgUrl}
  onClick={() => console.log("Clicked")}
/>
```

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

### Configure License (Environment Variable)

Source: https://github.com/onlyoffice/docspace-client/blob/master/common/translation-app/backend/src/scripts/form/QUICKSTART.md

Set the ONLYOFFICE_BUILDER_LICENSE environment variable to the path of your license file to avoid warnings. This is the easiest method for license configuration.

```bash
cp .env.example .env
# Edit .env: ONLYOFFICE_BUILDER_LICENSE=/path/to/license.lic
```

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

### Basic Button Usage

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/button/README.md

Demonstrates the basic usage of the Button component with a label and an onClick handler.

```jsx
// Basic usage
<Button
  label="Click me"
  onClick={() => console.log("Button clicked")}
/>
```

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

### Basic DatePicker Usage

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/date-picker/README.md

Demonstrates the basic implementation of the DatePicker component with essential props like onChange, date, minDate, maxDate, and locale. Use this for standard date selection scenarios.

```jsx
<DatePicker
  onChange={(date) => {
    console.log("Selected date", date);
  }}
  date={new Date()}
  minDate={new Date("1970/01/01")}
  maxDate={new Date(new Date().getFullYear() + 1 + "/01/01")}
  locale="en"
/>
```

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

### Export All Languages for a Specific Project

Source: https://github.com/onlyoffice/docspace-client/blob/master/common/translation-app/backend/src/scripts/form/README.md

Exports all translation keys for a given project to JSON files in a specified output directory. This is the first step in the manual workflow.

```bash
python export_all_languages.py --project Common --output-dir exports
```

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

### Button Sizes

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/button/README.md

Demonstrates how to use the Button component with different size variants.

```jsx
<>
  <Button size={ButtonSize.extraSmall} label="Extra Small" />
  <Button size={ButtonSize.small} label="Small" />
  <Button size={ButtonSize.normal} label="Normal" />
  <Button size={ButtonSize.medium} label="Medium" />
</>
```

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

### AsideHeader with Loading State

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/aside-header/README.md

Demonstrates how to display the AsideHeader in a loading state using the `isLoading` prop.

```jsx
// With loading state
<AsideHeader isLoading />
```

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

### Compare Python Script Export with Backend API

Source: https://github.com/onlyoffice/docspace-client/blob/master/common/translation-app/backend/src/scripts/form/EXAMPLES.md

Shows the equivalent `curl` command for the backend API and the Python script command for exporting translations, highlighting identical output parameters.

```bash
# API call:
curl "http://localhost:3001/api/export/Common/ru?exportAll=true&baseLanguage=en"

# Equivalent Python script:
python export_all_languages.py --project Common --languages ru --base-language en
```

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

### Basic Scrollbar Usage

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/scrollbar/README.md

Demonstrates the basic implementation of the Scrollbar component to wrap content.

```jsx
<Scrollbar>Some content</Scrollbar>
```

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

### Basic TabItem Usage

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/tab-item/README.md

Demonstrates the basic usage of the TabItem component with a label and an isActive prop.

```jsx
// Basic usage
<TabItem
  label="Tab Label"
  isActive={false}
  onSelect={() => console.log("Tab selected")}
/>
```

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

### Automated Export and Build for All Projects with Specific Languages

Source: https://github.com/onlyoffice/docspace-client/blob/master/common/translation-app/backend/src/scripts/form/README.md

Run the automated workflow for all projects, but limit the translation export and PDF generation to a specific set of languages. This allows for broad updates with focused language support.

```bash
python export_and_build_all.py --all-projects --languages ru de
```

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

### Loaders with Different Colors

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/loader/README.md

Demonstrates how to apply different custom colors to the same loader type.

```jsx
// With different colors
<div style={{ display: "flex", gap: "20px" }}>
  <Loader type={LoaderTypes.dualRing} color="#2196F3" size="40px" />
  <Loader type={LoaderTypes.dualRing} color="#4CAF50" size="40px" />
  <Loader type={LoaderTypes.dualRing} color="#FFC107" size="40px" />
</div>
```

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

### AsideHeader with Navigation and Close Buttons

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/aside-header/README.md

Shows how to use the AsideHeader with back navigation and a close button, including their respective click handlers.

```jsx
// With back and close buttons
<AsideHeader
  header="Details"
  isBackButton
  onBackClick={() => navigate(-1)}
  isCloseable
  onCloseClick={handleClose}
/>
```

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

### Import SearchInput Component

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/search-input/README.md

Import the SearchInput component from the shared components library.

```javascript
import { SearchInput } from "@docspace/shared/components";
```

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

### Export All Projects Translations

Source: https://github.com/onlyoffice/docspace-client/blob/master/common/translation-app/backend/src/scripts/form/QUICKSTART.md

Recommended for bulk operations, this command exports all projects across all languages. The output includes JSON files and optionally PDF forms.

```bash
# Export all 5 projects on all languages
python export_and_build_all.py --all-projects
```

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

### Import ColorInput Component

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/color-input/README.md

Import the ColorInput component from the @docspace/shared/components/color-input package. This is required before using the component.

```javascript
import { ColorInput } from "@docspace/shared/components/color-input";
```

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

### Import TextInput Component

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/text-input/README.md

Import the TextInput component from the package.

```javascript
import { TextInput } from "@docspace/shared/components/text-input";
```

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

### Full Width Button

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/button/README.md

Demonstrates how to make a Button take up the full available width with a minimum width constraint.

```jsx
<Button scale label="Full Width Button" minWidth="200px" />
```

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

### Render ContextMenuButton

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/context-menu-button/README.md

Render the ContextMenuButton with specified icon, size, color, and a function to provide menu data. The `getData` function returns an array of menu items, each with a key, label, and an onClick handler.

```jsx
<ContextMenuButton
  iconName={VerticalDotsReactSvgUrl}
  size={16}
  color="#A3A9AE"
  isDisabled={false}
  title="Actions"
  getData={() => [
    {
      key: "key",
      label: "label",
      onClick: () => alert("label"),
    },
  ]} 
/>
```

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

### Tooltip Usage with IconButton

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/tooltip/Tooltip.mdx

Demonstrates how to use the Tooltip component with an IconButton. Imports required components and sets up data attributes for tooltip content and placement.

```js
import {Tooltip} , from "@docspace/shared/components/tooltip";
import {IconButton} , from "@docspace/shared/components/icon-button";
import {Text} , from "@docspace/shared/components/text";
import QuestionReactSvgUrl from 'PUBLIC_DIR/images/question.react.svg?url';
```

```jsx
  <div
    style={BodyStyle}
    data-tooltip-id="tooltipContent"
    data-tooltip-content="You tooltip content"
    data-tooltip-place="top"
  >
    <IconButton isClickable={true} size={20} iconName={QuestionReactSvgUrl} />
  </div>
  <Tooltip
    float
    place="top"
    offset={100}
    maxWidth={320}
    id="tooltipContent"
    getContent={({content}) => <Text fontSize='13px'>{content}</Text>}
  />
```

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

### Import ContextMenu Component

Source: https://github.com/onlyoffice/docspace-client/blob/master/packages/shared/components/context-menu/README.md

Import the ContextMenu component from the shared components library.

```javascript
import { ContextMenu } from "@docspace/shared/components/context-menu";
```

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

### Configure Document Builder License (Environment Variable)

Source: https://github.com/onlyoffice/docspace-client/blob/master/common/translation-app/backend/src/scripts/form/README.md

Set the path to your ONLYOFFICE Document Builder license file using an environment variable. This is the recommended method to avoid license warnings.

```bash
cp .env.example .env
# Edit .env and set path to your license file:
ONLYOFFICE_BUILDER_LICENSE=/path/to/your/license.lic
```