playbook_ui_docs 14.1.0.pre.alpha.PLAY15063617 → 14.1.0.pre.alpha.fixaction3547

Sign up to get free protection for your applications and to get access to all the features.
Files changed (25) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_badge/docs/_badge_notification.html.erb +0 -13
  3. data/app/pb_kits/playbook/pb_badge/docs/_badge_notification.jsx +12 -31
  4. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx +5 -1
  5. data/app/pb_kits/playbook/pb_dialog/docs/example.yml +0 -1
  6. data/app/pb_kits/playbook/pb_dialog/docs/index.js +0 -1
  7. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +0 -1
  8. data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +2 -2
  9. data/app/pb_kits/playbook/pb_pagination/docs/example.yml +1 -3
  10. data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +0 -1
  11. data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js +1 -2
  12. data/dist/playbook-doc.js +1 -1
  13. metadata +3 -14
  14. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.jsx +0 -46
  15. data/app/pb_kits/playbook/pb_gantt_chart/docs/_gantt_chart_default.jsx +0 -53
  16. data/app/pb_kits/playbook/pb_gantt_chart/docs/example.yml +0 -7
  17. data/app/pb_kits/playbook/pb_gantt_chart/docs/index.js +0 -1
  18. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.jsx +0 -19
  19. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default_react.md +0 -1
  20. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx +0 -62
  21. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change_react.md +0 -1
  22. data/app/pb_kits/playbook/pb_pagination/docs/data.js +0 -23
  23. data/app/pb_kits/playbook/pb_pagination/docs/index.js +0 -2
  24. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_preview.jsx +0 -73
  25. /data/app/pb_kits/playbook/pb_pagination/docs/{_pagination_default_rails.md → _pagination_default.md} +0 -0
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.1.0.pre.alpha.PLAY15063617
4
+ version: 14.1.0.pre.alpha.fixaction3547
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: 2024-08-28 00:00:00.000000000 Z
12
+ date: 2024-08-21 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: playbook_ui
@@ -605,7 +605,6 @@ files:
605
605
  - app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.html.erb
606
606
  - app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx
607
607
  - app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.md
608
- - app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.jsx
609
608
  - app/pb_kits/playbook/pb_dialog/docs/_dialog_props_swift.md
610
609
  - app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.html.erb
611
610
  - app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.jsx
@@ -823,9 +822,6 @@ files:
823
822
  - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.jsx
824
823
  - app/pb_kits/playbook/pb_form_pill/docs/example.yml
825
824
  - app/pb_kits/playbook/pb_form_pill/docs/index.js
826
- - app/pb_kits/playbook/pb_gantt_chart/docs/_gantt_chart_default.jsx
827
- - app/pb_kits/playbook/pb_gantt_chart/docs/example.yml
828
- - app/pb_kits/playbook/pb_gantt_chart/docs/index.js
829
825
  - app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.html.erb
830
826
  - app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.jsx
831
827
  - app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.md
@@ -1236,14 +1232,8 @@ files:
1236
1232
  - app/pb_kits/playbook/pb_overlay/docs/example.yml
1237
1233
  - app/pb_kits/playbook/pb_overlay/docs/index.js
1238
1234
  - app/pb_kits/playbook/pb_pagination/docs/_pagination_default.html.erb
1239
- - app/pb_kits/playbook/pb_pagination/docs/_pagination_default.jsx
1240
- - app/pb_kits/playbook/pb_pagination/docs/_pagination_default_rails.md
1241
- - app/pb_kits/playbook/pb_pagination/docs/_pagination_default_react.md
1242
- - app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx
1243
- - app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change_react.md
1244
- - app/pb_kits/playbook/pb_pagination/docs/data.js
1235
+ - app/pb_kits/playbook/pb_pagination/docs/_pagination_default.md
1245
1236
  - app/pb_kits/playbook/pb_pagination/docs/example.yml
1246
- - app/pb_kits/playbook/pb_pagination/docs/index.js
1247
1237
  - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.html.erb
1248
1238
  - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.jsx
1249
1239
  - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.md
@@ -1405,7 +1395,6 @@ files:
1405
1395
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_description.md
1406
1396
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_default.jsx
1407
1397
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_default.md
1408
- - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_preview.jsx
1409
1398
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.html.erb
1410
1399
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.jsx
1411
1400
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.html.erb
@@ -1,46 +0,0 @@
1
- import React, { useState } from 'react'
2
- import { Button, Dialog } from 'playbook-ui'
3
-
4
- const DialogLoading = () => {
5
- const [isOpen, setIsOpen] = useState(false)
6
- const close = () => {
7
- if (!isLoading) {
8
- setIsOpen(false)
9
- }
10
- }
11
- const open = () => setIsOpen(true)
12
- const [isLoading, setIsLoading] = useState(false)
13
- const submit = async () => {
14
- setIsLoading(true)
15
-
16
- try {
17
- await new Promise((r) => setTimeout(r, 3000))
18
- setIsOpen(false)
19
- } catch (error) {
20
- console.error("An error occurred.")
21
- } finally {
22
- setIsLoading(false)
23
- }
24
- }
25
-
26
- return (
27
- <>
28
- <Button onClick={open}>{'Open Dialog'}</Button>
29
- <Dialog
30
- cancelButton="Cancel"
31
- className="wrapper"
32
- confirmButton="Okay"
33
- loading={isLoading}
34
- onCancel={close}
35
- onClose={close}
36
- onConfirm={submit}
37
- opened={isOpen}
38
- size="sm"
39
- text="Make a 3 second request?"
40
- title="Loading Example"
41
- />
42
- </>
43
- )
44
- }
45
-
46
- export default DialogLoading
@@ -1,53 +0,0 @@
1
- import React from "react";
2
- import { GanttChart } from "playbook-ui";
3
-
4
- const mockOptions = {
5
- title: {
6
- text: "Simple Gantt Chart",
7
- },
8
-
9
- xAxis: [
10
- {
11
- min: Date.UTC(2014, 10, 17),
12
- max: Date.UTC(2014, 10, 30),
13
- },
14
- ],
15
-
16
- series: [
17
- {
18
- name: "Project 1",
19
- data: [
20
- {
21
- name: "Start prototype",
22
- start: Date.UTC(2014, 10, 18),
23
- end: Date.UTC(2014, 10, 25),
24
- },
25
- {
26
- name: "Develop",
27
- start: Date.UTC(2014, 10, 20),
28
- end: Date.UTC(2014, 10, 25),
29
- },
30
- {
31
- name: "Run acceptance tests",
32
- start: Date.UTC(2014, 10, 23),
33
- end: Date.UTC(2014, 10, 26),
34
- },
35
- {
36
- name: "Test prototype",
37
- start: Date.UTC(2014, 10, 27),
38
- end: Date.UTC(2014, 10, 29),
39
- },
40
- ],
41
- },
42
- ],
43
- };
44
-
45
- const GanttChartDefault = (props) => (
46
- <div>
47
- <GanttChart customOptions={mockOptions}
48
- {...props}
49
- />
50
- </div>
51
- );
52
-
53
- export default GanttChartDefault;
@@ -1,7 +0,0 @@
1
- examples:
2
-
3
-
4
- react:
5
- - gantt_chart_default: Default
6
-
7
-
@@ -1 +0,0 @@
1
- export { default as GanttChartDefault } from './_gantt_chart_default.jsx'
@@ -1,19 +0,0 @@
1
- import React from 'react'
2
-
3
- import Pagination from '../_pagination'
4
-
5
- const PaginationDefault = (props) => {
6
-
7
- return (
8
- <>
9
- <Pagination
10
- current={1}
11
- range={5}
12
- total={10}
13
- {...props}
14
- />
15
- </>
16
- )
17
- }
18
-
19
- export default PaginationDefault
@@ -1 +0,0 @@
1
- The `range` prop determines how many pages to display in the Pagination component. Regardless of this value, the first two and last two pages are always visible to facilitate navigation to the beginning and end of the pagination. If these always-visible pages fall within the specified range, they are included in the display. If they fall outside the range, the pagination will show additional pages up to the number defined by the `range` prop.
@@ -1,62 +0,0 @@
1
- import React, { useState } from "react";
2
- import { Table, Pagination } from 'playbook-ui'
3
-
4
-
5
- import { data } from "./data";
6
-
7
- const PaginationPageChange = (props) => {
8
-
9
- const [activePage, setActivePage] = useState(1);
10
- const rowsPerPage = 3;
11
- const totalPages = Math.ceil(data.length / rowsPerPage);
12
-
13
- const onPageChange = (pageNumber) => {
14
- setActivePage(pageNumber);
15
- };
16
-
17
- const currentData = data.slice(
18
- (activePage - 1) * rowsPerPage,
19
- activePage * rowsPerPage
20
- );
21
-
22
-
23
- return (
24
- <div className="App">
25
- <Table
26
- marginBottom="xs"
27
- responsive="none"
28
- size="sm"
29
- {...props}
30
- >
31
- <Table.Head>
32
- <Table.Row>
33
- <Table.Header>{"Column 1"}</Table.Header>
34
- <Table.Header>{"Column 2"}</Table.Header>
35
- <Table.Header>{"Column 3"}</Table.Header>
36
- <Table.Header>{"Column 4"}</Table.Header>
37
- <Table.Header>{"Column 5"}</Table.Header>
38
- </Table.Row>
39
- </Table.Head>
40
- <Table.Body>
41
- {currentData.map((row, index) => (
42
- <Table.Row key={index}>
43
- {row.map((cell, cellIndex) => (
44
- <Table.Cell key={cellIndex}>{cell}</Table.Cell>
45
- ))}
46
- </Table.Row>
47
- ))}
48
- </Table.Body>
49
- </Table>
50
-
51
- <Pagination
52
- current={1}
53
- onChange={onPageChange}
54
- range={5}
55
- total={totalPages}
56
- {...props}
57
- />
58
- </div>
59
- )
60
- }
61
-
62
- export default PaginationPageChange
@@ -1 +0,0 @@
1
- You can use the `onChange` prop to control the data of your table. This prop is callback function that will allow you control the state.
@@ -1,23 +0,0 @@
1
- export const data = [
2
- ["Value 1", "Value 2", "Value 3", "Value 4", "Value 5"],
3
- ["Value 6", "Value 7", "Value 8", "Value 9", "Value 10"],
4
- ["Value 11", "Value 12", "Value 13", "Value 14", "Value 15"],
5
- ["Value 16", "Value 17", "Value 18", "Value 19", "Value 20"],
6
- ["Value 21", "Value 22", "Value 23", "Value 24", "Value 25"],
7
- ["Value 26", "Value 27", "Value 28", "Value 29", "Value 30"],
8
- ["Value 31", "Value 32", "Value 33", "Value 34", "Value 35"],
9
- ["Value 36", "Value 37", "Value 38", "Value 39", "Value 40"],
10
- ["Value 41", "Value 42", "Value 43", "Value 44", "Value 45"],
11
- ["Value 46", "Value 47", "Value 48", "Value 49", "Value 50"],
12
- ["Value 51", "Value 52", "Value 53", "Value 54", "Value 55"],
13
- ["Value 56", "Value 57", "Value 58", "Value 59", "Value 60"],
14
- ["Value 61", "Value 62", "Value 63", "Value 64", "Value 65"],
15
- ["Value 66", "Value 67", "Value 68", "Value 69", "Value 70"],
16
- ["Value 71", "Value 72", "Value 73", "Value 74", "Value 75"],
17
- ["Value 76", "Value 77", "Value 78", "Value 79", "Value 80"],
18
- ["Value 81", "Value 82", "Value 83", "Value 84", "Value 85"],
19
- ["Value 86", "Value 87", "Value 88", "Value 89", "Value 90"],
20
- ["Value 91", "Value 92", "Value 93", "Value 94", "Value 95"],
21
- ["Value 96", "Value 97", "Value 98", "Value 99", "Value 100"],
22
- ];
23
-
@@ -1,2 +0,0 @@
1
- export { default as PaginationDefault } from './_pagination_default.jsx'
2
- export { default as PaginationPageChange } from './_pagination_page_change.jsx'
@@ -1,73 +0,0 @@
1
- import React, { useState } from 'react'
2
- import { Button, Card, RichTextEditor } from 'playbook-ui'
3
- import { useEditor, EditorContent } from "@tiptap/react"
4
- import StarterKit from "@tiptap/starter-kit"
5
- import Link from '@tiptap/extension-link'
6
-
7
-
8
- const RichTextEditorAdvancedPreview = (props) => {
9
-
10
- const editor = useEditor({
11
- extensions: [
12
- StarterKit,
13
- Link
14
- ],
15
- content: "Add text here, format it, and press \"Preview Output\" to see what your stylized output will look like on the page."
16
- })
17
-
18
- const [showPreview, setShowPreview] = useState(false)
19
- const [previewText, setPreviewText] = useState(<div />)
20
-
21
- const handleChange = () => {
22
- if (editor) {
23
- setPreviewText(editor.getHTML())
24
- }
25
- }
26
-
27
- const handleClick = () => {
28
- handleChange()
29
- setShowPreview(true)
30
- }
31
- if (!editor) {
32
- return null
33
- }
34
-
35
-
36
- return (
37
- <div>
38
- <RichTextEditor
39
- advancedEditor={editor}
40
- id="content-advanced-preview-editor"
41
- onChange={handleChange}
42
- {...props}
43
- >
44
- <EditorContent editor={editor}/>
45
- </RichTextEditor>
46
- {showPreview && (
47
- <Card
48
- marginTop="md"
49
- maxWidth="md"
50
- >
51
- <div
52
- className="tiptap-content"
53
- // eslint-disable-next-line react/no-danger
54
- dangerouslySetInnerHTML={{ __html: previewText }}
55
- id="advanced-preview-content"
56
- />
57
- </Card>
58
- )}
59
- {!showPreview && (
60
- <div />
61
- )}
62
- <Button
63
- id="preview-button"
64
- marginTop="md"
65
- onClick={handleClick}
66
- text="Preview Output"
67
- variant="secondary"
68
- />
69
- </div>
70
- )
71
- }
72
-
73
- export default RichTextEditorAdvancedPreview