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

data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_with_pagination_rails.html.erb

@@ -1,122 +0,0 @@
-    <% users = [
-        { id: 1, name: "Jennifer", title: "Associate Scrum Master", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 1) },
-        { id: 2, name: "Nick", title: "UX Engineer II", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 2) },
-        { id: 3, name: "Nida", title: "Senior UX Engineer", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 3) },
-        { id: 4, name: "Justin", title: "Director of User Experience Engineering", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 4) },
-        { id: 5, name: "Edward", title: "UX Designer II", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 5) },
-        { id: 6, name: "Elisa", title: "UX Engineer", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 6) },
-        { id: 7, name: "Gary", title: "UX Engineer", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 7) },
-        { id: 8, name: "Barkley", title: "Nitro Quality Ninja", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 8) },
-        { id: 9, name: "Aaron", title: "Associate Nitro Quality Ninja", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 9) },
-        { id: 10, name: "Sarah", title: "Senior Product Manager", department: "Business Technology", branch: "New York", start_date: Date.new(2025, 1, 10) },
-        { id: 11, name: "Michael", title: "Software Engineer III", department: "Business Technology", branch: "Austin", start_date: Date.new(2025, 1, 11) },
-        { id: 12, name: "Emma", title: "Data Analyst II", department: "Customer Development", branch: "Philadelphia", start_date: Date.new(2025, 1, 12) },
-        { id: 13, name: "David", title: "QA Engineer", department: "Business Technology", branch: "New York", start_date: Date.new(2025, 1, 13) },
-        { id: 14, name: "Lisa", title: "UX Researcher", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 14) },
-        { id: 15, name: "James", title: "DevOps Engineer", department: "Business Technology", branch: "Austin", start_date: Date.new(2025, 1, 15) },
-        { id: 16, name: "Anna", title: "Product Designer", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 16) },
-        { id: 17, name: "Robert", title: "Backend Engineer", department: "Business Technology", branch: "New York", start_date: Date.new(2025, 1, 17) },
-        { id: 18, name: "Maria", title: "Frontend Developer", department: "Business Technology", branch: "Austin", start_date: Date.new(2025, 1, 18) },
-        { id: 19, name: "William", title: "Tech Lead", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 19) },
-        { id: 20, name: "Jessica", title: "Scrum Master", department: "Business Technology", branch: "New York", start_date: Date.new(2025, 1, 20) },
-        { id: 21, name: "Daniel", title: "Software Architect", department: "Business Technology", branch: "Austin", start_date: Date.new(2025, 1, 21) },
-        { id: 22, name: "Laura", title: "Business Analyst", department: "Customer Development", branch: "Philadelphia", start_date: Date.new(2025, 1, 22) },
-        { id: 23, name: "Chris", title: "Security Engineer", department: "Business Technology", branch: "New York", start_date: Date.new(2025, 1, 23) },
-        { id: 24, name: "Ashley", title: "UX Engineer III", department: "Business Technology", branch: "Austin", start_date: Date.new(2025, 1, 24) },
-        { id: 25, name: "Kevin", title: "Platform Engineer", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 25) },
-        { id: 26, name: "Michelle", title: "Content Designer", department: "Business Technology", branch: "New York", start_date: Date.new(2025, 1, 26) },
-    ] %>
-
-<% filter_content = 
-    pb_rails("text_input", props: {
-      label: "Territory ID",
-      placeholder: "Enter Territory ID"
-    }) +
-    pb_rails("typeahead", props: {
-      label: "Title",
-      options: [
-        { label: "Senior UX Engineer", value: "senior-ux-engineer" },
-        { label: "UX Engineer", value: "ux-engineer" },
-        { label: "UX Designer", value: "ux-designer" }
-      ]
-    }) +
-    pb_rails("select", props: {
-      blank_selection: "All Departments",
-      label: "Department",
-      options: [
-        { value: "Business Technology", text: "Business Technology" },
-        { value: "Customer Development", text: "Customer Development" },
-        { value: "Talent Acquisition", text: "Talent Acquisition" }
-      ]
-    }) +
-    pb_rails("dropdown", props: {
-      label: "Branch",
-      options: [
-        { label: "Philadelphia", value: "philadelphia" },
-        { label: "New York", value: "new-york" },
-        { label: "Austin", value: "austin" }
-      ]
-    }) +
-    pb_rails("date_picker", props: {
-      label: "Start Date",
-      padding_y: "sm",
-      picker_id: "startedOn"
-    }) +
-    pb_rails("flex", props: { spacing: "between" }) do
-      pb_rails("button", props: {
-        text: "Filter",
-      }) +
-      pb_rails("button", props: {
-        text: "Defaults",
-        variant: "secondary"
-      })
-    end
-%>
-
-<%# Replace "model" in pagination here with your specific data source %>
-<% pagination_element = pb_rails("pagination", props: { model: @users, view: self, padding_y:"xs", margin_left:"lg" }) %>
-
-<%= pb_rails("table", props: {
-  variant: "with_filter",
-  title: "Table Title Here",
-  filter_content: filter_content,
-  pagination: pagination_element,
-  filter_props: {
-    id: "user-table-filters-2",
-    results: users.length,
-    sort_menu: [
-        { item: "Start Date", link: "?q[sorts]=started_on+asc", active: true, direction: "asc" },
-        { item: "First Name", link: "?q[sorts]=name+asc", active: false },
-        { item: "Title", link: "?q[sorts]=title+asc", active: false },
-        { item: "Department", link: "?q[sorts]=department+asc", active: false },
-        { item: "Branch", link: "?q[sorts]=branch+asc", active: false },
-        { item: "Territory ID", link: "?q[sorts]=territory_id+asc", active: false },
-    ],
-  }
-}) do %>
-  <%= pb_rails("table/table_head") do %>
-    <%= pb_rails("table/table_row") do %>
-      <%= pb_rails("table/table_header", props: { text: "Territory ID" }) %>
-      <%= pb_rails("table/table_header", props: { text: "Name" }) %>
-      <%= pb_rails("table/table_header", props: { text: "Title" }) %>
-      <%= pb_rails("table/table_header", props: { text: "Department" }) %>
-      <%= pb_rails("table/table_header", props: { text: "Branch" }) %>
-      <%= pb_rails("table/table_header", props: { text: "Start Date", text_align: "right" }) %>
-    <% end %>
-  <% end %>
-
-  <%= pb_rails("table/table_body") do %>
-    <% users.each do |user| %>
-      <%= pb_rails("table/table_row") do %>
-        <%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" }, number_spacing: "tabular" }) { user[:id].to_s } %>
-        <%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" } }) { user[:name] } %>
-        <%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" } }) { user[:title] } %>
-        <%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" } }) { user[:department] } %>
-        <%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" } }) { user[:branch] } %>
-        <%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" } }) do %>
-           <%= pb_rails("date", props: {alignment: "right", date: user[:start_date].to_s, show_current_year: true } ) %>        
-        <% end %>
-      <% end %>
-    <% end %>
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_with_pagination_rails.md

@@ -1,3 +0,0 @@
-The `with_filter` variant can also be used with the Pagination kit as shown here. Simply set up your Pagination as normal, and pass the Pagination kit to the prop `pagination` as shown.
-
-**IMPORTANT NOTE**: This is NOT a working example of pagination, please set up your use case with the relevant data in your controller. For more information on the Pagination Kit and how to use it, see the documentation [here](https://playbook.powerapp.cloud/kits/pagination/rails)

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_show_current_year.html.erb

@@ -1,60 +0,0 @@
-<%= pb_rails("timeline", props: {orientation: "horizontal", show_date: true}) do %>
-    <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal", line_style: "solid", date: Date.today, show_current_year: true }) do %>
-        <%= pb_rails("title_detail", props: {
-            title: "Jackson Heights",
-            detail: "37-27 74th Street"
-        }) %>
-    <% end %>
-    <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted" }) do %>
-        <%= pb_rails("title_detail", props: {
-            title: "Greenpoint",
-            detail: "81 Gate St Brooklyn"
-        }) %>
-    <% end %>
-    <%= pb_rails("timeline/item", props: { line_style: "solid"}) do |item| %>
-      <% item.label do %>
-        <%= pb_rails("timeline/label", props: { date: Date.today, show_current_year: true }) %>
-      <% end %>
-      <% item.step do %>
-        <%= pb_rails("timeline/step", props: { icon: 'map-marker-alt', icon_color: 'purple' }) %>
-      <% end %>
-      <% item.detail do %>
-        <%= pb_rails("title_detail", props: {
-          title: "Society Hill",
-          detail: "72 E St Astoria"
-        }) %>
-      <% end %>
-    <% end %>
-<% end %>
-
-<br /><br /><br />
-
-<%= pb_rails("timeline", props: {orientation: "vertical", show_date: true}) do %>
-    <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal", line_style: "solid", date: Date.today, show_current_year: true }) do %>
-        <%= pb_rails("title_detail", props: {
-            title: "Jackson Heights",
-            detail: "37-27 74th Street"
-        }) %>
-    <% end %>
-    <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted" }) do %>
-        <%= pb_rails("title_detail", props: {
-            title: "Greenpoint",
-            detail: "81 Gate St Brooklyn"
-        }) %>
-    <% end %>
-    <%= pb_rails("timeline/item", props: { line_style: "solid"}) do |item| %>
-      <% item.label do %>
-        <%= pb_rails("timeline/label", props: { date: Date.today, show_current_year: true }) %>
-      <% end %>
-      <% item.step do %>
-        <%= pb_rails("timeline/step", props: { icon: 'map-marker-alt', icon_color: 'purple' }) %>
-      <% end %>
-      <% item.detail do %>
-        <%= pb_rails("title_detail", props: {
-          title: "Society Hill",
-          detail: "72 E St Astoria"
-        }) %>
-      <% end %>
-    <% end %>
-<% end %>
-

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_show_current_year.jsx

@@ -1,118 +0,0 @@
-import React from 'react'
-
-import Timeline from '../_timeline'
-import TitleDetail from '../../pb_title_detail/_title_detail'
-
-const TimelineShowCurrentYear = (props) => (
-  <div>
-    <Timeline
-        orientation="horizontal"
-        showDate
-        {...props}
-    >
-      <Timeline.Item
-          date={new Date()}
-          icon="user"
-          iconColor="royal"
-          showCurrentYear
-          {...props}
-      >
-        <TitleDetail
-            detail="37-27 74th Street"
-            title="Jackson Heights"
-            {...props}
-        />
-      </Timeline.Item>
-      <Timeline.Item
-          icon="check"
-          iconColor="teal"
-          lineStyle="dotted"
-          {...props}
-      >
-        <TitleDetail
-            detail="81 Gate St Brooklyn"
-            title="Greenpoint"
-            {...props}
-        />
-      </Timeline.Item>
-      <Timeline.Item
-          lineStyle="solid"
-          {...props}
-      >
-        <Timeline.Label
-            date={new Date()}
-            showCurrentYear
-        />
-        <Timeline.Step
-            icon="map-marker-alt"
-            iconColor="purple"
-        />
-        <Timeline.Detail>
-          <TitleDetail
-              detail="72 E St Astoria"
-              title="Society Hill"
-              {...props}
-          />
-        </Timeline.Detail>
-      </Timeline.Item>
-    </Timeline>
-
-    <br />
-    <br />
-    <br />
-
-    <Timeline
-        orientation="vertical"
-        showDate
-        {...props}
-    >
-      <Timeline.Item
-          date={new Date()}
-          icon="user"
-          iconColor="royal"
-          showCurrentYear
-          {...props}
-      >
-        <TitleDetail
-            detail="37-27 74th Street"
-            title="Jackson Heights"
-            {...props}
-        />
-      </Timeline.Item>
-      <Timeline.Item
-          icon="check"
-          iconColor="teal"
-          lineStyle="dotted"
-          {...props}
-      >
-        <TitleDetail
-            detail="81 Gate St Brooklyn"
-            title="Greenpoint"
-            {...props}
-        />
-      </Timeline.Item>
-      <Timeline.Item
-          lineStyle="solid"
-          {...props}
-      >
-        <Timeline.Label
-            date={new Date()}
-            showCurrentYear
-        />
-        <Timeline.Step
-            icon="map-marker-alt"
-            iconColor="purple"
-        />
-        <Timeline.Detail>
-          <TitleDetail
-              detail="72 E St Astoria"
-              title="Society Hill"
-              {...props}
-          />
-        </Timeline.Detail>
-      </Timeline.Item>
-    </Timeline>
-  </div>
-)
-
-export default TimelineShowCurrentYear

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_show_current_year.md

@@ -1 +0,0 @@
-By default, the Timeline kit does NOT display the year if it is the current year. If you want to display the current year you can do so by setting `showCurrentYear`/`show_current_year` to true. Pass it to `Timeline.Item`/`timeline/item` when using its `date` prop, or to `Timeline.Label`/`timeline/label` if following the "With Children" pattern.

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.html.erb

@@ -1,30 +0,0 @@
-<% 
-options = [
-  { label: 'Orange', value: '#FFA500' },
-  { label: 'Red', value: '#FF0000' },
-  { label: 'Green', value: '#00FF00' },
-  { label: 'Blue', value: '#0000FF' },
-  { label: 'Yellow', value: '#FFFF00' },
-  { label: 'Purple', value: '#800080' },
-  { label: 'Cyan', value: '#00FFFF' },
-  { label: 'Magenta', value: '#FF00FF' }
-] 
-%>
-
-<%= pb_rails("typeahead", props: {
-    id: "typeahead-input-display-none",
-    label: "With Input Display None",
-    options: options,
-    name: :foo,
-    input_display: "none",
-    })
-%>
-<br/>
-<%= pb_rails("typeahead", props: {
-    id: "typeahead-input-display-pills",
-    label: "With Input Display Pills (Default)",
-    options: options,
-    name: :foo,
-    pills: true,
-    })
-%>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.jsx

@@ -1,37 +0,0 @@
-import React from 'react'
-
-import Typeahead from '../_typeahead'
-
-const options = [
-  { label: 'Orange', value: '#FFA500' },
-  { label: 'Red', value: '#FF0000' },
-  { label: 'Green', value: '#00FF00' },
-  { label: 'Blue', value: '#0000FF' },
-  { label: 'Yellow', value: '#FFFF00' },
-  { label: 'Purple', value: '#800080' },
-  { label: 'Cyan', value: '#00FFFF' },
-  { label: 'Magenta', value: '#FF00FF' }
-]
-
-const TypeaheadInputDisplay = (props) => {
-  return (
-    <>
-      <Typeahead
-          inputDisplay="none"
-          isMulti
-          label="With Input Display None"
-          options={options}
-          {...props}
-      />
-      <br/>
-      <Typeahead
-          isMulti
-          label="With Input Display Pills (Default)"
-          options={options}
-          {...props}
-      />
-    </>
-  )
-}
-
-export default TypeaheadInputDisplay

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.md

@@ -1,3 +0,0 @@
-Use the `inputDisplay`/`input_display` prop to optionally display only the count in the display as opposed to multiple pills. This prop is set to 'pills' by default. 
-
-**NOTE**: `inputDisplay`/`input_display` should only be used with typeaheads that allow multi selection.

data/app/pb_kits/playbook/utilities/deprecated.ts

@@ -1,73 +0,0 @@
-/**
- * Tracks which deprecated kits have already logged warnings in this session
- * to ensure we only log once per page load per kit
- */
-const warnedKits = new Set<string>();
-
-/**
- * Logs a deprecation warning for a Playbook kit
- * - Only logs once per kit per page load (prevents spam on re-renders)
- * - Only logs in development mode (not in production or test environments)
- * 
- * @param kitName - The name of the deprecated kit (e.g., 'BarGraph', 'RichTextEditor')
- * @param message - Optional custom deprecation message. If not provided, uses a default message.
- * 
- * @example
- * // In your kit component:
- * useEffect(() => {
- *   deprecatedKitWarning('BarGraph');
- * }, []);
- */
-export const deprecatedKitWarning = (
-  kitName: string,
-  message?: string
-): void => {
-  // Skip in test environments (Jest sets NODE_ENV to 'test')
-  if (typeof process !== 'undefined' && process.env?.NODE_ENV === 'test') {
-    return;
-  }
-
-  // In browser environments, check if we're on localhost/dev
-  if (typeof window !== 'undefined') {
-    const hostname = window.location?.hostname;
-    const isLocalDev = hostname === 'localhost' || 
-                       hostname === '127.0.0.1' ||
-                       hostname?.endsWith('.local') ||
-                       hostname?.includes('local.') ||
-                       !hostname; // file:// protocol
-    
-    // Only show warnings in local development
-    if (!isLocalDev) {
-      return;
-    }
-  }
-
-  // Only warn once per kit per page load
-  if (warnedKits.has(kitName)) {
-    return;
-  }
-
-  // Mark this kit as warned
-  warnedKits.add(kitName);
-
-  // Build the warning message
-  const baseMessage = `PLAYBOOK DEPRECATION WARNING
-  ----------------------------
-  The "${kitName}" kit is deprecated and will be removed in a future version.`;
-  
-  const fullMessage = message 
-    ? `${baseMessage} ${message}`
-    : `${baseMessage} Please migrate to the recommended alternative
- 
-  `;
-  
-  console.warn(fullMessage);
-};
-
-/**
- * Resets the warned kits tracker (useful for testing)
- * @internal
- */
-export const resetDeprecationWarnings = (): void => {
-  warnedKits.clear();
-};