@ankhorage/surface 0.1.4 โ 0.1.5
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/CHANGELOG.md +6 -0
- package/README.md +23 -184
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
package/README.md
CHANGED
|
@@ -1,196 +1,35 @@
|
|
|
1
|
-
#
|
|
1
|
+
# surface
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A minimal design foundation for React Native and React Native Web.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
## ๐ฏ What you get
|
|
6
|
+
- Predictable layout system
|
|
7
|
+
- Theme-driven styling
|
|
8
|
+
- Cross-platform consistency
|
|
6
9
|
|
|
7
|
-
##
|
|
8
|
-
|
|
9
|
-
-
|
|
10
|
-
-
|
|
11
|
-
- Shared interaction, field-state, and overlay patterns.
|
|
12
|
-
- Small but complete foundation layer: enough to build on, not a product-pattern kit.
|
|
13
|
-
|
|
14
|
-
## Install
|
|
10
|
+
## โจ Features
|
|
11
|
+
- Token-based theming
|
|
12
|
+
- Layout primitives
|
|
13
|
+
- Responsive utilities
|
|
15
14
|
|
|
15
|
+
## ๐ Installation
|
|
16
16
|
```bash
|
|
17
|
-
bun add @ankhorage/surface
|
|
17
|
+
bun add @ankhorage/surface
|
|
18
18
|
```
|
|
19
19
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
- `react`
|
|
23
|
-
- `react-native`
|
|
24
|
-
- `@expo/vector-icons` for icon rendering
|
|
25
|
-
- `expo-font` when using runtime font registration
|
|
26
|
-
|
|
27
|
-
## Quick Start
|
|
28
|
-
|
|
20
|
+
## ๐ฆ Usage
|
|
29
21
|
```tsx
|
|
30
|
-
import
|
|
31
|
-
import { Button, Stack, Text, ThemeProvider } from '@ankhorage/surface';
|
|
32
|
-
|
|
33
|
-
const themeConfig = {
|
|
34
|
-
id: 'app',
|
|
35
|
-
name: 'App',
|
|
36
|
-
light: {
|
|
37
|
-
primaryColor: '#2563eb',
|
|
38
|
-
harmony: 'monochromatic',
|
|
39
|
-
systemTone: 'neutral',
|
|
40
|
-
},
|
|
41
|
-
dark: {
|
|
42
|
-
primaryColor: '#2563eb',
|
|
43
|
-
harmony: 'monochromatic',
|
|
44
|
-
systemTone: 'neutral',
|
|
45
|
-
},
|
|
46
|
-
};
|
|
22
|
+
import { Box, Text } from '@ankhorage/surface'
|
|
47
23
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
<Text variant="body">Surface is ready.</Text>
|
|
53
|
-
<Button>Continue</Button>
|
|
54
|
-
</Stack>
|
|
55
|
-
</ThemeProvider>
|
|
56
|
-
);
|
|
57
|
-
}
|
|
24
|
+
<Box padding="lg" gap="md">
|
|
25
|
+
<Text variant="title">Title</Text>
|
|
26
|
+
<Text>Content</Text>
|
|
27
|
+
</Box>
|
|
58
28
|
```
|
|
59
29
|
|
|
60
|
-
##
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
import React from 'react';
|
|
64
|
-
import {
|
|
65
|
-
Button,
|
|
66
|
-
Field,
|
|
67
|
-
HelperText,
|
|
68
|
-
Modal,
|
|
69
|
-
Stack,
|
|
70
|
-
Text,
|
|
71
|
-
TextInput,
|
|
72
|
-
ThemeProvider,
|
|
73
|
-
} from '@ankhorage/surface';
|
|
74
|
-
|
|
75
|
-
export function SignInCard() {
|
|
76
|
-
return (
|
|
77
|
-
<ThemeProvider initialConfig={themeConfig}>
|
|
78
|
-
<Stack gap="m" p="l">
|
|
79
|
-
<Field helperText="We only use this for sign-in." label="Email">
|
|
80
|
-
<TextInput autoCapitalize="none" keyboardType="email-address" />
|
|
81
|
-
</Field>
|
|
82
|
-
|
|
83
|
-
<Field errorText="Password is required." invalid label="Password">
|
|
84
|
-
<TextInput secureTextEntry />
|
|
85
|
-
</Field>
|
|
86
|
-
|
|
87
|
-
<Button fullWidth>Sign in</Button>
|
|
88
|
-
|
|
89
|
-
<Modal visible={false}>
|
|
90
|
-
<Text variant="body">Overlay content uses the same theme + spacing system.</Text>
|
|
91
|
-
</Modal>
|
|
92
|
-
|
|
93
|
-
<HelperText tone="muted">
|
|
94
|
-
Forms, controls, and overlays are meant to compose without extra glue code.
|
|
95
|
-
</HelperText>
|
|
96
|
-
</Stack>
|
|
97
|
-
</ThemeProvider>
|
|
98
|
-
);
|
|
99
|
-
}
|
|
100
|
-
```
|
|
101
|
-
|
|
102
|
-
## Included APIs
|
|
103
|
-
|
|
104
|
-
### Providers and theme
|
|
105
|
-
|
|
106
|
-
- `ThemeProvider`, `useTheme`, `useThemeConfig`, `useThemeMode`
|
|
107
|
-
- `FontProvider`, `useFontContext`
|
|
108
|
-
- `TranslationProvider`, `useTranslationContext`
|
|
109
|
-
- `createTheme`, `resolveToken`
|
|
110
|
-
|
|
111
|
-
### Responsive helpers
|
|
112
|
-
|
|
113
|
-
- `ResponsiveProvider`, `useResponsiveRuntime`, `useBreakpoint`
|
|
114
|
-
- `BREAKPOINTS`, `BREAKPOINT_ORDER`, `getBreakpointFromWidth`, `resolveResponsive`
|
|
115
|
-
|
|
116
|
-
### Layout
|
|
117
|
-
|
|
118
|
-
- `Box`, `Surface`
|
|
119
|
-
- `Stack`, `Inline`, `Grid`, `Template`
|
|
120
|
-
- `Container`, `Center`, `Divider`, `Spacer`, `Show`
|
|
121
|
-
|
|
122
|
-
### Typography and primitives
|
|
123
|
-
|
|
124
|
-
- `Text`, `Heading`, `Icon`, `ButtonBase`
|
|
125
|
-
|
|
126
|
-
### Actions and display
|
|
127
|
-
|
|
128
|
-
- `Button`, `IconButton`
|
|
129
|
-
- `Card`, `Badge`, `ListItem`
|
|
130
|
-
|
|
131
|
-
### Forms and controls
|
|
132
|
-
|
|
133
|
-
- `Field`, `Label`, `HelperText`
|
|
134
|
-
- `TextInput`, `Textarea`
|
|
135
|
-
- `Checkbox`, `Radio`, `Switch`
|
|
136
|
-
|
|
137
|
-
### Overlays and navigation
|
|
138
|
-
|
|
139
|
-
- `Modal`, `Drawer`, `Tooltip`, `Menu`
|
|
140
|
-
- `Tabs`, `TabList`, `Tab`, `TabPanel`
|
|
141
|
-
- `ToastProvider`, `Toast`, `useToast`
|
|
142
|
-
|
|
143
|
-
### Utilities
|
|
144
|
-
|
|
145
|
-
- `deepMerge`, `isDeepEqual`
|
|
146
|
-
|
|
147
|
-
## Docs-Lite Examples
|
|
148
|
-
|
|
149
|
-
Small usage references live in
|
|
150
|
-
[docs/examples.md](https://github.com/ankhorage/surface/blob/main/docs/examples.md):
|
|
151
|
-
|
|
152
|
-
- provider shell
|
|
153
|
-
- form composition
|
|
154
|
-
- modal and drawer composition
|
|
155
|
-
- tabs and menu usage
|
|
156
|
-
- checkbox, radio, and switch usage
|
|
157
|
-
- theme override example
|
|
158
|
-
|
|
159
|
-
## Scope Boundary
|
|
160
|
-
|
|
161
|
-
Surface is for reusable foundation concerns:
|
|
162
|
-
|
|
163
|
-
- layout primitives
|
|
164
|
-
- text and icon primitives
|
|
165
|
-
- semantic tokens and theming
|
|
166
|
-
- responsive helpers
|
|
167
|
-
- interaction primitives
|
|
168
|
-
- form controls
|
|
169
|
-
- overlays and navigation primitives
|
|
170
|
-
|
|
171
|
-
Surface is not for ready-made product patterns:
|
|
172
|
-
|
|
173
|
-
- auth flows
|
|
174
|
-
- app shells and dashboards
|
|
175
|
-
- data tables and charts
|
|
176
|
-
- settings panels
|
|
177
|
-
- product-specific dialogs and layouts
|
|
178
|
-
|
|
179
|
-
Those belong in ZORA.
|
|
180
|
-
|
|
181
|
-
## Status
|
|
182
|
-
|
|
183
|
-
Surface is in the stabilization phase: the goal is to keep the public API deliberate, typed, and dependency-ready for downstream packages.
|
|
184
|
-
|
|
185
|
-
- Foundation work stays in Surface when it is broadly reusable across RN and RN Web.
|
|
186
|
-
- Product-like patterns should move to ZORA instead of expanding Surface into a UI kit.
|
|
187
|
-
- Release and freeze expectations are tracked in
|
|
188
|
-
[docs/release-checklist.md](https://github.com/ankhorage/surface/blob/main/docs/release-checklist.md).
|
|
189
|
-
|
|
190
|
-
## Changelog
|
|
191
|
-
|
|
192
|
-
Version history is maintained in [CHANGELOG.md](./CHANGELOG.md). New release notes should flow through Changesets so the published changelog matches the package surface.
|
|
193
|
-
|
|
194
|
-
## License
|
|
30
|
+
## ๐งช Use Cases
|
|
31
|
+
- Design system foundations
|
|
32
|
+
- Cross-platform layout abstraction
|
|
195
33
|
|
|
196
|
-
|
|
34
|
+
## ๐ง Why this exists
|
|
35
|
+
Bridges the gap between raw primitives and full UI frameworks.
|
package/package.json
CHANGED