@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.
Files changed (4) hide show
  1. package/README.md +57 -23
  2. package/package.json +44 -44
  3. package/src/auth-labels.js +1 -1
  4. package/src/components/CommandCenter.jsx +1 -1
package/README.md CHANGED
@@ -1,40 +1,74 @@
1
1
  # @ciromaciel/dashboard-kit
2
2
 
3
- Os componentes que os sete painéis da RiLiGar compartilham.
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
- ## O que entra aqui
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
- O que é **o mesmo** nos painéis. Não entra o que é do produto — o semáforo de
16
- estado do Monitors, a régua de moeda do Payments. A linha divisória: se um
17
- painel precisou mudar o componente para servir ao produto, o componente ainda
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
- ## Por que não há build
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
- O pacote publica o fonte. Os sete painéis são Vite, que compila JSX de
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
- ## Peers
71
+ - [Documentation](https://myinfrastructure.click)
72
+ - [Package on npm](https://www.npmjs.com/package/@ciromaciel/dashboard-kit)
38
73
 
39
- `@mantine/core`, `@mantine/hooks`, `@mantine/notifications`,
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
- "name": "@ciromaciel/dashboard-kit",
3
- "version": "1.0.0",
4
- "license": "MIT",
5
- "type": "module",
6
- "description": "Os componentes que os sete painéis da RiLiGar compartilham: a tabela, a espera, o vazio, a confirmação destrutiva e a marca.",
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
- "repository": {
42
- "type": "git",
43
- "url": "git+https://github.com/riligar/packages.git",
44
- "directory": "dashboard-kit"
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/riligar/infrastructure/blob/prod/apps/website/docs/2026-09-10-idioma-do-codigo.md: not
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
package/src/components/CommandCenter.jsx CHANGED
@@ -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/riligar/infrastructure/blob/prod/apps/website/docs/2026-09-10-idioma-do-codigo.md). The component, the file and the
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