playbook_ui_docs 14.15.0.pre.alpha.play1757pbcontenttag6677 → 14.15.0.pre.alpha.play1854reacthookmultilvlselect6572

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +1 -2
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +1 -2
  4. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +1 -1
  5. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -1
  6. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.md +1 -1
  7. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.html.erb +1 -1
  8. data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +1 -3
  9. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.erb +10 -0
  10. data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +0 -1
  11. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_custom_options.jsx +1 -1
  12. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx +1 -1
  13. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +0 -1
  14. data/app/pb_kits/playbook/pb_typeahead/docs/index.js +0 -1
  15. data/dist/playbook-doc.js +1 -1
  16. metadata +3 -9
  17. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.jsx +0 -102
  18. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.md +0 -4
  19. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_hidden_inputs.html.erb +0 -5
  20. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_hidden_inputs.md +0 -1
  21. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon_rails.html.erb +0 -22
  22. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.jsx +0 -66
  23. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.md +0 -1
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui_docs
3
3
  version: !ruby/object:Gem::Version
4
- version: 14.15.0.pre.alpha.play1757pbcontenttag6677
4
+ version: 14.15.0.pre.alpha.play1854reacthookmultilvlselect6572
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2025-03-13 00:00:00.000000000 Z
12
+ date: 2025-03-10 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: playbook_ui
@@ -59,8 +59,6 @@ files:
59
59
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx
60
60
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.md
61
61
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_infinite_scroll.jsx
62
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.jsx
63
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.md
64
62
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.jsx
65
63
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.md
66
64
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.html.erb
@@ -1473,8 +1471,6 @@ files:
1473
1471
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.html.erb
1474
1472
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.jsx
1475
1473
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.md
1476
- - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_hidden_inputs.html.erb
1477
- - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_hidden_inputs.md
1478
1474
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.html.erb
1479
1475
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.jsx
1480
1476
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.md
@@ -2097,9 +2093,9 @@ files:
2097
2093
  - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay.md
2098
2094
  - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay_rails.html.erb
2099
2095
  - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay_rails.md
2096
+ - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.erb
2100
2097
  - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.jsx
2101
2098
  - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.md
2102
- - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon_rails.html.erb
2103
2099
  - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.html.erb
2104
2100
  - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.jsx
2105
2101
  - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.md
@@ -2154,8 +2150,6 @@ files:
2154
2150
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.jsx
2155
2151
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.html.erb
2156
2152
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.jsx
2157
- - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.jsx
2158
- - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.md
2159
2153
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.html.erb
2160
2154
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.jsx
2161
2155
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.md
@@ -1,102 +0,0 @@
1
- import React, { useState } from "react";
2
- import { AdvancedTable, TextInput, Body } from "playbook-ui";
3
- import MOCK_DATA from "./advanced_table_mock_data.json";
4
-
5
- const AdvancedTableInlineEditing = (props) => {
6
- const [editedValues, setEditedValues] = useState({});
7
-
8
- const EditableCell = ({ rowId, originalValue, onSave }) => {
9
- const [localValue, setLocalValue] = useState(originalValue);
10
-
11
- const handleChange = (e) => setLocalValue(e.target.value);
12
-
13
- const handleBlur = () => {
14
- originalValue !== localValue && onSave(rowId, localValue);
15
- };
16
-
17
- return (
18
- <TextInput inline
19
- marginBottom="none"
20
- {...props}
21
- >
22
- <input
23
- onBlur={handleBlur}
24
- onChange={handleChange}
25
- onKeyDown={(e) => e.key === 'Enter' && handleBlur()}
26
- value={localValue}
27
- />
28
- </TextInput>
29
- );
30
- };
31
-
32
- const columnDefinitions = [
33
- {
34
- accessor: "year",
35
- label: "Year",
36
- cellAccessors: ["quarter", "month", "day"],
37
- },
38
- {
39
- accessor: "newEnrollments",
40
- label: "New Enrollments",
41
- },
42
- {
43
- accessor: "scheduledMeetings",
44
- label: "Scheduled Meetings",
45
- editable: true,
46
- customRenderer: (row) => {
47
- return (
48
- <EditableCell
49
- onSave={(id, val) => {
50
- setEditedValues((prev) => ({ ...prev, [id]: val }));
51
- }}
52
- originalValue={
53
- editedValues[row.id] ?? row.original.scheduledMeetings
54
- }
55
- rowId={row.id}
56
- />
57
- );
58
- },
59
- },
60
- {
61
- accessor: "attendanceRate",
62
- label: "Attendance Rate",
63
- },
64
- {
65
- accessor: "completedClasses",
66
- label: "Completed Classes",
67
- },
68
- {
69
- accessor: "classCompletionRate",
70
- label: "Class Completion Rate",
71
- },
72
- {
73
- accessor: "graduatedStudents",
74
- label: "Graduated Students",
75
- },
76
- ];
77
-
78
- return (
79
- <div className="App">
80
- <AdvancedTable
81
- columnDefinitions={columnDefinitions}
82
- tableData={MOCK_DATA}
83
- {...props}
84
- />
85
- {
86
- editedValues && Object.keys(editedValues).length > 0 && (
87
- <>
88
- <Body
89
- marginTop="md"
90
- {...props}
91
- >
92
- Edited Values by Row Id:
93
- </Body>
94
- <pre style={{color: 'white'}}>{JSON.stringify(editedValues, null, 2)}</pre>
95
- </>
96
- )
97
- }
98
- </div>
99
- );
100
- };
101
-
102
- export default AdvancedTableInlineEditing;
@@ -1,4 +0,0 @@
1
- Inline Cell Editing can be achieved with a combination of our `TextInput` kit and the `customRenderer` method available through columnDefinitions.
2
-
3
- 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'.
4
- See the code snippet below to see how this was achieved. Devs must manage state themselves as shown.
@@ -1,5 +0,0 @@
1
- <%= pb_rails("phone_number_input", props: {
2
- hidden_inputs: true,
3
- id: "hidden_inputs",
4
- name: "hidden_inputs",
5
- }) %>
@@ -1 +0,0 @@
1
- The `hidden_inputs` boolean prop generates two hidden input fields, {field_name}_full and {field_name}_country_code. The value passed when the form is submitted contains the full phone number including the country code. Because it requires the submission of a form to function, only use this prop on Rails phone number elements within html form tags `<form>/<form>` or [pb_forms](https://playbook.powerapp.cloud/kits/form). Read the [intl-tel-input](https://intl-tel-input.com/examples/hidden-input.html) docs for more information.
@@ -1,22 +0,0 @@
1
- <%= pb_rails "flex", props: { flex_direction: "row", gap: "md", wrap: true } do %>
2
- <%= pb_rails "button", props: { id: "tool-tip-with-icon-1", text: "Tooltip With Icon" } %>
3
- <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-1", tooltip_id: "tool-tip-with-icon-1", position: "top" } do %>
4
- <%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
5
- Send Email
6
- <% end %>
7
- <%= pb_rails "button", props: { id: "tool-tip-with-icon-2", text: "Tooltip With Icon" } %>
8
- <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-2", tooltip_id: "tool-tip-with-icon-2", position: "bottom" } do %>
9
- <%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
10
- Send Email
11
- <% end %>
12
- <%= pb_rails "button", props: { id: "tool-tip-with-icon-3", text: "Tooltip With Icon" } %>
13
- <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-3", tooltip_id: "tool-tip-with-icon-3", position: "left" } do %>
14
- <%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
15
- Send Email
16
- <% end %>
17
- <%= pb_rails "button", props: { id: "tool-tip-with-icon-4", text: "Tooltip With Icon" } %>
18
- <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-4", tooltip_id: "tool-tip-with-icon-4", position: "right" } do %>
19
- <%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
20
- Send Email
21
- <% end %>
22
- <% end %>
@@ -1,66 +0,0 @@
1
- import React from 'react'
2
-
3
- import { Typeahead, Title } from 'playbook-ui'
4
- import { useForm } from 'react-hook-form'
5
-
6
- const languages = [
7
- { label: 'JavaScript', value: '1995', category: 'Web Development' },
8
- { label: 'Python', value: '1991', category: 'General Purpose' },
9
- { label: 'Java', value: '1995', category: 'Enterprise' },
10
- { label: 'C++', value: '1985', category: 'Systems Programming' },
11
- { label: 'Go', value: '2009', category: 'Systems Programming' },
12
- { label: 'Rust', value: '2010', category: 'Systems Programming' },
13
- { label: 'Swift', value: '2014', category: 'Mobile Development' },
14
- { label: 'Kotlin', value: '2011', category: 'Mobile Development' },
15
- { label: 'Ruby', value: '1995', category: 'General Purpose' },
16
- { label: 'PHP', value: '1995', category: 'Web Development' },
17
- ]
18
-
19
- const colors = [
20
- { label: 'Orange', value: '#FFA500' },
21
- { label: 'Red', value: '#FF0000' },
22
- { label: 'Green', value: '#00FF00' },
23
- { label: 'Blue', value: '#0000FF' },
24
- ]
25
-
26
- const TypeaheadReactHook = (props) => {
27
- const { register, watch } = useForm()
28
-
29
- const selectedLanguages = watch('languages')
30
- const selectedColor = watch('color')
31
-
32
- return (
33
- <>
34
- <Typeahead
35
- isMulti
36
- label="Multi Select Languages"
37
- multiKit="language"
38
- options={languages}
39
- {...props}
40
- {...register('languages')}
41
- />
42
- <Title
43
- size={4}
44
- text='Selected Languages'
45
- />
46
- {selectedLanguages && selectedLanguages.map(language => (
47
- <p key={language.label}>{`${language.label} - ${language.value} - ${language.category}`}</p>
48
- ))}
49
-
50
- <Typeahead
51
- label="Colors"
52
- marginTop="lg"
53
- options={colors}
54
- {...props}
55
- {...register('color')}
56
- />
57
- <Title
58
- size={4}
59
- text='Selected Color'
60
- />
61
- <p>{ selectedColor && `${selectedColor.label} - ${selectedColor.value}`}</p>
62
- </>
63
- )
64
- }
65
-
66
- export default TypeaheadReactHook
@@ -1 +0,0 @@
1
- You can pass `react-hook-form` props to the Typeahead kit.