@ciromaciel/dashboard-kit 1.0.0 → 1.0.2
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 +57 -23
- package/package.json +44 -44
- package/src/auth-labels.js +1 -1
- package/src/components/CommandCenter.jsx +1 -1
package/README.md
CHANGED
|
@@ -1,40 +1,74 @@
|
|
|
1
1
|
# @ciromaciel/dashboard-kit
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
The components every dashboard shares: table, empty state, loading state,
|
|
4
|
+
destructive confirm and wordmark. Built on Mantine.
|
|
5
|
+
|
|
6
|
+
## Installation
|
|
4
7
|
|
|
5
8
|
```bash
|
|
6
9
|
bun add @ciromaciel/dashboard-kit
|
|
7
10
|
```
|
|
8
11
|
|
|
12
|
+
Peers: `@mantine/core`, `@mantine/hooks`, `@mantine/notifications`,
|
|
13
|
+
`@tabler/icons-react`, `react`.
|
|
14
|
+
|
|
15
|
+
## Quick start
|
|
16
|
+
|
|
9
17
|
```jsx
|
|
10
18
|
import { DataTable, EmptyState, AuthLoader } from '@ciromaciel/dashboard-kit'
|
|
19
|
+
|
|
20
|
+
function Projects({ rows, loading }) {
|
|
21
|
+
if (loading) return <AuthLoader />
|
|
22
|
+
|
|
23
|
+
return (
|
|
24
|
+
<DataTable
|
|
25
|
+
columns={[{ key: 'name', label: 'Name' }, { key: 'status', label: 'Status', hideBelow: true }]}
|
|
26
|
+
rows={rows}
|
|
27
|
+
getRowKey={row => row.id}
|
|
28
|
+
onRowClick={row => navigate(`/projects/${row.id}`)}
|
|
29
|
+
emptyState={<EmptyState title="No projects yet" description="Create your first one." actionLabel="New project" onAction={create} />}
|
|
30
|
+
/>
|
|
31
|
+
)
|
|
32
|
+
}
|
|
11
33
|
```
|
|
12
34
|
|
|
13
|
-
##
|
|
35
|
+
## API
|
|
36
|
+
|
|
37
|
+
| Export | What it is |
|
|
38
|
+
| --- | --- |
|
|
39
|
+
| `DataTable` · `TableSkeleton` · `TableToolbar` · `templateFor` · `ROW_PADDING` · `HEAD_PADDING` | The table, its toolbar and its waiting state |
|
|
40
|
+
| `EmptyState` | The empty — which is not the same thing as "still loading" |
|
|
41
|
+
| `SectionCard` · `Field` · `FieldStacked` · `CardActions` | The section card |
|
|
42
|
+
| `PageHeader` | Title and breadcrumb |
|
|
43
|
+
| `HoldToConfirmButton` · `HoldToConfirmIcon` | The reversible destructive confirm |
|
|
44
|
+
| `DeleteModal` · `deleteTitleScale` | The top of the escalation: reversible → hold → this |
|
|
45
|
+
| `AuthLoader` · `AuthScreen` · `AUTH_LABELS` · `AUTH_TEXTS` | The moment the dashboard does not know who you are |
|
|
46
|
+
| `Wordmark` | The mark, in two roles (`variant="mark"` / `"label"`). The name comes by prop |
|
|
47
|
+
| `ZenLabel` · `notify` · `NOTIFICATIONS_PROPS` · `NOTIFY_DESCRIPTION_CSS` · `notificationTheme` | Label and notice |
|
|
48
|
+
| `DashboardFrame` · `SidebarShell` · `SIDEBAR_WIDTH` | The frame and the sidebar |
|
|
49
|
+
| `MenuItem` · `NavItem` · `GroupLabel` · `ResourceItem` · `ActiveResource` | The sidebar's pieces |
|
|
50
|
+
| `Metric` · `CommandCenter` | The first screen |
|
|
51
|
+
| `PlanBanner` | The billing banner: it warns, it never blocks |
|
|
52
|
+
| `SupportModal` · `HealthRow` · `useHealthCheck` | Support and health |
|
|
53
|
+
| `CardSkeleton` · `ListSkeleton` · `MoreResults` | Loading and "load more" |
|
|
54
|
+
| `Terminal` · `TerminalOutput` | Command output |
|
|
55
|
+
| `usePaginatedList` · `useDebounce` · `useExclusiveModal` | The hooks |
|
|
56
|
+
|
|
57
|
+
## What goes in here
|
|
14
58
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
não é de todos.
|
|
59
|
+
What is **the same** across dashboards. What belongs to a product stays out — a
|
|
60
|
+
status light, a currency rule. The dividing line: if a dashboard had to change
|
|
61
|
+
the component to serve its product, the component is not everyone's yet.
|
|
19
62
|
|
|
20
|
-
|
|
21
|
-
|---|---|
|
|
22
|
-
| `DataTable` · `TableSkeleton` · `templateFor` | a tabela e a espera dela |
|
|
23
|
-
| `EmptyState` | o vazio — que não é a mesma coisa que "ainda carregando" |
|
|
24
|
-
| `SectionCard` · `Field` · `FieldStacked` · `CardActions` | o cartão de seção |
|
|
25
|
-
| `PageHeader` | título e trilha |
|
|
26
|
-
| `HoldToConfirmButton` · `HoldToConfirmIcon` | a confirmação destrutiva |
|
|
27
|
-
| `AuthLoader` | a tela do instante em que o painel não sabe quem você é |
|
|
28
|
-
| `Wordmark` | a marca, em dois papéis. O nome vem por prop |
|
|
29
|
-
| `ZenLabel` · `notify` | rótulo e aviso |
|
|
63
|
+
## Why there is no build
|
|
30
64
|
|
|
31
|
-
|
|
65
|
+
The package publishes source. The consumers are Vite apps, which compile JSX
|
|
66
|
+
from a dependency without ceremony — a build step would only produce what the
|
|
67
|
+
consumer already knows how to produce. One less moving part to break.
|
|
32
68
|
|
|
33
|
-
|
|
34
|
-
dependência sem cerimônia — um passo de build só produziria o que o consumidor
|
|
35
|
-
já sabe produzir. Menos uma engrenagem para quebrar.
|
|
69
|
+
## Links
|
|
36
70
|
|
|
37
|
-
|
|
71
|
+
- [Documentation](https://myinfrastructure.click)
|
|
72
|
+
- [Package on npm](https://www.npmjs.com/package/@ciromaciel/dashboard-kit)
|
|
38
73
|
|
|
39
|
-
|
|
40
|
-
`@tabler/icons-react`, `react`. Todos já presentes nos sete painéis.
|
|
74
|
+
MIT © [Ciro Cesar Maciel](https://ciromaciel.click)
|
package/package.json
CHANGED
|
@@ -1,46 +1,46 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
"
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
2
|
+
"name": "@ciromaciel/dashboard-kit",
|
|
3
|
+
"version": "1.0.2",
|
|
4
|
+
"license": "MIT",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"description": "The components every dashboard shares: table, empty state, loading state, destructive confirm and wordmark.",
|
|
7
|
+
"main": "src/index.js",
|
|
8
|
+
"files": [
|
|
9
|
+
"src",
|
|
10
|
+
"README.md"
|
|
11
|
+
],
|
|
12
|
+
"exports": {
|
|
13
|
+
".": "./src/index.js"
|
|
14
|
+
},
|
|
15
|
+
"scripts": {
|
|
16
|
+
"test": "bun test tests/",
|
|
17
|
+
"format": "prettier --write \"src/**/*.{js,jsx,css}\"",
|
|
18
|
+
"format:check": "prettier --check \"src/**/*.{js,jsx,css}\""
|
|
19
|
+
},
|
|
20
|
+
"peerDependencies": {
|
|
21
|
+
"@mantine/core": "^7.0.0 || ^8.0.0",
|
|
22
|
+
"@mantine/hooks": "^7.0.0 || ^8.0.0",
|
|
23
|
+
"@tabler/icons-react": "^3.0.0",
|
|
24
|
+
"react": "^18.0.0 || ^19.0.0",
|
|
25
|
+
"@mantine/notifications": "^7.0.0 || ^8.0.0"
|
|
26
|
+
},
|
|
27
|
+
"devDependencies": {
|
|
28
|
+
"@happy-dom/global-registrator": "^20.14.3",
|
|
29
|
+
"@mantine/core": "^8.0.0",
|
|
30
|
+
"@mantine/hooks": "^8.0.0",
|
|
31
|
+
"@mantine/notifications": "^8.0.0",
|
|
32
|
+
"@tabler/icons-react": "^3.0.0",
|
|
33
|
+
"@testing-library/react": "^16.0.0",
|
|
34
|
+
"happy-dom": "^15.0.0",
|
|
35
|
+
"react": "^19.0.0",
|
|
36
|
+
"react-dom": "^19.0.0"
|
|
37
|
+
},
|
|
38
|
+
"publishConfig": {
|
|
39
|
+
"access": "public"
|
|
40
|
+
},
|
|
41
|
+
"homepage": "https://myinfrastructure.click",
|
|
42
|
+
"bugs": {
|
|
43
|
+
"url": "https://myinfrastructure.click"
|
|
44
|
+
},
|
|
45
|
+
"author": "Ciro Cesar Maciel <maciel.ciro@icloud.com> (https://ciromaciel.click)"
|
|
46
46
|
}
|
package/src/auth-labels.js
CHANGED
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
*
|
|
15
15
|
* The keys are the SDK's contract (`emailPlaceholder`, `sendCodeButton`) and
|
|
16
16
|
* belong to the code. The values are what a person reads on screen. That is the
|
|
17
|
-
* boundary the house draws in https://github.com/
|
|
17
|
+
* boundary the house draws in https://github.com/ciro-maciel/infrastructure/blob/prod/docs/2026-09-10-idioma-do-codigo.md: not
|
|
18
18
|
* "string vs. not-string", but WHO READS IT.
|
|
19
19
|
*
|
|
20
20
|
* WHY THERE IS ONLY ONE SCREEN HERE
|
|
@@ -18,7 +18,7 @@ import { Metric } from './Metric'
|
|
|
18
18
|
*
|
|
19
19
|
* It is in Portuguese because the rule is the reader, not the file: what a
|
|
20
20
|
* person reads stays in Portuguese, identifiers and comments stay in English
|
|
21
|
-
* (https://github.com/
|
|
21
|
+
* (https://github.com/ciro-maciel/infrastructure/blob/prod/docs/2026-09-10-idioma-do-codigo.md). The component, the file and the
|
|
22
22
|
* export keep the English name; only the rendered word changed.
|
|
23
23
|
*
|
|
24
24
|
* Five dashboards open with a GREETING ("Boa tarde, Ciro.") and the Hoster opens
|