bolesa-apitables 0.1.0
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.
- package/README.md +114 -0
- package/dist/index.cjs +2361 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +329 -0
- package/dist/index.d.ts +329 -0
- package/dist/index.js +2308 -0
- package/dist/index.js.map +1 -0
- package/package.json +87 -0
package/README.md
ADDED
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
# bolesa-apitables
|
|
2
|
+
|
|
3
|
+
Server-driven data tables for React — extracted from the ApiTables module in **bolesa-app-ui**.
|
|
4
|
+
|
|
5
|
+
The backend defines columns, filters, sorting, row actions, and bulk actions. This package renders them with an isolated Redux store per table instance.
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
pnpm add bolesa-apitables
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
### Peer dependencies
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
pnpm add react react-dom react-redux @reduxjs/toolkit axios react-data-table-component sonner
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Quick start
|
|
20
|
+
|
|
21
|
+
Wrap your app (or layout) with `ApiTablesHostProvider` and map your design-system components:
|
|
22
|
+
|
|
23
|
+
```tsx
|
|
24
|
+
import {
|
|
25
|
+
ApiTablesHostProvider,
|
|
26
|
+
ReactApiTable,
|
|
27
|
+
useTableStructure,
|
|
28
|
+
setExternalStoreGetter,
|
|
29
|
+
} from 'bolesa-apitables';
|
|
30
|
+
import { axiosTable } from '@/lib/axios';
|
|
31
|
+
import { store } from '@/store/store';
|
|
32
|
+
import { Button } from '@/components/ui/button';
|
|
33
|
+
import { Card } from '@/components/ui/card';
|
|
34
|
+
import { FullPageTableLoader } from '@/components/Loaders';
|
|
35
|
+
import Popup from '@/components/Popup';
|
|
36
|
+
import { Link } from '@/i18n/navigation';
|
|
37
|
+
import { useLocale, useTranslations } from 'next-intl';
|
|
38
|
+
import useSecureLS from '@/hooks/useSecureLS';
|
|
39
|
+
|
|
40
|
+
setExternalStoreGetter(() => store);
|
|
41
|
+
|
|
42
|
+
function MyTablePage() {
|
|
43
|
+
const { getTableStructure, tableStructure, tableStructureLoading } = useTableStructure();
|
|
44
|
+
|
|
45
|
+
useEffect(() => {
|
|
46
|
+
getTableStructure({ table: '/api-table/control-tables/load-table/my-feature' });
|
|
47
|
+
}, []);
|
|
48
|
+
|
|
49
|
+
return (
|
|
50
|
+
<ApiTablesHostProvider
|
|
51
|
+
config={{
|
|
52
|
+
axiosTable,
|
|
53
|
+
getExternalStore: () => store,
|
|
54
|
+
useOutScopeRefresher: () => useSelector((s: any) => s.app.outScopeTableRefresher),
|
|
55
|
+
useLocale,
|
|
56
|
+
useTranslations,
|
|
57
|
+
usePathname,
|
|
58
|
+
useSecureLS,
|
|
59
|
+
Link,
|
|
60
|
+
components: {
|
|
61
|
+
Button,
|
|
62
|
+
Card,
|
|
63
|
+
FullPageTableLoader,
|
|
64
|
+
Popup,
|
|
65
|
+
// …map every primitive your tables use (see types)
|
|
66
|
+
},
|
|
67
|
+
customControls: [
|
|
68
|
+
{ match: '/cl/products', component: EditProduct },
|
|
69
|
+
{ match: '/cl/categories', component: EditCategory },
|
|
70
|
+
],
|
|
71
|
+
bulkActionModals: [
|
|
72
|
+
{ actionKey: 'create_withdrawal_bulk', component: AddToCreditBulkModal },
|
|
73
|
+
],
|
|
74
|
+
}}
|
|
75
|
+
>
|
|
76
|
+
<ReactApiTable table={tableStructure} tableStructureLoading={tableStructureLoading} />
|
|
77
|
+
</ApiTablesHostProvider>
|
|
78
|
+
);
|
|
79
|
+
}
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
## What stays in the host app
|
|
83
|
+
|
|
84
|
+
| Item | Why |
|
|
85
|
+
| --- | --- |
|
|
86
|
+
| `custom-controls/*` | Feature-specific forms (products, carriers, withdrawals, …) |
|
|
87
|
+
| `axios` instances | Auth headers and base URLs are app-specific |
|
|
88
|
+
| Global Redux store | Cart, loader, `outScopeTableRefresher` |
|
|
89
|
+
| shadcn / UI primitives | Injected via `config.components` |
|
|
90
|
+
| Backend APIs | Structure and query endpoints |
|
|
91
|
+
|
|
92
|
+
## Publish
|
|
93
|
+
|
|
94
|
+
```bash
|
|
95
|
+
pnpm install
|
|
96
|
+
pnpm build
|
|
97
|
+
npm login
|
|
98
|
+
npm publish --access public
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
Bump version in `package.json` before each release.
|
|
102
|
+
|
|
103
|
+
## Sync from bolesa-app-ui
|
|
104
|
+
|
|
105
|
+
When the in-app module changes:
|
|
106
|
+
|
|
107
|
+
```bash
|
|
108
|
+
./scripts/sync-from-app.sh /path/to/bolesa-app-ui
|
|
109
|
+
pnpm build
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
## Docs
|
|
113
|
+
|
|
114
|
+
Full frontend reference: [bolesa-apitables-docs](https://github.com/mhmdhasan/bolesa-apitables-docs)
|