### NPM: Install Floating UI and Tom Select
Source: https://railsblocks.com/docs/select
Commands to install the Floating UI and Tom Select libraries using NPM.
```bash
npm install @floating-ui/dom
npm install tom-select
```
--------------------------------
### Yarn: Install Floating UI and Tom Select
Source: https://railsblocks.com/docs/select
Commands to install the Floating UI and Tom Select libraries using Yarn.
```bash
yarn add @floating-ui/dom
yarn add tom-select
```
--------------------------------
### Basic Animated Number Controller Setup
Source: https://railsblocks.com/docs/animated-number
This example shows the fundamental setup for the animated number Stimulus controller. It requires essential data attributes like `data-controller`, `data-animated-number-start-value`, `data-animated-number-end-value`, and `data-animated-number-duration-value`. The `data-animated-number-trigger-value` can be set to 'viewport' to initiate the animation when the element becomes visible.
```html
```
--------------------------------
### Stimulus Controller Setup for Clipboard (HTML)
Source: https://railsblocks.com/docs/clipboard
This example shows the minimal HTML structure required to initialize the Stimulus clipboard controller. It specifies the controller and the text to be copied.
```html
```
--------------------------------
### Rails Dock Component Controller Setup Example
Source: https://railsblocks.com/docs/dock
This example demonstrates the basic HTML structure required for the dock component, including the main container with the `data-controller='dock'` attribute and a sample navigation link. It highlights the necessary data attributes for Stimulus targets.
```html
```
--------------------------------
### Tooltip Controller Setup Example
Source: https://railsblocks.com/docs/tooltip
This code demonstrates the basic structure for a tooltip component using a Stimulus controller. It requires `data-controller='tooltip'` and specifies the tooltip content and placement via data attributes. The `data-tooltip-delay-value` attribute can be used to set a delay before the tooltip appears.
```html
```
--------------------------------
### Install AirDatepicker and Floating UI via NPM
Source: https://railsblocks.com/docs/date-picker
This command demonstrates how to install the AirDatepicker and Floating UI libraries using npm, a common package manager for JavaScript projects. Running these commands in your terminal will download and add these dependencies to your project's `node_modules` directory.
```bash
npm install air-datepicker
npm install @floating-ui/dom
```
--------------------------------
### Install AirDatepicker and Floating UI via Yarn
Source: https://railsblocks.com/docs/date-picker
This command shows how to install the AirDatepicker and Floating UI libraries using Yarn, an alternative package manager for JavaScript projects. Executing these commands in your project's terminal will add these dependencies to your project.
```bash
yarn add air-datepicker
yarn add @floating-ui/dom
```
--------------------------------
### Importmap: Install Floating UI and Tom Select
Source: https://railsblocks.com/docs/select
Instructions for adding Floating UI and Tom Select to your project's import map configuration in Rails.
```ruby
pin "@floating-ui/dom", to: "https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.7.4/+esm"
pin "tom-select", to: "https://cdn.jsdelivr.net/npm/tom-select@2.4.3/+esm"
```
--------------------------------
### Clipboard Component with Bottom-Start Tooltip (HTML)
Source: https://railsblocks.com/docs/clipboard
This snippet illustrates the HTML setup for a clipboard component configured with a 'bottom-start' tooltip. Similar to the previous example, it utilizes Stimulus data attributes for functionality, specifying the text to copy and the success message. It displays a copy icon and the text 'bottom-start', with a hidden success message.
```html
```
--------------------------------
### Get Week Number Utility (JavaScript)
Source: https://railsblocks.com/docs/date-picker
Calculates the ISO 8601 week number for a given date. It adjusts the date to find the first Thursday of the week and then calculates the week difference from the start of the year. This function is crucial for the week selection functionality.
```javascript
_getWeekNumber(date) {
const tempDate = new Date(date.getTime());
const dayNumber = (tempDate.getDay() + 6) % 7;
tempDate.setDate(tempDate.getDate() - dayNumber + 3);
const firstThursday = new Date(tempDate.getFullYear(), 0, 4);
firstThursday.setDate(firstThursday.getDate() - ((firstThursday.getDay() + 6) % 7) + 3);
return Math.round((tempDate.getTime() - firstThursday.getTime()) / 86400000 / 7) + 1;
}
```
--------------------------------
### Basic Confirmation Controller Setup - HTML
Source: https://railsblocks.com/docs/confirmation
Demonstrates the fundamental HTML structure for the confirmation component, including the Stimulus controller and required data attributes for input and confirmation buttons. This setup enables basic confirmation functionality.
```html
```
--------------------------------
### Embla Carousel Installation via Yarn
Source: https://railsblocks.com/docs/carousel
Installs Embla Carousel and its wheel gestures plugin using Yarn. This is an alternative package manager for JavaScript projects.
```bash
yarn add embla-carousel
yarn add embla-carousel-wheel-gestures
```
--------------------------------
### Basic Tree View Controller Setup (HTML)
Source: https://railsblocks.com/docs/tree-view
Sets up a basic tree view structure using data attributes for controller initialization and animation control. It includes a button to toggle folder visibility and a content area that can be shown or hidden.
```html
```
--------------------------------
### Embla Carousel Installation via NPM
Source: https://railsblocks.com/docs/carousel
Installs Embla Carousel and its wheel gestures plugin using NPM. This is a common method for front-end projects to manage JavaScript dependencies.
```bash
npm install embla-carousel
npm install embla-carousel-wheel-gestures
```
--------------------------------
### Clipboard Component Basic Setup (HTML)
Source: https://railsblocks.com/docs/clipboard
This snippet demonstrates the fundamental structure of the clipboard component using HTML. It includes the necessary data attributes for the Stimulus controller and targets for displaying the copy and copied states.
```html
```
--------------------------------
### Tooltip Best Practices
Source: https://railsblocks.com/docs/tooltip
Follow these guidelines for optimal tooltip implementation.
```APIDOC
## Tooltip Best Practices
### Description
Implement tooltips effectively by adhering to these recommended practices.
### Method
N/A (Best Practices)
### Endpoint
N/A
### Parameters
#### Best Practices
- **Keep it concise:** Tooltips should contain brief, helpful information
- **Avoid essential information:** Don't put critical information only in tooltips
- **Use appropriate delays:** Add delays for dense UIs to prevent tooltip spam
### Request Example
N/A
### Response
#### Success Response (200)
N/A (Best Practices)
#### Response Example
N/A
```
--------------------------------
### Shell: PhotoSwipe Installation via Yarn
Source: https://railsblocks.com/docs/lightbox
This command installs the PhotoSwipe library using Yarn, an alternative JavaScript package manager. This is suitable for projects that use Yarn for dependency management.
```shell
yarn add photoswipe
```
--------------------------------
### Grouped Select Options (Ruby on Rails)
Source: https://railsblocks.com/docs/select
Demonstrates how to organize select options into collapsible groups, improving user navigation for long lists. This example uses `grouped_options_for_select` and requires a Stimulus controller named 'select'. The second example adds column layout for optgroups.
```erb
```
--------------------------------
### Stimulus Controller Setup for Tree View with Checkboxes
Source: https://railsblocks.com/docs/tree-view
This section describes the necessary Stimulus controllers for the tree view with checkboxes functionality. It emphasizes the need to install both the `tree-view` and `checkbox-select-all` controllers.
```html
```
--------------------------------
### Shell: PhotoSwipe Installation via NPM
Source: https://railsblocks.com/docs/lightbox
This command installs the PhotoSwipe library using npm, a popular JavaScript package manager. This is a common method for adding PhotoSwipe to projects managed with Node.js and npm.
```shell
npm install photoswipe
```
--------------------------------
### Implement Tooltip Sizes in HTML
Source: https://railsblocks.com/docs/tooltip
This HTML snippet demonstrates how to create tooltips with different size configurations. It utilizes a 'tooltip' controller and data attributes to define content, placement, and size. The examples include buttons for small, regular, and large tooltips, as well as variations with longer content to show text wrapping.
```erb
<%# Different tooltip sizes %>
<%# With longer content to show differences %>
```
--------------------------------
### Importing Locale for Internationalization
Source: https://railsblocks.com/docs/date-picker
This code demonstrates how to import a locale file (Spanish in this example) from the AirDatepicker library to enable internationalization for the date picker component. The imported locale object can then be passed to the AirDatepicker instance.
```javascript
import localeEs from "air-datepicker/locale/es";
// In the controller
this.datepickerInstance = new AirDatepicker(this.inputTarget, {
locale: localeEs,
// ... other options
});
```
--------------------------------
### Combined Tree View and Checkbox Select All Controller Setup (HTML)
Source: https://railsblocks.com/docs/tree-view
Demonstrates how to combine the `tree-view` controller with the `checkbox-select-all` controller for hierarchical selection. This setup allows for selecting individual items and managing parent-child checkbox states.
```html
```
--------------------------------
### Install Motion.dev via Yarn
Source: https://railsblocks.com/docs/installation
Installs the Motion.dev animation library using Yarn. This offers an alternative package management solution for the animation library.
```bash
yarn add motion
```
--------------------------------
### Embla Carousel Installation via Importmap
Source: https://railsblocks.com/docs/carousel
Adds Embla Carousel and its wheel gestures plugin to the application's import map for easy access. This method is suitable for Rails applications using importmaps for dependency management.
```ruby
pin "embla-carousel", to: "https://cdn.jsdelivr.net/npm/embla-carousel/embla-carousel.esm.js"
pin "embla-carousel-wheel-gestures", to: "https://cdn.jsdelivr.net/npm/embla-carousel-wheel-gestures@latest/+esm"
```
--------------------------------
### Create This Year Button Handler
Source: https://railsblocks.com/docs/date-picker
Generates the configuration for a 'This Year' button. The onClick handler selects the first day of the current year (January 1st). This provides a quick way to navigate to the start of the current year.
```javascript
_createYearButton() {
return {
content: "This year",
onClick: (dp) => {
const currentDate = new Date();
dp.selectDate(new Date(currentDate.getFullYear(), 0, 1));
},
};
}
```
--------------------------------
### Install Tom Select via Yarn
Source: https://railsblocks.com/docs/installation
Installs the Tom Select library using Yarn, another package manager for Node.js. This is an alternative to using importmaps or npm.
```bash
yarn add tom-select
```
--------------------------------
### TomSelect: Get Unflagged Icon SVG
Source: https://railsblocks.com/docs/select
Retrieves the SVG markup for an 'unflagged' icon. This icon is used to represent items that are not currently flagged. It's a simple SVG element with specific attributes for styling and rendering.
```javascript
getUnflaggedIcon() {
return `
`;
}
```