playbook_ui 15.6.0.pre.alpha.play266913088 → 15.6.0.pre.rc.0

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_closeable.jsx

@@ -1,60 +0,0 @@
-import React, { useState } from 'react'
-import Button from '../../pb_button/_button'
-import Dialog from '../../pb_dialog/_dialog'
-
-
-const DialogCloseable = () => {
-  // Simple example 
-  const [isOpenSimple, setIsOpenSimple] = useState(false)
-  const closeSimple = () => setIsOpenSimple(false)
-  const openSimple = () => setIsOpenSimple(true)
-
-    // Complex example
-  const [isOpenComplex, setIsOpenComplex] = useState(false)
-  const closeComplex = () => setIsOpenComplex(false)
-  const openComplex = () => setIsOpenComplex(true)
-
-  return (
-    <>
-      <Button 
-          marginRight='md'
-          onClick={openSimple}
-      >
-        {'Open Simple Dialog'}
-      </Button>
-      <Button onClick={openComplex}>{'Open Complex Dialog'}</Button>
-
-      <Dialog
-          cancelButton="Cancel Button"
-          closeable={false}
-          confirmButton="Okay"
-          onCancel={closeSimple}
-          onClose={closeSimple}
-          onConfirm={closeSimple}
-          opened={isOpenSimple}
-          size="sm"
-          text="Hello Body Text, Nice to meet ya."
-          title="Header Title is the Title Prop"
-      />
-      <Dialog
-          onClose={closeComplex}
-          opened={isOpenComplex}
-          size="sm"
-      >
-        <Dialog.Header closeable={false}>{'Header Title inside Dialog.Header'}</Dialog.Header>
-        <Dialog.Body>{'Hello Body Text, Nice to meet ya.'}</Dialog.Body>
-        <Dialog.Footer>
-          <Button onClick={closeComplex}>{'Okay'}</Button>
-          <Button
-              onClick={closeComplex}
-              variant="link"
-          >
-            {'Cancel Button'}
-          </Button>
-        </Dialog.Footer>
-      </Dialog>
-    </>
-  )
-}
-
-export default DialogCloseable

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_closeable.md

@@ -1,3 +0,0 @@
-The `closeable` prop can be set to false to optionally render the Dialog header without the close “X” button. `closeable` is set to true by default. 
-
-This prop can be used with the simple as well as the complex version of the Dialog as can be seen here.

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_overflow_visible.html.erb

@@ -1,71 +0,0 @@
-<% 
-  typeahead_options = [
-    {
-      label: "United States",
-      value: "unitedStates",
-      id: "us"
-    },
-    {
-      label: "United Kingdom",
-      value: "unitedKingdom",
-      id: "gb"
-    },
-    {
-      label: "Canada",
-      value: "canada",
-      id: "ca"
-    },
-    {
-      label: "Australia",
-      value: "australia",
-      id: "au"
-    },
-    {
-      label: "Germany",
-      value: "germany",
-      id: "de"
-    },
-    {
-      label: "France",
-      value: "france",
-      id: "fr"
-    },
-    {
-      label: "Japan",
-      value: "japan",
-      id: "jp"
-    },
-    {
-      label: "Brazil",
-      value: "brazil",
-      id: "br"
-    }
-  ]
-%>
-
-<%= pb_rails("button", props: { text: "Open Dialog with Overflow Visible", data: {"open-dialog": "dialog-overflow-visible"} }) %>
-
-<%= pb_rails("dialog", props: { 
-    id: "dialog-overflow-visible", 
-    size: "md", 
-    overflow: "visible"
-}) do %>
-  <%= pb_rails("dialog/dialog_header", props: { id: "dialog-overflow-visible" } ) do %>
-    <%= pb_rails("body", props: { text: "Select Location" }) %>
-  <% end %>
-  <%= pb_rails("dialog/dialog_body") do %>
-    <%= pb_rails("typeahead", props: {
-      options: typeahead_options,
-      placeholder: "Select a location...",
-      id: "location-typeahead",
-      is_multi: false,
-    }) %>
-  <% end %>
-  <%= pb_rails("dialog/dialog_footer", props: {
-    cancel_button: "Cancel",
-    confirm_button: "Save",
-    confirm_button_id: "confirm-overflow-visible",
-    id: "dialog-overflow-visible"
-  }) %>
-<% end %>
-

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_overflow_visible.jsx

@@ -1,57 +0,0 @@
-import React, { useState } from 'react'
-
-import Body from '../../pb_body/_body'
-import Button from '../../pb_button/_button'
-import Dialog from '../../pb_dialog/_dialog'
-import Typeahead from '../../pb_typeahead/_typeahead'
-
-const DialogOverflowVisible = () => {
-  const [isOpen, setIsOpen] = useState(false)
-  const close = () => setIsOpen(false)
-  const open = () => setIsOpen(true)
-
-  const typeaheadOptions = [
-    { label: "United States", value: "unitedStates", id: "us" },
-    { label: "United Kingdom", value: "unitedKingdom", id: "gb" },
-    { label: "Canada", value: "canada", id: "ca" },
-    { label: "Australia", value: "australia", id: "au" },
-    { label: "Germany", value: "germany", id: "de" },
-    { label: "France", value: "france", id: "fr" },
-    { label: "Japan", value: "japan", id: "jp" },
-    { label: "Brazil", value: "brazil", id: "br" },
-  ]
-
-  return (
-    <>
-      <Button onClick={open}>{'Open Dialog with Overflow Visible'}</Button>
-      <Dialog
-          onClose={close}
-          opened={isOpen}
-          overflow="visible"
-          size="md"
-      >
-        <Dialog.Header>
-          <Body>{'Select Location'}</Body>
-        </Dialog.Header>
-        <Dialog.Body>
-          <Typeahead
-              options={typeaheadOptions}
-              placeholder="Select a location..."
-          />
-        </Dialog.Body>
-        <Dialog.Footer>
-          <Button onClick={close}>{'Save'}</Button>
-          <Button
-              onClick={close}
-              variant="link"
-          >
-            {'Cancel'}
-          </Button>
-        </Dialog.Footer>
-      </Dialog>
-    </>
-  )
-}
-
-export default DialogOverflowVisible
-

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_overflow_visible_rails.md

@@ -1 +0,0 @@
-Use the `overflow: "visible"` global prop to allow Typeahead dropdown menus to appear outside the dialog boundaries. By default, dialogs clip content that extends beyond their edges, but this prop enables pop-up elements to render above the dialog overlay. 

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_overflow_visible_react.md

@@ -1 +0,0 @@
-Use the `overflow="visible"` global prop to allow Date Picker and Typeahead dropdown menus to appear outside the dialog boundaries. By default, dialogs clip content that extends beyond their edges, but this prop enables pop-up elements to render above the dialog overlay. 

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_dropzone.jsx

@@ -1,180 +0,0 @@
-import React, { useState } from "react";
-
-import Flex from '../../pb_flex/_flex'
-import Draggable from '../../pb_draggable/_draggable'
-import { DraggableProvider } from '../../pb_draggable/context'
-import Badge from '../../pb_badge/_badge'
-import Title from '../../pb_title/_title'
-import Caption from '../../pb_caption/_caption'
-import Card from '../../pb_card/_card'
-import FlexItem from '../../pb_flex/_flex_item'
-import Avatar from '../../pb_avatar/_avatar'
-import Body from '../../pb_body/_body'
-
-// Initial groups to drag between
-const containers = ["To Do", "In Progress", "Done"];
-
-// Initial items to be dragged
-const data = [
-  {
-    id: "11",
-    container: "To Do",
-    title: "Task 1",
-    description: "Bug fixes",
-    assignee_name: "Terry Miles",
-    assignee_img: "https://randomuser.me/api/portraits/men/44.jpg",
-  },
-  {
-    id: "12",
-    container: "To Do",
-    title: "Task 2",
-    description: "Documentation",
-    assignee_name: "Sophia Miles",
-    assignee_img: "https://randomuser.me/api/portraits/women/8.jpg",
-  },
-  {
-    id: "13",
-    container: "In Progress",
-    title: "Task 3",
-    description: "Add a variant",
-    assignee_name: "Alice Jones",
-    assignee_img: "https://randomuser.me/api/portraits/women/10.jpg",
-  },
-  {
-    id: "14",
-    container: "To Do",
-    title: "Task 4",
-    description: "Add jest tests",
-    assignee_name: "Mike James",
-    assignee_img: "https://randomuser.me/api/portraits/men/8.jpg",
-  },
-  {
-    id: "15",
-    container: "Done",
-    title: "Task 5",
-    description: "Alpha testing",
-    assignee_name: "James Guy",
-    assignee_img: "https://randomuser.me/api/portraits/men/18.jpg",
-  },
-  {
-    id: "16",
-    container: "In Progress",
-    title: "Task 6",
-    description: "Release",
-    assignee_name: "Sally Jones",
-    assignee_img: "https://randomuser.me/api/portraits/women/28.jpg",
-  },
-];
-
-const DraggableMultipleContainersDropzone = (props) => {
-  const [initialState, setInitialState] = useState(data);
-
-  const badgeProperties = (container) => {
-    switch (container) {
-      case "To Do":
-        return { text: "queue", color: "warning" };
-      case "In Progress":
-        return { text: "progress", color: "primary" };
-      default:
-        return { text: "done", color: "success" };
-    }
-  };
-
-  return (
-    <DraggableProvider 
-        dropZone={{type: "outline"}}
-        enableCrossContainerPreview
-        initialItems={data}
-        onDragEnd={(draggedItemId, finalContainer, originalContainer, itemAbove, itemBelow) => {
-          console.log(`Dragged Item ID: ${draggedItemId}`);
-          console.log(`Final Container: ${finalContainer}`);
-          console.log(`Original Container: ${originalContainer}`);
-          console.log('Item Above:', itemAbove);
-          console.log('Item Below:', itemBelow);
-        }}
-        onDrop={(draggedItemId, droppedContainer, originalContainer, item, itemAbove, itemBelow) => {
-          console.log(`Dragged Item ID: ${draggedItemId}`);
-          console.log(`Dropped Container: ${droppedContainer}`);
-          console.log(`Original Container: ${originalContainer}`);
-          console.log('Dropped Item:', item);
-          console.log('Item Above:', itemAbove);
-          console.log('Item Below:', itemBelow);
-        }}
-        onReorder={(items) => setInitialState(items)}
-    >
-      <Flex
-          justifyContent="center"
-          {...props}
-      >
-          {containers?.map((container) => (
-            <Draggable.Container 
-                container={container}
-                htmlOptions={{style:{ width: "200px", height: "70vh"}}}
-                key={container} 
-                padding="sm"
-            >
-                <Caption textAlign="center">{container}</Caption>
-                <Flex 
-                    alignItems="stretch"
-                    gap="sm"
-                    orientation="column" 
-                >
-                  {initialState
-                    .filter((item) => item.container === container)
-                    .map(
-                      ({
-                        assignee_img,
-                        assignee_name,
-                        description,
-                        id,
-                        title,
-                      }) => (
-                        <Draggable.Item 
-                            container={container}
-                            dragId={id} 
-                            key={id}
-                        >
-                          <Card
-                              padding="sm"
-                              {...props}
-                          >
-                            <Flex justify="between">
-                              <FlexItem>
-                                <Flex>
-                                  <Avatar
-                                      imageUrl={assignee_img}
-                                      name={assignee_name}
-                                      size="xxs"
-                                  />
-                                  <Title paddingLeft="xs" 
-                                      size={4}
-                                      text={title}
-                                      {...props}
-                                  />
-                                </Flex>
-                              </FlexItem>
-                              <Badge
-                                  marginLeft="sm"
-                                  rounded
-                                  text={badgeProperties(container).text}
-                                  variant={badgeProperties(container).color}
-                                  {...props}
-                              />
-                            </Flex>
-                            <Body paddingTop="xs"
-                                text={description} 
-                                {...props}
-                            />
-                          </Card>
-                        </Draggable.Item>
-                      )
-                    )}
-                </Flex>
-            </Draggable.Container>
-          ))}
-      </Flex>
-    </DraggableProvider>
-  );
-};
-
-export default DraggableMultipleContainersDropzone;

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_dropzone.md

@@ -1,22 +0,0 @@
-The multiple container functionality also supports customized dropzone styling as shown here. 
-
-In addition to this, the `enableCrossContainerPreview` prop can be used on the `DraggableProvider` as shown here to enable dropzone preview for cross-container dragging. 
-
-With `enableCrossContainerPreview`, the `onDrop` and `onDragEnd` event listeners will also provide several arguments to allow developers more context from the drag event.
-
-The `onDrop` callback is triggered when an item is successfully dropped into a container. It provides the following arguments:
-
-- `draggedItemId` - The ID of the item that was dragged
-- `droppedContainer` - The container where the item was dropped
-- `originalContainer` - The container where the drag started
-- `item` - The complete item object with all properties (including the updated container)
-- `itemAbove` - The item directly above the dropped item in the final position (null if at the top)
-- `itemBelow` - The item directly below the dropped item in the final position (null if at the bottom)
-
-The `onDragEnd` callback is triggered when a drag operation ends, whether it was dropped or cancelled. It provides the following arguments:
-
-- `draggedItemId` - The ID of the item that was dragged
-- `finalContainer` - The container where the item ended up (could be same as original if drag was cancelled)
-- `originalContainer` - The container where the drag started
-- `itemAbove` - The item directly above the dragged item in the final position (null if at the top)
-- `itemBelow` - The item directly below the dragged item in the final position (null if at the bottom)

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_default_dates.html.erb

@@ -1,19 +0,0 @@
-
-<%= pb_rails("dropdown", props: {
-  id: "date-range-with-default",
-  label: "Date Range",
-  variant: "quickpick",
-  default_value: "This Year"
-}) %>
-
-<script>
-  document.addEventListener("DOMContentLoaded", () => {
-    const dropdown = document.getElementById("date-range-with-default");
-    if (dropdown) {
-      dropdown.addEventListener("pb:dropdown:selected", (e) => {
-        const option = e.detail;
-        console.log("Selected option:", option);
-      });
-    }
-  });
-</script>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_rails.html.erb

@@ -1,12 +0,0 @@
-<%= pb_rails("dropdown", props: {id: "date-range-quickpick-1", label: "Date Range", variant: "quickpick"}) %>
-
-
-<script>
-  const dropdown = document.getElementById("date-range-quickpick-1");
-  if (dropdown) {
-    dropdown.addEventListener("pb:dropdown:selected", (e) => {
-      const option = e.detail;
-      console.log("Selected option:", option);
-    });
-  }
-</script>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_rails.md

@@ -1,26 +0,0 @@
-The `quickpick` variant provides predefined date based options when `variant:"quickpick"` is used. 
-
-Open the Dropdown above to see the default options.
-
-The quickpick variant automatically generates hidden inputs for `start_date` and `end_date` which are populated when a date range is selected. These inputs are ready for form submission.
-
-You can customize the input names and IDs using the following props:
-- `start_date_name` - The name attribute for the start date input (default: `"start_date_name"`)
-- `start_date_id` - The ID attribute for the start date input (default: `"start_date_id"`)
-- `end_date_name` - The name attribute for the end date input (default: `"end_date_name"`)
-- `end_date_id` - The ID attribute for the end date input (default: `"end_date_id"`)
-
-Example with custom names:
-```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"
-})
-```
-
-The Dropdown kit also comes with a custom event called "pb:dropdown:selected" which updates dynamically with the selection as it changes. See code snippet to see this in action.
-
-In addition, a data attribute called data-option-selected with the selection is also rendered on the parent dropdown div.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_range_end_rails.html.erb

@@ -1,19 +0,0 @@
-
-<%= pb_rails("dropdown", props: {
-  id: "date-range-quickpick-end-today",
-  label: "Date Range", 
-  variant: "quickpick", 
-  range_ends_today: true 
-}) %>
-
-<script>
-  document.addEventListener("DOMContentLoaded", () => {
-    const dropdown = document.getElementById("date-range-quickpick-end-today");
-    if (dropdown) {
-      dropdown.addEventListener("pb:dropdown:selected", (e) => {
-        const option = e.detail;
-        console.log("Selected option:", option);
-      });
-    }
-  });
-</script>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_range_end_rails.md

@@ -1 +0,0 @@
-The optional `range_ends_today` prop can be used with the `quickpick` variant to set end date on all ranges that start with 'this' to today's date. For instance, by default 'This Year' will set end day to 12/31/(current year), but if `range_ends_today` prop is used, end date on that range will be today's date.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_with_date_pickers_default_rails.html.erb

@@ -1,30 +0,0 @@
-<%= pb_rails("dropdown", props: {
-  id: "dropdown-quickpick-with-date-pickers-default",
-  label: "Date Range",
-  name: "date_range",
-  margin_bottom: "sm",
-  variant: "quickpick",
-  default_value: "This Month",
-  controls_start_id: "start-date-picker-default",
-  controls_end_id: "end-date-picker-default",
-  start_date_id: "quickpick_start_date_default",
-  start_date_name: "start_date",
-  end_date_id: "quickpick_end_date_default",
-  end_date_name: "end_date"
-}) %>
-
-<%= pb_rails("date_picker", props: {
-  picker_id: "start-date-picker-default",
-  label: "Start Date",
-  name: "start_date_picker",
-  placeholder: "Select Start Date",
-  sync_start_with: "dropdown-quickpick-with-date-pickers-default"
-}) %>
-
-<%= pb_rails("date_picker", props: {
-  picker_id: "end-date-picker-default",
-  label: "End Date",
-  name: "end_date_picker",
-  placeholder: "Select End Date",
-  sync_end_with: "dropdown-quickpick-with-date-pickers-default"
-}) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_with_date_pickers_default_rails.md

@@ -1,3 +0,0 @@
-This example demonstrates the 3-input pattern with a default value. The dropdown is initialized with "This Month" selected, and both DatePickers are automatically populated with the corresponding start and end dates.
-
-The default value can be set using the `default_value` prop with any of the quickpick option labels.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_with_date_pickers_rails.html.erb

@@ -1,29 +0,0 @@
-<%= pb_rails("dropdown", props: {
-  id: "dropdown-quickpick-with-date-pickers",
-  label: "Date Range",
-  name: "date_range",
-  margin_bottom: "sm",
-  variant: "quickpick",
-  controls_start_id: "start-date-picker",
-  controls_end_id: "end-date-picker",
-  start_date_id: "quickpick_start_date",
-  start_date_name: "start_date",
-  end_date_id: "quickpick_end_date",
-  end_date_name: "end_date"
-}) %>
-
-<%= pb_rails("date_picker", props: {
-  picker_id: "start-date-picker",
-  label: "Start Date",
-  name: "start_date_picker",
-  placeholder: "Select Start Date",
-  sync_start_with: "dropdown-quickpick-with-date-pickers"
-}) %>
-
-<%= pb_rails("date_picker", props: {
-  picker_id: "end-date-picker",
-  label: "End Date",
-  name: "end_date_picker",
-  placeholder: "Select End Date",
-  sync_end_with: "dropdown-quickpick-with-date-pickers"
-}) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_with_date_pickers_rails.md

@@ -1,13 +0,0 @@
-The quickpick variant can be synced with two DatePickers for a 3-input pattern. When a quickpick option is selected from the dropdown, both DatePickers are automatically populated. When either DatePicker is manually changed, the dropdown is cleared.
-
-#### Props for 3-Input Pattern:
-
-- `controls_start_id` - ID of the start DatePicker to sync with
-- `controls_end_id` - ID of the end DatePicker to sync with
-
-#### DatePicker Props:
-
-- `sync_start_with` - ID of the dropdown to clear when start date changes
-- `sync_end_with` - ID of the dropdown to clear when end date changes
-
-This pattern allows users to quickly select common date ranges or manually pick specific dates.

data/app/pb_kits/playbook/pb_dropdown/quickpick_helper.rb

@@ -1,75 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbDropdown
-    module QuickpickHelper
-      class << self
-        def get_quickpick_options(range_ends_today: false)
-          today = Date.today
-          yesterday = today - 1.day
-
-          this_week_start_date = first_day_of_week(today)
-          this_week_end_date = range_ends_today ? today : last_day_of_week(today)
-          last_week_start_date = previous_week_start_date(today)
-          last_week_end_date = previous_week_end_date(today)
-
-          this_month_start_date = today.beginning_of_month
-          this_month_end_date = range_ends_today ? today : today.end_of_month
-          last_month_start_date = (today - 1.month).beginning_of_month
-          last_month_end_date = (today - 1.month).end_of_month
-
-          this_quarter_start_date = today.beginning_of_quarter
-          this_quarter_end_date = range_ends_today ? today : today.end_of_quarter
-          last_quarter_start_date = (today - 3.months).beginning_of_quarter
-          last_quarter_end_date = (today - 3.months).end_of_quarter
-
-          this_year_start_date = today.beginning_of_year
-          this_year_end_date = range_ends_today ? today : today.end_of_year
-          last_year_start_date = (today - 1.year).beginning_of_year
-          last_year_end_date = (today - 1.year).end_of_year
-
-          [
-            { id: "quickpick-today", label: "Today", value: [today.to_s, today.to_s], formatted_start_date: format_date(today), formatted_end_date: format_date(today) },
-            { id: "quickpick-yesterday", label: "Yesterday", value: [yesterday.to_s, yesterday.to_s], formatted_start_date: format_date(yesterday), formatted_end_date: format_date(yesterday) },
-            { id: "quickpick-this-week", label: "This Week", value: [this_week_start_date.to_s, this_week_end_date.to_s], formatted_start_date: format_date(this_week_start_date), formatted_end_date: format_date(this_week_end_date) },
-            { id: "quickpick-this-month", label: "This Month", value: [this_month_start_date.to_s, this_month_end_date.to_s], formatted_start_date: format_date(this_month_start_date), formatted_end_date: format_date(this_month_end_date) },
-            { id: "quickpick-this-quarter", label: "This Quarter", value: [this_quarter_start_date.to_s, this_quarter_end_date.to_s], formatted_start_date: format_date(this_quarter_start_date), formatted_end_date: format_date(this_quarter_end_date) },
-            { id: "quickpick-this-year", label: "This Year", value: [this_year_start_date.to_s, this_year_end_date.to_s], formatted_start_date: format_date(this_year_start_date), formatted_end_date: format_date(this_year_end_date) },
-            { id: "quickpick-last-week", label: "Last Week", value: [last_week_start_date.to_s, last_week_end_date.to_s], formatted_start_date: format_date(last_week_start_date), formatted_end_date: format_date(last_week_end_date) },
-            { id: "quickpick-last-month", label: "Last Month", value: [last_month_start_date.to_s, last_month_end_date.to_s], formatted_start_date: format_date(last_month_start_date), formatted_end_date: format_date(last_month_end_date) },
-            { id: "quickpick-last-quarter", label: "Last Quarter", value: [last_quarter_start_date.to_s, last_quarter_end_date.to_s], formatted_start_date: format_date(last_quarter_start_date), formatted_end_date: format_date(last_quarter_end_date) },
-            { id: "quickpick-last-year", label: "Last Year", value: [last_year_start_date.to_s, last_year_end_date.to_s], formatted_start_date: format_date(last_year_start_date), formatted_end_date: format_date(last_year_end_date) },
-          ]
-        end
-
-      private
-
-        def format_date(date)
-          date.strftime("%m/%d/%Y")
-        end
-
-        def format_date_range(start_date, end_date)
-          "#{format_date(start_date)} - #{format_date(end_date)}"
-        end
-
-        def first_day_of_week(date)
-          # Monday as first day of week
-          date.beginning_of_week(:monday)
-        end
-
-        def last_day_of_week(date)
-          # Sunday as last day of week
-          date.end_of_week(:monday)
-        end
-
-        def previous_week_start_date(date)
-          first_day_of_week(date) - 1.week
-        end
-
-        def previous_week_end_date(date)
-          last_day_of_week(date) - 1.week
-        end
-      end
-    end
-  end
-end