@ankhorage/zora 0.0.1 โ 0.0.3
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 +12 -0
- package/README.md +21 -187
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 0.0.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Refresh the README copy so the published package overview, installation, usage, and positioning match the current messaging.
|
|
8
|
+
|
|
9
|
+
## 0.0.2
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- Update the published Surface dependency to `0.1.4` and align the Expo showcase app for the web-ready package stack.
|
|
14
|
+
|
|
3
15
|
## 0.0.1
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
package/README.md
CHANGED
|
@@ -1,198 +1,32 @@
|
|
|
1
|
-
#
|
|
1
|
+
# zora
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A UI framework for React Native and Web.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
## ๐ฏ What you get
|
|
6
|
+
- Build full screens, not just primitives
|
|
7
|
+
- Consistent spacing and typography
|
|
8
|
+
- Works out of the box with Expo + Web
|
|
6
9
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
## What is ZORA?
|
|
12
|
-
|
|
13
|
-
ZORA is the **design system layer** on top of Surface.
|
|
14
|
-
|
|
15
|
-
- **Surface** โ foundation (primitives, tokens, interactions)
|
|
16
|
-
- **ZORA** โ UI kit (patterns, layouts, polished components)
|
|
17
|
-
|
|
18
|
-
Think:
|
|
19
|
-
|
|
20
|
-
- Surface = engine
|
|
21
|
-
- ZORA = car
|
|
22
|
-
|
|
23
|
-
---
|
|
24
|
-
|
|
25
|
-
## Why the name "Zora"?
|
|
26
|
-
|
|
27
|
-
**Zora** is a Slavic name meaning **dawn**, **sunrise**, or **aurora**.
|
|
28
|
-
|
|
29
|
-
That fits the package well: Surface is the foundation, while ZORA is the layer where that foundation becomes visible, expressive, and product-ready.
|
|
30
|
-
|
|
31
|
-
---
|
|
32
|
-
|
|
33
|
-
## Why use it?
|
|
34
|
-
|
|
35
|
-
Surface gives you flexibility.
|
|
36
|
-
ZORA gives you **speed and consistency**.
|
|
37
|
-
|
|
38
|
-
With ZORA you get:
|
|
39
|
-
|
|
40
|
-
- prebuilt UI patterns
|
|
41
|
-
- opinionated defaults
|
|
42
|
-
- consistent spacing, colors, and typography
|
|
43
|
-
- ready-to-use layouts
|
|
44
|
-
- production-ready components
|
|
45
|
-
|
|
46
|
-
---
|
|
47
|
-
|
|
48
|
-
## Quick example
|
|
49
|
-
|
|
50
|
-
```tsx
|
|
51
|
-
import { Page, PageHeader, FormField, Input, Button } from '@ankhorage/zora'
|
|
52
|
-
|
|
53
|
-
export function Login() {
|
|
54
|
-
return (
|
|
55
|
-
<Page>
|
|
56
|
-
<PageHeader title="Sign in" />
|
|
57
|
-
|
|
58
|
-
<FormField label="Email">
|
|
59
|
-
<Input placeholder="you@example.com" />
|
|
60
|
-
</FormField>
|
|
61
|
-
|
|
62
|
-
<FormField label="Password">
|
|
63
|
-
<Input secureTextEntry />
|
|
64
|
-
</FormField>
|
|
65
|
-
|
|
66
|
-
<Button tone="primary">Sign in</Button>
|
|
67
|
-
</Page>
|
|
68
|
-
)
|
|
69
|
-
}
|
|
70
|
-
```
|
|
71
|
-
|
|
72
|
-
---
|
|
73
|
-
|
|
74
|
-
## What you get
|
|
75
|
-
|
|
76
|
-
### Core components
|
|
77
|
-
|
|
78
|
-
- Button
|
|
79
|
-
- Input / Textarea
|
|
80
|
-
- Card
|
|
81
|
-
- Modal / Drawer
|
|
82
|
-
- Badge
|
|
83
|
-
|
|
84
|
-
### Patterns
|
|
85
|
-
|
|
86
|
-
- FormField
|
|
87
|
-
- Panel
|
|
88
|
-
- Notice
|
|
89
|
-
- EmptyState
|
|
90
|
-
- ConfirmDialog
|
|
91
|
-
- SettingsRow
|
|
92
|
-
|
|
93
|
-
### Layouts
|
|
94
|
-
|
|
95
|
-
- Page
|
|
96
|
-
- PageHeader
|
|
97
|
-
- PageSection
|
|
98
|
-
- SidebarLayout
|
|
99
|
-
- TopbarLayout
|
|
100
|
-
- SettingsLayout
|
|
101
|
-
- AuthLayout
|
|
102
|
-
|
|
103
|
-
---
|
|
104
|
-
|
|
105
|
-
## Philosophy
|
|
106
|
-
|
|
107
|
-
### 1. Opinionated by default
|
|
108
|
-
|
|
109
|
-
ZORA reduces decision fatigue with strong defaults.
|
|
110
|
-
|
|
111
|
-
### 2. Built on Surface
|
|
112
|
-
|
|
113
|
-
No duplicated logic โ everything composes on `@ankhorage/surface`.
|
|
114
|
-
|
|
115
|
-
### 3. Cross-platform first
|
|
116
|
-
|
|
117
|
-
Works with:
|
|
118
|
-
|
|
119
|
-
- React Native
|
|
120
|
-
- Expo
|
|
121
|
-
- React Native Web
|
|
122
|
-
|
|
123
|
-
### 4. Composable
|
|
124
|
-
|
|
125
|
-
You can always drop down to Surface if needed.
|
|
126
|
-
|
|
127
|
-
---
|
|
128
|
-
|
|
129
|
-
## What ZORA is NOT
|
|
130
|
-
|
|
131
|
-
- โ Not a low-code system
|
|
132
|
-
- โ Not a backend framework
|
|
133
|
-
- โ Not a navigation/router solution
|
|
134
|
-
- โ Not tied to a specific product
|
|
135
|
-
|
|
136
|
-
---
|
|
137
|
-
|
|
138
|
-
## Relationship to Studio
|
|
139
|
-
|
|
140
|
-
ZORA is designed to be used by Studio as a **design-system preset**, not as a hard dependency.
|
|
141
|
-
|
|
142
|
-
Studio can:
|
|
143
|
-
|
|
144
|
-
- render Surface-based apps
|
|
145
|
-
- render ZORA-based apps
|
|
146
|
-
- switch between design systems
|
|
147
|
-
|
|
148
|
-
---
|
|
149
|
-
|
|
150
|
-
## Installation
|
|
10
|
+
## โจ Features
|
|
11
|
+
- Ready-to-use UI components
|
|
12
|
+
- Design consistency
|
|
13
|
+
- Built on primitives
|
|
151
14
|
|
|
15
|
+
## ๐ Installation
|
|
152
16
|
```bash
|
|
153
|
-
bun add @ankhorage/zora
|
|
154
|
-
```
|
|
155
|
-
|
|
156
|
-
---
|
|
157
|
-
|
|
158
|
-
## Expo example
|
|
159
|
-
|
|
160
|
-
There is a runnable Expo showcase app in [`examples/expo-showcase`](./examples/expo-showcase).
|
|
161
|
-
|
|
162
|
-
Because the example uses the local repo package via `file:../..`, build ZORA first so the package `dist/` exists, then install and start the Expo app:
|
|
163
|
-
|
|
164
|
-
```bash
|
|
165
|
-
bun install
|
|
166
|
-
bun run build
|
|
167
|
-
|
|
168
|
-
cd examples/expo-showcase
|
|
169
|
-
npm install
|
|
170
|
-
npm run start
|
|
17
|
+
bun add @ankhorage/zora
|
|
171
18
|
```
|
|
172
19
|
|
|
173
|
-
|
|
20
|
+
## ๐ฆ Usage
|
|
21
|
+
```tsx
|
|
22
|
+
import { Button } from '@ankhorage/zora'
|
|
174
23
|
|
|
175
|
-
|
|
176
|
-
npm run ios
|
|
177
|
-
npm run android
|
|
178
|
-
npm run web
|
|
24
|
+
<Button>Click me</Button>
|
|
179
25
|
```
|
|
180
26
|
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
-
|
|
184
|
-
- patterns
|
|
185
|
-
- layouts
|
|
186
|
-
- `ZoraProvider` with `createZoraTheme(...)`
|
|
187
|
-
|
|
188
|
-
---
|
|
189
|
-
|
|
190
|
-
## Status
|
|
191
|
-
|
|
192
|
-
- v0.0.1 โ Bootstrap phase
|
|
193
|
-
|
|
194
|
-
---
|
|
195
|
-
|
|
196
|
-
## License
|
|
27
|
+
## ๐งช Use Cases
|
|
28
|
+
- Rapid app development
|
|
29
|
+
- UI standardization across teams
|
|
197
30
|
|
|
198
|
-
|
|
31
|
+
## ๐ง Why this exists
|
|
32
|
+
Building UI from scratch is slow. Zora speeds up development with reusable patterns.
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ankhorage/zora",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.3",
|
|
5
5
|
"description": "Opinionated React Native and React Native Web UI kit built on @ankhorage/surface.",
|
|
6
6
|
"homepage": "https://github.com/ankhorage/zora#readme",
|
|
7
7
|
"bugs": {
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
}
|
|
40
40
|
},
|
|
41
41
|
"dependencies": {
|
|
42
|
-
"@ankhorage/surface": "^0.1.
|
|
42
|
+
"@ankhorage/surface": "^0.1.4"
|
|
43
43
|
},
|
|
44
44
|
"files": [
|
|
45
45
|
"dist",
|