arloui 0.1.3 → 0.1.4
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 +134 -0
- package/dist/cli.cjs +1 -1
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
# Arlo UI
|
|
2
|
+
|
|
3
|
+
Premium, copy-paste React Native components. Token-driven. No black boxes.
|
|
4
|
+
|
|
5
|
+
Arlo UI gives Expo and React Native projects an owned component layer: choose a component,
|
|
6
|
+
copy its source into your app with the CLI, and customize it like any other local code.
|
|
7
|
+
|
|
8
|
+
- Mobile-first components for Expo and bare React Native
|
|
9
|
+
- Light and dark themes powered by shared design tokens
|
|
10
|
+
- React Native `StyleSheet` source with no required styling DSL
|
|
11
|
+
- Accessible states, touch targets, motion, and native interaction patterns
|
|
12
|
+
- A registry workflow inspired by shadcn/ui
|
|
13
|
+
|
|
14
|
+
[Documentation](https://arloui.dev) | [Browse components](https://arloui.dev/docs/components)
|
|
15
|
+
|
|
16
|
+
## Requirements
|
|
17
|
+
|
|
18
|
+
- Node.js 20 or newer
|
|
19
|
+
- An Expo or bare React Native project
|
|
20
|
+
|
|
21
|
+
## Quick Start
|
|
22
|
+
|
|
23
|
+
Run the CLI from the root of your app:
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
npx arloui@latest init
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
`init` creates `arlo.json` and installs the Arlo UI tokens and theme provider. Then add one or
|
|
30
|
+
more components:
|
|
31
|
+
|
|
32
|
+
```bash
|
|
33
|
+
npx arloui@latest add button input
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
The default structure is:
|
|
37
|
+
|
|
38
|
+
```text
|
|
39
|
+
components/ui/ # component source owned by your app
|
|
40
|
+
lib/arloui/ # tokens and theme provider
|
|
41
|
+
arlo.json # registry and output configuration
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
The CLI prints any npm or native dependencies required by the selected components. Install those
|
|
45
|
+
dependencies using the command shown after `add` completes.
|
|
46
|
+
|
|
47
|
+
## Set Up The Theme
|
|
48
|
+
|
|
49
|
+
Wrap the application with the generated `ThemeProvider`. With Expo Router:
|
|
50
|
+
|
|
51
|
+
```tsx
|
|
52
|
+
// app/_layout.tsx
|
|
53
|
+
import { Slot } from 'expo-router';
|
|
54
|
+
import { ThemeProvider } from '@/lib/arloui/theme-provider';
|
|
55
|
+
|
|
56
|
+
export default function RootLayout() {
|
|
57
|
+
return (
|
|
58
|
+
<ThemeProvider>
|
|
59
|
+
<Slot />
|
|
60
|
+
</ThemeProvider>
|
|
61
|
+
);
|
|
62
|
+
}
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
Use the copied components directly from your project:
|
|
66
|
+
|
|
67
|
+
```tsx
|
|
68
|
+
import { Button } from '@/components/ui/button';
|
|
69
|
+
|
|
70
|
+
export function ContinueButton() {
|
|
71
|
+
return (
|
|
72
|
+
<Button tone="primary" appearance="solid" onPress={() => console.log('Continue')}>
|
|
73
|
+
Continue
|
|
74
|
+
</Button>
|
|
75
|
+
);
|
|
76
|
+
}
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
## Commands
|
|
80
|
+
|
|
81
|
+
| Command | Purpose |
|
|
82
|
+
| ----------------------------- | ----------------------------------------------------------- |
|
|
83
|
+
| `npx arloui init` | Create `arlo.json`, tokens, and the theme provider |
|
|
84
|
+
| `npx arloui add` | Select components interactively |
|
|
85
|
+
| `npx arloui add button input` | Add specific components and their registry dependencies |
|
|
86
|
+
| `npx arloui list` | List everything available in the registry |
|
|
87
|
+
| `npx arloui diff button` | Compare a local component with the current registry version |
|
|
88
|
+
|
|
89
|
+
Use `--yes` to accept defaults in automated workflows:
|
|
90
|
+
|
|
91
|
+
```bash
|
|
92
|
+
npx arloui init --yes
|
|
93
|
+
npx arloui add button --yes
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
Use `--overwrite` when you intentionally want the registry source to replace local component
|
|
97
|
+
files:
|
|
98
|
+
|
|
99
|
+
```bash
|
|
100
|
+
npx arloui add button --overwrite
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
Review local changes before committing after an overwrite. Your copied components belong to your
|
|
104
|
+
application, and Arlo UI will not update them silently.
|
|
105
|
+
|
|
106
|
+
## Configuration
|
|
107
|
+
|
|
108
|
+
The generated `arlo.json` controls the registry and destination folders:
|
|
109
|
+
|
|
110
|
+
```json
|
|
111
|
+
{
|
|
112
|
+
"$schema": "https://arloui.dev/schemas/arlo-config-v1.json",
|
|
113
|
+
"registry": "https://arloui.dev/r",
|
|
114
|
+
"aliases": {
|
|
115
|
+
"components": "components/ui",
|
|
116
|
+
"tokens": "lib/arloui",
|
|
117
|
+
"theme": "lib/arloui",
|
|
118
|
+
"lib": "lib/arloui"
|
|
119
|
+
},
|
|
120
|
+
"style": "default"
|
|
121
|
+
}
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
Run `npx arloui init` without `--yes` to choose different component and foundation directories.
|
|
125
|
+
|
|
126
|
+
## Copy-Paste, Not A Component Dependency
|
|
127
|
+
|
|
128
|
+
The `arloui` npm package is the registry CLI. Components are copied into your repository rather
|
|
129
|
+
than imported from this package at runtime. This means you can inspect, edit, test, and ship the
|
|
130
|
+
exact component source used by your app.
|
|
131
|
+
|
|
132
|
+
## License
|
|
133
|
+
|
|
134
|
+
MIT
|
package/dist/cli.cjs
CHANGED
|
@@ -502,7 +502,7 @@ async function list({ cwd }) {
|
|
|
502
502
|
}
|
|
503
503
|
|
|
504
504
|
// src/program.ts
|
|
505
|
-
var cliVersion = false ? "0.1.0" : "0.1.
|
|
505
|
+
var cliVersion = false ? "0.1.0" : "0.1.4";
|
|
506
506
|
function buildProgram() {
|
|
507
507
|
const program = new import_commander.Command();
|
|
508
508
|
program.name("arloui").description(
|