### Install Dependencies

Source: https://github.com/powerhome/playbook/blob/master/playbook-website/app/views/guides/getting_started/rails_&_react_setup.md

Run the install command to finalize package setup.

```sh
yarn install
```

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

### User Mention Component Example

Source: https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_message/docs/_message_mentions.md

Example demonstrating how to pass user mentions through messages using a compound component structure. Requires setup for the compound component pattern.

```javascript
function Message({ children }) {
  return <div className="message">{children}</div>;
}

function MessageText({ children }) {
  return <span className="message-text">{children}</span>;
}

function MessageUserMention({ login, children }) {
  return (
    <span className="message-user-mention">
      <a href={`https://github.com/${login}`}>
        {children}
      </a>
    </span>
  );
}

Message.Text = MessageText;
Message.UserMention = MessageUserMention;

function App() {
  return (
    <Message>
      <Message.Text>Hello there, </Message.Text>
      <Message.UserMention login="kcd">
        @kentcdodds
      </Message.UserMention>
      <Message.Text>
        ! How are you?
      </Message.Text>
    </Message>
  );
}

```

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

### Bundle Install Gems

Source: https://github.com/powerhome/playbook/blob/master/playbook-website/app/views/guides/getting_started/ruby_on_rails_setup.md

Run `bundle install` to install all the gems specified in your Gemfile, including `playbook_ui`.

```sh
bundle
```

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

### Install Dependencies

Source: https://github.com/powerhome/playbook/blob/master/playbook-website/app/views/guides/getting_started/icons/font_awesome.md

Commands to install project dependencies.

```sh
bundle install
```

```sh
yarn
```

```sh
npm install
```

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

### Install Maplibre GL

Source: https://github.com/powerhome/playbook/blob/master/playbook-website/app/views/guides/getting_started/dependencies.md

Install the maplibre-gl package for the Map kit.

```bash
yarn add maplibre-gl
```

```bash
npm install maplibre-gl
```

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

### Install Dependencies and Bundle Install

Source: https://github.com/powerhome/playbook/wiki/Common-Errors-&-Solutions

Use this command to fix 'webpack-dev-server not found' errors by ensuring both Yarn and Bundler dependencies are installed.

```bash
# In terminal run the following commands
$ yarn && bundle install
```

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

### PBDateRangeStacked Example

Source: https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_default_swift.md

Demonstrates the usage of the PBDateRangeStacked component with custom start and end dates, alignments, and short variants.

```swift
VStack(alignment: .leading, spacing: Spacing.small) {
  PBDateRangeStacked(
    startDate: Date().makeDate(year: 2019, month: 6, day: 18),
    endDate: Date().makeDate(year: 2020, month: 3, day: 20),
    startAlignment: .trailing,
    endAlignment: .leading,
    startVariant: .short(showIcon: false),
    endVariant: .short(showIcon: false)
  )
}
```

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

### Install TipTap Editor Dependencies

Source: https://github.com/powerhome/playbook/blob/master/playbook-website/app/views/guides/getting_started/dependencies.md

Install the necessary TipTap packages for the Rich Text Editor kit.

```bash
yarn add @tiptap/core @tiptap/react @tiptap/starter-kit @tiptap/extension-document @tiptap/extension-highlight @tiptap/extension-horizontal-rule @tiptap/extension-link @tiptap/extension-paragraph @tiptap/extension-text @tiptap/pm
```

```bash
npm install @tiptap/core @tiptap/react @tiptap/starter-kit @tiptap/extension-document @tiptap/extension-highlight @tiptap/extension-horizontal-rule @tiptap/extension-link @tiptap/extension-paragraph @tiptap/extension-text @tiptap/pm
```

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

### Install Font Awesome Pro via JavaScript

Source: https://github.com/powerhome/playbook/blob/master/playbook-website/app/views/guides/getting_started/icons/font_awesome.md

Install Font Awesome Pro using yarn with an environment token.

```sh
FONTAWESOME_PACKAGE_TOKEN=XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX yarn add @fortawesome/fontawesome-pro
```

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

### SwiftUI PBToast Examples

Source: https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_children_swift.md

Demonstrates the usage of PBToast with different variants and custom action views. Ensure PBToast is imported and configured for use.

```swift
VStack(alignment: .leading) {
  PBToast(
    text: message,
    variant: .success,
    actionView: .custom(AnyView(Text("Undo").pbFont(.title4, color: .white))),
    dismissAction: closeToast
  )
  PBToast(
    variant: .custom(nil, .pbPrimary),
    actionView: .custom(
    AnyView(
      HStack {
        Text("Undo action").pbFont(.caption, color: .white)
        PBButton(variant: .primary, title: "Undo").disabled(true)
      }
    )),
    dismissAction: closeToast
  )
}
```

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

### Install Playbook NPM Package

Source: https://github.com/powerhome/playbook/blob/master/playbook-website/app/views/guides/getting_started/HTML&_CSS.md

Commands to add the Playbook package and install dependencies.

```sh
yarn add "playbook-ui@stable"
```

```sh
yarn install
```

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

### Include Tiptap Extensions in Advanced Editor

Source: https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.md

Install and import necessary extensions, then pass them to the `extensions` prop. Ensure extensions are installed in your project before use.

```javascript
import { useEditor } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import Highlight from "@tiptap/extension-highlight";
import { HorizontalRule } from "@tiptap/extension-horizontal-rule";

const editor = useEditor({
  extensions: [
    StarterKit,
    Highlight,
    HorizontalRule,
  ],
  content: "<p>Hello World!</p>",
});
```

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

### PBCard Padding Examples in Swift

Source: https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_card/docs/_card_padding_swift.md

Demonstrates the usage of PBCard with different padding values. Ensure Spacing enum is available in your scope.

```swift
VStack(spacing: Spacing.small) {
  PBCard(padding: Spacing.none) {
    Text("None").pbFont(.body)
  }

  PBCard(padding: Spacing.xxSmall) {
    Text("XX Small").pbFont(.body)
  }

  PBCard(padding: Spacing.xSmall) {
    Text("X Small").pbFont(.body)
  }

  PBCard(padding: Spacing.small) {
    Text("Small").pbFont(.body)
  }

  PBCard(padding: Spacing.medium) {
    Text("Medium").pbFont(.body)
  }

  PBCard(padding: Spacing.large) {
    Text("Large").pbFont(.body)
  }

  PBCard(padding: Spacing.xLarge) {
    Text("X Large").pbFont(.body)
  }
 }
```

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

### Install Font Awesome Free

Source: https://github.com/powerhome/playbook/blob/master/playbook-website/app/views/guides/getting_started/dependencies.md

Install the fontawesome-free package for Icon, Icon Circle, Icon Stat Value, and Icon Value kits.

```bash
yarn add fontawesome-free
```

```bash
npm install fontawesome-free
```

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

### Example Prop Type Implementations

Source: https://github.com/powerhome/playbook/wiki/Generating-a-Kit

Examples of how different prop types are defined within a Rails Kit Class.

```ruby
def disabled
  true_value(configured_active, "true value", "false value")
end
```

```ruby
def text
  default_value(configured_title, "default value")
end
```

```ruby
def variant
  variant_options = %w(option1 option2)
  one_of_value(configured_variant, variant_options, "default value")
end
```

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

### Docker Compose Command: Bring Up Project

Source: https://github.com/powerhome/playbook/wiki/Common-Errors-&-Solutions

Builds and starts the services defined in the docker-compose.yml file. This command is used after stopping services and pruning Docker resources to re-initialize the project environment.

```bash
make it
```

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

### PBCard Border Radius Examples

Source: https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_card/docs/_card_border_radius_swift.md

Demonstrates different border radius options for the PBCard component. Ensure PBCard and BorderRadius are imported.

```swift
VStack(spacing: Spacing.small) {
  PBCard(borderRadius: BorderRadius.none) {
    Text("None").pbFont(.body)
  }

  PBCard(borderRadius: BorderRadius.xSmall) {
    Text("X Small").pbFont(.body)
  }

  PBCard(borderRadius: BorderRadius.small) {
    Text("Small").pbFont(.body)
  }

  PBCard(borderRadius: BorderRadius.medium) {
    Text("Medium").pbFont(.body)
  }

  PBCard(borderRadius: BorderRadius.large) {
    Text("Large").pbFont(.body)
  }

   PBCard(borderRadius: BorderRadius.xLarge) {
    Text("X Large").pbFont(.body)
  }

   PBCard(borderRadius: BorderRadius.rounded) {
    Text("Rounded").pbFont(.body)
  }
 }
```

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

### Install Font Awesome Free via JavaScript

Source: https://github.com/powerhome/playbook/blob/master/playbook-website/app/views/guides/getting_started/icons/font_awesome.md

Install Font Awesome Free using yarn.

```sh
yarn add @fortawesome/fontawesome-free
```

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

### Install Playbook UI via Yarn

Source: https://github.com/powerhome/playbook/blob/master/playbook-website/app/views/guides/getting_started/react_setup.md

Add the playbook-ui package to your project dependencies.

```sh
yarn add playbook-ui
```

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

### Swift: Displaying Circular PBButtons

Source: https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_button/docs/_button_circle_swift.md

Demonstrates how to create and display various circular PBButton components. Includes examples for default, secondary, disabled, and link variants, each with an icon.

```swift
VStack(alignment: .leading, spacing: Spacing.small) {
  PBButton(
    shape: .circle,
    icon: PBIcon.fontAwesome(.plus, size: .x1),
    action: {}
  )
  PBButton(
    variant: .secondary,
    shape: .circle,
    icon: PBIcon.fontAwesome(.pen, size: .x1),
    action: {}
  )
  PBButton(
    variant: .disabled,
    shape: .circle,
    icon: PBIcon.fontAwesome(.times, size: .x1)
  )
  PBButton(
    variant: .link,
    shape: .circle,
    icon: PBIcon.fontAwesome(.user, size: .x1),
    action: {}
  )
 }
```

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

### Rails Global Props Examples

Source: https://context7.com/powerhome/playbook/llms.txt

Demonstrates global props for spacing, shadow, and layout on a Rails Card component.

```erb
<%# Rails: Global props examples %>
<%= pb_rails("card", props: {
  margin: "md",
  margin_bottom: "lg",
  padding: "xl",
  shadow: "deep"
}) do %>
  Content
<% end %>
```

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

### Install Highcharts and Highcharts React

Source: https://github.com/powerhome/playbook/blob/master/playbook-website/app/views/guides/getting_started/dependencies.md

Install highcharts and highcharts-react-official for PB Bar Graph, PB Circle Chart, PB Gauge Chart, and PB Line Graph kits.

```bash
yarn add highcharts highcharts-react-official
```

```bash
npm install highcharts highcharts-react-official
```

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

### Install Dependencies with Yarn

Source: https://github.com/powerhome/playbook/wiki/Common-Errors-&-Solutions

Execute this command to resolve 'can't find clean-webpack-plugin' or 'can't find webpack-dev-server' errors by ensuring all project dependencies are installed.

```bash
# In terminal run the following commands
$ docker-compose run web yarn
```

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

### Platform-Specific Deprecation Status Example (Rails)

Source: https://github.com/powerhome/playbook/blob/master/docs/DEPRECATION_WARNINGS.md

Example `menu.yml` configuration for a kit where only the Rails platform is deprecated. This requires applying the Rails deprecation warning.

```yaml
- name: rich_text_editor
  status: stable
  platforms_status: { rails: deprecated }  # Apply warning to Rails only
```

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

### Example Implementation of Rails Deprecation Warning

Source: https://github.com/powerhome/playbook/blob/master/docs/DEPRECATION_WARNINGS.md

An example of how to implement the `deprecated_kit_warning` helper in a Rails `.html.erb` file, including kit content.

```erb
<%== deprecated_kit_warning('Legend') %>
<%= pb_content_tag do %>
  <%= pb_rails("body", props: {color: object.body_color}) do %>
    <!-- kit content -->
  <% end %>
<% end %>
```

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

### Install Playbook NPM Package

Source: https://github.com/powerhome/playbook/blob/master/playbook-website/app/views/guides/getting_started/rails_&_react_setup.md

Add the stable version of the Playbook UI package to your project.

```sh
yarn add "playbook-ui@stable"
```

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

### Display PBDateRangeInline with Different Sizes and Alignments

Source: https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default_swift.md

Demonstrates how to use the PBDateRangeInline component with varying sizes and alignments. Configure start and end variants for different display options.

```swift
VStack(alignment: .leading, spacing: Spacing.large) {
  VStack(alignment: .leading, spacing: Spacing.small) {
    PBDateRangeInline(
      size: .caption,
      iconSize: .xSmall,
      startDate: "18 Jun 2013",
      endDate: "20 Mar 2015",
      startVariant: .standard
    )
    PBDateRangeInline(
      size: .body, 
      iconSize: .x1,
      startDate: "18 Jun 2013",
      endDate: "20 Mar 2015",
      startVariant: .standard
    )
  }
  .frame(maxWidth: .infinity, alignment: .leading)
  VStack(alignment: .center, spacing: Spacing.small) {
    PBDateRangeInline(
      size: .caption, 
      iconSize: .xSmall,
      startDate: "15 Jan 2013",
      endDate: "15 Aug 2015",
      startVariant: .short(showIcon: true),
      endVariant: .short(showIcon: false)
    )
    PBDateRangeInline(
      size: .body, 
      iconSize: .x1,
      startDate: "15 Jan 2013",
      endDate: "15 Aug 2015",
      startVariant: .short(showIcon: true),
      endVariant: .short(showIcon: false)
    )
  }
  .frame(maxWidth: .infinity, alignment: .center)
  VStack(alignment: .trailing, spacing: Spacing.small) {
    PBDateRangeInline(
      size: .caption, 
      iconSize: .xSmall,
      startDate: "15 Jan 2013",
      endDate: "15 Aug 2015",
      startVariant: .short(showIcon: true),
      endVariant: .short(showIcon: false)
    )
    PBDateRangeInline(
      size: .body, 
      iconSize: .x1,
      startDate: "15 Jan 2013",
      endDate: "15 Aug 2015",
      startVariant: .short(showIcon: true),
      endVariant: .short(showIcon: false)
    )
  }
  .frame(maxWidth: .infinity, alignment: .trailing)
}
```

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

### Horizontal Navigation Bar Example

Source: https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_nav/docs/_nav_horizontal_default_swift.md

Demonstrates how to create a default horizontal navigation bar using PBNav. Ensure the 'selected' state is bound to a variable to manage the active item.

```swift
@State private var selectedHDefault: Int = 1

PBNav(
          selected: $selectedHDefault,
          variant: .normal,
          orientation: .horizontal
        ) {
          PBNavItem("Photos")
          PBNavItem("Music")
          PBNavItem("Video")
          PBNavItem("Files")
        }

```

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

### pb_rails Example: List with Icons

Source: https://context7.com/powerhome/playbook/llms.txt

Render a list of items, each with an icon and text, using nested `pb_rails` calls for `list`, `list/item`, `flex`, `icon`, and `body` components. This pattern is useful for displaying structured data with visual cues.

```erb
<%# List with icons %>
<%= pb_rails("list") do %>
  <% @items.each do |item| %>
    <%= pb_rails("list/item") do %>
      <%= pb_rails("flex", props: { gap: "sm", align_items: "center" }) do %>
        <%= pb_rails("icon", props: { icon: item.icon }) %>
        <%= pb_rails("body", props: { text: item.name }) %>
      <% end %>
    <% end %>
  <% end %>
<% end %>
```

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

### Implement PBTextArea in SwiftUI

Source: https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_textarea/docs/_textarea_default_swift.md

Demonstrates usage of PBTextArea with various configurations including default state, placeholder text, and initial values.

```swift
@State var defaultText = ""
@State var placeholderText = ""
@State var customText = "Default value text"

VStack(alignment: .leading, spacing: Spacing.small) {
  PBTextArea(
    "Label",
    text: $defaultText
  )

  PBTextArea(
    "Label",
    text: $placeholderText,
    placeholder: "Placeholder with text"
  )

  PBTextArea(
    "Label",
    text: $customText
  )
}
```

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

### Display PBImage with Different Sizes

Source: https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_image/docs/_rounded_image_swift.md

Demonstrates how to use the PBImage component with various size configurations. Ensure the placeholder image is correctly set.

```swift
VStack(alignment: .leading, spacing: Spacing.small) {
  Text("xSmall").pbFont(.detail(true), color: .text(.default))
  PBImage(
    image: nil,
    placeholder: Image("Forest", bundle: .module),
    size: .xSmall,
    rounded: .rounded
  )

  Text("small").pbFont(.detail(true), color: .text(.default))
  PBImage(
    image: nil,
    placeholder: Image("Forest", bundle: .module),
    size: .small,
    rounded: .rounded
  )

  Text("medium").pbFont(.detail(true), color: .text(.default))
  PBImage(
    image: nil,
    placeholder: Image("Forest", bundle: .module),
    size: .medium,
    rounded: .rounded
  )

  Text("large").pbFont(.detail(true), color: .text(.default))
  PBImage(
    image: nil,
    placeholder: Image("Forest", bundle: .module),
    size: .large,
    rounded: .rounded
  )

  Text("xLarge").pbFont(.detail(true), color: .text(.default))
  PBImage(
    image: nil,
    placeholder: Image("Forest", bundle: .module),
    size: .xLarge,
    rounded: .rounded
  )
}
```

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

### Initialize Rails with Bundler

Source: https://github.com/powerhome/playbook/blob/master/playbook-website/app/views/guides/getting_started/icons/font_awesome.md

Create a new Rails application with a specific JavaScript bundler.

```sh
rails new CoolNewApp -j webpack
```

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

### Create Cards with Different Headers

Source: https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_card/docs/_card_header_swift.md

Demonstrates how to use PBCard and PBCardHeader to create cards with various category and product-based header colors. Ensure proper Spacing and pbFont usage for consistent styling.

```Swift
Stack(spacing: Spacing.small) {
  PBCard(padding: Spacing.none) {
    PBCardHeader(color: .category(.category1)) {
      Text("Category 1").pbFont(.body, color: .white).padding(Spacing.small)
    }
      Text("Body").pbFont(.body, color: .text(.default)).padding(Spacing.small)
  }

  PBCard(padding: Spacing.none) {
    PBCardHeader(color: .category(.category3)) {
      Text("Category 3").pbFont(.body, color: .black).padding(Spacing.small)
    }
    Text("Body").pbFont(.body, color: .text(.default)).padding(Spacing.small)
  }

  PBCard(padding: Spacing.none) {
    PBCardHeader(color: .product(.product2, category: .background)) {
      Text("Product 2 Background").pbFont(.body, color: .white).padding(Spacing.small)
    }
      Text("Body").pbFont(.body, color: .text(.default)).padding(Spacing.small)
  }

  PBCard(padding: Spacing.none) {
    PBCardHeader(color: .product(.product6, category: .background)) {
      Text("Product 6 Background").pbFont(.body, color: .white).padding(Spacing.small)
    }
      Text("Body").pbFont(.body, color: .text(.default)).padding(Spacing.small)
  }
}
```

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

### Generate New Sample Page

Source: https://github.com/powerhome/playbook/wiki/Sample-Pages-&-How-to-Create-Them

Use this command to generate a new sample page. Replace 'New Page' with your desired page name and 'desired_category' with an existing or new category name. Ensure you are in the 'playbook' directory when running this command.

```bash
rails g sample "New Page" --category desired_category
```

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

### Example treeData for MultiLevelSelect

Source: https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.md

This is an example of the data structure expected for the `treeData` prop. It should be an array of objects, where each object can contain nested children.

```javascript
[
  {
    id: "1",
    label: "Parent 1",
    children: [
      {
        id: "101",
        label: "Child 1.1",
        children: [
          {
            id: "1011",
            label: "Grandchild 1.1.1"
          }
        ]
      },
      {
        id: "102",
        label: "Child 1.2"
      }
    ]
  },
  {
    id: "2",
    label: "Parent 2"
  }
]
```

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

### Import Playbook Styles

Source: https://github.com/powerhome/playbook/blob/master/playbook-website/app/views/guides/getting_started/rails_&_react_setup.md

Import screen size tokens into your project via JavaScript.

```jsx
@import "playbook-ui/dist/tokens/screen_sizes.scss";
```

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

### Displaying PBReactionButtons

Source: https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_button/docs/_button_reaction_swift.md

Demonstrates how to initialize and display multiple PBReactionButton instances with different configurations, including interactive and non-interactive states, custom icons, and default states.

```swift
@State private var count: Int = 153
@State private var count1: Int = 5

HStack(alignment: .center, spacing: 12) {
            PBReactionButton(
              count: $count,
              icon: "389",
              isInteractive: true
            )
            PBReactionButton(
              count: $count1,
              icon: "1️⃣",
              isInteractive: false
            )
            PBReactionButton(
              isInteractive: false
            )
            PBReactionButton(
              pbIcon: PBIcon(FontAwesome.user),
              isInteractive: false
            )
}
```

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

### Rails-Only Kit Deprecation Status Example

Source: https://github.com/powerhome/playbook/blob/master/docs/DEPRECATION_WARNINGS.md

Example `menu.yml` configuration for a Rails-only kit that is deprecated. This indicates that the Rails deprecation warning should be applied.

```yaml
- name: legend
  status: deprecated
  react_rendered: false  # Apply warning to Rails template
```

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

### Advanced Table Kit Data Structure Example

Source: https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_advanced_table/README.md

This is an example of the data structure used for the tableData prop, including nested children for sub-rows.

```javascript
const MOCK_DATA = [
  {
    year: "2021",
    quarter: null,
    month: null,
    day: null,
    newEnrollments: "20",
    scheduledMeetings: "10",
    attendanceRate: "51%",
    completedClasses: "3",
    classCompletionRate: "33%",
    graduatedStudents: "19",
    children: [
      {
        year: "2021",
        quarter: "Q1",
        month: null,
        day: null,
        newEnrollments: "2",
        scheduledMeetings: "35",
        attendanceRate: "32%",
        completedClasses: "15",
        classCompletionRate: "52%",
        graduatedStudents: "36",
        children: [
          {
            year: "2021",
            quarter: "Q1",
            month: "January",
            day: null,
            newEnrollments: "16",
            scheduledMeetings: "20",
            attendanceRate: "11%",
            completedClasses: "13",
            classCompletionRate: "47%",
            graduatedStudents: "28",
            children: [
              {
                year: "2021",
                quarter: "Q1",
                month: "January",
                day: "10",
                newEnrollments: "34",
                scheduledMeetings: "28",
                attendanceRate: "97%",
                completedClasses: "20",
                classCompletionRate: "15%",
                graduatedStudents: "17",
              },
              {
                year: "2021",
                quarter: "Q1",
                month: "January",
                day: "20",
                newEnrollments: "43",
                scheduledMeetings: "23",
                attendanceRate: "66%",
                completedClasses: "26",
                classCompletionRate: "47%",
                graduatedStudents: "9",
              },
            ],
          },
          {
            year: "2021",
            quarter: "Q1",
            month: "February",
            day: null,
            newEnrollments: "20",
            scheduledMeetings: "41",
            attendanceRate: "95%",
            completedClasses: "26",
            classCompletionRate: "83%",
            graduatedStudents: "43",
            children: [
              {
                year: "2021",
                quarter: "Q1",
                month: "February",
                day: "15",
                newEnrollments: "19",
                scheduledMeetings: "35",
                attendanceRate: "69%",
                completedClasses: "8",
                classCompletionRate: "75%",
                graduatedStudents: "23",
              },
            ],
          },
        ],
      },
    ],
  },
  {
    year: "2022",
    quarter: null,
    month: null,
    day: null,
    newEnrollments: "25",
    scheduledMeetings: "17",
    attendanceRate: "75%",
    completedClasses: "5",
    classCompletionRate: "45%",
    graduatedStudents: "32",
    children: [
      {
        year: "2022",
        quarter: "Q1",
        month: null,
        day: null,
        newEnrollments: "2",
        scheduledMeetings: "35",
        attendanceRate: "32%",
        completedClasses: "15",
        classCompletionRate: "52%",
        graduatedStudents: "36",
        children: [
          {
            year: "2022",
            quarter: "Q1",
            month: "January",
            day: null,
            newEnrollments: "16",
            scheduledMeetings: "20",
            attendanceRate: "11%",
            completedClasses: "13",
            classCompletionRate: "47%",
            graduatedStudents: "28",
            children: [
              {
                year: "2022",
                quarter: "Q1",
                month: "January",
                day: "15",
                newEnrollments: "34",
                scheduledMeetings: "28",
                attendanceRate: "97%",
                completedClasses: "20",
                classCompletionRate: "15%",
                graduatedStudents: "17",
              },
              {
                year: "2022",
                quarter: "Q1",
                month: "January",
                day: "25",
                newEnrollments: "43",
                scheduledMeetings: "23",
                attendanceRate: "66%",
                completedClasses: "26",
                classCompletionRate: "47%",
                graduatedStudents: "9",
              },
            ],
          },
          {
            year: "2022",
            quarter: "Q1",
            month: "May",
            day: null,
            newEnrollments: "20",

```

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

### React SVG Attribute Example

Source: https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_custom.md

When using custom icons in React, ensure attributes are React-compatible. For example, 'xmlns:xlink' should be 'xmlnsXlink'. Avoid hyphenated attributes and semicolons.

```html
<SVG xmlnsXlink="http://www.w3.org/1999/xlink" />
```

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

### Using Kit Components in Compound Components

Source: https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.md

Shows how to integrate label, step, and detail components within a compound component structure. Ensure these components are available in your project.

```html
<script>
  // Assuming 'label', 'step', and 'detail' are registered components
  // Example usage within a parent component
  const parentComponent = {
    components: {
      'my-label': label,
      'my-step': step,
      'my-detail': detail
    },
    template: `
      <div>
        <my-label>Label Text</my-label>
        <my-step :current="1" :total="3">Step Indicator</my-step>
        <my-detail>
          <p>Detailed information here.</p>
        </my-detail>
      </div>
    `
  };
</script>
```

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

### React-Rendered Kit Deprecation Status Example

Source: https://github.com/powerhome/playbook/blob/master/docs/DEPRECATION_WARNINGS.md

Example `menu.yml` configuration for a deprecated kit that is rendered by React. In this case, the React deprecation warning should be used, not the Rails one.

```yaml
- name: bar_graph
  status: deprecated
  react_rendered: true  # DON'T add Rails warning - use React warning instead
```

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

### Initialize PBDialog in Swift

Source: https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_dialog/docs/_dialog_status_swift.md

Configures a dialog with a title, message, status variant, and action buttons.

```swift
 PBDialog(
              title: "Success!",
              message: infoMessage,
              variant: .status(.success),
              isStacked: true,
              cancelButton: ("Cancel", closeToast),
              confirmButton: ("Okay", closeToast),
              size: .small
            )
```

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

### Bash Error: Webpack Dev Server Not Found

Source: https://github.com/powerhome/playbook/wiki/Common-Errors-&-Solutions

This bash error indicates that the 'webpack-dev-server' command is not recognized. It can be resolved by running `yarn && bundle install` to ensure all necessary packages and gems are installed.

```bash
# Error displayed in terminal
$ webpack-dev-server not found
```

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

### Implement PBUser in SwiftUI

Source: https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_user/docs/_user_horizontal_swift.md

Demonstrates various configurations of the PBUser component, including optional image and size parameters.

```swift
let img = Image("andrew", bundle: .module)
let name = "Andrew K"
let title = "Rebels Developer"

VStack(alignment: .leading, spacing: Spacing.small) {
  PBUser(
    name: name,
    image: img,
    territory: "PHL",
    title: title
  )

  PBUser(
    name: name,
    territory: "PHL",
    title: title
  )

  PBUser(
    name: name,
    image: img,
    size: .small,
    title: title
  )

  PBUser(
    name: name,
    image: img,
    size: .small
  )
}
```

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

### Display PBIcon with Various Sizes

Source: https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_icon/docs/_icon_sizes_swift.md

Demonstrates how to use the PBIcon component with different size modifiers. Ensure the PBIcon and HStack components are imported.

```swift
HStack(spacing: Spacing.xSmall) {
  PBIcon.fontAwesome(.atlas, size: .xSmall)
  Text("xSmall")

  PBIcon.fontAwesome(.atlas, size: .small)
  Text("small")

  PBIcon.fontAwesome(.atlas, size: .large)
  Text("large")

  PBIcon.fontAwesome(.atlas, size: .x1)
  Text("x1")

  PBIcon.fontAwesome(.atlas, size: .x2)
  Text("x2")

  PBIcon.fontAwesome(.atlas, size: .x3)
  Text("x3")

  PBIcon.fontAwesome(.atlas, size: .x4)
  Text("x4")

  PBIcon.fontAwesome(.atlas, size: .x5)
  Text("x5")

  PBIcon.fontAwesome(.atlas, size: .x6)
  Text("x6")
  
  PBIcon.fontAwesome(.atlas, size: .x7)
  Text("x7")

  PBIcon.fontAwesome(.atlas, size: .x8)
  Text("x8")

  PBIcon.fontAwesome(.atlas, size: .x9)
  Text("x9")

  PBIcon.fontAwesome(.atlas, size: .x10)
  Text("x10")
}

```

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

### DatePicker Component Implementation

Source: https://context7.com/powerhome/playbook/llms.txt

Examples of the DatePicker component for date selection, ranges, and constraints in React and Rails.

```jsx
import { DatePicker } from 'playbook-ui'

// Basic date picker
<DatePicker
  pickerId="date-picker"
  onChange={(dateStr) => setDate(dateStr)}
/>

// Date picker with default date
<DatePicker
  pickerId="default-date"
  defaultDate="03/15/2024"
/>

// Date range picker
<DatePicker
  pickerId="date-range"
  mode="range"
  onChange={(dateRange) => setDateRange(dateRange)}
/>

// Date picker with min/max dates
<DatePicker
  pickerId="constrained-date"
  minDate="01/01/2024"
  maxDate="12/31/2024"
/>

// Date picker with quick pick options
<DatePicker
  pickerId="quick-pick"
  showQuickPick
  quickPickOptions={[
    { label: 'Today', value: new Date() },
    { label: 'This Week', value: [startOfWeek, endOfWeek] },
  ]}
/>

// Inline date picker
<DatePicker
  pickerId="inline-date"
  inline
/>
```

```erb
<%# Rails: Basic date picker %>
<%= pb_rails("date_picker", props: {
  picker_id: "date-picker",
  label: "Select Date"
}) %>

<%# Date picker with default date %>
<%= pb_rails("date_picker", props: {
  picker_id: "start-date",
  default_date: "03/15/2024",
  label: "Start Date"
}) %>
```

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

### Install Playbook UI React Dependencies

Source: https://github.com/powerhome/playbook/blob/master/playbook-website/app/views/guides/getting_started/dependencies.md

Required packages for Playbook UI's React library to function correctly.

```json
"react"
 "react-dom"
 "react-is"
 "react-trix"
```

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

### Import Playbook UI Styles (Asset Pipeline)

Source: https://github.com/powerhome/playbook/blob/master/playbook-website/app/views/guides/getting_started/ruby_on_rails_setup.md

Import Playbook UI's core styles into your `application.scss` file. This ensures all display kits function correctly.

```scss
# app/assets/stylesheets/application.scss

 @import "reset";
 @import "playbook";
```

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

### Import Playbook Chart Component

Source: https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_description.md

Import chart kits from the 'playbook-ui/charts' entrypoint. Ensure 'highcharts' and 'highcharts-react-official' are installed in your repository.

```javascript
import { PbGaugeChart } from 'playbook-ui/charts'
```

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

### Render Playbook Kit in View

Source: https://github.com/powerhome/playbook/wiki/Integrating-Playbook-Kits-into-Nitro-Components

Verify integration by rendering a Playbook kit in a view file.

```erb
<%= pb_rails("title", props: { text: "HELLO!!!!" }) %>
```

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

### Displaying Text in SwiftUI

Source: https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_vertical_swift.md

Use the Text view to display static strings. This example shows basic text rendering.

```swift
let loremIpsum: some View = Text(
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididt labore et dolore"
)
```

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

### Display PBIcon with Flipping

Source: https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_icon/docs/_icon_flip_swift.md

Demonstrates how to use the PBIcon component with different flipping options. Ensure the FontAwesome library is available.

```swift
HStack(spacing: Spacing.xSmall) {
  PBIcon(FontAwesome.questionCircle, flipped: [.horizontal])
  PBIcon(FontAwesome.questionCircle, flipped: [.vertical])
  PBIcon(FontAwesome.questionCircle, flipped: [.horizontal, .vertical])
}
```

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

### Indeterminate Checkbox Example

Source: https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate_swift.md

Use this to display a checkbox in an indeterminate state, often used for parent selections in a tree view.

```swift
PBCheckbox(
  checked: true,
  checkboxType: .indeterminate,
  text: "Indeterminate",
  action: {}
)
```

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

### Dropdown with Label and Placeholder in React

Source: https://context7.com/powerhome/playbook/llms.txt

Add a descriptive label and placeholder text to guide user selection in the Dropdown component.

```jsx
// Dropdown with label
<Dropdown
  label="Select Country"
  options={options}
  placeholder="Choose a country..."
  onSelect={handleSelect}
/>
```

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

### Implement PBImage with None Size

Source: https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_image/docs/_size_none_image_swift.md

Displays an image using the none size configuration within a VStack. Requires the Playbook framework and a valid image resource.

```swift
VStack(alignment: .leading) {
  Text("None").pbFont(.detail(true), color: .text(.default))
  PBImage(
    image: nil,
    placeholder: Image("Forest", bundle: .module),
    size: .none,
    rounded: .sharp
  )
}
```

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

### Initialize PBDialog in Swift

Source: https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_dialog/docs/_dialog_default_swift.md

Use this component to display informative dialogs with customizable cancel and confirm actions.

```swift
PBDialog(
            title: "This is some informative text",
            message: infoMessage,
            cancelButton: ("Cancel", closeToast),
            confirmButton: ("Okay", closeToast)
          )
```

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

### Displaying PBDate with Variants and Typography

Source: https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_date/docs/_date_variants_swift.md

Demonstrates different configurations of the PBDate component, including variants with and without icons, and various typography styles. Ensure the PBDate component is imported and available in your scope.

```swift
VStack(alignment: .leading, spacing: Spacing.small) {
  PBDate(Date(), variant: .withIcon(isStandard: true), typography: .caption, iconSize: .xSmall)
  PBDate(Date(), variant: .standard, typography: .title4)
  PBDate(Date(), variant: .withIcon(isStandard: true), typography: .title4, iconSize: .x1)
  PBDate(Date(), variant: .dayDate, typography: .title4)
  PBDate(Date(), variant: .withIcon(isStandard: false), typography: .title4, iconSize: .x1)
}
```

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

### Import Chart Component

Source: https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_pb_bar_graph/docs/_description.md

Import chart kits using this entrypoint to keep Highcharts optional. Ensure 'highcharts' and 'highcharts-react-official' are installed in your repository.

```javascript
import { PbBarGraph } from 'playbook-ui/charts'
```

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

### Import Playbook Styles

Source: https://github.com/powerhome/playbook/wiki/Integrating-Playbook-Kits-into-Nitro-Components

Import Playbook styles into the NitroTheme application.scss file.

```scss
/* components/nitro_theme/app/assets/stylesheets/nitro_theme/application.scss */

@import "playbook";
```

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

### Customize Dropdown Quickpick Input Names and IDs

Source: https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_rails.md

Configure the name and ID attributes for the generated start and end date hidden inputs.

```ruby
pb_rails("dropdown", props: {
  variant: "quickpick",
  start_date_name: "filter[start_date]",
  start_date_id: "filter_start_date",
  end_date_name: "filter[end_date]",
  end_date_id: "filter_end_date"
})
```

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

### Implement a block kit

Source: https://github.com/powerhome/playbook/wiki/Rails-Kit

Demonstrates how to pass HTML blocks to a kit and conditionally render them using capture.

```erb
<%= pb_rails("body") do %>
    <div>
        User can pass any block of html here.
    </div>
<% end %>
```

```erb
<%= content_tag(object.tag,
  aria: object.aria,
  id: object.id,
  data: object.data,
  class: object.classname) do %>
  <%= object.children.present? ? capture(&object.children) : object.content %>
<% end %>
```

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

### Flex Layout Component Implementation

Source: https://context7.com/powerhome/playbook/llms.txt

Examples of using the Flex component for layout management, including alignment, spacing, and responsive design in both React and Rails.

```jsx
import { Flex, FlexItem, Card } from 'playbook-ui'

// Basic horizontal flex
<Flex>
  <Card>Item 1</Card>
  <Card>Item 2</Card>
  <Card>Item 3</Card>
</Flex>

// Flex with gap and alignment
<Flex gap="md" align="center" justify="between">
  <Card>Left</Card>
  <Card>Center</Card>
  <Card>Right</Card>
</Flex>

// Vertical flex (column)
<Flex orientation="column" gap="sm">
  <Card>Top</Card>
  <Card>Middle</Card>
  <Card>Bottom</Card>
</Flex>

// Wrap items
<Flex wrap gap="md">
  {items.map(item => (
    <Card key={item.id}>{item.name}</Card>
  ))}
</Flex>

// Responsive gap
<Flex gap={{ xs: 'sm', md: 'lg', xl: 'xl' }}>
  <Card>Responsive</Card>
  <Card>Gap</Card>
</Flex>

// Centered content
<Flex justify="center" align="center" height="200px">
  <Card>Centered Card</Card>
</Flex>
```

```erb
<%# Rails: Basic flex %>
<%= pb_rails("flex", props: { gap: "md" }) do %>
  <%= pb_rails("card") do %>Item 1<% end %>
  <%= pb_rails("card") do %>Item 2<% end %>
<% end %>

<%# Flex with alignment %>
<%= pb_rails("flex", props: {
  justify: "between",
  align: "center",
  gap: "lg"
}) do %>
  <%= pb_rails("body", props: { text: "Left" }) %>
  <%= pb_rails("body", props: { text: "Right" }) %>
<% end %>
```

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

### React Dialog with Status Indicator

Source: https://context7.com/powerhome/playbook/llms.txt

This example demonstrates a dialog displaying a status message, such as success or error. It's useful for providing feedback after an operation.

```jsx
// Status dialog with icon
<Dialog
  opened={showStatus}
  onClose={() => setShowStatus(false)}
  status="success"
  title="Success!"
  text="Your changes have been saved."
  confirmButton="Done"
  onConfirm={() => setShowStatus(false)}
/>
```

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

### Configure PBTextInput with Add-ons

Source: https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on_swift.md

Use these configurations to add icons to the left or right of a text input field, with optional dividers.

```swift
PBTextInput(
  "ADD ON WITH DEFAULTS",
  text: $textAddOn,
  style: .rightIcon(.user, divider: true)
)

PBTextInput(
  "RIGHT-ALIGNED ADD ON WITH BORDER",
  text: $textAddOnRight,
  style: .rightIcon(.user, divider: true)
)

PBTextInput(
  "RIGHT-ALIGNED ADD ON WITH NO BORDER",
  text: $textAddOnRightNoBorder,
  style: .rightIcon(.user, divider: false)
)

PBTextInput(
  "LEFT-ALIGNED ADD ON WITH NO BORDER",
  text: $textAddOnLeft,
  style: .leftIcon(.user, divider: false)
)

PBTextInput(
  "LEFT-ALIGNED ADD ON WITH BORDER",
  text: $textAddOnLeftNoBorder,
  style: .leftIcon(.user, divider: true)
)
```

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

### Implement Deprecation Warning in ERB

Source: https://github.com/powerhome/playbook/blob/master/docs/DEPRECATION_WARNINGS.md

Usage examples for the helper within Rails templates, emphasizing the use of double equals to prevent HTML escaping.

```erb
<%== deprecated_kit_warning('YourKit') %>
<!-- Makes it easy to find and consistent across kits -->
```

```erb
<%== deprecated_kit_warning('Legend', 'Use PbLegend instead for improved accessibility.') %>
```

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

### Vertical Bold Navigation Example

Source: https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_nav/docs/_nav_vertical_bold_swift.md

Use this snippet to create a vertical navigation menu with bold styling. Ensure the `selected` state is bound to a State variable.

```swift
@State private var selectedVBold: Int = 1

PBNav(
        selected: $selectedVBold,
        variant: .bold,
        orientation: .vertical,
        borders: false
      ) {
        PBNavItem("Photos")
        PBNavItem("Music")
        PBNavItem("Video")
        PBNavItem("Files")
      }

```