@xsolla/xui-cell 0.148.0 → 0.148.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 +219 -0
- package/package.json +5 -5
package/README.md
ADDED
|
@@ -0,0 +1,219 @@
|
|
|
1
|
+
# Cell
|
|
2
|
+
|
|
3
|
+
A cross-platform React cell component that provides a consistent layout structure for list items. Features slots for leading/trailing content and a flexible content area.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @xsolla/xui-cell
|
|
9
|
+
# or
|
|
10
|
+
yarn add @xsolla/xui-cell
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Demo
|
|
14
|
+
|
|
15
|
+
### Basic Cell
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
import * as React from 'react';
|
|
19
|
+
import { Cell } from '@xsolla/xui-cell';
|
|
20
|
+
|
|
21
|
+
export default function BasicCell() {
|
|
22
|
+
return (
|
|
23
|
+
<Cell>
|
|
24
|
+
<Cell.Content>
|
|
25
|
+
Basic cell content
|
|
26
|
+
</Cell.Content>
|
|
27
|
+
</Cell>
|
|
28
|
+
);
|
|
29
|
+
}
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
### With Slots
|
|
33
|
+
|
|
34
|
+
```tsx
|
|
35
|
+
import * as React from 'react';
|
|
36
|
+
import { Cell } from '@xsolla/xui-cell';
|
|
37
|
+
import { Avatar } from '@xsolla/xui-avatar';
|
|
38
|
+
import { ChevronRight } from '@xsolla/xui-icons-base';
|
|
39
|
+
|
|
40
|
+
export default function CellWithSlots() {
|
|
41
|
+
return (
|
|
42
|
+
<Cell>
|
|
43
|
+
<Cell.Slot>
|
|
44
|
+
<Avatar size="md" name="John Doe" />
|
|
45
|
+
</Cell.Slot>
|
|
46
|
+
<Cell.Content>
|
|
47
|
+
<span style={{ fontWeight: 500 }}>John Doe</span>
|
|
48
|
+
<span style={{ color: '#888' }}>john@example.com</span>
|
|
49
|
+
</Cell.Content>
|
|
50
|
+
<Cell.Slot>
|
|
51
|
+
<ChevronRight size={20} />
|
|
52
|
+
</Cell.Slot>
|
|
53
|
+
</Cell>
|
|
54
|
+
);
|
|
55
|
+
}
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
### With Board Style
|
|
59
|
+
|
|
60
|
+
```tsx
|
|
61
|
+
import * as React from 'react';
|
|
62
|
+
import { Cell } from '@xsolla/xui-cell';
|
|
63
|
+
|
|
64
|
+
export default function BoardCell() {
|
|
65
|
+
return (
|
|
66
|
+
<Cell withBoard>
|
|
67
|
+
<Cell.Content>
|
|
68
|
+
Cell with board styling (background, border, rounded corners)
|
|
69
|
+
</Cell.Content>
|
|
70
|
+
</Cell>
|
|
71
|
+
);
|
|
72
|
+
}
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
## Anatomy
|
|
76
|
+
|
|
77
|
+
```jsx
|
|
78
|
+
import { Cell } from '@xsolla/xui-cell';
|
|
79
|
+
|
|
80
|
+
<Cell
|
|
81
|
+
withBoard={false} // Add background, border, and padding
|
|
82
|
+
>
|
|
83
|
+
<Cell.Slot> {/* Leading content (icon, avatar) */}
|
|
84
|
+
<Avatar />
|
|
85
|
+
</Cell.Slot>
|
|
86
|
+
<Cell.Content> {/* Main content area (flexes to fill) */}
|
|
87
|
+
<Text>Title</Text>
|
|
88
|
+
<Text>Subtitle</Text>
|
|
89
|
+
</Cell.Content>
|
|
90
|
+
<Cell.Slot> {/* Trailing content (chevron, button) */}
|
|
91
|
+
<Icon />
|
|
92
|
+
</Cell.Slot>
|
|
93
|
+
</Cell>
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
## Examples
|
|
97
|
+
|
|
98
|
+
### Settings List
|
|
99
|
+
|
|
100
|
+
```tsx
|
|
101
|
+
import * as React from 'react';
|
|
102
|
+
import { Cell } from '@xsolla/xui-cell';
|
|
103
|
+
import { User, Bell } from '@xsolla/xui-icons';
|
|
104
|
+
import { ChevronRight, Shield } from '@xsolla/xui-icons-base';
|
|
105
|
+
|
|
106
|
+
export default function SettingsList() {
|
|
107
|
+
return (
|
|
108
|
+
<div>
|
|
109
|
+
<Cell>
|
|
110
|
+
<Cell.Slot>
|
|
111
|
+
<User size={20} />
|
|
112
|
+
</Cell.Slot>
|
|
113
|
+
<Cell.Content>
|
|
114
|
+
<span>Profile</span>
|
|
115
|
+
</Cell.Content>
|
|
116
|
+
<Cell.Slot>
|
|
117
|
+
<ChevronRight size={16} />
|
|
118
|
+
</Cell.Slot>
|
|
119
|
+
</Cell>
|
|
120
|
+
<Cell>
|
|
121
|
+
<Cell.Slot>
|
|
122
|
+
<Bell size={20} />
|
|
123
|
+
</Cell.Slot>
|
|
124
|
+
<Cell.Content>
|
|
125
|
+
<span>Notifications</span>
|
|
126
|
+
</Cell.Content>
|
|
127
|
+
<Cell.Slot>
|
|
128
|
+
<ChevronRight size={16} />
|
|
129
|
+
</Cell.Slot>
|
|
130
|
+
</Cell>
|
|
131
|
+
<Cell>
|
|
132
|
+
<Cell.Slot>
|
|
133
|
+
<Shield size={20} />
|
|
134
|
+
</Cell.Slot>
|
|
135
|
+
<Cell.Content>
|
|
136
|
+
<span>Security</span>
|
|
137
|
+
</Cell.Content>
|
|
138
|
+
<Cell.Slot>
|
|
139
|
+
<ChevronRight size={16} />
|
|
140
|
+
</Cell.Slot>
|
|
141
|
+
</Cell>
|
|
142
|
+
</div>
|
|
143
|
+
);
|
|
144
|
+
}
|
|
145
|
+
```
|
|
146
|
+
|
|
147
|
+
### Contact Card
|
|
148
|
+
|
|
149
|
+
```tsx
|
|
150
|
+
import * as React from 'react';
|
|
151
|
+
import { Cell } from '@xsolla/xui-cell';
|
|
152
|
+
import { Avatar } from '@xsolla/xui-avatar';
|
|
153
|
+
import { Button } from '@xsolla/xui-button';
|
|
154
|
+
|
|
155
|
+
export default function ContactCard() {
|
|
156
|
+
return (
|
|
157
|
+
<Cell withBoard>
|
|
158
|
+
<Cell.Slot>
|
|
159
|
+
<Avatar
|
|
160
|
+
size="lg"
|
|
161
|
+
src="https://example.com/avatar.jpg"
|
|
162
|
+
name="Jane Smith"
|
|
163
|
+
/>
|
|
164
|
+
</Cell.Slot>
|
|
165
|
+
<Cell.Content>
|
|
166
|
+
<span style={{ fontWeight: 600 }}>Jane Smith</span>
|
|
167
|
+
<span style={{ fontSize: 14, color: '#666' }}>Product Manager</span>
|
|
168
|
+
</Cell.Content>
|
|
169
|
+
<Cell.Slot>
|
|
170
|
+
<Button size="sm" variant="secondary">Message</Button>
|
|
171
|
+
</Cell.Slot>
|
|
172
|
+
</Cell>
|
|
173
|
+
);
|
|
174
|
+
}
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
## API Reference
|
|
178
|
+
|
|
179
|
+
### Cell
|
|
180
|
+
|
|
181
|
+
Container component for cell layout.
|
|
182
|
+
|
|
183
|
+
**Cell Props:**
|
|
184
|
+
|
|
185
|
+
| Prop | Type | Default | Description |
|
|
186
|
+
| :--- | :--- | :------ | :---------- |
|
|
187
|
+
| children | `ReactNode` | - | Cell content (Slot and Content components). |
|
|
188
|
+
| withBoard | `boolean` | `false` | Add background, border, and rounded corners. |
|
|
189
|
+
|
|
190
|
+
---
|
|
191
|
+
|
|
192
|
+
### Cell.Slot
|
|
193
|
+
|
|
194
|
+
Container for leading or trailing content.
|
|
195
|
+
|
|
196
|
+
**Cell.Slot Props:**
|
|
197
|
+
|
|
198
|
+
| Prop | Type | Default | Description |
|
|
199
|
+
| :--- | :--- | :------ | :---------- |
|
|
200
|
+
| children | `ReactNode` | - | Slot content (icons, avatars, buttons). |
|
|
201
|
+
|
|
202
|
+
---
|
|
203
|
+
|
|
204
|
+
### Cell.Content
|
|
205
|
+
|
|
206
|
+
Main content area that expands to fill available space.
|
|
207
|
+
|
|
208
|
+
**Cell.Content Props:**
|
|
209
|
+
|
|
210
|
+
| Prop | Type | Default | Description |
|
|
211
|
+
| :--- | :--- | :------ | :---------- |
|
|
212
|
+
| children | `ReactNode` | - | Content elements. |
|
|
213
|
+
|
|
214
|
+
## Layout
|
|
215
|
+
|
|
216
|
+
- Cell uses horizontal flexbox layout with 12px gap
|
|
217
|
+
- Minimum height of 56px
|
|
218
|
+
- Horizontal padding of 16px
|
|
219
|
+
- `withBoard` adds: secondary background, border, 8px border radius, and 12px vertical padding
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-cell",
|
|
3
|
-
"version": "0.148.
|
|
3
|
+
"version": "0.148.2",
|
|
4
4
|
"main": "./web/index.js",
|
|
5
5
|
"module": "./web/index.mjs",
|
|
6
6
|
"types": "./web/index.d.ts",
|
|
@@ -10,10 +10,10 @@
|
|
|
10
10
|
"build:native": "PLATFORM=native tsup"
|
|
11
11
|
},
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@xsolla/xui-avatar": "0.148.
|
|
14
|
-
"@xsolla/xui-button": "0.148.
|
|
15
|
-
"@xsolla/xui-core": "0.148.
|
|
16
|
-
"@xsolla/xui-primitives-core": "0.148.
|
|
13
|
+
"@xsolla/xui-avatar": "0.148.2",
|
|
14
|
+
"@xsolla/xui-button": "0.148.2",
|
|
15
|
+
"@xsolla/xui-core": "0.148.2",
|
|
16
|
+
"@xsolla/xui-primitives-core": "0.148.2"
|
|
17
17
|
},
|
|
18
18
|
"peerDependencies": {
|
|
19
19
|
"react": ">=16.8.0",
|