@olympusoss/canvas 2.6.24 → 2.6.25
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 +60 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
# @olympusoss/canvas
|
|
2
|
+
|
|
3
|
+
The Olympus design system — a React + Tailwind component library used by every Olympus app (Athena, Hera, Daedalus, …). Built on top of Radix primitives, Lucide icons, and Tailwind v4.
|
|
4
|
+
|
|
5
|
+
**Source-only package.** Ships TypeScript source via `main: ./src/index.ts` rather than a built bundle, so consumers tree-shake what they actually use and get accurate types from the source.
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
```sh
|
|
10
|
+
npm install @olympusoss/canvas
|
|
11
|
+
# peers
|
|
12
|
+
npm install react react-dom
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
Optional peers (only install if you use the related components):
|
|
16
|
+
|
|
17
|
+
```sh
|
|
18
|
+
npm install @rjsf/core @rjsf/utils @rjsf/validator-ajv8 # SchemaForm
|
|
19
|
+
npm install libphonenumber-js # PhoneInput
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Quick start
|
|
23
|
+
|
|
24
|
+
```tsx
|
|
25
|
+
import "@olympusoss/canvas/styles/tokens.css";
|
|
26
|
+
import { Button, Icon } from "@olympusoss/canvas";
|
|
27
|
+
|
|
28
|
+
export default function App() {
|
|
29
|
+
return (
|
|
30
|
+
<Button variant="default" size="sm">
|
|
31
|
+
<Icon name="Plus" />
|
|
32
|
+
New identity
|
|
33
|
+
</Button>
|
|
34
|
+
);
|
|
35
|
+
}
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
Tailwind v4 setup (in your app's CSS entrypoint):
|
|
39
|
+
|
|
40
|
+
```css
|
|
41
|
+
@import "tailwindcss";
|
|
42
|
+
@source "../node_modules/@olympusoss/canvas/src/**/*.{ts,tsx}";
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
That `@source` directive tells Tailwind to scan Canvas's source files so utility classes used by Canvas components are included in your build.
|
|
46
|
+
|
|
47
|
+
## Components
|
|
48
|
+
|
|
49
|
+
- **Atoms** — Button, Input, Badge, Icon, Avatar, Switch, Slider, …
|
|
50
|
+
- **Molecules** — PageHeader, StatCard, SectionCard, StatusBadge, FieldDisplay, EmptyState, DataTable's pieces, …
|
|
51
|
+
- **Organisms** — DashboardGrid, DataTable, Sidebar, Dialog, Sheet, Drawer, Popover, Form, Tabs, CodeEditor, MarkdownEditor, RichTextEditor, …
|
|
52
|
+
- **Charts** — Theme-aware Recharts wrappers + extras: Sparkline, Gauge, ActivityHeatmap, LabeledBarList, ServiceHealthList, StackedBar, WorldHeatMap, …
|
|
53
|
+
|
|
54
|
+
Browse the live docs for usage, props, and interactive examples for every component:
|
|
55
|
+
|
|
56
|
+
→ **https://olympusoss.github.io/canvas/**
|
|
57
|
+
|
|
58
|
+
## License
|
|
59
|
+
|
|
60
|
+
MIT — see [LICENSE](./LICENSE) (or the `license` field in `package.json`).
|