@tramo-digital/react-ui 0.0.0-alpha → 0.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 +91 -13
- package/dist/cjs/assets/main.css +1 -1
- package/dist/cjs/package.json +1 -1
- package/dist/cjs/ui/compositions/Hero/Hero.cjs.map +1 -1
- package/dist/cjs/ui/compositions/Tabs/Tabs.cjs +1 -1
- package/dist/cjs/ui/compositions/Tabs/Tabs.cjs.map +1 -1
- package/dist/esm/assets/main.css +1 -1
- package/dist/esm/package.json +1 -1
- package/dist/esm/ui/compositions/Hero/Hero.js.map +1 -1
- package/dist/esm/ui/compositions/Tabs/Tabs.js +3 -0
- package/dist/esm/ui/compositions/Tabs/Tabs.js.map +1 -1
- package/dist/types/ui/compositions/Tabs/Tabs.d.ts.map +1 -1
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -15,9 +15,9 @@ Tramo transformation pipeline.
|
|
|
15
15
|
## Installation
|
|
16
16
|
|
|
17
17
|
```bash
|
|
18
|
-
npm install @tramo-digital/react-ui
|
|
18
|
+
npm install @tramo-digital/react-ui @tramo-digital/styles
|
|
19
19
|
# or
|
|
20
|
-
pnpm add @tramo-digital/react-ui
|
|
20
|
+
pnpm add @tramo-digital/react-ui @tramo-digital/styles
|
|
21
21
|
```
|
|
22
22
|
|
|
23
23
|
### Peer dependencies
|
|
@@ -27,20 +27,97 @@ pnpm add @tramo-digital/react-ui
|
|
|
27
27
|
| `react` | 19.0.0 |
|
|
28
28
|
| `react-dom` | 19.0.0 |
|
|
29
29
|
|
|
30
|
-
###
|
|
30
|
+
### Required companion packages
|
|
31
31
|
|
|
32
|
-
|
|
32
|
+
| Package | Purpose |
|
|
33
|
+
| -------------------------- | -------------------------------- |
|
|
34
|
+
| `@tramo-digital/styles` | Design tokens (CSS custom properties) |
|
|
33
35
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
36
|
+
> [!IMPORTANT]
|
|
37
|
+
> You must install `@tramo-digital/styles` alongside this package.
|
|
38
|
+
> Without the design tokens, components render without colors,
|
|
39
|
+
> spacing, typography, and other visual properties.
|
|
40
|
+
|
|
41
|
+
## CSS setup
|
|
42
|
+
|
|
43
|
+
Every consumer must import **two CSS files** at the root of the
|
|
44
|
+
application. Both are required for components to render correctly.
|
|
45
|
+
|
|
46
|
+
```tsx
|
|
47
|
+
// 1. Design tokens — colors, spacing, typography, breakpoints
|
|
48
|
+
import '@tramo-digital/styles/css/min.css';
|
|
49
|
+
|
|
50
|
+
// 2. Component styles — scoped CSS modules for every component
|
|
51
|
+
import '@tramo-digital/react-ui/style.css';
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
Import order matters: design tokens must load **before** component
|
|
55
|
+
styles so that CSS custom properties are available when component
|
|
56
|
+
stylesheets reference them.
|
|
57
|
+
|
|
58
|
+
### Where to place the imports
|
|
59
|
+
|
|
60
|
+
Place both imports in your application's entry point so they load once
|
|
61
|
+
and are available globally.
|
|
62
|
+
|
|
63
|
+
**React (Vite / CRA)**
|
|
64
|
+
|
|
65
|
+
```tsx
|
|
66
|
+
// src/main.tsx or src/index.tsx
|
|
67
|
+
import '@tramo-digital/styles/css/min.css';
|
|
68
|
+
import '@tramo-digital/react-ui/style.css';
|
|
69
|
+
|
|
70
|
+
import { StrictMode } from 'react';
|
|
71
|
+
import { createRoot } from 'react-dom/client';
|
|
72
|
+
import App from './App';
|
|
73
|
+
|
|
74
|
+
createRoot(document.getElementById('root')!).render(
|
|
75
|
+
<StrictMode>
|
|
76
|
+
<App />
|
|
77
|
+
</StrictMode>,
|
|
78
|
+
);
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
**Next.js (App Router)**
|
|
82
|
+
|
|
83
|
+
```tsx
|
|
84
|
+
// app/layout.tsx
|
|
85
|
+
import '@tramo-digital/styles/css/min.css';
|
|
86
|
+
import '@tramo-digital/react-ui/style.css';
|
|
87
|
+
|
|
88
|
+
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
89
|
+
return (
|
|
90
|
+
<html lang="en">
|
|
91
|
+
<body>{children}</body>
|
|
92
|
+
</html>
|
|
93
|
+
);
|
|
94
|
+
}
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
**Astro**
|
|
98
|
+
|
|
99
|
+
```astro
|
|
100
|
+
---
|
|
101
|
+
// src/layouts/Layout.astro
|
|
102
|
+
import '@tramo-digital/styles/css/min.css';
|
|
103
|
+
import '@tramo-digital/react-ui/style.css';
|
|
104
|
+
---
|
|
105
|
+
<html lang="en">
|
|
106
|
+
<body><slot /></body>
|
|
107
|
+
</html>
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
> [!WARNING]
|
|
111
|
+
> If you skip the design tokens import
|
|
112
|
+
> (`@tramo-digital/styles/css/min.css`), components will appear
|
|
113
|
+
> unstyled — missing colors, fonts, and spacing.
|
|
38
114
|
|
|
39
115
|
## Quick start
|
|
40
116
|
|
|
41
117
|
```tsx
|
|
42
|
-
import
|
|
118
|
+
import '@tramo-digital/styles/css/min.css';
|
|
43
119
|
import '@tramo-digital/react-ui/style.css';
|
|
120
|
+
import { Frame, Hero, Card, GridContainer, GridItem } from '@tramo-digital/react-ui';
|
|
44
121
|
|
|
45
122
|
function App() {
|
|
46
123
|
return (
|
|
@@ -242,10 +319,11 @@ import { Frame } from '@tramo-digital/react-ui';
|
|
|
242
319
|
|
|
243
320
|
## Module exports
|
|
244
321
|
|
|
245
|
-
| Export path | Description
|
|
246
|
-
| ------------------------------------ |
|
|
247
|
-
| `@tramo-digital/react-ui` | All components and hooks
|
|
248
|
-
| `@tramo-digital/react-ui/style.css` | Compiled CSS bundle
|
|
322
|
+
| Export path | Description |
|
|
323
|
+
| ------------------------------------ | ------------------------------------------ |
|
|
324
|
+
| `@tramo-digital/react-ui` | All components and hooks |
|
|
325
|
+
| `@tramo-digital/react-ui/style.css` | Compiled component CSS bundle |
|
|
326
|
+
| `@tramo-digital/styles/css/min.css` | Design tokens (from companion package) |
|
|
249
327
|
|
|
250
328
|
## Development workflow
|
|
251
329
|
|