@cfast/joy 0.0.1
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 +18 -0
- package/dist/index.d.ts +199 -0
- package/dist/index.js +1151 -0
- package/llms.txt +108 -0
- package/package.json +65 -0
package/llms.txt
ADDED
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
# @cfast/joy
|
|
2
|
+
|
|
3
|
+
> Joy UI (MUI) styled component implementations for `@cfast/ui` — data tables, page shells, action buttons, file uploads, and more.
|
|
4
|
+
|
|
5
|
+
## When to use
|
|
6
|
+
|
|
7
|
+
Use `@cfast/joy` when you want MUI Joy UI styled implementations of `@cfast/ui` components. Install alongside `@cfast/ui` (the headless core). Import styled components from `@cfast/joy`. Import hooks and headless logic from `@cfast/ui`.
|
|
8
|
+
|
|
9
|
+
## Exports
|
|
10
|
+
|
|
11
|
+
### Actions & feedback
|
|
12
|
+
- `ActionButton` -- permission-aware button wrapping a `@cfast/actions` action. Props: `action`, `input`, `whenForbidden`, `confirmation`.
|
|
13
|
+
- `ConfirmDialog` -- standalone confirmation dialog.
|
|
14
|
+
- `ToastProvider` -- mount once in root layout for toast notifications.
|
|
15
|
+
- `FormStatus` -- renders success/error/validation from action results.
|
|
16
|
+
|
|
17
|
+
### Empty state & navigation
|
|
18
|
+
- `EmptyState` -- permission-aware empty state with optional create CTA.
|
|
19
|
+
- `NavigationProgress` -- thin progress bar during React Router navigation.
|
|
20
|
+
|
|
21
|
+
### Layout
|
|
22
|
+
- `PageContainer` -- title + breadcrumb + tabs + action toolbar.
|
|
23
|
+
- `AppShell` -- sidebar + header + content layout. Sub-components: `AppShellSidebar`, `AppShellHeader`.
|
|
24
|
+
- `UserMenu` -- header dropdown with avatar, role badge, auth actions.
|
|
25
|
+
|
|
26
|
+
### Data
|
|
27
|
+
- `DataTable` -- table with sorting, selection, row actions, skeleton loading. Accepts `data` (pagination result), `table` (Drizzle), `columns`, `actions`, `selectable`.
|
|
28
|
+
- `FilterBar` -- URL-synced filters. Accepts `table`, `filters`, `searchable`.
|
|
29
|
+
- `BulkActionBar` -- toolbar for selected rows with bulk actions.
|
|
30
|
+
|
|
31
|
+
### File components
|
|
32
|
+
- `DropZone` -- drag-and-drop upload. Integrates with `@cfast/storage`'s `useUpload()`.
|
|
33
|
+
- `ImagePreview` -- displays image from storage with signed URL handling.
|
|
34
|
+
- `FileList` -- list of uploaded files with download/delete.
|
|
35
|
+
|
|
36
|
+
### Composite views
|
|
37
|
+
- `ListView` -- full page: title + filters + data table + pagination + empty state + bulk actions.
|
|
38
|
+
- `DetailView` -- read-only detail page for a single record. Auto-lays out TypedFields.
|
|
39
|
+
|
|
40
|
+
### Utilities
|
|
41
|
+
- `AvatarWithInitials` -- avatar with automatic initials fallback.
|
|
42
|
+
- `RoleBadge` -- colored chip for user role.
|
|
43
|
+
- `ImpersonationBanner` -- persistent banner when impersonating.
|
|
44
|
+
|
|
45
|
+
### Re-exports
|
|
46
|
+
- `PermissionGate` -- re-exported from `@cfast/ui` for convenience.
|
|
47
|
+
|
|
48
|
+
### Auth
|
|
49
|
+
- `joyLoginComponents` -- Joy UI styled login page component slots for `@cfast/auth`'s `<LoginPage>`.
|
|
50
|
+
|
|
51
|
+
## Usage Examples
|
|
52
|
+
|
|
53
|
+
### Full list page
|
|
54
|
+
|
|
55
|
+
```typescript
|
|
56
|
+
import { ListView } from "@cfast/joy";
|
|
57
|
+
import { usePagination } from "@cfast/pagination";
|
|
58
|
+
import { posts } from "~/db/schema";
|
|
59
|
+
|
|
60
|
+
function PostsPage() {
|
|
61
|
+
const pagination = usePagination<Post>();
|
|
62
|
+
return (
|
|
63
|
+
<ListView
|
|
64
|
+
title="Blog Posts"
|
|
65
|
+
data={pagination}
|
|
66
|
+
table={posts}
|
|
67
|
+
columns={["title", "author", "published", "createdAt"]}
|
|
68
|
+
actions={composed.client}
|
|
69
|
+
filters={[{ column: "published", type: "select", options: publishedOptions }]}
|
|
70
|
+
searchable={["title", "content"]}
|
|
71
|
+
createAction={createPost.client}
|
|
72
|
+
selectable
|
|
73
|
+
/>
|
|
74
|
+
);
|
|
75
|
+
}
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
### Permission-aware button with confirmation
|
|
79
|
+
|
|
80
|
+
```typescript
|
|
81
|
+
import { ActionButton } from "@cfast/joy";
|
|
82
|
+
|
|
83
|
+
<ActionButton
|
|
84
|
+
action={deletePost}
|
|
85
|
+
input={{ postId }}
|
|
86
|
+
whenForbidden="disable"
|
|
87
|
+
confirmation="Delete this post?"
|
|
88
|
+
>
|
|
89
|
+
Delete
|
|
90
|
+
</ActionButton>
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
## Integration
|
|
94
|
+
|
|
95
|
+
- **@cfast/ui** -- Provides the headless core (hooks, logic, plugin API). `@cfast/joy` is a styled plugin for `@cfast/ui`.
|
|
96
|
+
- **@cfast/actions** -- `ActionButton`, `PermissionGate`, `BulkActionBar` consume action descriptors.
|
|
97
|
+
- **@cfast/pagination** -- `DataTable` and `ListView` accept pagination hook results.
|
|
98
|
+
- **@cfast/db** -- Drizzle schema drives column inference, filter type inference, and field type inference.
|
|
99
|
+
- **@cfast/auth** -- `UserMenu` reads `useCurrentUser()`. `joyLoginComponents` provides styled login slots.
|
|
100
|
+
- **@cfast/storage** -- `DropZone` integrates with `useUpload()`. `ImagePreview`/`FileList` use storage URLs.
|
|
101
|
+
- **@cfast/admin** -- Admin uses `ListView`, `DetailView`, `DataTable`, `FilterBar`, `AppShell`, etc.
|
|
102
|
+
|
|
103
|
+
## Common Mistakes
|
|
104
|
+
|
|
105
|
+
- Importing from `@cfast/joy` on the server -- Joy components are client-only. Use headless exports from `@cfast/ui` for server-safe code.
|
|
106
|
+
- Forgetting `<ToastProvider>` in root layout -- `useToast()` and `useActionToast()` throw without it.
|
|
107
|
+
- Forgetting `<ConfirmProvider>` -- `useConfirm()` and `ActionButton` with `confirmation` need it.
|
|
108
|
+
- Passing raw data arrays to `DataTable` instead of a pagination result from `usePagination()`.
|
package/package.json
ADDED
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@cfast/joy",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"description": "Joy UI plugin for @cfast/ui — styled components powered by MUI Joy",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"repository": {
|
|
7
|
+
"type": "git",
|
|
8
|
+
"url": "https://github.com/DanielMSchmidt/cfast.git",
|
|
9
|
+
"directory": "packages/joy"
|
|
10
|
+
},
|
|
11
|
+
"type": "module",
|
|
12
|
+
"main": "dist/index.js",
|
|
13
|
+
"types": "dist/index.d.ts",
|
|
14
|
+
"exports": {
|
|
15
|
+
".": {
|
|
16
|
+
"import": "./dist/index.js",
|
|
17
|
+
"types": "./dist/index.d.ts"
|
|
18
|
+
}
|
|
19
|
+
},
|
|
20
|
+
"files": ["dist", "llms.txt"],
|
|
21
|
+
"sideEffects": false,
|
|
22
|
+
"publishConfig": {
|
|
23
|
+
"access": "public"
|
|
24
|
+
},
|
|
25
|
+
"scripts": {
|
|
26
|
+
"build": "tsup src/index.ts --format esm --dts",
|
|
27
|
+
"dev": "tsup src/index.ts --format esm --dts --watch",
|
|
28
|
+
"typecheck": "tsc --noEmit",
|
|
29
|
+
"lint": "eslint src/",
|
|
30
|
+
"test": "vitest run",
|
|
31
|
+
"storybook": "storybook dev -p 6006",
|
|
32
|
+
"build-storybook": "storybook build"
|
|
33
|
+
},
|
|
34
|
+
"peerDependencies": {
|
|
35
|
+
"react": ">=19",
|
|
36
|
+
"react-dom": ">=19",
|
|
37
|
+
"react-router": ">=7"
|
|
38
|
+
},
|
|
39
|
+
"dependencies": {
|
|
40
|
+
"@cfast/actions": "workspace:*",
|
|
41
|
+
"@cfast/auth": "workspace:*",
|
|
42
|
+
"@cfast/ui": "workspace:*",
|
|
43
|
+
"@emotion/react": "^11.14.0",
|
|
44
|
+
"@emotion/styled": "^11.14.1",
|
|
45
|
+
"@mui/joy": "^5.0.0-beta.52",
|
|
46
|
+
"@mui/material": "^6.5.0",
|
|
47
|
+
"sonner": "^2.0.3"
|
|
48
|
+
},
|
|
49
|
+
"devDependencies": {
|
|
50
|
+
"@storybook/react": "^8.6.14",
|
|
51
|
+
"@storybook/react-vite": "^8.6.14",
|
|
52
|
+
"@testing-library/react": "^16.3.0",
|
|
53
|
+
"@types/react": "^19.1.6",
|
|
54
|
+
"@types/react-dom": "^19.1.6",
|
|
55
|
+
"drizzle-orm": "^0.45.1",
|
|
56
|
+
"jsdom": "^26.1.0",
|
|
57
|
+
"react": "^19.1.0",
|
|
58
|
+
"react-dom": "^19.1.0",
|
|
59
|
+
"react-router": "^7.12.0",
|
|
60
|
+
"storybook": "^8.6.14",
|
|
61
|
+
"tsup": "^8",
|
|
62
|
+
"typescript": "^5.7",
|
|
63
|
+
"vitest": "^4.1.0"
|
|
64
|
+
}
|
|
65
|
+
}
|