playbook_ui 13.16.0.pre.alpha.play1141iconkitusinglibrary2060 → 13.16.0.pre.alpha.play1141iconkitusinglibrary2100

Sign up to get free protection for your applications and to get access to all the features.
Files changed (42) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +14 -12
  3. data/app/pb_kits/playbook/index.js +2 -1
  4. data/app/pb_kits/playbook/pb_advanced_table/Components/CollapsibleTrail.tsx +30 -0
  5. data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx +62 -0
  6. data/app/pb_kits/playbook/pb_advanced_table/Components/LoadingCell.tsx +5 -0
  7. data/app/pb_kits/playbook/pb_advanced_table/Components/SortIconButton.tsx +30 -0
  8. data/app/pb_kits/playbook/pb_advanced_table/Components/SubRowHeaderRow.tsx +61 -0
  9. data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +128 -0
  10. data/app/pb_kits/playbook/pb_advanced_table/Components/ToggleIconButton.tsx +28 -0
  11. data/app/pb_kits/playbook/pb_advanced_table/Context/AdvancedTableContext.tsx +5 -0
  12. data/app/pb_kits/playbook/pb_advanced_table/README.md +288 -0
  13. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx +95 -0
  14. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx +51 -0
  15. data/app/pb_kits/playbook/pb_advanced_table/Utilities/BrowserCheck.tsx +5 -0
  16. data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx +63 -0
  17. data/app/pb_kits/playbook/pb_advanced_table/Utilities/IconHelpers.tsx +8 -0
  18. data/app/pb_kits/playbook/pb_advanced_table/Utilities/types.ts +8 -0
  19. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +98 -0
  20. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +245 -0
  21. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +56 -0
  22. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx +49 -0
  23. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md +13 -0
  24. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx +57 -0
  25. data/app/pb_kits/playbook/pb_advanced_table/docs/_description.md +1 -0
  26. data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data.js +278 -0
  27. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +6 -0
  28. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +2 -0
  29. data/app/pb_kits/playbook/pb_advanced_table/scss_partials/_loading.scss +71 -0
  30. data/app/pb_kits/playbook/pb_advanced_table/scss_partials/_pseudo_states.scss +12 -0
  31. data/app/pb_kits/playbook/pb_flex/_flex.tsx +1 -1
  32. data/app/pb_kits/playbook/pb_icon/_icon.scss +6 -48
  33. data/app/pb_kits/playbook/pb_icon/_icon.tsx +32 -91
  34. data/app/pb_kits/playbook/pb_icon/icon.rb +11 -20
  35. data/app/pb_kits/playbook/pb_nav/_nav_item.test.js +2 -2
  36. data/app/pb_kits/playbook/pb_table/_table.tsx +29 -29
  37. data/app/pb_kits/playbook/playbook-doc.js +2 -0
  38. data/app/pb_kits/playbook/utilities/globalProps.ts +1 -1
  39. data/dist/menu.yml +4 -1
  40. data/dist/playbook-rails.js +6 -6
  41. data/lib/playbook/version.rb +1 -1
  42. metadata +29 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: c35038cfd349294c386c785ca696338870b551bfb47e5889cec5e44a6233dc27
4
- data.tar.gz: 151eb7f0807953ea027f0cf63e43136116e49386a96cd8ed29d07e5a10808e80
3
+ metadata.gz: 406baf5e13cf91d0790a8d667fa7ff40347bdc8075ec388fb518eb0e21f1608b
4
+ data.tar.gz: 5ea634b8a6c31212491e5ddf01841193fb5b5ca2abadd45100cfa2c7ddc89202
5
5
  SHA512:
6
- metadata.gz: 1cd6a8f948a5310a1da9507e8c86837ecc2575f35e687286bee218ad69e267652be963559389326b6ab857b1e43df62d956568d286d56a8336d222bc8188ebf6
7
- data.tar.gz: 21c09b14ec1fc73db4f2f6bd34e0e2697b751e11e0e169aab5574c491203daea655169dc4b1bc02dbfc29875c47f23167f3d7a0435e0de1d5f8490d6a7cd5725
6
+ metadata.gz: df2ffbacc5eed998a241115546e2356ff7a28b4b92ace25f54576c30edeb0e71484872323bfbd7f7f59460e12b60960661fbcff545d16697457bdc03df41a254
7
+ data.tar.gz: 38b9fc21b95219edfb0b4ab51bd7aa565465b829915fa736edbdec568910eb87953a4b45964bd21d784a45eea0e5df2466c8c8004288584079cf7fa1c02bcb52
@@ -1,16 +1,17 @@
1
+
2
+
3
+ @import 'pb_advanced_table/advanced_table';
4
+ @import 'pb_avatar/avatar';
5
+ @import 'pb_avatar_action_button/avatar_action_button';
1
6
  @import 'pb_background/background';
7
+ @import 'pb_badge/badge';
8
+ @import 'pb_bar_graph/bar_graph';
2
9
  @import 'pb_body/body';
3
10
  @import 'pb_bread_crumbs/bread_crumbs';
4
11
  @import 'pb_button/button';
5
12
  @import 'pb_button_toolbar/button_toolbar';
6
13
  @import 'pb_caption/caption';
7
14
  @import 'pb_card/card';
8
- @import 'pb_detail/detail';
9
- @import 'pb_title/title';
10
- @import 'pb_avatar/avatar';
11
- @import 'pb_avatar_action_button/avatar_action_button';
12
- @import 'pb_badge/badge';
13
- @import 'pb_bar_graph/bar_graph';
14
15
  @import 'pb_checkbox/checkbox';
15
16
  @import 'pb_circle_chart/circle_chart';
16
17
  @import 'pb_circle_icon_button/circle_icon_button';
@@ -20,21 +21,22 @@
20
21
  @import 'pb_dashboard_value/dashboard_value';
21
22
  @import 'pb_date/date';
22
23
  @import 'pb_date_picker/date_picker';
23
- @import 'pb_date_time/date_time';
24
24
  @import 'pb_date_range_inline/date_range_inline';
25
25
  @import 'pb_date_range_stacked/date_range_stacked';
26
26
  @import 'pb_date_stacked/date_stacked';
27
+ @import 'pb_date_time/date_time';
27
28
  @import 'pb_date_time_stacked/date_time_stacked';
28
29
  @import 'pb_date_year_stacked/date_year_stacked';
30
+ @import 'pb_detail/detail';
29
31
  @import 'pb_dialog/dialog';
30
32
  @import 'pb_distribution_bar/distribution_bar';
31
33
  @import 'pb_file_upload/file_upload';
32
34
  @import 'pb_filter/filter';
33
35
  @import 'pb_fixed_confirmation_toast/fixed_confirmation_toast';
36
+ @import 'pb_flex/flex';
34
37
  @import 'pb_form/form';
35
38
  @import 'pb_form_group/form_group';
36
39
  @import 'pb_form_pill/form_pill';
37
- @import 'pb_flex/flex';
38
40
  @import 'pb_gauge/gauge';
39
41
  @import 'pb_hashtag/hashtag';
40
42
  @import 'pb_highlight/highlight';
@@ -55,6 +57,7 @@
55
57
  @import 'pb_map/map';
56
58
  @import 'pb_map/pb_map_button_mixin';
57
59
  @import 'pb_message/message';
60
+ @import 'pb_multi_level_select/multi_level_select';
58
61
  @import 'pb_multiple_users/multiple_users';
59
62
  @import 'pb_multiple_users_stacked/multiple_users_stacked';
60
63
  @import 'pb_nav/nav';
@@ -85,9 +88,11 @@
85
88
  @import 'pb_text_input/text_input';
86
89
  @import 'pb_textarea/textarea';
87
90
  @import 'pb_time/time';
88
- @import 'pb_timeline/timeline';
89
91
  @import 'pb_time_range_inline/time_range_inline';
92
+ @import 'pb_time_stacked/time_stacked';
93
+ @import 'pb_timeline/timeline';
90
94
  @import 'pb_timestamp/timestamp';
95
+ @import 'pb_title/title';
91
96
  @import 'pb_title_count/title_count';
92
97
  @import 'pb_title_detail/title_detail';
93
98
  @import 'pb_toggle/toggle';
@@ -96,7 +101,6 @@
96
101
  @import 'pb_typeahead/typeahead';
97
102
  @import 'pb_user/user';
98
103
  @import 'pb_user_badge/user_badge';
99
- @import 'pb_time_stacked/time_stacked';
100
104
  @import 'pb_walkthrough/walkthrough';
101
105
  @import 'pb_weekday_stacked/weekday_stacked';
102
106
  @import './utilities/mixins';
@@ -115,5 +119,3 @@
115
119
  @import './utilities/text_align';
116
120
  @import './utilities/overflow';
117
121
  @import './utilities/truncate';
118
-
119
- @import 'pb_multi_level_select/multi_level_select';
@@ -4,6 +4,7 @@ import 'lazysizes/plugins/attrchange/ls.attrchange'
4
4
  import 'lazysizes'
5
5
 
6
6
  // vvv React Component JSX Imports from the React Kits vvv
7
+ export { default as AdvancedTable} from './pb_advanced_table/_advanced_table'
7
8
  export { default as Avatar } from './pb_avatar/_avatar'
8
9
  export { default as AvatarActionButton } from './pb_avatar_action_button/_avatar_action_button'
9
10
  export { default as Background } from './pb_background/_background'
@@ -59,8 +60,8 @@ export { default as LineGraph } from './pb_line_graph/_line_graph'
59
60
  export { default as List } from './pb_list/_list'
60
61
  export { default as ListItem } from './pb_list/_list_item'
61
62
  export { default as LoadingInline } from './pb_loading_inline/_loading_inline'
62
- export { default as Map} from './pb_map/_map'
63
63
  export { default as MapCustomButton } from './pb_map/_map_custom_button'
64
+ export { default as Map} from './pb_map/_map'
64
65
  export { default as Message } from './pb_message/_message'
65
66
  export { default as MultiLevelSelect} from './pb_multi_level_select/_multi_level_select'
66
67
  export { default as MultipleUsers } from './pb_multiple_users/_multiple_users'
@@ -0,0 +1,30 @@
1
+ import React from "react"
2
+
3
+ //CollapsibleTrail component
4
+ const CollapsibleTrail = ({ leftOffset }: { leftOffset: number }) => {
5
+ const style: { [key: string]: string | number } = {
6
+ position: "absolute",
7
+ left: `${leftOffset}em`,
8
+ top: 0,
9
+ bottom: 0,
10
+ width: "2px",
11
+ backgroundColor: "#E4E8F0",
12
+ }
13
+
14
+ return <div style={style} />
15
+ }
16
+
17
+ // Updated function to render multiple trails depending on depth
18
+ export const renderCollapsibleTrail = (currentDepth: number) => {
19
+ const lines = []
20
+ for (let i = 1; i <= currentDepth; i++) {
21
+ // Calculate leftOffset with additional 0.4rem for each depth level above 1
22
+ const additionalOffset = i > 1 ? (i - 1) * 0.25 : 0
23
+ const leftOffset = i * 1.0 + additionalOffset
24
+ lines.push(<CollapsibleTrail key={i}
25
+ leftOffset={leftOffset}
26
+ />
27
+ )
28
+ }
29
+ return lines
30
+ }
@@ -0,0 +1,62 @@
1
+ import React, { useContext } from "react";
2
+
3
+ import Flex from "../../pb_flex/_flex";
4
+ import FlexItem from "../../pb_flex/_flex_item";
5
+ import Icon from "../../pb_icon/_icon";
6
+ import { GlobalProps } from "../../utilities/globalProps";
7
+
8
+ import { Getter, Row } from "@tanstack/react-table";
9
+ import { DataType } from "../Utilities/types";
10
+ import AdvancedTableContext from "../Context/AdvancedTableContext";
11
+
12
+ interface CustomCellProps {
13
+ getValue?: Getter<string>;
14
+ onRowToggleClick?: (arg: Row<DataType>) => void;
15
+ row: Row<DataType>;
16
+ value?: string;
17
+ }
18
+
19
+ export const CustomCell = ({
20
+ getValue,
21
+ onRowToggleClick,
22
+ row,
23
+ value,
24
+ }: CustomCellProps & GlobalProps) => {
25
+ const { setExpanded, expanded } = useContext(AdvancedTableContext);
26
+ const RowWithoutChildren = row.originalSubRows === undefined;
27
+
28
+ const handleOnExpand = (row: Row<DataType>) => {
29
+ onRowToggleClick && onRowToggleClick(row);
30
+ setExpanded({ ...expanded, [row.id]: !row.getIsExpanded() });
31
+ };
32
+
33
+ return (
34
+ <div style={{ paddingLeft: `${row.depth * 1.25}em` }}>
35
+ <Flex alignItems="center"
36
+ columnGap="xs"
37
+ orientation="row"
38
+ >
39
+ {!RowWithoutChildren ? (
40
+ <button
41
+ className="gray-icon expand-toggle-icon"
42
+ onClick={() => handleOnExpand(row)}
43
+ >
44
+ {row.getIsExpanded() ? (
45
+ <Icon cursor="pointer"
46
+ icon="circle-play"
47
+ rotation={90}
48
+ />
49
+ ) : (
50
+ <Icon cursor="pointer"
51
+ icon="circle-play"
52
+ />
53
+ )}
54
+ </button>
55
+ ) : null}
56
+ <FlexItem paddingLeft={!RowWithoutChildren ? "none" : "xs"}>
57
+ {row.depth === 0 ? getValue() : value}
58
+ </FlexItem>
59
+ </Flex>
60
+ </div>
61
+ );
62
+ };
@@ -0,0 +1,5 @@
1
+ import React from "react"
2
+
3
+ export const LoadingCell = () => {
4
+ return <div className="loading-cell" />
5
+ }
@@ -0,0 +1,30 @@
1
+ import React from "react"
2
+ import Icon from "../../pb_icon/_icon"
3
+ import { Header } from "@tanstack/react-table"
4
+ import { DataType } from "../Utilities/types"
5
+ import { displayIcon } from "../Utilities/IconHelpers"
6
+
7
+ type SortIconButtonProps = {
8
+ header: Header<DataType, unknown>
9
+ sortIcon?: string | string[]
10
+ }
11
+ export const SortIconButton = ({ header, sortIcon }: SortIconButtonProps) => {
12
+
13
+ return (
14
+ <>
15
+ {header.column.getIsSorted() === "desc" ? (
16
+ <div className="sort-button-icon"
17
+ key={displayIcon(sortIcon)[0]}
18
+ >
19
+ <Icon icon={displayIcon(sortIcon)[0]} />
20
+ </div>
21
+ ) : (
22
+ <div className="sort-button-icon"
23
+ key={displayIcon(sortIcon)[1]}
24
+ >
25
+ <Icon icon={displayIcon(sortIcon)[1]} />
26
+ </div>
27
+ )}
28
+ </>
29
+ )
30
+ }
@@ -0,0 +1,61 @@
1
+ import React from "react"
2
+ import Flex from "../../pb_flex/_flex"
3
+ import Caption from "../../pb_caption/_caption"
4
+ import { Row, Table } from "@tanstack/react-table"
5
+
6
+ import { ToggleIconButton } from "./ToggleIconButton"
7
+ import { renderCollapsibleTrail } from "./CollapsibleTrail"
8
+
9
+ import { isChrome } from "../Utilities/BrowserCheck"
10
+ import { DataType } from "../Utilities/types"
11
+ import { GlobalProps } from "../../utilities/globalProps"
12
+
13
+ interface SubRowHeaderRowProps {
14
+ collapsibleTrail?: boolean
15
+ enableToggleExpansion?: "all" | "header"
16
+ onClick: (row: Row<DataType>) => void
17
+ row: Row<DataType>
18
+ subRowHeaders?: string[]
19
+ table: Table<DataType>
20
+ }
21
+
22
+ export const SubRowHeaderRow = ({
23
+ collapsibleTrail,
24
+ enableToggleExpansion,
25
+ onClick,
26
+ row,
27
+ subRowHeaders,
28
+ table,
29
+ }: SubRowHeaderRowProps & GlobalProps) => {
30
+ const numberOfColumns = table.getAllFlatColumns().length
31
+
32
+ return (
33
+ <tr className="custom-row bg-silver">
34
+ <td
35
+ className={`custom-row-first-column ${
36
+ isChrome() ? "chrome-styles" : ""
37
+ }`}
38
+ colSpan={1}
39
+ >
40
+ {collapsibleTrail && row.depth > 0 && renderCollapsibleTrail(row.depth)}
41
+ <div style={{ paddingLeft: `${row.depth * 1.25}em` }}>
42
+ <Flex align="center"
43
+ columnGap="xs"
44
+ >
45
+ {enableToggleExpansion === "all" && row.getCanExpand() ? (
46
+ <ToggleIconButton onClick={onClick}
47
+ row={row}
48
+ />
49
+ ) : null}
50
+ <Caption
51
+ marginLeft={row.getCanExpand() ? "none" : "xs"}
52
+ text={subRowHeaders[row.depth - 1]}
53
+ />
54
+ </Flex>
55
+ </div>
56
+ </td>
57
+
58
+ <td colSpan={numberOfColumns - 1} />
59
+ </tr>
60
+ )
61
+ }
@@ -0,0 +1,128 @@
1
+ import React, { useContext } from "react"
2
+ import classnames from "classnames";
3
+ import Flex from "../../pb_flex/_flex"
4
+ import { flexRender, Header } from "@tanstack/react-table"
5
+
6
+ import { SortIconButton } from "./SortIconButton"
7
+ import { ToggleIconButton } from "./ToggleIconButton"
8
+ import { isChrome } from "../Utilities/BrowserCheck"
9
+ import { DataType } from "../Utilities/types"
10
+ import AdvancedTableContext from "../Context/AdvancedTableContext"
11
+ import { GlobalProps } from "../../utilities/globalProps"
12
+
13
+ type TableHeaderCellProps = {
14
+ enableSorting?: boolean
15
+ enableToggleExpansion?: "all" | "header"
16
+ handleExpandOrCollapse?: () => void
17
+ header?: Header<DataType, unknown>
18
+ headerChildren?: React.ReactNode | React.ReactNode[]
19
+ headerId?: string
20
+ loading?: boolean
21
+ sortIcon?: string | string[]
22
+ } & GlobalProps
23
+
24
+ export const TableHeaderCell = ({
25
+ enableSorting,
26
+ enableToggleExpansion,
27
+ handleExpandOrCollapse,
28
+ header,
29
+ headerChildren,
30
+ headerId,
31
+ loading,
32
+ sortIcon,
33
+ }: TableHeaderCellProps) => {
34
+ const { sortControl } = useContext(AdvancedTableContext)
35
+
36
+ const toggleSortButton = (event: React.SyntheticEvent) => {
37
+ if (sortControl) {
38
+ const sortIsDesc = header.column.getIsSorted() === "desc"
39
+ sortIsDesc
40
+ ? sortControl.onChange({ desc: true })
41
+ : sortControl.onChange({ desc: false })
42
+ } else {
43
+ header.column.getToggleSortingHandler()(event)
44
+ }
45
+ }
46
+
47
+ const cellClassName = classnames("table-header-cells",
48
+ `${isChrome() ? "chrome-styles" : ""}`,
49
+ `${enableSorting ? "table-header-cells-active" : ""}`
50
+ );
51
+
52
+ const cellId = `${loading ?
53
+ `loading-${header.id}${headerId ? `-${headerId}` : ""}`
54
+ : `${header.id}${headerId ? `-${headerId}` : ""}`
55
+ }`;
56
+
57
+ return (
58
+ <th
59
+ align="right"
60
+ className={cellClassName}
61
+ id={cellId}
62
+ key={`${header.id}-header`}
63
+ >
64
+ {header.isPlaceholder ? null : headerChildren && header.index === 0 ? (
65
+ <Flex alignItems="center">
66
+ {headerChildren}
67
+ <div>
68
+ {flexRender(header.column.columnDef.header, header.getContext())}
69
+ </div>
70
+ </Flex>
71
+ ) : (
72
+ <Flex
73
+ alignItems="center"
74
+ justify={header.index === 0 && enableSorting ? "between" : header.index === 0 && !enableSorting ? "start" : "end"}
75
+ paddingLeft={loading ? "sm" : "none"}
76
+ >
77
+ {header.index === 0 &&
78
+ !loading &&
79
+ (enableToggleExpansion === "all" || "header") && (
80
+ <ToggleIconButton onClick={handleExpandOrCollapse} />
81
+ )}
82
+
83
+ {header.index === 0 &&
84
+ loading &&
85
+ (enableToggleExpansion === "all" || "header") && (
86
+ <div className="loading-toggle-icon header-toggle-icon" />
87
+ )}
88
+
89
+ <Flex
90
+ className={`${header.index === 0 &&
91
+ enableSorting &&
92
+ "header-sort-button pb_th_link"}`}
93
+ cursor={header.index === 0 && enableSorting ? "pointer" : "default"}
94
+ {...(header.index === 0 &&
95
+ enableSorting && {
96
+ htmlOptions: {
97
+ onClick: (event: React.MouseEvent) => toggleSortButton(event),
98
+ onKeyDown: (event: React.KeyboardEvent) => {
99
+ if (event.key === "Enter") {
100
+ toggleSortButton(event)
101
+ }
102
+ },
103
+ tabIndex: 0,
104
+ },
105
+ })}
106
+ justify={header.index === 0 && enableSorting ? "between" : "none"}
107
+ paddingLeft={enableSorting ? "xxs" : "xs"}
108
+ >
109
+ <div>
110
+ {flexRender(header.column.columnDef.header, header.getContext())}
111
+ </div>
112
+
113
+ {header.index === 0 &&
114
+ header.column.getCanSort() &&
115
+ enableSorting &&
116
+ (loading ? (
117
+ <div className="loading-toggle-icon header-sort-icon" />
118
+ ) : (
119
+ <SortIconButton header={header}
120
+ sortIcon={sortIcon}
121
+ />
122
+ ))}
123
+ </Flex>
124
+ </Flex>
125
+ )}
126
+ </th>
127
+ )
128
+ }
@@ -0,0 +1,28 @@
1
+ import React, { useContext } from "react"
2
+ import Icon from "../../pb_icon/_icon"
3
+ import { Row } from "@tanstack/react-table"
4
+ import AdvancedTableContext from "../Context/AdvancedTableContext"
5
+ import { DataType } from "../Utilities/types"
6
+ import { displayIcon } from "../Utilities/IconHelpers"
7
+
8
+ interface ToggleIconButtonProps {
9
+ onClick: (row: Row<DataType>) => void
10
+ row?: Row<DataType>
11
+ }
12
+
13
+ export const ToggleIconButton = ({ row, onClick }: ToggleIconButtonProps) => {
14
+ const { toggleExpansionIcon } = useContext(AdvancedTableContext)
15
+ return (
16
+ <button
17
+ className="gray-icon toggle-all-icon"
18
+ key={displayIcon(toggleExpansionIcon)[0]}
19
+ onClick={() => onClick(row)}
20
+ >
21
+ <Icon
22
+ cursor="pointer"
23
+ fixedWidth
24
+ icon={displayIcon(toggleExpansionIcon)[0]}
25
+ />
26
+ </button>
27
+ )
28
+ }
@@ -0,0 +1,5 @@
1
+ import { createContext } from "react"
2
+
3
+ const AdvancedTableContext = createContext<any>({})
4
+
5
+ export default AdvancedTableContext