@flytedan/flytebot-design-system 0.1.0 → 0.1.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 +87 -0
- package/package.json +13 -1
package/README.md
ADDED
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
# @flytedan/flytebot-design-system
|
|
2
|
+
|
|
3
|
+
The flytedesk Design System's Media Planner UI kit, ported to a standalone,
|
|
4
|
+
framework-agnostic-consumer npm package: React 18 + TypeScript components,
|
|
5
|
+
tokens, and business-logic kits for flytedesk apps.
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
pnpm add @flytedan/flytebot-design-system
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
`react` and `react-dom` (^18.3.1) are peer dependencies.
|
|
14
|
+
|
|
15
|
+
## Usage
|
|
16
|
+
|
|
17
|
+
Import the vendored CSS once, near your app's entry point, then use components
|
|
18
|
+
directly:
|
|
19
|
+
|
|
20
|
+
```tsx
|
|
21
|
+
import "@flytedan/flytebot-design-system/styles/tokens.css";
|
|
22
|
+
import "@flytedan/flytebot-design-system/styles/foundations.css";
|
|
23
|
+
import "@flytedan/flytebot-design-system/styles/components.css";
|
|
24
|
+
|
|
25
|
+
import { Button, Card, DataTable } from "@flytedan/flytebot-design-system";
|
|
26
|
+
|
|
27
|
+
function Example() {
|
|
28
|
+
return (
|
|
29
|
+
<Card>
|
|
30
|
+
<Button variant="primary">Save</Button>
|
|
31
|
+
</Card>
|
|
32
|
+
);
|
|
33
|
+
}
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
## What's in the package
|
|
37
|
+
|
|
38
|
+
**32 core components** across seven groups — actions (Button, IconButton,
|
|
39
|
+
SegmentedControl, Popover, Menu, MenuButton), forms (Input, NumberInput,
|
|
40
|
+
Textarea, Select, DatePicker, TimePicker, Checkbox, Radio, Switch, Slider,
|
|
41
|
+
RangeSlider, FileGrid, Dropzone, MarkdownEditor), surfaces (Card, CardRow,
|
|
42
|
+
Collapsible, Modal, Drawer), data (DataTable, Pagination, SortMenu, StatTile,
|
|
43
|
+
Meter, CsiBadge, CsiMeter, CsiHero, Markdown, CodeBlock, DiffBlock, StepList,
|
|
44
|
+
SegmentedMeter, QuotaRow, Clamp, RelativeTime), feedback (Badge, Tag, Avatar,
|
|
45
|
+
AvatarStack, Flag, Toast, Tooltip, EmptyState, KeyHint), loading (Skeleton,
|
|
46
|
+
SkeletonText, LoadingRegion, Spinner, ProgressBar), and navigation (Tabs,
|
|
47
|
+
SidebarNav, Topbar).
|
|
48
|
+
|
|
49
|
+
**Platform components** for identity/session UI — AccountMenu,
|
|
50
|
+
ApiSpecBrowser, Gate/FeatureGate/PermissionDenied/PermissionHint,
|
|
51
|
+
ProfilePage, ComingSoon, RoadmapTimeline, ModeSwitch/TestModeBar.
|
|
52
|
+
|
|
53
|
+
**Planner components** for media-planning UIs — SaturationDistribution,
|
|
54
|
+
MixGap, ChannelContribution, SurroundSound, BudgetReallocator, ChannelMeta.
|
|
55
|
+
|
|
56
|
+
**Chat components** — AgentChatPanel, ChatComposer, ChatSessionBar,
|
|
57
|
+
ChatTranscript, ChatTurn, chatEngine.
|
|
58
|
+
|
|
59
|
+
**Business-logic kits** (framework-light, no UI) — SessionKit (roles,
|
|
60
|
+
permissions, feature flags), QueryKit (paged/sorted/filtered list state via
|
|
61
|
+
`useServerTable`), RuntimeKit (feature-completeness/live-vs-test derivation),
|
|
62
|
+
FileKit, MockJobKit (`{ jobId } → poll` async job simulation), VersionKit
|
|
63
|
+
(append-only version history stores).
|
|
64
|
+
|
|
65
|
+
Every export has its own documented page — props transcribed from the real
|
|
66
|
+
TypeScript interfaces, a live interactive example, and a usage snippet — in
|
|
67
|
+
the docs site included in this repo (not yet published as a hosted site):
|
|
68
|
+
|
|
69
|
+
```bash
|
|
70
|
+
git clone git@github.com:flytedan/flytebot-design-system.git
|
|
71
|
+
cd flytebot-design-system
|
|
72
|
+
pnpm install
|
|
73
|
+
pnpm run docs
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
## Development
|
|
77
|
+
|
|
78
|
+
```bash
|
|
79
|
+
pnpm run build # tsup — emits dist/{index.js,index.cjs,index.d.ts}
|
|
80
|
+
pnpm run typecheck # tsc --noEmit
|
|
81
|
+
pnpm run lint # eslint .
|
|
82
|
+
pnpm run test # vitest run
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
## License
|
|
86
|
+
|
|
87
|
+
UNLICENSED — internal flytedesk use only.
|
package/package.json
CHANGED
|
@@ -1,14 +1,26 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@flytedan/flytebot-design-system",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "flytedesk Design System — shared component library, tokens, and business-logic kits for flytedesk apps.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "UNLICENSED",
|
|
7
|
+
"author": "flytedesk",
|
|
8
|
+
"homepage": "https://github.com/flytedan/flytebot-design-system#readme",
|
|
9
|
+
"keywords": [
|
|
10
|
+
"react",
|
|
11
|
+
"design-system",
|
|
12
|
+
"component-library",
|
|
13
|
+
"flytedesk"
|
|
14
|
+
],
|
|
7
15
|
"repository": {
|
|
8
16
|
"type": "git",
|
|
9
17
|
"url": "git+ssh://git@github.com/flytedan/flytebot-design-system.git"
|
|
10
18
|
},
|
|
19
|
+
"bugs": {
|
|
20
|
+
"url": "https://github.com/flytedan/flytebot-design-system/issues"
|
|
21
|
+
},
|
|
11
22
|
"files": [
|
|
23
|
+
"README.md",
|
|
12
24
|
"dist",
|
|
13
25
|
"styles"
|
|
14
26
|
],
|