@compill/admin 1.0.101 → 1.0.102

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 (169) hide show
  1. package/dist/index.js +50 -0
  2. package/{src → dist}/lib/SectionTitle.d.ts +0 -1
  3. package/dist/lib/SectionTitle.jsx +3 -0
  4. package/{src → dist}/lib/breadcrumbs/BreadCrumbs.d.ts +0 -1
  5. package/dist/lib/breadcrumbs/BreadCrumbs.jsx +43 -0
  6. package/dist/lib/buttons/DialogButton.jsx +17 -0
  7. package/{src → dist}/lib/buttons/InvalidateButton.d.ts +0 -1
  8. package/dist/lib/buttons/InvalidateButton.jsx +10 -0
  9. package/{src → dist}/lib/buttons/NavigateButton.d.ts +0 -1
  10. package/dist/lib/buttons/NavigateButton.jsx +13 -0
  11. package/{src → dist}/lib/buttons/PublishButton.d.ts +0 -1
  12. package/dist/lib/buttons/PublishButton.jsx +18 -0
  13. package/{src → dist}/lib/buttons/UpdateButton.d.ts +0 -1
  14. package/dist/lib/buttons/UpdateButton.jsx +12 -0
  15. package/{src → dist}/lib/buttons/ViewButton.d.ts +1 -2
  16. package/dist/lib/buttons/ViewButton.jsx +14 -0
  17. package/{src → dist}/lib/cells/OrderCell.d.ts +0 -1
  18. package/dist/lib/cells/OrderCell.jsx +35 -0
  19. package/{src → dist}/lib/json/DetailsView.d.ts +0 -1
  20. package/dist/lib/json/DetailsView.jsx +96 -0
  21. package/{src → dist}/lib/json/EditItemView.d.ts +0 -1
  22. package/dist/lib/json/EditItemView.jsx +5 -0
  23. package/{src → dist}/lib/json/MultiQueryWrapper.d.ts +0 -1
  24. package/dist/lib/json/MultiQueryWrapper.jsx +60 -0
  25. package/{src → dist}/lib/json/QueryWrapper.d.ts +0 -1
  26. package/dist/lib/json/QueryWrapper.jsx +28 -0
  27. package/{src → dist}/lib/json/ScreenRenderer.d.ts +0 -1
  28. package/dist/lib/json/ScreenRenderer.jsx +18 -0
  29. package/{src → dist}/lib/json/ScreenTopBar.d.ts +0 -1
  30. package/dist/lib/json/ScreenTopBar.jsx +39 -0
  31. package/{src → dist}/lib/json/TabbedView.d.ts +0 -1
  32. package/dist/lib/json/TabbedView.jsx +28 -0
  33. package/{src → dist}/lib/json/buttons/ActionButton.d.ts +0 -1
  34. package/dist/lib/json/buttons/ActionButton.jsx +13 -0
  35. package/{src → dist}/lib/json/buttons/ConfirmationActionButton.d.ts +0 -1
  36. package/dist/lib/json/buttons/ConfirmationActionButton.jsx +37 -0
  37. package/{src → dist}/lib/json/dialog/DialogRenderer.d.ts +0 -1
  38. package/dist/lib/json/dialog/DialogRenderer.jsx +13 -0
  39. package/dist/lib/json/dialog/ItemDeleteDialog.jsx +36 -0
  40. package/dist/lib/json/dialog/ItemEditDialog.jsx +124 -0
  41. package/{src → dist}/lib/json/dialog/MultiQueryWrapperDialog.d.ts +0 -1
  42. package/dist/lib/json/dialog/MultiQueryWrapperDialog.jsx +22 -0
  43. package/{src → dist}/lib/json/dialog/QueryWrapperDialog.d.ts +0 -1
  44. package/dist/lib/json/dialog/QueryWrapperDialog.jsx +19 -0
  45. package/{src → dist}/lib/json/table/RefreshButton.d.ts +0 -1
  46. package/dist/lib/json/table/RefreshButton.jsx +12 -0
  47. package/{src → dist}/lib/json/table/TableRowActionsView.d.ts +0 -1
  48. package/dist/lib/json/table/TableRowActionsView.jsx +45 -0
  49. package/{src → dist}/lib/json/table/TableRowPublishPostButton.d.ts +0 -1
  50. package/dist/lib/json/table/TableRowPublishPostButton.jsx +21 -0
  51. package/{src → dist}/lib/json/table/TableView.d.ts +0 -1
  52. package/dist/lib/json/table/TableView.jsx +100 -0
  53. package/dist/lib/json/table/TableViewContext.jsx +57 -0
  54. package/dist/lib/json/table/useTableProps.jsx +56 -0
  55. package/{src → dist}/lib/json/types/DetailsView.d.ts +0 -1
  56. package/dist/lib/json/types/DetailsView.js +1 -0
  57. package/dist/lib/json/types/EditItemDialog.js +1 -0
  58. package/dist/lib/json/types/MultiQueryWrapper.js +1 -0
  59. package/dist/lib/json/types/MultiQueryWrapperDialog.js +1 -0
  60. package/dist/lib/json/types/QueryWrapper.js +1 -0
  61. package/dist/lib/json/types/QueryWrapperDialog.js +1 -0
  62. package/dist/lib/json/types/ScreenConfig.js +1 -0
  63. package/{src → dist}/lib/json/types/TabbedView.d.ts +0 -1
  64. package/dist/lib/json/types/TabbedView.js +1 -0
  65. package/{src → dist}/lib/json/types/TableView.d.ts +0 -1
  66. package/dist/lib/json/types/TableView.js +1 -0
  67. package/{src → dist}/lib/layout/AdminLayout.d.ts +0 -1
  68. package/dist/lib/layout/AdminLayout.jsx +24 -0
  69. package/{src → dist}/lib/layout/ButtonBar.d.ts +1 -1
  70. package/dist/lib/layout/ButtonBar.jsx +29 -0
  71. package/{src → dist}/lib/layout/Content.d.ts +0 -1
  72. package/dist/lib/layout/Content.jsx +10 -0
  73. package/{src → dist}/lib/layout/PageTitleBar.d.ts +0 -1
  74. package/dist/lib/layout/PageTitleBar.jsx +12 -0
  75. package/{src → dist}/lib/layout/Sidebar.d.ts +0 -1
  76. package/dist/lib/layout/Sidebar.jsx +24 -0
  77. package/{src → dist}/lib/layout/menu/Menu.d.ts +0 -1
  78. package/dist/lib/layout/menu/Menu.jsx +30 -0
  79. package/{src → dist}/lib/layout/menu/MenuButton.d.ts +0 -1
  80. package/dist/lib/layout/menu/MenuButton.jsx +7 -0
  81. package/dist/lib/layout/menu/MenuConfig.js +1 -0
  82. package/{src → dist}/lib/layout/menu/MenuItem.d.ts +0 -1
  83. package/dist/lib/layout/menu/MenuItem.jsx +20 -0
  84. package/{src → dist}/lib/layout/menu/NextMenuItem.d.ts +0 -1
  85. package/dist/lib/layout/menu/NextMenuItem.jsx +20 -0
  86. package/{src → dist}/lib/layout/menu/SelectedIndicator.d.ts +0 -1
  87. package/dist/lib/layout/menu/SelectedIndicator.jsx +3 -0
  88. package/{src → dist}/lib/layout/menu/UserBlock.d.ts +1 -2
  89. package/dist/lib/layout/menu/UserBlock.jsx +55 -0
  90. package/{src → dist}/lib/modal/AttachDialog.d.ts +0 -1
  91. package/dist/lib/modal/AttachDialog.jsx +109 -0
  92. package/dist/lib/modal/FormActionDialog.jsx +46 -0
  93. package/{src → dist}/lib/page/PageContainer.d.ts +0 -1
  94. package/dist/lib/page/PageContainer.jsx +4 -0
  95. package/{src → dist}/lib/page/PageContentEditor.d.ts +0 -1
  96. package/dist/lib/page/PageContentEditor.jsx +11 -0
  97. package/{src → dist}/lib/page/PageMain.d.ts +0 -1
  98. package/dist/lib/page/PageMain.jsx +4 -0
  99. package/dist/lib/page/PageQueryStateContainer.jsx +15 -0
  100. package/{src → dist}/lib/page/PageSectionTitle.d.ts +0 -1
  101. package/dist/lib/page/PageSectionTitle.jsx +3 -0
  102. package/{src → dist}/lib/page/PageSidebar.d.ts +0 -1
  103. package/dist/lib/page/PageSidebar.jsx +3 -0
  104. package/{src → dist}/lib/page/PageSidebarSection.d.ts +0 -1
  105. package/dist/lib/page/PageSidebarSection.jsx +7 -0
  106. package/dist/lib/page/PageStateContainer.jsx +9 -0
  107. package/{src → dist}/lib/page/PageSubSectionTitle.d.ts +0 -1
  108. package/dist/lib/page/PageSubSectionTitle.jsx +3 -0
  109. package/{src → dist}/lib/page/PageTitle.d.ts +0 -1
  110. package/dist/lib/page/PageTitle.jsx +3 -0
  111. package/dist/lib/page/PageTopBar.jsx +92 -0
  112. package/{src → dist}/lib/status/StatusBadge.d.ts +0 -1
  113. package/dist/lib/status/StatusBadge.jsx +20 -0
  114. package/dist/lib/table/TableColumnButton.d.ts +1 -0
  115. package/dist/lib/table/TableColumnButton.jsx +53 -0
  116. package/{src → dist}/lib/table/TableContainer.d.ts +0 -1
  117. package/dist/lib/table/TableContainer.jsx +11 -0
  118. package/dist/lib/table/TableContainerContext.jsx +39 -0
  119. package/{src → dist}/lib/table/TableCreateButton.d.ts +0 -1
  120. package/dist/lib/table/TableCreateButton.jsx +9 -0
  121. package/{src → dist}/lib/table/TableFilterButton.d.ts +0 -1
  122. package/dist/lib/table/TableFilterButton.jsx +16 -0
  123. package/{src → dist}/lib/table/TableFilters.d.ts +0 -1
  124. package/dist/lib/table/TableFilters.jsx +46 -0
  125. package/{src → dist}/lib/table/TableMassActions.d.ts +0 -1
  126. package/dist/lib/table/TableMassActions.jsx +15 -0
  127. package/{src → dist}/lib/table/TableRowActionBar.d.ts +0 -1
  128. package/dist/lib/table/TableRowActionBar.jsx +14 -0
  129. package/{src → dist}/lib/table/TableRowActionButton.d.ts +0 -1
  130. package/dist/lib/table/TableRowActionButton.jsx +7 -0
  131. package/{src → dist}/lib/table/TableRowActionDialogButton.d.ts +1 -2
  132. package/dist/lib/table/TableRowActionDialogButton.jsx +8 -0
  133. package/{src → dist}/lib/table/TableRowDeleteButton.d.ts +0 -1
  134. package/dist/lib/table/TableRowDeleteButton.jsx +5 -0
  135. package/{src → dist}/lib/table/TableRowEditButton.d.ts +0 -1
  136. package/dist/lib/table/TableRowEditButton.jsx +7 -0
  137. package/{src → dist}/lib/table/TableRowNavigateButton.d.ts +0 -1
  138. package/dist/lib/table/TableRowNavigateButton.jsx +13 -0
  139. package/{src → dist}/lib/table/TableRowPublishPostButton.d.ts +0 -1
  140. package/dist/lib/table/TableRowPublishPostButton.jsx +18 -0
  141. package/{src → dist}/lib/table/TableRowViewButton.d.ts +0 -1
  142. package/dist/lib/table/TableRowViewButton.jsx +12 -0
  143. package/{src → dist}/lib/table/TableTopBar.d.ts +1 -2
  144. package/dist/lib/table/TableTopBar.jsx +17 -0
  145. package/package.json +60 -4
  146. package/README.md +0 -7
  147. package/index.cjs.d.ts +0 -1
  148. package/index.cjs.js +0 -3710
  149. package/index.esm.d.ts +0 -1
  150. package/index.esm.js +0 -3662
  151. package/src/lib/table/TableColumnButton.d.ts +0 -0
  152. /package/{src → dist}/index.d.ts +0 -0
  153. /package/{src → dist}/lib/buttons/DialogButton.d.ts +0 -0
  154. /package/{src → dist}/lib/json/dialog/ItemDeleteDialog.d.ts +0 -0
  155. /package/{src → dist}/lib/json/dialog/ItemEditDialog.d.ts +0 -0
  156. /package/{src → dist}/lib/json/table/TableViewContext.d.ts +0 -0
  157. /package/{src → dist}/lib/json/table/useTableProps.d.ts +0 -0
  158. /package/{src → dist}/lib/json/types/EditItemDialog.d.ts +0 -0
  159. /package/{src → dist}/lib/json/types/MultiQueryWrapper.d.ts +0 -0
  160. /package/{src → dist}/lib/json/types/MultiQueryWrapperDialog.d.ts +0 -0
  161. /package/{src → dist}/lib/json/types/QueryWrapper.d.ts +0 -0
  162. /package/{src → dist}/lib/json/types/QueryWrapperDialog.d.ts +0 -0
  163. /package/{src → dist}/lib/json/types/ScreenConfig.d.ts +0 -0
  164. /package/{src → dist}/lib/layout/menu/MenuConfig.d.ts +0 -0
  165. /package/{src → dist}/lib/modal/FormActionDialog.d.ts +0 -0
  166. /package/{src → dist}/lib/page/PageQueryStateContainer.d.ts +0 -0
  167. /package/{src → dist}/lib/page/PageStateContainer.d.ts +0 -0
  168. /package/{src → dist}/lib/page/PageTopBar.d.ts +0 -0
  169. /package/{src → dist}/lib/table/TableContainerContext.d.ts +0 -0
@@ -0,0 +1,92 @@
1
+ import { createContext } from "@soperio/react";
2
+ import { PageTitle } from "./PageTitle";
3
+ import React from "react";
4
+ import { createPortal } from "react-dom";
5
+ import { FlexCenter } from "@compill/components";
6
+ import { Breadcrumbs } from "../breadcrumbs/BreadCrumbs";
7
+ export function PageTopBar({ title, breadcrumbs, children, ...props }) {
8
+ return (<FlexCenter gap="3" minH="9" {...props}>
9
+ {title && <PageTitle>{title}</PageTitle>}
10
+ {breadcrumbs && <Breadcrumbs breadcrumbs={breadcrumbs}/>}
11
+ <div flexGrow/>
12
+ {children}
13
+ </FlexCenter>);
14
+ }
15
+ const [CP, usePageTabbedTopBarContext] = createContext();
16
+ export function PageTabbedTopBarProvider({ children }) {
17
+ const [containerEl, setContainerEl] = React.useState(null);
18
+ const r = React.createRef();
19
+ return (<CP value={{ containerEl, setContainerEl }}>
20
+ {children}
21
+ </CP>);
22
+ }
23
+ export function PageTabbedTopBar({ title, breadcrumbs, children, ...props }) {
24
+ const ref = React.createRef();
25
+ const { setContainerEl } = usePageTabbedTopBarContext();
26
+ const [isSet, setIsSet] = React.useState(false);
27
+ React.useEffect(() => {
28
+ if (!isSet && ref.current) {
29
+ setContainerEl(ref.current);
30
+ setIsSet(true);
31
+ }
32
+ return () => setContainerEl(null);
33
+ }, []);
34
+ return (<FlexCenter gap="3" minH="9" {...props}>
35
+ <>
36
+ {title && <PageTitle>{title}</PageTitle>}
37
+ {breadcrumbs && <Breadcrumbs breadcrumbs={breadcrumbs}/>}
38
+ <div flexGrow/>
39
+ <div ref={ref} dflex flexRow gap="3"/>
40
+ {children}
41
+ </>
42
+ </FlexCenter>);
43
+ }
44
+ export function PageTopBarToolbar({ trackingRef, children }) {
45
+ const { containerEl } = usePageTabbedTopBarContext();
46
+ const [visible, setVisible] = React.useState(false);
47
+ const portal = React.useMemo(() => {
48
+ const node = containerEl; //?.ownerDocument.createElement("div")
49
+ // if (node) node.className = PORTAL_CLASSNAME
50
+ return node;
51
+ }, [containerEl]);
52
+ const host = containerEl ?? (typeof window !== "undefined" ? document.body : undefined);
53
+ React.useLayoutEffect(() => {
54
+ if (!portal || !host)
55
+ return;
56
+ try {
57
+ if (visible)
58
+ host.appendChild(portal);
59
+ else
60
+ host.removeChild(portal);
61
+ }
62
+ catch (e) {
63
+ }
64
+ return () => {
65
+ try {
66
+ host.removeChild(portal);
67
+ }
68
+ catch (e) { }
69
+ };
70
+ }, [visible, portal, host]);
71
+ const callback = React.useCallback((entries) => {
72
+ // @ts-ignore
73
+ setVisible(entries[0].isVisible);
74
+ }, [children]);
75
+ React.useEffect(() => {
76
+ const opts = {
77
+ root: null,
78
+ rootMargin: '0px',
79
+ threshold: 0,
80
+ /* required options*/
81
+ trackVisibility: true,
82
+ delay: 100
83
+ };
84
+ const observerScroll = new IntersectionObserver(callback, opts);
85
+ if (trackingRef)
86
+ observerScroll.observe(trackingRef);
87
+ return () => observerScroll.disconnect();
88
+ }, [trackingRef, callback, children]);
89
+ if (host && portal)
90
+ return createPortal(children, portal);
91
+ return null;
92
+ }
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  import { SoperioComponent } from "@soperio/react";
3
2
  export declare function StatusBadge({ status, ...props }: {
4
3
  status: "draft" | "published";
@@ -0,0 +1,20 @@
1
+ import { Badge } from "@valerya/ui";
2
+ const labels = {
3
+ draft: "Draft",
4
+ published: "Published",
5
+ pending: "Pending",
6
+ approved: "Approved",
7
+ partially_approved: "Partially Approved",
8
+ rejected: "Rejected"
9
+ };
10
+ const schemes = {
11
+ draft: "warning",
12
+ published: "success",
13
+ pending: "secondary",
14
+ approved: "success",
15
+ partially_approved: "warning",
16
+ rejected: "danger",
17
+ };
18
+ export function StatusBadge({ status, ...props }) {
19
+ return (<Badge size="sm" variant="glass" whiteSpace="nowrap" rounded="full" px="3" scheme={schemes[status]} {...props}>{labels[status]}</Badge>);
20
+ }
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,53 @@
1
+ // import { mdiViewColumn } from "@mdi/js";
2
+ // import { useTableContainerContext } from "./TableContainerContext";
3
+ // import { ColumnDef, ColumnDefResolved } from "@tanstack/react-table";
4
+ // import { ButtonProps } from "@valerya/ui";
5
+ export {};
6
+ // function getColId(column: ColumnDef<any, any>)
7
+ // {
8
+ // return (column as ColumnDefResolved<any>).accessorKey ?? column.id ?? ""
9
+ // }
10
+ // export function TableColumnButton({ ...props }: ButtonProps)
11
+ // {
12
+ // const t = useTranslation()
13
+ // const { columns, isColumnVisible, toggleColumnVisibility } = useTableContainerContext()
14
+ // const ids = columns.filter(col => isColumnVisible(getColId(col))).map(col => getColId(col))
15
+ // return (
16
+ // <Menu isLazy closeOnSelect={false}>
17
+ // <MenuButton
18
+ // as={Button}
19
+ // leftIcon={<SVGIcon path={mdiViewColumn} me="-1" w="5" />}
20
+ // colorScheme="pink"
21
+ // outline="0"
22
+ // border="0"
23
+ // title={t("toggle-columns-visibility") ?? ""}
24
+ // display="flex"
25
+ // gap="2"
26
+ // alignItems="center"
27
+ // placeContent="center"
28
+ // {...props}
29
+ // >
30
+ // {ids.length == columns.length && t("columns")}
31
+ // {ids.length != columns.length && t("columns-with-count", {visible: ids.length, total: columns.length })}
32
+ // </MenuButton>
33
+ // <MenuList minWidth="240px" zIndex={2}>
34
+ // <MenuOptionGroup type="checkbox" value={ids}>
35
+ // {
36
+ // columns.map((col, index) =>
37
+ // (
38
+ // <MenuItemOption
39
+ // key={getColId(col)}
40
+ // value={getColId(col)}
41
+ // isChecked={isColumnVisible(getColId(col))}
42
+ // onClick={() => toggleColumnVisibility(getColId(col))}
43
+ // isDisabled={col.enableHiding == false}
44
+ // >
45
+ // {col.header?.toString() ?? ""}
46
+ // </MenuItemOption>
47
+ // ))
48
+ // }
49
+ // </MenuOptionGroup>
50
+ // </MenuList>
51
+ // </Menu>
52
+ // )
53
+ // }
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  import { ColumnDef } from "@tanstack/react-table";
3
2
  import { TileProps } from "@valerya/ui";
4
3
  interface TableContainerProps extends TileProps {
@@ -0,0 +1,11 @@
1
+ import { TableContextProvider } from "@compill/table";
2
+ import { TableContainerContextProvider } from "./TableContainerContext";
3
+ export function TableContainer({ initialPageSize, initialVisibleColumns, columns, filtersMethod = "reactRouter", children, ...props }) {
4
+ return (<div w="full" dflex flexCol {...props}>
5
+ <TableContextProvider initialPageSize={initialPageSize} filtersMethod={filtersMethod}>
6
+ <TableContainerContextProvider columns={columns} initialVisibleColumns={initialVisibleColumns}>
7
+ {children}
8
+ </TableContainerContextProvider>
9
+ </TableContextProvider>
10
+ </div>);
11
+ }
@@ -0,0 +1,39 @@
1
+ import React from "react";
2
+ import { createContext } from "@soperio/react";
3
+ const [provider, useContext] = createContext();
4
+ function getColId(column) {
5
+ return column.accessorKey ?? column.id;
6
+ }
7
+ function TableContainerContextProvider({ initialVisibleColumns, columns, children }) {
8
+ const [showFilters, setShowFilters] = React.useState(false);
9
+ const [showMassActions, setShowMassActions] = React.useState(false);
10
+ const [visibleColumnIds, setVisibleColumnIds] = React.useState(initialVisibleColumns ?? columns?.map(col => getColId(col)) ?? []);
11
+ const filteredColumns = columns?.filter(col => visibleColumnIds.includes(getColId(col))) ?? [];
12
+ const toggleColumnVisibility = React.useCallback((id) => {
13
+ const index = visibleColumnIds.indexOf(id);
14
+ if (index > -1) {
15
+ const newIds = visibleColumnIds.concat();
16
+ newIds.splice(index, 1);
17
+ setVisibleColumnIds(newIds);
18
+ }
19
+ else {
20
+ setVisibleColumnIds(visibleColumnIds.concat(id));
21
+ }
22
+ }, [visibleColumnIds, setVisibleColumnIds]);
23
+ const isColumnVisible = React.useCallback((id) => {
24
+ return visibleColumnIds.includes(id);
25
+ }, [visibleColumnIds]);
26
+ const Provider = provider;
27
+ const value = {
28
+ showFilters,
29
+ setShowFilters,
30
+ showMassActions,
31
+ setShowMassActions,
32
+ columns: columns ?? [],
33
+ filteredColumns,
34
+ toggleColumnVisibility,
35
+ isColumnVisible
36
+ };
37
+ return <Provider value={value}>{children}</Provider>;
38
+ }
39
+ export { TableContainerContextProvider, useContext as useTableContainerContext };
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  import { DialogButtonProps } from "../buttons/DialogButton";
3
2
  export declare function TableCreateButton({ icon, children, ...props }: {
4
3
  icon?: string;
@@ -0,0 +1,9 @@
1
+ import { mdiPlusThick } from "@mdi/js";
2
+ import { Icon } from "@valerya/ui";
3
+ import { ButtonBarDialogButton } from "../layout/ButtonBar";
4
+ export function TableCreateButton({ icon, children, ...props }) {
5
+ return (<ButtonBarDialogButton {...props}>
6
+ <Icon path={icon ?? mdiPlusThick}/>
7
+ {children}
8
+ </ButtonBarDialogButton>);
9
+ }
@@ -1,3 +1,2 @@
1
- /// <reference types="react" />
2
1
  import { ButtonProps } from "@valerya/ui";
3
2
  export declare function TableFilterButton({ ...props }: ButtonProps): JSX.Element;
@@ -0,0 +1,16 @@
1
+ import { Icon } from "@valerya/ui";
2
+ import { Button, Popover } from "@valerya/ui";
3
+ import { mdiFilter } from "@mdi/js";
4
+ export function TableFilterButton({ ...props }) {
5
+ // return <Button scheme="secondary" {...props}><Icon path={mdiFilter} /></Button>
6
+ return (<Popover side="bottom-end" modal>
7
+ <Button scheme="dark" size="sm" aspectRatio="square" variant="borderless" corners="square" {...props}>
8
+ <Icon path={mdiFilter}/>
9
+ </Button>
10
+ <div bgColor="white" rounded shadow>
11
+ <div py="3" hover_bgColor="#ff0000" px="5" hover_textColor="white">First Item</div>
12
+ <div py="3" hover_bgColor="#ff0000" px="5" hover_textColor="white">Second Item</div>
13
+ <div py="3" hover_bgColor="#ff0000" px="5" hover_textColor="white">Third Item</div>
14
+ </div>
15
+ </Popover>);
16
+ }
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  import { FormRendererConfig } from "@compill/form";
3
2
  interface TableFiltersProps {
4
3
  form: FormRendererConfig;
@@ -0,0 +1,46 @@
1
+ import { useTableContext } from "@compill/table";
2
+ import React from "react";
3
+ import { useTableContainerContext } from "./TableContainerContext";
4
+ import { FieldLabel, FormProvider, FormRenderer, mergeInitialFormValues, SubmitButton } from "@compill/form";
5
+ import { Button, Collapse } from "@valerya/ui";
6
+ import { isEqual } from "es-toolkit";
7
+ export function TableFilters({ form, initialValues, schema, processInput }) {
8
+ const { showFilters } = useTableContainerContext();
9
+ const { getFilters, setFilters } = useTableContext();
10
+ const handleSubmit = React.useCallback((values, actions) => {
11
+ const params = processInput?.(values) ?? values;
12
+ if (!isEqual(params, getFilters()))
13
+ setFilters(params);
14
+ // setFilters(processInput?.(values) ?? values)
15
+ actions.setSubmitting(false);
16
+ }, [setFilters, processInput]);
17
+ const handleReset = React.useCallback((resetForm) => {
18
+ setFilters(initialValues);
19
+ resetForm();
20
+ }, [setFilters, initialValues]);
21
+ React.useEffect(() => setFilters(initialValues), []);
22
+ return (<Collapse in={showFilters} style={{ overflow: showFilters ? "initial" : "hidden" }}>
23
+ <div p="8" borderT="px" borderB="px" borderColor="slate-100">
24
+ <FormProvider initialValues={mergeInitialFormValues(getFilters(), initialValues)} onSubmit={handleSubmit} validationSchema={schema} enableReinitialize>
25
+ {(props) => (<div dflex gap="3" placeContent="start">
26
+ <FormRenderer flexRow w="auto" form={form}/>
27
+ <Buttons handleReset={() => handleReset(props.resetForm)}/>
28
+ </div>)}
29
+
30
+ </FormProvider>
31
+ </div>
32
+ </Collapse>);
33
+ }
34
+ function Buttons({ handleReset }) {
35
+ return (<div dflex gap="3">
36
+ <div dflex flexCol>
37
+ <FieldLabel name="" label="&nbsp;"/>
38
+ <SubmitButton>Filter</SubmitButton>
39
+ </div>
40
+
41
+ <div dflex flexCol>
42
+ <FieldLabel name="" label="&nbsp;"/>
43
+ <Button scheme="neutral" onClick={handleReset}>Reset</Button>
44
+ </div>
45
+ </div>);
46
+ }
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  import { MassAction } from "../json/types/TableView";
3
2
  interface TableMassActionsProps {
4
3
  actions: MassAction[];
@@ -0,0 +1,15 @@
1
+ import { useTableContext } from "@compill/table";
2
+ import { Collapse } from "@valerya/ui";
3
+ import { ActionButton } from "../json/buttons/ActionButton";
4
+ export function TableMassActions({ actions }) {
5
+ const { ids } = useTableContext();
6
+ const showMassActions = ids && ids.length > 0;
7
+ return (<Collapse in={showMassActions} style={{ overflow: showMassActions ? "initial" : "hidden" }}>
8
+ <div dflex gap="3" flexWrap alignItems="center" px="8" pt="5">
9
+ {actions.map((action, index) => (<div key={index}>
10
+ {/* {action.type == "custom" && action.render(rows)} */}
11
+ {action.type == "button" && !action.showConfirmationDialog && (<ActionButton label={action.label} queryFn={action.queryFn} queryKey={action.queryKey} buttonProps={action.buttonProps}/>)}
12
+ </div>))}
13
+ </div>
14
+ </Collapse>);
15
+ }
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  import { ParentComponent, SoperioComponent } from "@soperio/react";
3
2
  interface TableRowActionBarProps extends SoperioComponent, ParentComponent {
4
3
  publishId?: string;
@@ -0,0 +1,14 @@
1
+ import { TableRowViewButton } from "./TableRowViewButton";
2
+ import { TableRowNavigateButton } from "./TableRowNavigateButton";
3
+ import { TableRowEditButton } from "./TableRowEditButton";
4
+ import { TableRowDeleteButton } from "./TableRowDeleteButton";
5
+ export function TableRowActionBar({ publishId, viewPath, navigatePath, editDialog, deleteDialog, children, ...props }) {
6
+ return (<div dflex spaceX="1" placeContent="end" {...props}>
7
+ {viewPath && <TableRowViewButton path={viewPath}/>}
8
+ {navigatePath && <TableRowNavigateButton path={navigatePath}/>}
9
+ {editDialog && <TableRowEditButton buildDialog={editDialog}/>}
10
+ {deleteDialog && <TableRowDeleteButton buildDialog={deleteDialog}/>}
11
+
12
+ {children}
13
+ </div>);
14
+ }
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  import { ButtonProps } from "@valerya/ui";
3
2
  export declare function TableRowActionButton({ icon, children, ...props }: {
4
3
  icon?: string;
@@ -0,0 +1,7 @@
1
+ import { Button, Icon } from "@valerya/ui";
2
+ export function TableRowActionButton({ icon, children, ...props }) {
3
+ return (<Button dflex alignContent="center" placeContent="center" py="2.5" px="3" h="full" size="lg" variant="borderless" corners="square" gap="2" {...props}>
4
+ {icon && <Icon path={icon} size="sm"/>}
5
+ {children}
6
+ </Button>);
7
+ }
@@ -1,5 +1,4 @@
1
- /// <reference types="react" />
2
- import { DialogButtonProps } from "@compill/admin";
1
+ import { DialogButtonProps } from "../buttons/DialogButton";
3
2
  export declare function TableRowActionDialogButton({ icon, children, ...props }: {
4
3
  icon?: string;
5
4
  } & DialogButtonProps): JSX.Element;
@@ -0,0 +1,8 @@
1
+ import { Icon } from "@valerya/ui";
2
+ import { DialogButton } from "../buttons/DialogButton";
3
+ export function TableRowActionDialogButton({ icon, children, ...props }) {
4
+ return (<DialogButton dflex alignContent="center" placeContent="center" py="2.5" px="3" h="full" size="lg" variant="borderless" corners="square" gap="2" {...props}>
5
+ {icon && <Icon path={icon} size="sm"/>}
6
+ {children}
7
+ </DialogButton>);
8
+ }
@@ -1,3 +1,2 @@
1
- /// <reference types="react" />
2
1
  import { DialogButtonProps } from "../buttons/DialogButton";
3
2
  export declare function TableRowDeleteButton({ children, ...props }: DialogButtonProps): JSX.Element;
@@ -0,0 +1,5 @@
1
+ import { mdiDelete } from "@mdi/js";
2
+ import { TableRowActionDialogButton } from "./TableRowActionDialogButton";
3
+ export function TableRowDeleteButton({ children, ...props }) {
4
+ return <TableRowActionDialogButton icon={mdiDelete} {...props}>{children}</TableRowActionDialogButton>;
5
+ }
@@ -1,3 +1,2 @@
1
- /// <reference types="react" />
2
1
  import { DialogButtonProps } from "../buttons/DialogButton";
3
2
  export declare function TableRowEditButton({ children, ...props }: DialogButtonProps): JSX.Element;
@@ -0,0 +1,7 @@
1
+ import { mdiPencil } from "@mdi/js";
2
+ import { TableRowActionDialogButton } from "./TableRowActionDialogButton";
3
+ export function TableRowEditButton({ children, ...props }) {
4
+ return (<TableRowActionDialogButton icon={mdiPencil} {...props}>
5
+ {children}
6
+ </TableRowActionDialogButton>);
7
+ }
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  import { ButtonProps } from "@valerya/ui";
3
2
  export declare function TableRowNavigateButton({ path, ...props }: {
4
3
  path: string;
@@ -0,0 +1,13 @@
1
+ import { mdiEye } from "@mdi/js";
2
+ import React from "react";
3
+ import { useNavigate } from "react-router-dom";
4
+ import { TableRowActionButton } from "./TableRowActionButton";
5
+ export function TableRowNavigateButton({ path, ...props }) {
6
+ const navigate = useNavigate();
7
+ const handleClick = React.useCallback((event) => {
8
+ event?.preventDefault();
9
+ event?.stopPropagation();
10
+ navigate(`${path}`);
11
+ }, [navigate, path]);
12
+ return <TableRowActionButton icon={mdiEye} onClick={handleClick} {...props}/>;
13
+ }
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  import { API } from "@compill/admin-api";
3
2
  import { ButtonProps } from "@valerya/ui";
4
3
  export declare function TableRowPublishPostButton({ id, api, status, invalidateQueryKey, ...props }: {
@@ -0,0 +1,18 @@
1
+ import { useInvalidateParentMutation } from "@compill/api";
2
+ import { mdiPublish, mdiPublishOff } from "@mdi/js";
3
+ import React from "react";
4
+ import { toast } from "react-toastify";
5
+ import { TableRowActionButton } from "./TableRowActionButton";
6
+ export function TableRowPublishPostButton({ id, api, status, invalidateQueryKey, ...props }) {
7
+ const isDraft = status == "draft";
8
+ const mutation = useInvalidateParentMutation(isDraft ? api.publish : api.unpublish, invalidateQueryKey ?? api.queryKey, { networkMode: "always" });
9
+ const publish = React.useCallback((event) => {
10
+ event?.preventDefault();
11
+ event?.stopPropagation();
12
+ mutation.reset();
13
+ mutation.mutateAsync(id)
14
+ .then(() => toast.success(isDraft ? "Published!" : "Unpublished!"))
15
+ .catch(error => toast.error(`Error: ${error}`));
16
+ }, [mutation, id]);
17
+ return (<TableRowActionButton icon={isDraft ? mdiPublish : mdiPublishOff} onClick={publish} {...props}/>);
18
+ }
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  import { ButtonProps } from "@valerya/ui";
3
2
  export declare function TableRowViewButton({ path, ...props }: {
4
3
  path: string;
@@ -0,0 +1,12 @@
1
+ import { mdiOpenInNew } from "@mdi/js";
2
+ import React from "react";
3
+ import { TableRowActionButton } from "./TableRowActionButton";
4
+ import { AppEnv } from "@compill/env";
5
+ export function TableRowViewButton({ path, ...props }) {
6
+ const openPage = React.useCallback((event) => {
7
+ event?.preventDefault();
8
+ event?.stopPropagation();
9
+ window.open(`${AppEnv.websiteUrl()}/${path}`, '_blank');
10
+ }, [path]);
11
+ return <TableRowActionButton icon={mdiOpenInNew} onClick={openPage} {...props}/>;
12
+ }
@@ -1,6 +1,5 @@
1
- /// <reference types="react" />
2
- import { Breadcrumb, QueryBreadcrumbs } from "@compill/admin";
3
1
  import { ParentComponent, SoperioComponent } from "@soperio/react";
2
+ import { Breadcrumb, QueryBreadcrumbs } from "../breadcrumbs/BreadCrumbs";
4
3
  interface TableTopBarProps extends SoperioComponent, ParentComponent {
5
4
  title?: string;
6
5
  breadcrumbs?: Breadcrumb[] | QueryBreadcrumbs;
@@ -0,0 +1,17 @@
1
+ import { Breadcrumbs } from "../breadcrumbs/BreadCrumbs";
2
+ export function TableTopBar({ title, breadcrumbs, children, ...props }) {
3
+ return (<div dflex flexRow alignItems="center" gap="3" p="8"
4
+ // borderB="0.5"
5
+ // borderBColor="--bg-2"
6
+ {...props}>
7
+ <div>
8
+
9
+ {title && <h2 textSize="x2" fontWeight="600" textColor="#3f4254" textTransform="capitalize">{title}</h2>}
10
+ {breadcrumbs && <Breadcrumbs breadcrumbs={breadcrumbs}/>}
11
+ </div>
12
+
13
+ <div flexGrow>&nbsp;</div>
14
+
15
+ {children}
16
+ </div>);
17
+ }
package/package.json CHANGED
@@ -1,6 +1,62 @@
1
1
  {
2
- "name": "@compill/admin",
3
- "version": "1.0.101",
4
- "module": "./index.esm.js",
5
- "main": "./index.cjs.js"
2
+ "name": "@compill/admin",
3
+ "version": "1.0.102",
4
+ "private": false,
5
+ "sideEffects": false,
6
+ "type": "module",
7
+ "exports": {
8
+ ".": {
9
+ "import": "./dist/index.js",
10
+ "types": "./dist/index.d.ts"
11
+ }
12
+ },
13
+ "devDependencies": {
14
+ "eslint": "^9.38.0",
15
+ "typescript": "5.9.2",
16
+ "@types/react": "^18.3.1",
17
+ "@types/react-dom": "^18.3.1",
18
+ "@repo/eslint-config": "0.0.0",
19
+ "@repo/typescript-config": "0.0.0"
20
+ },
21
+ "peerDependencies": {
22
+ "react": "^18.3.1",
23
+ "react-dom": "^18.3.1",
24
+ "next": "^15.5.4"
25
+ },
26
+ "dependencies": {
27
+ "@mdi/js": "^7.4.47",
28
+ "es-toolkit": "^1.41.0",
29
+ "formik": "^2.4.6",
30
+ "react-toastify": "^11.0.2",
31
+ "@tanstack/react-query": "^4.36.1",
32
+ "@tanstack/react-table": "^8.17.3",
33
+ "react-router-dom": "^6.11.2",
34
+ "react-hotkeys-hook": "^5.0.1",
35
+ "yup": "^1.1.0",
36
+ "@soperio/react": "1.0.14",
37
+ "@soperio/jsx-runtime": "1.0.14",
38
+ "@valerya/ui": "1.0.9",
39
+ "@compill/admin-api": "1.0.55",
40
+ "@compill/api": "1.0.57",
41
+ "@compill/auth": "1.0.77",
42
+ "@compill/env": "1.0.19",
43
+ "@compill/components": "1.0.49",
44
+ "@compill/form": "1.0.67",
45
+ "@compill/hooks": "1.0.43",
46
+ "@compill/table": "1.0.80",
47
+ "@compill/editor": "1.0.79",
48
+ "@compill/form-editor": "1.0.19"
49
+ },
50
+ "publishConfig": {
51
+ "access": "public"
52
+ },
53
+ "files": [
54
+ "dist"
55
+ ],
56
+ "scripts": {
57
+ "build": "tsc -p tsconfig.build.json",
58
+ "dev": "tsup src/index.ts --format esm --dts --watch",
59
+ "lint": "eslint . --max-warnings 0",
60
+ "check-types": "tsc --noEmit"
61
+ }
6
62
  }
package/README.md DELETED
@@ -1,7 +0,0 @@
1
- # ui-table
2
-
3
- This library was generated with [Nx](https://nx.dev).
4
-
5
- ## Running unit tests
6
-
7
- Run `nx test ui-table` to execute the unit tests via [Jest](https://jestjs.io).
package/index.cjs.d.ts DELETED
@@ -1 +0,0 @@
1
- export * from "./src/index";