### Install and Run Example Project Source: https://github.com/trendyol/baklava/blob/next/examples/input-mask-vue/README.md Clone the repository, install dependencies, and start the development server for the input mask Vue example. ```bash git clone https://github.com/trendyol/baklava.git cd baklava/examples/input-mask-vue npm install npm run dev ``` -------------------------------- ### Setup Project with npm Source: https://github.com/trendyol/baklava/blob/next/examples/input-mask/README.md Clone the repository, navigate to the example directory, install dependencies, and launch the development server using npm commands. ```bash git clone https://github.com/trendyol/baklava.git cd baklava/examples/input-mask npm install npm run dev ``` -------------------------------- ### Clone and Run Next.js SSR Example Source: https://github.com/trendyol/baklava/blob/next/examples/next-app-router-ssr/README.md Follow these bash commands to clone the repository, navigate to the example directory, install dependencies, and start the development server. ```bash git clone https://github.com/trendyol/baklava.git cd baklava/examples/next-app-router-ssr npm install npm run dev ``` -------------------------------- ### Clone and Run React Input Mask Example Source: https://github.com/trendyol/baklava/blob/next/examples/input-mask-react/README.md Clone the repository, navigate to the example directory, install dependencies, and launch the development server for the React input mask example. ```bash git clone https://github.com/trendyol/baklava.git cd baklava/examples/input-mask-react npm install npm run dev ``` -------------------------------- ### Vanilla HTML/JS Tooltip RTL Example Source: https://github.com/trendyol/baklava/blob/next/src/components/tooltip/bl-tooltip.stories.mdx A comprehensive example of implementing the bl-tooltip component with RTL support in a standalone HTML file. Includes setup for Baklava's JS/CSS, basic styling, and JavaScript functions for toggling direction and programmatic tooltip creation. ```html Baklava Tooltip RTL Example

LTR Tooltip

Help Click here for more information about this feature

RTL Tooltip

مساعدة انقر هنا لمزيد من المعلومات حول هذه الميزة
``` -------------------------------- ### General Usage Example Source: https://github.com/trendyol/baklava/blob/next/src/components/tag/doc/ADR.md A basic example demonstrating how to use the Tag component. ```APIDOC ## General Usage Example ```html In Progress ``` ``` -------------------------------- ### Vanilla JS RTL Button Example Source: https://github.com/trendyol/baklava/blob/next/src/components/button/bl-button.stories.mdx A full HTML and JavaScript example showcasing how to implement and toggle RTL/LTR support for Baklava buttons. Includes setup for importing Baklava and basic styling. ```html Baklava Button RTL Example

LTR Buttons

Next Settings

RTL Buttons

التالي الإعدادات
``` -------------------------------- ### Configure Vitest Environment and Setup Files Source: https://github.com/trendyol/baklava/blob/next/docs/using-baklava-in-react.stories.mdx Configure Vitest to use the 'jsdom' environment and specify a setup file for test initialization. This setup file is crucial for integrating Baklava. ```js import {defineConfig} from "vitest/config"; export default defineConfig({ test: { ...otherProps, environment: "jsdom", setupFiles: ["./src/setupTest.ts"] } }); ``` -------------------------------- ### Vanilla HTML/JS Example for RTL Support Source: https://github.com/trendyol/baklava/blob/next/src/components/textarea/bl-textarea.stories.mdx A complete HTML and JavaScript example demonstrating how to implement RTL support for the bl-textarea component. It includes a button to toggle direction and examples of creating textareas programmatically. ```html Baklava Textarea RTL Example

LTR Textarea

RTL Textarea

``` -------------------------------- ### Baklava Setup for Vitest Source: https://github.com/trendyol/baklava/blob/next/docs/using-baklava-in-react.stories.mdx Configure the Vitest setup file to import necessary Baklava modules, themes, and set the icon path. This ensures Baklava components are correctly initialized for testing. ```js import "vitest-dom/extend-expect"; import "@trendyol/baklava"; import { setIconPath } from "@trendyol/baklava"; import "@trendyol/baklava/dist/themes/default.css"; setIconPath("https://cdn.jsdelivr.net/npm/@trendyol/baklava-icons@latest/icons"); ``` -------------------------------- ### Vanilla HTML/JS Accordion RTL Example Source: https://github.com/trendyol/baklava/blob/next/src/components/accordion-group/accordion/bl-accordion.stories.mdx Provides a complete HTML and JavaScript example for implementing the accordion component with RTL support. This includes basic setup and a toggle function for direction. ```html Baklava Accordion RTL Example

LTR Accordion

This is an example of left-to-right accordion content. You can put any content here.

RTL Accordion

النص العربي هنا. هذا مثال على محتوى يظهر عند النقر على الزر. يمكن أن يحتوي على أي نوع من المحتوى.
``` -------------------------------- ### Full HTML Example with RTL Toggle and Programmatic Creation Source: https://github.com/trendyol/baklava/blob/next/src/components/dropdown/item/bl-dropdown-item.stories.mdx A comprehensive HTML example demonstrating dropdown items with RTL support, a button to toggle direction, and JavaScript for programmatic creation. ```html Baklava Dropdown Item RTL Example

LTR Dropdown Items

Information Settings Profile

RTL Dropdown Items

معلومات إعدادات الملف الشخصي
``` -------------------------------- ### Loading State Examples Source: https://github.com/trendyol/baklava/blob/next/src/components/button/bl-button.stories.mdx Provides examples of buttons in a loading state, including custom loading labels and disabled states. ```javascript export const LoadingStateTemplate = (args) => html` ${SingleButtonTemplate({ size: 'large', loading: true, icon: "info", ...args})} ${SingleButtonTemplate({ size: 'large', loading: true, loadingLabel: 'Custom Loading Label...', content: 'Login', icon: 'account', ...args})} ${SingleButtonTemplate({ loading: true, disabled: true, content: 'Disabled' })} ${SingleButtonTemplate({ size: 'small', loading: true, content: 'Create' })}` ``` -------------------------------- ### NPM Installation and Icon Path Setup Source: https://github.com/trendyol/baklava/blob/next/docs/using-baklava-in-vue.stories.mdx Install Baklava via npm and set the icon path for component functionality. This is required for using Baklava components after installation. ```javascript @import "@trendyol/baklava/dist/themes/default.css"; import { setIconPath } from '@trendyol/baklava' setIconPath('https://cdn.jsdelivr.net/npm/@trendyol/baklava-icons@latest/icons') ``` -------------------------------- ### Drawer RTL Support Example Source: https://github.com/trendyol/baklava/blob/next/src/components/drawer/bl-drawer.stories.mdx Demonstrates how to use the bl-drawer component with RTL support by setting the 'dir' attribute on a parent div. Includes both LTR and RTL examples with buttons to open them. ```javascript () => html`

LTR (Left-to-Right)

document.getElementById('drawer-ltr').open = true}>Open LTR Drawer

Settings Panel

This is a sample drawer content in LTR mode.

RTL (Right-to-Left)

document.getElementById('drawer-rtl').open = true}>Open RTL Drawer

لوحة الإعدادات

هذا مثال لمحتوى القائمة في وضع RTL.
` ``` -------------------------------- ### Vanilla HTML/JS Example for RTL Alert Support Source: https://github.com/trendyol/baklava/blob/next/src/components/alert/bl-alert.stories.mdx A complete HTML and JavaScript example demonstrating how to implement RTL support for Baklava alerts. It includes basic styling, a button to toggle direction, and examples of creating alerts programmatically. ```html Baklava Alert RTL Example

LTR Alerts

This is an example of a left-to-right alert with an action button. Action This is another example with a warning variant. Action

RTL Alerts

هذا مثال على تنبيه من اليمين إلى اليسار مع زر إجراء. إجراء هذا مثال آخر مع تنبيه تحذيري. إجراء
``` -------------------------------- ### Vanilla HTML/JS RTL Input Example Source: https://github.com/trendyol/baklava/blob/next/src/components/input/bl-input.stories.mdx A comprehensive example showing how to implement RTL support for the bl-input component using vanilla JavaScript and HTML. Includes dynamic toggling of direction and programmatic input creation. ```html Baklava Input RTL Example

LTR Input

RTL Input

``` -------------------------------- ### Vanilla HTML/JS RTL Example Source: https://github.com/trendyol/baklava/blob/next/src/components/tab-group/tab/bl-tab.stories.mdx A comprehensive example demonstrating RTL support using vanilla HTML and JavaScript. It includes a button to toggle direction and script for dynamically creating tabs. ```html Baklava Tab RTL Example

LTR Tabs

Overview Settings Notifications Disabled

RTL Tabs

نظرة عامة الإعدادات الإشعارات معطل
``` -------------------------------- ### RTL Select Example (Vanilla HTML/JS) Source: https://github.com/trendyol/baklava/blob/next/src/components/select/bl-select.stories.mdx A complete HTML and JavaScript example showcasing how to implement RTL support for the Baklava Select component. Includes a button to toggle direction and programmatic select creation. ```html Baklava Select RTL Example

LTR Select

United States United Kingdom France

RTL Select

الولايات المتحدة المملكة المتحدة فرنسا
``` -------------------------------- ### Button Sizes Example Source: https://github.com/trendyol/baklava/blob/next/src/components/button/bl-button.stories.mdx Shows how to render buttons in different sizes: large, medium, and small. ```javascript export const SizesTemplate = (args) => html` ${SingleButtonTemplate({size: 'large', ...args})} ${SingleButtonTemplate({size: 'medium', ...args})} ${SingleButtonTemplate({size: 'small', ...args})}` ``` -------------------------------- ### Install Vitest and Dependencies Source: https://github.com/trendyol/baklava/blob/next/docs/using-baklava-in-react.stories.mdx Install Vitest, vitest-dom, and jsdom for testing React components. These are development dependencies. ```shell npm install -D vitest vitest-dom jsdom ``` -------------------------------- ### Table with Pagination Example Source: https://github.com/trendyol/baklava/blob/next/src/components/table/bl-table.stories.mdx This example shows how to configure the bl-table with pagination. It includes setting up headers, initial page and perPage values, and providing pagination data. Use this when you need to display large datasets with user-controlled navigation through pages. ```html ``` -------------------------------- ### RTL Support Example Source: https://github.com/trendyol/baklava/blob/next/src/components/radio-group/radio/bl-radio.stories.mdx Illustrates the Right-to-Left (RTL) support for radio components. This example shows both LTR and RTL layouts side-by-side. ```html

LTR (Left-to-Right)

Credit Card
Debit Card

RTL (Right-to-Left)

بطاقة ائتمان
بطاقة خصم
``` -------------------------------- ### RTL Support Example Source: https://github.com/trendyol/baklava/blob/next/src/components/badge/bl-badge.stories.mdx Shows how the bl-badge component handles Right-to-Left (RTL) text direction. This example contrasts LTR and RTL layouts with corresponding text. ```html

LTR (Left-to-Right)

User Status

RTL (Right-to-Left)

حالة المستخدم
``` -------------------------------- ### Vanilla HTML/JS Dropdown RTL Example Source: https://github.com/trendyol/baklava/blob/next/src/components/dropdown/bl-dropdown.stories.mdx A comprehensive example showing how to integrate Baklava dropdowns with RTL support in a standalone HTML file. Includes dynamic direction toggling and programmatic dropdown creation. ```html Baklava Dropdown RTL Example

LTR Dropdown

Profile Preferences Logout

RTL Dropdown

الملف الشخصي التفضيلات تسجيل الخروج
``` -------------------------------- ### Install Baklava NPM Package Source: https://github.com/trendyol/baklava/blob/next/docs/using-baklava-in-next.stories.mdx Install the Baklava NPM package to your project using npm. ```bash npm install @trendyol/baklava ```