playbook_ui_docs 14.15.0.pre.alpha.play1757pbcontenttag6644 → 14.15.0.pre.alpha.play1854reacthookmultilvlselect6572

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 14.15.0.pre.alpha.play1757pbcontenttag6644
+  version: 14.15.0.pre.alpha.play1854reacthookmultilvlselect6572
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-03-12 00:00:00.000000000 Z
+date: 2025-03-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -59,8 +59,6 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_infinite_scroll.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.html.erb
@@ -2095,9 +2093,9 @@ files:
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay.md
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay_rails.html.erb
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay_rails.md
+- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.erb
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.jsx
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.md
-- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon_rails.html.erb
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.html.erb
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.jsx
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.md
@@ -2152,8 +2150,6 @@ files:
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.html.erb
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.jsx
-- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.jsx
-- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.md
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.html.erb
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.md

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.jsx

@@ -1,102 +0,0 @@
-import React, { useState } from "react";
-import { AdvancedTable, TextInput, Body } from "playbook-ui";
-import MOCK_DATA from "./advanced_table_mock_data.json";
-
-const AdvancedTableInlineEditing = (props) => {
-  const [editedValues, setEditedValues] = useState({});
-
-  const EditableCell = ({ rowId, originalValue, onSave }) => {
-    const [localValue, setLocalValue] = useState(originalValue);
-
-    const handleChange = (e) => setLocalValue(e.target.value);
-
-    const handleBlur = () => {
-      originalValue !== localValue && onSave(rowId, localValue);
-    };
-
-    return (
-      <TextInput inline
-          marginBottom="none"
-          {...props}
-      >
-        <input 
-            onBlur={handleBlur} 
-            onChange={handleChange} 
-            onKeyDown={(e) => e.key === 'Enter' && handleBlur()}
-            value={localValue} 
-        />
-      </TextInput>
-    );
-  };
-
-  const columnDefinitions = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-      editable: true,
-      customRenderer: (row) => {
-        return (
-          <EditableCell
-              onSave={(id, val) => {
-                setEditedValues((prev) => ({ ...prev, [id]: val }));
-              }}
-              originalValue={
-                editedValues[row.id] ?? row.original.scheduledMeetings
-              }
-              rowId={row.id}
-          />
-        );
-      },
-    },
-    {
-      accessor: "attendanceRate",
-      label: "Attendance Rate",
-    },
-    {
-      accessor: "completedClasses",
-      label: "Completed Classes",
-    },
-    {
-      accessor: "classCompletionRate",
-      label: "Class Completion Rate",
-    },
-    {
-      accessor: "graduatedStudents",
-      label: "Graduated Students",
-    },
-  ];
-
-  return (
-    <div className="App">
-      <AdvancedTable
-          columnDefinitions={columnDefinitions}
-          tableData={MOCK_DATA}
-          {...props}
-      />
-      {
-        editedValues && Object.keys(editedValues).length > 0 && (
-          <>
-            <Body 
-                marginTop="md"
-                {...props}
-            >
-              Edited Values by Row Id:
-            </Body>
-            <pre style={{color: 'white'}}>{JSON.stringify(editedValues, null, 2)}</pre>
-          </>
-        )
-      }
-    </div>
-  );
-};
-
-export default AdvancedTableInlineEditing;

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.md

@@ -1,4 +0,0 @@
-Inline Cell Editing can be achieved with a combination of our `TextInput` kit and the `customRenderer` method available through columnDefinitions. 
-
-Hover over any cell within the 'Scheduled Meetings' column to see the TextInput and type in to change values. Values can be saved by clicking away from the TextInput or by hitting 'Enter'.
-See the code snippet below to see how this was achieved. Devs must manage state themselves as shown.

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon_rails.html.erb

@@ -1,22 +0,0 @@
-<%= pb_rails "flex", props: { flex_direction: "row", gap: "md", wrap: true } do %>
-  <%= pb_rails "button", props: { id: "tool-tip-with-icon-1", text: "Tooltip With Icon" } %>
-  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-1", tooltip_id: "tool-tip-with-icon-1", position: "top" } do %>
-    <%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
-    Send Email
-  <% end %>
-  <%= pb_rails "button", props: { id: "tool-tip-with-icon-2", text: "Tooltip With Icon" } %>
-  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-2", tooltip_id: "tool-tip-with-icon-2", position: "bottom" } do %>
-    <%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
-    Send Email
-  <% end %>
-  <%= pb_rails "button", props: { id: "tool-tip-with-icon-3", text: "Tooltip With Icon" } %>
-  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-3", tooltip_id: "tool-tip-with-icon-3", position: "left" } do %>
-    <%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
-    Send Email
-  <% end %>
-  <%= pb_rails "button", props: { id: "tool-tip-with-icon-4", text: "Tooltip With Icon" } %>
-  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-4", tooltip_id: "tool-tip-with-icon-4", position: "right" } do %>
-    <%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
-    Send Email
-  <% end %>
-<% end %>

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

@@ -1,66 +0,0 @@
-import React from 'react'
-
-import { Typeahead, Title } from 'playbook-ui'
-import { useForm } from 'react-hook-form'
-
-const languages = [
-  { label: 'JavaScript', value: '1995', category: 'Web Development' },
-  { label: 'Python', value: '1991', category: 'General Purpose' },
-  { label: 'Java', value: '1995', category: 'Enterprise' },
-  { label: 'C++', value: '1985', category: 'Systems Programming' },
-  { label: 'Go', value: '2009', category: 'Systems Programming' },
-  { label: 'Rust', value: '2010', category: 'Systems Programming' },
-  { label: 'Swift', value: '2014', category: 'Mobile Development' },
-  { label: 'Kotlin', value: '2011', category: 'Mobile Development' },
-  { label: 'Ruby', value: '1995', category: 'General Purpose' },
-  { label: 'PHP', value: '1995', category: 'Web Development' },
-]
-
-const colors = [
-  { label: 'Orange', value: '#FFA500' },
-  { label: 'Red', value: '#FF0000' },
-  { label: 'Green', value: '#00FF00' },
-  { label: 'Blue', value: '#0000FF' },
-]
-
-const TypeaheadReactHook = (props) => {
-  const { register, watch } = useForm()
-
-  const selectedLanguages = watch('languages')
-  const selectedColor = watch('color')
-
-  return (
-    <>
-      <Typeahead
-          isMulti
-          label="Multi Select Languages"
-          multiKit="language"
-          options={languages}
-          {...props}
-          {...register('languages')}
-      />
-      <Title 
-          size={4} 
-          text='Selected Languages' 
-      />
-      {selectedLanguages && selectedLanguages.map(language => (
-        <p key={language.label}>{`${language.label} - ${language.value} - ${language.category}`}</p>
-      ))}
-
-      <Typeahead
-          label="Colors"
-          marginTop="lg"
-          options={colors}
-          {...props}
-          {...register('color')}
-      />
-      <Title 
-          size={4} 
-          text='Selected Color' 
-      />
-      <p>{ selectedColor && `${selectedColor.label} - ${selectedColor.value}`}</p>
-    </>
-  )
-}
-
-export default TypeaheadReactHook

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

@@ -1 +0,0 @@
-You can pass `react-hook-form` props to the Typeahead kit.